wangxiaowei/chazhi_store
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

移除一些不要的文件

Browse Source
This commit is contained in:
wangxiaowei
2025-12-19 21:47:31 +08:00
parent efc0d6fbd2
commit 1a8e0ae847
18 changed files with 0 additions and 3683 deletions
Download Patch File Download Diff File Expand all files Collapse all files

457
src/bundle/order/after-sales/after-sales.vue
View File

@ -1,457 +0,0 @@
<route lang="jsonc" type="page">
{
"layout": "default",
"style": {
"navigationStyle": "custom"
}
}
</route>
<template>
<view class="pb-254rpx">
<!-- 售后原因弹出框 -->
<wd-popup v-model="showResonPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
<view class="relative pb-78rpx">
<view class="absolute top-18rpx right-30rpx" @click="showResonPopup = false">
<wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
</view>
<view class="text-36rpx text-[#121212] leading-50rpx text-center pt-50rpx pb-40rpx">售后原因</view>
<view>
<wd-radio-group v-model="reasonModelValue">
<view v-for="(item, index) in reasonGroups" :key="index">
<view class="text-32rpx text-[#303133] leading-44rpx ml-60rpx mb-28rpx">{{ item.title }}</view>
<view v-for="option in item.options" :key="option.value" class="flex items-center justify-between mb-20rpx">
<view class="text-28rpx text-[#303133] ml-60rpx">{{ option.label }}</view>
<view class="mr-28rpx">
<wd-radio :value="option.value" checked-color="#4C9F44" size='large' shape="dot"></wd-radio>
</view>
</view>
<!-- 分隔线 -->
<view class="ml-30rpx" v-if="index === 0" >
<wd-divider color="#F6F7F9"/>
</view>
</view>
</wd-radio-group>
</view>
<view class="w-630rpx h-90rpx leading-90rpx text-center bg-[#4C9F44] rounded-8rpx text-[#fff] mx-auto mt-160rpx" @click="AfterSales.handleSelectReason">确定</view>
</view>
</wd-popup>
<!-- 退款费用详情 -->
<wd-popup v-model="showRefundDetailsPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
<view class="relative pb-78rpx">
<view class="absolute top-18rpx right-30rpx" @click="showResonPopup = false">
<wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
</view>
<view class="text-36rpx text-[#121212] leading-50rpx text-center pt-50rpx pb-40rpx">费用明细</view>
<scroll-view scroll-y class="h-800rpx">
<view class="collapse">
<wd-collapse v-model="refundValue">
<!-- 茶艺师总费用 -->
<wd-collapse-item name="item1">
<template #title="{expanded}">
<view class="flex justify-between items-center">
<view class="font-bold text-30rpx leading-42rpx text-[#303133]">茶艺师总费用</view>
<view class="font-bold text-30rpx leading-42rpx text-[#303133] flex items-center">
<view class="mr-20rpx">￥640.00</view>
<view>
<wd-icon name="arrow-up" size="22rpx" color='#909399' v-if="expanded"></wd-icon>
<wd-icon name="arrow-down" size="22rpx" color='#909399' v-else></wd-icon>
</view>
</view>
</view>
</template>
<view class="bg-[#FBFBFB] rounded-16rpx py-20rpx px-30rpx">
<view class="mb-26rpx">
<view class="font-400 text-28rpx leading-40rpx text-[#303133] flex items-center justify-between mb-16rpx">
<view>服务费</view>
<view>￥640.00</view>
</view>
<view class="font-400 text-24rpx leading-34rpx text-[#909399] flex items-center justify-between">
<view>服务费（￥160元/小时）</view>
<view>x4</view>
</view>
</view>
<view class="mb-24rpx">
<view class="font-400 text-28rpx leading-40rpx text-[#303133] flex items-center justify-between mb-16rpx">
<view>车马费</view>
<view>￥640.00</view>
</view>
<view class="font-400 text-24rpx leading-34rpx text-[#909399] flex items-center justify-between">
<view>车马费（￥160元/公里）</view>
<view>10.3公里</view>
</view>
</view>
<view class="mb-40rpx">
<view class="font-400 text-28rpx leading-40rpx text-[#303133] flex items-center justify-between mb-16rpx">
<view>茶艺服务</view>
<view>￥640.00</view>
</view>
<view class="font-400 text-24rpx leading-34rpx text-[#909399] flex items-center justify-between mb-16rpx">
<view>红茶/绿茶/福鼎白茶/铁观音</view>
<view>￥158</view>
</view>
<view class="font-400 text-24rpx leading-34rpx text-[#909399] flex items-center justify-between">
<view>茶具使用</view>
<view>￥20</view>
</view>
</view>
<view class="mb-24rpx">
<view class="font-400 text-28rpx leading-40rpx text-[#303133] flex items-center justify-between mb-16rpx">
<view>优惠</view>
<view class="text-[#4C9F44]">-￥20.00</view>
</view>
<view class="font-400 text-24rpx leading-34rpx text-[#909399] flex items-center justify-between">
<view>优惠券</view>
<view>-￥20.00</view>
</view>
</view>
</view>
</wd-collapse-item>
<!-- 扣除费用 -->
<wd-collapse-item name="item2">
<template #title="{expanded}">
<view class="flex justify-between items-center">
<view class="font-bold text-30rpx leading-42rpx text-[#303133]">扣除费用</view>
<view class="font-bold text-30rpx leading-42rpx text-[#303133] flex items-center">
<view class="mr-20rpx">￥640.00</view>
<view>
<wd-icon name="arrow-up" size="22rpx" color='#909399' v-if="expanded"></wd-icon>
<wd-icon name="arrow-down" size="22rpx" color='#909399' v-else></wd-icon>
</view>
</view>
</view>
</template>
<view class="bg-[#FBFBFB] rounded-16rpx py-20rpx px-30rpx">
<view class="mb-26rpx">
<view class="font-400 text-28rpx leading-40rpx text-[#303133] flex items-center justify-between mb-16rpx">
<view>50%服务费</view>
<view>￥640.00</view>
</view>
</view>
<view class="mb-24rpx">
<view class="font-400 text-28rpx leading-40rpx text-[#303133] flex items-center justify-between mb-16rpx">
<view>车马费</view>
<view>￥640.00</view>
</view>
</view>
<view class="mb-24rpx">
<view class="font-400 text-28rpx leading-40rpx text-[#303133] flex items-center justify-between mb-16rpx">
<view>优惠券</view>
<view>-￥20.00</view>
</view>
</view>
</view>
</wd-collapse-item>
</wd-collapse>
<view class="bg-[#FBFBFB] rounded-16rpx py-20rpx px-30rpx mx-30rpx mt-20rpx">
<view class="font-400 text-26rpx leading-36rpx text-[#909399]">扣款规则说明</view>
<view class="font-500 text-26rpx leading-48rpx text-[#303133] mt-12rpx">
<view class="">1）茶艺师未出发，100%退款；</view>
<view class="">2）茶艺师已出发未到达目的地，不退车马费；</view>
<view class="">3）茶艺师出发并到达目的地，不退车马费，并且支付茶艺师50%服务费。</view>
</view>
</view>
</view>
</scroll-view>
<view class="mx-60rpx mt-44rpx">
<wd-gap height="2rpx" bg-color="#F6F7F9"></wd-gap>
</view>
<view class="mx-60rpx text-30rpx text-[#303133] leading-42rpx flex items-center justify-between mt-36rpx">
<view>实际退款</view>
<view>￥698.90</view>
</view>
</view>
</wd-popup>
<!-- 平台团购直营店 -->
<view>
<navbar :title="title" custom-class='!bg-[#F6F7F8]'></navbar>
</view>
<view class="text-[#909399] text-26rpx leading-36rpx mx-102rpx mb-40rpx">
<view v-if="orderStatus === OrderStatus.AfterSaleApply || orderStatus === OrderStatus.AfterSaleProcessing">请耐心等待，我们会尽快处理您的请求</view>
<view v-if="orderStatus === OrderStatus.Refunded" class="text-center mt-14rpx">
<view class="text-40rpx text-[#303133] leading-56rpx">
<view v-if="orderType !== OrderSource.TeaSpecialist">退款成功￥128.00</view>
<!-- 茶艺师退款需要有退款详情 -->
<view v-if="orderType === OrderSource.TeaSpecialist" @click="showRefundDetailsPopup = true">
退款成功￥128.00
<wd-icon name="arrow-right" size="40rpx" color="#666666" custom-class="!bg-[#F8F9FA]"></wd-icon>
</view>
</view>
<view class="text-28rpx text-[#606266] leading-54rpx mt-20rpx">谢谢您的信任，我们一定会做的更好</view>
<view class="text-24rpx text-[#606266] leading-34rpx mt-12rpx">2025年4月13日 18:22</view>
</view>
</view>
<!-- 订单 -->
<view class="mx-30rpx">
<view class="bg-white rounded-16rpx p-30rpx">
<view class="flex items-center">
<view class="mr-30rpx">
<!-- <wd-img width="190rpx" height="190rpx" :src="`${OSS}images/home/home_image5.png`" mode="scaleToFill"></wd-img> -->
<wd-img width="190rpx" height="190rpx" :src="comboOrder.group.img" mode="scaleToFill" v-if="orderType === OrderSource.Combo"></wd-img>
</view>
<view class="flex-1">
<!-- 非茶艺师退款 -->
<view class="flex justify-between items-center" @click="handleToTGComboHooks(storeId, comboId)" v-if="orderType === OrderSource.TeaSpecialist">
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx w-362rpx line-1">{{ comboOrder.group.title }} </view>
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
</view>
<!-- 茶艺师退款 -->
<view class="flex justify-between items-center" @click="AfterSales.handleToCombo" v-if="orderType === OrderSource.TeaSpecialist">
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx">这是茶艺师名称</view>
<view class="text-[#909399] text-26rpx leading-36rpx">￥324.22</view>
</view>
<view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
<view v-if="orderType === OrderSource.Combo">{{ comboOrder.group.hour }}小时</view>
<view v-if="orderType === OrderSource.Combo">x1</view>
</view>
<!-- 茶艺师退显示车马费-->
<view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx" v-if="orderType === OrderSource.TeaSpecialist">
<view>车马费（￥3.00元/公里）</view>
<view>￥30.90</view>
</view>
<view class="text-[#606266] text-right mt-26rpx">
<text class="text-24rpx leading-34rpx mr-12rpx">实付</text>
<text class="tetx-32rpx leading-36rpx">￥{{ comboOrder.order_amount }}</text>
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
</view>
</view>
</view>
</view>
</view>
<!-- 售后原因 -->
<view class="bg-white rounded-16rpx px-30rpx py-34rpx mx-30rpx mt-20rpx" @click="showResonPopup = true" v-if="orderStatus === OrderStatus.AfterSaleApply">
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between">
<view class="text-32rpx leading-44rpx text-[#303133]">售后原因</view>
<view>
<text class='text-[#909399] mr-10rpx'>{{ formData.reason ? reasonText : '请至少选择一项' }}</text>
<wd-icon name="arrow-right" size="24rpx" color="#666666" custom-class="!bg-[#F8F9FA]"></wd-icon>
</view>
</view>
</view>
<!-- 订单信息(选填) -->
<view class="bg-white rounded-16rpx px-30rpx pb-32rpx mx-30rpx mt-20rpx" v-if="orderStatus === OrderStatus.AfterSaleApply">
<view class="pt-32rpx text-[#303133] text-32rpx leading-44rpx">
<text>订单信息</text>
<text class="text-26rpx text-[#909399] leading-36rpx ml-20rpx">(选填)</text>
</view>
<view class="mt-28rpx">
<wd-textarea placeholder="有想说的可以在这里写哦！" v-model="formData.info" custom-class='!rounded-18rpx !border-2rpx !border-[#EFF0EF] !bg-[#F8F9FA]' custom-textarea-class='!bg-[#F8F9FA]' />
</view>
</view>
<!-- 售后已完成 -->
<view class="bg-white rounded-16rpx px-30rpx py-34rpx mx-30rpx mt-20rpx" v-if="orderStatus === OrderStatus.Refunded">
<view class="text-[#303133] text-32rpx leading-44rpx">售后订单</view>
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx" v-if="orderType !== OrderSource.TeaSpecialist">
<view>售后原因</view>
<view>买多了/买错了</view>
</view>
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx" v-if="orderType !== OrderSource.TeaSpecialist">
<view>退款金额</view>
<view>￥159.22</view>
</view>
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
<view>申请时间</view>
<view>2019-05-16 13:20:26</view>
</view>
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
<view>退款编号</view>
<view>
<text>7327328627526903</text>
<wd-divider vertical />
<text class="text-[#4C9F44]">复制</text>
</view>
</view>
</view>
<!-- 操作按钮 -->
<view class="w-full fixed bottom-0 left-0 right-0 h-152rpx"
:class="orderStatus === OrderStatus.AfterSaleApply ? '' : 'bg-white'"
v-if="orderType !== OrderSource.TeaSpecialist">
<view class="mt-34rpx">
<!-- 待使用 -->
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center text-[#303133]"
v-if="orderStatus !== OrderStatus.AfterSaleApply">
<view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx mr-30rpx">联系商家</view>
<view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx">联系平台</view>
</view>
<!-- 申请售后 -->
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center"
v-if="orderStatus === OrderStatus.AfterSaleApply" @click="AfterSales.handleSubmitRefund">
<view class="w-630rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]">提交</view>
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
import { OrderStatusTitle, PersonalReasonMap, MerchantReasonMap, ReasonMap, OrderSource, OrderStatus } from '@/utils/order'
import {toast} from '@/utils/toast'
import type { ITeaRoomPackageOrderDetailsResult } from '@/api/types/tea-room'
import { getTeaRoomPackageOrderDetail } from '@/api/tea-room'
import { handleToTGComboHooks } from '@/hooks/useOrder'
/** 表单相关 **/
const reasonText = ref<string>('') // 显示售后原因文本
const reasonModelValue = ref<number>(0) // 售后原因
const showResonPopup = ref<boolean>(false) // 是否显示售后原因弹出框
const reasonGroups = [
{ title: '个人原因', options: PersonalReasonMap },
{ title: '商家原因', options: MerchantReasonMap }
]
interface FormData {
info: string,
reason: number
}
const formData = reactive<FormData>({
info: '', // 订单信息（字符串）
reason: 0 // 售后原因（整数类型，建议和选项value对应）
})
/** 结束 **/
/** 退款详情 **/
const showRefundDetailsPopup = ref<boolean>(false) // 是否显示退款详情弹出框
const refundValue = ref<string[]>(['item1'])
/** 结束 **/
const OSS = inject('OSS')
const title = ref<string>('')
const orderType = ref<string>('') // 订单类型：团购、抖音、茶艺师退款
const orderStatus = ref<string>('') // 订单状态：待使用、退款等
// 订单
const orderId = ref<number>(0)
const storeId = ref<number>(0)
const comboId = ref<number>(0)
// 团购套餐
const comboOrder = ref<ITeaRoomPackageOrderDetailsResult>({
pay: 0,
pay_way_title: '',
order_amount: '',
order_sn: '',
order_status: 0,
dtime: '',
pay_dtime: '',
group: {
id: 0,
title: '',
img: '',
hour: '',
},
store: {
id: 0,
address: '',
latitude: '',
longitude: '',
name: '',
image: '',
contact_phone: '',
store_id: 0,
distance: '',
operation_type: 1
}
})
onLoad((args) => {
// 这里暂时使用 OrderSource.Combo 这个，因为平台团购类型下面都是有共同的售后
title.value = OrderStatusTitle[OrderSource.Combo][args.orderStatus] || '订单详情'
orderId.value = Number(args.orderId)
orderType.value = args.orderType
orderStatus.value = args.orderStatus
storeId.value = Number(args.storeId)
comboId.value = Number(args.comboId)
if (orderType.value === OrderSource.Combo) {
// 获取团购套餐订单详情
AfterSales.handleInitComboDetails()
}
})
const AfterSales = {
/**
* 获取套餐详情
*/
handleInitComboDetails: async () => {
const res = await getTeaRoomPackageOrderDetail({
id: orderId.value,
latitude: uni.getStorageSync('latitude'),
longitude: uni.getStorageSync('longitude')
})
comboOrder.value = res.details
},
handleToCombo: () => {
toast.info('跳转到套餐详情')
},
// 提交申请退款
handleSubmitRefund: () => {
if (formData.reason === 0) {
toast.info('请选择售后原因')
return
}
},
// 选择原因
handleSelectReason: () => {
if (reasonModelValue.value === 0) {
toast.info('请选择售后原因')
return
}
reasonText.value = ReasonMap[reasonModelValue.value]
formData.reason = reasonModelValue.value
showResonPopup.value = false
},
// 查看退款详情
handleRefundDetails: () => {
toast.info('跳转到退款详情')
}
}
</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>

152
src/bundle/order/douyin/douyin-order-detail.vue
View File

@ -1,152 +0,0 @@
<route lang="jsonc" type="page">
{
"layout": "default",
"style": {
"navigationStyle": "custom"
}
}
</route>
<template>
<view class="pb-254rpx">
<!-- 平台团购直营店 -->
<view>
<navbar :title="title" custom-class='!bg-[#F6F7F8]'></navbar>
</view>
<view class="text-[#909399] text-26rpx leading-36rpx mx-102rpx mb-40rpx">
<text v-if="orderStatus === OrderStatus.ToUse">请在2025.12.31(含)前使用</text>
<text v-if="orderStatus === OrderStatus.Used">品一口香茗，让生活慢下来，从一杯好茶开始</text>
</view>
<!-- 待使用下显示 -->
<view class="mx-30rpx bg-white rounded-16rpx p-30rpx">
<view class="flex items-center">
<view class="mr-30rpx">
<wd-img width="190rpx" height="190rpx" :src="`${OSS}images/home/home_image5.png`" mode="scaleToFill"></wd-img>
</view>
<view class="flex-1">
<view class="flex justify-between items-center">
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx w-300rpx line-1">这是团购套餐的名字</view>
<view class="text-26rpx leading-36rpx text-[#909399] mt-8rpx">￥324</view>
</view>
<view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
3小时
</view>
<view class="font-400 text-26rpx text-[#606266] leading-40rpx mt-40rpx">
适用包间：青茶、红茶、绿茶
</view>
</view>
</view>
</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="`${OSS}images/home/home_image5.png`"></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">这是商家的名称这是</view>
<view class="mt-26rpx text-[#909399] text-24rpx leading-34rpx">距您9km</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">青浦区仓路478号青浦区仓路478号青浦区仓路478号青浦区仓路478号青浦区仓路478号青浦区仓路478号</view>
</view>
</view>
<view class="flex absolute top-1/2 right-0 -translate-y-1/2">
<view class="text-center mr-20rpx" @click="douyinOrderDetail.handleLocation">
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_nav.png`"/>
</view>
<view class="text-center" @click="douyinOrderDetail.handleCallPhone">
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_phone.png`"/>
</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>7327328627526903</text>
<wd-divider vertical />
<text class="text-[#4C9F44]">复制</text>
</view>
</view>
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
<view>创建时间</view>
<view>2019-05-16 12:20:26</view>
</view>
</view>
<!-- 操作按钮 -->
<view class="w-full fixed bottom-0 left-0 right-0 bg-white h-152rpx" v-if="orderStatus !== OrderStatus.Used">
<view class="mt-34rpx">
<!-- 待使用 -->
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" v-if="orderStatus === OrderStatus.ToUse">
<view class="w-692rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]">立即预定</view>
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
import { OrderSource, OrderStatus, OrderStatusTitle } from '@/utils/order'
console.log("🚀 ~ OrderStatusTitle:", OrderStatusTitle)
import {toast} from '@/utils/toast'
const OSS = inject('OSS')
const title = ref<string>('')
const type = ref<string>('') // 订单类型：团购、抖音等
const orderStatus = ref<string>('') // 订单状态：待使用、退款等
onLoad((args) => {
title.value = OrderStatusTitle[OrderSource.DouYin][args.orderStatus] || '订单详情'
type.value = args.type
orderStatus.value = args.orderStatus
})
const douyinOrderDetail = {
// 跳转到套餐详情
handleToCombo: () => {
},
// 跳转到包间详情
handleToRoom: () => {
},
// 处理导航逻辑
handleLocation: () => {
toast.info('正在导航...')
// 可以使用uni.navigateTo或其他方式打开地图应用
uni.navigateTo({
url: '/pages/map/map' // 假设有一个地图页面
})
},
// 处理拨打电话逻辑
handleCallPhone: () => {
},
}
</script>
<style lang="scss" scoped>
page {
background-color: $cz-page-background;
}
</style>

130
src/bundle/order/douyin/excharge.vue
View File

@ -1,130 +0,0 @@
<route lang="jsonc" type="page">
{
"layout": "default",
"style": {
"navigationStyle": "custom"
}
}
</route>
<template>
<view class="pb-254rpx">
<!-- 抖音团购兑换 -->
<view>
<navbar title="抖音团购兑换"></navbar>
</view>
<!-- 兑换码 -->
<view class="mt-46rpx pb-86rpx">
<view class="flex items-center justify-center">
<view class="mr-30rpx w-72rpx h-72rpx">
<wd-img width="72rpx" height="72rpx" :src="`${OSS}icon/icon_douyin.png`"></wd-img>
</view>
<view class="text-40rpx text-[#303133] leading-56rpx">抖音兑换</view>
</view>
<view class="mt-42rpx mx-60rpx">
<wd-input
type="text"
placeholder="输入兑换码"
v-model="code"
no-border
custom-class="!bg-[#F6F7F8] !rounded-16rpx"
custom-input-class="!h-104rpx">
<template #prefix>
<view class="ml-38rpx flex items-center" @click="excharge.handleScan">
<view class="w-36rpx h-36rpx">
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_scan.png`"></wd-img>
</view>
<wd-divider vertical />
</view>
</template>
</wd-input>
</view>
<view class="bg-[#4C9F44] text-[#fff] mx-60rpx h-90rpx leading-90rpx text-center rounded-8rpx mt-80rpx" @click="excharge.handleConfirm">确定</view>
</view>
<!-- 间隔线 -->
<view>
<wd-gap bg-color="#F4F5F6" height="20rpx"></wd-gap>
</view>
<!-- 兑换记录 -->
<view class="px-30rpx">
<view class="text-32rpx text-[#303133] leading-144rpx h-144rpx border-b-2rpx border-b-solid border-b-[#E5E5E5]">兑换记录</view>
<view class="w-full">
<view class="h-144rpx border-b-2rpx border-b-solid border-b-[#E5E5E5] flex justify-between items-center" v-for="(item, index) in 3" :key="index">
<view>
<view class="text-[#303133] text-28rpx leading-40rpx">这是团购套餐的名字</view>
<view class="text-[#909399] text-24rpx leading-32rpx mt-10rpx">2025-03-01 11:20</view>
</view>
<view class="font-bold text-36rpx text-[#303133] leading-50rpx">￥129</view>
</view>
</view>
</view>
<wd-message-box selector="wd-message-box-slot"></wd-message-box>
</view>
</template>
<script lang="ts" setup>
import { useMessage } from 'wot-design-uni'
import {toast} from '@/utils/toast'
const OSS = inject('OSS')
const code = ref<string>('')
const message = useMessage('wd-message-box-slot')
const excharge = {
// 扫码
handleScan: () => {
uni.scanCode({
success: (res) => {
if(res.result) {
code.value = res.result
}
},
fail: (err) => {
console.log('scanCode err', err);
}
})
},
// 确认兑换
handleConfirm: () => {
if(!code.value) {
toast.info('兑换失败 请检查兑换码')
return
}
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) => {
// 点击确认按钮回调事件
}).catch(() => {
// 点击取消按钮回调事件
})
}
}
</script>
<style lang="scss" scoped>
page {
background-color: #fff;
}
.coupon-bg {
background-image: url(#{$OSS}images/order/order_image2.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
</style>

176
src/bundle/order/douyin/order-list.vue
View File

@ -1,176 +0,0 @@
<route lang="jsonc" type="page">{
"needLogin": true,
"layout": "default",
"style": {
"navigationStyle": "custom"
}
}</route>
<template>
<view class="">
<view class="order-list">
<navbar title="抖音团购"></navbar>
<view class="bg-white pb-20rpx">
<wd-search v-model="keywords" placeholder="搜索订单信息" hide-cancel placeholder-left custom-class="!h-72rpx"/>
</view>
</view>
<view class="tabs relative">
<wd-tabs v-model="tab" swipeable slidable="always" @change="orderList.handleChangeTab" :lazy="false">
<wd-tab title="全部">
<view class="content mx-30rpx mt-34rpx">
<mescroll-body @init="mescrollInit" @down="downCallback" @up="orderList.upCallback">
<view class="mb-20rpx" v-for="(item, index) in 10" :key="index">
<combo-card :type="OrderSource.DouYin"></combo-card>
</view>
</mescroll-body>
</view>
</wd-tab>
<wd-tab title="待使用">
<view class="content mx-30rpx mt-34rpx">
<mescroll-body @init="mescrollInit" @down="downCallback" @up="orderList.upCallback">
</mescroll-body>
</view>
</wd-tab>
<wd-tab title="已使用">
<view class="content mx-30rpx mt-34rpx">
<mescroll-body @init="mescrollInit" @down="downCallback" @up="orderList.upCallback">
</mescroll-body>
</view>
</wd-tab>
</wd-tabs>
<view class="absolute right-0 top-10rpx excharge w-178rpx h-80rpx leading-80rpx text-[#fff] text-center font-bold text-24rpx leading-34rpx" @click="orderList.handleToExcharge">
去兑换
</view>
</view>
</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 { OrderSource } from '@/utils/order'
/* mescroll */
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
// 菜单
const currentType = ref<number>(1)
const menuList = reactive<Array<{ type: number; title: string }>>([
{
type: 1,
title: '直营店',
},
{
type: 2,
title: '加盟店',
}
])
// 店铺类型
// 搜索
const keywords = ref<string>('')
// tab
const tab = ref<number>(0)
const orderList = {
// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
upCallback: (mescroll) => {
// 需要留一下数据为空的时候显示的空数据图标内容
// list({
// page: mescroll.num,
// size: mescroll.size
// }).then((res: { list: Array<any>, totalPages: Number }) => {
// const curPageData = res.list || [] // 当前页数据
// if(mescroll.num == 1) goods.value = []; // 第一页需手动制空列表
// goods.value = goods.value.concat(curPageData); //追加新数据
// console.log("🚀 ~ goods:", goods)
// mescroll.endByPage(curPageData.length, res.totalPages); //必传参数(当前页的数据个数, 总页数)
// }).catch(() => {
// mescroll.endErr(); // 请求失败, 结束加载
// })
// apiGoods(mescroll.num, mescroll.size).then(res=>{
// const curPageData = res.list || [] // 当前页数据
// if(mescroll.num == 1) goods.value = []; // 第一页需手动制空列表
// goods.value = goods.value.concat(curPageData); //追加新数据
// //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
// //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
// //方法一(推荐): 后台接口有返回列表的总页数 totalPage
// //mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
// //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
// //mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
// //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
// //mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
// //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据.
// mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
// }).catch(()=>{
mescroll.endErr(); // 请求失败, 结束加载
// })
},
// 去兑换
handleToExcharge: () => {
uni.navigateTo({
url: '/bundle/order/douyin/excharge'
})
},
// 切换菜单
handleChangeMenu: (type: number) => {
currentType.value = type
console.log("🚀 ~ currentType.value:", currentType.value)
},
// 切换tab
handleChangeTab: (e: any) => {
tab.value = e.index
}
}
</script>
<style lang="scss">
page {
background-color: $cz-page-background;
}
.tabs {
:deep() {
.wd-tabs,
.wd-tabs__nav {
background-color: transparent !important;
}
.wd-tabs__nav-item {
font-weight: 400 !important;
font-size: 28rpx !important;
color: #606266 !important;
line-height: 40rpx !important;
padding-left: 30rpx;
}
.wd-tabs__nav-item.is-active {
font-weight: 500 !important;
color: #303133 !important;
font-size: 32rpx !important;
line-height: 44rpx !important;
}
}
}
.excharge {
background: url(#{$OSS}images/douyin/douyin_image1.png) 0 0 no-repeat;
background-size: 100%;
}
</style>

234
src/bundle/order/platform/direct-order-detail.vue
View File

@ -1,234 +0,0 @@
<route lang="jsonc" type="page">
{
"layout": "default",
"style": {
"navigationStyle": "custom"
}
}
</route>
<template>
<view class="pb-254rpx">
<!-- 平台团购直营店 -->
<view>
<navbar :title="title" custom-class='!bg-[#F6F7F8]'></navbar>
</view>
<view class="text-[#909399] text-26rpx leading-36rpx mx-102rpx mb-40rpx">
<!-- <text v-if="orderStatus === OrderStatus.ToUse">请在2025.12.31(含)前使用</text> -->
<text v-if="orderStatus === OrderStatus.Used">感谢购买，期待再次光临！</text>
</view>
<!-- 待使用下显示 -->
<view class="mx-30rpx" v-if="orderStatus === OrderStatus.ToUse">
<view class="bg-white rounded-16rpx p-30rpx">
<view class="flex items-center">
<view class="mr-30rpx">
<wd-img width="190rpx" height="190rpx" :src="`${OSS}images/home/home_image5.png`" mode="scaleToFill"></wd-img>
</view>
<view class="flex-1">
<view class="flex justify-between items-center" @click="directOrderDetail.handleToCombo">
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx w-362rpx line-1">团购套餐的可以点击跳转</view>
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
</view>
<view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
<view>3小时</view>
<view>x1</view>
</view>
<view class="text-[#606266] text-right mt-26rpx">
<text class="text-24rpx leading-34rpx mr-12rpx">实付</text>
<text class="tetx-32rpx leading-36rpx">￥29.32</text>
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
</view>
</view>
</view>
<!-- 平台团购直营店待使用 -->
<view class="mt-30rpx font-500 leading-48rpx">
<view class="text-26rpx text-[#606266]">有效期：2025.04.04-2025.12.31</view>
<view class="text-28rpx text-[#303133] mt-18rpx">
<text class="mr-20rpx">券码 1052 4258 5654 125</text>
<text class="text-[#4C9F44]">复制</text>
</view>
</view>
</view>
</view>
<!-- 已使用下显示 -->
<view class="mx-30rpx coupon-bg" v-if="orderStatus === OrderStatus.Used">
<view class="flex items-center px-30rpx pt-30rpx pb-40rpx">
<view class="mr-30rpx">
<wd-img width="190rpx" height="190rpx" :src="`${OSS}images/home/home_image5.png`" mode="scaleToFill"></wd-img>
</view>
<view class="flex-1">
<view class="flex justify-between items-center" @click="directOrderDetail.handleToRoom">
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx line-1 w-300rpx">这个是包间的名称</view>
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
<view class="text-26rpx leading-36rpx text-[#909399]">￥324</view>
</view>
<view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
<view>3小时</view>
<view>x1</view>
</view>
<view class="text-[#606266] text-right mt-26rpx">
<text class="text-24rpx leading-34rpx mr-12rpx">实付</text>
<text class="tetx-32rpx leading-36rpx">￥29.32</text>
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
</view>
</view>
</view>
<view class="px-30rpx mt-28rpx pb-48rpx">
<view class="text-30rpx leading-42rpx text-[#303133]">预约信息</view>
<view class="font-500 text-26rpx leading-48rpx text-[#606266] mt-20rpx">
<view class="mb-20rpx">预约时间：2025-03-18 09:00-12:00</view>
<view>预约时长：3小时</view>
</view>
</view>
</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="`${OSS}images/home/home_image5.png`"></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">这是商家的名称这是</view>
<view class="mt-26rpx text-[#909399] text-24rpx leading-34rpx">距您9km</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">青浦区仓路478号青浦区仓路478号青浦区仓路478号青浦区仓路478号青浦区仓路478号青浦区仓路478号</view>
</view>
</view>
<view class="flex absolute top-1/2 right-0 -translate-y-1/2">
<view class="text-center mr-20rpx" @click="directOrderDetail.handleLocation">
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_nav.png`"/>
</view>
<view class="text-center" @click="directOrderDetail.handleCallPhone">
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_phone.png`"/>
</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>7327328627526903</text>
<wd-divider vertical />
<text class="text-[#4C9F44]">复制</text>
</view>
</view>
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
<view>交易方式</view>
<view>微信支付</view>
</view>
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
<view>创建时间</view>
<view>2019-05-16 12:20:26</view>
</view>
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
<view>付款时间</view>
<view>2019-05-16 13:20:26</view>
</view>
</view>
<!-- 操作按钮 -->
<view class="w-full fixed bottom-0 left-0 right-0 bg-white h-152rpx">
<view class="mt-34rpx">
<!-- 待使用 -->
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" v-if="orderStatus === OrderStatus.ToUse">
<view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133] mr-30rpx" @click="directOrderDetail.handleToRefund">申请退款</view>
<view class="w-330rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]" @click="directOrderDetail.handleToChooseTeaRoom">立即预定</view>
</view>
<!-- 已使用 -->
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" v-if="orderStatus === OrderStatus.Used">
<view class="w-630rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]">再次预定</view>
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
import { OrderSource, OrderStatus, OrderStatusTitle } from '@/utils/order'
import { getTeaRoomPackageOrderDetail } from '@/api/tea-room'
import {toast} from '@/utils/toast'
const OSS = inject('OSS')
const title = ref<string>('')
const type = ref<string>('') // 订单类型：团购、抖音等
const orderStatus = ref<string>('') // 订单状态：待使用、退款等
onLoad((args) => {
title.value = OrderStatusTitle[OrderSource.Combo][args.orderStatus] || '订单详情'
type.value = args.type
orderStatus.value = args.orderStatus
})
const directOrderDetail = {
// 跳转到套餐详情
handleToCombo: () => {
},
// 跳转到包间详情
handleToRoom: () => {
},
// 处理导航逻辑
handleLocation: () => {
toast.info('正在导航...')
// 可以使用uni.navigateTo或其他方式打开地图应用
uni.navigateTo({
url: '/pages/map/map' // 假设有一个地图页面
})
},
// 处理拨打电话逻辑
handleCallPhone: () => {
},
// 跳转到申请退款页面
handleToRefund: () => {
uni.navigateTo({
url: `/bundle/order/after-sales/after-sales?type=direct&orderStatus=${OrderStatus.AfterSaleApply}`
})
},
// 跳转到立即预定页面(选择茶室)
handleToChooseTeaRoom: () => {
uni.navigateTo({
url: `/bundle/tea-room/choose-room`
})
},
}
</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%;
}
</style>

235
src/bundle/order/platform/franchise-order-detail.vue
View File

@ -1,235 +0,0 @@
<route lang="jsonc" type="page">
{
"layout": "default",
"style": {
"navigationStyle": "custom"
}
}
</route>
<template>
<view class="pb-254rpx">
<!-- 平台团购加盟店 -->
<view>
<navbar :title="title" custom-class='!bg-[#F6F7F8]'></navbar>
</view>
<view class="text-[#909399] text-26rpx leading-36rpx mx-102rpx mb-40rpx">
<text v-if="orderStatus === OrderStatus.ToUse">请在2025.12.31(含)前使用</text>
<text v-if="orderStatus === OrderStatus.Used">品一口香茗，让生活慢下来，从一杯好茶开始</text>
</view>
<!-- 待使用下显示 -->
<view class="coupon-bg2 p-30rpx mx-30rpx" v-if="orderStatus === OrderStatus.ToUse">
<view class="flex items-center">
<view class="mr-30rpx">
<wd-img width="190rpx" height="190rpx" :src="`${OSS}images/home/home_image5.png`" mode="scaleToFill"></wd-img>
</view>
<view class="flex-1">
<view class="flex justify-between items-center">
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx line-1 w-300rpx">团购套餐的可以点击跳转</view>
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
</view>
<view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
<view>3小时</view>
<view>x1</view>
</view>
<view class="text-[#606266] text-right mt-26rpx">
<text class="text-24rpx leading-34rpx mr-12rpx">实付</text>
<text class="tetx-32rpx leading-36rpx">￥29.32</text>
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
</view>
</view>
</view>
<view class="mt-30rpx font-500 leading-48rpx text-[#606266] text-26rpx pb-44rpx">
有效期：2025.04.04-2025.12.31
</view>
<view class="px-30rpx mt-60rpx">
<view class="text-center">
<wd-img width="230rpx" height="230rpx" :src="`${OSS}images/reserve_room/reserve_room_image3.png`"></wd-img>
</view>
<view class="text-28rpx text-[#303133] mt-32rpx text-center">
<text class="mr-20rpx">券码 1052 4258 5654 125</text>
<text class="text-[#4C9F44]">复制</text>
</view>
</view>
</view>
<!-- 已使用下显示 -->
<view class="bg-white rounded-16rpx p-30rpx mx-30rpx" v-if="orderStatus === OrderStatus.Used">
<view class="flex items-center">
<view class="mr-30rpx">
<wd-img width="190rpx" height="190rpx" :src="`${OSS}images/home/home_image5.png`" mode="scaleToFill"></wd-img>
</view>
<view class="flex-1">
<view class="flex justify-between items-center">
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx w-300rpx line-1">这是团购套餐的名字</view>
<view class="text-26rpx leading-36rpx text-[#909399] mt-8rpx">￥324</view>
</view>
<view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
<view>3小时</view>
<view>x1</view>
</view>
<view class="text-[#606266] text-right mt-26rpx">
<text class="text-24rpx leading-34rpx mr-12rpx">实付</text>
<text class="tetx-32rpx leading-36rpx">￥29.32</text>
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
</view>
</view>
</view>
</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="`${OSS}images/home/home_image5.png`"></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">这是商家的名称这是</view>
<view class="mt-26rpx text-[#909399] text-24rpx leading-34rpx">距您9km</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">青浦区仓路478号青浦区仓路478号青浦区仓路478号青浦区仓路478号青浦区仓路478号青浦区仓路478号</view>
</view>
</view>
<view class="flex absolute top-1/2 right-0 -translate-y-1/2">
<view class="text-center mr-20rpx" @click="directOrderDetail.handleLocation">
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_nav.png`"/>
</view>
<view class="text-center" @click="directOrderDetail.handleCallPhone">
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_phone.png`"/>
</view>
</view>
</view>
</view>
</view>
<!-- 订单信息 -->
<view class="bg-white rounded-16rpx px-30rpx py-34rpx mx-30rpx mt-20rpx" v-if="orderStatus !== OrderStatus.Refunded">
<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>7327328627526903</text>
<wd-divider vertical />
<text class="text-[#4C9F44]">复制</text>
</view>
</view>
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
<view>交易方式</view>
<view>微信支付</view>
</view>
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
<view>创建时间</view>
<view>2019-05-16 12:20:26</view>
</view>
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
<view>付款时间</view>
<view>2019-05-16 13:20:26</view>
</view>
</view>
<!-- 售后订单 -->
<view class="bg-white rounded-16rpx px-30rpx py-34rpx mx-30rpx mt-20rpx" v-if="orderStatus === OrderStatus.Refunded">
<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>买多了/买错了</view>
</view>
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
<view>退款金额</view>
<view>￥159.22</view>
</view>
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
<view>申请时间</view>
<view>2019-05-16 13:20:26</view>
</view>
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
<view>退款编号</view>
<view>
<text>7327328627526903</text>
<wd-divider vertical />
<text class="text-[#4C9F44]">复制</text>
</view>
</view>
</view>
<!-- 操作按钮 -->
<view class="w-full fixed bottom-0 left-0 right-0 bg-white h-152rpx" v-if="orderStatus !== OrderStatus.Used">
<view class="mt-34rpx">
<!-- 待使用 -->
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" v-if="orderStatus === OrderStatus.ToUse">
<view class="w-630rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133]">申请退款</view>
</view>
<!-- 售后完成 -->
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" v-if="orderStatus === OrderStatus.Refunded">
<view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133] mr-30rpx">联系商家</view>
<view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133]">联系平台</view>
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
import { OrderSource, OrderStatus, OrderStatusTitle } from '@/utils/order'
import {toast} from '@/utils/toast'
const OSS = inject('OSS')
const title = ref<string>('')
const type = ref<string>('') // 订单类型：团购、抖音等
const orderStatus = ref<string>('') // 订单状态：待使用、退款等
onLoad((args) => {
title.value = OrderStatusTitle[OrderSource.Combo][args.orderStatus] || '订单详情'
type.value = args.type
orderStatus.value = args.orderStatus
})
const directOrderDetail = {
// 跳转到套餐详情
handleToCombo: () => {
},
// 跳转到包间详情
handleToRoom: () => {
},
// 处理导航逻辑
handleLocation: () => {
toast.info('正在导航...')
// 可以使用uni.navigateTo或其他方式打开地图应用
uni.navigateTo({
url: '/pages/map/map' // 假设有一个地图页面
})
},
// 处理拨打电话逻辑
handleCallPhone: () => {
},
}
</script>
<style lang="scss">
page {
background-color: $cz-page-background;
}
.coupon-bg2 {
background-image: url(#{$OSS}images/order/order_image1.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
</style>

320
src/bundle/order/platform/order-detail.vue
View File

@ -1,320 +0,0 @@
<route lang="jsonc" type="page">
{
"layout": "default",
"style": {
"navigationStyle": "custom"
}
}
</route>
<template>
<view class="pb-254rpx">
<view>
<navbar :title="title" custom-class='!bg-[#F6F7F8]'></navbar>
</view>
<view class="text-[#909399] text-26rpx leading-36rpx mx-102rpx mb-40rpx">
<!-- <text v-if="orderStatus === OrderStatus.ToUse">请在2025.12.31(含)前使用</text> -->
<text v-if="orderStatus === TeaRoomPackageOrderStatus.Used">感谢购买，期待再次光临！</text>
<view v-if="orderStatus === TeaRoomPackageOrderStatus.Refunded" class="text-center mt-14rpx">
<view class="text-40rpx text-[#303133] leading-56rpx">
<view>退款成功{{ order.order_amount }}</view>
</view>
<view class="text-28rpx text-[#606266] leading-54rpx mt-20rpx">谢谢您的信任，我们一定会做的更好</view>
<view class="text-24rpx text-[#606266] leading-34rpx mt-12rpx">2025年4月13日 18:22</view>
</view>
</view>
<view class="">
<!-- 待使用下显示 -->
<view class="mx-30rpx" v-if="orderStatus === TeaRoomPackageOrderStatus.ToUse">
<view class="bg-white rounded-16rpx p-30rpx">
<view class="flex items-center">
<view class="mr-30rpx">
<wd-img width="190rpx" height="190rpx" :src="order.group.img" mode="scaleToFill"></wd-img>
</view>
<view class="flex-1">
<view class="flex justify-between items-center" @click="handleToTGComboHooks(order.store.id, order.group.id)">
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx w-362rpx line-1">{{ order.group.title }}</view>
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
</view>
<view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
<view>{{ order.group.hour }}小时</view>
<view>x1</view>
</view>
<view class="text-[#606266] text-right mt-26rpx">
<text class="text-24rpx leading-34rpx mr-12rpx">实付</text>
<text class="tetx-32rpx leading-36rpx">￥{{ order.order_amount }}</text>
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
</view>
</view>
</view>
<!-- 平台团购直营店待使用 -->
<view class="mt-30rpx font-500 leading-48rpx" v-if="order.store.operation_type === StoreType.Direct">
<!-- <view class="text-26rpx text-[#606266]">有效期：2025.04.04-2025.12.31</view> -->
<view class="text-28rpx text-[#303133] mt-18rpx">
<text class="mr-20rpx">券码 {{ order.coupon_code }}</text>
<text class="text-[#4C9F44]" @click="copy(order.coupon_code)">复制</text>
</view>
</view>
<!-- 平台团购加盟店待使用 -->
<view class="mt-30rpx font-500 leading-48rpx" v-if="order.store.operation_type === StoreType.Franchise">
<view class="px-30rpx mt-60rpx">
<view class="text-center">
<wd-img width="230rpx" height="230rpx" :src="order.coupon_code_img"></wd-img>
</view>
<view class="text-28rpx text-[#303133] mt-32rpx text-center">
<text class="mr-20rpx">券码 {{ order.coupon_code }}</text>
<text class="text-[#4C9F44]" @click="copy(order.coupon_code)">复制</text>
</view>
</view>
</view>
</view>
</view>
<!-- 已使用下显示 -->
<view class="mx-30rpx coupon-bg" v-if="orderStatus === TeaRoomPackageOrderStatus.Used">
<view class="flex items-center px-30rpx pt-30rpx pb-40rpx">
<view class="mr-30rpx">
<wd-img width="190rpx" height="190rpx" :src="`${OSS}images/home/home_image5.png`" mode="scaleToFill"></wd-img>
</view>
<view class="flex-1">
<view class="flex justify-between items-center" @click="OrderDetail.handleToRoom">
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx line-1 w-300rpx">这个是包间的名称</view>
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
<view class="text-26rpx leading-36rpx text-[#909399]">￥324</view>
</view>
<view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
<view>3小时</view>
<view>x1</view>
</view>
<view class="text-[#606266] text-right mt-26rpx">
<text class="text-24rpx leading-34rpx mr-12rpx">实付</text>
<text class="tetx-32rpx leading-36rpx">￥29.32</text>
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
</view>
</view>
</view>
<view class="px-30rpx mt-28rpx pb-48rpx">
<view class="text-30rpx leading-42rpx text-[#303133]">预约信息</view>
<view class="font-500 text-26rpx leading-48rpx text-[#606266] mt-20rpx">
<view class="mb-20rpx">预约时间：2025-03-18 09:00-12:00</view>
<view>预约时长：3小时</view>
</view>
</view>
</view>
</view>
<!-- 适用门店 -->
<view class="">
<use-store :store="order.store"></use-store>
</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">
<view>付款时间</view>
<view>{{ order.pay_dtime }}</view>
</view>
</view>
<!-- 操作按钮 -->
<view class="w-full fixed bottom-0 left-0 right-0 bg-white h-152rpx">
<!-- 直营店 -->
<view class="mt-34rpx" v-if="order.store.operation_type == StoreType.Direct">
<!-- 待使用 -->
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" v-if="orderStatus === TeaRoomPackageOrderStatus.ToUse">
<view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133] mr-30rpx" @click="OrderDetail.handleToRefund">申请退款</view>
<view class="w-330rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]" @click="OrderDetail.handleUsePackage">立即预定</view>
</view>
<!-- 已使用 -->
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" v-if="orderStatus === TeaRoomPackageOrderStatus.Used">
<view class="w-630rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]">再次预定</view>
</view>
<!-- 已退款 -->
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" v-if="orderStatus === TeaRoomPackageOrderStatus.Refunded">
<view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133] mr-30rpx" @click="OrderDetail.handleCallPhone">联系商家</view>
<view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133]" @click="OrderDetail.handleCallPhone">联系平台</view>
</view>
</view>
<!-- 加盟店 -->
<view class="mt-34rpx" v-if="order.store.operation_type === StoreType.Franchise && orderStatus !== TeaRoomPackageOrderStatus.Used">
<!-- 待使用 -->
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" v-if="orderStatus === TeaRoomPackageOrderStatus.ToUse">
<view class="w-660rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133]" @click="OrderDetail.handleToRefund">申请退款</view>
</view>
<!-- 已退款 -->
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" v-if="orderStatus === TeaRoomPackageOrderStatus.Refunded">
<view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133] mr-30rpx" @click="OrderDetail.handleCallPhone">联系商家</view>
<view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133]" @click="OrderDetail.handleCallPhone">联系平台</view>
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
import { OrderSource, OrderStatus, OrderStatusTitle, TeaRoomPackageOrderStatusTextValue, TeaRoomPackageOrderStatus } from '@/utils/order'
import { getTeaRoomPackageOrderDetail } from '@/api/tea-room'
import type { ITeaRoomPackageOrderDetailsResult } from '@/api/types/tea-room'
import { toast } from '@/utils/toast'
import { handleToTRStoreHooks, handleToTGComboHooks } from '@/hooks/useOrder'
import { router, copy } from '@/utils/tools'
import { ReserveServiceCategory } from '@/utils/order'
import UseStore from '@/components/UseStore.vue'
import { StoreType } from '@/utils/tea'
const OSS = inject('OSS')
const title = ref<string>('')
const type = ref<string>('') // 订单类型：团购、抖音等
// 订单
const orderId = ref<number>(0)
const orderStatus = ref<number>(0) // 订单状态：待使用、退款等
const order = ref<ITeaRoomPackageOrderDetailsResult>({
pay: 0,
pay_way_title: '',
order_amount: '',
order_sn: '',
order_status: 0,
dtime: '',
pay_dtime: '',
coupon_code: '',
coupon_code_img: '',
group: {
id: 0,
title: '',
img: '',
hour: '',
},
store: {
id: 0,
address: '',
latitude: '',
longitude: '',
name: '',
image: '',
contact_phone: '',
store_id: 0,
distance: '',
operation_type: 1
}
})
onLoad((args) => {
title.value = OrderStatusTitle[OrderSource.Combo][args.orderStatus] || '订单详情'
orderId.value = args.orderId
// 获取订单详情
OrderDetail.handleInit()
type.value = args.type
orderStatus.value = args.orderStatus
})
const OrderDetail = {
/**
* 获取订单详情
*/
handleInit: async () => {
const res = await getTeaRoomPackageOrderDetail({
id: orderId.value,
latitude: uni.getStorageSync('latitude'),
longitude: uni.getStorageSync('longitude')
})
order.value = res.details
// order.value = res.details
// console.log("🚀 ~ order.value :", order.value )
title.value = TeaRoomPackageOrderStatusTextValue[order.value.order_status].title || '订单详情'
orderStatus.value = order.value.order_status
},
/**
* 跳转到包间详情
*/
handleToRoom: () => {
handleToTRStoreHooks(order.value.store.id, order.value.store.store_id)
},
/**
* 处理导航逻辑
*/
handleLocation: () => {
uni.openLocation({
latitude: Number(order.value.store.latitude),
longitude: Number(order.value.store.longitude),
name: order.value.store.name,
address: order.value.store.address,
scale: 18
})
},
/**
* 处理拨打电话逻辑
*/
handleCallPhone: () => {
uni.makePhoneCall({
phoneNumber: order.value.store.contact_phone
})
},
/**
* 跳转到申请退款页面
*/
handleToRefund: () => {
router.navigateTo(`/bundle/order/after-sales/after-sales?orderId=${orderId.value}&storeId=${order.value.store.id}&comboId=${order.value.group.id}&orderType=${OrderSource.Combo}&orderStatus=${OrderStatus.AfterSaleApply}`)
},
/**
* 跳转到立即预定页面(选择茶室)
*/
handleToChooseTeaRoom: () => {
router.navigateTo(`/bundle/tea-room/choose-room`)
},
/**
* 使用套餐
*/
handleUsePackage: () => {
router.navigateTo(`/bundle/tea-room/choose-room?groupCouponId=${order.value.group.id}&teaRoomId=${order.value.store.id}`)
},
}
</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%;
}
</style>

174
src/bundle/order/platform/order-list.vue
View File

@ -1,174 +0,0 @@
<route lang="jsonc" type="page">{
"needLogin": true,
"layout": "default",
"style": {
"navigationStyle": "custom"
}
}</route>
<template>
<view class="">
<view class="order-list">
<navbar layoutLeft>
<template #left>
<view class="flex items-center ml-24rpx">
<view @click.stop="OrderList.handleChangeMenu(item.type)" class="mr-28rpx" :class="item.type == currentType ? 'text-36rpx text-[#303133] leading-50rpx' : 'text-32rpx text-[#606266] leading-44rpx font-400'" v-for="(item, index) in menuList" :key="index">
{{ item.title }}
</view>
</view>
</template>
</navbar>
<view class="bg-white pb-20rpx">
<wd-search v-model="keywords" placeholder="搜索订单信息" hide-cancel placeholder-left custom-class="!h-72rpx" @search="OrderList.handleResetSearch()"/>
</view>
</view>
<view class="tabs">
<wd-tabs v-model="tab" swipeable slidable="always" @change="OrderList.handleChangeTabs" :lazy="false">
<wd-tab title="全部" :name="TeaRoomPackageOrderStatusText.All"></wd-tab>
<wd-tab title="待使用" :name="TeaRoomPackageOrderStatusText.ToUse"></wd-tab>
<wd-tab title="已使用" :name="TeaRoomPackageOrderStatusText.Used"></wd-tab>
</wd-tabs>
</view>
<view class="content mx-30rpx mt-34rpx">
<mescroll-body ref="mescrollItem" @init="mescrollInit" @down="downCallback" @up="OrderList.upCallback" :down="downOption" :up="upOption">
<view class="mb-20rpx" v-for="(item, index) in list" :key="index">
<combo-card :type="OrderSource.Combo" :order="item"></combo-card>
</view>
</mescroll-body>
</view>
</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 { OrderSource } from '@/utils/order'
import { getTeaRoomPackageOrderList } from '@/api/tea-room'
import { TeaRoomPackageOrderStatusText, TeaRoomPackageOrderStatusValue } from '@/utils/order'
// mescroll
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
const downOption = {
auto: true
}
const upOption = {
auto: true,
textNoMore: '~ 已经到底啦 ~', //无更多数据的提示
}
const orderStatus = ref<string>('')
const list = ref<Array<any>>([]) // 茶室列表
const keywords = ref<string>('') // 搜索关键词
// 菜单
const currentType = ref<number>(1)
const menuList = reactive<Array<{ type: number; title: string }>>([
{
type: 1,
title: '直营店',
},
{
type: 2,
title: '加盟店',
}
])
// tab
const tab = ref<string>('all')
onLoad(() => {
uni.$on('refreshPackageOrderList', () => {
list.value = []
getMescroll().resetUpScroll()
})
})
onUnload(() => {
uni.$off('refreshPackageOrderList')
})
const OrderList = {
upCallback: (mescroll) => {
const filter = {
page: mescroll.num,
size: mescroll.size,
operation_type: currentType.value,
use_status: orderStatus.value,
search: keywords.value
}
getTeaRoomPackageOrderList(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() // 请求失败, 结束加载
})
},
/**
* 切换菜单
*/
handleChangeMenu: (type: number) => {
currentType.value = type
OrderList.handleResetSearch()
},
/**
* 切换订单状态
* @param e
*/
handleChangeTabs: (e: {index: number, name: string}) => {
tab.value = e.name
if (e.name === TeaRoomPackageOrderStatusText.ToUse) {
orderStatus.value = '0'
} else {
orderStatus.value = TeaRoomPackageOrderStatusValue[e.name] || ''
}
// 切换tab时,重置当前的mescroll
OrderList.handleResetSearch()
},
/**
* 内容搜索
*/
handleResetSearch: () => {
list.value = []
getMescroll().resetUpScroll();
}
}
</script>
<style lang="scss">
page {
background-color: $cz-page-background;
}
.tabs {
:deep() {
.wd-tabs,
.wd-tabs__nav {
background-color: transparent !important;
}
.wd-tabs__nav-item {
font-weight: 400 !important;
font-size: 28rpx !important;
color: #606266 !important;
line-height: 40rpx !important;
padding: 0 30rpx !important;
}
.wd-tabs__nav-item.is-active {
font-weight: 500 !important;
color: #303133 !important;
font-size: 32rpx !important;
line-height: 44rpx !important;
}
}
}
</style>

699
src/bundle/order/tea-room/order-detail.vue
View File

@ -1,699 +0,0 @@
<route lang="jsonc" type="page">
{
"needLogin": true,
"layout": "default",
"style": {
"navigationStyle": "custom"
}
}
</route>
<template>
<view class="pb-254rpx">
<!-- 一键续订 -->
<!-- <wd-popup v-model="showRenewPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
<view class="relative pb-26rpx">
<view class="absolute top-18rpx right-30rpx" @click="showRenewPopup = false">
<wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
</view>
<view class="text-36rpx text-[#121212] leading-50rpx text-center pt-50rpx pb-40rpx">续订包间</view>
<view>
<view class="mx-60rpx">
<view class="text-[#01000D] text-32rpx leading-44rpx">续订时间</view>
<view class="grid grid-cols-4 gap-x-20rpx gap-y-20rpx mt-28rpx">
<view v-for="item in timeList" :key="item.time"
class="h-72rpx rounded-16rpx flex items-center justify-center text-28rpx leading-40rpx"
:class="[item.id == selectedRenewTime ? 'bg-[#4C9F44] text-[#fff]' : 'bg-[#F7F7F7] text-[#606266]']"
@click="selectedRenewTime = item.id">
{{ item.time }}
</view>
</view>
</view>
<view class="mx-60rpx mt-60rpx">
<view class="text-[#01000D] text-32rpx leading-44rpx">支付方式</view>
<view class="mt-28rpx">
<wd-radio-group v-model="pay" shape="dot" checked-color="#4C9F44">
<view class="flex justify-between items-center mb-40rpx" v-for="(item, index) in payList" :key="index" @click="pay = item.id">
<view class="flex items-center">
<wd-img width="50rpx" height="50rpx" :src="item.icon"></wd-img>
<view class="ml-20rpx text-30rpx text-[#303133] leading-42rpx">{{ item.name }}</view>
</view>
<view class="flex items-center">
<wd-radio :value="item.value">
<view class="text-[#303133] text-26rpx leading-36rpx mr-20rpx" v-if="item.id == 1">可用202.22</view>
</wd-radio>
</view>
</view>
</wd-radio-group>
</view>
</view>
<view class="mt-102rpx">
<wd-gap height="2rpx" bg-color="#EFF0F2"></wd-gap>
</view>
<view class="flex justify-between items-center mt-50rpx mx-60rpx">
<view class="flex items-center">
<view class="text-24rpx text-[#303133] leading-34rpx">合计：</view>
<view class="flex items-center h-56rpx mr-16rpx">
<price-format color="#FF5951" :first-size="40" :second-size="40" :subscript-size="28" :price="23.02"></price-format>
<view class="ml-20rpx">
<price-format color="#909399" :first-size="26" :second-size="26" :subscript-size="26" :price="23.02" lineThrough></price-format>
</view>
</view>
</view>
<view>
<wd-button custom-class='!bg-[#4C9F44] !rounded-8rpx !h-70rpx'>立即预定</wd-button>
</view>
</view>
</view>
</view>
</wd-popup> -->
<wd-popup v-model="showRenewPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
<view class="relative pb-26rpx">
<view class="absolute top-18rpx right-30rpx" @click="showRenewPopup = false; ">
<wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
</view>
<view class="text-36rpx text-[#121212] leading-50rpx text-center pt-50rpx pb-40rpx">续订包间</view>
<!-- 预定时间 -->
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx" @click="showBookTimePopup = true;">
<view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">预定时间</view>
<view class="flex items-center justify-between">
<view class="text-[26rpx] text-[#606266] leading-36rpx">{{ sevenDay.minimum_time }}小时起订</view>
<view class="flex items-center">
<view class="text-[28rpx] text-[#909399] leading-40rpx w-430rpx line-1 text-right">
<template v-if="reserveTime.length > 0">
{{ reserveTime[0] }} {{ reserveTime[1].join(',') }}
</template>
<template v-else>
请选择
</template>
</view>
<view>
<wd-icon name="chevron-right" size="32rpx" color="#909399"></wd-icon>
</view>
</view>
</view>
</view>
<view class="mt-102rpx">
<wd-gap height="2rpx" bg-color="#EFF0F2"></wd-gap>
</view>
<view class="flex justify-between items-center mt-50rpx mx-60rpx">
<view class="flex items-center">
<view class="text-24rpx text-[#303133] leading-34rpx">合计：</view>
<view class="flex items-center h-56rpx mr-16rpx">
<price-format color="#FF5951" :first-size="40" :second-size="40" :subscript-size="28" :price="totalReserveMoney"></price-format>
<!-- <view class="ml-20rpx">
<price-format color="#909399" :first-size="26" :second-size="26" :subscript-size="26" :price="23.02" lineThrough></price-format>
</view> -->
</view>
</view>
<view>
<wd-button custom-class='!bg-[#4C9F44] !rounded-8rpx !h-70rpx' @click="OrderDetail.handleRenewReserve">立即预定</wd-button>
</view>
</view>
</view>
</wd-popup>
<!-- 续订成功 -->
<wd-popup v-model="showRenewSuccessPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
<view class="relative pt-64rpx pb-74rpx">
<view class="flex justify-center items-center">
<view class="bg-[#4C9F44] w-280rpx rounded-280rpx">
<wd-img width="280rpx" height="280rpx" :src="`${OSS}images/reserve_room/reserve_room_image7.png`"/>
</view>
</view>
<view class="text-[#303133] text-36rpx leading-46rpx text-center mt-48rpx">包间续订成功</view>
<view class="text-[#9CA3AF] text-28rpx leading-44rpx mt-16rpx text-center">可以刷新页面查看预约时间</view>
<view class="w-630rpx h-90rpx leading-90rpx text-center bg-[#4C9F44] rounded-8rpx text-[#fff] mt-174rpx mx-auto" @click="showRenewSuccessPopup = false">好的</view>
</view>
</wd-popup>
<!-- 取消订单 -->
<wd-message-box selector="wd-message-box-slot"></wd-message-box>
<!-- 费用详情 -->
<wd-popup v-model="showCostPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
<view class="relative pb-30rpx">
<view class="absolute top-18rpx right-30rpx" @click="showCostPopup = false">
<wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
</view>
<view class="text-36rpx text-[#121212] leading-50rpx text-center pt-50rpx pb-40rpx">费用明细</view>
<view class="collapse">
<view class="px-30rpx">
<view class="flex justify-between items-center">
<view class="font-bold text-30rpx leading-42rpx text-[#303133]">茶室费</view>
<view class="font-bold text-30rpx leading-42rpx text-[#303133] flex items-center">
￥640.00
</view>
</view>
<view class="rounded-16rpx py-20rpx">
<view class="mb-26rpx">
<view class="font-400 text-28rpx leading-40rpx text-[#303133] flex items-center justify-between mb-16rpx">
<view>茶室费（￥160元/小时）</view>
<view>x4</view>
</view>
</view>
</view>
</view>
<view class="px-30rpx">
<view class="flex justify-between items-center">
<view class="font-bold text-30rpx leading-42rpx text-[#303133]">优惠</view>
<view class="font-bold text-30rpx leading-42rpx text-[#303133] flex items-center text-[#4C9F44]">
-￥148.00
</view>
</view>
<view class="rounded-16rpx pt-20rpx">
<view class="font-400 text-28rpx leading-40rpx text-[#303133] flex items-center justify-between mb-16rpx">
<view>优惠券</view>
<view>-￥20</view>
</view>
<view class="font-400 text-28rpx leading-40rpx text-[#303133] flex items-center justify-between mb-16rpx">
<view>会员八折</view>
<view>-￥20</view>
</view>
</view>
</view>
</view>
<view class="mx-60rpx mt-30rpx">
<wd-gap height="2rpx" bg-color="#F6F7F9"></wd-gap>
</view>
<view class="mx-60rpx text-30rpx text-[#303133] leading-42rpx flex items-center justify-between mt-30rpx">
<view>实际退款</view>
<view>￥698.90</view>
</view>
</view>
</wd-popup>
<!-- 选择预定时间 -->
<booking-time v-model="showBookTimePopup" :day="sevenDay" @selectedTime="OrderDetail.handleChooseReserveTime"></booking-time>
<view>
<navbar :title="title" custom-class='!bg-[#F6F7F8]'></navbar>
</view>
<!-- 描述信息 -->
<view class="text-[#909399] text-26rpx leading-36rpx mb-40rpx mt-20rpx">
<view class="ml-80rpx" v-if="orderStatus === TeaRoomOrderStatus.Pay || orderStatus === TeaRoomOrderStatus.Consumption">使用过程中有任何问题，请联系客服</view>
<view class="flex items-center justify-center" v-if="orderStatus === TeaRoomOrderStatus.Pending">
<view class="flex items-center mr-6rpx">
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_time.png`"/>
</view>
<view class="flex items-center text-26rpx leading-36rpx text-[#909399]">
<view>还剩</view>
<view class="mx-6rpx">
<wd-count-down :time="order.time1" custom-class="!text-[#FF5951]" />
</view>
<view>订单自动取消</view>
</view>
</view>
<view class="ml-80rpx" v-if="orderStatus === TeaRoomOrderStatus.Finished">品一口香茗，让生活慢下来，从一杯好茶开始</view>
</view>
<view class="mx-30rpx coupon-bg" >
<view class="flex items-center px-30rpx pt-30rpx pb-40rpx">
<view class="mr-30rpx">
<wd-img width="190rpx" height="190rpx" :src="order.room_msg.img" mode="scaleToFill"></wd-img>
</view>
<view class="flex-1">
<view class="flex justify-between items-center" @click="OrderDetail.handleToStore">
<view class="flex items-center font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx">
<view class="line-1 w-300rpx">
{{ order.room_msg.title }}
</view>
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
</view>
<view class="text-26rpx leading-36rpx text-[#909399]">￥{{ order.room_all_price }}</view>
</view>
<view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
￥{{ order.room_price }}/小时
</view>
<!-- 等待付款不显示实付金额 -->
<view class="text-[#606266] text-right mt-26rpx" v-if="orderStatus !== TeaRoomOrderStatus.Pending">
<text class="text-24rpx leading-34rpx mr-12rpx">实付</text>
<text class="tetx-32rpx leading-36rpx">￥{{ order.order_amount }}</text>
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
</view>
</view>
</view>
<view class="mt-28rpx pb-36rpx">
<view class="text-30rpx leading-42rpx text-[#303133] px-30rpx">预约信息</view>
<view class="font-500 text-26rpx leading-48rpx text-[#606266] mt-20rpx">
<view class="mb-20rpx px-30rpx">预约时间：{{ order.day_time }} {{ order.renew_dtime.start_time || order.start_time }}-{{ order.renew_dtime.end_time || order.end_time }}</view>
<view class="flex justify-between items-center pl-30rpx" >
<view>预约时长：{{ order.hours }}小时</view>
<!-- 已预约和消费中显示一键续订 -->
<view v-if="orderStatus === TeaRoomOrderStatus.Pay || orderStatus === TeaRoomOrderStatus.Consumption"
class="bg-[#4C9F44] rounded-[100rpx_0rpx_0rpx_100rpx] font-bold text-28rpx leading-40rpx text-[#fff] w-170rpx h-56rpx flex justify-center items-center"
@click="showRenewPopup = true; showBookTimePopup = true">
一键续订
</view>
</view>
</view>
</view>
</view>
<!-- 已预约和消费中显示开门锁 -->
<view class="bg-white rounded-16rpx mx-30rpx mt-20rpx" v-if="orderStatus === TeaRoomOrderStatus.Pay || orderStatus === TeaRoomOrderStatus.Consumption">
<view class="pt-32rpx text-[#303133] text-32rpx leading-44rpx px-30rpx">开门锁</view>
<view class="mt-20rpx">
<wd-gap height="2rpx" bg-color="#F6F7F9"></wd-gap>
</view>
<view class="">
<view class="flex justify-between items-center mt-18rpx pb-18rpx px-62rpx">
<view class="w-224rpx">
<view class="relative h-64rpx">
<wd-img width="224rpx" height="64rpx" :src="`${OSS}images/reserve_room/reserve_room_image5.png`"/>
<view class="text-[#4C9F44] font-bold text-32rpx leading-44rpx absolute top-[50%] transform translate-y-[-50%] right-22rpx">点击开锁</view>
</view>
<view class="text-[#303133] text-30rpx leading-42rpx mt-16rpx text-center">大门锁</view>
<view class="text-[#606266] text-26rpx leading-48rpx mt-4rpx text-center font-500">手动输入 1052 32#</view>
</view>
<view class="border-r-2rpx border-r-solid border-r-[#F6F7F9] h-224rpx"></view>
<view class="w-224rpx">
<view class="relative h-64rpx">
<wd-img width="224rpx" height="64rpx" :src="`${OSS}images/reserve_room/reserve_room_image6.png`"/>
<view class="text-[#4C9F44] font-bold text-32rpx leading-44rpx absolute top-[50%] transform translate-y-[-50%] right-22rpx">点击开锁</view>
</view>
<view class="text-[#303133] text-30rpx leading-42rpx mt-16rpx text-center">房间锁</view>
<view class="text-[#606266] text-26rpx leading-48rpx mt-4rpx text-center font-500">手动输入 1052 32#</view>
</view>
</view>
</view>
</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.store_msg.image"></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" @click="handleToTRStoreHooks(order.store_msg.id, order.store_msg.operation_type)">{{ order.store_msg.name }}</view>
<view class="mt-26rpx text-[#909399] text-24rpx leading-34rpx">距您{{ order.distance }}km</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 class="flex absolute top-1/2 right-0 -translate-y-1/2">
<view class="text-center mr-20rpx" @click="OrderDetail.handleLocation">
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_nav.png`"/>
</view>
<view class="text-center" @click="OrderDetail.handleCallPhone">
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_phone.png`"/>
</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" v-if="orderStatus != TeaRoomOrderStatus.Pending && order.pay_way">
<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="orderStatus != TeaRoomOrderStatus.Pending && orderStatus != TeaRoomOrderStatus.Cancelled && order.pay_way_title">
<view>付款时间</view>
<view>{{ order.update_dtime }}</view>
</view>
</view>
<!-- 操作按钮 -->
<view class="w-full fixed bottom-0 left-0 right-0 bg-white h-152rpx">
<!-- 已预约 -->
<view class="flex items-center justify-center text-32rpx leading-44rpx leading-90rpx text-center !mt-34rpx" v-if="orderStatus == TeaRoomOrderStatus.Pay || orderStatus == TeaRoomOrderStatus.Consumption">
<wd-button custom-class="!text-32rpx !w-630rpx !h-90rpx !bg-[#4C9F44] !rounded-8rpx !text-[#fff]" open-type="share">分享房间给朋友</wd-button>
</view>
<!-- 待付款 -->
<view class="flex items-center justify-between mx-58rpx mt-34rpx" v-if="orderStatus == TeaRoomOrderStatus.Pending">
<view class="flex items-center">
<view class="text-28rpx leading-40rpx text-[#606266] mr-16rpx" @click="OrderDetail.handleCancelOrder">取消订单</view>
</view>
<view class="w-360rpx h-90rpx leading-90rpx text-center bg-[#4C9F44] rounded-8rpx text-[#fff]" @click="OrderDetail.handleToPay">立即支付￥{{ order.order_amount }}</view>
</view>
<!-- <view class="flex items-center justify-between mx-58rpx mt-34rpx" v-if="orderStatus === TeaRoomOrderStatus.Pending">
<view class="flex items-center">
<view class="text-28rpx leading-40rpx text-[#606266] mr-16rpx" @click="OrderDetail.handleCancelOrder">取消</view>
<view class="flex items-center">
<view class="mr-16rpx mt-[-8rpx]">
<price-format color="#FF5951" :first-size="40" :second-size="40" :subscript-size="28" :price="23.02"></price-format>
</view>
<view class="flex items-center text-[#4C9F44]" >
<view class="text-24rpx mr-10rpx" @click="showCostPopup = true">费用明细</view>
<wd-icon name="arrow-down" size="24rpx" color="#4C9F44"></wd-icon>
</view>
</view>
</view>
<view class="w-178rpx h-90rpx leading-90rpx text-center bg-[#4C9F44] rounded-8rpx text-[#fff]">立即预定</view>
</view> -->
<!-- 交易完成 -->
<view @click="OrderDetail.handleAgainReserve" class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center mt-34rpx"
v-if="orderStatus === TeaRoomOrderStatus.Finished || orderStatus === TeaRoomOrderStatus.Cancelled">
<view class="w-630rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]">再次预定</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
import { TeaRoomOrderStatusTextValue, TeaRoomOrderStatus } from '@/utils/order'
import { useMessage } from 'wot-design-uni'
import {toast} from '@/utils/toast'
import { getTeaRoomOrderDetail } from '@/api/tea-room'
import { handleTRCancelOrderHooks, handleTRToPayHooks, handleToTRStoreHooks } from '@/hooks/useOrder'
import type { ITeaSpecialistOrderDetailsResult } from '@/api/types/tea'
import { router } from '@/utils/tools'
import { ReserveServiceCategory, OrderType } from '@/utils/order'
import type { ITeaSpecialistFuture7DaysResult } from '@/api/types/tea'
import { getNext7Days, renewTeaRoomOrder } from '@/api/tea-room'
import { toTimes, copy } from '@/utils/tools'
const OSS = inject('OSS')
const title = ref<string>('')
const orderStatus = ref<number>(0) // 订单状态：待使用、退款等
// 续订包间
const showRenewPopup = ref<boolean>(false)
const timeList = [
{id: 1, time: '1小时'},
{id: 2, time: '2小时'},
{id: 3, time: '3小时'},
{id: 4, time: '4小时'},
{id: 5, time: '5小时'},
{id: 6, time: '6小时'},
]
const selectedRenewTime = ref<number>(0) // 选择的续订时间
const pay = ref<number>(1) // 支付方式
const payList = ref<Array<any>>([
{
id: 1,
name: '平台余额',
icon: `${OSS}icon/icon_platform_balance.png`,
balance: 0,
value: 1
},
{
id: 3,
name: '微信支付',
icon: `${OSS}icon/icon_weichat.png`,
balance: 0,
value: 3
}
])
const showRenewSuccessPopup = ref<boolean>(false)
// 选择预定时间
const showBookTimePopup = ref<boolean>(false)
const sevenDay = reactive<ITeaSpecialistFuture7DaysResult>({
minimum_time: 0,
time: []
})
const reserveTime = ref<Array<any>>([])
// 订单倒计时取消
const time = ref<number>(30 * 60 * 60 * 1000)
// 取消订单弹窗
const message = useMessage('wd-message-box-slot')
// 费用明细
const showCostPopup = ref<boolean>(false) // 是否显示退款详情弹出框
// 订单
const orderId = ref<number>(0)
const order = ref<ITeaSpecialistOrderDetailsResult>({
order_amount: '',
order_sn: '',
store_id: 0,
room_msg: {
id: 0,
price: 0,
img: '',
title: '',
},
store_msg: {
id: 0,
address: '',
name: '',
operation_type: 1,
image: '',
latitude: '',
longitude: '',
contact_phone: ''
},
time1: 0,
order_status: 0,
room_all_price: 0,
room_price: 0,
day_time: '',
start_time: '',
end_time: '',
hours: 0,
distance: 0,
pay_way: 0,
pay_way_title: '',
dtime: '',
update_dtime: '',
renew_price: 0,
renew_hour: 0,
renew_dtime: {
start_time: '',
end_time: '',
renew_price: 0
}
})
// 一键续订的金额
const totalReserveMoney = ref<number>(0)
onLoad(async (args) => {
orderId.value = args.orderId
// 获取订单详情
OrderDetail.handleInit()
// 预定时间
const next7 = await getNext7Days()
Object.assign(sevenDay, next7)
})
onUnload(() => {
uni.$off('refreshOrderDetail')
})
onShareAppMessage(async (e) => {
if (e.from === 'button') {
return {
title: `我在${order.value.store_msg.name}预定了${order.value.room_msg.title}，一起来吧！`,
path: `/pages/share/tea-room/share-order-detail?orderId=${orderId.value}`,
}
}
})
const OrderDetail = {
/**
* 获取订单详情
*/
handleInit: async () => {
const res = await getTeaRoomOrderDetail({
id: orderId.value,
latitude: uni.getStorageSync('latitude'),
longitude: uni.getStorageSync('longitude')
})
order.value = res.details
console.log("🚀 ~ order.value :", order.value )
title.value = TeaRoomOrderStatusTextValue[order.value.order_status].title || '订单详情'
orderStatus.value = order.value.order_status
},
/**
* 支付订单
*/
handleToPay: () => {
uni.$on('refreshOrderDetail', () => {
OrderDetail.handleInit()
uni.$off('refreshOrderDetail')
})
handleTRToPayHooks(orderId.value, order.value.store_msg.name, order.value.store_msg.id)
},
/**
* 获取订单详情
*/
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('refreshOrderDetail', () => {
OrderDetail.handleInit()
uni.$off('refreshOrderDetail')
})
handleTRCancelOrderHooks(orderId.value)
}
toast.info('订单取消成功')
}).catch(() => {
// 点击取消按钮回调事件
})
},
/**
* 再次预定
*/
handleAgainReserve: () => {
router.navigateTo(
`/bundle/tea-room/detail?storeId=${order.value.store_msg.id}&roomId=${order.value.room_msg.id}&type=${ReserveServiceCategory.ReserveRoom}&price=${order.value.room_msg.price}`
)
},
/**
* 选中预定时间
*/
handleChooseReserveTime: (params: any) => {
reserveTime.value = params
// 一键续订的金额
totalReserveMoney.value = Number(toTimes(params[3], order.value.room_price))
},
/**
* 确认一键续订
*/
handleRenewReserve: async () => {
uni.showLoading({ title: '加载中...' })
try {
await renewTeaRoomOrder({
id: orderId.value,
start_time: reserveTime.value[2][0],
end_time: reserveTime.value[2][reserveTime.value[2].length - 1],
renew_hour: reserveTime.value[3],
})
uni.$on('payment', params => {
uni.$off("payment")
if (params.result) {
OrderDetail.handleInit()
showRenewSuccessPopup.value = true
} else {
message.alert({
title: '提示',
msg: '您已取消续订',
confirmButtonText: '确定',
confirmButtonProps: {
customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
}
})
}
})
uni.hideLoading()
showRenewPopup.value = false
router.navigateTo(
`/pages/cashier/cashier?from=${OrderType.TeaRoomOrder}&renew=renewTeaRoomOrder&orderId=${orderId.value}&teaRoomName=${order.value.store_msg.name}&storeId=${order.value.store_msg.id}`
)
} catch (err) {
uni.hideLoading()
toast.info('续订失败')
return false
}
},
/**
* 跳转到对对应室的详情页
*/
handleToStore: () => {
handleToTRStoreHooks(order.value.store_id, order.value.store_msg.operation_type)
},
/**
* 处理导航逻辑
*/
handleLocation: () => {
uni.openLocation({
latitude: Number(order.value.store_msg.latitude),
longitude: Number(order.value.store_msg.longitude),
name: order.value.store_msg.name,
address: order.value.store_msg.address,
scale: 18
})
},
/**
* 处理拨打电话逻辑
*/
handleCallPhone: () => {
uni.makePhoneCall({
phoneNumber: order.value.store_msg.contact_phone
})
},
}
</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>

1
src/bundle/order/tea-specialist/order-detail.vue
View File

@ -375,7 +375,6 @@
import { getTeaSpecialistOrderDetails } from '@/api/teaSpecialist-order'
import { toast } from '@/utils/toast'
import { useMessage } from 'wot-design-uni'
import { handleCancelOrderHooks, handleToPayHooks, handleDeleteOrderHooks, handleConfirmOrderHooks, handleRefundOrderHooks } from '@/hooks/useTeaSpecialistOrder'
const OSS = inject('OSS')

414
src/bundle/tea-room/choose-room-reserve.vue
View File

@ -1,414 +0,0 @@
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
<route lang="jsonc" type="page">{
"layout": "tabbar",
"style": {
"navigationStyle": "custom"
}
}</route>
<template>
<view class="pb-200rpx">
<!-- 费用明细 -->
<wd-popup v-model="showCostPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" @close="showCostPopup = false" position="bottom">
<view class='bg-[#FBFBFB] py-40rpx realtive'>
<view class="absolute top-18rpx right-30rpx" @click="showCostPopup = false">
<wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
</view>
<view class="text-36rpx text-[#121212] leading-50rpx text-center">费用明细</view>
<view class="mx-30rpx bg-white rounded-16rpx px-30rpx pt-40rpx mt-40rpx pb-30rpx">
<view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
<view>茶室费</view>
<view>￥{{ bill.service.total }}</view>
</view>
<view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
<view>茶室费（￥{{ teaRoomPrice }}元/小时）</view>
<view>x{{ bill.service.num }}</view>
</view>
<view class="mt-52rpx">
<view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
<view>优惠</view>
<view class="text-[#4C9F44]">-￥{{ bill.totalDiscount }}</view>
</view>
<view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
<view>优惠券</view>
<view>-￥{{ bill.coupon }}</view>
</view>
<view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
<view>团购券</view>
<view>-￥{{ bill.groupCoupon || 0 }}</view>
</view>
<view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
<view>会员八折</view>
<view>-￥{{ bill.discount }}</view>
</view>
</view>
<view class="my-30rpx">
<wd-gap height="2rpx" bgColor='#F6F7F9'></wd-gap>
</view>
<view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
<view>实付金额</view>
<view>￥{{ bill.total }}</view>
</view>
</view>
</view>
</wd-popup>
<!-- 选择预定时间 -->
<booking-time v-model="showBookTimePopup" :day="sevenDay" @selectedTime="ChooseRoomReserve.handleChooseReserveTime" :hour="Number(groupCoupon.hour)"></booking-time>
<view>
<navbar layoutLeft>
<template #left>
<view class="flex items-center">
<view class="text-[#4C9F44] text-32rpx leading-44rpx flex items-center">
<view class="w-40rpx h-40rpx leading-36rpx rounded-40rpx bg-[#E1F3DE] mr-10rpx">1</view>
<view>选择茶室</view>
</view>
<view class="flex items-center mx-10rpx">
<wd-img width="50rpx" height="14rpx" :src="`${OSS}icon/icon_switch_left2.png`"></wd-img>
</view>
<view class="text-[#4C9F44] text-32rpx leading-44rpx flex items-center">
<view class="w-40rpx h-40rpx leading-36rpx rounded-40rpx bg-[#E1F3DE] mr-10rpx">2</view>
<view>预定</view>
</view>
</view>
</template>
</navbar>
</view>
<view class="">
<!-- 轮播图 -->
<view class="mt-32rpx mx-30rpx">
<wd-swiper value-key="image" height="240rpx" indicatorPosition="bottom-left"
:indicator="{ type: 'dots-bar' }" :list="swiperList" v-model:current="current" mode="aspectFit"></wd-swiper>
</view>
<!-- 使用说明 -->
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx">
<view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">使用说明</view>
<view class="">
<rich-text :nodes="teaRoom.textarea1"></rich-text>
</view>
</view>
<!-- 预定时间 -->
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx" @click="showBookTimePopup = true">
<view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">预定时间</view>
<view class="flex items-center justify-between">
<view class="text-[26rpx] text-[#606266] leading-36rpx">{{ sevenDay.minimum_time }}小时起订</view>
<view class="flex items-center">
<view class="text-[28rpx] text-[#909399] leading-40rpx w-430rpx line-1 text-right">
<template v-if="reserveTime.length > 0">
{{ reserveTime[0] }} {{ reserveTime[1].join(',') }}
</template>
<template v-else>
请选择
</template>
</view>
<view>
<wd-icon name="chevron-right" size="32rpx" color="#909399"></wd-icon>
</view>
</view>
</view>
</view>
<!-- 优惠券 -->
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx" @click="ChooseRoomReserve.handleToCoupon(CouponType.Discount)">
<view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">优惠券</view>
<view class="flex items-center justify-between">
<view class="text-[26rpx] text-[#606266] leading-36rpx">优惠券</view>
<view class="flex items-center">
<view class="text-[28rpx] text-[#909399] leading-40rpx">
<template v-if="selectedCoupon?.id > 0">
{{ selectedCoupon.name }}
</template>
<template v-else>
请选择
</template>
</view>
<view class="mt-4rpx">
<wd-icon name="chevron-right" size="22px" color="#909399"></wd-icon>
</view>
</view>
</view>
</view>
<view class="fixed left-0 right-0 bottom-0 z-2 bg-[#fff]" :style="{ height: '140rpx' }">
<view class="mt-12rpx w-full" >
<wd-gap height="2rpx" bgColor="#ECECEC"></wd-gap>
</view>
<view class="mt-22rpx flex justify-between items-center">
<view class="flex items-center ml-60rpx">
<view class="text-24rpx text-[#303133] leading-34rpx w-72rpx">合计：</view>
<view class="flex items-center h-56rpx mr-16rpx">
<price-format color="#FF5951" :first-size="40" :second-size="40" :subscript-size="28" :price="bill.total"></price-format>
</view>
<view class="flex items-center text-[#4C9F44]" @click="showCostPopup = true">
<view class="text-24rpx mr-10rpx">费用明细</view>
<wd-icon :name="showCostPopup ? 'arrow-up' : 'arrow-down'" size="24rpx" color="#4C9F44"></wd-icon>
</view>
</view>
<view class="mr-30rpx">
<wd-button custom-class='!bg-[#4C9F44] !rounded-8rpx !h-70rpx' @click="ChooseRoomReserve.handleSubmitOrder">立即预定</wd-button>
</view>
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
import RoomList from '@/components/reserve/RoomList.vue'
import BookingTime from '@/components/BookingTime.vue'
import {toast} from '@/utils/toast'
import { useUserStore } from '@/store'
import type { IUserInfoVo } from '@/api/types/login'
import { getTeaRoomDetail } from '@/api/tea-room'
import { getNext7Days, getTeaRoomBalance, createTeaRoomOrder, getTeaRoomPackageDetail, calculateTeaRoomPrice } from '@/api/tea-room'
import type { ITeaSpecialistFuture7DaysResult } from '@/api/types/tea'
import { router, toTimes, toPlus, toMinus } from '@/utils/tools'
import { getUserInfo } from '@/api/user'
import { CouponType } from '@/utils/coupon'
import { ReserveServiceCategory, OrderType } from '@/utils/order'
const OSS = inject('OSS')
// 轮播图
const swiperList = ref<string[]>([])
const current = ref<number>(0)
const html: string = '<p>这里是富文本内容，需要后台传递</p>'
const showAction = ref<boolean>(false)
const sheetMenu = ref([])
const showServicePopup = ref<boolean>(false)
const storeType = ref<number>(1) // 1：直营 2：加盟
// 费用明细相关
const showCostPopup = ref<boolean>(false) // 费用明细popup
const showPayPopup = ref<boolean>(false) // 支付popup
// 用户信息
const userInfo = ref<IUserInfoVo>(null)
// 包间内容
const storeId = ref<number>(0) // 门店ID
const id = ref<number>(0) // id
const teaRoom = ref<any>({})
const teaRoomPrice = ref<number>(0)
// 团购优惠券ID
const groupCouponId = ref<number>(0)
const groupCouponOrderId = ref<number>(0)
const groupCoupon = ref<any>({})
const groupCouponHour = ref<number>(0) // 团购券可以抵消几个小时的时间
// 选择预定时间
const showBookTimePopup = ref<boolean>(false)
const sevenDay = reactive<ITeaSpecialistFuture7DaysResult>({
minimum_time: 0,
time: []
})
const reserveTime = ref<Array<any>>([])
// 选择的优惠券
const selectedCoupon = ref<{id: number, name: string}>({id: 0, name: ''})
// 计算费用明细 service(服务费) groupCoupon(团购优惠券)
const bill = ref<{service: any, groupCoupon: number, discount: number, totalDiscount: number, coupon: number, total: number}>({
service: {
total: 0,
unitPrice: 0,
num: 0,
startTime: 0,
endTime: 0,
dayTime: '',
startHour: '',
endHour: ''
},
groupCoupon: 0,
discount: 0,
totalDiscount: 0,
coupon: 0,
total: 0
})
// 门店余额
const storeMoney = ref<number>(0)
// 用户信息
const user = ref<any>(null)
onLoad((args) => {
storeId.value = Number(args.storeId)
id.value = Number(args.id)
teaRoomPrice.value = Number(args.price) || 0
groupCouponId.value = Number(args.groupCouponId) || 0
groupCouponOrderId.value = Number(args.groupCouponOrderId) || 0
ChooseRoomReserve.handleInitReserveRoom()
// 获取用户需求详
getUserInfo().then(res => {
user.value = res
})
})
const ChooseRoomReserve = {
/**
* 初始包间详情
*/
handleInitReserveRoom: async () => {
// 包间详情
const userStore = useUserStore()
userInfo.value = userStore.userInfo
const res = await getTeaRoomDetail({
id: storeId.value,
latitude: uni.getStorageSync('latitude'),
longitude: uni.getStorageSync('longitude'),
user_id: userInfo.value.id || 0
})
teaRoom.value = res.details
swiperList.value = teaRoom.value.img_arr
// 预定时间
const next7 = await getNext7Days()
Object.assign(sevenDay, next7)
// 获取门店余额
const balance = await getTeaRoomBalance({ store_id: storeId.value })
storeMoney.value = balance.data.money || 0
// 获取团购优惠券
const coupon = await getTeaRoomPackageDetail({ id: groupCouponId.value })
groupCoupon.value = coupon.details
},
/**
* 选中预定时间
*/
handleChooseReserveTime: (params: any) => {
reserveTime.value = params
const roomPrice = toTimes(teaRoomPrice.value, params[3])
const useGroupCouponPrice = toTimes(teaRoomPrice.value, groupCoupon.value.hour)
bill.value.service = {
total: roomPrice,
unitPrice: teaRoomPrice.value,
num: params[3],
startTime: params[2][0],
endTime: params[2][params[2].length - 1],
dayTime: params[0],
startHour: params[1][0],
endHour: params[1][params[1].length - 1]
}
ChooseRoomReserve.handleCalculateTeaRoomPrice()
},
/**
* 跳转优惠券页面
*/
handleToCoupon(type) {
if (reserveTime.value.length == 0) {
toast.info('请选择预定时间')
return
}
uni.$on('chooseCoupon', params => {
console.log("🚀 ~ params:", params)
uni.$off('chooseCoupon')
selectedCoupon.value = {id: params.coupon.user_coupon_id, name: `${params.coupon.name}减${params.coupon.coupon_price}` }
bill.value.coupon = params.coupon.coupon_price
ChooseRoomReserve.handleCalculateTeaRoomPrice()
})
// 获取预定了几个小时
const count = bill.value.service.num
router.navigateTo(`/bundle/coupon/coupon?id=${id.value}&numbers=${count}&type=${type}&storeId=${storeId.value}`)
},
/**
* 提交订单
*/
handleSubmitOrder: async () => {
// 只有预定茶室才会选择时间
if (bill.value.service.num == 0) {
toast.info('请选择预定时间')
return
}
uni.showLoading({
title: '提交中...'
})
try {
let res = await createTeaRoomOrder({
store_id: storeId.value,
room_id: id.value,
day_time: bill.value.service.dayTime,
start_time: bill.value.service.startHour,
end_time: bill.value.service.endHour,
user_coupon_id: selectedCoupon.value.id || 0,
hours: bill.value.service.num,
group_coupon_id: groupCouponOrderId.value
})
uni.hideLoading()
// 支付后的处理
uni.$on('payment', params => {
setTimeout(() => {
uni.$off("payment")
if (params.result) {
router.redirectTo(`/pages/notice/reserve?type=${OrderType.TeaRoomOrder}&orderId=${params.orderId}&isGroupBuying=0`)
} else {
router.redirectTo( `/bundle/order/tea-room/order-list?isGroupBuying=0`)
}
}, 1000)
})
setTimeout(() => {
router.navigateTo(
`/pages/cashier/cashier?from=${OrderType.TeaRoomOrder}&orderId=${res.id}&name=${teaRoom.value.name}&storeId=${storeId.value}&isGroupBuying=0`
)
}, 800)
} catch (error) {
uni.hideLoading()
toast.info('订单提交失败，请稍后重试')
return
}
},
/**
* 计算茶室价格
*/
handleCalculateTeaRoomPrice: async () => {
const res = await calculateTeaRoomPrice({
room_id: id.value,
coupon_id: selectedCoupon.value.id || 0,
group_coupon_id: bill.value.service.num > 0 ? groupCouponOrderId.value : 0,
nums: bill.value.service.num,
})
bill.value.service.total = res.details.room_price // 茶室价格
bill.value.discount = res.details.discount_room_price // 茶室总价
bill.value.totalDiscount = res.details.discount_all_price // 总优惠
bill.value.groupCoupon = res.details.group_price // 团购优惠
bill.value.total = res.details.order_amount // 订单金额
}
}
</script>
<style lang="scss">
page {
background-color: $cz-page-background;
}
</style>

270
src/bundle/tea-room/choose-room.vue
View File

@ -1,270 +0,0 @@
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
<route lang="jsonc" type="page">{
"layout": "tabbar",
"style": {
"navigationStyle": "custom"
}
}</route>
<template>
<view class="pb-200rpx">
<view>
<navbar layoutLeft>
<template #left>
<view class="flex items-center">
<view class="text-[#4C9F44] text-32rpx leading-44rpx flex items-center">
<view class="w-40rpx h-40rpx leading-36rpx rounded-40rpx bg-[#E1F3DE] mr-10rpx">1</view>
<view>选择茶室</view>
</view>
<view class="flex items-center mx-10rpx">
<wd-img width="50rpx" height="14rpx" :src="`${OSS}icon/icon_switch_left.png`"></wd-img>
</view>
<view class="text-32rpx leading-44rpx flex items-center">
<view class="w-40rpx h-40rpx leading-36rpx rounded-40rpx bg-[#BFC2CC] text-[#fff] mr-10rpx">2</view>
<view class="text-[#606266]">预定</view>
</view>
</view>
</template>
</navbar>
</view>
<!-- 适用门店 -->
<view>
<use-store :store="order.store"></use-store>
</view>
<!-- 选择茶室包间 -->
<view class="bg-white mx-30rpx rounded-16rpx px-30rpx pb-32rpx mx-30rpx mt-20rpx">
<view class="text-32rpx text-[#303133] leading-44rpx pt-32rpx">选择茶室包间</view>
<view class="mt-26rpx">
<mescroll-body @init="mescrollInit" @down="downCallback" :down="downOption" :up="upOption" @up="ChooseRoom.upCallback">
<room-list :is-reserve="true" :list="list" is-use-coupon @chooseCouponRoom="ChooseRoom.handleChooseCouponRoom"></room-list>
</mescroll-body>
</view>
</view>
<!-- 操作按钮 -->
<view class="w-full fixed bottom-0 left-0 right-0 bg-white h-152rpx flex items-center justify-center">
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" @click="ChooseRoom.handleToReserveCouponRoom">
<view class="w-630rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]">下一步</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
import RoomList from '@/components/reserve/RoomList.vue'
import {toast} from '@/utils/toast'
import type { ITeaRoomPackageOrderDetailsResult } from '@/api/types/tea-room'
import { getTeaRoomPackageOrderDetail, getStoreTeaRoomList } from '@/api/tea-room'
import { TeaRoomPackageOrderStatusTextValue } from '@/utils/order'
import UseStore from '@/components/UseStore.vue'
import { router } from '@/utils/tools'
import { ReserveServiceCategory } from '@/utils/order'
const OSS = inject('OSS')
// tab
const tab = ref<number>(0)
const goods = ref<Array<any>[]>([])
const showAction = ref<boolean>(false)
const sheetMenu = ref([])
const showServicePopup = ref<boolean>(false)
const storeType = ref<number>(1) // 1：直营 2：加盟
// 分页
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
const downOption = {
auto: true
}
const upOption = {
auto: true,
textNoMore: '~ 已经到底啦 ~', //无更多数据的提示
}
const list = ref<Array<any>>([])
// 订单
const teaRoomId = ref<number>(0)
const groupCouponId = ref<number>(0)
const groupCouponOrderId = ref<number>(0)
const orderStatus = ref<number>(0) // 订单状态：待使用、退款等
const order = ref<ITeaRoomPackageOrderDetailsResult>({
pay: 0,
pay_way_title: '',
order_amount: '',
order_sn: '',
order_status: 0,
dtime: '',
pay_dtime: '',
group: {
id: 0,
title: '',
img: '',
hour: '',
},
store: {
id: 0,
address: '',
latitude: '',
longitude: '',
name: '',
image: '',
contact_phone: '',
store_id: 0,
distance: '',
operation_type: 1
}
})
// 选择的包间
const couponRoomId = ref<number>(0)
const couponRoomPrice = ref<number>(0)
onLoad((args) => {
groupCouponId.value = args.groupCouponId
groupCouponOrderId.value = args.groupCouponOrderId
teaRoomId.value = Number(args.teaRoomId)
// 获取订单详情
ChooseRoom.handleInit()
})
const ChooseRoom = {
sheetMenuType: '', // 记录菜单类型
/**
* 获取订单详情
*/
handleInit: async () => {
const res = await getTeaRoomPackageOrderDetail({
id: groupCouponId.value,
latitude: uni.getStorageSync('latitude'),
longitude: uni.getStorageSync('longitude')
})
order.value = res.details
console.log("🚀 ~ order.value:", order.value)
orderStatus.value = order.value.order_status
},
// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
upCallback: (mescroll) => {
const filter = {
page: mescroll.num,
size: mescroll.size,
id: teaRoomId.value
}
getStoreTeaRoomList(filter).then( res => {
console.log("🚀 ~ res:", 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() // 请求失败, 结束加载
})
},
// 收藏和取消收藏
handleCollect: () => {
// 处理收藏逻辑
toast.info('收藏成功')
},
// 打开客服弹窗
handleService: () => {
showServicePopup.value = true
},
// 处理菜单选择
handleSelectMenu: (item: any) => {
console.log("🚀 ~ item:", item)
if (ChooseRoom.sheetMenuType == 'service') {
// 处理客服相关的菜单项
if (item.value === 'saveImage') {
// 处理保存图片逻辑
toast.success('图片已保存')
} else if (item.value === 'addWeChat') {
// 处理添加微信逻辑
toast.success('已添加门店微信')
}
} else if (ChooseRoom.sheetMenuType == 'call' && item.index == 1) {
uni.makePhoneCall({
phoneNumber: item.value // 替换为实际电话号码
})
}
showAction.value = false // 关闭菜单
},
// 处理导航逻辑
handleLocation: () => {
toast.info('正在导航...')
// 可以使用uni.navigateTo或其他方式打开地图应用
uni.navigateTo({
url: '/pages/map/map' // 假设有一个地图页面
})
},
// 处理拨打电话逻辑
handleCallPhone: () => {
ChooseRoom.sheetMenuType = 'call'
showAction.value = true
sheetMenu.value = [
{
name: 15005837859,
value: ''
},
{
name: '呼叫',
value: 15005837859
}
]
},
// tab切换获取index
handleChangeTab: (item: { index: number }) => {
// tabIndexs.value = item.index
// scrollToLastY()
},
handleClick: (item: any) => {
// 处理点击事件
console.log('Clicked item:', item)
},
handleToRecharge: () => {
router.navigateTo('/bundle/store-recharge/store-recharge')
},
/**
* 选择包间
* @param e 包间ID
*/
handleChooseCouponRoom: (itme: any) => {
couponRoomId.value = itme.id
couponRoomPrice.value = itme.price
},
/**
* 跳转预定使用优惠券包间页面
*/
handleToReserveCouponRoom: () => {
if (couponRoomId.value === 0) {
toast.info('请选择包间')
return
}
router.navigateTo(`/bundle/tea-room/choose-room-reserve?groupCouponId=${groupCouponId.value}&groupCouponOrderId=${groupCouponOrderId.value}&storeId=${teaRoomId.value}&id=${couponRoomId.value}&type=${ReserveServiceCategory.ReserveRoom}&price=${couponRoomPrice.value}`)
}
}
</script>
<style lang="scss">
page {
background-color: $cz-page-background;
}
</style>

54
src/components/TeaSpecialistLevel.vue
View File

@ -1,54 +0,0 @@
<template>
<view class="w-168rpx h-40rpx relative mr-44rpx">
<view class="absolute left-0 top-0 h-36rpx flex items-start">
<!-- 金牌茶艺师 -->
<wd-img :src="levelMap[level].icon" width="36rpx" height="36rpx"></wd-img>
</view>
<view class="bg-[#F0F6EF] text-[#006C2D] font-400 text-22rpx leading-32rpx rounded-4rpx text-center w-150rpx ml-18rpx pb-4rpx">{{ levelMap[level].text }}</view>
</view>
</template>
<script lang="ts" setup name="TeaSpecialistLevel">
/**
* TeaSpecialistLevel 茶艺师等级
* @description 用于展示茶艺师等级
*/
const OSS = inject('OSS')
defineProps({
level: {
type: String,
default: ''
}
})
// 茶艺师等级对应的icon和文字
const levelMap = {
gold: {
icon: `${OSS}icon/icon_gold_medal.png`,
text: '金牌茶艺师'
},
senior: {
icon: `${OSS}icon/icon_senior_medal.png`,
text: '高级茶艺师'
},
intermediate: {
icon: `${OSS}icon/icon_intermediate_medal.png`,
text: '中级茶艺师'
},
junior: {
icon: `${OSS}icon/icon_junior_medal.png`,
text: '初级茶艺师'
},
enthusiast: {
icon: `${OSS}icon/icon_enthusiast_medal.png`,
text: '茶艺爱好者'
}
}
</script>
<script lang="ts">
export default {}
</script>

76
src/components/UseStore.vue
View File

@ -1,76 +0,0 @@
<template>
<!-- 适用门店 -->
<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="store.image"></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" @click="handleToTRStoreHooks(store.id, store.operation_type)">{{ store.name }}</view>
<view class="mt-26rpx text-[#909399] text-24rpx leading-34rpx">距您{{ store.distance }}km</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">{{ store.address }}</view>
</view>
</view>
<view class="flex absolute top-1/2 right-0 -translate-y-1/2">
<view class="text-center mr-20rpx" @click="UseStore.handleLocation">
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_nav.png`"/>
</view>
<view class="text-center" @click="UseStore.handleCallPhone">
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_phone.png`"/>
</view>
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup name="UseStore">
import { handleToTRStoreHooks } from '@/hooks/useOrder'
/**
* UseStore 适用门店
* @description 用于展示适用门店信息
*/
const OSS = inject('OSS')
const props = defineProps({
store: {
type: Object,
default: {}
}
})
const UseStore = {
/**
* 处理导航逻辑
*/
handleLocation: () => {
uni.openLocation({
latitude: Number(props.store.latitude),
longitude: Number(props.store.longitude),
name: props.store.name,
address: props.store.address,
scale: 18
})
},
/**
* 处理拨打电话逻辑
*/
handleCallPhone: () => {
uni.makePhoneCall({
phoneNumber: props.store.contact_phone
})
},
}
</script>
<script lang="ts">
export default {}
</script>

45
src/components/notice/Pay.vue
View File

@ -1,45 +0,0 @@
<template>
<view class="text-center">
<view class="w-120rpx h-120rpx mx-auto">
<wd-img width="120rpx" height="120rpx" mode="aspectFill" :src="`${OSS}icon/icon_pay_success.png`" />
</view>
<view class="mt-94rpx">
<view class="text-[36rpx] text-[#303133] leading-50rpx">{{ title }}</view>
<view class="text-[28rpx] text-[#9CA3AF] leading-40rpx mt-20rpx">{{ desc }}</view>
</view>
<view class="mt-78rpx">
<slot name="layout"></slot>
</view>
</view>
</template>
<script lang="ts" setup name="PayNotice">
/**
* PayNotice 支付提示组件
* @description 提示支付成功
*/
const OSS = inject('OSS')
const props = defineProps({
// 标题
title: {
type: String,
default: ''
},
// 描述
desc: {
type: String,
default: ''
}
})
</script>
<script lang="ts">
export default {}
</script>
<style lang="scss" scoped>
</style>

97
src/hooks/useTeaSpecialistOrder.ts
View File

@ -1,97 +0,0 @@
import { router } from '@/utils/tools'
import { toast } from '@/utils/toast'
import { cancelTeaSpecialistOrder, deleteTeaSpecialistOrder, confirmTeaSpecialistOrder, refundTeaSpecialistOrder } from '@/api/teaSpecialist-order'
/**
* 取消订单
* @param orderId 订单ID
*/
export async function handleCancelOrderHooks(orderId: number) {
try {
const response = await cancelTeaSpecialistOrder({ id: orderId })
uni.$emit('refreshOrderList')
uni.$emit('refreshOrderDetail')
} catch (error) {
router.navigateBack()
throw error
}
}
/**
* 重新支付
* @param orderId 订单ID
* @param teaSpecialistId 茶艺师ID
* @returns
*/
export function handleToPayHooks(orderId: number, teaSpecialistId: number) {
try {
uni.$on('payment', params => {
console.log("🚀 ~ params:", params)
setTimeout(() => {
uni.$off("payment")
uni.$emit('refreshOrderList')
uni.$emit('refreshOrderDetail')
if (params.result) {
uni.redirectTo({
url: `/pages/notice/reserve?type=teaSpecialist&orderId=${params.orderId}`
})
} else {
uni.redirectTo({
url: '/bundle/order/tea-specialist/order-list'
})
}
}, 1000)
})
setTimeout(() => {
router.navigateTo(`/pages/cashier/cashier?from=order&orderId=${orderId}&teaSpecialistId=${teaSpecialistId}`)
}, 800)
} catch (error) {
toast.info('订单提交失败，请稍后重试')
return
}
}
/**
* 删除订单
*/
export async function handleDeleteOrderHooks(orderId: number) {
try {
const response = await deleteTeaSpecialistOrder({ id: orderId })
uni.$emit('refreshOrderList')
uni.$emit('refreshOrderDetail')
} catch (error) {
router.navigateBack()
throw error
}
}
/**
* 确认(完成)订单
*/
export async function handleConfirmOrderHooks(orderId: number) {
try {
const response = await confirmTeaSpecialistOrder({ id: orderId })
uni.$emit('refreshOrderList')
uni.$emit('refreshOrderDetail')
} catch (error) {
router.navigateBack()
throw error
}
}
/**
* 订单退款
* @param orderId 订单ID
* @param orderType 订单类型
*/
export async function handleRefundOrderHooks(orderId: number, orderType: string) {
try {
const response = await refundTeaSpecialistOrder({ id: orderId, order_type: orderType })
uni.$emit('refreshOrderList')
uni.$emit('refreshOrderDetail')
} catch (error) {
router.navigateBack()
throw error
}
}

87
src/pages/notice/pay.vue
View File

@ -1,87 +0,0 @@
<route lang="jsonc" type="page">{
"layout": "default",
"style": {
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#fff"
}
}</route>
<template>
<view class="mt-94rpx">
<view class="flex justify-center items-center" v-if="type === 'room'">
<pay-notice title="购买成功" desc="可以点击下方查看订单详情">
<template #layout>
<view class="pb-22rpx mt-40rpx mx-30rpx flex justify-between items-center text-[32rpx] text-center">
<view class='bg-[#F6F7F8] text-[#303133] rounded-8rpx h-90rpx leading-90rpx mr-28rpx w-300rpx' @click="pay.handleRoomSeeOrder">查看订单</view>
<view class='bg-[#4C9F44] text-[#fff] rounded-8rpx h-90rpx leading-90rpx w-300rpx' @click="pay.handleRoomDone">完成</view>
</view>
</template>
</pay-notice>
</view>
<!-- 充值vip -->
<view v-if="type === 'vip'">
<pay-notice title="购买成功" desc="感谢您的信任，马上开启会员之旅！">
<template #layout>
<view class="font-500 mt-78rpx mx-60rpx flex justify-center items-center text-[30rpx] bg-[#4C9F44] text-[#fff] rounded-8rpx h-90rpx" @click="pay.handleVipDone">
完成
</view>
</template>
</pay-notice>
</view>
<!-- recharge -->
<view v-if="type === 'recharge'">
<pay-notice title="充值成功" desc="感谢您的信任，我们一定会做的更好！">
<template #layout>
<view class="font-500 mt-78rpx mx-60rpx flex justify-center items-center text-[30rpx] bg-[#4C9F44] text-[#fff] rounded-8rpx h-90rpx" @click="pay.handleRechargeDone">
完成
</view>
</template>
</pay-notice>
</view>
</view>
</template>
<script lang="ts" setup>
import PayNotice from '@/components/notice/Pay.vue'
const type = ref<string>('') // 购买类型 room: 预约茶室
onLoad((args) => {
type.value = args.type || ''
})
const pay = {
// 预约茶室 - 查看订单
handleRoomSeeOrder: () => {
uni.navigateTo({
url: '/bundle/tea-room/order'
})
},
// 预约茶室 - 完成
handleRoomDone: () => {
uni.switchTab({
url: '/pages/index/index'
})
},
// 购买会员 - 完成
handleVipDone: () => {
uni.switchTab({
url: '/pages/index/index'
})
},
// 我的钱包-充值
handleRechargeDone: () => {
uni.switchTab({
url: '/pages/index/index'
})
}
}
</script>
<style lang="scss" scoped>
</style>

62
src/pages/notice/reserve.vue
View File

@ -1,62 +0,0 @@
<route lang="jsonc" type="page">{
"layout": "default",
"style": {
"navigationStyle": "custom"
}
}</route>
<template>
<view class="mt-84rpx flex justify-center items-center">
<view v-if="type == OrderType.TeaRoomOrder">
<reserve-notice :title="isGroupBuying ? '套餐购买成功' : '茶室预约成功'" desc="可以点击下方查看订单详情">
<template #layout>
<view class="pb-22rpx mt-40rpx mx-30rpx flex justify-between items-center text-[32rpx] text-center">
<view class='bg-[#F6F7F8] text-[#303133] rounded-8rpx h-90rpx leading-90rpx mr-28rpx w-300rpx' @click="reserve.handleRoomSeeOrder">查看订单</view>
<view class='bg-[#4C9F44] text-[#fff] rounded-8rpx h-90rpx leading-90rpx w-300rpx' @click="reserve.handleRoomDone">完成</view>
</view>
</template>
</reserve-notice>
</view>
</view>
</template>
<script lang="ts" setup>
import ReserveNotice from '@/components/notice/Reserve.vue'
import { ReserveServiceCategory, OrderType } from '@/utils/order'
import { router } from '@/utils/tools'
// 购买类型 room: 预约茶室
const type = ref<string>('')
// 是否是团购套餐
const isGroupBuying = ref<number>(0)
onLoad((args) => {
type.value = args.type || ''
isGroupBuying.value = Number(args.isGroupBuying) || 0
})
const reserve = {
/**
* 预约茶室 - 查看订单
*/
handleRoomSeeOrder: () => {
if (isGroupBuying.value) {
router.navigateTo('/bundle/order/platform/order-list')
} else {
router.navigateTo('/bundle/order/tea-room/order-list')
}
},
/**
* 预约茶室 - 完成
*/
handleRoomDone: () => {
router.switchTab('/pages/index/index')
}
}
</script>
<style lang="scss" scoped>
</style>