fangwenqiao
/
jiangximiniprogramSchool
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

写页面

master
unknown 1 year ago
parent
c7ccd6a193
commit
8e2952ed02
9 changed files with 745 additions and 18 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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. 176
      pages/tabbar/examSimulation/index.vue
  8. 147
      pages/tabbar/operateTrain/index.vue
  9. 3
      pages/tabbar/statistics/index.vue

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

@ -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:00—10: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
View File

@ -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:00—10: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
View File

@ -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", "root": "pages/other",
"pages": [ "pages": [
{ {

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

@ -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
View File

@ -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
View File

@ -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>

176
pages/tabbar/examSimulation/index.vue
View File

@ -1,6 +1,55 @@
<template> <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> --> <!-- <UserTab selectedIndex ='1'></UserTab> -->
</view> </view>
</template> </template>
@ -8,11 +57,9 @@
<script> <script>
export default { export default {
data() { data() {
return {
}
},
onLoad() {
return {}
}, },
onLoad() {},
onShow() { onShow() {
// uni.hideTabBar(); // uni.hideTabBar();
}, },
@ -23,8 +70,119 @@
</script> </script>
<style lang="scss" scoped> <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>

147
pages/tabbar/operateTrain/index.vue
View File

@ -1,6 +1,44 @@
<template> <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> --> <!-- <UserTab selectedIndex ='2'></UserTab> -->
</view> </view>
</template> </template>
@ -9,6 +47,25 @@
export default { export default {
data() { data() {
return { return {
tabArr: [{
text: '待上课',
id: 1
},
{
text: '已完成',
id: 2
},
{
text: '已取消',
id: 3
},
],
currentTab: 1,
screen: {
subject: '训练科目',
car: '预约车辆',
timer: '预约时间'
}
} }
}, },
onLoad() { onLoad() {
@ -18,14 +75,92 @@
// uni.hideTabBar(); // uni.hideTabBar();
}, },
methods: { methods: {
goPage() {}
changeTab(item) {
this.currentTab = item.id
}
} }
} }
</script> </script>
<style lang="scss" scoped> <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
View File

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

Write Preview
Loading…
Cancel
Save