tourGuide/subPackages/user/infoFilling.vue

<template>
	<view class="bg">

		<view class="user-other-info">
			<!-- // 景区 -->
			<view class="scenic-container" v-if="valueType=='scenic_ids'">
				<view class="userinfo-item" v-for="(item,i) in scenicIds" :key="i" @click="changeSelection(item)">
					<span>{{item.name}}</span>
					<view v-if="item.value.length>0" class="text-overflow" >{{item.valueStr}}</view>
					<view v-else class="empty-value" >请选择</view>
				</view>
			</view>
			
			<view class="lingo-container" v-else-if="valueType=='lingo_ids'">
				<view class="userinfo-item">
					<span>语言能力</span>
					<view v-if="inputValueStr" class="text-overflow" >{{inputValueStr}}</view>
					<view v-else class="empty-value" >请选择</view>
				</view>
				<view class="language-doc-container">
					<span>证明材料</span>
					<view class="img-container">
						<image :src="file.img" class="doc-image" v-for="(file,i) in fileList"  :key="i"></image>
						
						<view class="doc-image" @click="uploadImg">
							<!-- <image class="upload-image" src=""></image> -->
							111
						</view>
					</view>
				</view>
			</view>
			<view class="nickname-box" v-else>
				<input v-model="inputValue" type="text" placeholder="请输入内容" />
			</view>
			
			
			<view class="btn-tao" @click="submit">保存</view>
		</view>
		
		
		<!-- 弹框 -->
		<uni-popup ref="popup" type="bottom">
			<view class="popup-box">
				<view class="btn-top flex flex-between w-full">
					<view @click="$refs.popup.close()">取消</view>
					<view @click="selectAll">全选</view>
				</view>
				<view class="popup-content">
					<view :class="['popup-item','flex-center',selection.value.includes(item.id)?'active':'']"
					v-for="(item,index) in selection.arr" :key="index" @click="changeItemSelect(item)">
						{{item.name}}
						
						<uni-icons v-show="selection.value.includes(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 { mapState } from 'vuex'
	import {pathToBase64} from  "@/static/js/mmmm-image-tools/index.js"
	export default {
		data() {
			return {
				valueType: '',
				inputValue: '',
				inputValueStr: '',
				keyNames: [
					{key: 'nickname', value:'姓名'},{key: 'mobile', value:'手机号'},
					{key: 'certificate_number', value: '导游证号码'},
					{key: 'duration',value: '工作年限'},
					{key: 'bio',value: '个性签名'},
					{key: 'scenic_ids',value: '擅长景区'},
					{key: 'lingo_ids',value: '语言能力'},
				],
				lingoIds: [],
				scenicIds: [],
				
				selectionItem: null, // 景点选中更改的值
				selection: {arr: [], value: [], valueStr: ''}, //弹窗值
				
				fileList: []
			}
		},
		onLoad(options) {
			this.initData(options)
		},
		

		methods: {
			initData (options) {
				uni.setNavigationBarTitle({title: ''});
				this.valueType = ''
				this.inputValue = ''
				this.inputValueStr = ''
				if (options.valueType) {
					this.valueType = options.valueType
					let titleData = this.keyNames.find(v=>v.key == this.valueType)
					if (titleData) {
						uni.setNavigationBarTitle({title: titleData.value});
					}
					if (this.valueType == 'lingo_ids') {
						this.initLingoList()
					}
					if (this.valueType == 'scenic_ids') {
						this.initScenicList()
					}
					
				} else {
					this.goBack()
					return
				}
				if (options.inputValue && options.inputValue!='null' && options.inputValue!='undefined') {
					this.inputValue = options.inputValue
				}

				
			},
			
			async initLingoList() {
				// 获取导游语言列表
				let res = await this.Post({},'/api/guide/getGuideLingoList').then(res =>{
					this.lingoIds = res.data
				})
				this.lingoIds = (this.$store.state.user.lingoIds || []).map(v=>{
					return {...v, value: [], valueStr: ""}
				})
				
			},
			
			async initScenicList() {
				// 获取景区列表
				let res = await this.Post({},'/api/guide/getGuideScenicList')
				let valueArr = []
				try {
					valueArr = (this.inputValue || '').split(',').map(v=>{return Number(v)})
				} catch(e) {}
				console.log(valueArr)
				this.scenicIds = (res.data || []).map(v=>{
					let valueHave = v.arr.filter(x=>valueArr.includes(x.id))
					return {...v, value: valueHave.map(x=>x.id), valueStr: valueHave.map(x=>x.name).join(',')}
				})
			},
			
			changeSelection (item) {
				this.selectionItem = item
				this.selection = {arr: item.arr, value: JSON.parse(JSON.stringify(item.value)), valueStr: ''}
				this.$refs.popup.open()
			},
			// 单个选中
			changeItemSelect (item) {
				let index = this.selection.value.findIndex(x=>x==item.id)
				if (index>=0) {
					this.selection.value.splice(index,1)
				} else {
					this.selection.value.push(item.id)
				}
			},
			selectAll() {
				this.selection.value = this.selection.arr.map(x=>x.id)
			},
			
			popSubmit () {
				let tempSelect = JSON.parse(JSON.stringify(this.selection))
				let valueHave = tempSelect.arr.filter(x=>tempSelect.value.includes(x.id))
				this.selectionItem.value = tempSelect.value
				this.selectionItem.valueStr = valueHave.map(x=>x.name).join(',')
				this.$refs.popup.close()
			},
			
			uploadImg() {
				uni.chooseImage({
					success: (res) => {
						for(let i =0 ;i<res.tempFilePaths.length;i++) {
							let param = {img:res.tempFilePaths[i], tempFile:res.tempFiles[i] }
							this.fileList.push(param)
						}
						console.log(this.fileList)
						
					},
					fail:()=> {
						uni.showToast({
							title:'上传失败',
							icon:'none'
						})
					}
				});
			},
			
			// 选择数据时的数据处理
			handleSubmitData() {
				let data = []
				if (this.valueType == 'lingo_ids') {
					data = this.lingoIds
				}
				if (this.valueType == 'scenic_ids') {
					data = this.scenicIds
				}
				
				let value = []
				data.forEach(v=>{
					if(Array.isArray(v.value) && v.value.length>0) {
						value.push(v)
					}
				})
				
				this.inputValue = value.map(v=>v.value.join(',')).join(',')
				
				this.inputValueStr = value.map(v=>v.valueStr).join(',')
				console.log(this.inputValue,this.inputValueStr)
			},

			submit() {
				this.handleSubmitData()
				
				uni.$emit("updateInfo", {
					msgType: 'registerInfo',
					data: {
						valueType: this.valueType,
						inputValue: this.inputValue,
						inputValueStr: this.inputValueStr
					}
				})
				this.goBack()
			},

		}
	}
</script>

<style scoped lang="scss">
	view {
		box-sizing: content-box;
	}
	.bg{
		min-height: 100vh;
		overflow-x: hidden;
		background: white;
		padding-bottom: 50rpx;
	}

	.empty-value{
		font-weight: 500;
		font-size: 28rpx;
		color: #999999;
	}
	
	.nickname-box {
		display: flex;
		align-items: center;
		background: white;
		margin-bottom: 100rpx;
		font-size: 30rpx;
		height: 70rpx;
		border-bottom: 1rpx solid #D8D8D8;
		span {
			flex-shrink: 0;
		}
		input {
			flex: 1;
			font-size: 30rpx;
			display: block;
		}
	}
	

	.user-other-info {
		padding:30rpx;
	}

	.userinfo-item {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #333;
		position: relative;
		span{
			flex-shrink: 0;
			width: 120rpx;
		}
		&>view{
			flex: 1;
			padding: 40rpx 10rpx 40rpx 0;
			margin-left: 30rpx;
			border-bottom: 1px solid #D8D8D8;
		}
	}
	.btn-tao {
		width: 333rpx;
		height: 80rpx;
		background: #96684F;
		border-radius: 40rpx;
		text-align: center;
		font-size: 30rpx;
		line-height: 80rpx;
		color: #FFFFFF;
		margin: 68rpx auto 0;
	}
	
	.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: 900rpx;
			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;
			}
		}
	}
	
	.language-doc-container{
		display: flex;
		align-items: flex-start;
		padding-top: 40rpx;
		span{
			flex-shrink: 0;
			width: 120rpx;
		}
		.img-container{
			flex:1;
			flex-shrink: 0;
			display: flex;
			flex-wrap: wrap;
			padding-left: 20rpx;
			
			.doc-image{
				width: 141rpx;
				height: 151rpx;
				border-radius: 13rpx;
				margin: 0 20rpx 20rpx 0;
				background: #F1F1F1;
			}
			
			.upload-image{
				width: 43rpx;
				height: 41rpx;
			}
		}
	}
</style>