caimei-applets-caimei/pages/seller/login/register-member.vue

<template>
	<view class="register">
		<view class="register-main" v-if="isRegisterStep">
			<view class="main-form-item">
				<view class="form-label">联系人</view>
				<input
					class="form-input"
					type="text"
					name="input"
					v-model.trim="params.linkMan"
					placeholder="请输入联系姓名"
					maxlength="6"
				/>
			</view>
			<view class="main-form-item">
				<view class="form-label">手机号:</view>
				<input
					class="form-input phone"
					type="text"
					v-model.trim="params.bindMobile"
					placeholder="请输入联系人手机号"
					maxlength="11"
				/>
				<view class="form-btn" @click.stop="CheckMobile()">检测</view>
			</view>
			<view class="main-form-item">
				<view class="form-label">联系人身份:</view>
				<view class="form-input">
					<picker @change="bindPickerUserName($event)" :value="index" :range="stateActions" range-key="name">
						<input
							class="form-input"
							:class="linkManIdentityText === '请选择联系人身份' ? 'none' : ''"
							type="text"
							disabled="false"
							v-model="linkManIdentityText"
							value=""
							placeholder="请选择"
						/>
					</picker>
				</view>
				<view class="iconfont icon-xiayibu"></view>
			</view>
			<view class="main-form-item">
				<view class="form-label">邮箱:</view>
				<input
					class="form-input"
					type="text"
					name="input"
					v-model.trim="params.contractEmail"
					placeholder="请输入机构邮箱地址"
					maxlength="30"
				/>
			</view>
			<view class="main-form-item">
				<view class="form-label">机构名称:</view>
				<input
					class="form-input"
					type="text"
					name="input"
					v-model.trim="params.name"
					placeholder="请输入机构名称"
					maxlength="30"
				/>
			</view>
			<view class="main-form-item">
				<view class="form-label">机构简称:</view>
				<input
					class="form-input"
					type="text"
					name="input"
					v-model.trim="params.shortName"
					placeholder="请输入机构简称"
					maxlength="10"
				/>
			</view>
			<view class="main-form-item" @click="showMulLinkageThreePicker">
				<view class="form-label">机构地址:</view>
				<view class="form-input" :class="addressText === '请选择机构所在地区' ? 'none' : ''">
					{{ addressText }}
				</view>
				<view class="iconfont icon-xiayibu"></view>
			</view>
			<view class="main-form-item textarea">
				<view class="textarea show" v-if="isShowInput" @click="showTextareaFocus">{{
					params.address ? params.address : '详细地址：如道路、门牌号、小区等'
				}}</view>
				<textarea
					v-else
					class="textarea"
					type="text"
					v-model="params.address"
					placeholder="详细地址：如道路、门牌号、小区等"
					placeholder-class="placeholder"
					maxlength="35"
					@input="onTextareaInput"
					@blur="hideTextareaFocus"
					:class="isShowInput ? '' : ''"
				/>
			</view>
			<view class="main-form-item">
				<view class="form-label lang">营业执照编号:</view>
				<input
					class="form-input lang"
					type="text"
					name="input"
					v-model="params.socialCreditCode"
					placeholder="请输入社会信用统一代码"
					maxlength="18"
				/>
			</view>
			<view class="main-form-item file">
				<view class="main-form-upload">
					<view class="label">营业执照:</view>
					<view class="upload-picture">
						<view class="upload-none" v-if="params.businessLicense === ''" @click="UploadPicture(1)">
							<text class="iconfont icon-jiahao"></text><text class="upload-text">营业执照</text>
						</view>
						<view class="upload-image" v-else>
							<image :src="params.businessLicense" mode="" @click="ShowPreviewImage(1)"></image>
							<view class="upload-del" @click="DeletePicture(1)">
								<text class="iconfont icon-shanchu1"></text>
							</view>
						</view>
					</view>
				</view>
				<view class="main-form-upload">
					<view class="label">门头照:</view>
					<view class="upload-picture">
						<view class="upload-none" v-if="params.shopPhoto === ''" @click="UploadPicture(2)">
							<text class="iconfont icon-jiahao"></text><text class="upload-text">门头照</text>
						</view>
						<view class="upload-image" v-else>
							<image :src="params.shopPhoto" mode="" @click="ShowPreviewImage(2)"></image>
							<view class="upload-del" @click="DeletePicture(2)">
								<text class="iconfont icon-shanchu1"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="main-form-item picker">
				<view class="form-label">机构类型:</view>
			</view>	
			<view class="main-form-item picker">
				<radio-group @change="bindPickerChange">
					<label class="label-radio" v-for="(item, index) in radioGroup1" :key="item.value">
						<radio class="row-radio" :value="item.value" :checked="index === current" color="#E15616" />
						<view class="row-text">{{ item.name }}</view>
					</label>
				</radio-group>
			</view>
			<view class="main-form-item picker" v-if="params.firstClubType == 1">
				<view class="picker-radio">
					<view
						class="secondTyperadio"
						v-for="(item, index) in beautyList"
						:key="item.value"
						@click="radioChange(item)"
						:class="item.value == params.secondClubType ? 'active' : ''"
					>
						<view class="secondRadio">{{ item.name }}</view>
					</view>
				</view>
			</view>
			<view class="main-form-item picker" v-if="params.firstClubType == 2">
				<view class="picker-radio">
					<view
						class="secondTyperadio"
						v-for="(item, index) in beautyLists"
						:key="item.value"
						@click="radioChange(item)"
						:class="item.value == params.secondClubType ? 'active' : ''"
					>
						<view class="secondRadio">{{ item.name }}</view>
					</view>
				</view>
			</view>
			<view class="main-form-item file" v-if="params.firstClubType == 1">
				<view class="main-form-upload">
					<view class="label">资质:</view>
					<view class="upload-picture">
						<view class="upload-none" v-if="params.medicalPracticeLicense === ''" @click="UploadPicture(3)">
							<text class="iconfont icon-jiahao"></text><text class="upload-text">医疗执业许可证</text>
						</view>
						<view class="upload-image" v-else>
							<image :src="params.medicalPracticeLicense" mode="" @click="ShowPreviewImage(3)"></image>
							<view class="upload-del" @click="DeletePicture(3)">
								<text class="iconfont icon-shanchu1"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view
				class="main-form-item none"
				v-if="
					(params.firstClubType == 1 && params.secondClubType == 2) ||
						(params.firstClubType == 1 && params.secondClubType == 3)
				"
			>
				<view class="form-label none">科室</view>
				<textarea
					class="textarea-ke"
					placeholder="请填写经营的科室，至少三个，用逗号隔开"
					placeholder-style="placeholder"
					v-model="params.department"
					maxlength="16"
				></textarea>
			</view>
			<view class="main-form-item none" v-if="params.firstClubType == 1">
				<view class="form-label none">主营内容:</view>
				<view class="form-checkbox-group">
					<checkbox-group @change="ChooseMaleLike">
						<label
							class="item"
							v-for="(item, index) in mentuzCampList"
							:key="index"
							:class="{ on: item.checked }"
						>
							<checkbox
								class="item-checkbox"
								:value="item.value"
								color="#E15616"
								style="transform:scale(0.7)"
								:checked="item.checked"
							></checkbox>
							<text class="item-text">{{ item.name }}</text>
						</label>
					</checkbox-group>
				</view>
				<view class="form-checkbox-input">
					<input
						class="checkbox-input"
						type="text"
						v-model="customItemValue"
						placeholder="请输入其他自定义品项目"
						maxlength="5"
					/>
					<view class="checkbox-btn" @click.stop="addCustomItem">确认添加</view>
				</view>
			</view>
			<view class="main-form-item none" v-if="params.firstClubType == 2">
				<view class="form-label none">主营内容:</view>
				<view class="form-checkbox-group">
					<checkbox-group @change="ChooseMaleLike">
						<label
							class="item"
							v-for="(item, index) in medicaCampList"
							:key="index"
							:class="{ on: item.checked }"
						>
							<checkbox
								class="item-checkbox"
								:value="item.value"
								color="#E15616"
								style="transform:scale(0.7)"
								:checked="item.checked"
							></checkbox>
							<text class="item-text">{{ item.name }}</text>
						</label>
					</checkbox-group>
				</view>
				<view class="form-checkbox-input">
					<input
						class="checkbox-input"
						type="text"
						v-model="customItemValue"
						placeholder="请输入其他自定义品项目"
						maxlength="5"
					/>
					<view class="checkbox-btn" @click.stop="addCustomItem">确认添加</view>
				</view>
			</view>
			<view class="register-fiexd clearfix" :style="{ paddingBottom: isIphoneX ? '68rpx' : '' }">
				<view class="register-agree">
					<view class="agree-text" @tap.stop="agreeCheck()">
						<button
							class="checkbox iconfont"
							:class="[isCheck ? 'icon-gouxuan' : 'icon-weigouxuan']"
						></button>
						我已阅读并同意
						<text @click.stop="this.$api.navigateTo('/pages/service/service?id=1036&title=机构协议')"
							>《机构协议》</text
						>
						<text @click.stop="this.$api.navigateTo('/pages/service/service?id=1023&title=用户协议')"
							>《用户协议》</text
						>及
						<text @click.stop="this.$api.navigateTo('/pages/service/service?id=1013&title=隐私权政策')"
							>《隐私权政策》</text
						>
					</view>
				</view>
				<view class="register-row">
					<view class="register-btn sub" :class="isSubLoading ? 'disabled' : ''" @click.stop="SubmitRegister"
						>确定</view
					>
				</view>
			</view>
		</view>
		<view class="register-main" v-else>
			<view class="main-form-item">
				<view class="form-label">联系人</view> <view class="form-text"> {{ clubInfo.linkMan }} </view>
			</view>
			<view class="main-form-item">
				<view class="form-label">手机号</view> <view class="form-text">{{ clubInfo.bindMobile }}</view>
			</view>
			<view class="main-form-item">
				<view class="form-label">邮箱</view> <view class="form-text">{{ clubInfo.contractEmail }}</view>
			</view>
			<view class="main-form-item">
				<view class="form-label">机构名称</view> <view class="form-text">{{ clubInfo.name }}</view>
			</view>
			<view class="main-form-item">
				<view class="form-label">机构简称</view> <view class="form-text">{{ clubInfo.shortName }}</view>
			</view>
			<view class="main-form-item">
				<view class="form-label">机构地址</view>
				<view class="form-input">{{ clubInfo.provincialAddress }}</view>
			</view>
			<view class="main-form-item">
				<view class="form-textarea">{{ clubInfo.address }}</view>
			</view>
			<view class="main-form-item">
				<view class="form-label lang">营业执照编号</view>
				<view class="form-input lang">{{ clubInfo.socialCreditCode }}</view>
			</view>
			<view class="main-form-item file">
				<view class="main-form-upload">
					<view class="label">营业执照</view>
					<view class="upload-picture">
						<view class="upload-image"
							><image :src="clubInfo.businessLicense" mode="" @click="ShowPreviewImage(1)"></image
						></view>
					</view>
				</view>
				<view class="main-form-upload">
					<view class="label">门头照</view>
					<view class="upload-picture">
						<view class="upload-image"
							><image :src="clubInfo.shopPhoto" mode="" @click="ShowPreviewImage(2)"></image
						></view>
					</view>
				</view>
			</view>
			<view class="main-form-item">
				<view class="form-label">机构类型</view>
				<view class="form-text">
					{{ clubInfo.firstClubType | FirstFormat }} - {{ clubInfo.secondClubType | TwoFormat }}
				</view>
			</view>
			<view class="main-form-item file" v-if="clubInfo.firstClubType == 1">
				<view class="main-form-upload">
					<view class="label">资质</view>
					<view class="upload-picture">
						<view class="upload-image"
							><image :src="clubInfo.medicalPracticeLicense" mode="" @click="ShowPreviewImage(2)"></image
						></view>
					</view>
				</view>
			</view>
			<view class="main-form-item" v-if="clubInfo.secondClubType == 2 || clubInfo.secondClubType == 3">
				<view class="form-label">科室</view> <view class="form-text">{{ clubInfo.department }}</view>
			</view>
			<view class="main-form-item none">
				<view class="form-label none">主营内容</view>
				<view class="form-checkbox-group">
					<view class="form-table-item" v-for="(item, index) in showMainProductList" :key="index">
						{{ item.name }}
					</view>
				</view>
			</view>
			<view class="register-fiexd clearfix" :style="{ paddingBottom: isIphoneX ? '68rpx' : '' }">
				<view class="register-row"> <button class="register-btn sub" @tap="ShareRegister">分享</button> </view>
			</view>
		</view>
		<!-- 地址Pciker -->
		<city-Picker
			:themeColor="themeColor"
			ref="CityPicker"
			:pickerValueDefault="cityPickerValueDefault"
			@onCancel="onCancel"
			@onConfirm="onConfirm"
		>
		</city-Picker>
		<!-- 分享弹窗 -->
		<shareModel v-if="isShareModal" :bindId="bindId" @shareConfirm="onShareAppMessage"></shareModel>
	</view>
</template>

<script>
import { beautyList, beautyLists, mentuzCampNullList, medicaCampNullList } from '@/common/json/data.json.js' //本地数据
import shareModel from '@/components/cm-module/modelAlert/shareModel.vue' //分享弹窗
import { uploadFileImage } from '@/services/public.js'
export default {
	components: {
		shareModel
	},
	data() {
		return {
			isRegisterStep: true,
			isSubLoading: false,
			isIphoneX: this.$store.state.isIphone,
			isCheck: false,
			clubUserId: 0,
			isShowInput: true,
			isShareModal: false,
			isDepartment: false,
			textareaFocus: false,
			beautyList: beautyList,
			beautyLists: beautyLists,
			mentuzCampList: mentuzCampNullList,
			medicaCampList: medicaCampNullList,
			addressText: '请选择机构所在地区',
			linkManIdentityText:'请选择联系人身份',	//联系人身份
			params: {
				userId: 0,
				name: '',
				shortName: '',
				linkMan: '',
				bindMobile: '',
				contractEmail: '',
				socialCreditCode: '',
				isAgreed: 0,
				townId: '', //区ID
				cityId: '', //区ID
				provinceId: '', //区ID
				addressDetail: '', //地址
				businessLicense: '', //营业执照
				shopPhoto: '', //门头照
				medicalPracticeLicense: '', //资质
				firstClubType: 1, //1医美；2生美
				secondClubType: 1, //1诊所；2门诊；3医院
				department: '', //科室
				mainProduct: '',
				linkManIdentity:0,		//联系人身份
			},
			clubInfo: {
				linkMan: '',
				bindMobile: '',
				userId: 0
			},
			radioGroup1: [
				{ name: '医美', value: 1 }, 
				{ name: '生美', value: 2 },
				{ name: '项目公司', value: 3 },
				{ name: '个人', value: 4 },
				{ name: '其他', value: 5 },
			],
			current: 0,
			bindId: 0,
			customItemValue: '', //自定义项目
			showMainProductList: [],
			stateActions: [
				{ name: '老板', value: 1 },
				{ name: '采购', value: 2 },
				{ name: '运营', value: 3 },
				{ name: '其他', value: 4 },
			]
		}
	},
	filters: {
		FirstFormat: function(type) {
			//处理金额
			let name = ''
			switch (type) {
				case 1:
					name = '医美'
					break
				case 2:
					name = '生美'
					break
			}
			return name
		},
		TwoFormat: function(type) {
			//处理金额
			let text = ''
			switch (type) {
				case 1:
					text = '诊所'
					break
				case 2:
					text = '门诊'
					break
				case 3:
					text = '医院'
					break
			}
			return text
		}
	},
	onLoad(option) {
		this.$api.getStorage().then(resolve => {
			this.params.userId = resolve.userId ? resolve.userId : 0
		})
	},
	computed: {},
	methods: {
		CheckMobile() {
			//检测手机是否能注册
			if (this.params.bindMobile == '') {
				this.$util.msg('请输入手机号', 2000)
				return
			}
			if (!this.$reg.isMobile(this.params.bindMobile)) {
				this.$util.msg('请输入正确的手机号', 2000)
				return
			}
			this.SellerService.SellerClubCheck({ bindMobile: this.params.bindMobile })
				.then(response => {
					this.$util.msg(response.data, 2000)
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		SubmitRegister() {
			//提交注册
			if (this.isSubLoading) {
				return
			}
			if (this.params.linkMan == '') {
				this.$util.msg('请输入联系人姓名', 2000)
				return
			}
			if (this.params.bindMobile == '') {
				this.$util.msg('请输入联系人手机号', 2000)
				return
			}
			if (!this.$reg.isMobile(this.params.bindMobile)) {
				this.$util.msg('手机格式不正确', 2000)
				return
			}
			if (!this.params.linkManIdentity) {
				this.$util.msg('请选择联系人身份', 2000)
				return
			}
			if (this.params.contractEmail == '') {
				this.$util.msg('请输入邮箱地址', 2000)
				return
			}
			if (!this.$reg.isEmail(this.params.contractEmail)) {
				this.$util.msg('请输入正确的邮箱地址', 2000)
				return
			}
			if (this.params.name == '') {
				this.$util.msg('请输入机构名称', 2000)
				return
			}
			if (this.params.townId == '') {
				this.$util.msg('请选择机构地址', 2000)
				return
			}
			if (this.params.address == '') {
				this.$util.msg('请填写机构详细地址', 2000)
				return
			}
			if (this.params.businessLicense == '') {
				this.$util.msg('请上传您的营业执照', 2000)
				return
			}
			if (this.params.firstClubType == 1) {
				if (this.params.medicalPracticeLicense == '') {
					this.$util.msg('请上传您的医疗资质', 2000)
					return
				}
			}
			if (this.params.firstClubType == 1 || this.params.firstClubType == 2) {
				console.log(this.params.mainProduct)
				if (this.params.mainProduct == '') {
					this.$util.msg('请选择住机构主营内容', 2000)
					return
				}
			}
			const mainproList = []
			if (this.params.firstClubType == 1) {
				this.mentuzCampList.forEach(item => {
					mainproList.push(item.name)
				})
			} else {
				this.medicaCampList.forEach(item => {
					mainproList.push(item.name)
				})
			}
			this.params.mainProduct = mainproList.join('/')
			if (this.params.isAgreed == 0) {
				this.$util.msg('请勾选同意协议', 2000)
				return
			}
			this.isSubLoading = true
			this.SellerService.SellerClubTemporary(this.params)
				.then(response => {
					this.bindId = response.data
					setTimeout(() => {
						this.isRegisterStep = false
						this.GetClubUserInfo(this.bindId)
					}, 2000)
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		GetClubUserInfo(id) {
			this.UserService.UseRregisterTemporaryInfo({ id: id })
				.then(response => {
					this.clubInfo = response.data
					this.isSubLoading = false
					this.showMainProductList = this.setNewMainpro(this.clubInfo.mainProduct)
				})
				.catch(error => {
					this.isSubLoading = false
					this.$util.msg(error.msg, 2000)
				})
		},
		ShareRegister() {
			//点击分享
			this.isShareModal = true
		},
		agreeCheck() {
			//勾选协议
			this.isCheck = !this.isCheck
			if (this.isCheck) {
				this.params.isAgreed = 1
			} else {
				this.params.isAgreed = 0
			}
		},
		showMulLinkageThreePicker() {
			//三级地址联动
			this.isShowInput = true
			this.$refs.CityPicker.show()
		},
		showTextareaFocus() {
			//文本框获取焦点
			this.isShowInput = false
			this.textareaFocus = true
		},
		hideTextareaFocus() {
			//文本框失去焦点
			this.isShowInput = true
			this.textareaFocus = false
		},
		onTextareaInput(e) {
			//地址详细信息
			this.params.address = e.detail.value
		},
		onConfirm(e) {
			//获取选择的地址信息
			console.log('地址', e)
			this.addressText = e.name
			this.params.townId = e.townCode
			this.params.cityId = e.cityCode
			this.params.provinceId = e.provinceCode
		},
		UploadPicture(NUM) {
			//图片上传
			uploadFileImage().then(res => {
				switch (NUM) {
					case 1:
						this.params.businessLicense = JSON.parse(res.data).data
						break
					case 2:
						this.params.shopPhoto = JSON.parse(res.data).data
						break
					case 3:
						this.params.medicalPracticeLicense = JSON.parse(res.data).data
						break
				}
			})
		},
		DeletePicture(NUM) {
			//删除照片
			switch (NUM) {
				case 1:
					this.$util.modal('', '确定删除营业执照图片吗？', '确定', '取消', true, () => {
						this.params.businessLicense = ''
					})
					break
				case 2:
					this.$util.modal('', '确定删除门头照图片吗？', '确定', '取消', true, () => {
						this.params.shopPhoto = ''
					})
					break
				case 3:
					this.$util.modal('', '确定删除资质图片吗？', '确定', '取消', true, () => {
						this.params.medicalPracticeLicense = ''
					})
					break
			}
		},
		ShowPreviewImage(NUM) {
			//预览照片
			switch (NUM) {
				case 1:
					this.myPreviewImageFn(this.businessLicense)
					break
				case 2:
					this.myPreviewImageFn(this.shopPhoto)
					break
				case 3:
					this.myPreviewImageFn(this.medicalPracticeLicense)
					break
			}
		},
		myPreviewImageFn(url) {
			//预览证件照
			this.isPreviewImage = true
			let mentuzArray = []
			mentuzArray.push(url)
			uni.previewImage({
				urls: mentuzArray,
				current: 0
			})
		},
		setNewMainpro(arr) {
			//回显处理主营内容
			let _ARRAY = []
			arr.split('/').forEach((item, index) => {
				let _OBJ = { value: (index + 1).toString(), name: item, checked: true }
				_ARRAY.push(_OBJ)
			})
			return _ARRAY
		},
		bindPickerUserName(e){//选择联系人身份
			this.linkManIdentityText = this.stateActions[e.target.value].name
			this.params.linkManIdentity= this.stateActions[e.target.value].value
		},
		bindPickerChange(e) {
			//选择机构类型
			this.params.firstClubType = Number(e.target.value)
		},
		radioChange(item) {
			//选择
			this.params.secondClubType = item.value
			if (this.params.secondClubType == 2 || this.params.secondClubType == 3) {
				this.isDepartment = true
			} else {
				this.isDepartment = false
			}
			for (let i = 0; i < this.beautyList.length; i++) {
				if (this.beautyList[i].value === this.params.secondClubType) {
					break
				}
			}
		},
		ChooseMaleLike(e) {
			switch (this.params.firstClubType) {
				case 1:
					this.params.mainProduct = this.CheckLikes(e, this.mentuzCampList)
					break
				case 2:
					this.params.mainProduct = this.CheckLikes(e, this.medicaCampList)
					break
			}
		},
		CheckLikes(e, list) {
			let values = e.detail.value
			let arr = []
			list.forEach(item => {
				if (values.indexOf(item.value) >= 0) {
					this.$set(item, 'checked', true)
					arr.push(item.name)
				} else {
					this.$set(item, 'checked', false)
				}
			})
			return arr.join('/')
		},
		addCustomItem() {
			if (this.customItemValue == '') {
				this.$util.msg('请输入自定义主营内容', 2000)
			} else {
				if (this.params.firstClubType == 1) {
					let item = { value: `${this.mentuzCampList.length + 1}`, name: this.customItemValue, checked: true }
					if (this.CheckedArray(this.customItemValue, this.mentuzCampList)) {
						this.$util.msg('主营内容已存在!', 2000)
					} else {
						this.mentuzCampList.push(item)
					}
				} else {
					let item = { value: `${this.medicaCampList.length + 1}`, name: this.customItemValue, checked: true }
					if (this.CheckedArray(this.customItemValue, this.medicaCampList)) {
						this.$util.msg('主营内容已存在!', 2000)
					} else {
						this.medicaCampList.push(item)
					}
				}
			}
		},
		CheckedArray(content, arr) {
			//判断主营内容是否已存在
			console.log(content, arr)
			for (var i in arr) {
				if (arr[i].name == content) {
					return true
				}
			}
			return false
		}
	},
	onShareAppMessage(res) {
		//分享转发
		this.isShareModal = false
		if (res.from === 'button') {
			// 来自页面内转发按钮
		}
		return {
			title: '请确认资料完成注册~',
			path: `/pages/login/binding?bindId=${this.bindId}&Identity=2`,
			imageUrl: 'https://static.caimei365.com/app/img/icon/icon-addShare@3x.png'
		}
	},
	onShow() {}
}
</script>

<style lang="scss">
page {
	height: auto;
}
.register {
	width: 100%;
	position: relative;
	box-sizing: border-box;
	padding-bottom: 332rpx;
	.register-main {
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 0 24rpx;
		margin-top: 24rpx;
		.main-form-item {
			width: 100%;
			height: 88rpx;
			box-sizing: border-box;
			padding: 13rpx 0;
			border-bottom: 1px solid #e1e1e1;
			margin-top: 10rpx;
			position: relative;
			&.none {
				border-bottom: none;
				height: auto;
			}
			&.file {
				height: 273rpx;
				border-bottom: none;
				.main-form-upload {
					width: 50%;
					height: 100%;
					float: left;
					.label {
						width: 100%;
						float: left;
						height: 56rpx;
						line-height: 56rpx;
						font-size: $font-size-28;
						text-align: left;
						color: #999999;
					}
					.upload-picture {
						width: 100%;
						height: 180rpx;
						float: left;
						margin-top: 17rpx;
						.upload-none {
							width: 200rpx;
							height: 180rpx;
							border-radius: 6rpx;
							border: 1px solid #e1e1e1;
							box-sizing: border-box;
							padding-top: 64rpx;
							.icon-jiahao {
								display: inline-block;
								width: 100%;
								text-align: center;
								line-height: 48rpx;
								font-size: 40rpx;
								color: #b2b2b2;
							}
							.upload-text {
								display: inline-block;
								width: 100%;
								text-align: center;
								line-height: 40rpx;
								font-size: $font-size-24;
								color: #b2b2b2;
							}
						}
						.upload-image {
							width: 200rpx;
							height: 180rpx;
							border-radius: 6rpx;
							border: 1px solid #e1e1e1;
							box-sizing: border-box;
							position: relative;
							image {
								width: 200rpx;
								height: 180rpx;
								display: block;
							}
							.upload-del {
								width: 40rpx;
								height: 40rpx;
								position: absolute;
								top: -20rpx;
								right: -20rpx;
								line-height: 40rpx;
								text-align: center;
								.iconfont {
									font-size: $font-size-32;
									color: #999999;
								}
							}
						}
					}
				}
			}
			&.picker {
				border-bottom: none;
				.label-radio {
					margin:0 5rpx;
					font-size: $font-size-28;
					float: left;
				}
				.row-radio {
					float: left;
					transform: scale(0.7);
				}
				.row-text {
					text-align: center;
					float: left;
					font-size: $font-size-28;
					color: #999999;
				}
				.picker-radio {
					box-sizing: border-box;
					.secondTyperadio {
						border: 2rpx solid #e1e1e1;
						display: inline-block;
						font-size: 26rpx;
						color: #999999;
						padding: 0 24rpx;
						border-radius: 22rpx;
						line-height: 42rpx;
						margin-right: 28rpx;
						float: left;
						&.active {
							border: 2rpx solid #ffe6dc;
							color: $color-system;
						}
					}
				}
			}
			&.textarea {
				height: 142rpx;
				.textarea {
					width: 100%;
					height: 142rpx;
					box-sizing: border-box;
					font-size: $font-size-28;
					color: $text-color;
					z-index: 1;
				}
				.textarea.hide {
					opacity: 0;
				}
				.textarea.show {
					color: #999999;
				}
			}
			.textarea-ke {
				width: 100%;
				height: 160rpx;
				border-radius: 6rpx;
				border: 1px solid #e1e1e1;
				font-size: $font-size-28;
				box-sizing: border-box;
				padding: 15rpx 20rpx;
			}
			.form-textarea {
				font-size: $font-size-28;
				color: #333333;
			}
			.form-label {
				width: 148rpx;
				float: left;
				height: 100%;
				line-height: 56rpx;
				font-size: $font-size-28;
				text-align: left;
				color: #999999;
				&.lang {
					width: 188rpx;
				}
				&.none {
					width: 100%;
				}
			}
			.form-input {
				width: 554rpx;
				height: 56rpx;
				line-height: 56rpx;
				font-size: $font-size-28;
				text-align: left;
				color: #333333;
				float: left;
				&.lang {
					width: 514rpx;
				}
				&.phone {
					width: 418rpx;
				}
				&.none {
					color: #999999;
				}
			}
			.form-text {
				width: 554rpx;
				height: 56rpx;
				line-height: 56rpx;
				font-size: $font-size-28;
				text-align: left;
				color: #333333;
				float: left;
			}
			.form-btn {
				width: 136rpx;
				height: 56rpx;
				background: $btn-confirm;
				color: #ffffff;
				font-size: $font-size-28;
				text-align: center;
				border-radius: 28rpx;
				line-height: 56rpx;
				float: left;
			}
			.icon-xiayibu {
				width: 80rpx;
				height: 80rpx;
				position: absolute;
				right: 0;
				top: 0;
				line-height: 80rpx;
				text-align: center;
				color: #b2b2b2;
			}
			.form-checkbox-group {
				width: 100%;
				display: flex;
				flex-flow: row wrap;
				justify-content: space-between;
				align-items: center;
				&.btn {
					margin: 0 auto;
					margin-left: 116rpx;
				}
				.row-input {
					display: flex;
					width: 220rpx;
					height: 40rpx;
					padding: 24rpx;
					text-align: left;
					border-radius: 10rpx;
					font-size: $font-size-28;
					color: $text-color;
				}
				.confirm-btn {
					width: 160rpx;
					height: 64rpx;
					border-radius: 45rpx;
					line-height: 64rpx;
					text-align: center;
					background: #ffe6dc;
					color: $color-system;
					&.other {
						width: 213rpx;
					}
				}
				.item {
					height: 60rpx;
					font-size: $font-size-28;
					line-height: 60rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
					margin-bottom: 10rpx;
					box-sizing: border-box;
					float: left;
				}
				.item-text {
					display: inline-block;
					font-size: 26rpx;
					color: #999999;
					border-radius: 28rpx;
					line-height: 50rpx;
				}
				.on {
					.item-text {
						border-color: $color-system;
						color: $color-system;
					}
				}
				.form-table-item {
					height: 48rpx;
					padding: 0 32rpx;
					border: 1px solid #b2b2b2;
					text-align: center;
					font-size: $font-size-28;
					color: #333333;
					float: left;
					line-height: 48rpx;
					border-radius: 26rpx;
					margin-right: 12rpx;
					margin-top: 20rpx;
				}
			}
			.form-checkbox-input {
				width: 100%;
				height: 64rpx;
				margin-top: 20rpx;
				.checkbox-input {
					width: 518rpx;
					height: 64rpx;
					box-sizing: border-box;
					text-align: left;
					font-size: $font-size-26;
					color: #333333;
					line-height: 64rpx;
					float: left;
					border: 1px solid #e1e1e1;
					border-radius: 32rpx;
					padding: 0 20rpx;
				}
				.checkbox-btn {
					width: 160rpx;
					height: 64rpx;
					border-radius: 32rpx;
					background-color: #ffe6dc;
					line-height: 64rpx;
					text-align: center;
					color: #e15616;
					font-size: $font-size-28;
					float: right;
				}
			}
		}
		.register-fiexd {
			width: 100%;
			height: auto;
			padding: 20rpx 0;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 888;
			background: #ffffff;
			.register-agree {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 0 0 32rpx 0;
				.agree-text {
					.checkbox {
						float: left;
						margin: 4rpx 6rpx 0 0;
						color: #999999;
						font-size: $font-size-32;
						&.icon-gouxuan {
							color: $color-system;
						}
					}
					font-size: 20rpx;
					line-height: 44rpx;
					color: #999999;
					text {
						color: #0091ff;
					}
				}
			}
		}
		.register-btn {
			width: 702rpx;
			height: 88rpx;
			border-radius: 44rpx;
			font-size: $font-size-28;
			line-height: 88rpx;
			color: #ffffff;
			margin: 0 auto;
			text-align: center;
			background: $btn-confirm;
			margin-top: 96rpx;
			&.none {
				background: #ffffff;
				color: $text-color;
				margin-top: 0;
			}
			&.sub {
				margin-top: 0;
			}
		}
	}
}
</style>