Skip to content

E
ElectricitySheep
Commit 7ae44ce8 authored by zhengke's avatar zhengke
Browse files
Options

修改

parent c268895f
Hide whitespace changes
Inline Side-by-side
Showing with 707 additions and 131 deletions
src/components/StoreDesign/videoManage.vue
View file @ 7ae44ce8
<template>
<div class="projectClass">
<template v-if="projectClassIsShowAdd">
<template v-if="videoIsShowAdd">
<div class="head-title">
视频管理
<el-button @click="projectClassIsShowAdd=false" style="float:right;margin-top: -5px;" size="small"
视频
<el-button @click="videoIsShowAdd=false" style="float:right;margin-top: -5px;" size="small"
type="primary">
添加视频
</el-button>
......@@ -48,22 +48,45 @@
</template>
<template v-else>
<div class="head-title">
<span @click="projectClassIsShowAdd=true" style="color:rgb(64, 158, 255);cursor:pointer;">文章</span><span
style="margin:0 9px;color:#C0C4CC">/</span><span>文章编辑</span>
<span @click="videoIsShowAdd=true" style="color:rgb(64, 158, 255);cursor:pointer;">视频</span><span
style="margin:0 9px;color:#C0C4CC">/</span><span>视频编辑</span>
</div>
<div class="content">
<div class="projectClass_condiv">
<el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="100px" style="padding:0 20px;">
<el-form-item label="专题分类名称" prop="title">
<el-input v-model="addMsg.TopicName" size="small" placeholder="请输入名称" maxlength="20" />
<el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="120px" style="padding:0 20px;">
<el-form-item label="标题" prop="Title">
<el-input v-model="addMsg.Title" size="small" maxlength="50" />
</el-form-item>
<el-form-item label="视频来源">
<el-radio-group v-model="addMsg.SourceType">
<el-radio :label="1">源地址</el-radio>
<el-radio :label="2">腾讯</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="视频链接">
<el-input placeholder="请输入链接" v-model="addMsg.VedioUrl" size="small">
<el-button slot="append">选择文件</el-button>
</el-input>
<el-link class="box-grow-0" type="primary" style="font-size:12px" v-if='addMsg.VedioUrl' :underline="false"
target="_blank" :href="data.video_url">视频预览
</el-link>
</el-form-item>
<el-form-item label="封面图" prop="VedioCoverImg">
<el-tooltip class="item" effect="dark" content="建议尺寸:750 * 400" placement="top">
<el-button size="mini" @click="choicImg=true">选择图片</el-button>
</el-tooltip>
<div class="customize-share-title">
<div class="zk_pic_box" flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(addMsg.VedioCoverImg) + ')'}">
<i v-if="addMsg.VedioCoverImg==''" class="el-icon-picture-outline"></i>
</div>
</div>
</el-form-item>
<el-form-item label="排序">
<el-input type="text" v-model="addMsg.SortNum" size="small" @keyup.native="checkInteger(addMsg,'SortNum')"
placeholder="请输入排序" maxlength="4" />
<el-input v-model="addMsg.SortNum" size="small" maxlength="50" />
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="addMsg.IsDisable" active-color="#409EFF" :active-value="1" :inactive-value="0">
</el-switch>
<el-form-item label="详情介绍">
<el-input type="textarea" v-model="addMsg.VedioIntro" :rows="4" maxlength="200" />
</el-form-item>
</el-form>
</div>
......@@ -71,10 +94,18 @@
<el-button size="small" style="margin-top:20px;padding:9px 25px;" type="primary" @click="submitform('addMsg')">保存
</el-button>
</template>
<!-- 选择图片文件 -->
<el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
<ChooseImg @SelectId="SelectId"></ChooseImg>
</el-dialog>
</div>
</template>
<script>
import ChooseImg from "@/components/global/ChooseImg.vue";
export default {
components: {
ChooseImg
},
data() {
return {
//是否线下链接弹窗
......@@ -86,19 +117,28 @@
TopicName: ""
},
total: 0,
projectClassIsShowAdd: true,
videoIsShowAdd: true,
choicImg:false,
addMsg: {
Id: 0, //编号
TopicName: '', //专题分类名称
SortNum: 0, //排序
IsDisable: 0, //状态
Id: 0, //视频编号
Title: '', //视频标题
SourceType: 1, //视频来源(1-源地址，2-腾讯)
VedioUrl:'', //视频链接
VedioCoverImg:'', //封面图
SortNum:'', //排序
VedioIntro:'' //视频详情介绍
},
rules: {
TopicName: [{
Title: [{
required: true,
message: '专题分类名称',
message: '标题不能为空',
trigger: 'change'
}],
VedioCoverImg:[{
required: true,
message: '封面图',
trigger: 'change'
}]
},
};
......@@ -135,54 +175,7 @@
saveMsg() {
this.apipost("/api/MContent/SetTopicType", this.addMsg, res => {
if (res.data.resultCode == 1) {
this.projectClassIsShowAdd = true;
this.getList();
this.Success(res.data.message);
} else {
this.Info(res.data.message);
}
})
},
//修改
EditprojectClass(item) {
this.apipost("/api/MContent/GetTopicType", {
Id: item.Id
}, res => {
if (res.data.resultCode == 1) {
this.projectClassIsShowAdd = false;
var jsonData = res.data.data;
this.addMsg.Id = jsonData.Id;
this.addMsg.TopicName = jsonData.TopicName;
this.addMsg.SortNum = jsonData.SortNum;
this.addMsg.IsDisable = jsonData.IsDisable;
} else {
this.Info(res.data.message);
}
})
},
//删除
RemoveprojectClass(item) {
var that = this;
that.Confirm("是否要删除?", function () {
that.apipost("/api/MContent/RemoveTopicType", {
Id: item.Id
}, res => {
if (res.data.resultCode == 1) {
that.getList();
} else {
that.Info(res.data.message);
}
})
})
},
//更新状态
updateIsDisable(item) {
this.apipost("/api/MContent/UpdateTopicTypeStatus", {
Id: item.Id,
IsDisable: item.IsDisable
}, res => {
if (res.data.resultCode == 1) {
this.ArticleIsShowAdd = true;
this.videoIsShowAdd = true;
this.getList();
this.Success(res.data.message);
} else {
......@@ -190,8 +183,10 @@
}
})
},
input(obj) {
this.addMsg.content = obj
//选择图片
SelectId(msg) {
this.addMsg.VedioCoverImg = msg.url;
this.choicImg = false;
},
},
mounted() {
......
src/components/sallCenter/plugin/topic.vue 0 → 100644
View file @ 7ae44ce8
<style>
/* ------------------预览------------------- */
.diy-topic .diy-component-preview {
width: 100%;
}
.diy-topic .diy-component-preview .diy-topic-normal {
width: 100%;
padding: 10px;
background: #fff;
}
.diy-topic .diy-component-preview .cat-list {
width: 100%;
overflow-x: auto;
background: #fff;
}
.diy-topic .diy-component-preview .cat-list .cat-item {
height: 80px;
padding: 0 10px;
text-align: center;
max-width: 100%;
white-space: nowrap;
margin: 0 20px;
}
.diy-topic .diy-component-preview .cat-list .cat-item.active {
border-bottom: 4px #ff4544 solid;
}
.diy-topic .diy-component-preview .topic-list {}
.diy-topic .diy-component-preview .topic-list .topic-item {
padding: 24px;
margin-top: 12px;
background: #fff;
}
.diy-topic .diy-component-preview .topic-list .topic-item .browse {
font-size: 24px;
color: #888;
margin-top: 12px;
}
.diy-topic .diy-component-preview .topic-list .topic-item .topic-pic {
background: #eee;
}
/* ------------------设置------------------- */
.diy-topic .diy-component-edit .diy-topic-label {
width: 82px;
}
.diy-topic .topic-edit-options {
position: relative;
overflow: visible;
}
.diy-topic .topic-edit-options .delete {
height: 25px;
line-height: 25px;
width: 25px;
padding: 0;
text-align: center;
border: none;
border-radius: 0;
position: absolute;
margin-left: 0;
}
.topiclogo_img1 {
background-size: 100% 100%;
background-position: center center;
width: 104px;
height: 32px;
border-radius: 0%;
margin-right: 20px;
}
.topiclogo_img2 {
background-size: 100% 100%;
background-position: center center;
width: 104px;
height: 50px;
border-radius: 0%;
margin-right: 20px;
}
.topiclogo_img3 {
background-size: 100% 100%;
background-position: center center;
width: 54px;
height: 28px;
border-radius: 0%;
margin-right: 10px;
}
.topic-Mypic {
background-color:#eee;
}
.topic-Mypic img {
width: 100%;
height: 100%;
}
</style>
<template>
<div :class="{'active':topicData.isCked}">
<div class="diy-component-options" v-if="topicData.isCked">
<el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;" @click="delPlugin()"></el-button>
<el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button>
<el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)"
style="right: -25px; top: 0;"></el-button>
<el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)"
style="right: -25px; top: 30px;"></el-button>
</div>
<div class="diy-topic">
<div class="diy-component-preview">
<div class="diy-topic-normal" flex="dir:left cross:center" v-if="data.style == 'normal'">
<template v-if="data.count==1">
<div class="topiclogo_img1" :style="{backgroundImage:'url(' + getIconLink(data.logo_1) + ')'}"></div>
</template>
<template v-else>
<div class="topiclogo_img2" :style="{backgroundImage:'url(' + getIconLink(data.logo_2) + ')'}"></div>
</template>
<div :style="cStyle">
<div flex="dir:left cross:center" v-for="(topic,index) in cTopic" :key="index">
<div class="topiclogo_img3" :style="{backgroundImage:'url(' + getIconLink(data.icon) + ')'}"></div>
<div>{{topic.title}}</div>
</div>
</div>
</div>
<div class="diy-topic-list" v-if="data.style == 'list'">
<template v-if="data.cat_show">
<div class="cat-list" flex="dir:left">
<div class="cat-item" flex="main:center cross:center" v-for="(cat, index) in cList" :key="index"
:class="index == cat_index ? 'active' : ''" @click="selectCat(index)">
<div>{{cat.name}}</div>
</div>
</div>
</template>
<div class="topic-list">
<template v-for="(topic,topIndex) in cTopic">
<div class="topic-item" v-if="topic.layout == 0" flex="dir:left box:last" :key="topIndex">
<div flex="dir:top box:last">
<div class="topic-title">
<div class="vue-line-clamp" style="-webkit-line-clamp: 2">{{topic.title}}</div>
</div>
<div class="browse">{{topic.read_count}}人浏览</div>
</div>
<div class="topic-Mypic" style="width:268px;height:202px;">
<img :src="getIconLink(topic.cover_pic)" v-if="topic.cover_pic!=''" />
<img src="../../../assets/img/default.png" v-else />
</div>
</div>
<div class="topic-item" v-else flex="dir:top" :key="topIndex">
<div class="topic-title">
<div class="vue-line-clamp" style="-webkit-line-clamp: 2">{{topic.title}}</div>
</div>
<div class="topic-Mypic" style="width:702px;height:350px;">
<img :src="getIconLink(topic.cover_pic)" v-if="topic.cover_pic!=''" />
<img src="../../../assets/img/default.png" v-else />
</div>
<div class="browse">{{topic.read_count}}人浏览</div>
</div>
</template>
</div>
</div>
</div>
<div class="diy-component-edit" v-if="topicData.isCked">
<el-form label-width="100px" @submit.native.prevent>
<el-form-item label="专题样式">
<el-radio v-model="data.style" label="normal">简易模式</el-radio>
<el-radio v-model="data.style" label="list">列表模式</el-radio>
</el-form-item>
<template v-if="data.style == 'normal'">
<el-form-item label="显示行数">
<el-select size="small" v-model="data.count">
<el-option :value="1"></el-option>
<el-option :value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="logo(1行)">
<el-tooltip class="item" effect="dark" content="建议尺寸104*32" placement="top">
<el-button size="mini" @click="choicImg=true,commonIndex=1">选择图片</el-button>
</el-tooltip>
<div class="zk_pic_box" flex="main:center cross:center" style="width:100px;height:100px;"
:style="{backgroundImage:'url(' + getIconLink(data.logo_1) + ')'}">
<el-button type="danger"
v-if="data.logo_1!='https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/icon-topic-1.png'"
class="image-delete" size="mini" icon="el-icon-close" @click.stop="data.logo_1='https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/icon-topic-1.png'" circle>
</el-button>
</div>
</el-form-item>
<el-form-item label="logo(2行)">
<el-tooltip class="item" effect="dark" content="建议尺寸104*50" placement="top">
<el-button size="mini" @click="choicImg=true,commonIndex=2">选择图片</el-button>
</el-tooltip>
<div class="zk_pic_box" flex="main:center cross:center" style="width:100px;height:100px;"
:style="{backgroundImage:'url(' + getIconLink(data.logo_2) + ')'}">
<el-button type="danger"
v-if="data.logo_2!='https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/icon-topic-2.png'"
class="image-delete" size="mini" icon="el-icon-close" @click.stop="data.logo_2='https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/icon-topic-2.png'" circle>
</el-button>
</div>
</el-form-item>
<el-form-item label="专题标签">
<el-tooltip class="item" effect="dark" content="建议尺寸54*28" placement="top">
<el-button size="mini" @click="choicImg=true,commonIndex=3">选择图片</el-button>
</el-tooltip>
<div class="zk_pic_box" flex="main:center cross:center" style="width:100px;height:100px;">
<el-button type="danger"
v-if="data.icon!='https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/icon-topic-r.png'"
class="image-delete" size="mini" icon="el-icon-close" @click.stop="data.icon='https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/icon-topic-r.png'" circle>
</el-button>
<img :src="getIconLink(data.icon)" style="max-width:100%;max-height:100%;" alt=""/>
</div>
</el-form-item>
</template>
<template v-else>
<el-form-item label="是否显示分类">
<el-switch v-model="data.cat_show"></el-switch>
</el-form-item>
<el-form-item label="分类列表" v-if="data.cat_show">
<el-card shadow="never" class="topic-edit-options" style="margin-bottom: 24px"
v-for="(cat, catIndex) in data.list" :key="catIndex">
<div @click="selectCat(catIndex)">
<div flex="box:first">
<div class="diy-topic-label">专题分类</div>
<div>{{cat.cat_name}}</div>
</div>
<div flex="box:first">
<div class="diy-topic-label">菜单名称</div>
<div>
<el-input v-model="cat.name" size="small"></el-input>
</div>
</div>
<div flex="box:first">
<div class="diy-topic-label">自定义专题</div>
<div>
<el-switch v-model="cat.custom"></el-switch>
</div>
</div>
<div flex="box:first" v-if="!cat.custom">
<div class="diy-topic-label">专题数量</div>
<div>
<el-input v-model="cat.number" size="small"></el-input>
</div>
</div>
<div flex="box:first" v-else>
<div class="diy-topic-label">专题列表</div>
<div>
<el-button size="mini">添加专题</el-button>
<!-- <app-gallery :list="cat.children" url-key="cover_pic" :show-delete="true" @deleted="deleteTopic"
width="100px" height="100px"></app-gallery> -->
</div>
</div>
</div>
<el-button class="delete" @click="topicCatDelete(catIndex)" type="primary" icon="el-icon-delete"
style="top: 0;right: -26px;"></el-button>
</el-card>
<el-button size="mini">添加分类</el-button>
</el-form-item>
<el-form-item label="专题列表" v-else>
<el-button size="mini">添加专题</el-button>
<!-- <app-gallery :list="data.topic_list" url-key="cover_pic" :show-delete="true" @deleted="deleteTopic"
width="100px" height="100px"></app-gallery> -->
</el-form-item>
</template>
</el-form>
</div>
</div>
<!-- 选择图片文件 -->
<el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
<ChooseImg @SelectId="SelectId"></ChooseImg>
</el-dialog>
</div>
</template>
<script>
import ChooseImg from "@/components/global/ChooseImg.vue";
export default {
props: ["topicData", "index", "dataLeng"],
components: {
ChooseImg
},
data() {
return {
choicImg: false,
data: this.topicData.data,
defaultData: {},
cat_index: 0,
topicShow: false,
catShow: false,
commonIndex: -1
};
},
created() {
},
methods: {
//向父组件传值 并调用排序
resetSord(IsUp) {
this.$emit('getSord', this.index, IsUp);
},
//点击触发父组件删除
delPlugin() {
this.$emit('comDelPlugin', this.index);
},
//选择图片
SelectId(msg) {
if (this.commonIndex == 1) {
this.data.logo_1 = msg.url;
} else if (this.commonIndex == 2) {
this.data.logo_2 = msg.url;
} else if(this.commonIndex==3){
this.data.icon = msg.url;
}
this.choicImg = false;
},
topicCatDelete(index) {
this.data.list.splice(index, 1);
},
deleteTopic(item, index) {
if (this.data.cat_show) {
this.data.list[this.cat_index].children.splice(index, 1)
} else {
this.data.topic_list.splice(index, 1)
}
},
selectCat(index) {
this.cat_index = index
this.catShow = false;
},
selectTopic(list) {
let topic_list = [];
for (let i in list) {
topic_list.push({
title: list[i].title,
cover_pic: list[i].cover_pic,
read_count: list[i].read_count,
layout: list[i].layout,
id: list[i].id
});
}
topic_list = JSON.parse(JSON.stringify(topic_list));
this.data.topic_list = this.data.topic_list.concat(topic_list);
if (this.data.list && this.data.list.length > 0) {
this.data.list[this.cat_index].children = this.data.list[this.cat_index].children.concat(topic_list);
}
this.topicShow = false;
},
selectCatList(list) {
for (let i in list) {
this.data.list.push({
cat_id: list[i].id,
cat_name: list[i].name,
name: list[i].name,
children: [],
custom: 0,
number: 30
});
}
}
},
computed: {
cList() {
if (this.data.list && this.data.list.length > 0 && this.data.cat_show) {
return this.data.list;
} else {
let catList = {
cat_id: 0,
cat_name: '分类名称',
name: '分类名称',
children: [],
custom: 0,
number: 0
};
return [catList, catList]
}
},
cTopic() {
if (this.data.list && this.data.list.length > 0 &&
this.data.list[this.cat_index].children && this.data.list[this.cat_index].children.length > 0 &&
this.data.cat_show) {
return this.data.list[this.cat_index].children;
} else if (this.data.topic_list && this.data.topic_list.length > 0 && !this.data.cat_show) {
return this.data.topic_list;
} else {
let topic = {
title: '这是一条专题示例',
cover_pic: '',
read_count: '999',
layout: 0,
id: 0
};
let topic_1 = JSON.parse(JSON.stringify(topic));
topic_1.layout = 1;
return [topic, topic_1];
}
},
cStyle() {
if (this.data.style === 'normal') {
if (this.data.count === 1) {
return 'height: 32px;overflow-y: hidden;line-height: 32px'
}
}
},
},
mounted() {
}
};
</script>
src/components/sallCenter/plugin/vip-card.vue
View file @ 7ae44ce8
......@@ -252,8 +252,8 @@
data:this.vipData.data,
comIndex: -1,
default: {
buy_bg: 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/buy_bg.png',
renew_bg: 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/logo.png',
buy_bg: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/buy_bg.png',
renew_bg: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/logo.png',
buy_big_color: '#D0B8A5',
buy_small_color: '#C09878',
buy_btn_color: '#5A4D40',
......@@ -271,8 +271,8 @@
buy_bg: '',
renew_bg: '',
plugin: {
buy_bg: 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/buy_bg.png',
renew_bg: 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/logo.png',
buy_bg: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/buy_bg.png',
renew_bg: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/logo.png',
buy_big_color: '#D0B8A5',
buy_small_color: '#C09878',
buy_btn_color: '#5A4D40',
......@@ -328,8 +328,8 @@
that.data.top_bottom_padding = that.top_bottom_padding;
} else {
that.data.usePluginConfig = that.usePluginConfig;
that.buy_bg = 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/buy_bg.png';
that.renew_bg = 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/buy_bg.png';
that.buy_bg = 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/buy_bg.png';
that.renew_bg = 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/buy_bg.png';
that.data.background = that.background;
that.data.top_bottom_padding = that.top_bottom_padding;
that.data.background = that.background;
......@@ -371,8 +371,8 @@
switch (position) {
case 'buy':
if (res == 2) {
this.buy_bg = 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/buy_bg.png';
this.data.buy_bg = 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/buy_bg.png';
this.buy_bg = 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/buy_bg.png';
this.data.buy_bg = 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/buy_bg.png';
} else {
this.buy_bg = '';
this.data.buy_bg = '';
......@@ -380,8 +380,8 @@
break;
case 'renew':
if (res == 2) {
this.renew_bg = 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/buy_bg.png';
this.data.renew_bg = 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/buy_bg.png';
this.renew_bg = 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/buy_bg.png';
this.data.renew_bg = 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/buy_bg.png';
} else {
this.renew_bg = '';
this.data.renew_bg = '';
......
src/components/sallCenter/templateEdit.vue
View file @ 7ae44ce8
......@@ -159,7 +159,17 @@
justify-content: center;
background: #fff;
}
.bgMsg_Div div{
height: 50px;
width: 50px;
margin-bottom: 10px;
cursor: pointer;
background-color: #F5F7F9;
}
.bgMsg_Div .active{
background-color: #E6F4FF;
border: 2px dashed #5CB3FD;
}
</style>
<template>
<div class="templateEdit">
......@@ -174,7 +184,7 @@
<el-input type="text" size="small" v-model="addMsg.TemplateName" maxlength="50"></el-input>
</el-form-item>
<el-form-item label="背景设置">
<el-button size="small">设置</el-button>
<el-button size="small" @click="bgVisible=true">设置</el-button>
</el-form-item>
</el-form>
<div class="component-group" v-for="(item,index) in allComponents" :key="index">
......@@ -192,9 +202,10 @@
<div class="template_Mobile">
<div class="mobile-framework" style="height:705px;">
<div class="mobile-framework-header"></div>
<div class="mobile-framework-body">
<div class="mobile-framework-body"
:style="'background-color:'+ bgMsg.data.backgroundColor+';background-image:url('+getIconLink(bgMsg.data.backgroundPicUrl)+');background-size:'+bgMsg.data.backgroundWidth+'% '+bgMsg.data.backgroundHeight+'%;background-repeat:'+repeat+';background-position:'+position">
<!-- 为空的样式开始 -->
<div v-if="isEmpty" flex="main:center cross:center"
<div v-if="dataList.length==0" flex="main:center cross:center"
style="height: 200px; color: rgb(173, 177, 184); text-align: center;">
<div>
<i class="el-icon-folder-opened" style="font-size: 32px; margin-bottom: 10px;"></i>
......@@ -264,6 +275,8 @@
:index="index" :dataLeng="dataList.length"></quickNav>
<imageText v-if="item.Id=='image-text'" :imageData="item" @getSord="getSord"
@comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></imageText>
<topic v-if="item.Id=='topic'" :topicData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
:index="index" :dataLeng="dataList.length"></topic>
</div>
</div>
</div>
......@@ -273,6 +286,66 @@
<div class="tpEdit_btmMenu">
<el-button type="primary" size="small" @click="SaveData()">保存</el-button>
</div>
<!-- 背景设置 -->
<el-dialog title="背景设置" :visible.sync="bgVisible" width="950px">
<el-form label-width="100px">
<el-form-item label="背景颜色">
<div flex="dir:left cross:center">
<el-color-picker size="small" v-model="bgMsg.data.backgroundColor"></el-color-picker>
<el-input size="small" style="width: 80px;margin-right: 25px;" v-model="bgMsg.data.backgroundColor"></el-input>
</div>
</el-form-item>
<el-form-item label="背景图片">
<el-switch v-model="bgMsg.data.showImg" @change="showBackground"></el-switch>
<slot name="about"></slot>
</el-form-item>
<el-form-item v-if="bgMsg.data.showImg" label="上传背景">
<div class="zk_pic_box" @click="choicImg=true" flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(bgMsg.data.backgroundPicUrl) + ')'}">
<i v-if="bgMsg.data.backgroundPicUrl==''" class="el-icon-picture-outline"></i>
<el-button type="danger" v-if="bgMsg.data.backgroundPicUrl!=''" class="image-delete" size="mini"
icon="el-icon-close" @click.stop="bgMsg.data.backgroundPicUrl=''" circle></el-button>
</div>
</el-form-item>
<el-form-item v-if="bgMsg.data.showImg" label="图片位置">
<div class="bgMsg_Div" flex="main:justify wrap:wrap" style="width:170px;height:180px;">
<div @click="choose(1,'top left')" :class="bgMsg.data.position==1?'active':''"></div>
<div @click="choose(2,'top center')" :class="bgMsg.data.position==2?'active':''"></div>
<div @click="choose(3,'top right')" :class="bgMsg.data.position==3?'active':''"></div>
<div @click="choose(4,'center left')" :class="bgMsg.data.position==4?'active':''"></div>
<div @click="choose(5,'center center')" :class="bgMsg.data.position==5?'active':''"></div>
<div @click="choose(6,'center right')" :class="bgMsg.data.position==6?'active':''"></div>
<div @click="choose(7,'bottom left')" :class="bgMsg.data.position==7?'active':''"></div>
<div @click="choose(8,'bottom center')" :class="bgMsg.data.position==8?'active':''"></div>
<div @click="choose(9,'bottom right')" :class="bgMsg.data.position==9?'active':''"></div>
</div>
</el-form-item>
<el-form-item v-if="bgMsg.data.showImg" label="填充方式">
<el-radio-group v-model="bgMsg.data.mode" @change="changeMode">
<el-radio :label="1">充满</el-radio>
<el-radio :label="2">左右平铺</el-radio>
<el-radio :label="3">上下平铺</el-radio>
<el-radio :label="4">平铺满</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="bgMsg.data.showImg && bgMsg.data.mode != 1" label="背景图宽">
<el-slider v-model="bgMsg.data.backgroundWidth" :show-input-controls="false" style="float: left;width: 95%" :max="100" show-input></el-slider>
<div style="float: right">%</div>
</el-form-item>
<el-form-item v-if="bgMsg.data.showImg && bgMsg.data.mode != 1" label="背景图高">
<el-slider v-model="bgMsg.data.backgroundHeight" :show-input-controls="false" style="float: left;width: 95%" :max="100" show-input></el-slider>
<div style="float: right">%</div>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="bgVisible = false">取 消</el-button>
<el-button type="primary" @click="SetBgInfo()">确 定</el-button>
</span>
</el-dialog>
<!-- 选择图片文件 -->
<el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
<ChooseImg @SelectId="SelectId"></ChooseImg>
</el-dialog>
</div>
</template>
<script>
......@@ -306,6 +379,9 @@
import modal from "../sallCenter/plugin/modal.vue"
import quickNav from "../sallCenter/plugin/quick-nav.vue"
import imageText from "../sallCenter/plugin/image-text.vue"
import topic from "../sallCenter/plugin/topic.vue"
import ChooseImg from "@/components/global/ChooseImg.vue";
export default {
data() {
return {
......@@ -315,11 +391,25 @@
TemplateData: '',
ComponentDataList: [],
},
bgMsg: {
Id: 'background',
data: {
showImg: false,
backgroundColor: '#f5f7f9',
backgroundPicUrl: '',
position: 5,
mode: 1,
backgroundHeight: 100,
backgroundWidth: 100,
}
},
position: 'center center',
repeat: 'no-repeat',
choicImg: false,
//左侧组件列表
bgVisible:false,
allComponents: [],
dataList: [],
//是否为空
isEmpty: true,
};
},
created() {
......@@ -355,14 +445,62 @@
advert,
modal,
quickNav,
imageText
imageText,
topic,
ChooseImg
},
methods: {
//选择图片
SelectId(msg) {
this.bgMsg.data.backgroundPicUrl = msg.url;
this.choicImg = false;
},
choose(num,position) {
this.bgMsg.data.position = num;
this.position = position;
},
//点击设置背景
SetBgInfo(){
this.dataList.push(this.bgMsg);
this.bgVisible=false;
},
showBackground(e) {
if(!e) {
this.bgMsg.data.backgroundPicUrl += '临时放置'
}else {
this.bgMsg.data.backgroundPicUrl = this.bgMsg.data.backgroundPicUrl.replace('临时放置','')
}
if(this.bgMsg.data.mode == 2) {
this.repeat = 'repeat-x'
}else if(this.bgMsg.data.mode == 3) {
this.repeat = 'repeat-y'
}else if(this.bgMsg.data.mode == 4) {
this.repeat = 'repeat'
}else if(this.bgMsg.data.mode == 1) {
this.repeat = 'no-repeat';
this.bgMsg.data.backgroundHeight = 100;
this.bgMsg.data.backgroundWidth = 100;
}
},
changeMode(e){
if(e == 2) {
this.repeat = 'repeat-x'
}else if(e == 3) {
this.repeat = 'repeat-y'
}else if(e == 4) {
this.repeat = 'repeat'
}else if(e == 1) {
this.repeat = 'no-repeat';
this.bgMsg.data.backgroundHeight = 100;
this.bgMsg.data.backgroundWidth = 100;
}
},
//获取左侧菜单
GetPlugInList() {
this.apipost("/api/Tenant/GetPlugInList", {}, res => {
if (res.data.resultCode == 1) {
this.allComponents = res.data.data;
console.log(this.allComponents, 'allcom');
} else {
this.Info(res.data.message);
}
......@@ -370,7 +508,6 @@
},
//点击基础组件
addPlugin(Id) {
this.isEmpty = false;
switch (Id.toString()) {
//搜索
case 'search':
......@@ -431,22 +568,39 @@
isCked: false,
data: {
name: '公告', //公告名称
content: '', //公告内容
icon: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/icon-notice.png', //公告图标
textColor: '#ffffff', //文字颜色
background: '#f67f79', //背景颜色
content: '', //公告内容
icon: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/icon-notice.png', //公告图标
textColor: '#ffffff', //文字颜色
background: '#f67f79', //背景颜色
headerUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/icon-notice-title.png', //头部图片
btnColor: '#ff4544', //按钮颜色
btnWidth: 500, //按钮宽度
btnHeight: 80, //按钮高度
btnHeight: 80, //按钮高度
btnRadius: 40, //按钮圆角
btnText: '我知道了', //按钮文本内容
btnTextColor: '#ffffff' //按钮文本颜色
btnText: '我知道了', //按钮文本内容
btnTextColor: '#ffffff' //按钮文本颜色
}
}
this.dataList.push(noticeObj);
break;
// 专题未做
// 专题
case 'topic':
let topicObj = {
Id: 'topic',
isCked: false,
data: {
style: 'normal',
count: 1,
logo_1: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/icon-topic-1.png',
logo_2: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/icon-topic-2.png',
icon: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/icon-topic-r.png',
list: [],
cat_show: false,
topic_list: []
}
}
this.dataList.push(topicObj);
break;
//标题
case 'link':
let linkObj = {
......@@ -560,8 +714,8 @@
data: {
picUrl: '', //版权图标
text: '', //版权文字
link: '', //版权链接
backgroundColor: '#fff', //背景颜色
link: '', //版权链接
backgroundColor: '#fff', //背景颜色
}
}
this.dataList.push(copyObj);
......@@ -587,9 +741,9 @@
Id: 'user-info',
isCked: false,
data: {
style: 1, //样式
backgroundPicUrl: '', //背景图片
backgroundColor: '#ffffff', //背景颜色
style: 1, //样式
backgroundPicUrl: '', //背景图片
backgroundColor: '#ffffff', //背景颜色
}
}
this.dataList.push(userObj);
......@@ -817,7 +971,7 @@
showCoupon: true,
showGoods: true,
couponColor: '#ffffff',
couponPicUrl: 'http://wx.weibaoge.cn/plugins/diy/assets/images/coupon-background.png',
couponPicUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/coupon-background.png',
buttonColor: '#ff4544',
list: [],
listStyle: 1,
......@@ -882,22 +1036,22 @@
data: {
buttonColor: '#ff4544', //购买按钮颜色
list: [], //商品列表
listStyle: 1, //列表样式
fill: 1, //商品封面图填充
listStyle: 1, //列表样式
fill: 1, //商品封面图填充
goodsCoverProportion: '1-1', //商品封面图宽高比例
goodsStyle: 1, //商品样式
textStyle: 1, //文本样式
showGoodsName: true, //显示商品名称
showBuyBtn: true, //显示购买按钮
buyBtnStyle: 1, //购买按钮样式
buyBtnText: '抢购', //购买按钮文字
showGoodsTag: false, //显示商品角标
customizeGoodsTag: false, //自定义商品角标样式
textStyle: 1, //文本样式
showGoodsName: true, //显示商品名称
showBuyBtn: true, //显示购买按钮
buyBtnStyle: 1, //购买按钮样式
buyBtnText: '抢购', //购买按钮文字
showGoodsTag: false, //显示商品角标
customizeGoodsTag: false, //自定义商品角标样式
goodsTagPicUrl: '', //自定义商品角标
backgroundColor: '#fff', //背景颜色
backgroundPicUrl: '', //背景图
backgroundHeight: 100, //背景高度百分比
backgroundWidth: 100, //背景宽度百分比
backgroundWidth: 100, //背景宽度百分比
}
}
this.dataList.push(advanceObj);
......@@ -910,18 +1064,18 @@
data: {
background: '#FFFFFF', //背景色
usePluginConfig: true, //使用插件配置
top_bottom_padding: 0, //上下间距
buy_bg: 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/buy_bg.png', //未购买用户默认背景图
renew_bg: 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/buy_bg.png', //未购买用户背景图
top_bottom_padding: 0, //上下间距
buy_bg: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/buy_bg.png', //未购买用户默认背景图
renew_bg: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/buy_bg.png', //未购买用户背景图
buy_big_color: '', //未购买用户-大标题字体颜色
buy_small_color: '', //未购买用户-小标题背景颜色
buy_btn_color: '', //未购买用户-按钮文字颜色
buy_btn_bg_color: '', //未购买用户-按钮颜色
buy_big: '', //未购买用户-大标题文字
buy_btn_color: '', //未购买用户-按钮文字颜色
buy_btn_bg_color: '', //未购买用户-按钮颜色
buy_big: '', //未购买用户-大标题文字
buy_small: '', //未购买用户-小标题文字
buy_btn_text: '', //未购买用户-按钮文字
renew_text_color: '', //已购买用户-文字颜色
renew_btn_bg_color: '',//已购买用户-按钮背景色
renew_btn_bg_color: '', //已购买用户-按钮背景色
renew_text: '', //已购买用户-标题文字
}
}
......@@ -948,7 +1102,7 @@
isCked: false,
data: {
background: '#ffffff', //背景颜色
height: 10, //高度
height: 10, //高度
}
}
this.dataList.push(emptyObj);
......@@ -964,7 +1118,7 @@
pic_url: '', //广告封面图
video_url: '', //视频播放链接
award_type: '0', //广告奖励
award_coupons: [ //优惠券
award_coupons: [ //优惠券
/*{
send_num: 3,
name: '优惠券',
......@@ -1009,36 +1163,36 @@
closedPicUrl: '', //收起图标
openedPicUrl: '', //展开图标
home: {
opened: false, //是否返回首页
opened: false, //是否返回首页
picUrl: '', //图标
},
customerService: {
opened: false, //小程序客服
opened: false, //小程序客服
picUrl: '', //小程序图片
},
tel: {
opened: false, //一键拨号开启
picUrl: '', //一键拨号图标
number: '', ////一键拨号电话号码
opened: false, //一键拨号开启
picUrl: '', //一键拨号图标
number: '', ////一键拨号电话号码
},
web: {
opened: false, //网页链接开启
picUrl: '',
opened: false, //网页链接开启
picUrl: '',
url: '',
},
mApp: { //跳转小程序开启
mApp: { //跳转小程序开启
opened: false,
picUrl: '',
appId: '',
page: '',
},
mapNav: { //地图导航
mapNav: { //地图导航
opened: false,
picUrl: '',
address: '',
location: '',
},
customize: { //自定义按钮
customize: { //自定义按钮
opened: false,
picUrl: '',
open_type: '',
......@@ -1110,6 +1264,13 @@
if (jsonData.ComponentDataList) {
this.dataList = jsonData.ComponentDataList;
}
if(jsonData.ComponentDataList){
jsonData.ComponentDataList.forEach(x=>{
if(x.Id=='background'){
this.bgMsg=x;
}
})
}
} else {
this.Info(res.data.message);
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment