Browse Source

写页面

master
unknown 1 year ago
parent
commit
8e2952ed02
  1. 103
      components/appointItem-operate/appointItem-operate.vue
  2. 104
      components/appointItem/appointItem.vue
  3. 23
      pages.json
  4. 42
      pages/recordEntry/examine/examineRecord/detail/detail.vue
  5. 119
      pages/recordEntry/examine/examineRecord/examineRecord.vue
  6. 42
      pages/recordEntry/operate/detail/detail.vue
  7. 178
      pages/tabbar/examSimulation/index.vue
  8. 149
      pages/tabbar/operateTrain/index.vue
  9. 3
      pages/tabbar/statistics/index.vue

103
components/appointItem-operate/appointItem-operate.vue

@ -0,0 +1,103 @@
<template>
<!-- 实操 -->
<view class="consultItem">
<view class="top_row">
<view class="flex">
<view class="schoolName">张三三 18265468753</view>
</view>
<view class="status">
<view class="text">待上课</view>
<view class="icon">
<u-icon name="arrow-right" size="14" color="#686B73" style="margin-left: 12rpx;" ></u-icon>
</view>
</view>
</view>
<view class="target">
<view class="row">
<view class="iconImg">
<image src="@/static/images/index/radio_nor.png" mode=""></image>
</view>
<view class="name">训练科目科目二</view>
</view>
<view class="row">
<view class="iconImg">
<image src="@/static/images/index/radio_nor.png" mode=""></image>
</view>
<view class="name">预约场地xxx场地</view>
</view>
<view class="row">
<view class="iconImg">
<image src="@/static/images/index/radio_nor.png" mode=""></image>
</view>
<view class="name">预约车辆2号车浙A99999</view>
</view>
<view class="row">
<view class="iconImg">
<image src="@/static/images/index/radio_nor.png" mode=""></image>
</view>
<view class="name">预约时间2023/08/08 9:0010:00</view>
</view>
</view>
</view>
</template>
<script>
</script>
<style lang="scss" scoped>
.consultItem {
width: 100%;
.top_row {
display: flex;
width: 100%;
height: 116rpx;
border-bottom: 2rpx dashed #E8E9EC;
justify-content: space-between;
align-items: center;
.tag {
// width: 176rpx;
height: 60rpx;
background: rgba(250, 149, 25, 0.1);
border-radius: 8rpx;
text-align: center;
font-size: 28rpx;
color: #FA7919;
margin-right: 24rpx;
padding: 10rpx 18rpx;
}
.schoolName {
font-size: 28rpx;
color: #333;
margin-left: 20rpx;
font-weight: 550;
}
.status {
display: flex;
align-items: center;
.text {
font-size: 28rpx;
color: $themC;
}
}
}
.target {
padding: 20rpx 0;
}
.row {
padding: 16rpx 0;
display: flex;
align-items: center;
.iconImg {
width: 25rpx;
height: 25rpx;
}
.name {
font-size: 28rpx;
color: #333;
padding-left: 20rpx;
}
}
}
</style>

104
components/appointItem/appointItem.vue

@ -0,0 +1,104 @@
<template>
<!-- 考场 -->
<view class="consultItem">
<view class="top_row">
<view class="flex">
<view class="tag">模拟器</view>
<view class="schoolName">张三三 18265468753</view>
</view>
<view class="status">
<view class="text">待处理</view>
<view class="icon">
<u-icon name="arrow-right" size="14" color="#686B73" style="margin-left: 12rpx;" ></u-icon>
</view>
</view>
</view>
<view class="target">
<view class="row">
<view class="iconImg">
<image src="@/static/images/index/radio_nor.png" mode=""></image>
</view>
<view class="name">xx考场</view>
</view>
<view class="row">
<view class="iconImg">
<image src="@/static/images/index/radio_nor.png" mode=""></image>
</view>
<view class="name">C1小型汽车手动挡</view>
</view>
<view class="row">
<view class="iconImg">
<image src="@/static/images/index/radio_nor.png" mode=""></image>
</view>
<view class="name">2号车浙A99999</view>
</view>
<view class="row">
<view class="iconImg">
<image src="@/static/images/index/radio_nor.png" mode=""></image>
</view>
<view class="name">2023/08/08 9:0010:00</view>
</view>
</view>
</view>
</template>
<script>
</script>
<style lang="scss" scoped>
.consultItem {
width: 100%;
.top_row {
display: flex;
width: 100%;
height: 116rpx;
border-bottom: 2rpx dashed #E8E9EC;
justify-content: space-between;
align-items: center;
.tag {
// width: 176rpx;
height: 60rpx;
background: rgba(250, 149, 25, 0.1);
border-radius: 8rpx;
text-align: center;
font-size: 28rpx;
color: #FA7919;
margin-right: 24rpx;
padding: 10rpx 18rpx;
}
.schoolName {
font-size: 28rpx;
font-weight: 550;
color: #333;
margin-left: 20rpx;
}
.status {
display: flex;
align-items: center;
.text {
font-size: 28rpx;
color: $themC;
}
}
}
.target {
padding: 20rpx 0;
}
.row {
padding: 16rpx 0;
display: flex;
align-items: center;
.iconImg {
width: 25rpx;
height: 25rpx;
}
.name {
font-size: 28rpx;
color: #333;
padding-left: 20rpx;
}
}
}
</style>

23
pages.json

@ -86,6 +86,29 @@
]
},
{
"root": "pages/recordEntry",
"pages": [
{
"path": "examine/examineRecord/examineRecord",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom",
"enablePullDownRefresh": false,
"backgroundTextStyle": "dark"
}
},
{
"path": "operate/detail/detail",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom",
"enablePullDownRefresh": false,
"backgroundTextStyle": "dark"
}
}
]
},
{
"root": "pages/other",
"pages": [
{

42
pages/recordEntry/examine/examineRecord/detail/detail.vue

@ -0,0 +1,42 @@
<template>
<view class="pageBgImg">
<topNavbar title="预约详情"></topNavbar>
<view class="pad">
<view class="card">
<appointItem />
<view class="border_bottom">
<view class="date">核销时间2023/08/08 08:52:08</view>
</view>
</view>
</view>
</view>
</template>
<script>
</script>
<style lang="scss" scoped>
.card {
padding: 0 28rpx;
}
.date {
font-size: 28rpx;
color: #ADADAD;
margin-bottom: 16rpx;
}
.border_bottom {
border-top: 2rpx dashed #E8E9EC;
padding: 24rpx 10rpx 10rpx 0;
.date {
font-size: 28rpx;
color: #ADADAD;
margin-bottom: 16rpx;
}
.btnBg {
width: 212rpx;
margin: 30rpx auto;
}
}
</style>

119
pages/recordEntry/examine/examineRecord/examineRecord.vue

@ -0,0 +1,119 @@
<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: currentTab==item.id}">{{ item.text }}</view>
</view>
<view class="pad">
<view class="total">12条记录</view>
<view class="card" @click="$goPage('/pages/recordEntry/examine/examineRecord/detail/detail')">
<appointItem />
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
currentTab: 1,
tabsList: [
{id: 1, text: '全部'},
{id: 2, text: '科目二'},
{id: 3, text: '科目三'},
]
}
},
methods: {
changeTab(num) {
console.log(num)
this.currentTab = num
}
}
}
</script>
<style lang="scss" scoped>
.main {
width: 100%;
min-height: 100vh;
background: #f3f3f3;
.blueBg {
background: #1989FA;
padding-bottom: 20rpx;
}
.total {
font-size: 24rpx;
color: #686B73;
text-align: right;
line-height: 70rpx;
}
.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;
&.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>

42
pages/recordEntry/operate/detail/detail.vue

@ -0,0 +1,42 @@
<template>
<view class="pageBgImg">
<topNavbar title=""></topNavbar>
<view class="pad">
<view class="card">
<appointItem-operate />
<view class="border_bottom">
<view class="date">核销时间2023/08/08 08:52:08</view>
</view>
</view>
</view>
</view>
</template>
<script>
</script>
<style lang="scss" scoped>
.card {
padding: 0 28rpx;
}
.date {
font-size: 28rpx;
color: #ADADAD;
margin-bottom: 16rpx;
}
.border_bottom {
border-top: 2rpx dashed #E8E9EC;
padding: 24rpx 10rpx 10rpx 0;
.date {
font-size: 28rpx;
color: #ADADAD;
margin-bottom: 16rpx;
}
.btnBg {
width: 212rpx;
margin: 30rpx auto;
}
}
</style>

178
pages/tabbar/examSimulation/index.vue

@ -1,6 +1,55 @@
<template>
<view class="content">
考场模拟
<view class="pageBgImg pad">
<view class="searchBox">
<searchRow placeholder="搜索学员姓名、学员手机号、考场名称"></searchRow>
</view>
<view class="card">
<view class="verified_today">
<view class="leftVerified">
<view class="num_row">
<view class="num">7</view>
<view class="unit"></view>
</view>
<view class="txtLab">今日待核销</view>
</view>
<view class="rightBtn">
<view class="objBtn">科目二3</view>
<view class="objBtn">科目二7</view>
</view>
</view>
</view>
<view class="card_flex">
<view class="card" v-for="(item,index) in 4" :key="index">
<view class="flex-b" style="padding: 32rpx 0;">
<view class="leftText">
<view class="lab">指标总量</view>
<view class="num_row">
<view class="num">7</view>
<view class="unit"></view>
</view>
</view>
<view class="rightTxt">
<view class="text_row">
<view class="dian yellow"></view>
<view class="text">科目二100</view>
</view>
<view class="text_row">
<view class="dian"></view>
<view class="text">科目二100</view>
</view>
</view>
</view>
</view>
</view>
<view class="flex-b">
<view class="h1">预约记录</view>
<moreRight text="更多" @click.native="$goPage('/pages/recordEntry/examine/examineRecord/examineRecord')"></moreRight>
</view>
<view class="card">
<appointItem />
</view>
<!-- <UserTab selectedIndex ='1'></UserTab> -->
</view>
</template>
@ -8,11 +57,9 @@
<script>
export default {
data() {
return {
}
},
onLoad() {
return {}
},
onLoad() {},
onShow() {
// uni.hideTabBar();
},
@ -23,8 +70,119 @@
</script>
<style lang="scss" scoped>
.content {
width: 100vw;
height: 100vh;
.searchBox {
padding: 140rpx 0 24rpx 0;
}
.h1 {
line-height: 92rpx;
}
.card {
padding: 0 28rpx;
margin-bottom: 20rpx;
.verified_today {
display: flex;
align-items: center;
padding: 20rpx 0;
.leftVerified {
flex: 1;
text-align: center;
.num_row {
display: flex;
justify-content: center;
color: $themC;
.num {
font-size: 56rpx;
}
.unit {
font-size: 24rpx;
margin-top: 20rpx;
}
}
.txtLab {
font-size: 28rpx;
color: #686B73;
margin-top: 10rpx;
}
}
.rightBtn {
width: 224rpx;
.objBtn {
width: 100%;
height: 76rpx;
background: rgba(25,137,250,0.1);
border-radius: 8rpx;
line-height: 76rpx;
text-align: center;
font-size: 32rpx;
color: $themC;
&:first-child {
margin-bottom: 8rpx;
}
}
}
}
}
.card_flex {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.card {
width: 48.8%;
.leftText {
display: flex;
flex-direction: column;
align-items: center;
color: $themC;
.lab {
font-size: 24rpx;
}
.num_row {
display: flex;
margin-top: 10rpx;
.num {
font-size: 40rpx;
font-weight: 500;
}
.unit {
font-size: 24rpx;
margin-top: 8rpx;
}
}
}
.rightTxt {
display: flex;
flex-direction: column;
align-items: center;
.text_row {
display: flex;
align-items: center;
&:first-child {
margin-bottom: 20rpx;
}
.dian {
width: 8rpx;
height: 8rpx;
background: #0D9269;
border-radius: 4rpx;
margin-right: 10rpx;
&.yellow {
background: #FA7919;
}
}
.text {
font-size: 24rpx;
color: #333;
}
}
}
}
}
</style>
</style>

149
pages/tabbar/operateTrain/index.vue

@ -1,6 +1,44 @@
<template>
<view class="content">
实操训练
<view class="pageBgImg pad">
<view class="searchBox">
<searchRow placeholder="搜索学员姓名、学员手机号"></searchRow>
</view>
<view class="card">
<view class="myClass">
<view class="leftTxt">我的排课</view>
<view class="leftBtn">去管理</view>
</view>
</view>
<view class="tabs">
<view class="tab" v-for="(item,index) in tabArr" :key="index" :class="{active: currentTab==item.id}"
@click="changeTab(item)">{{ item.text }}</view>
</view>
<view class="screen_row">
<view class="selectItem">
<view class="text oneRowText">{{screen.subject}}</view>
<view class="downIcon">
<u-icon name="arrow-down"></u-icon>
</view>
</view>
<view class="selectItem">
<view class="text oneRowText">{{screen.car}}</view>
<view class="downIcon">
<u-icon name="arrow-down"></u-icon>
</view>
</view>
<view class="selectItem">
<view class="text oneRowText">{{screen.timer}}</view>
<view class="downIcon">
<u-icon name="arrow-down"></u-icon>
</view>
</view>
</view>
<view class="list">
<view class="card">
<appointItem-operate @click.native="$goPage('/pages/recordEntry/operate/detail/detail')"/>
</view>
</view>
<!-- <UserTab selectedIndex ='2'></UserTab> -->
</view>
</template>
@ -9,6 +47,25 @@
export default {
data() {
return {
tabArr: [{
text: '待上课',
id: 1
},
{
text: '已完成',
id: 2
},
{
text: '已取消',
id: 3
},
],
currentTab: 1,
screen: {
subject: '训练科目',
car: '预约车辆',
timer: '预约时间'
}
}
},
onLoad() {
@ -18,14 +75,92 @@
// uni.hideTabBar();
},
methods: {
goPage() {}
changeTab(item) {
this.currentTab = item.id
}
}
}
</script>
<style lang="scss" scoped>
.content {
width: 100vw;
height: 100%;
.pageBgImg {
.searchBox {
padding: 140rpx 0 24rpx 0;
}
.card {
padding: 0 28rpx;
margin-bottom: 20rpx;
.myClass {
height: 108rpx;
display: flex;
justify-content: space-between;
padding: 0 10rpx;
align-items: center;
.leftTxt {
font-size: 32rpx;
font-weight: 500;
}
.leftBtn {
width: 192rpx;
height: 60rpx;
background: $themC; border-radius: 8rpx;
line-height: 60rpx;
text-align: center;
font-weight: 500;
color: #FFFFFF;
}
}
}
.tabs {
height: 72rpx;
background: #FFFFFF;
border-radius: 16rpx;
display: flex;
line-height: 72rpx;
text-align: center;
color: #ADADAD;
margin: 24rpx 0;
.tab {
flex: 1;
text-align: center;
&.active {
background: rgba(25, 137, 250, 0.1);
border: 2rpx solid #1989FA;
color: $themC;
border-radius: 16rpx;
}
}
}
.screen_row {
display: flex;
margin-bottom: 24rpx;
width: 100%;
justify-content: space-between;
.selectItem {
display: flex;
padding: 0 18rpx;
border: 2rpx solid rgba(25,137,250,0.3);
height: 60rpx;
border-radius: 16rpx;
background-color: #FFFFFF;
line-height: 60rpx;
align-items: center;
width: 28.6%;
.text {
color: $themC;
flex: 1;
}
.downIcon {
width: 24rpx;
}
}
}
.list {
.card {
appointitem-operate {}
}
}
}
</style>
</style>

3
pages/tabbar/statistics/index.vue

@ -41,7 +41,7 @@
<moreRight text="更多"/>
</view>
<view class="record">
<view class="card">
<view class="card" v-for="(item,index) in 10" :key="index">
<stage/>
</view>
</view>
@ -186,6 +186,7 @@
}
.card {
margin-bottom: 20rpx;
.chart {
}

Loading…
Cancel
Save