<!-- 我的 -->
|
<template>
|
<view class="page-wrap">
|
<view class="userBox">
|
<view class="flex items-center pb-30rpx pl-30rpx pr-20rpx">
|
<view class="mr-20rpx">
|
<u-avatar :src="user.avatar" size="70" />
|
</view>
|
<view class="flex-1">
|
<view class="userName">{{ userStore?.userInfo?.nick_name }}</view>
|
<view class="departs">
|
<image src="@/static/images/user/mobile.svg" alt="" />
|
<span>{{user.deptName}}</span>
|
</view>
|
</view>
|
<view class="rightLogo">
|
<image src="@/static/images/user/logo2.png" alt="" />
|
</view>
|
</view>
|
<view class="personalInformation">
|
<div class="message">
|
<div class="messagebox">个人信息</div>
|
<div class="editInfo" @click="handelEdit(1)">点击编辑
|
<image src="@/static/images/user/rightBtn.svg" alt="" />
|
</div>
|
</div>
|
<div class="passwordBox">
|
<div class="messagebox">修改密码</div>
|
<div class="editInfo" @click="handelEdit(2)">点击编辑 <image src="@/static/images/user/rightBtn.svg" alt="" />
|
</div>
|
</div>
|
</view>
|
|
<view class="mt-20rpx">
|
<div class="goOutStyle" @click="logOut">退出登录</div>
|
</view>
|
<div class="bottomLogo"><image src="@/static/images/user/logo1.png" alt="" /></div>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import {
|
getUserInfo,
|
|
} from '@/api/user/index.js';
|
import {
|
useClipboard
|
} from "@/hooks";
|
import {
|
useUserStore
|
} from "@/store/index.js";
|
import {
|
onShow
|
} from "@dcloudio/uni-app";
|
import {
|
getDeviceRegionApi
|
} from "@/api/map.js";
|
|
const {
|
setClipboardData,
|
getClipboardData
|
} = useClipboard();
|
const userStore = useUserStore();
|
const user = ref('')
|
const getUserInfoData = () => {
|
getUserInfo().then(res => {
|
user.value = res.data.data;
|
});
|
};
|
|
function logOut() {
|
userStore.setUserInfo(null)
|
uni.reLaunch({
|
url: '/pages/login/index'
|
})
|
}
|
|
function getDeviceRegion() {
|
getDeviceRegionApi().then(res => {
|
|
})
|
}
|
const handelEdit = (val) => {
|
|
if (val === 1) {
|
uni.navigateTo({
|
url: `/subPackages/userDetail/infos/index`
|
});
|
} else {
|
uni.navigateTo({
|
url: `/subPackages/userDetail/password/index`
|
});
|
}
|
|
}
|
// 登录鉴权，微信小程序端点击tabbar的底层逻辑不触发uni.switchTab，需要在页面onShow生命周期中校验权限
|
onShow(async () => {
|
getDeviceRegion()
|
getUserInfoData()
|
uni.setTabBarItem({
|
index: 2, // Tab 的索引（从0开始）
|
visible: false,
|
})
|
uni.setTabBarItem({
|
index: 3, // Tab
|
visible: true,
|
});
|
});
|
</script>
|
<style scoped lang="scss">
|
.page-wrap {
|
width: 100%;
|
height: 100%;
|
|
}
|
.userBox {
|
padding-top: 88rpx;
|
}
|
.userName {
|
font-weight: 700;
|
font-size: 36rpx;
|
color: #000000;
|
|
}
|
|
.departs {
|
display: flex;
|
align-items: center;
|
margin-top: 22rpx;
|
|
image {
|
width: 28rpx;
|
height: 28rpx;
|
}
|
|
span {
|
font-family: "Source Han Sans CN";
|
font-weight: 400;
|
font-size: 28rpx;
|
color: rgba(0, 0, 0, 0.6);
|
margin-left: 6rpx;
|
}
|
}
|
|
.rightLogo {
|
width: 200rpx;
|
height: 80rpx;
|
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.bottomLogo {
|
position: absolute;
|
bottom: 50rpx;
|
left: 0;
|
right: 0;
|
margin: 0 auto;
|
text-align: center;
|
|
image {
|
width: 128rpx;
|
height: 52rpx;
|
}
|
}
|
|
.goOutStyle {
|
width: 590rpx;
|
height: 76rpx;
|
background: #1D6FE9;
|
border-radius: 40rpx;
|
font-family: "Source Han Sans CN";
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #FFFFFF;
|
text-align: center;
|
line-height: 76rpx;
|
margin: auto;
|
margin-top: 114rpx;
|
}
|
|
.personalInformation {
|
display: flex;
|
justify-content: space-between;
|
padding: 0 24rpx;
|
|
.message,
|
.passwordBox {
|
width: 340rpx;
|
height: 160rpx;
|
|
.messagebox {
|
padding: 20rpx 24rpx;
|
font-family: "Source Han Sans CN";
|
font-weight: 500;
|
font-size: 28rpx;
|
color: #000000;
|
}
|
|
.editInfo {
|
padding: 20rpx 24rpx;
|
color: rgba(0, 0, 0, 0.5);
|
font-family: "Source Han Sans CN";
|
font-weight: 400;
|
font-size: 24rpx;
|
display: flex;
|
align-items: center;
|
|
image {
|
width: 28rpx;
|
height: 28rpx;
|
}
|
}
|
}
|
|
.message {
|
background: url(@/static/images/user/info.png) no-repeat center;
|
background-size: 100% 100%;
|
|
}
|
|
.passwordBox {
|
background: url(@/static/images/user/password.png) no-repeat center;
|
background-size: 100% 100%;
|
|
}
|
}
|
</style>
|
