xdd-uniapp-new/pkg_user/views/bindPhone.vue

<template>
  <view class="user-bindPhone">
    <view class="input-box flex ai-center" style="margin-bottom: 32rpx">
      <image class="icon-phone flex-0" :src="webUrl+'/20220925102913233030.png'"/>
      <input v-model="phone" type="number" placeholder="请填写手机号码" placeholder-style="color:#E2E2E2"/>
    </view>

    <view class="flex jc-between ai-center">
      <view class="input-box flex ai-center">
        <input v-model="captcha" type="text" placeholder="请填写验证码" placeholder-style="color:#E2E2E2"/>
      </view>

      <button class="btn-code" :class="disabled === true ? 'on' : ''"
              :disabled="disabled" @click="code">{{ text }}
      </button>
    </view>

    <button class="btn-save" @click="confirm">确认绑定</button>
  </view>
</template>

<script>
import {mapGetters} from "vuex";
import sendVerifyCode from "@/mixins/SendVerifyCode";
import {required, alpha_num, chs_phone} from "@/utils/validate";
import {validatorDefaultCatch} from "@/utils/dialog";
import {registerVerify, bindingPhoneByInput} from "@/api/user";
import { pageListenMixins } from '@/mixins/pageListenMixins'

export default {
  name: "BindingPhone",
  mixins: [pageListenMixins],
  data: function () {
    return {
      webUrl: this.$VUE_APP_RESOURCES_URL,
      captcha: "",
      phone: "",
      pageKeyId: Object.freeze('userConfigPhone')
    };
  },
  mixins: [sendVerifyCode],
  computed: mapGetters(["userInfo"]),
  mounted: function () {
  },
  methods: {
    async confirm() {
      let that = this;
      const {phone, captcha} = that;
      try {
        await that
            .$validator({
              phone: [
                chs_phone(chs_phone.message("手机号码")),
                alpha_num(alpha_num.message())
              ],
              captcha: [
                required(required.message("验证码")),
                alpha_num(alpha_num.message("验证码"))
              ]
            })
            .validate({phone, captcha});
      } catch (e) {
        return validatorDefaultCatch(e);
      }
      bindingPhoneByInput({
        phone: this.phone,
        captcha: this.captcha
      })
          .then(res => {
            if (res.data !== undefined && res.data.is_bind) {
              uni.showModal({
                title: "提示",
                content: "确认绑定?",
                success: function (res) {
                  if (res.confirm) {
                    bindingPhoneByInput({
                      phone: this.phone,
                      captcha: this.captcha,
                      step: 1
                    })
                        .then(res => {
                          uni.showToast({
                            title: res.msg,
                            icon: "none",
                            duration: 2000
                          });
                          that.$yrouter.replace({
                            path: "/pkg_user/views/personalData"
                          });
                        })
                        .catch(res => {
                          uni.showToast({
                            title: res.msg,
                            icon: "none",
                            duration: 2000
                          });
                          that.$yrouter.replace({
                            path: "/pkg_user/views/personalData"
                          });
                        });
                  } else if (res.cancel) {
                    uni.showToast({
                      title: "已取消绑定",
                      icon: "none",
                      duration: 2000
                    });
                    that.$yrouter.replace({
                      path: "/pkg_user/views/personalData"
                    });
                  }
                }
              });
            } else {
              uni.showToast({
                title: res.msg,
                icon: "none",
                duration: 2000
              });
              that.$yrouter.replace({
                path: "/pkg_user/views/personalData"
              });
            }
          })
          .catch(res => {
            uni.showToast({
              title: res.msg,
              icon: "none",
              duration: 2000
            });
          });
    },
    async code() {
      let that = this;
      const {phone} = that;
      try {
        await that
            .$validator({
              phone: [
                required(required.message("手机号码")),
                chs_phone(chs_phone.message())
              ]
            })
            .validate({phone});
      } catch (e) {
        return validatorDefaultCatch(e);
      }

      registerVerify({phone: phone})
          .then(res => {
            uni.showToast({
              title: res.msg,
              icon: "none",
              duration: 2000
            });
            that.sendCode();
          })
          .catch(res => {
            uni.showToast({
              title: res.msg,
              icon: "none",
              duration: 2000
            });
          });
    }
  }
};
</script>

<style scoped lang="less">
.user-bindPhone {
  min-height: 100vh;
  padding: 60rpx 32rpx;
  background: #F9F9F9;
  font-size: 28rpx;
  line-height: 40rpx;

  button {
    border-radius: 8rpx;
    color: #FFFFFF;
    font-size: 28rpx;
    font-weight: bold;
  }

  button:after {
    display: none;
  }

  .input-box {
    height: 100rpx;
    padding: 0 36rpx;
    border-radius: 8rpx;
    background: #FFFFFF;
    color: #999999;

    .icon-phone {
      width: 48rpx;
      height: 48rpx;
      vertical-align: middle;
      margin-right: 20rpx;
    }

    input {
      font-size: 28rpx;
      line-height: 40rpx;
    }
  }

  .btn-code {
    width: 200rpx;
    height: 72rpx;
    margin: 0 0 0 32rpx;
    background: #28AAF4;
    line-height: 72rpx;
  }

  .btn-save {
    height: 80rpx;
    margin-top: 80rpx;
    background: #C52733;
    line-height: 80rpx;
  }
}
</style>