xk-client-wx/subPackages/my/record-pay.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>{{wayText}}</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_name">{{item.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>

			<!-- granular -->
			<view class="list" v-if="granular">
				<view class="it" v-for="(item,index) in granular.list" :key="item.id">
					<view class="it_name">{{item.name}}
						<text class="it_num" style="margin-left: 8rpx;">x{{item.number}}</text>
					</view>
					<!-- <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>


			<view class="list_west" v-if="west">
				<view class="list" v-for="(item,index) in west" :key="item.id">
					<view class="img">
						<image :src="item.content.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">{{item.content.drug_name}}{{item.content.specification}}</view>
						<view class="it_info">
							{{item.content.usage}}
						</view>
						<view
							class="instruction-btn"
							v-if="prescriptionStatus && item.content && item.content.instruction"
							@click="previewInstruction(item.content.instruction)"
						>
							<text>查看说明书</text>
						</view>
						<view class="it_price">
							<text>￥{{item.total_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>共{{orderInfo.ProductOrder.count}}件</text> -->
					<text>总金额</text>
					<view class="total">
						合计:
						<text class="price">￥{{orderInfo.ProductOrder.total_pay_price}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 须知 -->
		<u-popup v-model="show" :safe-area-inset-bottom="true" mode="bottom" height="68%" border-radius="20"
			:closeable="true">
			<view class="agreen">
				<u-parse :html="contented"></u-parse>
			</view>
		</u-popup>

		<!-- 代煎服务提醒 -->
		<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,
		getProductInfo,
		getUpdateUseWay,
		getUseWayPay,
		service,
		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,
				order_no: '',
				form: {
					check: false
				},
				contented: `知情同意书`,
				orderInfo: {
					ProductOrder: {}
				}, // 订单
				chinese: [],
				west: [],
				granular: [],
				actionList: [],
				order_id: "", // 订单id
				order_no: "", // 订单编号
				p_id: "", // 处方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,
				// 新增：物流提示信息
				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: false,
			}
		},
		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;
				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, '确定代煎');
					}
				})
			},
			toShow() {
				this.show = true
			},
			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()
				}
				// console.log(`点击了第${index + 1}项，内容为：${this.list[index].text}`)
			},
			// 更新配送方式
			toUpdata(deliveryMethodIndex) {
				// 如果传入了参数，使用传入的值，否则使用当前的 delivery_method
				const targetDeliveryMethod = deliveryMethodIndex !== undefined ? deliveryMethodIndex : this.delivery_method

        if (this.order_id == '') {
          return ;
        }
				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.wayText = this.list[deliveryMethodIndex].text
							this.delivery_method = deliveryMethodIndex
							if (deliveryMethodIndex == 1) {
								this.isshowed = true
								this.isshow = false
							} else {
								this.isshowed = false
								this.isshow = true
							}
						}
						// 刷新订单信息
						this.getInfo()
						// console.log(res, '确定代煎');
					} 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) => {
					// console.log(res, 'info');
					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'),
					prescription_id: this.p_id
				}
				getProductInfo({
					method: "post",
					data: list
				}).then((res) => {
					// console.log(res, 'info');
					if (res.data.errcode == 0) {
						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)
						// 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
						} 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 (this.list[deliveryMethod]) {
								this.wayText = this.list[deliveryMethod].text
							}
							if (deliveryMethod == 1) {
								this.isshowed = true
								this.isshow = false
							} else {
								this.isshowed = false
								this.isshow = true
							}
						}
						this.getPrescriptionStatus()
					}
				})
			},
			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
					})
				}
			},
			// 代煎费
			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) {
						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)
					}
				})
			},
			// 地址列表
			getList() {
				getaddressList({
					method: "post",
					data: {
						store_id: uni.getStorageSync('store_id'),
					}
				}).then((res) => {
					// console.log(res, 'list');
					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
				})
			},

			getKnow() {
				service({
					method: "get",
					data: {
						store_id: uni.getStorageSync('store_id'),
						type:4
					}
				}).then((res) => {
					// console.log(res, 'info');
					if (res.data.errcode == 0) {
						this.contented = res.data.data.content
					}
				})
			},

			// 支付
			toPay() {
				// 先显示物流提示模态框
				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 = 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.getKnow()
			// 不在mounted中调用getStoreInfo，等getInfo返回后再决定是否调用
			const order_id = uni.getStorageSync('userWay_order_id')
			// if (order_id) {
			// 	this.getServe()
			// } else {
			// 	setTimeout(() => {
			// 		this.getServe()
			// 	}, 800)
			// }
		},
		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;
						}

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