优化功能
This commit is contained in:
wangxiaowei
201
src/pages/order/group-detail.vue
Normal file
201
src/pages/order/group-detail.vue
Normal file
@ -0,0 +1,201 @@
|
|||||||
|
<route lang="jsonc" type="page">
|
||||||
|
{
|
||||||
|
"needLogin": true,
|
||||||
|
"layout": "default",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</route>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="pb-254rpx">
|
||||||
|
<!-- 取消订单 -->
|
||||||
|
<wd-message-box selector="wd-message-box-slot"></wd-message-box>
|
||||||
|
|
||||||
|
<view>
|
||||||
|
<navbar :title="title" custom-class='!bg-[#F6F7F8]'></navbar>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 适用门店 -->
|
||||||
|
<view class="bg-white rounded-16rpx px-30rpx pb-32rpx mx-30rpx mt-20rpx">
|
||||||
|
<view class="pt-32rpx text-[#303133] text-32rpx leading-44rpx">适用门店</view>
|
||||||
|
<view class="mt-26rpx flex items-center">
|
||||||
|
<view class="mr-24rpx">
|
||||||
|
<wd-img width="170rpx" height="170rpx" :src="order.teaStoreGroup.img"></wd-img>
|
||||||
|
</view>
|
||||||
|
<view class="flex-1 flex justify-between items-center relative">
|
||||||
|
<view class="">
|
||||||
|
<view class="text-[#303133] text-30rpx leading-40rpx line-2">{{ order.store_msg.name }}</view>
|
||||||
|
<view class="flex items-center mt-14rpx">
|
||||||
|
<view class="mr-8rpx">
|
||||||
|
<wd-img width="28rpx" height="28rpx" :src="`${OSS}icon/icon_location.png`"/>
|
||||||
|
</view>
|
||||||
|
<view class="ml-2rpx text-26rpx text-[#606266] line-1 w-300rpx">{{ order.store_msg.address }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 订单信息 -->
|
||||||
|
<view class="bg-white rounded-16rpx px-30rpx py-34rpx mx-30rpx mt-20rpx">
|
||||||
|
<view class="text-[#303133] text-32rpx leading-44rpx">订单信息</view>
|
||||||
|
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
|
||||||
|
<view>订单编号</view>
|
||||||
|
<view>
|
||||||
|
<text>{{ order.order_sn }}</text>
|
||||||
|
<wd-divider vertical />
|
||||||
|
<text class="text-[#4C9F44]" @click="copy(order.order_sn)">复制</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
|
||||||
|
<view>交易方式</view>
|
||||||
|
<view>{{ order.pay_way_title }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
|
||||||
|
<view>创建时间</view>
|
||||||
|
<view>{{ order.dtime }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx" v-if="order.update_dtime">
|
||||||
|
<view>付款时间</view>
|
||||||
|
<view>{{ order.update_dtime }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { GroupComboOrderStatus, GroupComboOrderStatusTextValue } from '@/utils/order'
|
||||||
|
import { useMessage } from 'wot-design-uni'
|
||||||
|
import { copy } from '@/utils/tools'
|
||||||
|
import { getGroupComboOrderDetail } from '@/api/order'
|
||||||
|
import { handleReleaseTeaRoomOrderHookds, handleCancelOrderHooks } from '@/hooks/useOrder'
|
||||||
|
|
||||||
|
const title = ref<string>('')
|
||||||
|
const OSS = inject('OSS')
|
||||||
|
|
||||||
|
// 取消订单弹窗
|
||||||
|
const message = useMessage('wd-message-box-slot')
|
||||||
|
|
||||||
|
// 订单
|
||||||
|
const orderId = ref<number>(0)
|
||||||
|
const order = ref({
|
||||||
|
order_status: 0,
|
||||||
|
order_sn: '',
|
||||||
|
store_name: '',
|
||||||
|
store_msg: {
|
||||||
|
name: '',
|
||||||
|
address: '',
|
||||||
|
},
|
||||||
|
teaStoreGroup: {
|
||||||
|
img: '',
|
||||||
|
title: '',
|
||||||
|
},
|
||||||
|
pay_way_title: '',
|
||||||
|
dtime: '',
|
||||||
|
update_dtime: '',
|
||||||
|
})
|
||||||
|
|
||||||
|
onLoad(async (args) => {
|
||||||
|
orderId.value = args.id
|
||||||
|
// 获取订单详情
|
||||||
|
OrderDetail.handleInit()
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnload(() => {
|
||||||
|
uni.$off('refreshOrderDetail')
|
||||||
|
})
|
||||||
|
|
||||||
|
const OrderDetail = {
|
||||||
|
/**
|
||||||
|
* 获取订单详情
|
||||||
|
*/
|
||||||
|
handleInit: async () => {
|
||||||
|
const res = await getGroupComboOrderDetail(orderId.value)
|
||||||
|
order.value = res.details
|
||||||
|
title.value = GroupComboOrderStatusTextValue[res.details.order_status].title || '订单详情'
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 取消订单
|
||||||
|
*/
|
||||||
|
handleCancelOrder: () => {
|
||||||
|
message.confirm({
|
||||||
|
title: '确定取消订单？',
|
||||||
|
msg: '取消订单后无法恢复，是否确定取消订单？',
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
cancelButtonProps: {
|
||||||
|
customClass: '!bg-[#F6F7F8] !text-[#303133] !text-32rpx !leading-44rpx !rounded-8rpx',
|
||||||
|
},
|
||||||
|
confirmButtonProps: {
|
||||||
|
customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
|
||||||
|
}
|
||||||
|
}).then((res) => {
|
||||||
|
if (res.action == 'confirm') {
|
||||||
|
uni.$on('refreshOrderList', () => {
|
||||||
|
uni.$off('refreshOrderList')
|
||||||
|
OrderDetail.handleInit()
|
||||||
|
})
|
||||||
|
handleCancelOrderHooks(orderId.value)
|
||||||
|
}
|
||||||
|
}).catch(() => {
|
||||||
|
// 点击取消按钮回调事件
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 释放时间
|
||||||
|
*/
|
||||||
|
handleReleaseOrder: () => {
|
||||||
|
message.confirm({
|
||||||
|
title: '释放时间',
|
||||||
|
msg: '释放预约时间后，包间可重新被预定',
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
cancelButtonProps: {
|
||||||
|
customClass: '!bg-[#F6F7F8] !text-[#303133] !text-32rpx !leading-44rpx !rounded-8rpx',
|
||||||
|
},
|
||||||
|
confirmButtonProps: {
|
||||||
|
customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
|
||||||
|
}
|
||||||
|
}).then((res) => {
|
||||||
|
if (res.action == 'confirm') {
|
||||||
|
uni.$on('refreshOrderList', () => {
|
||||||
|
uni.$off('refreshOrderList')
|
||||||
|
OrderDetail.handleInit()
|
||||||
|
})
|
||||||
|
handleReleaseTeaRoomOrderHookds(orderId.value)
|
||||||
|
}
|
||||||
|
}).catch(() => { })
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
page {
|
||||||
|
background-color: $cz-page-background;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coupon-bg {
|
||||||
|
background-image: url(#{$OSS}images/order/order_image2.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapse {
|
||||||
|
:deep() {
|
||||||
|
.wd-collapse-item::after,
|
||||||
|
.wd-collapse-item__header.is-expanded::after {
|
||||||
|
background: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wd-collapse-item__body {
|
||||||
|
padding-top: 0 !important;
|
||||||
|
padding-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user