Skip to content

E
ElectricitySheep
Commit 4d10cb55 authored by 黄奎's avatar 黄奎
Browse files
Options

新增组件

parent 50d8baa8
Hide whitespace changes
Inline Side-by-side
Showing with 472 additions and 7 deletions
src/components/sallCenter/plugin/nav-page.vue 0 → 100644
View file @ 4d10cb55
<style>
.diynav-container {
min-height: 100px;
width: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.Headernav-item {
text-align: center;
font-size: 24px;
padding: 20px 0;
}
.Navabout-text {
color: #909399;
font-size: 12px;
margin-top: -10px;
}
.navigation_pic_boxDiv {
width: 70px;
height: 70px;
border: 1px solid #ccc;
cursor: pointer;
background-color: #fff;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
.navigation_pic_boxDiv i {
font-size: 22px;
color: #909399;
}
.divbg_position {
width: 170px;
height: 180px;
}
.divbg_position>div {
height: 50px;
width: 50px;
margin-bottom: 10px;
cursor: pointer;
background-color: #F5F7F9;
}
.bg_active {
background-color: #E6F4FF;
border: 2px dashed #5CB3FD;
}
.edit-nav-item {
border: 1px solid #e2e2e2;
line-height: normal;
padding: 5px;
margin-bottom: 5px;
}
.nav-edit-options {
position: relative;
}
.navapp-image-upload {
display: inline-block;
margin-right: 5px;
}
.nav-edit-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;
}
.navapp-image-upload .pic-box {
width: 70px;
height: 70px;
border: 1px solid #ccc;
cursor: pointer;
background-color: #fff;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
.navapp-image-upload .pic-box i {
font-size: 22px;
color: #909399;
}
.navapp-image-upload .pic-box .size-tip {
line-height: 1.35;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
color: #fff;
background: rgba(0, 0, 0, 0.2);
letter-spacing: -1px;
}
.navapp-image-upload .image-delete {
position: absolute;
top: -10px;
right: -10px;
padding: 5px;
visibility: hidden;
z-index: 1;
}
.navapp-image-upload .image-delete i {
font-size: 12px;
color: #fff;
}
.navapp-image-upload:hover .image-delete {
visibility: visible;
}
.Headernav-item img {
display: block;
width: 88px;
height: 88px;
margin: 0 auto 5px auto;
}
.Headernav-item>div {
height: 25px;
line-height: 25px;
}
.navigation_pic_boxDiv .image-delete {
position: absolute;
top: -10px;
right: -10px;
padding: 5px;
visibility: hidden;
z-index: 1;
}
.navigation_pic_boxDiv:hover .image-delete {
visibility: visible;
}
.navigation_pic_boxDiv .image-delete i {
font-size: 12px;
color: #fff;
}
</style>
<template>
<div :class="{'active':navData.isCked}">
<div class="diy-component-options" v-if="navData.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-component-preview">
<div class="diynav-container" :style="{backgroundColor:navData.data.backgroundColor,overflowX:navData.data.scroll?'auto':'hidden',backgroundPosition:bgPostion,
backgroundImage:'url(' + getIconLink(navData.data.backgroundPicUrl) + ')'}">
<div flex="dir:left" style="width:750px;flex-wrap:wrap;">
<div class="Headernav-item" v-for="(item,index) in navData.data.navs" :key="index"
:style="{width:getNavWidth(navData.data.columns)}">
<img :src="getIconLink(item.icon)" />
<div :style="{color:navData.data.color}">{{item.name}}</div>
</div>
</div>
</div>
</div>
<div class="diy-component-edit" v-if="navData.isCked">
<el-form label-width="100px">
<el-form-item label="每页行数" size="small">
<el-input type="number" :min="1" :max="100" v-model="navData.data.rows"></el-input>
</el-form-item>
<el-form-item label="每行个数">
<el-radio-group v-model="navData.data.columns">
<el-radio :label="3">3</el-radio>
<el-radio :label="4">4</el-radio>
<el-radio :label="5">5</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="左右滑动">
<el-switch v-model="navData.data.scroll"></el-switch>
</el-form-item>
<el-form-item label="拉取商城导航">
<el-button size="small" @click="isShowNavLink=true">选择</el-button>
</el-form-item>
<el-form-item label="导航图标">
<div flex="dir:top">
<div class="edit-nav-item" v-for="(item,index) in navData.data.navs" :key="index">
<div class="nav-edit-options">
<el-button type="primary" icon="el-icon-delete" @click="delIcon(index)"
style="top: -6px; right: -31px;"></el-button>
</div>
<div flex="dir:left box:first cross:center">
<div>
<div class="navapp-image-upload">
<div flex="main:center cross:center" @click="choiceMyImg(index)" class="pic-box"
:style="{backgroundImage:'url(' + getIconLink(item.icon) + ')'}">
<i class="el-icon-picture-outline" v-if="item.icon==''"></i>
<div class="size-tip">88 × 88</div>
<el-button type="danger" v-if="item.icon!=''" class="image-delete" size="mini"
icon="el-icon-close" @click.stop="item.icon=''" circle></el-button>
</div>
</div>
</div>
<div>
<div style="margin-bottom:5px;">
<el-input type="text" placeholder="名称" v-model="item.name" size="small"></el-input>
</div>
<div>
<el-input type="text" placeholder="组件名称" v-model="item.url" size="small"></el-input>
</div>
</div>
</div>
</div>
</div>
<el-button size="small" @click="addNavigatiton()">添加图标</el-button>
</el-form-item>
<el-form-item label="背景颜色">
<el-color-picker v-model="navData.data.backgroundColor" size="small"></el-color-picker>
<el-input type="text" v-model="navData.data.backgroundColor" size="small"
style="width: 80px; margin-right: 25px;"></el-input>
</el-form-item>
<el-form-item label="背景图片">
<el-switch v-model="navData.data.showImg" :active-value="true" :inactive-value="false"
@change="showImgChange()"></el-switch>
<div class="Navabout-text">当前组件高度为156px,宽750px</div>
</el-form-item>
<el-form-item label="上传背景" v-if="navData.data.showImg">
<div style="line-height:normal;display:inline-block;">
<div class="navigation_pic_boxDiv" @click="choicImg=true,selectType=1" flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(navData.data.backgroundPicUrl) + ')'}">
<i class="el-icon-picture-outline" v-if="navData.data.backgroundPicUrl==''"></i>
<el-button type="danger" class="image-delete" v-if="navData.data.backgroundPicUrl!=''" size="mini"
icon="el-icon-close" @click.stop="navData.data.backgroundPicUrl=''" circle></el-button>
</div>
</div>
</el-form-item>
<el-form-item label="图片位置" v-if="navData.data.showImg">
<div flex="main:justify wrap:wrap" class="divbg_position">
<div :class="{'bg_active':navData.data.position==1}"
@click="navData.data.position=1,selectPosition('left top')"></div>
<div :class="{'bg_active':navData.data.position==2}"
@click="navData.data.position=2,selectPosition('center top')"></div>
<div :class="{'bg_active':navData.data.position==3}"
@click="navData.data.position=3,selectPosition('right top')"></div>
<div :class="{'bg_active':navData.data.position==4}"
@click="navData.data.position=4,selectPosition('left center')"></div>
<div :class="{'bg_active':navData.data.position==5}"
@click="navData.data.position=5,selectPosition('center center')"></div>
<div :class="{'bg_active':navData.data.position==6}"
@click="navData.data.position=6,selectPosition('right center')"></div>
<div :class="{'bg_active':navData.data.position==7}"
@click="navData.data.position=7,selectPosition('left bottom')"></div>
<div :class="{'bg_active':navData.data.position==8}"
@click="navData.data.position=8,selectPosition('center bottom')"></div>
<div :class="{'bg_active':navData.data.position==9}"
@click="navData.data.position=9,selectPosition('right bottom')"></div>
</div>
</el-form-item>
<el-form-item label="填充方式" v-if="navData.data.showImg">
<el-radio-group v-model="navData.data.mode">
<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 label="背景图宽" v-if="navData.data.mode!=1">
<el-slider v-model="navData.data.backgroundWidth" show-input :show-input-controls='false'
style="float:left;width:95%;"></el-slider>
<div style="float:right;">%</div>
</el-form-item>
<el-form-item label="背景图高" v-if="navData.data.mode!=1">
<el-slider v-model="navData.data.backgroundHeight" show-input :show-input-controls='false'
style="float:left;width:95%;"></el-slider>
<div style="float:right;">%</div>
</el-form-item>
<el-form-item label="文字颜色">
<el-color-picker v-model="navData.data.color" size="small"></el-color-picker>
<el-input type="text" v-model="navData.data.color" size="small" style="width: 80px; margin-right: 25px;">
</el-input>
</el-form-item>
</el-form>
</div>
<el-dialog title="导航链接" :visible.sync="isShowNavLink" width="800px">
<Navigation ref="Navigation"></Navigation>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="isShowNavLink=false">取 消</el-button>
<el-button size="small" type="danger" @click="getMyLink()">确 定</el-button>
</span>
</el-dialog>
<el-dialog title="选择链接" :visible.sync="isShowLink" width="800px">
<chooseMenu ref="chooseMenu"></chooseMenu>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="isShowLink=false">取 消</el-button>
<el-button size="small" type="danger" @click="getChoiceLink()">确 定</el-button>
</span>
</el-dialog>
<!-- 选择图片文件 -->
<el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
<ChooseImg @SelectId="SelectId"></ChooseImg>
</el-dialog>
</div>
</template>
<script>
import Navigation from "../../common/NavigationLinks.vue";
import chooseMenu from "../../common/chooseMenu.vue";
import ChooseImg from "@/components/global/ChooseImg.vue";
export default {
props: ["navData", "index", "dataLeng"],
data() {
return {
bgPostion: '',
//宽度
navWidth: '',
isShowNavLink: false,
//弹窗
isShowLink: false,
//数组下标
commonIndex: 0,
//选择图片弹窗
choicImg: false,
selectType: 1,
};
},
components: {
Navigation,
chooseMenu,
ChooseImg
},
created() {
},
methods: {
//是否显示背景图切换
showImgChange() {
if (!this.navData.data.showImg) {
this.navData.data.backgroundPicUrl = "";
}
},
//切换背景位置
selectPosition(po) {
this.bgPostion = po;
},
//改变宽度
getNavWidth(w) {
let str = ''
if (w == 3) {
str = '33.3333%'
} else if (w == 4) {
str = '25%'
} else {
str = '20%'
}
return str;
},
//添加导航图标
addNavigatiton() {
let obj = {
icon: '',
name: '',
url: '',
openType: 'navigate',
key: 'diy'
}
this.navData.data.navs.push(obj);
},
//删除导航图标
delIcon(index) {
this.navData.data.navs.splice(index, 1);
},
//点击确定获取linK
getMyLink() {
var ckedArr = this.$refs.Navigation.getChooseLink();
this.navData.data.navs = this.navData.data.navs.concat(ckedArr);
this.isShowNavLink = false;
},
getMyChoice(index) {
this.isShowLink = true;
this.commonIndex = index;
},
//获取选择链接
getChoiceLink() {
//调用子组件方法
var obj = this.$refs.chooseMenu.getChooseMenu();
this.navData.data.navs[this.commonIndex].url = obj.PageUrl;
this.isShowLink = false;
},
//选择图片
SelectId(msg) {
if (this.selectType == 1) {
this.navData.data.backgroundPicUrl = msg.url;
} else {
this.navData.data.navs[this.commonIndex].icon = msg.url;
}
this.choicImg = false;
},
//向父组件传值 并调用排序
resetSord(IsUp) {
this.$emit('getSord', this.index, IsUp);
},
//选取图片
choiceMyImg(index) {
this.choicImg = true;
this.commonIndex = index;
this.selectType = 2;
},
//点击触发父组件删除
delPlugin() {
this.$emit('comDelPlugin', this.index);
}
},
mounted() {
}
};
</script>
src/components/sallCenter/templateEdit.vue
View file @ 4d10cb55
......@@ -296,6 +296,8 @@
@comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></storeGoods>
<educationteacher v-if="item.Id=='educationteacher'" :lsData="item" @getSord="getSord"
@comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></educationteacher>
<navPage v-if="item.Id=='nav-page'" :navData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
:index="index" :dataLeng="dataList.length"></navPage>
</div>
</div>
</div>
......@@ -410,6 +412,7 @@
import educationCustom from "../sallCenter/plugin/educationCustom"
import reservestore from "../sallCenter/plugin/reservestore"
import storeGoods from "../sallCenter/plugin/storeGoods"
import navPage from "../sallCenter/plugin/nav-page"
import ChooseImg from "@/components/global/ChooseImg.vue";
......@@ -486,7 +489,8 @@
educationCustom,
reservestore,
storeGoods,
educationteacher
educationteacher,
navPage
},
methods: {
//选择图片
......@@ -626,9 +630,9 @@
Id: 'notice',
isCked: false,
data: {
name:'公告', //公告名称
content:'', //公告内容
icon:this.domainManager().ImageUrl + '/Static/icon-notice.png', //公告图标
name: '公告', //公告名称
content: '', //公告内容
icon: this.domainManager().ImageUrl + '/Static/icon-notice.png', //公告图标
textColor: '#ffffff', //文字颜色
background: '#f67f79', //背景颜色
headerUrl: this.domainManager().ImageUrl + '/Static/icon-notice-title.png', //头部图片
......@@ -715,9 +719,9 @@
right: 0, //右边距
bottom: 0, //下边距
left: 0, //左边距
isfullscreen:false, //是否全屏
backgroundimage:'', //背景图片
radius:0, //视频圆角
isfullscreen: false, //是否全屏
backgroundimage: '', //背景图片
radius: 0, //视频圆角
}
}
this.dataList.push(videoObj);
......@@ -1457,6 +1461,28 @@
}
this.dataList.push(lsObj);
break;
//导航栏目
case 'nav-page':
let navPageObj = {
Id: 'nav-page',
isCked: false,
data: {
color: '#353535',
rows: 1, //每页行数
columns: 3, //每行个数
scroll: true, //左右滑动
navs: [], //导航图标
showImg: false, //背景图片
backgroundColor: '#ffffff', //背景颜色
backgroundPicUrl: '', //背景链接
position: 5, //图片位置
mode: 1, //填充方式
backgroundHeight: 100, //背景图宽
backgroundWidth: 100, //背景图高
}
}
this.dataList.push(navPageObj);
break;
}
},
//给子组件调用 重新排序上移下移
......
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