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

添加页面

Browse Source
This commit is contained in:
wangxiaowei
2025-09-20 17:02:40 +08:00
parent ff2f645101
commit be39bd6da8
20 changed files with 1962 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -95,6 +95,7 @@
"@dcloudio/uni-mp-xhs": "3.0.0-4070520250711001",
"@dcloudio/uni-quickapp-webview": "3.0.0-4070520250711001",
"@tanstack/vue-query": "^5.62.16",
"@vant/area-data": "^2.1.0",
"abortcontroller-polyfill": "^1.7.8",
"alova": "^3.3.3",
"dayjs": "1.11.10",

13
pnpm-lock.yaml generated
View File

@ -73,6 +73,9 @@ importers:
'@tanstack/vue-query':
specifier: ^5.62.16
version: 5.83.1(vue@3.4.21(typescript@5.9.2))
'@vant/area-data':
specifier: ^2.1.0
version: 2.1.0
abortcontroller-polyfill:
specifier: ^1.7.8
version: 1.7.8
@ -234,6 +237,8 @@ importers:
specifier: ^2.2.10
version: 2.2.12(typescript@5.9.2)
src/uni_modules/mescroll-uni: {}
src/uni_modules/uni-icons: {}
src/uni_modules/uni-scss: {}
@ -1206,6 +1211,7 @@ packages:
'@esbuild/darwin-arm64@0.20.2':
resolution: {integrity: sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==}
engines: {node: '>=12'}
cpu: [arm64]
os: [darwin]
'@esbuild/darwin-arm64@0.23.1':
@ -1223,6 +1229,7 @@ packages:
'@esbuild/darwin-x64@0.20.2':
resolution: {integrity: sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==}
engines: {node: '>=12'}
cpu: [x64]
os: [darwin]
'@esbuild/darwin-x64@0.23.1':
@ -2091,6 +2098,7 @@ packages:
'@rollup/rollup-darwin-x64@4.46.2':
resolution: {integrity: sha512-SSj8TlYV5nJixSsm/y3QXfhspSiLYP11zpfwp6G/YDXctf3Xkdnk4woJIF5VQe0of2OjzTt8EsxnJDCdHd2xMA==}
cpu: [x64]
os: [darwin]
'@rollup/rollup-freebsd-arm64@4.46.2':
@ -2589,6 +2597,9 @@ packages:
peerDependencies:
vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0
'@vant/area-data@2.1.0':
resolution: {integrity: sha512-wx9PrUX7wSUJiFcz8UrcvZfTjV6sTc+7SHcbjGQQzEcv5y+EwOo5uV4ZKdfrR5Hzcw4MA08LQdvXPSEb4nWbug==}
'@vitejs/plugin-legacy@5.3.2':
resolution: {integrity: sha512-8moCOrIMaZ/Rjln0Q6GsH6s8fAt1JOI3k8nmfX4tXUxE5KAExVctSyOBk+A25GClsdSWqIk2yaUthH3KJ2X4tg==}
engines: {node: ^18.0.0 || >=20.0.0}
@ -9669,6 +9680,8 @@ snapshots:
transitivePeerDependencies:
- vue
'@vant/area-data@2.1.0': {}
'@vitejs/plugin-legacy@5.3.2(terser@5.43.1)(vite@5.2.8(@types/node@20.19.9)(sass@1.77.8)(terser@5.43.1))':
dependencies:
'@babel/core': 7.28.0

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

@ -9,12 +9,146 @@
<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="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">好的</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>
<view>
<navbar :title="title" custom-class='!bg-[#F6F7F8]'></navbar>
</view>
<!-- 描述信息 -->
<view class="text-[#909399] text-26rpx leading-36rpx mb-40rpx mt-20rpx">
<view class="text-center" v-if="orderStatus === OrderStatus.Consuming || orderStatus === OrderStatus.Reserved">使用过程中有任何问题，请联系客服</view>
<view class="ml-80rpx" v-if="orderStatus === OrderStatus.Consuming || orderStatus === OrderStatus.Reserved">使用过程中有任何问题，请联系客服</view>
<view class="flex items-center justify-center" v-if="orderStatus === OrderStatus.Pending">
<view class="flex items-center mr-6rpx">
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_time.png`"/>
@ -27,7 +161,7 @@
<view>订单自动取消</view>
</view>
</view>
<view class="text-center" v-if="orderStatus === OrderStatus.Finished">品一口香茗，让生活慢下来，从一杯好茶开始</view>
<view class="ml-80rpx" v-if="orderStatus === OrderStatus.Finished">品一口香茗，让生活慢下来，从一杯好茶开始</view>
</view>
<view class="mx-30rpx coupon-bg" >
@ -191,9 +325,9 @@
<!-- 待付款 -->
<view class="flex items-center justify-between mx-58rpx mt-34rpx" v-if="orderStatus === OrderStatus.Pending">
<view class="flex items-center">
<view class="text-28rpx leading-40rpx text-[#606266] mr-16rpx" @click="orderDetail.handleCancelOrder">取消</view>
<view class="text-28rpx leading-40rpx text-[#606266] mr-16rpx" @click="OrderDetail.handleCancelOrder">取消</view>
<view class="flex items-center">
<view class="mr-16rpx">
<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]" >
@ -211,139 +345,6 @@
<view class="w-630rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]">再次预定</view>
</view>
</view>
<!-- 一键续订 -->
<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="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">好的</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>
</view>
</template>
@ -357,7 +358,7 @@
const title = ref<string>('')
const orderStatus = ref<string>('') // 订单状态：待使用、退款等
/** 续订包间 **/
// 续订包间
const showRenewPopup = ref<boolean>(false)
const timeList = [
{id: 1, time: '1小时'},
@ -387,7 +388,6 @@
])
const showRenewSuccessPopup = ref<boolean>(false)
/** 结束 **/
// 订单倒计时取消
const time = ref<number>(30 * 60 * 60 * 1000)
@ -397,8 +397,6 @@
// 费用明细
const showCostPopup = ref<boolean>(false) // 是否显示退款详情弹出框
const costValue = ref<string[]>(['item1'])
onLoad((args) => {
title.value = OrderStatusTitle[OrderSource.TeaRoom][args.orderStatus] || '订单详情'
@ -407,7 +405,7 @@
orderStatus.value = args.orderStatus
})
const orderDetail = {
const OrderDetail = {
// 取消订单
handleCancelOrder: () => {
message.confirm({

51
src/bundle/order/tea-room/order-list.vue
View File

@ -8,7 +8,7 @@
<template>
<view class="">
<view class="order-list sticky top-0 left-0 z-50 bg-[#F6F7F8] pb-10rpx">
<wd-navbar safeAreaInsetTop custom-class='!bg-[#F6F7F8]' :bordered="false" placeholder @click-left="orderList.handleBack">
<wd-navbar safeAreaInsetTop custom-class='!bg-[#F6F7F8]' :bordered="false" placeholder @click-left="OrderList.handleBack">
<template #left>
<view class="h-48rpx flex items-center">
<view class="mt-4rpx">
@ -21,11 +21,11 @@
</template>
</wd-navbar>
<view class="tabs">
<wd-tabs v-model="tab" swipeable slidable="always" :lazy="false" @click="orderList.handleChangeTabs">
<wd-tab title="全部"></wd-tab>
<wd-tab title="待付款"></wd-tab>
<wd-tab title="预约单"></wd-tab>
<wd-tab title="已完结"></wd-tab>
<wd-tabs v-model="tab" swipeable slidable="always" :lazy="false" @click="OrderList.handleChangeTabs">
<wd-tab title="全部" name="all"></wd-tab>
<wd-tab title="待付款" :name="OrderStatus.Pending"></wd-tab>
<wd-tab title="预约单" :name="OrderStatus.Reserved"></wd-tab>
<wd-tab title="已完结" :name="OrderStatus.Finished"></wd-tab>
</wd-tabs>
</view>
</view>
@ -33,30 +33,30 @@
<view class="tabs mt-18rpx mx-30rpx">
<!-- 这里可以尝试下不重新刷新获取列表 -->
<!-- 全部 -->
<mescroll-body ref="mescrollItem0" @init="mescrollInit" @down="downCallback" @up="orderList.upCallback" v-if="tab === 0">
<mescroll-body ref="mescrollItem0" @init="mescrollInit" @down="downCallback" @up="OrderList.upCallback" v-if="tab === 'all'">
<view class="mb-20rpx" v-for="(item, index) in 10" :key="index">
<combo-card :type="OrderSource.TeaRoom" :order-status="OrderStatus.Pending"></combo-card>
</view>
</mescroll-body>
<!-- 待付款 -->
<mescroll-body ref="mescrollItem1" @init="mescrollInit" @down="downCallback" @up="orderList.upCallback" v-if="tab === 1">
<mescroll-body ref="mescrollItem1" @init="mescrollInit" @down="downCallback" @up="OrderList.upCallback" v-if="tab === OrderStatus.Pending">
<view class="mb-20rpx" v-for="(item, index) in 10" :key="index">
<combo-card></combo-card>
<combo-card :type="OrderSource.TeaRoom" :order-status="OrderStatus.Pending"></combo-card>
</view>
</mescroll-body>
<!-- 预约单 -->
<mescroll-body ref="mescrollItem2" @init="mescrollInit" @down="downCallback" @up="orderList.upCallback" v-if="tab === 2">
<mescroll-body ref="mescrollItem2" @init="mescrollInit" @down="downCallback" @up="OrderList.upCallback" v-if="tab === OrderStatus.Reserved">
<view class="mb-20rpx" v-for="(item, index) in 10" :key="index">
<combo-card></combo-card>
<combo-card :type="OrderSource.TeaRoom" :order-status="OrderStatus.Pending"></combo-card>
</view>
</mescroll-body>
<!-- 已完结 -->
<mescroll-body ref="mescrollItem3" @init="mescrollInit" @down="downCallback" @up="orderList.upCallback" v-if="tab === 3">
<mescroll-body ref="mescrollItem3" @init="mescrollInit" @down="downCallback" @up="OrderList.upCallback" v-if="tab === OrderStatus.Finished">
<view class="mb-20rpx" v-for="(item, index) in 10" :key="index">
<combo-card></combo-card>
<combo-card :type="OrderSource.TeaRoom" :order-status="OrderStatus.Pending"></combo-card>
</view>
</mescroll-body>
</view>
@ -79,21 +79,16 @@
const keywords = ref<string>('')
// tab
const tab = ref<number>(0)
const tab = ref<string>('all')
onLoad((args) => {
if (args.orderType) {
if (args.orderType === OrderStatus.Pending) {
tab.value = 1
} else if (args.orderType === OrderStatus.Reserved) {
tab.value = 2
} else if (args.orderType === OrderStatus.Finished) {
tab.value = 3
}
// 根据传过来的参数决定显示哪个tab
if (args.orderStatus) {
tab.value = args.orderStatus
}
})
const orderList = {
const OrderList = {
// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
upCallback: (mescroll) => {
// 需要留一下数据为空的时候显示的空数据图标内容
@ -135,6 +130,12 @@
// })
},
// 切换tab
handleChangeTabs: (e: {index: number, name: string}) => {
tab.value = e.name
},
// 返回上一页
handleBack: () => {
uni.navigateBack({
@ -149,10 +150,6 @@
background-color: $cz-page-background;
}
.container{
height: 150px;width: 100vw;
}
.tabs {
:deep() {
.wd-tabs,

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

@ -9,144 +9,7 @@
<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.Serving">服务过程中有任何问题，请联系客服</text>
<text v-if="orderStatus === OrderStatus.Reserved">使用过程中有任何问题，请联系客服</text>
</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="`${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">
茶艺师名称
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
</view>
<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>￥108/小时</view>
<view>x3</view>
</view>
<view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
<view>车马费（￥3.00元/公里）</view>
<view>x3</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-28rpx pb-28rpx">
<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">预约时间：2025-03-18 09:00-12:00</view>
<view class="flex justify-between items-center pl-30rpx">
<view>预约时长：3小时</view>
<view 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">一键续订</view>
</view>
</view>
</view>
</view>
<!-- 地图显示 -->
<view class="mx-30rpx mt-20rpx bg-white rounded-16rpx">
<view class="px-30rpx"> 地图显示</view>
<view class="px-30rpx flex justify-between items-center">
<view class="font-500 text-24rpx text-[#909399] leading-42rpx">信息没有更新，想问问茶艺师到哪里了？</view>
<view class="flex items-center">
<view class="flex items-center mr-6rpx">
<wd-img width="34rpx" height="34rpx" :src="`${OSS}icon/icon_phone2.png`" mode="scaleToFill"></wd-img>
</view>
<view class="text-26rpx leading-36rpx text-[#4C9F44]">
联系茶艺师
</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>
<view class="flex justify-between items-center relative">
<view>
<view class="text-28rpx leading-40rpx flex items-center mt-22rpx">
<view class="text-[#606266] mr-54rpx">服务方式</view>
<view class="text-[#303133]">到店服务</view>
</view>
<view class="text-28rpx leading-40rpx flex items-center mt-22rpx" v-if="orderStatus === OrderStatus.Serving">
<view class="text-[#606266] mr-54rpx">服务门店</view>
<view class="text-[#303133] line-1 w-300rpx">茶馆名称茶馆名称茶馆名称茶馆名称茶馆名称茶馆名称茶馆名称</view>
</view>
<view class="text-28rpx leading-40rpx flex items-center mt-22rpx">
<view class="text-[#606266] mr-54rpx"> {{ orderStatus === OrderStatus.Serving ? '门店地址' : '服务地址' }}</view>
<view class="text-[#303133]">青浦区仓桥路478号</view>
</view>
</view>
<view class="flex absolute top-1/2 right-0 -translate-y-1/2">
<view class="text-center mr-20rpx" >
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_nav.png`"/>
</view>
<view class="text-center" v-if="orderStatus === OrderStatus.Serving">
<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.Serving">
<view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133] mr-30rpx" @click="orderDetail.handleConfirmOrder">确认订单</view>
<view class="w-330rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]" @click="orderDetail.handleAgainReeserve">再次预定</view>
</view>
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" v-if="orderStatus === OrderStatus.Reserved">
<view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133] mr-30rpx" @click="showRefundRule = true">申请退款</view>
<view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133]" @click="orderDetail.handleService">联系客服</view>
</view>
</view>
</view>
<!-- 一键续订 -->
<wd-popup v-model="showRenewPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
<view class="relative pb-26rpx">
@ -257,12 +120,303 @@
</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>
<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="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 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="font-400 text-28rpx leading-40rpx text-[#303133] flex items-center justify-between mb-16rpx">
<view>车马费（￥3.00元/公里）</view>
<view>x4</view>
</view>
</view>
</view>
<view class="px-30rpx mb-20rpx">
<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="font-400 text-28rpx leading-40rpx text-[#303133] flex items-center justify-between mb-16rpx">
<view>红茶/绿茶/福鼎白茶/铁观音</view>
<view>￥158</view>
</view>
<view class="font-400 text-28rpx leading-40rpx text-[#303133] flex items-center justify-between mb-16rpx">
<view>茶具使用</view>
<view>￥158</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>
</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>
<!-- 平台团购直营店 -->
<view>
<navbar :title="title" custom-class='!bg-[#F6F7F8]'></navbar>
</view>
<view class="text-[#909399] text-26rpx leading-36rpx mb-40rpx">
<view class="ml-80rpx" v-if="orderStatus === OrderStatus.Consuming || orderStatus === OrderStatus.Reserved || orderStatus === OrderStatus.Serving">使用过程中有任何问题，请联系客服</view>
<view class="flex items-center justify-center" v-if="orderStatus === OrderStatus.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="time" custom-class="!text-[#FF5951]" />
</view>
<view>订单自动取消</view>
</view>
</view>
<view class="ml-80rpx" v-if="orderStatus === OrderStatus.Finished">品一口香茗，让生活慢下来，从一杯好茶开始</view>
<view class="ml-80rpx" v-if="orderStatus === OrderStatus.Confirm">您的服务已经结束，请及时确认订单</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="`${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">
茶艺师名称
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
</view>
<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>￥108/小时</view>
<view>x3</view>
</view>
<view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
<view>车马费（￥3.00元/公里）</view>
<view>x3</view>
</view>
<view class="text-[#606266] text-right mt-26rpx" v-if="orderStatus !== OrderStatus.Pending">
<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-28rpx pb-28rpx">
<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">预约时间：2025-03-18 09:00-12:00</view>
<view class="flex justify-between items-center pl-30rpx">
<view>预约时长：3小时</view>
<view
v-if="orderStatus === OrderStatus.Reserved || orderStatus === OrderStatus.Consuming"
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">一键续订</view>
</view>
</view>
</view>
</view>
<!-- 地图显示 -->
<view class="mx-30rpx mt-20rpx bg-white rounded-16rpx" v-if="orderStatus === OrderStatus.Serving || orderStatus === OrderStatus.Reserved">
<view class="px-30rpx"> 地图显示</view>
<view class="px-30rpx flex justify-between items-center">
<view class="font-500 text-24rpx text-[#909399] leading-42rpx">信息没有更新，想问问茶艺师到哪里了？</view>
<view class="flex items-center">
<view class="flex items-center mr-6rpx">
<wd-img width="34rpx" height="34rpx" :src="`${OSS}icon/icon_phone2.png`" mode="scaleToFill"></wd-img>
</view>
<view class="text-26rpx leading-36rpx text-[#4C9F44]">
联系茶艺师
</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>
<view class="flex justify-between items-center relative">
<view>
<view class="text-28rpx leading-40rpx flex items-center mt-22rpx">
<view class="text-[#606266] mr-54rpx">服务方式</view>
<view class="text-[#303133]">到店服务</view>
</view>
<view class="text-28rpx leading-40rpx flex items-center mt-22rpx" v-if="orderStatus !== OrderStatus.Pending">
<view class="text-[#606266] mr-54rpx">服务门店</view>
<view class="text-[#303133] line-1 w-300rpx">茶馆名称茶馆名称茶馆名称茶馆名称茶馆名称茶馆名称茶馆名称</view>
</view>
<view class="text-28rpx leading-40rpx flex items-center mt-22rpx">
<view class="text-[#606266] mr-54rpx"> {{ orderStatus === OrderStatus.Serving ? '门店地址' : '服务地址' }}</view>
<view class="text-[#303133]">青浦区仓桥路478号</view>
</view>
</view>
<view class="flex absolute top-1/2 right-0 -translate-y-1/2">
<view class="text-center mr-20rpx" >
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_nav.png`"/>
</view>
<view class="text-center" v-if="orderStatus === OrderStatus.Serving">
<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.Pending">
<wd-radio-group v-model="pay" shape="dot" checked-color="#4C9F44">
<block v-for="(item, index) in PayList" :key="index">
<view
class="flex justify-between items-center"
:class="index !== PayList.length - 1 ? 'mb-40rpx' : ''"
v-if="item.id != 2"
>
<view class="flex items-center">
<wd-img width="50rpx" height="50rpx" :src="`${OSS}${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.type !== PayCategory.WeChatPay">可用202.22</view>
</wd-radio>
</view>
</view>
</block>
</wd-radio-group>
</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" v-if="orderStatus !== OrderStatus.Pending">
<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" v-if="orderStatus !== OrderStatus.Pending">
<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.Serving || orderStatus === OrderStatus.Confirm">
<view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133] mr-30rpx" @click="orderDetail.handleAgainReeserve">再次预定</view>
<view class="w-330rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]" @click="orderDetail.handleConfirmOrder">确认订单</view>
</view>
<!-- 待付款 -->
<view class="flex items-center justify-between mx-58rpx mt-34rpx" v-if="orderStatus === OrderStatus.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 class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" v-if="orderStatus === OrderStatus.Reserved">
<view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133] mr-30rpx" @click="showRefundRule = true">申请退款</view>
<view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133]" @click="orderDetail.handleService">联系客服</view>
</view>
<!-- 交易完成 -->
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center mt-34rpx"
v-if="orderStatus === OrderStatus.Finished || orderStatus === OrderStatus.Cancelled">
<view class="w-630rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]">再次预定</view>
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
import { OrderStatus, OrderStatusText } from '@/utils/order'
import { OrderStatusTitle, OrderStatus, OrderSource } from '@/utils/order'
import {toast} from '@/utils/toast'
import { useMessage } from 'wot-design-uni'
import { PayList, PayCategory, PayValue } from '@/utils/pay'
const OSS = inject('OSS')
@ -270,7 +424,14 @@
const orderStatus = ref<string>('') // 订单状态：待使用、退款等
const showRefundRule = ref<boolean>(false) // 退款规则弹窗
// 订单倒计时取消
const time = ref<number>(30 * 60 * 60 * 1000)
// 取消订单弹窗
const message = useMessage('wd-message-box-slot')
// 费用明细
const showCostPopup = ref<boolean>(false) // 是否显示退款详情弹出框
/** 续订 **/
const showRenewPopup = ref<boolean>(false)
@ -315,13 +476,30 @@
/** 结束 **/
onLoad((args) => {
title.value = OrderStatusText[args.orderStatus] || '订单详情'
title.value = OrderStatusTitle[OrderSource.TeaSpecialist][args.orderStatus] || '订单详情'
orderStatus.value = args.orderStatus
})
const orderDetail = {
// 确认订单
handleConfirmOrder: () => {
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) => {
// 点击确认按钮回调事件
toast.info('订单取消成功')
}).catch(() => {
// 点击取消按钮回调事件
})
},
// 续订茶艺师
@ -344,6 +522,26 @@
handleConfirmRefund: () => {
},
// 取消订单
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) => {
// 点击确认按钮回调事件
toast.info('订单取消成功')
}).catch(() => {
// 点击取消按钮回调事件
})
},
// 联系客服
handleService: () => {

185
src/bundle/order/tea-specialist/order-list.vue Normal file
View File

@ -0,0 +1,185 @@
<route lang="jsonc" type="page">{
"layout": "default",
"style": {
"navigationStyle": "custom"
}
}</route>
<template>
<view class="">
<view class="order-list sticky top-0 left-0 z-50 bg-[#F6F7F8] pb-10rpx">
<wd-navbar safeAreaInsetTop custom-class='!bg-[#F6F7F8]' :bordered="false" placeholder @click-left="orderList.handleBack">
<template #left>
<view class="h-48rpx flex items-center">
<view class="mt-4rpx">
<wd-icon name="thin-arrow-left" size="30rpx"></wd-icon>
</view>
<view class="search-box">
<wd-search v-model="keywords" hide-cancel placeholder-left light placeholder="搜索茶室订单"></wd-search>
</view>
</view>
</template>
</wd-navbar>
<view class="tabs">
<wd-tabs v-model="tab" swipeable slidable="always" :lazy="false" @click="orderList.handleChangeTabs">
<wd-tab title="全部" name="all"></wd-tab>
<wd-tab title="待付款" :name="OrderStatus.Pending"></wd-tab>
<wd-tab title="预约单" :name="OrderStatus.Reserved"></wd-tab>
<wd-tab title="待确认" :name="OrderStatus.Confirm"></wd-tab>
<wd-tab title="已完结" :name="OrderStatus.Finished"></wd-tab>
</wd-tabs>
</view>
</view>
<view class="tabs mt-18rpx mx-30rpx">
<!-- 这里可以尝试下不重新刷新获取列表 -->
<!-- 全部 -->
<mescroll-body ref="mescrollItem0" @init="mescrollInit" @down="downCallback" @up="orderList.upCallback" v-if="tab === 'all'">
<view class="mb-20rpx" v-for="(item, index) in 10" :key="index">
<combo-card :type="OrderSource.TeaSpecialist" :order-status="OrderStatus.Pending"></combo-card>
</view>
</mescroll-body>
<!-- 待付款 -->
<mescroll-body ref="mescrollItem1" @init="mescrollInit" @down="downCallback" @up="orderList.upCallback" v-if="tab === OrderStatus.Pending">
<view class="mb-20rpx" v-for="(item, index) in 10" :key="index">
<combo-card :type="OrderSource.TeaSpecialist" :order-status="OrderStatus.Pending"></combo-card>
</view>
</mescroll-body>
<!-- 预约单 -->
<mescroll-body ref="mescrollItem2" @init="mescrollInit" @down="downCallback" @up="orderList.upCallback" v-if="tab === OrderStatus.Reserved">
<view class="mb-20rpx" v-for="(item, index) in 10" :key="index">
<combo-card :type="OrderSource.TeaSpecialist" :order-status="OrderStatus.Pending"></combo-card>
</view>
</mescroll-body>
<!-- 待确认 -->
<mescroll-body ref="mescrollItem2" @init="mescrollInit" @down="downCallback" @up="orderList.upCallback" v-if="tab === OrderStatus.Confirm">
<view class="mb-20rpx" v-for="(item, index) in 10" :key="index">
<combo-card :type="OrderSource.TeaSpecialist" :order-status="OrderStatus.Pending"></combo-card>
</view>
</mescroll-body>
<!-- 已完结 -->
<mescroll-body ref="mescrollItem3" @init="mescrollInit" @down="downCallback" @up="orderList.upCallback" v-if="tab === OrderStatus.Finished">
<view class="mb-20rpx" v-for="(item, index) in 10" :key="index">
<combo-card :type="OrderSource.TeaSpecialist" :order-status="OrderStatus.Pending"></combo-card>
</view>
</mescroll-body>
</view>
</view>
</template>
<script lang="ts" setup>
import { OrderSource, OrderStatus } from '@/utils/order'
import ComboCard from '@/components/order/ComboCard.vue'
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
/* mescroll */
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
// 店铺类型
// 搜索
const keywords = ref<string>('')
// tab
const tab = ref<string>('all')
onLoad((args) => {
// 根据传过来的参数决定显示哪个tab
if (args.orderStatus) {
tab.value = args.orderStatus
}
})
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(); // 请求失败, 结束加载
// })
},
// 切换tab
handleChangeTabs: (e: {index: number, name: string}) => {
tab.value = e.name
// 切换tab时,重置当前的mescroll
// getMescroll().resetUpScroll();
},
// 返回上一页
handleBack: () => {
uni.navigateBack({
delta: 1
})
},
}
</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>

60
src/bundle/parten/components/Tabbar.vue Normal file
View File

@ -0,0 +1,60 @@
<template>
<view>
currentTab--{{ currentTab }}
<wd-tabbar v-model="tabbar" active-color="#4C9F44" fixed safeAreaInsetBottom @change="Tabbar.handleChange">
<wd-tabbar-item title="收益明细" icon="home">
<template #icon>
<wd-img height="40rpx" width="40rpx" :src="currentTab === 0 ? `${OSS}images/parten/parten_bill_s.png` : `${OSS}images/parten/parten_bill.png`"></wd-img>
</template>
</wd-tabbar-item>
<wd-tabbar-item title="下级用户" icon="cart">
<template #icon>
<wd-img height="40rpx" width="40rpx" :src="currentTab === 1 ? `${OSS}images/parten/parten_sub_s.png` : `${OSS}images/parten/parten_sub.png`"></wd-img>
</template>
</wd-tabbar-item>
<wd-tabbar-item title="我的" icon="user">
<template #icon>
<wd-img height="40rpx" width="40rpx" :src="currentTab === 2 ? `${OSS}images/parten/parten_my_s.png` : `${OSS}images/parten/parten_my.png`"></wd-img>
</template>
</wd-tabbar-item>
</wd-tabbar>
</view>
</template>
<script lang="ts" setup name="Tabbar">
const tabbar = ref(0)
const currentTab = ref<number>(0)
const OSS = inject('OSS')
const Tabbar = {
handleChange: ({ value }: { value: string }) => {
const index = Number(value)
currentTab.value = index
if (index === 0) {
uni.redirectTo({
url: '/bundle/parten/pages/bill/bill'
})
} else if (index === 1) {
uni.redirectTo({
url: '/bundle/parten/pages/sub/sub'
})
} else if (index === 2) {
uni.redirectTo({
url: '/bundle/parten/pages/my/my'
})
}
}
}
// 切换tabbar
</script>
<script lang="ts">
export default {}
</script>
<style lang="scss" scoped>
//
</style>

24
src/bundle/parten/pages/bill/bill.vue Normal file
View File

@ -0,0 +1,24 @@
<route lang="jsonc" type="page">
{
"layout": "default",
"style": {
"navigationBarTitleText": ""
}
}
</route>
<template>
<view class="">
<tabbar class=""></tabbar>
</view>
</template>
<script lang="ts" setup>
import Tabbar from '@/bundle/parten/components/Tabbar.vue'
const OSS = inject('OSS')
</script>
<style lang="scss" scoped>
</style>

24
src/bundle/parten/pages/my/my.vue Normal file
View File

@ -0,0 +1,24 @@
<route lang="jsonc" type="page">
{
"layout": "default",
"style": {
"navigationBarTitleText": ""
}
}
</route>
<template>
<view class="">
<tabbar class=""></tabbar>
</view>
</template>
<script lang="ts" setup>
import Tabbar from '@/bundle/parten/components/Tabbar.vue'
const OSS = inject('OSS')
</script>
<style lang="scss" scoped>
</style>

24
src/bundle/parten/pages/sub/sub.vue Normal file
View File

@ -0,0 +1,24 @@
<route lang="jsonc" type="page">
{
"layout": "default",
"style": {
"navigationBarTitleText": ""
}
}
</route>
<template>
<view class="">
<tabbar class=""></tabbar>
</view>
</template>
<script lang="ts" setup>
import Tabbar from '@/bundle/parten/components/Tabbar.vue'
const OSS = inject('OSS')
</script>
<style lang="scss" scoped>
</style>

6
src/bundle/profile/profile.vue
View File

@ -126,15 +126,13 @@
const OSS = inject('OSS')
const showLogoutPopup = ref<boolean>(false) // 是否显示退出登录弹出框
/** 上传文件 **/
// 上传文件
const fileList = ref<any[]>([])
const action = 'https://www.mocky.io/v2/5cc8019d300000980a055e76' // 仅做测试使用，实际请换成真实上传接口
/** 结束 **/
/** 修改昵称 **/
// 修改昵称
const showEditNicknamePopup = ref<boolean>(false) // 是否显示退款详情弹出框
const nickname = ref<string>('') // 昵称
/** 结束 **/
const profile = {
// 图片选择/删除

227
src/bundle/settle-in/parten.vue Normal file
View File

@ -0,0 +1,227 @@
<route lang="jsonc" type="page">
{
"layout": "default",
"style": {
"navigationStyle": "custom"
}
}
</route>
<template>
<view>
<!-- 申请成功提示 -->
<view class="mt-84rpx" v-if="tips">
<view class="flex justify-center items-center">
<wd-img width="300rpx" height="278rpx" :src="`${OSS}images/settle_in/settle_in_image2.png`"/>
</view>
<view class="mt-60rpx text-center">
<view class="text-36rpx leading-50rpx text-#303133">您的信息已成功提交</view>
<view class="font-400 text-28rpx leading-42rpx text-#303133 mt-20rpx text-#9CA3AF">目前正在审核中，请您耐心等待</view>
</view>
</view>
<view>
<navbar title="申请合创合伙人" custom-class='!bg-[#F6F7F8]'></navbar>
</view>
<view class="mx-30rpx mt-38rpx">
<!-- 联系方式 -->
<view class="bg-white rounded-16rpx px-30rpx pt-28rpx mt-20rpx">
<view class="text-32rpx leading-44rpx text-#303133 mb-32rpx flex items-center">
<view class="mr-10rpx">联系方式</view>
<view class="flex items-center">
<wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`"></wd-img>
</view>
</view>
<view>
<view>
<view class="text-26rpx leading-32rpx text-#606266">联系人</view>
<view class="mt-20rpx border-b border-b-solid border-b-[#F6F7F8] pb-20rpx">
<wd-input no-border placeholder="请填写联系人" ></wd-input>
</view>
</view>
<view class="mt-22rpx">
<view class="text-26rpx leading-32rpx text-#606266">手机号</view>
<view class="mt-20rpx border-b border-b-solid border-b-[#F6F7F8] pb-20rpx">
<wd-input no-border placeholder="请填写手机号"></wd-input>
</view>
</view>
<view class="mt-22rpx">
<view class="text-26rpx leading-32rpx text-#606266">验证码</view>
<view class="mt-20rpx border-b border-b-solid border-b-[#F6F7F8] pb-20rpx">
<wd-input type="text" placeholder="请填写手机验证码" v-model="form.code" inputmode="numeric" no-border>
<template #suffix>
<view class="flex items-center mr-34rpx">
<view class="flex items-center">
<view class="text-[#4C9F44] text-28rpx font-400 leading-40rpx" v-if="!startCountDown" @click="Parten.handleCountDown">发送验证码</view>
<view class="!text-[#C9C9C9] text-28rpx font-400 leading-40rpx flex items-center" v-if="startCountDown">
<wd-count-down ref="countDown" :time="countDownTime" millisecond :auto-start="false" format="ss" custom-class="!text-[#C9C9C9] !text-32rpx" @finish="Parten.handleFinishCountDown"></wd-count-down>
<view> S后重发</view>
</view>
</view>
</view>
</template>
</wd-input>
</view>
</view>
<view class="mt-22rpx">
<view class="text-26rpx leading-32rpx text-#606266">省市区</view>
<view class="mt-20rpx border-b border-b-solid border-b-[#F6F7F8] pb-20rpx tea-room-address">
<wd-col-picker v-model="value" :columns="area" :column-change="columnChange" @confirm="Parten.handleConfirmAddress" placeholder="请选择省市区"></wd-col-picker>
</view>
</view>
<view class="mt-22rpx">
<view class="text-26rpx leading-32rpx text-#606266">详细地址</view>
<view class="mt-20rpx pb-20rpx">
<wd-input no-border placeholder="请输入小区/写字楼"></wd-input>
</view>
</view>
</view>
</view>
<!-- 所在区域 -->
<view class="bg-white rounded-16rpx px-30rpx py-32rpx mt-20rpx flex items-center">
<view class="flex items-center">
<view class="text-32rpx leading-44rpx text-#303133 mr-10rpx">所在区域</view>
<view class="flex items-center">
<wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`"></wd-img>
</view>
</view>
<view class="flex-1 ml-80rpx">
<wd-col-picker v-model="form.area" :columns="area" :column-change="columnChange" @confirm="Parten.handleConfirmArea" placeholder="请选择所在区域"></wd-col-picker>
</view>
</view>
<!-- 留言建议 -->
<view class="bg-white rounded-16rpx px-30rpx py-32rpx mt-20rpx">
<view class="text-32rpx leading-44rpx text-#303133 mb-32rpx flex items-center">
留言建议
</view>
<view class="">
<wd-textarea placeholder="有想说的可以在这里写哦！" v-model="form.message" custom-class='!rounded-18rpx !border-2rpx !border-[#EFF0EF] !bg-[#F8F9FA]' custom-textarea-class='!bg-[#F8F9FA]' />
</view>
</view>
</view>
<view class="text-26rpx leading-32rpx text-#606266 mt-24rpx mx-60rpx">
*提交表单申请，工作人员将在3个工作日内与您电话联系，如需及时了解，请直接电话咨询，我们将在第一时间解答
</view>
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center text-[#303133] mt-112rpx pb-66rpx">
<view class="w-330rpx h-90rpx bg-[#FFFFFF] rounded-8rpx mr-30rpx">联系我们</view>
<view class="w-330rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-#fff">提交申请</view>
</view>
</view>
</template>
<script lang="ts" setup>
import { useColPickerData } from '@/hooks/useColPickerData'
const OSS = inject('OSS')
// 审核提示
const tips = ref<boolean>(false)
// 省市区数据
const { colPickerData, findChildrenByCode } = useColPickerData()
const value = ref<string[]>([])
const area = ref<any[]>([
colPickerData.map((item) => {
return {
value: item.value,
label: item.text
}
})
])
const columnChange = ({ selectedItem, resolve, finish }) => {
const areaData = findChildrenByCode(colPickerData, selectedItem.value)
if (areaData && areaData.length) {
resolve(
areaData.map((item) => {
return {
value: item.value,
label: item.text
}
})
)
} else {
finish()
}
}
// 上传文件
const fileList = ref<any[]>([])
const action = 'https://www.mocky.io/v2/5cc8019d300000980a055e76' // 仅做测试使用，实际请换成真实上传接口
// 验证码倒计时
const countDownTime = ref<number>(1 * 60 * 1000) // 60s倒计时
const startCountDown = ref<boolean>(false) // 是否开始倒计时
const countDown = ref<any>(null) // 倒计时组件
// 表单
const form = reactive<{
settleIn: number,
code: string,
message: string,
area: string[]
}>({
settleIn: 1,
code: '',
message: '',
area: []
})
const Parten = {
// 图片选择/删除
handleUploadFile: (event: any) => {
fileList.value = event.fileList
},
// 发送验证码
handleCountDown: () => {
startCountDown.value = true
nextTick(() => {
countDown.value?.start()
// 发送验证码请求
})
},
// 验证码倒计时结束
handleFinishCountDown: () => {
startCountDown.value = false
},
// 确认选择地址
handleConfirmAddress: (selected) => {
console.log("🚀 ~ selected:", selected)
},
// 选择所在区域
handleConfirmArea: (selected) => {
}
}
</script>
<style lang="scss">
page {
background: $cz-page-background;
}
.tea-room-address {
:deep() {
.wd-cell {
padding-left: 0 !important;
}
.wd-cell__wrapper {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
}
}
</style>

271
src/bundle/settle-in/tea-room.vue Normal file
View File

@ -0,0 +1,271 @@
<route lang="jsonc" type="page">
{
"layout": "default",
"style": {
"navigationStyle": "custom"
}
}
</route>
<template>
<view class="">
<!-- 申请成功提示 -->
<view class="mt-84rpx" v-if="tips">
<view v-if="isSuccess">
<view class="flex justify-center items-center">
<wd-img width="300rpx" height="278rpx" :src="`${OSS}images/settle_in/settle_in_image1.png`"/>
</view>
<view class="mt-60rpx text-center">
<view class="text-36rpx leading-50rpx text-#303133">申请加盟合作成功</view>
<view class="font-400 text-28rpx leading-42rpx text-#303133 mt-20rpx">请登录商家端查看信息</view>
<view class="font-400 text-26rpx leading-42rpx text-#9CA3AF mt-28rpx mx-102rpx">如您遇到任何问题，可随时联系客服热线 400-6245-123，我们将竭诚为您服务！</view>
</view>
</view>
<view class="" v-else>
<view class="flex justify-center items-center">
<wd-img width="300rpx" height="278rpx" :src="`${OSS}images/settle_in/settle_in_image2.png`"/>
</view>
<view class="mt-60rpx text-center">
<view class="text-36rpx leading-50rpx text-#303133">您的信息已成功提交</view>
<view class="font-400 text-28rpx leading-42rpx text-#303133 mt-20rpx text-#9CA3AF">目前正在审核中，请您耐心等待</view>
</view>
</view>
</view>
<view class="">
<navbar title="加盟合作" custom-class='!bg-[#F6F7F8]'></navbar>
</view>
<view class="mx-30rpx mt-38rpx">
<!-- 加盟类型 -->
<view class="bg-white rounded-16rpx px-30rpx py-28rpx">
<view class="flex justify-between items-center">
<view class="flex items-center">
<view class="text-32rpx leading-44rpx text-#303133 mr-10rpx">加盟类型</view>
<view class="flex items-center">
<wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`"></wd-img>
</view>
</view>
<view class="flex items-center">
<wd-radio-group v-model="form.settleIn" size="large" shape="dot" checked-color="#4C9F44" inline>
<wd-radio :value="1" border>
<view class="leading-36rpx font-400 text-30rpx ml-12rpx mr-60rpx">加盟</view>
</wd-radio>
<wd-radio :value="2" border>
<view class="leading-36rpx font-400 text-30rpx ml-12rpx">入驻</view>
</wd-radio>
</wd-radio-group>
</view>
</view>
<view class="flex items-center mt-46rpx" v-if="form.settleIn === 2">
<view class="text-32rpx leading-44rpx text-#303133 mr-66rpx">门店名称</view>
<view class="flex-1">
<wd-input no-border placeholder="请填写门店名称" custom-class="!bg-[#F6F7F8] !rounded-16rpx !px-28rpx !py-20rpx"></wd-input>
</view>
</view>
</view>
<!-- 营业执照 -->
<view class="bg-white rounded-16rpx px-30rpx py-28rpx mt-20rpx">
<view class="text-32rpx leading-44rpx text-#303133 mb-32rpx">营业执照</view>
<view class="">
<wd-upload
:file-list="fileList"
:limit="1"
image-mode="scaleToFill"
:action="action"
@change="TeaRoom.handleUploadFile">
<view class="border-2rpx border-dashed border-[#E5E5E5] w-184rpx h-184rpx flex flex-col items-center justify-center rounded-16rpx">
<view class="">
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_upload.png`" mode="aspectFill" />
</view>
<view class="font-400 text-26rpx leading-36rpx text-#303133">营业执照</view>
</view>
</wd-upload>
</view>
</view>
<!-- 联系方式 -->
<view class="bg-white rounded-16rpx px-30rpx pt-28rpx mt-20rpx">
<view class="text-32rpx leading-44rpx text-#303133 mb-32rpx flex items-center">
<view class="mr-10rpx">联系方式</view>
<view class="flex items-center">
<wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`"></wd-img>
</view>
</view>
<view>
<view>
<view class="text-26rpx leading-32rpx text-#606266">联系人</view>
<view class="mt-20rpx border-b border-b-solid border-b-[#F6F7F8] pb-20rpx">
<wd-input no-border placeholder="请填写联系人" ></wd-input>
</view>
</view>
<view class="mt-22rpx">
<view class="text-26rpx leading-32rpx text-#606266">手机号</view>
<view class="mt-20rpx border-b border-b-solid border-b-[#F6F7F8] pb-20rpx">
<wd-input no-border placeholder="请填写手机号"></wd-input>
</view>
</view>
<view class="mt-22rpx">
<view class="text-26rpx leading-32rpx text-#606266">验证码</view>
<view class="mt-20rpx border-b border-b-solid border-b-[#F6F7F8] pb-20rpx">
<wd-input type="text" placeholder="请填写手机验证码" v-model="form.code" inputmode="numeric" no-border>
<template #suffix>
<view class="flex items-center mr-34rpx">
<view class="flex items-center">
<view class="text-[#4C9F44] text-28rpx font-400 leading-40rpx" v-if="!startCountDown" @click="TeaRoom.handleCountDown">发送验证码</view>
<view class="!text-[#C9C9C9] text-28rpx font-400 leading-40rpx flex items-center" v-if="startCountDown">
<wd-count-down ref="countDown" :time="countDownTime" millisecond :auto-start="false" format="ss" custom-class="!text-[#C9C9C9] !text-32rpx" @finish="TeaRoom.handleFinishCountDown"></wd-count-down>
<view> S后重发</view>
</view>
</view>
</view>
</template>
</wd-input>
</view>
</view>
<view class="mt-22rpx">
<view class="text-26rpx leading-32rpx text-#606266">省市区</view>
<view class="mt-20rpx border-b border-b-solid border-b-[#F6F7F8] pb-20rpx tea-room-address">
<wd-col-picker v-model="value" :columns="area" :column-change="columnChange" @confirm="TeaRoom.handleConfirmAddress" placeholder="请选择省市区"></wd-col-picker>
</view>
</view>
<view class="mt-22rpx">
<view class="text-26rpx leading-32rpx text-#606266">详细地址</view>
<view class="mt-20rpx pb-20rpx">
<wd-input no-border placeholder="请输入小区/写字楼"></wd-input>
</view>
</view>
</view>
</view>
<!-- 留言建议 -->
<view class="bg-white rounded-16rpx px-30rpx py-32rpx mt-20rpx">
<view class="text-32rpx leading-44rpx text-#303133 mb-32rpx flex items-center">
留言建议
</view>
<view class="">
<wd-textarea placeholder="有想说的可以在这里写哦！" v-model="form.message" custom-class='!rounded-18rpx !border-2rpx !border-[#EFF0EF] !bg-[#F8F9FA]' custom-textarea-class='!bg-[#F8F9FA]' />
</view>
</view>
</view>
<view class="text-26rpx leading-32rpx text-#606266 mt-24rpx mx-60rpx">
*提交表单申请，工作人员将在3个工作日内与您电话联系，如需及时了解，请直接电话咨询，我们将在第一时间解答
</view>
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center text-[#303133] mt-112rpx pb-66rpx">
<view class="w-330rpx h-90rpx bg-[#FFFFFF] rounded-8rpx mr-30rpx">联系我们</view>
<view class="w-330rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-#fff">提交申请</view>
</view>
</view>
</template>
<script lang="ts" setup>
import { useColPickerData } from '@/hooks/useColPickerData'
const OSS = inject('OSS')
// 审核提示
const tips = ref<boolean>(false)
const isSuccess = ref<boolean>(false)
// 省市区数据
const { colPickerData, findChildrenByCode } = useColPickerData()
const value = ref<string[]>([])
const area = ref<any[]>([
colPickerData.map((item) => {
return {
value: item.value,
label: item.text
}
})
])
const columnChange = ({ selectedItem, resolve, finish }) => {
const areaData = findChildrenByCode(colPickerData, selectedItem.value)
if (areaData && areaData.length) {
resolve(
areaData.map((item) => {
return {
value: item.value,
label: item.text
}
})
)
} else {
finish()
}
}
// 上传文件
const fileList = ref<any[]>([])
const action = 'https://www.mocky.io/v2/5cc8019d300000980a055e76' // 仅做测试使用，实际请换成真实上传接口
// 验证码倒计时
const countDownTime = ref<number>(1 * 60 * 1000) // 60s倒计时
const startCountDown = ref<boolean>(false) // 是否开始倒计时
const countDown = ref<any>(null) // 倒计时组件
// 表单
const form = reactive<{
settleIn: number,
code: string,
message: string
}>({
settleIn: 1,
code: '',
message: ''
})
const TeaRoom = {
// 图片选择/删除
handleUploadFile: (event: any) => {
fileList.value = event.fileList
},
// 发送验证码
handleCountDown: () => {
startCountDown.value = true
nextTick(() => {
countDown.value?.start()
// 发送验证码请求
})
},
// 验证码倒计时结束
handleFinishCountDown: () => {
startCountDown.value = false
},
// 确认选择地址
handleConfirmAddress: (selected) => {
console.log("🚀 ~ selected:", selected)
}
}
</script>
<style lang="scss">
page {
background: $cz-page-background;
}
.tea-room-address {
:deep() {
.wd-cell {
padding-left: 0 !important;
}
.wd-cell__wrapper {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
}
}
</style>

377
src/bundle/settle-in/tea-specialist.vue Normal file
View File

@ -0,0 +1,377 @@
<route lang="jsonc" type="page">
{
"layout": "default",
"style": {
"navigationStyle": "custom"
}
}
</route>
<template>
<view class="">
<!-- 申请成功提示 -->
<view class="mt-84rpx" v-if="tips">
<view class="flex justify-center items-center">
<wd-img width="300rpx" height="278rpx" :src="`${OSS}images/settle_in/settle_in_image1.png`"/>
</view>
<view class="mt-60rpx text-center">
<view class="text-36rpx leading-50rpx text-#303133">申请茶艺师成功</view>
<view class="font-400 text-26rpx leading-42rpx text-#9CA3AF mt-28rpx mx-102rpx">请登录茶艺师端查看信息根据步骤进行操作，如有疑问请联系客服400-6245-123</view>
</view>
<view class="bg-white rounded-16rpx px-34rpx py-28rpx mx-78rpx mt-24rpx">
<view class="font-bold text-28rpx leading-40rpx text-#303133">操作步骤</view>
<view class="font-400 text-28rpx leading-42rpx text-#303133 mt-20rpx">
<view>1.关注【茶址】公众号</view>
<view>2.在左下角【茶址】 → 选择【茶艺师端】</view>
<view>3.用注册手机号+密码 登录</view>
</view>
</view>
</view>
<view class="">
<navbar title="申请茶艺师" custom-class='!bg-[#F6F7F8]'></navbar>
</view>
<view class="mx-30rpx mt-38rpx">
<!-- 营业执照 -->
<view class="bg-white rounded-16rpx px-30rpx py-28rpx mt-20rpx">
<view class="text-32rpx leading-44rpx text-#303133 mb-32rpx">营业执照</view>
<view class="">
<wd-upload
:file-list="fileList"
:limit="1"
image-mode="scaleToFill"
:action="action"
@change="TeaSpecialist.handleUploadFile">
<view class="border-2rpx border-dashed border-[#E5E5E5] w-184rpx h-184rpx flex flex-col items-center justify-center rounded-16rpx">
<view class="">
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_upload.png`" mode="aspectFill" />
</view>
<view class="font-400 text-26rpx leading-36rpx text-#303133">营业执照</view>
</view>
</wd-upload>
</view>
</view>
<!-- 基本信息 -->
<view class="bg-white rounded-16rpx px-30rpx pt-28rpx mt-20rpx">
<view class="text-32rpx leading-44rpx text-#303133 mb-32rpx flex items-center">
<view class="mr-10rpx">基本信息</view>
<view class="flex items-center">
<wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`"></wd-img>
</view>
</view>
<view>
<view>
<view class="text-26rpx leading-32rpx text-#606266">姓名</view>
<view class="mt-20rpx border-b border-b-solid border-b-[#F6F7F8] pb-20rpx">
<wd-input no-border placeholder="请填写姓名" ></wd-input>
</view>
</view>
<view class="mt-22rpx">
<view class="text-26rpx leading-32rpx text-#606266">性别</view>
<view class="mt-20rpx border-b border-b-solid border-b-[#F6F7F8] pb-20rpx tea-specialist-cell">
<wd-picker placeholder="请选择性别" :columns="genderColumns" v-model="form.gender" @confirm="TeaSpecialist.handleConfirmGender" />
</view>
</view>
<view class="mt-22rpx">
<view class="text-26rpx leading-32rpx text-#606266">出生年月</view>
<view class="mt-20rpx border-b border-b-solid border-b-[#F6F7F8] pb-20rpx tea-specialist-cell">
<wd-datetime-picker placeholder="请选择出生年月" v-model="form.born" :maxDate="Date.now()" :minDate="0" type="year-month" @confirm="TeaSpecialist.handleConfirmBornData"></wd-datetime-picker>
</view>
</view>
<view class="mt-22rpx flex items-center justify-between border-b border-b-solid border-b-[#F6F7F8] pb-20rpx">
<view class="mr-166rpx">
<view class="text-26rpx leading-32rpx text-#606266">身高</view>
<view class="mt-20rpx flex items-center">
<wd-input no-border placeholder="请填写姓名"></wd-input>
<view class="text-30rpx leading-32rpx text-#606266">cm</view>
</view>
</view>
<view class="">
<view class="text-26rpx leading-32rpx text-#606266">体重</view>
<view class="mt-20rpx flex items-center">
<wd-input no-border placeholder="请填写姓名"></wd-input>
<view class="text-30rpx leading-32rpx text-#606266">kg</view>
</view>
</view>
</view>
</view>
</view>
<!-- 兴趣爱好 -->
<view class="bg-white rounded-16rpx px-30rpx py-32rpx mt-20rpx">
<view class="text-32rpx leading-44rpx text-#303133 mb-32rpx flex items-center">
兴趣爱好
</view>
<view>
<wd-textarea placeholder="你的茶艺兴趣爱好是什么？比如茶艺研究、品鉴、茶道美学……快来分享一下吧！" v-model="form.message" 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-32rpx mt-20rpx flex items-center">
<view class="flex items-center">
<view class="text-32rpx leading-44rpx text-#303133 mr-10rpx">服务区域</view>
<view class="flex items-center">
<wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`"></wd-img>
</view>
</view>
<view class="flex-1 ml-80rpx">
<wd-col-picker v-model="value" :columns="area" :column-change="columnChange" @confirm="TeaSpecialist.handleConfirmAddress" placeholder="请选择省市区"></wd-col-picker>
</view>
</view>
<!-- 照片信息 -->
<view class="bg-white rounded-16rpx px-30rpx py-28rpx mt-20rpx">
<view class="flex items-center">
<view class="text-32rpx leading-44rpx text-#303133 mr-10rpx">照片信息</view>
<view class="flex items-center">
<wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`"></wd-img>
</view>
</view>
<view class="mt-32rpx">
<wd-upload
:file-list="fileList"
:limit="1"
image-mode="scaleToFill"
:action="action"
@change="TeaSpecialist.handleUploadFile">
<view class="border-2rpx border-dashed border-[#E5E5E5] w-184rpx h-184rpx flex flex-col items-center justify-center rounded-16rpx">
<view class="">
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_upload.png`" mode="aspectFill" />
</view>
<view class="font-400 text-26rpx leading-36rpx text-#303133">本人照片</view>
</view>
</wd-upload>
</view>
</view>
<!-- 健康证、资格证书信息 -->
<view class="bg-white rounded-16rpx px-30rpx py-28rpx mt-20rpx">
<view class="flex items-center">
<view class="text-32rpx leading-44rpx text-#303133 mr-10rpx">健康证、资格证书信息</view>
<view class="flex items-center">
<wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`"></wd-img>
</view>
</view>
<view class="mt-32rpx flex items-center">
<view class="mr-16rpx">
<wd-upload
:file-list="fileList"
:limit="1"
image-mode="scaleToFill"
:action="action"
@change="TeaSpecialist.handleUploadFile2">
<view class="border-2rpx border-dashed border-[#E5E5E5] w-184rpx h-184rpx flex flex-col items-center justify-center rounded-16rpx">
<view class="">
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_upload.png`" mode="aspectFill" />
</view>
<view class="font-400 text-26rpx leading-36rpx text-#303133">健康证</view>
</view>
</wd-upload>
</view>
<view>
<wd-upload
:file-list="fileList"
:limit="1"
image-mode="scaleToFill"
:action="action"
@change="TeaSpecialist.handleUploadFile3">
<view class="border-2rpx border-dashed border-[#E5E5E5] w-184rpx h-184rpx flex flex-col items-center justify-center rounded-16rpx">
<view class="">
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_upload.png`" mode="aspectFill" />
</view>
<view class="font-400 text-26rpx leading-36rpx text-#303133">茶艺师资格证</view>
</view>
</wd-upload>
</view>
</view>
</view>
<!-- 联系方式 -->
<view class="bg-white rounded-16rpx px-30rpx py-32rpx mt-20rpx">
<view class="flex items-center">
<view class="text-32rpx leading-44rpx text-#303133 mr-10rpx">联系方式</view>
<view class="flex items-center">
<wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`"></wd-img>
</view>
</view>
<view class="mt-22rpx">
<view class="text-26rpx leading-32rpx text-#606266">手机号</view>
<view class="mt-20rpx border-b border-b-solid border-b-[#F6F7F8] pb-20rpx">
<wd-input no-border placeholder="请填写手机号"></wd-input>
</view>
</view>
<view class="mt-22rpx">
<view class="text-26rpx leading-32rpx text-#606266">验证码</view>
<view class="mt-20rpx pb-20rpx">
<wd-input type="text" placeholder="请填写手机验证码" v-model="form.code" inputmode="numeric" no-border>
<template #suffix>
<view class="flex items-center mr-34rpx">
<view class="flex items-center">
<view class="text-[#4C9F44] text-28rpx font-400 leading-40rpx" v-if="!startCountDown" @click="TeaSpecialist.handleCountDown">发送验证码</view>
<view class="!text-[#C9C9C9] text-28rpx font-400 leading-40rpx flex items-center" v-if="startCountDown">
<wd-count-down ref="countDown" :time="countDownTime" millisecond :auto-start="false" format="ss" custom-class="!text-[#C9C9C9] !text-32rpx" @finish="TeaSpecialist.handleFinishCountDown"></wd-count-down>
<view> S后重发</view>
</view>
</view>
</view>
</template>
</wd-input>
</view>
</view>
</view>
</view>
<view class="text-26rpx leading-32rpx text-#606266 mt-24rpx mx-60rpx">
*提交表单申请，工作人员将在3个工作日内与您电话联系，如需及时了解，请直接电话咨询，我们将在第一时间解答
</view>
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center text-[#303133] mt-112rpx pb-66rpx">
<view class="w-330rpx h-90rpx bg-[#FFFFFF] rounded-8rpx mr-30rpx">联系我们</view>
<view class="w-330rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-#fff">提交申请</view>
</view>
</view>
</template>
<script lang="ts" setup>
import { useColPickerData } from '@/hooks/useColPickerData'
const OSS = inject('OSS')
// 审核提示
const tips = ref<boolean>(false)
// 省市区数据
const { colPickerData, findChildrenByCode } = useColPickerData()
const value = ref<string[]>([])
const area = ref<any[]>([
colPickerData.map((item) => {
return {
value: item.value,
label: item.text
}
})
])
const columnChange = ({ selectedItem, resolve, finish }) => {
const areaData = findChildrenByCode(colPickerData, selectedItem.value)
if (areaData && areaData.length) {
resolve(
areaData.map((item) => {
return {
value: item.value,
label: item.text
}
})
)
} else {
finish()
}
}
// 性别
const genderColumns = ['女', '男']
// 上传文件
const fileList = ref<any[]>([]) // 本人照片
const fileList2 = ref<any[]>([]) // 健康证
const fileList3 = ref<any[]>([]) // 茶艺师资格证
const action = 'https://www.mocky.io/v2/5cc8019d300000980a055e76' // 仅做测试使用，实际请换成真实上传接口
// 验证码倒计时
const countDownTime = ref<number>(1 * 60 * 1000) // 60s倒计时
const startCountDown = ref<boolean>(false) // 是否开始倒计时
const countDown = ref<any>(null) // 倒计时组件
// 表单
const form = reactive<{
settleIn: number,
code: string,
message: string,
gender: string,
born: string
}>({
settleIn: 1,
code: '',
message: '',
gender: '',
born: ''
})
const TeaSpecialist = {
// 选择性别
handleConfirmGender: (gender: string) => {
console.log("🚀 ~ gender:", gender)
},
// 选择年月日
handleConfirmBornData: (date: {value: number}) => {
const d = new Date(date.value)
console.log("🚀 ~ d:", d)
const year = d.getFullYear()
const month = d.getMonth() + 1
console.log(`${year}年${month}月`);
},
// 上传本人照片
handleUploadFile: (event: any) => {
fileList.value = event.fileList
},
// 上传健康证
handleUploadFile2: (event: any) => {
fileList2.value = event.fileList
},
// 上传茶艺师资格证
handleUploadFile3: (event: any) => {
fileList3.value = event.fileList
},
// 发送验证码
handleCountDown: () => {
startCountDown.value = true
nextTick(() => {
countDown.value?.start()
// 发送验证码请求
})
},
// 验证码倒计时结束
handleFinishCountDown: () => {
startCountDown.value = false
},
// 确认选择地址
handleConfirmAddress: (selected) => {
console.log("🚀 ~ selected:", selected)
}
}
</script>
<style lang="scss">
page {
background: $cz-page-background;
}
.tea-specialist-cell {
:deep() {
.wd-cell {
padding-left: 0 !important;
}
.wd-cell__wrapper {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
}
}
</style>

143
src/components/order/ComboCard.vue
View File

@ -122,17 +122,20 @@
</view>
<template v-if="orderStatus === OrderStatus.Finished || orderStatus === OrderStatus.Cancelled">
<view class="text-center flex items-center text-28rpx mt-28rpx justify-end" @click="comboCard.handleDeleteTeaRoomOrder">
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] mr-28rpx">
删除订单
</view>
<view class="text-center flex items-center text-28rpx mt-28rpx justify-end"
@click="comboCard.handleDeleteOrder(OrderSource.TeaRoom)">
<view class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] mr-28rpx flex items-center justify-center">
删除订单
</view>
</view>
</template>
<template v-if="orderStatus === OrderStatus.Pending">
<view class="text-center flex items-center text-28rpx mt-28rpx justify-end">
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] mr-28rpx" @click="comboCard.handleCancelTeaRoomOrder">取消订单</view>
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44]">去支付</view>
<view class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] mr-28rpx flex items-center justify-center"
@click="comboCard.handleCancelOrder(OrderSource.TeaRoom)">取消订单</view>
<view class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44] flex items-center justify-center"
@click="comboCard.handleToPayOrder(OrderSource.TeaRoom)">去支付</view>
</view>
</template>
</view>
@ -144,19 +147,25 @@
<view class="mr-28rpx">
<wd-img width="200rpx" height="200rpx" :src="`${OSS}images/home/home_image5.png`"></wd-img>
</view>
<view class="flex-1">
<view class="flex items-center">
<view class="font-bold text-[#303133] text-30rpx leading-42rpx mr-14rpx">茶艺师</view>
<view class="w-168rpx h-40rpx relative mr-44rpx">
<view class="absolute left-0 top-0 h-36rpx flex items-start">
<wd-img :src="`${OSS}icon/icon_gold_medal.png`" width="36rpx" height="36rpx"></wd-img>
<view class="flex-1" @click="comboCard.handleToOrderDetail">
<view class="flex items-center relative">
<view class="w-400rpx flex items-center">
<view class="font-bold text-[#303133] text-30rpx leading-42rpx mr-14rpx">茶艺师</view>
<view class="w-160rpx h-40rpx relative mr-44rpx">
<view class="absolute left-0 top-0 h-36rpx flex items-start">
<wd-img :src="`${OSS}icon/icon_gold_medal.png`" 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">金牌茶艺师</view>
</view>
<view class="bg-[#F0F6EF] text-[#006C2D] font-400 text-22rpx leading-32rpx rounded-4rpx text-center w-150rpx ml-18rpx pb-4rpx">金牌茶艺师</view>
</view>
<view class="font-400 text-28rpx leading-20rpx text-[#4C9F44] flex items-center">
<view class="font-400 text-28rpx leading-20rpx text-[#4C9F44] flex items-center absolute top-6rpx right-0">
<text v-if="orderStatus === OrderStatus.Consuming">消费中</text>
<text v-if="orderStatus === OrderStatus.Reserved">已预约</text>
<text v-if="orderStatus === OrderStatus.Serving">服务中</text>
<text v-if="orderStatus === OrderStatus.Finished" class="text-[#606266]">完成</text>
<text v-if="orderStatus === OrderStatus.Pending" class="text-[#FF5951]" >待付款</text>
<text v-if="orderStatus === OrderStatus.Cancelled" class="text-[#C9C9C9]" >订单取消</text>
</view>
</view>
@ -174,6 +183,25 @@
</view>
</view>
</view>
<!-- 操作按钮 -->
<view>
<view v-if="orderStatus === OrderStatus.Finished || orderStatus === OrderStatus.Cancelled"
class="flex items-center text-28rpx mt-28rpx justify-end"
@click="comboCard.handleDeleteOrder(OrderSource.TeaSpecialist)">
<view class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] flex items-center justify-center">
删除订单
</view>
</view>
<view v-if="orderStatus === OrderStatus.Pending"
class="flex items-center text-28rpx mt-28rpx justify-end">
<view class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] mr-28rpx flex items-center justify-center"
@click="comboCard.handleCancelOrder(OrderSource.TeaSpecialist)">
取消订单
</view>
<view class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44] flex items-center justify-center"
@click="comboCard.handleToPayOrder(OrderSource.TeaSpecialist)">去支付</view>
</view>
</view>
</view>
<!-- 取消订单, 删除订单 -->
@ -223,8 +251,8 @@
})
},
// 删除茶室订单
handleDeleteTeaRoomOrder: () => {
// 删除订单
handleDeleteOrder: (source: string) => {
message.confirm({
title: '确定删除订单？',
msg: '删除订单后无法恢复，是否确认删除订单？',
@ -237,6 +265,26 @@
customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
}
}).then((res) => {
switch (source) {
case OrderSource.Direct:
// TODO 这里调用删除直营订单的接口
break;
case OrderSource.Franchise:
// TODO 这里调用删除加盟订单的接口
break;
case OrderSource.DouYin:
// TODO 这里调用删除抖音订单的接口
break;
case OrderSource.TeaRoom:
// TODO 这里调用删除茶室订单的接口
break;
case OrderSource.TeaSpecialist:
// TODO 这里调用删除茶室订单的接口
break;
default:
break;
}
// 点击确认按钮回调事件
toast.info('删除订单成功')
}).catch(() => {
@ -244,8 +292,8 @@
})
},
// 取消茶室订单
handleCancelTeaRoomOrder: () => {
// 取消订单
handleCancelOrder: (source: string) => {
message.confirm({
title: '确定取消订单？',
msg: '取消订单后无法恢复，优惠券可退回',
@ -258,6 +306,25 @@
customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
}
}).then((res) => {
switch (source) {
case OrderSource.Direct:
// TODO 这里调用删除直营订单的接口
break;
case OrderSource.Franchise:
// TODO 这里调用删除加盟订单的接口
break;
case OrderSource.DouYin:
// TODO 这里调用删除抖音订单的接口
break;
case OrderSource.TeaRoom:
// TODO 这里调用删除茶室订单的接口
break;
case OrderSource.TeaSpecialist:
// TODO 这里调用删除茶室订单的接口
break;
default:
break;
}
// 点击确认按钮回调事件
toast.info('订单取消成功')
}).catch(() => {
@ -265,7 +332,7 @@
})
},
// 跳转到团购订单详情页
// 跳转到订单详情页
handleToOrderDetail: () => {
// TODO 这里要对不同类型的订单进行区分跳转一个是直营的一个市加盟的
switch (props.type) {
@ -289,6 +356,44 @@
url: `/bundle/order/tea-room/order-detail?orderStatus=${props.orderStatus}`
})
break;
case OrderSource.TeaSpecialist:
uni.navigateTo({
url: `/bundle/order/tea-specialist/order-detail?orderStatus=${props.orderStatus}`
})
break;
default:
break;
}
},
// 支付
handleToPayOrder: (source: string) => {
switch (source) {
case OrderSource.Direct:
uni.navigateTo({
url: `/bundle/order/platform/direct-order-detail?orderStatus=${props.orderStatus}&toPay=true`
})
break;
case OrderSource.Franchise:
uni.navigateTo({
url: `/bundle/order/platform/franchise-order-detail?orderStatus=${props.orderStatus}&toPay=true`
})
break;
case OrderSource.DouYin:
uni.navigateTo({
url: `/bundle/order/douyin/douyin-order-detail?orderStatus=${props.orderStatus}&toPay=true`
})
break;
case OrderSource.TeaRoom:
uni.navigateTo({
url: `/bundle/order/tea-room/order-detail?orderStatus=${props.orderStatus}&toPay=true`
})
break;
case OrderSource.TeaSpecialist:
uni.navigateTo({
url: `/bundle/order/tea-specialist/order-detail?orderStatus=${props.orderStatus}&toPay=true`
})
break;
default:
break;
}

38
src/hooks/useColPickerData.ts Normal file
View File

@ -0,0 +1,38 @@
// 可以将此代码放置于项目src/hooks/useColPickerData.ts中
import { useCascaderAreaData } from '@vant/area-data'
export type CascaderOption = {
text: string
value: string
children?: CascaderOption[]
}
/**
* 使用'@vant/area-data'作为数据源，构造ColPicker组件的数据
* @returns
*/
export function useColPickerData() {
// '@vant/area-data' 数据源
const colPickerData: CascaderOption[] = useCascaderAreaData()
// 根据code查找子节点，不传code则返回所有节点
function findChildrenByCode(data: CascaderOption[], code?: string): CascaderOption[] | null {
if (!code) {
return data
}
for (const item of data) {
if (item.value === code) {
return item.children || null
}
if (item.children) {
const childrenResult = findChildrenByCode(item.children, code)
if (childrenResult) {
return childrenResult
}
}
}
return null
}
return { colPickerData, findChildrenByCode }
}

56
src/pages.json
View File

@ -203,6 +203,30 @@
"navigationStyle": "custom"
}
},
{
"path": "settle-in/parten",
"type": "page",
"layout": "default",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "settle-in/tea-room",
"type": "page",
"layout": "default",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "settle-in/tea-specialist",
"type": "page",
"layout": "default",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "store-recharge/store-recharge",
"type": "page",
@ -363,6 +387,38 @@
"style": {
"navigationStyle": "custom"
}
},
{
"path": "order/tea-specialist/order-list",
"type": "page",
"layout": "default",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "parten/pages/bill/bill",
"type": "page",
"layout": "default",
"style": {
"navigationBarTitleText": ""
}
},
{
"path": "parten/pages/my/my",
"type": "page",
"layout": "default",
"style": {
"navigationBarTitleText": ""
}
},
{
"path": "parten/pages/sub/sub",
"type": "page",
"layout": "default",
"style": {
"navigationBarTitleText": ""
}
}
]
}

2
src/pages/login/mobile.vue
View File

@ -98,13 +98,11 @@
const page = ref<{title: string, desc: string}>({title: '其他手机号登录', desc: '请输入你要登录的手机号'})
const showEditSuccessPopup = ref<boolean>(false) // 显示手机号修改成功弹窗
const userId = ref<number>(0) // 用户ID，修改手机号时需要传
/** 结束 **/
/** 验证码倒计时 **/
const countDownTime = ref<number>(1 * 60 * 1000) // 60s倒计时
const startCountDown = ref<boolean>(false) // 是否开始倒计时
const countDown = ref<any>(null) // 倒计时组件
/** 结束 **/
/** 表单相关 **/
const model = reactive<{

56
src/pages/my/my.vue
View File

@ -162,7 +162,7 @@
<view class="px-30rpx pt-30rpx py-24rpx">茶室订单</view>
<view class="flex relative px-30rpx">
<view v-for="(item, index) in roomMenuList" :key="index">
<navigator :url="`/bundle/order/tea-room/order-list?orderType=${item.type}`" hover-class="none">
<navigator :url="`/bundle/order/tea-room/order-list?orderStatus=${item.status}`" hover-class="none">
<view class="w-96rpx text-center flex flex-col items-center justify-center mr-30rpx">
<view class="w-36rpx h-36rpx flex items-center justify-center">
<wd-img width="100%" height="100%" :src="item.icon"></wd-img>
@ -179,12 +179,14 @@
<view class="px-30rpx pt-30rpx py-24rpx">茶艺师订单</view>
<view class="flex relative px-30rpx">
<view v-for="(item, index) in teaReserveMenuList" :key="index">
<view class="w-96rpx text-center flex flex-col items-center justify-center mr-30rpx">
<view class="w-36rpx h-36rpx flex items-center justify-center">
<wd-img width="100%" height="100%" :src="item.icon"></wd-img>
<navigator :url="`/bundle/order/tea-specialist/order-list?orderStatus=${item.status}`" hover-class="none">
<view class="w-96rpx text-center flex flex-col items-center justify-center mr-30rpx">
<view class="w-36rpx h-36rpx flex items-center justify-center">
<wd-img width="100%" height="100%" :src="item.icon"></wd-img>
</view>
<view class="font-400 text-24rpx text-[#303133] leading-34rpx mt-8rpx">{{ item.title }}</view>
</view>
<view class="font-400 text-24rpx text-[#303133] leading-34rpx mt-8rpx">{{ item.title }}</view>
</view>
</navigator>
</view>
</view>
</view>
@ -194,15 +196,17 @@
<view class="px-30rpx pt-30rpx py-24rpx">更多服务</view>
<view class="flex px-30rpx">
<view v-for="(item, index) in serviceMenuList" :key="index">
<view class="text-center flex flex-col items-center justify-center mr-30rpx relative" :class="item.badge ? 'w-180rpx ml-[-10rpx]' : 'w-120rpx'">
<view class="w-60rpx h-60rpx flex items-center justify-center">
<wd-img width="100%" height="100%" :src="item.icon"></wd-img>
<navigator :url="item.url" hover-class="none">
<view class="text-center flex flex-col items-center justify-center mr-30rpx relative" :class="item.badge ? 'w-180rpx ml-[-10rpx]' : 'w-120rpx'">
<view class="w-60rpx h-60rpx flex items-center justify-center">
<wd-img width="100%" height="100%" :src="item.icon"></wd-img>
</view>
<view class="font-400 text-24rpx text-[#303133] leading-34rpx mt-8rpx">{{ item.title }}</view>
<view class="service-badge rounded-18rpx text-[#63300E] text-16rpx leading-20rpx w-72rpx h-28rpx text-center leading-28rpx absolute top-0 right-0" v-if="item.badge">
{{item.badge}}
</view>
</view>
<view class="font-400 text-24rpx text-[#303133] leading-34rpx mt-8rpx">{{ item.title }}</view>
<view class="service-badge rounded-18rpx text-[#63300E] text-16rpx leading-20rpx w-72rpx h-28rpx text-center leading-28rpx absolute top-0 right-0" v-if="item.badge">
{{item.badge}}
</view>
</view>
</navigator>
</view>
</view>
</view>
@ -251,26 +255,26 @@
// 茶室订单
const roomMenuList = reactive([
{ id: 1, title: '全部订单', icon: `${OSS}icon/icon_room_all_order.png`, badge: '', type: 'all' },
{ id: 2, title: '待付款', icon: `${OSS}icon/icon_room_wait_pay_order.png`, badge: '', type: OrderStatus.Pending },
{ id: 3, title: '预约单', icon: `${OSS}icon/icon_room_reserve_order.png`, badge: '', type: OrderStatus.Reserved },
{ id: 4, title: '已完结', icon: `${OSS}icon/icon_room_finish_order.png`, badge: '', type: OrderStatus.Finished },
{ id: 1, title: '全部订单', icon: `${OSS}icon/icon_room_all_order.png`, badge: '', status: 'all' },
{ id: 2, title: '待付款', icon: `${OSS}icon/icon_room_wait_pay_order.png`, badge: '', status: OrderStatus.Pending },
{ id: 3, title: '预约单', icon: `${OSS}icon/icon_room_reserve_order.png`, badge: '', status: OrderStatus.Reserved },
{ id: 4, title: '已完结', icon: `${OSS}icon/icon_room_finish_order.png`, badge: '', status: OrderStatus.Finished },
])
// 茶艺师订单
const teaReserveMenuList = reactive([
{ id: 1, title: '全部订单', icon: `${OSS}icon/icon_tea_all_order.png`, badge: '', type: 'all' },
{ id: 2, title: '待付款', icon: `${OSS}icon/icon_tea_wait_pay_order.png`, badge: '', type: OrderStatus.Pending },
{ id: 3, title: '预约单', icon: `${OSS}icon/icon_tea_reserve_order.png`, badge: '', type: OrderStatus.Reserved },
{ id: 4, title: '待确认', icon: `${OSS}icon/icon_tea_wait_confirm_order.png`, badge: '', type: OrderStatus.Confirm },
{ id: 4, title: '已完结', icon: `${OSS}icon/icon_tea_finish_order.png`, badge: '', type: OrderStatus.Finished },
{ id: 1, title: '全部订单', icon: `${OSS}icon/icon_tea_all_order.png`, badge: '', status: 'all' },
{ id: 2, title: '待付款', icon: `${OSS}icon/icon_tea_wait_pay_order.png`, badge: '', status: OrderStatus.Pending },
{ id: 3, title: '预约单', icon: `${OSS}icon/icon_tea_reserve_order.png`, badge: '', status: OrderStatus.Reserved },
{ id: 4, title: '待确认', icon: `${OSS}icon/icon_tea_wait_confirm_order.png`, badge: '', status: OrderStatus.Confirm },
{ id: 4, title: '已完结', icon: `${OSS}icon/icon_tea_finish_order.png`, badge: '', status: OrderStatus.Finished },
])
// 更多服务
const serviceMenuList = reactive([
{ id: 1, title: '申请茶馆', icon: `${OSS}icon/icon_service_teahouse.png`, badge: '', url: '' },
{ id: 2, title: '申请茶艺师', icon: `${OSS}icon/icon_service_tea.png`, badge: '', url: '' },
{ id: 3, title: '合创合伙人', icon: `${OSS}icon/icon_service_partner.png`, badge: '赚佣金', url: '' },
{ id: 1, title: '申请茶馆', icon: `${OSS}icon/icon_service_teahouse.png`, badge: '', url: '/bundle/settle-in/tea-room' },
{ id: 2, title: '申请茶艺师', icon: `${OSS}icon/icon_service_tea.png`, badge: '', url: '/bundle/settle-in/tea-specialist' },
{ id: 3, title: '合创合伙人', icon: `${OSS}icon/icon_service_partner.png`, badge: '赚佣金', url: '/bundle/settle-in/parten' },
])
// 推广码弹窗

8
src/utils/order.ts
View File

@ -63,7 +63,7 @@ export const OrderSourceText: Record<OrderSource, string> = {
// 订单状态
export enum OrderStatus {
Consuming = 'consuming', // 消费中
Consuming = 'consuming', // 消费中(服务中)
Reserved = 'reserved', // 预约单(已预约)
Serving = 'serving', // 服务中(茶艺师订单独有的)
Pending = 'pending', // 待付款
@ -111,12 +111,12 @@ export const OrderStatusTitle: Record<OrderSource, Record<OrderStatus, string>>
},
[OrderSource.TeaSpecialist]: {
[OrderStatus.Consuming]: '消费中',
[OrderStatus.Reserved]: '预约单',
[OrderStatus.Reserved]: '已预约',
[OrderStatus.Serving]: '服务中',
[OrderStatus.Pending]: '待付款',
[OrderStatus.Confirm]: '待确认',
[OrderStatus.Confirm]: '订单待确认',
[OrderStatus.Finished]: '已完结',
[OrderStatus.Cancelled]: '已取消',
[OrderStatus.Cancelled]: '订单取消',
[OrderStatus.ToUse]: '待使用',
[OrderStatus.Used]: '交易完成',
[OrderStatus.Refunded]: '售后完成',