优化

pages/login/index.vue

@@ -102,7 +102,7 @@ const onLogin = async() => {
       });
       
 	  uni.switchTab({
-	  	url:'/pages/index/index'
+	  	url:'/pages/mine/index'
 	  })
       // 延迟一点时间再关闭弹窗，让用户看到成功提示
       setTimeout(() => {
@@ -400,27 +400,28 @@ const emit = defineEmits(['close', 'success']);
 </script>
 
 <template>
-  <view class="login-container">
+  <view class="h-[120vh] p-4 min-h-screen bg-white flex flex-col justify-center">
     <!-- 标题 -->
-    <view class="login-header">
+    <view class="mb-12 mt-20 text-center">
-      <text class="title">欢迎登录</text>
+		<image src="/static/tabbar/find.png" class="w-20 h-20 mb-8" mode="aspectFit"></image>
-      <text class="subtitle">请使用您的账号信息登录</text>
+      <text class="block text-3xl font-bold text-gray-800 mb-4">WELCOME BACK</text>
+      <text class="text-sm text-gray-500">Sign in to connect with Sweekar</text>
     </view>
 
     <!-- 邮箱输入 -->
-    <view class="input-group">
+    <view class="mb-8">
-      <view class="label">邮箱</view>
+      <view class=" flex items-center h-12 bg-gray-100 rounded-lg px-6 gap-1 border border-solid  border-round-theme">
-      <view class="input-wrapper">
+		  <u-icon name="email" class="h-10" color="black" bold="true"></u-icon>
         <input 
-          class="input-field" 
+          class="w-full text-base text-gray-800 bg-transparent" 
-          type="text" 
+          type="email" 
-          placeholder="请输入邮箱" 
+          placeholder="Email Address" 
           v-model="email"
           @input="onInputChange('email')"
         />
         <view 
           v-if="email" 
-          class="clear-btn"
+          class="absolute right-6 w-8 h-8 flex items-center justify-center bg-gray-400 rounded-full text-black font-bold"
           @tap="clearInput('email')"
         >
           ×
@@ -429,19 +430,20 @@ const emit = defineEmits(['close', 'success']);
     </view>
 
     <!-- 密码输入 -->
-    <view class="input-group">
+    <view class="mb-8">
-      <view class="label">密码</view>
+      
-      <view class="input-wrapper">
+      <view class=" flex items-center h-12 bg-gray-100 rounded-lg px-6 gap-1 border border-solid  border-round-theme">
+		  <u-icon name="lock" class="h-10" color="black" bold="true"></u-icon>
         <input 
-          class="input-field" 
+          class="w-full text-base text-gray-800 bg-transparent" 
           type="password" 
-          placeholder="请输入密码" 
+          placeholder="Password" 
           v-model="password"
           @input="onInputChange('password')"
         />
         <view 
           v-if="password" 
-          class="clear-btn"
+          class="absolute right-6 w-8 h-8 flex items-center justify-center bg-gray-400 rounded-full text-white font-bold"
           @tap="clearInput('password')"
         >
           ×
@@ -450,39 +452,38 @@ const emit = defineEmits(['close', 'success']);
     </view>
 
     <!-- 忘记密码链接 -->
-    <view class="links-section">
+    <view class="flex justify-end mb-8">
-      <text class="link" @tap="forgetPassword">忘记密码？</text>
+      <text class="text-blue-500 text-sm" @tap="forgetPassword">Forget Password?</text>
     </view>
 
     <!-- 登录按钮 -->
-    <button 
+    <view
-      class="login-btn" 
+      class="w-full  h-12 bg-theme  rounded-lg text-white text-xl  flex items-center justify-center "
-      :class="{ 'btn-loading': isLoading }"
-      @tap="onLogin"
       :disabled="isLoading"
+      @click="onLogin"
     >
-      <text v-if="!isLoading">登录</text>
+      <text v-if="!isLoading">SIGN IN</text>
-      <view v-else class="loading-spinner"></view>
+      <view v-else class="w-8 h-8 border-2 border-white border-t-transparent rounded-full animate-spin"></view>
-    </button>
+    </view>
 
     <!-- 注册链接 -->
-    <view class="register-section">
+    <view class="flex justify-center items-center my-8 text-gray-500 text-sm">
-      <text>还没有账号？</text>
+      <text>Don't have an account?</text>
-      <text class="register-link" @tap="showRegisterPopup">立即注册</text>
+      <text class="text-green-500 ml-2" @tap="showRegisterPopup">立即注册</text>
     </view>
 
     <!-- 同意条款 -->
-    <view class="agreement-section">
+    <view class="mt-auto text-center">
-      <label class="agreement-label">
+      <label class="flex items-center justify-center text-xs text-gray-500 leading-loose">
         <checkbox 
-          class="checkbox" 
+          class="scale-75 mr-2" 
           :checked="checked" 
           @change="onChange"
         />
         我已阅读并同意
-        <text class="agreement-link" @tap="showAgreement">《用户协议》</text>
+        <text class="text-green-500 underline" @tap="showAgreement">《用户协议》</text>
         和
-        <text class="agreement-link" @tap="showAgreement">《隐私政策》</text>
+        <text class="text-green-500 underline" @tap="showAgreement">《隐私政策》</text>
       </label>
     </view>
   </view>
@@ -497,25 +498,25 @@ const emit = defineEmits(['close', 'success']);
     :closeable="true"
     @close="hideRegisterPopup"
   >
-    <view class="register-popup">
+    <view class="p-4 min-h-screen bg-white">
-      <view class="register-header">
+      <view class="mb-12 text-center">
-        <text class="register-title">用户注册</text>
+        <text class="block text-2xl font-bold text-gray-800 mb-4">用户注册</text>
-        <text class="register-subtitle">请填写注册信息</text>
+        <text class="text-lg text-gray-500">请填写注册信息</text>
       </view>
 
       <!-- 注册邮箱输入 -->
-      <view class="input-group">
+      <view class="mb-8">
-        <view class="label">邮箱</view>
+        <view class="text-sm text-gray-700 mb-4 ml-2">邮箱</view>
-        <view class="input-wrapper">
+        <view class="relative flex items-center h-12 bg-gray-100 rounded-full px-6">
           <input 
-            class="input-field" 
+            class="w-full text-base text-gray-800 bg-transparent" 
             type="text" 
             placeholder="请输入邮箱" 
             v-model="registerEmail"
           />
           <view 
             v-if="registerEmail" 
-            class="clear-btn"
+            class="absolute right-6 w-8 h-8 flex items-center justify-center bg-gray-400 rounded-full text-white font-bold"
             @tap="clearInput('registerEmail')"
           >
             ×
@@ -524,25 +525,25 @@ const emit = defineEmits(['close', 'success']);
       </view>
 
       <!-- 验证码输入 -->
-      <view class="input-group">
+      <view class="mb-8">
-        <view class="label">验证码</view>
+        <view class="text-sm text-gray-700 mb-4 ml-2">验证码</view>
-        <view class="input-wrapper">
+        <view class="relative flex items-center h-12 bg-gray-100 rounded-full px-6">
           <input 
-            class="input-field" 
+            class="w-full text-base text-gray-800 bg-transparent pr-32" 
             type="text" 
             placeholder="请输入验证码" 
             v-model="verificationCode"
           />
           <view 
             v-if="verificationCode" 
-            class="clear-btn"
+            class="absolute right-36 w-8 h-8 flex items-center justify-center bg-gray-400 rounded-full text-white font-bold"
             @tap="clearInput('verificationCode')"
           >
             ×
           </view>
         </view>
         <button 
-          class="code-btn" 
+          class="absolute right-2 top-1/2 transform -translate-y-1/2 h-10 px-4 bg-gradient-to-r from-green-500 to-green-400 text-white text-xs rounded-full disabled:bg-gray-400 disabled:text-gray-300"
           :disabled="codeBtnDisabled" 
           @tap="getVerificationCode"
         >
@@ -551,18 +552,18 @@ const emit = defineEmits(['close', 'success']);
       </view>
 
       <!-- 注册密码输入 -->
-      <view class="input-group">
+      <view class="mb-8">
-        <view class="label">密码</view>
+        <view class="text-sm text-gray-700 mb-4 ml-2">密码</view>
-        <view class="input-wrapper">
+        <view class="relative flex items-center h-12 bg-gray-100 rounded-full px-6">
           <input 
-            class="input-field" 
+            class="w-full text-base text-gray-800 bg-transparent" 
             type="password" 
             placeholder="请输入密码" 
             v-model="registerPassword"
           />
           <view 
             v-if="registerPassword" 
-            class="clear-btn"
+            class="absolute right-6 w-8 h-8 flex items-center justify-center bg-gray-400 rounded-full text-white font-bold"
             @tap="clearInput('registerPassword')"
           >
             ×
@@ -571,18 +572,18 @@ const emit = defineEmits(['close', 'success']);
       </view>
 
       <!-- 确认密码输入 -->
-      <view class="input-group">
+      <view class="mb-8">
-        <view class="label">确认密码</view>
+        <view class="text-sm text-gray-700 mb-4 ml-2">确认密码</view>
-        <view class="input-wrapper">
+        <view class="relative flex items-center h-12 bg-gray-100 rounded-full px-6">
           <input 
-            class="input-field" 
+            class="w-full text-base text-gray-800 bg-transparent" 
             type="password" 
             placeholder="请再次输入密码" 
             v-model="confirmPassword"
           />
           <view 
             v-if="confirmPassword" 
-            class="clear-btn"
+            class="absolute right-6 w-8 h-8 flex items-center justify-center bg-gray-400 rounded-full text-white font-bold"
             @tap="clearInput('confirmPassword')"
           >
             ×
@@ -592,248 +593,26 @@ const emit = defineEmits(['close', 'success']);
 
       <!-- 注册按钮 -->
       <button 
-        class="register-submit-btn" 
+        class="w-full h-12 bg-gradient-to-r from-green-500 to-green-400 rounded-full text-white text-xl font-bold flex items-center justify-center mt-5"
         @tap="onRegister"
       >
         注册
       </button>
 
       <!-- 同意条款 -->
-      <view class="agreement-section">
+      <view class="mt-auto text-center">
-        <label class="agreement-label">
+        <label class="flex items-center justify-center text-xs text-gray-500 leading-loose">
           <checkbox 
-            class="checkbox" 
+            class="scale-75 mr-2" 
             :checked="checked" 
             @change="onChange"
           />
           我已阅读并同意
-          <text class="agreement-link" @tap="showAgreement">《用户协议》</text>
+          <text class="text-green-500 underline" @tap="showAgreement">《用户协议》</text>
           和
-          <text class="agreement-link" @tap="showAgreement">《隐私政策》</text>
+          <text class="text-green-500 underline" @tap="showAgreement">《隐私政策》</text>
         </label>
       </view>
     </view>
   </u-popup>
 </template>
-
-<style lang="scss" scoped>
-.login-container {
-  padding: 40rpx;
-  min-height: 600rpx;
-  display: flex;
-  flex-direction: column;
-}
-
-.login-header {
-  margin-bottom: 50rpx;
-  text-align: center;
-}
-
-.title {
-  display: block;
-  font-size: 40rpx;
-  font-weight: bold;
-  color: #333;
-  margin-bottom: 16rpx;
-}
-
-.subtitle {
-  font-size: 28rpx;
-  color: #999;
-}
-
-.input-group {
-  margin-bottom: 30rpx;
-  position: relative;
-}
-
-.label {
-  font-size: 28rpx;
-  color: #333;
-  margin-bottom: 16rpx;
-  padding-left: 20rpx;
-}
-
-.input-wrapper {
-  display: flex;
-  align-items: center;
-  height: 88rpx;
-  background-color: #f8f8f8;
-  border-radius: 44rpx;
-  padding: 0 30rpx;
-  position: relative;
-}
-
-.input-field {
-  flex: 1;
-  font-size: 28rpx;
-  color: #333;
-}
-
-.clear-btn {
-  position: absolute;
-  right: 30rpx;
-  width: 40rpx;
-  height: 40rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #ccc;
-  border-radius: 50%;
-  color: white;
-  font-size: 24rpx;
-  font-weight: bold;
-}
-
-.links-section {
-  display: flex;
-  justify-content: flex-end;
-  margin-bottom: 30rpx;
-}
-
-.link {
-  font-size: 26rpx;
-  color: #00a88e;
-}
-
-.login-btn {
-  width: 100%;
-  height: 88rpx;
-  background: linear-gradient(90deg, #00a88e, #00c4a2);
-  border-radius: 44rpx;
-  color: white;
-  font-size: 32rpx;
-  font-weight: bold;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: 20rpx;
-  border: none;
-  transition: opacity 0.3s;
-  
-  &.btn-loading {
-    opacity: 0.7;
-  }
-  
-  &:active {
-    opacity: 0.8;
-  }
-}
-
-.loading-spinner {
-  width: 30rpx;
-  height: 30rpx;
-  border: 3rpx solid rgba(255, 255, 255, 0.3);
-  border-top: 3rpx solid white;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-.register-section {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 30rpx 0;
-  font-size: 26rpx;
-  color: #666;
-}
-
-.register-link {
-  color: #00a88e;
-  margin-left: 10rpx;
-}
-
-.agreement-section {
-  margin-top: auto;
-  text-align: center;
-}
-
-.agreement-label {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 24rpx;
-  color: #666;
-  line-height: 1.5;
-}
-
-.checkbox {
-  transform: scale(0.7);
-  margin-right: 8rpx;
-}
-
-.agreement-link {
-  color: #00a88e;
-  text-decoration: underline;
-}
-
-.register-popup {
-  padding: 40rpx;
-  min-height: 600rpx;
-  display: flex;
-  flex-direction: column;
-}
-
-.register-header {
-  margin-bottom: 50rpx;
-  text-align: center;
-}
-
-.register-title {
-  display: block;
-  font-size: 40rpx;
-  font-weight: bold;
-  color: #333;
-  margin-bottom: 16rpx;
-}
-
-.register-subtitle {
-  font-size: 28rpx;
-  color: #999;
-}
-
-.code-btn {
-  position: absolute;
-  right: 10rpx;
-  top: 70%;
-  transform: translateY(-50%);
-  height: 60rpx;
-  padding: 0 20rpx;
-  background: linear-gradient(90deg, #00a88e, #00c4a2);
-  color: white;
-  font-size: 24rpx;
-  border-radius: 30rpx;
-  border: none;
-  z-index: 10;
-  
-  &:disabled {
-    background: #ccc;
-    color: #999;
-  }
-}
-
-.register-submit-btn {
-  width: 100%;
-  height: 88rpx;
-  background: linear-gradient(90deg, #00a88e, #00c4a2);
-  border-radius: 44rpx;
-  color: white;
-  font-size: 32rpx;
-  font-weight: bold;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: 20rpx;
-  border: none;
-  transition: opacity 0.3s;
-  
-  &:active {
-    opacity: 0.8;
-  }
-}
-</style>

pages/mine/api.js

@@ -1,7 +1,26 @@
 import { get, post, put, dele } from '@/utils/request';
 /**
- * @desc 获取产品列表
+ * @desc 上传头像
  */
-export const getProducts = (params) => {
+export const uploadAvatar = (params) => {
-  return get('/api/products/', params)
+  return post('/app-api/member/user/upload-avatar', params)
-}
+}
+/**
+ * @desc 昵称修改
+ */
+export const updateNickname = (params) => {
+  return put('/app-api/member/user/update-nickname', params)
+}
+/**
+ * @desc 用户登出
+ */
+export const userLogout = (params) => {
+  return post('/app-api/member/auth/logout', params)
+}
+/**
+ * @desc 用户个人信息
+ */
+export const getUserInfo = (params) => {
+  return get('/app-api/member/user/get', params)
+}
+

pages/mine/index.vue

@@ -4,7 +4,7 @@ import { onLoad, onShow, onReady, onHide, onPullDownRefresh } from '@dcloudio/un
 import CustomTabBar from '@/components/CustomTabBar.vue'
 import { getSystemSafeArea, getSystemInfo, isEmpty, showToast, showLoadingToast, closeToast } from '@/common/common.js';
 import LoginPopup from '@/components/login.vue';
-import { getProducts } from './api.js';
+import { getUserInfo } from './api.js';
 import { useUserStore } from '@/store/user.js';
 
 import { useI18n } from 'vue-i18n';
@@ -35,20 +35,7 @@ const toggleLoginPopup = () => {
   showLogin.value = !showLogin.value;
 };
 
-// 关闭登录弹窗
-const closeLoginPopup = () => {
-  showLogin.value = false;
-};
 
-// 登录成功回调
-const onLoginSuccess = () => {
-  closeLoginPopup();
-  // 可以在这里执行登录成功后的操作
-  uni.showToast({
-    title: '登录成功',
-    icon: 'success'
-  });
-};
 
 /**
  * @desc 获取可视内容高度
@@ -66,16 +53,20 @@ const toDetailPage = (productId) => {
   });
 };
 
+const userData = ref();
 //获取首页数据
-const getProductList = async()=>{
+const getUserInformation = async()=>{
-	const res = await getProducts();
+	const res = await getUserInfo();
+	
+	userData.value = res.data;
+	console.log('data',userData.value);
+	
+	
 	
-	productData.value=res.data;
-	console.log("商品数据",productData.value);
 }
 
 onLoad(()=>{
-	// getProductList();
+	getUserInformation();
 	
 });
 
@@ -95,6 +86,7 @@ const handleBook = (productId) => {
  * @desc 跳转至登录页面
  */
 const toLoginPage = (productId) => {
+	userStore.logout()
   uni.navigateTo({
     url: '/pages/login/index',
   });
@@ -106,10 +98,17 @@ onMounted(() => {
   //   showLogin.value = true;
   // }, 1000);
 });
+
+// 测试缓存中的数据
+
+const test = () =>{
+	console.log('登录数据',userStore.token);
+}
+
 </script>
 
 <template>
-  <view class="h-[100vh] bg-[#fff]">
+  <view class="bg-[#fff]">
     <!-- 页面内容区域 -->
     <view class="flex flex-col">
       <!-- 个人页头部区域 -->
@@ -119,6 +118,7 @@ onMounted(() => {
             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>
@@ -194,23 +194,7 @@ onMounted(() => {
       </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>
@@ -247,9 +231,5 @@ onMounted(() => {
   align-items: center;
 }
 
-.popup-content {
+
-  padding: 20rpx;
-  max-height: 80vh;
-  overflow-y: auto;
-}
 </style>

utils/request.js

@@ -48,6 +48,7 @@ export const request = (options = {}) => {
         data: requestData, // 对象 or 字符串
         header: {
           'Content-Type': contentType,
+		  'Authorization': 'Bearer ' + userStore.token,
           // version: appVersion, // 如需可加
           ...options.header,
         },