107 lines
3.8 KiB
Vue
107 lines
3.8 KiB
Vue
<template>
|
|
<view class="container">
|
|
<scroll-view class="content" scroll-y @scrolltolower="loadMore">
|
|
<view v-for="(item, index) in redPacketList" :key="index">
|
|
<view class="item">
|
|
<view class="item_left">￥{{ item.money }}</view>
|
|
<view class="item_center">
|
|
<view class="title">{{ item.red_package_name }}</view>
|
|
<view class="time">{{ item.end_time }}到期</view>
|
|
<view class="desc">{{ item.scope }}</view>
|
|
</view>
|
|
<view class="item_right">
|
|
<view class="status" @click="showPopup(item)">{{ item.is_received ? '已领取' : '领取' }}</view>
|
|
</view>
|
|
<view class="status2" :data-status="item.is_received ? '' : '待领取'" v-if="!item.is_received"></view>
|
|
</view>
|
|
</view>
|
|
<!-- 加载状态 -->
|
|
<view v-if="loading" class="loading">加载中...</view>
|
|
</scroll-view>
|
|
<view class="bottom">
|
|
<view @click="goRedPacket()">我的权益</view>
|
|
</view>
|
|
|
|
<!-- 弹窗 -->
|
|
<view v-if="popupVisible" class="popup-overlay" @click="hidePopup">
|
|
<view class="popup-content" @click.stop>
|
|
<view class="popup-icon">
|
|
<view class="checkmark"></view>
|
|
</view>
|
|
<view class="popup-title">领取成功!</view>
|
|
<view class="popup-desc">{{ currentItem.red_package_name }}{{ currentItem.money }}元已存入您的账户</view>
|
|
<button class="popup-btn" @click="hidePopup">确定</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import { menuButtonInfo, NavgateTo, picUrl, request } from '../../../utils/index';
|
|
import { apiArr } from '../../../api/user';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
redPacketList: [],
|
|
popupVisible: false,
|
|
currentItem: null,
|
|
page_num: 1,
|
|
page_size: 10,
|
|
loading: false,
|
|
noMore: false
|
|
}
|
|
},
|
|
methods: {
|
|
async getRedPacketCenter() {
|
|
const params = {
|
|
pageNum: this.page_num,
|
|
pageSize: this.page_size,
|
|
}
|
|
const res = await request(apiArr.redPackageCenter, 'POST', params);
|
|
// 触底加载时合并数据，而不是替换
|
|
if (this.page_num === 1) {
|
|
this.redPacketList = res.rows;
|
|
} else {
|
|
this.redPacketList = [...this.redPacketList, ...res.rows];
|
|
}
|
|
// 判断是否还有更多数据
|
|
this.noMore = res.rows.length < this.page_size;
|
|
this.loading = false;
|
|
},
|
|
showPopup(item) {
|
|
if (item.is_received) {
|
|
return
|
|
}
|
|
const params = {
|
|
user_id: uni.getStorageSync('userId'),
|
|
red_package_config_id: item.id,
|
|
}
|
|
request(apiArr.redPackageClaim, 'POST', params).then(res => {
|
|
this.currentItem = item;
|
|
this.popupVisible = true;
|
|
this.getRedPacketCenter()
|
|
})
|
|
},
|
|
hidePopup() {
|
|
this.popupVisible = false;
|
|
this.currentItem = null;
|
|
},
|
|
goRedPacket() {
|
|
NavgateTo('/packages/user/myRedPacket/index');
|
|
},
|
|
// 触底加载更多
|
|
loadMore() {
|
|
if (this.loading || this.noMore) return;
|
|
this.loading = true;
|
|
this.page_num++;
|
|
this.getRedPacketCenter();
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getRedPacketCenter();
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
@import url("./index.css");
|
|
</style> |