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

<template>
	<view class="container register" :style="{ paddingTop: CustomBar + 'px' }">
		<cu-custom :navbar-data="nvabarData" @navigateBack="modal = true"></cu-custom>
		<view class="register-tabs">
			<view class="tabs-item" :class="stepNum === 0 ? 'active' : '' ">
				<text class="iconfont icon-1_round_solid"></text>
				<text>账户信息</text>
			</view>
			<view class="tabs-item line">
				<text class="iconfont icon-hr"></text>
			</view>	
			<view class="tabs-item" :class="stepNum === 1 ? 'active' : '' ">
				<text class="iconfont icon-2_round_solid"></text>
				<text>机构信息</text>
			</view>
		</view>
		<view class="register-main clearfix" v-if="stepNum  === 0">
			<view class="register-row clearfix">
				<view class="register-from">
					<view class="label">手机号:</view>
					<input
						class="row-input"
						type="number"
						name="input"
						v-model="params.bindMobile"
						placeholder="请输入手机号"
						maxlength="11"
					/>
				</view>
			</view>
			<view class="register-row clearfix">
				<view class="register-from">
					<view class="label">短信验证码:</view>
					<input
						class="row-input code"
						type="text"
						v-model="params.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="params.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="params.passWordConfirm"
						placeholder="请确认密码"
						maxlength="16"
					/>
				</view>
			</view>
			<view class="register-main clearfix" style="margin-top: 180rpx;">
				<view class="register-row ">
					<view class="register-btn sub" @click.stop="handleCheckRegist">下一步</view>
				</view>
			</view>
		</view>
		<view class="register-main clearfix" v-if="stepNum  === 1">
			<view class="register-row clearfix">
				<view class="register-from">
					<view class="label"><text>*</text>联系人</view>
					<input
						class="row-input"
						type="text"
						v-model="params.linkMan"
						placeholder="请输入联系姓名"
						placeholder-class="placeholder"
						maxlength="6"
					/>
				</view>
			</view>
			<view class="register-row clearfix">
				<view class="register-from">
					<view class="label"><text>*</text>机构名称</view>
					<input
						class="row-input"
						type="text"
						v-model="params.name"
						placeholder="请输入您的机构名称"
						placeholder-class="placeholder"
						maxlength="30"
					/>
				</view>
			</view>
			<view class="register-row clearfix">
				<view class="register-from" @click="showMulLinkageThreePicker">
					<view class="label"><text>*</text>机构地址</view>
					<text class="row-input" :class="handleAddress === '请选择机构所在地区' ? 'none' : ''">
						{{ handleAddress }}
					</text>
					<text class="iconfont icon-xiangyou"></text>
				</view>
			</view>
			<view class="register-row text-textarea clearfix">
				<view
					class="textarea"
					v-if="isShowInput"
					placeholder-class="placeholder"
					@click="showTextareaFocus"
					>{{
						params.address ? params.address : '详细地址：如道路、门牌号、小区等'
					}}</view
				>
				<textarea
					v-else
					class="textarea"
					type="text"
					v-model="params.address"
					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"><text>*</text>营业执照编号</view>
					<input
						class="row-input"
						type="text"
						v-model="params.socialCreditCode"
						placeholder="请填写社会统一信用代码"
						placeholder-class="placeholder"
						maxlength="18"
					/>
				</view>
			</view>
			<view class="register-row clearfix">
				<view class="register-picture">
					<view class="label"><text>*</text>营业执照</view>
					<view class="upload-picture">
						<view class="upload-none" v-if="!params.businessLicense" @click="uploadFileImage(1)">
							<text class="iconfont icon-shangchuantupian"></text>
							<text>选择图片</text>
						</view>
						<view class="upload-image" v-else>
							<image :src="params.businessLicense" mode="" @click="handleViewImage(params.businessLicense)"></image>
							<view class="upload-del" @click="handleDelete(1)">
								<text class="iconfont icon-shanchu"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="register-row clearfix">
				<view class="register-picture">
					<view class="label"><text>*</text>门头照</view>
					<view class="upload-picture">
						<view class="upload-none"  v-if="!params.shopPhoto" @click="uploadFileImage(2)">
							<text class="iconfont icon-shangchuantupian"></text>
							<text>选择图片</text>
						</view>
						<view class="upload-image" v-else>
							<image :src="params.shopPhoto" mode="" @click="handleViewImage(params.shopPhoto)"></image>
							<view class="upload-del" @click="handleDelete(2)">
								<text class="iconfont icon-shanchu"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="register-row clearfix">
				<view class="register-picture">
					<view class="label"><text>*</text>医疗执业许可证</view>
					<view class="upload-picture">
						<view class="upload-none" v-if="!params.medicalPracticeLicense"  @click="uploadFileImage(3)">
							<text class="iconfont icon-shangchuantupian"></text>
							<text>选择图片</text>
						</view>
						<view class="upload-image" v-else>
							<image :src="params.medicalPracticeLicense" mode="" @click="handleViewImage(params.medicalPracticeLicense)"></image>
							<view class="upload-del" @click="handleDelete(3)">
								<text class="iconfont icon-shanchu"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="register-row ">
				<view class="register-btn sub" @click.stop="handleStep(0)">上一步</view>
				<view class="register-btn sub" @click.stop="handleConfirm">提交审核</view>
			</view>
		</view>	
		<!-- 地址  -->
		<mpvue-city-picker
			:themeColor="themeColor"
			ref="mpvueCityPicker"
			:pickerValueDefault="cityPickerValueDefault"
			@onCancel="onCancel"
			@onConfirm="onConfirm"
		>
		</mpvue-city-picker>
		<!-- 提交审核提示弹窗 -->
		<tui-modal :show="modal1" @cancel="modal1 = false" :custom="true" fadeIn >
			<view class="tui-modal-custom">
				<view class="tui-prompt-title">提交成功！</view>
				<view class="tui-modal-custom-text">您的资料将会在1-3个工作日内进行审核，审核通过后才能进行采购。</view>
				<view class="tui-button-custom" @click="handleClick1"> 确定 </view>
			</view>
		</tui-modal>
		<!-- 弹窗提示 -->
		<tui-modal
			:show="modal"
			@click="handleClick"
			@cancel="modal = false"
			:content="'注册尚未完成，确定放弃注册吗？'"
			:button="modalButton"
			color="#333"
			:size="32"
			shape="circle"
			:maskClosable="false"
		>
		</tui-modal>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import wxLogin from '@/common/config/wxLogin.js'
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
import { uploadFileImage } from '@/services/public.js'
export default {
	components: {
		mpvueCityPicker
	},
	data() {
		return {
			CustomBar: this.CustomBar, // 顶部导航栏高度
			nvabarData: {
				//顶部自定义导航
				showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
				showSearch: 0,
				title: '机构注册', // 导航栏 中间的标题
				haveBack: true,
				textLeft: this.$store.state.isIphone
			},
			isPreviewImage: false, // 预览图片开关
			modal1:false, // 提交弹窗控制
			modal:false,
			modalButton: [
				{
					text: '取消',
					type: 'gray',
					plain: true //是否空心
				},
				{
					text: '确认',
					customStyle: {
						color: '#fff',
						bgColor: '#F3B574'
					},
					plain: false
				}
			],
			stepNum:0,
			textareaFocus: false,
			isMobileDisabled: false, //手机验证码按钮控制
			mobilCount: '', //倒计时
			mobileCodeText: '获取验证码',
			mobilTime: null,
			params: {
				bindMobile: '',
				password: '',
				passWordConfirm: '',
				smsCode: '',
				avatarUrl: '',
				nickName: '',
				unionId: '',
				name:'',
				provinceId: '',
				cityId: '',
				townId:'',
				address: '',
				organizeType:1, //外部商城机构类型 0内部机构 1外部机构
				shopPhoto:'',
				businessLicense:'',
				medicalPracticeLicense:'',
			},
			codeParams:{
				mobile: '',
				isCheckCaptcha: 1,
				activateCodeType: 8,
				platformType: 2
			},
			handleAddress:'请选择机构所在地区',
			isCheckedCode:false
		}
	},
	onLoad(option) {},
	computed: {
		...mapState(['isWxAuthorize'])
	},
	methods: {
		...mapMutations(['login', 'wxLogin']),
		// 切换
		handleStep(step) {
			this.stepNum = step
		},
		async handleCheckRegist(){
			if(this.isCheckedCode){
				this.stepNum = 1
			}else{
				try{
					this.handleCheck()
					await this.UserService.checkRegisterClub(this.params)
					this.isCheckedCode = true
					this.stepNum = 1
				}catch(error){
					this.$util.msg(error.msg, 2000)
				}
			}
		},
		handleCheck() {
			if (this.params.bindMobile == '') {
				this.$util.msg('请输入手机号', 2000)
				return
			}
			if (!this.$reg.isMobile(this.params.bindMobile)) {
				this.$util.msg('手机格式不正确', 2000)
				return
			}
			if (this.params.smsCode == '') {
				this.$util.msg('请输入手机验证码', 2000)
				return
			}
			if (!this.$reg.isMobileCode(this.params.smsCode)) {
				this.$util.msg('验证码格式不正确', 2000)
				return
			}
			if (this.params.password == '') {
				this.$util.msg('请输入密码', 2000)
				return
			}
			if (!this.$reg.checkPwd(this.params.password)) {
				this.$util.msg('密码必须为8-16位字母数字的组合', 2000)
				return
			}
			if (this.params.passWordConfirm == '') {
				this.$util.msg('请再次确认密码', 2000)
				return
			}
			if (this.params.passWordConfirm !== this.params.password) {
				this.$util.msg('两次输入的密码不一致', 2000)
				return
			}
			
		},
		handleConfirm(){
			// 提交审核
			if (this.params.name == '') {
				this.$util.msg('请输入机构名称', 2000)
				return
			}
			if (this.params.townId == '') {
				this.$util.msg('请选择机构地址', 2000)
				return
			}
			if (this.params.addressDetail == '') {
				this.$util.msg('请填写机构详细地址', 2000)
				return
			}
			if (this.params.businessLicense == '') {
				this.$util.msg('请上传营业执照', 2000)
				return
			}	
			if (this.params.shopPhoto == '') {
				this.$util.msg('请上传门头照', 2000)
				return
			}
			if (this.params.medicalPracticeLicense == '') {
				this.$util.msg('请上传医疗执业许可证', 2000)
				return
			}
			this.params.unionId = uni.getStorageSync('unionId')
			this.userProfile()
		},
		userProfile() {
			//获取用户微信个人信息
			const self = this
			wx.getUserProfile({
				desc: '采美采购商城小程序获取您的信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
				success(res) {
					console.log('微信获取用户信息新API', res)
					self.wxLogin(res.userInfo)
					self.params.nickName = res.userInfo.nickName
					self.params.avatarUrl = res.userInfo.avatarUrl
					self.userAccountRegister(self.params)
				},
				fail() {
					self.$util.msg('授权失败', 2000)
				}
			})
		},
		async userAccountRegister(params) {
			// 注册
			try{
				await this.UserService.userAccountRegister(params)
				this.modal1 = true
			}catch(error){
				this.$util.msg(error.msg, 2000)
			}
		},
		storeUpdataeStatus(data) {
			uni.setStorageSync('token', data.token)
			this.$store.commit('updateStatus', data)
			this.login(data)
		},
		getMobileCodeFn() {
			// 点击获取短信验证码
			if (this.params.bindMobile == '') {
				this.$util.msg('请输入手机号', 2000)
				return
			}
			if (!this.$reg.isMobile(this.params.bindMobile)) {
				this.$util.msg('请输入正确的手机号', 2000)
				return
			}
			this.codeParams.mobile = this.params.bindMobile
			this.getMobileCode(this.codeParams)
		},
		async getMobileCode(params){
			//获取短信
			try{
				this.isMobileDisabled = true
				await this.PublicService.GetRegisterMobileCode(params)
				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
			}
		},
		// 三级联动选择
		showMulLinkageThreePicker() {
			this.isShowInput = true
			this.$refs.mpvueCityPicker.show()
		},
		onConfirm(e) {
			this.handleAddress = e.name
			this.params.townId = e.townCode
			this.params.cityId = e.cityCode
			this.params.provinceId = e.provinceCode
		},
		onTextareaInput(e) {
			//文本框获取焦点
			this.params.address = e.detail.value
		},
		showTextareaFocus() {
			//文本框获取焦点
			this.isShowInput = false
			this.textareaFocus = true
		},
		hideTextareaFocus() {
			//文本框失去焦点
			this.isShowInput = true
			this.textareaFocus = false
		},
		//上传
		async uploadFileImage(type){
			try{
				const res = await uploadFileImage()
				const data = JSON.parse(res.data).data
				switch (type){
					case 1:
						this.params.businessLicense = data
						break;
					case 2:
						this.params.shopPhoto = data
						break;
					case 3:
						this.params.medicalPracticeLicense = data
						break;
				}
			}catch(error){
				console.log('error',error)
			}
			
		},
		//预览
		handleViewImage(url) {
			this.isPreviewImage = true
			let mentuzArray = []
			mentuzArray.push(url)
			uni.previewImage({
				urls: mentuzArray,
				current: 0
			})
			
		},
		//删除
		handleDelete(type){
			switch (type){
				case 1:
					this.$util.modal('', '确定删除营业执照图片吗？', '确定', '取消', true, () => {
						this.params.businessLicense = ''
					})
					break;
				case 2:
					this.$util.modal('', '确定删除门头照图片吗？', '确定', '取消', true, () => {
						this.params.shopPhoto = ''
					})
					break;
				case 3:
					this.$util.modal('', '确定删除资质图片吗？', '确定', '取消', true, () => {
						this.params.medicalPracticeLicense = ''
					})
					break;
			}
		},
		handleClick(e) {
			//确认
			if (e.index == 1) {
				uni.navigateBack()
			}
			this.modal = false
		},
		handleClick1(){
			wxLogin.wxLoginAuthorize()
			setTimeout(()=>{
				this.$api.switchTabTo('/pages/tabBar/user/user')
			},1000)
		}
	},
	onShow() {
		if (this.isPreviewImage) {
			this.isPreviewImage = false
			return
		}
	}
}
</script>

<style lang="scss">
.register {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	background-size: contain;
	.register-tabs{
		width: 100%;
		height: 40rpx;
		box-sizing: border-box;
		padding:0 160rpx;
		margin: 110rpx 0 40rpx 0;
		.tabs-item{
			float: left;
			line-height: 40rpx;
			font-size: $font-size-30;
			color: #B2B2B2;
			.iconfont{
				font-size: 40rpx;
			}
			&.active{
				color: $color-system;
			}
			&.line{
				width: 50rpx;
				height: 40rpx;
				margin: 0 20rpx;
				.iconfont{
					font-size: 58rpx;
				}
			}
		}
	}
	.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;
			}
		}
		&.detailed {
			padding-bottom: 330rpx;
		}
		.register-row {
			width: 100%;
			height: auto;
			padding: 0 24rpx;
			margin-bottom: 30rpx;
			box-sizing: border-box;
			&.none {
				margin-bottom: 0;
			}
			.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;
					text{
						color: #F85050;
					}
				}
				.row-input {
					width: 440rpx;
					padding-left: 24rpx;
					font-size: $font-size-28;
					color: $text-color;
					line-height: 80rpx;
					float: left;
					height: 80rpx;
					box-sizing: border-box;
					&.none {
						color: #999999;
					}
					&.code {
						width: 330rpx;
					}
				}
				.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: 24rpx;
						&.none {
							background: #f7f7f7;
						}
					}
					&.disabled {
						background: #f7f7f7;
						.row-input {
							background: #f7f7f7;
							color: #999999;
							font-size: 24rpx;
						}
					}
				}
				&.btn {
					margin-top: 0;
				}
			}
			.icon-xiangyou {
				width: 88rpx;
				height: 88rpx;
				position: absolute;
				right: 0;
				top: 0;
				line-height: 88rpx;
				text-align: center;
			}
			&.text-textarea {
				background: #ffffff;
				.textarea {
					width: 100%;
					height: 120rpx;
					padding:24rpx 0 ;
					font-size: $font-size-28;
					color: $text-color;
					z-index: 1;
					border-bottom: 1px solid #e1e1e1;
				}
				.textarea.hide {
					opacity: 0;
				}
				.textarea.show {
					color: #999999;
				}
			}
		}
		.register-picture {
			width: 100%;
			height: auto;
			float: left;
			.label {
				float: left;
				font-size: $font-size-28;
				color: $text-color;
				line-height: 80rpx;
				width: 100%;
				text-align: left;
				text{
					color: #F85050;
				}
			}
			.upload-picture {
				float: left;
				height: auto;
				.upload-none {
					width: 210rpx;
					height: 210rpx;
					border: 1px dashed #B2B2B2;
					border-radius: 10rpx;
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;
					font-size: $font-size-28;
					color: #B2B2B2;
					line-height: 50rpx;
					.iconfont {
						font-size: $font-size-28;
					}
				}
				.upload-image {
					width: 210rpx;
					height: 210rpx;
					border-radius: 10rpx;
					margin: 0 20rpx;
					position: relative;
					image {
						width: 210rpx;
						height: 210rpx;
						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-40;
							color: #F85050;
						}
					}
				}
			}
		}
		.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-btn {
			width: 100%;
			height: 88rpx;
			border-radius: 44rpx;
			font-size: $font-size-28;
			line-height: 88rpx;
			color: #ffffff;
			margin: 40rpx auto;
			text-align: center;
			background: $btn-confirm;
			&.none {
				border: 1px solid $color-system;
				background: #ffffff;
				color: $color-system;
				margin-top: 0;
			}
		}
	}
}
.tui-alert-box {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: fixed;
	left: 0;
	top: 0;
	opacity: 1;
	background: rgba(51, 51, 51, 0.5);
	z-index: 99999;
	.tui-alert-content {
		width: 580rpx;
		height: 324rpx;
		border-radius: 16rpx;
		background-color: #ffffff;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
		.tui-alert-main {
			width: 100%;
			height: 234rpx;
			box-sizing: border-box;
			padding: 60rpx 30rpx;
			line-height: 60rpx;
			font-size: $font-size-26;
			color: #666666;
			text-align: justify;
			.red {
				color: #F3B574;
			}
		}
		.tui-alert-btn {
			width: 100%;
			height: 90rpx;
			box-sizing: border-box;
			line-height: 90rpx;
			background: $btn-confirm;
			color: #ffffff;
			text-align: center;
			font-size: $font-size-28;
			border-radius: 0 0 16rpx 16rpx;
		}
	}
}
.tui-modal-custom {
	text-align: center;
}

.tui-modal-custom-text {
	font-size: 30rpx;
	color: #333;
	padding: 30rpx 0 50rpx;
}

.tui-button-custom{
	width: 420rpx;
	height: 84rpx;
	line-height: 84rpx;
	text-align: center;
	color: #FFFFFF;
	background: $btn-confirm;
	font-size: $font-size-28;
	margin: 15rpx auto;
	border-radius: 42rpx;
}

.tui-prompt-title {
	padding-bottom: 20rpx;
	font-size: 34rpx;
}
</style>