mirror of
https://gitee.com/was666/as-editor.git
synced 2025-05-11 21:51:34 +08:00
605 lines
15 KiB
Vue
605 lines
15 KiB
Vue
<template>
|
|
<div class="pictureadsstyle">
|
|
<!-- 标题 -->
|
|
<h2>图片广告</h2>
|
|
|
|
<!-- 表单 -->
|
|
<el-form label-width="80px" :model="datas" size="small">
|
|
<!-- 标题内容 -->
|
|
<el-form-item label="选择模板" class="lef">
|
|
<p style="color: #000">{{ styleText }}</p>
|
|
</el-form-item>
|
|
|
|
<!-- 轮播图选择 -->
|
|
<div class="swiperType">
|
|
<el-tooltip
|
|
class="item"
|
|
effect="dark"
|
|
content="一行一个"
|
|
placement="bottom"
|
|
>
|
|
<span
|
|
class="iconfont icon-yihangyige"
|
|
style="font-size: 21px"
|
|
:class="datas.swiperType === 0 ? 'active' : ''"
|
|
@click="datas.swiperType = 0"
|
|
/>
|
|
</el-tooltip>
|
|
|
|
<el-tooltip
|
|
class="item"
|
|
effect="dark"
|
|
content="轮播海报"
|
|
placement="bottom"
|
|
>
|
|
<span
|
|
class="iconfont icon-icon_tupian_lunbohaibao"
|
|
style="font-size: 20px"
|
|
:class="datas.swiperType === 1 ? 'active' : ''"
|
|
@click="datas.swiperType = 1"
|
|
/>
|
|
</el-tooltip>
|
|
|
|
<el-tooltip
|
|
class="item"
|
|
effect="dark"
|
|
content="多图单行"
|
|
placement="bottom"
|
|
>
|
|
<span
|
|
class="iconfont icon-daohanghengxianghuadong"
|
|
style="font-size: 24px"
|
|
:class="datas.swiperType === 2 ? 'active' : ''"
|
|
@click="datas.swiperType = 2"
|
|
/>
|
|
</el-tooltip>
|
|
|
|
<el-tooltip
|
|
class="item"
|
|
effect="dark"
|
|
content="立体轮播"
|
|
placement="bottom"
|
|
>
|
|
<span
|
|
class="iconfont icon-xiaotuhengxianghuadong"
|
|
style="font-size: 24px"
|
|
:class="datas.swiperType === 3 ? 'active' : ''"
|
|
@click="datas.swiperType = 3"
|
|
/>
|
|
</el-tooltip>
|
|
</div>
|
|
|
|
<!-- 下划线 -->
|
|
<div class="bor" />
|
|
|
|
<h5 style="color: #000; font-size: 14px">添加图片</h5>
|
|
<p style="color: #969799; font-size: 12px; margin-top: 10px">
|
|
拖动选中的导航可对其排序
|
|
</p>
|
|
|
|
<!-- 图片广告 -->
|
|
<div v-if="datas.imageList[0]">
|
|
<vuedraggable v-model="datas.imageList" v-bind="dragOptions">
|
|
<transition-group>
|
|
<section
|
|
class="imgBanner"
|
|
v-for="(item, index) in datas.imageList"
|
|
:key="item + index"
|
|
>
|
|
<i class="el-icon-circle-close" @click="deleteimg(index)" />
|
|
<!-- 图片 -->
|
|
<div class="imag">
|
|
<img :src="item.src" alt draggable="false" />
|
|
</div>
|
|
<!-- 标题和链接 -->
|
|
<div class="imgText">
|
|
<el-input
|
|
v-model="item.text"
|
|
placeholder="请输入标题，也可不填"
|
|
size="mini"
|
|
></el-input>
|
|
<!-- <el-select v-model="item.http.name" placeholder="请选择图片跳转链接" size="mini" @change="changeId" @visible-change="getOption">
|
|
<el-option
|
|
v-for="item in options"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="[index,item]">
|
|
</el-option>
|
|
</el-select>-->
|
|
|
|
<!-- 选择类型 -->
|
|
<div class="select-type">
|
|
<el-select
|
|
style="width: 60%"
|
|
v-model="item.linktype"
|
|
placeholder="请选择跳转类型"
|
|
size="mini"
|
|
@change="selectType(index)"
|
|
>
|
|
<el-option
|
|
v-for="item in optionsType"
|
|
:key="item.name"
|
|
:label="item.name"
|
|
:value="item.type"
|
|
></el-option>
|
|
</el-select>
|
|
|
|
<!-- 选择 -->
|
|
<el-select
|
|
style="width: 100%"
|
|
v-model="item.http.name"
|
|
v-if="item.linktype !== '11'"
|
|
placeholder="请选择图片跳转链接"
|
|
size="mini"
|
|
:no-data-text="emptyText"
|
|
@change="changeId"
|
|
@visible-change="
|
|
(isVisible) => {
|
|
return changeType(isVisible, item.linktype)
|
|
}
|
|
"
|
|
>
|
|
<el-option
|
|
v-for="item in options"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="[index, item]"
|
|
:disabled="item.disabled"
|
|
></el-option>
|
|
</el-select>
|
|
|
|
<!-- 输入外部链接 -->
|
|
<el-input
|
|
style="width: 100%"
|
|
v-if="item.linktype === '11'"
|
|
size="mini"
|
|
placeholder="请输入链接，输入前确保可以访问"
|
|
v-model="item.http.externalLink"
|
|
></el-input>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</transition-group>
|
|
</vuedraggable>
|
|
</div>
|
|
<!-- 上传图片 -->
|
|
<el-button
|
|
@click="$refs.upload.showUpload()"
|
|
class="uploadImg"
|
|
type="primary"
|
|
plain
|
|
>
|
|
<i class="el-icon-plus" />点击添加图片
|
|
</el-button>
|
|
|
|
<!-- 下划线 -->
|
|
<div class="bor"></div>
|
|
|
|
<el-form-item
|
|
class="lef"
|
|
label="一行个数"
|
|
v-show="datas.swiperType === 2"
|
|
>
|
|
<!-- 单选框 -->
|
|
<el-radio-group v-model="datas.rowindividual" class="radi">
|
|
<el-radio :label="2">2个</el-radio>
|
|
<el-radio :label="3">3个</el-radio>
|
|
<el-radio :label="4">4个</el-radio>
|
|
<el-radio :label="5">5个</el-radio>
|
|
<el-radio :label="6">6个</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
|
|
<div style="height: 10px" />
|
|
|
|
<!-- 图片倒角 -->
|
|
<el-form-item label="分页类型" class="lef borrediu">
|
|
<el-radio-group v-model="datas.pagingType" class="radi1">
|
|
<el-radio :label="0">不显示</el-radio>
|
|
<el-radio label="bullets">样式一</el-radio>
|
|
<el-radio label="fraction">样式二</el-radio>
|
|
<el-radio label="progressbar">样式三</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
|
|
<div style="height: 10px" />
|
|
|
|
<!-- 图片倒角 -->
|
|
<el-form-item label="图片倒角" class="lef borrediu">
|
|
<el-slider
|
|
v-model="datas.borderRadius"
|
|
:max="30"
|
|
input-size="mini"
|
|
show-input
|
|
></el-slider>
|
|
</el-form-item>
|
|
|
|
<div style="height: 10px" />
|
|
|
|
<!-- 页面边距 -->
|
|
<el-form-item
|
|
class="lef"
|
|
label="页面边距"
|
|
v-show="datas.swiperType === 0"
|
|
>
|
|
<el-slider
|
|
v-model="datas.pageMargin"
|
|
:max="20"
|
|
input-size="mini"
|
|
show-input
|
|
></el-slider>
|
|
</el-form-item>
|
|
|
|
<div style="height: 10px" />
|
|
|
|
<!-- 图片边距 -->
|
|
<el-form-item
|
|
class="lef"
|
|
label="图片边距"
|
|
v-show="datas.swiperType === 0 || datas.swiperType === 2"
|
|
>
|
|
<el-slider
|
|
v-model="datas.imageMargin"
|
|
:max="20"
|
|
input-size="mini"
|
|
show-input
|
|
></el-slider>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<!-- 上传图片 -->
|
|
<uploadimg ref="upload" @uploadInformation="uploadInformation" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import vuedraggable from 'vuedraggable' //拖拽组件
|
|
import uploadimg from '../../uploadImg' //图片上传
|
|
|
|
export default {
|
|
name: 'pictureadsstyle',
|
|
components: { vuedraggable, uploadimg },
|
|
props: {
|
|
datas: Object,
|
|
},
|
|
data() {
|
|
return {
|
|
optionsType: [
|
|
{
|
|
type: '1',
|
|
name: '视频',
|
|
},
|
|
{
|
|
type: '2',
|
|
name: '书籍',
|
|
},
|
|
{
|
|
type: '3',
|
|
name: '音频',
|
|
},
|
|
{
|
|
type: '6',
|
|
name: '直播',
|
|
},
|
|
{
|
|
type: '7',
|
|
name: '实物商品',
|
|
},
|
|
{
|
|
type: '10',
|
|
name: '跳转至历史页面',
|
|
},
|
|
{
|
|
type: '11',
|
|
name: '外部链接',
|
|
},
|
|
], // 选择跳转类型
|
|
options: [], //选择
|
|
dragOptions: {
|
|
animation: 200,
|
|
},
|
|
emptyText: '',
|
|
}
|
|
},
|
|
|
|
created() {
|
|
this.initImageList()
|
|
},
|
|
|
|
methods: {
|
|
// 初始化更新imageList数据
|
|
initImageList() {
|
|
this.datas.imageList = this.$utils.replaceImageList(this.datas.imageList)
|
|
console.log(this.datas.imageList, '------------created imageList')
|
|
},
|
|
|
|
// 提交
|
|
uploadInformation(res) {
|
|
this.datas.imageList.push({
|
|
src: res,
|
|
text: '',
|
|
http: {},
|
|
})
|
|
},
|
|
|
|
/* 删除图片 */
|
|
deleteimg(index) {
|
|
this.datas.imageList.splice(index, 1)
|
|
},
|
|
|
|
selectType(index) {
|
|
// 每次切换类型之前 清空之前选中跳转
|
|
this.datas.imageList[index].http = {}
|
|
// 清空 options
|
|
this.options = []
|
|
},
|
|
|
|
// 选择类型
|
|
changeType(isVisible, linkType) {
|
|
if (isVisible && linkType) {
|
|
this.emptyText = '正在搜索中'
|
|
|
|
if (
|
|
linkType === '1' ||
|
|
linkType === '2' ||
|
|
linkType === '6' ||
|
|
linkType === '3' ||
|
|
linkType === '7'
|
|
) {
|
|
/* 获取视频,音频,直播信息 */
|
|
this.$httpApi.newsList({ type: linkType }).then((res) => {
|
|
this.activ = 0
|
|
if (res.code !== 0) return this.$message.error(res.msg)
|
|
res.data.length === 0 ? (this.emptyText = '暂无数据') : null
|
|
this.options = res.data
|
|
|
|
// 校验数据
|
|
this.options = this.$utils.filterCommodityData(
|
|
linkType,
|
|
this.options
|
|
)
|
|
})
|
|
} else if (linkType === '10') {
|
|
// 历史页面
|
|
this.$httpApi.shopTemplate().then((res) => {
|
|
if (res.code !== 0) return this.$message.error(res.msg)
|
|
this.options = res.data.shopTemplateList
|
|
|
|
// 校验数据
|
|
this.options = this.$utils.filterCommodityData(
|
|
linkType,
|
|
this.options
|
|
)
|
|
})
|
|
}
|
|
}
|
|
},
|
|
|
|
changeId(res) {
|
|
// 商品类型只匹配 1 2 3 6
|
|
if (
|
|
this.$utils.coursewareMetchArr.includes(
|
|
this.datas.imageList[res[0]].linktype
|
|
)
|
|
) {
|
|
// 查询本地动态数据 然后再赋值
|
|
let dynamic = this.$utils.getCoursewareData(
|
|
this.datas.imageList[res[0]].linktype,
|
|
res[1].id
|
|
)
|
|
this.datas.imageList[res[0]].http = dynamic
|
|
} else {
|
|
this.datas.imageList[res[0]].http = res[1]
|
|
}
|
|
this.datas.imageList.forEach((item) => {
|
|
if (item.http.component) {
|
|
item.http.component = ''
|
|
}
|
|
})
|
|
console.log(this.datas.imageList, '-----------------------save data')
|
|
},
|
|
},
|
|
|
|
computed: {
|
|
styleText() {
|
|
let data
|
|
if (this.datas.swiperType === 0) return (data = '一行一个')
|
|
if (this.datas.swiperType === 1) return (data = '轮播海报')
|
|
if (this.datas.swiperType === 2) return (data = '多图单行')
|
|
if (this.datas.swiperType === 3) return (data = '立体模式')
|
|
if (this.datas.swiperType === 4) return (data = '导航横向滑动')
|
|
|
|
return data
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.pictureadsstyle {
|
|
width: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
padding: 0 10px;
|
|
box-sizing: border-box;
|
|
|
|
/* 标题 */
|
|
h2 {
|
|
padding: 24px 16px 24px 0;
|
|
margin-bottom: 15px;
|
|
border-bottom: 1px solid #f2f4f6;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #323233;
|
|
}
|
|
|
|
.lef {
|
|
/deep/.el-form-item__label {
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
/* 轮播图样式 */
|
|
.swiperType {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
span {
|
|
display: inline-block;
|
|
width: 58px;
|
|
height: 32px;
|
|
text-align: center;
|
|
line-height: 32px;
|
|
background: #ebedf0;
|
|
color: #979797;
|
|
border: 1px solid #fff;
|
|
cursor: pointer;
|
|
transition: all 0.5s;
|
|
|
|
&:hover {
|
|
border: 1px solid #155bd4;
|
|
color: #155bd4;
|
|
}
|
|
|
|
&.active {
|
|
border: 1px solid #155bd4;
|
|
background-color: #e0edff;
|
|
color: #155bd4;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 圆角 */
|
|
.borrediu {
|
|
span {
|
|
display: inline-block;
|
|
width: 48px;
|
|
height: 26px;
|
|
text-align: center;
|
|
line-height: 26px;
|
|
background: #ebedf0;
|
|
color: #979797;
|
|
border: 1px solid #fff;
|
|
cursor: pointer;
|
|
transition: all 0.5s;
|
|
|
|
&:hover {
|
|
border: 1px solid #155bd4;
|
|
color: #155bd4;
|
|
}
|
|
|
|
&.active {
|
|
border: 1px solid #155bd4;
|
|
background-color: #e0edff;
|
|
color: #155bd4;
|
|
}
|
|
}
|
|
}
|
|
|
|
/deep/.radi .el-radio {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
/deep/.radi1 .el-radio {
|
|
margin-right: 7px;
|
|
.el-radio__label {
|
|
padding-left: 5px;
|
|
}
|
|
}
|
|
|
|
/* 上传图片按钮 */
|
|
.uploadImg {
|
|
width: 345px;
|
|
height: 40px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
// 上传弹框内容部分
|
|
/deep/.uploadIMG .el-dialog__body {
|
|
height: 280px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
justify-content: center;
|
|
}
|
|
|
|
.disable {
|
|
/deep/.el-upload {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* 图片广告列表 */
|
|
.imgBanner {
|
|
padding: 6px 12px;
|
|
margin: 16px 7px;
|
|
border-radius: 2px;
|
|
background-color: #fff;
|
|
box-shadow: 0 0 4px 0 rgba(10, 42, 97, 0.2);
|
|
display: flex;
|
|
position: relative;
|
|
|
|
/* 删除图标 */
|
|
.el-icon-circle-close {
|
|
position: absolute;
|
|
right: -10px;
|
|
top: -10px;
|
|
cursor: pointer;
|
|
font-size: 19px;
|
|
}
|
|
|
|
/* 图片 */
|
|
.imag {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
cursor: pointer;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: inline-block;
|
|
}
|
|
span {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
font-size: 12px;
|
|
position: absolute;
|
|
left: 0px;
|
|
bottom: 0px;
|
|
display: inline-block;
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #fff;
|
|
height: 20px;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
|
|
/* 图片字 */
|
|
.imgText {
|
|
width: 80%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
padding-left: 20px;
|
|
justify-content: space-between;
|
|
.select-type {
|
|
display: flex;
|
|
/deep/.el-select {
|
|
.el-input {
|
|
input {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|