task#15348,新加师傅界面
This commit is contained in:
298
src/views/newcomerTraining/driverTrainingList.vue
Normal file
298
src/views/newcomerTraining/driverTrainingList.vue
Normal file
@ -0,0 +1,298 @@
|
||||
<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.pushTime }}</div>-->
|
||||
</div>
|
||||
<div class="imgWrap"><img :src="item.themePicture"></div>
|
||||
<div class="num common">{{ item.synopsis }}</div>
|
||||
<div class="info flexBetween common">
|
||||
<div class="time">{{ item.pushTime }}</div>
|
||||
<template v-if="item.alreadyRead === 1">
|
||||
<div class="status" style="color: #cccccc">已处理</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="status" >未处理</div>
|
||||
</template>
|
||||
</div>
|
||||
</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 {driverTrainList} from "@/api/mine"
|
||||
export default {
|
||||
name: "driverTrainingList",
|
||||
computed: {
|
||||
},
|
||||
mixins:[myMixins],
|
||||
data(){
|
||||
return{
|
||||
pageList:[],
|
||||
show:false,
|
||||
showEmpty:false,
|
||||
isLoading:false,
|
||||
showPoup:true,//进入弹框
|
||||
isFinished:false,
|
||||
driverId:'',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList();
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
this.driverId = urlParams.get('driverId');
|
||||
},
|
||||
async activated() {
|
||||
await this.getList()
|
||||
},
|
||||
methods:{
|
||||
onRefresh() {
|
||||
this.getList()
|
||||
setTimeout(() => {
|
||||
this.$toast('刷新成功');
|
||||
this.isLoading = false;
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
async getList(){
|
||||
let res= await driverTrainList({
|
||||
driverId:this.driverId,//79639
|
||||
})
|
||||
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
|
||||
}
|
||||
},
|
||||
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>
|
||||
Reference in New Issue
Block a user