Browse Source

refactor(订单列表): 移除冗余代码并优化宠物性别显示

- 移除订单时间显示和订单数量的冗余代码
- 将宠物标签改为根据性别显示不同图标和背景色
- 优化代码结构,提高可维护性
pull/6/head
前端-胡立永 4 months ago
parent
commit
8725a02657
1 changed files with 39 additions and 9 deletions
  1. +39
    -9
      pages/myOrdersManage/components/orderListByData.vue

+ 39
- 9
pages/myOrdersManage/components/orderListByData.vue View File

@ -18,12 +18,14 @@
<view class="mb28 container-list-item"> <view class="mb28 container-list-item">
<view class="order-time-tag" <view class="order-time-tag"
:class="{'order-time-tag-completed' : order.status === 'completed'}"> :class="{'order-time-tag-completed' : order.status === 'completed'}">
<view class="time-box">{{ order.time }}</view>
<!-- <view class="time-box">{{ order.time }}</view> -->
<view class="order-status"> <view class="order-status">
<view class="status-icon"></view> <view class="status-icon"></view>
<view> <view>
<template v-if="order.status === 'completed'">已完成{{ order.count }}</template>
<template v-else>待上门{{ order.count }}</template>
<!-- {{ order.count }}
{{ order.count }} -->
<template v-if="order.status === 'completed'">已完成</template>
<template v-else>待上门</template>
</view> </view>
</view> </view>
</view> </view>
@ -50,7 +52,7 @@
</view> </view>
<view class="pet-detail"> <view class="pet-detail">
<view class="pet-name">{{ pet.name }} <text <view class="pet-name">{{ pet.name }} <text
class="pet-tag">{{ pet.tag }}</text></view>
class="pet-tag" :class="{'pet-tag-female': pet.gender === 'female', 'pet-tag-male': pet.gender === 'male'}">{{ pet.gender === 'female' ? '♀' : '♂' }}</text></view>
<view class="pet-desc">{{ pet.desc }}</view> <view class="pet-desc">{{ pet.desc }}</view>
</view> </view>
</view> </view>
@ -107,13 +109,34 @@
pets: [{ pets: [{
avatar: 'https://cdn.catmdogd.com/Work/image/work/tx.png', avatar: 'https://cdn.catmdogd.com/Work/image/work/tx.png',
name: '小咪', name: '小咪',
tag: '',
gender: 'female',
desc: '中华田园犬(小型犬) | 专业喂养+提前熟悉+陪玩' desc: '中华田园犬(小型犬) | 专业喂养+提前熟悉+陪玩'
}, },
{ {
avatar: 'https://cdn.catmdogd.com/Work/image/work/tx.png', avatar: 'https://cdn.catmdogd.com/Work/image/work/tx.png',
name: 'Billion', name: 'Billion',
tag: '狗',
gender: 'male',
desc: '狗狗(小型狗) | 上门喂养+陪玩'
}
]
},
{
time: '12-04',
count: 2,
status: 'completed', //
address: '湖南省长沙市雨花区人民东路',
fullAddress: '湖南省长沙市雨花区人民东路88号',
isExpanded: true,
pets: [{
avatar: 'https://cdn.catmdogd.com/Work/image/work/tx.png',
name: '小咪',
gender: 'female',
desc: '中华田园犬(小型犬) | 专业喂养+提前熟悉+陪玩'
},
{
avatar: 'https://cdn.catmdogd.com/Work/image/work/tx.png',
name: 'Billion',
gender: 'male',
desc: '狗狗(小型狗) | 上门喂养+陪玩' desc: '狗狗(小型狗) | 上门喂养+陪玩'
} }
] ]
@ -131,7 +154,7 @@
pets: [{ pets: [{
avatar: 'https://cdn.catmdogd.com/Work/image/work/tx.png', avatar: 'https://cdn.catmdogd.com/Work/image/work/tx.png',
name: '小黑', name: '小黑',
tag: '',
gender: 'male',
desc: '中华田园犬(小型犬) | 专业喂养+提前熟悉+陪玩' desc: '中华田园犬(小型犬) | 专业喂养+提前熟悉+陪玩'
}] }]
}] }]
@ -148,7 +171,7 @@
pets: [{ pets: [{
avatar: 'https://cdn.catmdogd.com/Work/image/work/tx.png', avatar: 'https://cdn.catmdogd.com/Work/image/work/tx.png',
name: '小白', name: '小白',
tag: '',
gender: 'female',
desc: '中华田园猫 | 专业喂养+提前熟悉+陪玩' desc: '中华田园猫 | 专业喂养+提前熟悉+陪玩'
}] }]
}] }]
@ -330,6 +353,14 @@
font-size: 20rpx; font-size: 20rpx;
margin-left: 10rpx; margin-left: 10rpx;
} }
.pet-tag-female {
background: #FF6B9A;
}
.pet-tag-male {
background: #4A90E2;
}
} }
.pet-desc { .pet-desc {
@ -356,7 +387,6 @@
margin-top: 20rpx; margin-top: 20rpx;
} }
\t
/* 时间线样式 */ /* 时间线样式 */
.timeline-container { .timeline-container {


Loading…
Cancel
Save