江西小程序管理端
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.
 
 
 

220 lines
4.7 KiB

<template>
<view class="main">
<view class="blueBg">
<!-- <topNavbar title="预约记录"></topNavbar> -->
<view class="pad">
<view class="searchBox">
<searchRow placeholder="搜索学员姓名、学员手机号、考场名称"></searchRow>
</view>
<view class="tabs">
<view class="tab" @click="changeTab(1)" :class="{active: currentTab==1}">待核销</view>
<view class="tab" @click="changeTab(2)" :class="{active: currentTab==2}">已核销</view>
</view>
</view>
</view>
<view class="navs">
<view class="nav" v-for="(item,index) in tabsList" :key="index" :class="{active: currentNav==item.id}" @click="changeNav(item)">{{ item.text }}</view>
</view>
<view class="pad">
<view class="total_row">
<view class="total">12条记录</view>
<view class="screen" @click="showDate=true">
<view class="text">筛选</view>
<view class="icon">
<image src="@/static/images/coach/screen.png" mode=""></image>
</view>
</view>
</view>
<view class="card" @click="goPage">
<appointItem />
</view>
</view>
<UserTab name ='预约记录'></UserTab>
<u-popup :show="showDate" mode="bottom" :round="20" :closeable="true" :closeOnClickOverlay="true">
<view class="popupBox">
<view class="pad">
<view class="car">
<view class="h1">车型</view>
<view class="car_row">
<view class="carItem" @click="screenCarFn(1)" :class="{active: params.car==1}">C1</view>
<view class="carItem" @click="screenCarFn(2)" :class="{active: params.car==2}">C2</view>
</view>
</view>
<view class="h1" style="transform: translateY(30rpx);margin-bottom: 20rpx;">时间</view>
</view>
<timeScreen @selectDateClick="selectDateClick" @confirmDatePicker="confirmDatePicker" />
</view>
</u-popup>
</view>
</template>
<script>
import { examSimulationPages } from '@/config/api.js'
export default {
data() {
return {
currentTab: 1,
currentNav: 1,
tabsList: [
{id: 1, text: '全部'},
{id: 2, text: '科目二'},
{id: 3, text: '科目三'},
],
showDate: false,
params: {
car: 1,
pageNo: 1,
pageSize: 20,
// status: 0,
}
}
},
created() {
this.examSimulationPagesFn()
},
methods: {
async examSimulationPagesFn() {
const {data: res} = await examSimulationPages(this.params)
console.log(res)
},
changeTab(num) {
console.log(num)
this.currentTab = num
},
changeNav(item) {
this.currentNav = item.id
},
goPage() {
this.$goPage('/pages/recordEntry/examine/examineRecord/detail/detail')
},
confirmDatePicker() {
this.showDate = true
},
// 选择筛选日期
selectDateClick(val) {
console.log(val)
this.showDate = false
},
screenCarFn(num) {
this.params.car = num
}
}
}
</script>
<style lang="scss" scoped>
.popupBox {
.car {
.h1 {
line-height: 100rpx;
}
.car_row {
display: flex;
.carItem {
width: 130rpx;
height: 60rpx;
background: rgba(25,137,250,0.1);
border-radius: 8rpx;
border: 2rpx solid #1989FA;
text-align: center;
line-height: 60rpx;
color: $themC;
margin-right: 58rpx;
&.active {
background: $themC;
color: #fff;
}
}
}
}
}
.main {
width: 100%;
min-height: 100vh;
background: #f3f3f3;
.blueBg {
background: #1989FA;
padding: 140rpx 0 20rpx 0;
}
.total_row {
display: flex;
justify-content: space-between;
height: 82rpx;
align-items: center;
.total {
font-size: 24rpx;
color: #686B73;
text-align: right;
line-height: 82rpx;
}
.screen {
display: flex;align-items: center;
color: $themC;
margin-left: 8rpx;
font-size: 28rpx;
.icon {
width: 24rpx;
height: 24rpx;
}
}
}
.card {
padding: 0 20rpx;
}
}
.searchBox {
padding: 24rpx 0 20rpx 0;
}
.tabs {
display: flex;
width: 100%;
height: 72rpx;
background: #FFFFFF;
border-radius: 16rpx;
.tab {
flex: 1;
text-align: center;
line-height: 72rpx;
color: #ADADAD;
font-size: 28rpx;
&.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: 0rpx 108rpx 0rpx 130rpx;
color: $themC;
background: #fff;
height: 100rpx;
.nav {
line-height: 100rpx;
&.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;
}
}
}
}
</style>