MoeNovaClient/pages/my/DelMemVerify.vue

<template>
  <view class="page">
    <view class="list_info">
      <view class="title">删除账号</view>
      <view class="subtitle">若要继续，你需要完成短信验证。请输入我们通过短信发送的验证码</view>
      <view class="subtitle">验证码已发送至{{ formatPhoneNumber(phoneNumber) }}</view>

      <view class="card">
        <!-- <view class="title">block</view> -->
        <!-- <view><button @click="onClear" style="background: #ff5500; color: #fff;">清除内容</button></view> -->
        <view class="body">
          <yi-code ref="code" inputType="number" :width="660" :maxlength="6" @onComplete="complete"></yi-code>
        </view>
      </view>


      <view class="blankHeight"></view>
    </view>
    <view class="code">
      <view class="btn" v-if="captchaTime === 0" @click="obtainVerificationCode()">重新发送</view>
      <view class="btn disabled" v-else>{{ captchaTime }}秒后重试</view>
    </view>
    <view class="btn_submit" @click="DelMem()">确认删除</view>
    <DialogBox ref="DialogBox"></DialogBox>
  </view>
</template>

<script>
import DialogBox from '@/components/DialogBox/DialogBox.vue';

export default {
  components: { DialogBox },
  data() {
    return {
      mobile: '',
      code: '',
      captchaTime: 0,
      phoneNumber: '',
    };
  },
  onLoad() {
    this.loadUserInfo();
    this.obtainVerificationCode();
  },
  methods: {
    onClear() {
      this.$refs.code.clear()
    },
    complete(code) {
      console.log(`complete:${code}`);
    },

    formatPhoneNumber(phoneNumber) {
      if (phoneNumber && phoneNumber.length === 11) {
        return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
      }
      return phoneNumber;
    },
    loadUserInfo() {
      // 这里添加获取用户信息的逻辑
      // 获取手机号等信息
      uni.request({
        url: this.$apiHost + "/User/getinfo",
        data: {
          uuid: getApp().globalData.uuid,
          skey: getApp().globalData.skey,
        },
        header: {
          "content-type": "application/json",
          sign: getApp().globalData.headerSign,
        },
        success: (res) => {
          this.phoneNumber = res.data.mobile;
        },
        complete: (com) => {
        },
        fail: (e) => {
          console.log("----e:", e);
        },
      });
    },
    obtainVerificationCode() {
      if (this.code) {
        this.onClear();
      }
      uni.request({
        url: this.$apiHost + "/Member/getcode",
        data: {
          uuid: getApp().globalData.uuid,

        },
        header: {
          'content-type': 'application/json'
        },
        success: (res) => {

          uni.showToast({
            title: res.data.str,
            icon: 'none'
          })
          if (res.data.success == 'yes') {
            this.getCodeTime();
          } else {
            this.captchaTime = 0;
          }
        }
      });
    },
    DelMem() {
      var that = this;
      //   验证原始手机号 
      uni.request({
        url: this.$apiHost + '/Member/checkMobile',
        data: {
          uuid: getApp().globalData.uuid,
          code: this.code,
        },
        header: {
          'content-type': 'application/json'
        },
        success: (res) => {
          console.log("----", res.data);
          uni.showToast({
            title: res.data.str,
            icon: 'none'
          });
          if (res.data.success == "yes") {
            var that = this;
            this.$refs['DialogBox'].confirm({
              title: '警告',
              content: '1、注销账号是不可逆操作，该账号下所有一切资料一旦注销无法恢复；\n2、注销后，你账号下所有权益将被清除。',
              DialogType: 'inquiry',
              btn1: '否',
              btn2: '是',
              animation: 0
            }).then(() => {
              uni.request({
                url: that.$apiHost + '/My/delete', //检测是否已绑定
                data: {
                  uuid: getApp().globalData.uuid
                },
                header: {
                  'content-type': 'application/json' //自定义请求头信息
                },
                success: (res) => {
                  uni.removeStorageSync("wapptoken");
                  uni.redirectTo({
                    url: '/pages/login/login',
                  })

                }
              });
            })
          }
        }
      });


    },
    getCodeTime() {
      this.captchaTime = 60;
      let timer = setInterval(() => {
        this.captchaTime--;
        if (this.captchaTime < 1) {
          clearInterval(timer);
          this.captchaTime = 0
        }
      }, 1000)
    },

  },
};
</script>

<style scoped lang="scss">
.list_info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  color: #fff;
  width: 750rpx;

  .title {
    text-align: center;
    margin-top: 96rpx;
    width: 100%;
    font-weight: 600;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 48rpx;
    color: #1F1F1F;
  }

  .subtitle {
    font-size: 24rpx;
    font-weight: 400;
    color: #959595;
    text-align: center;
    margin-top: 20rpx;
    width: 100%;
  }

  .phone_input {
    width: 626rpx;
    height: 84rpx;
    margin-top: 96rpx;
    background: #ffffff;
    border-radius: 24rpx;
    display: flex;
    align-items: center;
    border: 4rpx solid #000000;
    border-radius: 74rpx;

    .area_code {
      padding: 0 20rpx;
      font-size: 28rpx;
      color: #333;
      border-right: 1rpx solid #e0e0e0;
    }

    .input {
      flex: 1;
      height: 100%;
      padding-left: 20rpx;
      font-size: 28rpx;
      color: #333;
    }
  }

  .code_input {
    width: 626rpx;
    height: 84rpx;
    margin-top: 20rpx;
    background: #ffffff;
    border-radius: 24rpx;
    display: flex;
    align-items: center;
    border: 4rpx solid #000000;
    border-radius: 74rpx;
    padding-right: 8rpx;

    .input {
      flex: 1;
      height: 100%;
      padding-left: 20rpx;
      font-size: 28rpx;
      color: #333;
    }

    .btn {
      padding: 11rpx 26rpx;
      font-size: 28rpx;
      background: #000000;
      border-radius: 74rpx;
      font-family: 'PingFang SC-Bold';

      &.disabled {
        color: #999;
        background: transparent;
      }
    }
  }

  .btn_submit {
    width: 660rpx;
    height: 96rpx;
    margin: 0 auto;
    margin-top: 74rpx;
    background: #1f1f1f;
    border-radius: 50rpx;
    font-weight: bold;
    font-size: 32rpx;
    color: #ffffff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .card {
    margin: 40rpx auto;
    color: #000000;

    .title {
      font-size: 14px;
      text-align: center;
      line-height: 30px;
      border-bottom: 1px solid #f0f0f0;
    }

    .body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 150rpx;
    }

  }
}

::v-deep.yi-code {
  .yi-code-show {
    .yi-code-show-item {
      width: 90rpx;
      height: 90rpx;
      border: 4rpx #000 solid;
      border-radius: 20rpx;

      &.yi-code-show-active {
        border: solid 2px #ff5500;
        animation: myfirst 600ms infinite;

        @keyframes myfirst {
          0% {
            opacity: 0.1
          }

          100% {
            opacity: 1
          }
        }
      }
    }
    .yi-code-hide {
			height: 90rpx; 
		}
  }
}

.btn {
  color: #0084FF;
  text-align: center;
  font-family: 'PingFang SC-Medium';
  font-weight: 400;

  &.disabled {
    color: #7C7C7C;
  }
}

.btn_submit {
  background: #1F1F1F;
  border-radius: 76rpx;
  color: #fff;
  margin: 0 auto;
  margin-top: 500rpx;
  width: 626rpx;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>