广告管理

src/views/modules/appManage/advertisement-add-or-update.vue

@@ -0,0 +1,440 @@
+<template>
+  <el-dialog
+    width="700px"
+    :title="`${!dataForm.id?'新增':'修改'}广告`"
+    :close-on-click-modal="false"
+    :visible.sync="visible"
+    @close="handlereset"
+    style="height: auto;"
+  >
+    <div style="margin-bottom: 60px;">
+      <el-form
+        style="height: auto;"
+        class="addFormBox"
+        :model="dataForm"
+        :rules="dataRule"
+        ref="dataForm"
+        label-width="80px"
+      >
+        <el-form-item label="发布APP" prop="title">
+          <el-select v-model="dataForm.appType" placeholder="请选择">
+            <el-option
+              v-for="item in APPList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="广告类型" prop="type">
+          <el-radio-group v-model="dataForm.type" @input="selectType">
+            <el-radio
+              v-for="item in typeList"
+              :key="item.value"
+              :label="item.value"
+              >{{ item.label }}</el-radio
+            >
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="关联商品" prop="type" v-if="dataForm.type == 0">
+          <div>
+            <el-button type="primary" size="mini" @click="showProTable"
+              >关联商品</el-button
+            >
+          </div>
+          <div
+            v-if="JSON.stringify(bindProductData) != '{}'"
+            style="background: #f5f5f5;border-radius: 10px;padding:10px 20px;"
+          >
+            <div style="line-height: 20px;font-weight: bold;">
+              商品信息
+
+              <span
+                style="float: right;color: red;cursor: pointer;"
+                @click="clearBind"
+                >解绑</span
+              >
+            </div>
+            <div
+              style="margin-top: 10px;display: flex;align-items: center;
+            justify-content: space-between;"
+            >
+              <div style="background-color: #b0b0b0;width: 50px;height: 70px;">
+                <img
+                  v-if="
+                    JSON.stringify(bindProductData) != '{}' &&
+                      bindProductData.productImages != ''
+                  "
+                  :src="bindProductData.productImages"
+                  width="50"
+                  height="70"
+                  class="tableImg"
+                />
+                <span
+                  v-else
+                  style="text-align: center;line-height: 70px;font-size: 10px;"
+                  >暂无封面图</span
+                >
+              </div>
+              <div style="width: calc(100% - 60px);line-height: 20px;">
+                <div>
+                  <span style="font-weight: bold;">商品ID：</span>
+                  {{ bindProductData.productId }}
+                </div>
+                <div>
+                  <span style="font-weight: bold;">商品名称：</span
+                  >{{ bindProductData.productName }}
+                </div>
+                <div>
+                  <span style="font-weight: bold;">价格：</span
+                  >{{ bindProductData.price }}
+                </div>
+                <div>
+                  <span style="font-weight: bold;">活动价：</span
+                  >{{ bindProductData.activityPrice }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-form-item>
+        <el-form-item label="广告图片" prop="type">
+          <el-upload
+            :limit="1"
+            class="el-uploadfeng"
+            :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"
+            custom-class="iconBox"
+          >
+            <img width="100%" :src="dataForm.icon" alt="" />
+          </el-dialog>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handlereset">取消</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+    </span>
+    <commonShopTable
+      ref="commonShopTable"
+      currentType="courseLinkPro"
+      @submit="bindProduct"
+    ></commonShopTable>
+  </el-dialog>
+</template>
+
+<script>
+import debounce from "lodash/debounce"; //导入lodash中的debounce
+import commonShopTable from "./shopproductTable.vue";
+import global from "@/views/common/common.vue"; //引入共用组间
+export default {
+  props: ["typeList", "APPList"],
+  data() {
+    return {
+      bindProductData: {}, // 封面图
+      fileList: [], // 封面图
+      baseUrl: global.baseUrl,
+      visible: false,
+      // 富文本编辑器配置
+
+      props: {
+        dictType: "",
+        dictValue: ""
+      },
+      gushuList: [],
+
+      restaurants: [],
+      author: "",
+      publisherList: [],
+      fileList: [],
+      fileListNovel: [],
+      dialogImageUrl: "",
+      dialogVisible: false,
+      dataForm: {
+        type: 0,
+        app_type: 0
+      },
+
+      dataRule: {
+        // url: [{ required: true, message: "链接地址不能为空", trigger: "blur" }]
+      },
+      urlList: {
+        // info: "/master/message/getMessageById",
+        add: "/master/mainAd/addMainAd",
+        edit: "/master/mainAd/editMainAd",
+        productInfo: "/master/shopProduct/getProductDetail"
+      }
+    };
+  },
+  components: { commonShopTable },
+  created() {},
+  mounted() {
+    // this.restaurants = this.loadAll();
+  },
+  methods: {
+    selectType() {
+      this.bindProductData = {};
+      this.dataForm.relationId = "";
+      this.$forceUpdate();
+    },
+    clearBind() {
+      this.bindProductData = {};
+      this.dataForm.relationId = "";
+      this.$forceUpdate();
+    },
+    async bindProduct(data) {
+      console.log("data at line 186:", data);
+      this.dataForm.relationId = data.productId;
+      this.bindProductData = data;
+      // await this.getProductInfo();
+
+      this.$forceUpdate();
+    },
+    showProTable(data) {
+      console.log("data", data);
+      this.$nextTick(() => {
+        this.$refs.commonShopTable.open();
+      });
+    },
+    handleRemove(file, fileList) {
+      this.dataForm.icon = "";
+      // this.dataForm.noneBtnImg = fileList.length >= this.dataForm.limitCountImg;
+    },
+    handlePicSuccess(res, file) {
+      if (res.msg == "success") {
+        this.dataForm.icon = res;
+        this.$message.success("上传成功");
+      } else {
+        this.$message.error("上传失败");
+      }
+    },
+    changeType(e) {
+      console.log("e at line 256:", e);
+      if (e == 0) {
+        this.dataForm.content = "";
+      } else {
+        this.dataForm.url = "";
+      }
+    },
+    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("图片插入失败！");
+      }
+    },
+    // 失去焦点事件
+    onEditorBlur(quill) {
+      //  console.log('editor blur!', quill)
+    },
+    // 获得焦点事件
+    onEditorFocus(quill) {
+      //console.log('editor focus!', quill)
+    },
+    // 准备富文本编辑器
+    onEditorReady(quill) {
+      // console.log('editor ready!', quill)
+    },
+    init(row) {
+      this.dataForm = { ...row };
+      if (this.dataForm.icon) {
+        this.fileList.push({
+          name: this.dataForm.icon,
+          url: this.dataForm.icon
+        });
+      }
+      if (this.dataForm.shopProduct) {
+        this.bindProductData = { ...this.dataForm.shopProduct };
+      } else {
+        this.bindProductData = {};
+      }
+      this.$forceUpdate();
+      this.visible = true;
+      this.$nextTick(()=>{
+        this.$refs.dataForm.clearValidate();
+      })
+      
+
+    },
+
+    async getProductInfo() {
+      if (this.dataForm.relationId == "" || this.dataForm.type != 0) {
+        return false;
+      }
+
+      await this.$http({
+        url: this.$http.adornUrl(this.urlList.productInfo),
+
+        method: "POST",
+        data: {
+          productId: this.dataForm.relationId
+        },
+        header: {
+          //默认 无 说明：请求头
+          "Content-Type": "application/json"
+        }
+      }).then(({ data }) => {
+        console.log("data at line 273:", data);
+
+        this.bindProductData = data.detail.detail;
+      });
+    },
+    // 表单提交
+    dataFormSubmit: debounce(async function () {
+      this.$refs["dataForm"].validate(valid => {
+        if (valid) {
+          if (this.dataForm.appType == 0 || this.dataForm.appType) {
+            if (this.dataForm.type == 0 && this.dataForm.relationId == "") {
+              this.$message.error("请选择关联商品");
+              return;
+            }
+          } else {
+            this.$message.error("请选择发布APP");
+            return;
+          }
+          if (this.dataForm.type == 0 || this.dataForm.type) {
+          } else {
+            this.$message.error("请选择广告类型");
+            return;
+          }
+          if (!this.dataForm.icon || this.dataForm.icon == "") {
+            this.$message.error("请上传图片");
+            return;
+          }
+          console.log("this.dataForm.type at line 332:", this.dataForm);
+
+          this.$http
+            .request({
+              url: this.$http.adornUrl(
+                this.dataForm.id ? this.urlList.edit : this.urlList.add
+              ),
+              method: "POST",
+              data: this.dataForm,
+              header: {
+                //默认 无 说明：请求头
+                "Content-Type": "application/json"
+              }
+            })
+            .then(({ data }) => {
+              if (data && data.code === 0) {
+                this.$message({
+                  message: "操作成功",
+                  type: "success",
+                  duration: 1500,
+                  onClose: () => {
+                    this.visible = false;
+                    this.$emit("refreshDataList");
+                  }
+                });
+              } else {
+                this.$message.error(data.msg);
+              }
+            });
+        }
+      });
+    },200),
+    handlePicSuccess(res, file) {
+      // console.log(res,'res')
+      if (res.msg == "success") {
+        this.dataForm.icon = res.url;
+        this.fileList.push({
+          name: file.name,
+          url: res.url
+        });
+        //  console.log(this.dataForm.image,'image')
+        this.$message.success("上传成功");
+      } else {
+        this.$message.error("上传失败");
+      }
+    },
+    handleRemove(file, fileList) {
+      this.dataForm.icon = "";
+      this.fileList = [];
+      this.dataForm.noneBtnImg = fileList.length >= this.dataForm.limitCountImg;
+    },
+    handlePictureCardPreview(file) {
+      this.dataForm.icon = file.url;
+      this.dialogVisible = true;
+    },
+    handleDownload(file) {
+      console.log(file);
+    },
+    handlereset() {
+      (this.fileList = []), (this.fileListNovel = []), (this.visible = false);
+    },
+    handlePreview(file) {
+      console.log(file);
+    },
+    handleExceed(files, fileList) {
+      this.$message.warning(
+        `当前限制选择 3 个文件，本次选择了 ${
+          files.length
+        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
+      );
+    },
+    beforeRemove(file, fileList) {
+      return this.$confirm(`确定移除 ${file.name}？`);
+    },
+    handleRemoveNovel(file) {
+      this.dataForm.novel = "";
+    },
+    handleNovelSuccess(file) {
+      this.dataForm.novel = file.url;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.el-uploadfeng {
+  /deep/ .el-upload-list__item {
+    width: 120px;
+    height: 120px;
+    .el-upload-list__item-thumbnail {
+      object-fit: cover !important;
+    }
+  }
+
+  /deep/ .el-upload--picture-card {
+    width: 100px;
+    height: 100px;
+    line-height: 110px;
+  }
+}
+
+/deep/ .addFormBox.el-form-item {
+  margin-bottom: 10px !important;
+}
+
+/deep/ .ql-container {
+  min-height: 400px !important ;
+}
+/deep/ .el-radio {
+  margin-right: 0 !important;
+}
+/deep/ .iconBox {
+  background: transparent !important;
+}
+</style>

src/views/modules/appManage/advertisement.vue

@@ -0,0 +1,386 @@
+<template>
+  <div class="mod-config" style="height: calc(100vh - 180px );">
+   <el-button type="primary" size="small" @click="addOrUpdateHandle()" style="margin-bottom: 20px;float: right;"
+        >新增广告</el-button
+      >
+    <div style="height: calc(100% - 40px );">
+      <el-table
+        :data="dataList"
+        border
+        height="90%"
+        v-loading="dataListLoading"
+        style="width: 100%;"
+      >
+        <el-table-column
+          prop="title"
+          header-align="center"
+          align="center"
+          label="APP"
+          width="200"
+        >
+          <template slot-scope="scope">
+            <div>
+              <span v-if="scope.row.appType == 0">疯子读书</span>
+              <span v-if="scope.row.appType == 1">吴门医述</span>
+              <span v-if="scope.row.appType == 2">众妙之门</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="title"
+          header-align="center"
+          align="center"
+          label="广告类型"
+        >
+          <template slot-scope="scope">
+            <div>
+              <span v-if="scope.row.type == 0">商品</span>
+              <span v-if="scope.row.type == 1">充值</span>
+              <span v-if="scope.row.type == 2">VIP</span>
+              <span v-if="scope.row.type == 3">活动</span>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          prop="title"
+          header-align="center"
+          align="center"
+          label="广告图片"
+        >
+          <template slot-scope="scope">
+            <img
+              v-if="scope.row.icon != ''"
+              :src="scope.row.icon"
+              alt=""
+              style="width: 50px; height: 70px;"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column
+        min-width="200"
+          prop="title"
+          header-align="center"
+          align="left"
+          label="关联信息"
+        >
+          <template slot-scope="scope">
+            <div v-if="scope.row.type == 0">
+              <div
+                v-if="JSON.stringify(scope.row.shopProduct) != '{}'&&scope.row.shopProduct"
+                style=""
+              >
+               
+                <div
+                  style="display: flex;align-items: center;
+            justify-content: space-between;"
+                >
+                  <div
+                    style="background-color: #b0b0b0;width: 40px;height: 60px;"
+                  >
+                    <img
+                      v-if="
+                       scope.row.shopProduct&& JSON.stringify(scope.row.shopProduct) != '{}' &&
+                          scope.row.shopProduct.productImages != ''
+                      "
+                      :src="scope.row.shopProduct.productImages"
+                      width="40"
+                      height="60"
+                      class="tableImg"
+                    />
+                    <span
+                      v-else
+                      style="text-align: center;line-height: 70px;font-size: 10px;"
+                      >暂无封面图</span
+                    >
+                  </div>
+                  <div style="width: calc(100% - 60px);line-height: 20px;">
+                    <div>
+                      <span style="font-weight: bold;">商品ID：</span>
+                      {{ scope.row.shopProduct.productId }}
+                    </div>
+                    <div>
+                      <span style="font-weight: bold;">商品名称：</span
+                      >{{ scope.row.shopProduct.productName }}
+                    </div>
+                    <div>
+                      <span style="font-weight: bold;">价格：</span
+                      >{{ scope.row.shopProduct.price }} <span style="font-weight: bold;margin-left: 20px;">活动价：</span
+                      >{{ scope.row.shopProduct.activityPrice }}
+                    </div>
+                   
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          width="160"
+          prop="createTime"
+          header-align="center"
+          align="center"
+          label="创建日期"
+        >
+        </el-table-column>
+
+        <el-table-column
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="140"
+          label="操作"
+        >
+          <template slot-scope="scope">
+            <div>
+              <el-button
+                type="text"
+                size="small"
+                @click="addOrUpdateHandle(scope.row)"
+                >修改</el-button
+              >
+              <el-button
+                type="text"
+                size="small"
+                style="color: red;"
+                @click="deleteHandle(scope.row.id)"
+                >删除</el-button
+              >
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <!-- 弹窗, 新增 / 修改 -->
+    <add-or-update
+      v-if="addOrUpdateVisible"
+      ref="addOrUpdate"
+      :APPList="APPList"
+      :typeList="typeList"
+      @refreshDataList="getDataList"
+    ></add-or-update>
+  </div>
+</template>
+
+<script>
+import AddOrUpdate from "./advertisement-add-or-update";
+export default {
+  data() {
+    return {
+      typeList: [
+        { label: "商品", value: 0 },
+        { label: "充值", value: 1 },
+        { label: "VIP", value: 2 },
+        { label: "活动", value: 3 }
+      ],
+      selectQueryApp: null,
+      APPList: [
+        { label: "疯子读书", value: 0 },
+        { label: "吴门医述", value: 1 },
+        { label: "众妙之门", value: 2 }
+      ],
+      dataForm: {
+        key: ""
+      },
+      query: {
+        type: "",
+        title: ""
+      },
+      dataList: [],
+      delFlag: false,
+      pageIndex: 1,
+      pageSize: 10,
+      totalPage: 0,
+      dataListLoading: false,
+      dataListSelections: [],
+      addOrUpdateVisible: false,
+      urlList: {
+        list: "/master/mainAd/getMainAdList"
+      }
+    };
+  },
+  components: {
+    AddOrUpdate
+  },
+  activated() {
+    if (this.$route.query.upPageInde != null) {
+      this.pageIndex = this.$route.query.upPageIndex;
+      console.log(this.pageIndex);
+    }
+    this.getDataList();
+  },
+  methods: {
+    // 获取数据列表
+    getDataList() {
+      console.log("this.selectQueryApp at line 195:", this.selectQueryApp);
+      this.dataListLoading = true;
+      this.$http
+        .request({
+          url: this.$http.adornUrl(this.urlList.list),
+          method: "POST",
+          data: {},
+          header: {
+            //默认 无 说明：请求头
+            "Content-Type": "application/json"
+          }
+        })
+        .then(({ data }) => {
+          if (data && data.code === 0) {
+            this.dataList = data.list;
+            console.log('this.dataList at line 230:', this.dataList)
+            // this.totalPage = data.result.total;
+          } else {
+            this.dataList = [];
+            // 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) {
+    console.log('row at line 258:', row)
+      this.addOrUpdateVisible = true;
+      this.$nextTick(() => {
+
+        this.$refs.addOrUpdate.init({
+         ...row
+        });
+    });     
+    },
+    // 删除
+    deleteHandle(id) {
+      this.$confirm(
+        `确定对[id=${id}]进行[${id ? "删除" : "删除"}]操作?`,
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }
+      ).then(() => {
+        this.$http({
+          url: this.$http.adornUrl("/master/mainAd/delMainAd"),
+          method: "POST",
+          data: {
+            id: id
+          }
+        }).then(({ data }) => {
+          if (data && data.code === 0) {
+            this.$message({
+              message: "操作成功",
+              type: "success",
+              
+             
+            });
+
+            this.$nextTick(() => {
+              this.getDataList();
+            });
+          } else {
+            this.$message.error(data.msg);
+          }
+        });
+      });
+    },
+    // 开关变化
+    SwitchChange(event) {
+      /*点击时他会自动把你绑定的值变更，直接去请求数据就可以了*/
+      var parms = {
+        delFlag: event.delFlag,
+        id: event.id
+      };
+      this.$http({
+        url: this.$http.adornUrl("/book/book/update"),
+        method: "post",
+        data: parms
+      })
+        .then(res => {
+          this.$message({
+            message: "成功",
+            type: "success"
+          });
+          this.loading = false;
+          this.getDataList();
+        })
+        .catch(error => {
+          this.loading = false;
+          console.log(error);
+        });
+      console.log(event);
+    },
+    chapterHandle(id, row) {
+      if (row.novel == "") {
+        this.$alert("请上传电子书文件后在进行此操作", "提示", {
+          confirmButtonText: "好的"
+        });
+        return false;
+      }
+      this.$http({
+        url: this.$http.adornUrl("/book/book/getChapter"),
+        method: "get",
+        params: this.$http.adornParams({
+          id: id
+        })
+      }).then(res => {
+        this.$message({
+          message: "成功",
+          type: "success"
+        });
+        this.loading = false;
+        this.getDataList();
+      });
+    },
+    contentHandle(id) {
+      this.$http({
+        url: this.$http.adornUrl("/book/bookchaptercontent/getBookVoices"),
+        method: "get",
+        params: this.$http.adornParams({
+          id: id
+        })
+      }).then(res => {
+        this.$message({
+          message: "成功",
+          type: "success"
+        });
+        this.loading = false;
+        this.getDataList();
+      });
+    },
+    voicesHandle(id) {
+      //allVoices
+      this.$http({
+        // url: this.$http.adornUrl('/book/bookchaptercontent/allVoices'),
+        url: this.$http.adornUrl("/book/bookchaptercontent/AllVOices"),
+        method: "get",
+        params: this.$http.adornParams({
+          id: id
+        })
+      }).then(res => {
+        console.log("book/bookchaptercontent/AllVOices");
+        this.$message({
+          message: "成功",
+          type: "success"
+        });
+        this.loading = false;
+        this.getDataList();
+      });
+    }
+  }
+};
+</script>

src/views/modules/appManage/shopproductTable.vue

@@ -0,0 +1,350 @@
+<template>
+  <div>
+    <el-drawer title="新增关联商品" :append-to-body="true" v-show="drawer" :wrapperClosable="false" :visible.sync="drawer" destroy-on-close
+      direction="rtl" size="70%">
+      
+      <div class="shop_drawer_box demo-drawer__content">
+        <div class="addFormBox">
+          <el-form ref="addForm" label-width="80px" :model="dataForm">
+            <el-form-item label="商品名称" prop="productName" class="form_item">
+              <el-input size="small" placeholder="请输入商品名称" style="width: 100%" v-model="dataForm.productName" 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> -->
+
+            <el-form-item label="" class="form_item" label-width="20px" style="width: 160px !important">
+              <el-button type="primary" plain @click="
+      pageIndex = 1;
+    getDataList(bookMarketId);
+    " size="small">查询</el-button>
+              <el-button @click="handleReset()" size="small" plain>重置</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+
+        <el-table ref="table" height="80%" :data="dataList" :row-key="getRowKeys" border size="mini" highlight-current-row
+          v-loading="dataListLoading" @selection-change="handleSelectionChange" @current-change="handleCurrentChange" style="width: 100%">
+          <!-- <el-table-column :reserve-selection="true" type="selection" header-align="center" align="center" width="50">
+          </el-table-column> -->
+
+        
+          <el-table-column label="商品ID" width="70" align="center" prop="productId">
+            
+          </el-table-column>
+          <el-table-column prop="productName" header-align="center" align="center" label="商品名称">
+          </el-table-column>
+          
+          <el-table-column prop="price" width="120" header-align="center" align="center" sortable label="商品价格">
+          </el-table-column>
+          <el-table-column prop="activityPrice" width="120" header-align="center" align="center" sortable label="活动价">
+          </el-table-column>
+
+          
+          <el-table-column header-align="center" align="center" label="商品图" width="120">
+            <template slot-scope="scope">
+              <img v-if="scope.row.productImages != ''" :src="scope.row.productImages" width="25" height="35"
+                class="tableImg" />
+            </template>
+          </el-table-column>
+          <el-table-column
+            header-align="center"
+            align="center"
+            label="操作"
+            width="80"
+          >
+            <template slot-scope="scope">
+              <el-button
+                type="text"
+                @click="handleCurrentChange(scope.row)"
+                size="mini"
+                >绑定</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
+          :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
+          layout="total, sizes, prev, pager, next, jumper">
+        </el-pagination>
+
+        <div class="demo-drawer__footer">
+         
+        </div>
+    
+      </div>
+    </el-drawer>
+
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: ["currentType", "currentId"],
+  data() {
+    return {
+      timer: null,
+      drawer: false,
+      loading: false,
+      multipleSelectionAll: [], // 所有选中的数据包含跨页数据
+      multipleSelection: [], // 当前页选中的数据
+      idKey: "productId", // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下)
+      dataForm: {
+        productName: "",
+        goodsType: "",
+      },
+      currentRow:null,
+      bookMarketId: null,
+      dataList: [],
+      publishStatus: false,
+      pageIndex: 1,
+      pageSize: 10,
+      totalPage: 0,
+      dataListLoading: false,
+      dataListSelections: [],
+      addOrUpdateVisible: false,
+      chooseBookVisible: false,
+      bookIds: [],
+      goodsTypeList: [],
+    };
+  },
+  components: {
+    // AddOrUpdate,
+    // chooseBook
+  },
+  activated() {
+    this.getDataList();
+  },
+  methods: {
+    handleReset() {
+      this.dataForm = {  productName: "",
+        goodsType: "",};
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    submit() {
+      var ids = this.multipleSelection.map((e) => e.id).toString(",");
+      this.$emit("submit", ids);
+      console.log(
+        "🚀 ~ submit ~ this.multipleSelection:",
+        this.multipleSelection
+      );
+    },
+
+    // 获取商品类型
+    getGoodsTypeList() {
+      this.$http({
+        url: this.$http.adornUrl("/book/sysdictdata/selectByType/goodsType"),
+        method: "get",
+      }).then(({ data }) => {
+        // console.log(data.dataList)
+        this.goodsTypeList = data.dataList;
+      });
+    },
+    handleClose(done) {
+      done();
+      // this.$confirm("确认关闭？")
+      //   .then((_) => {
+      //     done();
+      //   })
+      //   .catch((_) => {});
+    },
+    async open() {
+      this.drawer = true;
+      this.dataForm = {  productName: "",
+        goodsType: "",};
+      this.pageIndex = 1;
+      // await this.getGoodsTypeList();
+      await this.getDataList();
+    },
+    close() {
+      this.drawer = false;
+    },
+    getRowKeys(row) {
+      return row.productId;
+    },
+    
+    handleCurrentChange(val) {
+      console.log("🚀 ~ handleSelectionChange ~ val:", val);
+      
+           this.$emit("submit", val);
+   
+   this.drawer = false;
+      // table组件选中事件,记得加上@selection-change="handleSelectionChange"
+      // this.multipleSelection = val;
+      // this.changePageCoreRecordData();
+    },
+    
+    handleSelectionChange(val) {
+      console.log("🚀 ~ handleSelectionChange ~ val:", val);
+      // table组件选中事件,记得加上@selection-change="handleSelectionChange"
+      this.multipleSelection = val;
+      // this.changePageCoreRecordData();
+    },
+
+    closeBookf() {
+      this.chooseBookVisible = false;
+    },
+    showchooseBookf(e) {
+      // 显示图书列表
+      this.chooseBookVisible = true;
+    
+    },
+    // 获取数据列表
+    async getDataList() {
+      var form = {
+        ...this.dataForm,
+        current: this.pageIndex,
+        limit: this.pageSize,
+
+        // productId: "",
+      };
+     
+      form.id = this.currentId;
+     
+      this.dataListLoading = true;
+      this.clear();
+
+      await this.$http({
+        url: this.$http.adornUrl(`/master/shopProduct/listByPage`),
+        method: "post",
+        data: this.$http.adornData(form),
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.dataList = data.result.records;
+          this.totalPage = data.result.total;
+        } else {
+          this.dataList = [];
+          this.totalPage = 0;
+        }
+        // setTimeout(async () => {
+        //   await this.setSelectRow();
+        // }, 200);
+        this.dataListLoading = false;
+      });
+    },
+    // 获取数据列表
+  
+    clear() {
+      // this.$refs.table.clearSelection();
+      this.multipleSelection = [];
+    },
+
+    // 每页数
+    sizeChangeHandle(val) {
+      // this.changePageCoreRecordData();
+      this.pageSize = val;
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 当前页
+    currentChangeHandle(val) {
+      // 改变页的时候调用一次
+      // this.changePageCoreRecordData();
+      this.pageIndex = val;
+      this.getDataList();
+    },
+    // 多选
+    selectionChangeHandle(val) {
+      this.dataListSelections = val;
+    },
+    // 新增 / 修改
+    addOrUpdateHandle(id) {
+      this.addOrUpdateVisible = true;
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id);
+      });
+    },
+    // 删除
+    deleteHandle(id) {
+      var ids = id
+        ? [id]
+        : this.dataListSelections.map((item) => {
+          return item.productId;
+        });
+      this.$confirm(
+        `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      ).then(() => {
+        this.$http({
+          url: this.$http.adornUrl("/book/shopproduct/delete"),
+          method: "post",
+          data: this.$http.adornData(ids, false),
+        }).then(({ data }) => {
+          if (data && data.code === 0) {
+            this.$message({
+              message: "操作成功",
+              type: "success",
+              duration: 1500,
+              onClose: () => {
+                this.getDataList();
+              },
+            });
+          } else {
+            this.$message.error(data.msg);
+          }
+        });
+      });
+    },
+    SwitchChange(event) {
+      /*点击时他会自动把你绑定的值变更，直接去请求数据就可以了*/
+      var parms = {
+        publishStatus: event.publishStatus,
+        productId: event.productId,
+      };
+      // console.log(parms)
+      this.$http({
+        url: this.$http.adornUrl("/book/shopproduct/update"),
+        method: "post",
+        data: parms,
+      })
+        .then((res) => {
+          this.$message({
+            message: "成功",
+            type: "success",
+          });
+          this.loading = false;
+          this.getDataList();
+        })
+        .catch((error) => {
+          this.loading = false;
+          console.log(error);
+        });
+      console.log(event);
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.shop_drawer_box {
+  padding: 20px !important;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+}
+
+.addFormBox {
+  width: 100%;
+
+  // overflow: hidden;
+  .form_item {
+    width: 33%;
+    float: left;
+  }
+}
+
+::v-deep.el-drawer__header {
+  margin-bottom: 10px !important;
+}
+</style>

src/views/modules/book/book.vue

@@ -20,7 +20,7 @@
     <el-table :data="dataList" border v-loading="dataListLoading"
       style="width: 100%;">
 
-      <el-table-column min-width="155px
+      <el-table-column width="155px
       " prop="state" header-align="center" align="center" label="状态">
         <template slot-scope="scope">
           <el-switch :active-value=1 :inactive-value=0 style="display: block" v-model="scope.row.state"
@@ -31,11 +31,11 @@
       </el-table-column>
       <el-table-column prop="name" header-align="center" align="center" label="书名">
       </el-table-column>
-      <el-table-column prop="authorName" header-align="center" align="center" label="作者姓名">
+      <el-table-column prop="authorName" header-align="center" align="center" label="作者姓名" width="120">
       </el-table-column>
-      <el-table-column header-align="center" align="center" label="插图">
+      <el-table-column header-align="center" align="center" label="插图" width="100">
         <template slot-scope="scope">
-          <img v-if="scope.row.images != ''" :src="scope.row.images" width="70" height="100" class="tableImg" />
+          <img v-if="scope.row.images != ''" :src="scope.row.images" width="50" height="80" class="tableImg" />
         </template>
       </el-table-column>
       <!-- <el-table-column prop="description" header-align="center" align="center" :show-overflow-tooltip="true" label="简介">
@@ -64,15 +64,20 @@
       </el-table-column> -->
       <!-- <el-table-column prop="publisherName" header-align="center" align="center" label="出版商名称">
       </el-table-column> -->
-      <el-table-column prop="chapterStatus" header-align="center" align="center" label="章节拆分">
+      <el-table-column prop="chapterStatus" header-align="center" align="center" label="章节拆分" width="160">
         <template slot-scope="scope">
-            <span v-if="scope.row.chapterStatus == '成功'" style="color:blue">{{scope.row.chapterStatus}}</span>
+          <p style="margin: 0;"> <span v-if="scope.row.chapterStatus == '成功'" style="color:blue">{{scope.row.chapterStatus}}</span>
             <span v-if="scope.row.chapterStatus == '失败'" style="color: red">{{scope.row.chapterStatus}}</span>
             <span v-if="scope.row.chapterStatus == '处理中'">{{scope.row.chapterStatus}}</span>
-            <span v-if="scope.row.chapterStatus == '未处理'">{{scope.row.chapterStatus}}</span>
-        </template>
+            <span v-if="scope.row.chapterStatus == '未处理'" style="color:#b0b0b0">未拆分</span></p>
+           
+            <el-button v-if="scope.row.chapterStatus == '未处理' || scope.row.chapterStatus == '失败'" type="text"  @click="chapterHandle(scope.row.id,scope.row)" size="mini">章节拆分 <i class="el-icon-thumb" style="font-size: 16px;"></i></el-button>
+            <el-button v-if="scope.row.chapterStatus == '成功' " type="text"  @click="chapterHandle(scope.row.id,scope.row)" size="mini" style="color:blue">重新拆分 <i class="el-icon-thumb" style="font-size: 16px;"></i></el-button>
+         
+              </template>
+
       </el-table-column>
-      <el-table-column prop="contentStatus" header-align="center" align="center" label="单句拆分">
+      <!-- <el-table-column prop="contentStatus" header-align="center" align="center" label="单句拆分">
           <template slot-scope="scope">
             <span v-if="scope.row.contentStatus == '成功'" style="color:blue">{{scope.row.contentStatus}}</span>
             <span v-if="scope.row.contentStatus == '失败'" style="color: red">{{scope.row.contentStatus}}</span>
@@ -87,7 +92,7 @@
             <span v-if="scope.row.voicesStatus == '处理中'">{{scope.row.voicesStatus}}</span>
             <span v-if="scope.row.voicesStatus == '未处理'">{{scope.row.voicesStatus}}</span>
         </template>
-      </el-table-column>
+      </el-table-column> -->
       <!-- <el-table-column
         prop="pid"
         header-align="center"
@@ -100,10 +105,16 @@
         align="center"
         label="层级">
       </el-table-column> -->
-      <el-table-column prop="createTime" header-align="center" align="center" label="创建日期">
-      </el-table-column>
-      <el-table-column prop="updateTime" header-align="center" align="center" label="更新日期">
+      <el-table-column prop="createTime" header-align="center" align="center" label="日期" width="200" >
+
+        <template slot-scope="scope">
+          <p style="font-size: 12px;margin: 0;"> 创建日期：   {{ scope.row.createTime }}</p>
+          <p style="font-size: 12px;margin: 0;"> 更新日期：   {{ scope.row.updateTime }}</p>
+      
+       
+        </template>
       </el-table-column>
+   
       <!-- <el-table-column
         prop="sort"
         header-align="center"
@@ -116,11 +127,15 @@
         align="center"
         label="删除标记">
       </el-table-column> -->
-      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
+      <el-table-column fixed="right" header-align="center" align="center" width="200" label="操作">
         <template slot-scope="scope">
-        <el-dropdown style="border: 1px solid #17B3A3;    border-radius: 5px;    padding: 4px;">
-        <span class="el-dropdown-link" style="color:#17B3A3">
-          操作管理<i class="el-icon-arrow-down el-icon--right"></i>
+           <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
+         
+          <el-button type="text" size="small" @click="deleteHandle(scope.row.id)" style="color: red;">删除</el-button>
+      
+        <el-dropdown style="border: 1px solid #17B3A3;border-radius: 5px;padding: 4px;font-size: 12px;"  size="mini">
+        <span class="el-dropdown-link" style="color:#17B3A3" >
+          更多操作<i class="el-icon-arrow-down el-icon--right"></i>
         </span>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item>
@@ -150,13 +165,13 @@
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
-          <!-- <el-button v-if="scope.row.chapterStatus == '未处理' || scope.row.chapterStatus == '失败'" type="text" size="small" @click="chapterHandle(scope.row.id,scope.row)">章节拆分</el-button> -->
-          <!-- <el-button v-if="scope.row.chapterStatus == '成功' && (scope.row.contentStatus == '未处理' || scope.row.contentStatus == '失败') " type="text" size="small" @click="contentHandle(scope.row.id)">单句拆分</el-button> -->
-          <!-- <el-button v-if="scope.row.contentStatus == '成功' && (scope.row.voicesStatus == '未处理' || scope.row.voicesStatus == '失败') " type="text" size="small" @click="voicesHandle(scope.row.id)">音频处理</el-button> -->
-         <div>
-          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
-          <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
-        </div>
+              <!-- <el-button v-if="scope.row.chapterStatus == '成功' && (scope.row.contentStatus == '未处理' || scope.row.contentStatus == '失败') " type="text" size="small" @click="contentHandle(scope.row.id)">单句拆分</el-button>
+          <el-button v-if="scope.row.contentStatus == '成功' && (scope.row.voicesStatus == '未处理' || scope.row.voicesStatus == '失败') " type="text" size="small" @click="voicesHandle(scope.row.id)">音频处理</el-button>
+          -->
+         
+       
+        
+      
         </template>
       </el-table-column>
     </el-table>

src/views/modules/book/bookchapter.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="mod-config">
+    
     <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
       <el-form-item>
         <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
@@ -12,6 +13,8 @@
           <el-button type="primary">返回上一级</el-button>
         </router-link> -->
       </el-form-item>
+      <div style="float: right;">书籍：{{ bookInfo.name }}</div>
+      
     </el-form>
     <el-table
       :data="dataList"
@@ -98,7 +101,7 @@
               <el-button type="text" size="small">章节详情</el-button>
           </router-link>
           <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
-          <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
+          <el-button type="text" size="small" @click="deleteHandle(scope.row.id)" style="color: red;">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -132,7 +135,8 @@
         totalPage: 0,
         dataListLoading: false,
         dataListSelections: [],
-        addOrUpdateVisible: false
+        addOrUpdateVisible: false,
+        bookInfo:{},
       }
     },
     components: {
@@ -147,6 +151,7 @@
       this.upPageIndex = this.$route.query.pageIndex;
       console.log(this.bookid)
       this.getDataList()
+      this.getInfo()
     },
     methods: {
       // 获取数据列表
@@ -172,6 +177,19 @@
           this.dataListLoading = false
         })
       },
+      // 获取数据列表
+      getInfo () {
+        
+        this.$http({
+          url: this.$http.adornUrl(`/book/book/info/${this.$route.query.id}`),
+          method: 'post',
+         
+        }).then(({data}) => {
+        	console.log('data at line 182:', data)
+          this.bookInfo=data.book
+         
+        })
+      },
       // 每页数
       sizeChangeHandle (val) {
         this.pageSize = val