赵正易
684ad6f152
- 新增自定义用户信息卡片样式 - 优化登录页面输入框和按钮样式 - 重构首页布局和图标展示 - 添加多种操作图标资源 - 改进用户退出登录逻辑 - 优化页面跳转和错误处理
141 lines
3.6 KiB
Vue
141 lines
3.6 KiB
Vue
<template>
|
||
<view class="user-container">
|
||
<view class="flex-col page">
|
||
<view class="flex-col justify-start relative section">
|
||
<view class="shrink-0 section_2"></view>
|
||
<u-avatar class="shrink-0 image pos" :showLoading="true" size="64px" :src="avatar"
|
||
@click="avatarClick"></u-avatar>
|
||
<text class="text pos_2">{{nickName}}</text>
|
||
<view class="flex-row justify-between section_4 pos_4">
|
||
<text class="font">部门：{{deptName}}</text>
|
||
<!-- <text class="font">手机号：{{userInfo.phonenumber}}</text> -->
|
||
</view>
|
||
</view>
|
||
<!-- <uni-card class="card-box" is-shadow>
|
||
<u-grid :border="false" @click="gridClick" col="3">
|
||
<u-grid-item v-for="(baseListItem,baseListIndex) in gridList" :key="baseListIndex"
|
||
:name="baseListItem.url">
|
||
<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.name" :size="48"></u-icon>
|
||
<text class="grid-text">{{baseListItem.title}}</text>
|
||
</u-grid-item>
|
||
</u-grid>
|
||
</uni-card> -->
|
||
<view class="custom-cell-group">
|
||
<view class="custom-cell" @click="handleFeedbackClick">
|
||
<image src="/static/images/user-icons/server-man.svg" class="custom-cell-icon"></image>
|
||
<text class="custom-cell-title">问题反馈</text>
|
||
<view class="custom-cell-arrow">></view>
|
||
</view>
|
||
<view class="custom-cell" @click="handleSettingsClick">
|
||
<image src="/static/images/user-icons/setting-fill.svg" class="custom-cell-icon"></image>
|
||
<text class="custom-cell-title">个人设置</text>
|
||
<view class="custom-cell-arrow">></view>
|
||
</view>
|
||
<view class="custom-cell">
|
||
<image src="/static/images/user-icons/level.svg" class="custom-cell-icon"></image>
|
||
<text class="custom-cell-title">版本号</text>
|
||
<text class="custom-cell-value">{{version}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="out-button-box">
|
||
<u-modal :show="outLoginShow" title="退出登录" showCancelButton content='是否注销,并退出登录？'
|
||
@cancel="outLoginShow = false" @confirm="outLogin"></u-modal>
|
||
<u-button type="primary" text="退出登录" @click="outLoginShow = true"></u-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapGetters
|
||
} from 'vuex'
|
||
import {
|
||
mapActions
|
||
} from 'vuex'
|
||
export default {
|
||
components: {},
|
||
props: {},
|
||
computed: {
|
||
// 使用对象展开运算符将 getter 混入 computed 对象中
|
||
...mapGetters([
|
||
'name',
|
||
'nickName',
|
||
'deptName',
|
||
'avatar',
|
||
])
|
||
},
|
||
onLoad() {
|
||
this.version = uni.$u.sys().appWgtVersion;
|
||
},
|
||
onShow() {
|
||
this.GetInfo();
|
||
},
|
||
data() {
|
||
return {
|
||
version:'V2.1.2',
|
||
outLoginShow: false,
|
||
gridList: [{
|
||
name: 'photo',
|
||
title: 'agv',
|
||
url: '/pages/agv/agv'
|
||
},
|
||
// {
|
||
// name: 'lock',
|
||
// title: '帮助',
|
||
// url: ''
|
||
// },
|
||
// {
|
||
// name: 'star',
|
||
// title: '客服',
|
||
// url: ''
|
||
// },
|
||
]
|
||
};
|
||
},
|
||
|
||
methods: {
|
||
...mapActions([
|
||
'LogOut',
|
||
'GetInfo'
|
||
]),
|
||
avatarClick() {
|
||
|
||
},
|
||
gridClick(url) {
|
||
if (url === '') {
|
||
return;
|
||
}
|
||
uni.navigateTo({
|
||
url
|
||
});
|
||
},
|
||
// 处理问题反馈点击事件
|
||
handleFeedbackClick() {
|
||
// 处理问题反馈点击事件
|
||
},
|
||
handleSettingsClick() {
|
||
// 处理个人设置点击事件
|
||
},
|
||
// 退出登录
|
||
outLogin() {
|
||
this.LogOut().then(() => {
|
||
// 退出登录成功处理
|
||
}).catch((error) => {
|
||
// 退出登录失败处理
|
||
});
|
||
this.outLoginShow = false;
|
||
setTimeout(() => {
|
||
uni.reLaunch({
|
||
url: '/pages/login/login'
|
||
});
|
||
}, 500)
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
@import url("user.css");
|
||
</style> |