189 lines
3.7 KiB
Vue
189 lines
3.7 KiB
Vue
<template>
|
|
<view class="mine">
|
|
<div class="status_bar"></div>
|
|
<view class="mine-user u-m-b-20">
|
|
<view class="avatar">
|
|
<u-avatar :text="user.nickName.slice(0, 1)" size="55" bgColor="#fff" color="#2b7"></u-avatar>
|
|
</view>
|
|
<view class="info">
|
|
<view class="item">
|
|
<text class="text">{{ user.nickName }}</text>
|
|
</view>
|
|
<view class="item">
|
|
手机:<text class="phone">{{user.phoneNum}}</text>
|
|
</view>
|
|
</view>
|
|
<u-icon name="arrow-right" color="#fff" class="more"></u-icon>
|
|
</view>
|
|
<view class="content">
|
|
<view class="module tips">
|
|
<u-cell-group :border="false">
|
|
<!-- <u-cell :border="false" title="我的消息" :isLink="true" >
|
|
<u-icon slot="icon" name="chat" color="#43B96B" size="20"></u-icon>
|
|
</u-cell> -->
|
|
<u-cell :border="false" title="修改密码" :isLink="true" @click="fixPassword">
|
|
<u-icon slot="icon" name="lock-fill" color="#DC7E81" size="20"></u-icon>
|
|
</u-cell>
|
|
<u-cell :border="false" title="版本号" :isLink="false"
|
|
:value="`${appVersion.outVersionName}(${appVersion.outVersionCode}/${appVersion.innerVersion})`">
|
|
<u-icon slot="icon" name="info-circle" color="#43B96B" size="20"></u-icon>
|
|
</u-cell>
|
|
</u-cell-group>
|
|
</view>
|
|
|
|
|
|
<view class="module">
|
|
<u-cell-group :border="false">
|
|
<u-cell :border="false" :isLink="false" @click="logOut">
|
|
<view slot="title" style="text-align: center;color: #EB7376;">
|
|
退出登录
|
|
</view>
|
|
</u-cell>
|
|
</u-cell-group>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapActions,
|
|
mapState
|
|
} from 'vuex'
|
|
export default {
|
|
data() {
|
|
return {
|
|
appVersion: {
|
|
//apk版本名称
|
|
outVersionName: '',
|
|
//wgt版本名称
|
|
innerVersion: '',
|
|
//apk版本号
|
|
outVersionCode: ''
|
|
},
|
|
show: false
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState(['user']),
|
|
},
|
|
onShow() {
|
|
/** 获取版本信息 */
|
|
uni.getSystemInfo({
|
|
success: (res)=> {
|
|
this.appVersion.outVersionName = res.appVersion;
|
|
this.appVersion.outVersionCode = res.appVersionCode;
|
|
this.appVersion.innerVersion = res.appVersion;
|
|
}
|
|
});
|
|
},
|
|
methods: {
|
|
...mapActions(['logout']),
|
|
|
|
/** 处理用户退出 */
|
|
async logOut() {
|
|
await this.logout()
|
|
this.$u.route({
|
|
type: 'reLaunch',
|
|
url: 'pages/login/index'
|
|
})
|
|
},
|
|
|
|
/** 处理修改密码 */
|
|
fixPassword() {
|
|
uni.$u.route({
|
|
url: 'pages/mine/password'
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
$width: 1500rpx;
|
|
|
|
.mine {
|
|
overflow: hidden;
|
|
|
|
.status_bar {
|
|
height: var(--status-bar-height);
|
|
width: 100%;
|
|
background: #2b7;
|
|
}
|
|
|
|
&-user {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 80rpx 20rpx;
|
|
background: #2b7;
|
|
color: #fff;
|
|
margin-bottom: -40rpx;
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: "";
|
|
display: block;
|
|
background-color: $my-primary-color;
|
|
width: $width;
|
|
height: $width;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
z-index: -999;
|
|
bottom: -140rpx;
|
|
left: 0;
|
|
transform: translateX(-($width/2 - 375rpx));
|
|
}
|
|
|
|
.avatar {
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.info {
|
|
.item {
|
|
width: 500rpx;
|
|
|
|
&:last-of-type {
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.text {
|
|
font-size: 36rpx;
|
|
}
|
|
|
|
.phone {
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.more {
|
|
margin: auto 0 auto auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
padding: 0 30rpx;
|
|
box-sizing: border-box;
|
|
|
|
.module {
|
|
margin-bottom: 40rpx;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.concat {
|
|
height: 120rpx;
|
|
line-height: 120rpx;
|
|
text-align: center;
|
|
color: $my-primary-color;
|
|
}
|
|
|
|
// 修改组件样式
|
|
/deep/ .u-cell__body {
|
|
background-color: #fff;
|
|
height: 100rpx;
|
|
}
|
|
</style> |