迁移广播通知

src/apps/AppBroadcast/playList.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="playList">
+    <div class="title">
+      <span>播放记录</span>
+      <span>操作</span>
+    </div>
+    <div class="record">
+      <div class="item" v-for="(item, index) in list" :key="index">
+        <div class="info">
+          <p>{{ item.messageName }}</p>
+          <span>{{ item.createTime }}</span><br/>
+          <span>{{ item.deviceName }}</span>
+        </div>
+        <div class="btn bg-3975C6"
+             v-if="item.broadcastStatus == 0 || item.broadcastStatus == 1 || item.broadcastStatus == 2"
+             @click="cancel(item.broadcastId)">撤销
+        </div>
+        <div class="btn bg-AFD0FC" v-if="item.broadcastStatus == 6">已取消</div>
+      </div>
+    </div>
+    <AiBack></AiBack>
+  </div>
+</template>
+<script>
+
+export default {
+  name: "playList",
+  data() {
+    return {
+      page: {current: 1, size: 10, total: 0},
+      list: []
+    }
+  },
+  methods: {
+    getList() {
+      this.$http.post("/app/appzyvideobroadcast/getBroadcastRecords", null, {
+        params: {...this.page}
+      }).then(res => {
+        if (res?.data) {
+          if (this.page.current > 1) {
+            this.list = [...this.list, ...res.data.records]
+          } else this.list = res.data.records
+          this.page.total = res.data.total
+        }
+      })
+    },
+    reachBottom() {
+      if (this.page.total > this.list.length) {
+        this.page.current++
+        this.getList()
+      }
+    },
+    cancel(id) {
+      this.$confirm('确定撤回该广播?').then(() => {
+        this.$http.post(`/app/appzyvideobroadcast/getBroadcastRecall?broadcastId=${id}`).then((res) => {
+          if (res.code == 0) {
+            this.$u.toast('撤回成功！')
+            this.getList()
+          }
+        })
+      })
+    },
+  },
+  created() {
+    this.$dict.load('dlbBroadcastStatus').then(() => {
+      this.getList()
+    })
+  }
+}
+</script>
+<style lang="scss" scoped>
+.playList {
+  .title {
+    width: 100%;
+    height: 88px;
+    line-height: 88px;
+    background: #FFF;
+    padding: 0 80px;
+    display: flex;
+    justify-content: space-between;
+    color: #333;
+    font-size: 34px;
+    box-sizing: border-box;
+    border-bottom: 1px solid #ddd;
+  }
+
+  .record {
+    padding-left: 32px;
+    background-color: #fff;
+
+    .item {
+      width: 100%;
+      border-bottom: 1px solid #ddd;
+      display: flex;
+      justify-content: space-between;
+      padding: 12px 40px 16px 0;
+      box-sizing: border-box;
+
+      .info {
+        width: 480px;
+        margin-right: 40px;
+        word-break: break-all;
+
+        p {
+          font-size: 34px;
+          font-family: PingFang-SC-Medium, PingFang-SC;
+          font-weight: 500;
+          color: #333;
+          line-height: 48px;
+          margin-bottom: 12px;
+        }
+
+        span {
+          font-size: 22px;
+          font-family: PingFang-SC-Medium, PingFang-SC;
+          font-weight: 500;
+          color: #999;
+          line-height: 32px;
+        }
+      }
+
+      .btn {
+        width: 154px;
+        height: 60px;
+        border-radius: 8px;
+        text-align: center;
+        line-height: 60px;
+        font-size: 30px;
+        font-family: PingFang-SC-Medium, PingFang-SC;
+        font-weight: 500;
+        color: #FFF;
+        margin-top: 18px;
+      }
+
+      .bg-3975C6 {
+        background: #3975C6;
+      }
+
+      .bg-AFD0FC {
+        background: #AFD0FC;
+      }
+    }
+  }
+}
+</style>