diff --git a/manager/src/views/member/point/point.vue b/manager/src/views/member/point/point.vue index 6585a1a9..02b1a97d 100644 --- a/manager/src/views/member/point/point.vue +++ b/manager/src/views/member/point/point.vue @@ -14,54 +14,128 @@ - -
- - - - -
-
- - -
- - - -
+
+ + + +
+ + + + + + + + + + + + - + + + +
+
+ +
用户列表
+ +
+
+
+ + +
+ + + + +
+
+ + +
+ + + +
+
+
+
@@ -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;