yijianbao_user_uniapp/pages_user/integral/refundOrder.vue

<template>
	<view class="content">
		<view class="inner">
			<!-- 药品列表 -->
			<view class="drug-list">
				<view  class="item">
					<!-- 药品信息 -->
					<view class="drug-info" v-for="(item,index) in items" :key="index">
						<view class="img-box">
							<image :src="item.imgUrl" mode="aspectFit"></image>
						</view>
						<view class="info">
							<view class="top">
								<view class="title ellipsis2">{{item.goodsName||''}}</view>
								<!-- <view class="spec">{{JSON.parse(item.jsonInfo).sku}}</view> -->
							</view>
							<view class="num-box">
								<view class="price">
									<text class="num" >{{item.integral}}</text>
									<text class="unit">积分</text>
									<text class="num" v-if="item.cash>0">+{{item.cash}}</text>
									<text class="unit" v-if="item.cash>0">元</text>
								</view>
								<view class="amount">x{{item.num}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 申请类型 -->
			<view class="reason-apply">
				<view class="title-box">
					<text class="label">申请类型</text>
					<view class="radio-group">
						<label class="radio" @click="changeRefundType(0)">
							<radio :checked="refundType === 0" color="#2583EB" />仅退款
						</label>
						<label class="radio" @click="changeRefundType(1)">
							<radio :checked="refundType === 1" color="#2583EB" />退货退款
						</label>
					</view>
				</view>
				<view class="title-box">
					<text class="label">退款金额</text>
					 <input class="money" type="text" disabled v-model="refundAmount" placeholder="退款金额" placeholder-class="form-input" />
				</view>
				<view class="title-box">
					<text class="label">退回积分</text>
					 <input class="money" type="text" disabled v-model="refundIntegral" placeholder="退回积分" placeholder-class="form-input" />
				</view>
				<view class="title-box">
					<text class="label">申请原因</text>
					<picker @change="reasonsChange" :value="reasonIndex"  range-key="dictLabel" :range="filteredReasonsList">
						<view class="chose-box"  >
							<text class="text">{{reasons}}</text>
							<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/arrow_gray.png" mode=""></image>
						</view>
					</picker>
				</view>
				<!-- <view class="upload-box">
					<view class="upload-title">申请说明图片</view>
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="6"></u-upload>
				</view> -->
				<view class="textarea-box">
					<textarea v-model="explains" placeholder="请描述申请售后服务的具体原因" placeholder-class="textarea-place" />
				</view>
				<view v-if="isDeliveryReason" class="delivery-box">
					<view class="logistics-select-container">
						<view class="search-header">
							<text class="label">物流公司</text>
							<view class="search-input-wrapper">
								<input class="search-input" type="text" v-model="logisticsKeyword" placeholder="搜索物流公司" placeholder-class="search-input-place" @input="onSearchInput" />
								<image v-if="logisticsKeyword" class="clear-icon" src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/close.png" @click="clearSearch"></image>
							</view>
							<text class="refresh-btn" :class="{'loading': logisticsLoading}" @click.stop="refreshLogisticsCompanies">{{logisticsLoading?'...':'刷新'}}</text>
						</view>
						
						<view v-if="logisticsKeyword && !deliveryForm.shipper_code" class="results-dropdown">
							<scroll-view scroll-y class="results-list">
								<view v-for="(item, index) in logisticsCompanyList" :key="index" class="result-item" @click="selectLogistics(item)">
									<text class="name">{{item.lcName}}</text>
								</view>
								<view v-if="!logisticsLoading && logisticsCompanyList.length === 0" class="empty-results">暂无结果</view>
								<view v-if="logisticsLoading" class="loading-results">搜索中...</view>
							</scroll-view>
						</view>

						<view v-if="deliveryForm.delivery_name && !logisticsKeyword" class="selected-display" @click="reselectLogistics">
							<text class="name">{{deliveryForm.delivery_name}}</text>
							<image class="arrow" src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/arrow_gray.png"></image>
						</view>
					</view>
					
					<view class="title-box">
						<text class="label">物流单号</text>
						<input class="money logistics-input" type="text" v-model="deliveryForm.delivery_sn" placeholder="请输入物流单号" placeholder-class="form-input" />
					</view>

					<!-- 地址信息展示 -->
					<view class="address-card" v-if="order">
						<view class="address-item">
							<view class="icon-box sender">寄</view>
							<view class="content-box">
								<view class="user-info">
									<text class="name">{{order.realName || '寄件人'}}</text>
									<text class="phone">{{order.userPhone || '-'}}</text>
								</view>
								<view class="address-text">{{order.userAddress || '-'}}</view>
							</view>
						</view>
						
						<view class="address-item" v-if="deliveryBaseInfo.address">
							<view class="icon-box recipient">收</view>
							<view class="content-box">
								<view class="user-info">
									<text class="name">{{deliveryBaseInfo.consignee || '-'}}</text>
									<text class="phone">{{deliveryBaseInfo.phone_number || '-'}}</text>
								</view>
								<view class="address-text">{{deliveryBaseInfo.address || '-'}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 退回方式 -->
			<!-- <view class="return-method">
				<view class="title-box">
					<text class="text">退货方式</text>
					<text class="text">用户发货</text>
				</view>
				<view class="return-tips">
					<text class="text">请您在审核通过后7天内，将商品发货到指定点</text>
				</view>
				<view class="info-item">
					<text class="label">联系人</text>
					<text class="text">张三  1572325612</text>
				</view>
				<view class="info-item">
					<text class="label">发货地址</text>
					<text class="text">重庆市江北区建玛特商场5楼</text>
				</view>
			</view> -->
			 <!-- 底部按钮 -->
			 <view class="btn-box">
			 	<view class="sub-btn" @click="submit()">申请售后</view>
			 </view>
		</view>
		
	 
	</view>
</template>

<script>
	import {applyAfterSales,getMyStoreOrderItemByOrderId,editDelivery,getErpReturnInfo} from '../api/integralAfterSales.js'
	import { queryLogisticsCompany,refreshLogisticsCompany } from '../api/storeAfterSales.js'
	export default {
		computed: {
			isDeliveryReason() {
				return this.reasonValue === '6';
			}
		},
		data() {
			return {
				orderId:null,
				order:null,
				orderCode:null,
				items:[],
				type:null,
				reasonsList:[],
				reasons:"请选择",
				reasonIndex:0,
				reasonValue:null,
				explains:"",
				refundAmount:0.00,
				refundIntegral: 0,
				refundType: 0, // 0: 仅退款, 1: 退货退款
				filteredReasonsList: [],
				logisticsCompanyList:[],
				logisticsKeyword:'',
				selectedLogisticsIndex:0,
				logisticsLoading:false,
				searchTimer: null,
				deliveryBaseInfo:{
					consignee:'',
					phone_number:'',
					address:''
				},
				deliveryForm:{
					shipper_code:'',
					delivery_sn:'',
					delivery_name:''
				},
				fileList1: [],
				explainImg: ""
			}
		},
		onLoad(option) {
			this.type=option.type;
			this.orderCode=option.orderCode;
			this.reasonsList=this.$getDict("storeAfterSalesReasons");
			this.orderId=option.orderId;
			console.log(this.orderId);
			// Initialize refundType based on option.type if available, otherwise default to 0
			this.refundType = option.type !== undefined ? Number(option.type) : 0;
			this.filterReasons(); // Filter reasons initially
			this.getMyStoreOrderItemByOrderId()
		},
		methods: {
			changeRefundType(type) {
				this.refundType = type;
				this.filterReasons();
				// Reset selected reason when refund type changes
				this.reasons = "请选择";
				this.reasonIndex = 0;
				this.reasonValue = null;
				this.resetDeliveryForm();
			},
			filterReasons() {
				if (this.refundType === 0) { // 仅退款类型type0
					this.filteredReasonsList = this.reasonsList.filter(item => item.dictValue !== '6');
				} else { // 退货退款类型type1
					this.filteredReasonsList = this.reasonsList.filter(item => item.dictValue === '6');
				}
			},
			getMyStoreOrderItemByOrderId(){
				var data={orderId:this.orderId};
				getMyStoreOrderItemByOrderId(data).then(res => {
					if(res.code==200){
						this.order=res.order;
						this.items=res.items;
						this.refundAmount= this.$formatNum(this.order.payMoney)
						this.refundIntegral = this.order.integral || 0
					}else{
						uni.showToast({
							icon:'none',
							title: "请求失败",
						});
						 
					}
				});
			},
			reasonsChange(e) {
				var index = Number(e.detail.value);
				var current = this.filteredReasonsList[index] || {};
				this.reasonIndex = index;
				this.reasons = current.dictLabel || '请选择';
				this.reasonValue = current.dictValue != null ? current.dictValue.toString() : null;
				if(this.isDeliveryReason){
					this.loadLogisticsCompanies();
					this.loadMerchantDeliveryInfo();
				}else{
					this.resetDeliveryForm();
				}
			},
			resetDeliveryForm(){
				this.selectedLogisticsIndex = 0;
				this.deliveryForm = {
					shipper_code:'',
					delivery_sn:'',
					delivery_name:''
				};
			},
			loadMerchantDeliveryInfo(){
				return getErpReturnInfo().then(res => {
					if(res.code==200){
						this.deliveryBaseInfo = {
							consignee: res.returnReceiver || '',
							phone_number: res.returnPhone || '',
							address: res.returnAddress || ''
						};
						return this.deliveryBaseInfo;
					}
					uni.showToast({
						icon:'none',
						title: res.msg || '获取商家收货信息失败'
					});
					return null;
				});
			},
			loadLogisticsCompanies(forceRefresh){
				if(this.logisticsLoading){
					return;
				}
				if(!forceRefresh&&this.logisticsCompanyList.length>0&&!this.logisticsKeyword){
					return;
				}
				this.logisticsLoading = true;
				queryLogisticsCompany({keyword:this.logisticsKeyword}).then(res => {
					if(res.code==0||res.code==200){
						var list = [];
						if(Array.isArray(res.data)){
							list = res.data;
						}else if(Array.isArray(res.rows)){
							list = res.rows;
						}else if(Array.isArray(res.list)){
							list = res.list;
						}
						this.logisticsCompanyList = list;
					}else{
						uni.showToast({
							icon:'none',
							title: res.msg || '物流公司获取失败'
						});
					}
				}).finally(() => {
					this.logisticsLoading = false;
				});
			},
			onSearchInput() {
				if (this.searchTimer) {
					clearTimeout(this.searchTimer);
				}
				this.deliveryForm.shipper_code = ''; // 重置选中状态以显示列表
				this.searchTimer = setTimeout(() => {
					this.loadLogisticsCompanies(true);
				}, 500);
			},
			clearSearch() {
				this.logisticsKeyword = '';
				this.logisticsCompanyList = [];
				this.resetDeliveryForm();
			},
			selectLogistics(item) {
				this.deliveryForm.shipper_code = item.lcId || '';
				this.deliveryForm.delivery_name = item.lcName || '';
				this.logisticsKeyword = ''; // 清空搜索词以显示选中状态
				this.logisticsCompanyList = [];
			},
			reselectLogistics() {
				this.logisticsKeyword = this.deliveryForm.delivery_name;
				this.deliveryForm.shipper_code = '';
				this.onSearchInput();
			},
			searchLogisticsCompanies(){
				this.loadLogisticsCompanies(true);
			},
			refreshLogisticsCompanies(){
				refreshLogisticsCompany({}).then(res => {
					if(res.code==0||res.code==200){
						this.logisticsCompanyList = [];
						this.loadLogisticsCompanies(true);
					}else{
						uni.showToast({
							icon:'none',
							title: res.msg || '刷新失败'
						});
					}
				});
			},
			validateDeliveryForm(){
				if(!this.deliveryForm.shipper_code||!this.deliveryForm.delivery_name){
					uni.showToast({
						icon:'none',
						title: '请选择物流公司'
					});
					return false;
				}
				if(!this.deliveryForm.delivery_sn){
					uni.showToast({
						icon:'none',
						title: '请输入物流单号'
					});
					return false;
				}
				return true;
			},
			buildDeliveryPayload(){
				if(!this.deliveryBaseInfo.consignee||!this.deliveryBaseInfo.phone_number||!this.deliveryBaseInfo.address){
					return null;
				}
				return {
					orderCode:this.orderCode,
					consignee:this.deliveryBaseInfo.consignee,
					phone_number:this.deliveryBaseInfo.phone_number,
					address:this.deliveryBaseInfo.address,
					shipper_code:this.deliveryForm.shipper_code,
					delivery_sn:this.deliveryForm.delivery_sn,
					delivery_name:this.deliveryForm.delivery_name
				};
			},
			handleSubmitSuccess(message){
				uni.showToast({
					icon:'success',
					title: message || '提交成功'
				});
				setTimeout(function() {
					uni.$emit('refreshOrder');
					uni.navigateBack({
						delta: 1
					})
				}, 500);
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: result.status,
						message: result.status == 'failed' ? '上传失败' : '',
						url: result.url
					}))
					fileListLen++
				}
			},
			getSuccessUrls(list) {
				if (!list || list.length === 0) return '';

				const hasUploading = list.some(v => v.status === 'uploading');
				const hasFailed = list.some(v => v.status === 'failed');

				if (hasUploading) {
					uni.showToast({
						title: '请等待图片上传完成',
						icon: 'none'
					});
					return 'failed';
				}
				if (hasFailed) {
					uni.showToast({
						title: '请检查是否有图片上传失败',
						icon: 'none'
					});
					return 'failed';
				}

				return list.filter(v => v.status === 'success').map(v => v.url).join(',');
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: uni.getStorageSync('requestPath') + '/app/common/uploadOSS', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						success: (res) => {
							if (res.statusCode == 200 && JSON.parse(res.data).code == 200) {
								resolve({
									url: JSON.parse(res.data).url,
									status: 'success'
								})
							} else {
								resolve({
									url: url,
									status: 'failed'
								})
							}
						},
						fail: (res) => {
							resolve({
								url: url,
								status: 'failed'
							})
						}
					});
				})
			},
			async submit(){
				if(this.reasons=="请选择"){
					uni.showToast({
						icon:'none',
						title: '请选择原因'
					});
					return;
				}
				if(this.refundAmount<0){
					uni.showToast({
						icon:'none',
						title: '请输入退款金额'
					});
					return;
				}

				const images = this.getSuccessUrls(this.fileList1);
				if (images === 'failed') return;
				this.explainImg = images;

				var productIds=this.items.map(item=>item.productId);
				var products=[];
				for(var i=0;i<productIds.length;i++){
					var item={productId:productIds[i]};
					products.push(item);
				}
				var afterSalesData={
					refundAmount:this.refundAmount,
					refundIntegral:this.refundIntegral,
					orderCode:this.orderCode,
					serviceType:this.refundType,
					reasons:this.reasons,
					explains:this.explains,
					explainImg: this.explainImg,
					// productList:products,
				};

				if (this.isDeliveryReason) {
					// 如果原因是物流相关(dictValue为6)
					if (!this.validateDeliveryForm()) {
						return;
					}

					// 1. 先获取商家收货地址
					await this.loadMerchantDeliveryInfo();
					var deliveryData = this.buildDeliveryPayload();
					if (!deliveryData) {
						uni.showToast({
							icon: 'none',
							title: '商家收货信息不完整'
						});
						return;
					}

					// 2. 合并参数：售后数据 + 物流数据
					let finalSubmitData = {
						...afterSalesData,   // 原售后参数
						...deliveryData     // 物流信息（已合并）
					};

					// 3. 只调用一个接口：applyAfterSales
					var res = await applyAfterSales(finalSubmitData);
					if (res.code === 200) {
						this.handleSubmitSuccess('提交成功');
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg || '提交失败'
						});
					}
				}else{
					// 如果不是物流相关，直接调用申请售后接口
					var res = await applyAfterSales(afterSalesData);
					if(res.code==200){
						this.handleSubmitSuccess('提交成功');
					}else{
						uni.showToast({
							icon:'none',
							title: res.msg
						});
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	.content{
		margin-bottom: 170upx;
		.inner{
			padding: 20upx;
			.drug-list{
				.item{
					background: #FFFFFF;
					border-radius: 16upx;
					margin-bottom: 20upx;
					padding: 0 30upx;
					.drug-info{
						display: flex;
						align-items: center;
						padding: 30upx 0;
						.img-box{
							width: 160upx;
							height: 160upx;
							margin-right: 30upx;
							image{
								width: 100%;
								height: 100%;
							}
						}
						.info{
							width: calc(100% - 160upx);
							height: 160upx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							.top{
								.title{
									font-size: 28upx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #111111;
									line-height: 1.4;
									.tag{
										display: inline-block;
										padding: 0 6upx;
										height: 30upx;
										background: linear-gradient(90deg, #2583EB 0%, #2BC7A4 100%);
										border-radius: 4upx;
										margin-right: 10upx;
										font-size: 22upx;
										font-family: PingFang SC;
										font-weight: bold;
										color: #FFFFFF;
										line-height: 30upx;
										float: left;
										margin-top: 7upx;
									}
								}
								.spec{
									font-size: 24upx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #999999;
									line-height: 1;
									margin-top: 14upx;
								}
							}
						}
					}
					 
				}
			}
			.reason-apply{
				margin-top: 20upx;
				background: #FFFFFF;
				border-radius: 16upx;
				padding: 0 30upx;
				.title-box{
					height: 86upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #F0F0F0;
					.label{
						font-size: 30upx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
					}
					.radio-group {
						display: flex;
						.radio {
							display: flex;
							align-items: center;
							margin-right: 40upx;
							font-size: 28upx;
							color: #333333;
							radio {
								transform:scale(0.7);
							}
						}
					}
					.money{
						
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
					}
					.chose-box{
						display: flex;
						align-items: center;
						.text{
							font-size: 24upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;
						}
						image{
							width: 14upx;
							height: 24upx;
							margin-left: 10upx;
						}
					}
				}
				.upload-box{
					padding: 20upx 0;
					.upload-title{
						font-size: 30upx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
						margin-bottom: 20upx;
					}
				}
				.textarea-box{
					padding: 30upx 0;
					textarea{
						width: 100%;
						box-sizing: border-box;
						background: #F5F5F5;
						border-radius: 16upx;
						padding: 30upx 20upx;
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #111111;
					}
					.textarea-place{
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
					}
				}
				.delivery-box{
					border-top: 1px solid #F0F0F0;
					padding-top: 20upx;
					.logistics-select-container {
						position: relative;
						margin-bottom: 20upx;
						
						.search-header {
							display: flex;
							align-items: center;
							height: 86upx;
							border-bottom: 1px solid #F0F0F0;
							
							.label {
								font-size: 30upx;
								font-family: PingFang SC;
								font-weight: bold;
								color: #333333;
								width: 160upx;
							}
							
							.search-input-wrapper {
								flex: 1;
								position: relative;
								display: flex;
								align-items: center;
								
								.search-input {
									width: 100%;
									height: 60upx;
									font-size: 26upx;
									color: #333333;
									text-align: left;
									padding-right: 50upx;
								}
								
								.clear-icon {
									position: absolute;
									right: 10upx;
									width: 32upx;
									height: 32upx;
									z-index: 10;
								}
							}
							
							.refresh-btn {
								font-size: 24upx;
								color: #2583EB;
								margin-left: 20upx;
								min-width: 60upx;
								text-align: center;
								
								&.loading {
									opacity: 0.6;
								}
							}
						}
						
						.results-dropdown {
							position: absolute;
							top: 86upx;
							left: 0;
							right: 0;
							background: #FFFFFF;
							box-shadow: 0 4upx 20upx rgba(0,0,0,0.1);
							border-radius: 8upx;
							z-index: 100;
							max-height: 400upx;
							overflow: hidden;
							
							.results-list {
								max-height: 400upx;
								
								.result-item {
									padding: 24upx 30upx;
									border-bottom: 1px solid #F8F8F8;
									
									&:active {
										background-color: #F5F5F5;
									}
									
									.name {
										font-size: 28upx;
										color: #333333;
									}
								}
								
								.empty-results, .loading-results {
									padding: 40upx;
									text-align: center;
									font-size: 24upx;
									color: #999999;
								}
							}
						}
						
						.selected-display {
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 80upx;
							background: #F8F8F8;
							border-radius: 8upx;
							padding: 0 20upx;
							margin-top: 10upx;
							
							.name {
								font-size: 28upx;
								color: #2583EB;
								font-weight: 500;
							}
							
							.arrow {
								width: 12upx;
								height: 20upx;
							}
						}
					}
					
					.logistics-input{
						flex: 1;
					}

					.address-card {
						padding: 20upx 0;
						background: #FFFFFF;

						.address-item {
							display: flex;
							align-items: flex-start;
							padding: 30upx 0;
							border-bottom: 1upx solid #F5F5F5;
							&:last-child {
								border-bottom: none;
							}

							.icon-box {
								width: 44upx;
								height: 44upx;
								border-radius: 8upx;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 24upx;
								font-weight: bold;
								color: #FFFFFF;
								margin-top: 6upx;
								flex-shrink: 0;

								&.sender {
									background: #FF5A1F;
								}

								&.recipient {
									background: #FFB400;
								}
							}

							.content-box {
								flex: 1;
								margin-left: 20upx;

								.user-info {
									margin-bottom: 12upx;
									display: flex;
									align-items: center;

									.name {
										font-size: 30upx;
										font-weight: bold;
										color: #111111;
										margin-right: 20upx;
									}

									.phone {
										font-size: 30upx;
										font-weight: bold;
										color: #111111;
									}
								}

								.address-text {
									font-size: 26upx;
									color: #666666;
									line-height: 1.4;
									word-break: break-all;
								}
							}
						}
					}
				}
			}
			.return-method{
				background: #FFFFFF;
				border-radius: 16upx;
				margin-top: 20upx;
				padding: 0 30upx 40upx;
				.title-box{
					height: 86upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #F0F0F0;
					.text{
						font-size: 30upx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
					}
				}
				.return-tips{
					margin-top: 30upx;
					margin-bottom: 30upx;
					height: 80upx;
					background: #FFF4E6;
					border-radius: 16upx;
					padding: 0 20upx;
					display: flex;
					align-items: center;
					.text{
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #EF8A07;
					}
				}
				.info-item{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 40upx;
					&:last-child{
						margin-bottom: 0;
					}
					.label{
						font-size: 26upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
						line-height: 1;
					}
					.text{
						font-size: 26upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #111111;
						line-height: 1;
					}
					.detail-box{
						display: flex;
						align-items: center;
						.price-box{
							display: flex;
							align-items: flex-end;
							margin-right: 18upx;
							.unit{
								font-size: 24upx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #111111;
								line-height: 1.2;
							}
							.num{
								font-size: 32upx;
								font-family: PingFang SC;
								font-weight: bold;
								color: #111111;
								line-height: 1;
							}
						}
						.det-text{
							font-size: 26upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #111111;
						}
						image{
							width: 14upx;
							height: 24upx;
							margin-left: 10upx;
						}
					}
				}
			}
		}
		 
		.reson-box{
			padding: 0 10upx 60upx;
			.reson-item{
				width: 100%;
				height: 110upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.title{
					font-size: 30upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #111111;
				}
			}
		}
	}
	.btn-box{
		height: 120upx;
		padding: 0 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
		.sub-btn{
			width: 100%;
			height: 88upx;
			line-height: 88upx;
			text-align: center;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			background: #2583EB;
			border-radius: 44upx;
		}
	}
	input{
		text-align: right;
	}
	.form-input{
		font-size: 30upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		text-align: right;
	}
	.num-box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		.price{
			display: flex;
			align-items: flex-end;
			.unit{
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #111111;
				line-height: 1.2;
				margin-right: 4upx;
			}
			.num{
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #111111;
				line-height: 1;
			}
		}
		.amount{
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 1;
		}
	}
</style>