mechanicStore-app/pages/login/merchantRecuitment.uvue

<!-- 商户招募 -->
<template>


		<!-- #ifdef APP -->
		<scroll-view style="flex:1">
			<!-- #endif -->
		<view class="body">
			<!-- 背景图 -->
			<image class="wh" src="/static/other/shzm-bg.png" mode="widthFix">
			</image>
			<image class="jiarwm-box" src="/static/other/shzm-jrwm.png" mode="widthFix">
			</image>
			<view class="center-box">
				<view class="formData-box">
					<view class="title-info-box" v-if="stateNum !== 3 && stateNum !== 1">
						<image class="tit-bg" src="/static/other/btzs-icon.png" mode="widthFix">
						</image>
						<text class="title-bg-text">
							商户招募信息
						</text>
						<!-- 表单  -->
						<form @submit="onFormSubmit" @reset="onFormReset">
							<view class="uni-form-item">
								<text class="title">您的邀请人(选填)</text>
								<input class="uni-input-ellipis" name="invite_code" style="width: 50%" :value="
									formData.invite_code" placeholder="请填写邀请人专属码" maxlength="11" />
							</view>
							<view class="uni-form-item">
								<text class="title">姓名</text>
								<input class="uni-input-ellipis" name="real_name" :value="formData.real_name"
									placeholder="请填写本人姓名" maxlength="11" minlength="2" />
							</view>
							<text class="tis-red-box">*艺名长度四个字以内，默认使用您的姓名</text>
							<view class="uni-form-item">
								<text class="title">工作艺名(选填)</text>
								<input class="uni-input-ellipis" name="nickname" :value="formData.nickname"
									placeholder="请填写您的艺名" maxlength="4" />
							</view>
							<view class="uni-form-item">
								<text class="title">性别</text>
								<radio-group name="gender" class="flex-row">
									<view class="group-item">
										<radio value="0" :checked="formData.gender==0" />
										<text>男</text>
									</view>
									<view class="group-item">
										<radio value="1" :checked="formData.gender==1" />
										<text>女</text>
									</view>
								</radio-group>
							</view>
							<view class="uni-form-item">
								<text class="title">手机号码</text>
								<input class="uni-input-ellipis" type="number" name="mobile" :value="formData.mobile"
									placeholder="请填写本人手机号码" maxlength="11" />
							</view>
							<view class="ss-flex-2 code-box uni-form-item">
								<input class="input-field" type="number" name="code" placeholder="请输入验证码"
									:value="formData.code" maxlength="6" />
								<text class="code-btn" :class="{ disabled: !canSend }" @click="sendCode">
									{{ codeText }}
								</text>
							</view>
							<view class="uni-form-item" required>
								<text class="title">年龄</text>
								<input class="uni-input-ellipis" type="number" name="age" style="width:80%"
									placeholder-class="placeholder-class" :value="formData.age"
									placeholder="请输入本人实际年龄，18岁以上" />
							</view>
							<view class="uni-form-item" required>
								<text class="title">意向合作城市</text>
								<picker class="picker" placeholder="请选择城市" name="timeZone" @change="onTimeZoneChange" :value="formData.timeZoneIndex" :range="areaDate">
									<view class="uni-picker-select-value pickerValue">{{timeZoneList[0]}}</view>
								  </picker>
							</view>
							<view class="upload-card-box" v-if="stateNum === 0 || stateNum === 3">
								<view class="yaoqi-box"><text style="color: red;font-size: 28rpx;">*</text>请上传身份证正面<text
										style="font-size: 24rpx;color: #999999;">（图片不得超过10M）</text></view>
								<view class="ss-flex-2" style="margin-top: 20rpx;">
									<view class="image-border-box" v-if="frontIdCardImage.length > 0"
										v-for="item in frontIdCardImage" :key="item?.id">
										<image class="wh" :src="item?.url">
										</image>
										<image style="width: 42rpx;height: 42rpx;border-radius: 50%;"
											@click="deleteFront" src="/static/other/upload-chah.png"
											class="upload-chah">
										</image>
									</view>
									<view class="image-border-box" v-if="frontIdCardImage.length === 0"
										@click="uploadIdCardFront">
										<image style="width: 52rpx;height: 52rpx;" src="/static/other/shzm-jiah.png"
											mode="widthFix">
										</image>
									</view>
								</view>
							</view>
							<view class="upload-card-box" v-if="stateNum === 0 || stateNum === 3">
								<view class="yaoqi-box"><text style="color: red;font-size: 28rpx;">*</text>请上传身份证反面<text
										style="font-size: 24rpx;color: #999999;">（图片不得超过10M）</text></view>
								<view class="ss-flex-2" style="margin-top: 20rpx;">
									<view class="image-border-box" v-if="backIdCardImage.length > 0"
										v-for="item in backIdCardImage" :key="item?.id">
										<image class="wh" :src="item?.url">
										</image>
										<image style="width: 42rpx;height: 42rpx;border-radius: 50%;"
											@click="deleteBack" src="/static/other/upload-chah.png" class="upload-chah">
										</image>
									</view>
									<view class="image-border-box" v-if="backIdCardImage.length === 0"
										@click="uploadIdCardBack">
										<image style="width: 52rpx;height: 52rpx;" src="/static/other/shzm-jiah.png"
											mode="widthFix">
										</image>
									</view>
								</view>
							</view>
							<view class="upload-card-box" v-if="stateNum === 0 || stateNum === 3">
								<view class="yaoqi-box"><text style="color: red;font-size: 28rpx;">*</text>请上传近期照
								</view>
								<view class="yaoqi-box" style="margin-top: 6rpx;"><text
										style="font-size: 24rpx;color: red;">请提供艺术照用于P图，正方形不得大于10M。</text>
								</view>
								<view class="ss-flex-2" style="margin-top: 20rpx;">
									<view class="image-border-box" v-if="lifePhone.length > 0" v-for="item in lifePhone"
										:key="item?.id">
										<image class="wh" :src="item?.url">
										</image>
										<image style="width: 42rpx;height: 42rpx;border-radius: 50%;"
											@click="deleteLifePhone()" src="/static/other/upload-chah.png"
											class="upload-chah">
										</image>
									</view>
									<view class="image-border-box" v-if="lifePhone.length < 6" @click="uploadLifePhone">
										<image style="width: 52rpx;height: 52rpx;" src="/static/other/shzm-jiah.png"
											mode="widthFix">
										</image>
									</view>
								</view>
							</view>
							<text class="tix-box" v-if="stateNum === 0 || stateNum === 3">
								注：信息只做审核，绝对保密
							</text>
							<view class="savesubmit">
								<!-- <view class="saveInfo" v-if="stateNum === 0" @click="saveFormInfo">提交</view> -->
							
									<button class="saveInfo" form-type="submit" type="primary">提交</button>
							
							</view>
						</form>


					</view>
					<!-- <view v-if="stateNum === 1">
						<view class="ss-flex-2 shenz-box">
							<view class="ss-flex-1"></view>
							<image style="width: 346rpx;height: 268rpx;"
								src="/static/clientImage/clientImages/other/shzm-1.png" mode="widthFix">
							</image>
							<view class="ss-flex-1"></view>
						</view>
						<view class="miaos-2-box">您的信息已提交，平台正在审核中，请耐心等待~</view>
					</view> -->
					<!-- 					<view v-if="stateNum === 3">
						<view class="ss-flex-2 shenz-box">
							<view class="ss-flex-1"></view>
							<image style="width: 346rpx;height: 268rpx;"
								src="/static/clientImage/clientImages/other/shzm-3.png" mode="widthFix">
							</image>
							<view class="ss-flex-1"></view>
						</view>
						<view class="shib-box">审核失败</view>
						<view class="miaos-2-box">您的信息有误，请重新提交~</view>
						<view class="miaos-2-box" style="color: #F78342;font-size: 26rpx;">审核备注：{{
				coachDetaile?.base_info?.audit_remark
				}}</view>
						<view class="ss-flex-2 shenz-box" style="margin-top: 20rpx;">
							<view class="ss-flex-1"></view>
							<view class="tij-box" @click="againForm">重新提交</view>
							<view class="ss-flex-1"></view>
						</view>
					</view> -->


				</view>

			</view>
		</view>
		<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>
<script setup>
	import {
		ref
	} from 'vue';
	import { newUploadImage } from '../../utils/api/tool.uts';
	// 引入城市json
	import cityJson from '../../static/pca-code.json'
	import { fetchSendcode, fetchLogin } from '@/utils/api/login.uts'
	// 根据view中的表单需求修改数据结构和初始化值

	type MerchantFormData = {
		invite_code : string;     // 邀请码
		real_name : string;       // 姓名
		nickname : string;        // 昵称
		gender : number;          // 性别
		mobile : string;          // 手机号码
		code : string;            // 验证码
		age : string;             // 年龄
		intention_city : string;  // 意向城市
	}

	const formData = reactive<MerchantFormData>({
		invite_code: '',
		real_name: '',
		nickname: '',
		gender: 2,
		mobile: '',
		code: '',
		age: '',
		intention_city: ''
	})
	// type DataType = {
    // nickname: string;
    // gender: string;
    // age: number;
    // loves: string[];
    // switch: boolean;
    // timeZoneIndex: number;
    // timeZoneList: string[];
    // multiArray: string[][];}
	// const data = reactive({
    // nickname: '',
    // gender: '0',
    // age: 18,
    // loves: ['0'],
    // switch: true,
    // timeZoneIndex: 0,
    // timeZoneList: ['中国', '美国', '巴西', '日本'],})

	// 定义定时器变量
	let timer : number | null = null;
	const countdown = ref<number>(0);
	const canSend = computed(() => formData.mobile.length === 11 && countdown.value === 0);
	// const canLogin = computed(() => phone.value.length === 11 && mobileCode.value.length === 6 && isAgree.value);
	const codeText = computed(() => countdown.value > 0 ? `${countdown.value}s 后重试` : '获取验证码');
	// //城市列表
	const areaDate = ref(cityJson)

	//表单校验规则
	const rules = ref({
		real_name: {
			rules: [{
				required: true,
				errorMessage: '请输入姓名',
			}],
		},
		gender: {
			rules: [{
				required: true,
				errorMessage: '请选择性别',
			},],
		},
		mobile: {
			rules: [
				{ required: true, errorMessage: '请输入手机号', trigger: 'blur' },
				{ pattern: '^1[3-9]\\d{9}$', errorMessage: '手机号格式不正确' }
			]
		},
		// code: {
		// 	rules: [{
		// 		required: true,
		// 		errorMessage: '请填写验证码',
		// 	}, {
		// 		validateFunction: function (rule, value, data, callback) {
		// 			let codeReg = /^\d{6}$/;
		// 			if (!codeReg.test(value)) {
		// 				callback('验证码必须是六位数字');
		// 			}
		// 			return true;
		// 		}
		// 	}],
		// },
		// age: {
		// 	rules: [{
		// 		required: true,
		// 		errorMessage: '请填写年龄',
		// 	}, {
		// 		validateFunction: function (rule, value, data, callback) {
		// 			if (value < 18 || value > 50) {
		// 				callback('年龄必须大于18岁小于50岁');
		// 			}
		// 			return true;
		// 		}
		// 	}],
		// },
		intention_city: {
			rules: [{
				required: true,
				errorMessage: '请选择城市',
			},],
		},
	})



	// const cityMapping = {};
	// 上传身份证正面照片
	const frontIdCardImage = ref<UTSJSONObject[]>([])
	// 上传身份证反面照片
	const backIdCardImage = ref<UTSJSONObject[]>([])
	//近期生活照
	const lifePhone = ref<UTSJSONObject[]>([])
	// //是否是待审核状态
	const stateNum = ref(0);
	// //技师详情
	// const coachDetaile = ref()
	// onLoad(async () => {
	// 	frontIdCardImage.value = []
	// 	backIdCardImage.value = []
	// 	lifePhone.value = []
	// 	countdown.value = 0
	// 	stateNum.value = 0
	// 	coachDetaile.value = ''
	// 	await getCoachInfo()
	// 	await getUserInfo()
	// })
	// //获取用户信息
	// const getUserInfo = async () => {
	// 	try {
	// 		const res = await myInfoApi.getUserInfo();
	// 		if (res && (res.code === 200 || res.code === 0)) {
	// 			const userInfo = res.data;
	// 			if (userInfo?.coach?.base_info_state === 2 || userInfo?.coach?.state === 2) {
	// 				uni.showToast({
	// 					title: '您已是尊贵的商户！',
	// 					icon: 'none',
	// 					duration: 2000
	// 				});
	// 				setTimeout(() => {
	// 					uni.redirectTo({
	// 						url: '/pages/clientProject/myHome/index'
	// 					});
	// 				}, 2500);
	// 			}
	// 		}
	// 	} catch (e) {
	// 		uni.showToast({ title: '获取用户信息失败', icon: 'none' });
	// 	}
	// }
	// //重新提交
	// const againForm = async () => {
	// 	stateNum.value = 0
	// }
	// //获取技师基本信息
	// const getCoachInfo = async () => {
	// 	coachInfoApi.getCoachInfo().then(res => {
	// 		if ((res.code === 200 || res.code === 0) && res.data?.base_info) {
	// 			coachDetaile.value = res?.data
	// 			const item = res?.data?.base_info
	// 			stateNum.value = item?.state
	// 			const itemInfo = res?.data?.real_name
	// 			let info = {
	// 				invite_code: item?.invite_code || '',
	// 				real_name: itemInfo?.real_name,
	// 				nickname: item?.nickname,
	// 				gender: item?.gender - 0,
	// 				mobile: item?.mobile,
	// 				code: '',
	// 				age: item?.age,
	// 				intention_city: item?.intention_city,
	// 				id: item?.id || ''
	// 			}
	// 			formData.value = info
	// 			frontIdCardImage.value = [itemInfo?.id_card_front_photo_url]
	// 			backIdCardImage.value = [itemInfo?.id_card_back_photo_url]
	// 			lifePhone.value = item?.life_photo_urls
	// 		}
	// 	})
	// }
	// const baseForm = ref(null)
	//提交
	const onFormSubmit = (e : UniFormSubmitEvent) => {
		// formData = e.detail.value
		console.log(e.detail.value, 'e.detail.value');

		// // 仅测试
		// data.testVerifySubmit = (e.type == 'submit' && (e.target?.tagName ?? '') == "FORM")
	}

	const onFormReset = (e : UniFormResetEvent) => {
		// data.formData = {}
		// data.timeZoneIndex = 0

		// // 仅测试
		// data.testVerifyReset = (e.type == 'reset' && (e.target?.tagName ?? '') == "FORM")
	}

	// const onFormSubmit = async () => {
	// if (!formData.value.real_name) {
	// 	uni.showToast({
	// 		title: '请填写您的姓名',
	// 		icon: 'none',
	// 		duration: 2500
	// 	})
	// 	return
	// }
	// if (!formData.value.gender) {
	// 	uni.showToast({
	// 		title: '请选择性别',
	// 		icon: 'none',
	// 		duration: 2500
	// 	})
	// 	return
	// }
	// if (!formData.value.mobile) {
	// 	uni.showToast({
	// 		title: '请填写手机号码',
	// 		icon: 'none',
	// 		duration: 2500
	// 	})
	// 	return
	// }
	// if (!formData.value.code) {
	// 	uni.showToast({
	// 		title: '请填写手机验证码',
	// 		icon: 'none',
	// 		duration: 2500
	// 	})
	// 	return
	// }
	// if (!formData.value.age) {
	// 	uni.showToast({
	// 		title: '请填写年龄',
	// 		icon: 'none',
	// 		duration: 2500
	// 	})
	// 	return
	// }
	// if (!formData.value.intention_city) {
	// 	uni.showToast({
	// 		title: '请选择意向合作城市',
	// 		icon: 'none',
	// 		duration: 2500
	// 	})
	// 	return
	// }
	// 	const isFlag = await baseForm.value.validate();
	// 	if (!isFlag) return;
	// 	//判断是否上传身份证正反面
	// 	if (frontIdCardImage.value.length === 0) {
	// 		uni.showToast({
	// 			title: '请上传身份证正面照片',
	// 			icon: 'none',
	// 			duration: 2000
	// 		})
	// 		return
	// 	}
	// 	if (backIdCardImage.value.length === 0) {
	// 		uni.showToast({
	// 			title: '请上传身份证反面照片',
	// 			icon: 'none',
	// 			duration: 2000
	// 		})
	// 		return
	// 	}
	// 	if (lifePhone.value.length === 0) {
	// 		uni.showToast({
	// 			title: '请上传近期照片',
	// 			icon: 'none',
	// 			duration: 2000
	// 		})
	// 		return
	// 	}
	// 	if (lifePhone.value.length < 3) {
	// 		uni.showToast({
	// 			title: '请上传近期至少3张照片',
	// 			icon: 'none',
	// 			duration: 2000
	// 		})
	// 		return
	// 	}

	// 	const lifeId = []
	// 	for (let i = 0; i < lifePhone.value.length; i++) {
	// 		lifeId.push(lifePhone.value[i].id)
	// 	}

	// 	const info = {
	// 		invite_code: formData.value.invite_code ?? '',
	// 		gender: formData.value.gender + '',
	// 		life_photos: lifeId,
	// 		mobile: formData.value.mobile,
	// 		age: formData.value.age - 0,
	// 		intention_city: formData.value.intention_city,
	// 		real_name: formData.value.real_name,
	// 		nickname: formData.value.nickname,
	// 		id_card_front_photo: frontIdCardImage.value[0].id - 0,
	// 		id_card_back_photo: backIdCardImage.value[0].id - 0,
	// 		code: formData.value.code,
	// 	}
	// 	coachInfoApi.setBaseInfoForm(info).then(res => {
	// 		uni.showToast({
	// 			title: '商户信息提交成功，等待审核',
	// 			icon: 'none',
	// 			duration: 2000
	// 		})
	// 		stateNum.value = 1
	// 		uni.redirectTo({
	// 			url: '/pages/clientProject/clientFeat/merchantRecruitment/index'
	// 		})
	// 		setTimeout(() => {
	// 			uni.reLaunch({
	// 				url: '/pages/clientProject/myHome/index'
	// 			})
	// 		}, 8000)
	// 	})
	// }
	const onTimeZoneChange = (e: UniPickerChangeEvent) => {
    // data.timeZoneIndex = e.detail.value as number
    console.log('时区选择改变，携带值为：' + e.detail.value)
  }
	//上传身份证正面
	const uploadIdCardFront = async () => {
		if (frontIdCardImage.value.length >= 1) {
			uni.showToast({
				title: '只允许上传一张图片',
				icon: 'none',
				duration: 1000
			})
			return
		}
		let res = await newUploadImage('photo-images', 'real-photo')
		const code = (res as UTSJSONObject)["code"] as number | null;
		const data = (res as UTSJSONObject)["data"] as UTSJSONObject | null;
		const message = (res as UTSJSONObject)["message"] as string ?? '';
		if (code == 200) {
			uni.showToast({
				title: message,
				icon: 'none',
				duration: 1000
			})
			frontIdCardImage.value.push(data as UTSJSONObject)
		}
	}
	//上传身份证反面
	const uploadIdCardBack = async () => {
		if (backIdCardImage.value.length >= 1) {
			uni.showToast({
				title: '只允许上传一张图片',
				icon: 'none',
				duration: 1000
			})
			return
		}
		let res = await newUploadImage('photo-images', 'real-photo')
		const code = (res as UTSJSONObject)["code"] as number | null;
		const data = (res as UTSJSONObject)["data"] as UTSJSONObject | null;
		const message = (res as UTSJSONObject)["message"] as string ?? '';
		if (code == 200) {
			uni.showToast({
				title: message,
				icon: 'none',
				duration: 1000
			})
			backIdCardImage.value.push(data as UTSJSONObject)
		}
	}
	//上传近期生活照
	const uploadLifePhone = async () => {
		if (lifePhone.value.length >= 6) {
			uni.showToast({
				title: '近期照片最多上传6张',
				icon: 'none',
				duration: 2000
			})
			return
		}
		let res = await newUploadImage('photo-images', 'life-photo')
		const code = (res as UTSJSONObject)["code"] as number | null;
		const data = (res as UTSJSONObject)["data"] as UTSJSONObject | null;
		const message = (res as UTSJSONObject)["message"] as string ?? '';
		if (code == 200) {
			uni.showToast({
				title: message,
				icon: 'none',
				duration: 2000
			})
			lifePhone.value.push(data as UTSJSONObject)
		}
	}
	//删除身份证正面
	const deleteFront = async () => {
		frontIdCardImage.value = []
	}
	//删除身份证反面
	const deleteBack = async () => {
		backIdCardImage.value = []
	}
	//删除近期照片
	const deleteLifePhone = async () => {
		// const imageArr = JSON.parse(JSON.stringify(lifePhone.value))
		// const setImageArr = []
		// for (let i = 0; i < imageArr.length; i++) {
		// 	const info = imageArr[i]
		// 	if (info.id !== item.id) {
		// 		setImageArr.push(info)
		// 	}
		// }
		// lifePhone.value = setImageArr
	}

	const sendCode = async () => {
		if (!canSend.value) return;
		// console.log(mobile.value, 'mobile')
		const res = await fetchSendcode({ mobile: formData.mobile });
		const currentTimer = timer;
		if (currentTimer !== null) {
			clearInterval(currentTimer);
		}
		timer = null;

		countdown.value = 60;
		uni.showToast({ title: '验证码已发送', icon: 'success' });

		timer = setInterval(() => {
			countdown.value--;
			if (countdown.value <= 0) {
				const t = timer;
				if (t !== null) {
					clearInterval(t);
				}
				timer = null;
				countdown.value = 0;
			}
		}, 1000);
	};
	// /**
	//  * 校验手机号格式
	//  */
	// const validatePhone = (mobile) => {
	// 	if (!mobile) {
	// 		uni.showToast({ title: '请输入手机号' })
	// 		return false
	// 	}
	// 	if (!/^1[0-9]{10}$/.test(mobile)) {
	// 		uni.showToast({ title: '手机号码格式不正确' })
	// 		return false
	// 	}
	// 	return true
	// }
	// /**
	//  * 开始倒计时
	//  */
	// const startCountdown = () => {
	// 	countdown.value = 60
	// 	countdownTimer.value = setInterval(() => {
	// 		if (--countdown.value <= 0) {
	// 			clearInterval(countdownTimer.value)
	// 		}
	// 	}, 1000)
	// }

	// const buildCityMapping = (data) => {
	// 	data.forEach(province => {
	// 		province.children.forEach(city => {
	// 			cityMapping[city.value] = city.text; // 省级城市
	// 			city.children.forEach(district => {
	// 				cityMapping[district.value] = district.text; // 区级城市
	// 			});
	// 		});
	// 	});
	// };

	// buildCityMapping(cityJson);
	// //选择意向城市
	// const onchange = async (e) => {
	// 	let cityArr = e.detail.value
	// 	if (cityArr.length > 0) {
	// 		formData.value.intention_city = cityArr[cityArr.length - 1].value
	// 	}
	// }
	// //清除定时器
	// onHide(() => {
	// 	clearInterval(countdownTimer.value)
	// 	countdownTimer.value = null
	// })
	// const bottomHeight = ref('0rpx');
	// #ifdef APP-PlUS
	//获取顶部安全距离
	const app = uni.getSystemInfoSync();
	const bottomHeightOne = app.statusBarHeight + 'rpx';
	bottomHeight.value = bottomHeightOne
	// #endif
</script>

<style scoped lang="scss">
	.tis-red-box {
		font-size: 24rpx;
		color: red;
	}

	.shenz-box {
		width: 100%;
		margin-top: 200rpx;
		align-items: center;
	}

	.upload-chah {
		position: absolute;
		top: -20rpx;
		right: -20rpx;
	}

	.code-box {
		width: 100%;
		height: 100rpx;
		border-radius: 16rpx;
		background-color: #FFFDD7;
		margin-bottom: 20rpx;
		align-items: center;
		box-sizing: border-box;
	}

	.miaos-2-box {
		width: 64%;
		margin-left: 18%;
		font-size: 28rpx;
		color: #3A3330;
		letter-spacing: 1rpx;
		margin-top: 26rpx;
		text-align: center;
		box-sizing: border-box;
	}

	.shib-box {
		font-size: 32rpx;
		color: #3A3330;
		font-weight: 600;
		letter-spacing: 2rpx;
		text-align: center;
		margin-top: 36rpx;
		box-sizing: border-box;
	}

	.tij-box {
		width: 286rpx;
		height: 76rpx;
		line-height: 76rpx;
		border-radius: 50rpx;
		font-size: 30rpx;
		color: #3A3330;
		font-weight: 600;
		letter-spacing: 2rpx;
		text-align: center;
		background: linear-gradient(to bottom, #FFDA59, #FFDC62);
	}

	//修改输入框样式
	.searc-input {
		position: relative;
		display: block;
		height: 100rpx !important;
		line-height: 100rpx !important;
		text-align: left !important;
		letter-spacing: 1rpx !important;
		text-indent: 20rpx !important;
		font-size: 28rpx !important;
	}

	.getcode-box {
		font-size: 28rpx;
		color: #AECC59;
		letter-spacing: 2rpx;
		padding-right: 20rpx;
	}




	// .formData-two-box {
	// 	position: relative;
	// 	width: 100%;
	// 	// min-height: 1950rpx;
	// 	border-radius: 32rpx;
	// 	padding: 32rpx;
	// 	background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.65));
	// 	box-sizing: border-box;
	// }

	// 上中下布局样式
	.body {
		position: relative;

		// height: 2650rpx;
		background-color: #FEF9CF;
		box-sizing: border-box;
	}

	.wh {
		width: 100%;
		position: absolute;
		// top:0;
		// left:0
	}

	.uni-form-item {
		background-color: #FFFDD7;
		border-radius: 16rpx;
		height: 100rpx;
		margin: 10rpx 0;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;

		box-sizing: border-box;
	}

	//商户招募样式
	.center-box {
		// position: absolute;
		// top: 0;
		// left: 0;
		// bottom: 0;
		// right: 0;
		// width: 100vw;
		height: 100%;
		box-sizing: border-box;
		width: 100%;
		position: relative;
		padding: 32rpx;
	}

	.formData-box {
		// 	position: relative;
		// 	width: 94%;
		// 	margin-left: 3%;
		// 	// min-height: 1950rpx;
		border-radius: 32rpx 32rpx 0 0;
		margin-top: 406rpx;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.65));
		box-sizing: border-box;
		background: rgba(255, 255, 255, 0.8);
		padding: 32rpx;
	}

	.input-field {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}

	.uni-input-ellipis {
		text-align: right;
		width: 60%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 28rpx;
		font-family: AlimamaDaoLiTiOTF;
	}

	.placeholder-class {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.flex-row {
		flex-direction: row;
		align-items: center;
	}

	.group-item {
		flex-direction: row;
		margin-right: 20px;
	}

	.code-btn {
		font-size: 26rpx;
		color: #ffc107;
		font-weight: bold;
		white-space: nowrap;
	}

	.code-btn.disabled {
		color: #ccc;
	}

	.jiarwm-box {
		position: absolute;
		top: 12%;
		left: 90rpx;
		width: 312rpx;
		height: 122rpx;
		z-index: 1
	}

	.title-info-box {
		position: relative;
		margin-top: 8rpx;
		font-size: 36rpx;
		color: #3D444E;
		font-weight: 600;
		letter-spacing: 2rpx;
		box-sizing: border-box;
	}

	.tit-bg {
		width: 180rpx;
		height: 52rpx;
	}

	.title-bg-text {
		position: absolute;
		top: -10rpx;
		left: 0;
		width: 280rpx;
		height: 52rpx;
		line-height: 52rpx;
		font-size: 36rpx;
		color: #3A3330;
		font-weight: 700;
		letter-spacing: 2rpx;
		box-sizing: border-box;
	}

	.upload-card-box {
		width: 100%;
		min-height: 280rpx;
		border-radius: 24rpx;
		background-color: #FFFDD7;
		margin-bottom: 20rpx;
		padding: 24rpx;
		box-sizing: border-box;
	}

	.yaoqi-box {
		font-size: 28rpx;
		color: #3A3330;
		letter-spacing: 1rpx;
		flex-direction: row;
	}

	.image-border-box {
		width: 168rpx;
		height: 168rpx;
		border-radius: 16rpx;
		background-color: #FFFEEE;
		border: 2rpx dashed #E1D650;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		margin-right: 26rpx;
		margin-bottom: 20rpx;
		box-sizing: border-box;
	}

	.tix-box {
		width: 100%;
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #CCCCCC;
	}
	.savesubmit{
		width: 100%;padding-left: 32rpx;padding-right: 32rpx;margin-top: 40rpx;box-sizing: border-box;
	}
	.saveInfo {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 32rpx;
		color: #3A3330;
		font-weight: 600;
		letter-spacing: 4rpx;
		background-color: #FFDB5A;
		border-radius: 24rpx;
		box-sizing: border-box;
	}

	//old样式
	.icon-navigation {
		font-size: 32rpx;
		color: #3D444E;
		font-weight: 700;
	}
</style>