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

<template>
  <div class="mainPage" v-if="showPage">
    <div class="mask">
      <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="tel" maxlength="11" placeholder="手机号" v-model="postData.phone">
          </div>

          <div class="sms" style="margin-top:.2rem;">
            <i class="iconfont icon-mima"></i>
            <input type="tel" maxlength="6" placeholder="验证码" v-model="postData.captcha">
            <div class="sand color" v-if="seconds === 61" @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 { createNamespacedHelpers } from 'vuex'
const { mapActions: actions } = createNamespacedHelpers('userCenter')
const { mapActions: mapLoginActions } = createNamespacedHelpers('login')
const { mapState: mapUserState } = createNamespacedHelpers('userCenter')
let canSubmit
export default {
  data () {
    return {
      showPage: false,
      showCase: false,
      showSales: false,
      seconds: 61,
      postData: {
        phone: '',
        captcha: ''
      }
    }
  },
  computed: {
    ...mapUserState({
      userInfo: x => x.userInfo
    }),
  },
  methods: {
    ...actions(['getCaptcha']),
    ...mapLoginActions(['submitData']),
    sandMsg () {
      if (!this.postData.phone) {
        this.$toast('请先填写手机号')
        return
      }
      let reg = /^1[0-9]{10}$/
      if (!reg.test(this.postData.phone)) {
        this.$toast('请填写正确的手机号')
        return
      }
      this.getCaptcha(this.postData.phone)
      this.seconds = 60
      this.runTime()
    },
    runTime () {
      setTimeout(() => {
        this.seconds--
        if (this.seconds < 60 && this.seconds >= 1) {
          this.runTime()
        } else if (this.seconds < 1) {
          this.seconds = 61
        }
      }, 1000)
    },
    getUrl (val) {
      var url = window.location.pathname
      return url.replace('sales.html', 'user.html') + '#/' + val + '?hideTabbar=1'
    },
    submit () {
      if (!canSubmit) {
        return
      }
      canSubmit = false
      if (!this.postData.captcha) {
        this.$toast('请填写验证码')
        canSubmit = true
        return
      }
      let reg = /^[0-9]{6}$/
      if (!reg.test(this.postData.captcha)) {
        this.$toast('验证码格式不正确')
        canSubmit = true
        return
      }
      this.submitData(this.postData).then((res) => {
        setTimeout(() => {
          window.location.replace(this.getUrl('mainPage/coffeeIndex'))
        }, 2000)
      }).catch(() => {
        console.log(111)
        canSubmit = true
      })
    }
  },
  created () {
    canSubmit = true
    if (this.userInfo.customer.MapUser) {
      // this.showPage = true
      window.location.replace(this.getUrl('mainPage/coffeeIndex'))
    } else {
      this.showPage = true
    }
  }
}
</script>

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