From 1ac3aba81f76dbd6e09add673548f68e36ea91b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=9D=E5=85=88=E7=91=9E?= <1490493387@qq.com>
Date: Sun, 17 Jul 2022 21:46:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E4=BC=9A=E5=91=98?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: d2ea7d9801c5106bf4a4342629821eddf6ef9800
---
 src/views/ums/member/index.vue | 173 +++++++++++++++++++++++++++++++++
 1 file changed, 173 insertions(+)
 create mode 100644 src/views/ums/member/index.vue

diff --git a/src/views/ums/member/index.vue b/src/views/ums/member/index.vue
new file mode 100644
index 00000000..7b779acb
--- /dev/null
+++ b/src/views/ums/member/index.vue
@@ -0,0 +1,173 @@
+<script lang="ts">
+export default {
+  name: 'member',
+};
+</script>
+
+<script setup lang="ts">
+import { reactive, onMounted, toRefs } from 'vue';
+import { ElTable } from 'element-plus';
+import { Search, Refresh } from '@element-plus/icons-vue';
+
+import { listMemebersPage } from '@/api/ums/member';
+import { MemberQueryParam, MemberItem } from '@/types/api/ums/member';
+
+const state = reactive({
+  // 遮罩层
+  loading: true,
+  // 选中数组
+  ids: [],
+  // 非单个禁用
+  single: true,
+  // 非多个禁用
+  multiple: true,
+  total: 0,
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+  } as MemberQueryParam,
+  memberList: [] as MemberItem[],
+});
+
+const { loading, queryParams, memberList, total } = toRefs(state);
+
+function handleQuery() {
+  state.loading = true;
+  listMemebersPage(state.queryParams).then(({ data }) => {
+    state.memberList = data.list;
+    state.total = data.total;
+    state.loading = false;
+  });
+}
+
+function resetQuery() {
+  state.queryParams = {
+    pageNum: 1,
+    pageSize: 10,
+    nickName: '',
+  };
+  handleQuery();
+}
+
+function handleSelectionChange(selection: any) {
+  state.ids = selection.map((item: { id: any }) => item.id);
+  state.single = selection.length != 1;
+  state.multiple = !selection.length;
+}
+
+onMounted(() => {
+  handleQuery();
+});
+</script>
+
+<template>
+  <div class="app-container">
+    <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+      <el-form-item>
+        <el-input
+          v-model="queryParams.nickName"
+          placeholder="会员昵称"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" :icon="Search" @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      v-loading="loading"
+      :data="memberList"
+      border
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" align="center" />
+      <el-table-column type="expand" width="120" label="会员地址">
+        <template #default="scope">
+          <el-table :data="scope.row.addressList" size="small" border>
+            <el-table-column
+              type="index"
+              label="序号"
+              width="100"
+              align="center"
+            />
+            <el-table-column align="center" label="收货人" prop="name" />
+            <el-table-column align="center" label="联系方式" prop="mobile" />
+            <el-table-column align="center" label="收货地址">
+              <template #default="scope">
+                {{
+                  scope.row.province +
+                  scope.row.city +
+                  scope.row.area +
+                  scope.row.address
+                }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" label="邮编" prop="zipCode" />
+            <el-table-column align="center" label="是否默认">
+              <template #default="scope">
+                <el-tag v-if="scope.row.defaulted == 1" type="success"
+                  >是</el-tag
+                >
+                <el-tag v-if="scope.row.defaulted == 0" type="info">否</el-tag>
+              </template>
+            </el-table-column>
+          </el-table>
+        </template>
+      </el-table-column>
+
+      <el-table-column type="index" label="序号" width="100" align="center" />
+      <el-table-column prop="nickName" label="昵称" />
+      <el-table-column label="性别" width="80">
+        <template #default="scope">
+          <span v-if="scope.row.gender === 0">未知</span>
+          <span v-if="scope.row.gender === 1">男</span>
+          <span v-if="scope.row.gender === 2">女</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="头像" width="100">
+        <template #default="scope">
+          <el-popover placement="right" :width="400" trigger="hover">
+            <img :src="scope.row.avatarUrl" width="400" height="400" />
+            <template #reference>
+              <img
+                :src="scope.row.avatarUrl"
+                style="max-height: 60px; max-width: 60px"
+              />
+            </template>
+          </el-popover>
+        </template>
+      </el-table-column>
+      <el-table-column prop="mobile" label="手机号码" />
+      <el-table-column prop="birthday" label="出生日期" />
+      <el-table-column prop="status" width="80" label="状态">
+        <template #default="scope">
+          <el-tag v-if="scope.row.status === 1" type="success">正常</el-tag>
+          <el-tag v-else type="info">禁用</el-tag>
+        </template>
+      </el-table-column>
+
+      <el-table-column prop="createTime" label="注册时间" />
+
+      <el-table-column label="账户余额">
+        <template #default="scope">
+          {{ scope.row.balance / 100 }}
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页工具条 -->
+    <pagination
+      v-if="total > 0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="handleQuery"
+    />
+  </div>
+</template>
+
+<style scoped></style>