hlm_pl_mall_h5/pages/member/common/CommonSendCode.vue

<template>
  <view class="div common-send-code">
      <flex-line :show-border="true">
      <text class="span line-name">验证方式</text>
      <view class="div" slot="right">
          <radio-group @change="radioChange">
            <label v-for="(item, index) in verifyTypeOptions" :key="index">
              <radio :value="item.value" :checked="verifyType==item.value" />
              <text>{{item.label}}</text>
            </label>
          </radio-group>
      </view>
      </flex-line>
	  <flex-line class="field-line" :show-border="true"><text class="span field-name">验证码</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="verifyCode"></view><view slot="right"><view @click="sendAuthCode" class="btn div common-btn plain default ds-button-small"   >{{sendStateText}}</view></view></flex-line>
      <view class="div common-btn ds-button-large mt-10" @click='checkAuthCode'>下一步</view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import { sendAuthCode, checkAuthCode } from '../../../api/memberSetting'
import flexLine from '../../flexLine'
export default {
  name: 'CommonSendCode',
  components:{
  flexLine,
  },
  data () {
    return {
      verifyType: 'email',
      verifyCode: '',
      canSend: true,
      sendStateText: '发送',
      verifyTypeOptions: []
    }
  },
  beforeDestroy: function () {
    clearInterval(this.time_interval)
  },
  created: function () {
    if (this.user.member_mobilebind && this.user.member_mobile) {
      this.verifyTypeOptions.push({
        label: '手机',
        value: 'mobile'
      })
      this.verifyType = 'mobile'
    }
    if (this.user.member_emailbind && this.user.member_email) {
      this.verifyTypeOptions.push({
        label: '邮箱',
        value: 'email'
      })
    }
  },
  computed: {
    ...mapState({
      user: state => state.member.info
    })
  },
  methods: {
    radioChange(e){
      this.verifyType=e.detail.value
    },
    sendAuthCode () {
      if (!this.canSend) {
        return
      }
      sendAuthCode(this.verifyType).then(res => {
        this.canSend = false
        let second = 60
        uni.showToast({icon:'none',title: res.message})
        let _this = this
        this.time_interval = setInterval(function () {
          if (second <= 0) {
            _this.canSend = true
            _this.sendStateText = '发送'
            clearInterval(_this.time_interval)
          } else {
            _this.sendStateText = second + 's'
          }

          second--
        }, 1000)
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    },
    checkAuthCode () {
      checkAuthCode(this.verifyCode).then(res => {
        this.$emit('checkSuccess')
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    }

  }
}
</script>
<style  lang="scss" scoped>
    .common-send-code {
        position: relative;
        z-index: 100;
        padding:0 $pageSpace;
    }
</style>
<style  lang="scss">
    .common-send-code {position:relative;z-index:100;top: 1px;
		.btn{width:4rem}
        .mint-radiolist {
            display: flex;
            .mint-cell {
                flex: 1;
                .mint-radio-input:checked + .mint-radio-core {
                    background-color: $primaryColor !important;
                    border-color: $primaryColor !important;
                }
                &:after{display: none}
            }
        }
		.field-input{text-align: left !important;}
    }
</style>