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-02 17:30:36 +08:00
parent d05eeebdb1
commit ab9cf08c86
7 changed files with 379 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
src/bundle/group-buying/platform/order-detail.vue
View File

@ -8,35 +8,194 @@
</route>
<template>
<view class="">
<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 class="" v-if="orderType === OrderStatus.ToUse">请在2025.12.31(含)前使用</text>
<text class="" v-if="orderType === OrderStatus.Finished">感谢购买，期待再次光临！</text>
<text class="" v-if="orderType === OrderStatus.AfterSaleApply">请耐心等待，我们会尽快处理您的请求</text>
<view class="" v-if="type === 'Direct'">
<text v-if="orderType === OrderStatus.ToUse">请在2025.12.31(含)前使用</text>
<text v-if="orderType === OrderStatus.Used">感谢购买，期待再次光临！</text>
</view>
<view class="" v-if="type === 'Franchise'">
<text v-if="orderType === OrderStatus.ToUse">请在2025.12.31(含)前使用</text>
<text v-if="orderType === OrderStatus.Used">品一口香茗，让生活慢下来，从一杯好茶开始</text>
<view class="text-center mt-14rpx" v-if="orderType === OrderStatus.AfterSaleFinished">
<view class="text-40rpx text-[#303133] leading-56rpx">退款成功￥128.00</view>
<view class="text-28rpx text-[#606266] leading-40rpx mt-20rpx">谢谢您的信任，我们一定会做的更好</view>
<view class="text-24rpx text-[#606266] leading-34rpx mt-12rpx">2025年4月13日 18:22</view>
</view>
</view>
<view class="" v-if="type === 'DouYin'">
<text v-if="orderType === OrderStatus.ToUse">请在2025.12.31(含)前使用</text>
<text v-if="orderType === OrderStatus.Used">品一口香茗，让生活慢下来，从一杯好茶开始</text>
</view>
</view>
<!-- 套餐券 -->
<view class="mx-30rpx">
<combo :type="'GroupBuying'" :order-type="orderType"></combo>
<combo-coupon :type="'Franchise'" :order-type="orderType"></combo-coupon>
</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="orderDetail.handleLocation">
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_nav.png`"/>
</view>
<view class="text-center" @click="orderDetail.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">
<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="orderType === OrderStatus.AfterSaleFinished">
<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="type !== 'Franchise' && orderType !== OrderStatus.Used">
<!-- 平台团购直营店 -->
<view class="mt-34rpx" v-if="type === 'Direct'">
<!-- 待使用 -->
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" v-if="orderType === OrderStatus.ToUse">
<view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133] mr-30rpx">申请退款</view>
<view class="w-330rpx h-90rpx 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="orderType === OrderStatus.Used">
<view class="w-630rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]">再次预定</view>
</view>
</view>
<!-- 平台团购加盟店 -->
<view class="" v-if="type === 'Franchise'">
<!-- 待使用 -->
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" v-if="orderType === OrderStatus.ToUse">
<view class="w-630rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#fff]">申请退款</view>
</view>
<!-- 已退款 -->
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" v-if="orderType === OrderStatus.AfterSaleFinished">
<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] mr-30rpx">联系平台</view>
</view>
</view>
<!-- 抖音团购 -->
<view class="" v-if="type === 'DouYin'">
<!-- 待使用 -->
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" v-if="orderType === OrderStatus.ToUse">
<view class="w-630rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]">立即预定</view>
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
import Combo from '@/components/order/Combo.vue'
import ComboCoupon from '@/components/order/ComboCoupon.vue'
import { OrderStatus, OrderStatusText } from '@/utils/order'
import {toast} from '@/utils/toast'
const OSS = inject('OSS')
const title = ref<string>('')
const type = ref<string>('') // 订单类型：团购、抖音等
const orderType = ref<string>('') // 订单状态：待使用、退款等
onLoad((args) => {
title.value = OrderStatusText[args.orderType]
if ((args.type === 'Direct' || args.type === 'Franchise') && args.orderType === OrderStatus.Used) {
title.value = '交易完成'
} else {
title.value = OrderStatusText[args.orderType]
}
type.value = args.type
orderType.value = args.orderType
})
const orderDetail = {
// 处理导航逻辑
handleLocation: () => {
toast.info('正在导航...')
// 可以使用uni.navigateTo或其他方式打开地图应用
uni.navigateTo({
url: '/pages/map/map' // 假设有一个地图页面
})
},
// 处理拨打电话逻辑
handleCallPhone: () => {
},
}
</script>