hwnc/pagesB/pages/updateorder/updateorder.vue

<template>
	<view :class="[AppTheme]" class="container">
		<view class="central_information">
			<view class="modular_setion">
				<!-- 土地标题 -->
				<view class="package_title">
					<view class="package_dtitle_p1">
						<!-- <view class="dtitle_text_p1 dtitle_text_green">{{ ordermess.soil_name }}</view> -->
						<view class="dtitle_text_p2 dtitle_text_green text-primary">{{ ordermess.selelanditemtext.alias }}</view>
					</view>
					<image class="package_thumbnail" mode="aspectFit" :src="settingFile.root_img+'/static/app/imgs/land.png'"></image>
				</view>
				<view class="border_nn"></view>
				<view class="package_item">
					<view class="package_item_tp1">地块编号</view>
					<view class="package_item_tp2">
						<view class="pa_title_selt">{{ ordermess.selelanditemtext.name }}</view>
					</view>
				</view>
				<view class="border_nn"></view>
				<view class="package_item">
					<view class="package_item_tp1">地块面积</view>
					<view class="package_item_tp2">
						<view class="pa_title_selt">{{ ordermess.selelanditemtext.area + '㎡' }}</view>
					</view>
				</view>
				<view class="border_nn"></view>
				<!-- 服务类型 -->
				<view class="package_item">
					<view class="package_item_tp1">服务类型</view>
					<view class="package_item_tp2" @click="hostifshow = true">
						<view class="pa_title_selt">{{ ordermess.cutlysetagetext.serve_name }}</view>
						<u-icon size="30" color="#666" name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="border_nn"></view>
				<!-- 租赁周期 -->
				<view class="package_item">
					<view class="package_item_tp1">租赁周期</view>
					<view class="package_item_tp2" @click="hiepackshow = true">
						<view class="pa_title_selt">{{ ordermess.hirecycle.label }}</view>
						<u-icon size="30" color="#666" name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<!-- 种子管理 -->
			<view class="seedmodular" v-if="ordermess.cutlysetagetext.serve_name !== '无托管'">
				<view class="seedmodular_p1"><view class="seedlar_text1 text-primary">种子管理</view></view>
				<view class="border_nn"></view>
				<view class="seedmodular_p2" v-if="ordermess.seedordermy.orderseedlist.length > 0">
					<view class="seleedseed_item" v-for="(item, index) in ordermess.seedordermy.orderseedlist" :key="index">
						<view class="seleedseed_item_p1">
							<image class="seditem_thumbnail" mode="aspectFill" :src="item.seeditem.ripe_pic"></image>
							<view class="seditem_title">{{ item.seeditem.seed_name }}</view>
						</view>
						<view class="seleedseed_item_p2">{{ item.seeditem.seed_yield * item.seednum }}kg</view>
					</view>
				</view>
				<view class="seedmodular_p3 text-primary border-primary" @click="chooseseed()">更改种子</view>
			</view>
			<!-- 配送信息 -->
			<view class="seedmodular" v-if="ordermess.cutlysetagetext.serve_name === '全托管'">
				<view class="seedmodular_p1"><view class="seedlar_text1 text-primary">配送信息</view></view>
				<view class="border_nn"></view>
				<navigator class="address_delti" v-if="addressData !== null" url="/pagesD/pages/address/address?source=1">
					<view class="detaed_addrss">
						<u-icon name="phone-fill" color="#56AB2F" size="35"></u-icon>
						<view class="addr_text">{{ addressData.name }}-{{ addressData.mobile }}</view>
					</view>
					<view class="detaed_addrss">
						<u-icon name="map-fill" color="#56AB2F" size="35"></u-icon>
						<view class="addr_text">{{ addressData.address }}</view>
					</view>
				</navigator>
				<navigator class="seedmodular_p3 text-primary border-primary" url="/pagesD/pages/address/address?source=1">更改地址</navigator>
			</view>
			<!-- 自主采摘 -->
			<view class="seedmodular" v-if="ordermess.cutlysetagetext.serve_name === '半托管'">
				<view class="seedlar_text1 text-primary">自主采摘</view>
				<view class="border_nn"></view>
				<view class="feed_moudel">
					<view class="feed_modetitle">
						<u-icon name="map" color="#56AB2F" size="40"></u-icon>
						<view class="feed_modetext">采摘地址</view>
					</view>
					<view class="feed_modetitle2">
						<view class="feed_modnnsnt">xx市xx区xx区</view>
						<u-icon name="arrow-right" color="#333" size="26"></u-icon>
					</view>
				</view>
				<view class="feed_moudel">
					<view class="feed_modetitle">
						<u-icon name="phone-fill" color="#56AB2F" size="40"></u-icon>
						<view class="feed_modetext">采摘说明</view>
					</view>
					<view class="feed_modetitle2">
						<view class="feed_modnnsnt">请提前打电话预约</view>
						<u-icon name="arrow-right" color="#333" size="26"></u-icon>
					</view>
				</view>
			</view>
			<!-- 租赁人信息 -->
			<view class="seedmodular">
				<view class="seedlar_text1">租赁人信息</view>
				<view class="border_nn"></view>
				<view class="leation_suject">姓名</view>
				<input type="text" class="brodnn" placeholder-style="color:#555" v-model="leasename" placeholder="请输入租赁人姓名" />
				<view class="border_nn"></view>
				<view class="leation_suject">电话</view>
				<input
					type="number"
					class="brodnn"
					:value="addressData.mobile"
					:disabled="ordermess.cutlysetagetext.serve_name === '全托管'"
					placeholder-style="color:#555"
					placeholder="请输入租赁人电话"
				/>
				<view class="border_nn"></view>
				<view class="leation_suject">备注</view>
				<input type="text" class="brodnn" placeholder-style="color:#555" v-model="remarks" placeholder="有问题请告诉我" />
				<view class="border_nn"></view>
			</view>
			<!-- 支付 -->
			<view class="seedmodular">
				<view class="seedlar_text1" style="color: #000000;">请选择支付方式</view>
				<view class="choosepay">
					<radio-group @change="radioChange">
						<label class="unll_pd" v-for="(item, index) in items" :key="item.value">
							<view class="ann_fle">
								<view class="ann_nfjds">
									<image class="unclas" mode="aspectFill" :src="item.iconsrc"></image>
									{{ item.name }}
								</view>
								<radio :value="item.value" :checked="index === current" style="transform: scale(0.6);" />
							</view>
						</label>
					</radio-group>
				</view>
			</view>
		</view>
		<!-- 底部结算和价格计算 -->
		<view class="footer_payment">
			<view class="settlement_information">
				<view class="setnt_inion_p1">总计:</view>
				<view class="setnt_inion_p2">￥{{ totalpricenum }}</view>
				<view class="setnt_inion_p3" @click="detailed = true">明细</view>
			</view>
			<u-button type="success" shape="square" size="medium" @click="settlement()">确定修改</u-button>
		</view>
		<!-- 托管套餐和日期选择器 -->
		
		<u-picker :show="hostifshow" :columns="hostingpackage" :closeOnClickOverlay="true"  @confirm="confirmpa" @cancel="hostifshow=false"></u-picker>
		<u-picker :show="hiepackshow" :columns="hirepackagelist" :closeOnClickOverlay="true"  @confirm="confirmdate" @cancel="hiepackshow=false"></u-picker>
<!-- 		<u-select v-model="hostifshow" safe-area-inset-bottom="true" :list="hostingpackage" @confirm="confirmpa"></u-select>
		<u-select v-model="hiepackshow" safe-area-inset-bottom="true" :list="hirepackagelist" @confirm="confirmdate"></u-select> -->
		<!-- 账单明细 -->
		<u-popup :show="detailed" mode="bottom" safe-area-inset-bottom="true" round="12">
			<view class="bill_item">
				<view class="bill_text_p1">土地租赁费用</view>
				<view class="bill_text_p2">￥{{ ordermess.landexpenss }}</view>
			</view>
			<view class="bill_item">
				<view class="bill_text_p1">土地服务费用</view>
				<view class="bill_text_p2">￥{{ ordermess.servlandexpenss }}</view>
			</view>
			<view class="bill_item">
				<view class="bill_text_p1">种子费用</view>
				<view class="bill_text_p2">￥{{ ordermess.seedexpenses }}</view>
			</view>
			<!-- 			<view class="bill_item">
				<view class="bill_text_p1">优惠卷抵用</view>
				<view class="bill_text_p2">-￥{{ ordermess.coupon }}</view>
			</view>
			<view class="bill_item">
				<view class="bill_text_p1">会员折扣</view>
				<view class="bill_text_p2">-￥{{ ordermess.vipdiscount }}</view>
			</view> -->
			<view class="bill_item">
				<view class="bill_text_p1">总计</view>
				<view class="bill_text_p2">￥{{ ordermess.totalprice }}</view>
			</view>
		</u-popup>
		<!-- 模拟框 -->
		<u-modal v-model="modalshow" :content="content" show-cancel-button="true" @confirm="modalconfirm()" @cancel="modalcancel()"></u-modal>
	</view>
</template>
<script>
import Landapi from '@/api/land/index.js';
export default {
	components: {},
	data() {
		return {
			primary:this.$theme.primary,
			settingFile:getApp().globalData.siteinfo,
			modalshow: false,
			content: '修改成功,现在是否支付?',
			//支付方式
			items: [
				{
					value: 'weixinpay',
					name: '微信支付',
					iconsrc: '/static/imgs/icon/wxpay.png',
					checked: 'true'
				},
				{
					value: 'balancepay',
					iconsrc: '/static/imgs/icon/cacardpay.png',
					name: '余额支付'
				}
			],
			current: 0,
			// 提交订单信息
			updaordermess: {},
			//总资费
			totalpricenum: 0,
			// 托管套餐选择器显隐
			hostifshow: false,
			// 托管周期选择器显隐
			hiepackshow: false,
			//数据库托管套餐
			longrangepackage: [],
			// 重排后托管套餐列表
			hostingpackage: [],
			// 托管周期
			hirepackagelist: [],
			//订单资费详情弹出层
			detailed: false,
			// 收货地址
			addressData: null,
			// 租赁姓名
			leasename: '',
			// 备注
			remarks: '',
			orderid: 0,
			// 订单信息
			ordermess: {
				//土地信息
				selelanditemtext: null,
				//服务信息
				cutlysetagetext: null,
				//租赁套餐类型
				hirecycle: null,
				//种子集合
				seedordermy: {
					orderseedlist: []
				},
				//订单种子费用
				seedexpenses: null,
				coupon: null,
				vipdiscount: null,
				order_id: null,
				soil_id: null,
				subdivision_id: null,
				period: []
			}
		};
	},
	onLoad(options) {
		let ordermess = JSON.parse(options.params);
		this.updateinit(ordermess);
	},
	onUnload() {},
	onReady() {},
	onShow: function() {},
	methods: {
		//查看信息弹出框确定操作
		modalconfirm() {
			//跳转支付
			this.nowpay();
		},
		//查看信息弹出框取消操作
		modalcancel() {
			uni.redirectTo({
				url: '/pagesB/pages/myland/myland'
			});
		},
		//立即支付
		nowpay() {
			let that = this;
			let totalprice = 0;
			let parms = {
				id: that.orderid
			};
			//发送订单id获取订单总金额,在执行成功的回调函数发起支付请求
			Landapi.lookorderbyid(parms).then(res => {
				if (res.status == 1) {
					let params2 = {
						orderidpayaga: that.orderid,
						payprice: res.data.order_money * 1,
						payType: 1,
						additionalpayment: true
					};
					uni.redirectTo({
						url: '/pagesB/pages/creatorder/pay?parms=' + JSON.stringify(params2)
					});
				} else {
					that.$api.msg(res.msg);
				}
			});
		},
		//更改数据初始化
		updateinit(ordermess) {
			let that = this;
			that.ordermess.selelanditemtext = ordermess.subdivision[ordermess.subdivision_id];
			that.ordermess.cutlysetagetext = {
				id: ordermess.service_id,
				is_default: 0,
				serve_desc: ordermess.serve_desc,
				serve_name: ordermess.serve_name,
				serve_price: ordermess.serve_price
			};
			// 设置租赁套餐
			that.ordermess.hirecycle = {
				label: '',
				value: ordermess.period_days
			};
			//设置租赁时间
			that.ordermess.period = ordermess.period;
			that.ordermess.period.forEach(item => {
				if (parseInt(item.days) === ordermess.period_days) {
					that.ordermess.hirecycle.label = item.periodname;
				}
			});
			//设置种子
			ordermess.seeds.forEach(item => {
				let seeditem = {
					seeditem: {
						id: item.seed_id,
						price: item.price,
						ripe_pic: item.ripe_pic,
						seed_name: item.seed_name,
						seed_yield: item.seed_yield
					},
					seednum: item.seed_num
				};
				that.ordermess.seedordermy.orderseedlist.push(seeditem);
			});
			//设置地址
			that.addressData = {
				address: ordermess.address,
				id: ordermess.address_id,
				is_default: ordermess.is_default,
				mobile: ordermess.mobile,
				name: ordermess.name,
				remark: ordermess.remark,
				uniacid: ordermess.uniacid,
				vipid: ordermess.vipid,
				xqid: ordermess.xqid
			};
			that.ordermess.order_id = ordermess.order_sn;
			that.ordermess.soil_id = ordermess.soil_id;
			that.ordermess.subdivision_id = ordermess.subdivision_id;
			that.leasename = ordermess.order_name;
			that.remarks = that.addressData.remarks;
			that.current = ordermess.type_pay - 1;
			that.orderid = ordermess.id;
			// 获取土地租赁协议列表
			this.hirepackagelist = this.ordermess.hirepackagelist;
			// 获取土地租赁协议列表
			that.gethostingpackage();
			that.calprice();
		},
		//更新整体套餐信息
		calprice() {
			var that = this;
			// 优惠卷抵用
			// that.ordermess.coupon = 0;
			// 会员折扣
			// that.ordermess.vipdiscount = 0;
			// 土地租赁费用
			that.ordermess.landexpenss = parseInt(that.ordermess.selelanditemtext.price);
			// 土地服务费用
			that.ordermess.servlandexpenss = that.ordermess.hirecycle.value * parseFloat(that.ordermess.cutlysetagetext.serve_price);
			// 种子费用
			if (that.ordermess.seedordermy !== undefined) {
				that.ordermess.seedexpenses = that.seedtariff();
			} else {
				that.ordermess.seedexpenses = 0;
			}
			//合计费用
			that.ordermess.totalprice =
				that.ordermess.landexpenss + that.ordermess.servlandexpenss + that.ordermess.seedexpenses - that.ordermess.coupon - that.ordermess.vipdiscount;
			that.totalpricenum = that.ordermess.totalprice;
		},
		// 实时计算已选种子总金额
		seedtariff() {
			var comattribute = 0;
			this.ordermess.seedordermy.orderseedlist.forEach(item => {
				comattribute += item.seednum * parseInt(item.seeditem.price);
			});
			return comattribute;
		},
		// 获取土地租赁协议列表
		gethostingpackage(title) {
			var that = this;
			Landapi.getsecemist().then(res => {
				if (res.status == 1) {
					// 给套餐集合赋值
					that.longrangepackage = res.data;
					res.data.forEach(item => {
						let paitem = {
							label: item.serve_name,
							value: item.id
						};
						that.hostingpackage.push(paitem);
					});
				} else {
					that.$api.msg(res.msg);
				}
			});
		},
		// 套餐选择器回调函数
		confirmpa(e) {
			let that = this;
			that.longrangepackage.some(function(item) {
				if (item.id === e[0].value) {
					that.ordermess;
					that.ordermess.cutlysetagetext = item;
					return true;
				}
			});
			that.calprice();
		},
		// 日期选择器回调函数
		confirmdate(e) {
			this.ordermess.hirecycle = this.hirepackagelist[e[0].extra];
			this.calprice();
		},
		//选择种子
		chooseseed() {
			let params = {
				seeds: this.ordermess.seedordermy.orderseedlist,
				selelanditemtext: this.ordermess.selelanditemtext
			};
			uni.navigateTo({
				url: '/pagesB/pages/updateorder/changeseed?params=' + JSON.stringify(params)
			});
		},
		// 单选改变
		radioChange(evt) {
			for (let i = 0; i < this.items.length; i++) {
				if (this.items[i].value === evt.detail.value) {
					this.current = i;
					break;
				}
			}
		},
		// 结算订单
		settlement() {
			var that = this;
			//如果为全判断收货地址是否为空
			if (that.ordermess.cutlysetagetext.serve_name === '全托管') {
				if (that.addressData === null) {
					that.$api.msg('请填写收货地址');
					return;
				}
			}
			// 判断租赁人姓名是否正确
			var re = /^[\u4e00-\u9fa5]+$/;
			if (re.test(that.leasename)) {
				// 用户id赋值
				// that.updaordermess.vip_id = that.addressData.vipid;
				//土地id赋值
				// that.updaordermess.soil_id = that.ordermess.landid;
				// 选中地块id
				that.updaordermess.subdivision_id = that.ordermess.selelanditem;
				//订单金额
				that.updaordermess.order_money = that.totalpricenum;
				// 服务id
				that.updaordermess.service_id = that.ordermess.cutlysetagetext.id;
				// 服务名称
				// that.updaordermess.service_name = that.ordermess.cutlysetagetext.serve_name;
				// 租赁周期
				that.updaordermess.period_days = that.ordermess.hirecycle.value;
				// 选购种子,加一层判断
				if (that.ordermess.cutlysetagetext.serve_name !== '无托管') {
					if (that.ordermess.seedordermy === undefined || that.ordermess.seedordermy === null) {
						// that.$api.msg("当前订单未选择种子")
						that.updaordermess.seeds = [];
					} else {
						that.updaordermess.seeds = that.ordermess.seedordermy.orderseedlist;
					}
				}
				//地址id
				that.updaordermess.address_id = that.addressData.id;
				//订单客户姓名
				that.updaordermess.order_name = that.leasename;
				//订单手机号
				that.updaordermess.order_mobile = that.addressData.mobile;
				//订单备注
				// that.updaordermess.remark = that.remarks;
				//订单支付方式
				// that.updaordermess.type_pay = that.current + 1;
				let tmplId = uni.getStorageSync('temlist');
				let updanpram = {
					order_sn: that.ordermess.order_id,
					soil_id: that.ordermess.soil_id,
					subdivision_id: that.ordermess.subdivision_id,
					order_money: that.ordermess.totalprice,
					service_id: that.updaordermess.service_id,
					period_days: that.updaordermess.period_days,
					seeds: that.ordermess.seedordermy.orderseedlist,
					address_id: that.updaordermess.address_id,
					order_name: that.updaordermess.order_name,
					order_mobile: that.updaordermess.order_mobile,
					remark: that.remarks
				};
				let seeds = [];
				updanpram.seeds.forEach(item => {
					let seeditem = {
						seed_id: 0,
						seed_num: 0
					};
					seeditem.seed_id = item.seeditem.id;
					seeditem.seed_num = item.seednum;
					seeds.push(seeditem);
				});
				updanpram.seeds = JSON.stringify(seeds);
				Landapi.updateorder(updanpram).then(res => {
					if (res.status == 1) {
						// that.$api.msg(res.msg);
						that.modalshow = true;
					} else {
						that.$api.msg(res.msg);
					}
				});
			} else {
				that.$api.msg('请输入正确的名字');
			}
		},
	}
};
</script>
<style lang="scss">
@import 'common/nowvue.scss';
</style>
<style lang="scss">
.container {
	background: #f1f1f1;
}
.central_information {
	overflow-y: scroll;
	padding: 0 20rpx;
	height: calc(100vh - 90rpx - env(safe-area-inset-bottom));
}
.modular_setion {
	padding: 45rpx 30rpx;
	background: #ffffff;
	box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
	margin: 15rpx 0 25rpx 0;
	border-radius: 10rpx;
}
.package_title {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.package_dtitle_p1 {
	width: auto;
}

.dtitle_text_p1 {
	font-size: 34rpx;
	font-weight: 900;
}

.dtitle_text_p2 {
	font-size: 28rpx;
	margin-top: 30rpx;
}

.package_thumbnail {
	width: 60rpx;
	height: 47.5rpx;
}

.dtitle_text_green {
	// color: #56ab2f;
}

.package_item {
	margin-top: 25rpx;
}

.package_item_tp1 {
	font-size: 26rpx;
	color: #999;
}

.package_item_tp2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 30rpx;
}

.pa_title_selt {
	color: #000;
	font-size: 30rpx;
}

.footer_payment {
	position: fixed;
	width: calc(100vw - 15rpx);
	margin: 0 7.5rpx;
	padding: 10rpx;
	bottom: calc(env(safe-area-inset-bottom) + 10rpx);
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
	border-radius: 16rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 2;
}

.settlement_information {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 0 15rpx;
}

.setnt_inion_p1 {
	font-size: 30rpx;
	color: #000;
}

.setnt_inion_p2 {
	margin: 0 25rpx;
	font-size: 28rpx;
	font-weight: 800;
	color: red;
}

.setnt_inion_p3 {
	font-size: 24rpx;
	color: #999;
}

.bill_item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 25rpx;
}

.bill_text_p1 {
	font-size: 30rpx;
	color: #999;
}

.bill_text_p2 {
	font-size: 28rpx;
	color: #000000;
}

.seedmodular {
	padding: 45rpx 30rpx;
	background: #ffffff;
	box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
	margin: 15rpx 0 25rpx 0;
	border-radius: 10rpx;
}

.seedmodular_p1 {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.seedlar_text1 {
	font-size: 30rpx;
	// color: #56ab2f;
	font-weight: 900;
}

.seedlar_text2 {
	font-size: 26rpx;
	color: #999;
}

.seedmodular_p2 {
	margin: 25rpx 0;
}
.seedmodular_p3 {
	// color: #19be6b;
	background-color: #fff;
	font-size: 30rpx;
	height: 70rpx;
	line-height: 70rpx;
	text-align: center;
	border-width: 1px;
	border-style: solid;
	// border: 1px solid #19be6b;
	border-radius: 35rpx;
	width: 55%;
	margin: 25rpx 22.5%;
}
.seleedseed_item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 10rpx 0;
}

.seleedseed_item_p1 {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.seditem_thumbnail {
	width: 60rpx;
	height: 60rpx;
}

.seditem_title {
	font-size: 26rpx;
	color: #999;
	margin-left: 15rpx;
}
.address_delti {
	width: auto;
	margin-top: 30rpx;
}
.detaed_addrss {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin: 20rpx 0;
}
.addr_text {
	font-size: 26rpx;
	color: #000;
	margin-left: 15rpx;
	letter-spacing: 2rpx;
}
.feed_moudel {
	padding: 25rpx 0;
}
.border_nn {
	border-bottom: 1rpx solid #999;
	transform: scaleY(0.3);
	margin-top: 15rpx;
}
.feed_modetitle {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.feed_modetext {
	color: #333;
	font-size: 26rpx;
	margin-left: 15rpx;
}
.feed_modetitle2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 15rpx;
	text-indent: 45rpx;
}
.feed_modnnsnt {
	font-size: 28rpx;
	color: #000;
}
.leation_suject {
	color: #666;
	font-size: 24rpx;
	margin: 15rpx 0;
}
.choosepay {
	margin: 20rpx 0;
}
.ann_fle {
	display: flex;
	justify-content: space-between;
	margin: 17.5rpx 0;
	align-items: center;
	color: #000;
	font-size: 28rpx;
}
.brodnn {
	margin: 20rpx 0;
}
.unclas {
	width: 45rpx;
	height: 45rpx;
	margin-right: 25rpx;
}
.ann_nfjds {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.unll_pd {
	margin: 15rpx 0;
}
.load_window {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 100%;
	transform: translate(-50%, -50%);
	background-color: #ffffff;
	box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
}
</style>