Merge branch 'dev-advert-0629' into 'release'

教培项目新增广告位管理 code reviewer：李祎



See merge request !176

src/router/router.js

@@ -39,7 +39,6 @@ const reviewAccessManage = r => require.ensure([], () => r(require('../views/cme
 const creditSendManage = r => require.ensure([], () => r(require('../views/cme/credit-send-manage.vue')), 'credit-send-manage')
 const applyDetail =  r => require.ensure([], () => r(require('../views/cme/apply-detail.vue')), 'apply-detail')
 
-
 const templateManager = r => require.ensure([], () => r(require('../views/education/template-manager.vue')), 'ctemplate-manager')
 const templateEditor = r => require.ensure([], () => r(require('../views/education/template-editor.vue')), 'template-editor')
 const templateOpen = r => require.ensure([], () => r(require('../views/education/template-open.vue')), 'templateOpen')
@@ -47,7 +46,8 @@ const eduRole = r => require.ensure([], () => r(require('../views/education/edu-
 const editCustom = r => require.ensure([], () => r(require('../views/education/edit-custom.vue')), 'templateOpen')
 const externalResourceManage = r => require.ensure([], () => r(require('../views/education/external-resource-manage.vue')), 'external-resource-manage')
 const auditCustomCourse = r => require.ensure([], () => r(require('../views/education/audit-custom-course.vue')), 'audit-custom-course')
-
+const advertSimpleManage = r => require.ensure([], () => r(require('../views/education/advert/advert-simple-manage.vue')), 'advert-simple-manage')
+const editSimpleAdvert = r => require.ensure([], () => r(require('../views/education/advert/edit-simple-advert.vue')), 'edit-simple-advert')
 
 const noticeEditor = r => require.ensure([], () => r(require('../views/education/notice-editor.vue')), 'notice-editor')
 
@@ -234,6 +234,14 @@ export default [{
             path: '/audit-custom-course',
             component: auditCustomCourse,
         },
+        {
+            path: '/advert-simple-manage',
+            component: advertSimpleManage,
+        },
+        {
+            path: '/edit-simple-advert',
+            component: editSimpleAdvert,
+        },
       // {
       //   path: '/followup',
       //   name: 'followUp',

src/utils-o/fetch.js

@@ -56,7 +56,7 @@ service.interceptors.request.use(config => {
       // console.log('环境变量>>>> ', process.env.BUILD_ENV);
       // config.headers['token'] = 'BFD804F3A3194FBBBE113962222839F6';
       // config.headers['token'] = 'F8209898391C40A0B8DBC1ED9E157291';
-      config.headers['token'] = '3167CD6495A14C14AEF28AB99F69984D';
+      config.headers['token'] = 'F64D5633857D4E16B3C2CCE5E48B0D1E';
     }else{
       config.headers['token'] = localStorage.getItem('storageToken')
     }

src/utils/fetch.js

@@ -54,7 +54,7 @@ service.interceptors.request.use(config => {
     }
     if( process.env.BUILD_ENV == "development" ){  // 本地开发环境qgit
       // console.log('环境变量>>>> ', process.env.BUILD_ENV);
-      config.headers['token'] = 'C43C516E69594935B8583EDB243BB797';
+      config.headers['token'] = 'F64D5633857D4E16B3C2CCE5E48B0D1E';
       // config.headers['token'] = localStorage.getItem('storageToken')
     }else{
       config.headers['token'] = localStorage.getItem('storageToken')

src/views/education/advert/advert-simple-manage.vue

+<template>
+  <div class="advert-simple-wrap">
+    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
+
+    <div class="review-access screenSet" id="screenSet">
+      <div class="header-title">广告位管理</div>
+      <el-form ref="form" :model="searchForm" label-width="100px" class="search-form-wrap">
+        <el-row>
+          <el-form-item label="所属项目：" class="search-item">
+            <el-input
+              v-model="searchForm.projectName"
+              size="small"
+              class="form-width"
+              placeholder="请输入项目名称"
+            ></el-input>
+          </el-form-item>
+
+          <el-form-item label="状态：" class="search-item">
+            <el-select
+              v-model="searchForm.status"
+              placeholder="请选择"
+              size="small"
+              class="form-width"
+            >
+              <el-option
+                v-for="(item, index) in statusList"
+                :key="index"
+                :label="item.name"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item class="btn-list">
+            <el-button @click="search(true)" type="primary" size="small">查 询</el-button>
+            <el-button @click="reset" size="small">重 置</el-button>
+          </el-form-item>
+        </el-row>
+        <el-row style="float: right;">
+          <el-button @click="addAdvert()" type="primary" size="small">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;新建广告位&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-button>
+        </el-row>
+      </el-form>
+      <el-table :data="tableList" border style="width: 100%">
+        <el-table-column align="center" prop="id" label="广告位编号"></el-table-column>
+        <el-table-column align="center" prop="pageType" label="页面类型">
+          <template slot-scope="scope">
+            <span>{{scope.row.pageType == 0 ? '项目列表页' : '项目详情页'}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" prop="projectName" label="所属项目"></el-table-column>
+        <el-table-column align="center" prop="position" label="页面位置">
+          <template slot-scope="scope">
+            <span>{{scope.row.position == 0 ? '顶部广告位' : '底部广告位'}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" prop="status" label="审核状态">
+          <template slot-scope="scope">
+            <span v-html="getHtmlStatus(scope.row.status)"></span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="操作">
+          <template slot-scope="scope">
+            <el-button @click="editAdvert(scope.row)" type="text" size="small">
+              <span style="color: #449284;">编辑</span>
+            </el-button>
+          </template>
+        </el-table-column>
+        <div slot="empty">
+          <div class="table-empty">
+            <img src="../../../assets/image/no-content1.png" />
+            <p>没有查询到数据</p>
+          </div>
+        </div>
+      </el-table>
+
+      <div class="pagination">
+        <el-pagination
+          class="pagination-style"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :total="totalRows"
+          :current-page="searchForm.pageNo"
+          :page-sizes="[15, 30, 50, 100]"
+          :page-size="searchForm.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+        ></el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { openLoading, closeLoading } from "../../../utils/utils";
+import BreadCrumb from "../../../components/breadcrumb.vue";
+import * as commonUtil from "../../../utils/utils";
+import { handleDeleteReq } from "@/utils/cme/cmeApi";
+
+export default {
+  data() {
+    return {
+      curmbFirst: "教培项目",
+      curmbSecond: "广告位管理",
+      totalRows: 0,
+      searchForm: {
+        projectName: "",
+        status: -1,
+        pageNo: 1,
+        pageSize: 15
+      },
+      statusList: [
+        {
+          name: "全部",
+          value: -1
+        },
+        {
+          name: "未发布",
+          value: 0
+        },
+        {
+          name: "已发布",
+          value: 1
+        },
+        {
+          name: "已下线",
+          value: 2
+        }
+      ],
+      tableList: []
+    };
+  },
+
+  components: {
+    BreadCrumb
+  },
+
+  created() {
+    this.search();
+  },
+  mounted() {
+    commonUtil.resizeHeight();
+  },
+  methods: {
+    //
+    getHtmlStatus(status) {
+      if (status == 0) {
+        return `<span style="color:#666666;">未发布</span>`;
+      } else if (status == 1) {
+        return `<span style="color:#417505;">已发布</span>`;
+      } else if (status == 2) {
+        return `<span style="color:#D0021B;">已下线</span>`;
+      } else {
+        return "";
+      }
+    },
+
+    // 查询列表
+    search(needResetPage) {
+      // let searchForm = Object.assign({}, this.searchForm);
+      needResetPage && (this.searchForm.pageNo = 1);
+      this.GET("portal/jump/list", this.searchForm).then(res => {
+        if (res.code == "000000") {
+          this.tableList = (res.data && res.data.list) || [];
+          this.totalRows = res.data.totalSize || 0;
+        }
+      });
+    },
+
+    // 重置
+    reset() {
+      this.searchForm = {
+        projectId: "",
+        status: -1,
+        pageNo: 1,
+        pageSize: 15
+      };
+    },
+
+    // 新增
+    addAdvert() {
+      this.$router.push({
+        path: "edit-simple-advert",
+        query: { id: null }
+      });
+    },
+
+    // 查看
+    editAdvert(row) {
+      this.$router.push({
+        path: "edit-simple-advert",
+        query: { id: row.id }
+      });
+    },
+
+    // 切换每页个数
+    handleSizeChange(val) {
+      this.searchForm.pageSize = val;
+      this.search();
+    },
+
+    // 切换当前页
+    handleCurrentChange(val) {
+      this.searchForm.pageNo = val;
+      this.search();
+    }
+  }
+};
+</script>  
+
+<style lang="scss">
+.advert-simple-wrap {
+  .review-access {
+    padding: 10px;
+    background: #fff;
+    .el-button--small {
+      font-size: 14px;
+    }
+    .header-title {
+      padding: 10px 12px 20px;
+      font-size: 14px;
+      color: #606266;
+      border-bottom: 1px solid #efefef;
+    }
+    .search-form-wrap {
+      padding: 25px 0 20px;
+      overflow: hidden;
+      // border-bottom: 1px dashed #efefef;
+    }
+    .search-item {
+      float: left;
+    }
+    .btn-list {
+      float: right;
+      .el-form-item__content {
+        margin-left: 0 !important;
+      }
+    }
+    .new-add {
+      float: right;
+      margin: 10px 0 20px;
+    }
+    .table-empty {
+      img {
+        width: 100px;
+      }
+      p {
+        margin-top: -50px;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/education/advert/edit-simple-advert.vue

+<template>
+  <div class="edit-simple-adv-wrap">
+    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="title"></bread-crumb>
+    <div class="component-content screenSet" id="screenSet">
+      <div class="header-title">{{ title }}</div>
+      <el-form
+        style="min-width: 800px;"
+        ref="formData"
+        :model="formData"
+        :rules="rules"
+        label-width="150px"
+        class="basic-form"
+      >
+        <el-form-item label="链接类型：">
+          <el-col :span="10">
+            <el-select
+              v-model="formData.jumpType"
+              collapse-tags
+              style="width: 300px"
+              placeholder="请选择链接类型"
+              filterable
+            >
+              <el-option
+                label="URL链接"
+                value="1"
+              ></el-option>
+            </el-select>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="跳转URL：" prop="jumpUrl">
+          <el-col :span="13">
+            <el-input
+              maxlength="200"
+              rows=5
+              type="textarea"
+              placeholder="请输入跳转URL："
+              v-model="formData.jumpUrl"
+              style="width: 300px"
+            ></el-input>
+            <span class="word-num">{{(formData.jumpUrl).replace(/\s+/g,"").length}}/200</span>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="页面类型：" prop="pageType">
+          <el-col :span="10">
+            <el-select
+              v-model="formData.pageType"
+              collapse-tags
+              style="width: 300px"
+              placeholder="请选择页面类型"
+              filterable
+            >
+              <el-option label="项目详情页" value="1"></el-option>
+              <!-- <el-option label="项目列表页" value="0"></el-option> -->
+            </el-select>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="所属项目：" prop="projectId">
+          <el-col :span="10">
+            <el-select
+              v-model="formData.projectId"
+              style="width: 300px"
+              placeholder="所属项目"
+              filterable
+            >
+              <el-option
+                size="small"
+                v-for="item in optionsProject"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="页面位置：">
+          <el-col :span="10">
+            <el-select
+              v-model="formData.position"
+              collapse-tags
+              style="width: 300px"
+              placeholder="请选择页面位置"
+              filterable
+            >
+              <el-option label="顶部广告位" value="0"></el-option>
+              <el-option label="底部广告位" value="1"></el-option>
+            </el-select>
+          </el-col>
+        </el-form-item>
+
+        <div class="basic-item-icon">
+          <!-- <span class="require">*</span> -->
+          <el-form-item label="上传图片：" prop="imageUrl" style="height: 100px;">
+            <el-upload
+              style="height: 100px;"
+              v-model="formData.imageUrl"
+              class="bg-uploader"
+              action="#"
+              :show-file-list="false"
+              :before-upload="beforeUploadListPic"
+            >
+              <img
+                v-if="formData.imageUrl"
+                :src="formData.imageUrl"
+                class="bg-img"
+              />
+              <img
+                v-if="!formData.imageUrl"
+                class="bg-img"
+                src="../../../assets/image/small.png"
+              />
+              <!-- <div
+                class="img-delete"
+                v-show="imgMouseOver"
+                @click.stop="deleteImg(1)"
+                @mouseout.stop="imgMouseOver=false"
+              >
+                <i class="el-icon-delete"></i>
+              </div> -->
+              <div class="limit-text">
+                <p>限制宽度: 750&nbsp;&nbsp;</p>
+                <p>限制大小: 200k</p>
+                <p>支持.jpg,.png,.gif格式</p>
+              </div>
+            </el-upload>
+          </el-form-item>
+          <p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
+        </div>
+        <el-form-item label="状态：" >
+          <el-select v-model="formData.status" placeholder="请选择状态" style="width: 300px">
+            <el-option v-for="(item, index) in statusList" :key="index" :label="item.name" :value="item.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item class="btn-list" style="margin: 40px 0;">
+          <el-button @click="submitForm('formData')" type="primary">提 交</el-button>
+          <el-button @click="goBack">取 消</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <DialogComponet :dialogObj="dialogObj" @hide="insertOrUpdate" @confirm="dialogObj.visible=false"></DialogComponet>
+  </div>
+</template>
+<script>
+import BreadCrumb from "../../../components/breadcrumb.vue";
+import DialogComponet from "@/components/education/template/dialog";
+import { doUpload, getFilePath } from "../../../utils/qiniu-util";
+import { mapGetters } from "vuex";
+import { openLoading, closeLoading } from "../../../utils/utils";
+import * as commonUtil from "../../../utils/utils";
+import * as operationData from "../../../utils/operation";
+let vm = null;
+export default {
+  components: {
+    BreadCrumb,
+    DialogComponet
+  },
+  data() {
+    return {
+      curmbFirst: "教培项目",
+      curmbSecond: "广告位管理",
+      title: "编辑广告位",
+      id: null,
+      uploadImgMessage: false,
+      imgMouseOver: false,
+      formData: {
+        id: "",
+        jumpType: "1",
+        jumpUrl: "",
+        pageType: "1",
+        position: "0",
+        projectId: "",
+        imageUrl: "",
+        status: 0,
+      },
+      optionsProject: [],
+      statusList: [
+        {
+          name: '不发布',
+          value: 0
+        },{
+          name: '发布',
+          value: 1
+        },{
+          name: '下线',
+          value: 2
+        }
+      ],
+      dialogObj: {
+        visible: false,
+        title: "",
+        message: "此位置已存在广告位，是否替换原有的广告位？",
+        tip: "",
+        confirmMsg: "取 消",
+        hideMsg: "确 定"
+      },
+      rules: {
+        jumpUrl: [
+          { required: true, message: "请输入跳转URL", trigger: "blur" }
+        ],
+        projectId: [
+          { required: true, message: "请选择所属项目", trigger: "change" }
+        ],
+        imageUrl: [
+          { required: true, message: "请上传图片", trigger: "change" }
+        ],
+      }
+    };
+  },
+  computed: {
+
+  },
+  created() {
+    vm = this;
+    vm.id = vm.getUrlSearch(window.location.href, "id");
+    vm.initTitle();
+    vm.initOption();
+  },
+  mounted: function() {
+    commonUtil.resizeHeight();
+  },
+  methods: {
+
+    // 初始化Title
+    initTitle() {
+      if (!vm.id) {
+        vm.title = "新建广告位";
+      } else {
+        vm.title = "编辑广告位";
+      }
+    },
+
+    // 设置选择框选项
+    setOption(data) {
+      let list = [];
+      for(let i = 0; i<data.length ; i++) {
+        let obj = {
+          value: data[i].projectId,
+          label: data[i].projectName,
+        }
+        list.push(obj);
+      }
+      return list;
+    },
+
+    // 初始化项目选择框
+    initOption() {
+      vm.optionsProject = [];
+      let req = {
+        status: 4,
+        type: 2
+      };
+      openLoading(vm);
+      vm.GET("portal/entryInfo/getProjectList", req).then(res => {
+        closeLoading(vm);
+        if (res.code == "000000") {
+          console.log('000000');
+          vm.optionsProject = vm.setOption(res.data);
+          vm.getAdvertInfo();
+        }
+      });
+    },
+
+    // 返回到上一页
+    goBack() {
+      vm.$router.back(-1);
+    },
+
+    // 提交前校验
+    submitForm(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          this.checkAdvert();
+          // this.insertOrUpdate();
+        } else {
+          console.log("error submit!!");
+        }
+      });
+    },
+
+    // 重置
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+
+    //  删除图片
+    deleteImg() {
+      vm.formData.imageUrl = "";
+      vm.imgMouseOver = false;
+    },
+
+    // 上传
+    beforeUploadListPic(file) {
+      let fileLimit = {
+        width: 750,
+        height: 120,
+        size: 200,
+        sizeText: "200k",
+        key: "imageUrl",
+        show: "uploadImgMessage"
+      };
+      this.beforeAvatarUpload(file, fileLimit);
+    },
+
+    beforeAvatarUpload(file, fileLimit) {
+      const isJPG = file.type === "image/jpeg";
+      const isPNG = file.type === "image/png";
+      const isJIF = file.type === "image/gif";
+      const isLt200 = file.size / 1024 < fileLimit.size;
+      if (!isJPG && !isPNG && !isJIF) {
+        this.$message.error("图片不符合规范，请根据规范上传图片");
+        return;
+      }
+      if (!isLt200) {
+        this.$message.error("图片不符合规范，请根据规范上传图片 ");
+        return;
+      }
+      let _img = new FileReader();
+      _img.readAsDataURL(file);
+      _img.onload = function(theFile) {
+        let image = new Image();
+        image.src = theFile.target.result;
+        image.onload = function() {
+          let _this = this;
+          // if (_this.width != fileLimit.width || _this.height != fileLimit.height) {
+          if (_this.width != fileLimit.width) {
+            vm.$message.error("图片不符合规范，请根据规范上传图片");
+          } else {
+            openLoading(vm);
+            doUpload(
+              vm,
+              file,
+              getFilePath(file, null),
+              "preview4",
+              "progress1",
+              1
+            ).then(function(path) {
+              closeLoading(vm);
+              console.log(path);
+              vm.formData.imageUrl = path.fullPath;
+              vm.$message.success("上传成功");
+              vm.$refs.formData.validateField('imageUrl');
+            });
+          }
+        };
+      };
+    },
+
+
+
+    // 获取广告配置详情
+    getAdvertInfo() {
+      if (!vm.id) {
+        return;
+      }
+      let req = {
+        id: vm.id
+      };
+      openLoading(vm);
+      vm.GET(`portal/jump/${vm.id}`, req).then(res => {
+        closeLoading(vm);
+        if (res.code == "000000") {
+          // this.formData = res.data;
+          vm.setEditData(res.data);
+        } else {
+          vm.$message(res.message);
+        }
+      });
+    },
+
+    // 添加或修改 结果 0：无替换的配置 1：有需要替换的配置，提示替换
+    checkAdvert() {
+      vm.POST("portal/jump/check",
+        this.formData
+        ).then(res => {
+        if (res.code == "000000") {
+          if(res.data == 0) {
+            this.insertOrUpdate();
+          } else {  // 弹出确认框
+            this.dialogObj.visible = true;
+          }
+        } else {
+          vm.$message.error(res.message);
+        }
+      });
+    },
+
+    // 添加或修改
+    insertOrUpdate() {
+      openLoading(vm);
+      vm.POST("portal/jump/insertOrUpdate",
+        this.formData
+        ).then(res => {
+        closeLoading(vm);
+        if (res.code == "000000") {
+          vm.$message({
+            message: '创建成功',
+            type: 'success'
+          });
+          vm.$router.back(-1);
+        } else {
+          vm.$message.error(res.message);
+        }
+      });
+    },
+
+    // 设置编辑数据
+    setEditData(resData) {
+      this.formData = resData;
+      this.formData.jumpType = resData.jumpType + '';
+      this.formData.pageType = resData.pageType + '';
+      this.formData.position = resData.position + '';      
+    },
+  }
+};
+</script>
+<style lang="scss">
+.edit-simple-adv-wrap {
+  .component-content {
+    position: relative;
+    padding: 10px;
+    background: #fff;
+    .header-title {
+      padding: 10px 12px;
+      font-size: 12px;
+      color: #449284;
+      border-bottom: 1px solid #efefef;
+    }
+    .basic-form {
+      height: 100px !important;
+      ::-webkit-scrollbar
+      {
+          width: 4px;
+          height: 20px;
+          background-color: #D8D8D8;
+      }
+      ::-webkit-scrollbar-thumb {
+          background-color: #D8D8D8;
+      }
+      position: relative;
+      margin-top: 10px;
+      .basic-item-icon {
+        position: relative;
+        .require {
+          position: absolute;
+          left: 67px;
+          top: 11px;
+          color: #f56c6c;
+        }
+        .upload-message {
+          position: absolute;
+          left: 160px;
+          top: 105px;
+          font-size: 12px;
+          color: #f56c6c;
+        }
+        .img-delete {
+          position: absolute;
+          left: 0px;
+          top: 0px;
+          width: 84px;
+          height: 100px;
+          background: #000;
+          opacity: 0.7;
+          z-index: 999;
+          i {
+            color: #fff;
+            margin-top: 39px;
+            margin-left: 0px;
+          }
+        }
+      }
+      .word-num {
+        font-size: 12px;
+        color: #999;
+        padding-top: 5px;
+      }
+      .line {
+        margin-left: 10px;
+        width: 20px;
+      }
+      .bg-uploader {
+        img {
+          float: left;
+        }
+        .bg-img {
+          width: 100px;
+          height: 100px;
+        }
+        .limit-text {
+          float: left;
+          margin-left: 10px;
+          margin-top: -10px;
+          p {
+            font-size: 12px;
+            color: #999;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/layout/slidebar.vue

@@ -404,6 +404,12 @@
           icon: 'el-icon-setting',
           index: 'template-manager'
         };
+        const advertSimpleManage = {
+          title: '教培项目广告位管理',
+          icon: 'el-icon-setting',
+          index: 'advert-simple-manage'
+        };
+
         const eduRole = {
           title: '角色权限',
           icon: 'el-icon-menu',
@@ -467,6 +473,7 @@
         vm.items[1].subs.push(itemComponent);
         vm.items[1].subs.push(templateManager);
         vm.items[1].subs.push(followSider);
+        vm.items[1].subs.push(advertSimpleManage);
         vm.items.push(eduRole);
         vm.items.push(cme);
         vm.items.push(yqRange);