caimei-applets-caimei/pages/login/apply.vue

<template>
	<view class="container register" :style="{ paddingTop: CustomBar + 'px' }">
		<cu-custom :navbar-data="nvabarData" @navigateBack="hanldNavigateBack"></cu-custom>
		<view class="register-main title clearfix">
			<view class="register-row none clearfix">
				<view class="register-title first"
					><text>补充以下详细信息即可升级为资质机构，享受更多更好的服务。</text></view
				>
				<view class="register-title"><text></text></view>
			</view>
		</view>
		<view class="register-main clearfix" v-if="clubStatus == 92">
			<view class="register-row none clearfix">
				<view class="error-title">审核未通过原因:</view>
				<view class="error-main">
					<text class="error-item" v-for="(item, index) in errorList" :key="index"> {{ item }} </text>
				</view>
			</view>
		</view>
		<view class="register-main detailed clearfix">
			<view class="register-row none clearfix">
				<view class="register-from">
					<view class="label">邮箱</view>
					<input
						class="row-input"
						type="text"
						name="input"
						v-model="contractEmail"
						placeholder="请输入您的常用邮箱"
						placeholder-class="placeholder"
						maxlength="30"
					/>
				</view>
				<view class="register-tip"><text>提示：邮箱可用作登录账号，请使用公司邮箱或法人邮箱</text></view>
			</view>
			<view class="register-row none clearfix">
				<view class="register-from">
					<view class="label">机构名称</view>
					<input
						class="row-input"
						type="text"
						v-model="clubName"
						placeholder="请输入您的机构名称"
						placeholder-class="placeholder"
						maxlength="30"
					/>
				</view>
				<view class="register-tip"><text>示例：深圳市美丽人生医疗美容有限公司</text></view>
			</view>
			<view class="register-row none clearfix">
				<view class="register-from">
					<view class="label">机构简称</view>
					<input
						class="row-input"
						type="text"
						v-model="shortName"
						placeholder="请输入姓名或常用名"
						placeholder-class="placeholder"
						maxlength="10"
					/>
				</view>
				<view class="register-tip"><text>示例：美丽人生</text></view>
			</view>
			<view class="register-row clearfix">
				<view class="register-from" @click="showMulLinkageThreePicker">
					<view class="label">机构地址</view>
					<text class="row-input" :class="addressData.address === '请选择机构所在地区' ? 'none' : ''">
						{{ addressData.address }}
					</text>
					<text class="iconfont icon-xiayibu"></text>
				</view>
			</view>
			<view class="register-row text-textarea clearfix">
				<view class="textarea show" v-if="isShowInput" @click="showTextareaFocus">{{
					addressData.addressDetail ? addressData.addressDetail : '详细地址：如道路、门牌号、小区等'
				}}</view>
				<textarea
					v-else
					class="textarea"
					type="text"
					v-model="addressData.addressDetail"
					placeholder="详细地址：如道路、门牌号、小区等"
					placeholder-class="placeholder"
					maxlength="25"
					@input="onTextareaInput"
					:focus="textareaFocus"
					@blur="hideTextareaFocus"
					:class="isShowInput ? '' : ''"
				/>
			</view>
			<view class="register-row clearfix">
				<view class="register-from">
					<view class="label">营业执照编号</view>
					<input
						class="row-input code"
						type="text"
						v-model="socialCreditCode"
						placeholder="请填写社会统一信用代码"
						maxlength="18"
					/>
				</view>
			</view>
			<view class="register-row clearfix">
				<view class="register-picture">
					<view class="label">营业执照</view>
					<view class="upload-picture">
						<view class="upload-none" v-if="businessLicense === ''" @click="chooseBusinessImage">
							<image src="https://static.caimei365.com/app/img/upload/club-zizhi.png"></image>
						</view>
						<view class="upload-image" v-else>
							<image :src="businessLicense" mode="" @click="viewBusinessImage"></image>
							<view class="upload-del" @click="delBusinessImage">
								<text class="iconfont icon-shanchu1"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="register-row clearfix">
				<view class="register-picture">
					<view class="label">门头照</view>
					<view class="upload-picture">
						<view class="upload-none" v-if="shopPhoto === ''" @click="chooseMentuzImage">
							<image src="https://static.caimei365.com/app/img/upload/club-door.png"></image>
						</view>
						<view class="upload-image" v-else>
							<image :src="shopPhoto" mode="" @click="viewMentuzImage"></image>
							<view class="upload-del" @click="delMentuzImage">
								<text class="iconfont icon-shanchu1"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="register-row clearfix">
				<view class="register-from" @click="bindPickerChange">
					<view class="label">机构类型</view>
					<text class="row-input">
						{{ organizationTypeText }}
					</text>
					<text class="iconfont icon-xiayibu"></text>
				</view>
			</view>
			<view class="register-row none clearfix" v-if="isOrganizationType == 1">
				<view class="register-from noneborder second">
					<view
						class="secondTyperadio"
						v-for="(item, index) in beautyList"
						:key="item.value"
						@click="radioChange(item)"
						:class="item.value == secondClubType ? 'active' : ''"
					>
						<view class="secondRadio">{{ item.name }}</view>
					</view>
				</view>
			</view>
			<view class="register-row none clearfix" v-if="isOrganizationType == 2">
				<view class="register-from noneborder second">
					<view
						class="secondTyperadio"
						v-for="(item, index) in beautyLists"
						:key="item.value"
						@click="radioChange(item)"
						:class="item.value == secondClubType ? 'active' : ''"
					>
						<view class="secondRadio">{{ item.name }}</view>
					</view>
				</view>
			</view>
			<view class="register-row none clearfix" v-if="isOrganizationType == 1">
				<view class="register-picture zz">
					<view class="label zz">医疗执业许可证</view>
					<view class="upload-picture">
						<view class="upload-none" v-if="medicalPracticeLicense === ''" @click="chooseMedicalImage">
							<image src="https://static.caimei365.com/app/img/upload/club-zizhi.png"></image>
						</view>
						<view class="upload-image" v-else>
							<image :src="medicalPracticeLicense" mode="" @click="viewMedicalImage"></image>
							<view class="upload-del" @click="delMedicalImage">
								<text class="iconfont icon-shanchu1"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="register-row clearfix" v-if="isOrganizationType == 1 && isDepartment">
				<view class="register-from" style="height: auto;border: 0;">
					<view class="kes-title">科室</view>
					<input
						class="keshi"
						placeholder="请填写经营的科室，至少三个，用逗号隔开"
						placeholder-style="placeholder"
						v-model="department"
						maxlength="16"
					></input>
				</view>
			</view>
			<view class="register-row clearfix" v-if="isOrganizationType == 1">
				<view class="register-from group" style="height: auto;border: 0;">
					<view class="label">主营内容</view>
				</view>	
			</view>		
			<view class="register-row clearfix" v-if="isOrganizationType == 1">
				<view class="register-from group" style="height: auto;border: 0;">
					<view class="content-class">
						<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"></checkbox>
								<text class="item-text">{{ item.name }}</text>
							</label>
						</checkbox-group>
					</view>
				</view>
				<view class="register-from group btn" style="height: auto;border: 0;">
					<view class="content-class btn">
						<input
							class="row-input other"
							type="text"
							v-model="customItemValue"
							placeholder-style="placeholder"
							placeholder="请输入自定义主营内容"
							maxlength="5"
						/>
						<button type="default" class="confirm-btn" @click.stop="addCustomItem">确认添加</button>
					</view>
				</view>
			</view>
			<view class="register-row clearfix" v-if="isOrganizationType == 2">
				<view class="register-from group" style="height: auto;border: 0;">
					<view class="label">主营内容</view>
				</view>	
			</view>		
			<view class="register-row clearfix" v-if="isOrganizationType == 2">
				<view class="register-from group" style="height: auto;border: 0;">
					<view class="content-class">
						<checkbox-group @change="chooseMaleLikes">
							<label
								class="item"
								v-for="(item, index) in medicaCampList"
								:key="index"
								:class="{ on: item.checked }"
							>
								<checkbox class="item-checkbox" :value="item.value" :checked="item.checked"></checkbox>
								<text class="item-text">{{ item.name }}</text>
							</label>
						</checkbox-group>
					</view>
				</view>
				<view class="register-from group btn" style="height: auto;border: 0;">
					<view class="content-class btn">
						<input
							class="row-input other"
							type="text"
							v-model="customItemValue"
							placeholder="请输入自定义主营内容"
							placeholder-style="placeholder"
							maxlength="5"
						/>
						<button type="default" class="confirm-btn" @click.stop="addCustomItem">确认添加</button>
					</view>
				</view>
			</view>
			<view class="register-fiexd clearfix" :style="{ paddingBottom: isIphoneX ? '68rpx' : '36rpx' }">
				<view class="register-row ">
					<view class="register-btn sub" @click.stop="organizationUpdateInfo">确认升级并提交审核</view>
				</view>
			</view>
			<mpvue-city-picker
				:themeColor="themeColor"
				ref="mpvueCityPicker"
				:pickerValueDefault="cityPickerValueDefault"
				@onCancel="onCancel"
				@onConfirm="onConfirm"
			>
			</mpvue-city-picker>
		</view>
		<!-- 提交审核提示弹窗 -->
		<view class="tui-alert-box" v-if="isConfirmShow">
			<view class="tui-alert-content">
				<view class="tui-alert-main"
					>升级信息提交成功，审核通过后您的身份将成为资质机构，并且获得<text class="red">500</text
					>采美豆的奖励</view
				>
				<view class="tui-alert-btn" @click="handleClick">知道了</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapMutations } from 'vuex'
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
import { beautyList, beautyLists, mentuzCampNullList, medicaCampNullList } from '@/common/json/data.json.js' //本地数据
import { uploadFileImage } from '@/services/public.js'
export default {
	components: {
		mpvueCityPicker
	},
	data() {
		return {
			nvabarData: {
				//顶部自定义导航
				showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
				showSearch: 0,
				title: '升级资质机构', // 导航栏 中间的标题
				haveBack: true,
				textLeft: this.$store.state.isIphone
			},
			isIphoneX: this.$store.state.isIphoneX,
			CustomBar: this.CustomBar, 				// 顶部导航栏高度
			errorList: [],
			tabCurrentIndex: 3,
			clubStatus: '', 						//审核状态
			isPreviewImage: false, 					//预览图片开关
			userId: '', 							//用户ID
			clubId: '', 							//会所ID
			contractEmail: '', 						//邮箱
			clubName: '', 							//机构名称
			shortName: '', 							//机构简称
			socialCreditCode: '', 					//统一社会信用代码
			isDisabled: true,
			isShowInput: true,
			textareaFocus: false,
			businessLicense:'', 					//营业执照图片
			shopPhoto: '', 							//门头照图片
			medicalPracticeLicense: '', 			//资质照图片
			department: '', 						//科室
			isDepartment: true, 					//是否显示科室
			secondClubType: '', 					//机构类型二级分类
			mainProduct: '', 						//主营内容
			firstClubType: 1, 						//机构类型
			isOrganizationType: 1,
			firstClubTypeCurrent:0,
			organizationTypeText: '请选择机构类型',
			beautyList: beautyList, 				//医美分类
			beautyLists: beautyLists, 				//生美分类
			mentuzCampNullList: mentuzCampNullList, //医美分类
			medicaCampNullList: medicaCampNullList, //生美分类
			mentuzCampList: [], 					//医美主营
			medicaCampList: [], 					//生美主营
			typtIndex: 0,
			organizationType: 0,
			isShowAustomItem: false, 				//是否显示其他添加
			customItemValue: '',					//自定义项目
			isMainproCheck: false,
			isConfirmShow: false,
			isFirstAdds:true,
			addressData: {
				address: '请选择机构所在地区',
				townId: '', //区ID
				cityId: '', //市ID
				provinceId: '', //省ID
				addressDetail: '' //地址详情
			},
			typename: [
				{ name: '医美', value: 1 }, 
				{ name: '生美', value: 2 },
				{ name: '项目公司', value: 3 },
				{ name: '个人', value: 4 },
				{ name: '其他', value: 5 },
			]
		}
	},
	onLoad(option) {
		this.clubStatus = option.clubStatus
		this.organizationInfo()
	},
	methods: {
		hanldNavigateBack() {
			this.$util.modal('', '资料尚未提交审核，确定放弃升级吗？', '确定', '取消', true, () => {
				uni.navigateBack({
					delta: 1
				})
			})
		},
		organizationInfo() {
			this.$api.getStorage().then(resolve => {
				this.userId = resolve.userId ? resolve.userId : 0
				this.UserService.OrganizationUpdateModifyInfo({ userId: this.userId })
					.then(response => {
						let organizationClub = response.data.club
						let organizationUser = response.data.user
						if (organizationUser.auditNoteList != null) {
							this.errorList = organizationUser.auditNoteList
						}
						this.contractEmail = organizationClub.contractEmail
						this.clubId = organizationUser.clubId
						if (this.contractEmail) {
							this.isFirstAdds = false
							this.clubName = this.$reg.checkData(organizationClub.name)
						} else {
							this.isFirstAdds = true
							this.clubName = ''
						}
						this.shortName = this.$reg.checkData(organizationClub.shortName)
						if (organizationClub.provinceId == '' || organizationClub.provinceId == null) {
							this.addressData.provinceId = ''
						} else {
							this.addressData.provinceId = organizationClub.provinceId
						}
						if (organizationClub.cityId == '' || organizationClub.cityId === null) {
							this.addressData.cityId = ''
						} else {
							this.addressData.cityId = organizationClub.cityId
						}
						if (organizationClub.townId == '' || organizationClub.townId == null) {
							this.addressData.townId = ''
						} else {
							this.addressData.townId = organizationClub.townId
						}
						this.addressData.address = organizationClub.provincialAddress
							? organizationClub.provincialAddress
							: '请选择机构所在地区'
						this.addressData.addressDetail = this.$reg.checkData(organizationClub.address)
						this.socialCreditCode = this.$reg.checkData(organizationClub.socialCreditCode)
						this.firstClubType = organizationClub.firstClubType
						this.secondClubType = this.$reg.checkData(organizationClub.secondClubType)
						this.businessLicense = this.$reg.checkData(organizationClub.businessLicense)
						this.shopPhoto = this.$reg.checkData(organizationClub.shopPhoto)
						this.medicalPracticeLicense = this.$reg.checkData(organizationClub.medicalPracticeLicense)
						this.department = this.$reg.checkData(organizationClub.department)
						//机构类型&&主营项目
						switch(this.firstClubType){
							case 1:
								this.organizationTypeText = '医美'
								this.isOrganizationType = 1
								break
							case 2:
								this.organizationTypeText = '生美'
								this.isOrganizationType = 2
								break
							case 3:
								this.organizationTypeText = '项目公司'
								this.isOrganizationType = 0
								break
							case 4:
								this.organizationTypeText = '个人'
								this.isOrganizationType = 0
								break
							case 5:
								this.organizationTypeText = '其他'
								this.isOrganizationType = 0
								break
							case null:
								this.organizationTypeText = '请选择机构类型'
								this.isOrganizationType = 0
								break
						}	
						if (organizationClub.mainProduct == '' || organizationClub.mainProduct == null) {
							this.mentuzCampList = this.mentuzCampNullList
							this.medicaCampList = this.medicaCampNullList
						} else {
							if (this.firstClubType == 1) {
								this.mentuzCampList = this.setNewMainpro(organizationClub.mainProduct)
								this.medicaCampList = this.medicaCampNullList
							} else {
								this.medicaCampList = this.setNewMainpro(organizationClub.mainProduct)
								this.mentuzCampList = this.mentuzCampNullList
							}
							this.mainProduct = organizationClub.mainProduct
						}
						//机构类型
						switch (this.secondClubType) {
							case 1:
								this.isDepartment = false
								break
							case 2:
								this.isDepartment = true
								break
							case 3:
								this.isDepartment = true
								break
						}
					})
					.catch(error => {
						this.$util.msg(error.msg, 2000)
					})
			})
		},
		organizationUpdateInfo() {
			//提交审核
			if (this.isFirstAdds) {
				let mainproList = []
				if (this.isOrganizationType == 1) {
					this.mentuzCampList.forEach(item => {
						mainproList.push(item.name)
					})
				} else {
					this.medicaCampList.forEach(item => {
						mainproList.push(item.name)
					})
				}
				this.mainProduct = mainproList.join('/')
			}
			if (this.contractEmail == '') {
				this.$util.msg('请输入邮箱地址', 2000)
				return
			}
			if (!this.$reg.isEmail(this.contractEmail)) {
				this.$util.msg('请输入正确的邮箱地址', 2000)
				return
			}
			if (this.clubName == '') {
				this.$util.msg('请输入机构名称', 2000)
				return
			}
			if (this.addressData.townId == '') {
				this.$util.msg('请选择机构地址', 2000)
				return
			}
			if (this.addressData.addressDetail == '') {
				this.$util.msg('请填写机构详细地址', 2000)
				return
			}
			if (this.businessLicense == '') {
				this.$util.msg('请上传您的营业执照', 2000)
				return
			}
			if (this.isOrganizationType == 1){
				if (this.medicalPracticeLicense == '') {
					this.$util.msg('请上传您的资质许可证', 2000)
					return
				}
			}
			if (this.isOrganizationType == 1 || this.isOrganizationType == 2) {
				if(this.secondClubType == ''){
					this.$util.msg('选择机构类型', 2000)
					return
				}
			}
			if (this.isOrganizationType == 1 || this.isOrganizationType == 2) {
				if (this.mainProduct == '') {
					this.$util.msg('请选择机构主营内容', 2000)
					return
				}
			}
			let params = {
				userId: this.userId,
				clubId: this.clubId, //会所ID
				contractEmail: this.contractEmail,
				name: this.clubName,
				shortName: this.shortName,
				provinceId: this.addressData.provinceId,
				cityId: this.addressData.cityId,
				townId: this.addressData.townId,
				address: this.addressData.addressDetail,
				socialCreditCode: this.socialCreditCode,
				businessLicense: this.businessLicense,
				shopPhoto: this.shopPhoto,
				firstClubType: this.isOrganizationType, //机构类型分类 医美:1和生美:2
				secondClubType: this.secondClubType, //机构类型二级分类 诊所:1,门诊:2,医院:3
				department: this.department, //科室
				medicalPracticeLicense: this.medicalPracticeLicense, //资质图片
				mainProduct: this.mainProduct
			}
			// 友盟埋点普通机构确认升级点击事件
			if (process.env.NODE_ENV != 'development') {
				this.$uma.trackEvent('Um_Event_ConfirmClubUpgrade', {
					Um_Key_ClubName: `${this.clubName}`,
					Um_Key_PageName: '普通机构确认升级',
					Um_Key_SourcePage: '升级页面'
				})
			}
			this.UserService.OrganizationRegister(params)
				.then(response => {
					this.isConfirmShow = true
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		handleClick() {
			//隐藏提示弹窗
			this.isConfirmShow = false
			setTimeout(() => {
				uni.navigateBack()
			}, 2000)
		},
		// 三级联动选择
		showMulLinkageThreePicker() {
			this.isShowInput = true
			this.$refs.mpvueCityPicker.show()
		},
		onConfirm(e) {
			this.addressData.address = e.name
			this.addressData.townId = e.townCode
			this.addressData.cityId = e.cityCode
			this.addressData.provinceId = e.provinceCode
		},
		onTextareaInput(e) {
			this.addressData.addressDetail = e.detail.value
		},
		showTextareaFocus() {
			//文本框获取焦点
			this.isShowInput = false
			this.textareaFocus = true
		},
		hideTextareaFocus() {
			//文本框失去焦点
			this.isShowInput = true
			this.textareaFocus = false
		},
		chooseBusinessImage() {
			//营业执照图片上传
			uploadFileImage().then(res => {
				this.businessLicense = JSON.parse(res.data).data
			})
		},
		chooseMentuzImage() {
			//门头照图片上传
			uploadFileImage().then(res => {
				this.shopPhoto = JSON.parse(res.data).data
			})
		},
		chooseMedicalImage() {
			//资质照图片上传
			uploadFileImage().then(res => {
				this.medicalPracticeLicense = JSON.parse(res.data).data
			})
		},
		viewBusinessImage(e) {
			this.myPreviewImageFn(this.businessLicense)
		},
		viewMentuzImage(e) {
			this.myPreviewImageFn(this.shopPhoto)
		},
		viewMedicalImage(e) {
			this.myPreviewImageFn(this.medicalPracticeLicense)
		},
		myPreviewImageFn(url) {
			this.isPreviewImage = true
			let mentuzArray = []
			mentuzArray.push(url)
			uni.previewImage({
				urls: mentuzArray,
				current: 0
			})
		},
		delBusinessImage() {
			this.$util.modal('', '确定删除营业执照图片吗？', '确定', '取消', true, () => {
				this.businessLicense = ''
			})
		},
		delMentuzImage() {
			this.$util.modal('', '确定删除门头照图片吗？', '确定', '取消', true, () => {
				this.shopPhoto = ''
			})
		},
		delMedicalImage() {
			this.$util.modal('', '确定删除资质图片吗？', '确定', '取消', true, () => {
				this.medicalPracticeLicense = ''
			})
		},
		bindPickerChange() {
			let self = this
			uni.showActionSheet({
				title:'标题',
				itemList: ['医美', '生美','项目公司','个人','其他'],
				success: (e) => {
					self.isOrganizationType = e.tapIndex+1
					switch(e.tapIndex){
						case 0:
							this.organizationTypeText = '医美'
							break
						case 1:
							this.organizationTypeText = '生美'
							break
						case 2:
							this.organizationTypeText = '项目公司'
							break
						case 3:
							this.organizationTypeText = '个人'
							break
						case 4:
							this.organizationTypeText = '其他'
							break
					}
				}
			})
		},
		bindPickerChange2(e) {
			this.typtIndex = e.target.value
			this.isOrganizationType = e.target.value
		},
		radioChange(item) {
			this.secondClubType = item.value
			if (this.secondClubType == 2 || this.secondClubType == 3) {
				this.isDepartment = true
			} else {
				this.isDepartment = false
			}
		},
		chooseMaleLike(e) {
			this.mainProduct = this.checkLikes(e, this.mentuzCampList)
		},
		chooseMaleLikes(e) {
			this.mainProduct = this.checkLikes(e, this.medicaCampList)
		},
		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('/')
		},
		// onBlurInput(e){//
		// 	if(e.detail.value ===''){
		// 		this.isDisabled = true
		// 	}else{
		// 		this.isDisabled = false
		// 	}
		// },
		showAustomItem() {
			this.isShowAustomItem = !this.isShowAustomItem
		},
		setNewMainpro(arr) {
			//回显处理主营内容
			let _ARRAY = []
			arr.split('/').forEach((item, index) => {
				let _OBJ = { value: (index + 1).toString(), name: item, checked: true }
				_ARRAY.push(_OBJ)
			})
			return _ARRAY
		},
		addCustomItem() {
			if (this.customItemValue == '') {
				this.$util.msg('请输入自定义主营内容', 2000)
			} else {
				if (this.isOrganizationType == 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
		}
	},
	onShow() {
		if (this.isPreviewImage) {
			this.isPreviewImage = false
			return
		}
	}
}
</script>

<style lang="scss">
.placeholder {
	color: #b2b2b2;
}
.register {
	width: 100%;
	height: auto;
	border-top: 1px solid #f7f7f7;
	.register-main {
		width: 100%;
		height: auto;
		background: #ffffff;
		padding: 20rpx 0;
		&.title {
			background-image: linear-gradient(
				270deg,
				rgba(255, 255, 255, 0.1) 0%,
				rgba(255, 86, 11, 0.1) 51%,
				rgba(255, 255, 255, 0.1) 100%
			);
		}
		&.detailed {
			padding-bottom: 300rpx;
		}
		&.first {
			padding-top: 110rpx;
		}
		.register-tips {
			display: flex;
			flex-direction: column;
			align-items: center;
			line-height: 44rpx;
			font-size: $font-size-24;
			color: #ff0000;
			margin-bottom: 40rpx;
			.iconfont {
				font-size: $font-size-24;
			}
		}
		.register-row {
			width: 702rpx;
			height: auto;
			padding: 0 24rpx;
			margin-bottom: 20rpx;
			.secondTyperadio {
				border: 2rpx solid #e1e1e1;
				display: inline-block;
				font-size: 26rpx;
				color: #999999;
				padding: 0 24rpx;
				border-radius: 22rpx;
				line-height: 42rpx;
				margin-right: 30rpx;
				float: left;
				&.active {
					border: 2rpx solid #ffe6dc;
					color: $color-system;
				}
			}
			&.none {
				margin-bottom: 0;
			}
			.error-title {
				line-height: 40rpx;
				font-size: $font-size-28;
				color: $text-color;
				text-align: left;
			}
			.error-main {
				padding: 10rpx 0;
				.error-item {
					padding: 0 20rpx;
					margin: 10rpx;
					background: #f53636;
					height: 52rpx;
					line-height: 52rpx;
					border-radius: 26rpx;
					font-size: $font-size-26;
					color: #ffffff;
					text-align: center;
					display: inline-block;
				}
			}
			.register-tip {
				line-height: 64rpx;
				font-size: $font-size-20;
				color: #fea785;
				text-align: left;
			}
			.register-title {
				line-height: 44rpx;
				font-size: $font-size-24;
				color: $color-system;
				text-align: left;
			}
			.row-btn {
				position: absolute;
				right: 24rpx;
				top: 0;
				line-height: 88rpx;
				text-align: center;
				font-size: $font-size-28;
				color: $color-system;
			}
			.register-from {
				width: 100%;
				height: 88rpx;
				background: #ffffff;
				position: relative;
				border-bottom: 1px solid #e1e1e1;
				box-sizing: border-box;
				&.noneborder {
					border: none;
				}
				&.second {
					padding-left: 0;
				}
				.label {
					text-align: left;
					font-size: $font-size-28;
					color: #666666;
					line-height: 88rpx;
					float: left;
				}
				.kes-title {
					font-size: $font-size-28;
					color: #666666;
					line-height: 88rpx;
				}
				.row-input {
					width: 520rpx;
					padding-left: 10rpx;
					font-size: $font-size-28;
					color: $text-color;
					line-height: 88rpx;
					float: right;
					height: 88rpx;
					&.code {
						width: 500rpx;
					}
					&.none {
						color: #999999;
					}
					&.picker {
						text-align: left;
						color: #333333;
					}
				}
				.keshi {
					width: 100%;
					border: 2rpx solid #E1E1E1;
					border-radius: 6rpx;
					height: 80rpx;
					line-height: 80rpx;
					font-size: $font-size-28;
					padding:0 10rpx;
					box-sizing: border-box;
				}
				&.code {
					width: 410rpx;
					float: left;
					margin-right: 20rpx;
					.row-input {
						width: 390rpx;
					}
				}
				&.btn {
					width: 224rpx;
					height: 88rpx;
					float: left;
					background: $btn-confirm;
					padding: 0;
					.row-input {
						width: 224rpx;
						height: 88rpx;
						line-height: 88rpx;
						padding: 0;
						color: #ffffff;
						background: $btn-confirm;
						text-align: center;
						border-radius: 14rpx;
						&.other {
							width: 430rpx;
							background: #fff;
							margin-right: 20rpx;
							border: 2rpx solid #b2b2b2;
							border-radius: 44rpx;
							padding: 0 24rpx;
							height: 64rpx;
							line-height: 64rpx;
						}
						&.none {
							background: #f7f7f7;
						}
					}
					&.disabled {
						background: #f7f7f7;
						.row-input {
							background: #f7f7f7;
							color: #999999;
						}
					}
				}
				&.picker {
					width: 100%;
					height: 88rpx;
					line-height: 88rpx;
					.label {
						line-height: 88rpx;
					}
					.label-radio {
						margin-right: 10rpx;
					}
					.row-radio {
						transform: scale(0.8);
					}
					.row-input {
						width: 100%;
						height: 88rpx;
						line-height: 88rpx;
						padding-left: 30rpx;
					}
				}
				&.radio {
					width: 654rpx;
					height: 288rpx;
					.row-input {
						width: 100%;
						height: 88rpx;
						line-height: 88rpx;
						padding-left: 0;
					}
					.row-radio {
						float: left;
						transform: scale(0.8);
					}
					.row-text {
						width: 100rpx;
						text-align: center;
						float: left;
					}
				}
				&.group {
					width: 702rpx;
					height: auto;
					background: #ffffff;
					border: 0;
					.label {
						line-height: 76rpx;
					}
					.row-input {
						width: 100%;
						height: 88rpx;
						line-height: 88rpx;
						padding-left: 0;
					}
					.row-radio {
						float: left;
					}
					.row-text {
						width: 100rpx;
						text-align: center;
						float: left;
					}
				}
				&.btn {
					margin-top: 0;
				}
				.content-class {
					margin: 20rpx auto;
					display: flex;
					flex-flow: row wrap;
					justify-content: space-between;
					align-items: center;
					&.btn {
						margin: 0 auto;
					}
					.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: 10rpx;
						border-radius: 45rpx;
						line-height: 64rpx;
						text-align: center;
						background: #ffe6dc;
						color: $color-system;
						margin: 0;
						&.other {
							width: 213rpx;
						}
					}
					.item {
						height: 60rpx;
						font-size: $font-size-28;
						line-height: 60rpx;
						border-radius: 10rpx;
						margin: 5rpx;
						box-sizing: border-box;
						float: left;
					}
					.item-checkbox {
						display: none;
					}
					.item-text {
						border: 2rpx solid #e1e1e1;
						display: inline-block;
						font-size: 26rpx;
						color: #999999;
						padding: 0 30rpx;
						border-radius: 28rpx;
						line-height: 50rpx;
						float: left;
					}
					.on {
						.item-text {
							border-color: $color-system;
							color: $color-system;
						}
					}
				}
			}
			.icon-xiayibu {
				width: 88rpx;
				height: 88rpx;
				position: absolute;
				right: 0;
				top: 0;
				line-height: 88rpx;
				text-align: center;
				color: #b2b2b2;
			}
			&.text-textarea {
				background: #ffffff;
				.textarea {
					width: 100%;
					height: 120rpx;
					background: #ffffff;
					padding: 24rpx 0;
					font-size: $font-size-28;
					color: $text-color;
					z-index: 1;
					border-bottom: 1px solid #e1e1e1;
				}
				.textarea.hide {
					opacity: 0;
				}
				.textarea.show {
					color: #999999;
				}
			}
		}
		.register-picture {
			// height: 102rpx;
			margin: 30rpx 0;
			// width: 42%;
			// float: left;
			&.zz {
				width: 100%;
			}
			.label {
				// float: left;
				font-size: $font-size-28;
				color: $text-color;
				line-height: 102rpx;
				// width: 150rpx;
				// text-align: left;
				&.zz {
					width: 230rpx;
				}
			}
			.upload-picture {
				// float: left;
				width: 200rpx;
				height: 180rpx;
				.upload-none {
					width: 200rpx;
					height: 180rpx;
					text-align: center;
					line-height: 100rpx;
					color: #999999;
					// border: 1px solid #999999;
					border-radius: 10rpx;
					// margin: 0 20rpx;
					// .iconfont{
					// 	font-size: $font-size-28;
					// }
					image {
						width: 100%;
						height: 100%;
					}
				}
				.upload-image {
					width: 200rpx;
					height: 180rpx;
					border-radius: 10rpx;
					margin: 0 20rpx;
					position: relative;
					image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
					.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;
						}
					}
				}
			}
		}
		.register-input {
			width: 654rpx;
			height: 40rpx;
			padding: 24rpx;
			margin: 0 auto;
			margin-bottom: 60rpx;
			background: #f7f7f7;
			border-radius: 14rpx;
			.input {
				width: 100%;
				height: 100%;
				background: #f7f7f7;
				font-size: $font-size-28;
				line-height: 40rpx;
				color: #333333;
				border-radius: 14rpx;
			}
		}
		.register-fiexd {
			width: 100%;
			height: auto;
			padding: 20rpx 0;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 99;
			background: #ffffff;
			.register-agree {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 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: 600rpx;
			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;
			}
		}
	}
}
checkbox .wx-checkbox-input {
	border-radius: 50%;
	width: 36rpx;
	height: 36rpx;
}
/* 选中后的 背景样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
	background: #e15616;
	border: 2rpx solid #e15616;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
	border-radius: 50%;
	width: 36rpx;
	height: 36rpx;
	line-height: 36rpx;
	text-align: center;
	font-size: 20rpx;
	color: #fff;
	transform: scale(0.8);
	-webkit-transform: translate(-50%, -50%) scale(1);
}
.tui-alert-box {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: fixed;
	left: 0;
	top: 0;
	opacity: 1;
	background: rgba(51, 51, 51, 0.5);
	z-index: 99999;
	.tui-alert-content {
		width: 580rpx;
		height: 324rpx;
		border-radius: 16rpx;
		background-color: #ffffff;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
		.tui-alert-main {
			width: 100%;
			height: 234rpx;
			box-sizing: border-box;
			padding: 60rpx 30rpx;
			line-height: 60rpx;
			font-size: $font-size-26;
			color: #666666;
			text-align: justify;
			.red {
				color: #e15616;
			}
		}
		.tui-alert-btn {
			width: 100%;
			height: 90rpx;
			box-sizing: border-box;
			line-height: 90rpx;
			background: $btn-confirm;
			color: #ffffff;
			text-align: center;
			font-size: $font-size-28;
			border-radius: 0 0 16rpx 16rpx;
		}
	}
}
</style>