diyici
This commit is contained in:
dt_2916866708
111
pages/personal/index.scss
Normal file
111
pages/personal/index.scss
Normal file
@@ -0,0 +1,111 @@
|
||||
.personal {
|
||||
padding: 0 30rpx;
|
||||
height: 100%;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
.personal_title {
|
||||
font-size: 34rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
color: #000000;
|
||||
font-weight: 600;
|
||||
}
|
||||
.personal_bottom {
|
||||
border-radius: 50rpx 50rpx 0 0;
|
||||
margin-top: 50rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 46rpx;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
.personal_bottom_others {
|
||||
margin-top: 50rpx;
|
||||
.personal_bottom_others_item {
|
||||
.personal_bottom_others_item_title {
|
||||
margin-bottom: 30rpx;
|
||||
color: #121836;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.personal_bottom_banner {
|
||||
width: 100%;
|
||||
height: 288rpx;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.personal_top {
|
||||
.options {
|
||||
margin-top: 53rpx;
|
||||
.options_item {
|
||||
image {
|
||||
height: 45rpx;
|
||||
}
|
||||
.options_item_title {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-size: 28rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.wallet {
|
||||
color: #ffffff;
|
||||
width: 690rpx;
|
||||
height: 200rpx;
|
||||
// background: rgba(98, 105, 140, 0.1);
|
||||
opacity: 1;
|
||||
// margin-top: 72rpx;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
position: relative;
|
||||
.wallet_balance {
|
||||
color: #ffffff;
|
||||
font-size: 42rpx;
|
||||
}
|
||||
.wallet_container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 0 35rpx;
|
||||
width: 100%;
|
||||
.wallet_name {
|
||||
margin-bottom: 38rpx;
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
image {
|
||||
width: calc(100% - 20rpx) ;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
.businessCard {
|
||||
.sculpture {
|
||||
width: 130rpx;
|
||||
height: 129rpx;
|
||||
background: #121836;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.information {
|
||||
margin-left: 43rpx;
|
||||
.information_footer {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
font-size: 24rpx;
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
.information_name {
|
||||
font-weight: 600;
|
||||
color: #000000;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
173
pages/personal/index.vue
Normal file
173
pages/personal/index.vue
Normal file
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<!-- <view :style="{paddingTop:`${titleStyle.top}px`}" class="page_body"> -->
|
||||
<view class="personal flex column">
|
||||
<!-- 标题 -->
|
||||
<view class="personal_title flex ac jc" :style="{height:`${titleStyle.height}px` }">用户中心</view>
|
||||
<!-- 上半部分 -->
|
||||
<view class="personal_top">
|
||||
<view class="businessCard flex ac">
|
||||
<view style=" font-size: 55rpx;color: aliceblue;" class="sculpture flex ac jc">
|
||||
<image :src="user.headPhoto" mode=""></image>
|
||||
</view>
|
||||
<view class="information">
|
||||
<view @click="login" class="information_name"> {{user?user.name:'点击登录'}}</view>
|
||||
<view class="information_footer"> {{user.userPhone|filterPhone}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<swiper v-if="cards.length" :indicator-dots='true' style="width:100%;height:200rpx;margin-top: 70rpx;"
|
||||
circular>
|
||||
<swiper-item v-for="(item,index) in cards" :key="index">
|
||||
<view class="wallet flex ac">
|
||||
<image src="../../static/je-bg.png"></image>
|
||||
<view class="wallet_container">
|
||||
<view class="wallet_name"> {{item.name}} <text v-if="item.shareCompanyQuota==1">( 共享
|
||||
)</text> </view>
|
||||
<view class="wallet_balance flex ac jw">
|
||||
<text>
|
||||
{{ item.isEye? tool.getnum(item.balance):'*****' }}
|
||||
</text>
|
||||
<uni-icons @click="isEyeFn(item)" v-if="item.isEye" type="eye" color="#ffffff"
|
||||
size="25"></uni-icons>
|
||||
<uni-icons @click="isEyeFn(item)" v-else type="eye-slash-filled" color="#ffffff"
|
||||
size="25"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<view class="options flex around ">
|
||||
<view @click="othersClick(item)" v-for="(item,index) in options " class="options_item flex column ac">
|
||||
<image mode="heightFix" :src="item.logo"></image>
|
||||
<view class="options_item_title">{{item.title}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 下半部分 -->
|
||||
<view class="personal_bottom oneflex">
|
||||
<view class="personal_bottom_banner">
|
||||
<image :src=" `${imgUrl}/banner.png` "></image>
|
||||
</view>
|
||||
<view class="personal_bottom_others">
|
||||
<view @click="othersClick(item)" v-for="(item,index) in others" :key="index"
|
||||
class="personal_bottom_others_item flex ac">
|
||||
<view class="oneflex personal_bottom_others_item_title">{{item.title}}</view>
|
||||
<uni-icons type="forward" color="#121836" size="20"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tool from '../../utils/tool.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imgUrl: this.baseImgURL,
|
||||
cards: uni.getStorageSync('cards'),
|
||||
user: uni.getStorageSync('user'),
|
||||
others: [{
|
||||
title: '个人信息'
|
||||
}, {
|
||||
title: '密码设置'
|
||||
}, {
|
||||
title: '关于我们'
|
||||
}, {
|
||||
title: '退出登录',
|
||||
functionName: 'goM78'
|
||||
}],
|
||||
options: [{
|
||||
logo: require('../../static/wddd.png'),
|
||||
title: '我的订单',
|
||||
functionName: 'KillTheRecord'
|
||||
},
|
||||
{
|
||||
logo: require('../../static/wdcl.png'),
|
||||
title: '我的车辆',
|
||||
functionName: 'ultramanVehicle'
|
||||
},
|
||||
{
|
||||
logo: require('../../static/wdsc.png'),
|
||||
title: '我的收藏',
|
||||
functionName: 'goCollect'
|
||||
}, {
|
||||
logo: require('../../static/kf.png'),
|
||||
title: '客服中心'
|
||||
}
|
||||
],
|
||||
titleStyle: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
filters: {
|
||||
filterPhone(str) {
|
||||
if (!str) return ' '
|
||||
let enStr = str.slice(0, 3) + '****' + str.slice(str.length - 4);
|
||||
return enStr
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
ultramanVehicle() {
|
||||
uni.navigateTo({
|
||||
url: '/ChargingStation/pages/vehicle/index'
|
||||
})
|
||||
},
|
||||
goCollect() {
|
||||
uni.navigateTo({
|
||||
url: '/ChargingStation/pages/collect/index'
|
||||
})
|
||||
},
|
||||
KillTheRecord() {
|
||||
this.$emit('switchTabBar', 3)
|
||||
},
|
||||
login() {
|
||||
if (!this.user) {
|
||||
uni.clearStorageSync();
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/index'
|
||||
})
|
||||
}
|
||||
},
|
||||
isEyeFn(e) {
|
||||
e.isEye = !e.isEye;
|
||||
console.log(e, 'isEyeFnisEyeFnisEyeFn')
|
||||
},
|
||||
othersClick(e) {
|
||||
if (e.functionName) {
|
||||
this[e.functionName]()
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '功能暂未开放',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
init() {
|
||||
this.titleStyle = wx.getMenuButtonBoundingClientRect(); //获取高度
|
||||
if (!this.user) {
|
||||
this.others.pop();
|
||||
}
|
||||
},
|
||||
async goM78() {
|
||||
let res = await tool.loginOut();
|
||||
if (res) {
|
||||
uni.clearStorageSync();
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/index'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'index.scss';
|
||||
@import '../index/index.scss'
|
||||
</style>
|
||||
Reference in New Issue
Block a user