1108 lines
30 KiB
Vue
1108 lines
30 KiB
Vue
<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"
|
||
v-if="orderInfo.ProductOrder.status==0&&orderInfo.ProductOrder.is_pay==0 && orderInfo.ProductOrder.cancel_status==0">
|
||
<text>配送方式</text>
|
||
<view class="_fs" @click="toShowed">
|
||
<text>{{orderInfo.ProductOrder.delivery_method==0&&'快递到家'||orderInfo.ProductOrder.delivery_method==1&&'到店自取'}}</text>
|
||
<text class="iconfont icon-jiantou1"></text>
|
||
<u-action-sheet :list="list" v-model="toshowed" :tips="tips" border-radius="24"
|
||
:safe-area-inset-bottom="true" @click="chooseway"></u-action-sheet>
|
||
</view>
|
||
</view>
|
||
<!-- 收货地址 已添加地址 -->
|
||
<view class="head" v-if="isshow&&orderInfo.ProductOrder.status==0" @click="toChoose">
|
||
<view class="state">
|
||
<text>收货地址</text>
|
||
<view class="qh">
|
||
<view class="iconfont icon-jiantou1"></view>
|
||
</view>
|
||
</view>
|
||
<view class="name" @click="toChoose" v-if="!orderInfo.ProductOrder.address">
|
||
请先选择收货地址
|
||
</view>
|
||
<view class="name" @click="toChoose" v-if="orderInfo.ProductOrder.address">
|
||
{{JSON.parse(orderInfo.ProductOrder.address).name || '请先选择收货地址'}}
|
||
{{JSON.parse(orderInfo.ProductOrder.address).mobile || ''}}
|
||
</view>
|
||
<view class="choose_area" v-if="orderInfo.ProductOrder.address">
|
||
{{JSON.parse(orderInfo.ProductOrder.address).region || ''}}{{JSON.parse(orderInfo.ProductOrder.address).detail_address || ''}}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 到店自取 -->
|
||
<view class="head" v-if="isshowed">
|
||
<view class="state">
|
||
<text>到店自取</text>
|
||
</view>
|
||
<view class="name">
|
||
{{infoList.store.name}}
|
||
{{infoList.store.mobile}}
|
||
</view>
|
||
<view class="choose_area">
|
||
{{infoList.store.position}}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商品列表 -->
|
||
<view class="card">
|
||
<!-- 门店 -->
|
||
<view class="store"><text class="iconfont icon-mendian"></text>{{infoList.store.name}}</view>
|
||
|
||
<!-- granular -->
|
||
<view class="list"
|
||
v-if="orderInfo.ProductOrder.prescription_type==1||orderInfo.ProductOrder.prescription_type==3">
|
||
<view class="it_" v-for="(item,index) in orderInfo.ProductOrderItems" :key="item.id">
|
||
<view class="it_name">{{item.drug_name}}
|
||
<text class="it_num" style="margin-left: 8rpx;">x{{item.number}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="list_west" v-if="orderInfo.ProductOrder.prescription_type==2||orderInfo.ProductOrder.prescription_type==5||orderInfo.ProductOrder.prescription_type==7">
|
||
<view class="list" v-for="(item,index) in orderInfo.ProductOrderItems" :key="item.id">
|
||
<view class="img">
|
||
<image :src="item.drug_image || 'https://xiaokang88.oss-cn-hangzhou.aliyuncs.com/xk-client-wx/static/empty/gwc.png'" mode=""></image>
|
||
</view>
|
||
<view class="it">
|
||
<view class="it_name">
|
||
<text>{{ item.drug_name }}</text>
|
||
<text
|
||
v-if="item.drug && item.drug.specification"
|
||
class="drug-spec">{{ item.drug.specification }}</text>
|
||
<text v-if="item.drug && item.drug.function">{{ item.drug.function }}</text>
|
||
</view>
|
||
<view class="it_info" v-if="orderInfo.ProductOrder.prescription_type==2 && item.drug">
|
||
{{ 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">
|
||
x{{item.number}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 数量 -->
|
||
<view class="goods">
|
||
<view class="good_">
|
||
<text>商品总价（包含服务费）</text>
|
||
<text class="price">￥{{orderInfo.ProductOrder.items_price}}</text>
|
||
</view>
|
||
<view class="good_">
|
||
<text>快递费</text>
|
||
<text class="price">￥{{orderInfo.ProductOrder.trans_expenses}}</text>
|
||
</view>
|
||
<view class="good_">
|
||
<text>诊疗费</text>
|
||
<text class="price">￥{{orderInfo.ProductOrder.treatement_price}}</text>
|
||
</view>
|
||
<view class="good_">
|
||
<text>加工费</text>
|
||
<view class="price"><text
|
||
v-if="payWay">共{{payWay.dosage}}剂</text>￥{{orderInfo.ProductOrder.process_price}}</view>
|
||
</view>
|
||
<view class="good_">
|
||
<text>总金额</text>
|
||
<view class="total">
|
||
合计:
|
||
<text class="price">￥{{orderInfo.ProductOrder.total_pay_price}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="good_" v-if="orderInfo.ProductOrder&&orderInfo.ProductOrder.pay_time!='0'">
|
||
<text>支付时间</text>
|
||
<view class="price">
|
||
<text class="price">{{orderInfo.ProductOrder.pay_time | formatDate}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 代煎服务提醒 -->
|
||
<view class="umode">
|
||
<u-modal v-model="openshow" title="服务提示" :content="content" @confirm="confirm" @cancel="cancel"
|
||
:content-style="{color:'#666666',fontSize: '28rpx'}"
|
||
:title-style="{color:'#111000',fontWeight: '540',fontSize: '33rpx'}" :show-title="true"
|
||
:show-cancel-button="true" confirm-text="我需要" cancel-text="不需要" cancel-color="#F44336"
|
||
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"
|
||
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>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getaddressList,
|
||
getDelivery,
|
||
getPayConfig,
|
||
getOrdDetail,
|
||
getUpdateUseWay,
|
||
getUseWayPay,
|
||
storeInfo,
|
||
} from '../../../request/api/api'
|
||
|
||
// 导入 getOrderTextApi 接口方法
|
||
import { getOrderTextApi } from '../../../request/api/product'
|
||
// 导入订单相关接口
|
||
import { getPrescriptionStatusApi } from '../../../request/api/order'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
isshow: true,
|
||
isshowed: false,
|
||
show: false,
|
||
form: {
|
||
check: false
|
||
},
|
||
orderInfo: {
|
||
ProductOrder: {}
|
||
}, // 订单
|
||
chinese: [],
|
||
west: [],
|
||
granular: [],
|
||
actionList: [],
|
||
order_id: "", // 订单id
|
||
order_no: "", // 订单编号
|
||
p_id: "", // 处方id
|
||
orderType: 0, // 处方id
|
||
originalList: [{
|
||
text: '快递到家'
|
||
}, {
|
||
text: '到店自取'
|
||
}],
|
||
list: [{
|
||
text: '快递到家'
|
||
}, {
|
||
text: '到店自取'
|
||
}],
|
||
is_online: 0, // 是否在线复诊 0-否 非0-是
|
||
toshowed: false,
|
||
tips: {
|
||
text: '配送方式',
|
||
color: '#111111',
|
||
fontSize: 38
|
||
},
|
||
wayText: "快递到家",
|
||
delivery_method: 0, // 快递方式 0 快递 1 自提
|
||
content: '', // 弹窗内容
|
||
openshow: false, // 弹窗是否展示
|
||
is_decoct: 1, // 代煎服务 1确定代煎 0不代煎
|
||
infoList: [], // 门店信息
|
||
payWay: "",
|
||
flag: true,
|
||
timer: '',
|
||
// 新增：物流提示信息
|
||
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'
|
||
},
|
||
// 处方状态
|
||
prescriptionStatus: null,
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
this.p_id = e.id
|
||
this.orderType = e.order_type
|
||
// 获取订单提示文本
|
||
this.getOrderText();
|
||
},
|
||
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);
|
||
})
|
||
},
|
||
// 不需要代煎-代煎费
|
||
cancel() {
|
||
this.openshow = false;
|
||
this.is_decoct = 0
|
||
this.getUpuseWay()
|
||
},
|
||
// 需要代煎
|
||
confirm() {
|
||
this.is_decoct = 1
|
||
this.getUpuseWay()
|
||
},
|
||
// 物流提示确认 - 用户选择"我知道了"
|
||
handleOrderTextConfirm() {
|
||
this.showOrderTextModal = false;
|
||
// 用户点击"我知道了"后，继续执行支付
|
||
this.doPay();
|
||
},
|
||
// 物流提示取消 - 用户选择"取消支付"
|
||
handleOrderTextCancel() {
|
||
this.showOrderTextModal = false;
|
||
// 用户选择取消支付，显示提示信息
|
||
uni.showToast({
|
||
title: '您已取消支付',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
// 可选：跳转到其他页面或执行其他操作
|
||
// uni.navigateBack({
|
||
// delta: 1
|
||
// });
|
||
},
|
||
// 更新代煎服务
|
||
getUpuseWay() {
|
||
getUpdateUseWay({
|
||
method: "post",
|
||
data: {
|
||
is_decoct: this.is_decoct,
|
||
order_id: this.order_id,
|
||
store_id: uni.getStorageSync('store_id') || '11001'
|
||
}
|
||
}).then((res) => {
|
||
if (res.data.errcode == 0) {
|
||
this.getInfo()
|
||
}
|
||
})
|
||
},
|
||
toShowed() {
|
||
this.toshowed = true
|
||
},
|
||
chooseway(index) {
|
||
// 如果选择到店自取（index == 1），检查 is_online
|
||
if (index == 1 && this.is_online != 0) {
|
||
// 阻止选择并提示
|
||
this.$refs.uToast.show({
|
||
title: '在线复诊订单不支持到店自取，请选择收货地址',
|
||
type: 'default',
|
||
icon: false
|
||
})
|
||
return
|
||
}
|
||
|
||
// 先调用接口更新，成功后再更新页面状态
|
||
if (index == 1) {
|
||
// 到店自取：先调用接口，成功后再更新页面
|
||
this.toUpdata(index)
|
||
} else {
|
||
// 快递到家：跳转到地址选择页面
|
||
this.isshowed = false
|
||
this.isshow = true
|
||
this.toChoose()
|
||
}
|
||
},
|
||
// 更新配送方式
|
||
toUpdata(deliveryMethodIndex) {
|
||
if (!this.order_id) return
|
||
|
||
// 如果传入了参数，使用传入的值，否则使用当前的 delivery_method
|
||
const targetDeliveryMethod = deliveryMethodIndex !== undefined ? deliveryMethodIndex : this.delivery_method
|
||
|
||
getDelivery({
|
||
method: "post",
|
||
data: {
|
||
address_id: uni.getStorageSync('address_id'),
|
||
delivery_method: targetDeliveryMethod,
|
||
order_id: this.order_id,
|
||
store_id: uni.getStorageSync('store_id') || '11001'
|
||
}
|
||
}).then((res) => {
|
||
if (res.data.errcode === 0) {
|
||
// 接口成功后再更新页面状态
|
||
if (deliveryMethodIndex !== undefined) {
|
||
this.delivery_method = deliveryMethodIndex
|
||
if (deliveryMethodIndex == 1) {
|
||
this.isshowed = true
|
||
this.isshow = false
|
||
} else {
|
||
this.isshowed = false
|
||
this.isshow = true
|
||
}
|
||
}
|
||
// 刷新订单信息
|
||
this.getInfo()
|
||
} else {
|
||
// 错误处理：拒绝更新并显示错误信息，不更新页面状态
|
||
this.$refs.uToast.show({
|
||
title: res.data.msg || '更新失败',
|
||
type: 'default',
|
||
icon: false
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 门店信息（仅在需要时调用，不会覆盖处方来源诊所信息）
|
||
getStoreInfo() {
|
||
// 如果已经有处方来源诊所信息，不覆盖
|
||
if (this.infoList && this.infoList.store && this.infoList.store.id) {
|
||
return
|
||
}
|
||
storeInfo({
|
||
method: "post",
|
||
data: {
|
||
store_id: uni.getStorageSync('store_id') || '11001',
|
||
}
|
||
}).then((res) => {
|
||
if (res.data.errcode == 0) {
|
||
// 只有在没有处方来源诊所信息时才设置
|
||
if (!this.infoList || !this.infoList.store || !this.infoList.store.id) {
|
||
this.infoList = res.data.data
|
||
}
|
||
}
|
||
})
|
||
},
|
||
toForm() {
|
||
this.form['check'] = !this.form['check']
|
||
},
|
||
|
||
// 产品信息
|
||
getInfo() {
|
||
let list = {
|
||
store_id: uni.getStorageSync('store_id') || '11001',
|
||
order_id: this.p_id
|
||
}
|
||
getOrdDetail({
|
||
method: "post",
|
||
data: list
|
||
}).then((res) => {
|
||
if (res.data.errcode == 0) {
|
||
this.orderInfo = res.data.data
|
||
this.order_id = res.data.data.ProductOrder.id
|
||
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
|
||
} else if (res.data.data.is_online !== undefined) {
|
||
this.is_online = res.data.data.is_online
|
||
}
|
||
|
||
// 如果 is_online !== 0，则不显示到店自取选项
|
||
if (this.is_online != 0) {
|
||
this.list = [{
|
||
text: '快递到家'
|
||
}]
|
||
} else {
|
||
// 如果 is_online === 0，显示所有选项
|
||
this.list = [...this.originalList]
|
||
}
|
||
|
||
// 根据返回的订单数据更新页面状态（配送方式）
|
||
if (res.data.data.ProductOrder && res.data.data.ProductOrder.delivery_method !== undefined) {
|
||
const deliveryMethod = res.data.data.ProductOrder.delivery_method
|
||
this.delivery_method = deliveryMethod
|
||
if (deliveryMethod == 1) {
|
||
this.isshowed = true
|
||
this.isshow = false
|
||
} else {
|
||
this.isshowed = false
|
||
this.isshow = true
|
||
}
|
||
}
|
||
|
||
// 查询处方状态
|
||
this.getPrescriptionStatus()
|
||
}
|
||
})
|
||
},
|
||
// 代煎费
|
||
getServe() {
|
||
getUseWayPay({
|
||
method: "post",
|
||
data: {
|
||
order_id: uni.getStorageSync('userWay_order_id'),
|
||
store_id: uni.getStorageSync('store_id') || '11001'
|
||
}
|
||
}).then((res) => {
|
||
if (res.data.errcode == 0) {
|
||
if (this.timer) {
|
||
clearTimeout(this.timer);
|
||
this.timer = null;
|
||
}
|
||
this.payWay = res.data.data
|
||
this.content =
|
||
`平台可以为您提供有偿代煎服务（${this.payWay.decoct_price}元/剂）您的处方共${this.payWay.dosage}剂， 费用${this.payWay.total_decoct_price}元。 您是否需要？`
|
||
} else {
|
||
if (this.timer) {
|
||
clearTimeout(this.timer);
|
||
this.timer = null;
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 地址列表
|
||
getList() {
|
||
getaddressList({
|
||
method: "post",
|
||
data: {
|
||
store_id: uni.getStorageSync('store_id') || '11001',
|
||
}
|
||
}).then((res) => {
|
||
if (res.data.errcode == 0) {
|
||
this.actionList = res.data.data
|
||
}
|
||
})
|
||
|
||
this.toUpdata()
|
||
},
|
||
// 地址
|
||
toChoose() {
|
||
uni.navigateTo({
|
||
url: '/subPackages/setup/area-list?id=' + this.p_id + '&order_id=' + this.order_id
|
||
})
|
||
},
|
||
|
||
// 支付
|
||
toPay() {
|
||
if (this.form['check']) {
|
||
uni.showToast({
|
||
icon: "error",
|
||
title: '请勾选协议'
|
||
})
|
||
return
|
||
}
|
||
|
||
// 先显示物流提示模态框
|
||
this.showOrderTextModal = true;
|
||
},
|
||
|
||
// 实际支付逻辑
|
||
doPay() {
|
||
let that = this
|
||
if (this.flag) {
|
||
this.flag = false
|
||
getPayConfig({
|
||
method: "post",
|
||
data: {
|
||
order_id: this.order_id,
|
||
store_id: uni.getStorageSync('store_id') || '11001',
|
||
}
|
||
}).then((res) => {
|
||
console.log(res.data.data.timeStamp, 'pay');
|
||
uni.showLoading({
|
||
title: "加载中"
|
||
});
|
||
|
||
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;
|
||
}
|
||
|
||
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 = true
|
||
console.log('fail:' + JSON.stringify(err));
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: err.errMsg && err.errMsg.indexOf('cancel') !== -1 ? '支付已取消' : '支付失败',
|
||
duration: 1500,
|
||
mask: false,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
uni.hideLoading();
|
||
that.flag = true
|
||
this.$refs.uToast.show({
|
||
title: res.data.msg,
|
||
type: 'default',
|
||
icon: false
|
||
})
|
||
}
|
||
|
||
}).catch((err) => {
|
||
console.error('getPayConfig error:', err);
|
||
uni.hideLoading();
|
||
that.flag = true
|
||
uni.showToast({
|
||
title: '获取支付配置失败',
|
||
icon: 'none',
|
||
duration: 1500
|
||
})
|
||
})
|
||
|
||
}
|
||
},
|
||
// 查询处方状态
|
||
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 || {};
|
||
const ps = data.prescription_status ?? data.status;
|
||
this.prescriptionStatus = data.status === true || ps === 1 || ps === '1' || ps === 3 || ps === '3' || ps === 4 || ps === '4';
|
||
} else {
|
||
this.prescriptionStatus = false;
|
||
}
|
||
}).catch(() => {
|
||
this.prescriptionStatus = false;
|
||
});
|
||
},
|
||
// 预览说明书
|
||
previewInstruction(instructionImage) {
|
||
if (instructionImage) {
|
||
uni.previewImage({
|
||
urls: [instructionImage],
|
||
current: instructionImage
|
||
});
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
// 不在mounted中调用getStoreInfo，等getInfo返回后再决定是否调用
|
||
const order_id = uni.getStorageSync('userWay_order_id')
|
||
const delivery_method = uni.getStorageSync('delivery_method')
|
||
if (delivery_method == 1) {
|
||
this.isshowed = true
|
||
this.isshow = false
|
||
} else {
|
||
this.isshowed = false
|
||
this.isshow = true
|
||
}
|
||
},
|
||
onShow() {
|
||
this.getInfo()
|
||
this.getList()
|
||
},
|
||
onUnload() {
|
||
uni.removeStorageSync('userWay_order_id')
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
width: 750rpx;
|
||
max-height: 100%;
|
||
min-height: 100vh;
|
||
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;
|
||
// letter-spacing: 2rpx;
|
||
|
||
.top {
|
||
margin: 0 0 20rpx 0;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: #222;
|
||
}
|
||
}
|
||
|
||
.umode {
|
||
font-size: 36rpx;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
font-weight: bold;
|
||
color: #232323;
|
||
text-align: center;
|
||
|
||
text {
|
||
font-size: 24rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
.p_state {
|
||
width: 750rpx;
|
||
height: 160rpx;
|
||
background: #536DFE;
|
||
margin: 20rpx auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 40rpx;
|
||
|
||
.state {
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
text {
|
||
font-size: 36rpx;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.notice {
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
margin-top: 12rpx;
|
||
}
|
||
}
|
||
|
||
.iconfont {
|
||
font-size: 52rpx;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
._choose {
|
||
width: 750rpx;
|
||
height: 88rpx;
|
||
margin: 0rpx auto;
|
||
background: #fff;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 40rpx;
|
||
|
||
._fs {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.iconfont {
|
||
font-size: 32rpx;
|
||
margin-left: 16rpx;
|
||
color: #222333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.head {
|
||
width: 750rpx;
|
||
height: 168rpx;
|
||
margin: 20rpx auto;
|
||
background: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: 0 40rpx;
|
||
|
||
.state {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
font-weight: bold;
|
||
color: #232323;
|
||
line-height: 0rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
text {
|
||
display: inline-block;
|
||
width: 116rpx;
|
||
height: 38rpx;
|
||
line-height: 38rpx;
|
||
text-align: center;
|
||
background: #536DFE;
|
||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||
font-size: 20rpx;
|
||
color: #FFFFFF;
|
||
margin-right: 14rpx;
|
||
}
|
||
|
||
.qh {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.iconfont {
|
||
font-size: 28rpx;
|
||
margin-left: 16rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.name {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
font-weight: bold;
|
||
color: #232323;
|
||
margin: 10rpx 0;
|
||
}
|
||
|
||
.choose_area {
|
||
font-size: 24rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #232323;
|
||
}
|
||
}
|
||
|
||
.card {
|
||
width: 750rpx;
|
||
margin: 0 auto;
|
||
padding: 20rpx 12rpx 0rpx 20rpx;
|
||
background: #FFFFFF;
|
||
|
||
.store {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 500;
|
||
color: #232323;
|
||
margin-left: 20rpx;
|
||
padding: 10rpx 0;
|
||
|
||
.iconfont {
|
||
font-size: 39rpx;
|
||
color: #666666;
|
||
vertical-align: middle;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
}
|
||
|
||
.list_west {
|
||
|
||
.list {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
width: 100%;
|
||
padding: 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.img {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
margin-right: 10rpx;
|
||
|
||
image {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
}
|
||
|
||
.it {
|
||
flex: 1;
|
||
padding: 16rpx 10rpx;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
margin: 10rpx;
|
||
|
||
.it_name {
|
||
font-weight: bold;
|
||
color: #232323;
|
||
margin-bottom: 10rpx;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 1;
|
||
-webkit-box-orient: vertical;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
margin-bottom: 20rpx;
|
||
|
||
.drug-spec {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-left: 10rpx;
|
||
font-weight: normal;
|
||
}
|
||
}
|
||
|
||
.it_info {
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 1;
|
||
-webkit-box-orient: vertical;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
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;
|
||
justify-content: space-between;
|
||
|
||
text {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #232323;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.list {
|
||
width: 100%;
|
||
padding: 12rpx 12rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
|
||
.it_ {
|
||
width: 30%;
|
||
padding: 16rpx 10rpx;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
margin: 0 10rpx 10rpx 0;
|
||
|
||
.it_name {
|
||
font-weight: bold;
|
||
color: #232323;
|
||
margin-bottom: 10rpx;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 1;
|
||
-webkit-box-orient: vertical;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
padding-left: 5rpx;
|
||
}
|
||
|
||
.it_price {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
text {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
.it_num {
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
|
||
.goods {
|
||
margin-top: 20rpx;
|
||
padding: 0 30rpx 10rpx;
|
||
margin-bottom: 140rpx;
|
||
|
||
.good_ {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 88rpx;
|
||
|
||
text {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
font-weight: bold;
|
||
color: #232323;
|
||
}
|
||
|
||
.total {
|
||
font-size: 26rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
|
||
.price {
|
||
font-size: 34rpx;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.price {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.infos {
|
||
width: 750rpx;
|
||
margin: 20rpx auto 160rpx;
|
||
padding: 20rpx 32rpx;
|
||
background: #FFFFFF;
|
||
|
||
|
||
.title {
|
||
height: 44rpx;
|
||
font-size: 32rpx;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
font-weight: bold;
|
||
color: #232323;
|
||
line-height: 44rpx;
|
||
}
|
||
|
||
._info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin: 18rpx 0;
|
||
|
||
text {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
|
||
.info {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #232323;
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
width: 750rpx;
|
||
height: 114rpx;
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: env(safe-area-inset-bottom);
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0rpx 24rpx;
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
|
||
.to_pay {
|
||
width: 690rpx;
|
||
height: 84rpx;
|
||
line-height: 84rpx;
|
||
background: #536DFE;
|
||
border-radius: 64rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
}
|
||
</style> |