group_lawyer_app/pages/login.vue

<template>
  <view class="login-page">
    <view class="login-hero"></view>

    <view class="login-content">
      <view class="status-bar"></view>

      <view class="header">
        <text class="header-title">登录律师账号</text>
        <text class="header-subtitle">请使用手机号接收验证码进行登录</text>
      </view>

      <view class="form-card">
        <view class="field">
          <text class="field-label">手机号码</text>
          <input class="field-input" type="number" :value="phoneDisplay" placeholder="请输入手机号" maxlength="13"
            @input="handlePhoneInput" />
        </view>

        <button @click="handleLogin" class="primary-btn">获取验证码</button>

        <view class="agreement-row" @click="toggleAgreement">
          <view :class="['agreement-checkbox', { checked: agreementChecked }]">
            <view class="checkbox-inner"></view>
          </view>
          <text class="agreement-text">
            我已阅读并同意
            <text class="link" @click.stop="handleUserAgrement">《用户协议》</text>
            和
            <text class="link" @click.stop="handlePrivacy">《隐私政策》</text>
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getCodeImg } from '@/api/login'
import { getToken } from '@/utils/auth'

export default {
  data() {
    return {
      codeUrl: "",
      captchaEnabled: true,
      register: false,
      agreementChecked: true,
      phoneDisplay: "",
      globalConfig: getApp().globalData.config,
      loginForm: {
        username: "",
        password: "admin123",
        code: "",
        uuid: ""
      }
    }
  },
  created() {
    this.getCode()
  },
  onLoad() {
    //#ifdef H5
    if (getToken()) {
      this.$tab.reLaunch('/pages/index')
    }
    //#endif
  },
  methods: {
    handlePhoneInput(e) {
      const raw = (e.detail.value || '').replace(/\D/g, '').slice(0, 11)
      this.loginForm.username = raw
      if (raw.length > 7) {
        this.phoneDisplay = raw.replace(/(\d{3})(\d{4})(\d{0,4})/, '$1 $2 $3').trim()
      } else if (raw.length > 3) {
        this.phoneDisplay = raw.replace(/(\d{3})(\d{0,4})/, '$1 $2').trim()
      } else {
        this.phoneDisplay = raw
      }
    },
    toggleAgreement() {
      this.agreementChecked = !this.agreementChecked
    },
    handleUserRegister() {
      this.$tab.redirectTo(`/pages/register`)
    },
    handlePrivacy() {
      let site = this.globalConfig.appInfo.agreements[0]
      this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
    },
    handleUserAgrement() {
      let site = this.globalConfig.appInfo.agreements[1]
      this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
    },
    getCode() {
      getCodeImg().then(res => {
        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
        if (this.captchaEnabled) {
          this.codeUrl = 'data:image/gif;base64,' + res.img
          this.loginForm.uuid = res.uuid
        }
      })
    },
    async handleLogin() {
      if (!this.agreementChecked) {
        this.$modal.msgError('请先阅读并同意相关协议')
        return
      }
      if (!/^1\d{10}$/.test(this.loginForm.username)) {
        this.$modal.msgError('请输入正确的手机号')
        return
      }
      this.$modal.loading('登录中，请耐心等待...')
      this.pwdLogin()
    },
    async pwdLogin() {
      this.$store.dispatch('Login', this.loginForm).then(() => {
        this.$modal.closeLoading()
        this.loginSuccess()
      }).catch(() => {
        this.$modal.closeLoading()
        if (this.captchaEnabled) {
          this.getCode()
        }
      })
    },
    loginSuccess() {
      this.$store.dispatch('GetInfo').then(() => {
        this.$tab.reLaunch('/pages/index')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  background-color: #eaf3ff;
}

.login-page {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  background: url('../static/login/login-bg.png') no-repeat center center;
}

.login-bg {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.login-hero {
  position: absolute;
  width: 360px;
  height: 580px;
  background: url('../static/login/login-illustration.png') no-repeat;
  background-size: 100% 100%;
  right: 0rpx;
  top: 40rpx;
}

.login-content {
  padding: 470rpx 40rpx 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.status-bar {
  height: var(--status-bar-height, 0px);
}

.header {
  display: flex;
  flex-direction: column;
}

.header-title {
  font-size: 50rpx;
  font-weight: 600;
  color: #19274b;
  line-height: 1.2;
}

.header-subtitle {
  margin-top: 24rpx;
  font-size: 26rpx;
  color: rgba(25, 39, 75, 0.68);
  line-height: 1.6;
}

.form-card {
  z-index: 9;
  margin-top: 160rpx;
  width: 100%;
  box-sizing: border-box;
}

.field {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.field-label {
  font-size: 26rpx;
  color: #151515;
  font-size: 28rpx;
  margin-bottom: 18rpx;
}

.field-input {
  text-align: center;
  width: 100%;
  height: 102rpx;
  border-radius: 28rpx;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(47, 94, 187, 0.08);
  box-shadow: inset 0 4rpx 12rpx rgba(41, 94, 187, 0.06);
  padding: 0 36rpx;
  box-sizing: border-box;
  font-size: 28rpx;
  color: #AAA;
  letter-spacing: 6rpx;
}

.field-input::placeholder {
  color: #AAA;
  letter-spacing: 6rpx;
  opacity: 0.7;
}

.primary-btn {
  margin-top: 44rpx;
  width: 100%;
  height: 100rpx;
  border-radius: 28rpx;
  background: linear-gradient(90deg, #3677E9 0%, #2856C7 100%);
  color: #ffffff;
  font-size: 28rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  box-shadow: 0 20rpx 40rpx rgba(38, 104, 255, 0.35);
}

.agreement-row {
  position: fixed;
  bottom: 100rpx;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.agreement-checkbox {
  width: 30rpx;
  height: 30rpx;
  margin-right: 8rpx;
  border-radius: 50%;
  border: 1px solid rgba(35, 96, 255, 0.5);
  background: rgba(250, 252, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.agreement-checkbox.checked {
  background: linear-gradient(140deg, #3c7dff 0%, #235aff 100%);
  border: none;
}

.checkbox-inner {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background: #ffffff;
  opacity: 0;
}

.agreement-checkbox.checked .checkbox-inner {
  opacity: 1;
}

.agreement-text {
  font-size: 24rpx;
  color: rgba(34, 52, 91, 0.75);
  line-height: 1.5;
}

.agreement-text .link {
  color: #2360ff;
  margin: 0 6rpx;
}
</style>