feat: 重构营销模块积分日志页面

- 优化搜索区域：支持用户昵称、用户ID、时间范围筛选
- 新增表格字段：ID、用户ID、昵称、来源/用途、积分变化、变化后积分、关联类型、状态、备注、日期
- 积分变化带颜色标识：增加(绿色+)、扣减(红色-)
- 状态标签彩色区分：订单创建/冻结期/完成/失效
- 关联类型中文映射：订单/签到/系统
- 使用已有的 integralListApi 接口
- 参考用户详情页积分明细样式

backend-adminend/src/views/marketing/integral/integralLog/index.vue

@@ -3,85 +3,102 @@
     <el-card class="box-card">
       <div slot="header" class="clearfix">
         <div class="container">
-          <el-form size="small" label-width="120px">
-            <el-form-item label="时间选择：" class="width100">
-              <el-radio-group
-                v-model="tableFrom.dateLimit"
-                type="button"
-                class="mr20"
-                size="small"
-                @change="selectChange(tableFrom.dateLimit)"
-              >
-                <el-radio-button v-for="(item, i) in fromList.fromTxt" :key="i" :label="item.val"
-                  >{{ item.text }}
-                </el-radio-button>
-              </el-radio-group>
-              <el-date-picker
-                v-model="timeVal"
-                value-format="yyyy-MM-dd"
-                format="yyyy-MM-dd"
-                size="small"
-                type="daterange"
-                placement="bottom-end"
-                placeholder="自定义时间"
-                style="width: 250px"
-                @change="onchangeTime"
-              />
-            </el-form-item>
-            <el-form-item label="用户微信昵称：">
-              <el-input v-model="tableFrom.keywords" placeholder="请输入用户昵称" class="selWidth" size="small">
-                <el-button slot="append" icon="el-icon-search" size="small" @click="getList(1)" />
-              </el-input>
-            </el-form-item>
+          <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="请输入用户昵称" 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>
-        <!--<cards-data :cardLists="cardLists"></cards-data>-->
       </div>
+
       <el-table
         v-loading="listLoading"
         :data="tableData.data"
-        size="small"
-        class="table"
+        style="width: 100%"
+        size="mini"
         highlight-current-row
-        :header-cell-style="{ fontWeight: 'bold' }"
       >
-        <el-table-column prop="id" label="ID" width="60" />
-        <el-table-column prop="title" label="标题" min-width="130" />
-        <el-table-column
-          sortable
-          prop="balance"
-          label="积分余量"
-          min-width="120"
-          :sort-method="
-            (a, b) => {
-              return a.balance - b.balance;
-            }
-          "
-        />
-        <el-table-column
-          sortable
-          label="明细数字"
-          min-width="120"
-          prop="integral"
-          :sort-method="
-            (a, b) => {
-              return a.integral - b.integral;
-            }
-          "
-        />
-        <el-table-column label="备注" min-width="120" prop="mark" />
-        <el-table-column label="用户昵称" min-width="120" prop="nickName" />
-        <el-table-column prop="updateTime" label="	添加时间" min-width="150" />
+        <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="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="[20, 40, 60, 80]"
-          :page-size="tableFrom.limit"
-          :current-page="tableFrom.page"
+          :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="pageChange"
+          @current-change="handleCurrentChange"
         />
       </div>
     </el-card>
@@ -89,78 +106,129 @@
 </template>
 
 <script>
-import { integralListApi } from '@/api/marketing';
-import cardsData from '@/components/cards/index';
+import { integralListApi } from '@/api/integral';
+
 export default {
-  components: { cardsData },
+  name: 'IntegralLog',
   data() {
     return {
-      loading: false,
-      options: [],
-      fromList: this.$constants.fromList,
-      listLoading: false,
+      listLoading: true,
       tableData: {
         data: [],
         total: 0,
       },
-      tableFrom: {
-        page: 1,
-        limit: 20,
-        dateLimit: '',
+      searchForm: {
         keywords: '',
+        uid: null,
+        dateLimit: '',
+        page: 1,
+        limit: 15,
       },
-      userIdList: [],
-      userList: [],
       timeVal: [],
-      values: [],
+      pickerOptions: this.$timeOptions,
     };
   },
   mounted() {
     this.getList();
-    // this.getUserList()
   },
   methods: {
-    seachList() {
-      this.tableFrom.page = 1;
-      this.getList();
-    },
-    // 选择时间
-    selectChange(tab) {
-      this.tableFrom.dateLimit = tab;
-      this.tableFrom.page = 1;
-      this.timeVal = [];
-      this.getList();
-    },
-    // 具体日期
-    onchangeTime(e) {
-      this.timeVal = e;
-      this.tableFrom.dateLimit = e ? this.timeVal.join(',') : '';
-      this.tableFrom.page = 1;
-      this.getList();
-    },
-    // 列表
+    // 获取列表
     getList() {
       this.listLoading = true;
-      integralListApi({ limit: this.tableFrom.limit, page: this.tableFrom.page }, this.tableFrom)
+      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;
+          this.tableData.data = res.list || [];
+          this.tableData.total = res.total || 0;
           this.listLoading = false;
         })
-        .catch((res) => {
+        .catch(() => {
           this.listLoading = false;
         });
     },
-    pageChange(page) {
-      this.tableFrom.page = page;
+    // 搜索
+    handleSearch() {
+      this.searchForm.page = 1;
       this.getList();
     },
-    handleSizeChange(val) {
-      this.tableFrom.limit = val;
+    // 重置
+    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 lang="sass" scoped></style>
+<style scoped lang="scss">
+.text-right {
+  text-align: right;
+}
+
+.block {
+  margin-top: 20px;
+}
+
+.el-input,
+.el-date-picker {
+  width: 100%;
+}
+</style>