zycp-demo/src/views/consultant/edit.vue

<template>
    <div class="content my-content">
		<!-- 头部 -->
		<div :class="{'header':true,'scroll white':isScrollTop,'white':true}">
			<div class="back" @click="$router.go(-1)"><img src="../../assets/images/home/expert/back.png" alt=""></div>
			<div class="header-title">修改个人信息</div>
		</div>
		<div class="edit pull-content">
			<div class="edit-list">
				<div class="personal-item">
					<p>姓名：<span>{{name}}</span></p>
					<p>等级：<span>{{tags_text}}</span></p>
				</div>
				<!-- 形象照 -->
				<div class="personal-item">
					<p>形象照</p>
					<div class="personal-txt">
						<div class="personal-photo">
							<img v-if="myAvatar" :src="host + myAvatar">
							<img v-else-if="handImg" :src="host + handImg">
							<span v-else>上传图片的区域，照片必须使用固定的宽高比16:17，比如宽400像素，高425像素，或其它同等比例</span>
						</div>
						<div class="edit-btn">
							<input class="inputB" @change="imgIny($event)" type="file" />
							上传
						</div>
					</div>
				</div>
				<!-- 关键特征 -->
				<div class="personal-item">
					<p>关键特征1</p>
					<div class="left">
						<div class="personal-txt">
							<!-- 文本显示 -->
							<!-- <span>硕士</span> -->
							<!-- 输入框 -->
							<input class="personal-input" />
						</div>
						<!-- 按钮事件 -->
						<div class="edit-btn">确认</div>
					</div>
				</div>
				<div class="personal-item">
					<p>关键特征2</p>
					<div class="left">
						<div class="personal-txt">
							<!-- 文本显示 -->
							<!-- <span>硕士</span> -->
							<!-- 输入框 -->
							<input class="personal-input" />
						</div>
						<!-- 按钮事件 -->
						<div class="edit-btn">确认</div>
					</div>
				</div>
				<div class="personal-item">
					<p>关键特征3</p>
					<div class="left">
						<div class="personal-txt">
							<!-- 文本显示 -->
							<!-- <span>硕士</span> -->
							<!-- 输入框 -->
							<input class="personal-input" />
						</div>
						<!-- 按钮事件 -->
						<div class="edit-btn">确认</div>
					</div>
				</div>
				<div class="personal-item">
					<p>关键特征4</p>
					<div class="left">
						<div class="personal-txt">
							<!-- 文本显示 -->
							<!-- <span>硕士</span> -->
							<!-- 输入框 -->
							<input class="personal-input" />
						</div>
						<!-- 按钮事件 -->
						<div class="edit-btn">确认</div>
					</div>
				</div>
				<!-- 服务口号 -->
				<div class="personal-item">
					<p>服务口号</p>
					<div class="personal-txt">
					  <div class="personal-top">
						<textarea class="kh-input" v-model="sloganData" placeholder="请输入服务口号"></textarea>
					  </div>
					  <div class="edit-btn">确认</div>
					</div>
				</div>
				<!-- 个人简介 start -->
				<div class="personal-item">
					<p>个人简介</p>
					<div class="personal-txt">
					  <div class="personal-top">
						<textarea v-model="bodyData" placeholder="介绍您最闪光点，不要少于200字，不要多于300字"></textarea>
					  </div>
					  <div class="edit-btn">确认</div>
					</div>
				</div>
				<!-- 服务范围补充说明 -->
				<div class="personal-item">
					<p>服务范围补充说明</p>
					<div class="personal-txt">
					  <div class="personal-top">
						<textarea v-model="explainData" placeholder="请填写补充说明"></textarea>
					  </div>
					  <div class="edit-btn">确认</div>
					</div>
				</div>
						
				<!-- 请择3个重点服务省域 -->
				<div class="personal-item">
					<p>请择3个重点服务省域</p>
					<div class="personal-txt">
					  <div class="city-item">
						<div>重点服务省域1：</div>
						<input type="text" v-model="provinceData[cityIndex1].title" readonly="readonly" @click="openCity1()"/>
					  </div>
					  <div class="city-item">
						<div>重点服务省域2：</div>
						<input type="text" v-model="provinceData[cityIndex2].title" readonly="readonly" @click="openCity2()"/>
					  </div>
					  <div class="city-item">
						<div>重点服务省域3：</div>
						<input type="text" v-model="provinceData[cityIndex3].title" readonly="readonly" @click="openCity3()"/>
					  </div>
					</div>
				</div>
				<!-- 服务价格（您是专家级咨询师可自由定价） -->
				<div class="personal-item bottom-box">
					<p>服务价格（您是专家级咨询师可自由定价）</p>
					<div class="personal-txt">
					  <div class="price-item">
						<div> 北京、上海</div>
						<input type="text" v-model="priceData[priceIndex1].title" readonly="readonly" @click="openPrice1()"/>
					  </div>
					  <div class="price-item">
						<div>天津、重庆、江苏、浙江、广东、福建</div>
						<input type="text" v-model="priceData[priceIndex2].title" readonly="readonly" @click="openPrice2()"/>
					  </div>
					  <div class="price-item">
						<div>辽宁、河北、山东、海南、湖北、湖南</div>
						<input type="text" v-model="priceData[priceIndex3].title" readonly="readonly" @click="openPrice3()"/>
					  </div>
					  <div class="price-item">
						<div>其他省域(老高考)</div>
						<input type="text" v-model="priceData[priceIndex4].title" readonly="readonly" @click="openPrice4()"/>
					  </div>
					  <div class="edit-btn">确认</div>
					</div>
				</div>
			</div>
		</div>
		<div class="preview-btns">
			<span>预览列表页效果</span>
			<span>预览详情页效果</span>
		</div>
		<!-- 地址弹出框1 -->
		<div class="addr-select-bg" v-show="isCity1" @click="isCity1=!isCity1"></div>
		<div class="addr-select-item" v-show="isCity1">
			<div class="addr-btns">
				<span>请选择城市</span>
				<span @click="isCity1=!isCity1">取消</span>
			</div>
			<ul>
				<li :class="{'checked':index == cityIndex1}" @click="getCityValue1(index,item)" v-for="(item,index) in provinceData" :key="index">{{item.title}}<img v-show="index==cityIndex1" src="../../assets/images/home/expert/yes.png"></li>
			</ul>
		</div>
		
		<!-- 地址弹出框2 -->
		<div class="addr-select-bg" v-show="isCity2" @click="isCity2=!isCity2"></div>
		<div class="addr-select-item" v-show="isCity2">
			<div class="addr-btns">
				<span>请选择城市</span>
				<span @click="isCity2=!isCity2">取消</span>
			</div>
			<ul>
			 	<li :class="{'checked':index == cityIndex2}" @click="getCityValue2(index,item)" v-for="(item,index) in provinceData" :key="index">{{item.title}}<img v-show="index==cityIndex2" src="../../assets/images/home/expert/yes.png"></li>
			</ul>
		</div>
		<!-- 地址弹出框3 -->
		<div class="addr-select-bg" v-show="isCity3" @click="isCity3=!isCity3"></div>
		<div class="addr-select-item" v-show="isCity3">
			<div class="addr-btns">
				<span>请选择城市</span>
				<span @click="isCity3=!isCity3">取消</span>
			</div>
			<ul>
			 	<li :class="{'checked':index == cityIndex3}" @click="getCityValue3(index,item)" v-for="(item,index) in provinceData" :key="index">{{item.title}}<img v-show="index==cityIndex3" src="../../assets/images/home/expert/yes.png"></li>
			</ul>
		</div>
		
		<!-- 价格弹出框1 -->
		<div class="addr-select-bg" v-show="isPrice1" @click="isPrice1=!isPrice1"></div>
		<div class="addr-select-item" v-show="isPrice1">
			<div class="addr-btns">
				<span>请选择价格</span>
				<span @click="isPrice1=!isPrice1">取消</span>
			</div>
			<ul>
			 	<li :class="{'checked':index == priceIndex1}" @click="getPriceValue1(index,item)" v-for="(item,index) in priceData" :key="index">{{item.title}}<img v-show="index==priceIndex1" src="../../assets/images/home/expert/yes.png"></li>
			</ul>
		</div>
		<!-- 价格弹出框2 -->
		<div class="addr-select-bg" v-show="isPrice2" @click="isPrice2=!isPrice2"></div>
		<div class="addr-select-item" v-show="isPrice2">
			<div class="addr-btns">
				<span>请选择价格</span>
				<span @click="isPrice2=!isPrice2">取消</span>
			</div>
			<ul>
			 	<li :class="{'checked':index == priceIndex2}" @click="getPriceValue2(index,item)" v-for="(item,index) in priceData" :key="index">{{item.title}}<img v-show="index==priceIndex2" src="../../assets/images/home/expert/yes.png"></li>
			</ul>
		</div>
		<!-- 价格弹出框3 -->
		<div class="addr-select-bg" v-show="isPrice3" @click="isPrice3=!isPrice3"></div>
		<div class="addr-select-item" v-show="isPrice3">
			<div class="addr-btns">
				<span>请选择价格</span>
				<span @click="isPrice3=!isPrice3">取消</span>
			</div>
			<ul>
			 	<li :class="{'checked':index == priceIndex3}" @click="getPriceValue3(index,item)" v-for="(item,index) in priceData" :key="index">{{item.title}}<img v-show="index==priceIndex3" src="../../assets/images/home/expert/yes.png"></li>
			</ul>
		</div>
		<!-- 价格弹出框4 -->
		<div class="addr-select-bg" v-show="isPrice4" @click="isPrice4=!isPrice4"></div>
		<div class="addr-select-item" v-show="isPrice4">
			<div class="addr-btns">
				<span>请选择价格</span>
				<span @click="isPrice4=!isPrice4">取消</span>
			</div>
			<ul>
			 	<li :class="{'checked':index == priceIndex4}" @click="getPriceValue4(index,item)" v-for="(item,index) in priceData" :key="index">{{item.title}}<img v-show="index==priceIndex4" src="../../assets/images/home/expert/yes.png"></li>
			</ul>
		</div>
    </div>
</template>

<script>
    export default {
        name: "edit",
		data(){
		    return {
				isScrollTop: false,
				name:'',
				tags_text: '',
				sloganData: '',
				bodyData: '',
				explainData: '',
				
				isCity1: false, //城市列表是否显示
				provinceData:[
					{title:'北京'},
					{title:'上海'},
					{title:'广州'},
					{title:'四川'},
					{title:'重庆'},
					{title:'山西'},
					{title:'贵州'},
					{title:'河南'},
					{title:'江西'},
					{title:'宁夏'},
					{title:'香港'},
					{title:'台湾'},
					{title:'澳门'}
				],
				cityIndex1: 0,
				cityValue1:'', //选择城市编号
				
				isCity2: false, //城市列表是否显示
				cityIndex2: 0,
				cityValue2:'', //选择城市编号
				
				isCity3: false, //城市列表是否显示
				cityIndex3: 0,
				cityValue3:'', //选择城市编号
				
				
				// 价格区间
				priceData:[
					{title:'3000-5000'},
					{title:'5000-8000'},
					{title:'8000-12000'},
					{title:'12000-15000'},
					{title:'15000-18000'},
					{title:'18000-22000'}
				],
				isPrice1: false, //价格列表是否显示
				priceIndex1: 0,
				priceValue1:'', //选择价格值
				
				isPrice2: false, //价格列表是否显示
				priceIndex2: 0,
				priceValue2:'', //选择价格值
				
				isPrice3: false, //价格列表是否显示
				priceIndex3: 0,
				priceValue3:'', //选择价格值
				
				isPrice4: false, //价格列表是否显示
				priceIndex4: 0,
				priceValue4:'', //选择价格值
				handImg: '' ,//头像
				
				myAvatar: ''
				
		    }
		},
		created() {
			this.isScroll = true;
			window.addEventListener("scroll", this.eventScrollTop);
		},
		mounted() {
			this.checkExperInfo();
		},
        methods:{
			// 上传形象照
			imgIny(e) {
				let that = this;
				const files = e.target.files;
				console.log(files[0]);
				console.log({
					image: files[0]
				});
				var fromdata = new FormData();
				fromdata.append("image", files[0]);
				this.axios
					.post(this.HOME + "/api/file/upload/image", fromdata, {
						headers: {
							"Content-Type": "multipart/form-data",
						},
					})
					.then(function(res) {
						that.myAvatar = res.data.data.src;
						console.log(that.myAvatar, 123);
					})
					.catch(function(error) {
						console.log(error);
					});
			},
			// 城市选择
			openCity1(){
				this.isCity1=!this.isCity1;
			},
			getCityValue1(index,item){
				this.cityValue1 = item.title;
				this.cityIndex1 = index;
				this.isCity1=false;
			},
			openCity2(){
				this.isCity2=!this.isCity2;
			},
			getCityValue2(index,item){
				this.cityValue2 = item.title;
				this.cityIndex2 = index;
				this.isCity2=false;
			},
			openCity3(){
				this.isCity3=!this.isCity3;
			},
			getCityValue3(index,item){
				this.cityValue3 = item.title;
				this.cityIndex3 = index;
				this.isCity3=false;
			},
			// 价格选择
			openPrice1(){
				this.isPrice1=!this.isPrice1;
			},
			getPriceValue1(index,item){
				this.priceValue1 = item.title;
				this.priceIndex1 = index;
				this.isPrice1=false;
			},
			openPrice2(){
				this.isPrice2=!this.isPrice2;
			},
			getPriceValue2(index,item){
				this.priceValue2 = item.title;
				this.priceIndex2 = index;
				this.isPrice2=false;
			},
			openPrice3(){
				this.isPrice3=!this.isPrice3;
			},
			getPriceValue3(index,item){
				this.priceValue3 = item.title;
				this.priceIndex3 = index;
				this.isPrice3=false;
			},
			openPrice4(){
				this.isPrice4=!this.isPrice4;
			},
			getPriceValue4(index,item){
				this.priceValue4 = item.title;
				this.priceIndex4 = index;
				this.isPrice4=false;
			},
			
			
			// 查询咨询师信息
			checkExperInfo(){
				let that =this;
				this.axios
					.post(this.HOME + "/api/user/center-info", {
						
					})
					.then(function(res) {
						let newArray = res.data.data.expert;
						that.handImg = newArray.avatar;
						that.name = newArray.name;
						that.tags_text = newArray.tags_text;
						that.sloganData = newArray.slogan;
						console.log(res.data.data.expert,123);
					});
			  },
			
			
			// 页面跳转
			goPage(path){
			    this.$router.push(path);
			},
			
			// 滚动改变样式
			eventScrollTop() {
				let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
				if (scrollTop >= 5) {
					if (this.isScroll) {
						this.isScroll = false;
						this.isScrollTop = true;
					}
				} else {
					if (!this.isScroll) {
						this.isScroll = true;
						this.isScrollTop = false;
					}
				}
			}
        },
		destroyed() {
			window.removeEventListener("scroll", this.eventScrollTop);
		},
		//keep-alive进入时触发
		activated() {
			this.isScroll = true;
			window.addEventListener("scroll", this.eventScrollTop)
		},
		//keep-alive离开时触发
		deactivated() {
			window.removeEventListener("scroll", this.eventScrollTop);
		}
    }
</script>

<style scoped>
	
</style>