d第一次提交
This commit is contained in:
dt_2916866708
160
pages/personal/index.scss
Normal file
160
pages/personal/index.scss
Normal file
@@ -0,0 +1,160 @@
|
||||
.personal {
|
||||
padding: 0 30rpx;
|
||||
height: 100%;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
background: linear-gradient(180deg, #c5e5ff 0%, rgba(216, 216, 216, 0) 73%);
|
||||
.personal_center {
|
||||
position: relative;
|
||||
margin-top: 50rpx;
|
||||
.menu-item {
|
||||
width: 307rpx;
|
||||
height: 147rpx;
|
||||
background: linear-gradient(90deg, rgba(161, 193, 255, 0.2) 6%, rgba(116, 161, 252, 0.2) 100%);
|
||||
// box-shadow: 0rpx 4rpx 10rpx 0rpx #f3f7ff;
|
||||
border-radius: 6rpx 6rpx 6rpx 6rpx;
|
||||
opacity: 1;
|
||||
image {
|
||||
width: 101rpx;
|
||||
height: 101rpx;
|
||||
}
|
||||
.menu-item-label {
|
||||
color: #007dff;
|
||||
font-size: 30rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ball {
|
||||
width: 315rpx;
|
||||
height: 315rpx;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(62deg, rgba(220, 237, 255, 0.8) 0%, rgba(162, 212, 255, 0) 100%);
|
||||
&:nth-child(1) {
|
||||
right: -57rpx;
|
||||
top: -31rpx;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
left: -57rpx;
|
||||
top: -20rpx;
|
||||
width: 338rpx;
|
||||
height: 338rpx;
|
||||
background: linear-gradient(315deg, #e2ebff 0%, rgba(167, 214, 255, 0.3) 100%);
|
||||
}
|
||||
}
|
||||
.personal_title {
|
||||
font-size: 34rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
color: #000000;
|
||||
font-weight: 600;
|
||||
}
|
||||
.personal_bottom {
|
||||
margin-bottom: 20rpx;
|
||||
border-radius: 50rpx;
|
||||
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 {
|
||||
margin-bottom: 30rpx;
|
||||
image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.personal_bottom_others_item_title {
|
||||
color: #121836;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.personal_bottom_banner {
|
||||
width: 100%;
|
||||
height: 288rpx;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.personal_top {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
170
pages/personal/index.vue
Normal file
170
pages/personal/index.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<view class="personal flex column">
|
||||
<view style="" class="ball"></view>
|
||||
<view style="" class="ball"></view>
|
||||
<view :style="{height:`${titleStyle.height}px`,paddingTop:`${titleStyle.top}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>
|
||||
</view>
|
||||
<!-- 中间部分 -->
|
||||
<view class="personal_center flex around">
|
||||
<view @click="jump('details')" class="menu-item flex ac jc">
|
||||
<text class="menu-item-label">我的订单</text>
|
||||
<image src="../../static/wddd.png"></image>
|
||||
</view>
|
||||
<view @click="jump('created')" class="menu-item flex ac jc">
|
||||
<text class="menu-item-label">新建订单</text>
|
||||
<image src="../../static/xjdd.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 下半部分 -->
|
||||
<view class="personal_bottom oneflex">
|
||||
<view style="color: #000000; font-size: 30rpx; font-weight: 600;"> 常用功能</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">
|
||||
<image v-if="item.imageSrc" :src="item.imageSrc"></image>
|
||||
<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 {
|
||||
configuration:{
|
||||
title:"用户中心"
|
||||
},
|
||||
imgUrl: this.baseImgURL,
|
||||
cards: uni.getStorageSync('cards'),
|
||||
user: uni.getStorageSync('user'),
|
||||
others: [ {
|
||||
imageSrc: require("@/static/mmsz.png"),
|
||||
title: '修改密码',
|
||||
functionName:'updatepsw'
|
||||
}, {
|
||||
imageSrc:require("@/static/tcdl.png"),
|
||||
title: '退出登录',
|
||||
functionName: 'goM78'
|
||||
}],
|
||||
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: {
|
||||
updatepsw(){
|
||||
uni.navigateTo({
|
||||
url:'/Personal/pages/seting/password'
|
||||
})
|
||||
},
|
||||
jump(e){
|
||||
switch (e){
|
||||
case 'created':
|
||||
uni.navigateTo({
|
||||
url:'/Order/pages/created/index'
|
||||
})
|
||||
break;
|
||||
case 'details':
|
||||
uni.navigateTo({
|
||||
url:'/Order/pages/index/index'
|
||||
})
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
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() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要退出么？',
|
||||
success: async function (res) {
|
||||
if (res.confirm) {
|
||||
let result = await tool.loginOut();
|
||||
if (result) {
|
||||
uni.clearStorageSync();
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/index'
|
||||
})
|
||||
}
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'index.scss';
|
||||
@import '../index/index.scss'
|
||||
</style>
|
||||
Reference in New Issue
Block a user