feat(member/index.vue): 添加会员管理

src/api/ums/member.ts

@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+/**
+ * 获取会员分页列表
+ *
+ * @param queryParams
+ */
+export function listMembersWithPage(queryParams:object) {
+    return request({
+        url: '/mall-ums/api/v1/members',
+        method: 'get',
+        params: queryParams
+    })
+}
+
+/**
+ * 获取会员详情
+ *
+ * @param id
+ */
+export function getMemberDetail(id:number) {
+    return request({
+        url: '/mall-ums/api/v1/members/' + id,
+        method: 'get'
+    })
+}
+
+/**
+ * 添加会员
+ *
+ * @param data
+ */
+export function addMember(data:object) {
+    return request({
+        url: '/mall-ums/api/v1/members',
+        method: 'post',
+        data: data
+    })
+}
+
+/**
+ * 添加会员
+ *
+ * @param id
+ * @param data
+ */
+export function updateMember(id:number, data:object) {
+    return request({
+        url: '/mall-ums/api/v1/members/' + id,
+        method: 'put',
+        data: data
+    })
+}

src/views/pms/goods/index.vue

@@ -121,15 +121,13 @@
 import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons'
 import {listGoodsWithPage, deleteGoods} from '@/api/pms/goods'
 import {listCascadeCategories} from '@/api/pms/category'
-import {reactive, ref, onMounted, toRefs, unref} from 'vue'
+import {reactive, ref, onMounted, toRefs} from 'vue'
-import {ElTable, ElMessage, ElMessageBox, ElTree} from 'element-plus'
+import {ElTable, ElMessage, ElMessageBox} from 'element-plus'
 import {getCurrentInstance} from 'vue'
 import {moneyFormatter} from '@/utils/filter'
-
-const dataTableRef = ref(ElTable)
-
 import {useRouter} from "vue-router"
 
+const dataTableRef = ref(ElTable)
 const router=useRouter()
 
 const state = reactive({

src/views/system/role/index.vue

@@ -17,7 +17,7 @@
             <svg-icon color="#333" icon-class="menu"/>
             <span style="margin:0 5px;">菜单分配</span>
             <el-tag type="success" v-if="role.id" size="small">
-              <svg-icon color="green  " icon-class="role"/>
+              <svg-icon color="green" icon-class="role"/>
               {{ role.name }}
             </el-tag>
             <el-tag type="warning" v-else size="small">请选择角色</el-tag>

src/views/ums/member/index.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="app-container">
+    <el-form
+        size="mini"
+        ref="queryForm"
+        :model="queryParams"
+        :inline="true"
+    >
+      <el-form-item>
+        <el-button type="danger" :icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
+      </el-form-item>
+      <el-form-item>
+        <el-input
+            v-model="queryParams.nickName"
+            placeholder="会员昵称"
+            clearable
+            @keyup.enter.native="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="pageList"
+              border
+              @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" align="center"/>
+      <el-table-column type="expand" width="80" label="会员地址">
+        <template #default="scope">
+          <el-table
+              :data="scope.row.addressList"
+              size="small"
+              border>
+            <el-table-column type="index" label="序号" width="80" 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 slot-scope="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="50" 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"
+              trigger="hover">
+            <img :src="scope.row.avatarUrl"/>
+            <img slot="reference" :src="scope.row.avatarUrl" :alt="scope.row.avatarUrl"
+                 style="max-height: 60px;max-width: 60px">
+          </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" size="mini">正常</el-tag>
+          <el-tag v-else type="info" size="mini">禁用</el-tag>
+        </template>
+      </el-table-column>
+
+      <el-table-column prop="gmtCreate" label="注册时间"/>
+
+      <el-table-column label="账户余额" width="80">
+        <template #default="scope">
+          {{ scope.row.balance / 100 }}
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页工具条 -->
+    <pagination
+        v-show="total>0"
+        :total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        @pagination="handleQuery"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons'
+import {listMembersWithPage} from '@/api/ums/member'
+
+import {reactive, ref, onMounted, toRefs} from 'vue'
+import {ElTable, ElMessage, ElMessageBox} from 'element-plus'
+import {listCascadeCategories} from "@api/pms/category";
+import {listGoodsWithPage} from "@api/pms/goods";
+
+const state = reactive({
+  // 遮罩层
+  loading: true,
+  // 选中数组
+  ids: [],
+  // 非单个禁用
+  single: true,
+  // 非多个禁用
+  multiple: true,
+  total: 0,
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    nickName: undefined
+  },
+  pageList: []
+})
+
+const { loading,ids,single, multiple,  queryParams, pageList,total} = toRefs(state);
+
+function handleQuery() {
+  state.loading = true
+  listMembersWithPage(state.queryParams).then(response => {
+    const {data, total} = response as any
+    state.pageList = data
+    state.total = total
+    state.loading = false
+  })
+}
+
+function resetQuery() {
+  state.queryParams = {
+    pageNum: 1,
+    pageSize: 10,
+    nickName: undefined,
+  }
+  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>
+
+<style scoped>
+</style>