|
|
<template> <view class="pageBgImg"> <topNavbar title="我的预约"></topNavbar> <view class="pad"> <view class="searcBox"> <searchRow placeholder="搜索考场名称、车牌号"/> </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">{{total}}条记录</view> <view class="tabCon" v-show="currentTab==1"> <view class="card" v-for="(item,index) in 10" :key="index" @click="$goPage('/pages/mineEntry/myAppointment/detail/detail')"> <imitate></imitate> </view> </view> <view class="tabCon" v-if="currentTab==2"> <view class="card" v-for="(item,index) in 10" :key="index" @click="$goPage('/pages/mineEntry/myAppointment/detail/detail')"> <opera></opera> </view> </view> <view class="tabCon" v-if="currentTab==3"> <view class="card" v-for="(item,index) in examList" :key="index" @click="$goPage('/pages/mineEntry/myAppointment/detail/detail?type=3&id='+item.id)"> <examin :item="item"></examin> </view> </view> </view> </view> </template>
<script> import imitate from './comp/imitate' import opera from './comp/opera' import examin from './comp/examin' import { examSimulationRecord } 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: 3, currentNav: 0, examParams: { "pageNo": 1, "pageSize": 10, "keyWord": "", "status": '',}, examList: [], total: 20 } }, onLoad(options) { if(options.currentTab) this.currentTab = options.currentTab this.examSimulationRecordFn() }, methods: { changeTab(item) { this.currentTab = item.id }, changeNav(item) { this.currentNav = item.id this.examList = [] this.examParams.pageNo = 1 if(item.id==-1) { this.examParams.status = '' }else { this.examParams.status = this.currentNav } this.examSimulationRecordFn() }, // 考场预约
async examSimulationRecordFn() { const {data: res} = await examSimulationRecord(this.examParams) this.examParams.pageNo ++ this.examList.push(...res.list) this.total = res.total } } } </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; } </style>
|