324 lines
7.5 KiB
Vue
324 lines
7.5 KiB
Vue
<template>
|
||
<div class="wrap" :style="{ 'overflow-y': showPoup ? 'hidden' : 'auto' }">
|
||
<div class="navBar">
|
||
<van-nav-bar title="新人培训" :border="false" :fixed="true" :safe-area-inset-top="true">
|
||
<template slot="left" v-if="isFinished">
|
||
<van-icon name="checked" color="#37ec37" size="20"/>
|
||
</template>
|
||
</van-nav-bar>
|
||
</div>
|
||
<div class="contentWrap" v-show="!showEmpty">
|
||
<van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="min-height:85vh">
|
||
<div class="itemWrap" v-for="(item,index) in pageList" :key="index" @click="goH5Detail(item)">
|
||
<div class="info flexBetween common">
|
||
<div class="title">{{ item.name }}</div>
|
||
<div class="time">{{ item.updateTime }}</div>
|
||
</div>
|
||
<div class="imgWrap"><img :src="item.themePicture"></div>
|
||
<div class="num common">{{ item.synopsis }}</div>
|
||
<template v-if="item.alreadyRead === 1">
|
||
<div class="status" style="color: #cccccc">已处理</div>
|
||
</template>
|
||
<template v-else>
|
||
<div class="status" >未处理</div>
|
||
</template>
|
||
</div>
|
||
</van-pull-refresh>
|
||
</div>
|
||
<div class="empty" v-show="showEmpty">
|
||
<img src="@/assets/empty.png" />
|
||
</div>
|
||
<div class="poupCommon" v-if="showPoup">
|
||
<div class="container showPoupContainer">
|
||
<div class="con">
|
||
<div class="title">培训提醒</div>
|
||
<div class="content">欢迎使用中道供应商APP。请您先完成培训，阅读文章，并问答相应问题。完成后即可正常使用APP。祝您使用愉快!</div>
|
||
<div class="line"></div>
|
||
<div class="btnWrap">
|
||
<div class="nextBtn" @click="showPoup = false">确定</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="poupCommon" v-if="isFinished">
|
||
<div class="container finishContainer">
|
||
<div class="con">
|
||
<div class="title">提示</div>
|
||
<div class="content">恭喜您，您已经全部完成培训！现在您可以正常使用我们的app，请前往体验。</div>
|
||
<div class="line"></div>
|
||
<div class="btnWrap">
|
||
<div class="nextBtn" @click="goApp">前往</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {myMixins} from "@/utils/myMixins"
|
||
import {pageList} from "@/api/mine"
|
||
export default {
|
||
name: "newTrainingList",
|
||
computed: {
|
||
},
|
||
mixins:[myMixins],
|
||
data(){
|
||
return{
|
||
pageNum:1,
|
||
pageSize:10,
|
||
pageList:[],
|
||
keyword:'',
|
||
show:false,
|
||
showEmpty:false,
|
||
isLoading:false,
|
||
showPoup:true,//进入弹框
|
||
isFinished:false,
|
||
}
|
||
},
|
||
mounted() {
|
||
// this.onRefresh();
|
||
this.getList();
|
||
|
||
},
|
||
created() {
|
||
// this.getList();
|
||
// 每次回答完问题之后返回需重新加结果
|
||
|
||
},
|
||
async activated() {
|
||
await this.getList()
|
||
},
|
||
methods:{
|
||
onRefresh() {
|
||
this.getList()
|
||
setTimeout(() => {
|
||
this.$toast('刷新成功');
|
||
this.isLoading = false;
|
||
}, 1000);
|
||
},
|
||
|
||
async getList(){
|
||
let res= await pageList({
|
||
pageNum:this.pageNum,
|
||
pageSize:this.pageSize,
|
||
docType:1,
|
||
trainingType:4,
|
||
})
|
||
this.pageList=res.data?.list;
|
||
if(res.assessState === 0){
|
||
this.showPoup=false
|
||
this.isFinished=true
|
||
}
|
||
if(this.pageList?.length === 0){
|
||
this.showEmpty = true
|
||
}else {
|
||
this.showEmpty = false
|
||
}
|
||
/* this.pageList=res.data;
|
||
let aaa=this.pageList.every(item=>item.listShowButton != 1)
|
||
console.log(aaa)
|
||
// if(aaa){
|
||
if(res.assessState === 0){
|
||
this.showPoup=false
|
||
this.isFinished=true
|
||
}
|
||
if(res.data.length === 0){
|
||
this.showEmpty = true
|
||
|
||
}else {
|
||
this.showEmpty = false
|
||
}*/
|
||
},
|
||
initShow(){
|
||
this.keyword= '',
|
||
this.getList()
|
||
},
|
||
goApp(){
|
||
let data = {"action":"goBack","params":""}
|
||
var u = navigator.userAgent;
|
||
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
|
||
if(isiOS){
|
||
window.webkit.messageHandlers.nativeObject.postMessage(data);
|
||
}else {
|
||
window.android.sendMessage("goBack");
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
@import "@/styles/common.scss";
|
||
@import "@/styles/mixin.scss";
|
||
@import "@/styles/docment.scss";
|
||
.status{
|
||
color: red;
|
||
font-size: 14px;
|
||
margin-right: 8px;
|
||
text-align: right
|
||
}
|
||
.wrap{
|
||
position: relative;
|
||
overflow-y: hidden;
|
||
}
|
||
.poupCommon{
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0,0,0,.7);
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
.showPoupContainer{
|
||
height: 310px;
|
||
background-size: 320px 310px;
|
||
.content{
|
||
margin-bottom: 20px;
|
||
}
|
||
.btnWrap{
|
||
margin-top: 6px;
|
||
}
|
||
}
|
||
.finishContainer{
|
||
height: 260px;
|
||
background-size: 320px 260px;
|
||
.con{
|
||
top: 80px !important;
|
||
}
|
||
}
|
||
.container{
|
||
width: 320px;
|
||
background-image: url("@/assets/trainBg.png");
|
||
background-repeat: no-repeat;
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
.con{
|
||
position: absolute;
|
||
top: 100px;
|
||
left: 20px;
|
||
}
|
||
|
||
}
|
||
.title{
|
||
font-weight: bold;
|
||
font-size: 19px;
|
||
color: #3364B7;
|
||
line-height: 26px;
|
||
width: 70%;
|
||
margin-left: 35px;
|
||
text-align: center;
|
||
}
|
||
.content{
|
||
width: 70%;
|
||
height: 92px;
|
||
font-size: 14px;
|
||
color: #4C5361;
|
||
line-height: 23px;
|
||
text-align: justify;
|
||
margin-top: 8px;
|
||
margin-left: 35px;
|
||
}
|
||
.line{
|
||
width: 285px;
|
||
height: 1px;
|
||
border-bottom: 1px solid #F1F2F5;
|
||
}
|
||
.btnWrap{
|
||
width: 92%;
|
||
font-weight: bold;
|
||
font-size: 13px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
.closeBtn{
|
||
color: #999B9F;
|
||
}
|
||
.line{
|
||
width: 1px;
|
||
height: 48px;
|
||
border-right: 1px solid #F1F2F5;
|
||
}
|
||
.nextBtn{
|
||
color: #3364B7;
|
||
}
|
||
}
|
||
}
|
||
//.poupWrap{
|
||
// width: 100%;
|
||
// height: 100%;
|
||
// background-color: rgba(0,0,0,.7);
|
||
// position: absolute;
|
||
// top: 0;
|
||
// left: 0;
|
||
// .container{
|
||
// width: 320px;
|
||
// height: 310px;
|
||
// background-image: url("@/assets/trainBg.png");
|
||
// background-size: 320px 310px;
|
||
// background-repeat: no-repeat;
|
||
// position: absolute;
|
||
// top: 0;
|
||
// bottom: 0;
|
||
// left: 0;
|
||
// right: 0;
|
||
// margin: auto;
|
||
// .con{
|
||
// position: absolute;
|
||
// top: 100px;
|
||
// left: 20px;
|
||
// }
|
||
//
|
||
// }
|
||
// .title{
|
||
// font-weight: bold;
|
||
// font-size: 19px;
|
||
// color: #3364B7;
|
||
// line-height: 26px;
|
||
// width: 70%;
|
||
// margin-left: 35px;
|
||
// text-align: center;
|
||
// }
|
||
// .content{
|
||
// width: 70%;
|
||
// height: 92px;
|
||
// font-size: 14px;
|
||
// color: #4C5361;
|
||
// line-height: 23px;
|
||
// text-align: justify;
|
||
// margin-top: 8px;
|
||
// margin-bottom: 20px;
|
||
// margin-left: 35px;
|
||
// }
|
||
// .line{
|
||
// width: 285px;
|
||
// height: 1px;
|
||
// border-bottom: 1px solid #F1F2F5;
|
||
// }
|
||
// .btnWrap{
|
||
// width: 92%;
|
||
// font-weight: bold;
|
||
// font-size: 13px;
|
||
// display: flex;
|
||
// justify-content: space-around;
|
||
// margin-top: 6px;
|
||
// height: 40px;
|
||
// line-height: 40px;
|
||
// .closeBtn{
|
||
// color: #999B9F;
|
||
// }
|
||
// .line{
|
||
// width: 1px;
|
||
// height: 48px;
|
||
// border-right: 1px solid #F1F2F5;
|
||
// }
|
||
// .nextBtn{
|
||
// color: #3364B7;
|
||
// }
|
||
// }
|
||
//}
|
||
</style>
|