ChuangHeng/src/views/modules/wechatUser/payRecord.vue

<template>
    <div class="page">
        <el-table :data="dataList" border cell-class-name="vertical-top-cell" v-loading="loading" empty-text="暂无交易记录" max-height="578px" style="margin-top: 18px;">
            <el-table-column label="序号" width="50">
                <template #default="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column label="订单编号" prop="orderNo"></el-table-column>
            <el-table-column label="交易时间" prop="payTime"></el-table-column>
            <el-table-column label="商品类型" prop="xx">
                <template #default="scope">{{ typeCfg[scope.row.type]||'' }}</template>
            </el-table-column>
            <el-table-column label="购买次数" prop="totalFrequency"></el-table-column>
            <el-table-column label="交易金额(元)" prop="totalAmount"></el-table-column>
            <el-table-column label="有效期至" prop="expirationTime"></el-table-column>
        </el-table>
        <el-row style="display: flex;justify-content: center;">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryParams.page"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                v-show="total > 0">
            </el-pagination>
        </el-row>
    </div>
</template>

<script setup name="">
    const props = defineProps({
        userId:{
            typeof:'String',
            default:''

        }
    });
    import { ref, getCurrentInstance, onMounted } from 'vue'
    const { proxy } = getCurrentInstance();
    import { 
        getPayRecoedList
    } from '@/api/agent/indexTwo.js'
    
    const queryParams = ref({
        page: 1,
        limit: 10,
        tradeRecord:1,
        userId:''
    })
    const typeCfg = ref({
        1: '个人版',
        2: '团队版',
        0:'团队PRO版',
        3:'高级',
        4:'中级',
        5:'初级',
    })
    const dataList = ref([])
    const total = ref(0)
    const loading = ref(false)

    const handleSizeChange = (val) => {
        queryParams.value.limit = val;
        getList();
    }

    const handleCurrentChange = (val) => {
        queryParams.value.page = val;
        getList();
    }
    const getList = async () => {
        let query = JSON.parse(JSON.stringify(queryParams.value));
        loading.value = true;
        const res = await getPayRecoedList(query);
        dataList.value = res.data.list;
        total.value = res.data.total;
        loading.value = false;
    }

    onMounted(() => {
        queryParams.value.userId = props.userId;
        getList();
    })
</script>

<style scoped lang="scss">
    
</style>