<template>
	<view class="cashier">
		<view class="d-c d-b-c cashier-top">
			<view class="f24 gray3">{{ $t('w_0331') }}</view>
			<view class="f34 price-color fb">
				{{ currencyIcon() }}
				<text class="f54 fb">{{ formatNum(orderAmount) }}</text>
			</view>
			<view class="f24 gray9">
				{{ $t('w_0213') }}
				<text class="domation">{{ formatSeconds(0) }}</text>
				{{ $t('w_0214') }}
			</view>
		</view>
		<view class="content-box">
			<view class="info-title">{{ $t('w_0215') }}</view>

			<template v-if="pay_type == 20">
				<view class="d-b-c pay-item" @click="changePayType(2, 2, '')">
					<image class="pay-icon" src="/static/icon/pay-wallet.png" mode=""></image>
					<view class="flex-1 f26">{{ $t('w_0226') }}</view>
					<view class="radio-check" :class="{ checked: payType == 2 && payChannel == 2 }"></view>
					<view class="icon iconfont icon-jiantou" @click="openWX = !openWX" :class="{ checked: openWX }"></view>
				</view>
			</template>
			<template>
				<view class="d-b-c pay-item" @click="changePayType(-1, -1, '')">
					<image class="pay-icon" src="/static/icon/pay-wallet.png" mode=""></image>
					<view class="flex-1 f26">{{ $t('w_0216') }}</view>
					<view class="radio-check" :class="{ checked: payType == -1 }"></view>
					<view class="icon iconfont icon-jiantou" :class="{ checked: openZH }"></view>
				</view>
				<view style="padding-left: 24rpx;" class="autoBox" :class="{ open: openZH }">
					<view class="border-b" v-if="spendDetail.consumeBalance > 0">
						<view class="d-b-c  p-10-0 ">
							<view class="flex-1 f26">{{ $t('w_0217') }}</view>
						</view>
						<view class="d-b-c p-10-0">
							<view class="gray6">{{ currencyIcon() }}{{ formatNum(spendDetail.consumeBalance) }}</view>
							<view class="gray9">-{{ currencyIcon() }}{{ formatNum(spendDetail.consumeDeduct) }}</view>
						</view>
					</view>
					<view class="border-b" v-if="spendDetail.payAccount1 > 0">
						<view class="d-b-c  p-10-0 ">
							<view class="flex-1 f26">{{ $t('w_0217') }}</view>
						</view>
						<view class="d-b-c p-10-0">
							<view class="gray6">{{ currencyIcon() }}{{ formatNum(spendDetail.account1) }}</view>
							<view class="gray9">-{{ currencyIcon() }}{{ formatNum(spendDetail.payAccount1) }}</view>
						</view>
					</view>
					<view class="border-b" v-if="spendDetail.payAccount2 > 0">
						<view class="d-b-c  p-10-0 ">
							<view class="flex-1 f26">{{ $t('w_0218') }}</view>
						</view>
						<view class="d-b-c p-10-0">
							<view class="gray6">{{ currencyIcon() }}{{ formatNum(spendDetail.account2) }}</view>
							<view class="gray9">-{{ currencyIcon() }}{{ formatNum(spendDetail.payAccount2) }}</view>
						</view>
					</view>
					<view class="border-b" v-if="spendDetail.payAccount3 > 0">
						<view class="d-b-c  p-10-0 ">
							<view class="flex-1 f26">{{ $t('w_0219') }}</view>
						</view>
						<view class="d-b-c p-10-0">
							<view class="gray6">{{ currencyIcon() }}{{ formatNum(spendDetail.account3) }}</view>
							<view class="gray9">-{{ currencyIcon() }}{{ formatNum(spendDetail.payAccount3) }}</view>
						</view>
					</view>
					<view class="border-b" v-if="spendDetail.payAccount4 > 0">
						<view class="d-b-c  p-10-0 ">
							<view class="flex-1 f26">{{ $t('w_0220') }}</view>
						</view>
						<view class="d-b-c p-10-0">
							<view class="gray6">{{ currencyIcon() }}{{ formatNum(spendDetail.account4) }}</view>
							<view class="gray9">-{{ currencyIcon() }}{{ formatNum(spendDetail.payAccount4) }}</view>
						</view>
					</view>
					<view class="border-b" v-if="spendDetail.payAccount5 > 0">
						<view class="d-b-c  p-10-0 ">
							<view class="flex-1 f26">{{ $t('w_0221') }}</view>
						</view>
						<view class="d-b-c p-10-0">
							<view class="gray6">{{ currencyIcon() }}{{ formatNum(spendDetail.account5) }}</view>
							<view class="gray9">-{{ currencyIcon() }}{{ formatNum(spendDetail.payAccount5) }}</view>
						</view>
					</view>
					<view class="border-b" v-if="spendDetail.payAccount6 > 0">
						<view class="d-b-c  p-10-0 ">
							<view class="flex-1 f26">{{ $t('w_0222') }}</view>
						</view>
						<view class="d-b-c p-10-0">
							<view class="gray6">{{ currencyIcon() }}{{ formatNum(spendDetail.account6) }}</view>
							<view class="gray9">-{{ currencyIcon() }}{{ formatNum(spendDetail.payAccount6) }}</view>
						</view>
					</view>
					<view class="border-b" v-if="spendDetail.payAccount7 > 0">
						<view class="d-b-c  p-10-0 ">
							<view class="flex-1 f26">{{ $t('w_0223') }}</view>
						</view>
						<view class="d-b-c p-10-0">
							<view class="gray6">{{ currencyIcon() }}{{ formatNum(spendDetail.account7) }}</view>
							<view class="gray9">-{{ currencyIcon() }}{{ formatNum(spendDetail.payAccount7) }}</view>
						</view>
					</view>
					<view class="border-b" v-if="spendDetail.payAccount8 > 0">
						<view class="d-b-c  p-10-0 ">
							<view class="flex-1 f26">{{ $t('w_0224') }}</view>
						</view>
						<view class="d-b-c p-10-0">
							<view class="gray6">{{ currencyIcon() }}{{ formatNum(spendDetail.account8) }}</view>
							<view class="gray9">-{{ currencyIcon() }}{{ formatNum(spendDetail.payAccount8) }}</view>
						</view>
					</view>
					<view class="border-b" v-if="spendDetail.payAccount9 > 0">
						<view class="d-b-c  p-10-0 ">
							<view class="flex-1 f26">{{ $t('ENU_ACCOUNT_9') }}</view>
						</view>
						<view class="d-b-c p-10-0">
							<view class="gray6">{{ currencyIcon() }}{{ formatNum(spendDetail.account9) }}</view>
							<view class="gray9">-{{ currencyIcon() }}{{ formatNum(spendDetail.payAccount9) }}</view>
						</view>
					</view>
					<view class="border-b" v-if="spendDetail.payAccount10 > 0">
						<view class="d-b-c  p-10-0 ">
							<view class="flex-1 f26">{{ $t('ENU_ACCOUNT_9') }}</view>
						</view>
						<view class="d-b-c p-10-0">
							<view class="gray6">{{ currencyIcon() }}{{ formatNum(spendDetail.account10) }}</view>
							<view class="gray9">-{{ currencyIcon() }}{{ formatNum(spendDetail.payAccount10) }}</view>
						</view>
					</view>
					<view class="border-b" v-if="spendDetail.payAccount12 > 0">
						<view class="d-b-c  p-10-0 ">
							<view class="flex-1 f26">{{ $t('w_1004') }}</view>
						</view>
						<view class="d-b-c p-10-0">
							<view class="gray6">{{ currencyIcon() }}{{ formatNum(spendDetail.account12) }}</view>
							<view class="gray9">-{{ currencyIcon() }}{{ formatNum(spendDetail.payAccount12) }}</view>
						</view>
					</view>
					<view class="border-b" v-if="spendDetail.payAccount13 > 0">
						<view class="d-b-c  p-10-0 ">
							<view class="flex-1 f26">{{ $t('fn_049') }}</view>
						</view>
						<view class="d-b-c p-10-0">
							<view class="gray6">{{ currencyIcon() }}{{ formatNum(spendDetail.account13) }}</view>
							<view class="gray9">-{{ currencyIcon() }}{{ formatNum(spendDetail.payAccount13) }}</view>
						</view>
					</view>
					<view class="border-b" v-if="spendDetail.payAccount14 > 0">
						<view class="d-b-c  p-10-0 ">
							<view class="flex-1 f26">{{ $t('fn_020') }}</view>
						</view>
						<view class="d-b-c p-10-0">
							<view class="gray6">{{ currencyIcon() }}{{ formatNum(spendDetail.account14) }}</view>
							<view class="gray9">-{{ currencyIcon() }}{{ formatNum(spendDetail.payAccount14) }}</view>
						</view>
					</view>
				</view>
			</template>
		</view>
		<view class="p-40-0">
			<button class="normal-sub-btn" @click="payFunc">{{ $t('w_0248') }}</button>
		</view>
		<popInput :title="$t('w_0251')" :password="true" :placeholder="payChannel == -1 ? $t('w_0316') : $t('w_0250')" :isShow="isPassword" @close="closePassword"></popInput>
		<!-- <view v-if="isQrcode">
			<view class="pop-bg" @click="isQrcode=false"></view>
			<view class="pop-success-s">
				<view class="d-c d-b-c hh100">
					<view class="d-e-c ww100" @click="isQrcode=false"><u-icon name="close" size="34rpx"
							color="#999"></u-icon></view>
					<view class="f30 gray3 fb tc mb20">微信支付</view>
					<canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas>
					<button class="pop-btn mt20" @click="isQrcode = false">确定</button>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
import { pay } from '@/common/pay.js';
import Popup from '@/components/uni-popup.vue';
import utils from '@/common/utils.js';
import popInput from '@/components/pop-input.vue';
/* 引入uQRCode */
import UQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
export default {
	components: {
		Popup,
		popInput
	},
	data() {
		return {
			orderAmount: '',
			consumeBalance: '',
			pay_type: 0,
			isPassword: false,
			businessType: 1,
			payChannel: -1,
			payType: -1,
			openHF: false,
			openJD: false,
			openZX: false,
			openWX: true,
			openZH: false,
			bindCode: '',
			showUp: false,
			isPopup: false,
			orderCode: '',
			specialArea: '',
			spendDetail: {},
			jdList: [],
			adaList: [],
			payConfig: {
				pay4: true, //京东银行卡
				pay12: true, //宝付微信
				pay13: true, //汇付微信
				pay15: true, //汇付银行卡
				pay20: true //微信APP（true=显示，false=不显示）
			},
			time1: null,
			registerForm: {
				memberName: '',
				memberCode: '',
				phone: '',
				email: '',
				loginPassword: '',
				payPassword: '',
				urlAddress: ''
			},
			showImg: false,
			specialType: 0,
			isQrcode: false,
			payTime: false,
			/* 0植树 1复消积分兑换 */
			type: 0,
			num:0,
			unitprice:0
		};
	},
	destroyed() {
		clearInterval(this.time1);
		this.time1 = null;
	},
	provide: function() {
		return {
			form: this.form
		};
	},
	watch: {
		showImg: function(n, o) {
			let self = this;
			if (n) {
				setTimeout(function() {
					self.showImg = false;
				}, 4000);
			}
		}
	},
	onLoad(e) {
		this.type = e.type || 0;
		this.pkTreeRule = e.pkTreeRule;
		this.shopQuantity = e.shopQuantity;
		this.pkBaseId = e.pkBaseId;
		this.num = e.num || 1;
		this.unitprice = e.unitprice || 1;
		// this.getGenerate();
		// // #ifdef APP-PLUS
		// this.getPayType();
		// // #endif
		// // #ifndef APP-PLUS
		// this.pay_type = 10;
		// // #endif
		this.getData();
	},
	onShow() {
		// this.getPayconfig();
		// this.getJdFast();
		// this.getAdaFast();
	},
	methods: {
		getQrcode(e) {
			console.log(e);
			let self = this;
			self.isQrcode = true;
			self.$nextTick(() => {
				// 获取uQRCode实例
				var qr = new UQRCode();
				// 设置二维码内容
				qr.data = e;
				// 设置二维码大小，必须与canvas设置的宽高一致
				qr.size = 200;
				// 调用制作二维码方法
				qr.make();
				// 获取canvas上下文
				var canvasContext = uni.createCanvasContext('qrcode', self); // 如果是组件，this必须传入
				console.log(canvasContext);
				// 设置uQRCode实例的canvas上下文
				qr.canvasContext = canvasContext;
				// 调用绘制方法将二维码图案绘制到canvas上
				qr.drawCanvas();
			});
		},
		closeCode() {
			this.isQrcode = false;
			this.payTime = false;
		},
		payStatus() {
			let self = this;
			let params = {
				payChannel: self.payChannel,
				businessCode: self.orderCode,
				businessType: self.businessType,
				payType: self.payType,
				bindCode: self.bindCode
			};
			let callback = function() {
				self._get('pay/status', params, res => {
					if (res.data == 1) {
						self.closeCode();
						self.money = '';
						self.payChannel = '';
						self.orderCode = '';
						self.payType = '';
						self.bindCode = '';
						uni.showModal({
							title: self.$t('w_0034'),
							content: self.$t('w_0089'),
							showCancel: false,
							success() {
								self.gotoPage('/pages/user/index/index');
							}
						});
					} else {
						if (self.payTime) {
							self.payStatus();
						}
					}
				});
			};
			setTimeout(function() {
				callback();
			}, 5000);
		},
		getPayType() {
			let self = this;
			let url = this.config.yxyapi;
			uni.request({
				url: url+'/yiti.php',
				data: {
					type: 2,
					platform: self.getPlatform()
				},
				success: result => {
					console.log(result);
					var data = result.data;
					self.pay_type = data.pay_type;
				},
				error: error => {
					console.log('----------------error');
					console.log(error);
				}
			});
		},
		copy() {
			let self = this;
			let data = [
				{
					name: self.$t('CK_KS_14'),
					value: self.registerForm.memberName
				},
				{
					name: self.$t('MN_T_1'),
					value: self.registerForm.memberCode
				},
				{
					name: self.$t('w_0160'),
					value: self.registerForm.phone
				},
				{
					name: self.$t('w_0041'),
					value: self.registerForm.loginPassword
				},
				{
					name: self.$t('N_I_217'),
					value: self.registerForm.payPassword
				},
				{
					name: self.$t('PER_DA_44'),
					value: self.registerForm.email
				},
				{
					name: self.$t('w_0161'),
					value: self.registerForm.urlAddress
				}
			];
			data = `${data.map(item => `${item.name} : ${item.value}`).join('\n')}`;
			uni.setClipboardData({
				data: data,
				showToast: false,
				success: function() {
					uni.showToast({
						title: '',
						icon: 'success'
					});
					console.log('success');
				}
			});
		},
		payFunc() {
			if (this.payType == -1) {
				this.getGenerate();
				this.isPassword = true;
			} else {
				this.zxPay();
			}
		},
		/* 生成token */
		getGenerate() {
			let self = this;
			self._get('system/api/idempotent/generate', {}, res => {
				uni.setStorageSync('token', res.msg);
			});
		},
		changePayType(payChannel, payType, bindCode) {
			if (payChannel == -1 && payType == -1 && bindCode == '') {
				this.openZH = !this.openZH;
			}
			this.payChannel = payChannel;
			this.payType = payType;
			this.bindCode = bindCode || '';
		},
		getData() {
			if(this.type == 0){
				this.getTree();
			}else if(this.type == 1){
				this.getExchange();
			}else if(this.type == 2){
				this.getCurrencyType();
			}
		},
		getCurrencyType(){
			let self = this;
			self._post(
				'member/api/member/get-currency-type',
				{
					number: self.num,
				},
				res => {
					self.orderAmount = self.unitprice*self.num;
					self.spendDetail = res.data;
					// if (!self.time1) {
					// 	self.openAgreement();
					// }
				}
			);
			
		},
		getExchange(){
			let self = this;
			self._get(
				'member/api/recharge/deduction-amount',
				{
					times: self.num,
				},
				res => {
					self.orderAmount = self.unitprice*self.num;
					self.spendDetail = res.data;
					// if (!self.time1) {
					// 	self.openAgreement();
					// }
				}
			);
		},
		getTree(){
			let self = this;
			self._post(
				'activity/api/sa-tree-order/deductionAccount',
				{
					shopQuantity: self.shopQuantity,
					pkBaseId: self.pkBaseId,
					pkTreeRule: self.pkTreeRule
				},
				res => {
					self.consumeBalance = res.data.consumeBalance;
					self.orderAmount = res.data.orderAmount;
					self.spendDetail = res.data;
					// if (!self.time1) {
					// 	self.openAgreement();
					// }
				}
			);
		},
		hidePopupFunc() {
			this.isPopup = false;
			uni.reLaunch({
				url: '/pages/order/myorder'
			});
		},
		/* 京东银行卡绑卡列表 */
		getPayconfig() {
			let self = this;
			self._get('pay/config', {}, res => {
				self.payConfig = res.data;
			});
		},
		/* 京东银行卡绑卡列表 */
		getJdFast() {
			let self = this;
			self._get('pay/jd-fast/list', {}, res => {
				self.jdList = res.data;
			});
		},
		/* 汇付银行卡绑卡列表 */
		getAdaFast() {
			let self = this;
			self._get('pay/ada-fast/list', {}, res => {
				self.adaList = res.data;
			});
		},
		//  秒数转化为时分秒
		formatSeconds(value) {
			//  秒
			let second = parseInt(value);
			//  分
			let minute = 0;
			//  小时
			let hour = 0;
			//  天
			//  let day = 0
			//  如果秒数大于60，将秒数转换成整数
			if (second > 60) {
				//  获取分钟，除以60取整数，得到整数分钟
				minute = parseInt(second / 60);
				//  获取秒数，秒数取佘，得到整数秒数
				second = parseInt(second % 60);
				//  如果分钟大于60，将分钟转换成小时
				if (minute > 60) {
					//  获取小时，获取分钟除以60，得到整数小时
					hour = parseInt(minute / 60);
					//  获取小时后取佘的分，获取分钟除以60取佘的分
					minute = parseInt(minute % 60);
					//  如果小时大于24，将小时转换成天
					//  if (hour > 23) {
					//    //  获取天数，获取小时除以24，得到整天数
					//    day = parseInt(hour / 24)
					//    //  获取天数后取余的小时，获取小时除以24取余的小时
					//    hour = parseInt(hour % 24)
					//  }
				}
			}

			let result = '' + parseInt(second) + this.$t('ENU_SETTLE_P_1');
			if (minute > 0) {
				result = '' + parseInt(minute) + this.$t('S_L_8') + result;
			}
			if (hour > 0) {
				result = '' + parseInt(hour) + this.$t('S_L_7') + result;
			}
			//  if (day > 0) {
			//    result = '' + parseInt(day) + '天' + result
			//  }
			return result;
		},
		// closePassword(e) {
		// 	this.isPassword = false;
		// 	if (this.specialType == 1 || this.specialType == 4) {
		// 		this.resPay(e);
		// 	} else {
		// 		this.zxPay(e);
		// 	}
		// },
		closePassword(e) {
			console.log(e);
			console.log(this.specialType);
			console.log(this.payChannel);
			if (e) {
				if (this.specialType == 1 || this.specialType == 4) {
					this.resPay(e);
				} else {
					if (this.payChannel == 4) {
						this.jdFast(e);
					} else if (this.payChannel == 6) {
						this.adaFast(e);
					} else if (this.payChannel == -1) {
						this.yuePay(e);
					}
				}
			}
			this.isPassword = false;
		},
		adaFast(e) {
			let self = this;
			let params = {
				smsCode: e,
				bindCode: self.bindCode,
				orderCode: self.orderCode
			};
			self._post('pay/ada-fast/pay-confirm', params, res => {
				uni.showModal({
					title: self.$t('w_0034'),
					content: res.msg,
					success() {
						self.money = '';
						self.payChannel = '';
						self.orderCode = '';
						self.payType = '';
						self.bindCode = '';
					}
				});
			});
		},
		jdFast(e) {
			let self = this;
			let params = {
				smsCode: e,
				bindCode: self.bindCode,
				orderCode: self.orderCode
			};
			self._post('pay/jd-fast/pay-confirm', params, res => {
				uni.showModal({
					title: self.$t('w_0034'),
					content: res.msg,
					success() {
						self.money = '';
						self.payChannel = '';
						self.orderCode = '';
						self.payType = '';
						self.bindCode = '';
					}
				});
			});
		},
		zxPay() {
			let self = this;
			let params = {
				payChannel: self.payChannel,
				businessCode: self.orderCode,
				businessType: self.businessType,
				payType: self.payType,
				bindCode: self.bindCode
			};
			self._post('pay/unifiedorder', params, res => {
				if (res.code == 200) {
					/* 微信支付 */
					if (self.payType == 2) {
						self.getQrcode(res.data);
						self.payTime = true;
						self.payStatus();
					}
					if (self.payType != 2) {
						self.isPassword = true;
					}
				}

				console.log(res);
				uni.hideLoading();
			});
		},
		resPay(e) {
			let self = this;
			let params = {
				payPwd: e, //支付密码
				orderCode: self.orderCode, //订单编号
				specialArea: self.specialArea //所属专区
			};
			self._post('sale/api/order/pay-reg-order', params, res => {
				self.registerForm = res.data;
				self.isPopup = true;
			});
		},
		yuePay(e) {
			let self = this;
			let params = {};
			let url = '';
			if(self.type == 0){
				params = {
					payPwd: e, //支付密码
					pkBaseId: self.pkBaseId, //活动单号
					pkTreeRule: self.pkTreeRule, //活动单号
					shopQuantity: self.shopQuantity //购买数量
				};
				url = 'activity/api/sa-tree-order/shoppingTree';
				self._post(url, params, res => {
					uni.showModal({
						content: res.msg,
						showCancel: false,
						success(o) {
							if (o.confirm) {
								uni.reLaunch({
									url: '/pages/index/index'
								});
							}
						}
					});
				});
			}else if(self.type == 1){
				params = {
					times: this.num,
					payPwd: e 
				}
				url= '/member/api/recharge/redeem-points';
				self._post(url, params, res => {
					uni.showModal({
						content: res.msg,
						showCancel: false,
						success(o) {
							if (o.confirm) {
								uni.navigateBack()
							}
						}
					});
				});
			}else if(self.type == 2){
				params = {
					number: this.num,
					payPassword: e 
				}
				url= 'member/api/member/exchange-annuity-purchase';
				self._post(url, params, res => {
					uni.showModal({
						content: res.msg,
						showCancel: false,
						success(o) {
							if (o.confirm) {
								uni.reLaunch({
									url: '/pages/user/index/index'
								});
							}
						}
					});
				});
			}
			
		},
		openAgreement() {
			let self = this;
			self.time1 = setInterval(function() {
				if (self.form.payTime > 0) {
					self.form.payTime--;
				} else {
					clearInterval(self.time1);
					self.time1 = null;
				}
			}, 1000);
		}
	}
};
</script>

<style lang="scss">
.pop-bg {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 99;
	background-color: rgba(0, 0, 0, 0.65);
}

.upgrade-pop {
	position: fixed;
	left: 0;
	top: 300rpx;
	right: 0;
	z-index: 100;
	width: 600rpx;
	margin: auto;
}

.cashier {
	padding: 0 22rpx 0 23rpx;
}

.cashier-top {
	height: 309rpx;
	padding: 60rpx 0 76rpx 0;
	box-sizing: border-box;
}

.content-box {
	width: 704rpx;
	box-sizing: border-box;
	padding: 0 22rpx 0 22rpx;
	margin-bottom: 20rpx;
	background: #ffffff;
	border-radius: 20rpx;
	word-break: break-all;
	line-height: 1.5;
	padding-bottom: 86rpx;

	.info-title {
		padding-top: 39rpx;
		margin-bottom: 15rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #222;
	}
}

.pay-icon {
	width: 46rpx;
	height: 46rpx;
	margin-right: 11rpx;
}

.pay-icon.wx {
	width: 36rpx;
	height: 34rpx;
}

.pay-item {
	padding: 20rpx 0;
}

.radio-check {
	width: 32rpx;
	height: 32rpx;
	background: #ffffff;
	border: 2rpx solid #dddddd;
	border-radius: 50%;
	margin-right: 11rpx;
	margin-left: 20rpx;
	position: relative;
	box-sizing: border-box;
}

.radio-check.checked {
	border: none;
	background-color: #fb3024;
}

.radio-check.checked::after {
	content: '';
	position: absolute;
	z-index: 1;
	width: 16rpx;
	height: 16rpx;
	background: #ffffff;
	border-radius: 50%;
	left: 8rpx;
	top: 8rpx;
}

.icon.icon-jiantou {
	font-size: 26rpx;
	color: #999;
	font-weight: bold;
	margin-left: 10rpx;
	transition: transform 0.4s;
}

.icon.icon-jiantou.checked {
	transform: rotate(90deg);
}

.progress-box {
	width: 507rpx;
	height: 24rpx;
	background: #ffffff;
	border-radius: 12rpx;
	position: relative;
	margin: 30rpx auto;
}

.progress-box-item {
	width: 20%;
	position: absolute;
	left: 0;
	top: 0;
	height: 24rpx;
	background: #fb3024;
	border-radius: 12rpx;
}

.copy-text {
	position: absolute;
	left: 100%;
	top: 0;
	bottom: 0;
	margin: auto;
	padding-left: 20rpx;
	white-space: nowrap;
	line-height: 1;
	display: flex;
	align-items: center;
}

.res-item {
	min-height: 58rpx;
	border-bottom: 1rpx solid #eee;
	border-radius: 0;
}

.res-item-name {
	width: 240rpx;
	// padding-left: 55rpx;
	flex-shrink: 0;
	box-sizing: border-box;
	color: #999;
	font-size: 24rpx;
}

.res-item-name-r {
	flex-shrink: 0;
	word-break: break-all;
}

.s-pop-btn {
	width: 508rpx;
	height: 72rpx;
	background: #fb3024;
	border-radius: 36rpx;
	font-size: 30rpx;
	font-family: SourceHanSansCN;
	font-weight: 400;
	word-break: break-all;
	padding: 0 20rpx;
	box-sizing: border-box;
	color: #f9f9f9;
	line-height: 1.5;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 20rpx auto;
}

.autoBox {
	height: 0;
	overflow: hidden;
	transition: all 0.3s ease;
}

.autoBox.open {
	height: auto;
}

.gitImage {
	position: absolute;
	z-index: 2;
	left: 0;
	top: 0;
	bottom: 0;
	width: 600rpx;
	height: 600rpx;
	margin: auto;
}

.gitImage2 {
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	bottom: 0;
	width: 600rpx;
	height: 600rpx;
	margin: auto;
}

.pop-success-s {
	position: fixed;
	z-index: 99;
	width: 664rpx;
	background: #ffffff;
	border-radius: 10px;
	padding: 50rpx 20rpx;
	box-sizing: border-box;
	left: 0;
	top: 20%;
	right: 0;
	margin: auto;
}
</style>
