From 3b26224ef5e8dc5c1b8a39b013fdcb0b7cffdd0a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E8=89=AF=28004796=29?= <zhanglian.zl@fcbox.com>
Date: Tue, 12 Mar 2024 15:38:47 +0800
Subject: [PATCH] init

---
 src/api/xq/user.js                        |  21 ++
 src/api/xq/userVip.js                     |   2 +-
 src/constant/statusMap.js                 |  46 ++-
 src/views/xq/userVip/add-vip-dialog.vue   | 123 +++++++
 src/views/xq/userVip/index.vue            | 268 +++++---------
 src/views/xq/userVip/vip-order-dialog.vue | 102 ++++++
 src/views/xq/vipOrder/index.vue           | 417 +++-------------------
 7 files changed, 430 insertions(+), 549 deletions(-)
 create mode 100644 src/views/xq/userVip/add-vip-dialog.vue
 create mode 100644 src/views/xq/userVip/vip-order-dialog.vue

diff --git a/src/api/xq/user.js b/src/api/xq/user.js
index 0995f2c..6c954d6 100644
--- a/src/api/xq/user.js
+++ b/src/api/xq/user.js
@@ -9,6 +9,27 @@ export function listUser(query) {
   })
 }
 
+export function listUserByUserCode(usercode) {
+  return request({
+    url: '/xq/user/listByUserCode',
+    method: 'get',
+    params:{
+      usercode: usercode,
+      limit: 40
+    }
+  })
+}
+
+export function getUserByUsercode(usercode) {
+  return request({
+    url: '/xq/user/getByUsercode',
+    method: 'get',
+    params:{
+      usercode: usercode
+    }
+  })
+}
+
 // 查询用户管理详细
 export function getUser(id) {
   return request({
diff --git a/src/api/xq/userVip.js b/src/api/xq/userVip.js
index 512a8e6..13b59f0 100644
--- a/src/api/xq/userVip.js
+++ b/src/api/xq/userVip.js
@@ -20,7 +20,7 @@ export function getUserVip(id) {
 // 新增VIP用户
 export function addUserVip(data) {
   return request({
-    url: '/xq/userVip',
+    url: '/xq/userVip/addVip',
     method: 'post',
     data: data
   })
diff --git a/src/constant/statusMap.js b/src/constant/statusMap.js
index ca90371..50f9810 100644
--- a/src/constant/statusMap.js
+++ b/src/constant/statusMap.js
@@ -80,11 +80,6 @@ export const enableStatusList = [
   { value: 0, label: '禁用'},
 ]
 
-export const booleanList = [
-  { value: true, label: '是',listClass: listClass.danger},
-  { value: false, label: '否',listClass: listClass.info},
-]
-
 export const userRiskLowList = [
   { value: 1, label: '低风险',listClass: listClass.info},
   { value: 2, label: '高风险',listClass: listClass.danger},
@@ -171,13 +166,6 @@ export const platformTypeList = [
   { value: 'ADMIN', label: '后台操作',listClass: listClass.info},
 ]
 
-export const payStatusList = [
-  { value: 0, label: '待支付',listClass: listClass.info},
-  { value: 1, label: '已支付',listClass: listClass.primary},
-  { value: 5, label: '已退款',listClass: listClass.info},
-  { value: 10, label: '无需支付',listClass: listClass.info},
-]
-
 export const ipMicList = [
   { value: 1, label: 'IP'},
   { value: 2, label: 'MIC'},
@@ -506,3 +494,37 @@ export const userAuthStatusList = [
   { value: 2, label: '已认证',listClass: listClass.primary},
   { value: 3, label: '审核不通过',listClass: listClass.danger},
 ]
+
+
+// 1-正常 2-已过期 3-已取消
+export const userVipStatusList = [
+  { value: 1, label: '正常',listClass: listClass.primary},
+  { value: 2, label: '已过期',listClass: listClass.danger},
+  { value: 3, label: '已取消',listClass: listClass.info},
+]
+
+// 1-普通会员 2-黄金会员 3-钻石会员
+export const vipTypeList = [
+  { value: 1, label: '普通会员',listClass: listClass.primary},
+  { value: 2, label: '黄金会员',listClass: listClass.warning},
+  { value: 3, label: '钻石会员',listClass: listClass.danger},
+]
+
+// 1-月卡 2-季卡 3-年卡
+export const vipTimeList = [
+  { value: 1, label: '月卡',listClass: listClass.primary},
+  { value: 2, label: '季卡',listClass: listClass.primary},
+  { value: 3, label: '年卡',listClass: listClass.primary},
+]
+
+export const payStatusList = [
+  { value: 0, label: '待支付',listClass: listClass.info},
+  { value: 1, label: '已支付',listClass: listClass.primary},
+  { value: 5, label: '已退款',listClass: listClass.info},
+  { value: 10, label: '无需支付',listClass: listClass.info},
+]
+
+export const booleanList = [
+  { value: true, label: '是',listClass: listClass.danger},
+  { value: false, label: '否',listClass: listClass.info},
+]
diff --git a/src/views/xq/userVip/add-vip-dialog.vue b/src/views/xq/userVip/add-vip-dialog.vue
new file mode 100644
index 0000000..83ebfb5
--- /dev/null
+++ b/src/views/xq/userVip/add-vip-dialog.vue
@@ -0,0 +1,123 @@
+<template>
+  <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="open" width="700px" append-to-body>
+    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-form-item label="会员类型" prop="openVipType">
+        <el-select v-model="form.openVipType" placeholder="会员类型" clearable size="small">
+          <el-option
+              v-for="dict in vipTypeList"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="开通月份" prop="openVipMonthNum">
+        <el-input-number v-model='form.openVipMonthNum' :min="1" />
+      </el-form-item>
+      <el-form-item :label="'用户编号'" prop="usercode">
+        <el-autocomplete
+            class="inline-input"
+            v-model="form.usercode"
+            :fetch-suggestions="querySearch"
+            placeholder="请输入内容"
+            @select="handleSelect"
+        ></el-autocomplete>
+      </el-form-item>
+      <el-form-item label="手机号" v-if="info.mobile">
+        {{ info.mobile }}
+      </el-form-item>
+      <el-form-item label="昵称" v-if="info.nickname">
+        {{ info.nickname }} 【{{ info.usercode }}】
+      </el-form-item>
+      <el-form-item label="头像" v-if="info.avatar">
+        <image-avatar :src="info.avatar"/>
+      </el-form-item>
+      <el-form-item>
+        注意：若用户已是会员，再次设置时将会使用最新的会员信息
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="open = false">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import {getUserByUsercode, listUserByUserCode} from "@/api/xq/user";
+import { vipTypeList } from '@/constant/statusMap'
+import { addUserVip } from '@/api/xq/userVip'
+
+export default {
+  components: {
+  },
+  data () {
+    return {
+      vipTypeList,
+      open: false,
+      title: '',
+      form:{
+        usercode: undefined,
+        openVipType: undefined,
+        openVipMonthNum: undefined
+      },
+      info:{
+      },
+      // 表单校验
+      rules: {
+        usercode: [
+          { required: true, message: "数据不能为空", trigger: "blur" }
+        ],
+        openVipType: [
+          { required: true, message: "数据不能为空", trigger: "blur" }
+        ],
+        openVipMonthNum: [
+          { required: true, message: "数据不能为空", trigger: "blur" }
+        ],
+      },
+      buttonLoading: false,
+    }
+  },
+  created() {
+  },
+  methods: {
+    init () {
+      this.open = true;
+      this.title = "新增会员"
+      this.info = {};
+      this.form.usercode = undefined
+    },
+    querySearch(querySearch,cb){
+      listUserByUserCode(querySearch).then(res => {
+        cb(res.data.map((terminal) => {
+          return {
+            value: terminal,
+            name: terminal,
+          };
+        }))
+      })
+    },
+    handleSelect(item){
+      getUserByUsercode(item.value).then(res => {
+        this.info = res.data
+      })
+    },
+    // 表单提交
+    submitForm () {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          this.buttonLoading = true;
+          addUserVip(this.form).then(data => {
+            this.$modal.msgSuccess("新增会员成功");
+            this.buttonLoading = false;
+            this.open = false
+            this.$emit('refreshDataList')
+          }).finally(() => {
+            this.buttonLoading = false;
+          });
+        }
+      })
+    },
+  }
+}
+</script>
diff --git a/src/views/xq/userVip/index.vue b/src/views/xq/userVip/index.vue
index 6a5ee3f..9eafa98 100644
--- a/src/views/xq/userVip/index.vue
+++ b/src/views/xq/userVip/index.vue
@@ -34,86 +34,88 @@
     <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="['xq:userVip:add']"
-        >新增</el-button>
+            type="primary"
+            plain
+            icon="el-icon-plus"
+            size="mini"
+            @click="handleAdd"
+            v-hasPermi="['xq:userVip:add']"
+        >新增
+        </el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="userVipList" @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="用户ID" align="center" prop="userId" />
-      <el-table-column label="用户号" align="center" prop="usercode" />
-      <el-table-column label="1-普通会员 2-黄金会员 3-钻石会员" align="center" prop="vipType" />
-      <el-table-column label="会员到期时间" align="center" prop="vipTimeout" width="180" />
-      <el-table-column label="1-正常 2-已过期 3-已取消" align="center" prop="vipStatus" />
+      <el-table-column type="selection" width="55" align="center"/>
+      <el-table-column label="用户编号" align="center" prop="usercode"/>
+      <el-table-column label="昵称" align="center" prop="nickname" show-overflow-tooltip/>
+      <el-table-column label="手机号" align="center" prop="mobile" width="100"/>
+      <el-table-column label="头像" align="center" prop="avatar">
+        <template v-slot="scope">
+          <image-avatar :src="scope.row.avatar"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="会员类型" align="center" prop="vipType">
+        <template v-slot="scope">
+          <cai-dict-tag :options="vipTypeList" :value="scope.row.vipType"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" align="center" prop="vipStatus">
+        <template v-slot="scope">
+          <cai-dict-tag :options="userVipStatusList" :value="scope.row.vipStatus"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="会员到期时间" align="center" prop="vipTimeout" width="180"/>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template v-slot="scope">
           <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['xq:userVip:edit']"
-          >修改</el-button>
+              size="mini"
+              type="text"
+              icon="el-icon-delete"
+              v-if="scope.row.vipStatus === 1"
+              @click="handleClose(scope.row)"
+              v-hasPermi="['xq:userVip:remove']"
+          >解除
+          </el-button>
           <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['xq:userVip:remove']"
-          >删除</el-button>
+              size="mini"
+              type="text"
+              icon="el-icon-info"
+              @click="handleVipOrder(scope.row)"
+          >记录
+          </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"
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
     />
 
-    <!-- 添加或修改VIP用户对话框 -->
-    <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="用户ID" prop="userId">
-          <el-input v-model="form.userId" placeholder="请输入用户ID" />
-        </el-form-item>
-        <el-form-item label="用户号" prop="usercode">
-          <el-input v-model="form.usercode" placeholder="请输入用户号" />
-        </el-form-item>
-        <el-form-item label="会员到期时间" prop="vipTimeout">
-          <el-date-picker clearable
-            v-model="form.vipTimeout"
-            type="datetime"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            placeholder="请选择会员到期时间">
-          </el-date-picker>
-        </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>
+    <add-vip-dialog v-if="addVipDialogVisible" ref="addVipDialog" @refreshDataList="getList"/>
+    <vip-order-dialog v-if="vipOrderDialogVisible" ref="vipOrderDialog"/>
   </div>
 </template>
 
 <script>
-import { listUserVip, getUserVip, delUserVip, addUserVip, updateUserVip } from "@/api/xq/userVip";
+import { delUserVip, listUserVip } from '@/api/xq/userVip'
+import { userVipStatusList, vipTypeList } from '@/constant/statusMap'
+import AddVipDialog from '@/views/xq/userVip/add-vip-dialog.vue'
+import VipOrderDialog from '@/views/xq/userVip/vip-order-dialog.vue'
 
 export default {
-  name: "UserVip",
+  name: 'UserVip',
+  components: { AddVipDialog, VipOrderDialog },
   data() {
     return {
+      userVipStatusList, vipTypeList,
+      addVipDialogVisible: false,
+      vipOrderDialogVisible: false,
       // 按钮loading
       buttonLoading: false,
       // 遮罩层
@@ -131,159 +133,75 @@ export default {
       // VIP用户表格数据
       userVipList: [],
       // 弹出层标题
-      title: "",
+      title: '',
       // 是否显示弹出层
       open: false,
       // 查询参数
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        userId: undefined,
         usercode: undefined,
-        vipType: undefined,
-        vipTimeout: undefined,
-        vipStatus: undefined,
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        id: [
-          { required: true, message: "不能为空", trigger: "blur" }
-        ],
-        userId: [
-          { required: true, message: "用户ID不能为空", trigger: "blur" }
-        ],
-        usercode: [
-          { required: true, message: "用户号不能为空", trigger: "blur" }
-        ],
-        vipType: [
-          { required: true, message: "1-普通会员 2-黄金会员 3-钻石会员不能为空", trigger: "change" }
-        ],
-        vipTimeout: [
-          { required: true, message: "会员到期时间不能为空", trigger: "blur" }
-        ],
-        vipStatus: [
-          { required: true, message: "1-正常 2-已过期 3-已取消不能为空", trigger: "change" }
-        ],
-        createTime: [
-          { required: true, message: "创建时间不能为空", trigger: "blur" }
-        ],
+        nickname: undefined,
+        mobile: undefined
       }
-    };
+    }
   },
   created() {
-    this.getList();
+    this.getList()
   },
   methods: {
     /** 查询VIP用户列表 */
     getList() {
-      this.loading = true;
+      this.loading = true
       listUserVip(this.queryParams).then(response => {
-        this.userVipList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        id: undefined,
-        userId: undefined,
-        usercode: undefined,
-        vipType: undefined,
-        vipTimeout: undefined,
-        vipStatus: undefined,
-        createTime: undefined,
-        updateTime: undefined
-      };
-      this.resetForm("form");
+        this.userVipList = response.rows
+        this.total = response.total
+        this.loading = false
+      })
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
+      this.queryParams.pageNum = 1
+      this.getList()
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
+      this.resetForm('queryForm')
+      this.handleQuery()
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加VIP用户";
+    handleAdd(row) {
+      this.addVipDialogVisible = true
+      this.$nextTick(() => {
+        this.$refs.addVipDialog.init(row?.usercode)
+      })
     },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.loading = true;
-      this.reset();
-      const id = row.id || this.ids
-      getUserVip(id).then(response => {
-        this.loading = false;
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改VIP用户";
-      });
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          this.buttonLoading = true;
-          if (this.form.id != null) {
-            updateUserVip(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            }).finally(() => {
-              this.buttonLoading = false;
-            });
-          } else {
-            addUserVip(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            }).finally(() => {
-              this.buttonLoading = false;
-            });
-          }
-        }
-      });
+    handleVipOrder(row) {
+      this.vipOrderDialogVisible = true
+      this.$nextTick(() => {
+        this.$refs.vipOrderDialog.init(row)
+      })
     },
     /** 删除按钮操作 */
-    handleDelete(row) {
-      const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除VIP用户编号为"' + ids + '"的数据项？').then(() => {
-        this.loading = true;
-        return delUserVip(ids);
+    handleClose(row) {
+      this.$modal.confirm('是否确认解除用户"' + row.nickname + '"的会员数据？').then(() => {
+        this.loading = true
+        return delUserVip(row.id)
       }).then(() => {
-        this.loading = false;
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
+        this.loading = false
+        this.getList()
+        this.$modal.msgSuccess('解除成功')
       }).catch(() => {
       }).finally(() => {
-        this.loading = false;
-      });
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('xq/userVip/export', {
-        ...this.queryParams
-      }, `userVip_${new Date().getTime()}.xlsx`)
+        this.loading = false
+      })
     }
   }
-};
+}
 </script>
diff --git a/src/views/xq/userVip/vip-order-dialog.vue b/src/views/xq/userVip/vip-order-dialog.vue
new file mode 100644
index 0000000..43a28cd
--- /dev/null
+++ b/src/views/xq/userVip/vip-order-dialog.vue
@@ -0,0 +1,102 @@
+<template>
+  <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="open" width="1000px" append-to-body>
+    <el-row :gutter="10" class="mb8">
+      <right-toolbar @queryTable="getList"></right-toolbar>
+    </el-row>
+    <el-table v-loading="loading" :data="vipOrderList" >
+      <el-table-column label="订单号" align="center" prop="orderNo" show-overflow-tooltip/>
+      <el-table-column label="用户编号" align="center" prop="usercode" />
+      <el-table-column label="会员类型" align="center" prop="vipType" >
+        <template v-slot="scope">
+          <cai-dict-tag :options="vipTypeList" :value="scope.row.vipType" />
+        </template>
+      </el-table-column>
+      <el-table-column label="开通月份" align="center" prop="vipMonth" />
+      <el-table-column label="会员价格" align="center" prop="vipPrice" />
+      <el-table-column label="平台" align="center" prop="platformType" />
+      <el-table-column label="状态" align="center" prop="payStatus" >
+        <template v-slot="scope">
+          <cai-dict-tag :options="payStatusList" :value="scope.row.payStatus" />
+        </template>
+      </el-table-column>
+      <el-table-column label="操作时间" align="center" prop="createTime" width="160"/>
+      <el-table-column label="后台新增" align="center" prop="admin" >
+        <template v-slot="scope">
+          <cai-dict-tag :options="booleanList" :value="scope.row.admin" />
+        </template>
+      </el-table-column>
+      <el-table-column label="订单名称" align="center" prop="orderName" show-overflow-tooltip/>
+    </el-table>
+
+    <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+    />
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="open = false">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { booleanList, payStatusList, vipTimeList, vipTypeList } from '@/constant/statusMap'
+import { listVipOrder } from '@/api/xq/vipOrder'
+
+export default {
+  components: {
+  },
+  data () {
+    return {
+      vipTypeList,vipTimeList,payStatusList,booleanList,
+      loading: true,
+      open: false,
+      title: '',
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // VIP订单表格数据
+      vipOrderList: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        usedPay: true,
+        usercode: undefined,
+      },
+    }
+  },
+  created() {
+  },
+  methods: {
+    init (row) {
+      this.open = true;
+      this.queryParams.usercode = row.usercode
+      this.getList()
+      this.title = "会员开通记录"
+    },
+    /** 查询VIP订单列表 */
+    getList() {
+      this.loading = true;
+      listVipOrder(this.queryParams).then(response => {
+        this.vipOrderList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+  }
+}
+</script>
diff --git a/src/views/xq/vipOrder/index.vue b/src/views/xq/vipOrder/index.vue
index 727d6f7..268b899 100644
--- a/src/views/xq/vipOrder/index.vue
+++ b/src/views/xq/vipOrder/index.vue
@@ -1,44 +1,28 @@
 <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="用户ID" prop="userId">
+      <el-form-item label="用户编号" prop="usercode">
         <el-input
-          v-model="queryParams.userId"
-          placeholder="请输入用户ID"
-          clearable
-          @keyup.enter.native="handleQuery"
+            v-model="queryParams.usercode"
+            placeholder="请输入用户编号"
+            clearable
+            @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="用户号" prop="usercode">
+      <el-form-item label="昵称" prop="nickname">
         <el-input
-          v-model="queryParams.usercode"
-          placeholder="请输入用户号"
-          clearable
-          @keyup.enter.native="handleQuery"
+            v-model="queryParams.nickname"
+            placeholder="请输入昵称"
+            clearable
+            @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="VIP-ID" prop="vipId">
+      <el-form-item label="手机号" prop="mobile">
         <el-input
-          v-model="queryParams.vipId"
-          placeholder="请输入VIP-ID"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="1-月卡 2-季卡 3-年卡" prop="vipTime">
-        <el-input
-          v-model="queryParams.vipTime"
-          placeholder="请输入1-月卡 2-季卡 3-年卡"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="会员价格" prop="vipPrice">
-        <el-input
-          v-model="queryParams.vipPrice"
-          placeholder="请输入会员价格"
-          clearable
-          @keyup.enter.native="handleQuery"
+            v-model="queryParams.mobile"
+            placeholder="请输入手机号"
+            clearable
+            @keyup.enter.native="handleQuery"
         />
       </el-form-item>
       <el-form-item label="订单号" prop="orderNo">
@@ -49,46 +33,6 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="支付时间" prop="payTime">
-        <el-date-picker clearable
-          v-model="queryParams.payTime"
-          type="date"
-          value-format="yyyy-MM-dd"
-          placeholder="请选择支付时间">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="appId" prop="appid">
-        <el-input
-          v-model="queryParams.appid"
-          placeholder="请输入appId"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="" prop="operateIp">
-        <el-input
-          v-model="queryParams.operateIp"
-          placeholder="请输入"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="是否为后台管理新增" prop="admin">
-        <el-input
-          v-model="queryParams.admin"
-          placeholder="请输入是否为后台管理新增"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="后台操作管理员ID" prop="adminId">
-        <el-input
-          v-model="queryParams.adminId"
-          placeholder="请输入后台操作管理员ID"
-          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>
@@ -96,89 +40,54 @@
     </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="['xq:vipOrder: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="['xq:vipOrder:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['xq:vipOrder: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="['xq:vipOrder:export']"
-        >导出</el-button>
-      </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="vipOrderList" @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="用户ID" align="center" prop="userId" />
-      <el-table-column label="用户号" align="center" prop="usercode" />
-      <el-table-column label="VIP-ID" align="center" prop="vipId" />
-      <el-table-column label="1-普通会员 2-黄金会员 3-钻石会员" align="center" prop="vipType" />
-      <el-table-column label="1-月卡 2-季卡 3-年卡" align="center" prop="vipTime" />
-      <el-table-column label="会员价格" align="center" prop="vipPrice" />
-      <el-table-column label="订单号" align="center" prop="orderNo" />
-      <el-table-column label="平台" align="center" prop="platformType" />
-      <el-table-column label="状态 0-待支付 1-已支付 5-已退款 10-无需支付" align="center" prop="payStatus" />
-      <el-table-column label="支付时间" align="center" prop="payTime" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.payTime, '{y}-{m}-{d}') }}</span>
+      <el-table-column label="订单号" align="center" prop="orderNo" show-overflow-tooltip/>
+      <el-table-column label="用户编号" align="center" prop="usercode" />
+      <el-table-column label="昵称" align="center" prop="nickname" show-overflow-tooltip/>
+      <el-table-column label="手机号" align="center" prop="mobile" width="100"/>
+      <el-table-column label="头像" align="center" prop="avatar" >
+        <template v-slot="scope">
+          <image-avatar :src="scope.row.avatar"/>
         </template>
       </el-table-column>
-      <el-table-column label="appId" align="center" prop="appid" />
-      <el-table-column label="" align="center" prop="returnContent" />
-      <el-table-column label="" align="center" prop="operateIp" />
-      <el-table-column label="是否为后台管理新增" align="center" prop="admin" />
-      <el-table-column label="后台操作管理员ID" align="center" prop="adminId" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
+      <el-table-column label="会员类型" align="center" prop="vipType" >
+        <template v-slot="scope">
+          <cai-dict-tag :options="vipTypeList" :value="scope.row.vipType" />
+        </template>
+      </el-table-column>
+<!--      <el-table-column label="开通时间" align="center" prop="vipTime" >
+        <template v-slot="scope">
+          <cai-dict-tag :options="vipTimeList" :value="scope.row.vipTime" />
+        </template>
+      </el-table-column>-->
+      <el-table-column label="开通月份" align="center" prop="vipMonth" />
+      <el-table-column label="会员价格" align="center" prop="vipPrice" />
+      <el-table-column label="平台" align="center" prop="platformType" />
+      <el-table-column label="状态" align="center" prop="payStatus" >
+        <template v-slot="scope">
+          <cai-dict-tag :options="payStatusList" :value="scope.row.payStatus" />
+        </template>
+      </el-table-column>
+      <el-table-column label="操作时间" align="center" prop="createTime" width="160"/>
+      <el-table-column label="后台新增" align="center" prop="admin" >
+        <template v-slot="scope">
+          <cai-dict-tag :options="booleanList" :value="scope.row.admin" />
+        </template>
+      </el-table-column>
+      <el-table-column label="订单名称" align="center" prop="orderName" show-overflow-tooltip/>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="70">
+        <template v-slot="scope">
           <el-button
             size="mini"
             type="text"
-            icon="el-icon-edit"
+            icon="el-icon-info"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['xq:vipOrder:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['xq:vipOrder:remove']"
-          >删除</el-button>
+          >详情</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -190,69 +99,18 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
-
-    <!-- 添加或修改VIP订单对话框 -->
-    <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="用户ID" prop="userId">
-          <el-input v-model="form.userId" placeholder="请输入用户ID" />
-        </el-form-item>
-        <el-form-item label="用户号" prop="usercode">
-          <el-input v-model="form.usercode" placeholder="请输入用户号" />
-        </el-form-item>
-        <el-form-item label="VIP-ID" prop="vipId">
-          <el-input v-model="form.vipId" placeholder="请输入VIP-ID" />
-        </el-form-item>
-        <el-form-item label="1-月卡 2-季卡 3-年卡" prop="vipTime">
-          <el-input v-model="form.vipTime" placeholder="请输入1-月卡 2-季卡 3-年卡" />
-        </el-form-item>
-        <el-form-item label="会员价格" prop="vipPrice">
-          <el-input v-model="form.vipPrice" placeholder="请输入会员价格" />
-        </el-form-item>
-        <el-form-item label="订单号" prop="orderNo">
-          <el-input v-model="form.orderNo" placeholder="请输入订单号" />
-        </el-form-item>
-        <el-form-item label="支付时间" prop="payTime">
-          <el-date-picker clearable
-            v-model="form.payTime"
-            type="datetime"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            placeholder="请选择支付时间">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="appId" prop="appid">
-          <el-input v-model="form.appid" placeholder="请输入appId" />
-        </el-form-item>
-        <el-form-item label="">
-          <editor v-model="form.returnContent" :min-height="192"/>
-        </el-form-item>
-        <el-form-item label="" prop="operateIp">
-          <el-input v-model="form.operateIp" placeholder="请输入" />
-        </el-form-item>
-        <el-form-item label="是否为后台管理新增" prop="admin">
-          <el-input v-model="form.admin" placeholder="请输入是否为后台管理新增" />
-        </el-form-item>
-        <el-form-item label="后台操作管理员ID" prop="adminId">
-          <el-input v-model="form.adminId" placeholder="请输入后台操作管理员ID" />
-        </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 { listVipOrder, getVipOrder, delVipOrder, addVipOrder, updateVipOrder } from "@/api/xq/vipOrder";
+import { listVipOrder } from '@/api/xq/vipOrder'
+import { payStatusList, vipTimeList, vipTypeList,booleanList } from '@/constant/statusMap'
 
 export default {
   name: "VipOrder",
   data() {
     return {
-      // 按钮loading
-      buttonLoading: false,
+      vipTypeList,vipTimeList,payStatusList,booleanList,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -267,86 +125,16 @@ export default {
       total: 0,
       // VIP订单表格数据
       vipOrderList: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
       // 查询参数
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        userId: undefined,
         usercode: undefined,
-        vipId: undefined,
-        vipType: undefined,
-        vipTime: undefined,
-        vipPrice: undefined,
+        nickname: undefined,
+        mobile: undefined,
         orderNo: undefined,
-        platformType: undefined,
         payStatus: undefined,
-        payTime: undefined,
-        appid: undefined,
-        returnContent: undefined,
-        operateIp: undefined,
-        admin: undefined,
-        adminId: undefined,
       },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        id: [
-          { required: true, message: "不能为空", trigger: "blur" }
-        ],
-        userId: [
-          { required: true, message: "用户ID不能为空", trigger: "blur" }
-        ],
-        usercode: [
-          { required: true, message: "用户号不能为空", trigger: "blur" }
-        ],
-        vipId: [
-          { required: true, message: "VIP-ID不能为空", trigger: "blur" }
-        ],
-        vipType: [
-          { required: true, message: "1-普通会员 2-黄金会员 3-钻石会员不能为空", trigger: "change" }
-        ],
-        vipTime: [
-          { required: true, message: "1-月卡 2-季卡 3-年卡不能为空", trigger: "blur" }
-        ],
-        vipPrice: [
-          { required: true, message: "会员价格不能为空", trigger: "blur" }
-        ],
-        orderNo: [
-          { required: true, message: "订单号不能为空", trigger: "blur" }
-        ],
-        platformType: [
-          { required: true, message: "平台不能为空", trigger: "change" }
-        ],
-        payStatus: [
-          { required: true, message: "状态 0-待支付 1-已支付 5-已退款 10-无需支付不能为空", trigger: "change" }
-        ],
-        payTime: [
-          { required: true, message: "支付时间不能为空", trigger: "blur" }
-        ],
-        appid: [
-          { required: true, message: "appId不能为空", trigger: "blur" }
-        ],
-        returnContent: [
-          { required: true, message: "不能为空", trigger: "blur" }
-        ],
-        operateIp: [
-          { required: true, message: "不能为空", trigger: "blur" }
-        ],
-        admin: [
-          { required: true, message: "是否为后台管理新增不能为空", trigger: "blur" }
-        ],
-        adminId: [
-          { required: true, message: "后台操作管理员ID不能为空", trigger: "blur" }
-        ],
-        createTime: [
-          { required: true, message: "创建时间不能为空", trigger: "blur" }
-        ],
-      }
     };
   },
   created() {
@@ -362,35 +150,6 @@ export default {
         this.loading = false;
       });
     },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        id: undefined,
-        userId: undefined,
-        usercode: undefined,
-        vipId: undefined,
-        vipType: undefined,
-        vipTime: undefined,
-        vipPrice: undefined,
-        orderNo: undefined,
-        platformType: undefined,
-        payStatus: undefined,
-        payTime: undefined,
-        appid: undefined,
-        returnContent: undefined,
-        operateIp: undefined,
-        admin: undefined,
-        adminId: undefined,
-        createTime: undefined,
-        updateTime: undefined
-      };
-      this.resetForm("form");
-    },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;
@@ -407,70 +166,6 @@ export default {
       this.single = selection.length!==1
       this.multiple = !selection.length
     },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加VIP订单";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.loading = true;
-      this.reset();
-      const id = row.id || this.ids
-      getVipOrder(id).then(response => {
-        this.loading = false;
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改VIP订单";
-      });
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          this.buttonLoading = true;
-          if (this.form.id != null) {
-            updateVipOrder(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            }).finally(() => {
-              this.buttonLoading = false;
-            });
-          } else {
-            addVipOrder(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            }).finally(() => {
-              this.buttonLoading = false;
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除VIP订单编号为"' + ids + '"的数据项？').then(() => {
-        this.loading = true;
-        return delVipOrder(ids);
-      }).then(() => {
-        this.loading = false;
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {
-      }).finally(() => {
-        this.loading = false;
-      });
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('xq/vipOrder/export', {
-        ...this.queryParams
-      }, `vipOrder_${new Date().getTime()}.xlsx`)
-    }
   }
 };
 </script>