添加页面
This commit is contained in:
wangxiaowei
@ -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: () => {
|
||||
|
||||
Reference in New Issue
Block a user