HNKDBOSS-WEB/hn-shop-uniapp/pages/txmLogin/index.vue

<template>
  <view class="container-login" :style="appThemeStyle">
    <!-- 表单 -->
    <view class="submit-form">
      <!-- 页面头部 -->
      <view class="header">
        <view class="title">
          <text>KDBOSS-管理端</text>
        </view>
        <view class="sub-title">
          <text>请输入管理员账号</text>
        </view>
      </view>

      <!-- 账户 -->
      <view class="form-item">
        <input class="form-item--input" type="text" v-model="loginForm.account" placeholder="账户" />
      </view>
      <!-- 密码 -->
      <view class="form-item">
        <input class="form-item--input" type="text" v-model="loginForm.pwd" placeholder="密码" />
      </view>
      <!-- 图形验证码 -->
      <view class="form-item">
        <input class="form-item--input" type="text" v-model="loginForm.code" maxlength="6" placeholder="请输入图形验证码" />
        <view class="form-item--parts">
          <view class="captcha" @click="getCode()">
            <img class="image" :src="codeUrl"></img>
          </view>
        </view>
      </view>
    </view>

    <!-- 确认绑定 -->
    <view class="submit-button" @click="handleSubmit()">
      <text>登 录</text>
    </view>
  </view>
</template>

<script>
import store from '@/store'
import * as UserApi from '@/api/user'
import * as CaptchaApi from '@/api/captcha'
import * as Verify from '@/utils/verify'
import * as AppApi from '@/api/app'
import storage from '@/utils/storage'
import SelectRegion from '@/components/select-region/select-region'

// 倒计时时长(秒)
const times = 60

// 表单验证场景
const GET_CAPTCHA = 10
const FORM_SUBMIT = 20

export default {
  data() {
    return {
      // 正在加载
      isLoading: false,
      // 图形验证码信息
      captcha: {},
      // 短信验证码发送状态
      smsState: false,
      // 倒计时
      times,
      // 手机号
      agentstel: '',
      agentsname: '',
      agentsadress: '',
      address: '',
      // 图形验证码
      captchaCode: '',
      // 短信验证码
      smsCode: '',
      wx_userid: storage.get('wx_userid'),
      wx_openid: storage.get('wx_openid'),
      codeUrl: '',
      loginForm: {
        account: '',
        pwd: '',
        code: '',
        uuid: ''
      }
    }
  },
  components: {
    SelectRegion
  },
  /**
   * 生命周期函数--监听页面加载
   */
  created() {
    // 获取图形验证码
    this.getCode()
  },

  methods: {
    async getCode() {
      const app = this
      app.regCodeLoading = true
      const uuid = app.getUUID()
      app.loginForm.uuid = uuid
      // 图形验证码
      app.codeUrl = 'https://api.hninpop.com/api/sys/getloginvifcode?uuid=' + uuid
    },

    getUUID() {
      var s = []
      var hexDigits = '0123456789abcdef'
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
      }
      s[14] = '4' // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1) // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = '-'

      var uuid = s.join('')
      return uuid
    },

    // 获取图形验证码
    getCaptcha() {
      const app = this
      CaptchaApi.image().then((result) => (app.captcha = result.data))
    },

    // 点击发送短信验证码
    handelSmsCaptcha() {
      const app = this
      if (!app.isLoading && !app.smsState && app.formValidation(GET_CAPTCHA)) {
        app.sendSmsCaptcha()
      }
    },

    // 表单验证
    formValidation(scene = GET_CAPTCHA) {
      const app = this
      // 验证获取短信验证码
      if (scene === GET_CAPTCHA) {
        if (!app.validteMobile(app.agentstel)) {
          return false
        }
      }
      // 验证表单提交
      if (scene === FORM_SUBMIT) {
        if (!app.validteMobile(app.agentstel) || !app.validteSmsCode(app.smsCode)) {
          return false
        }
      }
      return true
    },

    // 验证手机号
    validteMobile(str) {
      if (Verify.isEmpty(str)) {
        this.$toast('请先输入手机号')
        return false
      }
      if (!Verify.isMobile(str)) {
        this.$toast('请输入正确格式的手机号')
        return false
      }
      return true
    },

    // 验证图形验证码
    validteCaptchaCode(str) {
      if (Verify.isEmpty(str)) {
        this.$toast('请先输入图形验证码')
        return false
      }
      return true
    },

    // 验证短信验证码
    validteSmsCode(str) {
      if (Verify.isEmpty(str)) {
        this.$toast('请先输入短信验证码')
        return false
      }
      return true
    },

    // 请求发送短信验证码接口
    sendSmsCaptcha() {
      const app = this
      app.isLoading = true
      AppApi.getSmsCode({mobile: app.agentstel})
        .then((result) => {
          // 显示发送成功
          app.$toast('发送成功')
          // 执行定时器
          app.timer()
        })
        .finally(() => {
          app.isLoading = false
        })
    },

    // 执行定时器
    timer() {
      const app = this
      app.smsState = true
      const inter = setInterval(() => {
        app.times = app.times - 1
        if (app.times <= 0) {
          app.smsState = false
          app.times = times
          clearInterval(inter)
        }
      }, 1000)
    },

    // 点击提交
    handleSubmit() {
      const app = this
      AppApi.login(app.loginForm)
        .then((result) => {
          // 显示操作成功
          app.$toast('登录成功，正在跳转')
          // 登录成功存储企业信息
          storage.set('txm_token', '11111')
          setTimeout(() => {
            this.$navTo('pages/tiaoxingma/index')
            // 登录成功 数据清空
            app.loginForm.account = ''
            app.loginForm.pwd = ''
            app.loginForm.code = ''
          }, 1000)
        })
        .finally(() => {
        })
    },

    // 确认提交事件
    onSubmitEvent() {
      const app = this
      if (Verify.isEmpty(app.address)) {
        this.$toast('请选择地区')
        return false
      }
      if (Verify.isEmpty(app.agentsname)) {
        this.$toast('请填写商户名称')
        return false
      }
      app.isLoading = true
      let platform = {
        agentscustomerid: storage.get('wx_userid'),
        agentsname: app.agentsname,
        agentsadress: app.agentsadress,
        agentstel: app.agentstel,
        agentsprovince: app.address[0].label,
        agentscity: app.address[1].label,
        agentsarea: app.address[2].label,
        smscode: app.smsCode
      }
      AppApi.companyLogin(platform)
        .then((res) => {})
        .finally(() => (app.isLoading = false))
    },

    /**
     * 提交成功-跳转回原页面
     */
    onNavigateBack(delta) {
      uni.navigateBack({
        delta: Number(delta || 1)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container-login {
  padding: 30rpx 60rpx;
  padding-top: 200rpx;
  min-height: 100vh;
  background-color: #fff;
}

// 页面头部
.header {
  margin-bottom: 50rpx;

  .title {
    color: #0081ff;
    font-size: 50rpx;
    font-weight: 900;
  }

  .sub-title {
    margin-top: 20rpx;
    color: #0080ffa9;
    font-size: 25rpx;
  }
}

.shiming {
  margin-top: 90rpx;
}

// 输入框元素
.form-item {
  display: flex;
  padding: 18rpx;
  border-bottom: 1rpx solid #f3f1f2;
  margin-bottom: 25rpx;
  height: 96rpx;
  font-size: 30rpx;
  color: #333;

  &--input {
    font-size: 30rpx;
    letter-spacing: 1rpx;
    flex: 1;
    height: 100%;
    color: #333;
  }

  &--parts {
    min-width: 100rpx;
    height: 100%;
  }

  // 图形验证码
  .captcha {
    height: 100%;

    .image {
      display: block;
      width: 192rpx;
      height: 100%;
    }
  }

  // 短信验证码
  .captcha-sms {
    font-size: 30rpx;
    line-height: 50rpx;
    padding-right: 20rpx;

    .activate {
      color: #0081ff;
    }

    .un-activate {
      color: #9e9e9e;
    }
  }
}

// 提交按钮
.submit-button {
  width: 100%;
  height: 86rpx;
  margin-top: 70rpx;
  background: linear-gradient(to right, $main-bg, $main-bg2);
  color: $main-text;
  border-radius: 80rpx;
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
  letter-spacing: 5rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%);
}

.form-dizhi {
  color: gray;
}
</style>