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