tangyi
/
zycp-demo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

修改

master
Lee-1203 2022-03-04 20:26:35 +08:00
parent 605627780c
commit 020e92879e
9 changed files with 994 additions and 800 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

@ -736,6 +736,10 @@ textarea {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: .22rem .12rem; background-size: .22rem .12rem;
background-position: center right; background-position: center right;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
.addr-select>div{ .addr-select>div{
width: 100%; width: 100%;

1
src/main.js
View File

@ -10,7 +10,6 @@ Vue.prototype.HOME = '/api'
axios.interceptors.request.use(config => { axios.interceptors.request.use(config => {
if (config.url!="/api/api/user/login-by-Phone"&&config.url!="/api/api/common/send-sms-captcha") { if (config.url!="/api/api/user/login-by-Phone"&&config.url!="/api/api/common/send-sms-captcha") {
if (!localStorage.userData) { if (!localStorage.userData) {
window.alert("请登陆") window.alert("请登陆")
router.replace('/'); router.replace('/');

31
src/views/home/expert/ask.vue
View File

@ -7,7 +7,7 @@
</div> </div>
<div class="ask pull-content list-section"> <div class="ask pull-content list-section">
<div class="ask-top"> <div class="ask-top">
<span><img src="../../../assets/images/home/expert/expert-list.jpg" ></span> <span><img :src="host + expertDetail.avatar" ></span>
<p>请使用以下两种方式加入钉钉专属服务群，我 在您的专属服务群回答您的问题。</p> <p>请使用以下两种方式加入钉钉专属服务群，我 在您的专属服务群回答您的问题。</p>
</div> </div>
<div class="ask-mode-item"> <div class="ask-mode-item">
@ -17,12 +17,12 @@
<div class="ask-mode-list"> <div class="ask-mode-list">
<div class="ask-mode-txt" v-show="isActive"> <div class="ask-mode-txt" v-show="isActive">
<p>下载二维码并用钉钉扫一扫进入专属群</p> <p>下载二维码并用钉钉扫一扫进入专属群</p>
<img src="../../../assets/images/home/expert/ewm.jpg" alt=""> <img :src="host + expertDetail.im_group_qr">
<span>点击下载二维码</span> <span>点击下载二维码</span>
</div> </div>
<div class="ask-mode-txt" v-show="!isActive"> <div class="ask-mode-txt" v-show="!isActive">
<p>专属群DingTalk链接<span>(复制此链接，在浏览器地址栏粘贴后打开钉钉， 自动进入专属群)</span></p> <p>专属群DingTalk链接<span>(复制此链接，在浏览器地址栏粘贴后打开钉钉， 自动进入专属群)</span></p>
<div class="mode-links">{{linkUrl}}</div> <div class="mode-links">{{expertDetail.im_group_link}}</div>
<span @click="copyUrl()">点击复制此链接</span> <span @click="copyUrl()">点击复制此链接</span>
</div> </div>
</div> </div>
@ -37,30 +37,49 @@
return { return {
isScrollTop: false, isScrollTop: false,
isActive: true, isActive: true,
linkUrl: 'dingtalk://dingtalkclient/page/link?pc_slide=true&url=https%3A%2F%2Fh5.dingtalk.com%2Fservice-group%2Findex.html%3FjoinGroupCode%3Dp3cAnJVnxMMiPvkT1zJLiiup35T4nkdE3uNFJIiiUkGhZSCsiSL0qydvCuolCftWNT7C%23%2Fjoin-group' id:'',
expertDetail:[],
} }
}, },
created() { created() {
this.isScroll = true; this.isScroll = true;
window.addEventListener("scroll", this.eventScrollTop); window.addEventListener("scroll", this.eventScrollTop);
this.id = this.$route.query.id;
}, },
mounted() { mounted() {
this.getDetailData();
}, },
computed: { computed: {
}, },
methods: { methods: {
// 获取专家详情
getDetailData() {
let that = this;
this.axios
.post(this.HOME + "/api/consumer/expert-info", {
id: that.id
})
.then(function (res) {
console.log(res,111111);
that.expertDetail = res.data.data;
});
},
// 复制链接 // 复制链接
copyUrl(){ copyUrl(){
if(this.expertDetail.im_group_link != ''){
let input = document.createElement("input"); // 直接构建input let input = document.createElement("input"); // 直接构建input
input.value = this.linkUrl; // 设置内容 input.value = this.expertDetail.im_group_link; // 设置内容
document.body.appendChild(input); // 添加临时实例 document.body.appendChild(input); // 添加临时实例
input.select(); // 选择实例内容 input.select(); // 选择实例内容
document.execCommand("Copy"); // 执行复制 document.execCommand("Copy"); // 执行复制
document.body.removeChild(input); // 删除临时实例 document.body.removeChild(input); // 删除临时实例
alert("链接复制成功") alert("链接复制成功")
}
}, },
// 滚动改变样式 // 滚动改变样式
eventScrollTop() { eventScrollTop() {
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop; let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

28
src/views/home/expert/detail.vue
View File

@ -71,7 +71,7 @@
created() { created() {
this.isScroll = true; this.isScroll = true;
window.addEventListener("scroll", this.eventScrollTop); window.addEventListener("scroll", this.eventScrollTop);
this.id = this.$route.params.id; this.id = this.$route.query.id;
}, },
mounted() { mounted() {
this.getDetailData(); this.getDetailData();
@ -80,6 +80,19 @@
}, },
methods: { methods: {
// 获取专家详情
getDetailData() {
let that = this;
this.axios
.post(this.HOME + "/api/consumer/expert-info", {
id: that.id
})
.then(function (res) {
that.expertDetail = res.data.data;
});
},
// 滚动显示头部
eventScrollTop() { eventScrollTop() {
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop; let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
if (scrollTop >= 5) { if (scrollTop >= 5) {
@ -94,18 +107,7 @@
} }
} }
}, },
// 获取专家详情
getDetailData() {
let that = this;
this.axios
.post(this.HOME + "/api/consumer/expert-info", {
id: that.id
})
.then(function (res) {
// console.log(res.data.data,111111);
that.expertDetail = res.data.data;
});
},
}, },
destroyed() { destroyed() {
window.removeEventListener("scroll", this.eventScrollTop); window.removeEventListener("scroll", this.eventScrollTop);

199
src/views/home/expert/index.vue
View File

@ -7,16 +7,16 @@
</div> </div>
<!-- 轮播图 --> <!-- 轮播图 -->
<div class="banner"> <div class="banner">
<img src="../../../assets/images/home/expert/banner.jpg" alt=""> <img :src="host + bannerSrc?host + bannerSrc:''">
</div> </div>
<!-- 领取咨询机会 --> <!-- 领取咨询机会 -->
<div class="expert-receive" @click="goPage('/information')" v-if="isReceive==0"> <div class="expert-receive" @click="goPage('/information')" v-if="isReceive==0">
<img src="../../../assets/images/home/expert/notice-01.png" alt=""> <img src="../../../assets/images/home/expert/notice-01.png">
<p>完善信息，立即领取免费咨询卡(1小时)</p> <p>完善信息，立即领取免费咨询卡(1小时)</p>
<span></span> <span></span>
</div> </div>
<div class="expert-receive expert-receive-01" v-if="isReceive==1"> <div class="expert-receive expert-receive-01" v-if="isReceive==1">
<img src="../../../assets/images/home/expert/notice-02.png" alt=""> <img src="../../../assets/images/home/expert/notice-02.png">
<p>您已领取一小时免费咨询权益，可向专家进行提问</p> <p>您已领取一小时免费咨询权益，可向专家进行提问</p>
</div> </div>
<!-- 导航 --> <!-- 导航 -->
@ -24,27 +24,18 @@
<ul class="expert-nav-item"> <ul class="expert-nav-item">
<li :class="{'active':current==index}" v-for="(item,index) in navData" :key="index" @click="changeNav(index)">{{item.title}}</li> <li :class="{'active':current==index}" v-for="(item,index) in navData" :key="index" @click="changeNav(index)">{{item.title}}</li>
</ul> </ul>
<!-- 城市 -->
<div class="addr-select"> <div class="addr-select">
<div @click="openAddr()">{{addrData[addrIndex].title}}</div> <div @click="openAddr()">{{addrData[addrIndex].name}}</div>
</div> </div>
</div> </div>
<!-- 地址弹出框 -->
<div class="addr-select-bg" v-show="isAddr" @click="isAddr=!isAddr"></div>
<div class="addr-select-item" v-show="isAddr">
<div class="addr-btns">
<span>请选择城市</span>
<span @click="isAddr=!isAddr">取消</span>
</div>
<ul>
<li :class="{'checked':index == addrIndex}" @click="getAddrValue(index,item)" v-for="(item,index) in addrData" :key="index">{{item.title}}<img v-show="index==addrIndex" src="../../../assets/images/home/expert/yes.png"></li>
</ul>
</div>
<!-- 咨询师列表 --> <!-- 咨询师列表 -->
<div class="expert-list-all section"> <div class="expert-list-all section">
<ul class="expert-list"> <ul class="expert-list">
<li v-for="(item,index) in expertData" :key="index"> <li v-for="(item,index) in expertData" :key="index">
<div class="expert-list-con" @click="goPage('/expert/detail')"> <div class="expert-list-con" @click="toDetail(item.id)">
<div class="expert-list-img"><img :src="host + item.avatar" alt=""></div> <div class="expert-list-img"><img :src="host + item.avatar"></div>
<div class="expert-list-txt"> <div class="expert-list-txt">
<div class="title"> <div class="title">
<h2>{{item.name}}</h2> <h2>{{item.name}}</h2>
@ -61,12 +52,29 @@
</div> </div>
</div> </div>
<div class="expert-list-btns"> <div class="expert-list-btns">
<div :class="{'btn':true,'noservice':isReceive==0}" @click="toAsk()">向TA提问</div> <div :class="{'btn':true,'noservice':isReceive==0}" @click="toAsk(item.id)">向TA提问</div>
<div class="btn" @click="toDetail(item.id)">查看详情</div> <div class="btn" @click="toDetail(item.id)">查看详情</div>
</div> </div>
</li> </li>
</ul> </ul>
</div> </div>
<!-- 地址弹出框 -->
<div class="addr-select-bg" v-show="isAddr" @click="isAddr=!isAddr"></div>
<div class="addr-select-item" v-show="isAddr">
<div class="addr-btns">
<span>请选择城市</span>
<span @click="isAddr=!isAddr">取消</span>
</div>
<ul>
<li :class="{'checked':index == addrIndex}" @click="getAddrValue(index,item)" v-for="(item,index) in addrData" :key="index">
{{item.name}}
<img v-show="index==addrIndex" src="../../../assets/images/home/expert/yes.png">
</li>
</ul>
</div>
<!-- 领取咨询卡弹出框 -->
<div class="my-confirm-bg" v-show="isConfirm" @click="isConfirm=!isConfirm"></div> <div class="my-confirm-bg" v-show="isConfirm" @click="isConfirm=!isConfirm"></div>
<div class="my-confirm" v-show="isConfirm"> <div class="my-confirm" v-show="isConfirm">
<p>您还未领取免费咨询卡，请前往领取！</p> <p>您还未领取免费咨询卡，请前往领取！</p>
@ -75,6 +83,8 @@
<span @click="closeEV()">取消</span> <span @click="closeEV()">取消</span>
</div> </div>
</div> </div>
<!-- 底部 -->
<tabbar :current="2"></tabbar> <tabbar :current="2"></tabbar>
</div> </div>
</template> </template>
@ -89,38 +99,23 @@
data() { data() {
return { return {
isScrollTop: false, isScrollTop: false,
name: '',
isReceive: 1, //是否领取咨询机会 isReceive: 1, //是否领取咨询机会
current: 0, current: 0,
isConfirm: false, isConfirm: false,
navData: [ bannerSrc: '', //banner图地址
{title:'所有专家'}, navData: [{
{title:'最近活跃'}, title: '所有专家'
{title:'多元升学'} }, {
], title: '最近活跃'
}, {
addrData:[ title: '多元升学'
{title:'北京'}, }],
{title:'上海'}, expertData: [], //专家列表
{title:'广州'}, addrData: [],
{title:'四川'},
{title:'北京'},
{title:'上海'},
{title:'广州'},
{title:'四川'},
{title:'北京'},
{title:'上海'},
{title:'广州'},
{title:'四川'},
{title:'北京'},
{title:'上海'},
{title:'广州'},
{title:'四川'}
],
addrIndex: 0, addrIndex: 0,
isAddr: false, //城市列表是否显示 isAddr: false, //城市列表是否显示
addrValue: '', //选择城市编号 addrValue: '', //选择城市编号
expertData: [],
} }
}, },
created() { created() {
@ -128,7 +123,9 @@
window.addEventListener("scroll", this.eventScrollTop); window.addEventListener("scroll", this.eventScrollTop);
}, },
mounted() { mounted() {
this.getExpertData() this.getBanner();
this.getExpertData();
this.getAddrData();
}, },
methods: { methods: {
// 导航切换 // 导航切换
@ -149,29 +146,94 @@
} }
}, },
// 获取banner
getBanner() {
let that = this;
this.axios
.post(this.HOME + "/api/dictionary/get-slide-list", {
position: "h5_expert_banner",
})
.then(function(res) {
that.bannerSrc = res.data.data[0].src;
});
},
// 获取专家列表
getExpertData() {
let that = this;
this.axios
.post(this.HOME + "/api/consumer/expert-list", {
page: "1",
size: "100",
})
.then(function(res) {
that.expertData = res.data.data.list;
});
},
// 获取城市列表
getAddrData() {
let that = this;
this.axios
.post(this.HOME + "/api/area/index", {
pcode: 86
})
.then(function(res) {
that.addrData = res.data.data;
});
},
// 城市选择 // 城市选择
openAddr() { openAddr() {
this.isAddr = !this.isAddr; this.isAddr = !this.isAddr;
}, },
getAddrValue(index, item) { getAddrValue(index, item) {
this.addrValue = item.title; this.addrValue = item.code;
this.addrIndex = index; this.addrIndex = index;
this.isAddr = false; this.isAddr = false;
}, },
// 向TA提问
toAsk(){
if(this.isReceive == 1){
this.$router.push('/expert/ask');
}else if(this.isReceive == 0){
this.isConfirm = true;
}
},
// 关闭提示框 // 关闭提示框
closeEV() { closeEV() {
this.isConfirm = false; this.isConfirm = false;
}, },
// 向TA提问
toAsk(id) {
if (this.isReceive == 1) {
this.$router.push({
path: '/expert/ask',
name: 'expert-ask',
query: {
id: id
},
});
} else if (this.isReceive == 0) {
this.isConfirm = true;
}
},
// 跳转到详情页
toDetail(id) {
this.$router.push({
path: '/expert/detail',
name: 'expert-detail',
query: {
id: id
},
})
},
// 页面跳转
goPage(path) {
this.$router.push(path);
},
// 滚动显示头部
eventScrollTop() { eventScrollTop() {
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop; let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
if (scrollTop >= 5) { if (scrollTop >= 5) {
@ -186,33 +248,6 @@
} }
} }
}, },
// 获取专家列表
getExpertData() {
let that = this;
this.axios
.post(this.HOME + "/api/consumer/expert-list", {
page: "1",
size: "10",
})
.then(function (res) {
console.log(res.data.data,121212);
that.expertData = res.data.data.list;
});
},
// 跳转到详情页
toDetail(id) {
this.$router.push({
path: '/expert/detail',
name: 'expert-detail',
params: {
id: id
},
})
},
// 页面跳转
goPage(path){
this.$router.push(path);
}
}, },
destroyed() { destroyed() {
window.removeEventListener("scroll", this.eventScrollTop); window.removeEventListener("scroll", this.eventScrollTop);

131
src/views/index/index.vue
View File

@ -10,19 +10,15 @@
<div class="swiper-container" ref="swiper-container"> <div class="swiper-container" ref="swiper-container">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide"> <div class="swiper-slide">
<img :src="host + bannerSrc" alt="" /> <img :src="host + bannerSrc" />
</div> </div>
</div> </div>
<div class="swiper-pagination" ref="swiper-pagination"></div> <div class="swiper-pagination" ref="swiper-pagination"></div>
</div> </div>
</div> </div>
<!-- 领取咨询卡 --> <!-- 领取咨询卡 -->
<div <div class="index-receive" @click="goPage('/information')" v-if="consult_amount == 0">
class="index-receive" <img src="../../assets/images/home/index/receive.jpg" />
@click="goPage('/information')"
v-if="consult_amount == 0"
>
<img src="../../assets/images/home/index/receive.jpg" alt="" />
<span>完善信息，立即领取免费咨询卡(1小时)</span> <span>完善信息，立即领取免费咨询卡(1小时)</span>
</div> </div>
<!-- 专家 --> <!-- 专家 -->
@ -34,7 +30,7 @@
<ul class="index-expert-list"> <ul class="index-expert-list">
<li v-for="(item, index) in expertData" :key="index"> <li v-for="(item, index) in expertData" :key="index">
<div class="expert-img"> <div class="expert-img">
<img :src="host + item.avatar" alt="" /> <img :src="host + item.avatar"/>
</div> </div>
<div class="expert-name"> <div class="expert-name">
{{item.name}}<span>{{item.keywords_list[1]}}</span> {{item.name}}<span>{{item.keywords_list[1]}}</span>
@ -49,9 +45,17 @@
<!-- 计划 --> <!-- 计划 -->
<div class="index-plan"> <div class="index-plan">
<ul class="index-plan-list"> <ul class="index-plan-list">
<li v-for="(item, index) in planData" :key="index"> <li>
<img src="../../assets/images/home/index/plan-01.png" alt="" /> <img src="../../assets/images/home/index/plan-01.png"/>
<p>{{ item.title }}</p> <p>强基计划</p>
</li>
<li>
<img src="../../assets/images/home/index/plan-02.png"/>
<p>综合评价</p>
</li>
<li>
<img src="../../assets/images/home/index/plan-03.png"/>
<p>专项计划</p>
</li> </li>
</ul> </ul>
</div> </div>
@ -62,19 +66,19 @@
<span @click="goPage('/evaluation')">查看更多</span> <span @click="goPage('/evaluation')">查看更多</span>
</div> </div>
<ul class="index-evaluation-list"> <ul class="index-evaluation-list">
<li <li>
@click="cpUrl()"
v-for="(item, index) in evaluationData"
:key="index"
>
<div class="evaluation-img"> <div class="evaluation-img">
<img <img src="../../assets/images/home/index/evaluation-01.png"/>
src="../../assets/images/home/index/evaluation-01.png"
alt=""
/>
</div> </div>
<p>{{ item.title }}</p> <p>霍兰德职业兴趣测评</p>
<div class="evaluation-btn" @click="goPage()">进入测评</div> <div class="evaluation-btn" @click="toEvaluation()">进入测评</div>
</li>
<li>
<div class="evaluation-img">
<img src="../../assets/images/home/index/evaluation-02.png"/>
</div>
<p>MBIT职业性格测试</p>
<div class="evaluation-btn" @click="toEvaluation()">进入测评</div>
</li> </li>
</ul> </ul>
</div> </div>
@ -85,8 +89,8 @@
<span @click="goPage()">查看更多</span> <span @click="goPage()">查看更多</span>
</div> </div>
<ul class="index-live-list"> <ul class="index-live-list">
<li><img src="../../assets/images/home/index/live-01.png" alt="" /></li> <li><img src="../../assets/images/home/index/live-01.png"/></li>
<li><img src="../../assets/images/home/index/live-02.png" alt="" /></li> <li><img src="../../assets/images/home/index/live-02.png"/></li>
</ul> </ul>
</div> </div>
<!-- 头条 --> <!-- 头条 -->
@ -97,7 +101,7 @@
</div> </div>
<ul class="index-headlines-list"> <ul class="index-headlines-list">
<li v-for="(item, index) in headlinesData" :key="index"> <li v-for="(item, index) in headlinesData" :key="index">
<p>{{ item.title }}</p> <p><a href="https://wwww.baidu.com">{{ item.title }}</a></p>
<span>{{ item.time }}</span> <span>{{ item.time }}</span>
</li> </li>
</ul> </ul>
@ -118,37 +122,11 @@ export default {
isScrollTop: false, isScrollTop: false,
isReceive: 0, //是否完善资料 isReceive: 0, //是否完善资料
bannerSrc: "", bannerSrc: "",
expertData: [ expertData: [], //专家列表
{ headlinesData: [{
name: "赵晓", title: "全国各省市最好大学+王牌专业盘点",
imgSrc: "", time: "2022年2月12日"
year: "从业5年",
honor: [{ title: "硕士" }, { title: "中科院" }],
}, },
{
name: "赵晓",
imgSrc: "",
year: "从业3年",
honor: [{ title: "硕士" }, { title: "中科院" }],
},
{
name: "赵晓",
imgSrc: "",
year: "从业8年",
honor: [{ title: "硕士" }, { title: "中科院" }],
},
],
planData: [
{ imgSrc: "", title: "强基计划" },
{ imgSrc: "", title: "综合评价" },
{ imgSrc: "", title: "专项计划" },
],
evaluationData: [
{ imgSrc: "", title: "霍兰德职业兴趣测评" },
{ imgSrc: "", title: "MBIT职业性格测试" },
],
headlinesData: [
{ title: "全国各省市最好大学+王牌专业盘点", time: "2022年2月12日" },
{ {
title: "批次、批次线、大类招生到底是什么？？20个名词帮 你快速了解", title: "批次、批次线、大类招生到底是什么？？20个名词帮 你快速了解",
time: "2022年2月12日", time: "2022年2月12日",
@ -162,8 +140,7 @@ export default {
time: "2022年2月12日", time: "2022年2月12日",
}, },
{ {
title: title: "比普通批低100多分！从高一准备到高三报考，2022 年强基计划最新报考指南",
"比普通批低100多分！从高一准备到高三报考，2022 年强基计划最新报考指南",
time: "2022年2月12日", time: "2022年2月12日",
}, },
], ],
@ -180,11 +157,14 @@ export default {
}, },
computed: {}, computed: {},
methods: { methods: {
cpUrl() { // 测试跳转
toEvaluation() {
this.$router.push({ this.$router.push({
path: "/evaluation", path: "/evaluation",
}); });
}, },
// 获取banner
getBanner() { getBanner() {
let that = this; let that = this;
this.axios this.axios
@ -195,6 +175,28 @@ export default {
that.bannerSrc = res.data.data[0].src; that.bannerSrc = res.data.data[0].src;
}); });
}, },
// 获取专家列表
getExpertData() {
let that = this;
this.axios
.post(this.HOME + "/api/consumer/expert-list", {
page: "1",
size: "3",
})
.then(function(res) {
console.log(res.data.data);
that.expertData = res.data.data.list;
});
},
// 跳转页面
goPage(path){
this.$router.push(path);
},
// 滚动显示头部
eventScrollTop() { eventScrollTop() {
let scrollTop = let scrollTop =
document.body.scrollTop || document.documentElement.scrollTop; document.body.scrollTop || document.documentElement.scrollTop;
@ -210,19 +212,6 @@ export default {
} }
} }
}, },
// 获取专家列表
getExpertData() {
let that = this;
this.axios
.post(this.HOME + "/api/consumer/expert-list", {
page: "1",
size: "3",
})
.then(function (res) {
console.log(res.data.data);
that.expertData = res.data.data.list;
});
},
}, },
}; };
</script> </script>

67
src/views/login.vue
View File

@ -16,22 +16,15 @@
<input type="text" v-model="phoneNumber" placeholder="请输入手机号" /> <input type="text" v-model="phoneNumber" placeholder="请输入手机号" />
</div> </div>
<div class="agreement"> <div class="agreement">
<span <span :class="{ checked: isAgreement }" @click="isAgreement = !isAgreement"><img
:class="{ checked: isAgreement }" v-show="isAgreement" src="../assets/images/login/yes.png" alt="" /></span>
@click="isAgreement = !isAgreement"
><img
v-show="isAgreement"
src="../assets/images/login/yes.png"
alt=""
/></span>
<p> <p>
我已阅读并同意<span>《有谱志愿用户协议》</span>、<span>《隐私政策》</span>，未注册将引导完成账号注册 我已阅读并同意<span>《有谱志愿用户协议》</span>、<span>《隐私政策》</span>，未注册将引导完成账号注册
</p> </p>
</div> </div>
<div class="login-btns"> <div class="login-btns">
<span @click="nailLogin()" v-if="mode == 0" class="nail-btn" <span @click="nailLogin()" v-if="mode == 0" class="nail-btn"><img
><img src="../assets/images/login/nail.png" />钉钉授权登录</span src="../assets/images/login/nail.png" />钉钉授权登录</span>
>
<span @click="phoneLogin()" v-if="mode == 1">获取验证码</span> <span @click="phoneLogin()" v-if="mode == 1">获取验证码</span>
</div> </div>
</div> </div>
@ -39,26 +32,18 @@
<div class="mode-title"><span></span>其他登录方式<span></span></div> <div class="mode-title"><span></span>其他登录方式<span></span></div>
<ul class="mode-item"> <ul class="mode-item">
<li> <li>
<span @click="changeMode(0)" <span @click="changeMode(0)"><img src="../assets/images/login/nail.png" /></span>
><img src="../assets/images/login/nail.png"
/></span>
<p :class="{ active: mode == 0 }">当前登录方式</p> <p :class="{ active: mode == 0 }">当前登录方式</p>
</li> </li>
<li> <li>
<span @click="changeMode(1)" <span @click="changeMode(1)"><img src="../assets/images/login/phone.png" /></span>
><img src="../assets/images/login/phone.png"
/></span>
<p :class="{ active: mode == 1 }">当前登录方式</p> <p :class="{ active: mode == 1 }">当前登录方式</p>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<!-- 阅读协议弹窗 --> <!-- 阅读协议弹窗 -->
<div <div class="my-confirm-bg" v-show="openAgreement" @click="openAgreement = !openAgreement"></div>
class="my-confirm-bg"
v-show="openAgreement"
@click="openAgreement = !openAgreement"
></div>
<div class="my-confirm my-confirm2" v-show="openAgreement"> <div class="my-confirm my-confirm2" v-show="openAgreement">
<p>您还未阅读并同意授权</p> <p>您还未阅读并同意授权</p>
<div class="confirm-btns"> <div class="confirm-btns">
@ -66,11 +51,7 @@
</div> </div>
</div> </div>
<!-- 钉钉授权登录弹窗 --> <!-- 钉钉授权登录弹窗 -->
<div <div class="addr-select-bg" v-show="openEmpower" @click="openEmpower = !openEmpower"></div>
class="addr-select-bg"
v-show="openEmpower"
@click="openEmpower = !openEmpower"
></div>
<div class="nail-popup" v-show="openEmpower"> <div class="nail-popup" v-show="openEmpower">
<div class="nail-popup-title"> <div class="nail-popup-title">
<span><img src="../assets/images/login/logo.png" alt="" /></span> <span><img src="../assets/images/login/logo.png" alt="" /></span>
@ -88,11 +69,7 @@
</div> </div>
</div> </div>
<!-- 手机验证弹窗 --> <!-- 手机验证弹窗 -->
<div <div class="my-confirm-bg" v-show="openPhoneTips" @click="openPhoneTips = !openPhoneTips"></div>
class="my-confirm-bg"
v-show="openPhoneTips"
@click="openPhoneTips = !openPhoneTips"
></div>
<div class="my-confirm my-confirm2" v-show="openPhoneTips"> <div class="my-confirm my-confirm2" v-show="openPhoneTips">
<!-- <p>{{ tipsMsg }}</p> --> <!-- <p>{{ tipsMsg }}</p> -->
<div class="confirm-btns"> <div class="confirm-btns">
@ -110,10 +87,10 @@ export default {
isScrollTop: false, isScrollTop: false,
mode: 1, //登录方式 mode: 1, //登录方式
openAgreement: false, //阅读协议弹窗 openAgreement: false, //阅读协议弹窗
isAgreement: false, //阅读协议状态 isAgreement: true, //阅读协议状态
openEmpower: false, //钉钉授权状态 openEmpower: false, //钉钉授权状态
openPhoneTips: false, //验证手机号弹出框 openPhoneTips: false, //验证手机号弹出框
phoneNumber: "13608235524", phoneNumber: "",
phone: "", phone: "",
}; };
}, },
@ -174,28 +151,6 @@ export default {
changeMode(mode) { changeMode(mode) {
this.mode = mode; this.mode = mode;
}, },
doLogin() {
if (this.username.match(/^\s*$/)) {
alert("请输入用户名");
return;
}
if (this.password.match(/^\s*$/)) {
alert("请输入密码");
return;
}
this.login({
cellphone: this.username,
password: this.password,
success: (res) => {
// console.log(res);
if (res.code === 200) {
this.$router.go(-1);
} else {
alert(res.data);
}
},
});
},
// 滚动改变样式 // 滚动改变样式
eventScrollTop() { eventScrollTop() {
let scrollTop = let scrollTop =

25
src/views/login/verification.vue
View File

@ -16,28 +16,14 @@
<div class="security-code-wrap"> <div class="security-code-wrap">
<label for="code"> <label for="code">
<ul class="security-code-container"> <ul class="security-code-container">
<li <li class="field-wrap" v-for="(item, index) in number" :key="index">
class="field-wrap"
v-for="(item, index) in number"
:key="index"
>
<i class="char-field">{{ value[index] || placeholder }}</i> <i class="char-field">{{ value[index] || placeholder }}</i>
</li> </li>
</ul> </ul>
</label> </label>
<input <input ref="input" class="input-code" @keyup="handleInput($event)" v-model="value" id="code"
ref="input" name="code" type="tel" :maxlength="number" autocorrect="off" autocomplete="off"
class="input-code" autocapitalize="off" />
@keyup="handleInput($event)"
v-model="value"
id="code"
name="code"
type="tel"
:maxlength="number"
autocorrect="off"
autocomplete="off"
autocapitalize="off"
/>
</div> </div>
</div> </div>
<span v-show="!show">{{count}}秒后可重新获取验证码</span> <span v-show="!show">{{count}}秒后可重新获取验证码</span>
@ -111,7 +97,8 @@ export default {
localStorage.userData = JSON.stringify(res.data.data); localStorage.userData = JSON.stringify(res.data.data);
if (res.data.code == 0) { if (res.data.code == 0) {
that.$router.push({ that.$router.push({
path: "/index", }); path: "/index",
});
} else { } else {
window.alert(res.msg); window.alert(res.msg);
} }

290
src/views/user/information/index.vue
View File

@ -10,51 +10,58 @@
<li> <li>
<span><em>*</em>姓名</span> <span><em>*</em>姓名</span>
<p> <p>
<input type="text" value="" placeholder="请输入姓名"> <input type="text" value="" v-model="name" placeholder="请输入姓名">
</p> </p>
</li> </li>
<li @click="openAddr()"> <li @click="openAddr()">
<span><em>*</em>考籍</span> <span><em>*</em>考籍</span>
<p> <p>
<input type="text" readonly="readonly" :value="addrData[addrIndex].title" placeholder="请选择考生所在省份"> <input type="text" readonly="readonly" :value="addrData[addrIndex].name" placeholder="请选择考生所在省份">
<img src="../../../assets/images/home/expert/arrow-right.png" > <img src="../../../assets/images/home/expert/arrow-right.png" >
</p> </p>
</li> </li>
<li @click="openSex()"> <li @click="openSex()">
<span><em>*</em>性别</span> <span><em>*</em>性别</span>
<p> <p>
<input type="text" readonly="readonly" :value="sexData[sexIndex].title" placeholder="请输入性别"> <input type="text" readonly="readonly" :value="sexData[sexIndex].title" placeholder="请选择性别">
<img src="../../../assets/images/home/expert/arrow-right.png" > <img src="../../../assets/images/home/expert/arrow-right.png" >
</p> </p>
</li> </li>
<li @click="openCategory()"> <li @click="openCategory()">
<span><em>*</em>考生类型</span> <span><em>*</em>考生类型</span>
<p> <p>
<input type="text" readonly="readonly" :value="categoryData[categoryIndex].title" placeholder="请输入姓名"> <input type="text" readonly="readonly" :value="categoryData[categoryIndex].title" placeholder="请选择考生姓名">
<img src="../../../assets/images/home/expert/arrow-right.png" >
</p>
</li>
<li @click="openDate()">
<span><em>*</em>高考年份</span>
<p>
<input type="text" readonly="readonly" :value="dateArray[dateIndex]" placeholder="请选择高考年份">
<img src="../../../assets/images/home/expert/arrow-right.png" > <img src="../../../assets/images/home/expert/arrow-right.png" >
</p> </p>
</li> </li>
<li> <li>
<span><em>*</em>选科组合</span> <span><em>*</em>选科组合</span>
<div class="course-list"> <div class="course-list">
<span :class="{'checked':index==checkedIndex}" v-for="(item,index) in courseData" :key="index" @click="changeCourse(index)">{{item.title}}</span> <span :class="{'checked':item.isActive}" v-for="(item,index) in subjectArray" :key="index" @click="onChangeA(index,item.id)">{{item.name}}</span>
</div> </div>
</li> </li>
<li> <li>
<span>预估/模考成绩</span> <span>预估/模考成绩</span>
<p> <p>
<input type="text" value="" placeholder="请填写预估/模考成绩（非必填）"> <input type="text" v-model="achievementExpect" placeholder="请填写预估/模考成绩（非必填）">
</p> </p>
</li> </li>
<li> <li>
<span>预估/模考省内排名</span> <span>预估/模考省内排名</span>
<p> <p>
<input type="text" value="" placeholder="请填写预估/模考省内排名（非必填）"> <input type="text" v-model="provinceRanking" placeholder="请填写预估/模考省内排名（非必填）">
</p> </p>
</li> </li>
</ul> </ul>
</div> </div>
<div class="information-btn" @click="setInformationEV()">确认</div> <div class="information-btn" @click="getStudentInfo()">确认</div>
<!-- 地址弹出框 --> <!-- 地址弹出框 -->
<div class="addr-select-bg" v-show="isAddr" @click="isAddr=!isAddr"></div> <div class="addr-select-bg" v-show="isAddr" @click="isAddr=!isAddr"></div>
<div class="addr-select-item" v-show="isAddr"> <div class="addr-select-item" v-show="isAddr">
@ -63,7 +70,7 @@
<span @click="isAddr=!isAddr">取消</span> <span @click="isAddr=!isAddr">取消</span>
</div> </div>
<ul> <ul>
<li :class="{'checked':index == addrIndex}" @click="getAddrValue(index,item)" v-for="(item,index) in addrData" :key="index">{{item.title}}<img v-show="index==addrIndex" src="../../../assets/images/home/expert/yes.png"></li> <li :class="{'checked':index == addrIndex}" @click="getAddrValue(index,item)" v-for="(item,index) in addrData" :key="index">{{item.name}}<img v-show="index==addrIndex" src="../../../assets/images/home/expert/yes.png"></li>
</ul> </ul>
</div> </div>
<!-- 性别弹出框 --> <!-- 性别弹出框 -->
@ -77,6 +84,17 @@
<li :class="{'checked':index == sexIndex}" @click="getSexValue(index,item)" v-for="(item,index) in sexData" :key="index">{{item.title}}<img v-show="index==sexIndex" src="../../../assets/images/home/expert/yes.png"></li> <li :class="{'checked':index == sexIndex}" @click="getSexValue(index,item)" v-for="(item,index) in sexData" :key="index">{{item.title}}<img v-show="index==sexIndex" src="../../../assets/images/home/expert/yes.png"></li>
</ul> </ul>
</div> </div>
<!-- 日期弹出框 -->
<div class="addr-select-bg" v-show="isDate" @click="isDate=!isDate"></div>
<div class="addr-select-item" v-show="isDate">
<div class="addr-btns">
<span>请选择高考日期</span>
<span @click="isDate=!isDate">取消</span>
</div>
<ul>
<li :class="{'checked':index == dateIndex}" @click="getDateValue(index,item)" v-for="(item,index) in dateArray" :key="index">{{item}}<img v-show="index==dateIndex" src="../../../assets/images/home/expert/yes.png"></li>
</ul>
</div>
<!-- 考生类别弹出框 --> <!-- 考生类别弹出框 -->
<div class="addr-select-bg" v-show="isCategory" @click="isCategory=!isCategory"></div> <div class="addr-select-bg" v-show="isCategory" @click="isCategory=!isCategory"></div>
<div class="addr-select-item" v-show="isCategory"> <div class="addr-select-item" v-show="isCategory">
@ -103,28 +121,13 @@
data(){ data(){
return { return {
isScrollTop: false, isScrollTop: false,
name:'',
addrData:[ addrData:[], //考籍列表
{title:'北京'},
{title:'上海'},
{title:'广州'},
{title:'四川'},
{title:'北京'},
{title:'上海'},
{title:'广州'},
{title:'四川'},
{title:'北京'},
{title:'上海'},
{title:'广州'},
{title:'四川'},
{title:'北京'},
{title:'上海'},
{title:'广州'},
{title:'四川'}
],
addrIndex: 0, addrIndex: 0,
isAddr: false, //城市列表是否显示 isAddr: false, //城市列表是否显示
addrValue:'', //选择城市编号 addrValue:'', //考籍城市编号
studentName: '', //考生姓名
sexData:[ sexData:[
{title:'男'}, {title:'男'},
@ -134,6 +137,11 @@
isSex: false, //性别列表是否显示 isSex: false, //性别列表是否显示
sexValue:'', //选择性别 sexValue:'', //选择性别
dateArray:[],
dateIndex: 0,
isDate: false, //时间列表是否显示
dateValue:'', //选择时间
categoryData:[ categoryData:[
{title:'普通高考生'}, {title:'普通高考生'},
{title:'艺考生'}, {title:'艺考生'},
@ -143,33 +151,78 @@
isCategory: false, //性别列表是否显示 isCategory: false, //性别列表是否显示
categoryValue:'', //选择性别 categoryValue:'', //选择性别
courseData: [
{title:'物理'},
{title:'化学'},
{title:'生物'},
{title:'政治'},
{title:'历史'},
{title:'地理'}
],
checkedIndex: -1, checkedIndex: -1,
isSeekCard: false isSeekCard: false,
achievementExpect:'',//预估成绩
provinceRanking: '' ,//预估排名
// 学科
subjectArray: [],
subjectValue: [],
subjectIndex: 0,
numberArr: [],
temporaryCode:[],//暂存编号
limitArr:[],//多选一数组
count:0,
userObj:'',
lenNum:0,//最少最多
iscount:true,
ispopu:false
} }
}, },
created() { created() {
this.isScroll = true; this.isScroll = true;
window.addEventListener("scroll", this.eventScrollTop); window.addEventListener("scroll", this.eventScrollTop);
this.getAddrData();
this.getDate();
this.getSubjectArray();
},
mounted() {
this.getAddrData();
this.getDate();
this.getSubjectArray();
}, },
methods:{ methods:{
// 获取城市列表
getAddrData() {
let that = this;
this.axios
.post(this.HOME + "/api/area/index", {
pcode: 86
})
.then(function(res) {
that.addrData = res.data.data;
});
},
// 获取考试时间
getDate(){
const date = new Date();
let year = Math.trunc(date.getFullYear());
let end = year + 10;
let newArray=[];
for(let i=year; i<= end; i++){
newArray.push(i);
}
this.dateArray = newArray;
},
// 城市选择 // 城市选择
openAddr(){ openAddr(){
this.isAddr=!this.isAddr; this.isAddr=!this.isAddr;
}, },
getAddrValue(index,item){ getAddrValue(index,item){
this.addrValue = item.title; this.addrValue = item.code;
this.addrIndex = index; this.addrIndex = index;
this.isAddr=false; this.isAddr=false;
// 查询科目
this.getSubjectArray();
console.log(this.addrData[this.addrIndex],3636)
}, },
// 选择性别 // 选择性别
openSex(){ openSex(){
this.isSex=!this.isSex; this.isSex=!this.isSex;
@ -179,6 +232,17 @@
this.sexIndex = index; this.sexIndex = index;
this.isSex=false; this.isSex=false;
}, },
// 选择时间
openDate(){
this.isDate=!this.isDate;
},
getDateValue(index,item){
this.dateValue = item;
this.dateIndex = index;
this.isDate=false;
},
//选择考生类别 //选择考生类别
openCategory(){ openCategory(){
this.isCategory=!this.isCategory; this.isCategory=!this.isCategory;
@ -193,9 +257,149 @@
changeCourse(index){ changeCourse(index){
this.checkedIndex = index this.checkedIndex = index
}, },
// 提交
setInformationEV(){ // 获取选科组合列表
this.isSeekCard = !this.isSeekCard; getSubjectArray() {
let that = this;
this.axios
.post(this.HOME + "/api/dictionary/subjects", {
type: 0
})
.then(function(res) {
console.log(res,222)
let list = res.data.data;
let newArray = [];
let baiArr = that.addrData[that.addrIndex].subject_white.split(',');
list.forEach(item=>{
baiArr.forEach(item1=>{
if(item.id==item1){
let obj = {
id: item.id,
name: item.name,
isActive:false
}
newArray.push(obj);
}
})
})
that.subjectArray =newArray;
console.log(that.subjectArray,123)
});
},
// 选科组合选择事件
onChangeA(index,id) {
let stuJect = this.data.userObj.student.student_subject.split(',');
let arrList = [];
stuJect.forEach(item=>{
this.data.subjectArray.forEach(item1=>{
if(item==item1.id){
item1.isActive = true;
}
})
arrList.push(item*1);
});
// // 有限制的科目
// if(this.data.limitArr.length && this.data.temporaryCode.length!=3){
// // 判断限制的科目在，选择的科目数组里是否存在
// let isc = this.data.limitArr.filter(item=>this.data.temporaryCode.indexOf(item) > -1);
// if(isc.length){
// let existli = this.data.limitArr.indexOf(id);
// if(existli==-1){
// this.data.subjectArray[indexes].isActive = !this.data.subjectArray[indexes].isActive
// if(existtemp!=-1) {
// // 再次点击已经存在的科目，删除
// this.data.temporaryCode.splice(existtemp,1);
// } else {
// this.data.temporaryCode.push(id);
// }
// this.setData({
// subjectArray:this.data.subjectArray
// })
// } else {
// if(existtemp!=-1) {
// this.data.subjectArray[indexes].isActive = !this.data.subjectArray[indexes].isActive
// // 再次点击已经存在的科目，删除
// this.data.temporaryCode.splice(existtemp,1);
// this.setData({
// subjectArray:this.data.subjectArray
// })
// } else {
// // 存在，就不能再选
// dd.showToast({content:'选科冲突',type: 'none',duration:2000});
// }
// }
// } else {
// this.data.subjectArray[indexes].isActive = !this.data.subjectArray[indexes].isActive
// if(existtemp!=-1) {
// // 再次点击已经存在的科目，删除
// this.data.temporaryCode.splice(existtemp,1);
// } else {
// // 可继续选择
// this.data.temporaryCode.push(id);
// }
// this.setData({
// subjectArray:this.data.subjectArray
// })
// }
// } else if(this.data.temporaryCode.length!=3) {
// this.data.subjectArray[indexes].isActive = !this.data.subjectArray[indexes].isActive
// // 没有限制的科目
// if(existtemp!=-1) {
// // 再次点击已经存在的科目，删除
// this.data.temporaryCode.splice(existtemp,1);
// } else {
// // 添加选中的科目
// this.data.temporaryCode.push(id);
// }
// this.setData({
// subjectArray:this.data.subjectArray
// })
// } else {
// // 没有限制的科目
// if(existtemp!=-1) {
// this.data.subjectArray[indexes].isActive = !this.data.subjectArray[indexes].isActive
// // 再次点击已经存在的科目，删除
// this.data.temporaryCode.splice(existtemp,1);
// this.setData({
// subjectArray:this.data.subjectArray
// })
// } else {
// dd.showToast({content:`最多选${this.data.lenNum}科`,type: 'none',duration:2000});
// }
// }
// this.subjectArray[index].isActive=true;
console.log(index,id)
},
// 获取考生信息
getStudentInfo() {
let that = this;
this.axios
.post(this.HOME + "/api/area/index", {
student_name: that.studentName,//姓名
student_gender: that.sexIndex==0 ? 1 : 2,//性别
student_native: that.addrData[that.addrIndex].code, //考籍（省级）编号
student_native_str: that.addrData[that.addrIndex].name,//考籍（省级）名称
student_subject: this.temporaryCode.join(','),//选科组合（选科ID，多个用英文逗号分割）
student_exam_year: that.dateValue,//高考年份
is_art: that.dateIndex==1?1:0,//是否是艺考生
is_PE:that.dateIndex==2?1:0,//是否是体考生
achievement_expect: this.data.achievementExpect,//预估或模考成绩
province_ranking: this.data.provinceRanking,//预估/省内排名
achievement_high: '',//高考成绩，-1表示未考（用户留空时默认传值为-1）
})
.then(function(res) {
// that.isSeekCard = true;
console.log(res,123)
});
}, },
// 跳转 // 跳转