Skip to content

P
pica-annual-summary
提交 99a1bb5a 编写于 作者: guangjun.yang's avatar guangjun.yang
浏览文件
操作

样式优化等

上级 069a61a5
隐藏空白字符变更
内嵌 并排
正在显示 包含 528 行增加 和 3 行删除
src/views/index copy 2.vue 0 → 100644
浏览文件 @ 99a1bb5a
<template>
<!-- 专业选择列表 -->
<div class="page-container">
<CommonNavbar
:bgColor="bgColor"
v-show="isShowNavbar"
:title="navTitle"
:isFixNavbar="isFixNavbar"
:burialPoint="pointStyle"
borderStyle="1px solid #fff"
></CommonNavbar>
<section class="page-content">
<section v-show="!existBind" class="cb-wrapper padding-top-111">
<CardBanner :hasLogin="hasLogin"></CardBanner>
</section>
<section class="body">
<ul class="left">
<li
v-for="(model, mIndex) in titleTestModelList"
:key="mIndex"
:class="{active: currentModelIndex == mIndex}"
@click="selectModel(model, mIndex)"
>
<span>{{model.title}}</span>
</li>
</ul>
<article class="right">
<ul class="list-wrapper">
<li class="list" v-for="(item, index) in listData" :key="index">
<span class="title">{{item.name}}</span>
<ul class="item">
<li
:id="'subject_' + sIndex"
:class="{'no-active' : subject.openFlag == 0, 'has-bind' : subject.bindCardStatus == 1}"
v-for="(subject, sIndex) in item.secondSubjectModelList"
:key="sIndex"
@click="coopDetails(subject)"
>
<span>{{subject.name}}</span>
<span>({{subject.code}})</span>
<span v-show="subject.bindCardStatus == 1" class="buy">己购</span>
<span
v-show="subject.openFlag == 0"
class="time"
>{{formatTime(subject.predictTime, '{y}年{m}月')}}上线</span>
</li>
</ul>
</li>
<li class="no-list" v-show="!listData.length">
<img src="../images/subject/no-subject.png" alt />
<span>正在更新中，敬请期待</span>
</li>
</ul>
</article>
</section>
</section>
<transition name="fade">
<article v-show="needShowBackup" @click="scrollTop" class="back-up-icon">
<img src="../images/cme/phrase2/back-top.png" alt />
</article>
</transition>
<Loading v-if="showLoading" />
</div>
</template>
<script>
import CommonNavbar from "@/components/common/common-navbar";
import CardBanner from "@/components/cme/card-banner";
import Loading from "@/components/common/common-loading";
import CommonTitle from "@/components/common/common-title";
import { mapGetters, mapActions } from "vuex";
import { getWebPageUrl, parseTime } from "@/utils/index";
export default {
data() {
return {
existBind: 0,
currentModelIndex: 0,
titleTestModelList: [],
showLoading: false,
isWeb: window.__isWeb,
isAndroid: window.__isAndroid,
isIOS: window.__isIOS,
bgColor: "#fff",
isShow: false,
navTitle: "选择专业",
isShowNavbar: true,
isFixNavbar: true,
pointStyle: "activity",
tabIndex: 1,
joinProjectList: [], // 我的项目
otherProjectList: [], // 全部项目
token: "",
userMobile: "",
needShowBackup: false,
listData: [
{
name: "中医",
list: [
{ name: "全科中医", code: 201, bindStatus: 0 },
{ name: "中医内科学中医内科学", code: 201, bindStatus: 0 },
{ name: "全科中医", code: 201, bindStatus: 0 }
]
},
{
name: "妇科",
list: [
{ name: "妇产科学", code: 201, bindStatus: 0 },
{ name: "中医内科学中医内科学", code: 201, bindStatus: 0 },
{ name: "全科中医", code: 201, bindStatus: 0 }
]
},
{
name: "内科",
list: [
{ name: "肾内科学", code: 201, bindStatus: 0 },
{
name: "肾内科学肾内科学肾内科学肾内科学",
code: 201,
bindStatus: 0
},
{ name: "全科中医", code: 201, bindStatus: 0 }
]
}
],
isInfresh: false,
hasLogin: false
};
},
computed: {
...mapGetters(["userInfo"])
},
components: {
CardBanner,
CommonNavbar,
Loading,
CommonTitle
},
created() {
var _this = this;
_this.currentModelIndex = 0;
window.__getUserInfo = function(param) {
_this.setUserInfo(param);
_this.token = param.userToken;
_this.checkToken();
_this.userMobile = param.userMobile;
_this.getListData();
console.log("__getUserInfo", param);
};
_this.getUserInfo();
if (__isWeb) {
_this.getListData();
}
window.__refresh = function() {
_this.isInfresh = true;
_this.currentModelIndex = 0;
console.log(_this.currentModelIndex);
_this.getUserInfo();
};
// 打开页面埋点
// this.$sendBuriedData({
// component_tag: "210#0#0#0"
// });
window.addEventListener("scroll", this.scrollFun);
},
mounted() {
this.listData = [];
this.currentModelIndex = 0;
},
methods: {
...mapActions(["setUserInfo"]),
// 选择职称
selectModel(model, index) {
this.currentModelIndex = index;
this.listData =
this.titleTestModelList[index].firstSubjectModelList || [];
},
// 跳转到项目页面
coopDetails(item) {
if (item.openFlag == 0) return;
// this.$sendBuriedData({
// component_tag: `880#8803#${item.id}#${item.name}` //'210#210002#0#'+item.projectName
// });
// 临时添加
if (window.__isWeb) {
this.$router.push({
path: "/coop",
query: {
id: item.projectId
}
});
return;
}
let appVersion = this.userInfo.appVersion;
let appVersionNum = appVersion.split(".").join("");
console.log("appVersionNum", appVersionNum);
if (appVersionNum < 341) {
Toast("请您下载新版本App");
return;
}
let paramList = [
{
key: "pageUrl",
value: getWebPageUrl(`profexam/#/coop?id=${item.projectId}`),
type: 4,
seqNo: 1
}
];
rocNative.dispatchEventByModuleCode({
modeCode: "M300",
jsonString: paramList
});
},
//获取版本号
getUserInfo() {
rocNative.getUserInfo({
__funcName: "__getUserInfo"
});
},
// 查询列表
getListData() {
let _this = this;
let param = {
token: _this.token,
setEntry: true
};
this.showLoading = true;
this.GET(`portal/titleTestApp/list`, param).then(res => {
this.showLoading = false;
if (res.code == "000000") {
this.existBind = res.data.existBind || 0;
this.titleTestModelList = res.data.titleTestModelList;
if (this.existBind) {
this.resetPosition(this.titleTestModelList);
} else {
this.listData = res.data.titleTestModelList[0].firstSubjectModelList;
}
} else {
this.message.error(res.message);
}
});
},
// 查找对应的职称与专业
resetPosition(list) {
if (!list.length) return;
let parentIndex = 0,
subIndex = 0,
firstSub = [],
secondSub = [];
for (let i = 0; i < list.length; i++) {
firstSub = list[i].firstSubjectModelList;
for (let j = 0; j < firstSub.length; j++) {
secondSub = firstSub[j].secondSubjectModelList;
for (let k = 0; k < secondSub.length; k++) {
if (secondSub[k].bindCardStatus) {
parentIndex = i;
subIndex = k;
break;
}
}
}
}
this.currentModelIndex = parentIndex;
this.listData = this.titleTestModelList[parentIndex].firstSubjectModelList || [];
console.log('查找对应的职称与专业', this.currentModelIndex, this.listData);
this.$forceUpdate();
this.resetProjectPosition(subIndex);
},
// 将定位到的元素，滚动到最上面
resetProjectPosition(subIndex) {
this.$nextTick(() => {
setTimeout(() => {
// let scrollTop = this.$refs['subject_' + subIndex].offsetTop;
let scrollTop = document.getElementById("subject_" + subIndex)
.offsetTop;
console.log(scrollTop);
window.scrollTo(0, scrollTop);
}, 100);
});
},
// 监听滚动事件
scrollFun() {
let scrollTop = window.scrollY;
if (scrollTop >= 500) {
this.needShowBackup = true;
} else {
this.needShowBackup = false;
}
},
// 滚动到顶部
scrollTop() {
window.scrollTo(0, 0);
},
// 格式化时间
formatTime(time, cFormat) {
return parseTime(time, cFormat);
},
// token是否失效校验
checkToken() {
let _this = this;
let param = {
token: _this.userInfo.userToken || _this.token,
setEntry: true
};
this.GET("campaign/admin/task/checkToken", param).then(res => {
if (res.code !== "000000") {
//未登录 跳转登录页
console.log("跳登录", _this.isInfresh);
if (_this.isInfresh) {
rocNative.goBack();
} else {
rocNative.gotoLogin();
}
_this.isInfresh = false;
} else {
_this.hasLogin = true;
}
});
}
}
};
</script>
<style lang="scss" scoped>
@import "../style/mixin";
.page-content {
padding-top: px2rem(74px);
min-height: 100vh;
.body {
min-height: 90vh;
display: flex;
flex-direction: row;
font-size: px2rem(14px);
color: #676869;
.left {
width: px2rem(130px);
background: #f8f9fa;
li {
position: relative;
display: block;
height: px2rem(60px);
line-height: px2rem(60px);
padding-left: px2rem(15px);
&.active {
color: #449284;
background: #fff;
&.active::before {
position: absolute;
left: 0;
top: px2rem(20px);
z-index: 1;
content: "";
height: px2rem(20px);
width: px2rem(3px);
border-radius: px2rem(2px);
background: #449284;
}
}
}
}
.right {
flex: 1;
padding: 0 px2rem(15px) px2rem(30px);
.list-wrapper {
.list {
.title {
display: block;
height: px2rem(35px);
line-height: px2rem(35px);
margin-top: px2rem(14px);
font-size: px2rem(15px);
font-weight: 700;
}
.item {
li {
position: relative;
top: 0;
left: 0;
z-index: 1;
display: flex;
flex-direction: column;
// height: px2rem(55px);
padding: px2rem(12px) 0;
margin-bottom: px2rem(6px);
justify-content: center;
text-align: center;
border-radius: px2rem(4px);
background: #f8f9fa;
align-items: center;
span {
display: inline-block;
// height: px2rem(20px);
line-height: px2rem(20px);
padding: 0 px2rem(20px);
}
&.has-bind {
color: #449284;
background: rgba(68, 146, 132, 0.1);
.buy {
position: absolute;
top: 0;
right: 0;
z-index: 1;
height: px2rem(15px);
line-height: px2rem(15px);
padding: 0 px2rem(4px);
border-radius: 0px px2rem(4px) 0px px2rem(4px);
font-size: px2rem(11px);
color: #fff;
background: #449284;
}
}
&.no-active {
color: #c7c8c9;
.time {
position: absolute;
top: 0;
right: 0;
z-index: 1;
height: px2rem(15px);
line-height: px2rem(15px);
padding: 0 px2rem(4px);
border-radius: 0px px2rem(4px) 0px px2rem(4px);
opacity: 0.4;
font-size: px2rem(11px);
background: rgba(0, 0, 0, 1);
}
}
}
}
}
.no-list {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
align-items: center;
margin-top: px2rem(30px);
// width: px2rem(50px);
// height: px2rem(50px);
img {
width: px2rem(100px);
height: px2rem(100px);
}
span {
font-size: px2rem(12px);
color: #c7c8c9;
}
}
}
}
}
}
.back-up-icon {
position: fixed;
bottom: px2rem(50px);
right: px2rem(15px);
img {
width: px2rem(35px);
height: px2rem(35px);
}
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-active {
opacity: 0;
}
</style>
src/views/index.vue
浏览文件 @ 99a1bb5a
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<CardBanner :hasLogin="hasLogin"></CardBanner> <CardBanner :hasLogin="hasLogin"></CardBanner>
</section> </section>
<section class="body"> <section class="body">
<ul class="left"> <ul class="left fixed" :class="{'top': !existBind}">
<li <li
v-for="(model, mIndex) in titleTestModelList" v-for="(model, mIndex) in titleTestModelList"
:key="mIndex" :key="mIndex"
...@@ -23,6 +23,16 @@ ...@@ -23,6 +23,16 @@
> >
<span>{{model.title}}</span> <span>{{model.title}}</span>
</li> </li>
</ul>
<ul class="left">
<!-- <li
v-for="(model, mIndex) in titleTestModelList"
:key="mIndex"
:class="{active: currentModelIndex == mIndex}"
@click="selectModel(model, mIndex)"
>
<span>{{model.title}}</span>
</li> -->
</ul> </ul>
<article class="right"> <article class="right">
<ul class="list-wrapper"> <ul class="list-wrapper">
...@@ -53,6 +63,18 @@ ...@@ -53,6 +63,18 @@
</ul> </ul>
</article> </article>
</section> </section>
<!-- <section class="body">
<ul class="left-fixed">
<li
v-for="(model, mIndex) in titleTestModelList"
:key="mIndex"
:class="{active: currentModelIndex == mIndex}"
@click="selectModel(model, mIndex)"
>
<span>{{model.title}}</span>
</li>
</ul>
</section> -->
</section> </section>
<transition name="fade"> <transition name="fade">
...@@ -345,14 +367,14 @@ export default { ...@@ -345,14 +367,14 @@ export default {
padding-top: px2rem(74px); padding-top: px2rem(74px);
min-height: 100vh; min-height: 100vh;
.body { .body {
min-height: 90vh; // min-height: 90vh;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
font-size: px2rem(14px); font-size: px2rem(14px);
color: #676869; color: #676869;
.left { .left {
width: px2rem(130px); width: px2rem(130px);
background: #f8f9fa; background: red;
li { li {
position: relative; position: relative;
display: block; display: block;
...@@ -375,6 +397,18 @@ export default { ...@@ -375,6 +397,18 @@ export default {
} }
} }
} }
&.fixed {
position: fixed;
top: px2rem(74px);
left: 0;
bottom: 0;
right: px2rem(130px);
z-index: 1;
background: #f8f9fa;
&.top {
top: px2rem(114px);
}
}
} }
.right { .right {
flex: 1; flex: 1;
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或