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.
415 lines
9.1 KiB
415 lines
9.1 KiB
<template>
|
|
<up-list @scrolltolower="scrolltolower">
|
|
<template v-for="(item, index) in orderList" :key="index">
|
|
<view class="date-label">
|
|
<view class="date-box">{{ item.date }}</view>
|
|
<view class="order-tag">
|
|
<template v-if="item.orders[0].status === 'completed'">已完成{{ item.orders.length }}单</template>
|
|
<template v-else>待上门{{ item.orders.length }}单</template>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="timeline-container">
|
|
<view class="timeline-line" :class="{'timeline-line-completed': item.orders[0].status === 'completed'}">
|
|
</view>
|
|
<up-list-item v-for="(order, orderIndex) in item.orders" :key="orderIndex">
|
|
<view class="timeline-item" :class="{'item-completed': order.status === 'completed'}">
|
|
<view class="timeline-dot"></view>
|
|
<view class="mb28 container-list-item">
|
|
<view class="order-time-tag"
|
|
:class="{'order-time-tag-completed' : order.status === 'completed'}">
|
|
<view class="time-box">{{ order.time }}</view>
|
|
<view class="order-status">
|
|
<view class="status-icon"></view>
|
|
<view>
|
|
<template v-if="order.status === 'completed'">已完成{{ order.count }}单</template>
|
|
<template v-else>待上门{{ order.count }}单</template>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="container-list">
|
|
<view class="flex-between flex">
|
|
<view class="address-info flex">
|
|
<view class="address-icon"></view>
|
|
<view class="address-text">{{ order.address }}</view>
|
|
</view>
|
|
<view class="expand-btn" @click="toggleExpand(index, orderIndex)">
|
|
{{ order.isExpanded ? '收起' : '展开' }} <text
|
|
class="expand-icon">{{ order.isExpanded ? '∧' : '∨' }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="order.isExpanded" class="pet-info">
|
|
<view class="pet-title">陪伴对象</view>
|
|
<view class="pet-list">
|
|
<view v-for="(pet, petIndex) in order.pets" :key="petIndex" class="pet-item">
|
|
<view class="pet-avatar">
|
|
<up-image width="70px" height="70px" :src="pet.avatar"
|
|
shape="circle"></up-image>
|
|
</view>
|
|
<view class="pet-detail">
|
|
<view class="pet-name">{{ pet.name }} <text
|
|
class="pet-tag">{{ pet.tag }}</text></view>
|
|
<view class="pet-desc">{{ pet.desc }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="address-detail mb28">{{ order.fullAddress }}</view>
|
|
|
|
<view class="action-buttons flex flex-between">
|
|
<up-button type="primary" text="打卡" v-if="false" @click="toClock" shape="circle"
|
|
class="mr20" color="var(--status-color)"></up-button>
|
|
<up-button type="primary" text="查看订单详情" @click="toDetail" shape="circle"
|
|
class="mr20" color="var(--status-color)"></up-button>
|
|
<up-button type="primary" text="查看宠物档案" @click="toPet" shape="circle"
|
|
class="mr20" color="var(--status-color)"></up-button>
|
|
<up-button type="primary" text="服务档案" @click="toService" shape="circle"
|
|
color="var(--status-color)"></up-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</up-list-item>
|
|
</view>
|
|
</template>
|
|
</up-list>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
reactive,
|
|
defineProps
|
|
} from 'vue';
|
|
|
|
const {
|
|
list
|
|
} = defineProps({
|
|
list: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
});
|
|
|
|
|
|
// 模拟订单数据
|
|
const orderList = reactive([{
|
|
date: '12-04',
|
|
orders: [{
|
|
time: '12-04',
|
|
count: 2,
|
|
status: 'completed', // 已完成状态
|
|
address: '湖南省长沙市雨花区人民东路',
|
|
fullAddress: '湖南省长沙市雨花区人民东路88号',
|
|
isExpanded: true,
|
|
pets: [{
|
|
avatar: 'https://cdn.catmdogd.com/Work/image/work/tx.png',
|
|
name: '小咪',
|
|
tag: '猫',
|
|
desc: '中华田园犬(小型犬) | 专业喂养+提前熟悉+陪玩'
|
|
},
|
|
{
|
|
avatar: 'https://cdn.catmdogd.com/Work/image/work/tx.png',
|
|
name: 'Billion',
|
|
tag: '狗',
|
|
desc: '狗狗(小型狗) | 上门喂养+陪玩'
|
|
}
|
|
]
|
|
}]
|
|
},
|
|
{
|
|
date: '12-05',
|
|
orders: [{
|
|
time: '12-05',
|
|
count: 1,
|
|
status: 'completed', // 已完成状态
|
|
address: '湖南省长沙市雨花区人民东路',
|
|
fullAddress: '湖南省长沙市雨花区人民东路88号',
|
|
isExpanded: false,
|
|
pets: [{
|
|
avatar: 'https://cdn.catmdogd.com/Work/image/work/tx.png',
|
|
name: '小黑',
|
|
tag: '狗',
|
|
desc: '中华田园犬(小型犬) | 专业喂养+提前熟悉+陪玩'
|
|
}]
|
|
}]
|
|
},
|
|
{
|
|
date: '12-08',
|
|
orders: [{
|
|
time: '12-08',
|
|
count: 1,
|
|
status: 'pending', // 待上门状态
|
|
address: '湖南省长沙市雨花区人民东路',
|
|
fullAddress: '湖南省长沙市雨花区人民东路88号',
|
|
isExpanded: false,
|
|
pets: [{
|
|
avatar: 'https://cdn.catmdogd.com/Work/image/work/tx.png',
|
|
name: '小白',
|
|
tag: '猫',
|
|
desc: '中华田园猫 | 专业喂养+提前熟悉+陪玩'
|
|
}]
|
|
}]
|
|
}
|
|
]);
|
|
|
|
// 展开/收起订单详情
|
|
function toggleExpand(dateIndex, orderIndex) {
|
|
orderList[dateIndex].orders[orderIndex].isExpanded = !orderList[dateIndex].orders[orderIndex].isExpanded;
|
|
}
|
|
|
|
// 滚动到底部加载更多
|
|
const scrolltolower = () => {
|
|
// 实际项目中这里应该调用API加载更多数据
|
|
console.log('加载更多数据');
|
|
}
|
|
|
|
// 页面跳转函数
|
|
function toClock() {
|
|
uni.navigateTo({
|
|
url: "/otherPages/myOrdersManage/clock/index"
|
|
})
|
|
}
|
|
|
|
function toDetail() {
|
|
uni.navigateTo({
|
|
url: "/otherPages/orderTakingManage/detail/index"
|
|
})
|
|
}
|
|
|
|
function toPet() {
|
|
uni.navigateTo({
|
|
url: "/otherPages/orderTakingManage/pet/index"
|
|
})
|
|
}
|
|
|
|
function toService() {
|
|
uni.navigateTo({
|
|
url: "/otherPages/myOrdersManage/service/index"
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "../index";
|
|
|
|
.date-label {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 20rpx 0;
|
|
position: relative;
|
|
z-index: 3;
|
|
|
|
.date-box {
|
|
background: #333333;
|
|
color: #FFFFFF;
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 8rpx;
|
|
font-size: 24rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.order-tag {
|
|
color: #7D8196;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.order-time-tag {
|
|
display: flex;
|
|
align-items: center;
|
|
background: rgba(#FFAA48, 0.2);
|
|
padding: 22rpx 42rpx;
|
|
|
|
.time-box {
|
|
background: var(--status-color);
|
|
color: #FFFFFF;
|
|
padding: 4rpx 12rpx;
|
|
border-radius: 8rpx;
|
|
font-size: 24rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.order-status {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 24rpx;
|
|
|
|
.status-icon {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
background: var(--status-color);
|
|
border-radius: 50%;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.status-icon-completed {
|
|
background: #4CD964;
|
|
}
|
|
}
|
|
}
|
|
|
|
.order-time-tag-completed {
|
|
background: rgba(#4CD964, 0.2);
|
|
}
|
|
|
|
.time-box-completed {
|
|
background: #4CD964;
|
|
}
|
|
|
|
.address-info {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 20rpx 0;
|
|
|
|
.address-icon {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
background: var(--status-color);
|
|
border-radius: 50%;
|
|
margin-right: 12rpx;
|
|
}
|
|
|
|
.address-icon-completed {
|
|
background: #4CD964;
|
|
}
|
|
|
|
.address-text {
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.expand-btn {
|
|
font-size: 26rpx;
|
|
color: #FFAA48;
|
|
font-weight: 500;
|
|
|
|
.expand-icon {
|
|
margin-left: 8rpx;
|
|
}
|
|
}
|
|
|
|
.expand-btn-completed {
|
|
color: #4CD964;
|
|
}
|
|
|
|
.pet-info {
|
|
margin-top: 20rpx;
|
|
|
|
.pet-title {
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.pet-list {
|
|
.pet-item {
|
|
display: flex;
|
|
margin-bottom: 20rpx;
|
|
|
|
.pet-avatar {
|
|
margin-right: 20rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.pet-detail {
|
|
.pet-name {
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
margin-bottom: 10rpx;
|
|
|
|
.pet-tag {
|
|
background: var(--status-color);
|
|
color: #FFFFFF;
|
|
padding: 2rpx 10rpx;
|
|
border-radius: 20rpx;
|
|
font-size: 20rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
|
|
.pet-desc {
|
|
font-size: 24rpx;
|
|
color: #7D8196;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.address-detail {
|
|
background: #F6FAFC;
|
|
border-radius: 8rpx;
|
|
padding: 14rpx 20rpx;
|
|
font-size: 24rpx;
|
|
color: #7D8196;
|
|
margin: 20rpx 0;
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
\t
|
|
|
|
/* 时间线样式 */
|
|
.timeline-container {
|
|
position: relative;
|
|
padding-left: 40rpx;
|
|
margin-bottom: 30rpx;
|
|
z-index: 1;
|
|
}
|
|
|
|
.timeline-line {
|
|
position: absolute;
|
|
left: 20rpx;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 2rpx;
|
|
background-color: #FFAA48;
|
|
z-index: 0;
|
|
}
|
|
|
|
.timeline-line-completed {
|
|
background-color: #4CD964;
|
|
}
|
|
|
|
.timeline-item {
|
|
position: relative;
|
|
padding-left: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.timeline-dot {
|
|
position: absolute;
|
|
left: -10rpx;
|
|
top: 30rpx;
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
border-radius: 50%;
|
|
background-color: #FFAA48;
|
|
z-index: 2;
|
|
border: 4rpx solid #FFF;
|
|
}
|
|
|
|
.timeline-dot-completed {
|
|
background-color: #4CD964;
|
|
}
|
|
|
|
/* 默认状态颜色变量 */
|
|
.timeline-item {
|
|
--status-color: #FFAA48;
|
|
}
|
|
|
|
/* 添加状态类，集中控制样式 */
|
|
.item-completed {
|
|
--status-color: #4CD964;
|
|
}
|
|
</style>
|