fix: 商品详情UI优化、提示增强

This commit is contained in:
2025-12-18 15:12:26 +08:00
parent 4ce856562f
commit cf0e974fa1
9 changed files with 503 additions and 9 deletions

View File

@@ -78,6 +78,10 @@
<view class="it_info">
{{item.drug.usage}}
</view>
<!-- 添加查看说明书按钮 -->
<view class="instruction-btn" v-if="prescriptionStatus && item.drug && item.drug.instruction" @click="previewInstruction(item.drug.instruction)">
<text>查看说明书</text>
</view>
<view class="it_price">
<text>¥{{item.price}}</text>
<view class="it_num">
@@ -172,6 +176,8 @@ import {
// 导入 getOrderTextApi 接口方法
import { getOrderTextApi } from '../../../request/api/product'
// 导入订单相关接口
import { getPrescriptionStatusApi } from '../../../request/api/order'
export default {
data() {
@@ -235,6 +241,8 @@ export default {
fontWeight: '540',
fontSize: '33rpx'
},
// 处方状态
prescriptionStatus: null,
}
},
onLoad(e) {
@@ -375,6 +383,9 @@ export default {
this.isshowed = false
this.isshow = true
}
// 查询处方状态
this.getPrescriptionStatus()
}
})
},
@@ -521,6 +532,34 @@ export default {
})
}
},
// 查询处方状态
getPrescriptionStatus() {
if (!this.order_id) {
return;
}
getPrescriptionStatusApi({
order_id: this.order_id
}).then((res) => {
if (res.data && (res.data.code == 0 || res.data.errcode == 0)) {
const data = res.data.data || res.data.result || {};
// 假设 status = 2 表示审核通过
this.prescriptionStatus = data.status === true || data.status === 2 || data.status == 2;
} else {
this.prescriptionStatus = false;
}
}).catch(() => {
this.prescriptionStatus = false;
});
},
// 预览说明书
previewInstruction(instructionImage) {
if (instructionImage) {
uni.previewImage({
urls: [instructionImage],
current: instructionImage
});
}
}
},
mounted() {
@@ -538,6 +577,8 @@ export default {
onShow() {
this.getInfo()
this.getList()
// 查询处方状态
this.getPrescriptionStatus()
},
onUnload() {
uni.removeStorageSync('userWay_order_id')
@@ -791,6 +832,26 @@ export default {
margin-bottom: 20rpx;
}
.instruction-btn {
margin-top: 16rpx;
margin-bottom: 16rpx;
padding: 12rpx 24rpx;
background: #ECF5FF;
border-radius: 8rpx;
display: inline-flex;
align-items: center;
justify-content: center;
text {
font-size: 26rpx;
color: #2B85E4;
}
&:active {
opacity: 0.7;
}
}
.it_price {
display: flex;
align-items: center;

View File

@@ -68,6 +68,7 @@
<view class="image-wrapper">
<image
class="item-image"
:class="{ 'prescription-blur': item.drug.is_otc === 0 || item.drug.is_otc === '0' }"
:src="item.drug.image || '/static/mine/avatar_1.png'"
mode="aspectFill"
lazy-load
@@ -494,6 +495,12 @@ export default {
height: 200rpx;
border-radius: 12rpx;
background-color: #f8f8f8;
// 处方药图片模糊处理
&.prescription-blur {
filter: blur(10px);
-webkit-filter: blur(10px);
}
}
}

View File

@@ -41,6 +41,12 @@
</view>
</view>
<!-- 合规提示 - 移动到商品名称上方 -->
<view class="compliance-tip-card" v-if="complianceTip">
<u-icon name="info-circle" color="#FF4D4F" size="32" style="margin-right: 12rpx;"></u-icon>
<text class="tip-text">{{ complianceTip }}</text>
</view>
<view class="title">{{ productDetail.drug_name }}</view>
<view class="sub-title" v-if="productDetail.drug_alias">{{ productDetail.drug_alias }}</view>
@@ -63,6 +69,7 @@
<text>{{ orderText }}</text>
</view>
<!-- 4. 功效与用法 (卡片式布局 + 优化标题) -->
<view class="info-card" v-if="productDetail.category_type !== 'health_food'">
<!-- 优化点:医疗风格标题 -->
@@ -75,7 +82,8 @@
</view>
</view>
<view class="info-card">
<!-- 保健食品不展示用法用量 -->
<view class="info-card" v-if="productDetail.type != 3">
<view class="section-title-modern">
<view class="indicator"></view>
<text>用法用量</text>
@@ -85,8 +93,8 @@
</view>
</view>
<!-- 说明书入口 -->
<view class="info-card">
<!-- 说明书入口 - 处方药不展示 -->
<view class="info-card" v-if="!(productDetail.is_otc == 0 && productDetail.type == 2)">
<view class="section-title-modern">
<view class="indicator"></view>
<text>说明书</text>
@@ -119,7 +127,6 @@
:src="img"
mode="widthFix"
lazy-load
@click="previewIntroductionImage(idx)"
/>
</view>
</view>
@@ -315,7 +322,8 @@ export default {
guozi_no: '',
bar_code: '',
indications: '',
indications_array: []
indications_array: [],
compliance_tip: '' // 合规提示文案,由后端返回
},
formData: {
id: '',
@@ -356,6 +364,10 @@ export default {
return parseFloat(this.productDetail.drug_store_drug.price);
}
return parseFloat(this.productDetail.price || 0);
},
// 合规提示文案 - 从后端返回的 compliance_tip 字段获取
complianceTip() {
return this.productDetail.compliance_tip || '';
}
},
onLoad(options) {
@@ -690,6 +702,23 @@ export default {
}
}
/* 合规提示卡片 - 与物流提示UI一致 */
.compliance-tip-card {
background: #FFF1F0;
padding: 24rpx 30rpx;
margin: 0 -30rpx 20rpx -30rpx;
display: flex;
align-items: center;
font-size: 26rpx;
color: #FF4D4F;
.tip-text {
font-weight: 600;
line-height: 1.6;
flex: 1;
}
}
/* 5. 详情图区域 */
.detail-images-wrapper {
background: #fff;
@@ -723,7 +752,10 @@ export default {
}
/* 6. 底部操作栏 */
.footer-placeholder { height: 120rpx; }
.footer-placeholder {
height: calc(110rpx + env(safe-area-inset-bottom));
min-height: 140rpx; /* 确保最小高度,避免在小屏设备上被遮挡 */
}
.footer-bar {
position: fixed;