|
|
@ -12,7 +12,7 @@ |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="main-content safe-area-inset-bottom" :style="{marginTop: navBarTotalHeight + 'px'}"> |
|
|
|
<view v-if="status === 'problem'" class="card card-problem"> |
|
|
|
<view v-if="(status === 'problem' || status === 'unrecyclable') && item" class="card card-problem"> |
|
|
|
<view class="card-header"> |
|
|
|
<view class="dot dot-orange"></view> |
|
|
|
<text class="card-title card-title-orange">质检有问题不可回收</text> |
|
|
@ -26,15 +26,21 @@ |
|
|
|
<view class="timeline-content"> |
|
|
|
<view class="timeline-title-row"> |
|
|
|
<text class="timeline-title">质检说明</text> |
|
|
|
<text class="timeline-time">{{testingTime}}</text> |
|
|
|
<text class="timeline-time">{{item.testingTime}}</text> |
|
|
|
</view> |
|
|
|
<view v-for="(item, idx) in problemList" :key="idx" class="problem-block"> |
|
|
|
<view class="problem-index">{{(idx+1).toString().padStart(2, '0')}} / {{problemList.length.toString().padStart(2, '0')}}</view> |
|
|
|
<view class="problem-title">{{item.title}}</view> |
|
|
|
<view v-for="(desc, idx) in problemDescArr.length ? problemDescArr : [item.problemDesc]" :key="idx" class="problem-block"> |
|
|
|
<view class="problem-index">{{(idx+1).toString().padStart(2, '0')}} / {{problemDescArr.length.toString().padStart(2, '0')}}</view> |
|
|
|
<view class="problem-title">{{desc || '质量问题'}}</view> |
|
|
|
<view class="problem-divider"></view> |
|
|
|
<view class="problem-label">质量问题实拍</view> |
|
|
|
<view class="problem-images"> |
|
|
|
<image v-for="(img, i) in item.images" :key="i" :src="img" class="problem-img" mode="aspectFill" /> |
|
|
|
<view v-for="(img, i) in imagesArr" :key="i" class="img-lock-wrap"> |
|
|
|
<image :src="img" class="problem-img" mode="aspectFill" /> |
|
|
|
<view v-if="!isSelf" class="img-lock-mask"> |
|
|
|
<image src="/static/lock.png" class="lock-icon" /> |
|
|
|
<view class="lock-tip">为保护用户隐私,衣物照片仅本人可见,您无权限查看</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
@ -44,7 +50,7 @@ |
|
|
|
<view class="timeline-content"> |
|
|
|
<view class="timeline-title-row"> |
|
|
|
<text class="timeline-title">开始查验质检</text> |
|
|
|
<text class="timeline-time">{{testingTime}}</text> |
|
|
|
<text class="timeline-time">{{item.testingTime}}</text> |
|
|
|
</view> |
|
|
|
<view class="timeline-desc"> |
|
|
|
感谢您参与旧衣回收活动,支持环保事业。\n我们已收到您的旧衣,正在进行逐件查验。 |
|
|
@ -53,7 +59,7 @@ |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view v-else-if="status === 'qualified'" class="card card-qualified"> |
|
|
|
<view v-else-if="status === 'qualified' && item" class="card card-qualified"> |
|
|
|
<view class="card-header"> |
|
|
|
<view class="dot dot-green"></view> |
|
|
|
<text class="card-title card-title-green">质检合格</text> |
|
|
@ -67,14 +73,20 @@ |
|
|
|
<view class="timeline-content"> |
|
|
|
<view class="timeline-title-row"> |
|
|
|
<text class="timeline-title">质检说明</text> |
|
|
|
<text class="timeline-time">{{testingTime}}</text> |
|
|
|
<text class="timeline-time">{{item.testingTime}}</text> |
|
|
|
</view> |
|
|
|
<view class="problem-block"> |
|
|
|
<view class="problem-index">01 / {{qualifiedImages.length.toString().padStart(2, '0')}}</view> |
|
|
|
<view class="problem-index">01 / {{imagesArr.length.toString().padStart(2, '0')}}</view> |
|
|
|
<view class="problem-title">质检图片</view> |
|
|
|
<view class="problem-divider"></view> |
|
|
|
<view class="problem-images"> |
|
|
|
<image v-for="(img, i) in qualifiedImages" :key="i" :src="img" class="problem-img" mode="aspectFill" /> |
|
|
|
<view v-for="(img, i) in imagesArr" :key="i" class="img-lock-wrap"> |
|
|
|
<image :src="img" class="problem-img" mode="aspectFill" /> |
|
|
|
<view v-if="!isSelf" class="img-lock-mask"> |
|
|
|
<image src="/static/lock.png" class="lock-icon" /> |
|
|
|
<view class="lock-tip">为保护用户隐私,衣物照片仅本人可见,您无权限查看</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
@ -84,7 +96,7 @@ |
|
|
|
<view class="timeline-content"> |
|
|
|
<view class="timeline-title-row"> |
|
|
|
<text class="timeline-title">开始查验质检</text> |
|
|
|
<text class="timeline-time">{{testingTime}}</text> |
|
|
|
<text class="timeline-time">{{item.testingTime}}</text> |
|
|
|
</view> |
|
|
|
<view class="timeline-desc"> |
|
|
|
感谢您参与旧衣回收活动,支持环保事业。\n我们已收到您的旧衣,正在进行逐件查验。 |
|
|
@ -101,44 +113,14 @@ |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
status: 'problem', // 'problem' or 'qualified' |
|
|
|
testingStatus: '', |
|
|
|
testingTime: '', |
|
|
|
testingImages: [], |
|
|
|
status: 'problem', // 'problem' or 'qualified' or 'unrecyclable' |
|
|
|
statusBarHeight: 0, |
|
|
|
navBarHeight: 44, |
|
|
|
navBarTotalHeight: 44, |
|
|
|
// 质量问题示例数据 |
|
|
|
problemList: [ |
|
|
|
{ |
|
|
|
title: '大面积破损', |
|
|
|
images: [ |
|
|
|
'https://oss.budingxiaoshuo.com/upload/组46584_1747804049771.png', |
|
|
|
'https://oss.budingxiaoshuo.com/upload/组46584_1747804049771.png' |
|
|
|
] |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '大面积破损', |
|
|
|
images: [ |
|
|
|
'https://oss.budingxiaoshuo.com/upload/组46584_1747804049771.png', |
|
|
|
'https://oss.budingxiaoshuo.com/upload/组46584_1747804049771.png', |
|
|
|
'https://oss.budingxiaoshuo.com/upload/组46584_1747804049771.png' |
|
|
|
] |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '大面积破损', |
|
|
|
images: [ |
|
|
|
'https://oss.budingxiaoshuo.com/upload/组46584_1747804049771.png', |
|
|
|
'https://oss.budingxiaoshuo.com/upload/组46584_1747804049771.png', |
|
|
|
'https://oss.budingxiaoshuo.com/upload/组46584_1747804049771.png', |
|
|
|
'https://oss.budingxiaoshuo.com/upload/组46584_1747804049771.png' |
|
|
|
] |
|
|
|
} |
|
|
|
], |
|
|
|
// 合格图片示例 |
|
|
|
qualifiedImages: [ |
|
|
|
'https://oss.budingxiaoshuo.com/upload/组46584_1747804049771.png' |
|
|
|
] |
|
|
|
item: null, |
|
|
|
problemDescArr: [], |
|
|
|
imagesArr: [], |
|
|
|
isSelf: true, |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad(options) { |
|
|
@ -147,51 +129,28 @@ export default { |
|
|
|
this.statusBarHeight = sysInfo.statusBarHeight |
|
|
|
this.navBarHeight = 44 |
|
|
|
this.navBarTotalHeight = this.statusBarHeight + this.navBarHeight |
|
|
|
// 可通过 options.status = 'problem'/'qualified' 控制状态 |
|
|
|
if (options && options.status) { |
|
|
|
this.status = options.status |
|
|
|
} |
|
|
|
if (options.testingStatus) { |
|
|
|
this.testingStatus = options.testingStatus |
|
|
|
} |
|
|
|
|
|
|
|
// 处理 testingInstructions,转换为数组 |
|
|
|
let testingInstructionsArray = [] |
|
|
|
if (options.testingInstructions) { |
|
|
|
const instructionsStr = decodeURIComponent(options.testingInstructions) |
|
|
|
if (instructionsStr && instructionsStr.trim()) { |
|
|
|
// 按逗号分割成数组,并过滤空值 |
|
|
|
testingInstructionsArray = instructionsStr.split(',').filter(item => item.trim() !== '') |
|
|
|
if (options.data) { |
|
|
|
this.item = JSON.parse(decodeURIComponent(options.data)) |
|
|
|
// 获取当前登录用户id |
|
|
|
const myUserId = uni.getStorageSync('userInfo')?.id |
|
|
|
const orderUserId = this.item.userId |
|
|
|
this.isSelf = myUserId && orderUserId && String(myUserId) === String(orderUserId) |
|
|
|
// 处理图片数组 |
|
|
|
if (this.item.testingImages) { |
|
|
|
console.log(this.item.testingImages, 'this.item.testingImages') |
|
|
|
this.imagesArr = String(this.item.testingImages).split(',').filter(i => i) |
|
|
|
} else { |
|
|
|
this.imagesArr = [] |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
if (options.testingTime) { |
|
|
|
this.testingTime = decodeURIComponent(options.testingTime) |
|
|
|
} |
|
|
|
if (options.testingImages) { |
|
|
|
// 逗号分割为数组 |
|
|
|
this.testingImages = decodeURIComponent(options.testingImages).split(',').filter(item => item.trim() !== '') |
|
|
|
} |
|
|
|
|
|
|
|
// 可根据 status 动态设置 problemList/qualifiedImages |
|
|
|
if (this.status === 'problem') { |
|
|
|
// 根据 testingInstructions 数组创建对应的问题列表 |
|
|
|
if (testingInstructionsArray.length > 0) { |
|
|
|
this.problemList = testingInstructionsArray.map((instruction, index) => ({ |
|
|
|
title: instruction || '质量问题', |
|
|
|
images: this.testingImages // 所有问题共享图片,如果需要分别对应可以进一步处理 |
|
|
|
})) |
|
|
|
// 处理问题描述数组 |
|
|
|
if (this.item.problemDesc) { |
|
|
|
this.problemDescArr = String(this.item.problemDesc).split(',').filter(i => i) |
|
|
|
} else { |
|
|
|
// 如果没有具体说明,创建默认的问题项 |
|
|
|
this.problemList = [ |
|
|
|
{ |
|
|
|
title: '质量问题', |
|
|
|
images: this.testingImages |
|
|
|
} |
|
|
|
] |
|
|
|
this.problemDescArr = [] |
|
|
|
} |
|
|
|
} else if (this.status === 'qualified') { |
|
|
|
this.qualifiedImages = this.testingImages |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
@ -404,4 +363,30 @@ export default { |
|
|
|
margin-top: 8rpx; |
|
|
|
line-height: 1.7; |
|
|
|
} |
|
|
|
.img-lock-wrap { |
|
|
|
position: relative; |
|
|
|
display: inline-block; |
|
|
|
} |
|
|
|
.img-lock-mask { |
|
|
|
position: absolute; |
|
|
|
left: 0; top: 0; right: 0; bottom: 0; |
|
|
|
background: rgba(0,0,0,0.45); |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
border-radius: 12rpx; |
|
|
|
z-index: 2; |
|
|
|
} |
|
|
|
.lock-icon { |
|
|
|
width: 48rpx; |
|
|
|
height: 48rpx; |
|
|
|
margin-bottom: 8rpx; |
|
|
|
} |
|
|
|
.lock-tip { |
|
|
|
color: #fff; |
|
|
|
font-size: 20rpx; |
|
|
|
text-align: center; |
|
|
|
padding: 0 8rpx; |
|
|
|
} |
|
|
|
</style> |