订单和预约购药页面优化

This commit is contained in:
李琦
2026-02-07 23:22:28 +08:00
parent 4f9ba9cf44
commit ce5fc2355b
2 changed files with 221 additions and 150 deletions

View File

@@ -96,7 +96,7 @@
<!-- 数量 -->
<view class="goods">
<view class="good_">
<text>商品总价</text>
<text>商品总价包含服务费</text>
<text class="price">{{orderInfo.ProductOrder.items_price}}</text>
</view>
<view class="good_">
@@ -383,8 +383,12 @@ export default {
}
})
},
// 门店信息
// 门店信息(仅在需要时调用,不会覆盖处方来源诊所信息)
getStoreInfo() {
// 如果已经有处方来源诊所信息,不覆盖
if (this.infoList && this.infoList.store && this.infoList.store.id) {
return
}
storeInfo({
method: "post",
data: {
@@ -392,7 +396,10 @@ export default {
}
}).then((res) => {
if (res.data.errcode == 0) {
this.infoList = res.data.data
// 只有在没有处方来源诊所信息时才设置
if (!this.infoList || !this.infoList.store || !this.infoList.store.id) {
this.infoList = res.data.data
}
}
})
},
@@ -416,6 +423,18 @@ export default {
uni.setStorageSync('userWay_order_id', res.data.data.ProductOrder.id)
uni.setStorageSync('delivery_method', res.data.data.ProductOrder.delivery_method)
// 使用API返回的处方来源诊所信息优先使用处方来源诊所
if (res.data.data.store && res.data.data.store.store) {
this.infoList = {
store: res.data.data.store.store
}
} else {
// 如果没有处方来源诊所信息,使用当前诊所信息作为后备
if (!this.infoList || !this.infoList.store) {
this.getStoreInfo()
}
}
// 检查 is_online 字段,动态控制 list 数组
if (res.data.data.ProductOrder && res.data.data.ProductOrder.is_online !== undefined) {
this.is_online = res.data.data.ProductOrder.is_online
@@ -625,7 +644,7 @@ export default {
}
},
mounted() {
this.getStoreInfo()
// 不在mounted中调用getStoreInfo等getInfo返回后再决定是否调用
const order_id = uni.getStorageSync('userWay_order_id')
const delivery_method = uni.getStorageSync('delivery_method')
if (delivery_method == 1) {

View File

@@ -1,8 +1,16 @@
<template>
<view class="container safe-area-inset-bottom">
<MessageNotification />
<!-- 物流提示信息 -->
<view class="order-text-tip" v-if="orderText">
<text>{{ orderText }}</text>
</view>
<view class="head_cancle" v-if="orderInfo.ProductOrder.status!=0 && orderInfo.ProductOrder.cancel_status==1">
订单已取消
</view>
<!-- 快递自提 -->
<view class="_choose">
<view class="_choose" v-if="orderInfo.ProductOrder.status==0&&orderInfo.ProductOrder.is_pay==0 && orderInfo.ProductOrder.cancel_status==0">
<text>配送方式</text>
<view class="_fs" @click="toShowed">
<text>{{wayText}}</text>
@@ -12,7 +20,7 @@
</view>
</view>
<!-- 收货地址 已添加地址 -->
<view class="head" v-if="isshow" @click="toChoose">
<view class="head" v-if="isshow&&orderInfo.ProductOrder.status==0" @click="toChoose">
<view class="state">
<text>收货地址</text>
<view class="qh">
@@ -48,7 +56,7 @@
<!-- 商品列表 -->
<view class="card">
<!-- 门店 -->
<view class="store"><text class="iconfont icon-mendian"></text>萧康诊所门店</view>
<view class="store"><text class="iconfont icon-mendian"></text>{{infoList.store.name}}</view>
<view class="list" v-if="chinese">
<view class="it" v-for="(item,index) in chinese.list" :key="item.id">
@@ -105,7 +113,7 @@
<!-- 数量 -->
<view class="goods">
<view class="good_">
<text>商品总价</text>
<text>商品总价包含服务费</text>
<text class="price">{{orderInfo.ProductOrder.items_price}}</text>
</view>
<view class="good_">
@@ -142,7 +150,7 @@
</view>
</u-popup>
<!-- 提醒 -->
<!-- 代煎服务提醒 -->
<view class="umode">
<u-modal v-model="openshow" title="服务提示" :content="content" @confirm="confirm" @cancel="cancel"
:content-style="{color:'#666666',fontSize: '28rpx'}"
@@ -151,19 +159,27 @@
confirm-color="#536DFE"></u-modal>
</view>
<!-- 物流提示模态框 -->
<view class="umode">
<u-modal
v-model="showOrderTextModal"
title="温馨提示"
:content="modalContent"
:confirm-text="modalConfirmText"
:cancel-text="modalCancelText"
:show-cancel-button="showCancelButton"
:confirm-color="modalConfirmColor"
:cancel-color="modalCancelColor"
@confirm="handleOrderTextConfirm"
@cancel="handleOrderTextCancel"
:content-style="modalContentStyle"
:title-style="modalTitleStyle"
></u-modal>
</view>
<!-- 底部 -->
<view class="footer">
<!-- 须知 -->
<view class="check">
<u-icon size="35" :color="form['check']?'#E5E5E5':'#536DFE'" name="checkmark-circle-fill"
@click="toForm"></u-icon>
<view class="agreement">
提交订单即代表您已同意
<text @click="toShow">知情同意书</text>
</view>
</view>
<button v-if="flag === true" class="to_pay" @click="toPay">立即支付</button>
<button v-else class="to_pay_disabled" :disabled="true">立即支付</button>
<view class="footer" v-if="orderInfo.ProductOrder.status==0 && orderInfo.ProductOrder.is_pay==0 && orderInfo.ProductOrder.cancel_status==0">
<button class="to_pay" @click="toPay">立即支付</button>
</view>
<u-toast ref="uToast" />
</view>
@@ -180,6 +196,8 @@
service,
storeInfo,
} from '../../request/api/api'
// 导入 getOrderTextApi 接口方法
import { getOrderTextApi } from '../../request/api/product'
export default {
data() {
@@ -226,16 +244,68 @@
is_decoct: 1, // 代煎服务 1确定代煎 0不代煎
infoList: [], // 门店信息
payWay: "",
flag: true
flag: true,
// 新增:物流提示信息
orderText: '本次商品物流配送,由萧康医药提供服务。',
// 新增:物流提示模态框控制
showOrderTextModal: false,
// 新增:模态框配置
modalContent: '',
modalConfirmText: '我知道了',
modalCancelText: '取消支付',
showCancelButton: true,
modalConfirmColor: '#536DFE',
modalCancelColor: '#F44336',
modalContentStyle: {
color: '#666666',
fontSize: '28rpx',
maxHeight: '300rpx',
overflow: 'auto'
},
modalTitleStyle: {
color: '#111000',
fontWeight: '540',
fontSize: '33rpx'
}
}
},
onLoad(e) {
this.p_id = e.id
// 获取订单提示文本
this.getOrderText();
},
created() {
},
methods: {
// 获取订单提示文本
getOrderText() {
getOrderTextApi().then((res) => {
if (res.data && res.data.result) {
this.orderText = res.data.result;
// 设置模态框内容
this.modalContent = `${res.data.result}\n\n请在确认以上信息后继续支付。`;
}
}).catch(err => {
console.error('获取订单提示失败:', err);
})
},
// 物流提示确认 - 用户选择"我知道了"
handleOrderTextConfirm() {
this.showOrderTextModal = false;
// 用户点击"我知道了"后,继续执行支付
this.doPay();
},
// 物流提示取消 - 用户选择"取消支付"
handleOrderTextCancel() {
this.showOrderTextModal = false;
// 用户选择取消支付,显示提示信息
uni.showToast({
title: '您已取消支付',
icon: 'none',
duration: 2000
});
},
// 不需要代煎-代煎费
cancel() {
this.openshow = false;
@@ -336,8 +406,12 @@
}
})
},
// 门店信息
// 门店信息(仅在需要时调用,不会覆盖处方来源诊所信息)
getStoreInfo() {
// 如果已经有处方来源诊所信息,不覆盖
if (this.infoList && this.infoList.store && this.infoList.store.id) {
return
}
storeInfo({
method: "post",
data: {
@@ -346,7 +420,10 @@
}).then((res) => {
// console.log(res, 'info');
if (res.data.errcode == 0) {
this.infoList = res.data.data
// 只有在没有处方来源诊所信息时才设置
if (!this.infoList || !this.infoList.store || !this.infoList.store.id) {
this.infoList = res.data.data
}
}
})
},
@@ -375,6 +452,18 @@
// this.order_no = res.data.data.ProductOrder.order_no
// console.log(this.west.content);
// 使用API返回的处方来源诊所信息优先使用处方来源诊所
if (res.data.data.store && res.data.data.store.store) {
this.infoList = {
store: res.data.data.store.store
}
} else {
// 如果没有处方来源诊所信息,使用当前诊所信息作为后备
if (!this.infoList || !this.infoList.store) {
this.getStoreInfo()
}
}
// 检查 is_online 字段,动态控制 list 数组
if (res.data.data.ProductOrder && res.data.data.ProductOrder.is_online !== undefined) {
this.is_online = res.data.data.ProductOrder.is_online
@@ -470,24 +559,21 @@
// 支付
toPay() {
if (this.form['check']) {
uni.showToast({
icon: "error",
title: '请勾选协议'
})
that.flag = false
return
}
// 先显示物流提示模态框
this.showOrderTextModal = true;
},
// 实际支付逻辑
doPay() {
let that = this
if (that.flag) {
that.flag = false
if (this.flag) {
this.flag = false
// 获取支付配置
getPayConfig({
method: "post",
data: {
order_id: that.order_id,
store_id: uni.getStorageSync('store_id'),
order_id: this.order_id,
store_id: uni.getStorageSync('store_id') || '11001',
}
}).then((res) => {
console.log(res.data.data.timeStamp, 'pay');
@@ -495,87 +581,67 @@
title: "加载中"
});
if (res.data.errcode === 0) {
if (res.data.errcode == 0) {
if (!res.data.data.appId) {
setTimeout(() => {
that.flag = false
uni.navigateTo({
url: '/subPackages/my/my-drug/drug-list'
})
uni.hideLoading();
}, 300)
return;
}
if (res.data.data.is_pay !== 1) {
uni.requestPayment({
provider: res.data.data.appId,
timeStamp: res.data.data.timestamp,
nonceStr: res.data.data.nonceStr,
package: res.data.data.package,
signType: res.data.data.signType,
paySign: res.data.data.paySign,
success: (res) => {
console.log('success:' + JSON.stringify(res));
setTimeout(() => {
that.flag = false
uni.navigateTo({
url: '/subPackages/my/my-drug/drug-list'
})
uni.hideLoading();
}, 300)
},
fail: function(err) {
that.flag = false
console.log('fail:' + JSON.stringify(err));
uni.showToast({
title: '支付失败',
duration: 1500,
mask: false,
icon: 'error'
})
setTimeout(() => {
if (res.data.msg) {
uni.showToast({
title: res.data.msg,
duration: 1500,
mask: false,
icon: 'error'
})
that.flag = false
return
}
uni.hideLoading();
that.flag = true
}, 500)
}
})
}
setTimeout(() => {
that.flag = false
uni.navigateTo({
url: '/subPackages/my/my-drug/drug-list'
})
uni.hideLoading();
}, 300)
}else{
uni.requestPayment({
provider: res.data.data.appId,
timeStamp: res.data.data.timestamp,
nonceStr: res.data.data.nonceStr,
package: res.data.data.package,
signType: res.data.data.signType,
paySign: res.data.data.paySign,
success: (res) => {
console.log('success:' + JSON.stringify(res));
setTimeout(() => {
that.flag = false
uni.navigateTo({
url: '/subPackages/my/my-drug/drug-list'
})
uni.hideLoading();
}, 300)
},
fail: function(err) {
that.flag = false
console.log('fail:' + JSON.stringify(err));
uni.hideLoading();
uni.showToast({
title: '支付失败',
duration: 1500,
mask: false,
icon: 'error'
})
setTimeout(() => {
if (res.data.msg) {
uni.showToast({
title: res.data.msg,
duration: 1500,
mask: false,
icon: 'error'
})
return
}
}, 1000)
}
})
} else {
uni.hideLoading();
that.$refs.uToast.show({
this.$refs.uToast.show({
title: res.data.msg,
type: 'default',
icon: false
})
that.flag = true
}
if (res.data.code == 1) {
uni.hideLoading();
// uni.showToast({
// title: res.data.msg,
// duration: 1500,
// mask: false,
// icon: 'error'
// })
that.$refs.uToast.show({
title: res.data.msg,
type: 'default',
icon: false
})
that.flag = true
}
})
}
@@ -583,7 +649,7 @@
},
mounted() {
this.getKnow()
this.getStoreInfo()
// 不在mounted中调用getStoreInfo等getInfo返回后再决定是否调用
const order_id = uni.getStorageSync('userWay_order_id')
// if (order_id) {
// this.getServe()
@@ -611,6 +677,25 @@
padding-bottom: env(safe-area-inset-bottom);
background: #F5F5F5;
/* 新增:物流提示样式 */
.order-text-tip {
background: #e6f3ff;
padding: 20rpx 30rpx;
margin: 20rpx 20rpx 0 20rpx;
border-radius: 8rpx;
font-size: 26rpx;
color: #1890ff;
line-height: 1.4;
border-left: 6rpx solid #1890ff;
}
.head_cancle {
padding: 20rpx 42rpx;
font-size: 32rpx;
font-weight: 500;
color: #222;
}
.agreen {
padding: 60rpx 50rpx 20rpx;
// color: #6C7380;
@@ -751,16 +836,10 @@
}
.choose_area {
font-size: 24rpx;
font-family: 'PingFang SC', sans-serif; /* 确保字体兼容性 */
font-weight: 400;
color: #232323;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 设置最大行数为2 */
overflow: hidden;
line-height: 1.5; /* 根据需要调整行高 */
word-break: break-all; /* 确保长单词或URL地址换行 */
font-size: 24rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #232323;
}
}
@@ -899,7 +978,7 @@
.goods {
margin-top: 20rpx;
padding: 0 30rpx 10rpx;
margin-bottom: 40rpx;
margin-bottom: 140rpx;
.good_ {
display: flex;
@@ -976,34 +1055,17 @@
.footer {
width: 750rpx;
height: 184rpx;
background: #fff;
height: 114rpx;
position: fixed;
left: 0;
bottom: env(safe-area-inset-bottom);
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
padding: 0rpx 24rpx;
font-size: 28rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
.check {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20rpx;
.agreement {
margin-left: 16rpx;
text {
color: #536DFE;
}
}
}
.to_pay {
width: 690rpx;
height: 84rpx;
@@ -1013,16 +1075,6 @@
color: #FFFFFF;
text-align: center;
}
.to_pay_disabled {
width: 690rpx;
height: 84rpx;
line-height: 84rpx;
background: #8a9bf8;
border-radius: 64rpx;
color: #FFFFFF;
text-align: center;
}
}
}