LandSurveyApplet/pages/my/index.vue

<template>
  <!-- 顶部信息栏 -->
  <view class="profile-header rounded-b-2xl bg-gradient-to-b from-blue-500 to-red-500 text-white py-6 px-4">
    <view class="flex items-center gap-10 justify-around">
      <!-- 头像 -->
      <view class="flex flex-col gap-2 w-5/12">
        <view class="w-120 h-120 rounded-full bg-gray-200 flex items-center justify-center mx-auto">
          <image class="w-full h-full" src="/static/my/avatar.png"></image>
        </view>
        <view class="text-lg font-semibold text-center">{{ isLoggedIn ? 'admin' : '游客' }}</view>
      </view>
      <!-- 个人信息 -->
      <view class="w-7/12">
        <view class="flex items-center mt-1" v-if="isLoggedIn">
          <view class="text-xs mr-1 w-36 h-36">
            <image class="w-full h-full" src="/static/my/phone.png"></image>
          </view>
          <text class="text-sm">15116297551</text>
        </view>
        <view v-if="!isLoggedIn">
          <text class="text-sm">请登录后查看信息</text>
        </view>
        <view v-if="isLoggedIn">
          上次登录系统时间：
        </view>
        <view class="flex items-center mt-1" v-if="isLoggedIn">
          <view class="text-xs mr-1 w-36 h-36">
            <image class="w-full h-full" src="/static/my/shad.png"></image>
          </view>
          <text class="text-sm">2025-10-29 15:11:41</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 功能列表 -->
  <view class="profile-list bg-white">
    <view class="border-b border-gray-100 bg-#f3f8fd m-4 rounded-2">
      <view class="flex items-center py-4 px-4" :class="{ 'opacity-50': !isLoggedIn }" @click="isLoggedIn && toModifyPhone()">
        <view class="text-red-500 mr-2 w-36 h-36">
          <image class="w-full h-full" src="/static/my/telphone.png"></image>
        </view>
        <text class="flex-1">修改号码</text>
        <text class="text-gray-400">＞</text>
      </view>
    </view>
    <view class="border-b border-gray-100 bg-#f3f8fd m-4 rounded-2">
      <view class="flex items-center py-4 px-4 " :class="{ 'opacity-50': !isLoggedIn }" @click="isLoggedIn && toModifyPassword()">
        <view class="text-red-500 mr-2 w-36 h-36">
          <image class="w-full h-full" src="/static/my/lock.png"></image>
        </view>
        <text class="flex-1">修改密码</text>
        <text class="text-gray-400">＞</text>
      </view>
    </view>
    <view class="border-b border-gray-100 bg-#f3f8fd m-4 rounded-2">
      <view class="flex items-center py-4 px-4" :class="{ 'opacity-50': !isLoggedIn }" @click="isLoggedIn && toFeedback()">
        <view class="text-red-500 mr-2 w-36 h-36">
          <image class="w-full h-full" src="/static/my/feedback.png"></image>
        </view>
        <text class="flex-1">意见反馈</text>
        <text class="text-gray-400">＞</text>
      </view>
    </view>
    <view class="border-b border-gray-100 bg-#f3f8fd m-4 rounded-2">
      <view class="flex items-center py-4 px-4" :class="{ 'opacity-50': !isLoggedIn }" @click="isLoggedIn && toLogReport()">
        <view class="text-red-500 mr-2 w-36 h-36">
          <image class="w-full h-full" src="/static/my/log.png"></image>
        </view>
        <text class="flex-1">日志上报</text>
        <text class="text-gray-400">＞</text>
      </view>
    </view>
    <view class="border-b border-gray-100 bg-#f3f8fd m-4 rounded-2">
      <view class="flex items-center py-4 px-4" :class="{ 'opacity-50': !isLoggedIn }" @click="isLoggedIn && scanQRCode()">
        <view class="text-red-500 mr-2 w-36 h-36">
          <image class="w-full h-full" src="/static/my/scan.png"></image>
        </view>
        <text class="flex-1">扫一扫</text>
        <text class="text-gray-400">＞</text>
      </view>
    </view>
    <view class="border-b border-gray-100 bg-#f3f8fd m-4 rounded-2">
      <view class="flex items-center py-4 px-4" :class="{ 'opacity-50': !isLoggedIn }" @click="isLoggedIn && toDisclaimer()">
        <view class="text-red-500 mr-2 w-36 h-36">
          <image class="w-full h-full" src="/static/my/info.png"></image>
        </view>
        <text class="flex-1">免责申明1</text>
        <text class="text-gray-400">＞</text>
      </view>
    </view>
    <view class="border-b border-gray-100 bg-#f3f8fd m-4 rounded-2">
      <view class="flex items-center py-4 px-4" @click="toggleLoginStatus">
        <view class="text-red-500 mr-2 w-36 h-36">
          <image class="w-full h-full" :src="isLoggedIn ? '/static/my/logout.png' : '/static/my/login.png'"></image>
        </view>
        <text class="flex-1" :class="{ 'text-red-500': isLoggedIn }" @click="getLogin">{{ isLoggedIn ? '退出登录' : '立即登录' }}</text>
        <text class="text-gray-400">＞</text>
      </view>
    </view>
    <CustomTabBar :current="1" />
  </view>

</template>
<script setup lang="ts">
import { login } from '@/api/user';
import { ref, onMounted } from 'vue'
import CustomTabBar from "@/components/CustomTabBar.vue";

async function getLogin(){
  if(isLoggedIn.value == false){
    try {
      const res = await login({
        username: 'admin',
        password: 'admin123'
      });
      
      console.log('登录接口返回数据：', res); // 打印完整返回值
      
      // 增加空值判断，防止 res 或 res.token 不存在
      if (res && res.token) {
        // 登录成功，存储 Token
        uni.setStorageSync('token', res.token);
        uni.showToast({ title: '登录成功' });
        isLoggedIn.value = true; // 标记已登录
      } else {
        uni.showToast({ title: '登录成功但未获取到Token', icon: 'none' });
        console.warn('Token 缺失：', res);
      }
    } catch (err) {
      console.error('登录失败：', err);
      uni.showToast({ title: '登录失败：' + (err.msg || '网络错误'), icon: 'none' });
    }
  }
}
// 添加登录状态响应式变量
const isLoggedIn = ref(true)

// 模拟检查登录状态
const checkLoginStatus = () => {
  // 这里应该检查实际的登录状态，比如检查是否有token等
  // 暂时从本地存储中检查登录状态
  const token = uni.getStorageSync('token')
  isLoggedIn.value = token
}

// 页面加载时检查登录状态
onMounted(() => {
  checkLoginStatus()
})

// 切换登录状态
const toggleLoginStatus = () => {
  if (isLoggedIn.value) {
    // 退出登录
    uni.showModal({
      title: '确认退出',
      content: '您确定要退出登录吗？',
      cancelText: '取消',
      confirmText: '确认',
      success: (res) => {
        if (res.confirm) {
          // 执行退出登录逻辑
          console.log('用户确认退出登录')

          // 清除用户信息（实际项目中这里应该清除token等）
          uni.clearStorageSync()

          // 更新登录状态
          isLoggedIn.value = false

          uni.showToast({
            title: '已退出登录',
            icon: 'none'
          })
        } else {
          console.log('用户取消退出登录')
        }
      }
    })
  } else {
    // 登录方法（模拟）
    // 这里应该调用实际的登录接口
    // 模拟登录成功
    uni.setStorageSync('token', 'fake-token')
    isLoggedIn.value = true

    uni.showToast({
      title: '登录成功',
      icon: 'success'
    })
  }
}

const toModifyPhone = () => {
  uni.navigateTo({
    url: '/pages/modify-phone/index',
    animationType:'slide-in-right',
    animationDuration:300
  })
}

const toModifyPassword = () => {
  uni.navigateTo({
    url: '/pages/modify-password/index',
    animationType:'slide-in-right',
    animationDuration:300
  })
}

const toFeedback = () => {
  uni.navigateTo({
    url: '/pages/feedback/index',
    animationType:'slide-in-right',
    animationDuration:300
  })
}

const toLogReport = () => {
  uni.navigateTo({
    url: '/pages/log-report/index',
    animationType:'slide-in-right',
    animationDuration:300
  })
}

// 扫一扫功能
const scanQRCode = () => {
  uni.scanCode({
    success: (res) => {
      console.log('扫描结果：', res);
      uni.showModal({
        title: '扫描结果',
        content: res.result,
        showCancel: false,
        confirmText: '确定'
      });
    },
    fail: (err) => {
      console.error('扫描失败：', err);
      uni.showToast({
        title: '扫描失败，请重试',
        icon: 'error'
      });
    }
  });
}

// 跳转到免责申明页面
const toDisclaimer = () => {
  uni.navigateTo({
    url: '/pages/disclaimer/index',
    animationType:'slide-in-right',
    animationDuration:300
  })
}
</script>