mabaoDoctor/pages/information/information.vue

<template>
	<view style="width: 100%;height: 100%;background-color: #FFFFFF;">
		<!-- 头像 -->
		<view style="padding: 36rpx 28rpx;" class="flex align-center justify-around">
			<view style="width: 80%;font-size: 28rpx;background-color: ;">头像</view>
			<view class="flex align-center">
				<image style="border-radius: 50%;margin-right:20rpx;width: 88rpx;height: 88rpx;" @click="ChooseImage" :src='imgList[0]'
				 mode='aspectFill'></image>
				<u-icon name="arrow-right" color="#C0C0C0"></u-icon>
			</view>
		</view>
		<!-- 个人简介 -->
		<view style="margin: 36rpx 28rpx;" class="flex align-center justify-around">
			<view style="width: 40%;font-size: 28rpx;">个人签名</view>
			<view class="flex align-center" style="width: 60%;">
				<u-input v-model="value" @input="inputTextAreaBlur" type="text" maxlength="10" :placeholder="placeholder1" input-align="right"
				 :clearable="false" :customStyle="inputStyle" />
			</view>
		</view>
		<!-- 服务简介和输入域 -->
		<view style="margin: 40rpx 28rpx;">
			<view style="font-size: 28rpx;margin-bottom: 20rpx;">服务简介</view>
			<view style="">
				<textarea @input="bindTextAreaBlur" style="height: 200rpx;width: 100%;" :placeholder="placeholder2" />
				</view>
		</view>
		<!-- 分隔 -->
		<u-gap height="30" bg-color="#e1e1e1"></u-gap>
		<!-- 修改密码 -->
		<view style="padding: 36rpx 28rpx;" class="flex align-center justify-around" @click="next">
			<view style="width: 95%;font-size: 28rpx;background-color: ;">修改密码</view>
			<view class="flex align-center">
				<u-icon name="arrow-right" color="#C0C0C0"></u-icon>
			</view>
		</view>
		<view style="padding: 36rpx 28rpx;" class="flex align-center justify-around" @click="modalShow=true">
			<view style="width: 95%;font-size: 28rpx;background-color: ;">退出登录</view>
			<view class="flex align-center">
				<u-icon name="arrow-right" color="#C0C0C0"></u-icon>
			</view>
		</view>
		<!-- 弹窗 -->
		<u-modal v-model="modalShow" content="确定退出登录？" @confirm="edit" :show-cancel-button="true"></u-modal>
		<!-- 底部按钮 -->
		<view class="bottomButton" @click="bc">
			保存
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations, mapGetters, mapActions } from 'vuex';
	import {
		imglocal
	} from '@/common/env';
	export default {
			data() {
				return {
					status:0,
					//弹窗
					modalShow:false,
					//头像数组
					imgList:[],
					//头像
					
					// 标签输入
					value: '',
					//标签样式
					inputStyle:{
						width:'420rpx',
					},
					//标签占位符
					placeholder1:'请输入个人标签，用于展示给患者',
					//输入域值
					areaValue:'',
					url:'',
					//输入域占位符
					placeholder2:'请填写服务范围、经验等信息，用于展示给患者。'
				}
			},
			onLoad(data) {
				console.log(data)
				this.status = data.status
				this.getInfo();
			},
			methods: {
				...mapMutations(['logout']),
				getInfo: async function(){
					let res = await this.$request.get('doctor/doctorInfoEdit')
					console.log(res);
					this.imgList.push(res.data.avatar);
					this.placeholder1=res.data.sign;
					this.placeholder2=res.data.intro;
				},
				//修改密码
				next(){
					uni.navigateTo({
						url:'modifypassword?state='+this.status
					})
				},
				//退出登录
				edit(){
					let that = this
					uni.showLoading({
						title: '退出中...'
					});
					setTimeout(function() {
						that.logout ()
						uni.clearStorage();
						uni.hideLoading();
						uni.reLaunch({
							url:"../login/login"
						})
					}, 2000);
				},
				//输入框焦点消失事件
				bindTextAreaBlur({detail}){
					console.log(detail.value)
					this.placeholder2 = detail.value
				},
				//输入框焦点消失事件
				inputTextAreaBlur(e){
					console.log(e)
					this.placeholder1 = e
				},

				//保存按钮
				bc:async function(e){
					 
					let res = await this.$request.post('doctor/doctorInfoEdit',{'intro':this.placeholder2,'avatar':this.url,'sign':this.placeholder1})
					if(res.status==0){
						uni.showToast({
						    title: '修改成功',
						    duration: 2000
						});
						uni.switchTab({
							url:'/pages/index/index'
						})
					}else{
						uni.showToast({
						    title: '修改失败，请稍后重试',
							icon:'none',
						    duration: 2000
						});
					}
					return false;
				},
				ChooseImage() {
					let that =this;
				    uni.chooseImage({
				     count: 1, //默认9
				     sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				     sourceType: ['album', 'camera'], //从相册选择
				     success: (res) => {
				      that.imgList = res.tempFilePaths
					  console.log('我是file:',res.tempFilePaths[0])
					  that.$request.upload("Common/uploadFile",that.imgList[0],{}).then(res=>{
						  that.url = imglocal+JSON.parse(res).data.url;
						   console.log(that.url)
					  })
				     }
				    });
				   },
				
			}
	}
</script>

<style>
	page{
		background-color: #e1e1e1;
	}
	.bottomButton {
			width: 100%;
			height: 100rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #0B73B9;
			color: #FFFFFF;
			font-size: 32rpx;
			z-index: 99;	
		
	}

</style>