156 lines
3.8 KiB
Vue
156 lines
3.8 KiB
Vue
<template>
|
||
<view>
|
||
<view class="warp warp1">
|
||
<view class="user">
|
||
<view class="user-info">
|
||
<text class="nickname"> {{userInfo.nickname}} </text>
|
||
<text> UID {{userInfo.uid}}</text>
|
||
<text> 云深不知归处，爱你不会迷路</text>
|
||
</view>
|
||
<image class="user-avatar" mode="aspectFit" :src="userInfo.avatar"
|
||
style="background-image: ../../../static/avatar.png;"></image>
|
||
</view>
|
||
<view style="padding: 10rpx;"></view>
|
||
<view class="Grid">
|
||
<view class="Grid-Item">
|
||
<view class="Grid-Item-1">
|
||
<image class="GSimg" src="../../../static/logo.png"></image>
|
||
<view class="GStitle">家族</view>
|
||
</view>
|
||
</view>
|
||
<view class="Grid-Item">
|
||
<view class="Grid-Item-1">
|
||
<image class="GSimg" src="../../../static/logo.png"></image>
|
||
<view class="GStitle">任务</view>
|
||
</view>
|
||
</view>
|
||
<view class="Grid-Item">
|
||
<view class="Grid-Item-1">
|
||
<image class="GSimg" src="../../../static/logo.png"></image>
|
||
<view class="GStitle">收益</view>
|
||
</view>
|
||
</view>
|
||
<view class="Grid-Item">
|
||
<view class="Grid-Item-1">
|
||
<image class="GSimg" src="../../../static/logo.png"></image>
|
||
<view class="GStitle">充值</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view style="padding: 10rpx;"></view>
|
||
<uni-list>
|
||
<uni-list-item :showExtraIcon="true" link to="/member/profile/profile" :extraIcon="{color: '#4cd964',size: '25',type: 'gear'}"
|
||
title="个人信息" clickable showArrow>
|
||
</uni-list-item>
|
||
<uni-list-item :showExtraIcon="true" :extraIcon="{color: '#4cd964',size: '25',type: 'gear'}"
|
||
title="账号与安全" clickable showArrow>
|
||
</uni-list-item>
|
||
</uni-list>
|
||
<view style="padding: 10rpx;"></view>
|
||
<uni-list>
|
||
<uni-list-item :showExtraIcon="true" :extraIcon="{color: '#4cd964',size: '25',type: 'gear'}" title="设置"
|
||
clickable showArrow>
|
||
</uni-list-item>
|
||
<uni-list-item :showExtraIcon="true" :extraIcon="{color: '#4cd964',size: '25',type: 'info'}" title="关于"
|
||
clickable showArrow>
|
||
</uni-list-item>
|
||
<uni-list-item :showExtraIcon="true" @click="logOut"
|
||
:extraIcon="{color: '#ff0000',size: '25',type: 'back'}" title="注销登录" clickable showArrow>
|
||
</uni-list-item>
|
||
</uni-list>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapState,
|
||
mapGetters
|
||
} from 'vuex'
|
||
export default {
|
||
computed: {
|
||
...mapState({
|
||
text: state => state.moduleA.text,
|
||
timestamp: state => state.moduleB.timestamp
|
||
}),
|
||
...mapGetters({
|
||
isLogin: 'getuserIsLogin',
|
||
userInfo: 'getUserInfo'
|
||
})
|
||
},
|
||
data() {
|
||
return {}
|
||
},
|
||
onLoad() {
|
||
if (!this.isLogin) {
|
||
uni.redirectTo({
|
||
url: "/pages/login/login"
|
||
})
|
||
}
|
||
},
|
||
methods: {
|
||
logOut() {
|
||
let self = this;
|
||
uni.showModal({
|
||
content: "确定注销登录嘛？",
|
||
confirmText: "确定",
|
||
cancelText: "取消",
|
||
success(res) {
|
||
if (res.confirm) {
|
||
|
||
self.$store.dispatch("actionLogout");
|
||
uni.reLaunch({
|
||
url:"/pages/tabbar/home/home"
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
},
|
||
onBackPress() {
|
||
// #ifdef APP-PLUS
|
||
plus.key.hideSoftKeybord();
|
||
// #endif
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.warp1 {}
|
||
|
||
.user {
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
padding: 180rpx 25rpx 25rpx 15rpx;
|
||
/* #ifdef H5 */
|
||
padding-top: 80rpx;
|
||
|
||
/* #endif */
|
||
// background-image: url(/static/user/back.jpg);
|
||
// background-size: 100% 100%;
|
||
// background: linear-gradient(pink,#a900ff7a, pink);
|
||
.user-avatar {
|
||
width: 138rpx;
|
||
height: 138rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.user-info {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding-left: 25rpx;
|
||
|
||
.nickname {
|
||
font-size: 64rpx;
|
||
font-weight: 48rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|