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-item>
					<el-button size="small" type="primary" @click="syncDetailInfo">同步详情</el-button>
				</el-form-item>

				<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>