c

manager/src/views/live/live.vue

@@ -0,0 +1,249 @@
+<template>
+  <div>
+    <Card>
+
+      <Tabs v-model="searchForm.status">
+        <!-- 标签栏 -->
+        <TabPane v-for="(item,index) in tabs" :key="index" :name="item.status" :label="item.title">
+
+        </TabPane>
+
+      </Tabs>
+      <Table :columns="liveColumns" :data="liveData"></Table>
+      <Row type="flex" style="margin:20px;" justify="end" class="page">
+        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePageNumber" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]"
+          size="small" show-total show-elevator show-sizer></Page>
+      </Row>
+
+    </Card>
+  </div>
+</template>
+
+<script>
+import { getLiveList, whetherStar } from "@/api/promotion.js";
+export default {
+  data() {
+    return {
+      // 查询数据的总数
+      total: "",
+      // 查询的form
+      searchForm: {
+        pageSize: 10,
+        pageNumber: 1,
+        status: "NEW",
+      },
+      // 直播tab选项栏
+      tabs: [
+        {
+          title: "直播中",
+          status: "START",
+        },
+        {
+          title: "未开始",
+          status: "NEW",
+        },
+        {
+          title: "已结束",
+          status: "END",
+        },
+      ],
+      liveColumns: [
+        {
+          title: "直播标题",
+          key: "name",
+        },
+        {
+          title: "主播昵称",
+          key: "anchorName",
+        },
+        {
+          title: "直播开始时间",
+          key: "createTime",
+          render: (h, params) => {
+            return h(
+              "span",
+              this.$options.filters.unixToDate(params.row.startTime)
+            );
+          },
+        },
+        {
+          title: "直播结束时间",
+          key: "endTime",
+          render: (h, params) => {
+            return h(
+              "span",
+
+              this.$options.filters.unixToDate(params.row.endTime)
+            );
+          },
+        },
+        {
+          title: "是否推荐",
+          align: "center",
+          render: (h, params) => {
+            return h("div", [
+              h(
+                "i-switch",
+                {
+                  // 数据库0 enabled,1 disabled
+                  props: {
+                    type: "primary",
+                    size: "large",
+                    value: params.row.recommend == true,
+                  },
+                  on: {
+                    "on-change": () => {
+                      this.star(params.row,params.index);
+                    },
+                  },
+                },
+                [
+                  h("span", {
+                    slot: "open",
+                    domProps: {
+                      innerHTML: "是",
+                    },
+                  }),
+                  h("span", {
+                    slot: "close",
+                    domProps: {
+                      innerHTML: "否",
+                    },
+                  }),
+                ]
+              ),
+            ]);
+          },
+        },
+
+        {
+          title: "直播状态",
+          render: (h, params) => {
+            return h(
+              "span",
+              params.row.status == "NEW"
+                ? "未开始"
+                : params.row.status == "START"
+                ? "直播中"
+                : "已结束"
+            );
+          },
+        },
+        {
+          title: "操作",
+          key: "action",
+          render: (h, params) => {
+            return h(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                },
+              },
+              [
+                h(
+                  "Button",
+                  {
+                    props: {
+                      type: "error",
+                      size: "small",
+                    },
+                    style: {
+                      marginRight: "5px",
+                    },
+                    on: {
+                      click: () => {
+                        this.getLiveDetail(params.row);
+                      },
+                    },
+                  },
+                  "查看"
+                ),
+              ]
+            );
+          },
+        },
+      ], //table中显示的title
+      liveData: [], //table中显示的直播数据
+    };
+  },
+  watch: {
+    "searchForm.status": {
+      handler() {
+        this.liveData = [];
+        this.getStoreLives();
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.getStoreLives();
+  },
+  methods: {
+    /**
+     * 是否推荐
+     */
+    async star(val,index) {
+      let switched
+      if(this.liveData[index].recommend){
+        this.$set(this.liveData[index],'recommend',false)
+        switched = false
+      }
+      else{
+
+        this.$set(this.liveData[index],'recommend',true)
+        switched = true
+      }
+
+       await whetherStar({id:val.id,recommend:switched});
+    },
+
+    /**
+     * 页面数据大小分页回调
+     */
+    changePageSize(val) {
+      this.searchForm.pageSize = val;
+      this.getStoreLives();
+    },
+    /**
+     * 分页回调
+     */
+    changePageNumber(val) {
+      this.searchForm.pageNumber = val;
+      this.getStoreLives();
+    },
+
+    /**
+     * 获取店铺直播间列表
+     */
+    async getStoreLives() {
+      let result = await getLiveList(this.searchForm);
+      if (result.success) {
+        this.liveData = result.result.records;
+        this.total = result.result.total;
+      }
+    },
+
+    /**
+     * 获取直播间详情
+     */
+    getLiveDetail(val) {
+      this.$router.push({
+        path: "/liveDetail",
+        query: { ...val, liveStatus: this.searchForm.status },
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/table-common.scss";
+.btns {
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+.page {
+  margin-top: 20px;
+}
+</style>