web-base-h5/components/withdrawalGuide/index.vue

<template>
  <u-modal
    :show="show"
    :showConfirmButton="true"
    :showCancelButton="false"
    confirmText="我知道了"
    @confirm="handleConfirm"
    :closeOnClickOverlay="false"
    width="640rpx"
    :customStyle="{ 'border-radius': '16rpx' }"
  >
    <view class="withdrawal-guide-content">
      <view class="guide-title">提现绑定操作指南</view>
      <view class="guide-text">
        <text>尊敬的经销商伙伴们：</text>
        <text
          >为保障大家能够顺利、快捷地进行提现操作，同时积极响应并符合十一后国家法律法规的最新要求，现需各位经销商伙伴完成提现绑定操作。以下是详细的操作步骤，请大家按照顺序依次进行：</text
        >
      </view>
      <view class="guide-steps">
        <view class="step-item">
          <text class="step-number">1.</text>
          <text class="step-text"
            >扫码进入签约页面：使用微信扫描指定二维码，进入相关操作界面后，点击“去签约”。</text
          >
        </view>
        <view class="step-item">
          <text class="step-number">2.</text>
          <text class="step-text"
            >在线签约：在跳转的页面中，找到并点击“在线签约”选项。同意隐私政策：仔细阅读隐私政策申明，确认无误后，点击“同意并继续”。</text
          >
        </view>
        <view class="step-item">
          <text class="step-number">3.</text>
          <text class="step-text"
            >绑定手机号码：输入绑卡人的手机号码，获取验证码，将收到的验证码准确输入后，点击“下一步”。</text
          >
        </view>
        <view class="step-item">
          <text class="step-number">4.</text>
          <text class="step-text"
            >上传身份证照片：可选择现场拍摄身份证正反面照片，或从手机相册中选取已保存的身份证正反面照片进行上传，上传完成后点击“下一步”。</text
          >
        </view>
        <view class="step-item">
          <text class="step-number">5.</text>
          <text class="step-text"
            >输入银行卡号：准确输入银行卡号，系统将提示“签约成功”，随后自动跳转到协议页面。</text
          >
        </view>
        <view class="step-item">
          <text class="step-number">6.</text>
          <text class="step-text"
            >完成手写签名：在协议页面的最下方，进行手写签名操作，签名完成后即完成整个签约流程。</text
          >
        </view>
      </view>
      <view class="guide-footer">
        <text
          >请大家务必尽快办理提现绑定操作，以免影响后续的提现业务。若在操作过程中遇到任何疑问或困难，可随时与我们联系，我们将竭诚为大家提供帮助。感谢大家的理解与配合！</text
        >
      </view>
      <view class="qr-code-section">
        <image
          class="qr-code-image"
          src="@/static/images/qr-code.png"
          mode="aspectFit"
        />
      </view>
    </view>
  </u-modal>
</template>

<script>
export default {
  name: 'WithdrawalGuide',
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    handleConfirm() {
      this.$emit('confirm')
    },
  },
}
</script>

<style lang="scss" scoped>
.withdrawal-guide-content {
  padding: 0rpx 20rpx 20rpx;
  height: 80vh;
  overflow-y: auto;
  .guide-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    text-align: center;
    margin-bottom: 32rpx;
  }

  .guide-text {
    font-size: 26rpx;
    color: #666666;
    line-height: 40rpx;
    margin-bottom: 24rpx;

    text {
      display: block;
      margin-bottom: 16rpx;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .guide-steps {
    margin-bottom: 24rpx;

    .step-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 16rpx;

      .step-number {
        color: #005bac;
        font-size: 26rpx;
        font-weight: bold;
        width: 32rpx;
        flex-shrink: 0;
      }

      .step-text {
        font-size: 26rpx;
        color: #666666;
        line-height: 40rpx;
        flex: 1;
      }
    }
  }

  .guide-footer {
    font-size: 26rpx;
    color: #666666;
    line-height: 40rpx;
    margin-bottom: 32rpx;
    text-align: center;
  }

  .qr-code-section {
    display: flex;
    justify-content: center;
    align-items: center;

    .qr-code-image {
      width: 200rpx;
      height: 200rpx;
      border-radius: 8rpx;
    }
  }
}
</style>