App.vue

<script setup lang="ts">

import { onMounted, ref } from 'vue'
import png1 from '@/static/my/1.png'
import AppHeader from '@/components/AppHeader.vue'
import { showFailToast, showSuccessToast } from 'vant'
import request from '@/utils/request'
const navigateTo = (path: string) => {
  window.location.href = window.location.origin + path
}
const fileInput = ref<HTMLInputElement | null>(null)
const userInfo = ref({
  avatar: '',
  nickName: '',
  isVerified: false,
})

// 获取用户信息
async function getUserInfo() {
  try {
    const res = await request.get('/system/user/')
    if (res.code === 200) {
      userInfo.value = res
    }
  }
  catch (error) {
    console.error('Get user info error:', error)
  }
}

// 处理头像上传
function handleUploadAvatar() {
  fileInput.value?.click()
}

// 文件选择改变
async function onFileChange(event: Event) {
  const input = event.target as HTMLInputElement
  if (!input.files?.length)
    return

  const file = input.files[0]
  const formData = new FormData()
  formData.append('avatar', file)

  try {
    const res = await request.post('/system/user/profile/avatar', formData)
    if (res.code === 200) {
      showSuccessToast('头像上传成功')
      getUserInfo()
    }
    else {
      showFailToast(res.msg || '上传失败')
    }
  }
  catch (error) {
    console.error('Upload avatar error:', error)
    showFailToast('上传失败，请稍后重试')
  }

  // 清除选择的文件
  input.value = ''
}

// 处理实名认证
function handleVerification() {
  if (userInfo.value.isVerified) {
    showToast('您已完成实名认证')
    return
  }
  navigateTo('/user/shiming')
}

// 处理退出登录
async function handleLogout() {
  try {
    const res = await post('/auth/logout')
    if (res.code === 200) {
      // 清除本地存储的用户信息和token
      localStorage.removeItem('token')
      localStorage.removeItem('userInfo')
      // 跳转到登录页
      navigateTo('/login')
    }
  }
  catch (error) {
    console.error('Logout error:', error)
    showFailToast('退出失败，请稍后重试')
  }
}

onMounted(() => {
  getUserInfo()
})
</script>

<template>
  <AppHeader title="账号安全" />
  <div class="security-container">
    <div class="menu-list">
      <!-- 头像设置 -->
      <!-- <div class="menu-item" @click="handleUploadAvatar">
        <div class="left">
          <van-icon name="user-circle-o" class="menu-icon" />
          <span>头像</span>
        </div>
        <div class="right">
          <img :src="userInfo.avatar || png1" class="avatar" />
          <van-icon name="arrow" />
        </div>
      </div> -->

      <!-- 昵称设置 -->
      <div class="menu-item" @click="navigateTo('/user/resetNickname.html')">
        <div class="left">
          <van-icon name="contact" class="menu-icon" />
          <span>姓名</span>
        </div>
        <div class="right">
          <span class="value">{{ userInfo?.extend2 || userInfo?.nickName }}</span>
          <van-icon name="arrow" />
        </div>
      </div>

      <!-- 登录密码 -->
      <div class="menu-item" @click="navigateTo('/user/resetPass.html')">
        <div class="left">
          <van-icon name="lock" class="menu-icon" />
          <span>修改登录密码</span>
        </div>
        <div class="right">
          <van-icon name="arrow" />
        </div>
      </div>

      <!-- 交易密码 -->
      <div class="menu-item" @click="navigateTo('/user/resetPayPass.html')">
        <div class="left">
          <van-icon name="shield-o" class="menu-icon" />
          <span>修改交易密码</span>
        </div>
        <div class="right">
          <van-icon name="arrow" />
        </div>
      </div>

      <!-- 实名认证 -->
      <div class="menu-item" @click="handleVerification">
        <div class="left">
          <van-icon name="idcard" class="menu-icon" />
          <span>实名认证</span>
        </div>
        <div class="right">
          <span class="status">{{ userInfo?.data == 'true' ? '已认证' : '未认证' }}</span>
          <van-icon name="arrow" />
        </div>
      </div>

      <!-- 安全退出 -->
      <div class="logout-btn" @click="handleLogout">
        安全退出
      </div>
    </div>

    <!-- 头像上传 -->
    <input ref="fileInput" type="file" accept="image/*" style="display: none" @change="onFileChange">
  </div>
</template>

<style lang="scss" scoped>
.security-container {
  min-height: 100vh;
  background: url('@/static/common/commonbg.png') no-repeat;
  background-size: 100% 100%;
  padding: 20px 15px;

  .menu-list {
    margin-top: 60px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    overflow: hidden;
  }

  .menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background: #fff;
    border-bottom: 1px solid #f5f5f5;

    .left {
      display: flex;
      align-items: center;
      color: #460a0b;
      font-size: 14px;

      .menu-icon {
        font-size: 20px;
        margin-right: 10px;
      }
    }

    .right {
      display: flex;
      align-items: center;
      color: #999;

      .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
        object-fit: cover;
      }

      .value {
        margin-right: 10px;
        font-size: 14px;
      }

      .status {
        color: #460a0b;
        margin-right: 10px;
        font-size: 14px;
      }
    }
  }

  .logout-btn {
    width: 291px;
    height: 63px;
    background: url('@/static/common/btn.png') no-repeat;
    background-size: 100% 100%;
    font-weight: 500;
    margin: 40px auto 0;
    font-size: 21px;
    color: #fff7e9;
    text-align: center;
    line-height: 46px;
  }
}
</style>