新增房间相册权限管理

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;
+}

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')

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>

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>