322 lines
8.0 KiB
Vue
322 lines
8.0 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view class="body">
|
|
<VNavigationBar titleColor="rgba(0,0,0,0.9)" :leftTitle="true" backgroundColor="transparent" title=" ">
|
|
</VNavigationBar>
|
|
<view class="body-top">
|
|
<image class="userBmg" src="../../static/images/image1.png" mode="widthFix"></image>
|
|
<view class="userInfo">
|
|
<image class="avatar" src="../../static/images/avatar.png" mode="aspectFit"></image>
|
|
<text class="customInfo">{{customInfo.cusName}}</text>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="level">
|
|
<image class="levelIcon" src="" mode="aspectFit"></image>
|
|
<view class="levelInfo">
|
|
<text class="levelNum">{{customInfo.levelName}}</text>
|
|
<!-- <text class="levelQy">当前可享受4项权益</text> -->
|
|
</view>
|
|
<view class="showQyBtn" @click="showEquity">
|
|
查看权益
|
|
<image class="showQyBtnIcon" src="../../static/icons/icon1.png" mode="aspectFit"></image>
|
|
</view>
|
|
</view>
|
|
<view class="menu1">
|
|
<view @click="goToPage('/pages/myCar/myCar')" style="background: linear-gradient( 90deg, #DEE5FC 0%, #CAD6FA 100%);"
|
|
class="menu1-item menu-myCar">
|
|
<image class="menu1-item-icon" src="../../static/icons/myCar.png" mode="aspectFit"></image>
|
|
<text style="flex: 1;">我的车辆</text>
|
|
<image class="menu1-item-btnIcon" src="../../static/icons/icon2.png" mode=""></image>
|
|
<image class="bmg" src="../../static/images/image2.png" mode="aspectFit"></image>
|
|
</view>
|
|
<view @click="goToPage('/pages/myReservation/myReservation')" style="background: linear-gradient( 90deg, #CFF3ED 0%, #9FE9DD 100%);"
|
|
class="menu1-item menu-myOrder">
|
|
<image class="menu1-item-icon" src="../../static/icons/myOrder.png" mode="aspectFit"></image>
|
|
<text style="flex: 1;">我的预约</text>
|
|
<image class="menu1-item-btnIcon" src="../../static/icons/icon3.png" mode=""></image>
|
|
<image class="bmg" src="../../static/images/image2.png" mode="aspectFit"></image>
|
|
</view>
|
|
</view>
|
|
<view class="menuCard">
|
|
<view @click="goToPage(item.path)" v-for="(item, index) in menuCard1" :key="item.title" class="menu-item">
|
|
<image class="menu-item-icon" :src="item.icon" mode="aspectFit"></image>
|
|
<text class="menu-item-title">{{ item.title }}</text>
|
|
<text class="messageNum" v-if="item.title === '消息中心'">
|
|
{{ '12' }}
|
|
</text>
|
|
<image class="menu-item-more" src="../../static/icons/homeInfoMore.png" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="menuCard">
|
|
<view @click="goToPage(item.path)" v-for="(item, index) in menuCard2" :key="item.title" class="menu-item">
|
|
<image class="menu-item-icon" :src="item.icon" mode="aspectFit"></image>
|
|
<text class="menu-item-title">{{ item.title }}</text>
|
|
<image class="menu-item-more" src="../../static/icons/homeInfoMore.png" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<tabBarVue msg="3"></tabBarVue>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import VNavigationBar from '@/components/VNavigationBar.vue'
|
|
import tabBarVue from '@/components/tabBar/tabBar.vue'
|
|
import request from "@/utils/request";
|
|
import {getUserInfoRequest} from "@/utils/common.js";
|
|
import {getToken,setUserInfo,getUserInfo} from '@/utils/auth.js'
|
|
export default {
|
|
components: {
|
|
tabBarVue,
|
|
VNavigationBar
|
|
},
|
|
onShow(data) {
|
|
if(!getToken()){
|
|
uni.reLaunch({
|
|
url: '/pages/login/login'
|
|
})
|
|
}else{
|
|
console.log("已登录")
|
|
if(!getUserInfo()){
|
|
this.getServer()
|
|
}else{
|
|
this.customInfo = JSON.parse(getUserInfo())
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
//用户信息
|
|
customInfo:{},
|
|
menuCard1: [
|
|
{ title: '我的资料', icon: require('@/static/icons/my-menu-icon1.png'), path: '/pages/my/myInfo' },
|
|
{ title: '我的卡券', icon: require('@/static/icons/my-menu-icon5.png'), path: "/pages/my/cardRoll" },
|
|
{ title: '我的评价', icon: require('@/static/icons/my-menu-icon3.png'), path: '/pages-order/my/evaluate' },
|
|
],
|
|
menuCard2: [
|
|
{ title: '消息中心', icon: require('@/static/icons/my-menu-icon2.png'), path: '/pages/my/message' },
|
|
{ title: '客服中心', icon: require('@/static/icons/my-menu-icon4.png') },
|
|
{ title: '操作指南', icon: require('@/static/icons/my-menu-icon5.png'), path: "/pages/guideList/guideList" },
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
goToPage(path) {
|
|
uni.navigateTo({
|
|
url: path
|
|
})
|
|
},
|
|
showEquity() {
|
|
uni.navigateTo({
|
|
url: '/pages/my/myEquity'
|
|
})
|
|
},
|
|
//获取当前登录用户信息
|
|
async getServer() {
|
|
request({
|
|
url: "/userClient/customer/getUserCustomer",
|
|
method: 'get',
|
|
params:{}
|
|
}).then(res=>{
|
|
if(!res.data){
|
|
uni.reLaunch({
|
|
url: '/pages/my/register'
|
|
})
|
|
}else{
|
|
setUserInfo(JSON.stringify(res.data))
|
|
this.customInfo = res.data
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.container {
|
|
height: 100%;
|
|
background: #fff;
|
|
background: linear-gradient(180deg, rgba(1, 116, 246, 0.3) 0%, rgba(1, 116, 246, 0) 100%);
|
|
background-size: 100% 600rpx;
|
|
background-repeat: no-repeat;
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: #333333;
|
|
|
|
.body {
|
|
flex: 1;
|
|
height: 0;
|
|
padding-bottom: 30rpx;
|
|
overflow: auto;
|
|
}
|
|
|
|
.body-top {
|
|
position: relative;
|
|
|
|
.userBmg {
|
|
width: 750rpx;
|
|
}
|
|
|
|
.userInfo {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
.avatar {
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.userName {
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
|
|
.level {
|
|
box-sizing: border-box;
|
|
width: 686rpx;
|
|
margin: 30rpx auto 0;
|
|
background: linear-gradient(90deg, #0174F6 0%, #01BBF6 100%);
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 24rpx 30rpx;
|
|
column-gap: 20rpx;
|
|
|
|
.levelIcon {
|
|
width: 68rpx;
|
|
height: 68rpx;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.7);
|
|
}
|
|
|
|
.levelInfo {
|
|
flex: 1;
|
|
width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: 8rpx;
|
|
|
|
.levelNum {
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.levelQy {
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
}
|
|
}
|
|
|
|
.showQyBtn {
|
|
width: 156rpx;
|
|
height: 48rpx;
|
|
background: rgba(255, 255, 255, 0.7);
|
|
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
column-gap: 2rpx;
|
|
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #0174F6;
|
|
|
|
.showQyBtnIcon {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.menu1 {
|
|
box-sizing: border-box;
|
|
width: 686rpx;
|
|
margin: 30rpx auto 0;
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: 22rpx;
|
|
|
|
.menu1-item {
|
|
flex: 1;
|
|
width: 0;
|
|
padding: 38rpx 28rpx;
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: 18rpx;
|
|
|
|
.bmg {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
.menu1-item-icon {
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
}
|
|
.menu1-item-btnIcon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
}
|
|
|
|
.menuCard {
|
|
width: 686rpx;
|
|
margin: 30rpx auto 0;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(10,54,104,0.1);
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
.menu-item {
|
|
padding: 40rpx 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: 20rpx;
|
|
}
|
|
.menu-item-icon {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
}
|
|
.menu-item-title {
|
|
flex: 1;
|
|
width: 0;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
.menu-item-more {
|
|
width: 14rpx;
|
|
}
|
|
.messageNum {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
background: #D54941;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
font-weight: bold;
|
|
font-size: 20rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
</style>
|