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-01 17:28:32 +08:00
parent 6ac45bef6b
commit d05eeebdb1
18 changed files with 695 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/App.vue
View File

@ -40,4 +40,18 @@
.absolute-center {position: absolute !important;left: 50%;top: 50%;transform: translate(-50%, -50%);}
.line-1 {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.line-2 {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
/* 自定义wot-ui的tab样式 */
.tabs {
:deep() {
.wd-tabs__line {
bottom: 0 !important;
width: 60rpx !important;
height: 16rpx !important;
background-color: transparent !important;
background-image: url(#{$OSS}images/reserve_room/reserve_room_image1.png) !important;
background-size: cover !important;
}
}
}
</style>

47
src/bundle/group-buying/platform/order-detail.vue Normal file
View File

@ -0,0 +1,47 @@
<route lang="jsonc" type="page">
{
"layout": "default",
"style": {
"navigationStyle": "custom"
}
}
</route>
<template>
<view class="">
<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>
<view class="mx-30rpx">
<combo :type="'GroupBuying'" :order-type="orderType"></combo>
</view>
</view>
</template>
<script lang="ts" setup>
import Combo from '@/components/order/Combo.vue'
import { OrderStatus, OrderStatusText } from '@/utils/order'
const title = ref<string>('')
const type = ref<string>('') // 订单类型：团购、抖音等
const orderType = ref<string>('') // 订单状态：待使用、退款等
onLoad((args) => {
title.value = OrderStatusText[args.orderType]
type.value = args.type
orderType.value = args.orderType
})
</script>
<style lang="scss" scoped>
page {
background-color: $cz-page-background;
}
</style>

165
src/bundle/group-buying/platform/order-list.vue Normal file
View File

@ -0,0 +1,165 @@
<route lang="jsonc" type="page">{
"layout": "default",
"style": {
"navigationStyle": "custom"
}
}</route>
<template>
<view class="">
<view class="order-list">
<navbar layoutLeft>
<template #left>
<view class="flex items-center ml-24rpx">
<view @click.stop="orderList.handleChangeMenu(item.type)" class="mr-28rpx" :class="item.type == currentType ? 'text-36rpx text-[#303133] leading-50rpx' : 'text-32rpx text-[#606266] leading-44rpx font-400'" v-for="(item, index) in menuList" :key="index">
{{ item.title }}
</view>
</view>
</template>
</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">
<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></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>
</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<{}> ([
{
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: 0 30rpx !important;
}
.wd-tabs__nav-item.is-active {
font-weight: 500 !important;
color: #303133 !important;
font-size: 32rpx !important;
line-height: 44rpx !important;
}
}
}
</style>

6
src/bundle/reserve-room/room.vue
View File

@ -77,7 +77,7 @@
<wd-gap bg-color="#F6F7F9" height="20rpx"></wd-gap>
</view>
<view class="tabs">
<wd-tabs v-model="tab" swipeable slidable="always" @change="room.tabIndex" :lazy="false">
<wd-tabs v-model="tab" swipeable slidable="always" @change="room.handleChangeTab" :lazy="false">
<wd-tab title="茶室预定" v-if="storeType != 2">
<view class="content mx-30rpx mt-34rpx">
<mescroll-body @init="mescrollInit" @down="downCallback" @up="room.upCallback">
@ -125,7 +125,9 @@
])
const current = ref<number>(0)
const rate = ref<number>(4)
// tab
const tab = ref<number>(0)
const goods = ref<Array<any>[]>([])
const showAction = ref<boolean>(false)
const sheetMenu = ref([])
@ -258,7 +260,7 @@
},
// tab切换获取index
tabIndex: (item: { index: number }) => {
handleChangeTab: (item: { index: number }) => {
// tabIndexs.value = item.index
// scrollToLastY()
},

121
src/components/PriceFormat.vue
View File

@ -7,72 +7,77 @@
</template>
<script lang="ts" setup name="PriceFormat">
import { ref, onMounted, watch } from 'vue'
/**
* PriceFormat 金额格式化
* @description 列表或者详情页价格格式化展示
*/
const props = defineProps({
price: {
type: [String, Number],
default: '0.00'
},
firstSize: {
type: [String, Number],
default: 36
},
secondSize: {
type: [String, Number],
default: 24
},
subscriptSize: {
type: [String, Number],
default: 24
},
color: {
type: String,
default: '#E54444'
},
weight: {
type: String,
default: 'bold'
},
lineThrough: {
type: Boolean,
default: false
},
showSubscript: {
type: Boolean,
default: true
}
})
import { ref, onMounted, watch } from 'vue'
const priceSlice = ref<{ first: string | number; second?: string | number }>({ first: 0 })
const props = defineProps({
price: {
type: [String, Number],
default: '0.00'
},
firstSize: {
type: [String, Number],
default: 36
},
secondSize: {
type: [String, Number],
default: 24
},
subscriptSize: {
type: [String, Number],
default: 24
},
color: {
type: String,
default: '#E54444'
},
weight: {
type: String,
default: 'bold'
},
lineThrough: {
type: Boolean,
default: false
},
showSubscript: {
type: Boolean,
default: true
}
})
onMounted(() => {
priceFormat.format()
})
const priceSlice = ref<{ first: string | number; second?: string | number }>({ first: 0 })
const priceFormat = {
format: () => {
let price = props.price
let formattedPrice: { first: string | number; second?: string | number } = { first: 0 }
if(price !== null && price !== '' && price !== undefined) {
price = parseFloat(price);
// 保留两位小数
const priceStr = price.toFixed(2);
const priceArr = priceStr.split('.');
formattedPrice.first = priceArr[0];
formattedPrice.second = priceArr[1];
priceSlice.value = formattedPrice
}else {
priceSlice.value = {
first: 0
onMounted(() => {
priceFormat.format()
})
const priceFormat = {
format: () => {
let price = props.price
let formattedPrice: { first: string | number; second?: string | number } = { first: 0 }
if(price !== null && price !== '' && price !== undefined) {
price = parseFloat(price);
// 保留两位小数
const priceStr = price.toFixed(2);
const priceArr = priceStr.split('.');
formattedPrice.first = priceArr[0];
formattedPrice.second = priceArr[1];
priceSlice.value = formattedPrice
}else {
priceSlice.value = {
first: 0
}
}
}
}
}
watch(() => props.price, () => {
priceFormat.format()
})
watch(() => props.price, () => {
priceFormat.format()
})
</script>
<script lang="ts">

5
src/components/RechargeBtn.vue
View File

@ -6,6 +6,11 @@
</template>
<script lang="ts" setup name="RechargeBtn">
/**
* RechargeBtn 充值按钮
* @description 用于展示对应页面按钮
*/
defineProps({
name: {
type: String,

5
src/components/coupon/GroupCoupon.vue
View File

@ -21,6 +21,11 @@
</template>
<script lang="ts" setup name="GroupCoupon">
/**
* GroupCoupon 团购券组件
* @description 展示团购券信息
*/
const OSS = inject('OSS')
defineProps<{
coupon: {

57
src/components/coupon/coupon.vue
View File

@ -22,6 +22,11 @@
</template>
<script lang="ts" setup name="Coupon">
/**
* Coupon 优惠券组件
* @description 展示优惠券信息
*/
defineProps<{
coupon: {
id: number
@ -40,33 +45,33 @@ export default {}
</script>
<style lang="scss" scoped>
.coupon {
position: relative;
border-radius: 8px;
margin-right: 22rpx;
height: 100px;
}
.coupon {
position: relative;
border-radius: 8px;
margin-right: 22rpx;
height: 100px;
}
.coupon::before,
.coupon::after {
content: "";
position: absolute;
top: 50%;
width: 32rpx;
/* 控制凹口大小 */
height: 32rpx;
background: #F6F7F9;
/* 与页面背景色一致 */
border-radius: 50%;
transform: translateY(-50%);
z-index: 2;
}
.coupon::before,
.coupon::after {
content: "";
position: absolute;
top: 50%;
width: 32rpx;
/* 控制凹口大小 */
height: 32rpx;
background: #F6F7F9;
/* 与页面背景色一致 */
border-radius: 50%;
transform: translateY(-50%);
z-index: 2;
}
.coupon::before {
left: -16rpx;
}
.coupon::before {
left: -16rpx;
}
.coupon::after {
right: -16rpx;
}
.coupon::after {
right: -16rpx;
}
</style>

7
src/components/navbar.vue
View File

@ -22,6 +22,11 @@
</template>
<script lang="ts" setup name="Navbar">
/**
* Navbar 导航栏
* @description 对wd-navbar进行二次封装，满足不同页面的需求
*/
import { ref, inject } from 'vue'
import { getNavBarHeight } from '@/utils/index'
@ -60,7 +65,7 @@
// z-index 层级
zIndex: {
type: Number,
default: 1
default: 10
}
})

7
src/components/notice/Bill.vue
View File

@ -30,7 +30,12 @@
</template>
<script lang="ts" setup name="PayNotice">
<script lang="ts" setup name="BillNotice">
/**
* BillNotice 账单提示组件
* @description 展示充值、退款、返现等账单信息
*/
const OSS = inject('OSS')
const props = defineProps({

5
src/components/notice/Pay.vue
View File

@ -15,6 +15,11 @@
<script lang="ts" setup name="PayNotice">
/**
* PayNotice 支付提示组件
* @description 提示支付成功
*/
const OSS = inject('OSS')
const props = defineProps({

5
src/components/notice/Reserve.vue
View File

@ -15,6 +15,11 @@
<script lang="ts" setup name="ReserveNotice">
/**
* ReserveNotice 预约提示组件
* @description 提示预约信息
*/
const OSS = inject('OSS')
const props = defineProps({

88
src/components/order/Combo.vue Normal file
View File

@ -0,0 +1,88 @@
<template>
<view>
<view class="bg-white rounded-16rpx p-30rpx" v-if="orderType === OrderStatus.ToUse">
<view class="">
<view class="flex items-center" @click="combo.handleToStore">
<view class="w-190rpx h-190rpx mr-30rpx">
<wd-img width="100%" height="100%" :src="`${OSS}images/home/home_image5.png`"></wd-img>
</view>
<view class="flex-1">
<view class="flex justify-between items-center" @click="combo.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" v-if="type === 'GroupBuying'"></wd-icon>
<view class="text-26rpx leading-36rpx text-[#909399]" v-if="type === 'DouYin'">￥324</view>
</view>
<view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
<view class="">3小时</view>
<view v-if="type === 'GroupBuying'">x1</view>
</view>
<view class="text-[#606266] text-right mt-26rpx" v-if="type === 'GroupBuying'">
<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 class="font-400 text-26rpx text-[#606266] leading-40rpx mt-40rpx" v-if="type === 'DouYin'">
适用包间：青茶、红茶、绿茶
</view>
</view>
</view>
<view class="mt-30rpx font-500 leading-48rpx" v-if="type === 'GroupBuying'">
<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>
</view>
</template>
<script lang="ts" setup name="Combo">
import { OrderStatus, OrderStatusText } from '@/utils/order'
/**
* Combo 套餐组件
* @description 订单详情页下的套餐卡片详情
*/
const OSS = inject('OSS')
defineProps({
/**
* 订单类型：团购、抖音等
*/
type: {
type: String,
default: ''
},
/**
* 订单类型：待使用、退款等
*/
orderType: {
type: String,
default: ''
}
})
const combo = {
// 跳转到对饮茶室的详情页
handleToStore: () => {
uni.navigateTo({
url: '/pages/store/store-detail/store-detail'
})
},
// 跳转到团购订单详情页
handleToGroupBuyingDetail: () => {
uni.navigateTo({
url: `/bundle/group-buying/platform/order-detail?type=${OrderStatus.ToUse}`
})
}
}
</script>
<script lang="ts">
export default {}
</script>

87
src/components/order/ComboCard.vue Normal file
View File

@ -0,0 +1,87 @@
<template>
<view class="">
<!-- 团购和抖音团购 -->
<view v-if="type === 'GroupBuying'" 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]">待使用</text>
<!-- <text class="text-[#606266]">已使用</text>
<text class="text-[#C9C9C9]">已退款</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.handleToGroupBuyingDetail">
<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 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 === 'GroupBuying' ? 'justify-start' : 'justify-end'">
<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>
</template>
<script lang="ts" setup name="ComboCard">
import { OrderStatus, OrderStatusText } from '@/utils/order'
/**
* ComboCard 套餐卡片组件
* @description 展示订单列表套餐卡片信息
*/
const OSS = inject('OSS')
const props = defineProps({
type: {
type: String,
default: 'GroupBuying'
}
})
const comboCard = {
// 跳转到对饮茶室的详情页
handleToStore: () => {
uni.navigateTo({
url: '/pages/store/store-detail/store-detail'
})
},
// 跳转到团购订单详情页
handleToGroupBuyingDetail: () => {
uni.navigateTo({
url: `/bundle/group-buying/platform/order-detail?type=${props.type}&orderType=${OrderStatus.ToUse}`
})
}
}
</script>
<script lang="ts">
export default {}
</script>

5
src/components/reserve/RoomList.vue
View File

@ -66,6 +66,11 @@
</template>
<script lang="ts" setup name="RoomList">
/**
* RoomList 房间列表
* @description 茶室预定房间列表展示
*/
import PriceFormat from '@/components/PriceFormat.vue'
const OSS = inject('OSS')

16
src/pages.json
View File

@ -201,6 +201,22 @@
"style": {
"navigationStyle": "custom"
}
},
{
"path": "group-buying/platform/order-detail",
"type": "page",
"layout": "default",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "group-buying/platform/order-list",
"type": "page",
"layout": "default",
"style": {
"navigationStyle": "custom"
}
}
]
}

129
src/pages/my/my.vue
View File

@ -17,7 +17,7 @@
</wd-navbar>
</view>
<view :style="{ paddingTop: navbarHeight + 'px' }">
<view class="pb-74rpx" :style="{ paddingTop: navbarHeight + 'px' }">
<!-- 账号昵称显示 -->
<view class="ml-60rpx flex items-center">
<view class="">
@ -63,8 +63,8 @@
<view class="w-300rpx h-148rpx">
<wd-img width="100%" height="100%" :src="`${OSS}images/my/my_image3.png`" mode="aspectFill"></wd-img>
</view>
<view class="text-[#303133] absolute bottom-12rpx left-24rpx">
<view class="text-30rpx leading-36rpx fon-bold">￥2106.3623</view>
<view class="text-[#303133] absolute bottom-12rpx left-24rpx text-center">
<view class="text-30rpx leading-36rpx fon-bold">{{ isLogin ? '￥2106.3623' : '- -' }}</view>
<view class="text-20rpx leading-28rpx ml-10rpx">平台余额</view>
</view>
</view>
@ -128,6 +128,79 @@
</view>
</view>
</view>
<!-- 团购 -->
<view class="bg-white rounded-16rpx mx-30rpx mt-28rpx px-56rpx py-48rpx flex items-center justify-between">
<view class="flex items-center" @click="my.handleToDouYinGroupBuying">
<view class="w-40rpx h-40rpx ">
<wd-img width="100%" height="100%" :src="`${OSS}icon/icon_douyin.png`"></wd-img>
</view>
<view class="ml-20rpx">
<text class="font-bold text-30rpx text-[#303133] leading-42rpx mr-6rpx">抖音团购</text>
<wd-icon name="arrow-right" size="24rpx" color="#B3B3B3"></wd-icon>
</view>
</view>
<view>
<wd-divider vertical />
</view>
<view class="flex items-center" @click="my.handleToPlatformGroupBuying">
<view class="w-40rpx h-40rpx ">
<wd-img width="100%" height="100%" :src="`${OSS}icon/icon_platform.png`"></wd-img>
</view>
<view class="ml-20rpx">
<text class="font-bold text-30rpx text-[#303133] leading-42rpx mr-6rpx">平台团购</text>
<wd-icon name="arrow-right" size="24rpx" color="#B3B3B3"></wd-icon>
</view>
</view>
</view>
<!-- 茶室订单 -->
<view class="bg-white rounded-16rpx mx-30rpx mt-28rpx pb-34rpx">
<view class="px-30rpx pt-30rpx py-24rpx">茶室订单</view>
<view class="flex relative px-30rpx">
<view v-for="(item, index) in roomMenuList" :key="index">
<view class="w-96rpx text-center flex flex-col items-center justify-center mr-30rpx">
<view class="w-36rpx h-36rpx flex items-center justify-center">
<wd-img width="100%" height="100%" :src="item.icon"></wd-img>
</view>
<view class="font-400 text-24rpx text-[#303133] leading-34rpx mt-8rpx">{{ item.title }}</view>
</view>
</view>
</view>
</view>
<!-- 茶艺师订单 -->
<view class="bg-white rounded-16rpx mx-30rpx mt-28rpx pb-34rpx">
<view class="px-30rpx pt-30rpx py-24rpx">茶艺室订单</view>
<view class="flex relative px-30rpx">
<view v-for="(item, index) in teaReserveMenuList" :key="index">
<view class="w-96rpx text-center flex flex-col items-center justify-center mr-30rpx">
<view class="w-36rpx h-36rpx flex items-center justify-center">
<wd-img width="100%" height="100%" :src="item.icon"></wd-img>
</view>
<view class="font-400 text-24rpx text-[#303133] leading-34rpx mt-8rpx">{{ item.title }}</view>
</view>
</view>
</view>
</view>
<!-- 更多服务 -->
<view class="bg-white rounded-16rpx mx-30rpx mt-28rpx pb-34rpx">
<view class="px-30rpx pt-30rpx py-24rpx">更多服务</view>
<view class="flex px-30rpx">
<view v-for="(item, index) in serviceMenuList" :key="index">
<view class="text-center flex flex-col items-center justify-center mr-30rpx relative" :class="item.badge ? 'w-180rpx ml-[-10rpx]' : 'w-120rpx'">
<view class="w-60rpx h-60rpx flex items-center justify-center">
<wd-img width="100%" height="100%" :src="item.icon"></wd-img>
</view>
<view class="font-400 text-24rpx text-[#303133] leading-34rpx mt-8rpx">{{ item.title }}</view>
<view class="service-badge rounded-18rpx text-[#63300E] text-16rpx leading-20rpx w-72rpx h-28rpx text-center leading-28rpx absolute top-0 right-0" v-if="item.badge">
{{item.badge}}
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
@ -142,17 +215,55 @@
const isLogin = ref<boolean>(false)
const isVip = ref<boolean>(true)
// 茶室订单
const roomMenuList = reactive([
{ id: 1, title: '全部订单', icon: `${OSS}icon/icon_room_all_order.png`, badge: '', url: '' },
{ id: 2, title: '待付款', icon: `${OSS}icon/icon_room_wait_pay_order.png`, badge: '', url: '' },
{ id: 3, title: '预约单', icon: `${OSS}icon/icon_room_reserve_order.png`, badge: '', url: '' },
{ id: 4, title: '已完结', icon: `${OSS}icon/icon_room_finish_order.png`, badge: '', url: '' },
])
// 茶艺师订单
const teaReserveMenuList = reactive([
{ id: 1, title: '全部订单', icon: `${OSS}icon/icon_tea_all_order.png`, badge: '', url: '' },
{ id: 2, title: '待付款', icon: `${OSS}icon/icon_tea_wait_pay_order.png`, badge: '', url: '' },
{ id: 3, title: '预约单', icon: `${OSS}icon/icon_tea_reserve_order.png`, badge: '', url: '' },
{ id: 4, title: '待确认', icon: `${OSS}icon/icon_tea_wait_confirm_order.png`, badge: '', url: '' },
{ id: 4, title: '已完结', icon: `${OSS}icon/icon_tea_finish_order.png`, badge: '', url: '' },
])
// 更多服务
const serviceMenuList = reactive([
{ id: 1, title: '申请茶馆', icon: `${OSS}icon/icon_service_teahouse.png`, badge: '', url: '' },
{ id: 2, title: '申请茶艺师', icon: `${OSS}icon/icon_service_tea.png`, badge: '', url: '' },
{ id: 3, title: '合创合伙人', icon: `${OSS}icon/icon_service_partner.png`, badge: '赚佣金', url: '' },
])
onLoad(() => {
})
const my = {
// 跳转抖音团购
handleToDouYinGroupBuying() {
},
// 跳转平台团购
handleToPlatformGroupBuying() {
uni.navigateTo({
url: '/bundle/group-buying/platform/order-list'
})
},
handleToService: () => {
uni.navigateTo({
url: '/src/pages/my/service/service'
})
}
}
onLoad(() => {
})
</script>
<style lang="scss">
@ -186,4 +297,8 @@
background: url(#{$OSS}images/my/my_image6.png) 0 0 no-repeat;
background-size: 180rpx;
}
.service-badge {
background: linear-gradient( 315deg, #F4C99A 0%, #FFE3BA 100%);
}
</style>

21
src/utils/order.ts Normal file
View File

@ -0,0 +1,21 @@
export enum OrderStatus {
All = 'all', // 全部订单
Pending = 'pending', // 待付款
Reserved = 'reserved', // 预约单
Confirm = 'Reserved', // 待确认
Finished = 'finished', // 已完结
ToUse = 'toUse', // 待使用
AfterSaleApply = 'afterSaleApply', // 申请售后
AfterSaleFinished = 'afterSaleFinished' // 售后完成
}
export const OrderStatusText: Record<OrderStatus, string> = {
[OrderStatus.All]: '全部订单',
[OrderStatus.Pending]: '待付款',
[OrderStatus.Reserved]: '预约单',
[OrderStatus.Confirm]: '待确认',
[OrderStatus.Finished]: '已完结',
[OrderStatus.ToUse]: '待使用',
[OrderStatus.AfterSaleApply]: '申请售后',
[OrderStatus.AfterSaleFinished]: '售后完成'
}