sdz/cmanager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

flat: 广告管理修改

Browse Source
This commit is contained in:
Apcallover
2024-04-19 16:17:49 +08:00
parent 03e881162e
commit 21ca5f6eaf
2 changed files with 189 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
src/views/manage/advertisement/advertisementBody.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div class="title">{{menuDetail.menuName}}</div> <!-- <div class="title">{{menuDetail.menuName}}</div>-->
<avue-crud <avue-crud
:option="option" :option="option"
:table-loading="loading" :table-loading="loading"
@@ -17,11 +17,11 @@
style="width: 50px; height: 50px" style="width: 50px; height: 50px"
fit="contain" fit="contain"
:src="row.image" :src="row.image"
> >
</el-image> </el-image>
</template> </template>
<template slot="link" slot-scope="{row}"> <template slot="link" slot-scope="{row}">
<p @click="openUrl(row)">{{row.link}}</p> <p @click="openUrl(row)">{{ row.link }}</p>
</template> </template>
<template slot="sort" slot-scope="{row}"> <template slot="sort" slot-scope="{row}">
<el-button type="text" v-if="row.sort !== 1" @click="move('up', row)">上移</el-button> <el-button type="text" v-if="row.sort !== 1" @click="move('up', row)">上移</el-button>
@@ -29,7 +29,7 @@
<el-button type="text" v-if="row.sort !== 1" @click="move('first', row)">置顶</el-button> <el-button type="text" v-if="row.sort !== 1" @click="move('first', row)">置顶</el-button>
</template> </template>
<template slot="isShow" slot-scope="{row}"> <template slot="isShow" slot-scope="{row}">
<el-button type="text" @click="statusSelect(row)">{{row.isShow === '1'?"显示":"不显示"}}</el-button> <el-button type="text" @click="statusSelect(row)">{{ row.isShow === '1' ? "显示" : "不显示" }}</el-button>
</template> </template>
<template slot="menu" slot-scope="{row}"> <template slot="menu" slot-scope="{row}">
<el-button type="text" @click="modify(row)">编辑</el-button> <el-button type="text" @click="modify(row)">编辑</el-button>
@@ -38,7 +38,8 @@
</avue-crud> </avue-crud>
<el-drawer :title="drawerTitle" :visible.sync="viewDrawer" size="60%"> <el-drawer :title="drawerTitle" :visible.sync="viewDrawer" size="60%">
<avue-form :option="formOption" :upload-before="uploadBefore" v-model="formDrawer" @submit="handleSubmit" ref="form"> <avue-form :option="formOption" :upload-before="uploadBefore" v-model="formDrawer" @submit="handleSubmit"
ref="form">
</avue-form> </avue-form>
</el-drawer> </el-drawer>
@@ -46,32 +47,33 @@
</template> </template>
<script> <script>
import { putFile } from "@/api/resource/oss"; import {putFile} from "@/api/resource/oss";
import {isURL} from '@/util/validate' import {isURL} from '@/util/validate'
import { import {
getCarouselList, getCarouselList,
getCarouselAdd, getCarouselAdd,
getCarouselEdit, getCarouselEdit,
getCarouselDel, getCarouselDel,
getCarouselMoveup, getCarouselMoveup,
getCarouselMovedown, getCarouselMovedown,
getCarouselMoveFirst, getCarouselMoveFirst,
} from '@/api/help/advertisement/advertisementBody' } from '@/api/help/advertisement/advertisementBody'
const wxStatus = process.env.VUE_APP_SITE
const wxStatus = process.env.VUE_APP_SITE
export default { export default {
name: "advertisementBody", name: "advertisementBody",
inject:["recommend"], inject: ["recommend"],
props: { props: {
menuDetail: {} menuDetail: {}
}, },
watch: {}, watch: {},
data () { data() {
return { return {
wxStatus, wxStatus,
viewDrawer:false, viewDrawer: false,
dialogShow:true, dialogShow: true,
loading:false, loading: false,
option: { option: {
height: "auto", height: "auto",
tip: false, tip: false,
@@ -83,7 +85,7 @@ export default {
selection: false, selection: false,
viewBtn: false, viewBtn: false,
addBtn: false, addBtn: false,
editBtn:false, editBtn: false,
delBtn: false, delBtn: false,
columnBtn: false, columnBtn: false,
menuWidth: 300, menuWidth: 300,
@@ -133,15 +135,15 @@ export default {
total: 100, total: 100,
}, },
formOption: { formOption: {
labelWidth:120, labelWidth: 120,
column: [ column: [
{ {
label: "广告位名称", label: "广告位名称",
prop: "name", prop: "name",
span: 24, span: 24,
row: true, row: true,
maxlength:50, maxlength: 50,
showWordLimit:true, showWordLimit: true,
rules: [ rules: [
{ {
required: true, required: true,
@@ -178,7 +180,7 @@ export default {
prop: "link", prop: "link",
span: 24, span: 24,
row: true, row: true,
showWordLimit:true showWordLimit: true
}, },
{ {
label: "状态", label: "状态",
@@ -193,8 +195,8 @@ export default {
value: 2 value: 2
}], }],
hide: true, hide: true,
mock:{ mock: {
type:'dic', type: 'dic',
}, },
}, },
] ]
@@ -209,7 +211,7 @@ export default {
}, },
methods: { methods: {
isURL, isURL,
openUrl (row) { openUrl(row) {
var url = row.link var url = row.link
// 验证url是否存在http前缀 // 验证url是否存在http前缀
var status = this.isURL(url) var status = this.isURL(url)
@@ -223,10 +225,10 @@ export default {
this.formDrawer.image = '' this.formDrawer.image = ''
done() done()
}, },
statusSelect (row) { statusSelect(row) {
row.status = !row.status row.status = !row.status
}, },
add () { add() {
this.drawerTitle = "新增图片" this.drawerTitle = "新增图片"
this.formDrawer = { this.formDrawer = {
isShow: 2, isShow: 2,
@@ -239,13 +241,13 @@ export default {
this.$refs.form.clearValidate(); this.$refs.form.clearValidate();
}) })
}, },
modify (row){ modify(row) {
this.drawerTitle = "广告位编辑-订单管理" this.drawerTitle = "广告位编辑-订单管理"
this.formDrawer = JSON.parse(JSON.stringify(row)) this.formDrawer = JSON.parse(JSON.stringify(row))
this.formDrawer.isShow = Number(row.isShow) this.formDrawer.isShow = Number(row.isShow)
this.viewDrawer = true this.viewDrawer = true
}, },
del (row) { del(row) {
this.$confirm('是否删除此数据, 是否继续?', '提示', { this.$confirm('是否删除此数据, 是否继续?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
@@ -266,7 +268,7 @@ export default {
}); });
}, },
// 新增 // 新增
handleSubmit (form, done) { handleSubmit(form, done) {
if (this.drawerTitle === '新增图片') { if (this.drawerTitle === '新增图片') {
if (this.recommend.titleList[0].select) { if (this.recommend.titleList[0].select) {
this.pcAdd() this.pcAdd()
@@ -293,7 +295,7 @@ export default {
}) })
} }
}, },
pcAdd () { pcAdd() {
var type = 5 var type = 5
var menuId = this.recommend.menuDetail.menuId var menuId = this.recommend.menuDetail.menuId
var params = { var params = {
@@ -313,7 +315,7 @@ export default {
this.refreshChange() this.refreshChange()
}) })
}, },
bannerAdd () { bannerAdd() {
var type = this.envType() var type = this.envType()
var params = { var params = {
type, type,
@@ -332,7 +334,7 @@ export default {
}) })
}, },
/* 表格方法 */ /* 表格方法 */
refreshChange () { refreshChange() {
if (this.recommend.titleList[0].select) { if (this.recommend.titleList[0].select) {
this.onLoad() this.onLoad()
} else if (this.recommend.titleList[1].select) { } else if (this.recommend.titleList[1].select) {
@@ -351,13 +353,13 @@ export default {
this.loading = false; this.loading = false;
}); });
}, },
bannerInit (){ bannerInit() {
this.data = [] this.data = []
this.loading = true; this.loading = true;
// var type = this.envType() // var type = this.envType()
var type = 1; var type = 1;
getCarouselList( getCarouselList(
type, type,
).then((res) => { ).then((res) => {
this.data = res.data.data; this.data = res.data.data;
this.loading = false; this.loading = false;
@@ -367,8 +369,8 @@ export default {
// jlOrHs: 1 企嘉云 2 衡水 // jlOrHs: 1 企嘉云 2 衡水
// jlOrHs === 1 ? type 根绝所选划分 1(wx/h5):2(主站) // jlOrHs === 1 ? type 根绝所选划分 1(wx/h5):2(主站)
// jlOrHs === 2 ? type 根绝所选划分 3(wx/h5):4(主站) // jlOrHs === 2 ? type 根绝所选划分 3(wx/h5):4(主站)
envType () { envType() {
var jlOrHs = (this.wxStatus === 'default' || this.wxStatus ==='fangzhen') ? 1 : 2; var jlOrHs = (this.wxStatus === 'default' || this.wxStatus === 'fangzhen') ? 1 : 2;
var type = 1; var type = 1;
if (jlOrHs === 1) { if (jlOrHs === 1) {
type = this.recommend.menuDetail.name === '小程序、H5首页' ? 1 : 2; type = this.recommend.menuDetail.name === '小程序、H5首页' ? 1 : 2;
@@ -378,18 +380,16 @@ export default {
return type return type
}, },
// 排序 // 排序
move (type, row) { move(type, row) {
if (type === 'up') { if (type === 'up') {
this.moveUp(JSON.stringify(row)) this.moveUp(JSON.stringify(row))
} else } else if (type === 'down') {
if (type === 'down') {
this.moveDown(JSON.stringify(row)) this.moveDown(JSON.stringify(row))
} else } else if (type === 'first') {
if (type === 'first') {
this.moveFirst(JSON.stringify(row)) this.moveFirst(JSON.stringify(row))
} }
}, },
moveUp (row) { moveUp(row) {
getCarouselMoveup(row).then(() => { getCarouselMoveup(row).then(() => {
this.$message({ this.$message({
type: 'success', type: 'success',
@@ -398,7 +398,7 @@ export default {
this.refreshChange() this.refreshChange()
}) })
}, },
moveDown (row) { moveDown(row) {
getCarouselMovedown(row).then(() => { getCarouselMovedown(row).then(() => {
this.$message({ this.$message({
type: 'success', type: 'success',
@@ -407,7 +407,7 @@ export default {
this.refreshChange() this.refreshChange()
}) })
}, },
moveFirst (row) { moveFirst(row) {
getCarouselMoveFirst(row).then(() => { getCarouselMoveFirst(row).then(() => {
this.$message({ this.$message({
type: 'success', type: 'success',
@@ -417,20 +417,19 @@ export default {
}) })
} }
}, },
computed: { computed: {}
}
} }
</script> </script>
<style scoped> <style scoped>
.title{ .title {
height: 24px; height: 24px;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
color: rgba(0, 0, 0, 0.85); color: rgba(0, 0, 0, 0.85);
line-height: 24px; line-height: 24px;
padding-bottom: 15px; padding-bottom: 15px;
margin-bottom: 10px; margin-bottom: 10px;
border-bottom: 1px solid #E9E9E9; border-bottom: 1px solid #E9E9E9;
} }
</style> </style>

250
src/views/manage/advertisement/index.vue
View File

@@ -1,25 +1,27 @@
<template> <template>
<div> <div>
<basic-container> <basic-container>
<div style="border-bottom: 1px solid #1890FF;"> <!-- <div style="border-bottom: 1px solid #1890FF;">-->
<button class="btn" v-for="item in titleList" :key="item.name" :class="item.select ? 'primary' : ''" @click="titleActive(item)">{{item.name}}</button> <!-- <button class="btn" v-for="item in titleList" :key="item.name" :class="item.select ? 'primary' : ''"-->
</div> <!-- @click="titleActive(item)">{{ item.name }}-->
<div style="height: 23px;"></div> <!-- </button>-->
<!-- </div>-->
<!-- <div style="height: 23px;"></div>-->
<div class="recommendBody"> <div class="recommendBody">
<div v-if="status" class="leftBox"> <!-- <div v-if="status" class="leftBox">-->
<!-- <menuLeft :menu="menu" :loading="leftLoading" @change="menuVal"></menuLeft> --> <!-- &lt;!&ndash; <menuLeft :menu="menu" :loading="leftLoading" @change="menuVal"></menuLeft> &ndash;&gt;-->
<el-menu> <!-- <el-menu>-->
<el-menu-item v-for="(item, index) in menuList" :key="index" :index="index +1" @click="menuVal(item)"> <!-- <el-menu-item v-for="(item, index) in menuList" :key="index" :index="index +1" @click="menuVal(item)">-->
<div slot="title" style="display: flex;justify-content: space-between;align-items: center;"> <!-- <div slot="title" style="display: flex;justify-content: space-between;align-items: center;">-->
<span>{{item.name}}</span> <!-- <span>{{item.name}}</span>-->
<!-- <el-switch v-model="item.status"></el-switch>--> <!-- &lt;!&ndash; <el-switch v-model="item.status"></el-switch>&ndash;&gt;-->
</div> <!-- </div>-->
</el-menu-item> <!-- </el-menu-item>-->
</el-menu> <!-- </el-menu>-->
</div> <!-- </div>-->
<div v-else class="leftBox"> <!-- <div v-else class="leftBox">-->
<!-- -->
</div> <!-- </div>-->
<div class="containerWrap"> <div class="containerWrap">
<advertisement-body ref="advertisementBody" :menuDetail="menuDetail"></advertisement-body> <advertisement-body ref="advertisementBody" :menuDetail="menuDetail"></advertisement-body>
@@ -31,120 +33,124 @@
</template> </template>
<script> <script>
import {mapGetters} from "vuex"; import {mapGetters} from "vuex";
import menuLeft from '../recommend/manage/menuLeft' import menuLeft from '../recommend/manage/menuLeft'
import advertisementBody from "./advertisementBody"; import advertisementBody from "./advertisementBody";
import { import {
routesCompany routesCompany
} from '@/api/help/recommend/route' } from '@/api/help/recommend/route'
export default { export default {
name: "index", name: "index",
components: { components: {
menuLeft, menuLeft,
advertisementBody advertisementBody
}, },
provide() { provide() {
return { return {
recommend: this, recommend: this,
}; };
}, },
created() { created() {
this.leftLoading = true this.leftLoading = true
routesCompany().then(res => { routesCompany().then(res => {
this.menu = res.data.data this.menu = res.data.data
this.leftLoading = false this.leftLoading = false
}) })
}, },
data () { data() {
return { return {
leftLoading: false, leftLoading: false,
menu: [], menu: [],
titleList: [ titleList: [
{ {
name: '轮播图', name: '轮播图',
select: true select: true
}
],
menuList: [
{
name: "小程序、H5首页",
menuName: "小程序、H5首页",
},
// {
// name: "门户首页",
// menuName: "门户首页",
// }
],
menuDetail: {}
}
},
mounted() {
this.$refs.advertisementBody.bannerInit()
},
methods: {
titleActive (item) {
if(item.select)return
this.titleList.forEach(e => {
e.select = false
})
item.select = true
this.menuDetail = {}
},
menuVal (item){
this.menuDetail = JSON.parse(JSON.stringify(item))
if (this.titleList[0].select) {
this.$refs.advertisementBody.onLoad()
// this.$refs.advertisementBody.bannerInit()
} else if (this.titleList[1].select) {
this.$refs.advertisementBody.bannerInit()
} }
}
],
menuList: [
{
name: "小程序、H5首页",
menuName: "小程序、H5首页",
},
// {
// name: "门户首页",
// menuName: "门户首页",
// }
],
menuDetail: {}
}
},
mounted() {
this.$refs.advertisementBody.bannerInit()
},
methods: {
titleActive(item) {
if (item.select) return
this.titleList.forEach(e => {
e.select = false
})
item.select = true
this.menuDetail = {}
}, },
computed: { menuVal(item) {
...mapGetters([ this.menuDetail = JSON.parse(JSON.stringify(item))
// "menu", if (this.titleList[0].select) {
]), this.$refs.advertisementBody.onLoad()
status(){ // this.$refs.advertisementBody.bannerInit()
return this.titleList[0].select } else if (this.titleList[1].select) {
this.$refs.advertisementBody.bannerInit()
} }
} }
},
computed: {
...mapGetters([
// "menu",
]),
status() {
return this.titleList[0].select
}
} }
}
</script> </script>
<style scoped> <style scoped>
.recommendBody{ .recommendBody {
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
} }
.containerWrap{
padding-top: 0 !important;
flex:1;
overflow: auto;
}
.leftBox{
width: 260px;
background: #FAFAFA;
margin-right: 23px;
}
.btn{
width: 144px;
height: 32px;
background: #FFFFFF;
border-radius: 4px 4px 0px 0px;
border: 1px solid #D9D9D9;
font-size: 14px; .containerWrap {
font-weight: 400; padding-top: 0 !important;
color: rgba(0, 0, 0, 0.65); flex: 1;
line-height: 32px; overflow: auto;
}
margin-right: 16px; .leftBox {
} width: 260px;
.primary{ background: #FAFAFA;
background-color: #1890FF !important; margin-right: 23px;
color: #FFFFFF !important; }
}
.btn {
width: 144px;
height: 32px;
background: #FFFFFF;
border-radius: 4px 4px 0px 0px;
border: 1px solid #D9D9D9;
font-size: 14px;
font-weight: 400;
color: rgba(0, 0, 0, 0.65);
line-height: 32px;
margin-right: 16px;
}
.primary {
background-color: #1890FF !important;
color: #FFFFFF !important;
}
</style> </style>