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

<template>
	<view class="container register" :style="{ paddingTop: CustomBar + 'px' }">
		<cu-custom :navbar-data="nvabarData" @navigateBack="modal = true"></cu-custom>
		<view class="register-main clearfix">
			<view class="register-row clearfix">
				<view class="register-from">
					<view class="label">联系人</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">机构名称</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
					style="height: 120rpx;"
					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-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.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>
		<view class="register-fiexd clearfix" :style="{ paddingBottom: isIphoneX ? '68rpx' : '36rpx' }">
			<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 { mapMutations } from 'vuex'
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
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, // 预览图片开关
			modal:false,
			modalButton: [
				{
					text: '取消',
					type: 'gray',
					plain: true //是否空心
				},
				{
					text: '确认',
					customStyle: {
						color: '#fff',
						bgColor: '#F3B574'
					},
					plain: false
				}
			],
			params: {
				name:'',
				linkMan:'',
				provinceId: '',
				cityId: '',
				townId:'',
				address: '',
				organizeType:1, //外部商城机构类型 0内部机构 1外部机构
				shopPhoto:'',
				businessLicense:'',
				medicalPracticeLicense:'',
			},
			textareaFocus: false,
			handleAddress:'请选择机构所在地区',
		}
	},
	onLoad(option) {
		this.updateModifyInfo()
	},
	methods: {
		hanldNavigateBack() {
			this.$util.modal('', '确定放弃本次修改吗？', '确定', '取消', true, () => {
				uni.navigateBack({
					delta: 1
				})
			})
		},
		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.params.clubId = user.clubId
				this.handleAddress = club.provincialAddress ? club.provincialAddress : '请选择机构所在地区'
				this.params.name = club.name
				this.params.linkMan = club.linkMan
				this.params.provinceId = club.provinceId
				this.params.cityId = club.cityId
				this.params.townId = club.townId
				this.params.address = club.address
				this.params.organizeType = club.organizeType
				this.params.socialCreditCode = club.socialCreditCode
				this.params.shopPhoto = club.shopPhoto
				this.params.businessLicense = club.businessLicense
				this.params.medicalPracticeLicense = club.medicalPracticeLicense
			}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.address == '') {
				this.$util.msg('请填写机构详细地址', 2000)
				return
			}
			if (this.params.businessLicense == '') {
				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.updateOrganize(params)
				this.$util.msg('保存成功',2000,true,'success')
				setTimeout(()=>{
					this.$api.navigateBack(1)
				},2000)
			}catch(error){
				this.$util.msg(error.msg, 2000)
			}
		},
		// 三级联动选择
		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
		},
		onTextareaInputInfo(e) {
			this.profile = e.detail.value
		},
		//上传
		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.params.businessLicense = ''
					break
				case 2:
					this.params.shopPhoto = ''
					break
				case 3:
					this.params.medicalPracticeLicense = ''
					break
			}
		},
		handleClick(e) {
			//确认删除
			if (e.index == 1) {
				uni.navigateBack()
			}
			this.modal = false
		}
	},
	onShow() {
		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;
		position: relative;
		padding:40rpx 0 300rpx 0;
		.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: 264rpx;
					}
				}
				.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;
			}
		}
	}
}
.register-fiexd {
	width: 100%;
	height: auto;
	padding: 20rpx 0;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 99;
	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;
		&.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: #F3B574;
	border: 2rpx solid #F3B574;
}
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>