111

src/pages/boxes/apply-list.vue

@@ -46,11 +46,34 @@ const doCard = (v: any) => {
     router.jump('/pages/boxes/detail', { id: v.id })
 }
 
+const doCancelApply = async (v: any) => {
+    uni.showModal({
+        title: '提示',
+        content: '是否确定取消预约',
+        confirmColor: '#0094ff',
+        success: async (res) => {
+            if (!res.confirm) return
+            try {
+                uni.showLoading({ title: '取消预约中...', mask: true });
+                const _pa = { id: v.id }
+                const { data, code }: any = await boxesApi.cancel(_pa)
+                if (code != 0) throw new Error()
+                pageRef.value.reload(true)
+                uni.hideLoading()
+                uni.showToast({ title: '取消预约成功', icon: "none" });
+            } catch (error) {
+                console.error(error);
+                uni.hideLoading()
+            }
+        }
+    })
+}
+
 </script>
 
 
 <template>
-    <crud-layout title="订单详情" bg="/static/page/blue-bg.png">
+    <crud-layout title="包厢预约" bg="/static/page/blue-bg.png">
         <z-paging ref="pageRef" height="100%" :fixed="false" v-model="pageHook.list" :default-page-size="5"
             safe-area-inset-bottom :loading-more-enabled="true" :show-scrollbar="false" @query="query"
             :auto-clean-list-when-reload="false" :auto-scroll-to-top-when-reload="false" @scroll="pageHook.scroll">
@@ -60,8 +83,34 @@ const doCard = (v: any) => {
                 </view>
             </template>
             <view class="h-20rpx" />
-            <view class="flex-row card p-20rpx m-b-20rpx" v-for="(v, i) in pageHook.list" :key="i" @tap="doCard(v)">
-
+            <view class="flex-col card p-20rpx m-b-20rpx" v-for="(v, i) in pageHook.list" :key="i" @tap="doCard(v)">
+                <view>
+                    <view class="flex-row items-center justify-between">
+                        <view class="main-text-28">{{ v.boxesName }}</view>
+                        <view>
+                            <tm-tag v-if="v.status == 0" color="success" size="xs">预约成功</tm-tag>
+                            <tm-tag v-if="v.status == 1" color="error" size="xs">预约失败</tm-tag>
+                            <tm-tag v-if="v.status == 2" color="info" size="xs">取消预约</tm-tag>
+                        </view>
+                    </view>
+                    <view class="m-t-10rpx second-text-26">
+                        <text>预约时间</text>
+                        <text class="m-l-5rpx">
+                            {{ v.bookingDate }} {{ hooks.useTime(v.startTime, "{h}:{i}") }} ~ {{
+                                hooks.useTime(v.endTime, "{h}:{i}")
+                            }}
+                        </text>
+                    </view>
+                    <view class="m-t-10rpx second-text-26">
+                        <text>提交时间</text>
+                        <text class="m-l-5rpx">
+                            {{ hooks.useTime(v.createTime, "") }}
+                        </text>
+                    </view>
+                </view>
+                <view class="flex-row items-center justify-end p-t-10rpx">
+                    <view class="botder_btn" @tap.stop="doCancelApply(v)">取消预约</view>
+                </view>
             </view>
         </z-paging>
     </crud-layout>