.

2025-09-08 20:13:15 +08:00
parent bfa57367dc
commit 4e5d687c18
4 changed files with 204 additions and 4 deletions
@@ -1,7 +1,207 @@
 <template>
-  <view> 登录 </view>
+  <view class="login-page-wrapper">
+    <view class="mask" />
+    <view class="login-ctn">
+      <image class="login-logo-image" src="/static/imgs/login-logo.png" />
+
+      <view class="formItem-box mobile-formItem">
+        <view class="prefix">+86</view>
+        <uni-easyinput
+          placeholder="请输入手机号码"
+          v-model="state.model.mobile"
+          :inputBorder="false"
+          type="number"
+        />
+      </view>
+      <view class="formItem-box code-formItem">
+        <uni-easyinput
+          placeholder="请输入验证码"
+          v-model="state.model.code"
+          :inputBorder="false"
+          type="number"
+          maxlength="4"
+        />
+        <view class="suffix" @click="checkAgreementAndGetSmsCode">
+          {{ getSmsTimer('smsLogin') }}
+        </view>
+      </view>
+
+      <view class="agreement-text">
+        <checkbox-group @change="handleAgreementChange">
+          <label>
+            <checkbox :value="true" fontSize="12" />
+          </label>
+        </checkbox-group>
+        已同意《用户条款》及《隐私政策》
+      </view>
+
+      <view class="login-btn" @click="smsLoginSubmit">登录</view>
+    </view>
+  </view>
 </template>

-<script setup></script>
+<script setup>
+  import { ref, reactive, unref } from 'vue';
+  import { code, mobile } from '@/sheep/validate/form';
+  import { showAuthModal, closeAuthModal, getSmsCode, getSmsTimer } from '@/sheep/hooks/useModal';
+  import sheep from '@/sheep';
+  import AuthUtil from '@/sheep/api/member/auth';

-<style lang="scss" scoped></style>
+  const agreeStatus = ref(false);
+
+  // 数据
+  const state = reactive({
+    model: {
+      mobile: '', // 手机号
+      code: '', // 验证码
+    },
+    rules: {
+      code,
+      mobile,
+    },
+  });
+
+  const handleAgreementChange = (e) => {
+    const values = e.detail.value;
+    agreeStatus.value = values[0] || false;
+  };
+
+  // 检查协议并获取验证码
+  function checkAgreementAndGetSmsCode() {
+    if (!state.model.mobile) {
+      sheep.$helper.toast('请输入手机号码');
+      return;
+    }
+    if (!agreeStatus.value) {
+      sheep.$helper.toast('请选择是否同意协议');
+      return;
+    }
+    getSmsCode('smsLogin', state.model.mobile);
+  }
+
+  // 短信登录
+  async function smsLoginSubmit() {
+    if (!state.model.mobile) {
+      sheep.$helper.toast('请输入手机号码');
+      return;
+    }
+    if (!state.model.code) {
+      sheep.$helper.toast('请输入验证码');
+      return;
+    }
+    if (!agreeStatus.value) {
+      sheep.$helper.toast('请选择是否同意协议');
+      return;
+    }
+    // 提交数据
+    const { code } = await AuthUtil.smsLogin(state.model);
+    if (code === 0) {
+      sheep.$router.go('/pages/index/index', {}, { redirect: true });
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .login-page-wrapper {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-image: url('/static/imgs/login-bg.jpg');
+    background-size: cover;
+    background-position: center;
+    position: relative;
+
+    .mask {
+      width: 100%;
+      height: 100%;
+      background: rgba(18, 19, 20, 0.43);
+    }
+
+    .login-ctn {
+      width: calc(100% - 110rpx);
+      height: 500rpx;
+      background: #fff;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+
+      .login-logo-image {
+        width: 118rpx;
+        height: 70rpx;
+        position: absolute;
+        left: calc(50% - 59rpx);
+        top: 16rpx;
+      }
+
+      .formItem-box {
+        width: calc(100% - 110rpx);
+        height: 80rpx;
+        border: 2rpx solid #000;
+      }
+
+      .mobile-formItem {
+        position: absolute;
+        left: 50%;
+        top: 116rpx;
+        transform: translateX(-50%);
+        display: flex;
+        align-items: center;
+
+        .prefix {
+          width: 100rpx;
+          flex-shrink: 0;
+          text-align: center;
+          border-right: 1rpx solid #ccc;
+          margin-right: 20rpx;
+        }
+      }
+
+      .code-formItem {
+        position: absolute;
+        left: 50%;
+        top: 212rpx;
+        transform: translateX(-50%);
+        display: flex;
+        align-items: center;
+        padding: 0 20rpx;
+        box-sizing: border-box;
+
+        .suffix {
+          width: 100rpx;
+          flex-shrink: 0;
+          text-align: center;
+          border-left: 1rpx solid #ccc;
+          padding-left: 20rpx;
+        }
+      }
+
+      .agreement-text {
+        width: 100%;
+        color: #c4c4c4;
+        font-size: 24rpx;
+        position: absolute;
+        left: 50%;
+        top: 310rpx;
+        transform: translateX(-50%);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .login-btn {
+        width: calc(100% - 400rpx);
+        height: 80rpx;
+        line-height: 80rpx;
+        text-align: center;
+        background: #000;
+        color: #fff;
+        font-size: 28rpx;
+        position: absolute;
+        left: 50%;
+        bottom: 32rpx;
+        transform: translateX(-50%);
+      }
+    }
+  }
+</style>