127 lines
4.7 KiB
Vue
127 lines
4.7 KiB
Vue
<script setup lang="ts">
|
||
import { ref, reactive } from "vue";
|
||
import { onLoad, onShow } from "@dcloudio/uni-app";
|
||
|
||
import { hooks, router } from "@@/index"
|
||
import { boxesApi } from "@@/api"
|
||
|
||
import zTabs from "@@/components/other/z-tabs/z-tabs.vue"
|
||
|
||
const data = {
|
||
tabs: [
|
||
{ id: null, name: '全部', disabled: false },
|
||
{ id: "0", name: '预约成功', disabled: false },
|
||
{ id: "1", name: '预约失败', disabled: false },
|
||
{ id: "2", name: '取消预约', disabled: false },
|
||
],
|
||
}
|
||
const state = reactive<any>({
|
||
pa: {
|
||
status: data.tabs[0].id,
|
||
},
|
||
})
|
||
|
||
onLoad(() => {
|
||
|
||
});
|
||
onShow(() => {
|
||
if (pageRef.value) {
|
||
pageRef.value.reload(false)
|
||
}
|
||
})
|
||
|
||
const pageRef = ref<any>(null)
|
||
const pageHook = hooks.usePage(pageRef, boxesApi.MyBookingPage, null, 'data.list')
|
||
const query = (page: number, pagesize: number) => {
|
||
pageHook.startPage(page, pagesize, false, state.pa);
|
||
}
|
||
|
||
const doTab = (e: any) => {
|
||
const target = data.tabs[e];
|
||
state.pa.status = target.id
|
||
pageRef.value.reload(true)
|
||
}
|
||
|
||
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">
|
||
<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">
|
||
<template #top>
|
||
<view class="bg-white rounded-16rpx px-20rpx m-x-10rpx m-t-15rpx">
|
||
<z-tabs :list="data.tabs" @change="doTab" />
|
||
</view>
|
||
</template>
|
||
<view class="h-20rpx" />
|
||
<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>
|
||
<text class="main-text-28">审批状态：</text>
|
||
<tm-tag v-if="v.status == 1" color="info" size="xs">审批中</tm-tag>
|
||
<tm-tag v-if="v.status == 2" color="success" size="xs">审批通过</tm-tag>
|
||
<tm-tag v-if="v.status == 3" color="error" size="xs">审批不通过</tm-tag>
|
||
<tm-tag v-if="v.status == 4" color="info" size="xs">已取消</tm-tag>
|
||
</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>
|
||
</template>
|
||
|
||
<style lang="scss" scoped></style>
|