学员端小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

229 lines
5.6 KiB

<template>
<view class="pageBgImg">
<topNavbar title="我的预约"></topNavbar>
<view class="pad">
<view class="searcBox">
<searchRow placeholder="搜索考场名称、车牌号" @searchFn="searchFn" ref="searchRef"/>
</view>
<view class="tabs">
<view class="tab" v-for="(item,index) in tabList" :key="index" :class="{active: currentTab==item.id}" @click="changeTab(item)">{{ item.text }}</view>
</view>
<view class="navs">
<view class="nav" v-for="(item,index) in navList" :key="index" :class="{active: currentNav===item.id}" @click="changeNav(item)">{{ item.text }}</view>
</view>
<view class="recordTotal" v-if="total">{{total}}条记录</view>
<view class="tabCon" v-show="currentTab==1">
<view class="card" v-for="(item,index) in list" :key="index" @click="$goPage('/pages/mineEntry/myAppointment/detail/detail?type=1&id='+item.id)">
<imitate :item="item"></imitate>
</view>
</view>
<view class="tabCon" v-if="currentTab==2">
<view class="card" v-for="(item,index) in list" :key="index" @click="$goPage('/pages/mineEntry/myAppointment/detail/detail?type=2&id='+item.id)">
<opera :item="item"></opera>
</view>
</view>
<view class="tabCon" v-if="currentTab==3">
<view class="card" v-for="(item,index) in list" :key="index" @click="$goPage('/pages/mineEntry/myAppointment/detail/detail?type=3&id='+item.id)">
<examin :item="item"></examin>
</view>
</view>
<view style="padding: 10rpx 0 20rpx 0;" v-if="list.length">
<u-loadmore :status="status" />
</view>
<nodata v-if="!list.length&&status=='nomore'"></nodata>
</view>
</view>
</template>
<script>
import imitate from './comp/imitate'
import opera from './comp/opera'
import examin from './comp/examin'
import { examSimulationRecord, simulationPage, masterPage } from '@/config/api.js'
export default {
components: { imitate, opera, examin},
data() {
return {
tabList: [
{text: '模拟器',id: 1},
{text: '实操训练',id: 2},
{text: '考场模拟',id: 3},
],
navList: [
{text: '全部', id: -1},
{text: '已签到', id: 1},
{text: '待完成', id: 0},
{text: '已取消', id: 9},
{text: '已过期', id: 3},
],
// 0:未签到,1:已签到,2:已签退,3:旷课,9:已取消
currentTab: 2,
currentNav: 0,
params: { "pageNo": 1, "pageSize": 10, "keyWord": "", "status": '0',studentId: '', keyWord: ''},
list: [],
total: 20,
status: 'loading'
}
},
onLoad(options) {
if(options.currentTab) this.currentTab = options.currentTab
this.params.studentId = this.studentId
},
onShow() {
this.inintList()
},
onReachBottom() {
if(this.total>this.list.length) {
this.inintList('onReachBottom')
}
},
onPullDownRefresh() {
this.inintList()
},
methods: {
inintList(type) {
if(!type) {
this.params.pageNo = 1
this.list = []
this.total = 0
}
if(this.currentTab==3) {
this.examSimulationRecordFn()
}else if(this.currentTab==1) {
this.simulationPageFn()
}else {
this.masterPageFn()
}
},
changeTab(item) {
this.params.keyWord = ''
this.currentTab = item.id
this.$refs.searchRef.keyword = ''
this.inintList()
},
changeNav(item) {
this.currentNav = item.id
this.list = []
this.params.pageNo = 1
if(item.id==-1) {
this.params.status = ''
}else {
this.params.status = this.currentNav
}
this.inintList()
},
// 考场预约
async examSimulationRecordFn() {
const {data: res} = await examSimulationRecord(this.params)
this.params.pageNo ++
this.list.push(...res.list)
this.total = res.total
if(this.list.length>=this.total) this.status = 'nomore'
},
// 模拟器预约记录
async simulationPageFn() {
let obj = {}
for(let k in this.params) {
if(this.params[k]!=='') {
obj[k] = this.params[k]
}
}
const {data: res} = await simulationPage(obj)
this.params.pageNo ++
this.list.push(...res.list)
this.total = res.total
if(this.list.length>=this.total) this.status = 'nomore'
},
// 实操预约
async masterPageFn() {
let obj = {}
for(let k in this.params) {
if(this.params[k]!=='') {
obj[k] = this.params[k]
}
}
const {data: res} = await masterPage(obj)
this.params.pageNo ++
this.list.push(...res.list)
this.total = res.total
if(this.list.length>=this.total) this.status = 'nomore'
},
// 搜索
searchFn(val) {
this.params.keyWord = val
this.inintList()
}
}
}
</script>
<style lang="scss" scoped>
.searcBox {
margin: 0 0 20rpx 0;
}
.card {
padding: 0 24rpx;
margin-bottom: 20rpx;
}
.tabs {
display: flex;
width: 100%;
height: 72rpx;
background: #FFFFFF;
border-radius: 16rpx;
margin-top: 20rpx;
.tab {
flex: 1;
text-align: center;
line-height: 72rpx;
color: #ADADAD;
&.active {
background: rgba(25,137,250,0.1);
border-radius: 16rpx;
border: 2rpx solid #1989FA;
color: $themC;
font-weight: 600;
}
}
}
.navs {
display: flex;
justify-content: space-between;
color: #fff;
font-size: 28rpx;
padding: 24rpx 0 40rpx 0;
color: $themC;
.nav {
&.active {
font-weight: 500;
position: relative;
&::before {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -20rpx;
content: '';
width: 56rpx;
height: 6rpx;
background: $themC;
border-radius: 3rpx;
}
}
}
}
.recordTotal {
font-size: 24rpx;
padding: 0rpx 0 28rpx 0;
text-align: right;
}
.pad {
padding-bottom: 40rpx;
}
</style>