yicangzongtai_app_240321/pages/order/banks/mobileCode.vue

<template>
  <view class="container-mobile">
    <navbar ref="navbar" :config="config" backColor="#666"></navbar>
    <view class="mobile-box">
      <view class="tip">
        请输入银行预留手机号发送的短信验证，切记他人索取拒绝提供。
      </view>
      <view class="sms">
        <u-input v-model="sms_code" type="number" maxlength="6" :clearable="false" placeholder="请输入预留手机号验证码" />
        <!-- <view class="retry-gary" :class="{'retry': count > 0}" v-if="type == 'pay'" @click="retrySms"><text
            v-if="count > 0">{{count}}S后</text>重发</view> -->
      </view>
    </view>
    <view class="footer">
      <!-- <view class="btn" v-if="type == 'pay'" @click="submit('pay')">确认支付</view> -->
      <view class="btn" @click="submit('add')">提交</view>
    </view>
  </view>
</template>

<script>
  let timer
  export default {
    data() {
      return {
        config: {
          back: true, //false是tolbar页面 是则不写
          title: '新增银行卡',
          color: '#1a1a1a',
          //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
          backgroundColor: [1, '#fff'],
          statusBarFontColor: '#FFFFFF'
        },
        sms_code: '',
        type: '',
        cardid: '',
        count: 10,
        payment_id: ''
      }
    },
    onLoad(options) {
      if (options && options.type) {
        this.type = options.type
        // if (options.type == 'add') {
        this.cardid = options.id
        // this.$set(this.config, 'title', '新增银行卡');
        // }
        //  else if (options.type == 'pay') {
        //   this.payment_id = options.payment_id
        //   this.$set(this.config, 'title', '确认付款');
        //   timer = setInterval(() => {
        //     this.count--
        //     if (this.count == 0) {
        //       clearInterval(timer)
        //     }
        //   }, 1000)
        // }
        // this.$nextTick(() => {
        //   this.$refs.navbar.init();
        // })
      }
    },
    onUnload() {
      // clearInterval(timer)
    },
    methods: {
      retrySms() {
        if (count > 0) return this.$mUtil.toast('请稍后');
        uni.showLoading({
          title: '重发中...'
        })
        this.$http.post('/pay/order/kjRepeatSendSms', {
          payment_id: this.payment_id
        }).then(res => {
          uni.hideLoading()
          if (res.code == 200) {
            this.$mUtil.toast('短信验证码重发成功');
          } else {
            this.$mUtil.toast('服务异常! 请重试');
          }
        }).catch(err => {
          uni.hideLoading()
          this.$mUtil.toast('服务异常！');
        })
      },
      submit(type) {
        if (!this.sms_code) {
          return this.$mUtil.toast('短信验证码不能为空');
        }
        uni.showLoading({
          title: '提交中...'
        })
        let url
        let data = {}
        // if (type == 'pay') {
        //   url = '/pay/order/kjPayConfirm'
        //   data.payment_id = this.payment_id
        //   data.sms_code = this.sms_code
        // } else if (type == 'add') {
        url = '/usercard/createCardConfirm'
        data.sms_code = this.sms_code
        data.id = this.cardid
        // }
        this.$http.post(url, data).then(res => {
          uni.hideLoading()
          if (res.code == 200) {
            // if (type == 'add') {
            this.$mUtil.toast("验证成功")
            setTimeout(() => {
              uni.navigateBack()
              // uni.redirectTo({
              //   url: '/pages/order/banks/list'
              // })
            }, 500)

            // }else if (type == 'pay') {
            //   this.$mUtil.toast("支付成功")
            //   setTimeout(() => {
            //     uni.redirectTo({
            //       url: '/pages/order/orderList/orderList?keys=-1'
            //     })
            //   }, 500)
            // }
          }
        }).catch(err => {
          uni.hideLoading()
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container-mobile {
    .mobile-box {
      padding: 40rpx;

      .tip {
        margin-bottom: 40rpx;
        font-size: 28rpx;
        font-weight: 700;
      }

      .sms {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .retry-gary {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 180rpx;
          margin-left: 40rpx;
          padding: 20rpx 10rpx;
          background-color: #FA6138;
          border-radius: 10rpx;
          color: #fff;
        }

        .retry {
          background-color: gray;
        }
      }

      /deep/ .u-input {
        border-bottom: 2rpx solid #dcdfe6;
      }
    }

    .footer {
      width: 100%;
      padding: 30rpx 60rpx;
      position: fixed;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #fff;
      z-index: 9;

      .btn {
        width: 100%;
        color: #fff;
        text-align: center;
        line-height: 85rpx;
        border: 1rpx solid #3775F6;
        border-radius: 44rpx;
        background-color: #FA6138;
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
      }
    }
  }
</style>