u

code/base-project/base-uniapp-main/src/pages/account/index.vue

@@ -0,0 +1,101 @@
+<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()
+    },
+  })
+}
+</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>