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-16 17:09:34 +08:00
parent 6d2cba0f34
commit e9f804b373
11 changed files with 874 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,7 +17,15 @@
<view class="text-[#909399] text-26rpx leading-36rpx mx-102rpx mb-40rpx">
<view v-if="orderStatus === GroupBuyingCategoryOrderStatus.AfterSaleApply || orderStatus === GroupBuyingCategoryOrderStatus.AfterSaleProcessing">请耐心等待，我们会尽快处理您的请求</view>
<view v-if="orderStatus === GroupBuyingCategoryOrderStatus.Refunded" class="text-center mt-14rpx">
<view class="text-40rpx text-[#303133] leading-56rpx">退款成功￥128.00</view>
<view class="text-40rpx text-[#303133] leading-56rpx">
<view v-if="orderType !== ReserveCategory.TeaSpecialist">退款成功￥128.00</view>
<!-- 茶艺师退款需要有退款详情 -->
<view v-if="orderType === ReserveCategory.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>
@ -31,14 +39,25 @@
<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="afterSales.handleToCombo">
<!-- 非茶艺师退款 -->
<view class="flex justify-between items-center" @click="afterSales.handleToCombo" v-if="orderType !== ReserveCategory.TeaSpecialist">
<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" @click="afterSales.handleToCombo" v-if="orderType === ReserveCategory.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>3小时</view>
<view>x1</view>
</view>
<!-- 茶艺师退显示车马费-->
<view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx" v-if="orderType === ReserveCategory.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">￥29.32</text>
@ -74,36 +93,11 @@
<!-- 售后已完成 -->
<view class="bg-white rounded-16rpx px-30rpx py-34rpx mx-30rpx mt-20rpx" v-if="orderStatus === GroupBuyingCategoryOrderStatus.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 class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx" v-if="orderType !== ReserveCategory.TeaSpecialist">
<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="bg-white rounded-16rpx px-30rpx py-34rpx mx-30rpx mt-20rpx" v-if="orderStatus !== GroupBuyingCategoryOrderStatus.AfterSaleApply">
<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 class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx" v-if="orderType !== ReserveCategory.TeaSpecialist">
<view>退款金额</view>
<view>￥159.22</view>
</view>
@ -122,19 +116,23 @@
</view>
<!-- 操作按钮 -->
<view class="w-full fixed bottom-0 left-0 right-0 h-152rpx" :class="orderStatus === GroupBuyingCategoryOrderStatus.AfterSaleApply ? '' : 'bg-white'">
<view class="mt-34rpx">
<!-- 待使用 -->
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center text-[#303133]" v-if="orderStatus !== GroupBuyingCategoryOrderStatus.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="w-full fixed bottom-0 left-0 right-0 h-152rpx"
:class="orderStatus === GroupBuyingCategoryOrderStatus.AfterSaleApply ? '' : 'bg-white'"
v-if="orderType !== ReserveCategory.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 !== GroupBuyingCategoryOrderStatus.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 === GroupBuyingCategoryOrderStatus.AfterSaleApply" @click="afterSales.handleSubmitRefund">
<view class="w-630rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]">提交</view>
<!-- 申请售后 -->
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center"
v-if="orderStatus === GroupBuyingCategoryOrderStatus.AfterSaleApply" @click="afterSales.handleSubmitRefund">
<view class="w-630rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]">提交</view>
</view>
</view>
</view>
</view>
<!-- 售后原因弹出框 -->
@ -165,11 +163,142 @@
<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="value">
<!-- 茶艺师总费用 -->
<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>
</template>
<script lang="ts" setup>
import { GroupBuyingCategory, GroupBuyingCategoryOrderStatus, GroupBuyingStatusTitle, PersonalReasonMap, MerchantReasonMap, ReasonMap } from '@/utils/order'
import { GroupBuyingCategory, GroupBuyingCategoryOrderStatus, GroupBuyingStatusTitle, PersonalReasonMap, MerchantReasonMap, ReasonMap, ReserveCategory } from '@/utils/order'
import {toast} from '@/utils/toast'
/** 表单相关 **/
@ -189,19 +318,25 @@
info: '', // 订单信息（字符串）
reason: 0 // 售后原因（整数类型，建议和选项value对应）
})
/** 结束 **/
/** 退款详情 **/
const showRefundDetailsPopup = ref<boolean>(false) // 是否显示退款详情弹出框
const value = ref<string[]>(['item1'])
/** 结束 **/
const OSS = inject('OSS')
const title = ref<string>('')
const type = ref<string>('') // 订单类型：团购、抖音等
const orderType = ref<string>('') // 订单类型：团购、抖音、茶艺师退款
const orderStatus = ref<string>('') // 订单状态：待使用、退款等
onLoad((args) => {
// 这里暂时使用 GroupBuyingCategory.Direct 这个，因为平台团购类型下面都是有共同的售后
title.value = GroupBuyingStatusTitle[GroupBuyingCategory.Direct][args.orderStatus] || '订单详情'
type.value = args.type
orderType.value = args.orderType
orderStatus.value = args.orderStatus
})
@ -228,6 +363,11 @@
reasonText.value = ReasonMap[reasonModelValue.value]
formData.reason = reasonModelValue.value
showResonPopup.value = false
},
// 查看退款详情
handleRefundDetails: () => {
toast.info('跳转到退款详情')
}
}
</script>
@ -243,4 +383,18 @@
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>

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

@ -19,8 +19,7 @@
<text v-if="orderStatus === ReserveCategoryOrderStatus.Reserved">使用过程中有任何问题，请联系客服</text>
</view>
<!-- 信息模块 -->
<view class="mx-30rpx coupon-bg" >
<view class="flex items-center px-30rpx pt-30rpx pb-40rpx">
<view class="mr-30rpx">
@ -62,6 +61,7 @@
</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">
@ -77,7 +77,7 @@
</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>
@ -87,12 +87,12 @@
<view class="text-[#606266] mr-54rpx">服务方式</view>
<view class="text-[#303133]">到店服务</view>
</view>
<view class="text-28rpx leading-40rpx flex items-center mt-22rpx">
<view class="text-28rpx leading-40rpx flex items-center mt-22rpx" v-if="orderStatus === ReserveCategoryOrderStatus.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">门店地址</view>
<view class="text-[#606266] mr-54rpx"> {{ orderStatus === ReserveCategoryOrderStatus.Serving ? '门店地址' : '服务地址' }}</view>
<view class="text-[#303133]">青浦区仓桥路478号</view>
</view>
</view>
@ -100,7 +100,7 @@
<view class="text-center mr-20rpx" >
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_nav.png`"/>
</view>
<view class="text-center" >
<view class="text-center" v-if="orderStatus === ReserveCategoryOrderStatus.Serving">
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_phone.png`"/>
</view>
</view>
@ -133,19 +133,17 @@
</view>
</view>
<!-- 操作按钮 -->
<!-- <view class="w-full fixed bottom-0 left-0 right-0 bg-white h-152rpx">
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center">
<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> -->
<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" >
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" v-if="orderStatus === ReserveCategoryOrderStatus.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 === ReserveCategoryOrderStatus.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>
@ -155,40 +153,58 @@
<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 }}
<scroll-view scroll-y class="h-[660rpx] pb-20rpx">
<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.id"
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>
<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 class="mx-60rpx mt-50rpx">
<view class="text-[#01000D] text-32rpx leading-44rpx">续订茶叶
<text class="text-26rpx leading-36rpx text-[#909399] ml-20rpx">支持多选</text>
</view>
<view class="grid grid-cols-3 gap-x-20rpx gap-y-20rpx mt-28rpx">
<view v-for="item in teaList" :key="item.id"
class="h-110rpx rounded-16rpx flex flex-col items-center justify-center text-28rpx leading-40rpx"
:class="selectedRenewTea.includes(item.id) ? 'bg-[#4C9F44] text-[#fff]' : 'bg-[#F7F7F7] text-[#606266]'"
@click="orderDetail.handleToggleRenewTea(item.id)">
<view>{{item.title}}</view>
<view>{{item.price}}</view>
</view>
</wd-radio-group>
</view>
</view>
</view>
<view class="mt-102rpx">
<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>
</scroll-view>
<view>
<wd-gap height="2rpx" bg-color="#EFF0F2"></wd-gap>
</view>
@ -218,11 +234,29 @@
<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-[#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-popup v-model="showRefundRule" custom-class="rounded-16rpx" lock-scroll>
<view class="w-592rpx py-52rpx">
<view class="text-36rpx text-[#303133] leading-50rpx text-center">确定申请退款吗？</view>
<view class="font-400 text-32rpx text-[#303133] leading-44rpx text-center mt-40rpx">退款按照如下规则，请谨慎操作。</view>
<view class="font-400 text-32rpx text-[#303133] leading-44rpx px-54rpx mt-18rpx">
<view>1）茶艺师未出发，100%退款；</view>
<view>2）茶艺师已出发未到达目的地，不退车马费；</view>
<view>3）茶艺师出发并到达目的地，不退车马费，并且支付茶艺师50%服务费。</view>
</view>
<view class="mt-54rpx text-32rpx leading-44rpx flex items-center justify-center leading-80rpx text-center">
<view class="w-240rpx h-80rpx bg-[#F6F7F8] rounded-8rpx text-[#303133] mr-30rpx" @click="showRefundRule = false">取消</view>
<view class="w-240rpx h-80rpx bg-[#4C9F44] rounded-8rpx text-[#fff]" @click="orderDetail.handleConfirmRefund">确定退款</view>
</view>
</view>
</wd-popup>
</view>
</template>
@ -234,8 +268,11 @@
const title = ref<string>('')
const orderStatus = ref<string>('') // 订单状态：待使用、退款等
const showRefundRule = ref<boolean>(false) // 退款规则弹窗
/** 续订包间 **/
/** 续订 **/
const showRenewPopup = ref<boolean>(false)
const timeList = [
{id: 1, time: '1小时'},
@ -264,6 +301,16 @@
}
])
const teaList = [
{id: 1, title: '红茶(3泡)', price: '￥128.00'},
{id: 2, title: '铁观音(3泡)', price: '￥128.00'},
{id: 3, title: '红茶(3泡)', price: '￥128.00'},
{id: 4, title: '红茶(3泡)', price: '￥128.00'},
{id: 5, title: '红茶(3泡)', price: '￥128.00'},
]
const selectedRenewTea = ref<Array<any>>([]) // 选择的续订时间
const showRenewSuccessPopup = ref<boolean>(false)
/** 结束 **/
@ -273,16 +320,35 @@
})
const orderDetail = {
// 确认订单
handleConfirmOrder: () => {
},
// 续订茶艺师
handleToggleRenewTea: (id: number) => {
const idx = selectedRenewTea.value.indexOf(id)
if (idx > -1) {
selectedRenewTea.value.splice(idx, 1) // 已选中则移除
} else {
selectedRenewTea.value.push(id) // 未选中则添加
}
},
// 再次预定
handleAgainReeserve: () => {
showRenewSuccessPopup.value = true
showRenewPopup.value = false
}
},
// 申请退款
handleConfirmRefund: () => {
},
// 联系客服
handleService: () => {
},
}
</script>

173
src/bundle/profile/profile.vue Normal file
View File

@ -0,0 +1,173 @@
<route lang="jsonc" type="page">
{
"layout": "default",
"style": {
"navigationStyle": "custom"
}
}
</route>
<template>
<view class="">
<view class="">
<navbar title="个人信息" custom-class='!bg-[#F6F7F8]'></navbar>
</view>
<view class="bg-white rounded-16rpx mt-20rpx mx-30rpx px-30rpx py-32rpx">
<!-- 头像 -->
<view class="flex justify-between items-center mb-54rpx">
<view class="font-400 text-[#303133] text-30rpx leading-42rpx">头像</view>
<view class="flex justify-end">
<view class="flex items-center">
<view class="mr-10rpx">
<wd-upload
:file-list="fileList"
:limit="1"
image-mode="scaleToFill"
:action="action">
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_avatar.png`" mode="aspectFill" round />
</wd-upload>
</view>
<wd-icon name="arrow-right" size="32rpx" color="#C0C4CC" />
</view>
</view>
</view>
<!-- 昵称 -->
<view class="flex justify-between items-center mb-54rpx" @click="showEditNicknamePopup = true">
<view class="font-400 text-[#303133] text-30rpx leading-42rpx">昵称</view>
<view class="flex justify-end">
<view class="flex items-center">
<view class="font-400 text-[#303133] text-30rpx leading-42rpx">
王小伟
</view>
<view>
<wd-icon name="arrow-right" size="32rpx" color="#C0C4CC" />
</view>
</view>
</view>
</view>
<!-- 修改手机号 -->
<view class="flex justify-between items-center" @click="profile.handleToEditMobile">
<view class="font-400 text-[#303133] text-30rpx leading-42rpx">修改手机号</view>
<view class="flex justify-end">
<view class="flex items-center">
<view class="font-400 text-[#303133] text-30rpx leading-42rpx">
+86 155****5456
</view>
<view>
<wd-icon name="arrow-right" size="32rpx" color="#C0C4CC" />
</view>
</view>
</view>
</view>
</view>
<view class="bg-white rounded-16rpx mt-144rpx mx-30rpx px-30rpx py-32rpx text-center font-400 text-[#303133] text-30rpx leading-42rpx" @click="showLogoutPopup = true">
退出登录
</view>
<!-- 修改昵称 -->
<wd-popup v-model="showEditNicknamePopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
<view class="relative pb-56rpx">
<view class="absolute top-18rpx right-30rpx" @click="showEditNicknamePopup = 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="mt-70rpx mx-48rpx">
<wd-input
clearable
type="text"
placeholder="请输入昵称"
v-model="nickname"
no-border
custom-class="!bg-[#F6F7F8] !rounded-16rpx !text-30rpx !leading-48rpx"
custom-input-class="!h-104rpx !pl-60rpx">
<template #prefix>
<view class="ml-30rpx font-bold text-30rpx leading-48rpx text-[#303133]">
昵称
</view>
</template>
</wd-input>
</view>
<view class="mt-22rpx text-26rpx leading-36rpx text-[#909399] mx-48rpx">昵称限制1-10字符，一个汉字为一个字符</view>
<view class="mx-48rpx h-90rpx leading-90rpx rounded-8rpx text-center mt-112rpx text-[#fff]" :class="nickname ? 'bg-[#4C9F44]' : 'bg-[#A5CFA1]'" @click="profile.handleSaveNickname">保存</view>
</view>
</wd-popup>
<!-- 退出登录 -->
<wd-popup v-model="showLogoutPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
<view class="relative pt-54rpx pb-74rpx">
<view class="text-[#303133] text-36rpx leading-46rpx text-center">您确定要退出该账号吗？</view>
<view class="mt-76rpx">
<view class="bg-[#4C9F44] h-90rpx leading-90rpx mx-60rpx rounded-8rpx text-center text-[#fff]" @click="profile.handleLogout">
退出登录
</view>
<view class="bg-[#fff] border-2rpx border-solid border-[#9CA3AF] h-90rpx leading-90rpx mx-60rpx rounded-8rpx text-center text-[#303133] mt-40rpx"
@click="showLogoutPopup = false">
取消
</view>
</view>
</view>
</wd-popup>
</view>
</template>
<script lang="ts" setup>
import {toast} from '@/utils/toast'
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 = {
// 图片选择/删除
handleChange: (e: any) => {
console.log("🚀 ~ e:", e)
},
// 保存昵称
handleSaveNickname: () => {
if (!nickname.value) {
toast.info('请输入昵称')
return
}
toast.info('昵称修改成功')
},
// 修改手机号
handleToEditMobile: () => {
uni.navigateTo({
url: '/pages/login/mobile?type=edit&userId=123' // userId仅做测试使用，实际请传真实用户ID
})
},
// 退出
handleLogout: () => {
}
}
</script>
<style lang="scss">
page {
background: $cz-page-background;
}
</style>

4
src/bundle/reserve-room/room.vue
View File

@ -23,7 +23,7 @@
</navbar>
</view>
<view class="mt-20rpx mx-30rpx swiper" >
<view class="mt-20rpx mx-30rpx swiper">
<view>
<wd-swiper value-key="image" height="320rpx"
:indicator="{ type: 'dots-bar' }" :list="swiperList" v-model:current="current"
@ -95,6 +95,7 @@
</wd-tabs>
</view>
<!-- 客服弹窗 -->
<wd-popup v-model="showServicePopup" lock-scroll custom-style="border-radius:30rpx;" @close="showServicePopup = false">
<view class="text-center w-440rpx h-560rpx flex flex-col justify-center items-center">
<view class="w-240rpx h-240rpx" @click="room.handleOpenServiceSheet">
@ -104,6 +105,7 @@
<view class="text-28rpx text-[#818CA9] leading-50rpx mt-22rpx">点击二维码添加客服</view>
</view>
</wd-popup>
<wd-action-sheet v-model="showAction" :actions="sheetMenu" cancel-text="取消" @close="showAction = false" @select="room.handleSelectMenu" />
</view>
</template>

151
src/bundle/vip-benefits/vip-benefits.vue Normal file
View File

@ -0,0 +1,151 @@
<route lang="jsonc" type="page">
{
// "needLogin": true,
"layout": "default",
"style": {
"navigationStyle": "custom"
}
}
</route>
<template>
<view class="bg">
<view>
<navbar custom-class="!bg-[transparent]" icon-left-color="#ffffff"></navbar>
</view>
<view class="mt-20rpx pb-86rpx">
<!-- 背景图 -->
<view class="flex justify-center">
<view class="relative">
<view class="">
<wd-img width="692rpx" height="328rpx" :src="`${OSS}images/vip_benefits/vip_benefits_image2.png`" mode="aspectFill" v-if="currentVipType === 'normal'"></wd-img>
<wd-img width="692rpx" height="328rpx" :src="`${OSS}images/vip_benefits/vip_benefits_image2.png`" mode="aspectFill" v-if="currentVipType === 'vip'"></wd-img>
<wd-img width="692rpx" height="328rpx" :src="`${OSS}images/vip_benefits/vip_benefits_image3.png`" mode="aspectFill" v-if="currentVipType === 'partner'"></wd-img>
</view>
<view class="absolute top-50rpx px-36rpx w-full">
<view class="flex">
<wd-img width="66rpx" height="66rpx" :src="`${OSS}icon/icon_vip.png`"></wd-img>
<view class="font-400 text-48rpx leading-66rpx text-[#000] ml-14rpx">
<view>
<view v-if="currentVipType === 'normal' || currentVipType === 'vip'">会员权益</view>
<view v-if="currentVipType === 'partner'">合伙人权益</view>
</view>
<view class="text-26rpx leading-36rpx mt-8rpx" v-if="currentVipType === 'vip' || currentVipType === 'partner'">2026.03.06到期</view>
</view>
</view>
<view class="mt-44rpx w-272rpx h-96rpx font-400 text-26rpx text-[#000] leading-40rpx" v-if="currentVipType === 'normal'">
成为会员可以享受以下权益
</view>
<view class="mt-28rpx text-[#000]" v-if="currentVipType === 'vip' || currentVipType === 'partner'">
<view class="text-26rpx leading-40rpx font-400">本月消费</view>
<view class="font-bold text-32rpx leading-34rpx">￥23014.02</view>
<view class="mr-38rpx mt-14rpx progress">
<wd-progress :percentage="60" hide-text color="#000" custom-class="!my-10rpx"></wd-progress>
</view>
</view>
</view>
</view>
</view>
<!-- 权益信息 -->
<view class="bg-[#fff] rounded-16rpx mx-30rpx mt-40rpx">
<view class="text-36rpx leading-50rpx text-[#303133] p-30rpx">会员权益</view>
<view class="mx-26rpx pb-48rpx">
<view class="flex items-center">
<view class="mr-26rpx">
<wd-img width="88rpx" height="88rpx" :src="`${OSS}images/vip_benefits/vip_benefits_image4.png`"></wd-img>
</view>
<view>
<view class="text-30rpx leading-42rpx text-[#303133]">茶室预定</view>
<view class="text-28rpx leading-30rpx text-[#606266] mt-14rpx">预定茶室享受八折优惠</view>
</view>
</view>
<view class="flex items-center mt-74rpx">
<view class="mr-26rpx">
<wd-img width="88rpx" height="88rpx" :src="`${OSS}images/vip_benefits/vip_benefits_image4.png`"></wd-img>
</view>
<view>
<view class="text-30rpx leading-42rpx text-[#303133]">优惠券</view>
<view class="text-28rpx leading-40rpx text-[#606266] mt-14rpx">当月消费满一定额度，次月可以领取等级优惠券</view>
</view>
</view>
<view class="border-2rpx border-solid border-[#D6D9E3] rounded-12rpx p-0 overflow-hidden w-full max-w-600rpx mx-auto mt-40rpx">
<view class="flex text-28rpx text-[#303133] text-[40rpx] border-b border-[#E5E6EB]">
<view class="flex-1 py-24rpx text-center bg-[#F6F7F8] border-r border-[#D6D9E3]">消费金额</view>
<view class="flex-1 py-24rpx text-center bg-[#F6F7F8]">优惠券</view>
</view>
<view class="flex font-400 text-28rpx leading-40rpx text-[#303133] border-b border-[#E5E6EB]">
<view class="flex-1 py-24rpx text-center border-r border-[#D6D9E3]">￥10000</view>
<view class="flex-1 py-24rpx text-center">150元优惠券</view>
</view>
<view class="flex font-400 text-28rpx leading-40rpx text-[#303133]">
<view class="flex-1 py-24rpx text-center border-r border-[#D6D9E3]">￥20000</view>
<view class="flex-1 py-24rpx text-center">350元优惠券</view>
</view>
</view>
<view class="flex items-center mt-74rpx">
<view class="mr-26rpx">
<wd-img width="88rpx" height="88rpx" :src="`${OSS}images/vip_benefits/vip_benefits_image5.png`"></wd-img>
</view>
<view>
<view class="text-30rpx leading-42rpx text-[#303133]">服务权益</view>
<view class="text-28rpx leading-40rpx text-[#606266] mt-14rpx">✓.尊享20个VIP名额（价值7980元）</view>
<view class="text-28rpx leading-42rpx text-[#606266] mt-14rpx">✓.下级VIP消费金额5%永久提成，构建持续收益管道</view>
</view>
</view>
</view>
</view>
<view class="btn text-center leading-108rpx mx-auto mt-116rpx">
立即成为会员 ￥499/年
</view>
</view>
</view>
</template>
<script lang="ts" setup>
const OSS = inject('OSS')
// 三种权益身份(普通会员、VIP会员、合伙人)
const vipTypes = ['normal', 'vip', 'partner']
const currentVipType = ref<string>('normal') // 当前权益身份
onLoad(() => {
// 模拟获取用户身份
setTimeout(() => {
currentVipType.value = 'partner'
}, 1000)
})
const vipBenefits = {
}
</script>
<style lang="scss" scoped>
page, .bg {
background: $cz-page-background url(#{$OSS}images/vip_benefits/vip_benefits_image1.png) 0 0 no-repeat;
background-size: 100% 400rpx;
}
.progress {
:deep() {
.wd-progress__outer {
background-color: #FEEFC4;
}
}
}
.btn {
width: 690rpx;
height: 108rpx;
background: linear-gradient( 315deg, #F2E6BC 0%, #FFF5D2 100%);
border-radius: 16rpx 16rpx 16rpx 16rpx;
border: 2rpx solid #FFFFFF;
}
</style>

10
src/components/navbar.vue
View File

@ -3,7 +3,9 @@
<wd-navbar safeAreaInsetTop :bordered="false" :custom-class="customClass" :fixed="fixed" :placeholder="fixed" :zIndex="zIndex">
<template #left>
<view class="h-48rpx flex items-center" @click="navbar.back">
<wd-img width="48rpx" height="48rpx" :src="`${OSS}icon/icon_arrow_left.png`" class="mt-6rpx"></wd-img>
<view class="mt-4rpx">
<wd-icon name="thin-arrow-left" size="30rpx" :color="iconLeftColor" ></wd-icon>
</view>
<view class="text-[#303133] text-36rpx ml-24rpx leading-48rpx" v-if="!layoutLeft">{{ title }}</view>
<!-- 开启左侧自定义布局 -->
@ -65,6 +67,12 @@
zIndex: {
type: Number,
default: 10
},
// icon left 的颜色
iconLeftColor: {
type: String,
default: '#121212'
}
})

16
src/pages.json
View File

@ -179,6 +179,14 @@
"navigationBarTitleText": "分包页面"
}
},
{
"path": "profile/profile",
"type": "page",
"layout": "default",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "reserve-room/choose-room-reserve",
"type": "page",
@ -219,6 +227,14 @@
"navigationStyle": "custom"
}
},
{
"path": "vip-benefits/vip-benefits",
"type": "page",
"layout": "default",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "order/after-sales/after-sales",
"type": "page",

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

@ -10,9 +10,9 @@
<view>
<view class="mx-60rpx mt-20rpx">
<view class="text-[#303133] text-48rpx leading-80rpx font-600">
其他手机号登录
{{ page.title }}
</view>
<view class="font-400 text-28rpx leading-44rpx text-[#6B7280] mt-12rpx">请输入你要登录的手机号</view>
<view class="font-400 text-28rpx leading-44rpx text-[#6B7280] mt-12rpx"> {{ page.desc }}</view>
</view>
<view class="mt-106rpx mx-48rpx">
<wd-form ref="form" :model="model">
@ -59,7 +59,7 @@
<view class="h-90rpx leading-90rpx mx-60rpx rounded-8rpx text-center mt-112rpx bg-[#4C9F44] text-[#fff]" :class="disabled ? 'opacity-40' : ''" @click="mobile.handleToLogin">登录</view>
<view class="flex items-center mx-52rpx mt-56rpx">
<view class="flex items-center mx-52rpx mt-56rpx" v-if="pageType === 'login'">
<view class="w-32rpx h-32rpx">
<wd-checkbox v-model="agree" @change="mobile.handleAgree" checked-color="#4C9F44" size="large"> </wd-checkbox>
</view>
@ -67,6 +67,20 @@
我已阅读并同意 <text class="text-[#4C9F44]" @click.stop="mobile.handleToService">《服务协议》</text> 和<text class="text-[#4C9F44]" @click.stop="mobile.handleToPrivacy">《隐私政策》</text>
</view>
</view>
<!-- 手机号修改成功 -->
<wd-popup v-model="showEditSuccessPopup" 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">{{ page.desc }}</view>
<view class="w-630rpx h-90rpx leading-90rpx text-center bg-[#4C9F44] rounded-8rpx text-[#fff] mt-174rpx mx-auto" @click="mobile.handleToBack">好的</view>
</view>
</wd-popup>
</view>
</template>
@ -75,15 +89,24 @@
import {mobile as testMobile} from '@/utils/test'
import { useToast } from 'wot-design-uni'
const OSS = inject('OSS')
const toast = useToast()
const disabled = ref<boolean>(true)
// 验证码倒计时
/** 页面 **/
let pageType = 'login' // 页面类型 login:登录 edit:修改手机号
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<{
mobile: string
code: string
@ -91,9 +114,22 @@
mobile: '',
code: ''
})
/** 结束 **/
// 服务协议和隐私政策
/** 服务协议和隐私政策 **/
const agree = ref<boolean>(false)
/** 结束 **/
onLoad((args) => {
// 从个人登录页面进入
if (args.type === 'edit') {
userId.value = Number(args.userId) || 0 // userId仅做测试使用，实际请传真实用户ID
page.value.title = '修改手机号'
page.value.desc = '手机号一年内可修改2次'
pageType = 'edit'
}
})
const mobile = {
// 验证手机号
@ -128,6 +164,17 @@
// 登录
handleToLogin: () => {
// TODO 如果是edit的话就是修改手机号
if (pageType === 'login' && !agree.value) {
toast.show({
iconClass: 'info-circle',
msg: '请同意服务协议和隐私政策',
direction: 'vertical'
})
return
}
if (!testMobile(model.mobile)) {
toast.show({
iconClass: 'info-circle',
@ -166,6 +213,11 @@
handleToPrivacy: () => {
},
// 修改手机成功后返回
handleToBack: () => {
uni.navigateBack()
}
}
</script>

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

@ -1,16 +1,18 @@
<route lang="jsonc" type="page">{
"layout": "tabbar",
"style": {
"navigationStyle": "custom"
<route lang="jsonc" type="page">
{
"layout": "tabbar",
"style": {
"navigationStyle": "custom"
}
}
}</route>
</route>
<template>
<view>
<view class="home-bg w-[100%] fixed top-0 left-0 z-100">
<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: transparent !important;">
<template #right>
<view class="mr-16rpx flex items-center right-slot" @click="my.handleToService">
<view class="mr-16rpx flex items-center right-slot" @click="my.handleShowService">
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_service.png`"></wd-img>
</view>
</template>
@ -20,16 +22,16 @@
<view class="pb-74rpx" :style="{ paddingTop: navbarHeight + 'px' }">
<!-- 账号昵称显示 -->
<view class="ml-60rpx flex items-center">
<view class="">
<view>
<wd-img width="120rpx" height="120rpx" :src="`${OSS}icon/icon_avatar.png`" mode="aspectFill" round />
</view>
<view class="flex-1 ml-22rpx flex justify-between items-center">
<view>
<view @click="my.handleToProfile">
<view class="text-[#303133] text-36rpx leading-50rpx ml-8rpx">{{ isLogin ? '王大帅' : '立即登录' }}</view>
<view v-if="isLogin" class="flex justify-center items-center vip-bg mt-10rpx">
<!-- 会员显示图标 -->
<view v-if="isVip" class="w-36rpx h-36rpx flex items-center mr-12rpx">
<wd-img width="100%" height="100%" mode="aspectFill" :src="`${OSS}icon/icon_crown.png`"></wd-img>
<view v-if="isVip" class="flex items-center mr-12rpx">
<wd-img width="36rpx" height="36rpx" mode="aspectFill" :src="`${OSS}icon/icon_crown.png`" round></wd-img>
</view>
<!-- 这里要根据用户身份显示不同的文字 -->
<view class="text-24rpx text-[#675649] leading-34rpx flex items-center">茶址会员</view>
@ -37,9 +39,9 @@
</view>
<view class="w-178rpx h-80rpx relative">
<wd-img width="100%" height="100%" mode="aspectFill" :src="`${OSS}images/my/my_image2.png`"></wd-img>
<view class="absolute left-36rpx top-28rpx flex items-center">
<view class="w-32rpx h-32rpx flex items-center mr-8rpx">
<wd-img width="100%" height="100%" mode="aspectFill" :src="`${OSS}icon/icon_ercode.png`"></wd-img>
<view class="absolute left-36rpx top-28rpx flex items-center" @click="my.handleShowPromoCode">
<view class="flex items-center mr-8rpx">
<wd-img width="32rpx" height="32rpx" mode="aspectFill" :src="`${OSS}icon/icon_ercode.png`"></wd-img>
</view>
<view class="font-bold text-[#fff] text-24rpx leading-34rpx mt--6rpx">推广码</view>
</view>
@ -80,7 +82,7 @@
<view class="w-40rpx h-36rpx flex items-center">
<wd-img width="100%" height="100%" :src="`${OSS}icon/icon_vip.png`" mode="aspectFill"></wd-img>
</view>
<view class="flex items-center leading-34rpx ">
<view class="flex items-center leading-34rpx" @click="my.handleToVipBenefits">
<view class="font-400 text-24rpx ml-12rpx mr-20rpx text-[#EECC99]">2026.03.06到期</view>
<view class="flex items-center mt-4rpx">
<wd-icon name="arrow-right" size="24rpx" color="#EECC99"></wd-icon>
@ -109,8 +111,9 @@
<text class="text-30rpx">20</text>
</view>
<view class="font-400 text-20rpx leading-28rpx text-[#1C1C1D]">满200可用</view>
<view class="font-400 text-20rpx bg-[#FCCA84] w-126rpx h-40rpx rounded-20rpx mt-18rpx leading-40rpx mx-auto">
立即领取
<view class="font-400 text-20rpx w-126rpx h-40rpx rounded-20rpx mt-18rpx leading-40rpx mx-auto"
:class="isClaimCoupon ? 'bg-[#E6E3DF]' : 'bg-[#FCCA84]'" @click="isClaimCoupon = true">
{{ isClaimCoupon ? '已领取' : '立即领取' }}
</view>
</view>
</scroll-view>
@ -202,17 +205,45 @@
</view>
</view>
</view>
<!-- 推广码 -->
<wd-overlay :show="showPompoCodePopup" @click="showPompoCodePopup = false">
<view class="h-full relative">
<view class="absolute-center h-926rpx">
<wd-img width="600rpx" height="800rpx" :src="`${OSS}images/my/my_image7.png`"></wd-img>
<view class="absolute bottom-158rpx flex items-center w-full ml-110rpx">
<view class="mr-70rpx w-160rpx h-160rpx">
<wd-img width="160rpx" height="160rpx" :src="`${OSS}images/reserve_room/reserve_room_image3.png`" mode="scaleToFill"></wd-img>
</view>
<view class="">
<view class="font-bold text-30rpx leading-42rpx text-[#303133]">我的推广码</view>
<view class="text-40rpx leading-56rpx text-[#4C9F44] mt-20rpx">3486</view>
</view>
</view>
<view class="absolute bottom-0 left-1/2 -translate-x-1/2" @click="showPompoCodePopup = false">
<wd-img width="72rpx" height="72rpx" :src="`${OSS}icon/icon_close2.png`"></wd-img>
</view>
</view>
</view>
</wd-overlay>
<!-- 客服电话 -->
<wd-action-sheet v-model="showServiceMobile" :actions="sheetMenu" cancel-text="取消" @close="showServiceMobile = false" @select="my.handleSelectMenu" />
</view>
</template>
<script lang="ts" setup>
import {toast} from '@/utils/toast'
const OSS = inject('OSS')
const navbarHeight = inject('navbarHeight')
const rightPadding = inject('capsuleOffset')
// 登录信息相关
const userInfo = ref<any>(null)
const isLogin = ref<boolean>(false)
const isLogin = ref<boolean>(true)
const isVip = ref<boolean>(true)
@ -240,29 +271,79 @@
{ id: 3, title: '合创合伙人', icon: `${OSS}icon/icon_service_partner.png`, badge: '赚佣金', url: '' },
])
// 推广码弹窗
const showPompoCodePopup = ref<boolean>(false)
// 客服电话
const showServiceMobile = ref<boolean>(false)
const sheetMenu = ref<{ name: string}[]>([])
// 领取优惠券
const isClaimCoupon = ref<boolean>(false)
onLoad(() => {
})
const my = {
// 跳转抖音团购
handleToDouYinGroupBuying() {
handleToDouYinGroupBuying: () => {
uni.navigateTo({
url: '/bundle/order/douyin/order-list'
})
},
// 跳转到个人信息
handleToProfile: () => {
uni.navigateTo({
url: '/bundle/profile/profile'
})
},
// 跳转平台团购
handleToPlatformGroupBuying() {
handleToPlatformGroupBuying: () => {
uni.navigateTo({
url: '/bundle/order/platform/order-list'
})
},
handleToService: () => {
uni.navigateTo({
url: '/src/pages/my/service/service'
// 点击显示客服电话
handleShowService: () => {
showServiceMobile.value = true
sheetMenu.value = [
{ name: '400-800-8888' },
]
},
// 选择菜单-拨打客服电话
handleSelectMenu: (item: any) => {
uni.makePhoneCall({
phoneNumber: item.item.name
})
},
// 显示推广码
handleShowPromoCode: () => {
if (isLogin.value) {
showPompoCodePopup.value = true
} else {
toast.info('请先登录')
setTimeout(() => {
uni.navigateTo({
url: '/pages/login/login'
})
}, 800)
}
},
// 跳转到会员权益
handleToVipBenefits: () => {
if (isLogin.value) {
uni.navigateTo({
url: '/bundle/vip-benefits/vip-benefits'
})
}
}
}
</script>

6
src/pages/reserve/reserve.vue
View File

@ -166,9 +166,11 @@
.home-bg {
background-color: $cz-page-background;
background-image: url(#{$OSS}images/home/home_bg.png);
background-size: 100% 280rpx;
// background-size: 100% 300rpx;
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
padding-bottom: 20rpx;
// background-position: top center;
}
.search-box {

100
src/router/interceptor.ts
View File

@ -12,66 +12,66 @@ import { needLoginPages as _needLoginPages, getLastPage, getNeedLoginPages } fro
const loginRoute = import.meta.env.VITE_LOGIN_URL
function isLogined() {
const userStore = useUserStore()
return !!userStore.userInfo.username
const userStore = useUserStore()
return !!userStore.userInfo.username
}
const isDev = import.meta.env.DEV
// 黑名单登录拦截器 - （适用于大部分页面不需要登录，少部分页面需要登录）
export const navigateToInterceptor = {
// 注意，这里的url是 '/' 开头的，如 '/pages/index/index'，跟 'pages.json' 里面的 path 不同
// 增加对相对路径的处理，BY 网友 @ideal
invoke({ url }: { url: string }) {
// console.log(url) // /pages/route-interceptor/index?name=feige&age=30
let path = url.split('?')[0]
// 注意，这里的url是 '/' 开头的，如 '/pages/index/index'，跟 'pages.json' 里面的 path 不同
// 增加对相对路径的处理，BY 网友 @ideal
invoke({ url }: { url: string }) {
// console.log(url) // /pages/route-interceptor/index?name=feige&age=30
let path = url.split('?')[0]
// 处理相对路径
if (!path.startsWith('/')) {
const currentPath = getLastPage().route
const normalizedCurrentPath = currentPath.startsWith('/') ? currentPath : `/${currentPath}`
const baseDir = normalizedCurrentPath.substring(0, normalizedCurrentPath.lastIndexOf('/'))
path = `${baseDir}/${path}`
}
// 处理相对路径
if (!path.startsWith('/')) {
const currentPath = getLastPage().route
const normalizedCurrentPath = currentPath.startsWith('/') ? currentPath : `/${currentPath}`
const baseDir = normalizedCurrentPath.substring(0, normalizedCurrentPath.lastIndexOf('/'))
path = `${baseDir}/${path}`
}
let needLoginPages: string[] = []
// 为了防止开发时出现BUG，这里每次都获取一下。生产环境可以移到函数外，性能更好
if (isDev) {
needLoginPages = getNeedLoginPages()
}
else {
needLoginPages = _needLoginPages
}
const isNeedLogin = needLoginPages.includes(path)
if (!isNeedLogin) {
return true
}
const hasLogin = isLogined()
if (hasLogin) {
return true
}
tabbarStore.restorePrevIdx()
const redirectRoute = `${loginRoute}?redirect=${encodeURIComponent(url)}`
uni.navigateTo({ url: redirectRoute })
return false
},
let needLoginPages: string[] = []
// 为了防止开发时出现BUG，这里每次都获取一下。生产环境可以移到函数外，性能更好
if (isDev) {
needLoginPages = getNeedLoginPages()
}
else {
needLoginPages = _needLoginPages
}
const isNeedLogin = needLoginPages.includes(path)
if (!isNeedLogin) {
return true
}
const hasLogin = isLogined()
if (hasLogin) {
return true
}
tabbarStore.restorePrevIdx()
const redirectRoute = `${loginRoute}?redirect=${encodeURIComponent(url)}`
uni.navigateTo({ url: redirectRoute })
return false
},
}
export const routeInterceptor = {
install() {
uni.addInterceptor('navigateTo', navigateToInterceptor)
uni.addInterceptor('reLaunch', navigateToInterceptor)
uni.addInterceptor('redirectTo', navigateToInterceptor)
uni.addInterceptor('switchTab', navigateToInterceptor)
install() {
uni.addInterceptor('navigateTo', navigateToInterceptor)
uni.addInterceptor('reLaunch', navigateToInterceptor)
uni.addInterceptor('redirectTo', navigateToInterceptor)
uni.addInterceptor('switchTab', navigateToInterceptor)
// // #ifdef H5
// // 一个粗糙的实现方式，不满意可以自行修改：https://github.com/unibest-tech/unibest/issues/192
// // H5环境路由拦截，监听hashchange事件
// window.addEventListener('hashchange', () => {
// // 获取当前路径
// const currentPath = `/${window.location.hash.split('#/')[1]?.split('?')[0]}`
// navigateToInterceptor.invoke({ url: currentPath })
// })
// // #endif
},
// // #ifdef H5
// // 一个粗糙的实现方式，不满意可以自行修改：https://github.com/unibest-tech/unibest/issues/192
// // H5环境路由拦截，监听hashchange事件
// window.addEventListener('hashchange', () => {
// // 获取当前路径
// const currentPath = `/${window.location.hash.split('#/')[1]?.split('?')[0]}`
// navigateToInterceptor.invoke({ url: currentPath })
// })
// // #endif
},
}