完善页面
This commit is contained in:
152
src/bundle/group-buying/douyin/douyin-order-detail.vue
Normal file
152
src/bundle/group-buying/douyin/douyin-order-detail.vue
Normal file
@ -0,0 +1,152 @@
|
||||
<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="orderType === GroupBuyingCategoryOrderStatus.ToUse">请在2025.12.31(含)前使用</text>
|
||||
<text v-if="orderType === GroupBuyingCategoryOrderStatus.Used">品一口香茗,让生活慢下来,从一杯好茶开始</text>
|
||||
</view>
|
||||
|
||||
<!-- 待使用下显示 -->
|
||||
<view class="mx-30rpx bg-white rounded-16rpx p-30rpx">
|
||||
<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">
|
||||
3小时
|
||||
</view>
|
||||
<view class="font-400 text-26rpx text-[#606266] leading-40rpx mt-40rpx">
|
||||
适用包间:青茶、红茶、绿茶
|
||||
</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="douyinOrderDetail.handleLocation">
|
||||
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_nav.png`"/>
|
||||
</view>
|
||||
<view class="text-center" @click="douyinOrderDetail.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>2019-05-16 12:20:26</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="w-full fixed bottom-0 left-0 right-0 bg-white h-152rpx" v-if="orderType !== GroupBuyingCategoryOrderStatus.Used">
|
||||
<view class="mt-34rpx">
|
||||
<!-- 待使用 -->
|
||||
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" v-if="orderType === GroupBuyingCategoryOrderStatus.ToUse">
|
||||
<view class="w-692rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]">立即预定</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { GroupBuyingCategory, GroupBuyingCategoryOrderStatus, GroupBuyingStatusTitle } from '@/utils/order'
|
||||
console.log("🚀 ~ GroupBuyingStatusTitle:", GroupBuyingStatusTitle)
|
||||
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 = GroupBuyingStatusTitle[GroupBuyingCategory.DouYin][args.orderType] || '订单详情'
|
||||
|
||||
type.value = args.type
|
||||
orderType.value = args.orderType
|
||||
})
|
||||
|
||||
const douyinOrderDetail = {
|
||||
// 跳转到套餐详情
|
||||
handleToCombo: () => {
|
||||
|
||||
},
|
||||
|
||||
// 跳转到包间详情
|
||||
handleToRoom: () => {
|
||||
|
||||
},
|
||||
|
||||
// 处理导航逻辑
|
||||
handleLocation: () => {
|
||||
toast.info('正在导航...')
|
||||
// 可以使用uni.navigateTo或其他方式打开地图应用
|
||||
uni.navigateTo({
|
||||
url: '/pages/map/map' // 假设有一个地图页面
|
||||
})
|
||||
},
|
||||
|
||||
// 处理拨打电话逻辑
|
||||
handleCallPhone: () => {
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: $cz-page-background;
|
||||
}
|
||||
</style>
|
||||
130
src/bundle/group-buying/douyin/excharge.vue
Normal file
130
src/bundle/group-buying/douyin/excharge.vue
Normal file
@ -0,0 +1,130 @@
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<view class="pb-254rpx">
|
||||
<!-- 抖音团购兑换 -->
|
||||
<view>
|
||||
<navbar title="抖音团购兑换"></navbar>
|
||||
</view>
|
||||
|
||||
<!-- 兑换码 -->
|
||||
<view class="mt-46rpx pb-86rpx">
|
||||
<view class="flex items-center justify-center">
|
||||
<view class="mr-30rpx w-72rpx h-72rpx">
|
||||
<wd-img width="72rpx" height="72rpx" :src="`${OSS}icon/icon_douyin.png`"></wd-img>
|
||||
</view>
|
||||
<view class="text-40rpx text-[#303133] leading-56rpx">抖音兑换</view>
|
||||
</view>
|
||||
<view class="mt-42rpx mx-60rpx">
|
||||
<wd-input
|
||||
type="text"
|
||||
placeholder="输入兑换码"
|
||||
v-model="code"
|
||||
no-border
|
||||
custom-class="!bg-[#F6F7F8] !rounded-16rpx"
|
||||
custom-input-class="!h-104rpx">
|
||||
<template #prefix>
|
||||
<view class="ml-38rpx flex items-center" @click="excharge.handleScan">
|
||||
<view class="w-36rpx h-36rpx">
|
||||
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_scan.png`"></wd-img>
|
||||
</view>
|
||||
<wd-divider vertical />
|
||||
</view>
|
||||
</template>
|
||||
</wd-input>
|
||||
</view>
|
||||
<view class="bg-[#4C9F44] text-[#fff] mx-60rpx h-90rpx leading-90rpx text-center rounded-8rpx mt-80rpx" @click="excharge.handleConfirm">确定</view>
|
||||
</view>
|
||||
|
||||
<!-- 间隔线 -->
|
||||
<view>
|
||||
<wd-gap bg-color="#F4F5F6" height="20rpx"></wd-gap>
|
||||
</view>
|
||||
|
||||
<!-- 兑换记录 -->
|
||||
<view class="px-30rpx">
|
||||
<view class="text-32rpx text-[#303133] leading-144rpx h-144rpx border-b-2rpx border-b-solid border-b-[#E5E5E5]">兑换记录</view>
|
||||
<view class="w-full">
|
||||
<view class="h-144rpx border-b-2rpx border-b-solid border-b-[#E5E5E5] flex justify-between items-center" v-for="(item, index) in 3" :key="index">
|
||||
<view>
|
||||
<view class="text-[#303133] text-28rpx leading-40rpx">这是团购套餐的名字</view>
|
||||
<view class="text-[#909399] text-24rpx leading-32rpx mt-10rpx">2025-03-01 11:20</view>
|
||||
</view>
|
||||
<view class="font-bold text-36rpx text-[#303133] leading-50rpx">¥129</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<wd-message-box selector="wd-message-box-slot"></wd-message-box>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useMessage } from 'wot-design-uni'
|
||||
import {toast} from '@/utils/toast'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
const code = ref<string>('')
|
||||
const message = useMessage('wd-message-box-slot')
|
||||
|
||||
const excharge = {
|
||||
// 扫码
|
||||
handleScan: () => {
|
||||
uni.scanCode({
|
||||
success: (res) => {
|
||||
if(res.result) {
|
||||
code.value = res.result
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('scanCode err', err);
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 确认兑换
|
||||
handleConfirm: () => {
|
||||
if(!code.value) {
|
||||
toast.info('兑换失败 请检查兑换码')
|
||||
return
|
||||
}
|
||||
|
||||
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) => {
|
||||
// 点击确认按钮回调事件
|
||||
}).catch(() => {
|
||||
// 点击取消按钮回调事件
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.coupon-bg {
|
||||
background-image: url(#{$OSS}images/order/order_image2.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
</style>
|
||||
166
src/bundle/group-buying/douyin/order-list.vue
Normal file
166
src/bundle/group-buying/douyin/order-list.vue
Normal file
@ -0,0 +1,166 @@
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}</route>
|
||||
|
||||
<template>
|
||||
<view class="">
|
||||
<view class="order-list">
|
||||
<navbar title="抖音团购"></navbar>
|
||||
<view class="bg-white pb-20rpx">
|
||||
<wd-search v-model="keywords" placeholder="搜索订单信息" hide-cancel placeholder-left custom-class="!h-72rpx"/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tabs relative">
|
||||
<wd-tabs v-model="tab" swipeable slidable="always" @change="orderList.handleChangeTab" :lazy="false">
|
||||
<wd-tab title="全部">
|
||||
<view class="content mx-30rpx mt-34rpx">
|
||||
<mescroll-body @init="mescrollInit" @down="downCallback" @up="orderList.upCallback">
|
||||
<view class="mb-20rpx" v-for="(item, index) in 10" :key="index">
|
||||
<combo-card type="DouYin"></combo-card>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
</view>
|
||||
</wd-tab>
|
||||
<wd-tab title="待使用">
|
||||
<view class="content mx-30rpx mt-34rpx">
|
||||
<mescroll-body @init="mescrollInit" @down="downCallback" @up="orderList.upCallback">
|
||||
</mescroll-body>
|
||||
</view>
|
||||
</wd-tab>
|
||||
<wd-tab title="已使用">
|
||||
<view class="content mx-30rpx mt-34rpx">
|
||||
<mescroll-body @init="mescrollInit" @down="downCallback" @up="orderList.upCallback">
|
||||
</mescroll-body>
|
||||
</view>
|
||||
</wd-tab>
|
||||
</wd-tabs>
|
||||
<view class="absolute right-0 top-10rpx excharge w-178rpx h-80rpx leading-80rpx text-[#fff] text-center font-bold text-24rpx leading-34rpx">
|
||||
去兑换
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import ComboCard from '@/components/order/ComboCard.vue'
|
||||
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
||||
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
|
||||
|
||||
/* mescroll */
|
||||
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
|
||||
|
||||
// 菜单
|
||||
const currentType = ref<number>(1)
|
||||
const menuList = reactive<Array<{ type: number; title: string }>>([
|
||||
{
|
||||
type: 1,
|
||||
title: '直营店',
|
||||
},
|
||||
{
|
||||
type: 2,
|
||||
title: '加盟店',
|
||||
}
|
||||
])
|
||||
|
||||
// 店铺类型
|
||||
|
||||
// 搜索
|
||||
const keywords = ref<string>('')
|
||||
|
||||
// tab
|
||||
const tab = ref<number>(0)
|
||||
|
||||
const orderList = {
|
||||
// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
|
||||
upCallback: (mescroll) => {
|
||||
// 需要留一下数据为空的时候显示的空数据图标内容
|
||||
// list({
|
||||
// page: mescroll.num,
|
||||
// size: mescroll.size
|
||||
// }).then((res: { list: Array<any>, totalPages: Number }) => {
|
||||
// const curPageData = res.list || [] // 当前页数据
|
||||
// if(mescroll.num == 1) goods.value = []; // 第一页需手动制空列表
|
||||
// goods.value = goods.value.concat(curPageData); //追加新数据
|
||||
|
||||
// console.log("🚀 ~ goods:", goods)
|
||||
|
||||
// mescroll.endByPage(curPageData.length, res.totalPages); //必传参数(当前页的数据个数, 总页数)
|
||||
|
||||
// }).catch(() => {
|
||||
// mescroll.endErr(); // 请求失败, 结束加载
|
||||
// })
|
||||
// apiGoods(mescroll.num, mescroll.size).then(res=>{
|
||||
// const curPageData = res.list || [] // 当前页数据
|
||||
// if(mescroll.num == 1) goods.value = []; // 第一页需手动制空列表
|
||||
// goods.value = goods.value.concat(curPageData); //追加新数据
|
||||
// //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
|
||||
// //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
|
||||
|
||||
// //方法一(推荐): 后台接口有返回列表的总页数 totalPage
|
||||
// //mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
|
||||
|
||||
// //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
|
||||
// //mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
|
||||
|
||||
// //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
|
||||
// //mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
|
||||
|
||||
// //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据.
|
||||
// mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
|
||||
// }).catch(()=>{
|
||||
mescroll.endErr(); // 请求失败, 结束加载
|
||||
// })
|
||||
},
|
||||
|
||||
// 切换菜单
|
||||
handleChangeMenu: (type: number) => {
|
||||
currentType.value = type
|
||||
console.log("🚀 ~ currentType.value:", currentType.value)
|
||||
},
|
||||
|
||||
// 切换tab
|
||||
handleChangeTab: (e: any) => {
|
||||
tab.value = e.index
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: $cz-page-background;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
:deep() {
|
||||
.wd-tabs,
|
||||
.wd-tabs__nav {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.wd-tabs__nav-item {
|
||||
font-weight: 400 !important;
|
||||
font-size: 28rpx !important;
|
||||
color: #606266 !important;
|
||||
line-height: 40rpx !important;
|
||||
padding-left: 30rpx;
|
||||
}
|
||||
|
||||
.wd-tabs__nav-item.is-active {
|
||||
font-weight: 500 !important;
|
||||
color: #303133 !important;
|
||||
font-size: 32rpx !important;
|
||||
line-height: 44rpx !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.excharge {
|
||||
background: url(#{$OSS}images/douyin/douyin_image1.png) 0 0 no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -9,33 +9,82 @@
|
||||
|
||||
<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">
|
||||
<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>
|
||||
<text v-if="orderType === GroupBuyingCategoryOrderStatus.ToUse">请在2025.12.31(含)前使用</text>
|
||||
<text v-if="orderType === GroupBuyingCategoryOrderStatus.Used">感谢购买,期待再次光临!</text>
|
||||
</view>
|
||||
|
||||
<!-- 待使用下显示 -->
|
||||
<view class="mx-30rpx" v-if="orderType === GroupBuyingCategoryOrderStatus.ToUse">
|
||||
<view class="bg-white rounded-16rpx p-30rpx">
|
||||
<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" @click="directOrderDetail.handleToCombo">
|
||||
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx w-362rpx line-1">团购套餐的可以点击跳转</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">
|
||||
<view class="text-26rpx text-[#606266]">有效期:2025.04.04-2025.12.31</view>
|
||||
<view class="text-28rpx text-[#303133] mt-18rpx">
|
||||
<text class="mr-20rpx">券码 1052 4258 5654 125</text>
|
||||
<text class="text-[#4C9F44]">复制</text>
|
||||
</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-coupon :type="'Franchise'" :order-type="orderType"></combo-coupon>
|
||||
<!-- 已使用下显示 -->
|
||||
<view class="mx-30rpx coupon-bg" v-if="orderType === GroupBuyingCategoryOrderStatus.Used">
|
||||
<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" @click="directOrderDetail.handleToRoom">
|
||||
<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 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>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="px-30rpx mt-28rpx pb-48rpx">
|
||||
<view class="text-30rpx leading-42rpx text-[#303133]">预约信息</view>
|
||||
<view class="font-500 text-26rpx leading-48rpx text-[#606266] mt-20rpx">
|
||||
<view class="mb-20rpx">预约时间:2025-03-18 09:00-12:00</view>
|
||||
<view>预约时长:3小时</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 适用门店 -->
|
||||
@ -57,10 +106,10 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex absolute top-1/2 right-0 -translate-y-1/2">
|
||||
<view class="text-center mr-20rpx" @click="orderDetail.handleLocation">
|
||||
<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="orderDetail.handleCallPhone">
|
||||
<view class="text-center" @click="directOrderDetail.handleCallPhone">
|
||||
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_phone.png`"/>
|
||||
</view>
|
||||
</view>
|
||||
@ -94,7 +143,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 售后订单 -->
|
||||
<view class="bg-white rounded-16rpx px-30rpx py-34rpx mx-30rpx mt-20rpx" v-if="orderType === OrderStatus.AfterSaleFinished">
|
||||
<view class="bg-white rounded-16rpx px-30rpx py-34rpx mx-30rpx mt-20rpx" v-if="orderType === GroupBuyingCategoryOrderStatus.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>
|
||||
@ -119,49 +168,26 @@
|
||||
</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="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="orderType === OrderStatus.ToUse">
|
||||
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" v-if="orderType === GroupBuyingCategoryOrderStatus.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="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" v-if="orderType === GroupBuyingCategoryOrderStatus.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 ComboCoupon from '@/components/order/ComboCoupon.vue'
|
||||
import { OrderStatus, OrderStatusText } from '@/utils/order'
|
||||
import { GroupBuyingCategory, GroupBuyingCategoryOrderStatus, GroupBuyingStatusTitle } from '@/utils/order'
|
||||
|
||||
import {toast} from '@/utils/toast'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
@ -171,17 +197,23 @@
|
||||
const orderType = ref<string>('') // 订单状态:待使用、退款等
|
||||
|
||||
onLoad((args) => {
|
||||
if ((args.type === 'Direct' || args.type === 'Franchise') && args.orderType === OrderStatus.Used) {
|
||||
title.value = '交易完成'
|
||||
} else {
|
||||
title.value = OrderStatusText[args.orderType]
|
||||
}
|
||||
|
||||
title.value = GroupBuyingStatusTitle[GroupBuyingCategory.Direct][args.orderType] || '订单详情'
|
||||
|
||||
type.value = args.type
|
||||
orderType.value = args.orderType
|
||||
})
|
||||
|
||||
const orderDetail = {
|
||||
const directOrderDetail = {
|
||||
// 跳转到套餐详情
|
||||
handleToCombo: () => {
|
||||
|
||||
},
|
||||
|
||||
// 跳转到包间详情
|
||||
handleToRoom: () => {
|
||||
|
||||
},
|
||||
|
||||
// 处理导航逻辑
|
||||
handleLocation: () => {
|
||||
toast.info('正在导航...')
|
||||
@ -203,4 +235,10 @@
|
||||
page {
|
||||
background-color: $cz-page-background;
|
||||
}
|
||||
|
||||
.coupon-bg {
|
||||
background-image: url(#{$OSS}images/order/order_image2.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
</style>
|
||||
240
src/bundle/group-buying/platform/franchise-order-detail.vue
Normal file
240
src/bundle/group-buying/platform/franchise-order-detail.vue
Normal file
@ -0,0 +1,240 @@
|
||||
<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="orderType === GroupBuyingCategoryOrderStatus.ToUse">请在2025.12.31(含)前使用</text>
|
||||
<text v-if="orderType === GroupBuyingCategoryOrderStatus.Used">品一口香茗,让生活慢下来,从一杯好茶开始</text>
|
||||
<view v-if="orderType === GroupBuyingCategoryOrderStatus.Refunded" class="text-center mt-14rpx">
|
||||
<view class="text-40rpx text-[#303133] leading-56rpx">退款成功¥128.00</view>
|
||||
<view class="text-28rpx text-[#606266] leading-54rpx mt-20rpx">谢谢您的信任,我们一定会做的更好</view>
|
||||
<view class="text-24rpx text-[#606266] leading-34rpx mt-12rpx">2025年4月13日 18:22</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 待使用下显示 -->
|
||||
<view class="coupon-bg2 p-30rpx mx-30rpx" v-if="orderType === GroupBuyingCategoryOrderStatus.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="orderType === GroupBuyingCategoryOrderStatus.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="orderType !== GroupBuyingCategoryOrderStatus.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="orderType === GroupBuyingCategoryOrderStatus.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="orderType !== GroupBuyingCategoryOrderStatus.Used">
|
||||
<view class="mt-34rpx">
|
||||
<!-- 待使用 -->
|
||||
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" v-if="orderType === GroupBuyingCategoryOrderStatus.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="orderType === GroupBuyingCategoryOrderStatus.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 { GroupBuyingCategory, GroupBuyingCategoryOrderStatus, GroupBuyingStatusTitle } 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 = GroupBuyingStatusTitle[GroupBuyingCategory.Franchise][args.orderType] || '订单详情'
|
||||
|
||||
type.value = args.type
|
||||
orderType.value = args.orderType
|
||||
})
|
||||
|
||||
const directOrderDetail = {
|
||||
// 跳转到套餐详情
|
||||
handleToCombo: () => {
|
||||
|
||||
},
|
||||
|
||||
// 跳转到包间详情
|
||||
handleToRoom: () => {
|
||||
|
||||
},
|
||||
|
||||
// 处理导航逻辑
|
||||
handleLocation: () => {
|
||||
toast.info('正在导航...')
|
||||
// 可以使用uni.navigateTo或其他方式打开地图应用
|
||||
uni.navigateTo({
|
||||
url: '/pages/map/map' // 假设有一个地图页面
|
||||
})
|
||||
},
|
||||
|
||||
// 处理拨打电话逻辑
|
||||
handleCallPhone: () => {
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
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>
|
||||
@ -61,7 +61,7 @@
|
||||
|
||||
// 菜单
|
||||
const currentType = ref<number>(1)
|
||||
const menuList = reactive<{}> ([
|
||||
const menuList = reactive<Array<{ type: number; title: string }>>([
|
||||
{
|
||||
type: 1,
|
||||
title: '直营店',
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<!-- 团购和抖音团购 -->
|
||||
<view v-if="type === 'Direct' || type === 'Franchise' || type === 'DouYin'" class="bg-white rounded-10rpx p-30rpx">
|
||||
<!-- 平台团购直营店 -->
|
||||
<view v-if="type === 'Direct'" class="bg-white rounded-10rpx p-30rpx">
|
||||
<view class="flex justify-between items-center">
|
||||
<view class="flex items-center">
|
||||
<view class="w-40rpx h-40rpx mr-10rpx">
|
||||
@ -13,9 +13,9 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="font-400 text-28rpx leading-40rpx mt-12rpx">
|
||||
<text class="text-[#4C9F44]" v-if="orderType === OrderStatus.ToUse">待使用</text>
|
||||
<text class="text-[#606266]" v-if="orderType === OrderStatus.Used">已使用</text>
|
||||
<text class="text-[#C9C9C9]" v-if="orderType === OrderStatus.AfterSaleFinished">已退款</text>
|
||||
<text class="text-[#4C9F44]" v-if="orderType === GroupBuyingCategoryOrderStatus.ToUse">待使用</text>
|
||||
<text class="text-[#606266]" v-if="orderType === GroupBuyingCategoryOrderStatus.Used">已使用</text>
|
||||
<text class="text-[#C9C9C9]" v-if="orderType === GroupBuyingCategoryOrderStatus.AfterSaleFinished">已退款</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-22rpx">
|
||||
@ -30,16 +30,54 @@
|
||||
<wd-tag bg-color="#F3F3F3" color="#606266" custom-class="!px-16rpx">3小时</wd-tag>
|
||||
</view>
|
||||
<view class="font-400 leading-36rpx text-26rpx text-[#606266]">
|
||||
<!-- TODO 除了直营店其它的都没有这个描述信息: 适用包间 青茶、红茶、绿茶 -->
|
||||
<view class="mt-12rpx">适用包间 青茶、红茶、绿茶</view>
|
||||
<view class="mt-10rpx">有效期至2025-03-23</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- TODO 直营店有申请退款和立即预定按钮,加盟店只有申请退款按钮,抖音只有立即预定按钮 -->
|
||||
<view class="text-center flex items-center text-28rpx mt-28rpx" v-if="type === 'Direct' ? 'justify-start' : 'justify-end'">
|
||||
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] mr-28rpx" v-if="type === 'Direct' || type === 'Franchise'">申请退款</view>
|
||||
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44]" v-if="type === 'Direct' || type === 'DouYin'">立即预定</view>
|
||||
<view class="text-center flex items-center text-28rpx mt-28rpx justify-start">
|
||||
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] mr-28rpx">申请退款</view>
|
||||
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44]">立即预定</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 平台团购加盟店和抖音团购 -->
|
||||
<view v-if="type === 'Franchise' || type === 'DouYin'" class="bg-white rounded-10rpx p-30rpx">
|
||||
<view class="flex justify-between items-center">
|
||||
<view class="flex items-center">
|
||||
<view class="w-40rpx h-40rpx mr-10rpx">
|
||||
<wd-img width="100%" height="100%" :src="`${OSS}icon/icon_tea.png`"></wd-img>
|
||||
</view>
|
||||
<view class="flex items-center" @click="comboCard.handleToStore">
|
||||
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx w-400rpx line-1">这是茶馆的名称这是茶馆的名称这是茶馆的名称</view>
|
||||
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="font-400 text-28rpx leading-40rpx mt-12rpx">
|
||||
<text class="text-[#4C9F44]" v-if="orderType === GroupBuyingCategoryOrderStatus.ToUse">待使用</text>
|
||||
<text class="text-[#606266]" v-if="orderType === GroupBuyingCategoryOrderStatus.Used">已使用</text>
|
||||
<text class="text-[#C9C9C9]" v-if="orderType === GroupBuyingCategoryOrderStatus.Refunded">已退款</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-22rpx">
|
||||
<view class="flex">
|
||||
<view class="w-200rpx h-200rpx mr-28rpx">
|
||||
<wd-img width="100%" height="100%" :src="`${OSS}images/home/home_image5.png`"></wd-img>
|
||||
</view>
|
||||
<view class="flex-1">
|
||||
<view @click="comboCard.handleToOrderDetail">
|
||||
<view class="font-500 text-30rpx text-[#303133] leading-42rpx line-1 w-400rpx">这是套餐的名字这是套餐的名字这是套餐的名字这是套餐的名字这是套餐的名字</view>
|
||||
<view>
|
||||
<wd-tag bg-color="#F3F3F3" color="#606266" custom-class="!px-16rpx">3小时</wd-tag>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="text-center flex items-center text-28rpx mt-28rpx justify-end">
|
||||
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] mr-28rpx" v-if="type === 'Franchise'">申请退款</view>
|
||||
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44]" v-if="type === 'DouYin'">立即预定</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -49,7 +87,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="ComboCard">
|
||||
import { OrderStatus, OrderStatusText } from '@/utils/order'
|
||||
import { GroupBuyingCategoryOrderStatus } from '@/utils/order'
|
||||
|
||||
/**
|
||||
* ComboCard 套餐卡片组件
|
||||
@ -60,7 +98,7 @@
|
||||
|
||||
const props = defineProps({
|
||||
/**
|
||||
* 类型: 直营(Direct)、抖音(DouYin)、加盟(Franchise) 等
|
||||
* 类型: 直营(Direct)、加盟(Franchise)、抖音(DouYin) 等
|
||||
*/
|
||||
type: {
|
||||
type: String,
|
||||
@ -86,9 +124,26 @@
|
||||
|
||||
// 跳转到团购订单详情页
|
||||
handleToOrderDetail: () => {
|
||||
uni.navigateTo({
|
||||
url: `/bundle/group-buying/platform/order-detail?type=${props.type}&orderType=${OrderStatus.ToUse}`
|
||||
})
|
||||
// TODO 这里要对不同类型的订单进行区分跳转一个是直营的一个市加盟的
|
||||
switch (props.type) {
|
||||
case 'Direct':
|
||||
uni.navigateTo({
|
||||
url: `/bundle/group-buying/platform/direct-order-detail?orderType=${props.orderType}`
|
||||
})
|
||||
break;
|
||||
case 'Franchise':
|
||||
uni.navigateTo({
|
||||
url: `/bundle/group-buying/platform/franchise-order-detail?orderType=${props.orderType}`
|
||||
})
|
||||
break;
|
||||
case 'DouYin':
|
||||
uni.navigateTo({
|
||||
url: `/bundle/group-buying/douyin/douyin-order-detail?orderType=${props.orderType}`
|
||||
})
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 平台团购直营店、抖音团购待使用 -->
|
||||
<!-- 平台团购直营店待使用、平台团购加盟已使用、抖音待使用 -->
|
||||
<view class="bg-white rounded-16rpx p-30rpx" v-if="type === 'Direct' || type === 'Franchise' || type === 'DouYin'">
|
||||
<view class="flex items-center" @click="comboCoupon.handleToStore">
|
||||
<view class="mr-30rpx">
|
||||
@ -10,11 +10,11 @@
|
||||
<view class="flex justify-between items-center" @click="comboCoupon.handleToStore">
|
||||
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx w-362rpx line-1">团购套餐的可以点击跳转团购套餐的可以点击跳转团购套餐的可以点击跳转 </view>
|
||||
<wd-icon name="chevron-right" size="32rpx" v-if="type === 'Direct'"></wd-icon>
|
||||
<view class="text-26rpx leading-36rpx text-[#909399]" v-if="type === 'DouYin'">¥324</view>
|
||||
<view class="text-26rpx leading-36rpx text-[#909399]" v-if="type === 'DouYin' || type === 'Franchise'">¥324</view>
|
||||
</view>
|
||||
<view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
|
||||
<view>3小时</view>
|
||||
<view v-if="type === 'Direct'">x1</view>
|
||||
<view v-if="type === 'Direct' || type === 'Franchise'">x1</view>
|
||||
</view>
|
||||
<view class="text-[#606266] text-right mt-26rpx" v-if="type === 'Direct'">
|
||||
<text class="text-24rpx leading-34rpx mr-12rpx">实付</text>
|
||||
@ -28,7 +28,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 平台团购直营店待使用 -->
|
||||
<view class="mt-30rpx font-500 leading-48rpx" v-if="type === 'Direct' && orderType === OrderStatus.ToUse">
|
||||
<view class="mt-30rpx font-500 leading-48rpx" v-if="type === 'Direct' && orderType === GroupBuyingCategoryOrderStatus.ToUse">
|
||||
<view class="text-26rpx text-[#606266]">有效期:2025.04.04-2025.12.31</view>
|
||||
<view class="text-28rpx text-[#303133] mt-18rpx">
|
||||
<text class="mr-20rpx">券码 1052 4258 5654 125</text>
|
||||
@ -37,29 +37,8 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 抖音团购已使用 -->
|
||||
<view class="bg-white rounded-16rpx p-30rpx" v-if="orderType === OrderStatus.Used && type === 'DouYin'">
|
||||
<view class="flex items-center" @click="comboCoupon.handleToStore">
|
||||
<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" @click="comboCoupon.handleToStore">
|
||||
<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">
|
||||
3小时
|
||||
</view>
|
||||
<view class="font-400 text-26rpx text-[#606266] leading-40rpx mt-40rpx">
|
||||
适用包间:青茶、红茶、绿茶
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 平台团购直营店已使用 -->
|
||||
<view class="coupon-bg" v-if="type === 'Direct' && orderType === OrderStatus.Used">
|
||||
<view class="coupon-bg" v-if="type === 'Direct' && orderType === GroupBuyingCategoryOrderStatus.Used">
|
||||
<view class="flex items-center px-30rpx pt-30rpx pb-40rpx" @click="comboCoupon.handleToStore">
|
||||
<view class="mr-30rpx">
|
||||
<wd-img width="190rpx" height="190rpx" :src="`${OSS}images/home/home_image5.png`" mode="scaleToFill"></wd-img>
|
||||
@ -92,7 +71,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 平台团购加盟-待使用 -->
|
||||
<view class="coupon-bg2 p-30rpx" v-if="type === 'Franchise' && orderType === OrderStatus.ToUse">
|
||||
<view class="coupon-bg2 p-30rpx" v-if="type === 'Franchise' && orderType === GroupBuyingCategoryOrderStatus.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>
|
||||
@ -126,11 +105,33 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 抖音团购已使用 -->
|
||||
<view class="bg-white rounded-16rpx p-30rpx" v-if="orderType === GroupBuyingCategoryOrderStatus.Used && type === 'DouYin'">
|
||||
<view class="flex items-center" @click="comboCoupon.handleToStore">
|
||||
<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" @click="comboCoupon.handleToStore">
|
||||
<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">
|
||||
3小时
|
||||
</view>
|
||||
<view class="font-400 text-26rpx text-[#606266] leading-40rpx mt-40rpx">
|
||||
适用包间:青茶、红茶、绿茶
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="ComboCoupon">
|
||||
import { OrderStatus, OrderStatusText } from '@/utils/order'
|
||||
import { GroupBuyingCategoryOrderStatus } from '@/utils/order'
|
||||
|
||||
/**
|
||||
* Combo 套餐券组件
|
||||
|
||||
@ -203,7 +203,39 @@
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "group-buying/platform/order-detail",
|
||||
"path": "group-buying/douyin/douyin-order-detail",
|
||||
"type": "page",
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "group-buying/douyin/excharge",
|
||||
"type": "page",
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "group-buying/douyin/order-list",
|
||||
"type": "page",
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "group-buying/platform/direct-order-detail",
|
||||
"type": "page",
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "group-buying/platform/franchise-order-detail",
|
||||
"type": "page",
|
||||
"layout": "default",
|
||||
"style": {
|
||||
|
||||
@ -244,11 +244,12 @@
|
||||
|
||||
})
|
||||
|
||||
|
||||
const my = {
|
||||
// 跳转抖音团购
|
||||
handleToDouYinGroupBuying() {
|
||||
|
||||
uni.navigateTo({
|
||||
url: '/bundle/group-buying/douyin/order-list'
|
||||
})
|
||||
},
|
||||
|
||||
// 跳转平台团购
|
||||
|
||||
@ -20,4 +20,70 @@ export const OrderStatusText: Record<OrderStatus, string> = {
|
||||
[OrderStatus.Used]: '已使用',
|
||||
[OrderStatus.AfterSaleApply]: '申请售后',
|
||||
[OrderStatus.AfterSaleFinished]: '售后完成'
|
||||
}
|
||||
}
|
||||
|
||||
// 团购类型
|
||||
export enum GroupBuyingCategory {
|
||||
Direct = 'direct', // 直营店
|
||||
Franchise = 'franchise', // 加盟店
|
||||
DouYin = 'douyin' // 抖音团购
|
||||
}
|
||||
|
||||
// 店铺类型对应名称
|
||||
export const GroupBuyingCategoryText: Record<GroupBuyingCategory, string> = {
|
||||
[GroupBuyingCategory.Direct]: '直营店',
|
||||
[GroupBuyingCategory.Franchise]: '加盟店',
|
||||
[GroupBuyingCategory.DouYin]: '抖音',
|
||||
}
|
||||
|
||||
// 通用团购订单状态(仅团购业务的三个)
|
||||
export enum GroupBuyingCategoryOrderStatus {
|
||||
ToUse = 'toUse', // 待使用
|
||||
Used = 'used', // 已使用(交易完成)
|
||||
Refunded = 'refunded' // 已退款
|
||||
}
|
||||
|
||||
// 对应名称
|
||||
export const GroupBuyingStatusText: Record<GroupBuyingCategoryOrderStatus, string> = {
|
||||
[GroupBuyingCategoryOrderStatus.ToUse]: '待使用',
|
||||
[GroupBuyingCategoryOrderStatus.Used]: '已使用',
|
||||
[GroupBuyingCategoryOrderStatus.Refunded]: '已退款'
|
||||
}
|
||||
|
||||
// 对应tabbar显示的标题
|
||||
export const GroupBuyingStatusTitle: Record<GroupBuyingCategory, Record<GroupBuyingCategoryOrderStatus, string>> = {
|
||||
[GroupBuyingCategory.Direct]: {
|
||||
[GroupBuyingCategoryOrderStatus.ToUse]: '待使用',
|
||||
[GroupBuyingCategoryOrderStatus.Used]: '交易完成',
|
||||
[GroupBuyingCategoryOrderStatus.Refunded]: '售后完成'
|
||||
},
|
||||
[GroupBuyingCategory.Franchise]: {
|
||||
[GroupBuyingCategoryOrderStatus.ToUse]: '待使用',
|
||||
[GroupBuyingCategoryOrderStatus.Used]: '交易完成',
|
||||
[GroupBuyingCategoryOrderStatus.Refunded]: '售后完成'
|
||||
},
|
||||
[GroupBuyingCategory.DouYin]: {
|
||||
[GroupBuyingCategoryOrderStatus.ToUse]: '待使用',
|
||||
[GroupBuyingCategoryOrderStatus.Used]: '已使用', // DouYin专属
|
||||
[GroupBuyingCategoryOrderStatus.Refunded]: '售后完成'
|
||||
}
|
||||
}
|
||||
|
||||
// 不同门团购型可用状态映射(目前两类相同,后期若不同可单独调整)
|
||||
export const CategoryStatusMap: Record<GroupBuyingCategory, GroupBuyingCategoryOrderStatus[]> = {
|
||||
[GroupBuyingCategory.Direct]: [
|
||||
GroupBuyingCategoryOrderStatus.ToUse,
|
||||
GroupBuyingCategoryOrderStatus.Used,
|
||||
GroupBuyingCategoryOrderStatus.Refunded
|
||||
],
|
||||
[GroupBuyingCategory.Franchise]: [
|
||||
GroupBuyingCategoryOrderStatus.ToUse,
|
||||
GroupBuyingCategoryOrderStatus.Used,
|
||||
GroupBuyingCategoryOrderStatus.Refunded
|
||||
],
|
||||
[GroupBuyingCategory.DouYin]: [
|
||||
GroupBuyingCategoryOrderStatus.ToUse,
|
||||
GroupBuyingCategoryOrderStatus.Used,
|
||||
GroupBuyingCategoryOrderStatus.Refunded
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user