19 changed files with 1030 additions and 608 deletions
-
1pages.json
-
4pages/indexEntry/findShcool/shcoolDetail/shcoolDetail.vue
-
96pages/mineEntry/carLearProgress/carLearProgress.vue
-
7pages/tabbar/index/comp/informaItem.vue
-
21pages/tabbar/index/index.vue
-
61pages/tabbar/learnCar/comp/comp.scss
-
39pages/tabbar/learnCar/comp/subject0.vue
-
150pages/tabbar/learnCar/comp/topInfo.vue
-
172pages/tabbar/learnCar/index - 副本.vue
-
165pages/tabbar/learnCar/index.vue
-
368pages/tabbar/mine/index - 副本.vue
-
125pages/tabbar/mine/index.scss
-
371pages/tabbar/mine/index.vue
-
0static/images/icon/arrowRightfff.png
-
0static/images/icon/箭头 拷贝 2(1).png
-
0static/images/mineIcon/sanCode.png
@ -0,0 +1,150 @@ |
|||
<template> |
|||
<view class="topInfo card"> |
|||
<view class="user_row"> |
|||
<view class="avatar"> |
|||
<image src="@/static/images/mineIcon/emtryIcon (1).png" mode=""></image> |
|||
</view> |
|||
<view class="rightTxt"> |
|||
<view class="name">JOE宝宝</view> |
|||
<view class="btn_row"> |
|||
<view class="txt">科目四</view> |
|||
<u-icon name="arrow-down-fill" color="#fff" size="10"></u-icon> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="bg"> |
|||
<view class="row"> |
|||
<view class="timeItem"> |
|||
<view class="flex"> |
|||
<view class="time">120</view> |
|||
<view class="uni">分钟</view> |
|||
</view> |
|||
<view class="lab">已完成学时</view> |
|||
</view> |
|||
<view class="timeItem"> |
|||
<view class="flex"> |
|||
<view class="time">120</view> |
|||
<view class="uni">分钟</view> |
|||
</view> |
|||
<view class="lab">应完成学时</view> |
|||
</view> |
|||
</view> |
|||
<view class="row"> |
|||
<view class="timeItem"> |
|||
<view class="flex "> |
|||
<view class="time">120</view> |
|||
<view class="uni">分钟</view> |
|||
</view> |
|||
<view class="lab">已完成学时</view> |
|||
</view> |
|||
<view class="timeItem"> |
|||
<view class="flex "> |
|||
<view class="time ">120</view> |
|||
<view class="uni">分钟</view> |
|||
</view> |
|||
<view class="lab">应完成学时</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.topInfo.card { |
|||
padding: 0rpx 20rpx 20rpx 20rpx; |
|||
.user_row { |
|||
display: flex; |
|||
.avatar { |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
// transform: translateY(-50rpx); |
|||
margin-top: -36rpx; |
|||
background: #F6F7FA; |
|||
} |
|||
|
|||
.rightTxt { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
flex: 1; |
|||
width: 0; |
|||
padding: 0 0 0 20rpx; |
|||
.name { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
} |
|||
|
|||
.btn_row { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: $themC; |
|||
width: 150rpx; |
|||
height: 50rpx; |
|||
color: #fff; |
|||
border-radius: 10rpx; |
|||
font-size: 24rpx; |
|||
lighting-color: 50rpx; |
|||
.txt { |
|||
margin-right: 10rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.bg { |
|||
background: #F6F7FA; |
|||
border-radius: 20rpx; |
|||
padding: 20rpx; |
|||
margin-top: 30rpx; |
|||
.row { |
|||
border-top: 1rpx solid #EDEDED; |
|||
display: flex; |
|||
&:first-child { |
|||
border: none; |
|||
} |
|||
.timeItem { |
|||
border-left: 1px solid #EDEDED; |
|||
flex: 1; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: #999; |
|||
font-size: 24rpx; |
|||
padding: 20rpx 0; |
|||
&:first-child { |
|||
border: none; |
|||
} |
|||
.flex { |
|||
justify-content: center; |
|||
|
|||
.time { |
|||
font-size: 36rpx; |
|||
color: #333; |
|||
font-weight: 700; |
|||
} |
|||
.uni { |
|||
margin-top: -6rpx; |
|||
} |
|||
} |
|||
|
|||
.lab { |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,172 @@ |
|||
<template> |
|||
<view class="content pageBgImg"> |
|||
|
|||
<view style="width: 100%;height: 40rpx;"></view> |
|||
<view class="status_bar"></view> |
|||
<view class="title">江西驾考公共服务平台</view> |
|||
<view class="navCard"> |
|||
<view class="nav_row"> |
|||
<view class="nav " v-for="(item,index) in navData" :key="index" :class="{active: item.id==currentNav}" @click="changeNav(item.id)">{{ item.text }}</view> |
|||
</view> |
|||
<view class="time_row"> |
|||
<view class="time_item"> |
|||
<view class="lab">应完成学时</view> |
|||
<view class="num">100分钟</view> |
|||
</view> |
|||
<view class="time_item"> |
|||
<view class="lab">已完成学时</view> |
|||
<view class="num">30分钟</view> |
|||
<view class="shareTime">*与科目一学时共享</view> |
|||
</view> |
|||
</view> |
|||
<view class="subject3" v-if="currentNav==3"> |
|||
<view class="chain left"> |
|||
<image src="@/static/images/index/chain.png" mode=""></image> |
|||
</view> |
|||
<view class="chain right"> |
|||
<image src="@/static/images/index/chain.png" mode=""></image> |
|||
</view> |
|||
<view class="time_row "> |
|||
<view class="time_item"> |
|||
<view class="lab">应完成里程</view> |
|||
<view class="num">50km</view> |
|||
</view> |
|||
<view class="time_item"> |
|||
<view class="lab">已完成里程</view> |
|||
<view class="num">0km</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="haveToken" v-if="studentId"> |
|||
<subject0 v-show="currentNav==0"/> |
|||
<subject1 v-show="currentNav==1"/> |
|||
<subject2 v-show="currentNav==2"/> |
|||
<subject3 v-show="currentNav==3"/> |
|||
<subject4 v-show="currentNav==4"/> |
|||
</view> |
|||
<view class="noDate" v-else> |
|||
<nodata><text>暂无数据，您还未报名</text></nodata> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import subject0 from './comp/subject0' |
|||
import subject1 from './comp/subject1' |
|||
import subject2 from './comp/subject2' |
|||
import subject3 from './comp/subject3' |
|||
import subject4 from './comp/subject4' |
|||
export default { |
|||
components: { subject0, subject1, subject2, subject3, subject4 }, |
|||
data() { |
|||
return { |
|||
navData: [ |
|||
{text: '模拟器', id: 0}, |
|||
{text: '科目一', id: 1}, |
|||
{text: '科目二', id: 2}, |
|||
{text: '科目三', id: 3}, |
|||
{text: '科目四', id: 4}, |
|||
], |
|||
currentNav: 0 |
|||
} |
|||
}, |
|||
onLoad() { |
|||
}, |
|||
onShow() { |
|||
// console.log('没发生？') |
|||
// this.$store.dispatch('checkLogin') |
|||
}, |
|||
methods: { |
|||
changeNav(id) { |
|||
this.currentNav = id |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.content { |
|||
width: 100vw; |
|||
min-height: 100vh; |
|||
// background: url('../../../static/images/bigImg/topbg.png') #F6F6F6 no-repeat; |
|||
background-size: 100% 362rpx; |
|||
padding: 0 32rpx 32rpx 32rpx; |
|||
.title { |
|||
font-size: 36rpx; |
|||
font-weight: 600; |
|||
color: #fff; |
|||
padding: 10rpx 0 48rpx 0rpx; |
|||
} |
|||
.navCard { |
|||
.nav_row { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
.nav { |
|||
width: 19.4%; |
|||
height: 86rpx; |
|||
background: rgba(255,255,255,0.4); |
|||
border-radius: 8rpx 8rpx 0px 0px; |
|||
font-size: 28rpx; |
|||
color: #fff; |
|||
line-height: 86rpx; |
|||
text-align: center; |
|||
&.active { |
|||
background: #FFFFFF; |
|||
color: $themC; |
|||
} |
|||
} |
|||
} |
|||
.subject3 { |
|||
padding-top: 32rpx; |
|||
position: relative; |
|||
.chain { |
|||
width: 28rpx; |
|||
height: 100rpx; |
|||
position: absolute; |
|||
top: -34rpx; |
|||
&.left { |
|||
left: 60rpx; |
|||
} |
|||
&.right { |
|||
right: 60rpx !important; |
|||
} |
|||
} |
|||
} |
|||
.time_row { |
|||
display: flex; |
|||
height: 240rpx; |
|||
padding: 32rpx; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: #fff; |
|||
border-radius: 0 0 8rpx 8rpx; |
|||
.time_item { |
|||
flex: 1; |
|||
text-align: center; |
|||
position: relative; |
|||
.lab { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
} |
|||
|
|||
.num { |
|||
font-size: 40rpx; |
|||
font-weight: 600; |
|||
color: $themC; |
|||
margin-top: 20rpx; |
|||
} |
|||
.shareTime { |
|||
font-size: 20rpx; |
|||
color: $themC; |
|||
position: absolute; |
|||
bottom: -40rpx; |
|||
left: 0; |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
@ -1,172 +1,25 @@ |
|||
<template> |
|||
<view class="content pageBgImg"> |
|||
|
|||
<view style="width: 100%;height: 40rpx;"></view> |
|||
<view class="pageBgImg pad"> |
|||
<view class="status_bar"></view> |
|||
<view class="title">江西驾考公共服务平台</view> |
|||
<view class="navCard"> |
|||
<view class="nav_row"> |
|||
<view class="nav " v-for="(item,index) in navData" :key="index" :class="{active: item.id==currentNav}" @click="changeNav(item.id)">{{ item.text }}</view> |
|||
</view> |
|||
<view class="time_row"> |
|||
<view class="time_item"> |
|||
<view class="lab">应完成学时</view> |
|||
<view class="num">100分钟</view> |
|||
</view> |
|||
<view class="time_item"> |
|||
<view class="lab">已完成学时</view> |
|||
<view class="num">30分钟</view> |
|||
<view class="shareTime">*与科目一学时共享</view> |
|||
</view> |
|||
</view> |
|||
<view class="subject3" v-if="currentNav==3"> |
|||
<view class="chain left"> |
|||
<image src="@/static/images/index/chain.png" mode=""></image> |
|||
</view> |
|||
<view class="chain right"> |
|||
<image src="@/static/images/index/chain.png" mode=""></image> |
|||
</view> |
|||
<view class="time_row "> |
|||
<view class="time_item"> |
|||
<view class="lab">应完成里程</view> |
|||
<view class="num">50km</view> |
|||
</view> |
|||
<view class="time_item"> |
|||
<view class="lab">已完成里程</view> |
|||
<view class="num">0km</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="haveToken" v-if="studentId"> |
|||
<subject0 v-show="currentNav==0"/> |
|||
<subject1 v-show="currentNav==1"/> |
|||
<subject2 v-show="currentNav==2"/> |
|||
<subject3 v-show="currentNav==3"/> |
|||
<subject4 v-show="currentNav==4"/> |
|||
</view> |
|||
<view class="noDate" v-else> |
|||
<nodata><text>暂无数据，您还未报名</text></nodata> |
|||
</view> |
|||
<view class="" style="height: 100rpx;"></view> |
|||
<topInfo></topInfo> |
|||
<subject0></subject0> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import subject0 from './comp/subject0' |
|||
import subject1 from './comp/subject1' |
|||
import subject2 from './comp/subject2' |
|||
import subject3 from './comp/subject3' |
|||
import subject4 from './comp/subject4' |
|||
import topInfo from './comp/topInfo.vue' |
|||
import subject0 from './comp/subject0.vue' |
|||
export default { |
|||
components: { subject0, subject1, subject2, subject3, subject4 }, |
|||
components: { topInfo, subject0 }, |
|||
data() { |
|||
return { |
|||
navData: [ |
|||
{text: '模拟器', id: 0}, |
|||
{text: '科目一', id: 1}, |
|||
{text: '科目二', id: 2}, |
|||
{text: '科目三', id: 3}, |
|||
{text: '科目四', id: 4}, |
|||
], |
|||
currentNav: 0 |
|||
} |
|||
}, |
|||
onLoad() { |
|||
}, |
|||
onShow() { |
|||
// console.log('没发生？') |
|||
// this.$store.dispatch('checkLogin') |
|||
}, |
|||
methods: { |
|||
changeNav(id) { |
|||
this.currentNav = id |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.content { |
|||
width: 100vw; |
|||
min-height: 100vh; |
|||
// background: url('../../../static/images/bigImg/topbg.png') #F6F6F6 no-repeat; |
|||
background-size: 100% 362rpx; |
|||
padding: 0 32rpx 32rpx 32rpx; |
|||
.title { |
|||
font-size: 36rpx; |
|||
font-weight: 600; |
|||
color: #fff; |
|||
padding: 10rpx 0 48rpx 0rpx; |
|||
} |
|||
.navCard { |
|||
.nav_row { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
.nav { |
|||
width: 19.4%; |
|||
height: 86rpx; |
|||
background: rgba(255,255,255,0.4); |
|||
border-radius: 8rpx 8rpx 0px 0px; |
|||
font-size: 28rpx; |
|||
color: #fff; |
|||
line-height: 86rpx; |
|||
text-align: center; |
|||
&.active { |
|||
background: #FFFFFF; |
|||
color: $themC; |
|||
} |
|||
} |
|||
} |
|||
.subject3 { |
|||
padding-top: 32rpx; |
|||
position: relative; |
|||
.chain { |
|||
width: 28rpx; |
|||
height: 100rpx; |
|||
position: absolute; |
|||
top: -34rpx; |
|||
&.left { |
|||
left: 60rpx; |
|||
} |
|||
&.right { |
|||
right: 60rpx !important; |
|||
} |
|||
} |
|||
} |
|||
.time_row { |
|||
display: flex; |
|||
height: 240rpx; |
|||
padding: 32rpx; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: #fff; |
|||
border-radius: 0 0 8rpx 8rpx; |
|||
.time_item { |
|||
flex: 1; |
|||
text-align: center; |
|||
position: relative; |
|||
.lab { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
} |
|||
</script> |
|||
|
|||
.num { |
|||
font-size: 40rpx; |
|||
font-weight: 600; |
|||
color: $themC; |
|||
margin-top: 20rpx; |
|||
} |
|||
.shareTime { |
|||
font-size: 20rpx; |
|||
color: $themC; |
|||
position: absolute; |
|||
bottom: -40rpx; |
|||
left: 0; |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
<style scoped lang="scss"> |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,368 @@ |
|||
<template> |
|||
<view class="pageBgImg"> |
|||
<!-- 学员名字 --> |
|||
<view class="top_row flex-b" @click="topClick"> |
|||
<view class="flex"> |
|||
<view class="userName">Hi，{{ vuex_userInfo.name?vuex_userInfo.name:vuex_userInfo.phone?vuex_userInfo.phone:'请登录'}}</view> |
|||
<view class="arrowIcon"> |
|||
<image src="../../../static/images/userCenter/ic_gengduo.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="scanCode"> |
|||
<image src="../../../static/images/userCenter/ic_erweima.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="pad"> |
|||
<!-- 学车进度 --> |
|||
<view class="userProgress"> |
|||
<view class="progItme first flex"> |
|||
<view class="dianBox"> |
|||
<view class="dian"></view> |
|||
</view> |
|||
<view class="rightCon">报名成功</view> |
|||
</view> |
|||
<view class="progItme flex"> |
|||
<view class="dianBox"> |
|||
<view class="dian active"></view> |
|||
</view> |
|||
<view class="line"></view> |
|||
<view class="rightCon"> |
|||
<view class="day">22天</view> |
|||
<view class="flex-b"> |
|||
<view class="flex"> |
|||
<view class="text">科目一考试通过</view> |
|||
<view class="tag">当前进度</view> |
|||
</view> |
|||
<view class="progBtn" @click="$goPage('/pages/mineEntry/carLearProgress/carLearProgress')">进度查询</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 我的相关入口 --> |
|||
<view class="ul"> |
|||
<view class="li" v-for="(item,index) in myPageEntry" :key="index" @click="myPageEntryClick(item)"> |
|||
<view class="icon"> |
|||
<image :src="item.icon" mode="" v-if="item.text=='我的报名'" ></image> |
|||
<image :src="item.icon" mode="" v-else></image> |
|||
</view> |
|||
<view class="text">{{ item.text }}</view> |
|||
</view> |
|||
</view> |
|||
<!-- 业务办理 --> |
|||
<view class="business "> |
|||
<view class="h1">业务办理</view> |
|||
<view class="card"> |
|||
<view class="item" v-for="(item,index) in businessEntry" :key="index" @click="goBusinessEntry(item)"> |
|||
<view class="icon"> |
|||
<image :src="item.icon" mode=""></image> |
|||
</view> |
|||
<view class="text">{{ item.text }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { selectContractPdfBase64 } from '@/config/api.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
myPageEntry: [ |
|||
{ |
|||
text: '我的报名', |
|||
icon: require('../../../static/images/userCenter/yubaoming.png'), |
|||
url: '/pages/mineEntry/myForecastName/myForecastName', |
|||
}, |
|||
{ |
|||
text: '我的预约', |
|||
icon: require('../../../static/images/userCenter/ic_yuyue.png'), |
|||
url: '/pages/mineEntry/myAppointment/myAppointment' |
|||
}, |
|||
{ |
|||
text: '我的订单', |
|||
icon: require('../../../static/images/userCenter/ic_dingdan.png'), |
|||
url: '/pages/mineEntry/myOrder/myOrder' |
|||
}, |
|||
{ |
|||
text: '学车数据', |
|||
icon: require('../../../static/images/userCenter/ic_shuju.png'), |
|||
url: '/pages/mineEntry/carData/carData' |
|||
}, |
|||
{ |
|||
text: '我的合同', |
|||
icon: require('../../../static/images/userCenter/ic_hetong.png'), |
|||
url: '/pages/mineEntry/myContract/myContract' |
|||
}, |
|||
{ |
|||
text: '我的评价', |
|||
icon: require('../../../static/images/userCenter/ic_pingjia.png'), |
|||
url: '/pages/mineEntry/myEvaluate/myEvaluate' |
|||
}, |
|||
{ |
|||
text: '我的收藏', |
|||
icon: require('../../../static/images/userCenter/ic_shoucang.png'), |
|||
url: '/pages/mineEntry/myCollect/myCollect' |
|||
}, |
|||
{ |
|||
text: '本地生活', |
|||
icon: require('../../../static/images/userCenter/ic_shenghuo.png'), |
|||
}, |
|||
], |
|||
businessEntry: [ |
|||
{ |
|||
text: '学时查询', |
|||
icon: require('../../../static/images/userCenter/ic_chaxun.png'), |
|||
url: '/pages/mineEntry/carLearnHours/carLearnHours' |
|||
}, |
|||
{ |
|||
text: '同城转校', |
|||
icon: require('../../../static/images/userCenter/tgzhuanxiao.png'), |
|||
url: '/pages/mineEntry/schoolTransfer/schoolTransfer' |
|||
}, |
|||
{ |
|||
text: '车型变更', |
|||
icon: require('../../../static/images/userCenter/biangen.png'), |
|||
url: '/pages/mineEntry/modelChange/modelChange' |
|||
}, |
|||
{ |
|||
text: '申请退学', |
|||
icon: require('../../../static/images/userCenter/shenqingtuixue.png'), |
|||
url: '/pages/mineEntry/refund/refund' |
|||
}, |
|||
] |
|||
} |
|||
}, |
|||
onLoad() { |
|||
console.log('我的页面') |
|||
|
|||
}, |
|||
onShow() { |
|||
// uni.hideTabBar(); |
|||
}, |
|||
methods: { |
|||
topClick() { |
|||
if(!this.vuex_userInfo.phone) { |
|||
this.$goPage('/pages/userCenter/login/login') |
|||
}else { |
|||
this.$goPage('/pages/mineEntry/personaInfo/personaInfo') |
|||
} |
|||
}, |
|||
async selectContractPdfBase64Fn() { |
|||
const {data: res} = await selectContractPdfBase64({studentId: this.studentId}) |
|||
this.pdfUrl = res |
|||
console.log('this.pdfUrl') |
|||
console.log(this.pdfUrl) |
|||
}, |
|||
async goBusinessEntry(item) { |
|||
const res = await this.$store.dispatch('checkLogin') |
|||
if(!res) return |
|||
if(!this.vuex_userInfo.schoolId) return this.$u.toast('您不是平台学员') |
|||
this.$goPage(item.url) |
|||
}, |
|||
async myPageEntryClick(item) { |
|||
const res = await this.$store.dispatch('checkLogin') |
|||
if(!res) return |
|||
let arr = ['我的收藏','本地生活', '我的报名'] |
|||
console.log(arr.includes(item.text)) |
|||
if(!this.vuex_userInfo.schoolId&&!arr.includes(item.text)) return this.$u.toast('您不是平台学员') |
|||
this.$goPage(item.url) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
|
|||
.pageBgImg { |
|||
.top_row { |
|||
width: 100%; |
|||
padding: 180rpx 62rpx 0 32rpx; |
|||
.flex { |
|||
|
|||
.userName { |
|||
font-size: 48rpx; |
|||
font-weight: 600; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.arrowIcon { |
|||
margin-left: 24rpx; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
} |
|||
} |
|||
|
|||
.scanCode { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
} |
|||
} |
|||
|
|||
.userProgress { |
|||
background: rgba(255,255,255,0.65); |
|||
box-shadow: 2px 2px 8px 0px #C3D6E9, inset 0px 2px 4px 0px rgba(255,255,255,0.5); |
|||
border-radius: 16rpx; |
|||
padding: 22rpx 22rpx 22rpx 32rpx; |
|||
margin-top: 32rpx; |
|||
.progItme { |
|||
position: relative; |
|||
.dianBox { |
|||
width: 32rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
position: absolute; |
|||
left: 0rpx; |
|||
bottom: 14rpx; |
|||
z-index: 4; |
|||
.dian { |
|||
width: 12rpx; |
|||
height: 12rpx; |
|||
background: #1989FA; |
|||
border-radius: 50%; |
|||
&.active { |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
background: rgba(25,137,250,0.11); |
|||
position: relative; |
|||
&::before { |
|||
content: '' ; |
|||
width: 18rpx; |
|||
height: 18rpx; |
|||
position: absolute; |
|||
border-radius: 50%; |
|||
top: 50%; |
|||
left: 50%; |
|||
background: #1989FA; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.line { |
|||
position: absolute; |
|||
left: 14rpx; |
|||
bottom: 30rpx; |
|||
width: 0rpx; |
|||
height: 90rpx; |
|||
border: 1rpx dashed rgba(25,137,250,0.7); |
|||
z-index: 1; |
|||
} |
|||
.rightCon { |
|||
flex: 1; |
|||
padding: 0 0 0 54rpx; |
|||
.day { |
|||
font-size: 20rpx; |
|||
color: $themC; |
|||
margin: 12rpx 0 0rpx 0; |
|||
} |
|||
|
|||
.flex-b { |
|||
|
|||
.flex { |
|||
.text { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.tag { |
|||
margin-left: 10rpx; |
|||
width: 110rpx; |
|||
height: 44rpx; |
|||
background: #FAF0E4; |
|||
border-radius: 8rpx; |
|||
font-size: 20rpx; |
|||
color: #FA7919; |
|||
line-height: 44rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
.progBtn { |
|||
width: 130rpx; |
|||
height: 60rpx; |
|||
background: rgba(25,137,250,0.1); |
|||
border-radius: 8rpx; |
|||
border: 2rpx solid #1989FA; |
|||
font-size: 28rpx; |
|||
color: $themC; |
|||
line-height: 60rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.ul { |
|||
padding: 38rpx 0; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
width: 100%; |
|||
.li { |
|||
width: 25%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
margin: 24rpx 0; |
|||
.icon { |
|||
width: 68rpx; |
|||
height: 68rpx; |
|||
} |
|||
|
|||
.text { |
|||
font-size: 28rpx; |
|||
margin-top: 16rpx; |
|||
color: #333; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.business { |
|||
padding: 32rpx 0; |
|||
.h1 { |
|||
margin-bottom: 24rpx; |
|||
} |
|||
|
|||
.card { |
|||
width: 100%; |
|||
height: 390rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 16rpx; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
padding: 38rpx 0 0 0; |
|||
.item { |
|||
width: 33.33%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
height: 162rpx; |
|||
.icon { |
|||
width: 72rpx; |
|||
height: 72rpx; |
|||
background: #F6F7F8; |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
image { |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
} |
|||
} |
|||
|
|||
.text { |
|||
margin-top: 16rpx; |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,125 @@ |
|||
|
|||
.pageBgImg { |
|||
|
|||
.userInfo { |
|||
width: 100%; |
|||
padding: 30rpx 30rpx 100rpx 30rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.avatar { |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
background: #f4f4f4; |
|||
image { |
|||
|
|||
} |
|||
} |
|||
|
|||
.rightInfo { |
|||
flex: 1; |
|||
width: 0; |
|||
padding-left: 20rpx; |
|||
.name-row { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
.leftTxt { |
|||
flex: 1; |
|||
width: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
.name { |
|||
font-size: 30rpx; |
|||
color: #fff; |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.arrowIcon { |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
margin-left: 4rpx; |
|||
} |
|||
} |
|||
|
|||
.scanCode { |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
} |
|||
} |
|||
|
|||
.phone { |
|||
font-size: 24rpx; |
|||
color: #fff; |
|||
margin-top: 20rpx; |
|||
} |
|||
} |
|||
} |
|||
.pad { |
|||
border-radius: 20rpx 20rpx 0 0; |
|||
background-color: #f4f4f4; |
|||
transform: translateY(-22rpx); |
|||
} |
|||
.ul { |
|||
display: flex; |
|||
width: 100%; |
|||
height: 154rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 20rpx; |
|||
padding: 20rpx; |
|||
transform: translateY(-60rpx); |
|||
.li { |
|||
flex: 1; |
|||
display: flex; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
.icon { |
|||
width: 77rpx; |
|||
height: 77rpx; |
|||
} |
|||
|
|||
.text { |
|||
font-size: 24rpx; |
|||
color: #333; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.ul2 { |
|||
background: #FFFFFF; |
|||
border-radius: 20rpx; |
|||
margin-top: -40rpx; |
|||
padding: 4rpx 20rpx; |
|||
.li2 { |
|||
display: flex; |
|||
height: 88rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
border-bottom: 1rpx solid #F6F7FA; |
|||
&:last-child { |
|||
border: none; |
|||
} |
|||
.icon { |
|||
width: 54rpx; |
|||
height: 52rpx; |
|||
image { |
|||
|
|||
} |
|||
} |
|||
|
|||
.text { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
margin-left: 20rpx; |
|||
} |
|||
|
|||
.arrowRight { |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
margin-left: auto; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -1,368 +1,79 @@ |
|||
<template> |
|||
<view class="pageBgImg"> |
|||
<!-- 学员名字 --> |
|||
<view class="top_row flex-b" @click="topClick"> |
|||
<view class="flex"> |
|||
<view class="userName">Hi，{{ vuex_userInfo.name?vuex_userInfo.name:vuex_userInfo.phone?vuex_userInfo.phone:'请登录'}}</view> |
|||
<view class="status_bar"></view> |
|||
<!-- 用户信息 --> |
|||
<view class="userInfo"> |
|||
<view class="avatar"> |
|||
<image src="@/static/images/mineIcon/emtryIcon (3).png" mode=""></image> |
|||
</view> |
|||
<view class="rightInfo"> |
|||
<view class="name-row"> |
|||
<view class="leftTxt"> |
|||
<view class="name">JOE宝宝</view> |
|||
<view class="arrowIcon"> |
|||
<image src="../../../static/images/userCenter/ic_gengduo.png" mode=""></image> |
|||
<image src="@/static/images/icon/arrowRightfff.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="scanCode"> |
|||
<image src="../../../static/images/userCenter/ic_erweima.png" mode=""></image> |
|||
<image src="@/static/images/mineIcon/sanCode.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="pad"> |
|||
<!-- 学车进度 --> |
|||
<view class="userProgress"> |
|||
<view class="progItme first flex"> |
|||
<view class="dianBox"> |
|||
<view class="dian"></view> |
|||
</view> |
|||
<view class="rightCon">报名成功</view> |
|||
</view> |
|||
<view class="progItme flex"> |
|||
<view class="dianBox"> |
|||
<view class="dian active"></view> |
|||
</view> |
|||
<view class="line"></view> |
|||
<view class="rightCon"> |
|||
<view class="day">22天</view> |
|||
<view class="flex-b"> |
|||
<view class="flex"> |
|||
<view class="text">科目一考试通过</view> |
|||
<view class="tag">当前进度</view> |
|||
<view class="phone">18267103167</view> |
|||
</view> |
|||
<view class="progBtn" @click="$goPage('/pages/mineEntry/carLearProgress/carLearProgress')">进度查询</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 我的相关入口 --> |
|||
|
|||
<view class="pad"> |
|||
<view class="ul"> |
|||
<view class="li" v-for="(item,index) in myPageEntry" :key="index" @click="myPageEntryClick(item)"> |
|||
<view class="li" v-for="(item,index) in ulData" :key="index" @click="$goPage(item.url)"> |
|||
<view class="icon"> |
|||
<image :src="item.icon" mode="" v-if="item.text=='我的报名'" ></image> |
|||
<image :src="item.icon" mode="" v-else></image> |
|||
<image :src="item.icon" mode=""></image> |
|||
</view> |
|||
<view class="text">{{ item.text }}</view> |
|||
<view class="text">{{ item.name }}</view> |
|||
</view> |
|||
</view> |
|||
<!-- 业务办理 --> |
|||
<view class="business "> |
|||
<view class="h1">业务办理</view> |
|||
<view class="card"> |
|||
<view class="item" v-for="(item,index) in businessEntry" :key="index" @click="goBusinessEntry(item)"> |
|||
|
|||
<view class="ul2"> |
|||
<view class="li2" v-for="(item,index) in ulData2" :key="index"> |
|||
<view class="icon"> |
|||
<image :src="item.icon" mode=""></image> |
|||
</view> |
|||
<view class="text">{{ item.text }}</view> |
|||
<view class="text">{{ item.name }}</view> |
|||
<view class="arrowRight"> |
|||
<u-icon name="arrow-right" color="#ccc" size="16"></u-icon> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { selectContractPdfBase64 } from '@/config/api.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
myPageEntry: [ |
|||
{ |
|||
text: '我的报名', |
|||
icon: require('../../../static/images/userCenter/yubaoming.png'), |
|||
url: '/pages/mineEntry/myForecastName/myForecastName', |
|||
}, |
|||
{ |
|||
text: '我的预约', |
|||
icon: require('../../../static/images/userCenter/ic_yuyue.png'), |
|||
url: '/pages/mineEntry/myAppointment/myAppointment' |
|||
}, |
|||
{ |
|||
text: '我的订单', |
|||
icon: require('../../../static/images/userCenter/ic_dingdan.png'), |
|||
url: '/pages/mineEntry/myOrder/myOrder' |
|||
}, |
|||
{ |
|||
text: '学车数据', |
|||
icon: require('../../../static/images/userCenter/ic_shuju.png'), |
|||
url: '/pages/mineEntry/carData/carData' |
|||
}, |
|||
{ |
|||
text: '我的合同', |
|||
icon: require('../../../static/images/userCenter/ic_hetong.png'), |
|||
url: '/pages/mineEntry/myContract/myContract' |
|||
}, |
|||
{ |
|||
text: '我的评价', |
|||
icon: require('../../../static/images/userCenter/ic_pingjia.png'), |
|||
url: '/pages/mineEntry/myEvaluate/myEvaluate' |
|||
}, |
|||
{ |
|||
text: '我的收藏', |
|||
icon: require('../../../static/images/userCenter/ic_shoucang.png'), |
|||
url: '/pages/mineEntry/myCollect/myCollect' |
|||
}, |
|||
{ |
|||
text: '本地生活', |
|||
icon: require('../../../static/images/userCenter/ic_shenghuo.png'), |
|||
}, |
|||
ulData: [ |
|||
{name: '学车进度', icon: require('@/static/images/mineIcon/emtryIcon (4).png'),url: '/pages/mineEntry/carLearProgress/carLearProgress'}, |
|||
{name: '我的预约', icon: require('@/static/images/mineIcon/emtryIcon (1).png'),url: ''}, |
|||
{name: '我的订单', icon: require('@/static/images/mineIcon/emtryIcon (2).png'),url: ''}, |
|||
{name: '我的合同', icon: require('@/static/images/mineIcon/emtryIcon (3).png'),url: ''}, |
|||
], |
|||
businessEntry: [ |
|||
{ |
|||
text: '学时查询', |
|||
icon: require('../../../static/images/userCenter/ic_chaxun.png'), |
|||
url: '/pages/mineEntry/carLearnHours/carLearnHours' |
|||
}, |
|||
{ |
|||
text: '同城转校', |
|||
icon: require('../../../static/images/userCenter/tgzhuanxiao.png'), |
|||
url: '/pages/mineEntry/schoolTransfer/schoolTransfer' |
|||
}, |
|||
{ |
|||
text: '车型变更', |
|||
icon: require('../../../static/images/userCenter/biangen.png'), |
|||
url: '/pages/mineEntry/modelChange/modelChange' |
|||
}, |
|||
{ |
|||
text: '申请退学', |
|||
icon: require('../../../static/images/userCenter/shenqingtuixue.png'), |
|||
url: '/pages/mineEntry/refund/refund' |
|||
}, |
|||
ulData2: [ |
|||
{name: '学时查询', icon: require('@/static/images/mineIcon/minIcon (4).png'),url: ''}, |
|||
{name: '我的评价', icon: require('@/static/images/mineIcon/minIcon (1).png'),url: ''}, |
|||
{name: '退款申请', icon: require('@/static/images/mineIcon/minIcon (3).png'),url: ''}, |
|||
{name: '变更车型', icon: require('@/static/images/mineIcon/minIcon (7).png'),url: ''}, |
|||
{name: '同城转校', icon: require('@/static/images/mineIcon/minIcon (5).png'),url: ''}, |
|||
{name: '退款申请记录', icon: require('@/static/images/mineIcon/minIcon (6).png'),url: ''}, |
|||
{name: '关于我们', icon: require('@/static/images/mineIcon/minIcon (2).png'),url: ''}, |
|||
] |
|||
} |
|||
}, |
|||
onLoad() { |
|||
console.log('我的页面') |
|||
|
|||
}, |
|||
onShow() { |
|||
// uni.hideTabBar(); |
|||
}, |
|||
methods: { |
|||
topClick() { |
|||
if(!this.vuex_userInfo.phone) { |
|||
this.$goPage('/pages/userCenter/login/login') |
|||
}else { |
|||
this.$goPage('/pages/mineEntry/personaInfo/personaInfo') |
|||
} |
|||
}, |
|||
async selectContractPdfBase64Fn() { |
|||
const {data: res} = await selectContractPdfBase64({studentId: this.studentId}) |
|||
this.pdfUrl = res |
|||
console.log('this.pdfUrl') |
|||
console.log(this.pdfUrl) |
|||
}, |
|||
async goBusinessEntry(item) { |
|||
const res = await this.$store.dispatch('checkLogin') |
|||
if(!res) return |
|||
if(!this.vuex_userInfo.schoolId) return this.$u.toast('您不是平台学员') |
|||
this.$goPage(item.url) |
|||
}, |
|||
async myPageEntryClick(item) { |
|||
const res = await this.$store.dispatch('checkLogin') |
|||
if(!res) return |
|||
let arr = ['我的收藏','本地生活', '我的报名'] |
|||
console.log(arr.includes(item.text)) |
|||
if(!this.vuex_userInfo.schoolId&&!arr.includes(item.text)) return this.$u.toast('您不是平台学员') |
|||
this.$goPage(item.url) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
|
|||
.pageBgImg { |
|||
.top_row { |
|||
width: 100%; |
|||
padding: 180rpx 62rpx 0 32rpx; |
|||
.flex { |
|||
|
|||
.userName { |
|||
font-size: 48rpx; |
|||
font-weight: 600; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.arrowIcon { |
|||
margin-left: 24rpx; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
} |
|||
} |
|||
|
|||
.scanCode { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
} |
|||
} |
|||
|
|||
.userProgress { |
|||
background: rgba(255,255,255,0.65); |
|||
box-shadow: 2px 2px 8px 0px #C3D6E9, inset 0px 2px 4px 0px rgba(255,255,255,0.5); |
|||
border-radius: 16rpx; |
|||
padding: 22rpx 22rpx 22rpx 32rpx; |
|||
margin-top: 32rpx; |
|||
.progItme { |
|||
position: relative; |
|||
.dianBox { |
|||
width: 32rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
position: absolute; |
|||
left: 0rpx; |
|||
bottom: 14rpx; |
|||
z-index: 4; |
|||
.dian { |
|||
width: 12rpx; |
|||
height: 12rpx; |
|||
background: #1989FA; |
|||
border-radius: 50%; |
|||
&.active { |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
background: rgba(25,137,250,0.11); |
|||
position: relative; |
|||
&::before { |
|||
content: '' ; |
|||
width: 18rpx; |
|||
height: 18rpx; |
|||
position: absolute; |
|||
border-radius: 50%; |
|||
top: 50%; |
|||
left: 50%; |
|||
background: #1989FA; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.line { |
|||
position: absolute; |
|||
left: 14rpx; |
|||
bottom: 30rpx; |
|||
width: 0rpx; |
|||
height: 90rpx; |
|||
border: 1rpx dashed rgba(25,137,250,0.7); |
|||
z-index: 1; |
|||
} |
|||
.rightCon { |
|||
flex: 1; |
|||
padding: 0 0 0 54rpx; |
|||
.day { |
|||
font-size: 20rpx; |
|||
color: $themC; |
|||
margin: 12rpx 0 0rpx 0; |
|||
} |
|||
|
|||
.flex-b { |
|||
|
|||
.flex { |
|||
.text { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.tag { |
|||
margin-left: 10rpx; |
|||
width: 110rpx; |
|||
height: 44rpx; |
|||
background: #FAF0E4; |
|||
border-radius: 8rpx; |
|||
font-size: 20rpx; |
|||
color: #FA7919; |
|||
line-height: 44rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
.progBtn { |
|||
width: 130rpx; |
|||
height: 60rpx; |
|||
background: rgba(25,137,250,0.1); |
|||
border-radius: 8rpx; |
|||
border: 2rpx solid #1989FA; |
|||
font-size: 28rpx; |
|||
color: $themC; |
|||
line-height: 60rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.ul { |
|||
padding: 38rpx 0; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
width: 100%; |
|||
.li { |
|||
width: 25%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
margin: 24rpx 0; |
|||
.icon { |
|||
width: 68rpx; |
|||
height: 68rpx; |
|||
} |
|||
|
|||
.text { |
|||
font-size: 28rpx; |
|||
margin-top: 16rpx; |
|||
color: #333; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.business { |
|||
padding: 32rpx 0; |
|||
.h1 { |
|||
margin-bottom: 24rpx; |
|||
} |
|||
|
|||
.card { |
|||
width: 100%; |
|||
height: 390rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 16rpx; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
padding: 38rpx 0 0 0; |
|||
.item { |
|||
width: 33.33%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
height: 162rpx; |
|||
.icon { |
|||
width: 72rpx; |
|||
height: 72rpx; |
|||
background: #F6F7F8; |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
image { |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
} |
|||
} |
|||
|
|||
.text { |
|||
margin-top: 16rpx; |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@import './index.scss'; |
|||
</style> |
|||
|
Before Width: 36 | Height: 36 | Size: 516 B After Width: 36 | Height: 36 | Size: 516 B |
|
Before Width: 36 | Height: 36 | Size: 638 B After Width: 36 | Height: 36 | Size: 638 B |
|
Before Width: 36 | Height: 36 | Size: 626 B After Width: 36 | Height: 36 | Size: 626 B |
Write
Preview
Loading…
Cancel
Save
Reference in new issue