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

<template>
	<view class="register" v-show="isRegisterShow">
		<template v-if="isInvalid">
			<view class="cart-content empty">
				<view  class="empty-container">
					<image class="empty-container-image" :src="productNoneImage" mode="aspectFit"></image>
					<text class="error-text">页面已失效~</text>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="register-main clearfix" v-if="isUserIdentity == 4">
				<view class="main-form-item">
					<view class="form-label">联系人</view>
					<view class="form-text"> {{ clubInfo.linkMan }} </view>
				</view>
				<view class="main-form-item">
					<view class="form-label">手机号</view>
					<view class="form-text">{{ clubInfo.bindMobile }}</view>
				</view>
				<view class="register-fiexd clearfix" :style="{paddingBottom:isIphoneX ? '68rpx':''}">
					<view class="register-agree">
						<view class="agree-text">
							提示：采美销售顾问已帮您填写好了注册信息，请确认信息是否正确。点击确认并登录按钮将为您自动生成账号进行登录，并绑定您的微信。
						</view>
					</view>
					<view class="register-row">
						<view class="register-btn sub" :class="isSubLoading ? 'disabled' : ''" @click.stop="SubmitRegister">确认并登录</view>
					</view>
				</view>
			</view>
			<view class="register-main clearfix" v-if="isUserIdentity == 2">
				<view class="main-form-item">
					<view class="form-label">联系人</view>
					<view class="form-text"> {{ clubInfo.linkMan }} </view>
				</view>
				<view class="main-form-item">
					<view class="form-label">手机号</view>
					<view class="form-text">{{ clubInfo.bindMobile }}</view>
				</view>
				<view class="main-form-item">
					<view class="form-label">邮箱</view>
					<view class="form-text">{{ clubInfo.contractEmail ? clubInfo.contractEmail : '' }}</view>
				</view>
				<view class="main-form-item">
					<view class="form-label">机构名称</view>
					<view class="form-text">{{ clubInfo.name }}</view>
				</view>
				<view class="main-form-item">
					<view class="form-label">机构简称</view>
					<view class="form-text">{{ clubInfo.shortName }}</view>
				</view>
				<view class="main-form-item">
					<view class="form-label">机构地址</view>
					<view class="form-input">{{ clubInfo.provincialAddress }}</view>		
				</view>
				<view class="main-form-item none">
					<view class="form-textarea">{{ clubInfo.address }}</view>		
				</view>
				<view class="main-form-item">
					<view class="form-label lang">营业执照编号</view>
					<view class="form-input lang">{{ clubInfo.socialCreditCode }}</view>		
				</view>
				<view class="main-form-item file">
					<view class="main-form-upload">
						<view class="label">营业执照</view>
						<view class="upload-picture">
							<view class="upload-image"><image :src="clubInfo.businessLicense" mode="" @click="ShowPreviewImage(1)"></image></view>
						</view>
					</view>
					<view class="main-form-upload">
						<view class="label">门头照</view>
						<view class="upload-picture">
							<view class="upload-image"><image :src="clubInfo.shopPhoto" mode=""  @click="ShowPreviewImage(2)"></image></view>
						</view>	
					</view>
				</view>	
				<view class="main-form-item">
					<view class="form-label">机构类型</view>
					<view class="form-text">
						{{ clubInfo.firstClubType | FirstFormat }}
						-
						{{ clubInfo.secondClubType | TwoFormat }}
					</view>
				</view>
				<view class="main-form-item file" v-if="clubInfo.firstClubType == 1">
					<view class="main-form-upload">
						<view class="label">资质</view>
						<view class="upload-picture">
							<view class="upload-image"><image :src="clubInfo.medicalPracticeLicense" mode=""  @click="ShowPreviewImage(2)"></image></view>
						</view>	
					</view>
				</view>	
				<view class="main-form-item" v-if="clubInfo.secondClubType == 2">
					<view class="form-label">科室</view>
					<view class="form-text">{{ clubInfo.department }}</view>
				</view>
				<view class="main-form-item none">
					<view class="form-label none">主营内容</view>
					<view class="form-checkbox-group">
						<view class="form-table-item" v-for="(item, index) in medicaCampList" :key="index">
							{{ item.name }}
						</view>
					</view>
				</view>
				<view class="register-fiexd clearfix" :style="{paddingBottom:isIphoneX ? '68rpx':''}">
					<view class="register-agree">
						<view class="agree-text">
							提示：采美销售顾问已帮您填写好了注册信息，请确认信息是否正确。点击确认并登录按钮将为您自动生成账号进行登录，并绑定您的微信。
						</view>
					</view>
					<view class="register-row">
						<view class="register-btn sub" :class="isSubLoading ? 'disabled' : ''" @click.stop="SubmitRegister">确认并登录</view>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	import { uploadFileImage } from '@/services/public.js'
	import authorize from '@/common/config/authorize.js'
	import wxLogin from '@/common/config/wxLogin.js'
	export default{
		data() {
			return{
				isRegisterShow:false,
				isUserIdentity:0,
				isIphoneX:this.$store.state.isIphone,
				bindId:0,
				medicaCampList:[],
				isInvalid:false,
				isSubLoading:false,
				productNoneImage:'https://static.caimei365.com/app/img/icon/icon-pnone.png',
				params:{
					userId:0,
					mobile:'',
					linkName:'',
					unionId:0,
					isCheckSmsCode:1,
					nickName:'',
					avatarUrl:'',
				},
				clubInfo:{
					linkMan:'',
					bindMobile:'',
					userId:0,
					isAgreed:1
				}
			}
		},
		filters: {
			
		},	
		onLoad(option) {
			console.log('option=========>',this.option)
			uni.setStorageSync('bind_id', option.bindId)
			this.bindId = Number(option.bindId)
			this.isUserIdentity = option.Identity
		},
		filters: {
			FirstFormat:function(type) {//处理金额
				let name=''
				switch(type){
					case 1: name = '医美'; break
					case 2: name = '生美'; break
					case 3: name = '项目公司'; break
					case 4: name = '个人'; break
					case 5: name = '其他'; break
				}	
				return name
			},
			TwoFormat:function(type) {//处理金额
				let text=''
				switch(type){
					case 1: text = '诊所'; break
					case 2: text = '门诊'; break
					case 3: text = '医院'; break
				}	
				return text
			},
		},	
		computed: {
			...mapState(['isWxAuthorize'])
		},
		methods:{
			...mapMutations(['login','logout','wxLogin']),
			async getWxAuthorize(){
				const wechatCode = await authorize.getCode('weixin')// 根据微信的code获取用户登录状态:1已登录过 -1未登录过
				const getUserInfo = await authorize.getUserInfo('weixin')
				this.UserService.UserLoginAuthApplets({ 
					code:wechatCode,
					encryptedData:getUserInfo.encryptedData,
					iv:getUserInfo.iv ,
				})
				.then(response =>{
					this.login(response.data)
					this.$store.commit('updateStatus',response.data)
					uni.setStorageSync('token',response.data.token)
					uni.setStorageSync('unionId',response.data.unionId)
					setTimeout(()=>{
						if(response.data.userIdentity === 1){
							this.$api.navigateTo('/pages/seller/index/index')
						}else if(response.data.userIdentity === 2 || response.data.userIdentity === 4){
							this.$api.switchTabTo('/pages/tabBar/user/user')
						}else if(response.data.userIdentity === 3){
							this.$api.navigateTo('/pages/supplier/index/index')
						}else{
							this.GetClubUserInfo()
							this.isRegisterShow= true
						}
					},1000)
				})
				.catch(error =>{
					this.logout()
					uni.setStorageSync('unionId',error.data.unionId)
					this.$store.commit('updateStatus',error.data)
					this.GetClubUserInfo()
					this.isRegisterShow = true
				})
			},	
			GetClubUserInfo(){//查询填写资料
				console.log('=========<查询填写资料>===========')
				console.log('bindId',this.bindId)
				this.UserService.UseRregisterTemporaryInfo({id:this.bindId})
				.then(response =>{
					this.clubInfo = response.data
					this.params.mobile = this.clubInfo.bindMobile
					this.params.linkName = this.clubInfo.linkMan
					console.log('params=========>',this.params)
					if(this.clubInfo.mainProduct){
						this.medicaCampList = this.ArrayFormat(this.clubInfo.mainProduct)
					}
				})
				.catch(error =>{
					this.isInvalid = true
				})
			},
			SubmitRegister(){//确认并登录绑定微信
				if(this.isSubLoading){ return }
				this.GetUserProfile()
			},
			GetUserProfile(){//获取微信用户信息
				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.params.unionId = uni.getStorageSync('unionId')
						self.SellerClubRegister()
					},
					fail() {
						self.isSubLoading = false
						self.$util.msg('授权失败', 2000)
					}
				})
			},
			SellerClubRegister(){//机构注册
				this.SellerService.SellerClubRegister(
					{
						id:this.bindId
					}
				)
				.then(response =>{
					this.params.userId = response.data
					setTimeout(()=>{
						this.BindingWechat(this.params)
					},1000)
				})
				.catch(error =>{
					this.$util.msg(error.msg,2000)
					
				})
			},
			BindingWechat(params){
				this.UserService.BindingWechat(params)
				.then(response =>{
					this.login(response.data)
					this.isSubLoading = false
					this.$api.switchTabTo('/pages/tabBar/home/index')
				})
				.catch(error =>{
					this.$util.msg(error.msg,2000)
					this.isSubLoading = false
					this.isUserInfo = true
				})	
			},
			ArrayFormat(Array) {//处理金额
				const newArray = []
				Array.split('/').forEach((item,index) =>{
					let _OBJ = {value:(index+1).toString(),name:item,checked:true}
					newArray.push(_OBJ)
				})
				return newArray
			}
		},
		onShow() {
			this.getWxAuthorize()
		}
	}
</script>

<style lang="scss">
	page{
		height: auto;
	}
	.register{
		width: 100%;
		position: relative;
		box-sizing: border-box;
		padding-bottom: 350rpx;
		.register-main{
			width: 100%;
			height: auto;
			box-sizing: border-box;
			padding: 0 24rpx;
			margin-top: 24rpx;
			.main-form-item{
				width: 100%;
				height: 88rpx;
				box-sizing: border-box;
				padding: 13rpx 0;
				border-bottom: 1px solid #e1e1e1;
				margin-top: 10rpx;
				position: relative;
				&.none{
					border-bottom: none;
					height: auto;
				}
				&.file{
					height: 273rpx;
					border-bottom: none;
					.main-form-upload{
						width: 50%;
						height: 100%;
						float: left;
						.label{
							width: 100%;
							float: left;
							height: 56rpx;
							line-height: 56rpx;
							font-size: $font-size-28;
							text-align: left;
							color: #999999;
						}
						.upload-picture{
							width: 100%;
							height: 180rpx;
							float: left;
							margin-top: 17rpx;
							.upload-none{
								width: 200rpx;
								height: 180rpx;
								border-radius: 6rpx;
								border:1px solid #e1e1e1;
								box-sizing: border-box;
								padding-top: 64rpx;
								.icon-jiahao{
									display: inline-block;
									width: 100%;
									text-align: center;
									line-height: 48rpx;
									font-size: 40rpx;
									color: #b2b2b2;
								}
								.upload-text{
									display: inline-block;
									width: 100%;
									text-align: center;
									line-height: 40rpx;
									font-size: $font-size-24;
									color: #b2b2b2;
								}
							}
							.upload-image{
								width: 200rpx;
								height: 180rpx;
								border-radius: 6rpx;
								border:1px solid #e1e1e1;
								box-sizing: border-box;
								position: relative;
								image{
									width: 200rpx;
									height: 180rpx;
									display: block;
								}
								.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;
									}
								}
							}
						}
					}
				}
				&.picker{
					border-bottom: none;
					.label-radio{
						margin-left: 30rpx;
						font-size: $font-size-28;
						float: left;
					}
					.row-radio{
						float: left;
						transform: scale(0.7);
					}
					.row-text{
						text-align: center;
						float: left;
						font-size: $font-size-28;
					}
					.picker-radio{
						box-sizing: border-box;
						padding-left: 180rpx;
						.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;
							}
						}	
					}
				}
				&.textarea{
					height: 142rpx;
					.textarea{
						width: 100%;
						height: 142rpx;
						box-sizing: border-box;
						font-size: $font-size-28;
						color: $text-color;
						z-index: 1;
					}
					.textarea.hide{
						opacity: 0;
					}
					.textarea.show{
						color: #999999;
					}
				}
				.textarea-ke{
					width: 100%;
					height: 160rpx;
					border-radius: 6rpx;
					border: 1px solid #e1e1e1;
					font-size: $font-size-28;
					box-sizing: border-box;
					padding: 15rpx 20rpx;
				}
				.form-textarea{
					font-size: $font-size-28;
					color: #333333;
				}
				.form-label{
					width: 148rpx;
					float: left;
					height: 100%;
					line-height: 56rpx;
					font-size: $font-size-28;
					text-align: left;
					color: #999999;
					&.lang{
						width: 188rpx;
					}
					&.none{
						width: 100%;
					}
				}
				.form-input{
					width: 554rpx;
					height: 56rpx;
					line-height: 56rpx;
					font-size: $font-size-28;
					text-align: left;
					color: #333333;
					float: left;
					&.lang{
						width: 514rpx;
					}
					&.phone{
						width: 418rpx;
					}
				}
				.form-text{
					width: 554rpx;
					height: 56rpx;
					line-height: 56rpx;
					font-size: $font-size-28;
					text-align: left;
					color: #333333;
					float: left;
				}
				.form-btn{
					width: 136rpx;
					height: 56rpx;
					background: $btn-confirm;
					color: #FFFFFF;
					font-size: $font-size-28;
					text-align: center;
					border-radius: 28rpx;
					line-height: 56rpx;
					float: left;
				}
				.icon-xiayibu{
					width: 80rpx;
					height: 80rpx;
					position: absolute;
					right: 0;
					top: 0;
					line-height: 80rpx;
					text-align: center;
					color: #b2b2b2;
				}
				.form-checkbox-group {
					width: 100%;
					float: left;
					.form-table-item{
						height: 48rpx;
						padding: 0 32rpx;
						border: 1px solid #b2b2b2;
						text-align: center;
						font-size: $font-size-28;
						color: #333333;
						float: left;
						line-height: 48rpx;
						border-radius: 26rpx;
						margin-right: 12rpx;
						margin-top: 20rpx;
					}
				}
				.form-checkbox-input{
					width: 100%;
					height: 64rpx;
					margin-top: 20rpx;
					.checkbox-input{
						width: 518rpx;
						height: 64rpx;
						box-sizing: border-box;
						text-align: left;
						font-size: $font-size-26;
						color: #333333;
						line-height: 64rpx;
						float: left;
						border: 1px solid #e1e1e1;
						border-radius: 32rpx;
						padding: 0 20rpx;
					}
					.checkbox-btn{
						width: 160rpx;
						height: 64rpx;
						border-radius: 32rpx;
						background-color: #ffe6dc;
						line-height: 64rpx;
						text-align: center;
						color: #FF5B00;
						font-size: $font-size-28;
						float: right;
					}
				}
			}
			.register-fiexd{
				width: 100%;
				height: auto;
				padding: 20rpx 0;
				position: fixed;
				bottom: 0;
				left: 0;
				z-index: 888;
				background: #FFFFFF;
				.register-agree{
					display: flex;
					flex-direction: column;
					align-items: center;
					margin:0 0 32rpx 0;
					box-sizing: border-box;
					padding: 0 105rpx;
					.agree-text{
						font-size: 20rpx;
						line-height: 38rpx;
						color: #fea785;
					}
				}
			}
			.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;
				&.disabled{
					background: #e4e8eb;
					color: #999999;
				}
				&.none{
					background: #FFFFFF;
					color: $text-color;
					margin-top: 0;
				}
				&.sub{
					margin-top: 0;
				}
			}
		}
	}
</style>