添加广告位页面

src/api/asdm/adver.js

@@ -0,0 +1,32 @@
+import request from '@/utils/request';
+
+// 获取宣传和广告列表('business:jcPropagandaAd:list')
+export function advertList(params) {
+  return request({
+    url: '/business/jcPropagandaAd/list',
+    params
+  });
+}
+// 添加
+export function advertAdd(data) {
+  return request({
+    url: '/business/jcPropagandaAd',
+    method: 'post',
+    data
+  });
+}
+// 修改
+export function advertEdit(data) {
+  return request({
+    url: '/business/jcPropagandaAd',
+    method: 'put',
+    data
+  });
+}
+// 删除
+export function advertDelete(ids) {
+  return request({
+    url: '/business/jcPropagandaAd/'+ids,
+    method: 'delete',
+  });
+}

src/components/Upload/multiUpload.vue

@@ -31,12 +31,12 @@ export default {
     //最大上传图片数量
     maxCount: {
       type: Number,
-      default: 5
+      default: 5,
     },
     check: {
       type: Boolean,
-      default: false
+      default: false,
-    }
+    },
   },
   data() {
     return {
@@ -46,13 +46,13 @@ export default {
         key: '',
         ossaccessKeyId: '',
         dir: '',
-        host: ''
+        host: '',
       },
       dialogVisible: false,
       dialogImageUrl: null,
       useOss: false, //使用oss->true;使用MinIO->false
       ossUploadUrl: 'http://macro-oss.oss-cn-shenzhen.aliyuncs.com',
-      minioUploadUrl: process.env.VUE_APP_BASE_API + '/minio/upload'
+      minioUploadUrl: process.env.VUE_APP_BASE_API + '/minio/upload',
     };
   },
   computed: {
@@ -62,7 +62,7 @@ export default {
         fileList.push({ url: this.value[i] });
       }
       return fileList;
-    }
+    },
   },
   methods: {
     emitInput(fileList) {
@@ -80,9 +80,9 @@ export default {
       this.dialogImageUrl = file.url;
     },
     beforeUpload(file) {
-      if (file.type.indexOf("image/") == -1) {
+      if (file.type.indexOf('image/') == -1) {
-        this.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
+        this.msgError('文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。');
-        return false
+        return false;
       }
       let _self = this;
       if (!this.useOss) {
@@ -91,7 +91,7 @@ export default {
       }
       return new Promise((resolve, reject) => {
         policy()
-          .then(response => {
+          .then((response) => {
             _self.dataObj.policy = response.data.policy;
             _self.dataObj.signature = response.data.signature;
             _self.dataObj.ossaccessKeyId = response.data.accessKeyId;
@@ -100,7 +100,7 @@ export default {
             _self.dataObj.host = response.data.host;
             resolve(true);
           })
-          .catch(err => {
+          .catch((err) => {
             console.log(err);
             reject(false);
           });
@@ -119,10 +119,16 @@ export default {
       this.$message({
         message: '最多只能上传' + this.maxCount + '张图片',
         type: 'warning',
-        duration: 1000
+        duration: 1000,
       });
-    }
+    },
-  }
+  },
 };
 </script>
-<style></style>
+<style lang="scss" scoped>
+// 去掉动画效果
+::v-deep .el-list-enter-active,
+::v-deep .el-list-leave-active {
+  transition: all 0s;
+}
+</style>

src/router/modules/asdmSetting.js

@@ -7,6 +7,13 @@ const nestedRouter = {
   name:'asdm',
   meta: { title: '管理端设置', icon: 'row'},
   children: [
+    {
+      path: 'advert',
+      component: resolve =>
+        require(['@/views/asdm/advert/index'], resolve),
+      name: 'advert',
+      meta: { title: '广告位管理', icon: 'list' }
+    },
     {
       path: 'rotation',
       component: resolve =>

src/views/asdm/advert/index.vue

@@ -0,0 +1,298 @@
+<template>
+  <div class="app-container">
+    <el-card shadow="never">
+      <div>
+        <i class="el-icon-search"></i>
+        <span>筛选搜索</span>
+      </div>
+      <div style="margin-top: 15px">
+        <el-form
+          size="small"
+          :model="queryParams"
+          ref="queryForm"
+          :inline="true"
+          @submit.native.prevent
+        >
+          <el-form-item label="类型">
+            <el-select
+              v-model="queryParams.type"
+              clearable
+              placeholder="请选择"
+            >
+              <el-option label="宣传" value="1"> </el-option>
+              <el-option label="广告" value="2"> </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="handleSearchList" size="small">
+              查询
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-card>
+    <el-card shadow="never" class="operate-container">
+      <i class="el-icon-tickets"></i>
+      <span>数据列表</span>
+      <el-button
+        class="mb15"
+        style="float: right"
+        @click="open"
+        size="mini"
+        type="primary"
+      >
+        添加
+      </el-button>
+    </el-card>
+    <el-table style="width: 100%" class="table-container" :data="dataList">
+      <el-table-column
+        label="序号"
+        align="center"
+        type="index"
+      ></el-table-column>
+      <el-table-column
+        label="名称"
+        align="center"
+        prop="name"
+      ></el-table-column>
+      <el-table-column label="图片" prop="pic" align="center">
+        <template slot-scope="scope">
+          <el-image
+            style="width: 100px; height: 100px"
+            :src="scope.row.pic"
+            fit="cover"
+          >
+          </el-image>
+        </template>
+      </el-table-column>
+      <el-table-column label="类型" prop="type" align="center">
+        <template slot-scope="scope">
+          <span v-if="scope.row.type == 1">宣传</span>
+          <span v-else>广告</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="是否显示" prop="status" align="center">
+        <template slot-scope="scope">
+          <el-tag v-if="scope.row.status == 1">显示</el-tag>
+          <el-tag v-else type="info">隐藏</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+      ></el-table-column>
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <el-button @click="handleUpdate(scope.row)" type="text" size="small"
+            >编辑</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.row.id)"
+            type="text"
+            size="small"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+    <el-dialog title="宣传广告" :visible.sync="dialogVisible" width="30%">
+      <el-form
+        :model="ruleForm"
+        ref="ruleForm"
+        :rules="rules"
+        label-width="80px"
+      >
+        <el-form-item label="名称" prop="name">
+          <el-input placeholder="请输入" v-model="ruleForm.name"></el-input>
+        </el-form-item>
+        <el-form-item label="图片" prop="pic">
+          <multi-upload
+            v-model="selectProductPics"
+            :maxCount="1"
+          ></multi-upload>
+        </el-form-item>
+        <el-form-item label="类型" prop="type">
+          <el-select v-model="ruleForm.type" placeholder="请选择">
+            <el-option label="宣传" value="1"> </el-option>
+            <el-option label="广告" value="2"> </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="是否显示" prop="status" v-if="ruleForm.id">
+          <el-radio v-model="ruleForm.status" label="1">显示</el-radio>
+          <el-radio v-model="ruleForm.status" label="0">隐藏</el-radio>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitForm('ruleForm')"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import {
+  advertList,
+  advertAdd,
+  advertDelete,
+  advertEdit,
+} from '@/api/asdm/adver';
+import MultiUpload from '@/components/Upload/multiUpload';
+const defaultParams = {
+  id: undefined,
+  name: '',
+  pic: '',
+  type: '',
+  status: '0',
+};
+export default {
+  components: {
+    MultiUpload,
+  },
+  data() {
+    return {
+      queryParams: {
+        type: undefined,
+        pageNum: 1,
+        pageSize: 10,
+      },
+      total: 0,
+      dataList: [],
+      dialogVisible: false,
+      ruleForm: Object.assign({}, defaultParams),
+      rules: {
+        name: [{ required: true, message: '请输入', trigger: 'blur' }],
+        pic: [{ required: true, message: '请上传', trigger: 'blur' }],
+        type: [{ required: true, message: '请选择类型', trigger: 'change' }],
+      },
+    };
+  },
+  computed: {
+    //主图和画册图片
+    selectProductPics: {
+      get: function () {
+        let pics = [];
+        if (
+          this.ruleForm.pic === undefined ||
+          this.ruleForm.pic == null ||
+          this.ruleForm.pic === ''
+        ) {
+          return pics;
+        }
+        pics.push(this.ruleForm.pic);
+        if (
+          this.ruleForm.albumPics === undefined ||
+          this.ruleForm.albumPics == null ||
+          this.ruleForm.albumPics === ''
+        ) {
+          return pics;
+        }
+        let albumPics = this.ruleForm.albumPics.split(',');
+        for (let i = 0; i < albumPics.length; i++) {
+          pics.push(albumPics[i]);
+        }
+        return pics;
+      },
+      set: function (newValue) {
+        if (newValue == null || newValue.length === 0) {
+          this.ruleForm.pic = null;
+          this.ruleForm.albumPics = null;
+        } else {
+          this.ruleForm.pic = newValue[0];
+          // this.ruleForm.picList = newValue;
+          this.ruleForm.albumPics = '';
+          if (newValue.length > 1) {
+            for (let i = 1; i < newValue.length; i++) {
+              this.ruleForm.albumPics += newValue[i];
+              if (i !== newValue.length - 1) {
+                this.ruleForm.albumPics += ',';
+              }
+            }
+          }
+        }
+      },
+    },
+  },
+  methods: {
+    handleSearchList() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    getList() {
+      advertList(this.queryParams).then((res) => {
+        // 此接口没有code 及 msg
+        this.dataList = res.list;
+        this.total = res.total;
+      });
+    },
+    open() {
+      (this.ruleForm = Object.assign({}, defaultParams)),
+        (this.dialogVisible = true);
+    },
+    handleUpdate(row) {
+      this.ruleForm = Object.assign({}, row);
+      this.dialogVisible = true;
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          if (this.ruleForm.id) {
+            advertEdit(this.ruleForm).then((res) => {
+              this.msgSuccess(res.data);
+              this.ruleForm = {
+                url: '',
+                pic: '',
+              };
+              this.getList();
+              this.dialogVisible = false;
+            });
+          } else {
+            advertAdd(this.ruleForm).then((res) => {
+              this.msgSuccess(res.data);
+              this.ruleForm = {
+                url: '',
+                pic: '',
+              };
+              this.getList();
+              this.dialogVisible = false;
+            });
+          }
+        }
+      });
+      // this.dialogVisible = false
+    },
+    /** 删除按钮操作 */
+    handleDelete(id) {
+      this.$confirm('确认删除该图?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(function () {
+          return advertDelete(id);
+        })
+        .then(() => {
+          this.getList();
+          this.msgSuccess('删除成功');
+        });
+    },
+  },
+  created() {
+    this.getList();
+  },
+};
+</script>
+<style lang="scss" scoped>
+// .el-tag + .el-tag {
+//   margin-left: 10px;
+// }
+</style>