caimei-applets-caimei/pages/login/register-supplier.vue

<template>
	<view class="container register" :style="{ paddingTop: CustomBar + 'px' }">
		<cu-custom :navbar-data="nvabarData" @navigateBack="hanldNavigateBack"></cu-custom>
		<view class="register-step">
			<view class="step-item" :class="stepIndex == 0 ? 'active' : ''">
				<text class="step-num">1</text><text>账户信息</text> <text class="line"></text>
			</view>
			<view class="step-item" :class="stepIndex == 1 ? 'active' : ''">
				<text class="step-num">2</text><text>基本信息</text> <text class="line"></text>
			</view>
			<view class="step-item" :class="stepIndex == 2 ? 'active' : ''">
				<text class="step-num">3</text><text>详细信息</text>
			</view>
		</view>
		<view class="register-main clearfix" v-if="stepIndex === 0">
			<view class="register-row clearfix">
				<view class="register-from">
					<view class="label">手机号:</view>
					<input
						class="row-input"
						type="number"
						name="input"
						v-model="firstParmas.bindMobile"
						placeholder="请输入联系人常用手机号"
						maxlength="11"
					/>
				</view>
			</view>
			<view class="register-row clearfix">
				<view class="register-from">
					<input
						type="text"
						v-model="imageCode"
						maxlength="4"
						class="row-input imgCode"
						placeholder="请输入右侧图形验证码"
					/>
					<view class="vscodeimg"> <image :src="imageCodeUrl" mode=""></image> </view>
					<view class="vscod-refresh" @click.stop="getVerificationCode">
						<text class="iconfont icon-shuaxin"></text> <text class="ref-text">刷新</text>
					</view>
				</view>
			</view>
			<view class="register-row clearfix">
				<view class="register-from">
					<view class="label">短信验证码:</view>
					<input
						class="row-input code"
						type="text"
						v-model="firstParmas.smsCode"
						placeholder="请输入短信验证码"
						maxlength="6"
					/>
					<view class="row-btn" :class="[isMobileDisabled ? 'disabled' : '']">
						<button
							class="row-input"
							type="button"
							@click.stop="getMobileCodeFn"
							:disabled="isMobileDisabled"
								>
					{{ mobileCodeText }}
						</button>
					</view>
				</view>
			</view>
			<view class="register-row clearfix">
				<view class="register-from">
					<view class="label">登录密码:</view>
					<input
						class="row-input"
						type="password"
						name="input"
						v-model="firstParmas.password"
						placeholder="密码必须为8-16位字母数字组合"
						maxlength="16"
					/>
				</view>
			</view>
			<view class="register-row clearfix">
				<view class="register-from">
					<view class="label">确认密码:</view>
					<input
						class="row-input"
						type="password"
						name="input"
						v-model="firstParmas.passWordConfirm"
						placeholder="请确认密码"
						maxlength="16"
					/>
				</view>
			</view>
			<view class="register-row ">
				<view class="register-btn" @click.stop="SupplierRegisteredFirst">下一步</view>
			</view>
		</view>
		<view class="register-main clearfix" v-if="stepIndex === 1">
			<view class="register-row none clearfix">
				<view class="register-from">
					<view class="label">公司名称:</view>
					<input
						class="row-input"
						type="text"
						name="input"
						v-model="twoParmas.name"
						placeholder="请输入您的公司名称"
						maxlength="30"
					/>
				</view>
			</view>
			<view class="register-row text clearfix"> <text>示例：华熙生物科技股份有限公司</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="twoParmas.linkMan"
						placeholder="请输入联系人姓名"
						maxlength="6"
					/>
				</view>
			</view>
			<view class="register-row none clearfix">
				<view class="register-from">
					<view class="label">邮箱:</view>
					<input
						class="row-input"
						type="text"
						name="input"
						v-model="twoParmas.email"
						placeholder="请输入邮箱地址"
						maxlength="30"
					/>
				</view>
			</view>
			<view class="register-row text clearfix"> <text>邮箱可用作登录账号，请使用公司邮箱或法人邮箱</text> </view>
			<view class="register-row ">
				<view class="register-btn next" @click.stop="SupplierRegisteredTwo">下一步</view>
				<view class="register-btn prev" @click.stop="setStep(0)">上一步</view>
			</view>
		</view>
		<view class="register-main clearfix" v-if="stepIndex === 2">
			<view class="register-row none clearfix">
				<view class="register-from">
					<view class="label">公司简称:</view>
					<input
						class="row-input"
						type="text"
						v-model="threeParmas.shortName"
						placeholder="请输入您的公司简称"
						maxlength="10"
					/>
				</view>
			</view>
			<view class="register-row text clearfix"> <text>示例：华熙生物</text> </view>
			<view class="register-row clearfix">
				<view class="register-from" @click="showMulLinkageThreePicker">
					<view class="label">联系地址:</view>
					<text class="row-input" :class="addressText === '请选择公司所在地区' ? 'none' : ''">
						{{ addressText }}
					</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">{{
					threeParmas.address ? threeParmas.address : '详细地址：如道路、门牌号、小区等'
				}}</view>
				<textarea
					v-else
					class="textarea"
					type="text"
					v-model="threeParmas.address"
					placeholder="详细地址：如道路、门牌号、小区等"
					placeholder-class="placeholder"
					maxlength="40"
					@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="threeParmas.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="threeParmas.businessLicense === ''"
							@click="chooseBusinessImage"
						>
							<text class="iconfont icon-jiahao"></text>
						</view>
						<view class="upload-image" v-else>
							<image :src="threeParmas.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-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 none clearfix" v-if="threeParmas.firstShopType == 1">
				<view class="register-from radio"> <view class="label">医疗类型:</view> </view>
			</view>
			<view class="register-row clearfix" v-if="threeParmas.firstShopType == 1">
				<view class="register-from radio">
					<radio-group @change="radioChange">
						<label class="row-input" v-for="(item, index) in supplierList" :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="threeParmas.secondShopType == 3">
				<view class="register-picture zz">
					<view class="label zz">医疗执业许可证</view>
					<view class="upload-picture">
						<view
							class="upload-none"
							v-if="threeParmas.medicalPracticeLicense === ''"
							@click="chooseMedicalImage"
						>
							<text class="iconfont icon-jiahao"></text>
						</view>
						<view class="upload-image" v-else>
							<image :src="threeParmas.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="threeParmas.firstShopType != 0">
				<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 supplierMedicaCampList"
								: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">
				<view class="register-from">
					<view class="label">网站地址:</view>
					<input
						class="row-input"
						type="text"
						v-model="threeParmas.website"
						placeholder="请输入公司网站地址"
						maxlength="100"
					/>
				</view>
			</view>
			<view class="register-row clearfix">
				<view class="register-from">
					<view class="label">微信公众号:</view>
					<input
						class="row-input"
						type="text"
						v-model="threeParmas.wxOfficialAccount"
						placeholder="请输入公司微信公众号"
						maxlength="20"
					/>
				</view>
			</view>
			<view class="register-row clearfix">
				<view class="register-from">
					<view class="label">微信小程序:</view>
					<input
						class="row-input"
						type="text"
						v-model="threeParmas.wxApplets"
						placeholder="请输入公司微信小程序名称"
						maxlength="20"
					/>
				</view>
			</view>
			<view class="register-row text-textarea clearfix">
				<view class="label">公司主打系列商品说明:</view>
				<textarea
					v-model="threeParmas.mainProductDesc"
					class="textarea"
					maxlength="5000"
					placeholder="请输入公司主打系列商品说明"
					placeholder-class="placeholder"
					name="textarea"
				/>
			</view>
			<view class="register-row text-textarea clearfix">
				<view class="label">公司介绍:</view>
				<textarea
					v-model="threeParmas.shopDesc"
					class="textarea"
					maxlength="5000"
					placeholder="请输入公司介绍"
					placeholder-class="placeholder"
					name="textarea"
				/>
			</view>
			<view class="register-main clearfix">
				<view class="register-agree">
					<view class="agree-text" @tap.stop="agreeCheck()">
						<button
							class="checkbox iconfont"
							:class="[isCheck ? 'icon-gouxuan' : 'icon-weigouxuan']"
						></button>
						我已阅读并同意
						<text @click.stop="this.$api.navigateTo('/pages/service/service?id=1035&title=供应商协议')"
							>《供应商协议》</text
						>
						<text @click.stop="this.$api.navigateTo('/pages/service/service?id=1023&title=用户协议')"
							>《用户协议》</text
						>及
						<text @click.stop="this.$api.navigateTo('/pages/service/service?id=1013&title=隐私权政策')"
							>《隐私权政策》</text
						>
					</view>
				</view>
				<view class="register-row ">
					<view class="register-btn sub" @click.stop="SupplierRegisteredThree">注册</view>
					<view class="register-btn prev" @click.stop="setStep(1)">上一步</view>
				</view>
			</view>
		</view>
		<mpvue-city-picker
			:themeColor="themeColor"
			ref="mpvueCityPicker"
			:pickerValueDefault="cityPickerValueDefault"
			@onCancel="onCancel"
			@onConfirm="onConfirm"
		>
		</mpvue-city-picker>
		<supplier-alert v-if="isSupplierAlert"></supplier-alert>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import authorize from '@/common/config/authorize.js'
import wxLogin from '@/common/config/wxLogin.js'
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
import supplierAlert from './components/supplierRegisreAlert.vue'
import { supplierList, supplierMedicaCampNullList } from '@/common/json/data.json.js' //本地数据
import { uploadFileImage } from '@/services/public.js'
export default {
	components: {
		mpvueCityPicker,
		supplierAlert
	},
	data() {
		return {
			nvabarData: {
				//顶部自定义导航
				showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
				showSearch: 0,
				title: '供应商注册', // 导航栏 中间的标题
				haveBack: true,
				textLeft: this.$store.state.isIphone
			},
			CustomBar: this.CustomBar, // 顶部导航栏高度
			isMobileDisabled: false, //手机验证码按钮控制
			mobilCount: '', //倒计时
			mobileCodeText: '获取验证码',
			mobilTime: null,
			imageCode: '', //图形验证码
			imageCodeUrl: '', //图形验证码图片
			imageCodetoken: '', //图形验证校验
			isAgreed: 0, //是否勾选协议
			isCheck: false, //是否勾选协议
			userID: '', //公司userID
			clubID: '', //公司ID
			stepIndex: 0,
			firstParmas: {
				bindMobile: '',
				smsCode: '',
				password: '',
				passWordConfirm: '',
				whichStep: 1
			},
			twoParmas: {
				linkMan: '',
				name: '',
				email: '',
				whichStep: 2
			},
			threeParmas: {
				address: '',
				shortName: '', //公司简称
				socialCreditCode: '', //统一社会信用代码
				businessLicense: '', //营业执照图片
				medicalPracticeLicense: '', //资质许可证书
				provinceId: '',
				cityId: '',
				townId: '',
				address: '',
				firstShopType: 0,
				secondShopType: '',
				mainProduct: '',
				isAgreed: 0,
				whichStep: 3,
				source: 1,
				website: '', //网站地址
				wxOfficialAccount: '', //微信公众号
				wxApplets: '', //微信小程序
				mainProductDesc: '', //公司主打商品说明
				shopDesc: '' //公司介绍
			},
			addressText: '请选择公司所在地区',
			isDisabled: true,
			isShowInput: true,
			textareaFocus: false,
			organizationTypeText: '请选择公司类型',
			supplierList: supplierList, //医疗类型
			supplierMedicaCampList: supplierMedicaCampNullList, //主营内容
			typtIndex: 0,
			organizationType: 0,
			current: 0,
			isShowAustomItem: false, //是否显示其他添加
			customItemValue: '', //自定义项目
			isMainproCheck: false,
			isSupplierAlert: true
		}
	},
	onLoad() {
		this.getVerificationCode()
	},
	computed: {
		...mapState(['isWxAuthorize'])
	},
	methods: {
		...mapMutations(['login']),
		hanldNavigateBack() {
			this.$util.modal('', '注册尚未完成，确定放弃注册吗？', '确定', '取消', true, () => {
				this.$api.switchTabTo('/pages/tabBar/home/index')
			})
		},
		// 三级联动选择
		showMulLinkageThreePicker() {
			this.isShowInput = true
			this.$refs.mpvueCityPicker.show()
		},
		getMobileCodeFn() {
			if (this.firstParmas.bindMobile == '') {
				this.$util.msg('请输入联系人常用手机号', 2000)
				return
			}
			if (!this.$reg.isMobile(this.firstParmas.bindMobile)) {
				this.$util.msg('请输入正确的手机号', 2000)
				return
			}
			if (this.imageCode == '') {
				this.$util.msg('请输入图形验证码', 2000)
				return
			}
			let params = {
				mobile: this.firstParmas.bindMobile,
				imgCode: this.imageCode,
				isCheckCaptcha: 0,
				token: this.imageCodetoken,
				activateCodeType: 3,
				platformType: 2
			}
			this.isMobileDisabled = true
			this.PublicService.GetRegisterMobileCode(params)
				.then(response => {
					this.$util.msg('验证短信已发送', 2000)
					const TIME_COUNT = 60
					if (!this.mobilTime) {
						this.mobilCount = TIME_COUNT
						this.isMobileDisabled = true
						this.mobilTime = setInterval(() => {
							if (this.mobilCount > 1 && this.mobilCount <= TIME_COUNT) {
								this.mobilCount--
								this.mobileCodeText = this.mobilCount + 's重新发送'
							} else {
								this.isMobileDisabled = false
								clearInterval(this.mobilTime)
								this.mobilTime = null
								this.mobileCodeText = '获取验证码'
							}
						}, 1000)
					}
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
					this.isMobileDisabled = false
				})
		},
		bindPickerChange() {
			let self = this
			uni.showActionSheet({
				title: '标题',
				itemList: ['医疗', '非医疗'],
				success: e => {
					self.threeParmas.firstShopType = e.tapIndex + 1
					switch (e.tapIndex) {
						case 0:
							this.organizationTypeText = '医疗'
							break
						case 1:
							this.organizationTypeText = '非医疗'
							break
					}
				}
			})
		},
		setStep(index) {
			this.stepIndex = index
		},
		SupplierRegisteredFirst() {
			//供应商注册第一步
			if (this.firstParmas.bindMobile == '') {
				this.$util.msg('请输入联系人常用手机号', 2000)
				return
			}
			if (!this.$reg.isMobile(this.firstParmas.bindMobile)) {
				this.$util.msg('请输入正确的手机号', 2000)
				return
			}
			if (this.firstParmas.smsCode == '') {
				this.$util.msg('请输入手机验证码', 2000)
				return
			}
			if (!this.$reg.isMobileCode(this.firstParmas.smsCode)) {
				this.$util.msg('验证码格式不正确', 2000)
				return
			}
			if (!this.$reg.checkPwd(this.firstParmas.password)) {
				uni.showToast({ title: '密码必须为8-16位字母数字的组合', duration: 2000, mask: true, icon: 'none' })
				return
			}
			if (this.firstParmas.passWordConfirm == '') {
				uni.showToast({ title: '请再次确认密码', duration: 2000, mask: true, icon: 'none' })
				return
			}
			if (this.firstParmas.passWordConfirm !== this.firstParmas.password) {
				uni.showToast({ title: '两次输入的密码不一致', duration: 2000, mask: true, icon: 'none' })
				return
			}
			this.UserService.SupplierAppletsRegistered(this.firstParmas)
				.then(response => {
					this.stepIndex = 1
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		SupplierRegisteredTwo() {
			//供应商注册第二步
			if (this.twoParmas.name == '') {
				this.$util.msg('请输入您的公司名称', 2000)
				return
			}
			if (this.twoParmas.linkMan == '') {
				this.$util.msg('请输入联系人名称', 2000)
				return
			}
			if (this.twoParmas.email == '') {
				this.$util.msg('请输入邮箱地址', 2000)
				return
			}
			if (!this.$reg.isEmail(this.twoParmas.email)) {
				this.$util.msg('请输入正确的邮箱地址', 2000)
				return
			}
			let postParmas = Object.assign(this.firstParmas, this.twoParmas)
			this.UserService.SupplierAppletsRegistered(postParmas)
				.then(response => {
					this.stepIndex = 2
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		SupplierRegisteredThree() {
			if (this.threeParmas.townId == '') {
				this.$util.msg('请选择公司地址', 2000)
				return
			}
			if (this.threeParmas.address == '') {
				this.$util.msg('请填写公司详细地址', 2000)
				return
			}
			if (this.threeParmas.socialCreditCode == '') {
				this.$util.msg('请填写统一社会信用代码', 2000)
				return
			}
			if (!this.threeParmas.businessLicense) {
				this.$util.msg('请上传您的营业执照', 2000)
				return
			}
			if (this.threeParmas.firstShopType == 0) {
				this.$util.msg('请选择公司类型', 2000)
				return
			}
			if (this.threeParmas.secondShopType == 3) {
				if (this.threeParmas.medicalPracticeLicense == '') {
					this.$util.msg('请上传医疗许可证书', 2000)
					return
				}
			}
			if (this.threeParmas.mainProduct == '') {
				this.$util.msg('请选择主营内容', 2000)
				return
			}
			if (this.threeParmas.website) {
				if (!this.$reg.isWebsite(this.threeParmas.website)) {
					this.$util.msg('请输入正确的网站地址', 2000)
					return
				}
			}
			if (this.threeParmas.isAgreed == 0) {
				this.$util.msg('请勾选同意协议', 2000)
				return
			}
			let mainproList = []
			this.supplierMedicaCampList.forEach(item => {
				mainproList.push(item.name)
			})
			this.threeParmas.mainProduct = mainproList.join('/')
			let postParmas = Object.assign(this.firstParmas, this.twoParmas, this.threeParmas)
			this.UserService.SupplierAppletsRegistered(postParmas)
				.then(response => {
					this.$util.modal(
						'',
						'您的资料已提交成功，系统将在1-2个工作日内进行审核~',
						'知道了',
						'',
						false,
						() => {
							this.$api.switchTabTo('/pages/tabBar/home/index')
						}
					)
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		chooseBusinessImage() {
			//营业执照图片上传
			uploadFileImage().then(res => {
				this.threeParmas.businessLicense = JSON.parse(res.data).data
			})
		},
		chooseMedicalImage() {
			//资质照图片上传
			uploadFileImage().then(res => {
				this.threeParmas.medicalPracticeLicense = JSON.parse(res.data).data
			})
		},
		viewBusinessImage(e) {
			this.myPreviewImageFn(this.threeParmas.businessLicense)
		},
		viewBusinessImage(e) {
			this.myPreviewImageFn(this.threeParmas.medicalPracticeLicense)
		},
		myPreviewImageFn(url) {
			this.isPreviewImage = true
			let mentuzArray = []
			mentuzArray.push(url)
			uni.previewImage({
				urls: mentuzArray,
				current: 0
			})
		},
		delBusinessImage() {
			this.$util.modal('', '确定删除营业执照图片吗？', '确定', '取消', true, () => {
				this.threeParmas.businessLicense = ''
			})
		},
		delMedicalImage() {
			this.$util.modal('', '确定删除资质图片吗？', '确定', '取消', true, () => {
				this.threeParmas.medicalPracticeLicense = ''
			})
		},
		radioChange(e) {
			this.threeParmas.secondShopType = e.target.value
		},
		chooseMaleLike(e) {
			this.isMainproCheck = true
			this.threeParmas.mainProduct = this.checkLikes(e, this.supplierMedicaCampList)
		},
		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('/')
		},
		getVerificationCode() {
			//图形验证
			this.PublicService.GetImgVerifyCode().then(res => {
				this.imageCodeUrl = res.data.baseImage
				this.imageCodetoken = res.data.token
			})
		},
		showAustomItem() {
			this.isShowAustomItem = !this.isShowAustomItem
		},
		showTextareaFocus() {
			//文本框获取焦点
			this.isShowInput = false
			this.textareaFocus = true
		},
		hideTextareaFocus() {
			//文本框失去焦点
			this.isShowInput = true
			this.textareaFocus = false
		},
		onConfirm(e) {
			this.addressText = e.name
			this.threeParmas.townId = e.townCode
			this.threeParmas.cityId = e.cityCode
			this.threeParmas.provinceId = e.provinceCode
		},
		onTextareaInput(e) {
			this.threeParmas.address = e.detail.value
		},
		onBlurInput(e) {
			//
			if (e.detail.value === '') {
				this.isDisabled = true
			} else {
				this.isDisabled = false
			}
		},
		addCustomItem() {
			if (this.customItemValue == '') {
				this.$util.msg('请输入自定义主营内容', 2000)
			} else {
				let item = {
					value: `${this.supplierMedicaCampList.length + 1}`,
					name: this.customItemValue,
					checked: true
				}
				if (this.checkedArray(this.customItemValue, this.supplierMedicaCampList)) {
					this.$util.msg('主营内容已存在!', 2000)
				} else {
					this.supplierMedicaCampList.push(item)
				}
			}
		},
		checkedArray(content, arr) {
			//判断主营内容是否已存在
			for (var i in arr) {
				if (arr[i].name == content) {
					return true
				}
			}
			return false
		},
		agreeCheck() {
			this.isCheck = !this.isCheck
			if (this.isCheck) {
				this.threeParmas.isAgreed = 1
			} else {
				this.threeParmas.isAgreed = 0
			}
		}
	},
	onShow() {
		wxLogin.wxLoginQuick()
	}
}
</script>

<style lang="scss">
.register {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	.register-step {
		margin: 80rpx 0;
		width: 100%;
		height: 44rpx;
		box-sizing: border-box;
		padding: 0 90rpx;
		.step-item {
			line-height: 44rpx;
			color: #b2b2b2;
			font-size: $font-size-24;
			float: left;
			margin-right: 60rpx;
			position: relative;
			&.active {
				color: $color-system;
				.step-num {
					background-color: $color-system;
				}
				.line {
					background-color: $color-system;
				}
			}
			&:last-child {
				margin-right: 0;
			}
			.step-num {
				display: inline-block;
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				background-color: #e1e1e1;
				color: #ffffff;
				line-height: 40rpx;
				text-align: center;
				margin-right: 10rpx;
			}
			.line {
				width: 60rpx;
				height: 2rpx;
				background-color: #b2b2b2;
				position: absolute;
				right: -60rpx;
				top: 50%;
			}
		}
	}
	.register-main {
		width: 100%;
		height: auto;
		position: relative;
		.register-consult {
			width: 110rpx;
			height: 68rpx;
			background: linear-gradient(223deg, rgba(225, 86, 21, 0.6) 0%, rgba(225, 86, 10, 0.3) 100%);
			border-radius: 34rpx 0 0 34rpx;
			position: absolute;
			right: 0;
			bottom: 120rpx;
			text-align: left;
			line-height: 68rpx;
			padding-left: 20rpx;
			.icon-kefunv {
				font-size: 48rpx;
				color: #31313b;
				float: left;
			}
			.text {
				font-size: $font-size-24;
				display: block;
				float: left;
				width: 60rpx;
				line-height: 30rpx;
				color: #ffffff;
				margin-top: 6rpx;
			}
		}
		.register-agree {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 100rpx 0 20rpx 0;
			.agree-text {
				.checkbox {
					float: left;
					margin: 4rpx 6rpx 0 0;
					color: #999999;
					font-size: $font-size-34;
					&.icon-gouxuan {
						color: $color-system;
					}
				}
				font-size: $font-size-22;
				line-height: 44rpx;
				color: #999999;
				text {
					color: #1890f9;
				}
			}
		}
		.register-logo {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			height: 189rpx;
			padding: 60rpx 0 40rpx 0;
			.logo {
				width: 467rpx;
				height: 189rpx;
				display: block;
			}
		}
		&.detailed {
			padding-bottom: 330rpx;
		}
		.register-row {
			width: 100%;
			height: auto;
			padding: 0 24rpx;
			margin-bottom: 30rpx;
			box-sizing: border-box;
			&.text {
				font-size: $font-size-20;
				line-height: 40rpx;
				color: #fea785;
			}
			&.none {
				margin-bottom: 0;
			}
			&.login {
				display: flex;
			}
			.register-text {
				line-height: 44rpx;
				margin-top: 100rpx;
				font-size: $font-size-24;
				color: #999999;
				text-align: justify;
				.txt {
					margin-right: 15rpx;
				}
			}
			.register-title {
				line-height: 44rpx;
				font-size: $font-size-24;
				color: $text-color;
				text-align: left;
				&.first {
					margin-top: 20rpx;
				}
			}
			.register-tip {
				line-height: 64rpx;
				font-size: $font-size-24;
				color: #cecece;
				text-align: left;
			}
			.register-from {
				width: 100%;
				height: 80rpx;
				background: #ffffff;
				position: relative;
				border-bottom: 1px solid #e1e1e1;
				.label {
					text-align: left;
					font-size: $font-size-28;
					color: #666666;
					line-height: 80rpx;
					float: left;
				}
				.row-input {
					width: 440rpx;
					padding-left: 10rpx;
					font-size: $font-size-28;
					color: $text-color;
					line-height: 80rpx;
					float: left;
					height: 80rpx;
					&.none {
						color: #999999;
					}
					&.picker {
						text-align: left;
						color: #333333;
					}
					&.keshi {
						width: 550rpx;
					}
					&.code {
						width: 350rpx;
					}
					&.imgCode {
						width: 390rpx;
					}
				}
				.vscodeimg {
					width: 160rpx;
					height: 80;
					float: left;
					display: flex;
					flex-direction: column;
					align-items: center;
					border-radius: 6rpx;
					margin: 0 10rpx;
					image {
						width: 150rpx;
						height: 68rpx;
						border-radius: 6rpx;
					}
				}
				.vscod-refresh {
					width: 120rpx;
					float: right;
					line-height: 80rpx;
					.ref-text {
						float: left;
						font-size: 26rpx;
						color: #999999;
					}
					.icon-shuaxin {
						float: left;
						font-size: 36rpx;
						color: #999999;
						margin-right: 10rpx;
					}
				}
				&.imgcode {
					width: 410rpx;
					float: left;
					margin-right: 20rpx;
					.row-input {
						width: 230rpx;
					}
				}
				.row-btn {
					width: 180rpx;
					height: 64rpx;
					float: left;
					background: $btn-confirm;
					padding: 0;
					border-radius: 32rpx;
					.row-input {
						width: 180rpx;
						height: 64rpx;
						line-height: 64rpx;
						padding: 0;
						color: #ffffff;
						background: $btn-confirm;
						text-align: center;
						border-radius: 32rpx;
						font-size: $font-size-24;
						&.other {
							width: 180rpx;
							background: #f7f7f7;
							margin-right: 20rpx;
						}
						&.none {
							background: #f7f7f7;
						}
					}
					&.disabled {
						background: #f7f7f7;
						.row-input {
							background: #f7f7f7;
							color: #999999;
						}
					}
				}
				&.picker {
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					.label {
						line-height: 80rpx;
					}
					.row-input {
						width: 470rpx;
						height: 80rpx;
						line-height: 80rpx;
						padding-left: 30rpx;
					}
				}
				&.radio {
					width: 100%;
					border-bottom: none;
					.row-input {
						width: 25%;
						height: 80rpx;
						line-height: 80rpx;
						padding-left: 0;
					}
					.row-radio {
						float: left;
						transform: scale(0.8);
					}
					.row-text {
						text-align: center;
						float: left;
						font-size: $font-size-24;
					}
				}
				&.group {
					width: 100%;
					height: auto;
					background: #ffffff;
					margin-top: 30rpx;
					border-bottom: none;
					.label {
						line-height: 76rpx;
					}
					.row-input {
						width: 100%;
						height: 80rpx;
						line-height: 80rpx;
						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: 330rpx;
						box-sizing: border-box;
						height: 64rpx;
						padding: 0 24rpx;
						text-align: left;
						border-radius: 32rpx;
						font-size: $font-size-28;
						color: $text-color;
						border: 1px solid #b2b2b2;
						line-height: 64rpx;
					}
					.confirm-btn {
						width: 200rpx;
						height: 64rpx;
						border-radius: 32rpx;
						line-height: 64rpx;
						text-align: center;
						&.other {
							width: 213rpx;
						}
						&.none {
							color: $color-system;
							background: #ffe6dc;
						}
						&.disabled {
							color: #999999;
						}
					}
					.item {
						width: 155rpx;
						height: 60rpx;
						font-size: $font-size-28;
						line-height: 60rpx;
						border-radius: 30rpx;
						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;
					}
				}
			}
			.row-login {
				flex: 1;
				font-size: $font-size-28;
				color: $text-color;
				text-align: left;
			}
			.row-logincode {
				flex: 1;
				font-size: $font-size-28;
				color: $text-color;
				text-align: right;
			}
			.icon-xiayibu {
				width: 80rpx;
				height: 80rpx;
				position: absolute;
				right: 0;
				top: 0;
				line-height: 80rpx;
				text-align: center;
			}
			&.text-textarea {
				background: #ffffff;
				.textarea {
					width: 100%;
					min-height: 280rpx;
					padding: 24rpx 0;
					box-sizing: border-box;
					font-size: $font-size-28;
					color: $text-color;
					z-index: 1;
					border-bottom: 1px solid #e1e1e1;
				}
				.label {
					text-align: left;
					font-size: $font-size-28;
					color: #666666;
					line-height: 48rpx;
					float: left;
				}
				.textarea.hide {
					opacity: 0;
				}
				.textarea.show {
					color: #999999;
				}
			}
		}
		.register-picture {
			height: 180rpx;
			margin: 30rpx 0;
			float: left;
			&.zz {
				width: 100%;
			}
			.label {
				float: left;
				font-size: $font-size-28;
				color: #666666;
				line-height: 180rpx;
				width: 150rpx;
				text-align: left;
				&.zz {
					width: 200rpx;
				}
			}
			.upload-picture {
				float: left;
				height: 180rpx;
				.upload-none {
					width: 180rpx;
					height: 180rpx;
					text-align: center;
					line-height: 180rpx;
					color: #999999;
					border: 1px solid #999999;
					border-radius: 10rpx;
					margin: 0 20rpx;
					.iconfont {
						font-size: 60rpx;
					}
				}
				.upload-image {
					width: 180rpx;
					height: 180rpx;
					border-radius: 6rpx;
					margin: 0 20rpx;
					position: relative;
					image {
						width: 180rpx;
						height: 180rpx;
						border-radius: 6rpx;
					}
					.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;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 999;
			background: #ffffff;
		}
		.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;
			&.prev {
				background: #ffe6dc;
				color: $color-system;
				margin-top: 20rpx;
			}
			&.none {
				border: 1px solid $color-system;
				background: #ffffff;
				color: $color-system;
				margin-top: 0;
			}
			&.sub {
				margin-top: 0;
			}
		}
	}
}
</style>