tourGuide/subPackages/user/userInfo.vue

<template>
	<view class="bg">
		<!-- <view class="header-tip">请填写您的信息，稍后平台工作人员会电话联系您~</view> -->
		<view style="height: 20rpx;"></view>
		<view class="user-other-info">
			<view class="info-title">·基础信息</view>
			<div class="info-avatar-top">
				<span>头像</span>
				<view @click="uploadAvator()">
					<image v-if="info.avatar" :src="showImg(info.avatar)" mode="aspectFill"
						style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image>
					<div v-else style="width: 80rpx;height: 80rpx;border-radius: 50%;background: #0B898E;"></div>
				</view>
			</div>
			<view class="userinfo-item" >
				<span>姓名</span>
				<view class="text-overflow" v-if="info.nickname">{{info.nickname}}</view>
				<view v-else class="empty-value" >请填写</view>
			</view>
			<view class="userinfo-item" >
				<span>性别</span>
				<view class="text-overflow" v-if="info.genderStr">{{info.genderStr}}</view>
				<view v-else class="empty-value" >请选择</view>
			</view>
			<view class="userinfo-item" >
				<span>手机号</span>
				<view v-if="info.mobile">{{info.mobile}}</view>
				<view v-else class="empty-value" >请填写</view>
			</view>
			
			<view class="info-title" style="margin-top: 46rpx;">·工作相关</view>
			<view class="userinfo-item edit" @click="selectRank">
				<span>导游等级</span>
				<view v-if="info.group_idStr">{{info.group_idStr}}</view>
				<view v-else class="empty-value">请选择</view>
			</view>
			<view class="userinfo-item" >
				<span>导游证号</span>
				<view class="text-overflow" v-if="info.certificate_number">{{info.certificate_number}}</view>
				<view v-else class="empty-value">请填写</view>
			</view>
			<view class="userinfo-item edit" @click="changeValue('honor')">
				<span>荣誉称号</span>
				<view class="text-overflow" v-if="info.honorStr">{{info.honorStr}}</view>
				<view v-else class="empty-value">请选择</view>
			</view>
			<view class="userinfo-item edit" @click="changeValue('duration')">
				<span>工作年限</span>
				<view class="text-overflow" v-if="info.duration">{{info.duration}}</view>
				<view v-else class="empty-value">请填写</view>
			</view>
			<view class="userinfo-item edit" @click="changeValue('lingo_ids')">
				<span>语言能力</span>
				<view class="text-overflow" v-if="info.lingo_idsStr">{{info.lingo_idsStr}}</view>
				<view v-else class="empty-value">请选择</view>
			</view>
			<view class="userinfo-item edit" @click="changeValue('scenic_ids')">
				<span>擅长景区</span>
				<view class="text-overflow" v-if="info.scenic_idsStr">{{info.scenic_idsStr}}</view>
				<view v-else class="empty-value">请选择</view>
			</view>
			<view class="userinfo-item edit" @click="changeValue('bio')">
				<span>个性签名</span>
				<view class="text-overflowRows" v-if="info.bio">{{info.bio}}</view>
				<view v-else class="empty-value">请填写</view>
			</view>
			<view class="userinfo-item edit" @click="changeValue('sparkle_text')">
				<span>核心亮点</span>
				<view class="text-overflow" v-if="info.sparkle_textStr">{{info.sparkle_textStr}}</view>
				<view v-else class="empty-value">请填写</view>
			</view>
			
			<view class="info-title" style="margin-top: 46rpx;">·讲解视频</view>
			<view class="userinfo-item edit" @click="changeValue('video_list')">
				<span>讲解视频</span>
				<view class="text-overflow" v-if="info.video_list.length>0">{{info.video_list.length}}</view>
				<view v-else class="empty-value">请选择</view>
			</view>
			
			<view class="btn-tao" @click="submit">保存修改</view>
		</view>
		
		
		<uni-popup ref="popup" type="bottom">
			<view class="popup-box">
				<view class="popup-content">
					<view :class="['popup-item','flex-center',popData.value==item.id?'active':'']"
					v-for="(item,index) in popData.selection" :key="index" @click="changeItemSelect(item)">
						{{item.name}}
						<uni-icons v-show="popData.value==item.id" class="active-img" type="checkmarkempty" size="23" color="#96684F"></uni-icons>
					</view>
				</view>
				
				
				<view class="popup-btns flex-center" @click="popSubmit">
					<view>确定</view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import {pathToBase64} from  "@/static/js/mmmm-image-tools/index.js"
	export default {
		data() {
			
			return {
				info: {
					nickname: '',mobile:'',avatar: '',
					gender: null, genderStr: '',
					group_id: null,group_idStr: '',
					certificate_number: '',duration:'',
					lingo_ids: null, lingo_idsStr:'',lingo_idsFileList: [],
					scenic_ids: null, scenic_idsStr:'',
					bio:'', video_list: [],
					sparkle_text: [],
					sparkle_textStr: '',
					honor: [], honorStr: ''
				},
				
				groupIds: [], // 导游等级
				
				popData: {
					selection: [],
					value: null,
					valueStr: '',
					keyName: '',
				},

			}
		},
		mounted() {
			uni.$on("updateInfo",this.updateInfo)
		},
		beforeUnmount () {
			console.log('触发off')
			uni.$off("updateInfo",this.updateInfo)
		},
		beforeDestroy () {
			console.log('触发off')
			uni.$off("updateInfo",this.updateInfo)
		},
		
		onLoad () {
			this.getUserInfo()
			this.initSelect()
		},
		methods: {
			//获取导游信息
			getUserInfo () {
				this.Post({}, '/api/Merchants/get_login_details').then(res => {
					let resData = res.data
					let lingo_idsFileList = []
					let video_list = []
					let honor = []
					try {
						lingo_idsFileList = (resData.lingo_image_list || '').split(',').filter(v=>v)
						video_list = (resData.video_list || '').split(',').filter(v=>v)
						honor = JSON.parse(resData.honor) || []
					} catch(e){}
					
					this.info = {
						id: resData.id,avatar: resData.avatar,
						nickname: resData.nickname, mobile: resData.mobile,
						certificate_number: resData.certificate_number,
						duration:resData.duration,bio:resData.bio,
						gender: resData.gender, genderStr: resData.gender == 1?'男':'女',
						group_id: resData.group_id,group_idStr: resData.group_data.name,
						
						lingo_ids: resData.lingo_data.lingo_id, 
						lingo_idsStr:resData.lingo_data.name,
						lingo_idsFileList: lingo_idsFileList,
						
						scenic_ids: resData.scenic_data.scenic_id,
						scenic_idsStr:resData.scenic_data.name,
						
						sparkle_text: (resData.sparkle_text || []),
						sparkle_textStr:(resData.sparkle_text || []).map(v=>v.text).join(','),
						
						video_list: video_list,
						honor: honor, honorStr: honor&&honor.length>0?honor[0].nameStr:""
					}
				})
			},
			
			initSelect () {
				// 获取导游等级
				this.Post({}, '/api/guide/getGuideGroupList').then(res => {
					this.groupIds = res.data
				})
			},
			
			// 上传头像
			uploadAvator () {
				let _this = this
				let url = this.NEWAPIURL
				// #ifdef H5
				 url = '/api'
				// #endif
				url+='/api/Common/upload'
				uni.chooseImage({
					count:1,
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						const uploadTask = uni.uploadFile({
							url: url,
							filePath: tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								try {
									let res = JSON.parse(uploadFileRes.data)
									if (res.code == 1) {
										_this.info.avatar = res.data.url
									}
								} catch(e) {}
								
								
							},
							fail:()=> {
								uni.showToast({
									title:'上传失败',
									icon:'none'
								})
							}
						});
						
					},
					fail:()=> {
						uni.showToast({
							title:'上传失败',
							icon:'none'
						})
					}
				});
			},
			selectSex () {
				this.popData = {
					selection: [{id: 1, name: "男"}, {id: 2,name:"女"}],
					value: this.info.gender,
					valueStr: this.info.genderStr,
					keyName:"gender"
				}
				this.$refs.popup.open()
				
			},
			selectRank () {
				this.popData = {
					selection: this.groupIds,
					value: this.info.group_id,
					valueStr: this.info.group_idStr,
					keyName:"group_id"
				}
				this.$refs.popup.open()
			},
			
			// 单个选中
			changeItemSelect (item) {
				if (this.popData.value == item.id) {
					this.popData.value = null
				} else {
					this.popData.value = item.id
					this.popData.valueStr = item.name
				}
			},
			popSubmit () {
				this.info[this.popData.keyName] = this.popData.value
				this.info[this.popData.keyName+"Str"] = this.popData.valueStr
				this.$refs.popup.close()
			},
			
			// 跳转修改数据
			changeValue(valueType) {
				let inputValue = this.info[valueType]
				if (valueType == "lingo_ids") {
					uni.setStorageSync("userfileList",JSON.stringify(this.info.lingo_idsFileList))
				}
				if (valueType == 'video_list') {
					uni.setStorageSync("userVideofileList",JSON.stringify(this.info.video_list))
				}
				if (valueType == 'sparkle_text') {
					inputValue = this.info.sparkle_textStr
				}
				if (valueType == 'honor') {
					uni.setStorageSync("userHonor",JSON.stringify(this.info.honor))
				}
				
				uni.navigateTo({
					url: `/subPackages/user/infoFilling?valueType=${valueType}&inputValue=${inputValue}`
				})
			},
			
			// 接受回调
			updateInfo(data) {
				if (data.msgType == 'registerInfo') {
					console.log(data.data)
					let valueType = data.data.valueType
					let valueTypeStr = valueType + 'Str'
					let fileListStr = valueType+'FileList'
					let inputValue = data.data.inputValue
					let inputValueStr = data.data.inputValueStr
					let fileList = data.data.fileList
					this.info[valueType] = inputValue
					if (this.info[valueTypeStr] !== undefined && inputValueStr) {
						this.info[valueTypeStr] = inputValueStr
					}
					if (this.info[fileListStr] && fileList) {
						this.info[fileListStr] = fileList
					}
					
					console.log(this.info)
					
				}
			},
			

			
			submit() {
				// 校验
				// if (!this.info.nickname) {
				// 	uni.showToast({title:"请输入姓名",icon:"none"})
				// 	return
				// }
				if(!this.info.avatar) {
					uni.showToast({title:"请上传头像",icon:"none"})
					return
				}
				// if (!this.info.gender) {
				// 	uni.showToast({title:"请选择性别",icon:"none"})
				// 	return
				// }
				// if (!this.info.mobile || !this.IsTel(this.info.mobile)) {
				// 	uni.showToast({title: "请输入正确的手机号码",icon: 'none'})
				// 	return;
				// }
				if (!this.info.group_id) {
					uni.showToast({title: "请选择导游等级",icon: 'none'})
					return;
				}
				// if (!this.info.certificate_number) {
				// 	uni.showToast({title: "请输入导游证号",icon: 'none'})
				// 	return;
				// }
				if (!this.info.duration) {
					uni.showToast({title: "请输入工作年限",icon: 'none'})
					return;
				}
				if (!this.info.lingo_ids || this.info.lingo_idsFileList.length<=0) {
					uni.showToast({title: "请选择语言能力并上传证明材料",icon: 'none'})
					return;
				}
				if (!this.info.scenic_ids) {
					uni.showToast({title: "请选择擅长景区",icon: 'none'})
					return;
				}
				if (!this.info.bio) {
					uni.showToast({title: "请输入个性签名",icon: 'none'})
					return;
				}
				if (this.info.sparkle_text.length<=0) {
					uni.showToast({title: "请输入核心亮点",icon: 'none'})
					return;
				}
				console.log(this.info)
				
				let param = {
					method: "POST",
					...this.info,
					lingo_image_list: this.info.lingo_idsFileList.join(','),
					video_list: this.info.video_list.join(','),
					sparkle_text: JSON.stringify(this.info.sparkle_text),
					honor:  this.info.honor&&this.info.honor.length>0?JSON.stringify(this.info.honor):'',
				}
				delete param.nickname
				delete param.gender
				delete param.mobile
				delete param.certificate_number
				
				

				uni.showModal({
					title: '提示',
					content: '确认修改您的信息？',
					success: res => {
						if (res.confirm) {
							this.Post(param, '/api/Merchants/update_guide_details').then(res => {
								console.log(res)
								if (res.code == 1) {
									uni.showModal({
										title: '提示',
										content: res.msg,
										showCancel: false,
										success: res => {
											if (res.confirm) {
												this.getUserInfo()
											}
										}
									})
								}
							})
						}
					}
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	view {
		box-sizing: content-box;
	}
	.bg{
		min-height: 100vh;
		overflow-x: hidden;
		background: white;
		padding-bottom: 50rpx;
	}
	.header-tip{
		font-weight: 400;
		font-size: 27rpx;
		color: #585858;
		padding: 33rpx 0;
		text-align: center;
	}
	.empty-value{
		font-weight: 500;
		font-size: 28rpx;
		color: #999999;
	}
	
	.info-avatar-top {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		border-bottom: 1rpx solid #D8D8D8;
		padding: 40rpx 0;
		height: 48rpx;
		color: #333;
		align-items: center;
	}
	.info-avatar-top view{
		display: flex;
		align-items: center;
	}
	.info-avatar-top view:after{
		content: "";
		width: 20rpx;
		height: 20rpx;
		margin-left: 6rpx;
		background-image: url('https://static.ticket.sz-trip.com/tongli/images/user/rightIcon-gray.png');
		background-size: 100% 100%;
	}
	.info-avatar-top img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.change-avatar-btn {
		color: #FFF;
		width: 220rpx;
		margin: 0 auto;
		line-height: 70rpx;
		border-radius: 20rpx;
		background: #4C93FF;
		position: relative;
		font-size: 34rpx;
	}

	.change-avatar-btn input {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		opacity: 0;
	}

	.user-other-info {
		margin:0 30rpx;
		.info-title{
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
		}
	}

	.userinfo-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		border-bottom: 1rpx solid #D8D8D8;
		padding: 40rpx 30rpx 40rpx 0;
		height: 48rpx;
		color: #333;
		position: relative;
	}

	.info-avatar-top span {
		font-weight: 500;
		font-size: 31rpx;
		flex-shrink: 0;
	}

	.userinfo-item span {
		font-weight: 500;
		font-size: 31rpx;
		flex-shrink: 0;
		color: #000;
		width: 200rpx;
	}
	
	.userinfo-item i {
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
	}

	.userinfo-item.edit {
		& view::after {
			content: "";
			width: 20rpx;
			height: 20rpx;
			margin-left: 6rpx;
			background-image: url('https://static.ticket.sz-trip.com/tongli/images/user/rightIcon-gray.png');
			background-size: 100% 100%;
			position: absolute;
			right: 0;
			margin: auto;
			top: 0;
			bottom: 0;
		}
	}

	.birthday-box {
		text-align: right;
	}

	.cropper {
		width: auto;
		height: 100%;
	}

	.cropper-content {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 1000;
	}

	.dialog-footer .change-avatar-btn {
		position: fixed;
		text-align: center;
		bottom: 80rpx;
		left: 50%;
		margin-left: -110rpx;
	}

	.btn-tao {
		text-align: center;
		font-size: 30rpx;
		width: 697rpx;
		height: 80rpx;
		background: #96684F;
		border-radius: 40rpx;
		line-height: 80rpx;
		color: #FFFFFF;
		margin-top: 55rpx;
	}
	
	.popup-box {
		border-radius: 0rpx;
		background: #fff;
		overflow: hidden;
		.btn-top{
			padding: 26rpx 26rpx 0 26rpx;
			color: #999999;
			font-size: 31rpx;
			box-sizing: border-box;
		}
		.popup-content{
			max-height: 500rpx;
			width: 100%;
			overflow-x: hidden;
			overflow-y: auto;
		}
		
		.popup-item {
			width: 697rpx;
			height: 99rpx;
			font-weight: 500;
			font-size: 31rpx;
			color: #12293C;
			margin: auto;
			border-bottom: 1rpx solid #D8D8D8;
			position: relative;
		}
		.popup-item.active{
			color: #96684F;
		}
		.popup-item:last-of-type {
			border: none;
		}
		.active-img{
			position: absolute;
			right: 10rpx;
			
		}
		
		.popup-btns {
			width: 100%;
			height: 153rpx;
			background: #FFFFFF;
			color: #12293C;
			border-top: 13rpx solid #F2F2F2;
			box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(82,82,82,0.25);
			padding: 40rpx 26rpx;
			box-sizing: border-box;
			view{
				box-sizing: border-box;
				width: 100%;
				height: 73.33rpx;
				line-height: 73.33rpx;
				background: #DC2525;
				border-radius: 11rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}
	}
</style>