MyRedPackageDetail.vue

<template>
	<div>
		<el-button type="primary" plain size="medium" @click="goBack">后退</el-button>
		<h4 class="text-center">红包订单号{{ orderNo }}领取详情</h4>
		<el-container>
			<el-main>
				<el-table ref="multipleTable" v-loading="loading" :data="csdnRedPackageDetailList" tooltip-effect="dark" style="width: 100%">
					<el-table-column prop="id" label="序号" width="100" sortable></el-table-column>
					<el-table-column prop="orderNo" label="订单号" show-overflow-tooltip></el-table-column>
					<el-table-column prop="communityId" label="社区id" show-overflow-tooltip></el-table-column>
					<el-table-column prop="postId" label="发布id" show-overflow-tooltip></el-table-column>

					<el-table-column prop="receiverNickName" label="用户昵称" show-overflow-tooltip></el-table-column>
					<el-table-column prop="receivedMoney" label="抢到金额" sortable show-overflow-tooltip></el-table-column>

					<el-table-column label="领取时间">
						<template slot-scope="props">{{ props.row.receiveTime | dateFormat }}</template>
					</el-table-column>
				</el-table>
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[8, 10, 50, 100, 200, 400]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
			</el-main>
		</el-container>
	</div>
</template>
<script>
// 导入 axios 请求库
import ApiService from '../../api/ApiService'
export default {
	name: 'MyRedPackageDetail',
	props: ['orderNo', 'communityId', 'postId'],
	data() {
		return {
			csdnRedPackageDetailList: [],
			loading: false,
			elementui_page_component_key: 0,
			currentPage: Number(localStorage.getItem('redPackagePage')) || 1,
			pageSize: 50,
			total: 0,
		}
	},
	watch: {
		// 监听currentPage的变化，将新值保存到localStorage中
		currentPage(newPage) {
			localStorage.setItem('redPackagePage', newPage.toString())
		},
	},
	created() {
		// 调用请求数据的方法
		this.redPackageDetailList()
	},
	methods: {
		goBack() {
			// 使用 $router.push() 导航到前一个页面
			this.$router.push({
				path: '/home/redPackage', // 前一个页面的路径
			})
		},
		// 封装请求列表数据的方法
		async redPackageDetailList() {
			this.loading = true
			const { data: res } = await ApiService.redPackageDetailList(this.currentPage, this.pageSize, this.$route.params.orderNo, this.$route.params.communityId, this.$route.params.postId)
			if (res.code === 200) {
				this.total = res.result.totalElements
				this.csdnRedPackageDetailList = res.result.content
			}
			this.loading = false
		},

		handleCurrentChange(currentPage) {
			this.currentPage = currentPage
			this.redPackageDetailList()
		},
		handleSizeChange(currentSize) {
			this.pageSize = currentSize
			this.redPackageDetailList()
		},
	},
}
</script>

<style lang="less" scoped>
.button-container {
	position: fixed;
	bottom: 0;
	right: 0;
	margin: 16px;
}
</style>