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-form :inline="true" :model="formInline" class="demo-form-inline">
					<el-form-item>
						<el-button size="small" type="primary" @click="syncDetailInfo">同步详情</el-button>
					</el-form-item>
				</el-form>
				<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 prop="luckyName" label="幸运王" show-overflow-tooltip>
						<template slot-scope="scope">
							<el-tag :type="getTagType(scope.row.luckyName)">{{ scope.row.luckyName }}</el-tag>
						</template>
					</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: ['id', 'orderNo', 'communityId', 'postId'],
	data() {
		return {
			csdnRedPackageDetailList: [],
			loading: false,
			elementui_page_component_key: 0,
			currentPage: 1,
			pageSize: 50,
			total: 0,
			allOptions: [
				{
					type: 0,
					name: '否',
				},
				{
					type: 1,
					name: '是',
				},
			],
		}
	},
	created() {
		// 调用请求数据的方法
		this.redPackageDetailList()
	},
	mounted() {
		this.currentPage = 1
		this.pageSize = 50
	},
	methods: {
		goBack() {
			// 传递参数到前一个页面
			const params = {
				// 参数名: 参数值
				back: 'back',
			}
			// 使用 $router.push() 导航到前一个页面
			this.$router.push({
				path: '/home/redPackage', // 前一个页面的路径
				query: params, // 参数对象
			})
		},

		// 封装请求列表数据的方法
		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

				const userWeightMap = {}
				this.allOptions.forEach((option) => {
					userWeightMap[option.type] = option.name
				})
				res.result.content.forEach((item) => {
					item.luckyName = userWeightMap[item.lucky]
				})
				this.csdnRedPackageDetailList = res.result.content
			}
			this.loading = false
		},

		async syncDetailInfo() {
			this.loading = true
			const { data: res } = await ApiService.syncDetailInfo(this.$route.params.id)
			if (res.code === 200) {
				this.redPackageDetailList()
			}
			this.loading = false
		},

		handleCurrentChange(currentPage) {
			this.currentPage = currentPage
			this.redPackageDetailList()
		},
		handleSizeChange(currentSize) {
			this.pageSize = currentSize
			this.redPackageDetailList()
		},
		getTagType(luckyName) {
			if (luckyName == '是') {
				return 'danger'
			} else {
				return 'success'
			}
		},
	},
}
</script>

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