feat(liveroomList): 界面样式

src/icons/svg/icon-broadcast.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><path d="M62.6 2.3C46.2-4.3 27.6 3.6 20.9 20C7.4 53.4 0 89.9 0 128s7.4 74.6 20.9 108c6.6 16.4 25.3 24.3 41.7 17.7S86.9 228.4 80.3 212C69.8 186.1 64 157.8 64 128s5.8-58.1 16.3-84C86.9 27.6 79 9 62.6 2.3zm450.8 0C497 9 489.1 27.6 495.7 44C506.2 69.9 512 98.2 512 128s-5.8 58.1-16.3 84c-6.6 16.4 1.3 35 17.7 41.7s35-1.3 41.7-17.7c13.5-33.4 20.9-69.9 20.9-108s-7.4-74.6-20.9-108C548.4 3.6 529.8-4.3 513.4 2.3zM340.1 165.2c7.5-10.5 11.9-23.3 11.9-37.2c0-35.3-28.7-64-64-64s-64 28.7-64 64c0 13.9 4.4 26.7 11.9 37.2L98.9 466.8c-7.3 16.1-.2 35.1 15.9 42.4s35.1 .2 42.4-15.9L177.7 448H398.3l20.6 45.2c7.3 16.1 26.3 23.2 42.4 15.9s23.2-26.3 15.9-42.4L340.1 165.2zM369.2 384H206.8l14.5-32H354.7l14.5 32zM288 205.3L325.6 288H250.4L288 205.3zM163.3 73.6c5.3-12.1-.2-26.3-12.4-31.6s-26.3 .2-31.6 12.4C109.5 77 104 101.9 104 128s5.5 51 15.3 73.6c5.3 12.1 19.5 17.7 31.6 12.4s17.7-19.5 12.4-31.6C156 165.8 152 147.4 152 128s4-37.8 11.3-54.4zM456.7 54.4c-5.3-12.1-19.5-17.7-31.6-12.4s-17.7 19.5-12.4 31.6C420 90.2 424 108.6 424 128s-4 37.8-11.3 54.4c-5.3 12.1 .2 26.3 12.4 31.6s26.3-.2 31.6-12.4C466.5 179 472 154.1 472 128s-5.5-51-15.3-73.6z"/></svg>

src/icons/svg/icon-eye.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"/></svg>

src/icons/svg/icon-pen.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z"/></svg>

src/icons/svg/icon-playback.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c-7.6 4.2-12.3 12.3-12.3 20.9V344c0 8.7 4.7 16.7 12.3 20.9s16.8 4.1 24.3-.5l144-88c7.1-4.4 11.5-12.1 11.5-20.5s-4.4-16.1-11.5-20.5l-144-88c-7.4-4.5-16.7-4.7-24.3-.5z"/></svg>

src/icons/svg/icon-question.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM169.8 165.3c7.9-22.3 29.1-37.3 52.8-37.3h58.3c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24V250.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1H222.6c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>

src/icons/svg/icon-record.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><path d="M384 32c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96C0 60.7 28.7 32 64 32H384zM320 313.4V176c0-8.8-7.2-16-16-16H166.6c-12.5 0-22.6 10.1-22.6 22.6c0 6 2.4 11.8 6.6 16L184 232l-66.3 66.3C114 302 112 306.9 112 312s2 10 5.7 13.7l36.7 36.7c3.6 3.6 8.5 5.7 13.7 5.7s10-2 13.7-5.7L248 296l33.4 33.4c4.2 4.2 10 6.6 16 6.6c12.5 0 22.6-10.1 22.6-22.6z"/></svg>

src/icons/svg/icon-share.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M352 224c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96c0 4 .2 8 .7 11.9l-94.1 47C145.4 170.2 121.9 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.9 0 49.4-10.2 66.6-26.9l94.1 47c-.5 3.9-.7 7.8-.7 11.9c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-25.9 0-49.4 10.2-66.6 26.9l-94.1-47c.5-3.9 .7-7.8 .7-11.9s-.2-8-.7-11.9l94.1-47C302.6 213.8 326.1 224 352 224z"/></svg>

src/icons/svg/icon-trashcan.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M135.2 17.7C140.6 6.8 151.7 0 163.8 0H284.2c12.1 0 23.2 6.8 28.6 17.7L320 32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32h96l7.2-14.3zM32 128H416V448c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64V128zm96 64c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16z"/></svg>

src/router/index.ts

@@ -64,6 +64,11 @@ export const pages = [
     component: _import("modules/order/order"),
     name: "orderList",
     meta: { title: "订单管理", sidebar: true, icon: "order", isTab: true }
+  }, {
+    path: "/liveroom/list",
+    component: _import("modules/liveroom/liveroomList"),
+    name: "liveroomList",
+    meta: { title: "直播间管理", sidebar: true, icon: "broadcast", isTab: true }
   },
 ]
 

src/views/modules/liveroom/liveroomList.vue

@@ -0,0 +1,112 @@
+<template>
+  <avue-crud ref="crud" :page="page" :data="dataList" :option="tableOption" @on-load="getDataList">
+    <template slot-scope="scope" slot="display">
+      <el-switch :value="scope.row.display" active-color="#29B802" />
+    </template>
+
+    <template slot-scope="{row,index}" slot="menu">
+      <div class="icon-button">
+        <el-button-group>
+          <el-tooltip effect="dark" content="直播间内用户" placement="top" :enterable="false">
+            <el-button type="success" size="small" plain><icon-svg name="user" /></el-button>
+          </el-tooltip>
+          <el-tooltip effect="dark" content="管理回放" placement="top" :enterable="false">
+            <el-button type="warning" size="small" plain><icon-svg name="playback" /></el-button>
+          </el-tooltip>
+          <el-tooltip effect="dark" content="商品库" placement="top" :enterable="false">
+            <el-button type="primary" size="small" plain><icon-svg name="product" /></el-button>
+          </el-tooltip>
+          <el-tooltip effect="dark" content="商品跳转记录" placement="top" :enterable="false">
+            <el-button type="info" size="small" plain><icon-svg name="record" /></el-button>
+          </el-tooltip>
+          <el-tooltip effect="dark" content="客户咨询" placement="top" :enterable="false">
+            <el-button type="danger" size="small" plain><icon-svg name="question" /></el-button>
+          </el-tooltip>
+          <el-tooltip effect="dark" content="邀约码统计" placement="top" :enterable="false">
+            <el-button type="info" size="small" plain><icon-svg name="share" /></el-button>
+          </el-tooltip>
+
+          <el-tooltip effect="dark" content="查看" placement="top" :enterable="false">
+            <el-button type="primary" size="small"><icon-svg name="eye" /></el-button>
+          </el-tooltip>
+          <el-tooltip effect="dark" content="修改" placement="top" :enterable="false">
+            <el-button type="warning" size="small"><icon-svg name="pen" /></el-button>
+          </el-tooltip>
+          <el-tooltip effect="dark" content="删除" placement="top" :enterable="false">
+            <el-button type="danger" size="small"><icon-svg name="trashcan" /></el-button>
+          </el-tooltip>
+        </el-button-group>
+      </div>
+    </template>
+  </avue-crud>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { IPage } from '@/utils/vo'
+import httpx from '@/utils/httpx'
+import tableOption from "@/avue/crud/liveroomList"
+
+export default Vue.extend({
+  data() {
+    return {
+      page: {
+        total: 0,
+        currentPage: 1,
+        pageSize: 10,
+      },
+      tableOption,
+      dataList: [] as any[],
+      dataListLoading: true,
+    }
+  },
+  methods: {
+    getDataList(page?: IPage, params?: { name: string }, done?: Function) {
+      this.dataListLoading = true
+      this.dataList = [
+        {
+          id: 1,
+          name: "aaaaa",
+          icon: "",
+          roomid: 1231312,
+          display: true
+        }, {
+          id: 2,
+          name: "aadfdewqd23eaa",
+          icon: "",
+          roomid: 1234213242,
+          display: true
+        }, {
+          id: 3,
+          name: "aa2ex32wq1dr32aaaJamugag634 Sotru Park",
+          icon: "",
+          roomid: 1231313212,
+          display: false
+        },
+      ]
+      this.dataListLoading = false
+      // httpx.post(httpx.makeurl('/goods/queryGoodList'), {
+      //   name: params?.name || "",
+      //   limit: page == null ? this.page.pageSize : page.pageSize,
+      //   page: page == null ? this.page.currentPage : page.currentPage,
+      // }).then(({ data }) => {
+      //   const items = data.goodList
+      //   this.dataList = items
+      //   this.page.total = data.total
+      //   this.dataListLoading = false
+      //   if (done) {
+      //     done()
+      //   }
+      // })
+    },
+  }
+})
+</script>
+
+<style scoped>
+.icon-button .el-button {
+  padding: 6px 10px;
+  font-size: medium;
+  border-radius: 10px;
+}
+</style>