我的页静态界面
This commit is contained in:
parent
e1516a9a43
commit
7a80f80220
@ -1,11 +1,33 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="aircraft-my">
|
<view class="aircraft-my">
|
||||||
我的
|
<view class="my-top">
|
||||||
|
<u-image width="100%" :src="fileUrl+topBg" mode="widthFix" />
|
||||||
|
<view class="my-identity">
|
||||||
|
<u-image class="my-avatar" width="120rpx" height="120rpx"
|
||||||
|
src="/static/header.png" />
|
||||||
|
<view class="my-self">
|
||||||
|
<text>{{ userMessage.nickName || userMessage.username || '用户' }}</text>
|
||||||
|
<text>欢迎来到爱尚云，愿您有个美好体验！</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="function-list">
|
||||||
|
<view class="functions">
|
||||||
|
<view class="function-item" v-for="(item,index) in functions" :key="index">
|
||||||
|
<view class="fi-left"><u-icon :name="fileUrl+item.icon" size="50" />{{ item.name }}</view>
|
||||||
|
<u-icon name="arrow-right" color="#ccc" size="30" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="my-loginout" @click="loginout">
|
||||||
|
退出登录
|
||||||
|
</view>
|
||||||
<u-toast ref="uToast"></u-toast>
|
<u-toast ref="uToast"></u-toast>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import configService from '@/common/config.service.js';
|
||||||
export default {
|
export default {
|
||||||
// #ifdef MP
|
// #ifdef MP
|
||||||
options: {
|
options: {
|
||||||
@ -24,14 +46,27 @@ export default {
|
|||||||
},
|
},
|
||||||
data(){
|
data(){
|
||||||
return{
|
return{
|
||||||
// #ifdef MP
|
//我的页图标基础路径
|
||||||
// 微信小程序自定义导航栏参数
|
fileUrl: configService.fileUrl + 'aerocraft/my/',
|
||||||
StatusBar: this.StatusBar || 0,
|
// 轮播图
|
||||||
CustomBarHeight: this.Custom.height+(this.Custom.top-this.StatusBar)*2 || 0,
|
topBg: 'top-bg.png',
|
||||||
// #endif
|
|
||||||
// 用户信息
|
// 用户信息
|
||||||
userMessage:{}
|
// userMessage:{}
|
||||||
// userMessage: this.$store.state.vuex_token === ''?{}:JSON.parse(this.$store.state.user_message),
|
userMessage: this.$store.state.vuex_token === ''?{}:JSON.parse(this.$store.state.user_message),
|
||||||
|
// 功能列表
|
||||||
|
functions: [{
|
||||||
|
name: '历史订单',
|
||||||
|
icon: 'history.png',
|
||||||
|
url: ''
|
||||||
|
},{
|
||||||
|
name: '个人信息',
|
||||||
|
icon: 'self.png',
|
||||||
|
url: ''
|
||||||
|
},{
|
||||||
|
name: '修改密码',
|
||||||
|
icon: 'password.png',
|
||||||
|
url: ''
|
||||||
|
}]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed:{
|
computed:{
|
||||||
@ -44,6 +79,13 @@ export default {
|
|||||||
}else{
|
}else{
|
||||||
this.userMessage = {};
|
this.userMessage = {};
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
loginout(){
|
||||||
|
uni.showModal({
|
||||||
|
title: '退出登录',
|
||||||
|
content: '是否确认退出登录？',
|
||||||
|
confirmColor: '#f7c04d'
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -51,5 +93,97 @@ export default {
|
|||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.aircraft-my{
|
.aircraft-my{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
.my-top{
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
.my-identity{
|
||||||
|
position: absolute;
|
||||||
|
top: 220rpx;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.my-avatar{
|
||||||
|
margin-right: 30rpx;
|
||||||
|
&::v-deep .u-image__image{
|
||||||
|
border: 2rpx solid #fff;
|
||||||
|
border-radius: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.my-self{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100rpx;
|
||||||
|
justify-content: space-between;
|
||||||
|
text{
|
||||||
|
&:nth-child(1){
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
font-family: Source Han Sans SC;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #111;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.function-list{
|
||||||
|
margin-top: -200rpx;
|
||||||
|
width: 100%;
|
||||||
|
flex: 1;
|
||||||
|
z-index: 1;
|
||||||
|
background: #f5f5f5;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
.functions{
|
||||||
|
margin: 70rpx 30rpx 0;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
box-shadow: 0rpx 4rpx 14rpx 0rpx rgba(202,202,182,0.5);
|
||||||
|
.function-item{
|
||||||
|
padding: 30rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-family: Source Han Sans SC;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #111;
|
||||||
|
.fi-left{
|
||||||
|
line-height: 50rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
::v-deep .u-icon{
|
||||||
|
margin-right: 16rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:active{
|
||||||
|
background-color: #f7f7f7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.my-loginout{
|
||||||
|
margin: auto 40rpx 40rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
font-family: Source Han Sans SC;
|
||||||
|
font-weight: bold;
|
||||||
|
background-color: #fa4a43;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 30rpx 0;
|
||||||
|
&:active{
|
||||||
|
margin: auto 50rpx 40rpx;
|
||||||
|
padding: 28rpx 0;
|
||||||
|
background-color: #fab6b6;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.6 KiB After Width: | Height: | Size: 8.2 KiB |
Loading…
Reference in New Issue
Block a user