tourGuide/subPackages/user/register.vue

<template>
	<view class="bg">
		<view class="header-tip">请填写您的信息，稍后平台工作人员会电话联系您~</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="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" @click="changeValue('nickname')">
				<span>姓名</span>
				<view v-if="info.nickname">{{info.nickname}}</view>
				<view v-else class="empty-value" >请填写</view>
			</view>
			<view class="userinfo-item" @click="selectSex">
				<span>性别</span>
				<view v-if="info.genderStr">{{info.genderStr}}</view>
				<view v-else class="empty-value" >请选择</view>
			</view>
			<view class="userinfo-item" @click="changeValue('mobile')">
				<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" @click="selectRank">
				<span>导游等级</span>
				<view v-if="info.rankStr">{{info.rankStr}}</view>
				<view v-else class="empty-value">请选择</view>
			</view>
			<view class="userinfo-item">
				<span>导游证号</span>
				<view v-if="info.rankStr">{{info.rankStr}}</view>
				<view v-else class="empty-value">请填写</view>
			</view>
			<view class="userinfo-item">
				<span>工作年限</span>
				<view v-if="info.rankStr">{{info.rankStr}}</view>
				<view v-else class="empty-value">请填写</view>
			</view>
			<view class="userinfo-item">
				<span>语言能力</span>
				<view v-if="info.rankStr">{{info.rankStr}}</view>
				<view v-else class="empty-value">请选择</view>
			</view>
			<view class="userinfo-item">
				<span>擅长景区</span>
				<view v-if="info.rankStr">{{info.rankStr}}</view>
				<view v-else class="empty-value">请选择</view>
			</view>
			<view class="userinfo-item">
				<span>个性签名</span>
				<view v-if="info.rankStr">{{info.rankStr}}</view>
				<view v-else class="empty-value">请填写</view>
			</view>
			<view class="userinfo-item">
				<span>核心亮点</span>
				<view v-if="info.rankStr">{{info.rankStr}}</view>
				<view v-else class="empty-value">请填写</view>
			</view>
			
			<view class="info-title" style="margin-top: 46rpx;">·讲解视频</view>
			<view class="userinfo-item" @click="selectRank">
				<span>讲解视频</span>
				<view v-if="info.rankStr">{{info.rankStr}}</view>
				<view v-else class="empty-value">请选择</view>
			</view>
			
			<view class="btn-tao" @click="submit">我已填好</view>
		</view>
		
	</view>
</template>

<script>
	import {pathToBase64} from  "@/static/js/mmmm-image-tools/index.js"
	export default {
		data() {
			
			return {
				info: {
					nickname: '',
					avatar: '',gender: null, genderStr: '',mobile:'',rank: null,rankStr: '',
					guideNo: '', workYear: '', languague: null, languagueStr:'',
					scenicSpot: null, scenicSpotStr: '', sign: '', highlights: ''
					
				},
			}
		},
		mounted() {
			uni.request({url:'/api/api/Merchants/get_graphic'})
			// this.Post({}, '/api/Merchants/get_graphic').then(res => {})
			uni.$on("updateInfo",this.updateInfo)
		},
		beforeUnmount () {
			console.log('触发off')
			uni.$off("updateInfo",this.updateInfo)
		},
		beforeDestroy () {
			console.log('触发off')
			uni.$off("updateInfo",this.updateInfo)
		},

		methods: {

			// 上传头像
			uploadAvator () {
				let _this = this
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						pathToBase64(tempFilePaths[0]).then(base64 => {
							_this.info.avatar = base64
							console.log(_this.info)
						})
					},
				})
			},
			selectSex () {
				let _this = this
				let itemList = ['男','女']
				let valueList = ['1','2']
				uni.showActionSheet({
					itemList: itemList,
					success: function (res) {
						let index = res.tapIndex;
						_this.info.genderStr = itemList[index]
						_this.info.gender = valueList[index]
						
					},
					fail: function (res) {
						console.log(res.errMsg);
					}
				});
			},
			selectRank () {
				let _this = this
				let itemList = ['初级导游','中级导游','高级导游','大师级导游']
				let valueList = ['1','2','3','4']
				uni.showActionSheet({
					itemList: itemList,
					success: function (res) {
						let index = res.tapIndex;
						_this.info.rankStr = itemList[index]
						_this.info.rank = valueList[index]
						
					},
					fail: function (res) {
						console.log(res.errMsg);
					}
				});
			},
			
			// 跳转修改数据
			changeValue(valueType) {
				uni.navigateTo({
					url: `/subPackages/user/infoFilling?valueType=${valueType}&inputValue=${this.info[valueType]}`
				})
			},
			
			// 接受回调
			updateInfo(data) {
				if (data.msgType == 'registerInfo') {
					console.log(data.data)
					let valueType = data.data.valueType
					let valueTypeStr = valueType + 'Str'
					let inputValue = data.data.inputValue
					let inputValueStr = data.data.inputValueStr
					this.info[valueType] = inputValue
					if (this.info[valueTypeStr] !== undefined && inputValueStr) {
						this.info[valueTypeStr] = inputValueStr
					}
				}
			},
			
			uploadImg() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						
						// // #ifdef MP-WEIXIN
						// uni.getFileSystemManager().readFile({
						// 	filePath: tempFilePaths[0],
						// 	encoding: 'base64',
						// 	success: res => {
						// 		this.Post({
						// 			method: 'POST',
						// 			base64: 'data:image/png;base64,' + res.data
						// 		}, '/api/common/base64').then(res => {
						// 			if (res.data) {
						// 				this.Post({
						// 					avatar: res.data
						// 				}, '/api/user/profile').then(res => {
						// 					uni.showModal({
						// 						title: '提示',
						// 						content: res.msg,
						// 						showCancel: false,
						// 						success: res => {
						// 							if (res.confirm) {
						// 								this.getList()
						// 							}
						// 						}
						// 					})
						// 				})
						// 			}
						// 		})
						// 	}
						// })
						// // #endif
						
						pathToBase64(tempFilePaths[0]).then(base64 => {
							this.Post({
								method: 'POST',
								base64: base64
							}, '/api/common/base64').then(res => {
								if (res.data) {
									this.Post({
										avatar: res.data
									}, '/api/user/profile').then(res => {
										uni.showModal({
											title: '提示',
											content: res.msg,
											showCancel: false,
											success: res => {
												if (res.confirm) {
													this.getList()
												}
											}
										})
									})
								}
							})
						})
					}
				});
			},

			
			submit() {
				uni.showModal({
					title: '提示',
					content: '确认修改您的信息？',
					success: res => {
						if (res.confirm) {
							this.Post({
								nickname: this.nickname,
								gender: this.gender,
								birthday: this.birthday
							}, '/api/user/profile').then(res => {
								console.log(res)
								if (res.code == 1) {
									uni.showModal({
										title: '提示',
										content: res.msg,
										showCancel: false,
										success: res => {
											if (res.confirm) {
												this.getList()
											}
										}
									})
								}
							})
						}
					}
				})
			},

		}
	}
</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;
	}
	
	.userinfo-item i {
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
	}

	.userinfo-item {
		& 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: 20rpx 20rpx 0rpx 0rpx;
		background: #fff;
		overflow: hidden;
		
		.popup-item {
			width: 697rpx;
			height: 99rpx;
			font-weight: 500;
			font-size: 31rpx;
			color: #12293C;
			margin: auto;
		}
		.popup-item:nth-child(2) {
			border: none;
			border-bottom: 1rpx solid #D8D8D8;
			border-top: 1rpx solid #D8D8D8;
		}
		
		.popup-items {
			width: 100%;
			height: 99rpx;
			font-weight: 500;
			font-size: 31rpx;
			color: #12293C;
			border-top: 13rpx solid #F2F2F2;
		}
	}
</style>