Skip to content

E
ElectricitySheep
Commit 62a90b13 authored by zhengke's avatar zhengke
Browse files
Options

修改

parent 4bd4f408
Hide whitespace changes
Inline Side-by-side
Showing with 335 additions and 99 deletions
src/components/StoreDesign/special.vue
View file @ 62a90b13
...@@ -38,8 +38,7 @@ ...@@ -38,8 +38,7 @@
<template slot-scope="scope"> <template slot-scope="scope">
<img @click="EditRole(scope.row)" src="../../assets/img/userman/edit.png" alt=""> <img @click="EditRole(scope.row)" src="../../assets/img/userman/edit.png" alt="">
<img @click="upPwddialog=true" style="margin:0 10px;" src="../../assets/img/userman/change.png" alt=""> <img @click="upPwddialog=true" style="margin:0 10px;" src="../../assets/img/userman/change.png" alt="">
<img @click="RemmoveRole(scope.row)" src="../../assets/img/userman/del.png" <img @click="RemmoveRole(scope.row)" src="../../assets/img/userman/del.png" alt="">
alt="">
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -53,84 +52,127 @@ ...@@ -53,84 +52,127 @@
<span @click="speciaIsShowAdd=true" style="color:rgb(64, 158, 255);cursor:pointer;">专题</span><span <span @click="speciaIsShowAdd=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 contentTwo"> <div class="content">
<el-tabs v-model="activeName"> <el-tabs v-model="activeName">
<el-tab-pane label="基础设置" name="first"> <el-tab-pane label="基础设置" name="first">
<el-form label-width="10rem"> <div class="contentTwo">
<el-form-item label="标题"> <el-form label-width="10rem">
<el-input type="text" maxlength="100" size="small"></el-input> <el-form-item label="标题">
</el-form-item> <el-input type="text" maxlength="100" size="small"></el-input>
<el-form-item label="专题列表布局方式"> </el-form-item>
<el-radio-group v-model="addMsg.flexType"> <el-form-item label="专题列表布局方式">
<el-radio :label="1">小图模式</el-radio> <el-radio-group v-model="addMsg.flexType">
<el-radio :label="2">大图模式</el-radio> <el-radio :label="1">小图模式</el-radio>
<el-radio :label="3">多图模式</el-radio> <el-radio :label="2">大图模式</el-radio>
</el-radio-group> <el-radio :label="3">多图模式</el-radio>
<div class="flexTypeList"> </el-radio-group>
小图模式建议封面图片大小：268×202；大图模式建议封面图片大小：702×350；多图模式建议封面图片大小：268×202，最多上传3张图片 <div class="flexTypeList">
</div> 小图模式建议封面图片大小：268×202；大图模式建议封面图片大小：702×350；多图模式建议封面图片大小：268×202，最多上传3张图片
</el-form-item> </div>
<el-form-item label="封面图"> </el-form-item>
<el-tooltip class="item" effect="dark" content="建议尺寸: 268 * 202" placement="top"> <el-form-item label="封面图">
<el-button size="mini" @click="choicImg=true">选择图片</el-button> <el-tooltip class="item" effect="dark" content="建议尺寸: 268 * 202" placement="top">
</el-tooltip> <el-button size="mini" @click="choicImg=true">选择图片</el-button>
<div class="customize-share-title"> </el-tooltip>
<div class="zk_pic_box" flex="main:center cross:center" <div class="customize-share-title">
:style="{backgroundImage:'url(' + getIconLink(addMsg.coverImg) + ')'}"> <div class="zk_pic_box" style="width:80px;height:80px;" flex="main:center cross:center"
<i v-if="addMsg.coverImg==''" class="el-icon-picture-outline"></i> :style="{backgroundImage:'url(' + getIconLink(addMsg.coverImg) + ')'}">
</div> <i v-if="addMsg.coverImg==''" class="el-icon-picture-outline"></i>
</div> </div>
</el-form-item> </div>
<el-form-item> </el-form-item>
<span slot="label">摘要</span> <el-form-item>
<el-tooltip slot="label" class="item" effect="dark" content="专题内容的简介，用于列表上显示" placement="top"> <span slot="label">摘要</span>
<i class="el-icon-info"></i> <el-tooltip slot="label" class="item" effect="dark" content="专题内容的简介，用于列表上显示" placement="top">
</el-tooltip> <i class="el-icon-info"></i>
<el-input type="textarea" size="small" v-model="addMsg.Abstract" :rows="2"></el-input> </el-tooltip>
</el-form-item> <el-input type="textarea" size="small" v-model="addMsg.Abstract" :rows="2"></el-input>
<el-form-item label="自定义分享标题"> </el-form-item>
<el-input type="text" size="small" v-model="addMsg.CustomTitle"></el-input> <el-form-item label="自定义分享标题">
</el-form-item> <el-input type="text" size="small" v-model="addMsg.CustomTitle"></el-input>
<el-form-item label="自定义分享图片"> </el-form-item>
<el-tooltip class="item" effect="dark" content="建议尺寸:420 * 336" placement="top"> <el-form-item label="自定义分享图片">
<el-button size="mini" @click="choicImg=true">选择图片</el-button> <el-tooltip class="item" effect="dark" content="建议尺寸:420 * 336" placement="top">
</el-tooltip> <el-button size="mini" @click="choicImg=true">选择图片</el-button>
<div class="customize-share-title"> </el-tooltip>
<div class="zk_pic_box" flex="main:center cross:center" <div class="customize-share-title">
:style="{backgroundImage:'url(' + getIconLink(addMsg.customImg) + ')'}"> <div class="zk_pic_box" style="width:80px;height:80px;" flex="main:center cross:center"
<i v-if="addMsg.customImg==''" class="el-icon-picture-outline"></i> :style="{backgroundImage:'url(' + getIconLink(addMsg.customImg) + ')'}">
</div> <i v-if="addMsg.customImg==''" class="el-icon-picture-outline"></i>
</div> </div>
</el-form-item> </div>
<el-form-item label="是否精选"> </el-form-item>
<el-switch v-model="addMsg.isJingxuan" :active-value="1" :inactive-value="0"></el-switch> <el-form-item label="是否精选">
</el-form-item> <el-switch v-model="addMsg.isJingxuan" :active-value="1" :inactive-value="0"></el-switch>
<el-form-item label="分类"> </el-form-item>
<el-select v-model="addMsg.fenlei" size="small"> <el-form-item label="分类">
<!-- <el-option <el-select v-model="addMsg.fenlei" size="small">
<!-- <el-option
v-for="item in options" v-for="item in options"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value">
</el-option> --> </el-option> -->
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<span slot="label">虚拟阅读量</span> <span slot="label">虚拟阅读量</span>
<el-tooltip slot="label" class="item" effect="dark" content="手机端显示的阅读量=实际阅读量+虚拟阅读量" placement="top"> <el-tooltip slot="label" class="item" effect="dark" content="手机端显示的阅读量=实际阅读量+虚拟阅读量" placement="top">
<i class="el-icon-info"></i> <i class="el-icon-info"></i>
</el-tooltip> </el-tooltip>
<el-input type="text" size="small" v-model="addMsg.yuedu"></el-input> <el-input type="text" size="small" v-model="addMsg.yuedu"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="排序"> <el-form-item label="排序">
<el-input type="text" size="small" v-model="addMsg.sort"></el-input> <el-input type="text" size="small" v-model="addMsg.sort"></el-input>
</el-form-item> </el-form-item>
</el-form>
</el-form> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="详情设置" name="second"> <el-tab-pane label="详情设置" name="second">
<div style="position: relative; margin-bottom: 10px; height: 621px;">
</el-tab-pane> <div class="all-components">
<div class="component-list">
<div class="component-item" @click="setPlugin('rubik')">
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/rubik.png" alt="">
<div class="component-name">图片广告</div>
</div>
<div class="component-item" @click="setPlugin('video')">
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/video.png" alt="">
<div class="component-name">视频</div>
</div>
<div class="component-item" @click="setPlugin('imgtext')">
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/image-text.png" alt="">
<div class="component-name">图文详情</div>
</div>
</div>
</div>
<div class="special_Content">
<div class="mobile-framework">
<div class="mobile-framework-header"></div>
<div class="mobile-framework-body">
<!-- 为空的样式开始 -->
<div v-if="pluginData.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>
<div>空空如也</div>
<div>请从左侧组件库添加组件</div>
</div>
</div>
<!-- 为空的样式结束 -->
<div v-for="(item,index) in pluginData" :key="index" @click="getItem(item)">
<rubik v-if="item.Id=='rubik'" :rubData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
:index="index" :dataLeng="pluginData.length"></rubik>
<myvideo v-if="item.Id=='video'" :videoData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
:index="index" :dataLeng="dataList.length"></myvideo>
<imageText v-if="item.Id=='imgtext'" :imageData="item" @getSord="getSord"
@comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></imageText>
</div>
</div>
</div>
</div>
</div>
</el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
<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')">保存
...@@ -139,25 +181,36 @@ ...@@ -139,25 +181,36 @@
</div> </div>
</template> </template>
<script> <script>
import ChooseImg from "@/components/global/ChooseImg.vue";
import rubik from "../sallCenter/plugin/rubik.vue"
import myvideo from "../sallCenter/plugin/video.vue"
import imageText from "../sallCenter/plugin/image-text.vue"
export default { export default {
components: {
ChooseImg,
rubik,
myvideo,
imageText
},
data() { data() {
return { return {
loading: false, loading: false,
activeName:'first', activeName: 'first',
pluginData:[],
dataList: [{ dataList: [{
ID:699, ID: 699,
fenlei:'李四', fenlei: '李四',
zhuanti:'ck', zhuanti: 'ck',
bujufangshi:'2020-10-25', bujufangshi: '2020-10-25',
shifoujingxuan:'是', shifoujingxuan: '是',
sort:1 sort: 1
}], }],
msg: { msg: {
pageIndex: 1, pageIndex: 1,
pageSize: 15, pageSize: 15,
}, },
pwdMsg:{ pwdMsg: {
password:'' password: ''
}, },
total: 0, total: 0,
speciaIsShowAdd: true, speciaIsShowAdd: true,
...@@ -166,12 +219,12 @@ ...@@ -166,12 +219,12 @@
flexType: 1, //专题列表布局方式 flexType: 1, //专题列表布局方式
coverImg: '', //封面图 coverImg: '', //封面图
Abstract: '', //摘要 Abstract: '', //摘要
CustomTitle:'', //自定义分享标题 CustomTitle: '', //自定义分享标题
customImg:'', //自定义分享图片 customImg: '', //自定义分享图片
isJingxuan:0,//是否精选 isJingxuan: 0, //是否精选
fenlei:0,//分类 fenlei: 0, //分类
yuedu:'', //虚拟阅读量 yuedu: '', //虚拟阅读量
sort:'' //排序 sort: '' //排序
}, },
rules: { rules: {
RoleName: [{ RoleName: [{
...@@ -263,6 +316,79 @@ ...@@ -263,6 +316,79 @@
}) })
}) })
}, },
//点击设置组件
setPlugin(Id) {
switch (Id.toString()) {
//图片广告
case 'rubik':
let rubObj = {
Id: 'rubik',
isCked: false,
data: {
style: -1, //样式-选取几张图
space: 0, //图片件间隔
height: 0, //选中的第几张图 对应的style_list里的height
w: 1, //选中的第几张图 对应的style_list里的w
h: 1, //选中的第几张图 对应的style_list里的h
list: [], //选中的第几张图的小区域对应的数据
hotspot: [] //热区划分
}
}
this.pluginData.push(rubObj);
break;
//视频
case 'video':
let videoObj = {
Id: 'video',
isCked: false,
data: {
pic_url: '', //图片地址
url: '' //视频地址
}
}
this.pluginData.push(videoObj);
break;
//图文详情
case 'imgtext':
let tuwenObj = {
Id: 'imgtext',
isCked: false,
data: {
content: '',
}
}
this.pluginData.push(tuwenObj);
break;
}
},
//给子组件调用 重新排序上移下移
getSord(index, IsUp) {
var currentItem = this.pluginData[index];
if (IsUp == 0) {
if (index > 0) {
var upItem = this.pluginData[index - 1];
this.$set(this.pluginData, index - 1, currentItem);
this.$set(this.pluginData, index, upItem);
}
} else {
if (index != this.pluginData.length - 1) {
var downItem = this.pluginData[index + 1];
this.$set(this.pluginData, index + 1, currentItem);
this.$set(this.pluginData, index, downItem);
}
}
},
//删除组件事件
comDelPlugin(index) {
this.pluginData.splice(index, 1);
},
//点击选中
getItem(item) {
this.pluginData.forEach(x => {
x.isCked = false;
})
item.isCked = true;
},
}, },
mounted() { mounted() {
//this.getList(); //this.getList();
...@@ -299,24 +425,134 @@ ...@@ -299,24 +425,134 @@
padding: 20px; padding: 20px;
box-sizing: border-box; box-sizing: border-box;
} }
.special .contentTwo{
.special .contentTwo {
min-width: 1000px; min-width: 1000px;
padding:20px; padding: 20px;
padding-right: 50%; padding-right: 50%;
} }
.special .el-alert__content{
.special .el-alert__content {
display: flex; display: flex;
align-items:center; align-items: center;
} }
.special .el-alert{
padding:0 0 5px 5px; .special .el-alert {
padding: 0 0 5px 5px;
} }
.special .el-alert__title{
margin-top:5px; .special .el-alert__title {
margin-top: 5px;
} }
.special .flexTypeList{
color: rgb(99, 108, 114); .special .flexTypeList {
color: rgb(99, 108, 114);
font-size: 12px; font-size: 12px;
margin-top: -0.5rem; margin-top: -0.5rem;
} }
.all-components {
width: 422px;
background: #fff;
max-height: 625px;
overflow-y: auto;
}
.all-components .component-list {
display: flex;
flex-wrap: wrap;
border: 0 solid #eeeeee;
border-width: 1px 0 0 1px;
}
.all-components .component-list .component-item {
width: 140px;
height: 100px;
border: 0 solid #eeeeee;
border-width: 0 1px 1px 0;
text-align: center;
padding: 15px 0 0;
cursor: pointer;
}
.all-components .component-list .component-item img {
width: 40px;
height: 40px;
}
.special_Content {
width: 430px;
overflow: hidden auto;
margin-top: 16px;
height: 605px;
}
.special_Content .mobile-framework {
width: 420px;
padding: 22px 22px 22px 23px;
background-color: #FFFFFF;
border-radius: 16px;
}
.special_Content .mobile-framework-header {
height: 60px;
line-height: 60px;
background: #333;
color: #fff;
text-align: center;
background: url(../../assets/img/storeDesign/topic-head.png) no-repeat;
border: 0 solid #eeeeee;
border-width: 2px 2px 0 2px;
width: 375px;
}
.special_Content .mobile-framework-body {
width: 375px;
min-height: 500px;
border: 1px solid #e2e2e2;
background: #f5f7f9;
}
.diy-component-options .el-button {
height: 25px;
line-height: 25px;
width: 25px;
padding: 0;
text-align: center;
border: none;
border-radius: 0;
position: absolute;
margin-left: 0;
}
.diy-component-preview {
cursor: pointer;
position: relative;
zoom: 0.5;
-moz-transform: scale(0.5);
-moz-transform-origin: top left;
font-size: 28px;
}
.diy-component-edit {
position: absolute;
top: 0;
bottom: 0;
left: 465px;
right: 0;
background: #fff;
padding: 20px;
overflow: auto;
min-width: 650px;
padding-right: 20%;
}
.diy-component-options {
position: relative;
}
.active .diy-component-preview {
border: 2px dashed #409EFF;
left: -2px;
right: -2px;
width: calc(100% + 4px);
}
</style> </style>
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