HaniBlindBox/honey_box/pages/infinite/reward_records.vue

<template>
	<page-container title="赏品记录" :showBack="true">
		<view class="tab">
			<view class="tab-item center relative" v-for="(item, i) in tabList" :key="i"
				:class="tabCur == i ? 'act' : 'unact'" @click="tabChange(i)">
				<text>{{ item }}</text>
			</view>
		</view>
		<swiper :current="tabCur" @change="swiperChange" style="width: 100%; height: calc(100vh - 180rpx);">
			<!-- 参与记录 -->
			<swiper-item>
				<scroll-view scroll-y="true" style="width: 100%; margin-top: 24rpx; height: 100%;">
					<view v-for="(item, index) in recordsList" :key="index" class="record-card">
						<view class="flex row align-center"
							style="width: 100%; height: 100%; justify-content: space-between;">
							<view class="flex column" style="margin-left: 24rpx;">
								<text style="font-size: 16rpx; color: #999999;">{{ item.Title }}</text>
								<text style="font-size: 16rpx; color: #999999; margin-top: 8rpx;">{{ item.Time }}</text>
							</view>
							<text style="font-size: 20rpx; color: #999999; margin-right: 24rpx;">{{ item.Content
								}}</text>
						</view>
					</view>
					<view class="empty-tip" v-if="recordsList.length === 0">暂无参与记录</view>
				</scroll-view>
			</swiper-item>

			<!-- 赏品记录 -->
			<swiper-item>
				<scroll-view scroll-y="true" style="width: 100%; margin-top: 24rpx; height: 100%;">
					<view v-for="(item, index) in winningList" :key="index" class="record-card">
						<view class="flex row align-center"
							style="width: 100%; height: 100%; justify-content: space-between;">
							<view class="flex column" style="margin-left: 24rpx;">
								<text style="font-size: 16rpx; color: #999999;">{{ item.Title }}</text>
								<text style="font-size: 16rpx; color: #999999; margin-top: 8rpx;">{{ item.Time }}</text>
							</view>
							<text style="font-size: 20rpx; color: #999999; margin-right: 24rpx;">{{ item.Content
							}}</text>
						</view>
					</view>
					<view class="empty-tip" v-if="winningList.length === 0">暂无赏品记录</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</page-container>
</template>

<script>
import { getUserWelfareRecords, getUserWinningRecords } from '@/common/server/welfare.js';
import PageContainer from '@/components/page-container/page-container.vue'

export default {
	components: {
		PageContainer
	},
	data() {
		return {
			tabCur: 0,
			tabList: [
				"参与记录", "赏品记录"
			],
			recordsList: [], // 参与记录列表
			winningList: []  // 赏品记录列表
		}
	},
	onLoad() {
		this.loadAll();
	},
	methods: {
		tabChange(i) {
			this.tabCur = i;
		},

		// 滑动切换事件
		swiperChange(e) {
			this.tabCur = e.detail.current;
		},

		// 加载所有数据
		loadAll() {
			this.load_records();
			this.load_winning_records();
		},

		// 格式化API返回的数据为显示格式
		formatListData(list, isWinningRecord = false) {
			return list.map(item => ({
				Title: item.goodsTitle || "参与时间",
				Time: item.createTime || "",
				Content: isWinningRecord ? item.goodslistTitle : item.description
			}));
		},
		// 格式化API返回的数据为显示格式
		formatListData1(list, isWinningRecord = false) {
			return list.map(item => ({
				Title: "参与时间",
				Time: item.createTime || "",
				Content: item.goodsTitle
			}));
		},
		// 参与记录
		async load_records() {
			const res = await getUserWelfareRecords();
			if (res.status !== 1) {
				this.$c.toast(res.msg);
				return;
			}

			if (res.data && res.data.length > 0) {
				this.recordsList = this.formatListData1(res.data, false);
			} else {
				this.recordsList = [];
			}
		},

		// 赏品记录
		async load_winning_records() {
			const res = await getUserWinningRecords();
			if (res.status !== 1) {
				this.$c.toast(res.msg);
				return;
			}

			if (res.data && res.data.length > 0) {
				this.winningList = this.formatListData(res.data, true);
			} else {
				this.winningList = [];
			}
		}
	}
}
</script>

<style lang="scss">
.tab {
	display: flex;
	padding: 10rpx 32rpx;

	.tab-item {
		width: 114rpx;
		height: 50rpx;
		position: relative;
		margin-right: 25rpx;
		border-radius: 8rpx;
		font-size: 20rpx;

		&.act {
			font-weight: 500;
			color: #333333;
			background-color: #D8FD24;
		}

		&.unact {
			font-weight: 500;
		}
	}
}

.record-card {
	width: 680rpx;
	height: 88rpx;
	background-color: #F8F8F8;
	margin: 0 auto 24rpx;
}

.empty-tip {
	text-align: center;
	color: #999;
	font-size: 24rpx;
	padding: 40rpx 0;
}
</style>