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

完善页面整合TS

Browse Source
This commit is contained in:
wangxiaowei
2025-09-19 17:25:23 +08:00
parent 864c40aa3a
commit ff2f645101
13 changed files with 540 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,8 +13,21 @@
<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 === ReserveCategoryOrderStatus.Consuming || orderStatus === ReserveCategoryOrderStatus.Reserved">使用过程中有任何问题，请联系客服</text>
<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="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="text-center" v-if="orderStatus === OrderStatus.Finished">品一口香茗，让生活慢下来，从一杯好茶开始</view>
</view>
<view class="mx-30rpx coupon-bg" >
@ -34,7 +47,8 @@
<view>3小时</view>
<view>x1</view>
</view>
<view class="text-[#606266] text-right mt-26rpx">
<!-- 等待付款不显示实付金额 -->
<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>
@ -46,16 +60,21 @@
<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 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 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="bg-white rounded-16rpx mx-30rpx mt-20rpx">
<!-- 已预约和消费中显示开门锁 -->
<view class="bg-white rounded-16rpx mx-30rpx mt-20rpx" v-if="orderStatus === OrderStatus.Reserved || orderStatus === OrderStatus.Consuming">
<view class="pt-32rpx text-[#303133] text-32rpx leading-44rpx px-30rpx">开门锁</view>
<view class="mt-20rpx">
<wd-gap height="2rpx" bg-color="#F6F7F9"></wd-gap>
@ -113,6 +132,28 @@
</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' : ''"
>
<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>
@ -124,7 +165,7 @@
<text class="text-[#4C9F44]">复制</text>
</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="orderStatus !== OrderStatus.Pending">
<view>交易方式</view>
<view>微信支付</view>
</view>
@ -132,7 +173,7 @@
<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 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>
@ -140,9 +181,35 @@
<!-- 操作按钮 -->
<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 mt-34rpx">
<!-- 已预约 -->
<view
class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center mt-34rpx"
v-if="orderStatus === OrderStatus.Reserved || orderStatus === OrderStatus.Consuming">
<view class="w-630rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]">分享房间给朋友</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">
<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 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>
<!-- 一键续订 -->
@ -219,15 +286,74 @@
<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>
<script lang="ts" setup>
import { ReserveCategoryOrderStatus, ReserveCategoryOrderStatusText } from '@/utils/order'
import { OrderStatus, OrderSource, OrderStatusTitle } from '@/utils/order'
import { useMessage } from 'wot-design-uni'
import {toast} from '@/utils/toast'
import { PayList, PayCategory, PayValue } from '@/utils/pay'
const OSS = inject('OSS')
const title = ref<string>('')
const orderStatus = ref<string>('') // 订单状态：待使用、退款等
@ -263,15 +389,45 @@
const showRenewSuccessPopup = ref<boolean>(false)
/** 结束 **/
// 订单倒计时取消
const time = ref<number>(30 * 60 * 60 * 1000)
// 取消订单弹窗
const message = useMessage('wd-message-box-slot')
// 费用明细
const showCostPopup = ref<boolean>(false) // 是否显示退款详情弹出框
const costValue = ref<string[]>(['item1'])
onLoad((args) => {
title.value = ReserveCategoryOrderStatusText[args.orderStatus] || '订单详情'
title.value = OrderStatusTitle[OrderSource.TeaRoom][args.orderStatus] || '订单详情'
console.log("🚀 ~ title.value :", title.value )
orderStatus.value = args.orderStatus
})
const orderDetail = {
// 取消订单
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(() => {
// 点击取消按钮回调事件
})
}
}
</script>
@ -286,4 +442,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>