359 lines
8.3 KiB
Vue
359 lines
8.3 KiB
Vue
<template>
|
|
<div class="order_list_container">
|
|
<view class="nav_bar_box">
|
|
<nut-navbar :safe-area-inset-top="true" :custom-color="'#312D22'" :fixed="true" class="test"
|
|
@click-back="goLogin">
|
|
<template #left class="hometitle">
|
|
<!-- <div @click="goLogin"> -->
|
|
管理后台
|
|
<!-- </div> -->
|
|
</template>
|
|
</nut-navbar>
|
|
</view>
|
|
<nut-tabs v-model="state.tab11value" type="smile" @change="changeTable">
|
|
<nut-tab-pane v-for="item in list" :key="item.id" :title="`${item.value}`" :pane-key="item.id">
|
|
<template #default>
|
|
<scroll-view :scroll-top="scrollTop" class="scroll-Y" :style="{ height: scroll_list_height + 'px' }"
|
|
:refresher-enable="true" :refresher-enabled="isOpenRefresh" :scroll-y="true"
|
|
:refresher-triggered="triggered" :refresher-threshold="100" @scrolltolower="lower"
|
|
@refresherrefresh="onRefresh" @refresherpulling="onPulling" :key="refreshKey">
|
|
|
|
<div v-for="(order, index) in showOrderList" :key="index"
|
|
v-if="showOrderList && showOrderList.length > 0">
|
|
<order-item @tap="handlegotoinfo(order)" :orderId="order?.id || 0"
|
|
:title="order?.name || ''" :serverTime="order?.serviceTime || ''"
|
|
:ordertime="order?.createTime || ''" :uid="order?.uid || ''"
|
|
:cardtype="order?.dispatchStatus || 0" :imgUrl="order?.headImgUrl || ''"
|
|
@petList="handPetlist(order)"></order-item>
|
|
<div style="height: 20rpx;"></div>
|
|
</div>
|
|
<div v-else class="no-data">
|
|
<div class="content">
|
|
<img src="../../static/images/petdefault.png" alt="" class="no-img">
|
|
<div class="msg">暂无订单</div>
|
|
</div>
|
|
</div>
|
|
</scroll-view>
|
|
</template>
|
|
</nut-tab-pane>
|
|
</nut-tabs>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import orderItem from '../../components/orderItem'
|
|
import {
|
|
reactive,
|
|
ref,
|
|
getCurrentInstance,
|
|
watch, nextTick
|
|
} from 'vue'
|
|
|
|
import {
|
|
onReady,
|
|
onShow,
|
|
onLoad
|
|
} from '@dcloudio/uni-app'
|
|
import {
|
|
useSystemInfo,
|
|
useUserInfo
|
|
} from '@/store'
|
|
import {
|
|
orderList,
|
|
} from '../../api/orders'
|
|
import {
|
|
systemConfigInfo
|
|
} from '../../api/system'
|
|
|
|
|
|
const userInfo = useUserInfo()
|
|
const systemInfo = useSystemInfo()
|
|
const scroll_list_height = systemInfo.getscreenheight - systemInfo.getnavbarheight - 46
|
|
const orderDetails = ref([])
|
|
const orderCancel = ref([]) //已取消
|
|
const orderStayService = ref([]) //待服务
|
|
const orderService = ref([]) //服务中
|
|
const orderOver = ref([]) //已完成
|
|
const phoneNumber = ref(0)
|
|
const isLogin = ref(false)
|
|
const _freshing = ref(false)
|
|
const triggered = ref(false)
|
|
const timeconfig = ref(null)
|
|
const isOpenRefresh = ref(true)
|
|
|
|
const list = [{
|
|
"id": '0',
|
|
"value": '全部'
|
|
},
|
|
{
|
|
"id": '1',
|
|
"value": '待服务'
|
|
},
|
|
{
|
|
"id": '2',
|
|
"value": '服务中'
|
|
},
|
|
{
|
|
"id": '3',
|
|
"value": '已完成'
|
|
},
|
|
{
|
|
"id": '4',
|
|
"value": '已取消'
|
|
},
|
|
]
|
|
|
|
// 上下文
|
|
const {
|
|
ctx
|
|
} = getCurrentInstance()
|
|
|
|
const state = reactive({
|
|
tab11value: '0',
|
|
});
|
|
|
|
const showOrderList = ref([])
|
|
const refreshKey = ref(0)
|
|
|
|
// 监听数据变化
|
|
watch(showOrderList, (newVal) => {
|
|
console.log('订单列表更新，数量:', newVal.length)
|
|
// 数据变化后强制刷新scroll-view
|
|
refreshKey.value++
|
|
}, { deep: true })
|
|
|
|
|
|
const params = reactive({
|
|
orderStatus: 0,
|
|
pageNum: 0,
|
|
pageSize: 10,
|
|
uid: userInfo.uid
|
|
})
|
|
function changeTable() {
|
|
// 1待服务orderStayService 2服务中orderService 3已完成orderOver 4已取消orderCancel
|
|
showOrderList.value = []
|
|
if (state.tab11value == 0) {
|
|
showOrderList.value = orderDetails.value;
|
|
} else if (state.tab11value == 1) {
|
|
showOrderList.value = orderStayService.value
|
|
} else if (state.tab11value == 2) {
|
|
showOrderList.value = orderService.value
|
|
} else if (state.tab11value == 3) {
|
|
showOrderList.value = orderOver.value
|
|
} else if (state.tab11value == 4) {
|
|
showOrderList.value = orderCancel.value
|
|
}
|
|
}
|
|
|
|
function init(isadd) {
|
|
const paramsData = {
|
|
orderStatus: params.orderStatus,
|
|
pageNum: params.pageNum,
|
|
pageSize: params.pageSize,
|
|
uid: userInfo.getUid
|
|
}
|
|
console.log(paramsData, '--------------2')
|
|
try {
|
|
orderList(paramsData).then(res => {
|
|
if (res.content) {
|
|
var data = res.content || []
|
|
if (data.length > 0) {
|
|
for (let i in data) {
|
|
data[i].createTime = data[i].createTime.split(' ')[0] + ' ' + data[i].createTime.split(
|
|
' ')[1]
|
|
}
|
|
}
|
|
orderDetails.value = [...data]
|
|
// 1待服务 2服务中 3已完成 4已取消
|
|
orderStayService.value = orderStayService.value.concat(data.filter(x => x.orderStatus === 1))
|
|
orderService.value = orderService.value.concat(data.filter(x => x.orderStatus === 2))
|
|
orderOver.value = orderOver.value.concat(data.filter(x => x.orderStatus === 3))
|
|
orderCancel.value = orderCancel.value.concat(data.filter(x => x.orderStatus === 4))
|
|
|
|
if (isadd) {
|
|
showOrderList.value = [...showOrderList.value, ...orderDetails.value]
|
|
} else {
|
|
showOrderList.value = Array.isArray(orderDetails.value) ? [...orderDetails.value] : []
|
|
changeTable()
|
|
}
|
|
// 创建新数组引用
|
|
// showOrderList.value = Array.isArray(orderDetails.value) ? [...orderDetails.value] : []
|
|
// 强制刷新scroll-view
|
|
nextTick()
|
|
refreshKey.value++
|
|
}
|
|
})
|
|
systemConfigInfo({}).then(res => {
|
|
if (res.code === 200) {
|
|
phoneNumber.value = res.data.systemInfos.find(x => x.name === '客服电话')
|
|
}
|
|
})
|
|
} catch (error) {
|
|
console.error('加载订单失败:', error)
|
|
showOrderList.value = []
|
|
}
|
|
}
|
|
|
|
onShow(() => {
|
|
console.log(userInfo, '>>>>>>>userInfo')
|
|
isLogin.value = userInfo.getToken === 0 ? false : true
|
|
if (!isLogin.value) {
|
|
uni.navigateTo({
|
|
url: '/pages/login/index'
|
|
})
|
|
} else {
|
|
init(false);
|
|
}
|
|
if (typeof ctx.$scope.getTabBar === 'function' && ctx.$scope.getTabBar()) {
|
|
ctx.$scope.getTabBar().setData({
|
|
// 当前页面对应的tab index
|
|
selected: 0,
|
|
})
|
|
}
|
|
})
|
|
onLoad((e) => {
|
|
state.tab11value = e?.index !== undefined ? e?.index : '0'
|
|
|
|
// init()
|
|
// console.log(userInfo,'>>>>>>>>index>>>>>>',userInfo.getToken)
|
|
// isLogin.value = userInfo.getToken === 0 ? false : true
|
|
// if (!isLogin.value) {
|
|
// uni.navigateTo({
|
|
// url: '/pages/login/index'
|
|
// })
|
|
// } else {
|
|
// init();
|
|
// state.tab11value = 0
|
|
// changeTable()
|
|
// }
|
|
})
|
|
|
|
onReady((e) => { })
|
|
|
|
const scrollTop = ref(0)
|
|
|
|
function upper(e) {
|
|
// console.log(e)
|
|
}
|
|
|
|
function lower(e) {
|
|
params.pageNum += 1
|
|
console.log(showOrderList.value.length, '--------------a3')
|
|
init(true)
|
|
console.log(e)
|
|
}
|
|
|
|
function scroll(e) {
|
|
|
|
}
|
|
|
|
function onPulling(e) {
|
|
console.log("onpulling", e);
|
|
if (e.detail.deltaY < 0) return // 防止上滑页面也触发下拉
|
|
// console.log('触发下拉刷新')
|
|
triggered.value = true;
|
|
}
|
|
|
|
function onRefresh() {
|
|
console.log("onRefresh");
|
|
if (_freshing.value) return;
|
|
_freshing.value = true;
|
|
|
|
if (timeconfig.value) {
|
|
clearTimeout(timeconfig.value)
|
|
timeconfig.value = null
|
|
}
|
|
timeconfig.value = setTimeout(() => {
|
|
triggered.value = false;
|
|
_freshing.value = false;
|
|
console.log('开始请求')
|
|
// this.getData();
|
|
params.pageSize = 10
|
|
params.pageNum = 0
|
|
params.orderStatus = 0
|
|
orderDetails.value = []
|
|
orderStayService.value = []
|
|
orderService.value = []
|
|
orderOver.value = []
|
|
orderCancel.value = []
|
|
console.log(showOrderList.value.length, '--------------a4')
|
|
init(false)
|
|
}, 500);
|
|
}
|
|
|
|
//跳转订单详情
|
|
function handlegotoinfo(order) {
|
|
uni.navigateTo({
|
|
url: `/pages/orderInfom/index?orderInfo=${JSON.stringify(order)}`
|
|
})
|
|
}
|
|
|
|
//跳转宠物列表
|
|
function handPetlist(list) {
|
|
uni.navigateTo({
|
|
url: `/pages/orderPetList/index?list=${JSON.stringify(list)}`
|
|
})
|
|
}
|
|
|
|
//切换登录
|
|
function goLogin() {
|
|
userInfo.resetUidAndToken()
|
|
uni.navigateTo({
|
|
url: `/pages/login/index`
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.hometitle {
|
|
color: $uni-text-color;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.nut-tab-pane {
|
|
background: #F3F3F3 !important;
|
|
box-sizing: border-box !important;
|
|
padding: 0rpx !important;
|
|
position: relative !important;
|
|
}
|
|
|
|
.scroll-Y {
|
|
height: 100vh;
|
|
background: #F3F3F3;
|
|
// padding: 24rpx;
|
|
padding-left: 24rpx;
|
|
padding-right: 24rpx;
|
|
padding-top: 24rpx;
|
|
padding-bottom: 44rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.order_list_container {
|
|
--nut-navbar-background: #F3F3F3;
|
|
--nut-navbar-color: #312D22;
|
|
background-color: #F3F3F3;
|
|
}
|
|
|
|
.no-data {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100vh;
|
|
padding-top: 50%;
|
|
|
|
.content {
|
|
text-align: center;
|
|
height: 100%;
|
|
|
|
.msg {
|
|
margin: 40rpx;
|
|
}
|
|
|
|
.no-img {
|
|
width: 262rpx;
|
|
height: 262rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |