forked from angelo/web-retail-h5
157 lines
3.6 KiB
Vue
157 lines
3.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>
|
||
<view class="guide-footer">
|
||
<text>请大家尽快办理，有疑问可随时联系我们，感谢配合！</text>
|
||
</view>
|
||
<view class="qr-code-section">
|
||
<image
|
||
class="qr-code-image"
|
||
src="/static/images/with-drawal-mini-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 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>
|