提交 47b24e1f 编写于 作者: yi.li's avatar yi.li

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

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



See merge request !176
...@@ -39,7 +39,6 @@ const reviewAccessManage = r => require.ensure([], () => r(require('../views/cme ...@@ -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 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 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 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 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') 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- ...@@ -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 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 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 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') const noticeEditor = r => require.ensure([], () => r(require('../views/education/notice-editor.vue')), 'notice-editor')
...@@ -229,11 +229,19 @@ export default [{ ...@@ -229,11 +229,19 @@ export default [{
{ {
path: '/external-resource-manage', path: '/external-resource-manage',
component: externalResourceManage, component: externalResourceManage,
}, },
{ {
path: '/audit-custom-course', path: '/audit-custom-course',
component: auditCustomCourse, component: auditCustomCourse,
}, },
{
path: '/advert-simple-manage',
component: advertSimpleManage,
},
{
path: '/edit-simple-advert',
component: editSimpleAdvert,
},
// { // {
// path: '/followup', // path: '/followup',
// name: 'followUp', // name: 'followUp',
......
...@@ -56,7 +56,7 @@ service.interceptors.request.use(config => { ...@@ -56,7 +56,7 @@ service.interceptors.request.use(config => {
// console.log('环境变量>>>> ', process.env.BUILD_ENV); // console.log('环境变量>>>> ', process.env.BUILD_ENV);
// config.headers['token'] = 'BFD804F3A3194FBBBE113962222839F6'; // config.headers['token'] = 'BFD804F3A3194FBBBE113962222839F6';
// config.headers['token'] = 'F8209898391C40A0B8DBC1ED9E157291'; // config.headers['token'] = 'F8209898391C40A0B8DBC1ED9E157291';
config.headers['token'] = '3167CD6495A14C14AEF28AB99F69984D'; config.headers['token'] = 'F64D5633857D4E16B3C2CCE5E48B0D1E';
}else{ }else{
config.headers['token'] = localStorage.getItem('storageToken') config.headers['token'] = localStorage.getItem('storageToken')
} }
......
...@@ -54,7 +54,7 @@ service.interceptors.request.use(config => { ...@@ -54,7 +54,7 @@ service.interceptors.request.use(config => {
} }
if( process.env.BUILD_ENV == "development" ){ // 本地开发环境qgit if( process.env.BUILD_ENV == "development" ){ // 本地开发环境qgit
// console.log('环境变量>>>> ', process.env.BUILD_ENV); // console.log('环境变量>>>> ', process.env.BUILD_ENV);
config.headers['token'] = 'C43C516E69594935B8583EDB243BB797'; config.headers['token'] = 'F64D5633857D4E16B3C2CCE5E48B0D1E';
// config.headers['token'] = localStorage.getItem('storageToken') // config.headers['token'] = localStorage.getItem('storageToken')
}else{ }else{
config.headers['token'] = localStorage.getItem('storageToken') config.headers['token'] = localStorage.getItem('storageToken')
......
<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
<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
...@@ -404,6 +404,12 @@ ...@@ -404,6 +404,12 @@
icon: 'el-icon-setting', icon: 'el-icon-setting',
index: 'template-manager' index: 'template-manager'
}; };
const advertSimpleManage = {
title: '教培项目广告位管理',
icon: 'el-icon-setting',
index: 'advert-simple-manage'
};
const eduRole = { const eduRole = {
title: '角色权限', title: '角色权限',
icon: 'el-icon-menu', icon: 'el-icon-menu',
...@@ -467,6 +473,7 @@ ...@@ -467,6 +473,7 @@
vm.items[1].subs.push(itemComponent); vm.items[1].subs.push(itemComponent);
vm.items[1].subs.push(templateManager); vm.items[1].subs.push(templateManager);
vm.items[1].subs.push(followSider); vm.items[1].subs.push(followSider);
vm.items[1].subs.push(advertSimpleManage);
vm.items.push(eduRole); vm.items.push(eduRole);
vm.items.push(cme); vm.items.push(cme);
vm.items.push(yqRange); vm.items.push(yqRange);
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册