【私域操盘手】操盘手端UI - 登录页

2025-03-25 10:03:19 +08:00
parent d82d97d160
commit 19306bdb87
16 changed files with 1581 additions and 644 deletions
--- a/Cunkebao/pages/agreement/privacy.vue
+++ b/Cunkebao/pages/agreement/privacy.vue
@@ -175,7 +175,7 @@ export default {

 .date {
  font-size: 24rpx;
-  color: #999999;
+  color: #e9e9e9;
  text-align: center;
  margin-bottom: 60rpx;
 }
--- a/Cunkebao/pages/agreement/user.vue
+++ b/Cunkebao/pages/agreement/user.vue
@@ -128,7 +128,7 @@ export default {

 .date {
  font-size: 24rpx;
-  color: #999999;
+  color: #e9e9e9;
  text-align: center;
  margin-bottom: 60rpx;
 }
--- a/Cunkebao/pages/index/index.vue
+++ b/Cunkebao/pages/index/index.vue
@@ -158,7 +158,7 @@ export default {
  align-items: center;
  padding: 25rpx 30rpx;
  background-color: #fff;
-  border-bottom: 1px solid #e5e5e5;
+  border-bottom: 1px solid #e9e9e9;
  
  .title {
    font-size: 45rpx;
--- a/Cunkebao/pages/login/index.vue
+++ b/Cunkebao/pages/login/index.vue
@@ -1,20 +1,18 @@
 <template>
  <view class="login-container">
    <!-- 登录方式切换 -->
-    <view class="tabs-container">
-      <u-tabs
-        :list="tabsList"
-        :current="current"
-        @change="handleTabChange"
-        activeStyle="color: #4080ff; font-weight: bold; font-size: 36rpx"
-        inactiveStyle="color: #999999; font-size: 36rpx"
-        itemStyle="height: 96rpx; padding: 0 30rpx;"
-        lineColor="#4080ff"
-        lineWidth="48rpx"
-        lineHeight="4rpx"
-        :itemWidth="300"
-      ></u-tabs>
-    </view>
+    <u-tabs
+      :list="tabsList"
+      :current="current"
+      @change="handleTabChange"
+      activeStyle="color: #4080ff; font-size: 36rpx"
+      inactiveStyle="color: #e9e9e9; font-size: 36rpx"
+      itemStyle="height: 96rpx; padding: 0 30rpx;"
+      lineColor="#4080ff"
+      lineWidth="48rpx"
+      lineHeight="4rpx"
+      :itemWidth="500"
+    ></u-tabs>
    
    <!-- 提示文字 -->
    <view class="login-hint">
@@ -24,7 +22,7 @@
    <!-- 表单区域 -->
    <view class="login-form">
      <!-- 手机号输入 -->
-      <u-form-item>
+      <view class="input-box">
        <u--input
          v-model="form.mobile"
          placeholder="+86手机号"
@@ -34,12 +32,12 @@
          type="number"
          maxlength="11"
          border="none"
-          fontSize="36rpx"
+          fontSize="30rpx"
        ></u--input>
-      </u-form-item>
+      </view>
      
      <!-- 验证码输入 -->
-      <u-form-item v-if="current === 0">
+      <view v-if="current === 0" class="input-box code-box">
        <u--input
          v-model="form.code"
          placeholder="验证码"
@@ -48,43 +46,33 @@
          maxlength="6"
          border="none"
          inputAlign="left"
-          fontSize="36rpx"
+          fontSize="30rpx"
        ></u--input>
-        <template #right>
-          <view class="code-btn-wrap">
-            <u-button 
-              @tap="getCode" 
-              :text="codeTips" 
-              type="primary" 
-              size="mini" 
-              :disabled="!isValidMobile || sending"
-              customStyle="width: 200rpx;height: 76rpx;font-size: 32rpx;"
-            ></u-button>
-          </view>
-        </template>
-      </u-form-item>
+        <view class="code-btn-wrap">
+          <u-button 
+            @tap="getCode" 
+            :text="codeTips" 
+            type="primary" 
+            size="mini" 
+            :disabled="!isValidMobile || sending"
+            customStyle="width: 180rpx;height: 68rpx;font-size: 28rpx;"
+          ></u-button>
+        </view>
+      </view>
      
      <!-- 密码输入 -->
-      <u-form-item v-if="current === 1">
+      <view v-if="current === 1" class="input-box">
        <u--input
          v-model="form.password"
          placeholder="密码"
-          prefixIcon="lock"
-          prefixIconStyle="font-size: 52rpx;color: #909399;padding-right: 16rpx;"
          :password="!showPassword"
          clearable
          border="none"
-          fontSize="36rpx"
+          fontSize="30rpx"
+          suffixIcon="eye"
+          @clickSuffixIcon="showPassword = !showPassword"
        ></u--input>
-        <template #right>
-          <u-icon
-            :name="showPassword ? 'eye' : 'eye-off'"
-            color="#909399"
-            size="52"
-            @click="showPassword = !showPassword"
-          ></u-icon>
-        </template>
-      </u-form-item>
+      </view>
      
      <!-- 用户协议 -->
      <view class="agreement">
@@ -92,23 +80,22 @@
          v-model="isAgree"
          shape="circle"
          activeColor="#4080ff"
-          iconSize="24"
+          iconSize="48"
        ></u-checkbox>
        <text class="agreement-text">
          已阅读并同意 
-          <text class="link" @click="goToUserAgreement"> 用户协议 </text> 
+          <text class="link" @click="goToUserAgreement">用户协议</text> 
          与 
-          <text class="link" @click="goToPrivacyPolicy"> 隐私政策 </text>
+          <text class="link" @click="goToPrivacyPolicy">隐私政策</text>
        </text>
      </view>
      
      <!-- 登录按钮 -->
      <u-button
        text="登录"
-        type="info"
-        :disabled="!canLogin"
+        type="primary"
        @click="handleLogin"
-        customStyle="width: 100%; margin-top: 40rpx; height: 96rpx; border-radius: 24rpx; font-size: 40rpx; font-weight: bold; background-color: #2563eb;"
+        customStyle="width: 100%; margin-top: 40rpx; height: 96rpx; border-radius: 24rpx; font-size: 70rpx;"
      ></u-button>
      
      <!-- 分割线 -->
@@ -121,26 +108,16 @@
      <!-- 第三方登录 -->
      <view class="other-login">
        <!-- 微信登录 -->
-        <u-button
-          text="使用微信登录"
-          @click="handleWechatLogin"
-          icon="weixin-fill"
-          iconSize="52"
-          plain
-          customStyle="width: 100%; margin-bottom: 20rpx; height: 96rpx; border-radius: 24rpx; border-color: #07c160; color: #07c160; font-size: 40rpx;"
-        ></u-button>
+        <button class="wechat-btn" @click="handleWechatLogin">
+          <u-icon name="weixin-fill" size="56" color="#07c160" class="wechat-icon"></u-icon>
+          <text>使用微信登录</text>
+        </button>
        
        <!-- Apple登录 -->
-        <u-button
-          text="使用 Apple 登录"
-          @click="handleAppleLogin"
-          plain
-          customStyle="width: 100%; margin-bottom: 20rpx; height: 96rpx; border-radius: 24rpx; border-color: #333333; color: #333333; font-size: 40rpx;"
-        >
-          <template #icon>
-            <image src="/static/images/apple.png" class="apple-icon"></image>
-          </template>
-        </u-button>
+        <button class="apple-btn" @click="handleAppleLogin">
+          <u-icon name="apple-fill" size="56" color="#333333" class="apple-icon"></u-icon>
+          <text>使用 Apple 登录</text>
+        </button>
      </view>
      
      <!-- 联系我们 -->
@@ -154,214 +131,78 @@ export default {
  data() {
    return {
      tabsList: [
-        {
-          name: '验证码登录'
-        },
-        {
-          name: '密码登录'
-        }
+        { name: '验证码登录' },
+        { name: '密码登录' }
      ],
-      current: 0, // 当前选中的选项卡索引
+      current: 0,
      form: {
        mobile: '',
-        password: '',
-        code: ''
+        code: '',
+        password: ''
      },
-      showPassword: false, // 是否显示密码
-      isAgree: false, // 是否同意协议
-      sending: false, // 是否正在发送验证码
-      codeTips: '发送验证码' // 验证码按钮文字
+      showPassword: false,
+      isAgree: false,
+      sending: false,
+      codeTips: '发送验证码'
    }
  },
  computed: {
-    // 手机号是否有效
    isValidMobile() {
-      return /^1\d{10}$/.test(this.form.mobile);
+      return /^1\d{10}$/.test(this.form.mobile)
    },
-    // 是否可以登录
    canLogin() {
-      if (!this.isAgree || !this.isValidMobile) return false;
-      
-      if (this.current === 1) {
-        return !!this.form.password;
-      } else {
-        return !!this.form.code;
-      }
+      if (!this.isAgree || !this.isValidMobile) return false
+      return this.current === 0 ? !!this.form.code : !!this.form.password
    }
  },
  methods: {
-    // 处理选项卡切换
    handleTabChange(index) {
-      this.current = index;
+      this.current = index
    },
-    
-    // 处理登录
-    handleLogin() {
-      if (!this.canLogin) return;
-      
-      if (this.current === 1) {
-        this.passwordLogin();
-      } else {
-        this.codeLogin();
-      }
-    },
-    
-    // 密码登录
-    passwordLogin() {
-      uni.showLoading({
-        title: '登录中...'
-      });
-      
-      // 这里替换为实际的登录API调用
-      setTimeout(() => {
-        uni.hideLoading();
-        uni.showToast({
-          title: '登录成功',
-          icon: 'success'
-        });
-        // 登录成功后跳转到个人中心页面
-        uni.switchTab({
-          url: '/pages/profile/index'
-        });
-      }, 1500);
-    },
-    
-    // 验证码登录
-    codeLogin() {
-      uni.showLoading({
-        title: '登录中...'
-      });
-      
-      // 这里替换为实际的登录API调用
-      setTimeout(() => {
-        uni.hideLoading();
-        uni.showToast({
-          title: '登录成功',
-          icon: 'success'
-        });
-        // 登录成功后跳转到个人中心页面
-        uni.switchTab({
-          url: '/pages/profile/index'
-        });
-      }, 1500);
-    },
-    
-    // 获取验证码
    getCode() {
-      if (this.sending) return;
-      
-      // 验证手机号
-      if (!this.isValidMobile) {
-        uni.showToast({
-          title: '请输入正确的手机号',
-          icon: 'none'
-        });
-        return;
-      }
-      
-      uni.showLoading({
-        title: '发送中...'
-      });
-      
-      this.sending = true;
-      this.codeTips = '60s';
-      
-      let secondsLeft = 60;
+      if (this.sending || !this.isValidMobile) return
+      this.sending = true
+      this.codeTips = '60s'
+      let seconds = 60
      const timer = setInterval(() => {
-        secondsLeft--;
-        this.codeTips = `${secondsLeft}s`;
-        
-        if (secondsLeft <= 0) {
-          clearInterval(timer);
-          this.sending = false;
-          this.codeTips = '发送验证码';
+        seconds--
+        this.codeTips = `${seconds}s`
+        if (seconds <= 0) {
+          clearInterval(timer)
+          this.sending = false
+          this.codeTips = '发送验证码'
        }
-      }, 1000);
-      
-      // 这里替换为实际的发送验证码API调用
-      setTimeout(() => {
-        uni.hideLoading();
-        uni.showToast({
-          title: '验证码已发送',
-          icon: 'success'
-        });
-      }, 1000);
+      }, 1000)
+    },
+    handleLogin() {
+      if (!this.canLogin) return
+      uni.showToast({
+        title: '登录成功',
+        icon: 'success'
+      })
    },
-    
-    // 微信登录
    handleWechatLogin() {
-      // #ifdef MP-WEIXIN
-      uni.login({
-        provider: 'weixin',
-        success: (res) => {
-          console.log('微信登录成功', res);
-          // 获取用户信息
-          uni.getUserInfo({
-            provider: 'weixin',
-            success: (infoRes) => {
-              console.log('获取用户信息成功', infoRes);
-              // 处理登录逻辑
-            }
-          });
-        },
-        fail: (err) => {
-          console.error('微信登录失败', err);
-        }
-      });
-      // #endif
-      
-      // #ifdef H5 || APP-PLUS
-      uni.showToast({
-        title: '请在微信中打开',
-        icon: 'none'
-      });
-      // #endif
+      console.log('微信登录')
    },
-    
-    // Apple登录
    handleAppleLogin() {
-      // #ifdef APP-PLUS
-      uni.login({
-        provider: 'apple',
-        success: (res) => {
-          console.log('Apple登录成功', res);
-          // 处理登录逻辑
-        },
-        fail: (err) => {
-          console.error('Apple登录失败', err);
-        }
-      });
-      // #endif
-      
-      // #ifdef H5 || MP-WEIXIN
-      uni.showToast({
-        title: '请在iOS设备上使用',
-        icon: 'none'
-      });
-      // #endif
+      console.log('Apple登录')
    },
-    
-    // 前往用户协议
    goToUserAgreement() {
      uni.navigateTo({
        url: '/pages/agreement/user'
-      });
+      })
    },
-    
-    // 前往隐私政策
    goToPrivacyPolicy() {
      uni.navigateTo({
        url: '/pages/agreement/privacy'
-      });
+      })
    },
-    
-    // 联系我们
    handleContact() {
      uni.showModal({
        title: '联系我们',
-        content: '客服电话：400-123-4567\n工作时间：9:00-18:00',
+        content: '客服电话：400-xxx-xxxx',
        showCancel: false
-      });
+      })
    }
  }
 }
@@ -369,30 +210,52 @@ export default {

 <style lang="scss" scoped>
 .login-container {
-  padding: 40rpx;
-  background-color: #ffffff;
  min-height: 100vh;
-}
-
-.tabs-container {
-  display: flex;
-  justify-content: center;
+  background-color: #ffffff;
+  padding: 0 40rpx;
 }

 .login-hint {
  font-size: 32rpx;
-  color: #999999;
-  margin: 30rpx 0 60rpx;
  text-align: center;
+  margin: 30rpx 0;
 }

 .login-form {
-  .u-form-item {
+  margin-top: 40rpx;
+  
+  .input-box {
+    height: 96rpx;
+    border: 2rpx solid #e9e9e9;
+    border-radius: 16rpx;
+    padding: 0 24rpx;
    margin-bottom: 30rpx;
+    display: flex;
+    align-items: center;
+    
+    .u-form-item {
+      flex: 1;
+      margin-bottom: 0;
+    }
  }
  
-  .code-btn-wrap {
-    margin-left: 20rpx;
+  .code-box {
+    display: flex;
+    align-items: center;
+    padding-right: 12rpx;
+    
+    .u--input {
+      flex: 1;
+    }
+    
+    .code-btn-wrap {
+      margin-left: 12rpx;
+      height: 68rpx;
+      
+      .u-button {
+        margin: 0;
+      }
+    }
  }
 }

@@ -402,13 +265,14 @@ export default {
  margin: 40rpx 0;
  
  .agreement-text {
-    font-size: 32rpx;
+    font-size: 28rpx;
    color: #999999;
    margin-left: 12rpx;
  }
  
  .link {
-    color: $primary-color;
+    color: #4080ff;
+    margin: 0 8rpx;
  }
 }

@@ -419,27 +283,57 @@ export default {
  
  .line {
    flex: 1;
-    height: 2px;
+    height: 2rpx;
    background-color: #eeeeee;
  }
  
  .text {
    color: #999999;
    padding: 0 30rpx;
-    font-size: 32rpx;
+    font-size: 28rpx;
  }
 }

-.apple-icon {
-  width: 52rpx;
-  height: 52rpx;
-  margin-right: 16rpx;
+.other-login {
+  .wechat-btn, .apple-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 96rpx;
+    margin-bottom: 20rpx;
+    border-radius: 24rpx;
+    font-size: 32rpx;
+    background-color: #ffffff;
+    border: 2rpx solid #dddddd;
+    
+    text {
+      color: #333333;
+      margin-left: 16rpx;
+    }
+  }
+  
+  .wechat-btn {
+    text {
+      font-size: 32rpx;
+      font-weight: 500;
+    }
+  }
+  
+  .apple-btn {
+    text {
+      color: #333333;
+      font-size: 32rpx;
+      font-weight: 500;
+    }
+  }
 }

 .contact-us {
  text-align: center;
-  font-size: 32rpx;
-  color: #666666;
+  font-size: 28rpx;
+  color: #999999;
  margin-top: 60rpx;
+  padding-bottom: 40rpx;
 }
 </style> 
--- a/Cunkebao/pages/profile/index.vue
+++ b/Cunkebao/pages/profile/index.vue
@@ -170,7 +170,7 @@ export default {
  align-items: center;
  padding: 25rpx 30rpx;
  background-color: #fff;
-  border-bottom: 1px solid #e5e5e5;
+  border-bottom: 1px solid #e9e9e9;
  position: fixed;
  top: 0;
  left: 0;
@@ -264,7 +264,7 @@ export default {
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 40rpx;
-    border-bottom: 2rpx solid #e5e5e5;
+    border-bottom: 2rpx solid #e9e9e9;
    
    &:last-child {
      border-bottom: none;
--- a/Cunkebao/pages/scenarios/index.vue
+++ b/Cunkebao/pages/scenarios/index.vue
@@ -289,7 +289,7 @@ export default {
  align-items: center;
  padding: 25rpx 30rpx;
  background-color: #fff;
-  border-bottom: 1px solid #e5e5e5;
+  border-bottom: 1px solid #e9e9e9;
  position: fixed;
  top: 0;
  left: 0;