215 lines
4.6 KiB
Vue
215 lines
4.6 KiB
Vue
<template>
|
||
<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 isPilot?functions:functions.slice(2)"
|
||
:key="index" @click="handleClickFunction(item)">
|
||
<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>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import configService from '@/common/config.service.js';
|
||
export default {
|
||
// #ifdef MP
|
||
options: {
|
||
styleIsolation: 'shared'
|
||
},
|
||
// #endif
|
||
props: {
|
||
topLevel:{
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
isLogin: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
},
|
||
data(){
|
||
return{
|
||
//我的页图标基础路径
|
||
fileUrl: configService.fileUrl + 'aerocraft/my/',
|
||
// 轮播图
|
||
topBg: 'top-bg-a.png',
|
||
// 用户信息
|
||
// userMessage:{}
|
||
userMessage: this.$store.state.vuex_token === ''?{}:JSON.parse(this.$store.state.user_message),
|
||
// 功能列表
|
||
functions: [{
|
||
name: '历史订单',
|
||
icon: 'history.png',
|
||
url: '/aircraft/server/my/child_pages/history'
|
||
},{
|
||
name: '个人信息',
|
||
icon: 'self.png',
|
||
url: '/aircraft/server/my/child_pages/setting'
|
||
},{
|
||
name: '修改密码',
|
||
icon: 'password.png',
|
||
url: '/aircraft/server/my/child_pages/reset-password'
|
||
}],
|
||
isPilot: this.$store.state.user_type == 1,
|
||
}
|
||
},
|
||
computed:{
|
||
},
|
||
methods:{
|
||
// 初始化
|
||
init(){
|
||
if(this.isLogin !== ''){
|
||
this.userMessage = JSON.parse(this.$store.state.user_message);
|
||
}else{
|
||
this.userMessage = {};
|
||
}
|
||
},
|
||
// 功能栏点击
|
||
handleClickFunction({url}){
|
||
if(url) uni.navigateTo({url: url})
|
||
},
|
||
// 退出登录
|
||
loginout(){
|
||
let that = this;
|
||
uni.showModal({
|
||
title: '退出登录',
|
||
content: '是否确认退出登录？',
|
||
confirmColor: '#f7c04d',
|
||
success: async(res) => {
|
||
if (res.confirm) {
|
||
await that.$api.logout();
|
||
that.$u.vuex('vuex_token', '');
|
||
that.$u.vuex('user_message', {});
|
||
uni.setStorageSync('current',0);
|
||
uni.reLaunch({
|
||
url: '/aircraft/server/my/child_pages/login',
|
||
complete() {
|
||
setTimeout(()=>{
|
||
uni.showToast({
|
||
icon: 'none',title: '退出登录成功!'
|
||
})
|
||
},300);
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.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> |