运营后台,积分记录展示会员剩余积分列表

manager/src/views/member/point/point.vue

@@ -14,13 +14,84 @@
         </Col>
       </Row>
     </Card>
-    <Card >
+    <div class="point-tabs-wrap">
+      <Tabs v-model="activeTab" class="point-tabs">
+      <TabPane label="积分列表" name="pointList">
+        <Card class="point-content-card">
+          <Form
+            @keydown.enter.native="handleMemberSearch"
+            ref="memberSearchForm"
+            :model="memberSearchForm"
+            inline
+            :label-width="70"
+            @submit.native.prevent
+            class="search-form"
+          >
+            <Form-item label="客户名称" prop="nickName">
+              <Input
+                v-model="memberSearchForm.nickName"
+                placeholder="请输入客户名称"
+                clearable
+                style="width: 180px"
+              />
+            </Form-item>
+            <Form-item label="客户账号" prop="username">
+              <Input
+                v-model="memberSearchForm.username"
+                placeholder="请输入客户账号"
+                clearable
+                style="width: 180px"
+              />
+            </Form-item>
+            <Form-item label="账号状态" prop="disabled">
+              <Select
+                v-model="memberSearchForm.disabled"
+                clearable
+                placeholder="请选择账号状态"
+                style="width: 160px"
+              >
+                <Option value="OPEN">启用</Option>
+                <Option value="CLOSE">禁用</Option>
+              </Select>
+            </Form-item>
+            <Form-item label="积分值">
+              <InputNumber
+                v-model="memberSearchForm.minPoint"
+                :min="0"
+                :precision="0"
+                placeholder="最小积分值"
+                style="width: 140px"
+              />
+              <span class="point-range-separator">-</span>
+              <InputNumber
+                v-model="memberSearchForm.maxPoint"
+                :min="0"
+                :precision="0"
+                placeholder="最大积分值"
+                style="width: 140px"
+              />
+            </Form-item>
+            <Button @click="handleMemberSearch" class="search-btn" type="primary" icon="ios-search">搜索</Button>
+          </Form>
+        </Card>
+        <Card class="point-content-card member-list-card">
+          <div slot="title" class="card-title">用户列表</div>
+          <Table
+            :loading="memberLoading"
+            :columns="memberColumns"
+            :data="memberData"
+            class="member-table"
+          >
+          </Table>
+        </Card>
+      </TabPane>
+      <TabPane label="积分增减记录" name="pointChangeRecord">
+        <Card class="point-content-card">
           <Form
             @keydown.enter.native="handleSearch"
             ref="searchForm"
             :model="searchForm"
             inline
-        
             :label-width="70"
             @submit.native.prevent
             class="search-form"
@@ -37,7 +108,7 @@
             <Button @click="handleSearch" class="search-btn" type="primary" icon="ios-search">搜索</Button>
           </Form>
         </Card>
-    <Card>
+        <Card class="point-content-card">
           <Table
             :loading="loading"
             border
@@ -62,6 +133,9 @@
             ></Page>
           </Row>
         </Card>
+      </TabPane>
+      </Tabs>
+    </div>
   </div>
 </template>
 
@@ -74,7 +148,9 @@
     name: "point",
     data() {
       return {
+        activeTab: "pointList",
         loading: true, // 表单加载状态
+        memberLoading: false,
         pointsStatistics: {
           totalPoint: 0,
           unUsedPoint: 0,
@@ -83,6 +159,15 @@
           pageNumber: 1,
           pageSize: 20,
         },
+        memberSearchForm: {
+          pageNumber: 1,
+          pageSize: 10,
+          nickName: "",
+          username: "",
+          disabled: "",
+          minPoint: null,
+          maxPoint: null,
+        },
         columns: [
           {
             title: "会员名称",
@@ -127,7 +212,78 @@
           },
 
         ],
+        memberColumns: [
+          {
+            title: "客户名称",
+            key: "nickName",
+            width: 180,
+            tooltip: true,
+            render: (h, params) => {
+              return h("span", params.row.nickName || "-");
+            },
+          },
+          {
+            title: "客户账号",
+            key: "username",
+            width: 180,
+            tooltip: true,
+            render: (h, params) => {
+              return h("span", params.row.username || "-");
+            },
+          },
+          {
+            title: "账号状态",
+            key: "disabled",
+            width: 180,
+            render: (h, params) => {
+              const enabled = params.row.disabled === true;
+              return h(
+                "Tag",
+                {
+                  props: {
+                    color: enabled ? "success" : "default",
+                  },
+                },
+                enabled ? "启用" : "禁用"
+              );
+            },
+          },
+          {
+            title: "积分余额",
+            key: "point",
+            width: 180,
+            render: (h, params) => {
+              const point = params.row.point == null ? 0 : params.row.point;
+              return h("span", point);
+            },
+          },
+          {
+            title: "操作",
+            key: "action",
+            width: 100,
+            align: "center",
+            render: (h, params) => {
+              return h(
+                "a",
+                {
+                  style: {
+                    color: "#2d8cf0",
+                    cursor: "pointer",
+                    textDecoration: "none",
+                  },
+                  on: {
+                    click: () => {
+                      this.detail(params.row);
+                    },
+                  },
+                },
+                "详情"
+              );
+            },
+          },
+        ],
         data: [], // 表单数据
+        memberData: [],
         total: 0, // 表单数据总数
       };
     },
@@ -136,9 +292,14 @@
       callback(val) {
         this.$emit("callback", val);
       },
+      // 查看会员详情
+      detail(row) {
+        this.$options.filters.customRouterPush({ name: "member-detail", query: { id: row.id } });
+      },
       // 初始化数据
       init() {
         this.getStatistics();
+        this.getMemberList();
         this.getData();
       },
       getStatistics() {
@@ -173,6 +334,30 @@
         this.searchForm.pageSize = 20;
         this.getData();
       },
+      handleMemberSearch() {
+        this.memberSearchForm.pageNumber = 1;
+        this.getMemberList();
+      },
+      getMemberList() {
+        this.memberLoading = true;
+        const params = {
+          pageNumber: this.memberSearchForm.pageNumber,
+          pageSize: this.memberSearchForm.pageSize,
+          nickName: this.memberSearchForm.nickName || undefined,
+          username: this.memberSearchForm.username || undefined,
+          disabled: this.memberSearchForm.disabled || undefined,
+          minPoint: this.memberSearchForm.minPoint,
+          maxPoint: this.memberSearchForm.maxPoint,
+        };
+        API_Member.getMemberListData(params).then((res) => {
+          this.memberLoading = false;
+          if (res && res.success && res.result && res.result.records) {
+            this.memberData = res.result.records;
+          }
+        }).catch(() => {
+          this.memberLoading = false;
+        });
+      },
       //查新积分列表
       getData() {
         this.loading = true;
@@ -196,6 +381,37 @@
     margin-bottom: 10px;
   }
 
+  .point-tabs-wrap {
+    padding: 12px 16px 16px;
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(23, 35, 61, 0.04);
+  }
+
+  .point-tabs {
+    ::v-deep .ivu-tabs-bar {
+      margin-bottom: 16px;
+      border-bottom: 1px solid #f0f0f0;
+    }
+
+    ::v-deep .ivu-tabs-nav .ivu-tabs-tab {
+      padding: 8px 18px;
+      color: #515a6e;
+      background: #fff;
+      transition: all 0.2s ease;
+    }
+
+    ::v-deep .ivu-tabs-nav .ivu-tabs-tab-active {
+      color: #2d8cf0;
+      font-weight: 500;
+    }
+
+    ::v-deep .ivu-tabs-ink-bar {
+      height: 2px;
+      border-radius: 2px;
+    }
+  }
+
   .points-statistics {
     width: 100%;
   }
@@ -233,6 +449,42 @@
     }
   }
 
+  .point-content-card {
+    margin-bottom: 12px;
+
+    ::v-deep .ivu-card-body {
+      padding: 18px 20px;
+    }
+  }
+
+  .member-list-card {
+    ::v-deep .ivu-card-head {
+      border-bottom: 1px solid #f5f5f5;
+    }
+  }
+
+  .card-title {
+    font-size: 14px;
+    font-weight: 500;
+    color: #17233d;
+  }
+
+  .member-table {
+    ::v-deep .ivu-table-header th {
+      background: #fafafa;
+    }
+
+    ::v-deep .ivu-tag {
+      margin-right: 0;
+    }
+  }
+
+  .point-range-separator {
+    display: inline-block;
+    margin: 0 8px;
+    color: #808695;
+  }
+
   .face {
     width: 60px;
     height: 60px;