From 3211f16a4052e85a32372fd10d454a382e449d1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A7=8B=E4=BA=8E=E5=88=9D=E8=A7=81?= <752204717@qq.com>
Date: Sun, 28 Apr 2024 15:48:51 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=BE=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/course/operationsList copy.vue    | 1117 +++++++++++++++++
 src/views/modules/course/video.vue            |  221 ++++
 src/views/modules/shop/curriculum.vue         |  785 ++++++++++++
 src/views/modules/shop/shopproduct.vue        |   77 +-
 4 files changed, 2175 insertions(+), 25 deletions(-)
 create mode 100644 src/views/modules/course/operationsList copy.vue
 create mode 100644 src/views/modules/course/video.vue
 create mode 100644 src/views/modules/shop/curriculum.vue

diff --git a/src/views/modules/course/operationsList copy.vue b/src/views/modules/course/operationsList copy.vue
new file mode 100644
index 0000000..ead7e20
--- /dev/null
+++ b/src/views/modules/course/operationsList copy.vue	
@@ -0,0 +1,1117 @@
+<template>
+  <div class="mod-config">
+    <commonTree
+      source="tags"
+      @changeCurrentNode="changeCurrentNode"
+      ref="commonTree"
+      :dataList="treeDataList"
+      @getCommonShopDataList="getCommonShopDataList"
+      @handleClickNodes="handleClickNodes"
+      :urlList="urlList"
+    ></commonTree>
+    <div
+      v-if="isFresh"
+      v-loading="!isFresh"
+      style="width: calc(100% - 360px); height: 100%; float: right;  border: 1px solid #bababa; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); border-radius: 10px;position: relative;"
+    >
+      <div class="border_box info_box">
+        <div class="title_box">
+          <div class="title"><span class="line"></span>基本标签信息</div>
+        </div>
+
+        <div class="addFormBox">
+          <el-form :model="addForm" ref="addForm" label-width="80px">
+            <el-form-item label="标签名称" prop="title" class="form_item">
+              <el-input
+                placeholder="请输入标签名称"
+                style="width: 100%"
+                v-model="addForm.title"
+                clearable
+              >
+              </el-input>
+            </el-form-item>
+            <el-form-item label="排序" prop="sort" class="form_item">
+              <el-input-number
+                placeholder="请输入标签排序"
+                style="width: 100%"
+                v-model="addForm.sort"
+                :min="0"
+                clearable
+                @keyup.native="UpNumber"
+                @keydown.native="UpNumber"
+              >
+              </el-input-number>
+            </el-form-item>
+            <el-form-item
+              label="是否为最终级"
+              prop="isLast"
+              label-width="120px"
+              class="form_item"
+            >
+              <el-switch
+                v-model="addForm.isLast"
+                active-color="#13ce66"
+                :active-value="1"
+                :inactive-value="0"
+                active-text="是"
+                inactive-text="否"
+                @change="handleChangeIsLast"
+              >
+              </el-switch>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div
+          style="  border: 1px dashed #bababa;"
+          v-if="currentNode && currentNode.data.isLast == 1"
+        ></div>
+      </div>
+      <div
+        class="border_box tree_content_box"
+        v-if="currentNode && currentNode.data.isLast == 1"
+      >
+        <div class="title_box" style="margin-bottom: 10px; height: 40px">
+          <div class="title">
+            <span class="line"></span>已关联课程列表
+            <el-button
+              plain
+              type="primary"
+              style="margin-left: 20px"
+              @click="openTable('addForm')"
+              size="mini"
+              >新增</el-button
+            >
+
+            <!-- <div style="" class="button_box"> -->
+            <!-- <el-button plain type="danger" @click="handleCheckAllChange(true)" size="mini">清空</el-button> -->
+
+            <!-- </div> -->
+          </div>
+        </div>
+        <commonShop
+          :defaultForm="{
+            title: '',
+            marketId:addForm.id
+          }"
+          getAssociatedGoodsListKey="marketId"
+          getAssociatedGoodsListValue="result"
+          :tableColumnList="tableColumnList"
+          :currentId="addForm.id ? addForm.id : ''"
+          currentType="bookMarketId"
+          :dataList="associatedGoodsList"
+          :urlList="urlList"
+          @delete="dataFormDelete"
+          :isEdit="isEdit"
+          ref="commonShop"
+          :style="`height: calc(100% - 50px); `"
+        >
+          <template slot="searchFormItem" slot-scope="slotProps">
+            <el-form-item label="课程名称" prop="title" class="form_item" style="width: 240px;">
+              <el-input
+                size="small"
+                placeholder="请输入课程名称"
+                style="width: 100%"
+                v-model="slotProps.dataForm.title"
+                clearable
+              >
+              </el-input>
+            </el-form-item>
+            <!-- <el-form-item label="商品类型" prop="goodsType" class="form_item">
+            <el-select
+              size="small"
+              v-model="slotProps.dataForm.goodsType"
+              placeholder="请选择"
+              style="width: 100%;"
+              clearable
+            >
+              <el-option
+              style="padding:0 10px;box-sizing: border-box;"
+                v-for="item in goodsTypeList"
+                :key="item.dictType"
+                :label="item.dictValue"
+                :value="item.dictType"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item> -->
+          </template>
+          <template slot="tableItem" slot-scope="slotProps">
+            <el-table-column label="课程ID" width="70" align="center" prop="id">
+              <!-- <template slot-scope="scope">
+            {{ (pageIndex - 1) * pageSize + scope.$index + 1 }}
+          </template> -->
+            </el-table-column>
+            <el-table-column
+              prop="title"
+              header-align="center"
+              align="center"
+              label="课程名称"
+            >
+            </el-table-column>
+
+            <el-table-column
+              header-align="center"
+              align="center"
+              label="课程图"
+              width="140"
+            >
+              <template slot-scope="scope">
+                <img
+                  v-if="scope.row.image != ''"
+                  :src="scope.row.image"
+                  width="25"
+                  height="35"
+                  class="tableImg"
+                />
+              </template>
+            </el-table-column>
+          </template>
+        </commonShop>
+
+        <div class="submitButton submitButtonBox">
+          <!-- <el-button size="small" @click.stop="dataFormEdit()">
+            取消
+          </el-button> -->
+          <el-button
+            type="primary"
+            @click="dataFormSubmit('addForm')"
+            size="small"
+            >确定</el-button
+          >
+          <!-- </div> -->
+        </div>
+      </div>
+      <div
+        class="submitButton submitButtonBox"
+        style="position: absolute;bottom: 13px;right: 15px;"
+        v-if="!isEdit"
+      >
+        <!-- <el-button size="small" @click.stop="dataFormEdit()">
+            取消
+          </el-button> -->
+        <el-button
+          type="primary"
+          @click="dataFormSubmit('addForm')"
+          size="small"
+          >确定</el-button
+        >
+        <!-- </div> -->
+      </div>
+    </div>
+
+    <!-- <el-form
+      :inline="true"
+      :model="dataForm"
+      @keyup.enter.native="getDataList()"
+    >
+   
+      
+    </el-form> -->
+    <commonShopTable
+      title="课程"
+      :defaultForm="{
+        title: '',
+        marketId:addForm.id
+      }"
+      :urlList="urlList"
+      :tableColumnList="tableColumnList"
+      marketIdKey="marketId"
+      ref="commonShopTable"
+      :currentId="addForm.id"
+      currentType="bookMarketId"
+      @submit="handleSubmitShopTable"
+    >
+      <template slot="searchFormItem" slot-scope="slotProps">
+        <el-form-item label="课程名称" prop="title" class="form_item">
+          <el-input
+            size="small"
+            placeholder="请输入课程名称"
+            style="width: 100%"
+            v-model="slotProps.dataForm.title"
+            clearable
+          >
+          </el-input>
+        </el-form-item>
+        <!-- <el-form-item label="商品类型" prop="goodsType" class="form_item">
+              <el-select size="small" v-model="dataForm.goodsType" placeholder="请选择" style="width: 100%" clearable>
+                <el-option v-for="item in goodsTypeList" :key="item.dictType" :label="item.dictValue"
+                  :value="item.dictType">
+                </el-option>
+              </el-select>
+            </el-form-item> -->
+      </template>
+
+      <template slot="tableItem" slot-scope="slotProps">
+        <el-table-column label="课程ID" width="70" align="center" prop="id">
+          <!-- <template slot-scope="scope">
+            {{ (pageIndex - 1) * pageSize + scope.$index + 1 }}
+          </template> -->
+        </el-table-column>
+        <el-table-column
+          prop="title"
+          header-align="center"
+          align="center"
+          label="课程名称"
+        >
+        </el-table-column>
+
+        <el-table-column
+          header-align="center"
+          align="center"
+          label="课程图"
+          width="120"
+        >
+          <template slot-scope="scope">
+            <img
+              v-if="scope.row.image != ''"
+              :src="scope.row.image"
+              width="25"
+              height="35"
+              class="tableImg"
+            />
+          </template>
+        </el-table-column>
+      </template>
+    </commonShopTable>
+    <add-or-update
+      v-if="addOrUpdateVisible"
+      ref="addOrUpdate"
+      @refreshDataList="getDataList"
+    ></add-or-update>
+  </div>
+</template>
+
+<script>
+import debounce from "lodash/debounce"; //导入lodash中的debounce
+import AddOrUpdate from "@/views/components/commonBookTags/bookTagsForm.vue";
+import commonShop from "@/views/components/commonBookTags/shopproduct.vue";
+import commonShopTable from "@/views/components/commonBookTags/shopproductTable.vue";
+import commonTree from "@/views/components/commonBookTags/tags.vue";
+// import dialogComponent from './seckillprodrelation'
+export default {
+  data() {
+    return {
+      
+      isEdit: false,
+      checkAll: false,
+      isIndeterminate: true,
+      urlList: {
+        treeList: "/master/courseMarket/marketTree",
+        delete: "/master/courseMarket/delMarket",
+        deleteShop: "/master/courseMarket/delToMarket",
+        saveShop: "/master/courseMarket/saveToMarket",
+        add: "/master/courseMarket/saveOrUpdateMarket",
+        getAssociatedGoodsList: "/master/courseMarket/getCourseByMarketId",
+        getNotToLabelList: "/master/courseMarket/getNotToMarketList"
+      },
+      addForm: {},
+      isFresh: false,
+      dataRule: {
+        name: [
+          {
+            required: true,
+            message: "标签名称不能为空"
+            // trigger: "change",
+          }
+        ]
+      },
+      currentNode: {},
+      treeDataList: [],
+      associatedGoodsList: [], //已关联商品列表
+
+      isact: "", //当前hover的节点
+      isactTitle: "", //记录修改节点名称
+      curNode: undefined, //当前选中节点
+      isUpdateGroup: false, //是否在修改模板组
+      filterText: "",
+      indexRecord: [], //记录节点轨迹
+      isBreak: false, //是否结束循环
+      defaultProps: {
+        children: "children",
+        label: "title"
+      },
+      dataForm: {
+        key: ""
+      },
+      dataList: [],
+      pageIndex: 1,
+      pageSize: 10,
+      totalPage: 0,
+      dataListLoading: false,
+      dataListSelections: [],
+      addOrUpdateVisible: false,
+      tableColumnList: [
+        { label: "商品ID", width: 70, align: "center", prop: "productId" },
+        {
+          label: "商品名称",
+          align: "center",
+          prop: "product.productName",
+          headerAlign: "center"
+        },
+        {
+          label: "价格",
+          align: "center",
+          prop: "product.price",
+          headerAlign: "center"
+        },
+        {
+          label: "活动价",
+          width: 120,
+          align: "center",
+          prop: "product.activityPrice",
+          headerAlign: "center"
+        },
+        {
+          label: "库存",
+          width: 120,
+          align: "center",
+          prop: "product.productStock",
+          headerAlign: "center"
+        },
+        {
+          label: "商品图",
+          width: 120,
+          align: "center",
+          prop: "product.productImages",
+          headerAlign: "center",
+          slot: "productImages"
+        }
+      ]
+    };
+  },
+  components: {
+    AddOrUpdate,
+    commonShop,
+    commonTree,
+    commonShopTable
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    }
+  },
+  activated() {
+    this.isEdit = false;
+    this.getDataList();
+  },
+  methods: {
+    UpNumber(e) {
+      e.target.value = e.target.value.replace(/[^\d]/g, "");
+    },
+    dataFormEdit() {
+      this.checkAll = false;
+      this.isEdit = !this.isEdit;
+    },
+    handleCheckAllChange(val) {
+      this.$nextTick(() => {
+        this.$refs.commonShop.handleCheckAllChange(val);
+      });
+    },
+    handleSubmitShopTable: debounce(async function(ids) {
+      await this.$http({
+        url: this.$http.adornUrl(`${this.urlList.saveShop}`),
+        method: "post",
+        data: this.$http.adornData({
+          courseId: ids,
+          marketId: this.addForm.id
+        })
+      }).then(async ({ data }) => {
+        if (data && data.code === 0) {
+          this.$message.success(data.msg);
+
+          if (this.$refs.commonShop) {
+            // this.$refs.commonShop.getAssociatedGoodsList.dataForm={
+            //   ...this.$refs.commonShop.getAssociatedGoodsList.dataForm,
+            //   id:this.addForm.id ? this.addForm.id : null
+            // }
+
+            this.$refs.commonShop.getAssociatedGoodsList();
+          }
+          if (this.$refs.commonShopTable) {
+            this.$refs.commonShopTable.close();
+          }
+        } else {
+          this.$message.error(data.msg);
+        }
+      });
+    }, 200),
+    openTable() {
+      this.isEdit = false;
+      this.$nextTick(() => {
+        this.$refs.commonShopTable.dataForm.marketId = this.addForm.id;
+        this.$refs.commonShopTable.open(this.addForm.id);
+      });
+    },
+    handleChangeIsLast(e) {
+      console.log("🚀 ~ handleChangeIsLast ~ e:", e);
+      this.$nextTick(() => {
+        if (e == 1) {
+          if (this.$refs.commonShop) {
+            // this.$refs.commonShop.getAssociatedGoodsList.dataForm={
+            //   ...this.$refs.commonShop.getAssociatedGoodsList.dataForm,
+            //   id:this.addForm.id ? this.addForm.id : null
+            // }
+            this.$refs.commonShop.getAssociatedGoodsList();
+          }
+        }
+      });
+    },
+
+    async getCommonShopDataList(type, id, form) {
+      this.isFresh = false;
+      this.isEdit = false;
+      this.isFresh = true;
+      console.log("🚀 ~ getCommonShopDataList ~ type, id:", type, id);
+      this.currentNode = { data: { ...form } };
+      this.addForm = form;
+
+      await this.getDataList();
+      // this.$refs.commonTree.setCurrentNodeShow();
+      this.$nextTick(() => {
+        // this.$refs.commonShop.clear();
+        // this.$refs.commonShop.bookMarketId = null;
+        if (form.isLast == 1) {
+          if (this.$refs.commonShop) {
+            // this.$refs.commonShop.getAssociatedGoodsList.dataForm={
+            //   ...this.$refs.commonShop.getAssociatedGoodsList.dataForm,
+            //   id:this.addForm.id ? this.addForm.id : null
+            // }
+            this.$refs.commonShop.getAssociatedGoodsList();
+          }
+        }
+      });
+    },
+
+    //新增修改
+    dataFormSubmit: debounce(async function(formName) {
+      //    return false
+      if (this.addForm.title == "" || !this.addForm.title) {
+        this.$message.error("请输入标签名称");
+        return false;
+      }
+      await this.$refs[formName].validate(async valid => {
+        if (valid) {
+          await this.$http({
+            url: this.$http.adornUrl(`${this.urlList.add}`),
+            method: "post",
+            data: this.$http.adornData({
+              ...this.addForm
+            })
+          }).then(async ({ data }) => {
+            if (data && data.code === 0) {
+              // var status = await this.correlationShop(data.result.id);
+              await this.getDataList();
+
+              this.$nextTick(async () => {
+                this.$refs.commonTree.setCurrentNodeShow(data.result.id);
+
+                this.addForm = data.result;
+                this.currentNode = { data: { ...data.result } };
+                this.$message({
+                  message: "操作成功",
+                  type: "success",
+                  duration: 1500,
+                  onClose: () => {
+                    this.visible = false;
+                  }
+                });
+              });
+            } else {
+              this.$message.error(data.msg);
+            }
+          });
+        }
+      });
+    }, 200),
+    //新增修改
+    dataFormDelete: debounce(async function(row, deleteType) {
+      console.log("row at line 515:", row);
+      this.$confirm(
+        `确定要删除${deleteType != "all" ? "该" : "所有"}关联课程嘛?`,
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }
+      )
+        .then(async () => {
+          // var lableIds = row[0].bookLabelId;
+          var productIds = row[0].id;
+
+          // //    return false
+          // var selectShopArr = this.$refs.commonShop.selectShopArr;
+          // console.log(selectShopArr, "1111");
+
+          // if (selectShopArr.length == 0) {
+          //   this.$message.error("请选择已关联的商品");
+          //   return false;
+          // }
+          this.$refs.commonShop.dataListLoading = true;
+
+          await this.$http({
+            url: this.$http.adornUrl(
+              `${this.urlList.deleteShop}?marketId=${
+                this.addForm.id
+              }&courseId=${productIds}`
+            ),
+            method: "post"
+          }).then(async ({ data }) => {
+            if (data && data.code === 0) {
+              this.$message.success("删除成功");
+            } else {
+              this.$message.error(data.msg);
+            }
+            this.$nextTick(() => {
+              // this.$refs.commonShop.selectShopArr = [];
+              if (this.$refs.commonShop) {
+                //     this.$refs.commonShop.getAssociatedGoodsList.dataForm={
+                //   ...this.$refs.commonShop.getAssociatedGoodsList.dataForm,
+                //   id:this.addForm.id ? this.addForm.id : null
+                // }
+                this.$refs.commonShop.getAssociatedGoodsList();
+              }
+            });
+          });
+        })
+        .catch(() => {});
+    }, 200),
+    setCheckedKeys() {
+      this.$refs.tree.setCheckedKeys([0]);
+    },
+    changeCurrentNode(val) {
+      this.changeCurrentNode = val;
+      this.$forceUpdate();
+    },
+    handlereset() {
+      this.currentNode = null;
+      this.isFresh = false;
+      this.isFresh = true;
+    },
+    handleClickNodes(node, data, type) {
+      this.isEdit = false;
+      this.addForm = {};
+      // console.log(this.$refs.tree.handleClickNodes(), "当前选中节点");
+      console.log(node, data, "当前选中节点");
+      this.currentNode = node ? node : {};
+      this.isFresh = false;
+      this.isFresh = true;
+
+      var form = {};
+      switch (type) {
+        case "add":
+          form = { ...data };
+          break;
+        case "edit":
+          form = { ...node.data };
+          break;
+        case "addChildren":
+          form = {
+            children: [],
+            delFlag: 0,
+            isLast: 0,
+            pid: data.id,
+            sort: 0,
+            title: ""
+          };
+          break;
+      }
+      this.addForm = { ...form };
+
+      this.$nextTick(() => {
+        this.$refs.commonShop.clear();
+        // this.$refs.commonShop.bookMarketId = null;
+        this.$refs.commonShop.getDataList(type == "edit" ? form.id : "");
+      });
+    },
+    addOrUpdateHandle() {
+      var addform = {
+        children: [],
+        delFlag: 0,
+        isLast: 0,
+        pid: 0,
+        sort: 0,
+        title: ""
+      };
+      this.handleClickNodes({ data: addform }, addform, "add");
+      // if (!this.currentNode) {
+      //   this.$message.error("请先选择分类");
+      //   return;
+      // }
+    },
+
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.title.indexOf(value) !== -1;
+    },
+
+    // renderContent(h, { node, data, store }) {
+    //   return;
+    //   `<span
+    //       style="flex: 1; display: flex; align-items: center; justify-content: space-between; padding-right: 8px;"
+    //       on-mouseenter={() => this.mouseenteract(data)}
+    //       on-mouseleave={() => this.mouseleaveact(data)}
+    //     >
+    //       <span>
+    //         <span>{node.label}</span>
+    //       </span>
+    //       {this.isact == data ? (
+    //         <span>
+    //           {this.isact.typeName == "模板组" ? (
+    //             <el-button
+    //               class="m-r-10"
+    //               type="text"
+    //               icon="el-icon-edit"
+    //               on-click={() => this.handleUpdateGroup(node, data)}
+    //             ></el-button>
+    //           ) : (
+    //             <span></span>
+    //           )}
+    //           <el-button
+    //             type="text"
+    //             icon="el-icon-delete"
+    //             on-click={(e) => this.handleDelete(node, data, e)}
+    //           ></el-button>
+    //         </span>
+    //       ) : (
+    //         <span></span>
+    //       )}
+    //     </span>`;
+    // },
+    updateRenderContent(h, { node, data, store }) {
+      return `
+        <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; padding-right: 8px;">
+          <span>
+            {this.isact == data ? (
+              <input
+                type="text"
+                onChange={this.handleChangeTitle.bind(this)}
+                value={node.label}
+              />
+            ) : (
+              <span>{node.label}</span>
+            )}
+          </span>
+          {this.isact == data ? (
+            <span>
+              {this.isact.typeName == "模板组" ? (
+                <span>
+                  <el-button
+                    class="m-r-10"
+                    type="text"
+                    icon="el-icon-check"
+                    on-click={() => this.updateGroup(node, data)}
+                  ></el-button>
+                  <el-button
+                    class="m-r-10"
+                    type="text"
+                    icon="el-icon-close"
+                    on-click={(e) => this.cancelUpdate(node, data, e)}
+                  ></el-button>
+                </span>
+              ) : (
+                <span></span>
+              )}
+            </span>
+          ) : (
+            <span></span>
+          )}
+        </span>`;
+    },
+    //获取鼠标进入节点的数据
+    mouseenteract(da) {
+      this.isact = da;
+    },
+    mouseleaveact(da) {
+      this.isact = "";
+    },
+    handleNodeClick(pdata) {
+      this.curNode = pdata;
+      document
+        .getElementsByClassName("el-tree-node__content")[0]
+        .setAttribute("class", "el-tree-node__content");
+    },
+    handleDelete(node, data, e) {
+      e.stopPropagation();
+      //存在则添加到子级
+      const parent = node.parent;
+      const children = parent.data.nodes || parent.data;
+      //若parent.data是对象，操作的是子级；如果是数组，操作的是最外层
+      if (Array.isArray(parent.data)) {
+        const parentIndex = parent.data.findIndex(d => d.id === data.id);
+        parent.data.splice(parentIndex, 1);
+      } else {
+        const childIndex = children.findIndex(d => d.id === data.id);
+        children.splice(childIndex, 1);
+      }
+      this.curNode = undefined;
+    },
+    //新增组
+    handleAddGroup() {
+      /**
+       *  如果模版深度最多两层，取消该部分注释
+       * //最多只有两层组 不可能添加在dept2的组上 curNode存在 并且  深度超过1
+         if (this.curNode != undefined && this.curNode.depth != 1) { 
+         this.$message.warning("不能添加超过两层");  
+         return; 
+       }
+       */
+
+      //如果isUpdateGroup 已经是true了 说明重复点击了
+      if (this.isUpdateGroup) {
+        return;
+      }
+
+      let id = ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
+        (
+          c ^
+          (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
+        ).toString(16)
+      );
+      let newChild = {
+        parentId: "", //如果有这个id 是插入第二层 否则是第一层 可有可无
+        text: "", //必须有 this.templateContent.tempName
+        nodes: [],
+        id: id,
+        typeName: "模板组",
+        temporaryData: "1" //用来区分临时数据
+      };
+      /* 如果模版深度最多两层，以下条件改成该部分注释
+        this.curNode && this.curNode.depth == 1 
+      */
+      this.indexRecord = [];
+      if (this.curNode) {
+        if (!this.curNode.nodes) {
+          this.$message.warning("模板不可添加");
+          return;
+        }
+        newChild.parentId = this.curNode.id;
+        /* 如果模版深度最多两层，以下条件改成该部分注释
+          const index = this.treeDataList.findIndex(
+            item => item.id == this.curNode.id
+          );
+          this.treeDataList[index].nodes.push(newChild);
+        */
+        //找到tree中的index轨迹
+        this.getTemplateTreeNode(this.curNode.id, this.treeDataList, 0);
+        //按照index轨迹插入节点
+        this.insertNode(
+          newChild,
+          this.treeDataList,
+          this.indexRecord,
+          this.indexRecord.length
+        );
+        this.isBreak = false;
+      } else if (this.curNode == undefined) {
+        //没有选中的时候 添加到最外层
+        newChild.depth = 1;
+        this.treeDataList.push(newChild);
+      }
+      //调用出updateRender的input
+      this.isact = newChild;
+      this.isUpdateGroup = true;
+    },
+    //递归遍历获得选中node
+    getTemplateTreeNode(target, list, dept) {
+      //空数组直接返回
+      if (list.length == 0) return;
+      let dataLen = list.length;
+      for (let i = 0; i < dataLen; i++) {
+        //如果不匹配
+        if (target != list[i].id) {
+          //存在nodes 遍历nodes里的节点
+          if (list[i].nodes) {
+            this.indexRecord[dept] = i;
+            let recordDept = dept + 1;
+            this.getTemplateTreeNode(target, list[i].nodes, recordDept);
+          } else {
+            //不存在nodes 继续遍历
+            continue;
+          }
+        } else {
+          //匹配，则修改下标数组
+          this.indexRecord[dept] = i;
+          this.isBreak = true;
+          break;
+        }
+        //删除不匹配的轨迹 如果已经break了说明已经找到正确的节点，就不用再删了
+        if (!this.isBreak) {
+          this.indexRecord.pop();
+        }
+      }
+    },
+    //插入节点
+    insertNode(insertChild, tree, indexArr, len) {
+      let index = indexArr.length - len;
+      if (len == 0) {
+        tree.push(insertChild);
+      } else {
+        this.insertNode(
+          insertChild,
+          tree[indexArr[index]].nodes,
+          indexArr,
+          len - 1
+        );
+      }
+    },
+    //修改组
+    handleUpdateGroup() {
+      this.isUpdateGroup = true;
+    },
+    //修改组名时获取title
+    handleChangeTitle(e) {
+      let value = e.target.value;
+      this.isactTitle = value;
+    },
+    updateGroup(node, data) {
+      //先handleChangeTitle获取title 再调用
+      setTimeout(() => {
+        if (this.isactTitle.trim() == "") {
+          this.$message.warning("名称不能为空");
+          return;
+        }
+        //修改数据组
+        this.isUpdateGroup = false;
+        const parent = node.parent;
+        const children = parent.data.nodes || parent.data;
+        const index = children.findIndex(d => d.id === data.id);
+        let temp = data;
+        temp.text = this.isactTitle;
+        children.splice(index, 1, temp);
+      }, 500);
+    },
+    cancelUpdate(node, data, e) {
+      this.$message.info("已取消");
+      this.isUpdateGroup = false;
+      //如果是插入操作 需要移除数据
+      if (this.isact.temporaryData) {
+        this.handleDelete(node, data, e);
+      }
+    },
+    // 获取数据列表
+
+    async getDataList() {
+      this.dataListLoading = true;
+      await this.$http({
+        url: this.$http.adornUrl(this.urlList.treeList),
+        method: "get"
+        // params: this.$http.adornParams({
+        //   'page': this.pageIndex,
+        //   'limit': this.pageSize,
+        //   'key': this.dataForm.key
+        // })
+      }).then(({ data }) => {
+        console.log("🚀 ~ getDataList ~ data:", data);
+        if (data && data.code === 0) {
+          this.treeDataList = data.result;
+          // this.totalPage = data.page.totalCount
+        } else {
+          this.treeDataList = [];
+          // this.totalPage = 0
+        }
+        this.dataListLoading = false;
+      });
+    },
+    // 每页数
+    sizeChangeHandle(val) {
+      this.pageSize = val;
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 当前页
+    currentChangeHandle(val) {
+      this.pageIndex = val;
+      this.getDataList();
+    },
+    // 多选
+    selectionChangeHandle(val) {
+      this.dataListSelections = val;
+    }
+    // // 新增 / 修改
+    // addOrUpdateHandle(row) {
+    //   this.addOrUpdateVisible = true;
+    //   this.$nextTick(() => {
+    //     this.$refs.addOrUpdate.init(row);
+    //   });
+    // },
+  }
+};
+</script>
+<style lang="less" scoped>
+.tree_box {
+  width: 350px !important;
+  height: 100%;
+  float: left;
+  border: 1px solid #bababa;
+  border-radius: 10px;
+  padding: 15px;
+  box-sizing: border-box;
+  // background: #fafafa;
+}
+
+.border_box {
+  height: 100px;
+  margin-bottom: 10px;
+
+  .title_box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    .button_box {
+      // width: 200px;
+      float: right;
+    }
+  }
+
+  .title {
+    width: 300px;
+    min-width: 200px;
+
+    float: left;
+    display: flex;
+    align-items: center;
+    font-weight: 600;
+    font-size: 16px;
+
+    // color: #17b3a3;
+    .line {
+      width: 4px;
+      height: 20px;
+      margin-right: 8px;
+      background: #17b3a3;
+    }
+  }
+}
+
+.border_box {
+  width: 100%;
+  float: right;
+  background: #fffefe;
+
+  border-radius: 10px;
+  padding: 15px 15px;
+  box-sizing: border-box;
+}
+
+.tree_content_box {
+  height: calc(100% - 110px) !important;
+  .shopFormBox{
+    width: auto !important;
+  }
+}
+
+.mod-config {
+  width: 100%;
+  height: 82vh;
+  overflow: hidden;
+}
+
+.el-tree-node__content {
+  .el-button {
+    display: none;
+  }
+}
+
+.el-tree-node__content:hover {
+  .el-button {
+    display: inline;
+  }
+}
+
+.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+  background-color: #eaebed;
+  color: #4796ec;
+  font-weight: bold;
+}
+
+.el-tree {
+  height: 350px;
+  overflow-y: auto !important;
+
+  .el-tree-node__content span {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+}
+
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
+
+// .el-card {
+//   background: none !important;
+// }
+p {
+  margin: 0;
+  margin-bottom: 10px;
+}
+
+.submitButtonBox {
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.submitButton {
+  float: right;
+}
+
+// .el-tree-node__content .el-button {
+//   // width: 120px !important;
+
+//   display: block !important;
+// }
+// ::v-deep .el-tree .el-tree-node__content span:nth-child(2) {
+//   width: 120px;
+//   display: flex !important;
+//   align-items: center !important;
+//   justify-content: space-between !important;
+// }
+// /deep/.el-table__row--level-1 {
+//   display: block !important;
+// }
+
+.addFormBox {
+  overflow: hidden;
+
+  .form_item {
+    width: 33%;
+    float: left;
+  }
+}
+
+.custom-tree-container {
+  height: calc(100% - 100px);
+
+  .filter-tree {
+    height: 100%;
+  }
+}
+
+.info_bg {
+  background: #e0dede;
+  height: 28px;
+  line-height: 28px;
+  padding-left: 10px;
+  // padding: 8px 5px;
+  box-sizing: border-box;
+  // margin-top: -10px;
+  border-radius: 4px;
+  font-size: 14px;
+  width: calc(100% - 120px);
+  float: left;
+}
+
+.shopFormBox {
+  min-width: auto !important;
+}
+</style>
diff --git a/src/views/modules/course/video.vue b/src/views/modules/course/video.vue
new file mode 100644
index 0000000..c0425c2
--- /dev/null
+++ b/src/views/modules/course/video.vue
@@ -0,0 +1,221 @@
+<template>
+  <view>
+    <!-- <view class="fb tc f20 linheight40">{{ videoTitle }}</view> -->
+
+    <!-- 视频形式的任务 -->
+    <view class="taskinfo">
+      <view
+        id="player-con"
+        :authId="authId"
+        :change:authId="renderScript.receiveMsg"
+      ></view>
+    </view>
+  </view>
+</template>
+
+<script>
+// importScripts('@/static/aliplayer/aliplayer-min.js')
+export default {
+  data() {
+    return {
+      videoTitle: "",
+      authId:
+        "eyJTZWN1cml0eVRva2VuIjoiQ0FJUzFBTjFxNkZ0NUIyeWZTaklyNWVFRWNudzNPZEF3N0dUY1ZiVGluTWhiZGx1bzdicXB6ejJJSHBLZVhkdUFlQVhzL28wbW1oWjcvWVlsck1xRmNjWkdoQ2NOSkF2dnNVT29GditKcExGc3QySjZyOEpqc1VDbytjdWswZXBzdlhKYXNEVkVmbDJFNVhFTWlJUi8wMGU2TC8rY2lyWXBUWEhWYlNDbFo5Z2FQa09Rd0M4ZGtBb0xkeEtKd3hrMnQxNFVtWFdPYVNDUHdMU2htUEJMVXhtdldnR2wyUnp1NHV5M3ZPZDVoZlpwMXI4eE80YXhlTDBQb1AyVjgxbExacGxlc3FwM0k0U2M3YmFnaFpVNGdscjhxbHg3c3BCNVN5Vmt0eVdHVWhKL3phTElvaXQ3TnBqZmlCMGVvUUFQb3BGcC9YNmp2QWF3UExVbTliWXhncGhCOFIrWGo3RFpZYXV4N0d6ZW9XVE84MCthS3p3TmxuVXo5bUxMZU9WaVE0L1ptOEJQdzQ0RUxoSWFGMElVRXh6RVcrRmV2TC9wZ21RUGwvK0ZKTG9pdjltamNCSHFIeno1c2VQS2xTMVJMR1U3RDBWSUpkVWJUbHpiVUJMZ3pLNUl2NWJMVmNTS3dJK1YreVBNYXgzYlFGRHI1M3ZzVGJiWHpaYjBtcHR1UG56ZHdKNFRXYnJna2VVdFB0a3BtbDlEUHd1MndOQ0o5K24zRzg5S0NnL1BlcnBGUVBjTkFVNXBYc1R6UDdrcHF2YUtLWHRjWXM4MFY0NVVndUtwQUgyS2poclprQ2ZxNk5sQnhQMmxNcTVQbzNPOGMwSWVHTWFnQUZZUjM0ZGY2aWdud3p2TTNaeUdxdWtxcmdmMXM4SHRiYnBvWldJSEhKd2t1OHJlMTg5dnlKMmdSQmRyWmJkd2NFVjhiUEZNYithWTVWTm5MOUZGSk85N0FrQitCZGk0ZktrN0VpNXdMVCs2Q29XUEZZOXZaajZJR3BIdERxY21scW1FS09FVHNlZkxnWXNzbDAzb0lzMFdvRlYzc2RPeDl3MDR2Q3Y3YlZQVFNBQSIsIkF1dGhJbmZvIjoie1wiQ0lcIjpcIkpVb25xR25CR242cU5YRjgyMzE1b25YRlRyUExoL0l3THVrSERNbEhBVEk2a0EyYmgyell1VENRa0VUVWNWZjhcIixcIkNhbGxlclwiOlwiNkxxRjRSdUk3S0Z1aDhVN3lQajBUNWZQMSs5d2FUdWNCT3Urd0ZHUEc5TT1cIixcIkV4cGlyZVRpbWVcIjpcIjIwMjQtMDQtMjNUMTA6NDU6NTJaXCIsXCJNZWRpYUlkXCI6XCI2ZjhlYzhkMDhjZDM3MWVkYmZlNDA3NjRhMGZkMDEwMlwiLFwiUGxheURvbWFpblwiOlwidmlkZW8udGFpaHVtZWQuY29tXCIsXCJTaWduYXR1cmVcIjpcIndnSExCMytZNzEvSXZJQ1lOQmdPUm8xbUhVRT1cIn0iLCJWaWRlb01ldGEiOnsiU3RhdHVzIjoiTm9ybWFsIiwiVmlkZW9JZCI6IjZmOGVjOGQwOGNkMzcxZWRiZmU0MDc2NGEwZmQwMTAyIiwiVGl0bGUiOiLnrKzkuInorrLvvJrkuInmsJTkuYvnuqoiLCJDb3ZlclVSTCI6Imh0dHBzOi8vdmlkZW8udGFpaHVtZWQuY29tLzZmOGVjOGQwOGNkMzcxZWRiZmU0MDc2NGEwZmQwMTAyL3NuYXBzaG90cy9lNTM5ZmJjNzFhNzk0ZGFkYmI3MzUyZjBhMjU5YjNmYy0wMDAwNS5qcGciLCJEdXJhdGlvbiI6Nzk4LjM3Mn0sIkFjY2Vzc0tleUlkIjoiU1RTLk5UMVpzRDE4YXRzeHNwYm5zdGFWQkxzQUUiLCJQbGF5RG9tYWluIjoidmlkZW8udGFpaHVtZWQuY29tIiwiQWNjZXNzS2V5U2VjcmV0IjoiR3NVMUhiaXZiNEpaY3ZLREppNkdQWlRjUlQyWmhqR21ONnBNUFdSQmVGOUciLCJSZWdpb24iOiJjbi1zaGFuZ2hhaSIsIkN1c3RvbWVySWQiOjE2MDQ3NDAxMzc4OTE5MDd9",
+      videoId: "6f8ec8d08cd371edbfe40764a0fd0102"
+    };
+  },
+
+  // //页面显示
+  mounted() {
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href =
+      "https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.1/skins/default/aliplayer-min.css";
+    document.head.appendChild(link);
+    const script = document.createElement("script");
+    // view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
+    script.src =
+      "https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.1/aliplayer-min.js";
+    script.onload = () => {
+      this.checkValue();
+    };
+    document.head.appendChild(script);
+    // 	// setTimeout(() => {
+    this.getLive();
+    // 	// }, 3000)
+  },
+
+  //第一次加载
+  onLoad(options) {
+    // this.videoId = options.videoId
+    // this.videoTitle = options.videoTit
+  },
+
+  methods: {
+    // 获取数据
+
+    getLive() {
+      let player = new Aliplayer(
+        {
+          // "id": "player-con",
+          // "source": "//player.alicdn.com/video/aliyunmedia.mp4",
+          // "width": "100%",
+          // "height": "500px",
+          // "autoplay": true,
+          // "isLive": false,
+          // "rePlay": false,
+          // "playsinline": true,
+          // "preload": true,
+          // "controlBarVisibility": "hover",
+          // "useH5Prism": true,
+
+          id: "player-con",
+          vid: this.videoId, // 必选参数，可以通过点播控制台（路径：媒资库>音/视频）查询。示例：1e067a2831b641db90d570b6480f****。
+          playauth: this.authId, // 必选参数，参数值可通过调用GetVideoPlayAuth接口获取。
+          encryptType: 1, // 必选参数，当播放私有加密流时需要设置本参数值为1。其它情况无需设置。
+          playConfig: {
+            EncryptType: "AliyunVoDEncryption"
+          }, // 当您输出的M3U8流中，含有其他非私有加密流时，需要指定此参数。
+          // // authTimeout: 7200, // 可选参数，播放地址的有效时长，单位：秒。该时长会覆盖在视频点播控制台设置的URL鉴权的有效时长。如果不传，则取默认值7200。如需设置此参数，请确保该时间大于视频的实际时长，防止播放地址在播放完成前过期。
+          // // "source": videoId,
+          width: "100%"
+          // // "height": "500px",
+          // "autoplay": true,
+          // "isLive": false,
+          // "cover": "",
+          // "rePlay": false,
+          // "playsinline": true,
+          // "preload": true,
+          // "controlBarVisibility": "hover",
+          // "useH5Prism": true,
+          // "skinLayout": [{
+          // 		"name": "bigPlayButton",
+          // 		"align": "blabs",
+          // 		"x": 30,
+          // 		"y": 80
+          // 	},
+          // 	{
+          // 		"name": "H5Loading",
+          // 		"align": "cc"
+          // 	},
+          // 	{
+          // 		"name": "errorDisplay",
+          // 		"align": "tlabs",
+          // 		"x": 0,
+          // 		"y": 0
+          // 	},
+          // 	{
+          // 		"name": "infoDisplay"
+          // 	},
+          // 	{
+          // 		"name": "tooltip",
+          // 		"align": "blabs",
+          // 		"x": 0,
+          // 		"y": 56
+          // 	},
+          // 	{
+          // 		"name": "thumbnail"
+          // 	},
+          // 	{
+          // 		"name": "controlBar",
+          // 		"align": "blabs",
+          // 		"x": 0,
+          // 		"y": 0,
+          // 		"children": [{
+          // 				"name": "progress",
+          // 				"align": "blabs",
+          // 				"x": 0,
+          // 				"y": 44
+          // 			},
+          // 			{
+          // 				"name": "playButton",
+          // 				"align": "tl",
+          // 				"x": 15,
+          // 				"y": 12
+          // 			},
+          // 			{
+          // 				"name": "timeDisplay",
+          // 				"align": "tl",
+          // 				"x": 10,
+          // 				"y": 7
+          // 			},
+          // 			{
+          // 				"name": "fullScreenButton",
+          // 				"align": "tr",
+          // 				"x": 10,
+          // 				"y": 12
+          // 			},
+          // 			{
+          // 				"name": "volume",
+          // 				"align": "tr",
+          // 				"x": 5,
+          // 				"y": 10
+          // 			}
+          // 		]
+          // 	}
+          // ]
+        },
+        function(player) {
+          console.log("The player is created");
+        }
+      );
+    }
+  },
+
+  created() {
+    // 创建引入阿里云播放文件
+    // function loadScriptString(src) {
+    // 	var script = document.createElement('script') //创建一个script标签
+    // 	script.type = 'text/javascript'
+    // 	script.src = src
+    // 	document.getElementsByTagName('head')[0].appendChild(script)
+    // }
+    // function loadLinkString(src) {
+    // 	var link = document.createElement('link') //创建一个link标签
+    // 	link.rel = 'stylesheet'
+    // 	link.href = src
+    // 	document.getElementsByTagName('head')[0].appendChild(link)
+    // }
+    // 使用阿里云播放器
+    // loadLinkString('https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.1/skins/default/aliplayer-min.css')
+    // loadScriptString('https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.1/aliplayer-min.js')
+  }
+};
+</script>
+
+<script>
+export default {
+  //页面显示
+  mounted() {
+    // 动态引入较大类库避免影响页面展示
+  },
+  methods: {
+    receiveMsg(newValue, oldValue, ownerVm, vm) {
+      // //数据变化
+      // console.log('newValue', newValue)
+      // console.log('oldValue', oldValue)
+      // console.log('ownerVm', ownerVm)
+      // console.log('vm', vm)
+    },
+    checkValue() {
+      console.log(this.authId, "1111");
+      if (!this.authId) {
+        setTimeout(() => {
+          this.checkValue();
+        }, 1000);
+      } else {
+        this.getLive();
+      }
+    }
+    // 阿里云播放
+  }
+};
+</script>
+
+<style scoped>
+/* @import "@/static/aliplayer/aliplayer-min.css"; */
+
+#myVideo {
+  width: 100%;
+}
+</style>
diff --git a/src/views/modules/shop/curriculum.vue b/src/views/modules/shop/curriculum.vue
new file mode 100644
index 0000000..a61bbdd
--- /dev/null
+++ b/src/views/modules/shop/curriculum.vue
@@ -0,0 +1,785 @@
+<template>
+  <el-dialog
+    :title="!dataForm.productId ? '新增' : '修改'"
+    :close-on-click-modal="false"
+    :visible.sync="visible"
+    @close="handlereset"
+    lock-scroll
+    width="750px"
+  >
+    <el-form
+      :model="dataForm"
+      :rules="dataRule"
+      ref="dataForm"
+      label-width="100px"
+    >
+      <el-form-item label="商品类型" prop="goodsType">
+        <el-select v-model="dataForm.goodsType" placeholder="请选择">
+          <el-option
+            v-for="item in goodsTypeList"
+            :key="item.dictType"
+            :label="item.dictValue"
+            :value="item.dictType"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="商品名称" prop="productName">
+        <el-input
+          v-model="dataForm.productName"
+          placeholder="商品名称"
+        ></el-input>
+      </el-form-item>
+
+      <!-- 关联的图书ids -->
+
+      <el-form-item label="商品图" prop="productImages">
+        <el-upload
+          :limit="dataForm.limitCountImg"
+          class="el-uploadfeng "
+          :class="{
+            uoloadSty: dataForm.showBtnDealImg,
+            disUoloadSty: dataForm.noneBtnImg
+          }"
+          :action="baseUrl + '/oss/fileoss'"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :file-list="fileList"
+          :on-success="handlePicSuccess"
+          accept=".jpeg,.jpg,.gif,.png"
+          :on-remove="handleRemove"
+        >
+          <i class="el-icon-plus"></i>
+        </el-upload>
+        <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
+          <img width="100%" :src="dataForm.productImages" alt="" />
+        </el-dialog>
+      </el-form-item>
+      <el-form-item label="商品轮播图" prop="productImageList">
+        <el-upload
+          :limit="5"
+          class="el-uploadfeng noneBtnImg"
+          :class="{
+            uoloadSty: dataForm.showBtnDealImg,
+            disUoloadSty: dataForm.noneBtnImg
+          }"
+          :action="baseUrl + '/oss/fileoss'"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :file-list="swiperfileList"
+          :on-success="bannerHandlePicSuccess"
+          accept=".jpeg,.jpg,.gif,.png"
+          :on-remove="bannerHandleRemove"
+        >
+          <i class="el-icon-plus"></i>
+        </el-upload>
+        <!-- <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
+            <img width="100%" :src="dataForm.productImageList" alt="">
+          </el-dialog> -->
+        <span
+          >图片尺寸：600*600px，支持图片类型：.jpeg,.jpg,.gif,.png，
+          最多上传5张图片</span
+        >
+      </el-form-item>
+      <div>
+        <el-form-item
+          label="商品价格"
+          prop="price"
+          style="width: 50%; float: left;"
+        >
+          <el-input v-model="dataForm.price" placeholder="活动价"></el-input>
+        </el-form-item>
+        <el-form-item
+          label="活动价"
+          prop="hDprice"
+          style="width: 50%; float: left;"
+        >
+          <el-input
+            v-model="dataForm.hDprice"
+            placeholder="商品价格"
+          ></el-input>
+          <span style="color: #999;">值为0或者不填，则没有活动价格</span>
+        </el-form-item>
+        <el-form-item
+          label="商品重量"
+          prop="weight"
+          style="width: 50%; float: right;"
+        >
+          <el-input
+            style="width: 80%;"
+            v-model="dataForm.weight"
+            placeholder="商品重量"
+          ></el-input
+          ><span style="display: inline-block; float: right; width: 10%;"
+            >克</span
+          >
+        </el-form-item>
+        <el-form-item
+          label="商品库存"
+          prop="productStock"
+          style="width: 50%; float: right;"
+        >
+          <el-input
+            v-model="dataForm.productStock"
+            placeholder="商品库存"
+          ></el-input>
+        </el-form-item>
+      </div>
+      <!-- <el-form-item label="上架状态" prop="publishStatus">
+          <el-input v-model="dataForm.publishStatus" placeholder="上架状态"></el-input>
+        </el-form-item> -->
+      <!-- <div>
+        <el-form-item label="出版社" prop="publisher" style="width: 50%; float: left;">
+          <el-input placeholder="出版社" v-model="dataForm.publisher"></el-input>
+        </el-form-item>
+        <el-form-item label="作者" prop="author" style="width: 50%; float: right;">
+          <el-input placeholder="作者" v-model="dataForm.author"></el-input>
+        </el-form-item>
+      </div>
+      <div>
+        <el-form-item label="出版时间" prop="pubDate" style="width: 50%; float: left;">
+          <el-date-picker @change="changeTime" format="yyyy 年 MM 月 dd 日" v-model="dataForm.pubDate" type="date"
+            placeholder="选择日期时间">
+          </el-date-picker>
+         
+        </el-form-item>
+        <el-form-item label="页数" prop="pageNum" style="width: 50%; float: right;">
+          <el-input placeholder="页数" v-model="dataForm.pageNum"></el-input>
+        </el-form-item>
+      </div>
+      <div>
+        <el-form-item label="内文用纸材质" prop="quality" style="width: 50%; float: left;">
+          <el-input v-model="dataForm.quality" placeholder="内文用纸材质"></el-input>
+        </el-form-item>
+        <el-form-item label="开本" prop="format" style="width: 50%; float: right;">
+          <el-input v-model="dataForm.format" placeholder="16开或其他规格"></el-input>
+        </el-form-item>
+      </div> -->
+      <!-- 关联的图书ids -->
+      <!-- <div style="clear: both;">
+        <el-form-item label="关联图书" prop="Books">
+          
+        </el-form-item>
+      </div> -->
+      <div style="clear: both;">
+        <el-form-item label="是否包邮" prop="isFreeMail">
+          <el-radio-group v-model="dataForm.isFreeMail">
+            <el-radio :label="0">是</el-radio>
+            <el-radio :label="1">否</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </div>
+      <el-form-item label="商品详情" prop="productDetails">
+        <el-upload
+          class="avatar-uploader"
+          :action="baseUrl + '/oss/fileoss'"
+          accept=".jpeg,.jpg,.gif,.png"
+          :show-file-list="false"
+          :on-success="contentUploadSuccess"
+        >
+        </el-upload>
+        <quill-editor
+          v-model="dataForm.productDetails"
+          ref="myQuillEditor"
+          :options="editorOption"
+          @blur="onEditorBlur($event)"
+          @focus="onEditorFocus($event)"
+          @ready="onEditorReady($event)"
+          class="shangpin_editor"
+        >
+        </quill-editor>
+      </el-form-item>
+      <!-- <el-form-item label="排序" prop="sort">
+        <el-input v-model="dataForm.sort" placeholder="排序"></el-input>
+      </el-form-item> -->
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handlereset">取消</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { quillEditor } from "vue-quill-editor";
+import global from "../../common/common.vue"; //引入共用组间
+
+import "quill/dist/quill.core.css";
+import "quill/dist/quill.snow.css";
+import "quill/dist/quill.bubble.css";
+const toolbarOptions = [
+  ["bold", "italic", "underline", "strike"], // 加粗，斜体，下划线，删除线
+  ["blockquote", "code-block"], //引用，代码块
+  [{ header: 1 }, { header: 2 }], // 几级标题
+  [{ list: "ordered" }, { list: "bullet" }], // 有序列表，无序列表
+  [{ script: "sub" }, { script: "super" }], // 下角标，上角标
+  [{ indent: "-1" }, { indent: "+1" }], // 缩进
+  [{ direction: "rtl" }], // 文字输入方向
+  [{ size: ["small", false, "large", "huge"] }], // 字体大小
+  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
+  [{ color: [] }, { background: [] }], // 颜色选择
+  [
+    {
+      font: [
+        "SimSun",
+        "SimHei",
+        "Microsoft-YaHei",
+        "KaiTi",
+        "FangSong",
+        "Arial"
+      ]
+    }
+  ], // 字体
+  [{ align: [] }], // 居中
+  ["clean"], // 清除样式,
+  ["link", "image"] // 上传图片、上传视频
+];
+
+export default {
+  data() {
+    return {
+      pointMemery: [], // 花生币操作记录
+      baseUrl: global.baseUrl,
+      goodsTypeList: [],
+      visible: false,
+      categorys: [],
+      fileList: [], // 封面图
+      swiperfileList: [],
+      dialogVisible: false,
+      props: {
+        value: "catId",
+        label: "name",
+        children: "children",
+        checkStrictly: true
+      },
+      dataForm: {
+        tags: [], // 商品标签
+        hDprice: 0, // 活动价
+        productId: 0,
+        limitCountImg: 1, // 图片数量
+        productImageList: "", // 轮播图
+        showBtnDealImg: true,
+        noneBtnImg: false,
+        productName: "",
+        productStock: null, // 商品库存
+        price: "",
+        author: "",
+        publisher: "",
+        weight: "",
+        pubDate: "",
+        // format: '', // 开本
+        isFreeMail: 1, // 是否包邮
+        // pageNum: '',
+        // quality: '', // 内文用纸
+        isNew: 0,
+        sumSales: null, // 总销量
+        publishStatus: "",
+        productPid: "",
+        productImages: "",
+        createTime: "",
+        updateTime: "",
+        delFlag: "",
+        sort: "",
+        goodsType: "", // 商品类型
+        poids: [],
+
+        Books: [] // 关联的图书
+      },
+      bookidsd: [],
+      dataRule: {
+        productName: [
+          {
+            required: true,
+            message: "商品名称不能为空",
+            trigger: "blur"
+          }
+        ],
+        price: [
+          {
+            required: true,
+            message: "商品价格不能为空",
+            trigger: "blur"
+          }
+        ],
+        weight: [
+          {
+            required: true,
+            message: "商品重量不能为空",
+            trigger: "blur"
+          }
+        ],
+        goodsType: [
+          {
+            required: true,
+            message: "商品类型不能为空",
+            trigger: "blur"
+          }
+        ],
+        poids: [
+          {
+            required: true,
+            message: "商品父id不能为空",
+            trigger: "blur"
+          }
+        ],
+        productImages: [
+          {
+            required: true,
+            message: "商品图不能为空",
+            trigger: "blur"
+          }
+        ],
+        // productDetails: [{
+        //   required: true,
+        //   message: '商品详情不能为空',
+        //   trigger: 'blur'
+        // }],
+        productStock: [
+          {
+            required: true,
+            message: "商品库存不能为空",
+            trigger: "blur"
+          }
+        ]
+        // updateTime: [
+        //   { required: true, message: '更新时间不能为空', trigger: 'blur' }
+        // ],
+        // delFlag: [
+        //   { required: true, message: '删除标记不能为空', trigger: 'blur' }
+        // ],
+        // sort: [
+        //   { required: true, message: '排序不能为空', trigger: 'blur' }
+        // ]
+      },
+      // 富文本编辑器配置
+      editorOption: {
+        modules: {
+          history: {
+            delay: 1000,
+            maxStack: 50,
+            userOnly: false
+          },
+          toolbar: {
+            container: toolbarOptions,
+            handlers: {
+              image: function(value) {
+                if (value) {
+                  // 调用element的图片上传组件
+                  document.querySelector(".avatar-uploader input").click();
+                } else {
+                  this.quill.format("image", false);
+                }
+              }
+            }
+          }
+        },
+        placeholder: "请输入正文"
+      },
+      tagList: []
+    };
+  },
+  created() {
+    this.getTreeList();
+    this.getTags();
+  },
+  methods: {
+    contentUploadSuccess(res, file) {
+      // console.log(res)
+      let quill = this.$refs.myQuillEditor.quill;
+      // 如果上传成功
+      if (res) {
+        // 获取光标所在位置
+        let length = quill.getSelection().index;
+        // 插入图片，res为服务器返回的图片链接地址
+        quill.insertEmbed(length, "image", res.url);
+        // 调整光标到最后
+        quill.setSelection(length + 1);
+      } else {
+        // 提示信息，需引入Message
+        this.$message.error("图片插入失败！");
+      }
+    },
+    handleCheckedCitiesChange(value) {
+      // console.log(value, 'value')
+    },
+    // 获取商品标签
+    getTags() {
+      this.$http({
+        url: this.$http.adornUrl("/book/label/getLabels"),
+        method: "post"
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.tagList = data.result.labels;
+          // this.totalPage = data.page.totalCount
+        } else {
+          this.tagList = [];
+          // this.totalPage = 0
+        }
+      });
+    },
+    showChooseBook() {
+      // 显示图书列表
+      this.$emit("showchooseBookf", { bookIds: this.dataForm.Books });
+      // console.log('发送指令')
+      this.$bus.$emit("showchooseBook", { bookIds: this.dataForm.Books });
+    },
+    init(id) {
+      this.dataForm.productId = id || 0;
+      this.visible = true;
+      this.getTags();
+      this.$nextTick(() => {
+        this.$refs["dataForm"].resetFields();
+        if (this.dataForm.productId) {
+          this.$http
+            .request({
+              url: this.$http.adornUrl("/master/shopProduct/getProductDetail"),
+              method: "POST",
+              data: {
+                productId: this.dataForm.productId
+              },
+              header: {
+                //默认 无 说明：请求头
+                "Content-Type": "application/json"
+              }
+            })
+
+            // this.$http({
+            //   url: this.$http.adornUrl(`/master/shopProduct/getProductDetail/${this.dataForm.productId}`),
+            //   method: 'get',
+            //   params: this.$http.adornParams()
+            // })
+
+            .then(res => {
+              console.log("result at line 452:", res);
+              if (res && res.data.code === 0) {
+                var data = res.data.detail.detail;
+                console.log("data at line 357:", data);
+                this.dataForm = {
+                  ...data,
+
+                  tags: data.labels,
+                  hDprice: data.activityPrice
+                };
+                // if (data.goodsType) {
+                //   this.dataForm.goodsType = Number(data.goodsType);
+                // }
+                this.dataForm.tags = data.labels;
+                // console.log('收到的值', this.dataForm.tags)
+
+                // this.dataForm.hDprice = data.shopProduct.activityPrice;
+                let arrArr = [];
+
+                if (data.bookidsimages !== "" && data.bookidsimages != null) {
+                  this.dataForm.Books = data.bookidsimages;
+                }
+
+                sessionStorage.setItem(
+                  "Books",
+                  JSON.stringify(this.dataForm.Books)
+                );
+
+                if (data.productImages != "" && data.productImages != null) {
+                  var img = {
+                    name: "",
+                    url: data.productImages
+                  };
+                  var attr = [];
+                  attr.push(img);
+                  this.fileList = attr;
+                }
+
+                if (
+                  data.productImageList == null ||
+                  data.productImageList[0] == "" ||
+                  data.productImageList == ""
+                ) {
+                  this.swiperfileList = [];
+                  // console.log('走这')
+                } else {
+                  // 有轮播图
+                  // console.log(data.shopProduct.productImageList)
+                  let arr = [];
+                  let arr1 = [];
+
+                  arr = data.productImageList.split(",");
+                  // console.log(arr, '处理后得轮播图数组')
+                  arr.forEach((item, index) => {
+                    arr1.push({
+                      name: index,
+                      url: item
+                    });
+                  });
+                  this.swiperfileList = arr1;
+                }
+              }
+            });
+        }
+      });
+    },
+    // 获取商品类型
+    getGoodsTypeList() {
+      this.$http({
+        url: this.$http.adornUrl("/book/sysdictdata/selectByType/goodsType"),
+        method: "get"
+      }).then(({ data }) => {
+        // console.log(data.dataList)
+        this.goodsTypeList = data.dataList;
+      });
+    },
+    // 删除图书
+    deliteBook(index) {
+      this.dataForm.Books.splice(index, 1);
+      sessionStorage.setItem("Books", JSON.stringify(this.dataForm.Books));
+    },
+    dealImgChange(file, fileList) {
+      this.dataForm.noneBtnImg = fileList.length >= this.dataForm.limitCountImg;
+    },
+    // 表单提交
+    dataFormSubmit() {
+      // this.getBookIds();
+      // console.log(this.bookidsd,'this.bookidsd')
+      //    return false
+      this.$refs["dataForm"].validate(valid => {
+        this.dataForm.productImageList = this.getStringImgUrl();
+        // var bookIDS = this.getBookIds();
+        //  console.log(this.dataForm.productImageList)
+        if (valid) {
+          if (!this.dataForm.hDprice || this.dataForm.hDprice == 0) {
+            // console.log('没有值')
+            this.dataForm.hDprice = 0;
+          }
+
+          this.$http
+            .request({
+              url: this.$http.adornUrl("/master/shopProduct/editProductDetail"),
+              method: "POST",
+              data: {
+                ...this.dataForm,
+                product_details: this.dataForm.productDetails
+              },
+              header: {
+                //默认 无 说明：请求头
+                "Content-Type": "application/json"
+              }
+            })
+
+            // this.$http({
+            //   url: this.$http.adornUrl(
+            //     `/master/shopProduct/editProductDetail/${
+            //       !this.dataForm.productId ? "save" : "update"
+            //     }`
+            //   ),
+            //   method: "post",
+            //   // data: this.$http.adornData({
+            //   //   productId: this.dataForm.productId || undefined,
+            //   //   productName: this.dataForm.productName,
+            //   //   price: this.dataForm.price,
+            //   //   weight: this.dataForm.weight,
+            //   //   publishStatus: this.dataForm.publishStatus,
+            //   //   productPid: this.dataForm.poids[this.dataForm.poids.length - 1],
+            //   //   productImages: this.dataForm.productImages,
+            //   //   productImageList: this.dataForm.productImageList,
+            //   //   createTime: this.dataForm.createTime,
+            //   //   updateTime: this.dataForm.updateTime,
+            //   //   delFlag: this.dataForm.delFlag,
+            //   //   sort: this.dataForm.sort,
+            //   //   goodsType: this.dataForm.goodsType,
+            //   //   productDetails: this.dataForm.productDetails,
+            //   //   author: this.dataForm.author,
+            //   //   publisher: this.dataForm.publisher,
+            //   //   pubDate: this.dataForm.pubDate,
+            //   //   shoproudLabels: this.dataForm.tags,
+            //   //   // 'format': this.dataForm.format, // 开本
+            //   //   isFreeMail: this.dataForm.isFreeMail,
+            //   //   isNew: this.dataForm.isNew,
+            //   //   // 'pageNum': this.dataForm.pageNum,
+            //   //   // 'quality': this.dataForm.quality, // 内文用纸
+            //   //   productStock: this.dataForm.productStock, // 库存
+            //   //   activityPrice: this.dataForm.hDprice,
+            //   //   bookids: this.bookidsd // 关联的图书[12,13,45]
+            //   //   // 'bookidsimages': this.dataForm.Books     // 关联的图书对象
+            //   // })
+            // })
+
+            .then(({ data }) => {
+              if (data && data.code === 0) {
+                this.$message({
+                  message: "操作成功",
+                  type: "success",
+                  duration: 1500,
+                  onClose: () => {
+                    this.visible = false;
+                    this.$refs["dataForm"].resetFields();
+                    // this.$refs['dataForm'].reset()
+                    this.$emit("refreshDataList");
+                  }
+                });
+              } else {
+                this.$message.error(data.msg);
+              }
+            });
+        }
+      });
+    },
+    changeTime(e) {
+      console.log(e);
+    },
+    getBookIds() {
+      // 图书ids
+      //  console.log(this.dataForm.Books,'Books')
+      this.bookidsd = this.dataForm.Books.map(item => {
+        return item.id;
+      });
+    },
+    getTreeList() {
+      this.$http({
+        url: this.$http.adornUrl(`/book/shopcategory/listTree`),
+        method: "get",
+        params: this.$http.adornParams()
+      }).then(({ data }) => {
+        this.categorys = data.data;
+      });
+    },
+    handlePictureCardPreview(file) {
+      this.dataForm.productImages = file.url;
+      this.dialogVisible = true;
+    },
+    bannerHandlePicSuccess(res, file) {
+      // 轮播图上传成功
+      if (res.msg == "success") {
+        this.swiperfileList.push({
+          name: file.name,
+          url: res.url
+        });
+        // console.log(this.swiperfileList)
+        this.$message.success("上传成功");
+      } else {
+        this.$message.error("上传失败");
+      }
+    },
+    // 字符串图片地址
+    getStringImgUrl() {
+      let arr = this.swiperfileList.map(item => item.url);
+      if (arr.length <= 0) {
+        return null;
+      } else {
+        return arr.toString();
+      }
+    },
+    handlePicSuccess(res, file) {
+      // console.log(res,'res')
+      if (res.msg == "success") {
+        this.dataForm.productImages = res.url;
+        this.fileList.push({
+          name: file.name,
+          url: res.url
+        });
+        //  console.log(this.dataForm.productImages,'productImages')
+        this.$message.success("上传成功");
+      } else {
+        this.$message.error("上传失败");
+      }
+    },
+    bannerHandleRemove(file, fileList) {
+      // 轮播图删除操作
+      this.swiperfileList = fileList;
+    },
+    handleRemove(file, fileList) {
+      this.dataForm.productImages = "";
+      this.fileList = [];
+      this.dataForm.noneBtnImg = fileList.length >= this.dataForm.limitCountImg;
+    },
+    handlereset() {
+      (this.fileList = []), (this.visible = false);
+      this.dataForm.tagList = [];
+      this.dataForm.Books = [];
+      this.swiperfileList = [];
+      this.$refs["dataForm"].resetFields();
+      sessionStorage.setItem("Books", JSON.stringify([]));
+      // this.$refs['dataForm'].reset()
+    },
+    // 失去焦点事件
+    onEditorBlur(quill) {
+      //  console.log('editor blur!', quill)
+    },
+    // 获得焦点事件
+    onEditorFocus(quill) {
+      //console.log('editor focus!', quill)
+    },
+    // 准备富文本编辑器
+    onEditorReady(quill) {
+      // console.log('editor ready!', quill)
+    }
+  },
+  components: {
+    quillEditor
+  },
+  mounted() {
+    this.$bus.$on("haveBookIds", data => {
+      sessionStorage.setItem("Books", JSON.stringify(data.bookIds));
+      //  console.log('haveBookIds',data)
+      //console.log(data.bookIds, '收到的数据')
+      var newarr = [];
+      var ids = []; //哨兵数组
+      if (data.bookIds && data.bookIds.length > 0) {
+        ids[0] = data.bookIds[0].id;
+        newarr[0] = data.bookIds[0];
+        //   console.log(ids,'ids')
+        //  newarr.push(data.bookIds[0])
+        for (let index = 0; index < data.bookIds.length; index++) {
+          if (!ids.includes(data.bookIds[index].id)) {
+            // console.log(data.bookIds[index].id, 'data.bookIds[index].id')
+            newarr.push(data.bookIds[index]);
+            ids.push(data.bookIds[index].id);
+          }
+        }
+      }
+      //  console.log(newarr,'newarr',ids)
+      data.bookIds.length > 0
+        ? (this.dataForm.Books = newarr)
+        : (this.dataForm.Books = []);
+    });
+  },
+
+  watch: {
+    visible: {
+      handler(val, oldVal) {
+        this.getGoodsTypeList();
+      },
+      deep: true
+    }
+  }
+};
+</script>
+
+<style lang="less">
+// .disUoloadSty {
+//   .el-upload--picture-card {
+//     display: none;
+//     /* 上传按钮隐藏 */
+//   }
+// }
+
+// .el-form-item {
+//   /deep/ .el-form-item__label {
+//     font-size: 12px;
+//   }
+// }
+
+.el-uploadfeng {
+  .el-upload-list__item {
+    width: 95px;
+    height: 95px;
+  }
+
+  .el-upload--picture-card {
+    width: 95px;
+    height: 95px;
+    line-height: 95px;
+  }
+}
+
+.shangpin_editor .ql-editor {
+  height: 150px;
+}
+</style>
diff --git a/src/views/modules/shop/shopproduct.vue b/src/views/modules/shop/shopproduct.vue
index e293711..aac1652 100644
--- a/src/views/modules/shop/shopproduct.vue
+++ b/src/views/modules/shop/shopproduct.vue
@@ -98,6 +98,12 @@
             @click="addOrUpdateHandle(scope.row.productId)"
             >修改</el-button
           >
+          <el-button
+            type="text"
+            size="small"
+            @click="handleEditCurriculum(scope.row.productId)"
+            >修改课程</el-button
+          >
           <el-button
             type="text"
             size="small"
@@ -130,26 +136,39 @@
       @refreshDataList="getDataList"
       @showchooseBookf="showchooseBookf"
     ></add-or-update>
-    <choose-book
-      v-if="chooseBookVisible"
-      :bookIds="bookIds"
-      ref="chooseBook"
-      :chooseBookVisible="chooseBookVisible"
-      @closeBookf="closeBookf"
-    ></choose-book>
-    <commonTags ref="commonTags" ></commonTags>
+
+
+    <curriculum
+      v-if="curriculumVisible"
+      ref="curriculum"
+      @refreshDataList="getDataList"
+      @showchooseBookf="showchooseBookf"
+    ></curriculum>
+
+
+
+    <add-or-update
+      v-if="addOrUpdateVisible"
+      ref="addOrUpdate"
+      @refreshDataList="getDataList"
+      @showchooseBookf="showchooseBookf"
+    ></add-or-update>
+    
+    <commonTags ref="commonTags"></commonTags>
   </div>
 </template>
 
 <script>
 import chooseBook from "./chooseBook.vue";
+import curriculum from "./curriculum.vue";
 import AddOrUpdate from "./shopproduct-add-or-update";
+// import AddOrUpdate from "./shopproduct-add-or-update";
 import commonTags from "./commonBookTags/commonTags.vue";
 export default {
   data() {
     return {
       dataForm: {
-        key: "",
+        key: ""
       },
       dataList: [],
       publishStatus: false,
@@ -160,19 +179,21 @@ export default {
       dataListSelections: [],
       addOrUpdateVisible: false,
       chooseBookVisible: false,
-      bookIds: [],
+      curriculumVisible: false,
+      bookIds: []
     };
   },
   components: {
+    curriculum,
     AddOrUpdate,
     chooseBook,
-    commonTags,
+    commonTags
   },
   activated() {
     this.getDataList();
   },
   methods: {
-    handleEditTags (id) {
+    handleEditTags(id) {
       this.$nextTick(() => {
         this.$refs.commonTags.open(id);
       });
@@ -198,8 +219,8 @@ export default {
         params: this.$http.adornParams({
           page: this.pageIndex,
           limit: this.pageSize,
-          key: this.dataForm.key,
-        }),
+          key: this.dataForm.key
+        })
       }).then(({ data }) => {
         if (data && data.code === 0) {
           this.dataList = data.page.list;
@@ -233,11 +254,17 @@ export default {
         this.$refs.addOrUpdate.init(id);
       });
     },
+    handleEditCurriculum(id) {
+      this.curriculumVisible = true;
+      this.$nextTick(() => {
+        this.$refs.curriculum.init(id);
+      });
+    },
     // 删除
     deleteHandle(id) {
       var ids = id
         ? [id]
-        : this.dataListSelections.map((item) => {
+        : this.dataListSelections.map(item => {
             return item.productId;
           });
       this.$confirm(
@@ -246,13 +273,13 @@ export default {
         {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
-          type: "warning",
+          type: "warning"
         }
       ).then(() => {
         this.$http({
           url: this.$http.adornUrl("/book/shopproduct/delete"),
           method: "post",
-          data: this.$http.adornData(ids, false),
+          data: this.$http.adornData(ids, false)
         }).then(({ data }) => {
           if (data && data.code === 0) {
             this.$message({
@@ -261,7 +288,7 @@ export default {
               duration: 1500,
               onClose: () => {
                 this.getDataList();
-              },
+              }
             });
           } else {
             this.$message.error(data.msg);
@@ -273,28 +300,28 @@ export default {
       /*点击时他会自动把你绑定的值变更，直接去请求数据就可以了*/
       var parms = {
         publishStatus: event.publishStatus,
-        productId: event.productId,
+        productId: event.productId
       };
       // console.log(parms)
       this.$http({
         url: this.$http.adornUrl("/book/shopproduct/update"),
         method: "post",
-        data: parms,
+        data: parms
       })
-        .then((res) => {
+        .then(res => {
           this.$message({
             message: "成功",
-            type: "success",
+            type: "success"
           });
           this.loading = false;
           this.getDataList();
         })
-        .catch((error) => {
+        .catch(error => {
           this.loading = false;
           console.log(error);
         });
       console.log(event);
-    },
-  },
+    }
+  }
 };
 </script>