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

<template>
	<view class="container register" :style="{ paddingTop: CustomBar + 'px' }">
		<view class="register-main title clearfix" v-if="isUnderLogin">
			<view class="register-row  clearfix" style="padding: 24rpx;margin-bottom: 0;">
				<view class="error-title">审核未通过原因:</view>
				<view class="error-main">
					 {{ auditNote }}
				</view>
			</view>
		</view>
		<view class="register-main clearfix">
			<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="handleConfirm">重新提交审核</view>
			</view>
		</view>	
		<!-- 地址  -->
		<mpvue-city-picker
			:themeColor="themeColor"
			ref="mpvueCityPicker"
			:pickerValueDefault="cityPickerValueDefault"
			@onCancel="onCancel"
			@onConfirm="onConfirm"
		>
		</mpvue-city-picker>
		<!-- 弹窗提示 -->
		<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 authorize from '@/common/config/authorize.js'
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 {
			params: {
				name:'',
				linkMan:'',
				provinceId: '',
				cityId: '',
				townId:'',
				address: '',
				organizeType:1, //外部商城机构类型 0内部机构 1外部机构
				shopPhoto:'',
				businessLicense:'',
				medicalPracticeLicense:'',
			},
			handleAddress:'请选择机构所在地区',
			isUnderLogin:false,
			auditNote:''
		}
	},
	onLoad(option) {
		this.updateModifyInfo()
	},
	computed: {
		...mapState(['isWxAuthorize'])
	},
	methods: {
		...mapMutations(['login', 'wxLogin']),
		async updateModifyInfo() {
			const resolve =await this.$api.getStorage()
			this.params.userId = resolve.userId ? resolve.userId : 0
			if(resolve.clubStatus === 92){
				this.isUnderLogin = true
			}
			try{
				const res =await this.UserService.OrganizationUpdateModifyInfo({ userId: this.params.userId })
				let club = res.data.club
				let user = res.data.user
				this.auditNote = user.auditNote
				this.params.clubId = user.clubId
				this.handleAddress = club.provincialAddress ? club.provincialAddress : '请选择机构所在地区'
				this.params = {...this.params , ...club}
			}catch(error){
				this.$util.msg(error.msg, 2000)
			}
		},
		handleConfirm(){
			// 提交审核
			if (this.params.linkMan == '') {
				this.$util.msg('请输入联系人名称', 2000)
				return
			}
			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.clubUpdate(this.params)
		},
		async clubUpdate(params) {
			// 注册
			try{
				await this.UserService.OrganizationUpdate(params)
				this.$util.msg('提交成功', 2000)
				this.$api.navigateBack(1)
			}catch(error){
				this.$util.msg(error.msg, 2000)
			}
		},
		storeUpdataeStatus(data) {
			uni.setStorageSync('token', data.token)
			this.$store.commit('updateStatus', data)
			this.login(data)
		},
		// 三级联动选择
		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;
			}
		},
		handleClick1(){
			this.$api.switchTabTo('/pages/tabBar/user/user')
		}
	},
	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;
		&.title {
			background: #FEF6F6;
			.error-title {
				line-height: 40rpx;
				font-size: $font-size-28;
				color: #F85050;
				text-align: left;
			}
			.error-main {
				font-size: $font-size-26;
				color: #F85050;
				text-align: justify;
				line-height: 44rpx;
			}
		}
		.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;
						&.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>