214 lines
4.2 KiB
Vue
214 lines
4.2 KiB
Vue
<template>
|
|
<view class="main-box">
|
|
<u-navbar
|
|
:placeholder="true"
|
|
title="个人中心"
|
|
:autoBack="true"
|
|
leftIconColor="#fff"
|
|
bgColor="#000000">
|
|
</u-navbar>
|
|
<view class="item">
|
|
<view class="item-content">
|
|
<u-row
|
|
justify="space-between"
|
|
gutter="25">
|
|
<u-col
|
|
span="4"
|
|
class="title-item">
|
|
<view>账号ID</view>
|
|
</u-col>
|
|
<u-line direction="col"></u-line>
|
|
<u-col
|
|
span="7"
|
|
class="title-item">
|
|
<view>{{ userInfo.ID }}</view>
|
|
</u-col>
|
|
</u-row>
|
|
<u-line></u-line>
|
|
<u-row
|
|
justify="space-between"
|
|
gutter="25">
|
|
<u-col
|
|
span="4"
|
|
class="title-item">
|
|
<view>员工姓名</view>
|
|
</u-col>
|
|
<u-line direction="col"></u-line>
|
|
<u-col
|
|
span="7"
|
|
class="title-item">
|
|
<view>{{ userInfo.nickName }}</view>
|
|
</u-col>
|
|
</u-row>
|
|
<u-line></u-line>
|
|
<u-row
|
|
justify="space-between"
|
|
gutter="25">
|
|
<u-col
|
|
span="4"
|
|
class="title-item">
|
|
<view>手机号(+86)</view>
|
|
</u-col>
|
|
<u-line direction="col"></u-line>
|
|
<u-col
|
|
span="7"
|
|
class="title-item">
|
|
<view>{{ userInfo.telNum }}</view>
|
|
</u-col>
|
|
</u-row>
|
|
</view>
|
|
</view>
|
|
<u-line></u-line>
|
|
<view class="bottom-btn-box">
|
|
<u-button
|
|
class="bottom-btn"
|
|
text="退出登录"
|
|
@click="showLogout"></u-button>
|
|
</view>
|
|
<u-modal
|
|
:show="show"
|
|
:title="'是否退登此账号？'"
|
|
:showConfirmButton="false">
|
|
<u-button
|
|
class="ok-btn"
|
|
@click="logOut"
|
|
type="primary"
|
|
size="small">
|
|
确定</u-button
|
|
>
|
|
<u-button
|
|
class="cancel-btn"
|
|
@click="show = false"
|
|
type="primary"
|
|
size="small"
|
|
>取消</u-button
|
|
>
|
|
</u-modal>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
show: false,
|
|
userInfo: {},
|
|
};
|
|
},
|
|
mounted() {
|
|
this.userInfo = uni.getStorageSync("userInfo");
|
|
},
|
|
methods: {
|
|
logOut() {
|
|
// 清空缓存
|
|
uni.clearStorageSync();
|
|
// 跳转到登录页
|
|
uni.reLaunch({
|
|
url: "/pages/login/login",
|
|
});
|
|
},
|
|
showLogout() {
|
|
this.show = true;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #0e1746;
|
|
background-size: auto 100%;
|
|
background-attachment: fixed;
|
|
height: 100vh;
|
|
|
|
overflow: hidden;
|
|
}
|
|
|
|
.main-box {
|
|
padding: 36rpx;
|
|
/deep/ .u-navbar__content__title {
|
|
color: #fff;
|
|
}
|
|
}
|
|
.bottom-btn-box {
|
|
position: fixed;
|
|
bottom: 150rpx;
|
|
left: 30%;
|
|
.bottom-btn {
|
|
width: 300rpx;
|
|
height: 60rpx;
|
|
border-radius: 40rpx;
|
|
background-color: #ff2727;
|
|
color: #fff;
|
|
border: none;
|
|
}
|
|
}
|
|
.ok-btn {
|
|
width: 440rpx;
|
|
height: 60rpx;
|
|
border-radius: 30rpx;
|
|
background: #ff3b48;
|
|
color: #ffffff;
|
|
margin: 20rpx 20rpx 0 20rpx;
|
|
font-size: 30rpx;
|
|
border: 0;
|
|
}
|
|
.cancel-btn {
|
|
width: 440rpx;
|
|
height: 60rpx;
|
|
border-radius: 30rpx;
|
|
margin: 20rpx 20rpx 0 20rpx;
|
|
background: #0e1746;
|
|
font-size: 30rpx;
|
|
color: #fff;
|
|
border: 0;
|
|
}
|
|
.item {
|
|
width: 100%;
|
|
height: 220rpx;
|
|
background-color: #fff;
|
|
margin-top: 20rpx;
|
|
background-color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 25rpx;
|
|
box-sizing: border-box;
|
|
.left-img {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 10rpx;
|
|
}
|
|
.item-content {
|
|
width: 100%;
|
|
padding-left: 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
height: 100%;
|
|
.item-title {
|
|
font-size: 28rpx;
|
|
color: #000;
|
|
}
|
|
.title-item {
|
|
padding: 10rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
.no-border {
|
|
border-left: none;
|
|
// 文字超出省略号
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
max-width: 190rpx;
|
|
|
|
view {
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|