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

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>