gold_vue/vue/gold-system/src/views/usergold/index.vue

<script setup>
import { ref, onMounted, reactive, computed } from "vue";
import ElementPlus from "element-plus";
import axios from 'axios';

// 充值明细表格
const tableData = ref([]);
// 搜索===========================================
// 搜索detail
const detail = ref({});
// 搜索对象
const getObj = ref({
    pageNum: 1,
    pageSize: 5,
});
//分页总条目
const total = ref(100);
// 搜索对象时间
const getTime = ref([]);
// 支付方式选项
const updateType = [
    {
        value: '充值',
        label: '充值',
    },
    {
        value: '消费',
        label: '消费',
    },
    {
        value: '退款',
        label: '退款',
    },
]

//表格高度
const tableHeight = computed(function () {
    return (getObj.value.pageSize + 2) * 60 + 'px';
});


// 方法
// 搜索===========================================================================
// 搜索方法
const get = async function (val) {
    try {
        // 搜索参数页码赋值 
        if (typeof val === 'number') {
            getObj.value.pageNum = val;
        }
        // 搜索参数时间赋值
        if (getTime.value != null) {
            if (getTime.value.startDate != '' && getTime.value.endDate != '') {
                detail.value.startDate = getTime.value[0];
                detail.value.endDate = getTime.value[1];
            }
        } else {
            detail.value.startDate = '';
            detail.value.endDate = '';
        }
        console.log('搜索参数', getObj.value);
        // 发送POST请求
        const result = await axios.post('http://192.168.8.93:10040/detail', { ...getObj.value, detail: { ...detail.value } });

        // 将响应结果存储到响应式数据中
        console.log('请求成功', result);
        // 存储表格数据
        tableData.value = result.data.data.list;
        console.log('tableData', tableData.value);
        // 存储分页总数
        total.value = result.data.data.total;
        console.log('total', total.value);
    } catch (error) {
        console.log('请求失败', error);
        // 在这里可以处理错误逻辑，比如显示错误提示等
    }
}

// 重置
const reset = function () {
    detail.value.jwcode = '';
    detail.value.updateType = '';
    detail.value.startDate = '';
    detail.value.endDate = '';
    getTime.value = {};
}
// 今天
const getToday = function () {
    const today = new Date();
    const startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate());
    const endDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
    getTime.value = [startDate, endDate];
    console.log('getTime', getTime.value);
    get();
}
// 昨天
const getYesterday = function () {
    const yesterday = new Date();
    yesterday.setDate(yesterday.getDate() - 1);
    const startDate = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate());
    const endDate = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate() + 1);
    getTime.value = [startDate, endDate];
    console.log('getTime', getTime.value);
    get();
}
// 近7天
const get7Days = function () {
    const today = new Date();
    const startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 6);
    const endDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
    getTime.value = [startDate, endDate];
    console.log('getTime', getTime.value);
    get();
}


// 挂载
onMounted(async function () {
    await get();
})

</script>

<template>
    <el-row>
        <el-col>
            <el-card style="margin-bottom: 20px">
                <div class="head-card">
                    <div class="head-card-element">
                        <el-text class="mx-1" size="large">精网号：</el-text>
                        <el-input v-model="detail.jwcode" style="width: 240px" placeholder="请输入精网号" clearable />
                    </div>
                    <div class="head-card-element">
                        <el-text class="mx-1" size="large">更新类型：</el-text>
                        <el-select v-model="detail.updateType" placeholder="请选择更新类型" size="large" style="width: 240px">
                            <el-option v-for="item in updateType" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </div>
                    <div class="head-card-element">
                        <el-text class="mx-1" size="large">更新时间：</el-text>
                        <el-time-picker v-model="getTime" is-range range-separator="至" start-placeholder="起始时间"
                            end-placeholder="结束时间" />
                    </div>
                    <div class="head-card-btn">
                        <el-button @click="reset()">重置</el-button>
                        <el-button type="primary" @click="get()">查询</el-button>
                    </div>
                </div>
            </el-card>
        </el-col>
    </el-row>
    <el-row>
        <el-col>
            <el-card>
                <div>
                    现有金币：免费金币：（），充值金币：（），任务金币：（）
                </div>
                <div>
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column prop="name" label="姓名" />
                        <el-table-column prop="jwcode" label="精网号" />
                        <el-table-column prop="area" label="所属地区" />
                        <el-table-column prop="gold" label="更新数量">
                            <template #default="scope">
                                <span>{{ scope.row.rechargeCoin + scope.row.freeCoin + scope.row.taskCoin }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="updateType" label="更新类型" />
                            <el-table-column prop="freeCoin" label="免费金币" />
                            <el-table-column prop="rechargeCoin" label="充值金币" />
                            <el-table-column prop="taskCoin" label="任务金币" />
                            <el-table-column prop="name" label="提交人" />
                            <el-table-column prop="createTime" label="更新时间" />
                    </el-table>
                </div>

                <!-- 分页 -->
                <el-pagination background layout="prev, pager, next" :total="total" />

            </el-card>
        </el-col>
    </el-row>

</template>

    <style scoped>
    .status {
        display: flex;
    }

    .head-card {
        display: flex;
    }

    .head-card-element {
        margin-right: 20px;
    }

    .head-card-btn {
        margin-left: auto;
    }
</style>