caimei-applets-caimei/pages/seller/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 first 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 first clearfix">
			<view class="register-row clearfix"> <text class="register-title">注册信息</text> </view>
			<view class="register-row clearfix">
				<view class="register-from">
					<view class="label">联系人:</view>
					<input
						class="row-input"
						type="text"
						name="input"
						v-model="clubContact"
						placeholder="请输入联系姓名"
						maxlength="6"
					/>
				</view>
			</view>
			<view class="register-row clearfix">
				<view class="register-from">
					<view class="label">手机号:</view> <view class="row-input">{{ mobile }}</view>
				</view>
			</view>
		</view>
		<view class="register-main clearfix">
			<view class="register-row"> <view class="register-title">其他信息</view> </view>
			<view class="register-row clearfix">
				<view class="register-from">
					<view class="label">固定电话:</view>
					<input
						class="row-input"
						type="text"
						v-model="clubTelePhone"
						placeholder="请填写机构的固定电话"
						maxlength="15"
					/>
				</view>
			</view>
			<view class="register-row clearfix">
				<view class="register-from">
					<view class="label">传真:</view>
					<input
						class="row-input"
						type="text"
						v-model="clubFax"
						placeholder="请填写机构的传真"
						maxlength="15"
					/>
				</view>
			</view>
			<view class="register-row text-textarea clearfix">
				<textarea
					class="textarea"
					type="text"
					v-model="companyPprofile"
					placeholder="请填写公司简介，最多500字"
					placeholder-class="placeholder"
					maxlength="500"
					@input="onTextareaInputInfo"
					:class="isShowInput ? '' : ''"
				/>
			</view>
		</view>
		<view class="register-main clearfix" v-if="clubStatus == 90" :class="isUpgrade ? '' : 'detailed'">
			<view class="register-row clearfix">
				<view class="register-txt first"><text>您还可以填写更多信息，帮机构直接注册成为资质机构。</text></view>
				<view class="register-txt"><text>不过这些信息需要审核。</text></view>
				<view class="register-bet" @tap.stop="showUpgrade()" v-if="isDownUpgrade">
					<text>展开信息填写<text class="iconfont icon-xiangxiajiantou"></text></text>
				</view>
			</view>
			<view class="register-fiexd clearfix">
				<view class="register-bet" @tap.stop="hideUpgrade()" v-if="isUpgrade">
					<text>收起<text class="iconfont icon-xiangshangjiantou"></text></text>
				</view>
				<view class="register-row ">
					<view class="register-btn sub" @click.stop="organizationUpgradeInfo">{{ registerBtnText }}</view>
				</view>
			</view>
		</view>
		<view class="register-main clearfix" v-else>
			<view class="register-fiexd clearfix">
				<view class="register-row ">
					<view class="register-btn sub" @click.stop="organizationUpdateInfo">提交审核</view>
				</view>
			</view>
		</view>
		<view class="register-main detailed clearfix" v-if="isShowUpgrade">
			<view class="register-row"> <view class="register-title">升级信息</view> </view>
			<view class="register-row clearfix">
				<view class="register-from">
					<view class="label">邮箱:</view>
					<input
						class="row-input"
						type="text"
						name="input"
						v-model="contractEmail"
						placeholder="请输入您的常用邮箱"
						maxlength="30"
					/>
				</view>
			</view>
			<view class="register-row clearfix">
				<view class="register-from">
					<view class="label">机构名称:</view>
					<input
						class="row-input"
						type="text"
						v-model="clubName"
						placeholder="请输入您的机构名称"
						maxlength="30"
					/>
				</view>
			</view>
			<view class="register-row clearfix">
				<view class="register-from">
					<view class="label">机构简称:</view>
					<input
						class="row-input"
						type="text"
						v-model="shortName"
						placeholder="请输入您的机构简称"
						maxlength="10"
					/>
				</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"
					@blur="hideTextareaFocus"
					:class="isShowInput ? '' : ''"
				/>
			</view>
			<view class="register-row clearfix">
				<view class="register-from">
					<view class="label">营业执照编号:</view>
					<input
						class="row-input"
						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"
							><text class="iconfont icon-jiahao"></text
						></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 class="register-picture">
					<view class="label">门头照:</view>
					<view class="upload-picture">
						<view class="upload-none" v-if="shopPhoto === ''" @click="chooseMentuzImage"
							><text class="iconfont icon-jiahao"></text
						></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 picker">
					<view class="label">机构类型:</view>
					<view class="row-input picker" @click="bindPickerChange">{{ organizationTypeText }}</view>
					<text class="iconfont icon-xiayibu"></text>
				</view>
			</view>
			<view class="register-row clearfix" v-if="isOrganizationType == 1">
				<view class="register-from radio">
					<radio-group @change="radioChange">
						<label class="row-label-input" v-for="(item, index) in beautyList" :key="item.value">
							<radio class="row-radio" :value="item.value" :checked="index === current" color="#FF5B00" />
							<view class="row-text">{{ item.name }}</view>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="register-row clearfix" v-if="isOrganizationType == 2">
				<view class="register-from radio">
					<radio-group @change="radioChange">
						<label class="row-label-input" v-for="(item, index) in beautyLists" :key="item.value">
							<radio class="row-radio" :value="item.value" :checked="index === current" color="#FF5B00" />
							<view class="row-text">{{ item.name }}</view>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="register-row clearfix" v-show="isOrganizationType == 1 && isDepartment">
				<view class="register-from">
					<view class="label">科室:</view>
					<input
						class="row-input keshi"
						type="text"
						v-model="department"
						placeholder="请填写经营的科室，至少三个，用逗号隔开"
						maxlength="16"
					/>
				</view>
			</view>
			<view class="register-row 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"
							><text class="iconfont icon-jiahao"></text
						></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">
				<view class="register-from group">
					<view class="label">主营内容:</view>
					<view class="content-class">
						<checkbox-group @change="chooseMaleLike">
							<label
								class="item"
								v-for="(item, index) in mentuzCampList"
								:key="index"
								:class="{ on: item.checked }"
							>
								<checkbox :value="item.value"></checkbox> <text class="item-text">{{ item.name }}</text>
							</label>
						</checkbox-group>
					</view>
				</view>
				<view class="register-from group btn">
					<view class="content-class btn">
						<view class="item" @click="showAustomItem"> <text class="item-text">其他</text> </view>
					</view>
				</view>
				<view class="register-from group btn" v-show="isShowAustomItem">
					<view class="content-class btn">
						<input
							class="row-input other"
							type="text"
							v-model="customItemValue"
							placeholder="请输入自定义项目"
							@blur="onBlurInput"
							maxlength="5"
						/>
						<button
							type="default"
							class="confirm-btn"
							:class="[isDisabled === true ? 'disabled' : 'none']"
							:disabled="isDisabled"
							@click.stop="addCustomItem"
						>
							确认添加
						</button>
					</view>
				</view>
			</view>
			<view class="register-row clearfix" v-if="isOrganizationType == 2">
				<view class="register-from group">
					<view class="label">主营内容:</view>
					<view class="content-class">
						<checkbox-group @change="chooseMaleLikes">
							<label
								class="item"
								v-for="(item, index) in medicaCampList"
								:key="index"
								:class="{ on: item.checked }"
							>
								<checkbox :value="item.value"></checkbox> <text class="item-text">{{ item.name }}</text>
							</label>
						</checkbox-group>
					</view>
				</view>
				<view class="register-from group btn">
					<view class="content-class btn">
						<view class="item" @click="showAustomItem"> <text class="item-text">其他</text> </view>
					</view>
				</view>
				<view class="register-from group btn" v-show="isShowAustomItem">
					<view class="content-class btn">
						<input
							class="row-input other"
							type="text"
							v-model="customItemValue"
							placeholder="请输入自定义项目"
							@input="onBlurInput"
							maxlength="5"
						/>
						<button
							type="default"
							class="confirm-btn"
							:class="[isDisabled === true ? 'disabled' : 'none']"
							:disabled="isDisabled"
							@click.stop="addCustomItem"
						>
							确认添加
						</button>
					</view>
				</view>
			</view>
			<mpvue-city-picker
				:themeColor="themeColor"
				ref="mpvueCityPicker"
				:pickerValueDefault="cityPickerValueDefault"
				@onCancel="onCancel"
				@onConfirm="onConfirm"
			>
			</mpvue-city-picker>
		</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
			},
			CustomBar: this.CustomBar, // 顶部导航栏高度
			errorList: [],
			tabCurrentIndex: 3,
			clubStatus: '', //审核状态
			isPreviewImage: false, //预览图片开关
			userId: '', //用户ID
			clubId: '', //会所ID
			serviceProviderId:0, //协销Id
			clubContact: '', //联系人姓名
			mobile: '', //联系人手机号
			contractEmail: '', //邮箱
			clubName: '', //机构名称
			shortName: '', //机构简称
			socialCreditCode: '', //统一社会信用代码
			isDisabled: true,
			isShowInput: true,
			textareaFocus: false,
			isUpgrade: false,
			isShowUpgrade: false,
			isDownUpgrade: true,
			businessLicense: '', //营业执照图片
			shopPhoto: '', //门头照图片
			medicalPracticeLicense: '', //资质照图片
			department: '', //科室
			isDepartment: false, //是否显示科室
			secondClubType: null, //机构类型二级分类
			mainProduct: '', //主营内容
			clubTelePhone: '', //固定电话
			clubFax: '', //传真
			companyPprofile: '', //公司简介
			firstClubType: null, //机构类型
			isOrganizationType: 0,
			organizationTypeText: '请选择机构类型',
			beautyList: beautyList, //医美分类
			beautyLists: beautyLists, //生美分类
			mentuzCampNullList: mentuzCampNullList, //医美分类
			medicaCampNullList: medicaCampNullList, //生美分类
			mentuzCampList: [], //医美主营
			medicaCampList: [], //生美主营
			typtIndex: 0,
			organizationType: 0,
			current: 0,
			isShowAustomItem: false, //是否显示其他添加
			customItemValue: '', //自定义项目
			isMainproCheck: false,
			addressData: {
				address: '请选择机构所在地区',
				townId: '', //区ID
				cityId: '', //市ID
				provinceId: '', //省ID
				addressDetail: '' //地址详情
			},
			registerBtnText: '确定'
		}
	},
	onLoad(option) {
		this.userId = option.userID
		this.initGetStotage(option.userID)
	},
	methods: {
		async initGetStotage(userId) {
			// 初始化
			const userInfo = await this.$api.getStorage()
			this.serviceProviderId = userInfo.serviceProviderId ? userInfo.serviceProviderId : 0
			this.organizationInfo(userId)
		},
		hanldNavigateBack() {
			this.$util.modal('', '资料尚未提交审核，确定放弃升级吗？', '确定', '取消', true, () => {
				uni.navigateBack({
					delta: 1
				})
			})
		},
		organizationInfo(userId) {
			this.UserService.OrganizationUpdateModifyInfo({ userId: userId })
				.then(response => {
					let organizationClub = response.data.club
					let organizationUser = response.data.user
					this.clubStatus = organizationClub.status
					if (this.clubStatus === 90) {
						this.isShowUpgrade = false
					} else {
						this.isShowUpgrade = true
					}
					if (organizationUser.auditNoteList != null) {
						this.errorList = organizationUser.auditNoteList
					}
					this.clubContact = organizationClub.linkMan
					this.mobile = organizationUser.bindMobile
					this.contractEmail = organizationClub.contractEmail
					this.clubId = organizationUser.clubId
					this.clubName = this.$reg.checkData(organizationClub.name)
					this.shortName = this.$reg.checkData(organizationClub.shortName)
					if (organizationClub.provinceId == null) {
						this.addressData.provinceId = ''
					} else {
						this.addressData.provinceId = organizationClub.provinceId
					}
					if (organizationClub.cityId == null) {
						this.addressData.cityId = ''
					} else {
						this.addressData.cityId = organizationClub.cityId
					}
					if (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)
					this.clubTelePhone = this.$reg.checkData(organizationClub.contractPhone)
					this.clubFax = this.$reg.checkData(organizationClub.fax)
					this.companyPprofile = this.$reg.checkData(organizationClub.profile)
					//机构类型&&主营项目
					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.current = 0
							break
						case 2:
							this.current = 1
							this.isDepartment = true
							break
						case 3:
							this.current = 2
							this.isDepartment = true
							break
					}
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		organizationUpdateInfo() {
			//个人机构修改资料
			this.clubUpgradeApi()
		},
		organizationUpgradeInfo() {
			//个人机构提交审核
			if (this.isUpgrade) {
				this.clubUpgradeApi()
			} else {
				if (this.clubContact == '') {
					this.$util.msg('请输入联系人姓名', 2000)
					return
				}
				let params = {
					userId: this.userId,
					clubId: this.clubId, //会所ID
					linkMan: this.clubContact,
					fax: this.clubFax,
					contractPhone: this.clubTelePhone,
					profile: this.companyPprofile,
					serviceProviderId:this.serviceProviderId
				}
				this.UserService.OrganizationUpdate(params)
					.then(response => {
						this.$util.msg('修改成功', 2000, true, 'success')
						setTimeout(() => {
							uni.navigateBack({ delta: 1 })
						}, 2000)
					})
					.catch(error => {
						this.$util.msg(error.msg, 2000)
					})
			}
		},
		clubUpgradeApi() {
			if (this.isMainproCheck) {
				let mainproList = []
				if (this.firstClubType == 1) {
					this.mentuzCampList.forEach(item => {
						mainproList.push(item.name)
					})
				} else {
					this.medicaCampList.forEach(item => {
						mainproList.push(item.name)
					})
				}
				this.mainProduct = mainproList.join('/')
			}
			console.log(this.mainProduct)
			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.mainProduct == '') {
					this.$util.msg('请选择住机构主营内容', 2000)
					return
				}
			}
			let params = {
				userId: this.userId,
				clubId: this.clubId, //会所ID
				linkMan: this.clubContact,
				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, //机构类型分类 医美:0和生美:1
				secondClubType: this.secondClubType, //机构类型二级分类 诊所:1,门诊:2,医院:3
				department: this.department, //科室
				medicalPracticeLicense: this.medicalPracticeLicense, //资质图片
				mainProduct: this.mainProduct,
				fax: this.clubFax,
				contractPhone: this.clubTelePhone,
				profile: this.companyPprofile
			}
			this.UserService.OrganizationRegister(params)
				.then(response => {
					this.$util.msg('您的升级申请已提交审核', 2000)
					setTimeout(() => {
						uni.navigateBack({ delta: 1 })
					}, 2000)
				})
				.catch(error => {
					this.$util.msg(error.msg, 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
		},
		onTextareaInputInfo(e) {
			this.companyPprofile = e.detail.value
		},
		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 = '医美'
							this.secondClubType = 1
							break
						case 1:
							this.organizationTypeText = '生美'
							this.secondClubType = 5
							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(e) {
			this.secondClubType = e.target.value
			if (this.secondClubType == 2 || this.secondClubType == 3) {
				this.isDepartment = true
			} else {
				this.isDepartment = false
			}
			for (let i = 0; i < this.beautyList.length; i++) {
				if (this.beautyList[i].value === this.secondClubType) {
					this.current = i
					break
				}
			}
		},
		chooseMaleLike(e) {
			this.isMainproCheck = true
			this.mainProduct = this.checkLikes(e, this.mentuzCampList)
		},
		chooseMaleLikes(e) {
			this.isMainproCheck = true
			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)
			})
			console.log(_ARRAY)
			return _ARRAY
		},
		addCustomItem() {
			if (this.isOrganizationType == 1) {
				let item = { value: `${this.mentuzCampList.length + 1}`, name: this.customItemValue, checked: true }
				this.mentuzCampList.push(item)
			} else {
				let item = { value: `${this.medicaCampList.length + 1}`, name: this.customItemValue, checked: true }
				this.medicaCampList.push(item)
			}
		},
		showUpgrade() {
			this.isUpgrade = true
			this.isShowUpgrade = true
			this.isDownUpgrade = false
			this.registerBtnText = '提交审核'
		},
		hideUpgrade() {
			this.$util.modal('提示', '收起后，您填写的升级信息将会被清空确定收起吗？', '确定', '取消', true, () => {
				this.isUpgrade = false
				this.isShowUpgrade = false
				this.isDownUpgrade = true
				this.registerBtnText = '确定'
			})
		}
	},
	onShow() {
		if (this.isPreviewImage) {
			this.isPreviewImage = false
			return
		}
	}
}
</script>

<style lang="scss">
.register {
	width: 100%;
	height: auto;
	border-top: 1px solid #f7f7f7;
	background: #efefef;
	.register-main {
		width: 100%;
		height: auto;
		background: #ffffff;
		&.detailed {
			padding-bottom: 200rpx;
		}
		&.first {
			padding-top: 30rpx;
		}
		.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;
			&.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-txt {
				line-height: 44rpx;
				font-size: $font-size-26;
				color: $text-color;
				text-align: left;
				&.first {
					margin-top: 20rpx;
				}
			}
			.register-bet {
				width: 100%;
				display: flex;
				line-height: 60rpx;
				height: 60rpx;
				align-items: center;
				flex-direction: column;
				font-size: $font-size-28;
				color: $color-system;
				margin-top: 40rpx;
				text {
					margin: 0 5rpx;
				}
			}
			.register-tip {
				line-height: 64rpx;
				font-size: $font-size-24;
				color: #cecece;
				text-align: left;
			}
			.register-title {
				font-size: $font-size-32;
				color: $text-color;
				text {
					font-size: $font-size-24;
				}
			}
			.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: 654rpx;
				height: 40rpx;
				padding: 24rpx;
				background: $sub-bg-color;
				border-radius: 14rpx;
				position: relative;
				.label {
					text-align: left;
					font-size: $font-size-28;
					color: #666666;
					line-height: 40rpx;
					float: left;
				}
				.row-input {
					width: 440rpx;
					padding-left: 10rpx;
					font-size: $font-size-28;
					color: $text-color;
					line-height: 40rpx;
					float: left;
					height: 40rpx;
					&.none {
						color: #999999;
					}
					&.picker {
						text-align: left;
						color: #999999;
					}
					&.keshi {
						width: 550rpx;
					}
				}
				&.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: 224rpx;
							background: #f7f7f7;
							margin-right: 20rpx;
						}
						&.none {
							background: #f7f7f7;
						}
					}
					&.disabled {
						background: #f7f7f7;
						.row-input {
							background: #f7f7f7;
							color: #999999;
						}
					}
				}
				&.picker {
					padding: 0 24rpx;
					width: 654rpx;
					height: 88rpx;
					line-height: 88rpx;
					.label {
						line-height: 88rpx;
					}
					.row-input {
						width: 470rpx;
						height: 88rpx;
						line-height: 88rpx;
						padding-left: 30rpx;
					}
				}
				&.radio {
					padding: 0 14rpx;
					width: 674rpx;
					height: 90rpx;
					.row-label-input{
						height: 88rpx;
						line-height: 88rpx;
						padding-left: 0;
					}
					.row-radio {
						float: left;
						transform: scale(0.7);
					}
					.row-text {
						width: 100rpx;
						text-align: left;
						float: left;
						font-size: $font-size-26;
					}
				}
				&.group {
					padding: 0 24rpx;
					width: 654rpx;
					height: auto;
					background: #ffffff;
					margin-top: 30rpx;
					.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;
						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: 200rpx;
						height: 88rpx;
						border-radius: 10rpx;
						line-height: 88rpx;
						text-align: center;
						&.other {
							width: 213rpx;
						}
						&.none {
							color: #ffffff;
							background: $btn-confirm;
						}
						&.disabled {
							color: #999999;
						}
					}
					.item {
						width: 155rpx;
						height: 60rpx;
						font-size: $font-size-28;
						line-height: 60rpx;
						border-radius: 10rpx;
						margin: 10rpx;
						text-align: center;
						box-sizing: border-box;
						border: 1rpx solid #efefef;
						float: left;
						checkbox {
							display: none;
						}
					}
					.on {
						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;
			}
			&.text-textarea {
				background: #ffffff;
				.textarea {
					width: 654rpx;
					height: 180rpx;
					background: #f7f7f7;
					padding: 24rpx;
					font-size: $font-size-28;
					color: $text-color;
					z-index: 1;
					border-radius: 14rpx;
				}
				.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: right;
				&.zz {
					width: 230rpx;
				}
			}
			.upload-picture {
				float: left;
				height: 100rpx;
				.upload-none {
					width: 100rpx;
					height: 100rpx;
					text-align: center;
					line-height: 100rpx;
					color: #999999;
					border: 1px solid #999999;
					border-radius: 10rpx;
					margin: 0 20rpx;
					.iconfont {
						font-size: $font-size-28;
					}
				}
				.upload-image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 10rpx;
					margin: 0 20rpx;
					position: relative;
					image {
						width: 100rpx;
						height: 100rpx;
						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-bet {
				width: 100%;
				display: flex;
				line-height: 60rpx;
				height: 60rpx;
				align-items: center;
				flex-direction: column;
				font-size: $font-size-28;
				color: $color-system;
				margin-bottom: 20rpx;
				.icon-xiangxiajiantou {
					transform: rotate(180deg);
				}
				text {
					margin: 0 5rpx;
				}
			}
			.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: 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>