148 lines
4.8 KiB
Vue
148 lines
4.8 KiB
Vue
<route lang="jsonc" type="page">{
|
||
"layout": "default",
|
||
"style": {
|
||
"navigationStyle": "custom"
|
||
}
|
||
}</route>
|
||
|
||
<template>
|
||
<view class="pb-40rpx">
|
||
<view>
|
||
<navbar title="订单续订" custom-class='!bg-[#F6F7F8]'></navbar>
|
||
</view>
|
||
|
||
<view class="mt-38rpx">
|
||
<mescroll-body ref="mescrollItem0" @init="mescrollInit" @down="downCallback" @up="Renew.upCallback" :down="downOption" :up="upOption">
|
||
<view class="bg-white rounded-16rpx p-30rpx mx-32rpx relative mb-20rpx" v-for="item in list" :key="item.id">
|
||
<view class="absolute top-0 right-0 bg-[#4C9F44] text-[#fff] w-160rpx h-64rpx leading-64rpx text-center xd" @click="selectRenewOrderId = item.id; showRenewTimePopup = true">
|
||
续单
|
||
</view>
|
||
<view class="flex items-center">
|
||
<view class="mr-28rpx">
|
||
<wd-img width="200rpx" height="200rpx" :src="item.img"></wd-img>
|
||
</view>
|
||
<view class="flex-1">
|
||
<view @click="ComboCard.handleToOrderDetail">
|
||
<view class="font-bold text-28rpx text-[#303133] leading-40rpx line-2 w-260rpx">{{ item.room_name }}</view>
|
||
<view class="font-400 leading-36rpx text-26rpx text-[#606266] mt-10rpx">
|
||
<view>预约时间：{{ item.day_time }} {{ item.start_time }}-{{ item.end_time }}</view>
|
||
<view class="mt-18rpx">预约时长：{{ item.hours }}小时</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</mescroll-body>
|
||
</view>
|
||
|
||
<!-- <view class="bg-[#4C9F44] w-630rpx h-90rpx text-[#fff] text-center leading-90rpx rounded-8rpx mx-auto mt-50rpx">确定</view> -->
|
||
|
||
<!-- 选择续订时间 -->
|
||
<renew-time v-model="showRenewTimePopup" @selectedTime="Renew.handleChooseRenewTime"></renew-time>
|
||
</view>
|
||
</template>
|
||
|
||
|
||
<script lang="ts" setup>
|
||
import ComboCard from '@/components/order/ComboCard.vue'
|
||
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
||
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
|
||
import { router } from '@/utils/tools'
|
||
import { getStoreOrderList, renewOrder} from '@/api/order'
|
||
import { useStoreStore } from '@/store'
|
||
import { toast } from '@/utils/toast'
|
||
|
||
const OSS = inject('OSS')
|
||
const useStore = useStoreStore()
|
||
|
||
// mescroll
|
||
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
|
||
const downOption = {
|
||
auto: true
|
||
}
|
||
const upOption = {
|
||
auto: true,
|
||
textNoMore: '~ 已经到底啦 ~', //无更多数据的提示
|
||
}
|
||
const list = ref<Array<any>>([]) // 茶室列表
|
||
|
||
// 续单
|
||
const reserveTime = ref<Array<any>>([])
|
||
const showRenewTimePopup = ref<boolean>(false)
|
||
const selectRenewOrderId = ref<number>(0)
|
||
|
||
onLoad(async (args) => {
|
||
|
||
// 预定时间
|
||
// const next7 = await getNext7Days()
|
||
// Object.assign(sevenDay, next7)
|
||
})
|
||
|
||
onUnload(() => {
|
||
})
|
||
|
||
const Renew = {
|
||
/**
|
||
* 分页加载
|
||
* @param mescroll
|
||
*/
|
||
upCallback: (mescroll) => {
|
||
// 需要留一下数据为空的时候显示的空数据图标内容
|
||
const filter = {
|
||
page: mescroll.num,
|
||
size: mescroll.size,
|
||
store_id: useStore.defaultStore.id,
|
||
order_status: '',
|
||
}
|
||
|
||
getStoreOrderList(filter).then((res) => {
|
||
const curPageData = res.list || [] // 当前页数据
|
||
if(mescroll.num == 1) list.value = [] // 第一页需手动制空列表
|
||
list.value = list.value.concat(curPageData) //追加新数据
|
||
mescroll.endSuccess(curPageData.length, Boolean(res.more))
|
||
}).catch(() => {
|
||
mescroll.endErr() // 请求失败, 结束加载
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 一键续订时间
|
||
*/
|
||
handleChooseRenewTime: async (item) => {
|
||
uni.showLoading({
|
||
title: '操作中...',
|
||
mask: true
|
||
})
|
||
|
||
try {
|
||
uni.hideLoading()
|
||
await renewOrder({
|
||
id: selectRenewOrderId.value,
|
||
renew_hour: item.value
|
||
})
|
||
|
||
list.value = []
|
||
getMescroll().resetUpScroll()
|
||
|
||
toast.success('续订成功')
|
||
} catch (error) {
|
||
uni.hideLoading()
|
||
toast.info('续订失败，请稍后重试')
|
||
return
|
||
}
|
||
|
||
console.log("🚀 ~ item:", item)
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: $cz-page-background;
|
||
}
|
||
|
||
.xd {
|
||
border-radius: 0rpx 10rpx 0rpx 10rpx;
|
||
}
|
||
</style>
|