You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
153 lines
4.2 KiB
153 lines
4.2 KiB
<template>
|
|
<up-list @scrolltolower="scrolltolower">
|
|
<up-list-item>
|
|
<view v-if="list && list.length > 0">
|
|
<view class="mb28 container-list-item" v-for="(item, index) in list" :key="item.id">
|
|
<view class="flex-between flex" style="background: #FFF4E5;padding: 22rpx 42rpx">
|
|
<view>{{ orderStatus[item.status] }}</view>
|
|
<view>本单酬劳
|
|
<text style="color: #FF530A">￥{{ item.orderGivePrice }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="container-list">
|
|
<view class="flex-between flex mb28" v-for="(pet, index) in item.h5OrderVO.petVOList">
|
|
<up-image style="flex-shrink:0" class="mr20" width="70px" height="70px"
|
|
:src="pet.photo" shape="circle"></up-image>
|
|
<view>
|
|
<view class="font28 col3">服务天数: 共{{ pet.orderServiceText.length }}天 I {{ pet.orderServiceText.join('，') }}
|
|
</view>
|
|
<view style="margin: 18rpx 0">期望上门时间：早</view>
|
|
<view>{{ pet.breed }}{{ pet.bodyType }} | {{ pet.productNameText.join('+') }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="mb28 address">{{ item.address }}</view>
|
|
<view class="mb28" v-if="item.type == 0">订单为系统派发，请确认订单信息后再抢单</view>
|
|
<view class="flex flex-between">
|
|
<up-button type="primary" text="打卡记录" @click="showServicePopup(item)" shape="circle"
|
|
class="mr20" color="#FFAA48"></up-button>
|
|
<up-button type="primary" text="宠物档案" @click="toPet(item)" shape="circle" class="mr20"
|
|
color="#FFAA48"></up-button>
|
|
<up-button type="primary" text="服务档案" @click="toService(item)" shape="circle"
|
|
color="#FFAA48"></up-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-else class="empty-state">
|
|
<text class="empty-text">暂无订单数据</text>
|
|
</view>
|
|
</up-list-item>
|
|
</up-list>
|
|
|
|
<!-- 宠物服务时间弹窗 -->
|
|
<pet-service-popup :show="popupVisible" :orderData="currentOrder" @close="closeServicePopup" ref="servicePopupRef" />
|
|
</template>
|
|
<script setup>
|
|
import { onMounted, ref } from 'vue';
|
|
import PetServicePopup from './petServicePopup.vue';
|
|
|
|
const scrolltolower = () => {
|
|
|
|
}
|
|
|
|
onMounted(() => {
|
|
console.log(props)
|
|
})
|
|
|
|
const props = defineProps({
|
|
list: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
current: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
});
|
|
const orderStatus = ['待接单','进行中','已完成']
|
|
|
|
// 弹窗相关状态
|
|
const popupVisible = ref(false);
|
|
const currentOrder = ref(null);
|
|
const servicePopupRef = ref(null);
|
|
|
|
|
|
function toClock(item) {
|
|
|
|
item.h5OrderVO.orderItemList
|
|
|
|
let itemID = 0
|
|
|
|
if(item.h5OrderVO.orderServiceList && item.h5OrderVO.orderServiceList[0]){
|
|
itemID = item.h5OrderVO.orderServiceList[0].id
|
|
}
|
|
|
|
const paths = [
|
|
`/otherPages/myOrdersManage/clock/index?id=${item.orderId}&itemID=${itemID}`,
|
|
`/otherPages/myOrdersManage/clock/index?id=${item.orderId}&itemID=${itemID}`,
|
|
`/otherPages/myOrdersManage/clock/index?isRead=true&id=${item.orderId}&itemID=${itemID}`,
|
|
]
|
|
uni.navigateTo({
|
|
url: paths[item.orderStatus]
|
|
})
|
|
}
|
|
|
|
// 显示服务时间弹窗
|
|
function showServicePopup(item) {
|
|
// 如果是已完成状态，直接跳转到打卡记录页面
|
|
// if (item.orderStatus === 2) {
|
|
// return toClock(item);
|
|
// }
|
|
|
|
// 显示弹窗并设置当前订单数据
|
|
currentOrder.value = item;
|
|
popupVisible.value = true;
|
|
|
|
// 更新弹窗中的服务列表数据
|
|
setTimeout(() => {
|
|
if (servicePopupRef.value) {
|
|
servicePopupRef.value.updateServiceList();
|
|
}
|
|
}, 100);
|
|
}
|
|
|
|
// 关闭服务时间弹窗
|
|
function closeServicePopup() {
|
|
popupVisible.value = false;
|
|
}
|
|
|
|
function toPet(item) {
|
|
uni.navigateTo({
|
|
url: "/otherPages/orderTakingManage/pet/index?id=" + item.orderId
|
|
})
|
|
}
|
|
|
|
function toService(item) {
|
|
uni.navigateTo({
|
|
url: "/otherPages/myOrdersManage/service/index?id=" + item.orderId
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "../index";
|
|
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 40rpx;
|
|
}
|
|
|
|
.empty-image {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.empty-text {
|
|
color: #999;
|
|
font-size: 28rpx;
|
|
}
|
|
</style>
|