236 lines
11 KiB
Vue
236 lines
11 KiB
Vue
<route lang="jsonc" type="page">
|
||
{
|
||
"layout": "default",
|
||
"style": {
|
||
"navigationStyle": "custom"
|
||
}
|
||
}
|
||
</route>
|
||
|
||
<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.ToUse">请在2025.12.31(含)前使用</text>
|
||
<text v-if="orderStatus === OrderStatus.Used">品一口香茗，让生活慢下来，从一杯好茶开始</text>
|
||
</view>
|
||
|
||
<!-- 待使用下显示 -->
|
||
<view class="coupon-bg2 p-30rpx mx-30rpx" v-if="orderStatus === OrderStatus.ToUse">
|
||
<view class="flex items-center">
|
||
<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">团购套餐的可以点击跳转</view>
|
||
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
|
||
</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="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-30rpx font-500 leading-48rpx text-[#606266] text-26rpx pb-44rpx">
|
||
有效期：2025.04.04-2025.12.31
|
||
</view>
|
||
<view class="px-30rpx mt-60rpx">
|
||
<view class="text-center">
|
||
<wd-img width="230rpx" height="230rpx" :src="`${OSS}images/reserve_room/reserve_room_image3.png`"></wd-img>
|
||
</view>
|
||
<view class="text-28rpx text-[#303133] mt-32rpx text-center">
|
||
<text class="mr-20rpx">券码 1052 4258 5654 125</text>
|
||
<text class="text-[#4C9F44]">复制</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 已使用下显示 -->
|
||
<view class="bg-white rounded-16rpx p-30rpx mx-30rpx" v-if="orderStatus === OrderStatus.Used">
|
||
<view class="flex items-center">
|
||
<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 w-300rpx line-1">这是团购套餐的名字</view>
|
||
<view class="text-26rpx leading-36rpx text-[#909399] mt-8rpx">￥324</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="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>
|
||
|
||
<!-- 适用门店 -->
|
||
<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 class="mt-26rpx flex items-center">
|
||
<view class="mr-24rpx">
|
||
<wd-img width="170rpx" height="170rpx" :src="`${OSS}images/home/home_image5.png`"></wd-img>
|
||
</view>
|
||
<view class="flex-1 flex justify-between items-center relative">
|
||
<view class="">
|
||
<view class="text-[#303133] text-30rpx leading-40rpx line-2">这是商家的名称这是</view>
|
||
<view class="mt-26rpx text-[#909399] text-24rpx leading-34rpx">距您9km</view>
|
||
<view class="flex items-center mt-14rpx">
|
||
<view class="mr-8rpx">
|
||
<wd-img width="28rpx" height="28rpx" :src="`${OSS}icon/icon_location.png`"/>
|
||
</view>
|
||
<view class="ml-2rpx text-26rpx text-[#606266] line-1 w-300rpx">青浦区仓路478号青浦区仓路478号青浦区仓路478号青浦区仓路478号青浦区仓路478号青浦区仓路478号</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex absolute top-1/2 right-0 -translate-y-1/2">
|
||
<view class="text-center mr-20rpx" @click="directOrderDetail.handleLocation">
|
||
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_nav.png`"/>
|
||
</view>
|
||
<view class="text-center" @click="directOrderDetail.handleCallPhone">
|
||
<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.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>订单编号</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="bg-white rounded-16rpx px-30rpx py-34rpx mx-30rpx mt-20rpx" v-if="orderStatus === OrderStatus.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>售后原因</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="w-full fixed bottom-0 left-0 right-0 bg-white h-152rpx" v-if="orderStatus !== OrderStatus.Used">
|
||
<view class="mt-34rpx">
|
||
<!-- 待使用 -->
|
||
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" v-if="orderStatus === OrderStatus.ToUse">
|
||
<view class="w-630rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133]">申请退款</view>
|
||
</view>
|
||
|
||
<!-- 售后完成 -->
|
||
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" v-if="orderStatus === OrderStatus.Refunded">
|
||
<view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133] mr-30rpx">联系商家</view>
|
||
<view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133]">联系平台</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { OrderSource, OrderStatus, OrderStatusTitle } from '@/utils/order'
|
||
import {toast} from '@/utils/toast'
|
||
|
||
const OSS = inject('OSS')
|
||
|
||
const title = ref<string>('')
|
||
const type = ref<string>('') // 订单类型：团购、抖音等
|
||
const orderStatus = ref<string>('') // 订单状态：待使用、退款等
|
||
|
||
onLoad((args) => {
|
||
title.value = OrderStatusTitle[OrderSource.Combo][args.orderStatus] || '订单详情'
|
||
|
||
type.value = args.type
|
||
orderStatus.value = args.orderStatus
|
||
})
|
||
|
||
const directOrderDetail = {
|
||
// 跳转到套餐详情
|
||
handleToCombo: () => {
|
||
|
||
},
|
||
|
||
// 跳转到包间详情
|
||
handleToRoom: () => {
|
||
|
||
},
|
||
|
||
// 处理导航逻辑
|
||
handleLocation: () => {
|
||
toast.info('正在导航...')
|
||
// 可以使用uni.navigateTo或其他方式打开地图应用
|
||
uni.navigateTo({
|
||
url: '/pages/map/map' // 假设有一个地图页面
|
||
})
|
||
},
|
||
|
||
// 处理拨打电话逻辑
|
||
handleCallPhone: () => {
|
||
|
||
},
|
||
}
|
||
</script>
|
||
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: $cz-page-background;
|
||
}
|
||
|
||
.coupon-bg2 {
|
||
background-image: url(#{$OSS}images/order/order_image1.png);
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
</style>
|