Browse Source

feat(订单详情): 添加送货图展示功能并优化图片路径

- 新增送货图展示区域,支持预览主订单和子订单的所有送货图片
- 优化静态图片引用路径,使用@/前缀
- 将环境配置从local改为prod
- 移除冗余注释并调整代码结构
master
前端-胡立永 2 weeks ago
parent
commit
50983f3436
3 changed files with 85 additions and 4 deletions
  1. +1
    -1
      config.js
  2. +84
    -3
      pages/order/orderDetail.vue
  3. BIN
      static/image/order/icon.png

+ 1
- 1
config.js View File

@ -7,7 +7,7 @@ import uvUI from '@/uni_modules/uv-ui-tools'
Vue.use(uvUI);
// 当前环境
const type = 'local'
const type = 'prod'
// 环境配置


+ 84
- 3
pages/order/orderDetail.vue View File

@ -2,11 +2,10 @@
<view>
<navbar title="订单详情" bgColor="#DC2828" color="#fff" leftClick @leftClick="$utils.navigateBack" />
<!-- 水洗店 -->
<view class="">
<view class="controls">
<view class="title">
<image src="../static/order/icon.png" mode=""></image>
<image src="@/static/image/order/icon.png" mode=""></image>
服务完成
</view>
<view class="tips">
@ -36,8 +35,28 @@
</view>
</view>
</view>
<!-- 送货图 -->
<view class="" v-if="deliveryPictures.length > 0">
<view class="controls">
<view class="delivery-title">
<view class="flex" style="display: flex; align-items: center;">
<view style="width: 8rpx;height: 30rpx;
background: #FD5100;border-radius: 6rpx;" />
<view class="head-title">送货图</view>
</view>
</view>
<view class="delivery-images">
<view class="image-item"
v-for="(image, index) in deliveryPictures"
:key="index"
@click="previewImage(image, deliveryPictures)">
<image :src="image.trim()" mode="aspectFill"></image>
</view>
</view>
</view>
</view>
<!-- 酒店和水洗店 -->
<view class="info">
<view class="flex" style="display: flex;">
<view style="width: 8rpx;height: 30rpx;
@ -230,6 +249,7 @@ export default {
],
order: {},
id: '',
deliveryPictures: [],
}
},
onLoad(options) {
@ -243,12 +263,43 @@ export default {
}, res => {
this.order = res.result;
this.stepsCurrent = this.order.status;
this.deliveryPictures = this.getAllDeliveryPictures();
})
},
//
clickService() {
this.$refs.customerServicePopup.open();
},
//
previewImage(current, urls) {
uni.previewImage({
current: current.trim(),
urls: urls.map(url => url.trim())
});
},
//
getAllDeliveryPictures() {
let allPictures = [];
//
if (this.order.deliveryPicture) {
const mainPictures = this.order.deliveryPicture.split(',').map(pic => pic.trim()).filter(pic => pic);
allPictures = allPictures.concat(mainPictures);
}
//
if (this.order.children && Array.isArray(this.order.children)) {
this.order.children.forEach(child => {
if (child.deliveryPicture) {
const childPictures = child.deliveryPicture.split(',').map(pic => pic.trim()).filter(pic => pic);
allPictures = allPictures.concat(childPictures);
}
});
}
//
return [...new Set(allPictures)];
},
}
}
</script>
@ -316,6 +367,36 @@ export default {
color: $uni-color;
}
}
.delivery-title {
width: 100%;
margin-bottom: 20rpx;
.head-title {
font-family: PingFang SC, PingFang SC-Bold;
color: #2f2e2e;
line-height: 30rpx;
margin-left: 10rpx;
}
}
.delivery-images {
display: flex;
flex-wrap: wrap;
gap: 20rpx;
.image-item {
width: 200rpx;
height: 200rpx;
border-radius: 10rpx;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
}
}
.steps {


BIN
static/image/order/icon.png View File

Before After
Width: 82  |  Height: 82  |  Size: 3.0 KiB

Loading…
Cancel
Save