wechat/src/pages/sales/login/index.vue

<template>
  <div class="mainPage">
    <div class="mask">
      <img :src="logo" class="logo" alt="">
      <div class="centerLabel" style="width:100%;">
        <div class="box" style="margin:0 auto;">
          <div class="title">登录</div>

          <div class="mobile">
            <i class="iconfont icon-dianhua"></i>
            <input type="number" maxlength="11" placeholder="手机号" v-model="postData.phone">
          </div>

          <div class="sms" style="margin-top:.2rem;">
            <i class="iconfont icon-mima"></i>
            <input type="number" maxlength="6" placeholder="验证码" v-model="postData.captcha">
            <div class="sand" v-if="seconds === 60" @click="sandMsg">发送验证码</div>
            <div class="sand" v-else>{{seconds}}后可重发</div>
          </div>
        </div>
        <div class="submit" @click="submit">
          <div>通过验证</div>
        </div>
      </div>

      <transition name="slide">
        <div class="select" v-if="showCase">
          <van-picker
            show-toolbar
            title="请选择"
            value-key='CaseName'
            :columns="columns"
            @cancel="onCancelC"
            @confirm="onConfirmC"
          />
        </div>
      </transition>
      <transition name="slide">
        <div class="select" v-if="showSales">
          <van-picker
            show-toolbar
            title="请选择"
            value-key='UserName'
            :columns="columnsS"
            @cancel="onCancelS"
            @confirm="onConfirmS"
          />
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import logo from '../../../common/icon/logo.png'
import { createNamespacedHelpers } from 'vuex'
const { mapActions: actions } = createNamespacedHelpers('userCenter')
const { mapActions: mapLoginActions } = createNamespacedHelpers('login')
export default {
  data () {
    return {
      logo,
      showCase: false,
      showSales: false,
      seconds: 60,
      postData: {
        phone: '',
        captcha: ''
      }
    }
  },
  methods: {
    ...actions(['getCaptcha']),
    ...mapLoginActions(['submitData']),
    sandMsg () {
      if (!this.postData.phone) {
        this.$toast('请先填写手机号')
        return
      }
      this.getCaptcha(this.postData.phone)
      this.runTime()
    },
    runTime () {
      setTimeout(() => {
        this.seconds--
        if (this.seconds < 60 && this.seconds >= 1) {
          this.runTime()
        } else if (this.seconds < 1) {
          this.seconds = 60
        }
      }, 1000)
    },
    submit () {
      if (!this.postData.captcha) {
        this.$toast('请先获取验证码')
        return
      }
      this.submitData(this.postData).then((res) => {
        this.$toast(res)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "page.scss";
</style>