yitisheng-mini-app/pages/zyb/user/bindPhone.vue

<!--卡密激活 页面-->
<script>
import StaticConstant from "@/common/StaticConstant";
import ApiConstant from "@/common/ApiConstant";
import Request from '@/common/request'
import user from "@/pages/zyb/user/index.vue";
import commonTool from "../../../common/js/commonTool";
import {stringIsNotEmpty} from "../../../common/util";
let request = new Request()
export default {
  name: "cardamom",
  computed: {
    StaticConstant() {
      return StaticConstant
    }
  },
  data() {
    return {
      userInputPhone: '', // 卡账号
      buttonFlag:true,//
      message:''
    }
  },
  methods: {
    phoneInput(e) {
      setTimeout(() => {
         // 过滤非数字和非小写字母字符
        this.userInputPhone = e.detail.value.replace(/[^0-9]/g, '')
        const chinesePhoneNumberRegex = /^1[345789]\d{9}$/;
        if (!chinesePhoneNumberRegex.test(this.userInputPhone)) {
          this.buttonFlag = true
        } else {
          this.buttonFlag = false
        }
      },0)
    },
    /*绑定手机号*/
    bindPhone(){
      //先判断是否可绑定
      request.post(ApiConstant.User.dyCheckBindPhone, {phone: this.userInputPhone},{showLoad:false}).then(r => {
        console.log(r)
        if (r.success) {
          if(r.result.status === 0){
            //未绑定过
            this.message = '确认绑定此手机号吗'
            this.$refs.alertDialog.open()
          }else if(r.result.status === 1){
            uni.showToast({title: '该手机号已存在', icon: "none"});
            return
          }if (r.result.status === 2) {
            //已经绑定过微信了
            this.message = '该手机号已绑定过微信'
            //uni.showToast({title: '该手机号已绑定过微信', icon: "none"});
            this.$refs.alertDialog.open()
            return
          }
        }else{
          uni.showToast({title: r.message, icon: "none"});
        }
      }).catch(err => {
      }).finally(() => {
      });
    },
    dialogConfirm() {
      console.log('点击确认')
      request.post(ApiConstant.User.dyBindPhone, {phone: this.userInputPhone}).then(r => {
        console.log(r)
        if (r.success) {
          setTimeout(() => {
            uni.showToast({title: '已绑定,请重新登录', icon: "none"});
          },0)
          uni.removeStorageSync('userInfo')
          uni.removeStorageSync('token')
          setTimeout(() => {
            wx.reLaunch({
              url: '/pages/zyb/login',
            })
          },800)
        }else{
          uni.showToast({title: r.message, icon: "none"});
        }
      }).catch(err => {
      }).finally(() => {
      });
    },
    dialogClose(){
      console.log('点击关闭')
    }
  }
}
</script>

<template>
  <view>
    <!-- 提示窗示例 -->
    <uni-popup ref="alertDialog" type="dialog">
      <uni-popup-dialog type="info" cancelText="关闭" confirmText="同意" title="通知" :content="message" @confirm="dialogConfirm"
                        @close="dialogClose"></uni-popup-dialog>
    </uni-popup>
  </view>
  <view class="card radius8">
    <view class="card-label">绑定手机号码</view>
    <view class="card-body">
      <input class="input radius8" type="text" placeholder="请输入手机号码" v-model="userInputPhone"
             maxlength="11" @input='phoneInput'/>
      <button type="primary" style="margin-top: 20rpx" class="radius8" @click="bindPhone"
              :disabled="buttonFlag">绑定
      </button>
    </view>
  </view>
  <view class="card radius8">
    <view class="card-label">提示</view>
    <view class="card-body">
      <view class="text-body">
        <text class="text-item">-当前尚未补充手机号，为了更方便为您提供售后服务，请补充您的手机号码。</text>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
/*卡片 start*/
.card {
  background-color: white;
  margin: 30rpx 30rpx 20rpx 30rpx;
}

.card .card-label {
  font-size: 33rpx;
  height: 60rpx;
  line-height: 60rpx;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #f4f5f7;
}

.card .card-body {
  padding: 30rpx 30rpx;
}

/*卡片 end*/
.card .card-body .input {
  padding: 20rpx;
  line-height: 100rpx;
  border: 1rpx solid #c1c4cc;
}


/*兑换按钮 start*/
.ktBtn {
  border: 1rpx solid #3d76fd;
  background-color: #3d76fd !important;
  color: white;
  font-size: 35rpx;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  transition: 0.1s;
  margin: 20rpx 0;
  cursor: pointer;
}

.ktBtn-active {
  border: 1rpx solid #3d76fd;
  background-color: #3d76fd;
}

/*.ktBtn:active {
  border: none;
  background-color: #f8f8f8;
  color: white;
}*/
/*兑换按钮 end*/

/*使用须知*/
.text-body {
  margin-top: 30rpx;
}

.text-body .text-item {
  display: flex;
  justify-items: left;
  font-size: 30rpx;
  color: #606266;
  line-height: 45rpx;
}
</style>