From c53de0c857a7e9d94d744de72f7c56b87338516b Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Wed, 3 Jan 2024 19:41:35 +0800
Subject: [PATCH] fix

---
 .../miniProgramMg/index/banner/add/index.vue  | 351 ++++++++++++++++++
 .../miniProgramMg/index/banner/list/index.vue | 165 ++++++++
 .../index/{ => hot}/add/index.vue             |  46 +--
 .../index/{ => hot}/list/index.vue            |  38 +-
 src/pages/miniProgramMg/index/inlet/index.vue |   2 +-
 src/router/modules/miniProgramMg.js           |  20 +-
 6 files changed, 588 insertions(+), 34 deletions(-)
 create mode 100644 src/pages/miniProgramMg/index/banner/add/index.vue
 create mode 100644 src/pages/miniProgramMg/index/banner/list/index.vue
 rename src/pages/miniProgramMg/index/{ => hot}/add/index.vue (93%)
 rename src/pages/miniProgramMg/index/{ => hot}/list/index.vue (88%)

diff --git a/src/pages/miniProgramMg/index/banner/add/index.vue b/src/pages/miniProgramMg/index/banner/add/index.vue
new file mode 100644
index 0000000..82f125f
--- /dev/null
+++ b/src/pages/miniProgramMg/index/banner/add/index.vue
@@ -0,0 +1,351 @@
+<template>
+  <div>
+    <el-form label-width="170px"
+             label-suffix=":"
+             class="input-form model"
+             size="small">
+      <el-form-item class="req"
+                    label="图片">
+        <el-upload class="avatar-uploader"
+                   accept=".jpg,.png,.jpeg,.gif"
+                   :limit="1"
+                   :on-exceed="handleExceed"
+                   :before-remove="beforeRemove"
+                   :on-remove="handleRemove"
+                   :on-error="uploadError"
+                   action=""
+                   :http-request="handleRequest">
+          <img v-if="form.coverUrl"
+               :src="form.coverUrl"
+               class="avatar">
+          <div class="uploader-default"
+               v-else>
+            <i class="el-icon-plus"></i>
+            <p>上传图片</p>
+          </div>
+        </el-upload>
+      </el-form-item>
+      <el-form-item class="req"
+                    label="标题">
+        <el-input id="firstInput"
+                  placeholder="请输入标题"
+                  v-model="form.productName"
+                  maxlength="40"
+                  clearable></el-input>
+      </el-form-item>
+      <el-form-item class="req"
+                    label="链接类型">
+        <el-radio-group v-model="form.link">
+          <el-radio label="1">小程序内链接</el-radio>
+          <el-radio label="2">外链接</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item v-if="form.link === '1'"
+                    class="req"
+                    label="链接内容">
+        <el-select style="width: 150px"
+                   v-model="form.selectLinkId"
+                   clearable
+                   @change="getDetails"
+                   @clear="clearDetails">
+          <el-option v-for="item in linkContents"
+                     :key="item.id"
+                     :label="item.name"
+                     :value="item.id">
+          </el-option>
+        </el-select>
+        <el-select class="m-l-20"
+                   v-model="form.correspondingLinkId"
+                   clearable
+                   filterable>
+          <el-option v-for="item in linkDetails"
+                     :key="item.id"
+                     :label="item.name"
+                     :value="item.id">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item v-else
+                    class="req"
+                    label="跳转链接">
+        <el-input style="width: 400px"
+                  placeholder="请输入跳转链接"
+                  v-model="form.jumpLink"
+                  clearable></el-input>
+      </el-form-item>
+    </el-form>
+
+    <div class="btns">
+      <el-button @click="save(0)">保存</el-button>
+      <el-button type="primary"
+                 @click="save(1)">发布</el-button>
+      <el-button @click="$router.back()">取消</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import Util from "@/libs/util";
+import Upload from '@/components/upload';
+import Oss from '@/components/upload/upload.js'
+export default {
+  props: ['id'],
+  data () {
+    return {
+      originForm: {},
+      form: {
+        correspondingLinkId: '',
+        coverUrl: '',
+        details: '1',
+        description: '',
+        jumpLink: '',
+        link: '1',
+        productName: '',
+        selectLinkId: '2',
+        type: 1,
+      },
+      linkContents: [
+        {
+          id: '2',
+          name: '活动'
+        },
+        {
+          id: '1',
+          name: '商品'
+        },
+        {
+          id: '3',
+          name: '供应商'
+        },
+        {
+          id: '4',
+          name: '店铺'
+        },
+      ],
+      linkDetails: [],
+      submiting: false,
+      updateTime: 0,
+    };
+  },
+  watch: {
+    id: {
+      handler () {
+        if (this.id) {
+          this.getData()
+        } else {
+          this.pics = []
+          this.form = JSON.parse(JSON.stringify(this.originForm))
+          this.getDetails()
+        }
+      },
+    }
+  },
+  components: {
+    Upload
+  },
+  mounted () {
+    this.originForm = JSON.parse(JSON.stringify(this.form))
+    this.id ? this.getData() : this.getDetails()
+  },
+  methods: {
+    getData () {
+      this.$post(`${this.api.findExplosive}?id=${this.id}`).then(({ data }) => {
+        // 封面图片回显
+        if (data.coverUrl) {
+          const urls = data.coverUrl.split(',')
+          this.pics = urls.map(e => {
+            return {
+              name: e,
+              url: e
+            }
+          })
+        }
+        this.form = data
+        this.getDetails()
+      }).catch(err => { })
+    },
+    // 链接详情（要查询4个模块的列表）
+    async getDetails (id) {
+      if (id) this.form.correspondingLinkId = ''
+      const { selectLinkId } = this.form
+      // 活动列表
+      if (selectLinkId === '2') {
+        const { data } = await this.$post(this.api.postLoginActivity, {
+          pageNum: 1,
+          pageSize: 1000,
+          listType: 0,
+        })
+        data.records.forEach(e => {
+          e.name = e.competitionName
+          e.id = +e.id
+        })
+        this.linkDetails = data.records
+      } else if (selectLinkId === '3') { // 供应商
+        const { data } = await this.$post(this.api.selectEnterpriseCertificationList, {
+          pageNum: 1,
+          pageSize: 1000,
+          platformSource: 6,
+        })
+        data.records.forEach(e => {
+          e.name = e.companyName
+          e.id = +e.id
+        })
+        this.linkDetails = data.records
+      } else {
+        this.linkDetails = []
+      }
+    },
+    // 清除链接详情
+    clearDetails () {
+      this.form.correspondingLinkId = ''
+      this.linkDetails = []
+    },
+
+    handleExceed (files, fileList) {
+      Util.warningMsg(`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`);
+    },
+    beforeRemove (file, fileList) {
+      return this.$confirm(`确定移除 ${file.name}？`);
+    },
+    handleRemove () {
+      Oss.del(this.form.coverUrl)
+      this.form.coverUrl = ''
+    },
+    uploadError (err, file, fileList) {
+      this.$message({
+        message: "上传出错，请重试！",
+        type: "error",
+        center: true
+      })
+    },
+    // 封面自定义上传
+    async handleRequest ({ file }) {
+      this.form.coverUrl && Oss.del(this.form.coverUrl)
+      Oss.upload(file).then(res => {
+        this.form.coverUrl = res.url
+      })
+    },
+    // 提交
+    save (status) {
+      if (this.submiting) return false
+      const { form } = this
+      if (!form.productName) return Util.warningMsg('请填写产品名称');
+      // 发布需要校验
+      if (status) {
+        if (!form.coverUrl) return Util.warningMsg('请上传图片');
+      }
+      form.publishStatus = status
+      this.submiting = true
+      if (this.id) {
+        this.$post(this.api.updateExplosive, form).then(res => {
+          this.submiting = false
+          Util.successMsg("修改成功");
+          this.$emit('closeDia')
+        }).catch(err => {
+          this.submiting = false
+        });
+      } else {
+        this.$post(this.api.saveExplosive, form).then(res => {
+          this.submiting = false
+          Util.successMsg("创建成功");
+          this.$emit('closeDia')
+        }).catch(err => {
+          this.submiting = false
+        });
+      }
+    },
+  }
+};
+</script>
+
+<style scoped lang="scss">
+$upload-width: 220px;
+$upload-height: 140px;
+$upload-lg-height: 150px;
+/deep/ .avatar-uploader {
+    .el-upload {
+        position: relative;
+        width: $upload-width;
+        height: $upload-height;
+        border: 1px dashed #d9d9d9;
+        border-radius: 6px;
+        cursor: pointer;
+        overflow: hidden;
+
+        &:hover {
+            border-color: #cb221c;
+        }
+
+        .uploader-default {
+            display: flex;
+            height: $upload-height;
+            flex-direction: column;
+            justify-content: center;
+            text-align: center;
+            background: rgba(0, 0, 0, 0.04);
+
+            i {
+                font-size: 20px;
+                font-weight: bold;
+                color: #8c939d;
+            }
+
+            p {
+                margin-top: 10px;
+                font-size: 14px;
+                color: rgba(0, 0, 0, 0.65);
+                line-height: 1;
+            }
+        }
+    }
+
+    &.avatar-uploader-lg {
+        .el-upload {
+            width: 100%;
+            max-width: 960px;
+            height: $upload-lg-height;
+
+            .uploader-default {
+                height: $upload-lg-height;
+            }
+        }
+    }
+
+    .avatar {
+        display: block;
+        width: $upload-width;
+        height: $upload-height;
+    }
+
+    .avatar-lg {
+        display: block;
+        width: 100%;
+        height: $upload-lg-height;
+    }
+
+    .el-upload__tip {
+        margin-top: 0;
+
+        p {
+            font-size: 14px;
+            color: rgba(0, 0, 0, 0.45);
+            line-height: 1;
+
+            &:first-child {
+                margin-bottom: 5px;
+            }
+        }
+    }
+}
+/deep/.req {
+    .el-form-item__label {
+        &:before {
+            content: '*';
+            margin-right: 5px;
+            font-size: 18px;
+            vertical-align: middle;
+            color: #f00;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/miniProgramMg/index/banner/list/index.vue b/src/pages/miniProgramMg/index/banner/list/index.vue
new file mode 100644
index 0000000..d0718b4
--- /dev/null
+++ b/src/pages/miniProgramMg/index/banner/list/index.vue
@@ -0,0 +1,165 @@
+<template>
+  <div class="page">
+    <div class="text-right m-b-20">
+      <el-button type="primary"
+                 @click="toAdd">新增
+      </el-button>
+    </div>
+    <el-table :data="list"
+              class="table"
+              ref="table"
+              stripe
+              header-align="center"
+              row-key="id">
+      <el-table-column type="index"
+                       width="60"
+                       label="序号"
+                       align="center"></el-table-column>
+      <el-table-column label="图片"
+                       min-width="120"
+                       align="center">
+        <template slot-scope="scope">
+          <img v-if="scope.row.coverUrl"
+               class="pic"
+               :src="scope.row.coverUrl"
+               alt="">
+        </template>
+      </el-table-column>
+      <el-table-column prop="productName"
+                       label="标题"
+                       min-width="130"
+                       align="center"></el-table-column>
+      <el-table-column label="链接"
+                       align="center">
+        <template slot-scope="scope">
+          无
+        </template>
+      </el-table-column>
+      <el-table-column label="操作"
+                       width="200"
+                       align="center">
+        <template slot-scope="scope">
+          <el-button type="text"
+                     @click.stop="toEdit(scope.row)">编辑</el-button>
+          <el-button type="text"
+                     @click.stop="del(scope.row)">删除</el-button>
+          <el-switch class="m-l-10"
+                     v-model="scope.row.enabledState"
+                     :active-value="0"
+                     :inactive-value="1"
+                     @change="switchOff($event, scope.row)">
+          </el-switch>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-drawer :title="id ? '编辑' : '新增'"
+               size="900px"
+               :visible.sync="diaVisible"
+               @closed="diaClose">
+      <Add :id.sync="id"
+           @closeDia="closeDia" />
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import Add from '../add'
+import Util from "@/libs/util";
+import Setting from '@/setting'
+export default {
+  data () {
+    return {
+      list: [],
+      sorting: false,
+      id: '',
+      diaVisible: false,
+    };
+  },
+  components: {
+    Add,
+  },
+  mounted () {
+    this.$store.commit('user/setCrumbs', [
+      {
+        name: '小程序管理',
+        path: '/miniProgramMg/index'
+      },
+      {
+        name: '首页设置',
+        path: '/miniProgramMg/banner'
+      },
+      {
+        name: '设置banner',
+      },
+    ])
+    this.getData();
+  },
+  methods: {
+    // 获取分类
+    async getData () {
+      const { data } = await this.$post(this.api.explosiveList, {
+        pageNum: 1,
+        pageSize: 10000,
+        type: 1
+      })
+      data.records.forEach(e => {
+        if (e.coverUrl.includes(',')) e.coverUrl = e.coverUrl.split(',')[0]
+      })
+      this.list = data.records
+    },
+    // 禁用启用
+    switchOff (val, row) {
+      this.$post(this.api.updateColumn, row).then(res => { }).catch((res) => { })
+    },
+    del (row) {
+      this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", {
+        type: "warning"
+      }).then(() => {
+        this.$post(this.api.delExplosive, [row.id]).then(res => {
+          Util.successMsg("删除成功");
+          this.getData();
+        }).catch(res => { });
+      }).catch(() => { });
+    },
+    // 新增
+    toAdd () {
+      this.id = ''
+      this.diaVisible = true
+    },
+    // 编辑
+    toEdit (row) {
+      this.id = row.id
+      this.diaVisible = true
+    },
+    // 弹框关闭回调
+    diaClose () {
+      this.id = ''
+    },
+    // 关闭弹框
+    closeDia () {
+      this.diaVisible = false
+      this.getData()
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.pic {
+    width: 200px;
+    height: 120px;
+    margin: 10px 0;
+    object-fit: cover;
+}
+.sort {
+    margin: 0 10px;
+    font-size: 20px;
+    color: #ccc;
+    cursor: not-allowed;
+    &.sorting {
+        color: #333;
+        cursor: pointer;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/miniProgramMg/index/add/index.vue b/src/pages/miniProgramMg/index/hot/add/index.vue
similarity index 93%
rename from src/pages/miniProgramMg/index/add/index.vue
rename to src/pages/miniProgramMg/index/hot/add/index.vue
index bf9600d..065666e 100644
--- a/src/pages/miniProgramMg/index/add/index.vue
+++ b/src/pages/miniProgramMg/index/hot/add/index.vue
@@ -1,6 +1,5 @@
 <template>
-  <div class="page"
-       style="padding-bottom: 70px">
+  <div>
     <el-form label-width="170px"
              label-suffix=":"
              class="input-form model"
@@ -70,7 +69,8 @@
           </el-select>
           <el-select class="m-l-20"
                      v-model="form.correspondingLinkId"
-                     clearable>
+                     clearable
+                     filterable>
             <el-option v-for="item in linkDetails"
                        :key="item.id"
                        :label="item.name"
@@ -102,14 +102,14 @@
 import Util from "@/libs/util";
 import Editor from '@tinymce/tinymce-vue'
 import editorConfig from '@/components/editor'
-import Setting from "@/setting";
 import Upload from '@/components/upload';
 import Oss from '@/components/upload/upload.js'
 export default {
+  props: ['id'],
   data () {
     return {
-      id: this.$route.query.id || '',
       editorConfig,
+      originForm: {},
       form: {
         correspondingLinkId: '',
         coverUrl: '',
@@ -145,24 +145,25 @@ export default {
       pics: []
     };
   },
+  watch: {
+    id: {
+      handler () {
+        if (this.id) {
+          this.getData()
+        } else {
+          this.pics = []
+          this.form = JSON.parse(JSON.stringify(this.originForm))
+          this.getDetails()
+        }
+      },
+    }
+  },
   components: {
     Editor,
     Upload
   },
   mounted () {
-    this.$store.commit('user/setCrumbs', [
-      {
-        name: '小程序管理',
-        path: '/miniProgramMg/index'
-      },
-      {
-        name: '首页设置',
-        path: '/miniProgramMg/list?type=0'
-      },
-      {
-        name: '新增爆款推荐',
-      },
-    ])
+    this.originForm = JSON.parse(JSON.stringify(this.form))
     this.id ? this.getData() : this.getDetails()
   },
   methods: {
@@ -256,19 +257,20 @@ export default {
       }
       form.coverUrl = this.pics.map(e => e.url).join()
       form.publishStatus = status
-      form.id = this.$route.query.id
       this.submiting = true
-      if (form.id) {
+      if (this.id) {
         this.$post(this.api.updateExplosive, form).then(res => {
+          this.submiting = false
           Util.successMsg("修改成功");
-          this.$router.back()
+          this.$emit('closeDia')
         }).catch(err => {
           this.submiting = false
         });
       } else {
         this.$post(this.api.saveExplosive, form).then(res => {
+          this.submiting = false
           Util.successMsg("创建成功");
-          this.$router.back()
+          this.$emit('closeDia')
         }).catch(err => {
           this.submiting = false
         });
diff --git a/src/pages/miniProgramMg/index/list/index.vue b/src/pages/miniProgramMg/index/hot/list/index.vue
similarity index 88%
rename from src/pages/miniProgramMg/index/list/index.vue
rename to src/pages/miniProgramMg/index/hot/list/index.vue
index c5cd78e..1ab7637 100644
--- a/src/pages/miniProgramMg/index/list/index.vue
+++ b/src/pages/miniProgramMg/index/hot/list/index.vue
@@ -74,20 +74,33 @@
         </template>
       </el-table-column>
     </el-table>
+
+    <el-drawer :title="id ? '编辑' : '新增'"
+               size="900px"
+               :visible.sync="diaVisible"
+               @closed="diaClose">
+      <Add :id.sync="id"
+           @closeDia="closeDia" />
+    </el-drawer>
   </div>
 </template>
 
 <script>
+import Add from '../add'
 import Util from "@/libs/util";
 import Setting from '@/setting'
 export default {
   data () {
     return {
-      type: +this.$route.query.type,
       list: [],
       sorting: false,
+      id: '',
+      diaVisible: false,
     };
   },
+  components: {
+    Add,
+  },
   mounted () {
     this.$store.commit('user/setCrumbs', [
       {
@@ -96,7 +109,7 @@ export default {
       },
       {
         name: '首页设置',
-        path: '/miniProgramMg/list'
+        path: '/miniProgramMg/hot'
       },
       {
         name: '设置爆款',
@@ -110,7 +123,7 @@ export default {
       const { data } = await this.$post(this.api.explosiveList, {
         pageNum: 1,
         pageSize: 10000,
-        type: this.type
+        type: 0
       })
       data.records.forEach(e => {
         if (e.coverUrl.includes(',')) e.coverUrl = e.coverUrl.split(',')[0]
@@ -133,13 +146,24 @@ export default {
     },
     // 新增
     toAdd () {
-      this.$router.push(`add`)
+      this.id = ''
+      this.diaVisible = true
     },
     // 编辑
     toEdit (row) {
-      this.$router.push(`add?id=${row.id}`)
+      this.id = row.id
+      this.diaVisible = true
+    },
+    // 弹框关闭回调
+    diaClose () {
+      this.id = ''
     },
-    // 递归处理list
+    // 关闭弹框
+    closeDia () {
+      this.diaVisible = false
+      this.getData()
+    },
+    // 排序
     handleSort (row, dir, i) {
       if (!this.sorting) return false
       const toIndex = dir === 'up' ? i - 1 : i + 1
@@ -161,6 +185,8 @@ export default {
       this.originList = JSON.parse(JSON.stringify(this.list));
       this.sorting = true;
     },
+
+
   }
 };
 </script>
diff --git a/src/pages/miniProgramMg/index/inlet/index.vue b/src/pages/miniProgramMg/index/inlet/index.vue
index 2845cb2..4a18b86 100644
--- a/src/pages/miniProgramMg/index/inlet/index.vue
+++ b/src/pages/miniProgramMg/index/inlet/index.vue
@@ -39,7 +39,7 @@ export default {
   methods: {
     // 页面设置
     toSet (i) {
-      this.$router.push(`list?type=${i}`)
+      this.$router.push(i ? 'banner' : 'hot')
     },
   }
 };
diff --git a/src/router/modules/miniProgramMg.js b/src/router/modules/miniProgramMg.js
index 1a09e0a..92adb63 100644
--- a/src/router/modules/miniProgramMg.js
+++ b/src/router/modules/miniProgramMg.js
@@ -17,14 +17,24 @@ export default {
       meta: { title: '首页管理' }
     },
     {
-      path: `list`,
-      component: () => import('@/pages/miniProgramMg/index/list'),
-      meta: { title: '首页管理' }
+      path: `hot`,
+      component: () => import('@/pages/miniProgramMg/index/hot/list'),
+      meta: { title: '爆款推荐' }
     },
     {
-      path: `add`,
-      component: () => import('@/pages/miniProgramMg/index/add'),
+      path: `hot/add`,
+      component: () => import('@/pages/miniProgramMg/index/hot/add'),
       meta: { title: '爆款推荐' }
     },
+    {
+      path: `banner`,
+      component: () => import('@/pages/miniProgramMg/index/banner/list'),
+      meta: { title: 'banner管理' }
+    },
+    {
+      path: `banner/add`,
+      component: () => import('@/pages/miniProgramMg/index/banner/add'),
+      meta: { title: 'banner管理' }
+    },
   ]
 }