红包管理后台

src/api/roomAlbumPower/RoomRed.js

@@ -0,0 +1,52 @@
+import request from '@/utils/request';
+import qs from 'qs';
+
+
+// 获取房间权限列表
+export const redEnvelopePage = query => {
+    return request({
+        url: '/admin/room/redEnvelope/page',
+        method: 'get',
+        params: query
+    });
+};
+// 新增
+export const redEnvelopeSave = query => {
+    return request({
+        url: '/admin/room/redEnvelope/save',
+        method: 'post',
+        params: query
+    });
+};
+// 删除
+export const delRoomRedEnvelope = query => {
+    return request({
+        url: '/admin/room/redEnvelope/delRoomRedEnvelope',
+        method: 'get',
+        params: query
+    });
+};
+// 弹窗列表
+export const userPage = query => {
+    return request({
+        url: '/admin/room/redEnvelope/userPage',
+        method: 'get',
+        params: query
+    });
+};
+// 弹窗新增
+export const saveManager = query => {
+    return request({
+        url: '/admin/room/redEnvelope/saveManager',
+        method: 'post',
+        params: query
+    });
+};
+// 弹窗删除
+export const delUserRoomRedEnvelope = query => {
+    return request({
+        url: '/admin/room/redEnvelope/delUserRoomRedEnvelope',
+        method: 'get',
+        params: query
+    });
+};

src/utils/request.js

@@ -3,8 +3,9 @@ import store from "@/store";
 import global from "@/constants/global";
 
 const service = axios.create();
-
+import { ElMessage } from 'element-plus'
 service.interceptors.request.use(config => {
+    console.log('config', config);
     return config;
 }, error => {
     Promise.reject(error);
@@ -12,6 +13,18 @@ service.interceptors.request.use(config => {
 
 service.interceptors.response.use(res => {
     userLogout(res.headers[global.NEED_LOGOUT.toLowerCase()]);
+    console.log('res.data', res);
+    if (res.data.code == 200) {
+        ElMessage({
+            message: "成功",
+            type: 'success'
+        });
+    } else {
+        // ElMessage({
+        //     message: res.data.message,
+        //     type: 'error'
+        //   });
+    }
     return res.data;
 }, error => {
     return Promise.reject(error);
@@ -21,11 +34,11 @@ $.ajaxSetup({
     headers: {
         'Access-Control-Allow-Origin': '*',
     },
-    beforeSend: function(xhr) {
+    beforeSend: function (xhr) {
         console.log(xhr);
     },
-    complete: function(xhr) {
-        if (xhr && typeof(xhr.getResponseHeader) == 'function') {
+    complete: function (xhr) {
+        if (xhr && typeof (xhr.getResponseHeader) == 'function') {
             userLogout(xhr.getResponseHeader(global.NEED_LOGOUT));
         }
     }
@@ -34,7 +47,7 @@ $.ajaxSetup({
 /**
  * 强制退出
  */
-function userLogout(needLogout) {
+function userLogout (needLogout) {
     try {
         if (global.NEED_LOGOUT == needLogout) {
             var win = window;

src/views/room/RoomRed.vue

@@ -0,0 +1,403 @@
+<template>
+  <div class="outer">
+    <!-- 顶部搜索条件 -->
+    <div class="search">
+      <div class="searchLeft">
+        <span>房间ID</span>
+        <el-input
+          v-model="roomId"
+          size="default"
+          placeholder="权限房间号"
+          class="input"
+        ></el-input>
+      </div>
+      <div class="searchRight">
+        <span>用户ID</span>
+        <el-input
+          v-model="userId"
+          size="default"
+          placeholder="权限用户id"
+          class="input"
+        ></el-input>
+      </div>
+    </div>
+    <!-- 按钮 -->
+    <div class="buttonBox">
+      <el-button class="primary" type="primary" size="default" @click="search()"
+        >查询</el-button
+      >
+      <el-button
+        @click="authority = true"
+        class="primary"
+        type="primary"
+        size="default"
+        style="margin-right: 10px"
+        >添加</el-button
+      >
+    </div>
+    <!-- 增加权限弹窗 -->
+    <el-dialog v-model="authority" title="增加房间红包权限" width="30%" center>
+      <div class="authorityBox">
+        <span class="authoritySpan">房间ID</span>
+        <el-input
+          v-model="addRoomId"
+          size="default"
+          placeholder="输入房间ID多个请用英文 , 来分别"
+          class="authorityInpput"
+        ></el-input>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="authority = false">取消</el-button>
+          <el-button type="primary" @click="addAuthority()"> 确认 </el-button>
+        </span>
+      </template>
+    </el-dialog>
+    <!-- 表格 -->
+    <el-table :data="tableData" border style="width: 100%; margin-top: 25px">
+      <el-table-column prop="roomErBanNo" align="center" label="权限房间号" />
+      <el-table-column prop="title" align="center" label="房间名称" />
+      <el-table-column prop="createTime" align="center" label="房间获得权限时间" />
+      <el-table-column
+        prop="userCount"
+        align="center"
+        label="该房间的房间红包权限用户数"
+      />
+      <el-table-column align="center" label="操作" width="400">
+        <template v-slot="scope">
+          <el-button
+            @click="modifyUserPower(scope.row)"
+            class="primary"
+            type="primary"
+            size="default"
+            >管理权限用户</el-button
+          >
+          <el-button
+            @click="delRoomPower(scope.row)"
+            class="danger"
+            type="danger"
+            size="default"
+            >删除权限</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <el-pagination
+      style="margin-top: 10px"
+      class="paginationClass"
+      v-model:current-page="currentPage"
+      v-model:page-size="pageSize"
+      :page-sizes="[10, 20, 30, 40, 50, 100, 200, 300, 400, 500]"
+      :small="small"
+      :disabled="disabled"
+      :background="background"
+      layout="sizes, prev, pager, next"
+      :total="total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+    <!-- 管理权限弹窗 -->
+    <el-dialog v-model="dialogTableVisible" :title="dialogTableVisibleTitle">
+      <el-button
+        class="dialogTableVisibleBut primary"
+        type="primary"
+        @click="authorityLimits = true"
+      >
+        新增
+      </el-button>
+
+      <el-table style="width: 100%" :data="authorityData">
+        <el-table-column
+          align="center"
+          property="userErBanNo"
+          label="用户id"
+          min-width="100px"
+        />
+        <el-table-column
+          align="center"
+          property="nick"
+          label="用户昵称"
+          min-width="100px"
+        />
+        <el-table-column
+          align="center"
+          property="createTime"
+          label="获得权限时间"
+          min-width="100px"
+        />
+        <el-table-column align="center" label="操作" width="400">
+          <template v-slot="scope">
+            <el-button
+              @click="delTablePower(scope.row)"
+              class="danger"
+              type="danger"
+              size="default"
+              :disabled="!(scope.row.roomUid === scope.row.uid)?false:true"
+              >删除权限</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页2 -->
+      <el-pagination
+        style="margin-top: 10px"
+        class="paginationClass"
+        v-model:current-page="currentPage2"
+        v-model:page-size="pageSize2"
+        :page-sizes="[10, 20, 30, 40, 50, 100, 200, 300, 400, 500]"
+        :small="small"
+        :disabled="disabled"
+        :background="background"
+        layout="sizes, prev, pager, next"
+        :total="total2"
+        @size-change="handleSizeChange2"
+        @current-change="handleCurrentChange2"
+      />
+    </el-dialog>
+    <!-- 增加房间红包管理权限弹窗 -->
+    <el-dialog v-model="authorityLimits" title="增加房间红包管理权限" width="30%" center>
+      <div class="authorityBox">
+        <span class="authoritySpan">用户ID</span>
+        <el-input
+          v-model="addLimits"
+          size="default"
+          placeholder="输入用户ID多个请用英文 , 来分别"
+          class="authorityInpput"
+        ></el-input>
+      </div>
+      <div class="optionBox">
+        <el-checkbox
+          v-model="radioHall"
+          @change="checkBoxChange()"
+          label="厅内红包"
+          size="large"
+        />
+        <el-checkbox
+          v-model="radioFull"
+          @change="checkBoxChange()"
+          label="全服红包"
+          size="large"
+        />
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="authorityLimits = false">取消</el-button>
+          <el-button type="primary" @click="addAuthorityLimits()"> 确认 </el-button>
+        </span>
+      </template>
+    </el-dialog>
+    <!-- 公共二次确认删除弹窗 -->
+    <el-dialog v-model="delDialog" title="提示" width="30%" center>
+      <span> {{ delDialogText }}</span>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="delDialog = false">取消</el-button>
+          <el-button type="primary" @click="delClick(val, type)"> 确认 </el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import {
+  redEnvelopePage,
+  redEnvelopeSave,
+  delRoomRedEnvelope,
+  delUserRoomRedEnvelope,
+  userPage,
+  saveManager,
+} from "@/api/roomAlbumPower/RoomRed";
+export default {
+  name: "RoomRed",
+  data() {
+    return {
+      total: 10, //总页数
+      currentPage: 1, //页码
+      pageSize: 10, //条数
+      total2: 10, //总页数
+      currentPage2: 1, //页码
+      pageSize2: 10, //条数
+      roomId: "", //房间id
+      userId: "", //用户id
+      authority: false, //控制新增房间红包弹窗
+      addRoomId: "", //新增房间id
+      dialogTableVisible: false, //控制权限管理弹窗
+      dialogTableVisibleTitle: "房间ID:123 的房间红包权限",
+      authorityLimits: false, //控制新增房间红包权限管理弹窗
+      addLimits: "", //弹窗新增ID
+      delType: null,
+      delroomUid: null,
+      tableData: [],
+      authorityData: [],
+      //公共二次确认弹窗
+      delDialog: false,
+      delDialogText: "提示",
+      radioHall: false,
+      radioFull: false,
+      typeRadio: 0,
+      public: null,
+      delTablePowerRoomUid: null,
+      delTablePowerUid: null,
+    };
+  },
+  created() {
+    this.getData();
+  },
+  methods: {
+    // 获取外表格数据接口
+    getData() {
+      redEnvelopePage({
+        roomErBanNo: this.roomId,
+        userErBanNo: this.userId,
+        page: this.currentPage,
+        pageSize: this.pageSize,
+      }).then((res) => {
+        this.roomId = "";
+        this.userId = "";
+        this.addRoomId = "";
+        this.total = res.total;
+        this.tableData = res.rows;
+      });
+    },
+    // 查询按钮
+    search() {
+      this.getData();
+    },
+    // 管理权限用户按钮
+    modifyUserPower(row) {
+      console.log(row);
+      this.public = row;
+      this.saveManagerRoomUid = row.roomUid;
+      this.dialogTableVisibleTitle = `房间ID:${row.roomErBanNo} 的房间红包权限`;
+      this.getUserPage(row.roomUid);
+    },
+    // 弹窗列表
+    getUserPage(val) {
+      userPage({ roomUid: val, page: this.currentPage2, pageSize: this.pageSize2 }).then(
+        (res) => {
+          this.total2 = res.total;
+          this.authorityData = res.rows;
+          this.dialogTableVisible = true;
+        }
+      );
+    },
+    // 删除权限
+    delRoomPower(row) {
+      console.log(row);
+      this.delType = 1;
+      this.delDialog = true;
+      this.delDialogText = "确定要删除该房间红包权限吗?";
+      this.delroomUid = row.roomUid;
+    },
+    // 二次确认
+    delClick(val, type) {
+      console.log(this.delroomUid);
+      if (this.delType == 1) {
+        //delType 1：删除该房间权限 2：删除房间内用户权限
+        delRoomRedEnvelope({ roomUid: this.delroomUid }).then((res) => {
+          this.getData();
+        });
+      } else {
+        delUserRoomRedEnvelope({
+          roomUid: this.delTablePowerRoomUid,
+          uid: this.delTablePowerUid,
+        }).then((res) => {
+          this.getUserPage();
+        });
+      }
+      this.delDialog = false;
+    },
+    // 删除弹窗权限
+    delTablePower(row) {
+      console.log(row);
+      this.delType = 2;
+      this.delDialog = true;
+      this.delDialogText = "确定要删除该房间红包权限吗?";
+      this.delTablePowerRoomUid = row.roomUid;
+      this.delTablePowerUid = row.uid;
+    },
+    // 确认新增房间红包弹窗按钮
+    addAuthority() {
+      redEnvelopeSave({
+        roomErBanNoStr: this.addRoomId,
+      }).then((res) => {
+        this.authority = false;
+        this.getData();
+      });
+    },
+    // 监听多选框
+    checkBoxChange() {
+      if (this.radioHall && this.radioFull) {
+        this.typeRadio = 3;
+      } else if (this.radioHall && this.radioFull == false) {
+        this.typeRadio = 1;
+      } else if (this.radioFull && this.radioHall == false) {
+        this.typeRadio = 2;
+      }
+    },
+    // 确认弹窗新增按钮
+    addAuthorityLimits() {
+      saveManager({
+        roomUid: this.public.roomUid,
+        type: this.typeRadio,
+        userErBanNoStr: this.addLimits,
+      }).then((res) => {
+        this.addLimits = "";
+        this.authorityLimits = false;
+        this.getUserPage(this.public.roomUid);
+      });
+    },
+    // 分页导航
+    handleSizeChange(val) {
+      this.getData();
+    },
+    handleCurrentChange(val) {
+      this.getData();
+    },
+    // 分页导航2
+    handleSizeChange2(val) {
+      this.getUserPage();
+    },
+    handleCurrentChange2(val) {
+      this.getUserPage();
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.outer {
+  padding-top: 20px;
+  background: #ecf0f5;
+  border-top: 3px solid #d2d6de;
+  .search {
+    width: 100%;
+    height: 41px;
+    .searchLeft,
+    .searchRight {
+      width: 20%;
+      float: left;
+      span {
+        margin-right: 10px;
+      }
+      .input {
+        width: 75%;
+      }
+    }
+  }
+  .buttonBox {
+    margin-top: 10px;
+  }
+  .authorityBox {
+    .authoritySpan {
+      margin-right: 20px;
+    }
+    .authorityInpput {
+      width: 50%;
+    }
+  }
+  .dialogTableVisibleBut {
+    margin: -25px 0 20px 0px;
+  }
+}
+</style>