forked from angelo/web-retail-h5
166 lines
4.6 KiB
Vue
166 lines
4.6 KiB
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>
|