<template>
	<view class="commonPageBox">
		<z-nav-bar title="个人资料"></z-nav-bar>
		<view class="contentBox commonPageContentBox">
			<view class="avatar_box">
				<image :src="userData.avatar" class="per_mes_img" @click="
					handleClickRightContent(
					  { type: 'avatar' },
					  userData.avatar ? '' : 'bind'
					)
				  "></image>
				<text class="avatar_text" @click="
					handleClickRightContent(
					  { type: 'avatar' },
					  userData.avatar ? '' : 'bind'
					)
				  ">{{ userData.avatar ? "更换头像" : "设置头像" }}</text>
			</view>
			<view class="set_box">
				<common-list :dataList="dataList" isNoIcon="true" label="title">
					<template slot="rightSlot" slot-scope="slotProps">
						<view class="right_content">
							<view v-if="slotProps.row.type == 'sex'">
								<text v-if="userData[slotProps.row.indexValue]">
									{{ userData[slotProps.row.indexValue] == 2 ? "女" : "男" }}</text>
								<view v-else @click="handleClickRightContent(slotProps.row, 'bind')">未设置</view>
							</view>
							<view v-if="slotProps.row.type == 'nickname'">
								<text v-if="userData[slotProps.row.indexValue]">
									{{ userData[slotProps.row.indexValue] }}</text>
								<view v-else @click="handleClickRightContent(slotProps.row, 'bind')">未设置</view>
							</view>
							<view v-if="slotProps.row.type == 'tel'">
								<text v-if="userData[slotProps.row.indexValue]">
									{{ userData[slotProps.row.indexValue] }}</text>
								<view v-else @click="handleClickRightContent(slotProps.row, 'bind')">点击绑定</view>
							</view>
							<view v-if="slotProps.row.type == 'password'"
								@click="handleClickRightContent(slotProps.row, 'bind')">
								{{ userData[slotProps.row.indexValue] ? "更改密码" : "设置密码" }}
							</view>
							<view v-if="slotProps.row.type == 'email'">
								<text v-if="userData[slotProps.row.indexValue]">
									{{ userData[slotProps.row.indexValue] }}</text>
								<view v-else @click="handleClickRightContent(slotProps.row, 'bind')">点击绑定</view>
							</view>
							<view v-if="slotProps.row.type == 'age'">
								<text v-if="userData[slotProps.row.indexValue]">
									{{ userData[slotProps.row.indexValue] }}</text>
								<view v-else @click="handleClickRightContent(slotProps.row, 'bind')">未设置</view>
							</view>

							<u-icon v-if="
                  userData[slotProps.row.indexValue] &&
                  userData[slotProps.row.indexValue] != ''
                " class="editIcon" name="edit-pen-fill" color="#5188e5" size="20"
								@click.native.stop="handleClickRightContent(slotProps.row)"></u-icon>
						</view>
						<text class="fdButtonBox aui-text-success">{{ slotProps.row.content }}</text>

						<view> </view>
					</template>
				</common-list>
			</view>
			<view class="button_box">
			</view>
		</view>
		<u-popup :show="editModalShow" :round="10" @close="">
			<view class="tanchu">
				<view class="dp_title">{{ editModalTitle }}</view>
				<template v-if="currentEditType == 'nickname'">
					<u--input v-model="editForm.nickname" placeholder="请输入昵称" border="surround" clearable></u--input>
				</template>
				<template v-if="currentEditType == 'tel'">
					<view style="display: flex">
						<view class="quhao">
							<uni-data-select class="quhaoSel" placeholder="请选择区号" v-model="editForm.quCode"
								:localdata="quCodeList"></uni-data-select>
						</view>
						<u--input v-model="editForm.phone" placeholder="请输入手机号" border="surround" clearable>
						</u--input>
					</view>
					<view style="display: flex">
						<u--input v-model="editForm.phonecode" type="number" placeholder="请输入验证码" border="surround"
							clearable style="margin-top: 20rpx">
						</u--input>
						<button class="emPHCode" @click="onSetCode('phone')">
							{{ PhoneEmailNote }}
						</button>
					</view>
				</template>
				<template v-if="currentEditType == 'password'">
					<u--input maxlength="8" v-model="editForm.password" placeholder="请输入新密码" :password="true"
						border="surround" clearable @input="inputMethod(editForm.password)">
					</u--input>
					<view class="" style="font-size: 28rpx; color: #999">
						<p v-if="passNote != ''">{{ passNote }}</p>
						<p v-html="passStr" style="margin-top: 10rpx"></p>
					</view>
					<u--input maxlength="8" v-model="editForm.Repassword" placeholder="请再确认密码" :password="true"
						border="surround" clearable style="margin-top: 20rpx"></u--input>
				</template>
				<template v-if="currentEditType == 'email'">
					<u--input v-model="editForm.email" placeholder="请输入邮箱" border="surround" clearable>
					</u--input>
					<view style="display: flex">
						<u--input v-model="editForm.emailcode" type="number" placeholder="请输入验证码" border="surround"
							clearable style="margin-top: 20rpx">
						</u--input>
						<button class="emPHCode" @click="onSetCode('email')">
							{{ PhoneEmailNote }}
						</button>
					</view>
				</template>

				<template v-if="currentEditType == 'age'">
					<u--input v-model="editForm.age" type="number" placeholder="请输入年龄" border="surround" clearable>
					</u--input>
				</template>
				<template v-if="currentEditType == 'sex'">
					<u-radio-group v-model="editForm.sex">
						<view style="width: 100%">
							<view v-for="(item, index) in sexList" class="dp_sex">
								{{ item.title }}
								<u-radio :key="index" activeColor="#5188e5" :name="item.id"
									style="float: right; margin-top: 5rpx"></u-radio>
							</view>
						</view>
					</u-radio-group>
				</template>
				<template v-if="currentEditType == 'avatar'">
					<view class="" @click="checkPermision">
						<u-upload :fileList="fileAvatar" @afterRead="afterRead" @delete="deletePic" multiple
							:maxCount="1" width="150" height="150" :previewFullImage="true">
						</u-upload>
					</view>
				</template>

				<u-button color="linear-gradient(to right, #005eae, #5188e5)" text="确定" @click="handleSubmit()"
					style="margin-top: 50rpx; border-radius: 50rpx;"></u-button>
				<view @click="closeModal()" class="dp_canBtn"> 取消</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import permission from "@/js_sdk/wa-permission/permission.js"
	import $http from "@/config/requestConfig.js";
	var clear;
	import {
		mapState
	} from "vuex";
	// 密码验证的正则
	//1、密码为八位及以上并且字母数字特殊字符三项都包括
	var strongRegex = new RegExp(
		"^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$",
		"g"
	);
	//2、密码为八位及以上并且字母、数字、特殊字符三项中有两项，强度是中等
	var mediumRegex = new RegExp(
		"^(?=.{8,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[a-z])(?=.*\\W))|((?=.*[0-9])(?=.*\\W))|((?=.*[A-Z])(?=.*\\W))).*$",
		"g"
	);
	var enoughRegex = new RegExp("(?=.{8,}).*", "g");
	export default {
		data() {
			return {
				showCropper: false,
				submitInfo: {},
				showSubmitInfoBlank: false,
				playData: {},
				userData: {},
				isPassWordPhone: true,
				currentEditType: null,
				editForm: {},
				editModalShow: false,
				dataList: [{
						title: "昵称",
						indexValue: "nickname",
						type: "nickname",
					},
					{
						title: "手机号",
						indexValue: "tel",
						type: "tel",
					},
					{
						title: "邮箱",
						indexValue: "email",
						type: "email",
					},
					{
						title: "密码",
						indexValue: "password",
						type: "password",
					},
					{
						title: "年龄",
						indexValue: "age",
						type: "age",
					},
					{
						title: "性别",
						indexValue: "sex",
						type: "sex",
					}
				],
				userMes: {
					quCode: "",
					phone: "",
					email: "",
					id: "",
					age: "",
					sex: "",
					nickname: "",
					tel: "",
					oldName: "", // 老的用户名
				},
				userMsage: {
					quCode: "",
					phonecode: "",
					phone: "",
					emailcode: "",
					email: "",
					id: "",
					age: "",
					sex: "",
					nickname: "",
					tel: "",
					YNpass: "",
					oldName: "", // 老的用户名
				},
				userMiMa: {
					id: "",
					password: "",
					Repassword: "",
				},
				readonly: false,
				phoneShow: false,
				emailShow: false,
				avatarShow: false,
				nicknameShow: false,
				ageShow: false,
				sexShow: false,
				passwordShow: false,
				fileAvatar: [],
				quCodeList: [], // 国家区域码
				sexList: [{
						title: "男",
						id: 1,
					},
					{
						title: "女",
						id: 2,
					},
				],
				PhoneEmailNote: "获取验证码",
				passNote: "",
				passStr: "",
				editModalTitle: "",
				passwordOk: false, // 密码是否满足规则

				urlList: {
					sendcode: "common/user/sms/sendcode", //密码登录
					sendEmailcode: "common/user/getMailCaptcha", //密码登录
					setPassword: "common/user/setPasswordById", //密码登录
					userInfo: "book/user/info/", //密码登录
					updateUserTel: "common/user/updateUserTel", //绑定手机号
					updateUserEmail: "common/user/updateUserEmail", //绑定邮箱
				},
			};
		},
		//第一次加载
		onLoad(e) {
			// 隐藏原生的tabbar
			uni.hideTabBar();
		},
		computed: {
			...mapState(["userInfo"]),
		},
		//页面显示
		onShow() {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			this.getData();
			this.getCountyCode();
		},
		//方法
		methods: {

			async checkPermision() {
				var result = await permission.premissionCheck("CAMERA_EXTERNAL_STORAGE")
				if (result != 1) {
					return false
				}
			},
			handleChangeIsPassWordPhone() {
				this.editForm = {};
				this.isPassWordPhone = !this.isPassWordPhone;
				this.editForm.quCode = this.quCodeList[0].value;
				this.OpenClear();
			},
			closeModal() {
				this.currentEditType = null;
				this.editForm = {};
				this.editModalShow = false;
			},
			handleClickRightContent(row, type) {
				this.OpenClear();
				var title = "";
				this.currentEditType = row.type;
				console.log("row.type at line 122:", row);
				switch (row.type) {
					case "tel":
						title = `${type == "bind" ? "绑定" : "修改"}手机号`;
						this.editForm.quCode = this.quCodeList[0].value;

						break;
					case "email":
						title = `${type == "bind" ? "绑定" : "修改"}邮箱`;
						break;

					case "password":
						title = "修改密码";
						this.isPassWordPhone = true;
						break;

					case "nickname":
						title = `${type == "bind" ? "设置" : "更改"}昵称`;

						break;
					case "age":
						title = `${type == "bind" ? "设置" : "更改"}年龄`;
						break;

					case "sex":
						title = `${type == "bind" ? "设置" : "更改"}性别`;
						if (this.userData.sex) {
							this.editForm.sex = this.userData.sex;
							console.log("this.editForm.sex at line 603:", this.editForm.sex);
						}

						break;
					case "avatar":
						title = `${type == "bind" ? "设置" : "更改"}头像`;
						break;
				}
				this.editModalTitle = title;
				this.editModalShow = true;
			},
			async handleSubmit() {
				var title = "";
				switch (this.currentEditType) {
					case "tel":
						await this.chosePhone();
						break;
					case "email":
						await this.choseEmail();
						break;

					case "password":
						await this.chosePassword();
						break;
					case "avatar":
						await this.choseAvatar();
						break;

					default:
						if (this.currentEditType == "nickname") {
							if (!this.editForm.nickname || this.editForm.nickname == "") {
								this.editForm.nickname = this.userData.nickname;
								this.$commonJS.showToast("昵称不可为空");
								return false;
							}
						} else if (this.currentEditType == "avatar") {
							if (this.fileAvatar.length == 0) {
								this.$commonJS.showToast("请上传图片");
								return false;
							}
							this.editForm.avatar = this.fileAvatar[0].url;
						} else if (this.currentEditType == "sex") {
							if (this.editForm.sex == 2) {
								this.editForm.sex = 0
							}
						} else if (this.currentEditType == "age") {
							if (this.editForm.age <= 0) {
								this.$commonJS.showToast("年龄不能小于0");
								return false;
							}
						}
						await this.choseData();
						break;
				}
			},
			// 获取
			// 获取国家区域编码
			getCountyCode() {
				this.$http.request({
					url: "book/baseArea/getAllBaseArea",
					method: "POST",
					data: {},
					header: {
						"Content-Type": "application/json",
					},
				})
				.then((res) => {
					if (res.code == 0 && res.baseAreas.length > 0) {
						this.quCodeList = res.baseAreas.map((item) => {
							let obj = {
								text: item.title + " (+" + item.code + ")",
								value: item.code,
							};
							return obj;
						});
						this.$forceUpdate();
					} else {
						this.quCodeList = [];
					}
				})
				.catch((e) => {
					
				});
			},
			getData() {
				let that = this;
				// 获取个人信息
				if (this.userInfo.id != undefined) {
					this.$http.post(this.urlList.userInfo + that.userInfo.id)
					.then((res) => {
						that.userData = res.user;
						if (that.userData.sex == 0) {
							that.userData.sex = 2
						}
					});
				}
			},
			cancelPass() {
				this.passwordShow = false;
				this.userMiMa.password = "";
				this.userMiMa.Repassword = "";
				this.passNote = "";
				this.passStr = "";
			},
			// 密码验证
			inputMethod(value) {
				this.passwordOk = false;
				if (strongRegex.test(value)) {
					this.passStr = "<span style='color:#18bc37'>密码强度很不错哦！</span>";
					this.passNote = "";
					this.passwordOk = true;
				} else if (mediumRegex.test(value)) {
					this.passNote =
						"请至少使用大小写字母、数字、符号两种类型组合的密码，长度为8位。";
					this.passStr = "<span style='color:#2979ff'>密码强度中等!</span>";
					this.passwordOk = true;
				} else if (enoughRegex.test(value)) {
					this.passStr = "<span style='color:#f3a73f'>密码强度太弱!</span>";
					this.passNote =
						"请至少使用大小写字母、数字、符号两种类型组合的密码，长度为8位。";
				} else {
					this.passwordOk = false;
					this.passNote =
						"请至少使用大小写字母、数字、符号两种类型组合的密码，长度为8位。";
					this.passStr = "";
				}
			},
			openTel() {
				this.userMes = {};
				this.phoneShow = true;
				this.OpenClear();
			},
			openEmail() {
				this.userMes = {};
				this.emailShow = true;
				this.OpenClear();
			},
			// 清除验证码
			OpenClear() {
				clearInterval(clear);
				this.PhoneEmailNote = "获取验证码";
				this.readonly = false;
			},

			// 获取验证码
			emPHCode() {
				clear && clearInterval(clear);
				this.readonly = true;
				this.PhoneEmailNote = "60S";
				var s = 60;
				clear = setInterval(() => {
					s--;
					this.PhoneEmailNote = s + "S";
					if (s <= 0) {
						clearInterval(clear);
						this.PhoneEmailNote = "获取验证码";
						this.readonly = false;
					}
				}, 1000);
			},
			sendTelCode(phone, quCode) {
				if (phone == "") {
					uni.showToast({
						title: "请输入手机号",
						icon: "none",
					});
					return;
				}
				if (quCode == "" || quCode == 86) {
					if (!this.$base.phoneRegular.test(phone)) {
						uni.showToast({
							title: "手机格式不正确",
							icon: "none",
						});
						return;
					}
				}

				this.$http
					.post(this.urlList.sendcode, {
						phone: phone,
						areaCode: quCode,
						type: 2000,
					})
					.then((res) => {
						uni.showToast({
							title: "验证码发送成功",
							icon: "none",
						});
						this.emPHCode();
					});
			},
			sendEmailCode(email) {
				if (email == "") {
					uni.showToast({
						title: "请输入邮箱",
						icon: "none",
					});
					return;
				}
				if (!this.$base.mailRegular.test(email)) {
					uni.showToast({
						title: "邮箱格式不正确",
						icon: "none",
					});
					return;
				}
				this.$http
					.post(this.urlList.sendEmailcode, {
						email: email,
					})
					.then((res) => {
						uni.showToast({
							title: "验证码发送成功",
							icon: "none",
						});
						this.emPHCode();
					});
			},
			// 发送验证码
			onSetCode(e) {
				console.log("e at line 932:", e);
				var that = this;
				if (this.readonly) {
					return;
				}
				if (e == "phone" || e == "phone") {
					this.sendTelCode(this.editForm.phone, this.editForm.quCode);
				}
				if (e == "email") {
					this.sendEmailCode(this.editForm.email);
				}
				if (e == "phonePassword") {
					this.sendTelCode(this.editForm.phone, this.editForm.quCode);
				}
				if (e == "emailPassword") {
					this.sendEmailCode(this.editForm.phone);
				}
			},

			// 手机
			async chosePhone(e) {
				var data = {
					code: this.editForm.phonecode,
					phone: this.editForm.phone,
					id: this.userData.id,
					quCode: this.editForm.quCode,
				};
				if (data.phone == "") {
					this.$commonJS.showToast("请输入手机号");
					return;
				}
				if (data.quCode == null || data.quCode == 86) {
					// 如果没选择国家code，默认是中国大陆
					if (!this.$base.phoneRegular.test(data.phone)) {
						this.$commonJS.showToast("手机格式不正确");
						return;
					}
				}

				if (data.code == "" || data.code == null) {
					this.$commonJS.showToast("请输入验证码");
					return;
				}
				let that = this;
				$http.request({
					url: this.urlList.updateUserTel,
					method: "POST",
					data: data,
					header: {
						"Content-Type": "application/json",
					},
				})
				.then(async (res) => {
					if (res.code == 0) {
						that.$commonJS.showToast("绑定手机号成功");
						that.editModalShow = false;
						that.editForm = {};
						that.OpenClear();
						setTimeout(async () => {
							await this.getData();
						}, 500);
					}
				})
				.catch(function(error) {
					
				});
			},

			// 邮箱
			async choseEmail(e) {
				var data = {
					code: this.editForm.emailcode,
					email: this.editForm.email,
					id: this.userData.id,
				};

				if (data.email == "") {
					this.$commonJS.showToast("请输入邮箱");

					return;
				}

				if (!this.$base.mailRegular.test(data.email)) {
					this.$commonJS.showToast("邮箱格式不正确");

					return;
				}
				if (data.code == "" || data.code == null) {
					this.$commonJS.showToast("请输入验证码");
					return;
				}
				let that = this;
				$http.request({
					url: this.urlList.updateUserEmail,
					method: "POST",
					data: data,
					header: {
						"Content-Type": "application/json",
					},
				})

				.then(async (res) => {
					if (res.code == 0) {
						that.$commonJS.showToast("绑定邮箱成功");
						that.editModalShow = false;
						that.editForm = {};
						that.OpenClear();
						setTimeout(async () => {
							await that.getData();
						}, 500);
					}
				})
				.catch(function(error) {
					console.log(error);
				});
			},

			// 头像
			choseAvatar(e) {
				let that = this;
				if (that.fileAvatar.length == 0) {
					uni.showToast({
						title: "请选择图片",
						icon: "none",
					});
					return;
				}
				that.editForm.avatar = that.fileAvatar[0].url;
				that.choseData();
				that.avatarShow = false;
				that.fileAvatar.splice(0, 1);
			},
			// 年龄
			choseAge(e) {
				let that = this;
				if (that.userMes.age <= 0) {
					uni.showToast({
						title: "年龄不能小于0",
						icon: "none",
					});
					return;
				}
				that.choseData();
				that.ageShow = false;
			},

			// 昵称
			choseNickname(e) {
				let that = this;
				if (e && e != "") {
					that.choseData();
					that.nicknameShow = false;
				} else {
					that.userMes.nickname = that.userMes.oldName;
					uni.showToast({
						title: "昵称不可为空",
						icon: "none",
					});
				}
			},

			// 性别
			choseSex(e) {
				let that = this;
				that.editForm.sex = e;
				that.choseData();
			},

			// 修改密码
			async chosePassword() {
				var data = {
					id: this.userData.id,
					password: this.editForm.password
				};
				if (!this.passwordOk) {
					this.$commonJS.showToast(this.passNote);
					return;
				}
				let that = this;
				if (that.editForm.Repassword == "" || that.editForm.password == "") {
					this.$commonJS.showToast("请输入密码！");

					return;
				}
				if (that.editForm.Repassword != that.editForm.password) {
					this.$commonJS.showToast("两次密码输入不一致！");

					return;
				}
				this.$http
					.post(this.urlList.setPassword, data)

					.then(async (res) => {
						if (res.code == 0) {
							that.$commonJS.showToast("修改成功");
							that.editModalShow = false;
							that.editForm = {};
							that.OpenClear();
							setTimeout(async () => {
								await that.getData();
							}, 500);
						}
					})
					.catch(function(error) {
						console.log(error);
					});
			},

			// 修改个人资料
			choseData() {
				var that = this;
				var data = {
					...this.userData,
					...this.editForm,
				};
				this.$http.request({
					url: "book/user/update",
					method: "POST",
					data: data,
					header: {
						"Content-Type": "application/json",
					},
				})

				.then(function(res) {
					if (res.code == 0) {
						that.$commonJS.showToast("修改成功");
						that.editModalShow = false;
						that.editForm = {};
						setTimeout(async () => {
							await that.getData();
						}, 500);
					}
				})
				.catch(function(error) {
					
				});
			},

			// 头像上传
			afterRead(e) {
				let that = this;
				uni.uploadFile({
					url: this.$baseUrl + "/oss/fileoss",
					filePath: e.file[0].url,
					name: "file",
					formData: {},
					success: (res) => {
						that.fileAvatar.push({
							url: JSON.parse(res.data).url,
						});
					},
				});
			},

			//删除图片
			deletePic() {
				let that = this;
				that.fileAvatar.splice(0, 1);
			},
		},
	};
</script>
<style lang="scss" scoped>
@import "@/static/mixin.scss";
.btn_box {
	margin-top: 40rpx;
	padding: 10px;

	button {
		font-size: 32rpx;
		background-color: #e5e5e5;
		color: #fff;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 50rpx;

		&.active {
			@include theme("btn_bg") color: #fff;
		}
	}
}

.tabulate {
	.per_list {
		font-size: 30rpx;
		background-color: #fff;
		padding: 0;
		align-items: center;
		position: relative;
		border-top: 1px solid #e5e5e5;
		width: 100%;
		overflow: auto;

		text.biaoti {
			color: #333;
			display: inline-block;
			margin: 25rpx 0 25rpx 40rpx;
		}

		text.neirong {
			color: #888;
			font-weight: normal;
			float: right;
			margin: 25rpx 80rpx 0 0;
			display: block;
		}

		text.marPer {
			color: #fff;
			font-weight: normal;
			float: right;
			margin: 25rpx 0 0 0;
			display: block;
			border-radius: 10rpx;
			background-color: #eee;
			padding: 2rpx 10rpx;
		}
	}

	.per_list_arrow {
		font-size: 30rpx;
		background-color: #fff;
		padding: 0;
		align-items: center;
		position: relative;
		border-top: 1px solid #e5e5e5;
		width: 100%;
		overflow: auto;

		&:active {
			background-color: #f5f5f5;
		}

		&::after {
			content: "";
			position: absolute;
			right: 20upx;
			top: 50%;
			transform: translateY(-50%);
			width: 40upx;
			height: 40upx;
			background-image: url("@/static/icon/icon_right.png");
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
		}
	}
}

.avatar_box {
	padding: 20rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	background-color: #fff;

	.per_mes_img {
		width: 180rpx;
		height: 180rpx;
		background-color: #f5f5f5;
		border-radius: 120rpx;
		margin: 10rpx 0;
	}

	.avatar_text {
		color: $themeColor;
		line-height: 60rpx;
		font-size: 30rpx;
		font-weight: 600;
	}
}

.tanchu {
	padding: 60rpx 50rpx 80rpx 50rpx;

	.dp_title {
		font-size: 32rpx;
		margin-bottom: 50rpx;
		color: #555;
		text-align: center;
		font-weight: bold;
	}

	.dp_sex {
		font-size: 30rpx;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
		border-bottom: 1px solid #ededed;

		image {
			width: 40rpx;
			height: 40rpx;
			display: inline-block;
			margin-right: 20rpx;
			vertical-align: bottom;
		}
	}

	.dp_canBtn {
		text-align: center;
		font-size: 28rpx;
		margin-top: 25rpx;
		color: #888;
	}

	.emPHCode {
		height: 80rpx;
		width: 200rpx;
		background-color: #f8f9fb;
		font-size: 28rpx;
		padding: 0 14rpx;
		color: $themeColor;
		line-height: 80rpx;
		margin: 20rpx 0 0 20rpx;
		display: inline-block;
	}

	.quhao {
		height: 60rpx;
		width: 240rpx;
		margin: 1rpx 15rpx 0 0;

		.quhaoSel {
			/deep/.uni-select {
				font-size: 24rpx;
			}

			/deep/.uni-select__selector-item {
				font-size: 24rpx;
			}

			/deep/.uni-stat__select {
				height: 60rpx;
			}
		}
	}
}

/deep/.scroll-view-item:nth-child(2n-1) {
	background-color: transparent !important;
}

.right_content {
	width: auto;
	height: 100%;
	float: right;
	color: #909090;
	display: flex;
	align-items: center;
}

.fdButtonBox {
	color: #b0b0b0;
	float: right;
	padding: 4rpx 14rpx;
	font-size: 24rpx;
	font-weight: 500;
	line-height: 30rpx;
	border-radius: 10rpx;
	box-sizing: border-box;
	margin-top: 10rpx;
}

.commonPageBox {
	background-color: #fff;
	padding: 0 20rpx;
}

.set_box {
	background-color: #fff;
	height: auto;
}

.button_box {
	width: 100%;
	position: fixed;
	bottom: 40rpx;
	padding: 20rpx 80rpx;

	.button {
		margin-top: 40rpx;
	}
}
</style>