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 @@
<template slot-scope="scope">
<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="RemmoveRole(scope.row)" src="../../assets/img/userman/del.png"
alt="">
<img @click="RemmoveRole(scope.row)" src="../../assets/img/userman/del.png" alt="">
</template>
</el-table-column>
</el-table>
......@@ -53,84 +52,127 @@
<span @click="speciaIsShowAdd=true" style="color:rgb(64, 158, 255);cursor:pointer;">专题</span><span
style="margin:0 9px;color:#C0C4CC">/</span><span>专题编辑</span>
</div>
<div class="content contentTwo">
<div class="content">
<el-tabs v-model="activeName">
<el-tab-pane label="基础设置" name="first">
<el-form label-width="10rem">
<el-form-item label="标题">
<el-input type="text" maxlength="100" size="small"></el-input>
</el-form-item>
<el-form-item label="专题列表布局方式">
<el-radio-group v-model="addMsg.flexType">
<el-radio :label="1">小图模式</el-radio>
<el-radio :label="2">大图模式</el-radio>
<el-radio :label="3">多图模式</el-radio>
</el-radio-group>
<div class="flexTypeList">
小图模式建议封面图片大小：268×202；大图模式建议封面图片大小：702×350；多图模式建议封面图片大小：268×202，最多上传3张图片
</div>
</el-form-item>
<el-form-item label="封面图">
<el-tooltip class="item" effect="dark" content="建议尺寸: 268 * 202" 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.coverImg) + ')'}">
<i v-if="addMsg.coverImg==''" class="el-icon-picture-outline"></i>
</div>
</div>
</el-form-item>
<el-form-item>
<span slot="label">摘要</span>
<el-tooltip slot="label" class="item" effect="dark" content="专题内容的简介，用于列表上显示" placement="top">
<i class="el-icon-info"></i>
</el-tooltip>
<el-input type="textarea" size="small" v-model="addMsg.Abstract" :rows="2"></el-input>
</el-form-item>
<el-form-item label="自定义分享标题">
<el-input type="text" size="small" v-model="addMsg.CustomTitle"></el-input>
</el-form-item>
<el-form-item label="自定义分享图片">
<el-tooltip class="item" effect="dark" content="建议尺寸:420 * 336" 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.customImg) + ')'}">
<i v-if="addMsg.customImg==''" class="el-icon-picture-outline"></i>
</div>
</div>
</el-form-item>
<el-form-item label="是否精选">
<el-switch v-model="addMsg.isJingxuan" :active-value="1" :inactive-value="0"></el-switch>
</el-form-item>
<el-form-item label="分类">
<el-select v-model="addMsg.fenlei" size="small">
<!-- <el-option
<el-tab-pane label="基础设置" name="first">
<div class="contentTwo">
<el-form label-width="10rem">
<el-form-item label="标题">
<el-input type="text" maxlength="100" size="small"></el-input>
</el-form-item>
<el-form-item label="专题列表布局方式">
<el-radio-group v-model="addMsg.flexType">
<el-radio :label="1">小图模式</el-radio>
<el-radio :label="2">大图模式</el-radio>
<el-radio :label="3">多图模式</el-radio>
</el-radio-group>
<div class="flexTypeList">
小图模式建议封面图片大小：268×202；大图模式建议封面图片大小：702×350；多图模式建议封面图片大小：268×202，最多上传3张图片
</div>
</el-form-item>
<el-form-item label="封面图">
<el-tooltip class="item" effect="dark" content="建议尺寸: 268 * 202" placement="top">
<el-button size="mini" @click="choicImg=true">选择图片</el-button>
</el-tooltip>
<div class="customize-share-title">
<div class="zk_pic_box" style="width:80px;height:80px;" flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(addMsg.coverImg) + ')'}">
<i v-if="addMsg.coverImg==''" class="el-icon-picture-outline"></i>
</div>
</div>
</el-form-item>
<el-form-item>
<span slot="label">摘要</span>
<el-tooltip slot="label" class="item" effect="dark" content="专题内容的简介，用于列表上显示" placement="top">
<i class="el-icon-info"></i>
</el-tooltip>
<el-input type="textarea" size="small" v-model="addMsg.Abstract" :rows="2"></el-input>
</el-form-item>
<el-form-item label="自定义分享标题">
<el-input type="text" size="small" v-model="addMsg.CustomTitle"></el-input>
</el-form-item>
<el-form-item label="自定义分享图片">
<el-tooltip class="item" effect="dark" content="建议尺寸:420 * 336" placement="top">
<el-button size="mini" @click="choicImg=true">选择图片</el-button>
</el-tooltip>
<div class="customize-share-title">
<div class="zk_pic_box" style="width:80px;height:80px;" flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(addMsg.customImg) + ')'}">
<i v-if="addMsg.customImg==''" class="el-icon-picture-outline"></i>
</div>
</div>
</el-form-item>
<el-form-item label="是否精选">
<el-switch v-model="addMsg.isJingxuan" :active-value="1" :inactive-value="0"></el-switch>
</el-form-item>
<el-form-item label="分类">
<el-select v-model="addMsg.fenlei" size="small">
<!-- <el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option> -->
</el-select>
</el-form-item>
<el-form-item>
<span slot="label">虚拟阅读量</span>
<el-tooltip slot="label" class="item" effect="dark" content="手机端显示的阅读量=实际阅读量+虚拟阅读量" placement="top">
<i class="el-icon-info"></i>
</el-tooltip>
<el-input type="text" size="small" v-model="addMsg.yuedu"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input type="text" size="small" v-model="addMsg.sort"></el-input>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="详情设置" name="second">
</el-tab-pane>
</el-select>
</el-form-item>
<el-form-item>
<span slot="label">虚拟阅读量</span>
<el-tooltip slot="label" class="item" effect="dark" content="手机端显示的阅读量=实际阅读量+虚拟阅读量" placement="top">
<i class="el-icon-info"></i>
</el-tooltip>
<el-input type="text" size="small" v-model="addMsg.yuedu"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input type="text" size="small" v-model="addMsg.sort"></el-input>
</el-form-item>
</el-form>
</div>
</el-tab-pane>
<el-tab-pane label="详情设置" name="second">
<div style="position: relative; margin-bottom: 10px; height: 621px;">
<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>
</div>
<el-button size="small" style="margin-top:20px;padding:9px 25px;" type="primary" @click="submitform('addMsg')">保存
......@@ -139,25 +181,36 @@
</div>
</template>
<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 {
components: {
ChooseImg,
rubik,
myvideo,
imageText
},
data() {
return {
loading: false,
activeName:'first',
activeName: 'first',
pluginData:[],
dataList: [{
ID:699,
fenlei:'李四',
zhuanti:'ck',
bujufangshi:'2020-10-25',
shifoujingxuan:'是',
sort:1
ID: 699,
fenlei: '李四',
zhuanti: 'ck',
bujufangshi: '2020-10-25',
shifoujingxuan: '是',
sort: 1
}],
msg: {
pageIndex: 1,
pageSize: 15,
},
pwdMsg:{
password:''
pwdMsg: {
password: ''
},
total: 0,
speciaIsShowAdd: true,
......@@ -166,12 +219,12 @@
flexType: 1, //专题列表布局方式
coverImg: '', //封面图
Abstract: '', //摘要
CustomTitle:'', //自定义分享标题
customImg:'', //自定义分享图片
isJingxuan:0,//是否精选
fenlei:0,//分类
yuedu:'', //虚拟阅读量
sort:'' //排序
CustomTitle: '', //自定义分享标题
customImg: '', //自定义分享图片
isJingxuan: 0, //是否精选
fenlei: 0, //分类
yuedu: '', //虚拟阅读量
sort: '' //排序
},
rules: {
RoleName: [{
......@@ -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() {
//this.getList();
......@@ -299,24 +425,134 @@
padding: 20px;
box-sizing: border-box;
}
.special .contentTwo{
.special .contentTwo {
min-width: 1000px;
padding:20px;
padding: 20px;
padding-right: 50%;
}
.special .el-alert__content{
.special .el-alert__content {
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;
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>
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