首页/提现公告弹窗优化更新

pages/me/withdraw/index.vue

@@ -1,13 +1,12 @@
 <template>
 	<view class="container">
 		 <up-navbar title="申请提现"
-		            @rightClick="data.ruleShow = true"
 					bgColor="rgb(255, 117, 129)"
 					leftIconColor="#FFF"
 					:titleStyle ="{color:'#FFF'}" >
 				<template #right>
 				     <view class="u-p-r-30 u-flex u-col-center" style="color: #fff;">
-				     	<text class="rule-btn" @click="data.ruleShow = true">规则</text>
+				     	<text class="rule-btn" @click="showRule">规则</text>
 				     </view>
 				</template>
 		</up-navbar>
@@ -72,13 +71,13 @@
 
 		</view>
 
-		<up-modal :show="data.ruleShow" confirm-text="知道了" title="规则说明" :title-style="{fontWeight:'700'}" @confirm="data.ruleShow=false" confirm-color="rgb(255, 117, 129)">
+		
+		<up-modal :show="data.ruleShow" confirm-text="知道了" title="规则说明" :title="data.rule_title" :title-style="{fontWeight:'700'}" @confirm="ruleConfirm" confirm-color="rgb(255, 117, 129)">
 			<view class="u-p-30 u-text-left">
 				<scroll-view scroll-y="true" style="max-height: 50vh;" >
-					<rich-text style="text-align: justify;font-size: 18px;color: #666;" :nodes="data.ruleInfo"></rich-text>
+					<rich-text style="text-align: justify;font-size: 18px;color: #666;" :nodes="data.rule_content"></rich-text>
 				</scroll-view>
 			</view>
-			
 		</up-modal>
 		
 		<view style="width: 0;height: 0;overflow: hidden;">
@@ -96,27 +95,14 @@
 	import { onReady,onLoad,onShow,onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
 	import { selectUserMoney, selectPayDetails, canCash, state, withdraw } from '@/api/me/withdraw.js';
 	import { selectUserById } from '@/api/user/user.js';
+	import { announcement } from '@/api/index/index.js';
 	import { commonType } from '@/api/init.js';
 	import { linkTo } from '@/utils/app.js';
 	
 	let data = reactive({
 		ruleShow: true,
-		ruleInfo: `
-		用户在平台中对奖励提现的，适用以下规则：
-		<br/>
-		<br/>
-		1，用户的收益达到最低提现金额要求后，可以申请提现，每日只可以提现一笔。
-		<br/>
-		2，用户需要通过支付宝提现，需按照要求绑定支付宝账号并填写提现金额或其他提现所需信息，请确保提供的信息准确无误，以免提现失败。
-		<br/>
-		3，如果用户发现显示「提现失败」，需确认当前填写或绑定的支付宝账号或银行卡账号是否正确，以及支付宝账号是否可用。如果用户发现显示「提现成功」但没到账
-		<br/>
-		(1)如果用户有多个支付宝账号，请检查用户是否提现到了其他支付宝账号。
-		<br/>
-		(2)高峰期提现人数多会导致网络拥堵，显示提现成功之后72小时内属于正常现象，请耐心等候。
-		<br/>
-		4，每日08:00至次日18:00为提现时间，活动的对应奖励可能延迟到账。提现通常会在72小时内到账，如遇双休日、节假日，提现到账时间可能会延长。活动高峰期间，由于网络拥堵，用户可能存在短时间内无法提现的情况。平台将尽最大努力及时恢复提现功能，但无需因此承担任何责任。
-		<br/>`,
+		rule_title: "",
+		rule_content: "",
 		money: '',
 		mayMoney: '0',
 		list: [],
@@ -129,16 +115,24 @@
 		adRewardedVideoloadNum: 0,
 		isWithdraw: false,
 		userInfo: null,
+		ruleIndex: 0,
+		ruleList: []
 	})
 	
 	const adRewarded = ref(null);
 	onLoad(() => {
 		getExtractFei();
 		getMoneyDetail();
+		
 	})
 	onShow(() => {
 		getcashMoney()
 		getUserInfo();
+		announcement({type: 1}).then(res=>{
+			data.ruleList = res
+			ruleInit()
+			data.ruleShow = true
+		})
 	})
 	onReady(() => {
 		nextTick(()=>{
@@ -150,14 +144,49 @@
 	onReachBottom(() => {
 		if (data.page * data.limit < data.totalCount) {
 			data.page = data.page + 1;
-			data.getMoneyDetail();
+			getMoneyDetail();
 		}
 	})
 	onPullDownRefresh(() => {
 		data.page = 1;
 		data.list = []
-		data.getMoneyDetail();
+		getMoneyDetail();
 	})
+	function ruleInit(){
+		data.rule_title = data.ruleList[data.ruleIndex].title
+		data.rule_content = data.ruleList[data.ruleIndex].content
+	}
+	/**
+	 * 规则弹窗打开
+	 */
+	function showRule() {
+		if( data.ruleList.length <= 0) {
+			uni.showToast({
+				title: "暂未配置规则",
+				icon: 'none'
+			})
+			return
+		}
+		ruleInit()
+		data.ruleShow = true
+	}
+	/**
+	 * 规则确认
+	 */
+	function ruleConfirm() {
+		data.ruleShow = false
+		data.ruleIndex++
+		console.log(data.ruleIndex >= data.ruleList.length)
+		if( data.ruleIndex >= data.ruleList.length) {
+			data.ruleIndex = 0
+			return
+		}
+		setTimeout(res=>{
+			ruleInit()
+			data.ruleShow = true
+		},300)
+	}
+	
 	function getUserInfo() {
 		selectUserById().then(res=>{
 			data.userInfo = res;