caimei-applets-caimei/pages/login/information.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">
			<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="linkMan"
						placeholder="请输入联系姓名"
						placeholder-class="placeholder"
						maxlength="6"
					/>
				</view>
			</view>
			<view class="register-row clearfix">
				<view class="register-from bordernone">
					<view class="label">手机号</view>
					<view class="row-input" placeholder="请输入手机号">{{ mobile }}</view>
				</view>
			</view>
		</view>
		<view class="register-main clearfix" v-if="userIdentity === 2">
			<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="请输入邮箱地址"
						placeholder-class="placeholder"
						maxlength="30"
					/>
				</view>
			</view>
			<view class="register-row none clearfix">
				<view class="register-from">
					<view class="label">机构名称</view>
					<input
						class="row-input"
						type="text"
						v-model="name"
						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="adddress show"
					v-if="isShowInput"
					placeholder-class="placeholder"
					@click="showTextareaFocus"
					>{{
						addressData.addressDetail ? addressData.addressDetail : '详细地址：如道路、门牌号、小区等'
					}}</view
				>
				<textarea
					v-else
					class="adddress"
					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"
						type="text"
						v-model="socialCreditCode"
						placeholder="请填写社会统一信用代码"
						placeholder-class="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 none clearfix">
				<view class="register-from bordernone">
					<view class="label">机构类型</view>
				</view>
			</view>
			<view class="register-row clearfix">
				<view class="register-from picker bordernone">
					<view class="row-input">
						<radio-group @change="bindPickerChange">
							<label class="label-radio" v-for="(item, index) in typename" :key="item.value">
								<radio
									class="row-radio"
									:value="item.value"
									:checked="index === firstClubTypeCurrent"
									color="#E15616"
								/>{{ item.name }}
							</label>
						</radio-group>
					</view>
				</view>
			</view>
			<view class="register-row clearfix" v-if="firstClubType == 1">
				<view class="register-from bordernone 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 clearfix" v-if="firstClubType == 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 clearfix" v-if="firstClubType == 1">
				<view class="register-picture zz">
					<view class="label zz">医疗执业许可证</view>
					<view class="upload-picture">
						<view
							class="upload-none"
							v-if="medicalPracticeLicense == '' || medicalPracticeLicense == null"
							@click="chooseMedicalImage"
						>
							<image src="https://static.caimei365.com/app/img/upload/club-yiliao.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-show="firstClubType == 1 && isDepartment">
				<view class="register-from bordernone">
					<view class="kes-title">科室</view>
					<textarea
						class="keshi"
						placeholder="请填写经营的科室，至少三个，用逗号隔开"
						placeholder-style="placeholder"
						v-model="department"
						maxlength="16"
					></textarea>
				</view>
			</view>
			<view class="register-row none clearfix" v-if="firstClubType == 1">
				<view class="register-from group bordernone">
					<view class="label">主营内容</view>
				</view>
			</view>	
			<view class="register-row clearfix" v-if="firstClubType == 1">
				<view class="register-from group bordernone">
					<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">
					<view class="content-class btn">
						<input
							class="row-input other"
							type="text"
							v-model="customItemValue"
							placeholder="请输入自定义项目"
							placeholder-class="placeholder"
							maxlength="5"
						/>
						<button type="default" class="confirm-btn" @click.stop="addCustomItem">确认添加</button>
					</view>
				</view>
			</view>
			<view class="register-row none clearfix" v-if="firstClubType == 2">
				<view class="register-from group">
					<view class="label">主营内容</view>
				</view>	
			</view>		
			<view class="register-row clearfix" v-if="firstClubType == 2">
				<view class="register-from group">
					<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"></checkbox>
								<text class="item-text">{{ item.name }}</text>
							</label>
						</checkbox-group>
					</view>
				</view>
				<view class="register-from group btn">
					<view class="content-class btn">
						<input
							class="row-input other"
							type="text"
							v-model="customItemValue"
							placeholder="请输入自定义项目"
							placeholder-class="placeholder"
							maxlength="5"
						/>
						<button type="default" class="confirm-btn" @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 class="register-main detailed 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="请填写机构的固定电话"
						placeholder-class="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="请填写机构的传真"
						placeholder-class="placeholder"
						maxlength="15"
					/>
				</view>
			</view>
			<view class="register-row text-textarea clearfix">
				<view class="label">公司介绍</view>
				<textarea
					class="textarea"
					type="text"
					v-model="profile"
					placeholder="请填写公司简介，最多500字"
					placeholder-class="placeholder"
					maxlength="500"
					@input="onTextareaInputInfo"
					:class="isShowInput ? '' : ''"
				/>
			</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>
		</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'
var self
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, // 顶部导航栏高度
			isPreviewImage: false, // 预览图片开关
			userId: '', // 用户ID
			clubId: '', // 会所ID
			userIdentity: '', // 机构用户类型
			contractEmail: '', // 邮箱
			name: '', // 机构名称
			shortName: '', // 机构简称
			linkMan: '', // 联系人
			mobile: '', // 联系人手机号
			socialCreditCode: '', // 统一社会信用代码
			isDisabled: true,
			isShowInput: true,
			textareaFocus: false,
			businessLicense: '', // 营业执照图片
			shopPhoto: '', // 门头照图片
			medicalPracticeLicense: '', // 资质照图片
			department: '', // 科室
			isDepartment: false, // 是否显示科室
			secondClubType: '', // 机构类型二级分类
			mainProduct: '', // 主营内容
			clubTelePhone: '', // 固定电话
			clubFax: '', // 传真
			profile: '', // 公司简介
			firstClubType: 0, // 机构类型
			organizationTypeText: '请选择机构类型',
			beautyList: beautyList,
			beautyLists: beautyLists,
			mentuzCampNullList: mentuzCampNullList,
			medicaCampNullList: medicaCampNullList,
			mentuzCampList: [],
			medicaCampList: [],
			typtIndex: 0,
			organizationType: 0,
			firstClubTypeCurrent: 0,
			current: 0,
			isShowAustomItem: false, // 是否显示其他添加
			customItemValue: '', // 自定义项目
			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.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(organizationClub.contractEmail){
							this.isFirstAdds = false
						}else{
							this.isFirstAdds = true
						}
						this.contractEmail = organizationClub.contractEmail
							? organizationClub.contractEmail
							: organizationClub.email
						this.clubId = organizationUser.clubId
						this.userIdentity = organizationUser.userIdentity
						this.name = organizationClub.name ? organizationClub.name : ''
						this.linkMan = organizationClub.linkMan
						this.mobile = organizationUser.bindMobile ? organizationUser.bindMobile : ''
						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.addressDetail = organizationClub.address ? organizationClub.address : ''
						this.socialCreditCode = this.$reg.checkData(organizationClub.socialCreditCode)
						this.firstClubType = organizationClub.firstClubType
						if(this.firstClubType == 1){
							this.firstClubTypeCurrent = 0
						}else{
							this.firstClubTypeCurrent = 1
						}
						this.secondClubType = this.$reg.checkData(organizationClub.secondClubType)
						this.addressData.address = organizationClub.provincialAddress
							? organizationClub.provincialAddress
							: ''
						this.businessLicense = this.$reg.checkData(organizationClub.businessLicense)
						this.medicalPracticeLicense = this.$reg.checkData(organizationClub.medicalPracticeLicense)
						this.shopPhoto = this.$reg.checkData(organizationClub.shopPhoto)
						this.department = organizationClub.department
						this.clubTelePhone = this.$reg.checkData(organizationClub.contractPhone)
						this.clubFax = this.$reg.checkData(organizationClub.fax)
						this.profile = this.$reg.checkData(organizationClub.profile)
						//机构类型&&主营项目
						switch(this.firstClubType){
							case 1:
								this.organizationTypeText = '医美'
								break
							case 2:
								this.organizationTypeText = '生美'
								break
							case 3:
								this.organizationTypeText = '项目公司'
								break
							case 4:
								this.organizationTypeText = '个人'
								break
							case 5:
								this.organizationTypeText = '其他'
								break
							case null:
								this.organizationTypeText = '请选择机构类型'
								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
							}
						}
						//机构类型
						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() {
			//提交审核
			let params = {}
			if (this.userIdentity === 4) {
				params = {
					userId: this.userId,
					clubId: this.clubId, //会所ID
					linkMan: this.linkMan,
					fax: this.clubFax,
					contractPhone: this.clubTelePhone,
					profile: this.profile
				}
			} else {
				if (this.isFirstAdds) {
					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('/')
				}
				if (this.contractEmail == '') {
					this.$util.msg('请输入邮箱地址', 2000)
					return
				}
				if (!this.$reg.isEmail(this.contractEmail)) {
					this.$util.msg('请输入正确的邮箱地址', 2000)
					return
				}
				if (this.name == '') {
					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.medicalPracticeLicense == '') {
					this.$util.msg('请上传您的资质许可证', 2000)
					return
				}
				console.log('mainProduct', this.mainProduct)
				console.log('firstClubType', this.firstClubType)
				if (this.firstClubType != 0) {
					if (this.mainProduct == '') {
						this.$util.msg('请选择住机构主营内容', 2000)
						return
					}
				}
				params = {
					userId: this.userId,
					clubId: this.clubId, //会所ID
					name: this.name,
					linkMan: this.linkMan,
					shortName: this.shortName,
					contractEmail: this.contractEmail,
					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.firstClubType, //机构类型分类 医美: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.profile
				}
			}
			this.UserService.OrganizationUpdate(params)
				.then(response => {
					this.$util.msg('修改成功', 2000, true, 'success')
					setTimeout(() => {
						uni.navigateBack()
					}, 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.profile = 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(e) {
			this.firstClubType = e.target.value
			for (let i = 0; i < this.typename.length; i++) {
				if (this.typename[i].value === e.target.value) {
					this.firstClubTypeCurrent = i
					break
				}
			}
			// let self = this
			// uni.showActionSheet({
			// 	title:'标题',
			// 	itemList: ['医美', '生美'],
			// 	success: (e) => {
			// 		self.firstClubType = e.tapIndex+1
			// 		switch(e.tapIndex){
			// 			case 0:
			// 				this.organizationTypeText = '医美'
			// 				break;
			// 			case 1:
			// 				this.organizationTypeText = '生美'
			// 				break;
			// 		}
			// 	}
			// })
		},
		bindPickerChange2(e) {
			this.typtIndex = e.target.value
			this.firstClubType = e.target.value
		},
		radioChange(item) {
			this.secondClubType = item.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.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)
				}
			})
			console.log(list)
			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.customItemValue == '') {
				this.$util.msg('请输入自定义项目', 2000)
			} else {
				if (this.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) {
			//判断主营内容是否已存在
			for (var i in arr) {
				if (arr[i].name == content) {
					return true
				}
			}
			return false
		}
	},
	onShow() {
		this.$api.getStorage().then(resolve => {
			this.userIdentity = resolve.userIdentity
		})
		if (this.isPreviewImage) {
			this.isPreviewImage = false
			return
		}
	}
}
</script>

<style lang="scss">
.placeholder {
	color: #b2b2b2;
}
.register {
	width: 100%;
	height: auto;
	border-top: 1px solid #f7f7f7;
	.model-warp.none {
		display: none;
	}
	.model-warp.show {
		display: block;
	}
	.register-main {
		width: 100%;
		height: auto;
		&.detailed {
			padding-bottom: 300rpx;
		}
		.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 {
			height: auto;
			margin-bottom: 20rpx;
			&.none {
				margin-bottom: 0;
			}
			.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;
				}
			}
			.register-tip {
				width: 100%;
				box-sizing: border-box;
				padding: 0 24rpx;
				line-height: 44rpx;
				font-size: $font-size-20;
				color: #fea785;
				text-align: left;
			}
			.register-title {
				line-height: 80rpx;
				font-size: $font-size-30;
				color: $text-color;
				text-align: left;
				padding-left: 20rpx;
				background: #f7f7f7;
				font-weight: bold;
				.txt {
					font-size: $font-size-26;
					font-weight: normal;
				}
			}
			.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: 702rpx;
				height: 88rpx;
				margin: 0 24rpx;
				position: relative;
				border-bottom: 2rpx solid #e1e1e1;
				box-sizing: border-box;
				.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;
				}
				&.bordernone {
					border: none;
					height: auto;
				}
				&.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;
					&.none {
						color: #999999;
					}
					&.picker {
						text-align: left;
						color: #333333;
					}
				}
				&.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 {
					padding: 0 24rpx;
					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;
				margin: 0 24rpx;
				.label {
					color: #666666;
					font-size: $font-size-28;
					line-height: 88rpx;
				}
				.textarea {
					width: 654rpx;
					height: 200rpx;
					// background: #F7F7F7;
					padding: 24rpx;
					font-size: $font-size-28;
					color: $text-color;
					z-index: 1;
					border-radius: 6rpx;
					border: 2rpx solid #b2b2b2;
				}
				.adddress {
					height: 147rpx;
					border-bottom: 2rpx solid #e1e1e1;
					font-size: $font-size-28;
					color: $text-color;
					padding: 24rpx;
				}
				.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: #666666;
				line-height: 102rpx;
				// width: 150rpx;
				padding: 0 24rpx;
				// text-align: left;
				&.zz {
					width: 230rpx;
				}
			}
			.upload-picture {
				// float: left;
				height: 180rpx;
				width: 200rpx;
				.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);
}
</style>