xk-client-wx/subPackages/my/my-drug/drug-info.vue

<template>
	<view class="container safe-area-inset-bottom">
		<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>

			<!-- <view class="list" v-if="chinese">
				<view class="it_" v-for="(item,index) in chinese.list" :key="item.id">
					<view class="it_name">{{item.name}}</view>
					<view class="it_price">
						<text>￥{{item.price}}</text>
						<view class="it_num">
							x{{item.number}}
						</view>
					</view>
				</view>
			</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 class="it_price">
						<text>￥{{item.price}}</text>
						<view class="it_num">
							x{{item.number}}
						</view>
					</view> -->
				</view>
			</view>


			<view class="list_west" v-if="orderInfo.ProductOrder.prescription_type==2">
				<view class="list" v-for="(item,index) in orderInfo.ProductOrderItems" :key="item.id">
					<view class="img">
						<image :src="item.drug_image || '/static/empty/gwc.png'" mode=""></image>
					</view>
					<view class="it">
						<view class="it_name">{{item.drug_name}}{{item.drug.function}}</view>
						<view class="it_info">
							{{item.drug.usage}}
						</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_">
					<!-- 共{{orderInfo.ProductOrder.count}}件 -->
					<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="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'
	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
				list: [{
					text: '快递到家'
				}, {
					text: '到店自取'
				}],
				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: '',
			}
		},
		onLoad(e) {
			this.p_id = e.id
			this.orderType = e.order_type
		},
		methods: {
			// 不需要代煎-代煎费
			cancel() {
				this.openshow = false;
				this.is_decoct = 0
				this.getUpuseWay()
			},
			// 需要代煎
			confirm() {
				this.is_decoct = 1
				this.getUpuseWay()
			},
			// 更新代煎服务
			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()
						// console.log(res, '确定代煎');
					}
				})
			},
			toShowed() {
				this.toshowed = true
			},
			chooseway(index) {
				// this.wayText = this.list[index].text
				this.delivery_method = index

				if (index == 1) {
					this.isshowed = true
					this.isshow = false
					this.toUpdata()
				} else {
					this.isshowed = false
					this.isshow = true
					this.toChoose()
				}
				// console.log(`点击了第${index + 1}项，内容为：${this.list[index].text}`)
			},
			// 更新配送方式
			toUpdata() {
				if (!this.order_id) return
				getDelivery({
					method: "post",
					data: {
						address_id: uni.getStorageSync('address_id'),
						delivery_method: this.delivery_method,
						order_id: this.order_id,
						store_id: uni.getStorageSync('store_id') || '11001'
					}
				}).then((res) => {
					if (res.data.errcode == 0) {
						this.getInfo()
						// console.log(res, '确定代煎');
					}
				})
			},
			// 门店信息
			getStoreInfo() {
				storeInfo({
					method: "post",
					data: {
						store_id: uni.getStorageSync('store_id') || '11001',
					}
				}).then((res) => {
					// console.log(res, 'info');
					if (res.data.errcode == 0) {
						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) => {
					// console.log(res, 'info');
					if (res.data.errcode == 0) {
						console.log(res.data, 'res.data')
						this.orderInfo = res.data.data
						// this.chinese = res.data.data.chinese
						// this.west = res.data.data.west
						// this.granular = res.data.data.granular
						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)
						// this.order_no = res.data.data.ProductOrder.order_no
						// console.log(this.west.content);

            if (res.data.data.ProductOrder.delivery_method == 1) {
              this.isshowed = true
              this.isshow = false
            } else {
              this.isshowed = false
              this.isshow = true
            }
					}
				})
			},
			// 代煎费
			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) { //注销定时器
							// console.log('注销定时器')
							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}元。 您是否需要？`
						// console.log(this.payWay, 'way');

						// setTimeout(() => {
						// 	this.openshow = true;
						// }, 500)
					} else {
						if (this.timer) { //注销定时器
							// console.log('注销定时器')
							clearTimeout(this.timer);
							this.timer = null;
						}
					}
				})
			},
			// 地址列表
			getList() {
				getaddressList({
					method: "post",
					data: {
						store_id: uni.getStorageSync('store_id') || '11001',
					}
				}).then((res) => {
					// console.log(res, 'list');
					if (res.data.errcode == 0) {
						this.actionList = res.data.data
					}
				})

				this.toUpdata()
			},
			// 地址
			toChoose() {
        // if (this.orderType === 2) {
        //   return;
        // }
				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
				}
				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 = 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();
							this.$refs.uToast.show({
								title: res.data.msg,
								type: 'default',
								icon: false
							})
						}

					})

				}
			}
		},
		mounted() {
			this.getStoreInfo()
			const order_id = uni.getStorageSync('userWay_order_id')
			// if (order_id) {
			// 	this.getServe()
			// } else {
			// 	this.timer = setInterval(() => {
			// 		this.getServe()
			// 	}, 500)
			// }
			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;

		.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;
						}

						.it_info {
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
							text-overflow: ellipsis;
							overflow: hidden;
							margin-bottom: 20rpx;
						}

						.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>