106 lines
2.4 KiB
Vue
106 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { dialog, toast } from 'sard-uniapp'
|
|
import { useUserStore } from '@/store'
|
|
|
|
const userStore = useUserStore()
|
|
|
|
function handleLoginOut() {
|
|
dialog.confirm({
|
|
title: '提示',
|
|
message: '确定退出登录？',
|
|
onConfirm() {
|
|
toast.success('退出成功')
|
|
userStore.reset()
|
|
|
|
uni.navigateTo({
|
|
url: '/pages-sub/login/index',
|
|
})
|
|
},
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="account-container">
|
|
<view class="account-header">
|
|
<view class="header-bg" />
|
|
<view class="welcome">
|
|
<view class="welcome-title">
|
|
{{ userStore.isLogined ? '✨ 您好，欢迎回来！' : '你好，请登录！' }}
|
|
</view>
|
|
<sar-tag v-if="userStore.isLogined" theme="primary" round>
|
|
已登录
|
|
</sar-tag>
|
|
<sar-tag v-else theme="secondary">
|
|
未登录
|
|
</sar-tag>
|
|
</view>
|
|
<view class="info-row">
|
|
<sar-icon name="user" size="28rpx" color="#0064fa" />
|
|
<view class="info-label">
|
|
账号
|
|
</view>
|
|
<view class="info-value">
|
|
{{ userStore.isLogined ? userStore.userInfo.userid : '登录后查看' }}
|
|
</view>
|
|
</view>
|
|
<view class="info-row">
|
|
<sar-icon name="organization" size="28rpx" color="#0064fa" />
|
|
<view class="info-label">
|
|
机构码
|
|
</view>
|
|
<view class="info-value">
|
|
{{ userStore.isLogined ? userStore.userInfo.orgid : '登录后查看' }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<sar-list style="margin-top: 32rpx;">
|
|
<sar-list-item title="修改密码" hover arrow />
|
|
<sar-list-item title="退出登录" hover arrow @click="handleLoginOut" />
|
|
</sar-list>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.account-header {
|
|
position: relative;
|
|
padding: 40rpx 32rpx;
|
|
background-color: #fff;
|
|
border-bottom-left-radius: 24rpx;
|
|
border-bottom-right-radius: 24rpx;
|
|
.welcome {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 32rpx;
|
|
z-index: 1;
|
|
|
|
.welcome-title {
|
|
font-weight: 600;
|
|
font-size: 34rpx;
|
|
color: #222;
|
|
}
|
|
}
|
|
|
|
.info-row {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
z-index: 1;
|
|
margin-top: 24rpx;
|
|
|
|
.info-label {
|
|
width: 120rpx;
|
|
color: #555;
|
|
}
|
|
|
|
.info-value {
|
|
flex: 1;
|
|
color: #111;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
</style>
|