完善功能
This commit is contained in:
wangxiaowei
0
src/bundle/group-order/detail.vue
Normal file
0
src/bundle/group-order/detail.vue
Normal file
257
src/bundle/group-order/order.vue
Normal file
257
src/bundle/group-order/order.vue
Normal file
@ -0,0 +1,257 @@
|
|||||||
|
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
|
||||||
|
<route lang="jsonc">{
|
||||||
|
"needLogin": true,
|
||||||
|
"layout": "tabbar",
|
||||||
|
"style": {
|
||||||
|
// 'custom' 表示开启自定义导航栏，默认 'default'
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTitleText": "首页"
|
||||||
|
}
|
||||||
|
}</route>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="">
|
||||||
|
<view class="order-list sticky top-0 left-0 z-50 bg-[#F6F7F8] pb-10rpx">
|
||||||
|
<wd-navbar safeAreaInsetTop custom-class='!bg-[#F6F7F8]' :bordered="false" placeholder>
|
||||||
|
<template #left>
|
||||||
|
<!-- <view class="search-box">
|
||||||
|
<wd-search v-model="keywords" hide-cancel placeholder-left light placeholder="搜索订单信息"></wd-search>
|
||||||
|
</view> -->
|
||||||
|
<view @click="router.navigateBack()">
|
||||||
|
<wd-icon name="thin-arrow-left" size="30rpx" color="#121212" ></wd-icon>
|
||||||
|
</view>
|
||||||
|
<view class="search-box flex items-center ml-26rpx" @click="Order.handleToSearch">
|
||||||
|
<wd-search placeholder="搜索订单信息" hide-cancel disabled :placeholder-left="true"
|
||||||
|
placeholderStyle="text-align:left;padding-left: 24rpx;line-heigt: 44rpx;color: #C9C9C9; font-size: 32rpx;font-weight: normal;">
|
||||||
|
</wd-search>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</wd-navbar>
|
||||||
|
<view class="tabs">
|
||||||
|
<wd-tabs v-model="tab" swipeable slidable="always" :lazy="false" @click="Order.handleChangeTabs">
|
||||||
|
<wd-tab title="全部" :name="GroupComboOrderStatusText.All"></wd-tab>
|
||||||
|
<wd-tab title="待使用" :name="GroupComboOrderStatusText.ToUse"></wd-tab>
|
||||||
|
<wd-tab title="已使用" :name="GroupComboOrderStatusText.Used"></wd-tab>
|
||||||
|
<wd-tab title="已退款" :name="GroupComboOrderStatusText.Refunded"></wd-tab>
|
||||||
|
</wd-tabs>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="tabs mt-18rpx mx-30rpx">
|
||||||
|
<mescroll-body ref="mescrollItem0" @init="mescrollInit" @down="downCallback" @up="Order.upCallback" :down="downOption" :up="upOption">
|
||||||
|
<view class="mb-20rpx" v-for="(item, index) in list" :key="index">
|
||||||
|
<combo-card :type="OrderSource.GroupComboOrder" :order="item" @refresh="Order.handleResetSearch"></combo-card>
|
||||||
|
</view>
|
||||||
|
</mescroll-body>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 弹出框 -->
|
||||||
|
<wd-message-box></wd-message-box>
|
||||||
|
</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"
|
||||||
|
import { OrderSource, AdminOrderStatusText, AdminOrderStatusValue, GroupComboOrderStatusText, GroupComboOrderStatusValue } from '@/utils/order'
|
||||||
|
import { router } from '@/utils/tools'
|
||||||
|
import { getStoreOrderList, getGroupComboOrderList} from '@/api/order'
|
||||||
|
import { useStoreStore } from '@/store'
|
||||||
|
|
||||||
|
const useStore = useStoreStore()
|
||||||
|
|
||||||
|
/* mescroll */
|
||||||
|
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
|
||||||
|
const downOption = {
|
||||||
|
auto: true
|
||||||
|
}
|
||||||
|
const upOption = {
|
||||||
|
auto: true,
|
||||||
|
textNoMore: '~ 已经到底啦 ~', //无更多数据的提示
|
||||||
|
}
|
||||||
|
const list = ref<Array<any>>([]) // 茶艺师列表
|
||||||
|
const keywords = ref<string>('')
|
||||||
|
const orderStatus = ref<string>('')
|
||||||
|
// const canReset = ref<boolean>(false) // 避免onShow重复加载
|
||||||
|
|
||||||
|
// tab
|
||||||
|
const tab = ref<string>('all')
|
||||||
|
|
||||||
|
onLoad((args: any) => {
|
||||||
|
uni.$on('refreshOrderList', () => {
|
||||||
|
list.value = []
|
||||||
|
getMescroll().resetUpScroll()
|
||||||
|
})
|
||||||
|
|
||||||
|
// 根据传过来的参数决定显示哪个tab
|
||||||
|
if (args.orderStatus) {
|
||||||
|
tab.value = args.orderStatus
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnload(() => {
|
||||||
|
uni.$off('refreshOrderList')
|
||||||
|
})
|
||||||
|
|
||||||
|
const Order = {
|
||||||
|
// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
|
||||||
|
upCallback: (mescroll: any) => {
|
||||||
|
const filter = {
|
||||||
|
page: mescroll.num,
|
||||||
|
size: mescroll.size,
|
||||||
|
store_id: useStore.defaultStore.id,
|
||||||
|
order_status: orderStatus.value,
|
||||||
|
search: keywords.value,
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加盟店订单
|
||||||
|
getGroupComboOrderList(filter).then((res) => {
|
||||||
|
const curPageData = res.list || [] // 当前页数据
|
||||||
|
if(mescroll.num == 1) list.value = [] // 第一页需手动制空列表
|
||||||
|
list.value = list.value.concat(curPageData) //追加新数据
|
||||||
|
mescroll.endSuccess(curPageData.length, Boolean(res.more))
|
||||||
|
}).catch(() => {
|
||||||
|
mescroll.endErr() // 请求失败, 结束加载
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 跳转茶室搜索
|
||||||
|
*/
|
||||||
|
handleToSearch: () => {
|
||||||
|
uni.$on('refreshTeaRoomList', params => {
|
||||||
|
keywords.value = params.keywords
|
||||||
|
Order.handleResetSearch()
|
||||||
|
|
||||||
|
uni.$off('refreshTeaRoomList')
|
||||||
|
})
|
||||||
|
router.navigateTo(`/pages/search/search?keywords=${keywords.value}`)
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 重置搜索
|
||||||
|
*/
|
||||||
|
handleResetSearch: () => {
|
||||||
|
list.value = []
|
||||||
|
getMescroll().resetUpScroll()
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 切换tab
|
||||||
|
* @param e
|
||||||
|
*/
|
||||||
|
handleChangeTabs: (e: {index: number, name: string}) => {
|
||||||
|
tab.value = e.name
|
||||||
|
if (useStore.defaultStore.operationType == 1) {
|
||||||
|
if (e.name === AdminOrderStatusText.Pending) {
|
||||||
|
orderStatus.value = '0'
|
||||||
|
} else {
|
||||||
|
orderStatus.value = AdminOrderStatusValue[e.name] || ''
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.log("🚀 ~ e.name:", e.name)
|
||||||
|
console.log("🚀 ~ e.name:",GroupComboOrderStatusValue[e.name])
|
||||||
|
if (e.name === GroupComboOrderStatusText.ToUse) {
|
||||||
|
orderStatus.value = '0'
|
||||||
|
} else {
|
||||||
|
orderStatus.value = GroupComboOrderStatusValue[e.name] || ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 切换tab时,重置当前的mescroll
|
||||||
|
list.value = []
|
||||||
|
getMescroll().resetUpScroll();
|
||||||
|
},
|
||||||
|
|
||||||
|
// 返回上一页
|
||||||
|
handleBack: () => {
|
||||||
|
uni.navigateBack({
|
||||||
|
delta: 1
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 监听默认店铺变化，刷新列表
|
||||||
|
*/
|
||||||
|
watch(
|
||||||
|
() => useStore.defaultStore.id,
|
||||||
|
(newId, oldId) => {
|
||||||
|
if (newId !== oldId) {
|
||||||
|
// 这里写刷新逻辑，比如重置列表并重新请求
|
||||||
|
list.value = []
|
||||||
|
getMescroll().resetUpScroll()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
page {
|
||||||
|
background-color: $cz-page-background;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-list {
|
||||||
|
:deep() {
|
||||||
|
.wd-navbar__left {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-box {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
margin-right: 40px;
|
||||||
|
--wot-search-padding: 0;
|
||||||
|
--wot-search-side-padding: 0;
|
||||||
|
|
||||||
|
:deep() {
|
||||||
|
.wd-search {
|
||||||
|
background: transparent !important;
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wd-search__block {
|
||||||
|
background-color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wd-search__input {
|
||||||
|
// #ifdef MP
|
||||||
|
padding-left: 32px !important;
|
||||||
|
padding-right: 32px !important;
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifndef MP
|
||||||
|
padding-right: 0 !important;
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -176,8 +176,6 @@
|
|||||||
orderStatus.value = AdminOrderStatusValue[e.name] || ''
|
orderStatus.value = AdminOrderStatusValue[e.name] || ''
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
console.log("🚀 ~ e.name:", e.name)
|
|
||||||
console.log("🚀 ~ e.name:",GroupComboOrderStatusValue[e.name])
|
|
||||||
if (e.name === GroupComboOrderStatusText.ToUse) {
|
if (e.name === GroupComboOrderStatusText.ToUse) {
|
||||||
orderStatus.value = '0'
|
orderStatus.value = '0'
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
@ -79,7 +79,7 @@
|
|||||||
id: 5,
|
id: 5,
|
||||||
title: '团购订单',
|
title: '团购订单',
|
||||||
icon: `${OSS}images/store/store/group.png`,
|
icon: `${OSS}images/store/store/group.png`,
|
||||||
path: '/pages/store/renew',
|
path: '/bundle/group-order/order',
|
||||||
},
|
},
|
||||||
])
|
])
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user