推荐直播间，修改部分代码，新增劵活动一些部分

manager/src/views/promotion/coupon/coupon.vue

@@ -4,7 +4,7 @@
       <Row>
         <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
           <Form-item label="活动名称" prop="couponName">
-            <Input type="text" v-model="searchForm.couponName" placeholder="请输入活动名称" clearable style="width: 200px"/>
+            <Input type="text" v-model="searchForm.couponName" placeholder="请输入活动名称" clearable style="width: 200px" />
           </Form-item>
           <Form-item label="活动状态" prop="promotionStatus">
             <Select v-model="searchForm.promotionStatus" placeholder="请选择" clearable style="width: 200px">
@@ -15,8 +15,7 @@
             </Select>
           </Form-item>
           <Form-item label="活动时间">
-            <DatePicker v-model="selectDate" type="daterange" clearable placeholder="选择起始时间"
-                        style="width: 200px"></DatePicker>
+            <DatePicker v-model="selectDate" type="daterange" clearable placeholder="选择起始时间" style="width: 200px"></DatePicker>
           </Form-item>
           <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
         </Form>
@@ -26,21 +25,17 @@
         <Button @click="delAll">批量下架</Button>
         <!-- <Button @click="upAll" >批量上架</Button> -->
       </Row>
-      <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom"
-             @on-sort-change="changeSort" @on-selection-change="changeSelect">
+      <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect">
         <template slot-scope="{ row,index }" slot="action">
-          <Button v-if="!checked && row.promotionStatus === 'NEW' || row.promotionStatus === 'CLOSE'" type="primary"
-                  size="small" style="margin-right: 10px" @click="edit(row)">编辑
+          <Button v-if="!checked && row.promotionStatus === 'NEW' || row.promotionStatus === 'CLOSE'" type="primary" size="small" style="margin-right: 10px" @click="edit(row)">编辑
           </Button>
-          <Button v-if="!checked && row.promotionStatus === 'START' || row.promotionStatus === 'NEW'" type="error"
-                  size="small" style="margin-right: 10px" @click="remove(row)">下架
+          <Button v-if="!checked && row.promotionStatus === 'START' || row.promotionStatus === 'NEW'" type="error" size="small" style="margin-right: 10px" @click="remove(row)">下架
           </Button>
         </template>
       </Table>
       <Row type="flex" justify="end" class="page">
-        <Page :current="searchForm.pageNumber + 1" :total="total" :page-size="searchForm.pageSize"
-              @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]"
-              size="small" show-total show-elevator show-sizer></Page>
+        <Page :current="searchForm.pageNumber + 1" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]"
+          size="small" show-total show-elevator show-sizer></Page>
       </Row>
     </Card>
   </div>
@@ -68,7 +63,7 @@ export default {
         pageSize: 10, // 页面大小
         sort: "startTime", // 默认排序字段
         order: "desc", // 默认排序方式
-        getType: '', // 默认排序方式
+        getType: "", // 默认排序方式
       },
       form: {
         // 添加或编辑表单对象初始化数据
@@ -77,7 +72,7 @@ export default {
       // 表单验证规则
       formValidate: {
         promotionName: [
-          {required: true, message: "不能为空", trigger: "blur"},
+          { required: true, message: "不能为空", trigger: "blur" },
         ],
       },
       submitLoading: false, // 添加或编辑提交状态
@@ -94,15 +89,16 @@ export default {
         {
           title: "活动名称",
           key: "promotionName",
-          width: 120,
+          minWidth: 100,
           fixed: "left",
         },
         {
           title: "优惠券名称",
           key: "couponName",
-          width: 120,
-          tooltip: true
-        }, {
+          minWidth: 100,
+          tooltip: true,
+        },
+        {
           title: "面额/折扣",
           key: "price",
           width: 120,
@@ -124,9 +120,11 @@ export default {
           width: 150,
           render: (h, params) => {
             return h(
-              "div", params.row.receivedNum + "/" + params.row.publishNum)
+              "div",
+              params.row.receivedNum + "/" + params.row.publishNum
+            );
           },
-          minWidth:130,
+          minWidth: 130,
         },
         {
           title: "优惠券类型",
@@ -162,20 +160,19 @@ export default {
         },
         {
           title: "活动时间",
-          width: 120,
-          render: (h, params) => {
 
+          render: (h, params) => {
             if (params.row.getType === "ACTIVITY") {
               return h("div", "长期有效");
             } else {
               return h("div", {
                 domProps: {
-                  innerHTML: params.row.startTime + "<br/>" + params.row.endTime,
+                  innerHTML:
+                    params.row.startTime + "<br/>" + params.row.endTime,
                 },
               });
             }
           },
-          minWidth:150,
         },
         {
           title: "状态",
@@ -210,14 +207,14 @@ export default {
               ),
             ]);
           },
-          minWidth:70,
+          minWidth: 70,
         },
         {
           title: "操作",
           slot: "action",
           align: "center",
           fixed: "right",
-          minWidth: 140
+          maxWidth: 140,
         },
       ],
       data: [], // 表单数据
@@ -233,13 +230,13 @@ export default {
     //优惠券类型 查询参数
     getType: {
       type: String,
-      default: ''
+      default: "",
     },
     //已选择优惠券
-    selectList: {
+    selectedList: {
       type: Array,
-      default: []
-    }
+      default: [],
+    },
   },
   watch: {
     $route(to, from) {
@@ -255,16 +252,27 @@ export default {
     },
     init() {
       this.getDataList();
+
+      // 判断是否是父级回调给自己已选择优惠券
+      if (this.selectedList.length != 0) {
+        // console.log(this.selectedList);
+        this.selectedList.forEach((item) => {
+          item._checked = true;
+          item.___selected = true;
+        });
+        this.$set(this, "data", this.selectedList);
+        console.log(this.data);
+      }
     },
     add() {
-      this.$router.push({name: "add-platform-coupon"});
+      this.$router.push({ name: "add-platform-coupon" });
     },
     /** 跳转至领取详情页面 */
     receiveInfo(v) {
-      this.$router.push({name: "member-receive-coupon", query: {id: v.id}});
+      this.$router.push({ name: "member-receive-coupon", query: { id: v.id } });
     },
     info(v) {
-      this.$router.push({name: "platform-coupon-info", query: {id: v.id}});
+      this.$router.push({ name: "platform-coupon-info", query: { id: v.id } });
     },
     changePage(v) {
       this.searchForm.pageNumber = v - 1;
@@ -294,7 +302,7 @@ export default {
     changeSelect(e) {
       this.selectList = e;
       this.selectCount = e.length;
-      this.checked ? this.check() : '';
+      this.checked ? this.check() : "";
     },
     getDataList() {
       this.loading = true;
@@ -309,9 +317,9 @@ export default {
       getPlatformCouponList(this.searchForm).then((res) => {
         this.loading = false;
         if (res.success) {
-          res.result.records.forEach(item => {
-            item.___selected = false
-          })
+          res.result.records.forEach((item) => {
+            item.___selected = false;
+          });
           this.data = res.result.records;
           this.total = res.result.total;
         }
@@ -353,7 +361,7 @@ export default {
       });
     },
     edit(v) {
-      this.$router.push({name: "edit-platform-coupon", query: {id: v.id}});
+      this.$router.push({ name: "edit-platform-coupon", query: { id: v.id } });
     },
     remove(v) {
       this.$Modal.confirm({

manager/src/views/promotion/couponActivity/couponPublish.vue

@@ -6,12 +6,11 @@
           <h4>活动信息</h4>
           <div class="form-item-view">
             <FormItem label="活动名称" prop="promotionName">
-              <Input type="text" v-model="form.promotionName" placeholder="活动名称" clearable style="width: 260px"/>
+              <Input type="text" v-model="form.promotionName" placeholder="活动名称" clearable style="width: 260px" />
             </FormItem>
 
             <FormItem label="活动时间">
-              <DatePicker type="datetimerange" v-model="rangeTime" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择"
-                          :options="options" style="width: 260px">
+              <DatePicker type="datetimerange" v-model="rangeTime" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择" :options="options" style="width: 260px">
               </DatePicker>
             </FormItem>
 
@@ -27,15 +26,16 @@
                 <Radio label="DESIGNATED">指定会员</Radio>
               </RadioGroup>
             </FormItem>
-            <FormItem label="选择会员" prop="scopeType"
-                      v-if="form.couponActivityType==='SPECIFY' && form.activityScope==='DESIGNATED'">
+            <FormItem label="选择会员" prop="scopeType" v-if="form.couponActivityType==='SPECIFY' && form.activityScope==='DESIGNATED'">
               <Button type="primary" icon="ios-add" @click="addVip" ghost>选择会员</Button>
+              <div style="margin-top:24px;" v-if="form.activityScope == 'DESIGNATED'">
+                <Table border :columns="userColumns" :data="this.selectedMember">
+                </Table>
+              </div>
             </FormItem>
-            {{ selectedMember }}
 
             <FormItem label="活动描述" prop="activityScopeInfo">
-              <Input v-model="form.activityScopeInfo" type="textarea" :rows="4" maxlength="50" show-word-limit clearable
-                     style="width: 260px"/>
+              <Input v-model="form.activityScopeInfo" type="textarea" :rows="4" maxlength="50" show-word-limit clearable style="width: 260px" />
             </FormItem>
           </div>
           <h4>配置优惠券</h4>
@@ -47,8 +47,8 @@
 
               <Table border :columns="columns" :data="this.selectCouponList">
                 <template slot="sendNum" slot-scope="scope">
-                  <Input type="text" v-model="form.couponActivityItems[scope.index].num" placeholder="赠送数量"/>
-                  <Input type="text" v-model="form.couponActivityItems[scope.index].couponId" v-show="false"/>
+                  <Input type="text" v-model="form.couponActivityItems[scope.index].num" placeholder="赠送数量" />
+                  <Input type="text" v-model="form.couponActivityItems[scope.index].couponId" v-show="false" />
                 </template>
               </Table>
             </FormItem>
@@ -61,12 +61,12 @@
         </div>
       </Form>
     </Card>
-    <Modal v-model="showCouponSelect" width="80%">
-      <couponTemplate :checked="true" :selectList="selectCouponList" getType="ACTIVITY" @selected="selectedCoupon"/>
+    <Modal @on-ok="()=>{this.showCouponSelect = false}" @on-cancel="()=>{this.showCouponSelect = false}" v-model="showCouponSelect" width="80%">
+      <couponTemplate :checked="true" v-if="showCouponSelect" :selectedList="selectCouponList" getType="ACTIVITY" @selected="selectedCoupon" />
     </Modal>
 
     <Modal width="1200" v-model="checkUserList">
-      <userList @callback="callbackSelectUser" ref="memberLayout"/>
+      <userList v-if="checkUserList" @callback="callbackSelectUser" :selectedList="selectedMember" ref="memberLayout" />
     </Modal>
   </div>
 </template>
@@ -76,10 +76,7 @@ import couponTemplate from "@/views/promotion/coupon/coupon";
 
 import userList from "@/views/member/list/index";
 
-import {
-  saveActivityCoupon,
-  updateCouponActivity,
-} from "@/api/promotion";
+import { saveActivityCoupon, updateCouponActivity } from "@/api/promotion";
 
 export default {
   name: "addCouponActivity",
@@ -89,30 +86,72 @@ export default {
   },
   data() {
     return {
-      showCouponSelect: false,//显示优惠券选择框
+      showCouponSelect: false, //显示优惠券选择框
       modalType: 0, // 是否编辑
-      rangeTime: '',//时间区间
-      checkUserList: false,//会员选择器
-      selectedMember: [],//选择的会员
+      rangeTime: "", //时间区间
+      checkUserList: false, //会员选择器
+      selectedMember: [], //选择的会员
       form: {
-        promotionName: '', //活动名称
-        activityScope: 'ALL',  //活动范围
-        couponActivityType: 'REGISTERED', //触发活动方式
-        activityScopeInfo: '', //活动描述
-        startTime: '', //开始时间
-        endTime: '', //结束时间
-        couponActivityItems: []
-
+        promotionName: "", //活动名称
+        activityScope: "ALL", //活动范围
+        couponActivityType: "REGISTERED", //触发活动方式
+        activityScopeInfo: "", //活动描述
+        startTime: "", //开始时间
+        endTime: "", //结束时间
+        couponActivityItems: [],
       }, // 表单
       id: this.$route.query.id, // 优惠券活动id
       submitLoading: false, // 添加或编辑提交状态
-      selectCouponList: [],//选择的优惠券列表
+      selectCouponList: [], //选择的优惠券列表
       formRule: {
-        promotionName: [{required: true, message: "活动名称不能为空"}],
-        rangeTime: [{required: true, message: "请选择活动有效期"}],
-        description: [{required: true, message: "请输入范围描述"}],
+        promotionName: [{ required: true, message: "活动名称不能为空" }],
+        rangeTime: [{ required: true, message: "请选择活动有效期" }],
+        description: [{ required: true, message: "请输入范围描述" }],
       },
-      //优惠券表哥
+      // 用户表格
+      userColumns: [
+        {
+          title: "用户名称",
+          key: "nickName",
+          minWidth: 120,
+        },
+        {
+          title: "手机号",
+          key: "mobile",
+          render: (h, params) => {
+            return h("div", params.row.mobile || "暂未填写");
+          },
+        },
+        {
+          title: "最后登录时间",
+          key: "lastLoginDate",
+        },
+        {
+          title: "操作",
+          key: "action",
+          minWidth: 50,
+          align: "center",
+          render: (h, params) => {
+            return h(
+              "Button",
+              {
+                props: {
+                  size: "small",
+                  type: "error",
+                  ghost: true,
+                },
+                on: {
+                  click: () => {
+                    this.delUser(params.index);
+                  },
+                },
+              },
+              "删除"
+            );
+          },
+        },
+      ],
+      //优惠券表格
       columns: [
         {
           title: "优惠券名称",
@@ -175,7 +214,7 @@ export default {
                 },
                 on: {
                   click: () => {
-                    // this.delGoods(params.index);
+                    this.delCoupon(params.index);
                   },
                 },
               },
@@ -194,14 +233,32 @@ export default {
     }
   },
   methods: {
+    // 删除选择的优惠券
+    delUser(index) {
+      this.selectedMember.splice(index, 1);
+    },
+    // 删除选择的优惠券
+    delCoupon(index) {
+      this.selectCouponList.splice(index, 1);
+    },
 
     // 返回已选择的用户
     callbackSelectUser(val) {
-      let index = this.selectedMember.indexOf(val)
-      if (index > 0) {
-        this.selectedMember.remove(val);
+      // 每次将返回的数据回调判断
+      let findUser = this.selectedMember.find((item) => {
+        return item.id == val.id;
+      });
+      // 如果没有则添加
+      if (!findUser) {
+        this.selectedMember.push(val);
+      } else {
+        // 有重复数据就删除
+        this.selectedMember.map((item, index) => {
+          if (item.id == findUser.id) {
+            this.selectedMember.splice(index, 1);
+          }
+        });
       }
-      this.selectedMember.push(val);
     },
 
     // 添加指定用户
@@ -218,17 +275,16 @@ export default {
     /**
      * 返回优惠券*/
     selectedCoupon(val) {
-      this.selectCouponList = val
+      this.selectCouponList = val;
       //清空原有数据
       this.form.couponActivityItems = [];
       val.forEach((item, index) => {
-
         this.form.couponActivityItems.push({
           num: 0,
-          couponId: item.id
-        })
-      })
-      console.log(val)
+          couponId: item.id,
+        });
+      });
+      console.log(val);
     },
 
     getCoupon() {
@@ -276,7 +332,6 @@ export default {
     },
     /** 保存平台优惠券 */
     handleSubmit() {
-
       this.form.startTime = this.$options.filters.unixToDate(
         this.rangeTime[0] / 1000
       );
@@ -287,7 +342,7 @@ export default {
       this.$refs.form.validate((valid) => {
         if (valid) {
           const params = JSON.parse(JSON.stringify(this.form));
-          console.log(params)
+          console.log(params);
           this.submitLoading = true;
           if (this.modalType === 0) {
             // 添加 避免编辑后传入id等数据 记得删除
@@ -318,7 +373,7 @@ export default {
         this.$store.state.app.pageOpenedList
       );
       this.$router.go(-1);
-    }
+    },
   },
 };
 </script>

manager/src/views/promotion/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 });
+
+      this.getStoreLives();
+    },
+
+    /**
+     * 页面数据大小分页回调
+     */
+    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>

manager/src/views/promotion/live/liveDetail.vue

@@ -0,0 +1,300 @@
+<template>
+  <div>
+    <Card>
+
+      <Form :model="liveForm" ref="liveForm" :rules="liveRulesForm" :label-width="120">
+        <FormItem label="直播标题" prop="name">
+          <Input disabled v-model="liveForm.name" style="width:460px"></Input>
+          <div class="tips">直播间名字，最短3个汉字，最长17个汉字，1个汉字相当于2个字符</div>
+        </FormItem>
+        <FormItem label="主播昵称" prop="anchorName">
+          <Input disabled v-model="liveForm.anchorName" style="width:360px"></Input>
+          <div class="tips">主播昵称，最短2个汉字，最长15个汉字，1个汉字相当于2个字符</div>
+        </FormItem>
+        <FormItem label="直播时间" prop="startTime">
+
+          <DatePicker disabled format="yyyy-MM-dd HH:mm" type="datetimerange" v-model="times" @on-change="handleChangeTime" :options="optionsTime" placeholder="直播计划开始时间-直播计划结束时间" style="width: 300px">
+          </DatePicker>
+          <div class="tips">直播开播时间需要在当前时间的10分钟后 并且 开始时间不能在 6 个月后</div>
+        </FormItem>
+
+        <FormItem label="主播微信号" prop="anchorWechat">
+          <Input disabled v-model="liveForm.anchorWechat" style="width:360px" placeholder="主播微信号"></Input>
+          <div class="tips">主播微信号，如果未实名认证，需要先前往“小程序直播”小程序进行<a target="_black" href="https://res.wx.qq.com/op_res/9rSix1dhHfK4rR049JL0PHJ7TpOvkuZ3mE0z7Ou_Etvjf-w1J_jVX0rZqeStLfwh">实名验证</a></div>
+        </FormItem>
+
+        <!-- 分享卡片 -->
+        <FormItem label="分享卡片封面" prop="feedsImg">
+          <div class="upload-list" v-if="liveForm.feedsImg">
+            <template>
+              <img :src="liveForm.feedsImg">
+              <div class="upload-list-cover">
+                <Icon type="ios-eye-outline" @click.native="handleView(liveForm.feedsImg)"></Icon>
+
+              </div>
+            </template>
+
+          </div>
+          <Upload v-if="liveForm.feedsImg.length ==0" ref="upload" :show-upload-list="false" :on-success="handleFeedsImgSuccess" :default-file-list="defaultImgList" :format="['jpg','jpeg','png']"
+            :on-format-error="handleFormatError" :max-size="1024" :on-exceeded-size="handleMaxSize" type="drag" :action="action" :headers="accessToken" style="display: inline-block;width:58px;">
+            <div style="width: 58px;height:58px;line-height: 58px;">
+              <Icon type="ios-camera" size="20"></Icon>
+            </div>
+          </Upload>
+          <div class="tips">
+            直播间分享图，图片规则：建议像素800*640，大小不超过1M；
+          </div>
+        </FormItem>
+
+        <!-- 直播间背景墙 -->
+        <FormItem label="直播间背景墙" prop="coverImg">
+
+          <div class="upload-list" v-if="liveForm.coverImg">
+            <template>
+              <img :src="liveForm.coverImg">
+              <div class="upload-list-cover">
+                <Icon type="ios-eye-outline" @click.native="handleView(liveForm.coverImg)"></Icon>
+
+              </div>
+            </template>
+          </div>
+          <Upload v-if="liveForm.coverImg.length ==0" ref="upload" :show-upload-list="false" :on-success="handleCoverImgSuccess" :default-file-list="defaultImgList" :format="['jpg','jpeg','png']"
+            :on-format-error="handleFormatError" :max-size="2048" :on-exceeded-size="handleMaxSize" type="drag" :action="action" :headers="accessToken" style="display: inline-block;width:58px;">
+            <div style="width: 58px;height:58px;line-height: 58px;">
+              <Icon type="ios-camera" size="20"></Icon>
+            </div>
+          </Upload>
+          <div class="tips"> 直播间背景图，图片规则：建议像素1080*1920，大小不超过2M</div>
+        </FormItem>
+
+        <!-- 直播间背景墙 -->
+        <FormItem label="直播间分享图" prop="shareImg">
+
+          <div class="upload-list" v-if="liveForm.shareImg">
+            <template>
+              <img :src="liveForm.shareImg">
+              <div class="upload-list-cover">
+                <Icon type="ios-eye-outline" @click.native="handleView(liveForm.shareImg)"></Icon>
+
+              </div>
+            </template>
+          </div>
+          <Upload v-if="liveForm.shareImg.length ==0" ref="upload" :show-upload-list="false" :on-success="handleShareImgSuccess" :default-file-list="defaultImgList" :format="['jpg','jpeg','png']"
+            :on-format-error="handleFormatError" :max-size="2048" :on-exceeded-size="handleMaxSize" type="drag" :action="action" :headers="accessToken" style="display: inline-block;width:58px;">
+            <div style="width: 58px;height:58px;line-height: 58px;">
+              <Icon type="ios-camera" size="20"></Icon>
+            </div>
+          </Upload>
+          <div class="tips"> 直播间分享图，图片规则：建议像素800*640，大小不超过1M</div>
+        </FormItem>
+
+        <FormItem label="商品" v-if="$route.query.id">
+          <Table class="goods-table" :columns="liveColumns" :data="liveData">
+            <template slot-scope="{ row,index }" slot="goodsName">
+              <div class="flex-goods">
+                <Badge v-if="index == 0 || index ==1" color="volcano"></Badge>
+                <img class="thumbnail" :src="row.thumbnail || row.goodsImage">
+                {{ row.goodsName || row.name }}
+              </div>
+            </template>
+            <template slot-scope="{ row }" class="price" slot="price">
+              <div>
+                <div v-if="row.priceType == 1">{{row.price | unitPrice('￥')}}</div>
+                <div v-if="row.priceType == 2">{{row.price | unitPrice('￥')}}至{{row.price2 | unitPrice('￥')}}</div>
+                <div v-if="row.priceType == 3">{{row.price | unitPrice('￥')}}<span class="original-price">{{row.price2 | unitPrice('￥')}}</span></div>
+              </div>
+            </template>
+            <template slot-scope="{ row }" slot="quantity">
+              <div>{{row.quantity}}</div>
+            </template>
+          </Table>
+          <div class="tips">
+            直播间商品中前两个商品将自动被选为封面，伴随直播间在直播列表中显示
+          </div>
+        </FormItem>
+
+        <FormItem>
+          <Button type="primary" @click="createLives()">保存</Button>
+
+        </FormItem>
+      </Form>
+    </Card>
+    <!-- 浏览图片 -->
+    <Modal title="查看图片" v-model="imageVisible">
+      <img :src="imageSrc" v-if="imageVisible" style="width: 100%">
+    </Modal>
+
+  </div>
+</template>
+
+<script>
+import { getLiveInfo } from "@/api/promotion";
+export default {
+  data() {
+    return {
+      imageVisible: false, //查看图片的dailog
+      imageSrc: "", //查看图片的路径
+      liveForm: {
+        name: "", //直播标题
+        anchorName: "", //主播昵称
+        anchorWechat: "", //主播微信号
+        feedsImg: "", //分享卡片封面
+        coverImg: "", //直播间背景墙
+        shareImg: "", //分享图
+        startTime: "",
+      },
+
+      times: [], //接收直播时间数据
+      // 直播商品表格表头
+      liveColumns: [
+        {
+          title: "商品",
+          slot: "goodsName",
+        },
+        {
+          title: "价格",
+          slot: "price",
+        },
+        {
+          title: "库存",
+          slot: "quantity",
+          width: 100,
+        },
+        {
+          title: "操作",
+          slot: "action",
+          width: 250,
+        },
+      ],
+      liveData: [], //直播商品集合
+      commodityList: "", //商品集合
+    };
+  },
+  mounted() {
+    /**
+     * 如果query.id有值说明是查看详情
+     * liveStatus 可以判断当前直播状态 从而区分数据 是否是未开始、已开启、已关闭、
+     */
+    if (this.$route.query.id) {
+      // 获取直播间详情
+      this.getLiveDetail();
+    }
+    this.accessToken = {
+      accessToken: this.getStore("accessToken"),
+    };
+  },
+
+  methods: {
+    /**
+     * 上传图片查看图片
+     */
+    handleView(src) {
+      this.imageVisible = true;
+      this.imageSrc = src;
+    },
+    /**
+     * 获取直播间详情
+     */
+    async getLiveDetail() {
+      let result = await getLiveInfo(this.$route.query.id);
+
+      // 将数据回调到liveform里面
+      if (result.success) {
+        let data = result.result;
+        for (let key in data) {
+          this.liveForm[key] = data[key];
+        }
+        // 将选择的商品回调给表格
+
+        this.liveData = data.commodityList;
+        this.commodityList = data.commodityList;
+
+        // 将时间格式化
+        this.$set(
+          this.times,
+          [0],
+          this.$options.filters.unixToDate(data.startTime, "yyyy-MM-dd hh:mm")
+        );
+        this.$set(
+          this.times,
+          [1],
+          this.$options.filters.unixToDate(data.endTime, "yyyy-MM-dd hh:mm")
+        );
+        this.liveStatus = data.status;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.action {
+  display: flex;
+  /deep/ .ivu-btn {
+    margin: 0 5px !important;
+  }
+}
+.original-price {
+  margin-left: 10px;
+  color: #999;
+  text-decoration: line-through;
+}
+.thumbnail {
+  width: 50px;
+  height: 50px;
+  border-radius: 0.4em;
+}
+.flex-goods {
+  margin: 10px;
+  display: flex;
+
+  align-items: center;
+  > img {
+    margin-right: 10px;
+  }
+}
+.tips {
+  color: #999;
+  font-size: 12px;
+}
+.goods-table {
+  width: 1000px;
+  margin: 10px 0;
+}
+.upload-list {
+  display: inline-block;
+  width: 60px;
+  height: 60px;
+  text-align: center;
+  line-height: 60px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #fff;
+  position: relative;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+  margin-right: 4px;
+}
+.upload-list img {
+  width: 100%;
+  height: 100%;
+}
+.upload-list-cover {
+  display: none;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.6);
+}
+.upload-list:hover .upload-list-cover {
+  display: block;
+}
+.upload-list-cover i {
+  color: #fff;
+  font-size: 20px;
+  cursor: pointer;
+  margin: 0 2px;
+}
+</style>