<template>
	<div class="order">
		<div class="left">
			<div class="left-top">
				<div class="title">用户列表</div>
			</div>
			<div class="order-box">
				<div class="search">
					<Input search enter-button="搜索" v-model="userFrom.keyword" placeholder="搜索手机号/ID" size="large"
						@on-search="search" />
				</div>
				<userList v-if="userList.length" :userList="userList" :total="total" @selectUser="selectUser"
					@addPage="addPage"></userList>
				<div v-else class="no-order">
					<img src="../../assets/images/no-order.png" alt="" />
					<span class="trip">噢～目前暂无用户</span>
				</div>
			</div>
		</div>
		<div v-if="total" class="order-data">
			<div class="header">
				<div class="item" :class="{
            sel: sle == index,
            'neighbor-left': sle - index == 1,
            'neighbor-right': index - sle == 1,
          }" v-for="(tab, index) in tabs" v-show="!index || !selectUserData.delete_time" :key="index"
					@click="selectTab(index)" v-if="index!=1">
					<div class="item-wrap">
						{{ tab }}
					</div>
				</div>
				<div class="box" :class="{ 'neighbor-right': selectUserData.delete_time || sle == 2 }"></div>
			</div>
			<div class="content" :class="{ 'border-radius': sle }">
				<div v-if="sle === 0" class="detail">
					<div class="user">
						<div><img class="img" :src="selectUserInfo.avatar" alt="" /></div>
						<div class="user-content">
							<div class="name-wrap">
								<div class="name">{{ selectUserInfo.nickname }}</div>
								<div v-if="selectUserInfo.vip_name" class="tag">
									{{ selectUserInfo.vip_name }}
								</div>
								<div v-if="selectUserData.delete_time">（已注销）</div>
							</div>
							<div class="phone-wrap">
								<div v-if="selectUserInfo.phone" class="phone">
									{{ selectUserInfo.phone }}
								</div>
								<div>
									余额<span class="num">{{ selectUserInfo.now_money }}</span>
								</div>
								<div>
									积分<span class="num">{{ selectUserInfo.integral }}</span>
								</div>
								<div v-if="selectUserInfo.is_money_level">
									付费会员到期：
									<span class="time">{{
                    selectUserInfo.is_ever_level
                      ? '永久会员'
                      : selectUserInfo.overdue_time || '已过期'
                  }}</span>
								</div>
							</div>
						</div>
					</div>
					<Tabs v-model="tabActive" :animated="false">
						<TabPane v-for="item in menus" :key="item.value" :label="item.name" :name="item.value"
							:data-name="item.component">
							<component :is="item.component" :userInfo="selectUserInfo" :type="item.value"></component>
						</TabPane>
					</Tabs>
				</div>
				<div v-if="sle === 1" class="member">
					<Form :model="rechargeData" :label-width="82">
						<FormItem label="会员时长：">
							<template v-if="memberCheck.overdue_time">
								<span class="num">{{ memberCheck.vip_day }}</span>天（{{ memberCheck.overdue_time }} 到期）
							</template>
							<span v-else class="num">永久</span>
						</FormItem>
						<FormItem :label-width="0" class="merber-radio-group">
							<RadioGroup v-model="rechargeData.merber_id">
								<Radio v-for="item in memberCard" :key="item.id" :label="item.id" border>
									<div>{{ item.title }}</div>
									<div>
										¥<span class="num">{{ item.pre_price }}</span>
									</div>
									<div class="marking">¥{{ item.price }}</div>
								</Radio>
							</RadioGroup>
						</FormItem>
					</Form>
				</div>
				<div v-if="sle === 2" class="balance">
					<Form :model="rechargeData" :label-width="82">
						<FormItem label="充值方式：">
							<RadioGroup v-model="rechargeType" type="button" button-style="solid">
								<Radio :label="1">充值套餐</Radio>
								<Radio :label="2">自定义充值</Radio>
							</RadioGroup>
						</FormItem>
						<FormItem v-show="rechargeType == 1" :label-width="0" class="merber-radio-group">
							<RadioGroup v-model="rechargeData.rechar_id">
								<Radio v-for="item in rechargeList" :key="item.id" :label="item.id" border>
									<div class="money">
										¥<span class="num">{{ item.price }}</span>
									</div>
									<div class="marking">额外赠送：¥ {{ item.give_money }}</div>
								</Radio>
							</RadioGroup>
						</FormItem>
						<FormItem v-show="rechargeType == 2" label="充值金额：">
							<InputNumber v-model="payPrice" :min="1" :max="9999999" placeholder="0.00"></InputNumber>
						</FormItem>
						<FormItem  label="邀请会员：">
							<InputNumber v-model="usercodeid" placeholder="请扫码或者输入会员码"></InputNumber>
						</FormItem>
					</Form>
				</div>
			</div>
			<div v-if="sle" class="footer">
				<Button @click="recharge">点击支付</Button>
			</div>
		</div>
		<Modal v-model="modalPay" footer-hide width="450px" class="modalPay" @on-cancel="yuePayClear">
			<div class="payPage">
				<div class="header acea-row row-center-wrapper">
					<div class="pictrue"><img src="../../assets/images/gold.png" /></div>
					<div class="text">应收金额(元)</div>
				</div>
				<div class="money">
					¥<span class="num">{{ rechargeData.price }}</span>
				</div>
				<Input v-model="rechargeData.auth_code" ref="rechargeNum" size="large" type="url"
					placeholder="请点击输入框聚焦扫码或输入编码号" style="margin-top: 16px" />
				<div class="process">
					<div class="pictrue">
						<img src="../../assets/images/process2.png" />
					</div>
					<div class="list acea-row row-between-wrapper">
						<div class="item one">
							<div class="name">出示付款码</div>
							<div>支付宝/微信</div>
						</div>
						<div class="item two">
							<div class="name">扫描付款码</div>
							<div>扫码枪</div>
						</div>
						<div class="item three">
							<div class="name">确认收款</div>
							<div>收银台点击确认</div>
						</div>
					</div>
				</div>
				<Button type="primary" class="bnt" @click="confirm">确认</Button>
			</div>
		</Modal>
		<Modal v-model="modalCash" class="cash" footer-hide width="770px" @on-cancel="cancel">
			<div class="cashPage acea-row">
				<div class="left">
					<div class="picture">
						<img src="../../assets/images/gold.png" />
					</div>
					<div class="text">应收金额(元)</div>
					<div class="money">
						¥<span class="num">{{ rechargeData.price || 0 }}</span>
					</div>
				</div>
				<div class="right">
					<div class="rightCon">
						<div class="top acea-row row-between-wrapper">
							<div>实际收款(元)</div>
							<div class="num">{{ collection }}</div>
						</div>
						<div class="center acea-row row-between-wrapper">
							<div>需找零(元)</div>
							<div v-if="$computes.Sub(collection, rechargeData.price || 0) > 0" class="num">
								{{ $computes.Sub(collection, rechargeData.price || 0) }}
							</div>
							<div v-else class="num">0</div>
						</div>
						<div class="bottom acea-row">
							<div v-for="(item, index) in numList" :key="index" :class="item == '.' ? 'spot' : ''"
								class="item acea-row row-center-wrapper" @click="numTap(item)">
								{{ item }}
							</div>
							<div class="item acea-row row-center-wrapper" @click="delNum">
								<Icon type="ios-backspace" />
							</div>
						</div>
					</div>
					<Button type="primary" @click="cashBnt">确认</Button>
				</div>
			</div>
		</Modal>
		<settleDrawer v-model="settleVisible" :list="payList" :type="payType" :money="rechargeData.price"
			:collection="collection" @payPrice="onPayPrice" @numTap="numTap" @delNum="delNum" @cashBnt="cashBnt">
		</settleDrawer>
	</div>
</template>

<script>
	import userInfo from './components/userInfo.vue';
	import userTable from './components/userTable.vue';
	import userList from './components/userList';
	import goodsList from '@/pages/hang/components/goodsList';
	import userOrder from '@/pages/order/components/userOrder';
	import orderDetails from '@/pages/order/components/orderDetails';
	import orderRecord from '@/components/orderRecord';
	import settleDrawer from "@/components/settleDrawer";
	import {
		getRechargeData
	} from '@/api/recharge';
	import '../../assets/js/core.js';
	import {
		userListApi,
		userSaveApi,
		checkOrderApi,
		readUserInfo,
		getMemberCard,
		memberRecharge,
	} from '@api/user';

	export default {
		components: {
			userList,
			goodsList,
			userOrder,
			orderDetails,
			orderRecord,
			userInfo,
			userTable,
			settleDrawer,
		},
		data() {
			return {
				// 邀请充值用户id
				usercodeid: '',
				userList: [],
				// orderListData: [{}],
				tabs: ['会员详情', '付费会员', '余额充值'],
				sle: 0,
				// filterModal: false,
				rechargeList: [],
				searchData: {
					type: 0,
					status: 0,
					time: 0,
					people: 0,
				},
				rechargeData: {
					uid: 0,
					price: 0,
					rechar_id: 0,
					merber_id: 0,
					pay_type: 3,
					auth_code: '',
				},
				// selTypeIndex: 0,
				payPrice: 1,
				payNum: 0,
				total: 0,
				modalPay: false,
				userFrom: {
					keyword: '',
					page: 1,
					limit: 15,
					field_key: 'all',
				},
				selectUserData: {},
				selectUserInfo: {},
				menus: [{
						name: '用户信息',
						value: 'info',
						component: 'userInfo',
					},
					{
						name: '消费记录',
						value: 'order',
						component: 'userTable',
					},
					{
						name: '积分明细',
						value: 'integral',
						component: 'userTable',
					},
					{
						name: '持有优惠券',
						value: 'coupon',
						component: 'userTable',
					},
					{
						name: '余额变动',
						value: 'balance_change',
						component: 'userTable',
					},
					{
						name: '浏览足迹',
						value: 'visit',
						component: 'userTable',
					},
					{
						name: '推广人变更记录',
						value: 'spread_change',
						component: 'userTable',
					},
				],
				tabActive: 'info',
				memberCard: [],
				rechargeType: 1,
				modalCash: false,
				collectionArray: [],
				collection: 0,
				numList: ['7', '8', '9', '4', '5', '6', '1', '2', '3', '0', '.'],
				isOrderCreate: 0,
				settleVisible: false,
				payType: '',
				payList: [{
						label: '微信/支付宝',
						value: '',
						status: true,
					},
					{
						label: '现金收款',
						value: 'cash',
						status: true,
					},
				],
			};
		},
		computed: {
			memberCheck() {
				let member = this.memberCard.find(
					(item) => item.id == this.rechargeData.merber_id
				);
				return member || {};
			},
			balanceCheck() {
				let balance = this.rechargeList.find(
					(item) => item.id == this.rechargeData.rechar_id
				);
				return balance || {};
			},
		},
		watch: {
			'selectUserData.uid'(value) {
				if (value) {
					this.readUserInfo();
					this.getMemberCard();
				}
			},
			total(value) {
				if (value) {
					this.getRechargeData();
				} else {
					this.selectUserInfo = this.selectUserData = {};
					this.sle = 0;
					this.rechargeType = 1;
					this.payPrice = 1;
				}
			},
			payPrice(value) {
				this.$nextTick(() => {
					if (typeof value != 'number') {
						return;
					}
					if (parseFloat(value) == parseInt(value)) {
						return;
					}
					if (value.toString().length - (value.toString().indexOf('.') + 1) > 2) {
						this.payPrice = Number(value.toFixed(2));
					}
				});
			},
		},
		created() {
			this.userListApi();
		},
		beforeDestroy() {
			clearInterval(this.timer);
		},
		methods: {
			jsToJava() {
				try {
					window.Jsbridge.invoke(
						'openCacheBox',
						JSON.stringify({
							'p1-key': 'p1-value'
						}),
						this.myFunction()
					);
				} catch (e) {}
			},
			// 监听键盘函数
			keyboard() {
				let that = this;

				function delNums(item) {
					that.collectionArray.pop();
					that.collection = that.collectionArray.length ?
						that.collectionArray.join('') :
						0;
				}

				function numTaps(item) {
					if (that.defaultcalc === false) {
						that.collection = '';
						that.defaultcalc = true;
					}
					let x = String(that.collection).indexOf('.') + 1;
					let y = String(that.collection).length - x;
					if (x === 0 || y < 2) {
						if (that.collectionArray.join('') <= 9999999) {
							that.collectionArray.push(item);
						}
						that.collection =
							that.collectionArray.join('') > 99999999 ?
							99999999 :
							that.collectionArray.join('');
					}
				}

				document.onkeydown = function(event) {
					let e = event || window.event;
					let key = e.keyCode;
					if (that.modalCash) {
						event.stopPropagation(); // 阻止事件冒泡传递
						event.preventDefault(); //阻止默认事件原有功能
					}
					switch (key) {
						case 96:
						case 48:
							numTaps(0);
							break;
						case 97:
						case 49:
							numTaps(1);
							break;
						case 98:
						case 50:
							numTaps(2);
							break;
						case 99:
						case 51:
							numTaps(3);
							break;
						case 100:
						case 52:
							numTaps(4);
							break;
						case 101:
						case 53:
							numTaps(5);
							break;
						case 102:
						case 54:
							numTaps(6);
							break;
						case 103:
						case 55:
							numTaps(7);
							break;
						case 104:
						case 56:
							numTaps(8);
							break;
						case 105:
						case 57:
							numTaps(9);
							break;
						case 110:
							numTaps('.');
							break;
						case 190:
							numTaps('.');
							break;
						case 8:
							delNums();
							break;
					}
				};
			},
			//现金收款创建订单并支付
			cashBnt(payNum) {
				if (this.cashBntLoading) return;
				this.cashBntLoading = true;
				if (this.payType) {
					this.rechargeData.pay_type = 4;
				} else {
					this.rechargeData.pay_type = 3;
					this.rechargeData.auth_code = payNum;
				}
				this.confirm();
				setTimeout(() => {
					this.cashBntLoading = false;
				}, 1000);
				return
				// if (this.isOrderCreate) {
				//   this.getCashierPay('cash');
				// } else {
				//   this.confirm();
				// }
			},
			//清除计算机输入的数字
			delNum() {
				this.collectionArray.pop();
				this.collection = this.collectionArray.length ?
					this.collectionArray.join('') :
					0;
			},
			//输入实际收款金额
			numTap(item) {
				if (this.defaultcalc === false) {
					this.collection = '';
					this.defaultcalc = true;
				}
				let x = String(this.collection).indexOf('.') + 1;
				let y = String(this.collection).length - x;
				if (x === 0 || y < 2) {
					if (this.collectionArray.join('') <= 9999999) {
						this.collectionArray.push(item);
					}
					this.collection =
						this.collectionArray.join('') > 99999999 ?
						99999999 :
						this.collectionArray.join('');
				}
			},
			cancel() {
				this.collection = 0;
				this.collectionArray = [];
			},
			// 付费会员充值
			memberRecharge() {
				let rechargeData = {
					...this.rechargeData
				};
				delete rechargeData.rechar_id;
				if (
					this.rechargeData.pay_type == 4 &&
					this.rechargeData.price > Number(this.collection)
				) {
					return this.$Message.error('您付款金额不足');
				}
				memberRecharge(rechargeData)
					.then((res) => {
						const {
							status,
							data
						} = res.data;
						switch (status) {
							case 'SUCCESS':
								this.$Message.success('支付成功');
								this.settleVisible = false;
								this.search();
								this.payPrice = 1;
								if (this.rechargeData.pay_type == 4) {
									// this.modalCash = false;
									this.jsToJava();
								} else {
									// this.modalPay = false;
									this.rechargeData.auth_code = '';
								}
								break;
							case 'PAY_ING':
								let msg = this.$Message.loading({
									content: '等待支付中...',
									duration: 0,
								});
								this.checkOrderTime(data.order_id, msg);
								break;
							default:
								this.$Message.warning('支付失败');
								break;
						}
					})
					.catch((err) => {
						this.$Message.warning(err.msg);
					});
			},
			// 获取付费会员类型
			getMemberCard() {
				let {
					is_money_level,
					overdue_time
				} = this.selectUserData;
				getMemberCard({
					is_money_level,
					overdue_time,
				}).then((res) => {
					this.memberCard = res.data;
				});
			},
			readUserInfo() {
				readUserInfo(this.selectUserData.uid).then((res) => {
					this.selectUserInfo = res.data.ps_info;
				});
			},
			addPage() {
				if (this.userList.length < this.total) this.userFrom.page++;
				this.userListApi();
			},
			search() {
				this.userList = [];
				this.userFrom.page = 1;
				this.userListApi();
			},
			// 用户列表
			userListApi() {
				this.loading = true;
				userListApi(this.userFrom)
					.then((res) => {
						this.loading = false;
						this.total = res.data.count;
						if (this.userFrom.page === 1) {
							this.selectUserData = res.data.list.length ? res.data.list[0] : {};
							this.rechargeData.uid = res.data.list.length ?
								res.data.list[0].uid :
								'';
						}
						this.userList = this.userList.concat(res.data.list);
						let cashierUser = window.localStorage.getItem('cashierUser');
						if (cashierUser) {
							cashierUser = JSON.parse(cashierUser);
							if (
								Object.prototype.toString.call(cashierUser) === '[object Object]'
							) {
								for (const userItem of this.userList) {
									if (cashierUser.uid === userItem.uid) {
										cashierUser.now_money = userItem.now_money;
										window.localStorage.setItem(
											'cashierUser',
											JSON.stringify(cashierUser)
										);
										break;
									}
								}
							}
						}
					})
					.catch((err) => {
						this.loading = false;
						this.$Message.error(err.msg);
					});
			},
			keyupEvent(val) {
				if (val) {
					var re = /^\D*([0-9]\d*\.?\d{0,2})?.*$/;
					let price = val.toString().replace(re, '$1');
					this.payPrice = Number(price);
				} else {
					this.payPrice = '';
				}
			},
			selectTab(index) {
				this.sle = index;
				if (index == 1) {
					if (this.memberCard.length) {
						this.rechargeData.merber_id = this.memberCard[0].id;
					}
				} else if (index == 2) {
					this.rechargeType = 1;
					if (this.rechargeList.length) {
						this.rechargeData.rechar_id = this.rechargeList[0].id;
					}
				}
			},
			clear() {
				this.payPrice = 0;
				this.sel = 0;
			},
			yuePayClear() {
				this.$Message.destroy();
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}
			},
			getRechargeData() {
				getRechargeData().then((res) => {
					this.rechargeList = res.data.recharge_quota;
				});
			},
			// 确认充值
			confirm() {
				if (this.sle == 1) {
					return this.memberRecharge();
				}
				let rechargeData = {
					...this.rechargeData
				};
				if (this.rechargeType == 2) {
					delete rechargeData.rechar_id;
				}
				userSaveApi(rechargeData)
					.then((res) => {
						this.payNum = '';
						let status = res.data.status;
						let orderId = res.data.data.order_id;
						switch (status) {
							case 'SUCCESS':
								this.$Message.success('支付成功');
								this.settleVisible = false;
								// this.modalPay = false;
								// this.modal = false;
								this.search();
								// this.rechargeData.auth_code = '';
								this.payPrice = 1;
								this.$emit('getSuccess', this.totalPrice);
								if (this.rechargeData.pay_type == 4) {
									// this.modalCash = false;
									this.jsToJava();
								} else {
									// this.modalPay = false;
									this.rechargeData.auth_code = '';
								}
								break;
							case 'PAY_ING':
								let msg = this.$Message.loading({
									content: '等待支付中...',
									duration: 0,
								});
								this.checkOrderTime(orderId, msg);
								break;
							default:
								this.$Message.warning('支付失败');
								break;
						}
					})
					.catch((err) => {
						this.payNum = '';
						this.rechargeData.auth_code = '';
						this.$Message.error(err.msg);
					});
			},
			checkOrderTime(orderId, msg) {
				let that = this;
				let num = 1;
				let timer = (this.timer = setInterval(function() {
					that.checkOrder(orderId, timer, msg);
					num++;
					if (num >= 60) {
						clearInterval(timer);
						msg();
						that.$Message.success('支付失败');
					}
				}, 1000));
			},
			checkOrder(orderId, timer, msg) {
				checkOrderApi(this.sle == 2 ? 1 : 2, {
						order_id: orderId
					})
					.then((res) => {
						if (res.data.status == true) {
							msg();
							this.$Message.success('支付成功');
							this.$emit('getSuccess', this.totalPrice);
							this.modalPay = false;
							this.modal = false;
							clearInterval(timer);
							this.readUserInfo();
						}
					})
					.catch((err) => {
						msg();
						this.$Message.error(err.msg);
					});
			},
			selectUser(data) {
				this.selectUserData = data;
				this.rechargeData.uid = data.uid;
				this.sle = 0;
				this.rechargeData.rechar_id = 0;
				// this.selTypeIndex = 0;
				this.payPrice = 1;
			},
			// 点击充值按钮
			recharge(type) {
				if (!this.selectUserData.uid) {
					return this.$Message.error('请先选择会员');
				}
				if(this.sle == 2){
					this.rechargeData.bar_code = this.usercodeid;
				}else{
					this.rechargeData.bar_code = '';
				}
				if (this.sle == 1) {
					this.rechargeData.price = Number(this.memberCheck.pre_price);
				} else {
					if (this.rechargeType == 1) {
						this.rechargeData.price = this.balanceCheck.price;
					} else {
						if (!this.payPrice) {
							return this.$Message.error('请先输入金额');
						}
						this.rechargeData.price = this.payPrice;
					}
				}
				this.collection = this.rechargeData.price;
				// this.payType = type;
				this.settleVisible = true;
				// if (type) {
				//   // this.modalCash = true;
				//   this.rechargeData.pay_type = 4;
				//   this.keyboard();
				// } else {
				//   // this.modalPay = true;
				//   this.rechargeData.pay_type = 3;
				//   // this.$nextTick(() => {
				//   //   this.$refs.rechargeNum.focus();
				//   // });
				// }
			},
			onPayPrice(type) {
				this.payType = type;
				this.rechargeData.auth_code = '';
			},
		},
	};
</script>
<style scoped lang="stylus">
	::-webkit-scrollbar {
		display: none;
	}

	.order {
		display: flex;
		height: calc(100vh - 66px);
		padding: 20px;
		background-color: #F5F5F5;

		.left {
			flex-shrink: 0;
			display: flex;
			flex-direction: column;
			width: 460px;
			border-radius: 20px;
			background: #FFFFFF;

			.left-top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 24px;

				.title {
					color: rgba(0, 0, 0, 0.85);
					font-weight: 600;
					font-size: 20px;
				}

				.sx {
					color: #666666;

					.ios-funnel-outline {
						font-weight: bold;
						font-size: 12px;
					}
				}
			}

			.order-box {
				flex: 1;
				display: flex;
				flex-direction: column;
				min-height: 0;
				font-size: 18px;

				.search {
					padding: 0 24px 24px;

					/deep/.ivu-input {
						padding-left: 14px;
						border-color: #DDDDDD;
						border-radius: 20px 0 0 20px;
					}

					/deep/.ivu-input-search {
						border-radius: 0px 20px 20px 0px;
						background: #1890FF !important;
						font-size: 14px;
						line-height: normal;
					}
				}

				.pending-user {
					flex: 1;
				}
			}
		}

		.order-data {
			flex: 1;
			display: flex;
			flex-direction: column;
			min-width: 0;
			border-radius: 20px;
			margin-left: 20px;

			.content {
				flex: 1;
				padding: 24px;
				border-radius: 0 20px 20px;
				background: #FFFFFF;
				overflow-x: hidden;
			}

			.border-radius {
				border-radius: 20px 20px 0 0;
			}

			.header {
				display: flex;
				background: #FFFFFF;
				font-size: 18px;

				.box {
					flex: 1;
					background: #F5F5F5;
				}

				.item {
					cursor: pointer;
					background-color: #F5F5F5;
					transition: all 0.1s;
				}

				.item-wrap {
					padding: 16px 29px;
					border-radius: 20px 20px 0px 0px;
				}

				.sel {
					color: rgba(0, 0, 0, 0.85);
					font-weight: 500;

					.item-wrap {
						background: #FFFFFF;
					}
				}

				.neighbor-left {
					border-bottom-right-radius: 20px;
				}

				.neighbor-right {
					border-bottom-left-radius: 20px;
				}
			}

			.recharge {
				display: flex;
				flex-wrap: wrap;
				padding: 10px;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					border-radius: 10px;
					border: 1px solid #1890FF;
					padding: 24px 34px;
					width: 30%;
					height: 102px;
					margin: 1%;
					cursor: pointer;

					.price {
						font-size: 24px;
						color: #1890FF;
					}

					.give-price {
						color: #999999;
						font-size: 14px;
						white-space: nowrap;
					}
				}

				.item.sel {
					background-color: #1890FF;
					color: #fff;

					.price {
						font-size: 24px;
						color: #fff;
					}

					.give-price {
						color: #fff;
					}
				}
			}

			.diy-recharge {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-top: 200px;

				.text {
					font-size: 20px;
				}

				.inputNum {
					width: 45%;
					margin: 28px 0 14px 0;
					height: 66px;
				}

				/deep/ .ivu-input-number-large {
					height: 66px;
					font-size: 30px;
				}

				/deep/ .ivu-input-number-input-wrap {
					height: 66px;
				}

				/deep/ .ivu-input-number-handler-wrap {
					display: none;
				}

				/deep/ .ivu-input-number-large input {
					height: 66px;
					line-height: 66px;
				}

				.tip {
					font-size: 13px;
					color: rgba(153, 153, 153, 0.85);
					margin-top: 15px;
				}
			}

			.footer {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				height: 88px;
				padding: 0 88px;
				border-radius: 0 0 20px 20px;
				background: #FFFFFF;
				box-shadow: 0 -1px 11px 0 rgba(0, 0, 0, 0.06);

				.ivu-btn {
					width: 100%;
					height: 50px;
					border-color: #1890FF;
					border-radius: 25px;
					background: #1890FF;
					font-size: 18px !important;
					color: #FFFFFF;

					&:focus {
						box-shadow: none;
					}
				}
			}
		}
	}

	.payPage {
		text-align: center;
		padding: 16px;

		/deep/ .ivu-input {
			width: 394px !important;
			text-align: center;
		}

		.header {
			margin: 35px 0 3px 0;
		}

		.process {
			width: 394px;
			height: 158px;
			border: 1px dashed #D8D8D8;
			border-top: 1px dashed #fff;
			margin: -1px auto 0 auto;

			&.on {
				border-top: 1px dashed #D8D8D8;
				margin-top: 20px;

				.list {
					padding-left: 14px !important;
				}
			}

			.list {
				padding: 6px 10px 0 18px;

				.item {
					font-size: 12px;
					color: #666;

					.name {
						color: #333;
						font-size: 13px;
						font-weight: bold;
					}
				}
			}

			.pictrue {
				width: 362px;
				height: 68px;
				margin: 24px auto 0 auto;

				img {
					width: 100%;
					height: 100%;
				}
			}
		}

		.pictrue {
			width: 18px;
			height: 18px;

			img {
				width: 100%;
				height: 100%;
			}

			margin-right: 7px;
		}

		.text {
			color: rgba(0, 0, 0, 0.45);
			font-size: 14px;
		}

		.money {
			font-size: 18px;
			color: rgba(0, 0, 0, 0.85);

			.num {
				font-size: 32px;
				margin-left: 5px;
			}
		}

		.tip {
			width: 310px;
			height: 26px;
			background: rgba(255, 126, 0, 0.1);
			border-radius: 13px;
			font-size: 13px;
			color: #FF7E00;
			margin: 10px auto 0 auto;

			.icon {
				font-size: 16px;
				margin-right: 5px;
			}
		}

		.bnt {
			width: 394px;
			height: 38px;
			margin: 28px 0 15px 0;
		}
	}

	.detail {
		.user {
			display: flex;
			align-items: center;
			padding: 18px;
			border-radius: 10px;
			background: rgba(24, 144, 255, 0.05);

			.img {
				width: 80px;
				height: 80px;
				border-radius: 50%;
				margin-right: 20px;
				object-fit: cover;
			}

			.user-content {
				flex: 1;
				min-width: 0;
			}

			.name-wrap {
				display: flex;
				align-items: center;
			}

			.name {
				font-weight: 600;
				font-size: 18px;
				color: rgba(0, 0, 0, 0.85);
			}

			.tag {
				padding: 0 5px;
				border: 1px solid #1890FF;
				border-radius: 3px;
				margin-left: 6px;
				font-size: 12px;
				line-height: 16px;
				color: #1890FF;
			}

			.phone-wrap {
				display: flex;
				align-items: center;
				margin-top: 12px;
				font-size: 12px;
				color: rgba(51, 51, 51, 0.85);
			}

			.phone {
				margin-right: 20px;
			}

			.num {
				margin: 0 20px 0 4px;
				font-weight: 600;
				font-size: 17px;
				color: #F5222D;
			}

			.time {
				font-size: 14px;
				color: #1890FF;
			}
		}

		.tabbar {
			display: flex;
			padding: 17px 0;

			.item {
				height: 36px;
				padding: 0 19px;
				border-radius: 18px;
				font-size: 14px;
				line-height: 36px;
				color: #999999;
				cursor: pointer;

				&.active {
					background-color: #1890FF;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}
	}

	.member {
		>>>.ivu-form-item-content {
			font-size: 14px !important;
		}

		.num {
			color: #1890FF;
		}

		>>>.ivu-radio-border {
			display: inline-flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 180px;
			height: 110px;
			border: 1px solid #1890FF;
			border-radius: 10px;
			margin: 0 15px 15px 0;
			box-shadow: 0 0 14px 0 rgba(0, 84, 161, 0.18);
			font-weight: 500;
			font-size: 16px !important;
			color: #1890FF;

			&.ivu-radio-wrapper-checked {
				background-color: #1890FF;
				color: #FFFFFF;

				.num {
					color: #FFFFFF;
				}

				.marking {
					color: #FFFFFF;
				}
			}

			.ivu-radio {
				display: none;
			}

			.num {
				font-size: 24px;
			}
		}

		.marking {
			text-decoration: line-through;
			font-weight: normal;
			font-size: 14px;
			color: #999999;
		}
	}

	.balance {
		>>>.ivu-radio-border {
			display: inline-flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 180px;
			height: 110px;
			border: 1px solid #1890FF;
			border-radius: 10px;
			margin: 0 15px 15px 0;
			box-shadow: 0 0 14px 0 rgba(0, 84, 161, 0.18);

			&.ivu-radio-wrapper-checked {
				background-color: #1890FF;
				color: #FFFFFF;

				.num {
					color: #FFFFFF;
				}

				.marking {
					color: #FFFFFF;
				}
			}

			.ivu-radio {
				display: none;
			}
		}

		.money {
			font-weight: 500;
			font-size: 16px;
			color: #1890FF;
		}

		.num {
			font-size: 24px;
		}

		.marking {
			font-size: 14px;
			color: #999999;
		}

		.ivu-input-number {
			width: 460px;
			height: 36px;
		}

		>>>.ivu-input-number-input-wrap {
			height: 36px;
		}

		>>>.ivu-input-number-input {
			height: 36px;
			line-height: 36px;
		}
	}

	>>>.ivu-tabs {
		.ivu-tabs-bar {
			padding: 20px 0 17px;
			border-bottom-color: #F4F4F4;
			margin-bottom: 0;
		}

		.ivu-tabs-ink-bar {
			display: none;
		}

		.ivu-tabs-tab {
			padding: 10px 19px;
			margin-right: 5px;
			line-height: 16px;
			color: #999999;

			&.ivu-tabs-tab-active {
				border-radius: 18px;
				background-color: #1890FF;
				color: #FFFFFF;
			}
		}
	}

	.cash {
		/deep/ .ivu-modal-body {
			padding: 0 !important;
		}
	}

	.cashPage {
		text-align: center;

		.right {
			width: 488px;
			background: #F5F5F5;
			padding: 16px 16px 16px 0;
			border-radius: 0 6px 6px 0;

			/deep/ .ivu-btn-primary {
				width: 100px;
			}

			.rightCon {
				width: 388px;
				height: 506px;
				margin: 35px auto 20px auto;
				background-color: #fff;
				border-radius: 14px;

				.top {
					height: 80px;
					color: rgba(0, 0, 0, 0.65);
					font-size: 13px;
					padding: 0 20px;

					.num {
						font-size: 42px;
						color: rgba(0, 0, 0, 0.85);
					}
				}

				.center {
					width: 100%;
					height: 46px;
					background-color: #1890FF;
					font-size: 13px;
					color: #fff;
					padding: 0 20px;

					.num {
						font-size: 27px;
					}
				}

				.bottom {
					padding: 10px 0 0 8px;

					.item {
						width: 108px;
						height: 62px;
						background: #FAFAFA;
						border-radius: 9px;
						border: 1px solid rgba(0, 0, 0, 0.15);
						color: #1890FF;
						font-size: 32px;
						margin-left: 12px;
						margin-top: 12px;
						cursor: pointer;

						&.on {
							background: #1890FF;
							color: #FFFFFF;
							font-size: 20px;
						}

						&.spot {
							padding-bottom: 15px;
						}
					}
				}
			}
		}

		.left {
			width: 282px;
			padding: 16px 0 16px 16px;

			.picture {
				width: 110px;
				height: 110px;
				margin: 180px auto 0 auto;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.text {
				color: rgba(0, 0, 0, 0.45);
				font-size: 14px;
				margin-top: 14px;
			}

			.money {
				color: rgba(0, 0, 0, 0.85);
				font-size: 18px;

				.num {
					font-size: 32px;
					margin-left: 5px;
				}
			}
		}
	}

	.merber-radio-group {
		// margin: 0 -15px -15px 0;
	}
</style>