paper-shopkeeper-H5/pages/login/index.vue

<template>
  <view style="background-color: white">
    <uni-nav-bar :fixed="true" color="#ffffff" background-color="#ffffff" :status-bar="true" :border="false" left-icon="closeempty" @clickLeft="close" />
    <view class="logo_area">
      <image class="logo" src="/static/logo.png"></image>
      <text class="title">纸掌柜</text>
    </view>
    <view class="form">
      <view class="phone">
        <uni-easyinput
          v-model="phoneNumber"
          :inputBorder="false"
          :placeholderStyle="'font-size:32rpx;'"
          placeholder="请输入手机号码"
          :maxlength="11"
          type="number"
        />
      </view>
      <view class="captcha">
        <uni-easyinput v-model="captcha" :inputBorder="false" :placeholderStyle="'font-size:32rpx;'" placeholder="请输入验证码" :maxlength="6" type="number" />
        <view v-show="timer > 0" class="timer_area">
          <text class="timer">{{ `(${timer}S后) ` }}</text>
          <text class="timer_text">重新获取</text>
        </view>
        <text v-show="timer <= 0" class="code" @click="getCode">获取验证码</text>
      </view>
      <view class="login-button" @click="login" :style="{ opacity: disabled ? '0.5' : '' }">登录</view>
    </view>
    <view class="agreement_area">
      <checkbox-group @change="onCheck">
        <checkbox value="cb" :checked="checked" color="#000000" style="transform: scale(0.7)" />
      </checkbox-group>
      <view class="agreement">
        已阅读并同意纸掌柜
        <text class="agreement_text" @click="jumpAgreement">《用户与隐私协议》</text>
      </view>
    </view>
    <!-- 
    <uni-easyinput v-model="captcha" placeholder="验证码" />
    <button @click="getCode">获取验证码</button>
    <button @click="login">登录</button> -->
  </view>
</template>

<script>
import { getAuthCaptcha, loginByPhone, getQnToken } from '@/apis/loginApi'
import { getBaseInfo } from '@/apis/commonApi'
import { accountType, verificationType, codePurpose } from '@/enums/index.js'
import store from '@/store/index.js'
import { go2, back } from '@/utils/hook.js'
export default {
  data() {
    return {
      phoneNumber: '',
      captcha: '',
      timer: 0,
      checked: false
    }
  },
  methods: {
    // 退出登录
    close() {
      back()
    },
    onCheck(e) {
      if (e.detail.value.length > 0) {
        this.checked = true
      } else {
        this.checked = false
      }
    },
    jumpAgreement() {
      go2('agreement')
    },
    // 获取验证码
    getCode() {
      if (this.phoneNumber.trim() === '') {
        uni.showToast({
          title: '请输入手机号码',
          icon: 'none'
        })
        return
      }
      if (this.phoneNumber.trim().length !== 11) {
        uni.showToast({
          title: '请输入正确的手机号码',
          icon: 'none'
        })
        return
      }
      this.countdown()
      getAuthCaptcha({
        purpose: codePurpose.CERTIFICATION,
        verifiableAccount: this.phoneNumber,
        verifiableAccountType: verificationType.PHONE
      }).then((res) => {
        uni.showToast({
          title: '验证码已发送',
          icon: 'none'
        })
      })
    },
    // 倒计时
    countdown() {
      this.timer = 60
      let timer = setInterval(() => {
        this.timer--
        if (this.timer <= 0) {
          clearInterval(timer)
        }
      }, 1000)
    },
    // 登录
    login() {
      if (this.disabled) {
        return
      }
      if (!this.checked) {
        uni.showToast({
          title: '请同意用户与隐私协议',
          icon: 'none'
        })
        return
      }
      loginByPhone({
        accountType: accountType.PHONE,
        account: this.phoneNumber,
        captcha: this.captcha
      }).then((res) => {
        if (res) {
          store.commit('setUecToken', res.token)
          getQnToken({ loginToken: res.token }).then((token) => {
            if (token) {
              uni.showToast({
                title: '登录成功',
                icon: 'success',
                complete: () => {
                  setTimeout(() => {
                    store.commit('setToken', token)
                    // 登录成功先查看是否有下一个页面
                    const nextPage = store.state.nextPage
                    if (nextPage.name) {
                      go2(nextPage.name, nextPage.data, true)
                    } else {
                      // 初始登录没有下一个页面，进行账号信息处理
                      this.setAccountInfo()
                    }
                    store.commit('removeNextPage')
                  }, 1000)
                }
              })
            }
          })
        }
      })
    },
    setAccountInfo() {
      getBaseInfo({}, true).then((res) => {
        if (res) {
          if (!res.enterpriseList || res.enterpriseList.length === 0) {
            go2('enterprise-info', { operation: 'add' }, true)
          } else {
            go2('store')
          }
        }
      })
    }
  },
  computed: {
    disabled() {
      return this.phoneNumber.trim() === '' || this.phoneNumber.trim().length != 11 || this.captcha.trim() === ''
    }
  }
}
</script>

<style lang="scss">
.logo_area {
  margin-top: 187rpx;
  width: 750rpx;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  .logo {
    width: 100rpx;
    height: 100rpx;
    margin-right: 20rpx;
  }
  .title {
    opacity: 0.8;
    font-size: 60rpx;
    color: #000000;
    letter-spacing: 9rpx;
    text-align: center;
    font-weight: 400;
  }
}
.form {
  width: 750rpx;
  margin-top: 280rpx;
  padding: 0 64rpx;
  .phone {
    width: 622rpx;
    border-bottom: 2rpx solid #e0e0e0;
  }
  .captcha {
    margin-top: 44rpx;
    width: 622rpx;
    border-bottom: 2rpx solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .timer_area {
      width: auto;
      flex: 0 0 auto;
      .timer {
        font-size: 32rpx;
        color: #007aff;
      }
      .timer_area {
        font-size: 32rpx;
        color: #999999;
      }
    }
    .code {
      width: 160rpx;
      font-size: 32rpx;
      color: #007aff;
      flex: 0 0 auto;
    }
  }
  .login-button {
    font-size: 32rpx;
    margin-top: 92rpx;
    width: 622rpx;
    height: 86rpx;
    border-radius: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #007aff;
    color: #ffffff;
  }
}
.agreement_area {
  position: fixed;
  bottom: 108rpx;
  width: 750rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  .agreement {
    font-size: 24rpx;
    color: #555555;
    .agreement_text {
      font-size: 24rpx;
      color: #007aff;
    }
  }
}
</style>