学员端小程序
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.
 
 
 

340 lines
7.7 KiB

<template>
<view class="pageBgImg">
<!-- 学员名字 -->
<view class="top_row flex-b" @click="topClick">
<view class="flex">
<view class="userName">Hi{{ vuex_userInfo.nickname?vuex_userInfo.nickname:vuex_userInfo.mobile?vuex_userInfo.mobile:'请登录'}}</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="$goPage(item.url)">
<view class="icon">
<image :src="item.icon" mode=""></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="$goPage(item.url)">
<view class="icon">
<image :src="item.icon" mode=""></image>
</view>
<view class="text">{{ item.text }}</view>
</view>
</view>
</view>
</view>
<!-- <UserTab selectedIndex ='2'></UserTab> -->
</view>
</template>
<script>
export default {
data() {
return {
myPageEntry: [
{
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.mobile) {
this.$goPage('/pages/userCenter/login/login')
}else {
this.$goPage('/pages/mineEntry/personaInfo/personaInfo')
}
}
}
}
</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>