Skip to content

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

修改

parent c268895f
Show whitespace changes
Inline Side-by-side
Showing with 707 additions and 131 deletions
src/components/StoreDesign/videoManage.vue
View file @ 7ae44ce8
<template> <template>
<div class="projectClass"> <div class="projectClass">
<template v-if="projectClassIsShowAdd"> <template v-if="videoIsShowAdd">
<div class="head-title"> <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"> type="primary">
添加视频 添加视频
</el-button> </el-button>
...@@ -48,22 +48,45 @@ ...@@ -48,22 +48,45 @@
</template> </template>
<template v-else> <template v-else>
<div class="head-title"> <div class="head-title">
<span @click="projectClassIsShowAdd=true" style="color:rgb(64, 158, 255);cursor:pointer;">文章</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> style="margin:0 9px;color:#C0C4CC">/</span><span>视频编辑</span>
</div> </div>
<div class="content"> <div class="content">
<div class="projectClass_condiv"> <div class="projectClass_condiv">
<el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="100px" style="padding:0 20px;"> <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="120px" style="padding:0 20px;">
<el-form-item label="专题分类名称" prop="title"> <el-form-item label="标题" prop="Title">
<el-input v-model="addMsg.TopicName" size="small" placeholder="请输入名称" maxlength="20" /> <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>
<el-form-item label="排序"> <el-form-item label="排序">
<el-input type="text" v-model="addMsg.SortNum" size="small" @keyup.native="checkInteger(addMsg,'SortNum')" <el-input v-model="addMsg.SortNum" size="small" maxlength="50" />
placeholder="请输入排序" maxlength="4" />
</el-form-item> </el-form-item>
<el-form-item label="状态"> <el-form-item label="详情介绍">
<el-switch v-model="addMsg.IsDisable" active-color="#409EFF" :active-value="1" :inactive-value="0"> <el-input type="textarea" v-model="addMsg.VedioIntro" :rows="4" maxlength="200" />
</el-switch>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
...@@ -71,10 +94,18 @@ ...@@ -71,10 +94,18 @@
<el-button size="small" style="margin-top:20px;padding:9px 25px;" type="primary" @click="submitform('addMsg')">保存 <el-button size="small" style="margin-top:20px;padding:9px 25px;" type="primary" @click="submitform('addMsg')">保存
</el-button> </el-button>
</template> </template>
<!-- 选择图片文件 -->
<el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
<ChooseImg @SelectId="SelectId"></ChooseImg>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import ChooseImg from "@/components/global/ChooseImg.vue";
export default { export default {
components: {
ChooseImg
},
data() { data() {
return { return {
//是否线下链接弹窗 //是否线下链接弹窗
...@@ -86,19 +117,28 @@ ...@@ -86,19 +117,28 @@
TopicName: "" TopicName: ""
}, },
total: 0, total: 0,
projectClassIsShowAdd: true, videoIsShowAdd: true,
choicImg:false,
addMsg: { addMsg: {
Id: 0, //编号 Id: 0, //视频编号
TopicName: '', //专题分类名称 Title: '', //视频标题
SortNum: 0, //排序 SourceType: 1, //视频来源(1-源地址，2-腾讯)
IsDisable: 0, //状态 VedioUrl:'', //视频链接
VedioCoverImg:'', //封面图
SortNum:'', //排序
VedioIntro:'' //视频详情介绍
}, },
rules: { rules: {
TopicName: [{ Title: [{
required: true, required: true,
message: '专题分类名称', message: '标题不能为空',
trigger: 'change' trigger: 'change'
}], }],
VedioCoverImg:[{
required: true,
message: '封面图',
trigger: 'change'
}]
}, },
}; };
...@@ -135,54 +175,7 @@ ...@@ -135,54 +175,7 @@
saveMsg() { saveMsg() {
this.apipost("/api/MContent/SetTopicType", this.addMsg, res => { this.apipost("/api/MContent/SetTopicType", this.addMsg, res => {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
this.projectClassIsShowAdd = true; this.videoIsShowAdd = 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.getList(); this.getList();
this.Success(res.data.message); this.Success(res.data.message);
} else { } else {
...@@ -190,8 +183,10 @@ ...@@ -190,8 +183,10 @@
} }
}) })
}, },
input(obj) { //选择图片
this.addMsg.content = obj SelectId(msg) {
this.addMsg.VedioCoverImg = msg.url;
this.choicImg = false;
}, },
}, },
mounted() { 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 @@ ...@@ -252,8 +252,8 @@
data:this.vipData.data, data:this.vipData.data,
comIndex: -1, comIndex: -1,
default: { default: {
buy_bg: 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/buy_bg.png', buy_bg: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/buy_bg.png',
renew_bg: 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/logo.png', renew_bg: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/logo.png',
buy_big_color: '#D0B8A5', buy_big_color: '#D0B8A5',
buy_small_color: '#C09878', buy_small_color: '#C09878',
buy_btn_color: '#5A4D40', buy_btn_color: '#5A4D40',
...@@ -271,8 +271,8 @@ ...@@ -271,8 +271,8 @@
buy_bg: '', buy_bg: '',
renew_bg: '', renew_bg: '',
plugin: { plugin: {
buy_bg: 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/buy_bg.png', buy_bg: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/buy_bg.png',
renew_bg: 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/logo.png', renew_bg: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/logo.png',
buy_big_color: '#D0B8A5', buy_big_color: '#D0B8A5',
buy_small_color: '#C09878', buy_small_color: '#C09878',
buy_btn_color: '#5A4D40', buy_btn_color: '#5A4D40',
...@@ -328,8 +328,8 @@ ...@@ -328,8 +328,8 @@
that.data.top_bottom_padding = that.top_bottom_padding; that.data.top_bottom_padding = that.top_bottom_padding;
} else { } else {
that.data.usePluginConfig = that.usePluginConfig; that.data.usePluginConfig = that.usePluginConfig;
that.buy_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 = 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/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.background = that.background;
that.data.top_bottom_padding = that.top_bottom_padding; that.data.top_bottom_padding = that.top_bottom_padding;
that.data.background = that.background; that.data.background = that.background;
...@@ -371,8 +371,8 @@ ...@@ -371,8 +371,8 @@
switch (position) { switch (position) {
case 'buy': case 'buy':
if (res == 2) { if (res == 2) {
this.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 = 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/buy_bg.png'; this.data.buy_bg = 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/buy_bg.png';
} else { } else {
this.buy_bg = ''; this.buy_bg = '';
this.data.buy_bg = ''; this.data.buy_bg = '';
...@@ -380,8 +380,8 @@ ...@@ -380,8 +380,8 @@
break; break;
case 'renew': case 'renew':
if (res == 2) { if (res == 2) {
this.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 = 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/buy_bg.png'; this.data.renew_bg = 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/buy_bg.png';
} else { } else {
this.renew_bg = ''; this.renew_bg = '';
this.data.renew_bg = ''; this.data.renew_bg = '';
......
src/components/sallCenter/templateEdit.vue
View file @ 7ae44ce8
...@@ -159,7 +159,17 @@ ...@@ -159,7 +159,17 @@
justify-content: center; justify-content: center;
background: #fff; 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> </style>
<template> <template>
<div class="templateEdit"> <div class="templateEdit">
...@@ -174,7 +184,7 @@ ...@@ -174,7 +184,7 @@
<el-input type="text" size="small" v-model="addMsg.TemplateName" maxlength="50"></el-input> <el-input type="text" size="small" v-model="addMsg.TemplateName" maxlength="50"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="背景设置"> <el-form-item label="背景设置">
<el-button size="small">设置</el-button> <el-button size="small" @click="bgVisible=true">设置</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="component-group" v-for="(item,index) in allComponents" :key="index"> <div class="component-group" v-for="(item,index) in allComponents" :key="index">
...@@ -192,9 +202,10 @@ ...@@ -192,9 +202,10 @@
<div class="template_Mobile"> <div class="template_Mobile">
<div class="mobile-framework" style="height:705px;"> <div class="mobile-framework" style="height:705px;">
<div class="mobile-framework-header"></div> <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;"> style="height: 200px; color: rgb(173, 177, 184); text-align: center;">
<div> <div>
<i class="el-icon-folder-opened" style="font-size: 32px; margin-bottom: 10px;"></i> <i class="el-icon-folder-opened" style="font-size: 32px; margin-bottom: 10px;"></i>
...@@ -264,6 +275,8 @@ ...@@ -264,6 +275,8 @@
:index="index" :dataLeng="dataList.length"></quickNav> :index="index" :dataLeng="dataList.length"></quickNav>
<imageText v-if="item.Id=='image-text'" :imageData="item" @getSord="getSord" <imageText v-if="item.Id=='image-text'" :imageData="item" @getSord="getSord"
@comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></imageText> @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> </div>
</div> </div>
...@@ -273,6 +286,66 @@ ...@@ -273,6 +286,66 @@
<div class="tpEdit_btmMenu"> <div class="tpEdit_btmMenu">
<el-button type="primary" size="small" @click="SaveData()">保存</el-button> <el-button type="primary" size="small" @click="SaveData()">保存</el-button>
</div> </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> </div>
</template> </template>
<script> <script>
...@@ -306,6 +379,9 @@ ...@@ -306,6 +379,9 @@
import modal from "../sallCenter/plugin/modal.vue" import modal from "../sallCenter/plugin/modal.vue"
import quickNav from "../sallCenter/plugin/quick-nav.vue" import quickNav from "../sallCenter/plugin/quick-nav.vue"
import imageText from "../sallCenter/plugin/image-text.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 { export default {
data() { data() {
return { return {
...@@ -315,11 +391,25 @@ ...@@ -315,11 +391,25 @@
TemplateData: '', TemplateData: '',
ComponentDataList: [], 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: [], allComponents: [],
dataList: [], dataList: [],
//是否为空
isEmpty: true,
}; };
}, },
created() { created() {
...@@ -355,14 +445,62 @@ ...@@ -355,14 +445,62 @@
advert, advert,
modal, modal,
quickNav, quickNav,
imageText imageText,
topic,
ChooseImg
}, },
methods: { 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() { GetPlugInList() {
this.apipost("/api/Tenant/GetPlugInList", {}, res => { this.apipost("/api/Tenant/GetPlugInList", {}, res => {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
this.allComponents = res.data.data; this.allComponents = res.data.data;
console.log(this.allComponents, 'allcom');
} else { } else {
this.Info(res.data.message); this.Info(res.data.message);
} }
...@@ -370,7 +508,6 @@ ...@@ -370,7 +508,6 @@
}, },
//点击基础组件 //点击基础组件
addPlugin(Id) { addPlugin(Id) {
this.isEmpty = false;
switch (Id.toString()) { switch (Id.toString()) {
//搜索 //搜索
case 'search': case 'search':
...@@ -446,7 +583,24 @@ ...@@ -446,7 +583,24 @@
} }
this.dataList.push(noticeObj); this.dataList.push(noticeObj);
break; 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': case 'link':
let linkObj = { let linkObj = {
...@@ -817,7 +971,7 @@ ...@@ -817,7 +971,7 @@
showCoupon: true, showCoupon: true,
showGoods: true, showGoods: true,
couponColor: '#ffffff', 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', buttonColor: '#ff4544',
list: [], list: [],
listStyle: 1, listStyle: 1,
...@@ -911,8 +1065,8 @@ ...@@ -911,8 +1065,8 @@
background: '#FFFFFF', //背景色 background: '#FFFFFF', //背景色
usePluginConfig: true, //使用插件配置 usePluginConfig: true, //使用插件配置
top_bottom_padding: 0, //上下间距 top_bottom_padding: 0, //上下间距
buy_bg: 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/buy_bg.png', //未购买用户默认背景图 buy_bg: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/buy_bg.png', //未购买用户默认背景图
renew_bg: 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/buy_bg.png', //未购买用户背景图 renew_bg: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/buy_bg.png', //未购买用户背景图
buy_big_color: '', //未购买用户-大标题字体颜色 buy_big_color: '', //未购买用户-大标题字体颜色
buy_small_color: '', //未购买用户-小标题背景颜色 buy_small_color: '', //未购买用户-小标题背景颜色
buy_btn_color: '', //未购买用户-按钮文字颜色 buy_btn_color: '', //未购买用户-按钮文字颜色
...@@ -921,7 +1075,7 @@ ...@@ -921,7 +1075,7 @@
buy_small: '', //未购买用户-小标题文字 buy_small: '', //未购买用户-小标题文字
buy_btn_text: '', //未购买用户-按钮文字 buy_btn_text: '', //未购买用户-按钮文字
renew_text_color: '', //已购买用户-文字颜色 renew_text_color: '', //已购买用户-文字颜色
renew_btn_bg_color: '',//已购买用户-按钮背景色 renew_btn_bg_color: '', //已购买用户-按钮背景色
renew_text: '', //已购买用户-标题文字 renew_text: '', //已购买用户-标题文字
} }
} }
...@@ -1110,6 +1264,13 @@ ...@@ -1110,6 +1264,13 @@
if (jsonData.ComponentDataList) { if (jsonData.ComponentDataList) {
this.dataList = jsonData.ComponentDataList; this.dataList = jsonData.ComponentDataList;
} }
if(jsonData.ComponentDataList){
jsonData.ComponentDataList.forEach(x=>{
if(x.Id=='background'){
this.bgMsg=x;
}
})
}
} else { } else {
this.Info(res.data.message); 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