<template>
	<view class="join">
		<view class="banner">
			<image src="/static/login/banner.png" mode=""></image>
		</view>
		<view class="top" v-if="ShopInfo">
			<view v-if="ShopInfo.auditStatus == 1 || ShopInfo.auditStatus == 3" class="checkBox" :style="{
				borderColor: ShopInfo.auditStatus == 3 ? '#F76560' : '#FF7D00',
				color: ShopInfo.auditStatus === 3 ? '#F53F3F' : '#FF7D00',
				background: ShopInfo.auditStatus === 3 ? '#FFF5F5' : '#FFF8EC'
			}">
				<view class="checkStatus">{{ ShopInfo.auditStatus == 3 ? '审核驳回' : '审核中' }}</view>
				<view class="text">入驻审核中，审核结果将会在X-X个工作日通知您</view>
			</view>
			<view class="title">
				<view class="lineIcon">
					<image src="/static/login/lineIcon.png" mode=""></image>
				</view>
				<view style="position: relative;">申请入驻</view>

			</view>
			<view class="content">
				<view class="input-box">
					<u-input :disabled="ShopInfo.auditStatus == 1 ? true : false" v-model="form.teName" border="none"
						placeholder="输入真实姓名" class="input-item"
						placeholder-style="font-weight: 400;font-size: 30rpx;color: #C9CDD4;text-align: right;">
						<template slot="prefix">
							<view class="label">
								<text>姓名</text>
							</view>
						</template>
					</u-input>
				</view>
				<view class="input-box service">
					<view class="label">性别</view>
					<view class="valueText" v-if="ShopInfo.auditStatus == 1">{{ form.teSex == '1' ? '男' : '女'
					}}
					</view>
					<u-radio-group v-if="ShopInfo.auditStatus != 1" v-model="form.teSex">
						<u-radio activeColor="#333335" v-for="(item, index) in sex" :key="index" :name="item.value"
							:label="item.label" :customStyle="{ margin: '0 12rpx' }" />
					</u-radio-group>
				</view>


				<view class="input-box">
					<u-input :disabled="ShopInfo.auditStatus == 1 ? true : false" v-model="form.tePhone" border="none"
						maxlength='11' placeholder="请输入手机号" class="input-item"
						placeholder-style="font-weight: 400;font-size: 30rpx;color: #C9CDD4;text-align: right;">
						<template slot="prefix">
							<view class="label">
								<text>手机号</text>
							</view>
						</template>
					</u-input>
				</view>
				<view class="input-box" v-if="this.ShopInfo.auditStatus != 1">
					<u-input :disabled="ShopInfo.auditStatus == -1 ? true : false" v-model="form.phoneMsg" type="number"
						border="none" maxlength="6" placeholder="输入短信验证码"
						placeholder-style="font-weight: 400;font-size: 30rpx;color: #C9CDD4;text-align: right;margin-right: 42rpx;"
						class="input-item code-input">
						<template slot="prefix">
							<view class="label">
								<text>验证码</text>
							</view>
						</template>
					</u-input>
					<!-- <view class="code-btn" :class="{ disabled: !canGetCode }">
						<text v-if="startCountdownFlag">{{ countdown }}s</text>
						<text @click="agginGetCode">重新获取</text>

					</view> -->
					<view class="code-btn" :class="{ disabled: !canGetCode }">
						<text v-if="!CodeSendNum" @click="getCode">发送验证码</text>
						<view v-else>
							<text v-if="startCountdownFlag">{{ countdown }}s</text>
							<text @click="agginGetCode">重新获取</text>
						</view>
						<!-- <text v-if="countdown === 60">发送验证码</text>
          				<text v-else>{{ countdown }}s 后重新获取</text> -->
					</view>
				</view>

				<view class="input-box">
					<view class="label" style="width: 50%;">合作意向城市</view>
					<view class="inp select" @click="ShopInfo.auditStatus == 1 ? show = false : show = true">
						<view class="text" :style="{ color: form.partnerCities ? '#4E5969' : '#C9CDD4' }">{{
							form.partnerCities || '选择城市' }}</view>
						<img v-show="ShopInfo.auditStatus == 1 ? false : true" src="/static/login/arrowIcon.png"
							alt="" />
					</view>

					<u-popup :show="show" mode="bottom" border-radius="16rpx 16rpx 0 0"
						:style="{ height: '600rpx', zIndex: 9999, }">

						<!-- 省 / 市 二级联动 -->
						<u-picker :key="pickerKey" :defaultIndex="defaultCityIndex" :show="show" ref="uPicker"
							confirmColor="#fff" title="合作意向城市" keyName="name" :columns="cityColumns"
							:style="{ zIndex: 0, }" @confirm="onSelect" @change="changeHandler"
							@cancel="show = false"></u-picker>

					</u-popup>
				</view>
				<view class="input-box service">
					<view class="label">开通服务</view>
					<view class="valueText" v-if="serveArr && ShopInfo.auditStatus == 1">{{dictLabelFind(form.serviceTag)
						}}</view>
					<u-radio-group v-if="ShopInfo.auditStatus != 1" v-model="form.serviceTag"
						:disabled="ShopInfo.auditStatus == 1 ? true : false">
						<u-radio activeColor="#333335" v-for="(item, index) in serveArr" :key="index"
							:name="item.dictValue" :label="item.dictLabel" :customStyle="{ fontSize: '20rpx' }" />
					</u-radio-group>
				</view>
				<!-- :width="80" :height="80"  -->
				<view class="updata">
					<view class="name">形象照</view>

					<view class="images">
						<Upload :disabled="ShopInfo.auditStatus == 1 ? true : false" :maxCount="2"
							:fileList="avatarList" @fileList="onUpload($event)" />
					</view>
					<view class="title">
						请上传本人2张近期照片，图片大小不超过2M(建议清晰正脸照)
					</view>
				</view>
				<!-- <view class="updata" style="border:0;">
					<view class="name">工作形象照</view>
					<view class="title">
						请上传本人近期照片，图片大小不超过10M (建议清晰正脸照)
					</view>
					<view class="images">
						<Upload
							:maxCount="2"
							@fileList="onUpload1($event, 'cImgList')"
						/>
					</view>
				</view> -->
			</view>


		</view>
		<view class="submits" v-if="this.ShopInfo.auditStatus != 1">

			<view class="btn" @click="submit">
				提交
			</view>
			<text>平台不会通过任何渠道泄漏你的个人信息，请放心输入</text>
		</view>
		<view class="keFu" @click="callKeFu">
			<view class="keFuContent">
				<view style="display: flex;justify-content: center;align-items: center;margin-top: 5rpx;">
					<img src="/static/login/serviceIcon.png" style="width: 44rpx;height: 44rpx;" />
				</view>
				<view style="font-weight: 400;font-size: 20rpx;color: #1D2129;text-align: center;margin-top: -10rpx;">客服
				</view>
			</view>
		</view>

		<!-- 图形验证码弹窗 -->
		<u-popup :show="showCaptcha" mode="center" border-radius="12">
			<view class="captcha-box">
				<view class="captcha-title">
					<view>请输入下方图形验证码</view>
					<u-icon custom-style="position: relative;left:90rpx ;" name="close" color="#C9CDD4" size="20"
						@click="showCaptcha = false"></u-icon>
				</view>
				<view style="padding: 0 48rpx;margin-top: 48rpx;">
					<view
						style="display: flex;align-items: center;justify-content: space-between;height: 106rpx;border-bottom: 1rpx solid #E7E7E7;">

						<!-- 验证码输入框，唤起全字符键盘 -->
						<u-input v-model="imgCode" placeholder="请输入图形验证码" :focus="showCaptcha" type="text" maxlength="4"
							border="none"
							placeholder-style="font-weight: 400;font-size: 30rpx;color: #C9CDD4;"></u-input>
						<!-- 图形验证码图片，点击刷新 -->
						<!-- <img :src="captchaImg" @click="getCode" class="register-code-img"/> -->
						<image :src="captchaImg" @click="refreshCaptcha" class="captcha-img"></image>
					</view>
					<view class="text" @click="getCaptcha">看不清？ 换一张</view>
					<u-button class="submitImgCode" @click="submitImgCode" block>确定</u-button>

				</view>
			</view>
		</u-popup>


	</view>
</template>

<script>

import {
	technicianApply, sendMsg, getServiceCategoryList
} from '@/api/index';
import {
	captchaImage, getValidateCaptcha, provinceCityTree, regionList,
} from '@/api/newLogin';

import Upload from '@/components/upload/index.vue';
export default {
	components: {
		Upload
	},
	computed: {
		canGetCode() {
			return !this.isSendingCode && this.countdown === 60
		},
		// canBind() {
		// 	return this.phoneMsg && this.phoneMsg.length === 6 && !this.isBinding
		// }
	},
	data() {
		return {
			//auditStatus 审核状态：-1-申请入住,0-待入驻，1-待审核，2-审核通过，3-审核驳回"
			defaultCityIndex: [0, 0],
			status: 1,
			imgCode: '',        // 用户填写的图形验证码
			captchaImg: '',     // 图形验证码图片地址
			captchaKey: '',     // 后端返回验证码标识
			showCaptcha: false,
			startCountdownFlag: false,
			timer: null,
			isSendingCode: false,
			countdown: 60,
			cityList: [],
			show: false,
			isLogin: false,
			type: 'text',
			isShow: false,
			sex: [
				{
					value: '1',
					label: '男'
				},
				{
					value: '0',
					label: '女'
				}
			],
			serveArr: [
				// {
				// 	value: 1,
				// 	label: '上门按摩'
				// },
				// {
				// 	value: 2,
				// 	label: '同城陪玩'
				// }
			],
			avatarList: [],
			CodeSendNum: 0,
			form: {
				partnerCities: '',
				operationCenterId: '',
				operationCenterName: '',
				provinceCode: '',
				provinceName: '',
				cityCode: '',
				cityName: '',
				cOpenid: uni.getStorageSync('wx_copenid'),
				teName: '',
				tePhone: '',
				phoneMsg: '',
				teSex: null,
				serviceTag: null,
				avatar: '',
			},
			token: '',
			uuid: '',
			ShopInfo: {},
			cityColumns: [],
			allCityList: [],
			pickerKey: 1,
		}
	},
	onLoad(options) {

		if (options.merchantInfo) {
			this.ShopInfo = JSON.parse(options.merchantInfo)
			this.initForm()

		}
	},

	onShow() {
		this.getServiceCategoryList()
		this.getCity()

		//this.getinfo()
		// let city = uni.getStorageSync('selectCity')
		// let lastCity = city.charAt(city.length - 1)
		// lastCity == '市' ? this.form.city = city.slice(0, -1) : this.form.city = city
		// this.form.city = uni.getStorageSync('selectCity')
	},
	methods: {
		//获取服务名称
		dictLabelFind(value) {
			return this.serveArr.find(item => item.dictValue == value)?.dictLabel || ''
		},
		//赋值
		initForm() {
			console.log(this.ShopInfo, 'this.ShopInfo')
			if(this.ShopInfo.avatar){
				this.form.avatarList = this.ShopInfo.avatar.split(',').map(item => ({url: item.trim()}))
			}
			
			this.form.teName = this.ShopInfo.name
			this.form.tePhone = this.ShopInfo.phone
			this.form.teSex = this.ShopInfo.sex
			this.form.serviceTag = this.ShopInfo.serviceTag
			this.form.provinceName = this.ShopInfo.provinceName
			this.form.cityName = this.ShopInfo.cityName
			this.form.operationCenterName = this.ShopInfo.operationCenterName
			this.form.operationCenterId = this.ShopInfo.operationCenterId
			this.form.provinceCode = this.ShopInfo.provinceCode
			this.form.cityCode = this.ShopInfo.cityCode
			setTimeout(() => {
				const provinceIndex = this.allCityList.findIndex(p => p.name === this.form.provinceName)
				if (provinceIndex == -1) return
				const cityIndex = this.allCityList[provinceIndex].children.findIndex(c => c.name === this.form.cityName)
				if (cityIndex == -1) return
				const deptIndex = this.deptList.findIndex(c => c.name === this.form.operationCenterName)
				if (deptIndex == -1) return
				this.defaultCityIndex = [provinceIndex, cityIndex, deptIndex]
				this.form.partnerCities = this.form.provinceName + '/' + this.form.cityName + this.form.operationCenterName
				console.log(this.form,'666666' )
			}, 300)

		},
		//获取城市
		async getCity() {
			 await provinceCityTree().then(res => {
				//console.log(res, '获取城市')
				this.allCityList = res.data.data
				const provinces = res.data.data.map(p => ({ name: p.name, code: p.code }))
				const cities = this.getCitiesByProvince(this.form.provinceName || provinces[0]?.name || '').map(c => ({ name: c.name, code: c.code }))

				regionList({ parentCode: this.form.provinceCode || provinces[0].code, cityCode: this.form.cityCode || cities[0]?.code }).then(res => {
					if (res.data.code == 200) {
						this.deptList = res.data.data.map(c => ({ name: c.deptName, deptId: c.deptId, disabled: /^(0,)*0$/.test(c.ancestors) ? true : false }))
						this.cityColumns = [provinces, cities, this.deptList]

					}
				})


			});
		},
		getCitiesByProvince(provinceName) {
			const province = this.allCityList.find(p => p.name === provinceName)
			return province ? province.children : []
		},
		//滚动选择器
		changeHandler(e) {
			console.log(e, 'e')
			const {
				columnIndex,
				value,
				values, // values为当前变化列的数组内容
				index,
				// 微信小程序无法将picker实例传出来，只能通过ref操作
				picker = this.$refs.uPicker
			} = e
			// 当第一列值发生变化时，变化第二列(后一列)对应的选项
			if (columnIndex === 0) {
				// picker为选择器this实例，变化第二列对应的选项
				const provinceName = this.allCityList[index]?.name
				const cities = this.getCitiesByProvince(provinceName).map(c => ({ name: c.name, code: c.code }))
				picker.setColumnValues(1, cities)


				const values = picker.getValues();
				const parentCode = values[0]?.code
				const cityCode = values[1]?.code
				if (!parentCode || !cityCode) return
				picker.setColumnValues(2, [])
				regionList({ parentCode, cityCode }).then(res => {
					if (res.data.code !== 200) return
					// 给部门添加 disabled 禁用逻辑
					const arr = res.data.data.map(c => ({
						name: c.deptName,
						deptId: c.deptId,
						// 判断ancestors只有0则禁用
						disabled: /^(0,)*0$/.test(c.ancestors) ? true : false
					}))

					picker.setColumnValues(2, arr)
				}).catch(err => {
					uni.showToast({ title: '加载部门失败', icon: 'none' })
				})

			}
			// 2. 只有切换第二列时，才请求第三列部门数据
			if (columnIndex === 1) {
				const values = picker.getValues();
				const parentCode = values[0]?.code
				const cityCode = values[1]?.code
				if (!parentCode || !cityCode) return
				picker.setColumnValues(2, [])
				regionList({ parentCode, cityCode }).then(res => {
					if (res.data.code !== 200) return
					// 给部门添加 disabled 禁用逻辑
					const arr = res.data.data.map(c => ({
						name: c.deptName,
						deptId: c.deptId,
						// 判断ancestors只有0则禁用
						disabled: /^(0,)*0$/.test(c.ancestors) ? true : false
					}))
					picker.setColumnValues(2, arr)
				}).catch(err => {
					uni.showToast({ title: '加载部门失败', icon: 'none' })
				})
			}
			// ==========关键：第三列滑动实时拦截==========
			if (columnIndex === 2) {
				const list = picker.getColumnValues(2)
				const target = list[index]
				// 如果当前项禁用，强制切回第0项
				if (target.disabled) {
					// 延迟回滚，防止滚动冲突
					setTimeout(() => {
						picker.setColumnIndex(2, 0)
					}, 30)
					uni.showToast({ title: '该部门不可选择', icon: 'none' })
				}
			}


		},
		// upload事件
		onUpload1(e, t) {
			this.form[t] = e.map(item => item.url).join()
		},

		//查询商户信息 auditStatus 审核状态：-1-申请入住,0-待入驻，1-待审核，2-审核通过，3-审核驳回"
		async checkMerchantStatus() {
			const openid = uni.getStorageSync('wx_copenid')
			const merchantInfo = await this.$utils.checkMerchantStatus(openid)
			if (!merchantInfo) return
			this.ShopInfo = merchantInfo
			if (merchantInfo.auditStatus == -1) {//未注册
				this.initForm()
				return

			} else if (merchantInfo.auditStatus == 0 || merchantInfo.auditStatus == 1 || merchantInfo.auditStatus == 2 || merchantInfo.auditStatus == 3) {
				if (merchantInfo.auditStatus == 0) { //待入驻
					if (!this.$utils.checkLogin({ type: 'navigate' })) return;
					uni.switchTab({
						url: '/pages/index/index'
					})
					return
				}
				if (merchantInfo.fileGroups.length) {//已有入驻信息
					if (!this.$utils.checkLogin({ type: 'navigate' })) return;
					uni.switchTab({
						url: '/pages/index/index'
					})
					return

				} else {//未入驻 注册阶段
					this.initForm()
				}
			}

		},



		//查询开通服务接口
		getServiceCategoryList() {
			//console.log('查询开通服务接口')
			getServiceCategoryList('service_tag').then(res => {
				this.serveArr = res.data.data
				//console.log(this.serveArr)
			})
		},
		//重新获取验证码
		agginGetCode() {
			if (!this.form.tePhone) {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				})
				return
			}

			if (!/^1[3456789]\d{9}$/.test(this.form.tePhone)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				return
			}
			this.getCaptcha()
			this.imgCode = ''
			this.showCaptcha = true

		},
		//获取图形验证码
		getCaptcha() {
			captchaImage().then(res => {
				if (this.showCaptcha) {
					this.captchaImg = "data:image/gif;base64," + res.data.img;
					this.uuid = res.data.uuid;
				}
			})
		},
		//图形验证码提交
		submitImgCode() {
			if (!this.imgCode) {
				uni.showToast({
					title: '请输入验证码',
					icon: 'none'
				})
				return
			}

			getValidateCaptcha({ uuid: this.uuid, code: this.imgCode, phone: this.form.tePhone }).then(res => {
				if (res.data.code == 200) {
					this.showCaptcha = false
					this.getCode()
				} else {
					this.imgCode = ''
					uni.showToast({
						title: res.data.message,
						icon: 'none'
					})
				}
			})


		},
		//获取手机验证码
		getCode() {
			if (!this.form.tePhone) {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				})
				return
			}

			if (!/^1[3456789]\d{9}$/.test(this.form.tePhone)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				return
			}
			if (this.isSendingCode || this.countdown < 60) return

			this.isSendingCode = true
			sendMsg({ phone: this.form.tePhone }).then(res => {
				if (res.data.code == 200) {
					uni.showToast({
						title: '验证码已发送',
					})
					this.startCountdown()
					this.isSendingCode = false
					this.CodeSendNum++
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}

			})


		},
		startCountdown() {
			this.startCountdownFlag = true
			this.countdown = 60
			this.timer = setInterval(() => {
				this.countdown--
				if (this.countdown <= 0) {
					clearInterval(this.timer)
					this.startCountdownFlag = false
					this.countdown = 60
					this.timer = null
				}
			}, 1000)
		},

		// upload事件
		onUpload(e) {
			this.avatarList = e;
		},

		//提交
		submit() {
			console.log(this.avatarList, 'avatarList')
			console.log(this.form)
			if (this.form.teName == '') {
				uni.showToast({
					title: '请输入您的姓名',
					icon: 'none'
				})
				return
			}
			if (this.form.teSex === null) {
				uni.showToast({
					title: '请选择您的性别',
					icon: 'none'
				})
				return
			}

			if (!/^1[3456789]\d{9}$/.test(this.form.tePhone)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				});
				return;
			}

			if (this.form.phoneMsg == '') {
				uni.showToast({
					title: '请输入验证码',
					icon: 'none'
				});
				return
			}
			if (this.form.partnerCities == '') {
				uni.showToast({
					title: '请选择城市',
					icon: 'none'
				});
				return
			}
			if (!this.form.serviceTag) {
				uni.showToast({
					title: '请选择开通服务',
					icon: 'none'
				});
				return

			}

			if (this.avatarList.length) {
				this.form.avatar = this.avatarList.map(item => item.url).join(',')
			}
			if (this.avatarList.length < 1) {
				uni.showToast({
					title: '最少上传一张工作形象照',
					icon: 'none'
				});
				return
			} else {
				technicianApply(this.form).then(res => {
					if (res.data.code == 200) {
						uni.setStorageSync('wx_phone', this.form.tePhone)
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						this.checkMerchantStatus()

					} else {
						uni.showToast({
							title: res.msg || res.message,
							icon: 'none'
						});
					}
				})

			}
		},

		selectCity() {
			this.show = true
		},
		cancel() {
			console.log('cancel')
			this.show = false
		},
		//选择城市
		onSelect(e) {
			if (!e.value[0]) return
			const deptItem = e.value[2]
			if (deptItem && deptItem.disabled) {
				uni.showToast({
					title: '该部门不可选，请选择其他部门',
					icon: 'none'
				})
				return
			}
			this.form.partnerCities = e.value[0].name + '/' + e.value[1].name + deptItem.name
			this.form.provinceName = e.value[0].name
			this.form.provinceCode = e.value[0].code
			this.form.cityName = e.value[1].name
			this.form.cityCode = e.value[1].code
			this.form.operationCenterId = deptItem.deptId
			this.form.operationCenterName = deptItem.name
			this.show = false
		},
		// goCity() {
		// 	uni.navigateTo({
		// 		url: '/pages/identify/city?type=' + 'indent'
		// 	})
		// },
		// getAddress() {
		// 	uni.chooseLocation({
		// 		success: res => {
		// 			this.form.name = res.name;
		// 			this.form.latitude = res.latitude;
		// 			this.form.longitude = res.longitude;
		// 			// this.form.address = res.address
		// 		}
		// 	});
		// },

	},
	mounted() {
		this.token = uni.getStorageSync('access-token'); // 假设token保存在本地缓存中
	},
	beforeDestroy() {
		if (this.timer) {
			clearInterval(this.timer)
			this.timer = null
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .u-toolbar__title {
	font-weight: 500;
	font-size: 36rpx;
	color: #1D2129;
}

::v-deep .u-picker__view__column__item {
	font-weight: 400 !important;
	font-size: 28rpx;
	color: #1D2129
}

::v-deep .u-upload__success {
	display: none;
}

::v-deep .u-picker {
	bottom: 136rpx;
	background-color: #ffffff;
	position: relative;
}

::v-deep .u-toolbar__cancel__wrapper {
	width: 30rpx;
	height: 30rpx;
	position: absolute;
	right: 32rpx;
	background-image: url('/static/login/closeIcon.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;

	.u-toolbar__wrapper__cancel {
		width: 30rpx;
		height: 30rpx;

		span {
			display: none;
		}

	}
}



/* 关键：穿透隐藏原生 toolbar，只留插槽内容 */
.u-toolbar {
	z-index: 9999 !important;
	display: block !important;
}

::v-deep .u-toolbar__cancel__wrapper {
	color: #666;
}

::v-deep .u-toolbar__confirm__wrapper {
	position: fixed;
	bottom: 0;
	width: 100%;
	padding: 24rpx 48rpx;

	.u-toolbar__wrapper__confirm {
		width: 654rpx;
		height: 88rpx;
		background: #333335;
		border-radius: 60rpx 60rpx 60rpx 60rpx;

		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.captcha-box {
	width: 622rpx;
	background: #FFFFFF;
	border-radius: 32rpx 32rpx 32rpx 32rpx;

	.captcha-title {
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
		text-align: center;
		padding: 32rpx 0;
		border-bottom: 1rpx solid #E7E7E7;

	}

	.captcha-img {
		//width: 100%;
		width: 146rpx;
		height: 60rpx;
	}

	.submitImgCode {
		width: 526rpx;
		height: 88rpx;
		background: #333335;
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		margin: 48rpx 0;

		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
	}

	.text {
		margin-top: 12rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #86909C;
		text-align: right;

	}

	.u-input {}
}

.join {
	height: 105vh;
	overflow: auto;

	background-color: #F7F8FA;

	.banner {
		width: 100%;
		height: 304rpx;

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

	.top {
		margin: 0 32rpx;
		position: relative;
		padding: 32rpx;
		box-sizing: border-box;
		margin-top: -42rpx;
		background-color: #FFF;
		border-radius: 16rpx;

		.checkBox {
			padding: 24rpx;
			width: 622rpx;
			height: 134rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 1rpx solid #111111;
			margin-bottom: 32rpx;

			//color: #FF7D00;
			.checkStatus {
				font-weight: 500;
				font-size: 30rpx;

				text-align: left;

			}

			.text {
				margin-top: 8rpx;
				font-weight: 400;
				font-size: 26rpx;
				text-align: left;
			}
		}

		.title {
			font-weight: 500;
			font-size: 36rpx;
			color: #1D2129;
			line-height: 36rpx;
			position: relative;

			.lineIcon {
				position: absolute;
				top: 10rpx;
				width: 130rpx;
				height: 24rpx;

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

		.content {
			width: 100%;
			height: auto;
			box-sizing: border-box;
			box-shadow: 0 4rpx 12rpx 0 rgba(209, 168, 88, 0.1);
			border-radius: 24rpx;

			.input-box {
				width: 622rpx;
				height: 110rpx;
				background: #ffffff00 !important;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #E7E7E7;


				.u-input {
					background: #ffffff00 !important;
				}

				.label {
					font-weight: 400;
					font-size: 30rpx;
					color: #291d1d;
					text-align: left;
				}

				.input-item {
					flex: 1;
				}

				.captcha-img {
					width: 30rpx;
					height: 30rpx;
				}

				::v-deep .uni-input-input {
					font-weight: 400;
					font-size: 30rpx;
					color: #4E5969;
					text-align: right;
				}

				.valueText {
					font-weight: 400;
					font-size: 30rpx;
					color: #4E5969;
					text-align: right;
				}

				.code-input {
					margin-right: 42rpx;
					border: 1px solid re;

				}

				.code-btn {
					font-weight: 400;
					font-size: 30rpx;
					color: #19D29B;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}

				// .name {
				// 	width: 31%;
				// 	margin-bottom: 20rpx;
				// }

				.inp {
					width: 100%;
				}

				.select {
					width: 100%;

					display: flex;
					align-items: center;
					justify-content: flex-end;

					.text {
						font-weight: 400;
						font-size: 30rpx;
						text-align: right;
					}

					img {
						width: 22rpx;
						height: 22rpx;
					}
				}
			}

			.page-section {
				width: 100%;
				font-size: 28rpx;
				height: 106rpx;
				display: flex;
				align-items: center;




			}

			.service {
				/* 普通中文/英文自动换行 */
				word-wrap: break-word;
				word-break: break-all;
				white-space: normal;

				.u-radio-group--row {
					display: flex;
					justify-content: flex-end;
					flex-wrap: wrap;
					/* 放不下自动换行 */
					gap: 10px;
					/* 间距，可选 */
				}

				.u-radio {
					/* 减去3个gap宽度，均分4份 */
					// width: calc((100% - 2 * 12px) / 3);
					// box-sizing: border-box;
				}

				::v-deep .u-radio__text {
					font-weight: 400;
					font-size: 30rpx;
					color: #f10000;
					text-align: right;
				}
			}

			.code-box {

				.code-btn {
					width: 200rpx;
					text-align: right;
					font-size: 28rpx;
					color: #2DB1A8;
					line-height: 88rpx;

					&.disabled {
						color: #2DB1A8;
					}
				}
			}


			.updata {
				margin-top: 32rpx;
				width: 100%;

				.name {
					font-weight: 400;
					font-size: 30rpx;
					color: #1D2129;
					text-align: left;
				}

				.images {
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					margin-top: 16rpx;
				}

				.title {
					font-weight: 400;
					font-size: 26rpx;
					color: #86909C;
					text-align: justified;
					overflow: hidden;
					// text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

		}


	}

	.submits {
		padding: 24rpx 48rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		width: 100%;
		margin-top: 28rpx;

		text {
			font-weight: 400;
			font-size: 22rpx;
			color: #86909C;

			display: block;
			width: 100%;
			margin-top: 10rpx;
			text-align: center;
		}

		.btn {
			width: 654rpx;
			height: 88rpx;
			background: #333335;
			border-radius: 60rpx 60rpx 60rpx 60rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}

.keFu {
	position: fixed;
	right: 0;
	bottom: 290rpx;
	width: 100rpx;
	height: 100rpx;
	background: linear-gradient(263deg, rgba(69, 255, 215, 0.4) 0%, rgba(127, 255, 189, 0.4) 100%);
	border-radius: 50%;
	//opacity: 0.4;
	display: flex;
	justify-content: center;
	align-items: center;

	.keFuContent {
		width: 76rpx;
		height: 76rpx;
		background: linear-gradient(263deg, rgba(69, 255, 215, 0.5) 0%, rgba(127, 255, 189, 0.5) 100%);
		border-radius: 50%;
		//opacity: 0.5;

	}
}
</style>