lanan-repair/pages/my/my.vue
2024-09-24 21:30:53 +08:00

308 lines
7.7 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";
export default {
components: {
tabBarVue,
VNavigationBar
},
onLoad(data) {
this.getServer()
},
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/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() {
const res = await request({
url: "/userClient/customer/getUserCustomer",
method: 'get',
params:{}
})
this.customInfo = res.data
uni.setStorageSync('customerInfo', JSON.stringify(this.customInfo))
// JSON.parse(JSON.stringify(files))
// const a = uni.getStorageSync('customerInfo')
// console.log(JSON.parse(a),115)
}
}
}
</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>