web-store-retail-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>
      <view class="guide-footer">
        <text>请大家尽快办理，有疑问可随时联系我们，感谢配合！</text>
      </view>
      <view class="qr-code-section">
        <image
          class="qr-code-image"
          src="https://bd-qd.oss-cn-beijing.aliyuncs.com/online_tmp/appletCode.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 32rpx 32rpx;

  .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>