sweekar-app/pages/mine/index.vue

<script setup>
import { ref, onMounted, getCurrentInstance, nextTick } from 'vue';
import { onLoad, onShow, onReady, onHide, onPullDownRefresh } from '@dcloudio/uni-app';
import CustomTabBar from '@/components/CustomTabBar.vue'
import { getSystemSafeArea, getSystemInfo, isEmpty, showToast, showLoadingToast, closeToast } from '@/common/common.js';
import LoginPopup from '@/components/login.vue';
import { getUserInfo } from './api.js';
import { useUserStore } from '@/store/user.js';

import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n();

const props = defineProps(['status']);
const { proxy } = getCurrentInstance();

const userStore = useUserStore();

const tabList = ref([]); //tab列表
const tabsIndex = ref(0); //当前选中的tab索引
// const modelTypeList = ref([]);
const tabsLeft = ref(0); //下划线移动的距离
const finished = ref(false); //数据是否全部加载完成
const windowWidth = ref(0); //tab元素的宽度
const orderRows = ref([]); //订单列表
const showLogin = ref(false); //显示登录
const triggered = ref(false); //是否下拉刷新状态，true为是
const loading = ref(false); // 添加loading状态
const productData = ref();
const scrollHeight = ref(0); //scroll-view滚动高度

const pageView = ref({});

// 控制登录弹窗显示
const toggleLoginPopup = () => {
  showLogin.value = !showLogin.value;
};



/**
 * @desc 获取可视内容高度
 */
const getContentHeight = (e) => {
  pageView.value = e;
};

/**
 * @desc 跳转至详情页面
 */
const toDetailPage = (productId) => {
  uni.navigateTo({
    url: '/pages/product/detail',
  });
};

const userData = ref();
//获取首页数据
const getUserInformation = async()=>{
	const res = await getUserInfo();
	
	userData.value = res.data;
	console.log('data',userData.value);
	
	
	
}

onLoad(()=>{
	getUserInformation();
	
});

// 模拟数据

/**
 * @desc 处理预订事件
 */
const handleBook = (productId) => {
  // 这里可以添加预订逻辑，比如跳转到详情页
  uni.navigateTo({
    url: `/pages/product/detail?id=${productId}`,
  });
};

/**
 * @desc 跳转至登录页面
 */
const toLoginPage = (productId) => {
	userStore.logout()
  uni.navigateTo({
    url: '/pages/login/index',
  });
};

onMounted(() => {
  // 示例：在页面加载完成后自动显示登录弹窗
  // setTimeout(() => {
  //   showLogin.value = true;
  // }, 1000);
});

// 测试缓存中的数据

const test = () =>{
	console.log('登录数据',userStore.token);
}

</script>

<template>
  <view class="bg-[#fff]">
    <!-- 页面内容区域 -->
    <view class="flex flex-col">
      <!-- 个人页头部区域 -->
      <view class="profile-header p-4 bg-gradient-to-r from-blue-500 to-purple-600 text-white">
        <view class="flex items-center">
          <image 
            src="/static/images/avatar.png" 
            class="w-16 h-16 rounded-full border-2 border-white mr-4"
            style="background-color: #ddd;"
			@click="test()"
          />
          <view class="flex-1">
            <view class="font-bold text-lg">用户昵称</view>
            <view class="text-sm opacity-80">ID: 123456789</view>
          </view>
          <button 
            class="bg-white text-blue-600 px-4 py-2 rounded-full text-sm font-medium"
			@click="toLoginPage"
            
          >
            {{ userStore.isLogin ? '退出登录' : '登录' }}
          </button>
        </view>
      </view>
      
      <!-- 功能列表 -->
      <view class="p-4">
        <view class="bg-white rounded-xl shadow-sm p-4 mb-4">
          <view class="font-semibold text-lg mb-3">个人中心</view>
          
          <view class="space-y-3">
            <view class="flex items-center justify-between p-3 border-b border-gray-100 last:border-0">
              <view class="flex items-center">
                <view class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                  <text class="text-blue-600 text-sm">👤</text>
                </view>
                <text>个人信息</text>
              </view>
              <text class="text-gray-400 text-sm">></text>
            </view>
            
            <view class="flex items-center justify-between p-3 border-b border-gray-100 last:border-0">
              <view class="flex items-center">
                <view class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3">
                  <text class="text-green-600 text-sm">🔒</text>
                </view>
                <text>账户安全</text>
              </view>
              <text class="text-gray-400 text-sm">></text>
            </view>
            
            <view class="flex items-center justify-between p-3 border-b border-gray-100 last:border-0">
              <view class="flex items-center">
                <view class="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center mr-3">
                  <text class="text-yellow-600 text-sm">💬</text>
                </view>
                <text>消息通知</text>
              </view>
              <text class="text-gray-400 text-sm">></text>
            </view>
            
            <view class="flex items-center justify-between p-3 border-b border-gray-100 last:border-0">
              <view class="flex items-center">
                <view class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center mr-3">
                  <text class="text-red-600 text-sm">⚙️</text>
                </view>
                <text>设置</text>
              </view>
              <text class="text-gray-400 text-sm">></text>
            </view>
          </view>
        </view>
        
        <!-- 操作按钮 -->
        <view class="mt-6">
          <button 
            class="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white py-4 rounded-xl font-medium"
            @tap="toggleLoginPopup"
          >
            {{ userStore.isLogin ? '退出登录' : '立即登录' }}
          </button>
        </view>
      </view>
    </view>
    
  
    
    <CustomTabBar />
  </view>
</template>

<style scoped lang="scss">
:deep(.u-count-down__text) {
  color: #ab002d !important;
  font-size: 13px !important;
}

.navigation {
  border-bottom: 1px solid #f2f2f2;
}

.navi-title-center {
  left: 50%;
  transform: translateX(-50%);
}

.line {
  transition: 0.3s all;
}

.search {
  :deep(.u-search) {
    flex: 1;
  }
}

.profile-header {
  min-height: 200rpx;
  display: flex;
  align-items: center;
}


</style>