MoeNovaClient/pages/my/DelMemConfirm.vue

<template>
  <view class="page">
    <view class="list_info">
      <view class="title">为保证你的账号安全，在你提交的注销申请生效前，需同时满足以下条件</view>

      <view class="content">
        <view class="paragraph">
          <view class="subheading">1. 账号处于安全状态</view>
          <view class="subtitle">账号处于正常使用状态，无被盗风险</view>
        </view>
        <view class="paragraph">
          <view class="subheading">2.账号权限解除</view>
          <view class="subtitle">账号已解除与其他产品的授权登录或绑定关系</view>
        </view>
        <view class="paragraph">
          <view class="subheading">3.账号无任何纠纷，包括投诉举报</view>
          <view class="subtitle">本账号及通过本账号接入的第三方产品中没有未完成和/或存在争议的服务
            <view style="margin-top: 10rpx;">本账号无任何纠纷，包括投诉举报、侵权等</view>
          </view>
        </view>
        <view class="paragraph red">
          注意：删除账号后，你将无法找回账号信息，你的所有数据和消息也会一并删除
        </view>
      </view>
      <view class="agree">
        <checkbox-group @change="agreeChange">
          <label>
            <checkbox value="agree" :checked="agree" :class="{ 'checked': agree, 'custom-checkbox': true }"
              style="display: none;" />
            <view class="custom-checkbox-box" :class="{ 'checked': agree }"></view>
          </label>
        </checkbox-group>
        <text @click="goPage()"><text style="color: #7c7c7c;padding-right: 5rpx;">我已阅读并同意</text> 注销协议</text>
      </view>
      <view class="btn_submit" @click="nextStep" :class="{ disabled: !agree }">下一步</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      agree: false,
    };
  },
  methods: {
    goPage() { 
      uni.navigateTo({
        url: '/pages/AboutUs/UserLogoutAgreement'
      })

    },
    agreeChange(e) {
      this.agree = e.detail.value.includes('agree');
    },
    nextStep() {
      if (this.agree) {
        uni.navigateTo({
          url: '/pages/my/DelMemVerify',
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.page {
  padding: 40rpx;
  box-sizing: border-box;
}

.list_info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  color: #1F1F1F;

  .title {
    margin-top: 60rpx;
    font-family: 'PingFang SC-Bold';
    font-weight: 400;
    font-size: 40rpx;
    margin-bottom: 34rpx;
  }

  .paragraph {
    margin-bottom: 36rpx;

    .subheading {
      font-size: 28rpx;
      font-family: 'PingFang SC-Bold';
      font-weight: 400;
    }

    .subtitle {
      margin-top: 4rpx;
      font-size: 24rpx;
      font-family: 'PingFang SC';
      font-weight: 400;
      color: #7C7C7C;
    }

    &.red {
      color: #FF0000;
      font-size: 24rpx;
      font-weight: 400;
    }
  }

  .agree {
    margin-top: 200rpx;
    text-align: left;
    width: 626rpx;
    color: #333;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    font-family: 'PingFang SC-Medium';

    .custom-checkbox-box {
      display: inline-block;
      width: 28rpx;
      height: 28rpx;
      background-image: url('../../static/icon/wd_icon_gouxuan01.png'); // 未选中状态图片路径
      background-size: cover;
      margin-right: 10rpx;
      vertical-align: middle;

    }

    .custom-checkbox-box.checked {
      background-image: url('../../static/icon/wd_icon_gouxuan02.png'); // 选中状态图片路径 
    }
  }

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

    &.disabled {
      background: #999;
    }
  }
}
</style>