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

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()
},