403 lines
13 KiB
Vue
403 lines
13 KiB
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>李四</span></p>
|
|||
|
|
<p>等级：<span>金牌咨询师</span></p>
|
|||
|
|
</div>
|
|||
|
|
<!-- 形象照 -->
|
|||
|
|
<div class="personal-item">
|
|||
|
|
<p>形象照</p>
|
|||
|
|
<div class="personal-txt">
|
|||
|
|
<div class="personal-photo">
|
|||
|
|
<span>上传图片的区域，照片必须使用固定的宽高比16:17，比如宽400像素，高425像素，或其它同等比例</span>
|
|||
|
|
<!-- <img src="" alt=""> -->
|
|||
|
|
</div>
|
|||
|
|
<div class="edit-btn">上传</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,
|
|||
|
|
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:'', //选择价格值
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.isScroll = true;
|
|||
|
|
window.addEventListener("scroll", this.eventScrollTop);
|
|||
|
|
},
|
|||
|
|
methods:{
|
|||
|
|
// 城市选择
|
|||
|
|
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;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 页面跳转
|
|||
|
|
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>
|