wechat/src/pages/user/bindMobile/bindMobile.vue

<template>
  <div class="mainPage">
    <div class="mask">
      <img :src="logo" class="logo" alt="">
      <div class="box">
        <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="recommend">
          <span>推荐人</span>
          <div @click="selectCase">
            <span>{{caseName}}</span>
            <i class="iconfont icon-triangle-bottom"></i>
          </div>
          <div @click="selectSales">
            <span>{{salesName}}</span>
            <i class="iconfont icon-triangle-bottom"></i>
          </div>
        </div>

        <div class="sms">
          <i class="iconfont icon-mima"></i>
          <input type="number" maxlength="6" placeholder="验证码" v-model="postData.captcha">
          <div class="sand" v-if="seconds === 61" @click="sandMsg">发送验证码</div>
          <div class="sand" v-else>{{seconds}}后可重发</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 { mapState, createNamespacedHelpers } from 'vuex'
const { mapActions: actions } = createNamespacedHelpers('userCenter')
export default {
  data () {
    return {
      logo,
      showCase: false,
      showSales: false,
      columns: [],
      columnsS: [],
      caseName: '选择案场',
      salesName: '选择销售',
      seconds: 61,
      postData: {
        phone: '',
        case: '',
        sales: '',
        captcha: ''
      }
    }
  },
  computed: {
    ...mapState({
      caseInfo: x => x.userCenter.caseInfo
    })
  },
  created () {
    this.getCaseInfo(1).then(() => {
      this.columns = this.caseInfo.cases
    })
  },
  methods: {
    ...actions(['getCaseInfo']),
    ...actions(['getCaptcha']),
    ...actions(['submitData']),
    onConfirmC (value, index) {
      this.caseName = value.CaseName
      this.postData.case = value.CaseId
      this.columnsS = []
      this.salesName = '选择销售'
      if (this.caseInfo.sales) {
        for (let i = 0; i < this.caseInfo.sales.length; i++) {
          if (this.caseInfo.sales[i].CaseId === this.postData.case) {
            this.columnsS.push(this.caseInfo.sales[i])
          }
        }
      }
      this.showCase = false
    },
    onCancelC () {
      this.showCase = false
    },
    onConfirmS (value, index) {
      this.salesName = value.UserName
      this.postData.sales = value.UserId
      this.showSales = false
    },
    onCancelS () {
      this.showSales = false
    },
    selectCase () {
      this.showCase = true
    },
    selectSales () {
      if (!this.postData.case) {
        this.$toast('请先选择案场')
        return
      } else if (this.columnsS.length <= 0) {
        this.$toast('此案场无销售')
        return
      }
      this.showSales = true
    },
    sandMsg () {
      if (!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)
    },
    submit () {
      if (!this.postData.captcha) {
        this.$toast('请先获取验证码')
        return
      }
      if (!this.postData.case) {
        this.$toast('请选择案场')
        return
      }
      if (!this.postData.sales) {
        this.$toast('请选择销售')
        return
      }
      this.submitData(this.postData).then((res) => {
        this.$toast(res)
        if (this.$route.query.isLottery) {
          setTimeout(() => {
            const from = this.$route.query.luckshare ? `#/from/${this.$route.query.luckshare}` : ''
            window.location.href = `${window.location.origin}/game/luckdraw/${from}`
          }, 2000)
        } else {
          setTimeout(() => {
            // this.$router.push({name: 'userCenter'})
            window.history.go(-1)
          }, 300)
        }
      })
    }
  }
}
</script>

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