From ddad65f649d4f6c9859b811f4b415a5717b148c3 Mon Sep 17 00:00:00 2001
From: Dragon <13925835632@139.com>
Date: Wed, 11 Oct 2023 15:28:33 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=88=BF=E9=97=B4=E7=9B=B8?=
 =?UTF-8?q?=E5=86=8C=E6=9D=83=E9=99=90=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/zs.png          | Bin 0 -> 2627 bytes
 src/css/public.css                |  40 +++++
 src/main.js                       |   2 +-
 src/views/room/RoomAlbumPower.vue | 259 +++++++++++++++++++++++++++++-
 src/views/room/RoomAlbums.vue     | 156 +++++++++++++++++-
 5 files changed, 444 insertions(+), 13 deletions(-)
 create mode 100644 src/assets/images/zs.png
 create mode 100644 src/css/public.css

diff --git a/src/assets/images/zs.png b/src/assets/images/zs.png
new file mode 100644
index 0000000000000000000000000000000000000000..718500d92bec316bf384053c8d75d52e7f5098eb
GIT binary patch
literal 2627
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

literal 0
HcmV?d00001

diff --git a/src/css/public.css b/src/css/public.css
new file mode 100644
index 0000000..fc1cb5f
--- /dev/null
+++ b/src/css/public.css
@@ -0,0 +1,40 @@
+/* 主要的按钮样式处理 */
+/*鼠标点击后移开，恢复本身样式*/
+.primary,
+.primary:focus:not(.primary:hover) {
+  color: white;
+  background: #409eff;
+}
+/*鼠标悬浮，没有按下；鼠标按下后抬起，没有移开*/
+/* 更改背景和字體顏色 */
+.primary:focus, .primary:hover{
+    color: white;
+    background: #409eff;
+}
+/*鼠标按下，没有抬起*/
+/* 更改邊框顏色 */
+.primary:active {
+  color: white;
+  background: #337ecc;
+}
+
+
+/*鼠标点击后移开，恢复本身样式*/
+.danger,
+.danger:focus:not(.danger:hover) {
+  color: white;
+  background: #f56c6c;
+}
+/* 危险的按钮样式 */
+/*鼠标悬浮，没有按下；鼠标按下后抬起，没有移开*/
+/* 更改背景和字體顏色 */
+.danger:focus, .danger:hover{
+    color: white;
+    background: #f56c6c;
+}
+/*鼠标按下，没有抬起*/
+/* 更改邊框顏色 */
+.danger:active {
+  color: white;
+  background: #c45656;
+}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 271b441..7ac10c8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,7 +4,6 @@ import router from './router'
 import store from './store'
 import 'jquery'
 import 'jquery.md5'
-
 import 'bootstrap/dist/css/bootstrap.min.css'
 import 'bootstrap/dist/js/bootstrap.min.js'
 
@@ -50,5 +49,6 @@ import components from '@/utils/components.js'
 
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import '@/css/public.css'
 
 createApp(App).use(store).use(router).use(components).use(ElementPlus).mount('#app')
diff --git a/src/views/room/RoomAlbumPower.vue b/src/views/room/RoomAlbumPower.vue
index 963246c..5fe86b0 100644
--- a/src/views/room/RoomAlbumPower.vue
+++ b/src/views/room/RoomAlbumPower.vue
@@ -2,35 +2,251 @@
 <template>
   <div class="outer">
     <!-- 顶部搜索条件 -->
-    <!-- <div class="search">
+    <div class="search">
       <div class="searchLeft">
         <span>房间号</span>
-        <el-input v-model="roomId" placeholder="权限房间号" class="input"></el-input>
+        <el-input
+          v-model="roomId"
+          size="default"
+          placeholder="权限房间号"
+          class="input"
+        ></el-input>
       </div>
       <div class="searchRight">
         <span>用户ID</span>
-        <el-input v-model="userId" placeholder="权限用户id" class="input"></el-input>
+        <el-input
+          v-model="userId"
+          size="default"
+          placeholder="权限用户id"
+          class="input"
+        ></el-input>
       </div>
-    </div> -->
-    <el-input v-model="userId" placeholder="权限用户id" class="input"></el-input>
+    </div>
+    <!-- 按钮 -->
+    <div class="buttonBox">
+      <el-button
+        @click="authority = true"
+        class="primary"
+        type="primary"
+        size="default"
+        style="margin-right: 10px"
+        >增加权限</el-button
+      >
+      <el-button class="primary" type="primary" size="default">查询</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="roomId" align="center" label="权限房间号" />
+      <el-table-column prop="roomName" align="center" label="权限房间名称" />
+      <el-table-column prop="time" align="center" label="房间获得权限时间" />
+      <el-table-column prop="roomNum" align="center" label="该房间的房间相册仅限用户数" />
+      <el-table-column align="center" label="操作" width="400">
+        <template v-slot="scope">
+          <el-button
+            @click="delRoomPower(scope.row)"
+            class="danger"
+            type="danger"
+            size="default"
+            >删除房间权限</el-button
+          >
+          <el-button
+            @click="modifyUserPower(scope.row)"
+            class="primary"
+            type="primary"
+            size="default"
+            >管理权限用户</el-button
+          >
+          <el-button
+            @click="delRoomAlbum(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="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="totals"
+      @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="userId"
+          label="用户id"
+          min-width="100px"
+        />
+        <el-table-column
+          align="center"
+          property="userName"
+          label="用户昵称"
+          min-width="100px"
+        />
+        <el-table-column
+          align="center"
+          property="time"
+          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"
+              >删除权限</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+    </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>
+      <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()"> 确认 </el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { dateFormat } from "@/utils/date";
 export default {
   name: "RoomAlbumPower",
   data() {
     return {
+      totals: 100, //总页数
+      currentPage2: 1, //页码
+      pageSize2: 10, //条数
       roomId: "", //房间号
       userId: "", //用户id
+      addRoomId: "", //新增房间id
+      addLimits: "", //新增房间相册管理权限
+      authority: false, //控制新增房间权限弹窗
+      dialogTableVisible: false, //控制权限管理弹窗
+      authorityLimits: false, //控制新增房间相册权限管理弹窗
+      dialogTableVisibleTitle: "房间ID:123 的房间相册管理权限",
+      delDialog: false, //公共删除控制弹窗
+      delDialogText: "确定要删除吗?", //公共删除内容文案
+      tableData: [
+        {
+          roomId: "123",
+          roomName: "迪迦",
+          time: "2023-1-1",
+          roomNum: "1",
+        },
+      ], //表单数据存放
+      authorityData: [
+        {
+          userId: "123",
+          userName: "迪迦",
+          time: "2023-1-1",
+        },
+      ], //权限管理弹窗表单数据存放
     };
   },
   setup() {
     return {};
   },
   created() {},
-  methods: {},
+  methods: {
+    // 公共二次确认删除按钮
+    delClick() {},
+    // 增加房间相册权限
+    addAuthority() {},
+    // 新增权限管理弹窗
+    addAuthorityLimits(row) {
+      console.log(row);
+      this.authorityLimits = false;
+      this.dialogTableVisible = false;
+    },
+    // 删除房间权限
+    delRoomPower(row) {
+      console.log(row);
+      this.delDialogText = "确认要删除房间权限吗?";
+      this.delDialog = true;
+    },
+    // 管理权限用户
+    modifyUserPower(row) {
+      console.log(row);
+      this.dialogTableVisible = true;
+    },
+    // 清除房间相册
+    delRoomAlbum(row) {
+      this.delDialogText = "确认要清除该房间相册吗?";
+      this.delDialog = true;
+    },
+    // 删除弹窗权限按钮
+    delTablePower(row) {
+      console.log(row);
+      this.delDialogText = "确认要删除权限吗?";
+      this.delDialog = true;
+    },
+    // 分页导航
+    handleSizeChange(val) {},
+    handleCurrentChange(val) {},
+  },
 };
 </script>
 
@@ -39,5 +255,34 @@ export default {
   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>
diff --git a/src/views/room/RoomAlbums.vue b/src/views/room/RoomAlbums.vue
index b5783d8..49d4736 100644
--- a/src/views/room/RoomAlbums.vue
+++ b/src/views/room/RoomAlbums.vue
@@ -1,24 +1,170 @@
 <!-- eslint-disable vue/valid-v-slot -->
 <template>
-  <div class="box"></div>
+  <div class="outer">
+    <!-- 顶部搜索条件 -->
+    <div class="search">
+      <div class="searchLeft">
+        <span>房间号</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">查询</el-button>
+    </div>
+    <!-- 表格 -->
+    <el-table :data="tableData" border style="width: 100%; margin-top: 25px">
+      <el-table-column align="center" prop="roomId" label="房间号" />
+      <el-table-column align="center" prop="roomName" label="房间名称" />
+      <el-table-column align="center" prop="userId" label="上传用户ID" />
+      <el-table-column align="center" prop="time" label="上传时间" />
+      <el-table-column align="center" label="图片">
+        <template v-slot="scope">
+          <el-image
+            style="width: 100px; height: 100px"
+            :src="scope.row.img"
+            :zoom-rate="1.1"
+            :preview-src-list="[scope.row.img]"
+            fit="cover"
+            preview-teleported="true"
+        /></template>
+      </el-table-column>
+      <el-table-column align="center" prop="type" label="类型" />
+      <el-table-column align="center" prop="unlockGift" label="解锁礼物" class="">
+        <template v-slot="scope">
+          <el-image
+            style="width: 30px; height: 30px;vertical-align: middle;margin-right: 6px;"
+            :src="scope.row.img2"
+            :zoom-rate="1"
+            fit="cover"
+            preview-teleported="true"
+          />
+          <img src="../../assets/images/zs.png" alt="" style="width: 20px; height: 16px;vertical-align: middle;margin-right: 4px;">
+          <span>{{ scope.row.unlockGift }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" prop="unlockAllNum" label="累计解锁次数" />
+      <el-table-column align="center" label="操作">
+        <template v-slot="scope">
+          <el-button
+            @click="delAlbum(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="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="totals"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+    <!-- 公共二次确认删除弹窗 -->
+    <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()"> 确认 </el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
-import { dateFormat } from "@/utils/date";
 export default {
   name: "RoomAlbums",
   data() {
-    return {};
+    return {
+      totals: 100, //总页数
+      currentPage2: 1, //页码
+      pageSize2: 10, //条数
+      roomId: "", //房间号
+      userId: "", //用户id
+      delDialog: false,
+      delDialogText: "确认要删除照片吗?",
+      tableData: [
+        {
+          roomId: "123",
+          roomName: "迪迦",
+          userId: "123",
+          time: "2023-1-1",
+          img: "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
+          img2: "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
+          type: "普通照片",
+          unlockGift: "100",
+          unlockAllNum: "2",
+        },
+      ], //表单数据存放
+    };
   },
   setup() {
     return {};
   },
   created() {},
-  methods: {},
+  methods: {
+    delClick() {},
+    // 清除相册
+    delAlbum(row) {
+      console.log(row);
+      this.delDialog = true;
+    },
+    // 分页导航
+    handleSizeChange(val) {},
+    handleCurrentChange(val) {},
+  },
 };
 </script>
 
 <style lang="less" scoped>
-.box {
+.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;
+  }
 }
 </style>