初始化登录功能，注册功能

pages/mine/index.vue

@@ -3,7 +3,7 @@ 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-popup.vue';
+import LoginPopup from '@/components/login.vue';
 import { getProducts } from './api.js';
 import { useUserStore } from '@/store/user.js';
 
@@ -29,6 +29,27 @@ const productData = ref();
 const scrollHeight = ref(0); //scroll-view滚动高度
 
 const pageView = ref({});
+
+// 控制登录弹窗显示
+const toggleLoginPopup = () => {
+  showLogin.value = !showLogin.value;
+};
+
+// 关闭登录弹窗
+const closeLoginPopup = () => {
+  showLogin.value = false;
+};
+
+// 登录成功回调
+const onLoginSuccess = () => {
+  closeLoginPopup();
+  // 可以在这里执行登录成功后的操作
+  uni.showToast({
+    title: '登录成功',
+    icon: 'success'
+  });
+};
+
 /**
  * @desc 获取可视内容高度
  */
@@ -36,11 +57,6 @@ const getContentHeight = (e) => {
   pageView.value = e;
 };
 
-
-
-
-
-
 /**
  * @desc 跳转至详情页面
  */
@@ -49,6 +65,7 @@ const toDetailPage = (productId) => {
     url: '/pages/product/detail',
   });
 };
+
 //获取首页数据
 const getProductList = async()=>{
 	const res = await getProducts();
@@ -57,7 +74,6 @@ const getProductList = async()=>{
 	console.log("商品数据",productData.value);
 }
 
-
 onLoad(()=>{
 	// getProductList();
 	
@@ -65,7 +81,6 @@ onLoad(()=>{
 
 // 模拟数据
 
-
 /**
  * @desc 处理预订事件
  */
@@ -76,14 +91,129 @@ const handleBook = (productId) => {
   });
 };
 
+/**
+ * @desc 跳转至登录页面
+ */
+const toLoginPage = (productId) => {
+  uni.navigateTo({
+    url: '/pages/login/index',
+  });
+};
+
+onMounted(() => {
+  // 示例：在页面加载完成后自动显示登录弹窗
+  // setTimeout(() => {
+  //   showLogin.value = true;
+  // }, 1000);
+});
 </script>
 
 <template>
-  <view class="h-[100vh] bg-[#9C032D]">
-	  
-	  <CustomTabBar />
+  <view class="h-[100vh] 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;"
+          />
+          <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>
+    
+    <!-- 登录弹窗 - 优化版 -->
+    <u-popup 
+      v-model:show="showLogin" 
+      mode="center" 
+      :border-radius="20"
+      :safe-area-inset-bottom="false"
+      width="80%"
+      :closeable="true"
+      @close="closeLoginPopup"
+    >
+      <view class="popup-content">
+        <LoginPopup 
+          @close="closeLoginPopup"
+          @success="onLoginSuccess"
+        />
+      </view>
+    </u-popup>
+    
+    <CustomTabBar />
   </view>
-  
 </template>
 
 <style scoped lang="scss">
@@ -110,4 +240,16 @@ const handleBook = (productId) => {
     flex: 1;
   }
 }
+
+.profile-header {
+  min-height: 200rpx;
+  display: flex;
+  align-items: center;
+}
+
+.popup-content {
+  padding: 20rpx;
+  max-height: 80vh;
+  overflow-y: auto;
+}
 </style>