mz/pages/public/DocRegisterIndex.vue

<template>
	<view class="content">
		<view class="content_box">
			<view class="examine_list"> 
				<view class="examine_name">个人简介</view>
				<view class="textarea-box">
					<textarea  class="textarea" v-model="introduction" maxlength="-1"  placeholder-style="color:#999999" placeholder="如：学历、毕业学校、工作经验、学术兼职、荣誉称号" 
					@blur="bindTextAreaBlur" auto-height />
				</view>
			</view>
		</view>
		<view class="content_box">
			<view class="examine_list"> 
				<view class="examine_name">擅长领域</view>
				<view class="textarea-box">
					<textarea  class="textarea" v-model="good_at" maxlength="-1"  placeholder-style="color:#999999" placeholder="如：擅长什么手术、擅长什么疾病的治疗、对某某领域有研究、擅长什么操作。" 
					@blur="bindTextAreaBlur1" auto-height />
				</view>
			</view>
		</view>
		<view class="content_box">
			<view class="">
				<view class="examine_name" @click="uploadoss">头像(正面免冠证件照)</view>
				<view class="examine_img">
					<image class="image1" :src="image" @click="scImg()" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="content_box">
			<view class="">
				<view class="examine_name">从业资格证（工作胸牌、执业证书、资格证书选填一个）</view>
				<view class="add-img-box flex_item">
					<view class="add-img-item" v-for="(item, index) in imgList" :key="index">
						<image class="add-img" @click.stop="imgInfo(index)" :src="item.url" mode="widthFix"></image>
						<image class="add-img-del" @click.stop="delImg(index)" src="/static/img/delete.png"></image>
					</view>
					<view v-if="imgCount > 0" class="add-img-item" @click.stop="scImg1()">
						<image class="add-img" src="/static/img/add.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="add-btn flex">
			<view class="btn-submit re-to" @click="reto">一键跳过</view>
			<view class="btn-submit" @click="confirm">提交申请</view>
		</view>
	</view>
</template>
<script>
import { client, uuid ,uploadoss} from '@/utils/alioss'
import { mapState, mapMutations } from 'vuex';
import { upload,setDoctorExt } from '@/api/index.js';
import { getUserInfo } from '@/api/login.js';
export default {
	data() {
		return {
			introduction:'',//个人简介
			good_at:'',//擅长领域
			image:'/static/img/add.png',//一寸免冠照片
			imgList: [],
			cloudimgList: [],
			imgCount:6//最多支持6张上传，可以修改
		};
	},
	onLoad() {
		
	},
	methods: {
		...mapMutations(['setUserInfo']),
		/*医院*/
		//单张上传图片
		scImg(type) {
			let obj = this;
			upload({
				file: ''
			}).then(e => {
				obj.image = e[0].url;
			}).catch((e) => {
				
			});
			// uploadoss()
		},
		uploadoss() {
			uploadoss()
		},
		//多张上传图片
		scImg1() {
			let obj = this;
			upload({
				file: ''
			})
				.then(e => {
					obj.imgList = [...obj.imgList, ...e];
					console.log(obj.imgList,'imgList')
					obj.imgCount = 6 - obj.imgList.length;
				})
				.catch(e => {});
		},
		//点击图片显示大图
		imgInfo(i) {
			let tempList = [];
			console.log(111);
			this.imgList.forEach(e => {
				tempList.push(e.url);
			});
			console.log(tempList);
			//显示图片
			uni.previewImage({
				current: i,
				loop: false,
				urls: tempList,
				indicator: 'default'
			});
		},
		//删除图片
		delImg(i) {
			uni.showModal({
				content: '确定删除这张吗',
				success: res => {
					if (res.confirm) {
						this.imgList.splice(i, 1);
						this.imgCount++;
					} else if (res.cancel) {
					}
				}
			});
		},
		//文本输入框
		 bindTextAreaBlur: function (e) {
			 this.introduction = e.detail.value
		},
		//文本输入框
		 bindTextAreaBlur1: function (e) {
			 this.good_at = e.detail.value
		},
		reto(){
			// uni.switchTab({
			// 	url: '/pages/index/home'
			// })
			uni.navigateTo({
				url: '/pages/public/erweima'
			})
		},
		//提交
		confirm() {
			let obj = this;
			if(obj.image == '/static/img/add.png'){
				this.$api.msg('请上传正面免冠证件照！');
				return;
			}
			if (obj.imgList.length < 1) {
				uni.showToast({
					title: '请上传从业资格证',
					icon: 'none'
				});
				return;
			}
			for (let i = 0; i < obj.imgList.length; i++) {
				obj.cloudimgList.push(obj.imgList[i].url);
			}
			let arr = obj.cloudimgList.join(',');			
			setDoctorExt({	
				introduction:obj.introduction,
				good_at:obj.good_at,
				work_imgs:arr,
				photo:obj.image
			}).then(function(e) {
				obj.$api.msg(e.msg);
				//注册医生完成后更新用户信息
				obj.userInfo();
				setTimeout(function() {
					// uni.switchTab({
					// 	url: '/pages/index/home'
					// })
					// document.addEventListener(
					// 	"WeixinJSBridgeReady",
					// 	function() {
					// 		WeixinJSBridge.call("closeWindow");
					// 	},
					// 	false
					// );
					// //ios手机
					// WeixinJSBridge.call("closeWindow");
					uni.navigateTo({
						url: '/pages/public/erweima'
					})
				}, 2000);
				})
				.catch(e => {
					console.log(e)
				});
		},
		//选择身份后更新用户信息
		userInfo() {
			let obj = this;
			getUserInfo({})
				.then(function(e) {
					uni.setStorageSync('userInfo', e.data);
				})
				.catch(function(e) {
					console.log(e);
				});
		},
		
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
	min-height: 100%;
}
.content_box {
	background-color: #ffffff;
	padding: 0rpx 25rpx;
	width: 92%;
	margin: 25rpx auto;
	border-radius: 15rpx;
	.examine_list{
		width: 100%;
		.textarea-box{
			width: 95%;
			margin: 25rpx auto;
			.textarea{
				width: 100%;
				font-size: 28rpx;
				min-height: 150rpx;
			}
		}
	}
}
.row {
	display: flex;
	align-items: center;
	// position: relative;
	padding: 0 30rpx;
	height: 110rpx;
	background: #fff;
	border-bottom: 1rpx solid #f8f6f6;

	.tit {
		flex-shrink: 0;
		width: 180rpx;
		font-size: 30rpx;
		color: $font-color-dark;
	}
	.input {
		flex: 1;
		font-size: 30rpx;
		color: $font-color-dark;
	}
	.iconlocation {
		font-size: 36rpx;
		color: $font-color-light;
	}
}
.examine_name {
	color: #171717;
	font-size: 28rpx;
	padding: 25rpx 25rpx;
}
.examine_img {
	width: 100%;
	text-align: center;
	padding-bottom: 25rpx;
	.image{
		width: 150rpx;
		height: 150rpx;
	}
	.image1{
		min-width: 150rpx;
		max-width: 100%;
		min-height: 150rpx;
	}
}
.add-img-box {
	width: 100%;
	flex-direction: row;
	flex-wrap: wrap;
	margin-top: 50rpx;
}
.add-img-item {
	border-radius: 24rpx;
	position: relative;
	margin-bottom: 25rpx;
	.add-img {
		min-width: 150rpx;
		max-width: 100%;
		min-height: 150rpx;
	}
}
.add-img-del {
	position: absolute;
	width: 40rpx;
	height: 40rpx;
	right: 20rpx;
	// bottom: 155rpx;
	//background-color: rgba(238, 0, 0, 1);
	border-radius: 20rpx;
}
.default-row {
	margin-top: 16rpx;
	.tit {
		flex: 1;
	}
	switch {
		transform: translateX(16rpx) scale(0.9);
	}
}
.add-btn {
	width: 100%;
	font-size: $font-lg;
	color: #fff;
	line-height: 100rpx;
	text-align: center;
	position: fixed;
	bottom: 0;
	.btn-submit{
		width: 50%;
		background-color: #6786FB;
	}
	.re-to{
		background-color: #6A7289;
		
	}
}
.img_box {
	padding: 35rpx 35rpx;
	width: 250rpx;
	height: 250rpx;
}
.img_box image {
	width: 100%;
	height: 100%;
}
.alert-box {
	background-color: #ffffff;
}
.b-b:after {
	position: relative !important;
}
.check_box {
	padding: 25rpx 25rpx;
	font-size: 20rpx;
	padding-bottom: 150rpx;
	text{
		color: #6786FB;
	}
}

</style>