更新用户登录功能

miniprogram/app.ts

@@ -1,6 +1,7 @@
 // app.ts
 App<IAppOption>({
-  globalData: {},
+  globalData: {
+  },
   onLaunch() {
     // 展示本地存储能力
     const logs = wx.getStorageSync('logs') || []

miniprogram/env.js

@@ -0,0 +1,7 @@
+const env = wx.getAccountInfoSync().miniProgram.envVersion; // 获取当前环境（develop/trial/release）
+const config = {
+  develop: { apiBaseUrl: 'http://localhost:9096' }, // 开发环境（本地调试）
+  trial: { apiBaseUrl: 'https://test-api.example.com' }, // 体验版（测试环境）
+  release: { apiBaseUrl: 'https://api.example.com' } // 正式版（生产环境）
+};
+export default config[env];

miniprogram/pages/user-login/user-login.json

@@ -2,6 +2,14 @@
   "usingComponents": {
     "t-button": "tdesign-miniprogram/button/button",
     "t-avatar": "tdesign-miniprogram/avatar/avatar",
-  "t-avatar-group": "tdesign-miniprogram/avatar-group/avatar-group"
-  }
+    "t-avatar-group": "tdesign-miniprogram/avatar-group/avatar-group",
+    "t-toast": "tdesign-miniprogram/toast/toast",
+    "t-icon": "tdesign-miniprogram/icon/icon"
+  },
+  "navigationBarTitleText": "登录",
+    "navigationBarBackgroundColor": "#f5f7fa",
+    "navigationBarTextStyle": "black",
+    "backgroundColor": "#f5f7fa",
+    "navigationStyle": "custom",
+    "navigationBarTransparent": true
 }

miniprogram/pages/user-login/user-login.ts

@@ -1,14 +1,35 @@
+import envConfig from '../../env';
+import Toast from 'tdesign-miniprogram/toast/index';
 Component({
   data: {
     image: 'https://tdesign.gtimg.com/mobile/demos/avatar1.png',
   },
   methods: {
-    wxPhone(e: { detail: any; }){
-      console.log("授权回调结果：", e.detail);
+    async getLoginCode() {
+      return new Promise((resolve, reject) => {
+        wx.login({
+          success: (res) => {
+            if (res.code) {
+              resolve(res.code); // 返回获取到的code
+            } else {
+              reject(new Error('获取登录凭证失败: ' + res.errMsg));
+            }
+          },
+          fail: (err) => {
+            reject(err);
+          }
+        });
+      });
+    },
+    async wxPhone(e: { detail: any; }){
+      console.log("授权回调结果：", e);
       if (e.detail.errMsg === "getPhoneNumber:ok") {
-        const { encryptedData, iv, code } = e.detail;
+        const { encryptedData, iv} = e.detail;
+        console.log("encryptedData:",encryptedData)
+        const code = await this.getLoginCode();
+        console.log("获得的code为：",code)
         wx.request({
-          url: "http://localhost:9096/user/login",
+          url: `${envConfig.apiBaseUrl}/user/login`,
           method: "POST",
           data: {
             encryptedData,
@@ -16,10 +37,17 @@ Component({
             code,
           },
           success(res) {
-            if (res.data.success) {
+            console.log(res)
+            if (res.data.code == "20001") {
+              Toast({
+                selector: '#t-toast',
+                message: '登录成功',
+                theme: 'success',
+                direction: 'column',
+              });
               // 登录成功，存储用户信息并跳转首页
-              wx.setStorageSync("userInfo", res.data.userInfo);
-              wx.navigateTo({ url: "/pages/index/index" });
+              //wx.setStorageSync("userInfo", res.data.userInfo);
+              //wx.navigateTo({ url: "/pages/index/index" });
             } else {
               wx.showToast({ title: "登录失败", icon: "none" });
             }
@@ -32,6 +60,24 @@ Component({
         // 用户拒绝授权
         wx.showToast({ title: "请允许授权以完成登录", icon: "none" });
       }
+    },
+    onBack() {
+      // 获取当前页面栈
+      const pages = getCurrentPages();
+      
+      // 页面栈长度大于1，说明有上一个页面
+      if (pages.length > 1) {
+        // 调用微信API返回上一页，delta: 1 表示返回一层
+        wx.navigateBack({
+          delta: 1
+        });
+      } else {
+        // 如果没有上一页（比如从首页直接进入登录页），可跳转到默认页面（如首页）
+        wx.switchTab({
+          url: '/pages/index/index' // 替换为你的首页路径
+        });
+      }
     }
   },
+  
 })

miniprogram/pages/user-login/user-login.wxml

@@ -1,8 +1,104 @@
-<view class="avatar-box">
-  <t-avatar class="avatar-example" image="{{image}}"  size="100px"/>
-</view>
+<view class="login-container">
 
-<view class="button">
-  <t-button theme="primary" size="large" block open-type="getPhoneNumber" getphonenumber="wxPhone">授权手机号登录</t-button>
-  <t-button size="large" block>手机号登录</t-button>
+
+  <view class="custom-nav">
+        <view class="back-btn" bindtap="onBack">
+          <t-icon name="arrow-left" size="48rpx" data-name="{{item}}" bind:click="onIconTap" />
+        </view>
+    </view>
+    <!-- 装饰性背景元素 -->
+    <view class="bg-decoration bg-decoration-1"></view>
+    <view class="bg-decoration bg-decoration-2"></view>
+
+    <!-- 登录卡片 -->
+    <view class="login-card">
+        <!-- 顶部品牌区域 -->
+        <view class="brand-area">
+            <view class="brand-icon">
+                <icon type="success" size="36" color="#3B82F6"></icon>
+            </view>
+            <text class="brand-title">欢迎回来</text>
+            <text class="brand-desc">请登录您的账号继续使用</text>
+        </view>
+
+        <!-- 头像区域 -->
+        <view class="avatar-area">
+            <view class="avatar-wrapper">
+                <image 
+                    class="avatar" 
+                    src="http://localhost:9005/system/login/微信截图_20250807220916.png" 
+                    mode="widthFix"
+                    lazy-load
+                ></image>
+                <view class="avatar-edit">
+                    <icon type="camera" size="16" color="#fff"></icon>
+                </view>
+            </view>
+        </view>
+
+        <!-- 登录按钮区域 -->
+        <view class="button-group">
+            <!-- 微信授权登录按钮 -->
+            <button 
+                class="login-btn wechat-btn" 
+                hover-class="btn-hover"
+                open-type="getPhoneNumber" bindgetphonenumber="wxPhone"
+            >
+                <icon class="btn-icon" type="success" size="20"></icon>
+                <text class="btn-text">微信授权登录</text>
+            </button>
+            <t-toast id="t-toast" />
+
+            <!-- 手机号登录按钮 -->
+            <button 
+                class="login-btn phone-btn" 
+                bindtap="goPhoneLogin"
+                hover-class="btn-hover"
+            >
+                <icon class="btn-icon" type="phone" size="20"></icon>
+                <text class="btn-text">手机号登录</text>
+            </button>
+        </view>
+
+        <!-- 其他登录方式 -->
+        <view class="other-login">
+            <view class="divider">
+                <view class="divider-line"></view>
+                <text class="divider-text">其他登录方式</text>
+                <view class="divider-line"></view>
+            </view>
+            
+            <view class="other-buttons">
+                <button 
+                    class="other-btn" 
+                    hover-class="other-btn-hover"
+                    bindtap="loginWithQQ"
+                >
+                    <icon type="qq" size="24"></icon>
+                </button>
+                <button 
+                    class="other-btn" 
+                    hover-class="other-btn-hover"
+                    bindtap="loginWithWeibo"
+                >
+                    <icon type="weibo" size="24"></icon>
+                </button>
+                <button 
+                    class="other-btn" 
+                    hover-class="other-btn-hover"
+                    bindtap="loginWithEmail"
+                >
+                    <icon type="mail" size="24"></icon>
+                </button>
+            </view>
+        </view>
+
+        <!-- 底部链接 -->
+        <view class="footer">
+            <text class="footer-text">登录即表示同意我们的</text>
+            <navigator url="/pages/agreement/agreement" class="footer-link">用户协议</navigator>
+            <text class="footer-text">和</text>
+            <navigator url="/pages/privacy/privacy" class="footer-link">隐私政策</navigator>
+        </view>
+    </view>
 </view>

miniprogram/pages/user-login/user-login.wxss

@@ -1,15 +1,234 @@
-.avatar-box{
-  width: 100vw;
-  height: 30vh;
+.login-container {
+  min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
+  padding: 0 30rpx;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  position: relative;
+}
+.custom-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: var(--status-bar-height); /* 适配状态栏高度 */
+  padding-top: var(--status-bar-height);
+  height: 44px; /* 导航栏高度 */
+  display: flex;
+  align-items: center;
+  padding-left: 16rpx;
+  background-color: transparent; /* 透明背景，与页面融合 */
+  z-index: 99; /* 确保在装饰元素上方 */
 }
 
-.button {
-  margin: 0 32rpx;
+.back-btn {
+  width: 44px;
+  height: 44px;
   display: flex;
-  flex-direction: column; /* 垂直排列子元素 */
-  align-items: center;     /* 水平居中子元素 */
-  gap: 2vh;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  margin-top: 12vh;
+  margin-left: 3vw;
+  background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); /* 轻微阴影 */
+}
+
+/* 背景装饰 */
+.bg-decoration {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(60rpx);
+  opacity: 0.3;
+}
+
+.bg-decoration-1 {
+  width: 400rpx;
+  height: 400rpx;
+  background-color: #3B82F6;
+  top: 100rpx;
+  left: 50rpx;
+}
+
+.bg-decoration-2 {
+  width: 500rpx;
+  height: 500rpx;
+  background-color: #10B981;
+  bottom: 50rpx;
+  right: 50rpx;
+}
+
+/* 登录卡片 */
+.login-card {
+  width: 100%;
+  max-width: 600rpx;
+  background-color: #fff;
+  border-radius: 30rpx;
+  padding: 60rpx 40rpx;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
+  position: relative;
+  z-index: 10;
+}
+
+/* 品牌区域 */
+.brand-area {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 60rpx;
+}
+
+.brand-icon {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 50%;
+  background-color: rgba(59, 130, 246, 0.1);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20rpx;
+}
+
+.brand-title {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 10rpx;
+}
+
+.brand-desc {
+  font-size: 24rpx;
+  color: #666;
+}
+
+/* 头像区域 */
+.avatar-area {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 60rpx;
+}
+
+.avatar-wrapper {
+  position: relative;
+}
+
+.avatar {
+  width: 160rpx;
+  height: 160rpx;
+  border-radius: 50%;
+  border: 6rpx solid #fff;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+}
+
+.avatar-edit {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 48rpx;
+  height: 48rpx;
+  border-radius: 50%;
+  background-color: #10B981;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
+}
+
+/* 按钮区域 */
+.button-group {
+  display: flex;
+  flex-direction: column;
+  gap: 24rpx;
+  margin-bottom: 60rpx;
+}
+
+.login-btn {
+  width: 100%;
+  height: 90rpx;
+  border-radius: 45rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 28rpx;
+  padding: 0;
+  line-height: 1;
+}
+
+.wechat-btn {
+  background-color: #07C160;
+  color: #fff;
+}
+
+.phone-btn {
+  background-color: #f5f5f5;
+  color: #333;
+}
+
+.btn-icon {
+  margin-right: 16rpx;
+}
+
+.btn-hover {
+  transform: scale(0.98);
+}
+
+/* 其他登录方式 */
+.other-login {
+  margin-bottom: 60rpx;
+}
+
+.divider {
+  display: flex;
+  align-items: center;
+  margin-bottom: 40rpx;
+}
+
+.divider-line {
+  flex: 1;
+  height: 1rpx;
+  background-color: #eee;
+}
+
+.divider-text {
+  padding: 0 20rpx;
+  font-size: 24rpx;
+  color: #999;
+}
+
+.other-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 60rpx;
+}
+
+.other-btn {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  background-color: #f5f5f5;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+}
+
+.other-btn-hover {
+  background-color: #eee;
+}
+
+/* 底部链接 */
+.footer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 8rpx;
+  font-size: 22rpx;
+  color: #999;
+}
+
+.footer-link {
+  color: #3B82F6;
+  text-decoration: underline;
 }