feat: 添加积分日志页面
- 新增积分日志列表页面 src/views/user/integral/index.vue - 新增积分相关 API src/api/integral.js - 在路由中添加积分日志菜单
This commit is contained in:
scott
23
backend-adminend/src/api/integral.js
Normal file
23
backend-adminend/src/api/integral.js
Normal file
@@ -0,0 +1,23 @@
|
||||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2025 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
|
||||
import request from '@/utils/request';
|
||||
|
||||
/**
|
||||
* 积分记录分页列表
|
||||
* @param data
|
||||
*/
|
||||
export function integralListApi(data) {
|
||||
return request({
|
||||
url: '/admin/user/integral/list',
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
}
|
||||
@@ -44,6 +44,12 @@ const userRouter = {
|
||||
name: 'Group',
|
||||
meta: { title: '用户分组', icon: '' },
|
||||
},
|
||||
{
|
||||
path: 'integral',
|
||||
component: () => import('@/views/user/integral/index'),
|
||||
name: 'IntegralLog',
|
||||
meta: { title: '积分日志', icon: '', noCache: true },
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
|
||||
241
backend-adminend/src/views/user/integral/index.vue
Normal file
241
backend-adminend/src/views/user/integral/index.vue
Normal file
@@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<div class="divBox">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<div class="container">
|
||||
<el-form inline size="small" :model="searchForm" ref="searchForm" label-width="80px">
|
||||
<el-row>
|
||||
<el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
||||
<el-form-item label="用户搜索：">
|
||||
<el-input v-model="searchForm.keywords" placeholder="请输入用户昵称或ID" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
||||
<el-form-item label="用户ID：">
|
||||
<el-input-number v-model="searchForm.uid" placeholder="请输入用户ID" :min="1" :controls="false" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
||||
<el-form-item label="时间选择：">
|
||||
<el-date-picker
|
||||
v-model="timeVal"
|
||||
type="daterange"
|
||||
align="right"
|
||||
unlink-panels
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:picker-options="pickerOptions"
|
||||
@change="onchangeTime"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="text-right">
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
:data="tableData.data"
|
||||
style="width: 100%"
|
||||
size="mini"
|
||||
highlight-current-row
|
||||
>
|
||||
<el-table-column prop="id" label="ID" min-width="80" />
|
||||
<el-table-column prop="uid" label="用户ID" min-width="80" />
|
||||
<el-table-column prop="nickName" label="用户昵称" min-width="120" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.nickName || '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="title" label="标题" min-width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="integral" label="积分变动" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.type === 1 ? 'success' : 'danger'" size="small">
|
||||
{{ scope.row.type === 1 ? '+' : '-' }}{{ scope.row.integral }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="balance" label="剩余积分" min-width="100" />
|
||||
<el-table-column prop="type" label="类型" min-width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.type === 1 ? 'success' : 'danger'" size="small">
|
||||
{{ scope.row.type === 1 ? '增加' : '扣减' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="linkType" label="关联类型" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-tag size="small" effect="plain">
|
||||
{{ linkTypeFilter(scope.row.linkType) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="statusTypeFilter(scope.row.status)" size="small">
|
||||
{{ statusFilter(scope.row.status) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="mark" label="备注" min-width="150" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.mark || '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" min-width="150" />
|
||||
</el-table>
|
||||
|
||||
<div class="block">
|
||||
<el-pagination
|
||||
:page-sizes="[15, 30, 45, 60]"
|
||||
:page-size="searchForm.limit"
|
||||
:current-page="searchForm.page"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="tableData.total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { integralListApi } from '@/api/integral';
|
||||
|
||||
export default {
|
||||
name: 'IntegralLog',
|
||||
data() {
|
||||
return {
|
||||
listLoading: true,
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
},
|
||||
searchForm: {
|
||||
keywords: '',
|
||||
uid: null,
|
||||
dateLimit: '',
|
||||
page: 1,
|
||||
limit: 15,
|
||||
},
|
||||
timeVal: [],
|
||||
pickerOptions: this.$timeOptions,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
// 获取列表
|
||||
getList() {
|
||||
this.listLoading = true;
|
||||
const params = {
|
||||
...this.searchForm,
|
||||
};
|
||||
// 移除空值
|
||||
if (!params.keywords) delete params.keywords;
|
||||
if (!params.uid) delete params.uid;
|
||||
if (!params.dateLimit) delete params.dateLimit;
|
||||
|
||||
integralListApi(params)
|
||||
.then((res) => {
|
||||
this.tableData.data = res.list || [];
|
||||
this.tableData.total = res.total || 0;
|
||||
this.listLoading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.listLoading = false;
|
||||
});
|
||||
},
|
||||
// 搜索
|
||||
handleSearch() {
|
||||
this.searchForm.page = 1;
|
||||
this.getList();
|
||||
},
|
||||
// 重置
|
||||
handleReset() {
|
||||
this.searchForm = {
|
||||
keywords: '',
|
||||
uid: null,
|
||||
dateLimit: '',
|
||||
page: 1,
|
||||
limit: 15,
|
||||
};
|
||||
this.timeVal = [];
|
||||
this.getList();
|
||||
},
|
||||
// 时间选择
|
||||
onchangeTime(e) {
|
||||
this.timeVal = e;
|
||||
this.searchForm.dateLimit = e ? e.join(',') : '';
|
||||
},
|
||||
// 分页大小变化
|
||||
handleSizeChange(val) {
|
||||
this.searchForm.limit = val;
|
||||
this.getList();
|
||||
},
|
||||
// 页码变化
|
||||
handleCurrentChange(val) {
|
||||
this.searchForm.page = val;
|
||||
this.getList();
|
||||
},
|
||||
// 关联类型过滤器
|
||||
linkTypeFilter(type) {
|
||||
const typeMap = {
|
||||
order: '订单',
|
||||
sign: '签到',
|
||||
system: '系统',
|
||||
};
|
||||
return typeMap[type] || type || '-';
|
||||
},
|
||||
// 状态过滤器
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
1: '订单创建',
|
||||
2: '冻结期',
|
||||
3: '完成',
|
||||
4: '失效',
|
||||
};
|
||||
return statusMap[status] || '未知';
|
||||
},
|
||||
// 状态样式过滤器
|
||||
statusTypeFilter(status) {
|
||||
const typeMap = {
|
||||
1: 'info',
|
||||
2: 'warning',
|
||||
3: 'success',
|
||||
4: 'danger',
|
||||
};
|
||||
return typeMap[status] || 'info';
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.block {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.el-input,
|
||||
.el-date-picker {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user