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.
224 lines
7.4 KiB
224 lines
7.4 KiB
<template>
|
|
<view class="bc-f5">
|
|
<!-- <view class="wp100" style="background-color: #333;height: 205px;"></view> -->
|
|
<view class="relative" style="height: 205px;">
|
|
<image src="/static/image/mine/mine_bg.png" mode="widthFix" style="width: 100%;"></image>
|
|
<view class="info flex ai-c" v-if="isLogin">
|
|
<u-avatar class="br-p50 overflow-h" :size="64" mp-avatar shape="circle"></u-avatar>
|
|
<view class="ml12">
|
|
<view class="flex ai-c fs18 cor-333 fwb">
|
|
<text class="mr10">{{ user.userName }}{{ user.userId }}</text>
|
|
<image v-if="vipOn.length" src="/static/image/mine/vip.png" mode="widthFix" style="width: 18px;"></image>
|
|
</view>
|
|
<view class="mt5 fs14 cor-666">陪您学车 第{{ user.days }}天</view>
|
|
</view>
|
|
</view>
|
|
<view class="info flex ai-c" v-else @tap="toLogin">
|
|
<u-avatar class="br-p50 overflow-h" :size="64" src="@/static/image/mine/default_avatar.png" shape="circle"></u-avatar>
|
|
<view class="ml12">
|
|
<view class="flex ai-c fs18 cor-333 fwb">
|
|
<text class="mr10">立即登录</text>
|
|
</view>
|
|
<view class="mt5 fs14 cor-666">登录后获得更多学车信息</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="p15lr" style="transform: translateY(-90px);">
|
|
<view class="relative mb10" @tap="handleVip">
|
|
<image src="/static/image/mine/vip_bg.png" mode="widthFix" style="width: 100%;"></image>
|
|
<view class="absolute p15lr p10tb flex ai-c jc-sb" style="left: 0;top: 0;right: 0;height: 40px;">
|
|
<view class="flex ai-c">
|
|
<view class="p3 br-p50" style="background-color: #873E1D;">
|
|
<image src="/static/image/mine/vip.png" mode="widthFix" style="width: 18px;height: 15px;"></image>
|
|
</view>
|
|
<text class="ml5 fs16 fwb" style="color: #7E4012FF;">VIP会员</text>
|
|
</view>
|
|
<text v-if="!isLogin || !vipOn.length" class="fs12" style="color: #7E4012FF;">您还不是VIP会员</text>
|
|
<text v-else-if="vipOn.length" class="fs12" style="color: #7E4012FF;">{{ expireTime }}到期</text>
|
|
</view>
|
|
<view class="absolute flex ai-c jc-c" style="left: 0;top: 40px;right: 0;bottom: 0;">
|
|
<view v-if="!isLogin || !vipOn.length" class="text-center">
|
|
<view class="fs18 fwb" style="color: #7E4012FF;">开通VIP尊享以下权益</view>
|
|
<view class="fs15" style="color: #7E4012FF;">精选500题 / 真是模考 / 考前密卷</view>
|
|
<view class="study fs16 text-center" style="margin: 25px auto 0;color: #F6E99FFF;">立即开通</view>
|
|
</view>
|
|
<view v-else-if="vipOn.length" class="text-center">
|
|
<view class="fs18 fwb" style="color: #7E4012FF;">{{ vipText }}</view>
|
|
<view class="study fs16 text-center" style="margin: 25px auto 0;color: #F6E99FFF;">马上学习</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="isLogin" class="br8 bc-fff p15 z-index2">
|
|
<text class="fs16 cor-333">我的驾校</text>
|
|
<view v-if="user?.schoolId">
|
|
<div class="mt12 flex ai-c jc-sb">
|
|
<text class="fs18 cor-000 fwb">{{ user.schoolName }}</text>
|
|
<u-button text="切换驾校" shape="circle" @click="handleChangeSchool"></u-button>
|
|
</div>
|
|
<u-line margin="14px 0 18px 0"></u-line>
|
|
<view class="flex ai-c" @tap="handleCallPhone">
|
|
<view class="flex ai-c jc-c phone">
|
|
<img src="/static/image/mine/phone.png" style="width: 12px;height: 12px;">
|
|
<text class="ml2 fs12 cor-fff">客服热线</text>
|
|
</view>
|
|
<text class="ml5 fs26 cor-333 fwb" style="line-height: 26px;">{{ user.schoolPhone }}</text>
|
|
</view>
|
|
</view>
|
|
<view v-else class="p15tb flex ai-c jc-sb">
|
|
<view class="fs20 cor-333 fwb">尚未绑定驾校</view>
|
|
<u-button text="绑定驾校" shape="circle" @click="handleChangeSchool"></u-button>
|
|
</view>
|
|
</view>
|
|
<view class="mt12 bc-fff br8">
|
|
<u-cell-group>
|
|
<u-cell size="large" title="我的资料" isLink @tap="handleInfo">
|
|
<template #icon>
|
|
<img src="/static/image/mine/wdzl.png" style="width: 24px;height: 24px;">
|
|
</template>
|
|
</u-cell>
|
|
<u-cell size="large" title="我的体检" isLink @tap="handleTJ">
|
|
<template #icon>
|
|
<img src="/static/image/mine/wdtj.png" style="width: 24px;height: 24px;">
|
|
</template>
|
|
</u-cell>
|
|
<u-cell size="large" title="我的题库" value="小车">
|
|
<template #icon>
|
|
<img src="/static/image/mine/wdtk.png" style="width: 24px;height: 24px;">
|
|
</template>
|
|
</u-cell>
|
|
</u-cell-group>
|
|
</view>
|
|
<view v-if="isLogin" class="flex ai-c jc-c mt12 br8 bc-fff" style="height: 50px;" @tap="handleLogout">
|
|
<text class="fs16" style="color: #A09F9F;">退出登录</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import useUserStore from '@/jtools/store/user'
|
|
export default {
|
|
components: {},
|
|
computed: {
|
|
isLogin() {
|
|
return useUserStore().isLogin
|
|
},
|
|
user() {
|
|
return useUserStore().userInfo
|
|
},
|
|
vipOn() {
|
|
return useUserStore().vipOnList
|
|
},
|
|
expireTime() {
|
|
if (this.vipOn.length) {
|
|
const t = this.vipOn.reduce((pre, cur) => {
|
|
if (Date.parse(pre) > Date.parse(cur.endDate)) {
|
|
return cur.endDate
|
|
}
|
|
return pre
|
|
}, '2099-12-31')
|
|
return t.split(' ')[0]
|
|
} else {
|
|
return ''
|
|
}
|
|
},
|
|
vipText() {
|
|
if (this.vipOn.length) {
|
|
const t = this.vipOn.reduce((pre, cur) => {
|
|
return [...pre, ...cur.subjects.split(',').map(it => ['', '一', '二', '三', '四'][it])]
|
|
}, [])
|
|
let val = Array.from(new Set(t))
|
|
val = val.length == 4 ? val.join('') + '全部' : val.join('')
|
|
return `尊享科目${val}付费权益`
|
|
} else {
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
};
|
|
},
|
|
onShow() {
|
|
},
|
|
methods: {
|
|
handleVip() {
|
|
if (this.isLogin) {
|
|
// if (this.vipOn.length) {
|
|
uni.navigateTo({
|
|
url: '/pages/me/vip'
|
|
})
|
|
// } else {
|
|
// uni.navigateTo({
|
|
// url: '/pages/index/videoVip'
|
|
// })
|
|
// }
|
|
} else {
|
|
this.toLogin()
|
|
}
|
|
},
|
|
handleCallPhone() {
|
|
uni.makePhoneCall({
|
|
phoneNumber: this.user.schoolPhone
|
|
})
|
|
},
|
|
handleChangeSchool() {
|
|
if (this.isLogin) {
|
|
uni.navigateTo({
|
|
url: '/pages/me/school'
|
|
})
|
|
} else {
|
|
this.toLogin()
|
|
}
|
|
},
|
|
handleInfo() {
|
|
if (this.isLogin) {
|
|
uni.navigateTo({
|
|
url: '/pages/me/info'
|
|
})
|
|
} else {
|
|
this.toLogin()
|
|
}
|
|
},
|
|
handleTJ() {
|
|
if (this.isLogin) {
|
|
uni.navigateTo({
|
|
url: '/pages/me/tijian'
|
|
})
|
|
} else {
|
|
this.toLogin()
|
|
}
|
|
},
|
|
toLogin() {
|
|
uni.navigateTo({
|
|
url: '/pages/login/login'
|
|
})
|
|
},
|
|
handleLogout() {
|
|
useUserStore().logout()
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.info {
|
|
position: absolute;
|
|
top: 32px;
|
|
left: 27px;
|
|
}
|
|
|
|
.phone {
|
|
width: 75px;
|
|
height: 26px;
|
|
background: #05C341;
|
|
border-radius: 16px 16px 0px 16px;
|
|
}
|
|
|
|
.study {
|
|
width: 200px;
|
|
height: 35px;
|
|
line-height: 35px;
|
|
background: #7E4012;
|
|
border-radius: 35px;
|
|
}
|
|
</style>
|
|
|