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" v-for="(item,i) in lingoIds" :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 class="language-doc-container">
					<span>证明材料</span>
					<view class="img-container">
						<view v-for="(file,i) in fileList" class="doc-image" :key="i">
							
							<image :src="showImg(file)" class="doc-image"  ></image>
							<view class="doc-del" @click.native="removeFile(i)">x</view>
							
						</view>
						
						
						<view class="doc-image flex flex-center" @click="uploadImage()">
							<image class="upload-image" :src="showImg('/uploads/20241202/33e04a3b13241a6705616f6d6db315ce.png')"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 亮点 -->
			<view class="scenic-container" v-else-if="valueType=='sparkle_text'">
				<view class="userinfo-item" v-for="(item,i) in speakText" :key="i">
					<span>{{i==0?'主亮点':`副亮点${i}`}}</span>
					<view class="point">
						<input v-model="item.text" type="text" placeholder="请输入内容" />
						
						<uni-icons v-if="i!=0" class="del-icon" type="trash" size="20" @click.native="delText(i)"></uni-icons>
					</view>
					
				</view>
				
				<view class="add-btn" @click="addText">+ 添加更多</view>
			</view>
			<!-- 视频 -->
			<view class="video-container" v-else-if="valueType=='video_list'">
				<view class="top-del" style="text-align: right;padding-bottom: 15rpx;position: relative;">
					<uni-icons type="trash" size="19" @click.native="changeDeleteMode(true)"></uni-icons>
					<view v-if="deleteIndex.length>0" class="del-num">{{deleteIndex.length}}</view>
				</view>
				<view class="video-upload-container">
					<view v-show="!deleteMode" class="video-upload-image flex flex-column flex-center" 
						@click="uploadVideo()" style="border: 1px dashed #ADADAD;">
						<image class="upload-image" style="margin-bottom: 12rpx;" :src="showImg('/uploads/20241202/33e04a3b13241a6705616f6d6db315ce.png')"></image>
						上传视频
					</view>
					
					<view class="video-upload-image" v-for="(file,i) in fileList" :key="i">
						<video :src="showImg(file)" class="video-upload-image" preload="metadata" 
						:controls="false" :show-progress="false" :show-fullscreen-btn="false"
						:show-play-btn="false" :show-center-play-btn="false" :show-loading="false"></video>
						
						<view class="cover-div">
							<view class="cover-play" @click="playVideo(file)">
								<image style="width: 66rpx;height: 66rpx;" :src='showImg("/uploads/20241202/44b29b02b77b0a0342bb38c2d9282f49.png")'></image>
							</view>
							<view :class="['delete-container', deleteIndex.includes(i)?'selected':'']" v-if="deleteMode" @click.stop="changeDeleteIndex(i)">
								<image v-if="!deleteIndex.includes(i)" :src="showImg('/uploads/20241202/b6e64e71e01a6cfd8ade6c639583357b.png')" title="未选中"></image>
								<image v-else :src="showImg('/uploads/20241202/21f56765ccdc74a07fbd3b30a72a87a0.png')" title="选中"></image>
							</view>
						</view>
					</view>
						
						
						
					
				</view>
			</view>
			
			<view class="nickname-box" v-else>
				<input v-model="inputValue" type="text" placeholder="请输入内容" />
			</view>
			
			<!-- 底部保存 -->
			<view class="btn-tao" @click="submit" v-if="!['scenic_ids','sparkle_text','video_list'].includes(valueType)">保存</view>
			
			<view class="bottom-btn" v-if="['scenic_ids','sparkle_text'].includes(valueType)">
				<view class="btn" @click="goBack()" >取消</view>
				<view class="btn" @click="submit()" >保存</view>
			</view>
			
			<view class="bottom-btn-fixed" v-if="['video_list'].includes(valueType)">
				<template v-if="!deleteMode">
					<view class="btn" @click="goBack()" >取消</view>
					<view class="btn" @click="submit()" >保存</view>
				</template>
				<template v-else>
					<view class="btn" @click="changeDeleteMode(false)" >取消删除</view>
					<view class="btn" @click="confirmDelVideo()" >确认删除</view>
				</template>
			</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: '语言能力'},
					{key: 'sparkle_text', value: '核心亮点'},
					{key:'video_list', value: '讲解视频'},
					{key:'honor', value: '荣誉称号'}
				],
				lingoIds: [],
				scenicIds: [],
				speakText: [],
				honor: [],
				
				selectionItem: null, // 景点选中更改的值
				selection: {arr: [], value: [], valueStr: ''}, //弹窗值
				
				fileList: [],
				deleteIndex: [],
				deleteMode: false, // 视频删除
			}
		},
		onLoad(options) {
			this.initData(options)
		},
		

		methods: {
			initData (options) {
				uni.setNavigationBarTitle({title: ''});
				this.valueType = ''
				this.inputValue = ''
				this.inputValueStr = ''
				this.deleteMode = false
				this.fileList = []
				this.speakText = []
				if (options.inputValue && options.inputValue!='null' && options.inputValue!='undefined') {
					this.inputValue = options.inputValue
				}
				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()
					}
					if (this.valueType == 'sparkle_text') {
						this.initSparkleText()
					}
					if (this.valueType == 'video_list') {
						this.initVideo()
					}
					if (this.valueType == 'honor') {
						this.initHonor()
					}
					
				} else {
					this.goBack()
					return
				}
				

				
			},
			// 导游语言列表
			async initLingoList() {
				
				let res = await this.Post({},'/api/guide/getGuideLingoList')
				let valueArr = []
				try {
					valueArr = (this.inputValue || '').split(',').map(v=>{return Number(v)})
				} catch(e) {}
				console.log(valueArr)
				let param = [{arr: res.data||[],name:'语言能力'}]
				this.lingoIds = param.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(',')}
				})
				try {
					let fileList =  uni.getStorageSync('userfileList')
					this.fileList = JSON.parse(fileList)
					console.log(this.fileList)
				} catch(e) {
					this.fileList = []
				}

			},
			// 景区列表
			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(',')}
				})
			},
			// 亮点
			initSparkleText () {
				let arr = (this.inputValue||'').split(',').map(v=>{
					return {text: v}
				})
				this.speakText = arr 
			},
			// 视频
			initVideo () {
				try {
					let fileList =  uni.getStorageSync('userVideofileList')
					this.fileList = JSON.parse(fileList)
					console.log(this.fileList)
				} catch(e) {
					this.fileList = []
				}
			},
			initHonor () {
				try {
					let fileList =  uni.getStorageSync('userVideofileList')
					this.fileList = JSON.parse(fileList)
					console.log(this.fileList)
				} catch(e) {
					this.fileList = []
				}
			},
			
			addText () {
				this.speakText.push({text:''})
			},
			delText (index) {
				this.speakText.splice(index,1)
			},
			
			
			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))
				if (['scenic_ids','lingo_ids'].includes(this.valueType)) {
					this.selectionItem.value = tempSelect.value
					this.selectionItem.valueStr = valueHave.map(x=>x.name).join(',')
				}
				this.$refs.popup.close()
			},
			
			uploadImage() {
				let _this = this
				let url = this.NEWAPIURL
				// #ifdef H5
				 url = '/api'
				// #endif
				url+='/api/Common/upload'
				uni.chooseImage({
					count:1,
					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)
						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.fileList.push(res.data.url)
									}
								} catch(e) {}
								
								
							},
							fail:()=> {
								uni.showToast({
									title:'上传失败',
									icon:'none'
								})
							}
						});
						
					},
					fail:()=> {
						uni.showToast({
							title:'上传失败',
							icon:'none'
						})
					}
				});
			},
			uploadVideo() {
				let _this = this
				let url = this.NEWAPIURL
				// #ifdef H5
				 url = '/api'
				// #endif
				url+='/api/Common/upload'
				uni.showLoading()
				uni.chooseVideo({
					count:1,
					success: (res) => {
						
						const tempFilePath = res.tempFilePath;
						const uploadTask = uni.uploadFile({
							url: url,
							filePath: tempFilePath,
							name: 'file',
							success: (uploadFileRes) => {
								uni.hideLoading()
								try {
									let res = JSON.parse(uploadFileRes.data)
									if (res.code == 1) {
										_this.fileList.push(res.data.url)
									}
								} catch(e) {}
								
								
							},
							fail:()=> {
								uni.hideLoading()
								uni.showToast({
									title:'上传失败',
									icon:'none'
								})
							}
						});
						
					},
					fail:()=> {
						uni.hideLoading()
						uni.showToast({
							title:'上传失败',
							icon:'none'
						})
					}
				});
			},
			
			removeFile(index) {
				this.fileList.splice(index,1)
			},
			
			playVideo (file) {
				let url = encodeURIComponent(file)
				uni.navigateTo({
					url: `/subPackages/video/index?url=${url}`
				})
			},
			changeDeleteMode (value) {
				this.deleteIndex = []
				this.deleteMode = value
			},
			changeDeleteIndex (index) {
				let i = this.deleteIndex.findIndex(v=>v==index)
				if (i>=0) {
					this.deleteIndex.splice(i,1)
				} else {
					this.deleteIndex.push(index)
				}
				console.log(this.deleteIndex)
			},
			
			confirmDelVideo () {
				this.fileList = this.fileList.filter((v,i)=>!this.deleteIndex.includes(i))
				this.changeDeleteMode(false)
			},
			
			
			// 校验和选择数据时的数据处理
			handleSubmitData() {
				// 景点数据处理
				if (["scenic_ids","lingo_ids"].includes(this.valueType)) {
					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)
				}
				
				if (this.valueType == 'sparkle_text') {
					if (!this.speakText[0].text) {
						uni.showToast({
							title: '主亮点必填',
							icon:'none'
						})
						return true
					}
					this.inputValue = this.speakText.filter(v=>v.text)
					this.inputValueStr = this.inputValue.map(v=>v.text).join(',')
				}
				
				if (this.valueType == 'video_list') {
					this.inputValue = JSON.parse(JSON.stringify(this.fileList))
					this.inputValueStr = ''
				}
			},

			submit() {
				let res = this.handleSubmitData()
				if (res) return
				
				uni.$emit("updateInfo", {
					msgType: 'registerInfo',
					data: {
						valueType: this.valueType,
						inputValue: this.inputValue,
						inputValueStr: this.inputValueStr,
						fileList: this.fileList
					}
				})
				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: 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;
			}
		}
	}
	
	.del-num{
		position: absolute;
		top: -5rpx;
		right: -10rpx;
		background: #E5131B;
		color: white;
		width: 24rpx;
		height: 24rpx;
		text-align: center;
		line-height: 24rpx;
		font-size: 20rpx;
		border-radius: 50%;
	}
	
	.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 40rpx 20rpx 0;
				background: #F1F1F1;
				position: relative;
			}
			.doc-del{
				width: 40rpx;
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: black;
				color: white;
				position: absolute;
				top: -10rpx;
				right: -10rpx;
				border-radius: 50%;
			}
			
			.upload-image{
				width: 43rpx;
				height: 41rpx;
			}
		}
	}
	.userinfo-item .point{
		
		display: flex;
		align-items: center;
		justify-content: space-between;
		input{
			font-size: 28rpx;
		}
		.del-icon{
			padding-left: 20rpx;
		}
	}
	
	.add-btn{
		width: 343rpx;
		height: 72rpx;
		background: #F1F1F1;
		border-radius: 13rpx;
		line-height: 72rpx;
		text-align: center;
		font-weight: 500;
		font-size: 28rpx;
		margin: 55rpx auto 0;
	}
	

	.video-upload-container{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.upload-image{
			width: 72rpx;
			height: 68.67rpx;
		}
		.video-upload-image{
			width: 330rpx;
			height: 330rpx;
			background: #F1F1F1;
			border-radius: 10rpx;
			margin-bottom:20rpx;
			position: relative;
			overflow: hidden;
			
			.cover-div{
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				.cover-play{
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					color: white;
					position: absolute;
					z-index: 5;
				}
				.delete-container{
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					position: absolute;
					z-index: 10;
					padding: 20rpx;
					image{
						width: 44rpx;
						height: 44rpx;
						
					}
				}
				.delete-container.selected{
					background: rgba(0,0,0,0.8);
				}
			}
		}
	}

	
	.bottom-btn{
		padding: 66rpx 80rpx 0;
		display: flex;
		justify-content: space-between;
		.btn{
			width: 244rpx;
			height: 81rpx;
			border-radius: 40rpx;
			border: 1px solid #000000;
			line-height: 81rpx;
			text-align: center;
			font-weight: 500;
			font-size: 36rpx;
			color: #010101;
		}
		.btn:last-of-type{
			background: #96684F;
			border: none;
			color: #FFFFFF;
		}
	}
	.bottom-btn-fixed{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 133rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(102,102,102,0.24);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 92rpx;
		box-sizing: border-box;
		.btn{
			width: 244rpx;
			height: 81rpx;
			border-radius: 40rpx;
			border: 1px solid #000000;
			line-height: 81rpx;
			text-align: center;
			font-weight: 500;
			font-size: 36rpx;
			color: #010101;
		}
		.btn:last-of-type{
			background: #96684F;
			border: none;
			color: #FFFFFF;
		}
	}
	
</style>