init

src/api/cai/userMember.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询会员管理列表
+export function listUserMember(query) {
+  return request({
+    url: '/cai/userMember/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询会员管理详细
+export function getUserMember(id) {
+  return request({
+    url: '/cai/userMember/' + id,
+    method: 'get'
+  })
+}
+
+// 新增会员管理
+export function addUserMember(data) {
+  return request({
+    url: '/cai/userMember',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改会员管理
+export function updateUserMember(data) {
+  return request({
+    url: '/cai/userMember',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除会员管理
+export function delUserMember(id) {
+  return request({
+    url: '/cai/userMember/' + id,
+    method: 'delete'
+  })
+}

src/components/ImageUpload2/index.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="component-upload-image">
+    <el-upload
+        multiple
+        :action="uploadImgUrl"
+        list-type="picture-card"
+        :on-success="handleUploadSuccess"
+        :before-upload="handleBeforeUpload"
+        :limit="limit"
+        :on-error="handleUploadError"
+        :on-exceed="handleExceed"
+        name="file"
+        :on-remove="handleRemove"
+        :show-file-list="true"
+        :headers="headers"
+        :file-list="fileList"
+        :on-preview="handlePictureCardPreview"
+        :class="{hide: this.fileList.length >= this.limit}"
+    >
+      <i class="el-icon-plus"></i>
+    </el-upload>
+
+    <!-- 上传提示 -->
+    <div class="el-upload__tip" slot="tip" v-if="showTip">
+      请上传
+      <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
+      <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
+      的文件
+    </div>
+
+    <el-dialog
+        :visible.sync="dialogVisible"
+        title="预览"
+        width="800"
+        append-to-body
+    >
+      <img
+          :src="dialogImageUrl"
+          style="display: block; max-width: 100%; margin: 0 auto"
+      />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getToken } from "@/utils/auth";
+
+export default {
+  props: {
+    value: [String, Object, Array],
+    // 图片数量限制
+    limit: {
+      type: Number,
+      default: 1,
+    },
+    // 大小限制(MB)
+    fileSize: {
+      type: Number,
+      default: 5,
+    },
+    // 文件类型, 例如['png', 'jpg', 'jpeg']
+    fileType: {
+      type: Array,
+      default: () => ["png", "jpg", "jpeg"],
+    },
+    // 是否显示提示
+    isShowTip: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      number: 0,
+      uploadList: [],
+      dialogImageUrl: "",
+      dialogVisible: false,
+      hideUpload: false,
+      baseUrl: process.env.VUE_APP_BASE_API,
+      uploadImgUrl: process.env.VUE_APP_BASE_API + "/system/oss/upload", // 上传的图片服务器地址
+      headers: {
+        Authorization: "Bearer " + getToken(),
+      },
+      fileList: []
+    };
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (val) {
+          // 首先将值转为数组
+          const list = Array.isArray(val) ? val : this.value.split(',');
+          // 然后将数组转为对象数组
+          this.fileList = list.map(item => {
+            if (typeof item === "string") {
+              if (item.indexOf(this.baseUrl) === -1 && !item.startsWith("http")) {
+                item = { name: this.baseUrl + item, url: this.baseUrl + item };
+              } else {
+                item = { name: item, url: item };
+              }
+            }
+            console.log(item)
+            return item;
+          });
+        } else {
+          this.fileList = [];
+          return [];
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  computed: {
+    // 是否显示提示
+    showTip() {
+      return this.isShowTip && (this.fileType || this.fileSize);
+    },
+  },
+  methods: {
+    // 删除图片
+    handleRemove(file, fileList) {
+      const findex = this.fileList.map(f => f.name).indexOf(file.name);
+      if(findex > -1) {
+        this.fileList.splice(findex, 1);
+        this.$emit("input", this.listToString(this.fileList));
+      }
+    },
+    // 上传成功回调
+    handleUploadSuccess(res) {
+      const { data } = res
+      console.log(data);
+      this.uploadList.push({ name: data.fileName, url: data.url });
+      if (this.uploadList.length === this.number) {
+        this.fileList = this.fileList.concat(this.uploadList);
+        this.uploadList = [];
+        this.number = 0;
+        this.$emit("input", this.listToString(this.fileList));
+        this.$modal.closeLoading();
+      }
+    },
+    // 上传前loading加载
+    handleBeforeUpload(file) {
+      let isImg = false;
+      if (this.fileType.length) {
+        let fileExtension = "";
+        if (file.name.lastIndexOf(".") > -1) {
+          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
+        }
+        isImg = this.fileType.some(type => {
+          if (file.type.indexOf(type) > -1) return true;
+          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
+          return false;
+        });
+      } else {
+        isImg = file.type.indexOf("image") > -1;
+      }
+
+      if (!isImg) {
+        this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);
+        return false;
+      }
+      if (this.fileSize) {
+        const isLt = file.size / 1024 / 1024 < this.fileSize;
+        if (!isLt) {
+          this.$modal.msgError(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
+          return false;
+        }
+      }
+      this.$modal.loading("正在上传图片，请稍候...");
+      this.number++;
+    },
+    // 文件个数超出
+    handleExceed() {
+      this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
+    },
+    // 上传失败
+    handleUploadError() {
+      this.$modal.msgError("上传图片失败，请重试");
+      this.$modal.closeLoading();
+    },
+    // 预览
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+    // 对象转成指定字符串分隔
+    listToString(list, separator) {
+      let strs = "";
+      separator = separator || ",";
+      for (let i in list) {
+        strs += list[i].url.replace(this.baseUrl, "") + separator;
+      }
+      return strs != '' ? strs.substr(0, strs.length - 1) : '';
+    }
+  }
+};
+</script>
+<style scoped lang="scss">
+// .el-upload--picture-card 控制加号部分
+::v-deep.hide .el-upload--picture-card {
+  display: none;
+}
+// 去掉动画效果
+::v-deep .el-list-enter-active,
+::v-deep .el-list-leave-active {
+  transition: all 0s;
+}
+
+::v-deep .el-list-enter, .el-list-leave-active {
+  opacity: 0;
+  transform: translateY(0);
+}
+</style>
+

src/constant/statusMap.js

@@ -41,6 +41,28 @@ export const cashStatusList = [
   { value: 3, label: '审核不通过',listClass: listClass.danger },
   { value: 4, label: '提现取消',listClass: listClass.info }
 ]
+// 1.封6小时   2.封1天  3.封3天  4.封5天   5.封7天   6.封一个月  7.封10年 8 一小时 9 三小时 10 十二小时
+export const forbidTimeList = [
+  { value: 1, label: '封6小时' },
+  { value: 2, label: '封1天'},
+  { value: 3, label: '封3天' },
+  { value: 4, label: '封5天' },
+  { value: 5, label: '封7天' },
+  { value: 6, label: '封一个月' },
+  { value: 7, label: '封10年' },
+  { value: 8, label: '一小时' },
+  { value: 9, label: '三小时' },
+  { value: 10, label: '十二小时' },
+]
+
+// 1 封用户uid  2.封设备uuid  3.imei 4.mac
+export const forbidTypeList = [
+  { value: 1, label: '用户' },
+  { value: 2, label: '设备'},
+  { value: 3, label: 'imei' },
+  { value: 4, label: 'mac' },
+]
+
 
 
 

src/main.js

@@ -29,6 +29,7 @@ import Editor from "@/components/Editor"
 import FileUpload from "@/components/FileUpload"
 // 图片上传组件
 import ImageUpload from "@/components/ImageUpload"
+import ImageUpload2 from "@/components/ImageUpload2"
 // 图片预览组件
 import ImagePreview from "@/components/ImagePreview"
 // 字典标签组件
@@ -59,6 +60,7 @@ Vue.component('Editor', Editor)
 Vue.component('FileUpload', FileUpload)
 Vue.component('ImageUpload', ImageUpload)
 Vue.component('ImagePreview', ImagePreview)
+Vue.component('ImageUpload2', ImageUpload2)
 Vue.component('CaiDictTag', CaiDictTag)
 
 Vue.use(directive)

src/views/cai/banner/banner-add-update-dialog.vue

@@ -5,7 +5,7 @@
         <el-input v-model="form.title" placeholder="请输入标题" />
       </el-form-item>
       <el-form-item label="轮播图" prop="image">
-        <image-upload v-model="form.image"/>
+        <image-upload2 v-model="form.image"/>
       </el-form-item>
       <el-form-item label="链接地址" prop="linkUrl">
         <el-input v-model="form.linkUrl" placeholder="请输入链接地址" />
@@ -25,12 +25,10 @@
 </template>
 
 <script>
-import ImageUpload from '@/components/ImageUpload/index'
 import { addBanner, getBanner, updateBanner } from '@/api/cai/banner'
 
 export default {
   components: {
-    ImageUpload,
   },
   data () {
     return {
@@ -91,7 +89,7 @@ export default {
           this.buttonLoading = true;
           if (this.form.id != null) {
             updateBanner(this.form).then(data => {
-              this.msgSuccess("修改成功");
+              this.$modal.msgSuccess("修改成功");
               this.$modal.buttonLoading = false;
               this.open = false
               this.$emit('refreshDataList')

src/views/cai/userForbid/index.vue

@@ -1,62 +1,6 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="封禁来源：1.账号  2.聊天" prop="sourceId">
-        <el-input
-          v-model="queryParams.sourceId"
-          placeholder="请输入封禁来源：1.账号  2.聊天"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="" prop="member">
-        <el-input
-          v-model="queryParams.member"
-          placeholder="请输入"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="封号时长  1.封6小时   2.封1天  3.封3天  4.封5天   5.封7天   6.封一个月  7.封10年 8 一小时 9 三小时 10 十二小时 " prop="forbidTime">
-        <el-input
-          v-model="queryParams.forbidTime"
-          placeholder="请输入封号时长  1.封6小时   2.封1天  3.封3天  4.封5天   5.封7天   6.封一个月  7.封10年 8 一小时 9 三小时 10 十二小时 "
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="开始时间" prop="beginTime">
-        <el-input
-          v-model="queryParams.beginTime"
-          placeholder="请输入开始时间"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="结束时间" prop="endTime">
-        <el-input
-          v-model="queryParams.endTime"
-          placeholder="请输入结束时间"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="原始用户ID(后台编辑用）" prop="originUid">
-        <el-input
-          v-model="queryParams.originUid"
-          placeholder="请输入原始用户ID(后台编辑用）"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="理由" prop="reason">
-        <el-input
-          v-model="queryParams.reason"
-          placeholder="请输入理由"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -64,27 +8,6 @@
     </el-form>
 
     <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['cai:userForbid:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['cai:userForbid:edit']"
-        >修改</el-button>
-      </el-col>
       <el-col :span="1.5">
         <el-button
           type="danger"
@@ -96,39 +19,28 @@
           v-hasPermi="['cai:userForbid:remove']"
         >删除</el-button>
       </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['cai:userForbid:export']"
-        >导出</el-button>
-      </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="userForbidList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="" align="center" prop="id" v-if="true"/>
+      <el-table-column label="类型" align="center" prop="type" >
-      <el-table-column label="类型  ：1 封用户uid  2.封设备uuid  3.imei 4.mac" align="center" prop="type" />
+        <template v-slot="scope">
-      <el-table-column label="封禁来源：1.账号  2.聊天" align="center" prop="sourceId" />
+          <cai-dict-tag :options="forbidTimeList" :value="scope.row.type" />
-      <el-table-column label="" align="center" prop="member" />
+        </template>
-      <el-table-column label="封号时长  1.封6小时   2.封1天  3.封3天  4.封5天   5.封7天   6.封一个月  7.封10年 8 一小时 9 三小时 10 十二小时 " align="center" prop="forbidTime" />
+      </el-table-column>
+      <el-table-column label="封号对象" align="center" prop="member" />
+      <el-table-column label="封号时长" align="center" prop="forbidTime" >
+        <template v-slot="scope">
+          <cai-dict-tag :options="forbidTimeList" :value="scope.row.forbidTime" />
+        </template>
+      </el-table-column>
       <el-table-column label="开始时间" align="center" prop="beginTime" />
       <el-table-column label="结束时间" align="center" prop="endTime" />
-      <el-table-column label="原始用户ID(后台编辑用）" align="center" prop="originUid" />
       <el-table-column label="理由" align="center" prop="reason" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="创建时间" align="center" prop="createTime" />
-        <template slot-scope="scope">
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="60">
-          <el-button
+        <template v-slot="scope">
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['cai:userForbid:edit']"
-          >修改</el-button>
           <el-button
             size="mini"
             type="text"
@@ -147,49 +59,18 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
-
-    <!-- 添加或修改封号列表对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="封禁来源：1.账号  2.聊天" prop="sourceId">
-          <el-input v-model="form.sourceId" placeholder="请输入封禁来源：1.账号  2.聊天" />
-        </el-form-item>
-        <el-form-item label="" prop="member">
-          <el-input v-model="form.member" placeholder="请输入" />
-        </el-form-item>
-        <el-form-item label="封号时长  1.封6小时   2.封1天  3.封3天  4.封5天   5.封7天   6.封一个月  7.封10年 8 一小时 9 三小时 10 十二小时 " prop="forbidTime">
-          <el-input v-model="form.forbidTime" placeholder="请输入封号时长  1.封6小时   2.封1天  3.封3天  4.封5天   5.封7天   6.封一个月  7.封10年 8 一小时 9 三小时 10 十二小时 " />
-        </el-form-item>
-        <el-form-item label="开始时间" prop="beginTime">
-          <el-input v-model="form.beginTime" placeholder="请输入开始时间" />
-        </el-form-item>
-        <el-form-item label="结束时间" prop="endTime">
-          <el-input v-model="form.endTime" placeholder="请输入结束时间" />
-        </el-form-item>
-        <el-form-item label="原始用户ID(后台编辑用）" prop="originUid">
-          <el-input v-model="form.originUid" placeholder="请输入原始用户ID(后台编辑用）" />
-        </el-form-item>
-        <el-form-item label="理由" prop="reason">
-          <el-input v-model="form.reason" placeholder="请输入理由" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
 <script>
-import { listUserForbid, getUserForbid, delUserForbid, addUserForbid, updateUserForbid } from "@/api/cai/userForbid";
+import { delUserForbid, listUserForbid } from '@/api/cai/userForbid'
+import { forbidTimeList, forbidTypeList } from '@/constant/statusMap'
 
 export default {
   name: "UserForbid",
   data() {
     return {
-      // 按钮loading
+      forbidTimeList,forbidTypeList,
-      buttonLoading: false,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -204,10 +85,6 @@ export default {
       total: 0,
       // 封号列表表格数据
       userForbidList: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -221,41 +98,6 @@ export default {
         originUid: undefined,
         reason: undefined
       },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        id: [
-          { required: true, message: "不能为空", trigger: "blur" }
-        ],
-        type: [
-          { required: true, message: "类型  ：1 封用户uid  2.封设备uuid  3.imei 4.mac不能为空", trigger: "change" }
-        ],
-        sourceId: [
-          { required: true, message: "封禁来源：1.账号  2.聊天不能为空", trigger: "blur" }
-        ],
-        member: [
-          { required: true, message: "不能为空", trigger: "blur" }
-        ],
-        forbidTime: [
-          { required: true, message: "封号时长  1.封6小时   2.封1天  3.封3天  4.封5天   5.封7天   6.封一个月  7.封10年 8 一小时 9 三小时 10 十二小时 不能为空", trigger: "blur" }
-        ],
-        beginTime: [
-          { required: true, message: "开始时间不能为空", trigger: "blur" }
-        ],
-        endTime: [
-          { required: true, message: "结束时间不能为空", trigger: "blur" }
-        ],
-        createTime: [
-          { required: true, message: "不能为空", trigger: "blur" }
-        ],
-        originUid: [
-          { required: true, message: "原始用户ID(后台编辑用）不能为空", trigger: "blur" }
-        ],
-        reason: [
-          { required: true, message: "理由不能为空", trigger: "blur" }
-        ]
-      }
     };
   },
   created() {
@@ -271,27 +113,6 @@ export default {
         this.loading = false;
       });
     },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        id: undefined,
-        type: undefined,
-        sourceId: undefined,
-        member: undefined,
-        forbidTime: undefined,
-        beginTime: undefined,
-        endTime: undefined,
-        createTime: undefined,
-        originUid: undefined,
-        reason: undefined
-      };
-      this.resetForm("form");
-    },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;
@@ -308,49 +129,6 @@ export default {
       this.single = selection.length!==1
       this.multiple = !selection.length
     },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加封号列表";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.loading = true;
-      this.reset();
-      const id = row.id || this.ids
-      getUserForbid(id).then(response => {
-        this.loading = false;
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改封号列表";
-      });
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          this.buttonLoading = true;
-          if (this.form.id != null) {
-            updateUserForbid(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            }).finally(() => {
-              this.buttonLoading = false;
-            });
-          } else {
-            addUserForbid(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            }).finally(() => {
-              this.buttonLoading = false;
-            });
-          }
-        }
-      });
-    },
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;
@@ -365,12 +143,6 @@ export default {
       }).finally(() => {
         this.loading = false;
       });
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('cai/userForbid/export', {
-        ...this.queryParams
-      }, `userForbid_${new Date().getTime()}.xlsx`)
     }
   }
 };

src/views/cai/userMember/index.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['cai:userMember:add']"
+        >新增</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="userMemberList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="蜜瓜号" align="center" prop="userCode" />
+      <el-table-column label="昵称" align="center" prop="userCode" />
+      <el-table-column label="手机" align="center" prop="userCode" />
+      <el-table-column label="头像" align="center" prop="userCode" />
+      <el-table-column label="性别" align="center" prop="userCode" />
+      <el-table-column label="会员类型 0 普通 1 超级" align="center" prop="memberType" />
+      <el-table-column label="永久 0 不是  1是" align="center" prop="longs" />
+      <el-table-column label="天数" align="center" prop="expire" />
+      <el-table-column label="到期时间" align="center" prop="expireDate" width="150" />
+      <el-table-column label="购买时间" align="center" prop="createTime" width="150" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="60">
+        <template v-slot="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['cai:userMember:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import { listUserMember, getUserMember, delUserMember, addUserMember, updateUserMember } from "@/api/cai/userMember";
+
+export default {
+  name: "UserMember",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 会员管理表格数据
+      userMemberList: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询会员管理列表 */
+    getList() {
+      this.loading = true;
+      listUserMember(this.queryParams).then(response => {
+        this.userMemberList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal.confirm('是否确认删除会员管理编号为"' + ids + '"的数据项？').then(() => {
+        this.loading = true;
+        return delUserMember(ids);
+      }).then(() => {
+        this.loading = false;
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+  }
+};
+</script>