Skip to content

E
ElectricitySheep
Commit 8b0bdc54 authored by zhengke's avatar zhengke
Browse files
Options

增加组件

parent 62832c9f
Hide whitespace changes
Inline Side-by-side
Showing with 1268 additions and 331 deletions
src/components/common/choiceFenlei.vue 0 → 100644
View file @ 8b0bdc54
<template>
<div>
<el-table ref="multipleTable" :data="dataList" tooltip-effect="dark" style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column label="ID">
<template slot-scope="scope">{{ scope.row.id }}</template>
</el-table-column>
<el-table-column prop="name" label="名称">
<template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
dataList: [],
msg:{
Id:0,
Name:'',
Tier:0,
ParentId:0,
Enabled:1,
IsShow:1,
},
selectRow:[],
};
},
created() {},
methods: {
//获取所有菜单
getList() {
this.apipost("/api/product/GetProductCategoryTreeList", this.msg, res => {
if (res.data.resultCode == 1) {
var dataArray = res.data.data;
this.dataList=[];
if (dataArray && dataArray.length > 0) {
dataArray.forEach(x => {
this.dataList.push({
id: x.Id,
name: x.Name,
menuName: x.Name,
goodsNum: 30,
staticGoods: false,
goodsList: [],
})
if(x.ChildList&&x.ChildList.length>0){
x.ChildList.forEach(y=>{
this.dataList.push({
id: y.Id,
name: y.Name,
menuName: y.Name,
goodsNum: 30,
staticGoods: false,
goodsList: [],
})
if(y.ChildList&&y.ChildList.length>0){
y.ChildList.forEach(z=>{
this.dataList.push({
id: z.Id,
name: z.Name,
menuName: z.Name,
goodsNum: 30,
staticGoods: false,
goodsList: [],
})
})
}
})
}
});
}
} else {
this.Info(res.data.message);
}
})
},
handleSelectionChange(val){
this.selectRow=JSON.parse(JSON.stringify(val));
},
//父组件调用方法
getChoicedFenlei(){
return this.selectRow;
},
//清空多选方法
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
},
mounted() {
this.getList();
}
};
</script>
src/components/common/choiceGood.vue 0 → 100644
View file @ 8b0bdc54
<template>
<div>
<el-input size="mini" v-model="msg.Name" placeholder="根据名称搜索" :clearable="true"
@clear="getList" @keyup.enter.native="getList">
<el-button slot="append" @click="getList">搜索</el-button>
</el-input>
<el-table ref="multipleTable" :data="dataList" tooltip-effect="dark" style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="50px">
</el-table-column>
<el-table-column label="ID" width="100px">
<template slot-scope="scope">{{ scope.row.Id }}</template>
</el-table-column>
<el-table-column prop="name" label="名称">
<template slot-scope="scope">
<div flex="cross:center dir:left">
<img style="width:50px;height:50px;margin-right:10px;" :src="'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+scope.row.CoverImage"/>
<div>{{ scope.row.Name }}</div>
</div>
</template>
</el-table-column>
</el-table>
<el-pagination style="text-align:right"
background
@current-change="handleCurrentChange"
:page-size="msg.pageSize"
layout="prev, pager, next"
:total="total">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
dataList: [],
msg:{
pageIndex:1,
pageSize:15,
Name:'',
},
total:0,
selectRow:[],
};
},
created() {},
methods: {
//获取所有菜单
getList() {
this.apipost("/api/product/GetProductGoodsDialogList", this.msg, res => {
if (res.data.resultCode == 1) {
console.log(res,'res');
this.total=res.data.data.count;
this.dataList=res.data.data.pageData;
} else {
this.Info(res.data.message);
}
})
},
handleSelectionChange(val){
this.selectRow=JSON.parse(JSON.stringify(val));
},
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.getList();
},
//父组件调用方法
getChoicedGoods(){
return this.selectRow;
},
//清空多选方法
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
},
mounted() {
this.getList();
}
};
</script>
src/components/sallCenter/plugin/banner.vue
View file @ 8b0bdc54
...@@ -120,7 +120,7 @@ ...@@ -120,7 +120,7 @@
<template> <template>
<div :class="{'active':banData.isCked}"> <div :class="{'active':banData.isCked}">
<div class="diy-component-options" v-if="banData.isCked"> <div class="diy-component-options" v-if="banData.isCked">
<el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;"></el-button> <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-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-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> <el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)" style="right: -25px; top: 30px;"></el-button>
...@@ -273,6 +273,11 @@ ...@@ -273,6 +273,11 @@
resetSord(IsUp){ resetSord(IsUp){
this.$emit('getSord', this.index,IsUp); this.$emit('getSord', this.index,IsUp);
}, },
//点击触发父组件删除
delPlugin(){
this.$emit('comDelPlugin', this.index);
},
}, },
mounted() { mounted() {
......
src/components/sallCenter/plugin/goods.vue
View file @ 8b0bdc54
...@@ -292,7 +292,7 @@ ...@@ -292,7 +292,7 @@
<template> <template>
<div :class="{'active':goodData.isCked}"> <div :class="{'active':goodData.isCked}">
<div class="diy-component-options" v-if="goodData.isCked"> <div class="diy-component-options" v-if="goodData.isCked">
<el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;"></el-button> <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-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)" <el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)"
style="right: -25px; top: 0;"></el-button> style="right: -25px; top: 0;"></el-button>
...@@ -305,34 +305,34 @@ ...@@ -305,34 +305,34 @@
<div :flex="cCatFlex" class="cat-list" <div :flex="cCatFlex" class="cat-list"
v-if="data.showCat && (data.catPosition=='left'||(data.catPosition=='top'&&cCatList.length>1))" v-if="data.showCat && (data.catPosition=='left'||(data.catPosition=='top'&&cCatList.length>1))"
:class="'cat-list-'+data.catPosition+' cat-style-'+data.catStyle"> :class="'cat-list-'+data.catPosition+' cat-style-'+data.catStyle">
<div class="cat-item" v-for="(item,index) in cCatList" :class="index===0?'active':''" <div class="cat-item" v-for="(item,index) in cCatList" :class="index===0?'active':''" :key="index"
flex="main:center cross:center"> flex="main:center cross:center">
<div class="cat-name">{{item.menuName}}</div> <div class="cat-name">{{item.menuName}}</div>
</div> </div>
</div> </div>
<div class="goods-list" :class="'goods-list-style-'+data.listStyle"> <div class="goods-list" :class="'goods-list-style-'+data.listStyle">
<div v-for="(cat,catIndex) in cCatList"> <div v-for="(cat,catIndex) in cCatList" :key="catIndex">
<div v-if="data.catPosition==='left'" style="color: #666666;margin: 24px 11px;font-size: 24px"> <div v-if="data.catPosition==='left'" style="color: #666666;margin: 24px 11px;font-size: 24px">
{{cat.menuName}} {{cat.menuName}}
</div> </div>
<div :style="cGoodsListStyle" flex> <div :style="cGoodsListStyle" flex>
<div v-for="(goods,goodsIndex) in cCatGoodsList(cat, catIndex)" class="goods-item" <div v-for="(goods,goodsIndex) in cCatGoodsList(cat, catIndex)" class="goods-item" :key="goodsIndex"
:class="data.catPosition==='left'?'goods-cat-list':''"> :class="data.catPosition==='left'?'goods-cat-list':''">
<div style="display: inline-block;" :style="cGoodsItemWidth"> <div style="display: inline-block;" :style="cGoodsItemWidth">
<div :style="cGoodsItemStyle" :flex="cGoodsItemFlex" style="position: relative;"> <div :style="cGoodsItemStyle" :flex="cGoodsItemFlex" style="position: relative;">
<div class="goods-pic" <div class="goods-pic"
:class="'goods-pic-'+data.goodsCoverProportion+' goods-pic-fill-'+data.fill" :class="'goods-pic-'+data.goodsCoverProportion+' goods-pic-fill-'+data.fill"
:style="'background-image: url('+goods.picUrl+')'"> :style="'background-image: url(http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+goods.CoverImage+')'">
<div v-if="data.showGoodsTag" class="goods-tag" <div v-if="data.showGoodsTag" class="goods-tag"
:style="'background-image: url('+ getIconLink(data.goodsTagPicUrl)+')'"></div> :style="'background-image: url('+ getIconLink(data.goodsTagPicUrl)+')'"></div>
</div> </div>
<div :style="cGoodsItemInfoStyle"> <div :style="cGoodsItemInfoStyle">
<div class="goods-name" :class="data.listStyle===-1?'goods-name-static':''"> <div class="goods-name" :class="data.listStyle===-1?'goods-name-static':''">
<template v-if="data.showGoodsName">{{goods.name}}</template> <template v-if="data.showGoodsName">{{goods.Name}}</template>
</div> </div>
<div flex="box:last"> <div flex="box:last">
<div class="goods-price"> <div class="goods-price">
<template v-if="data.showGoodsPrice">￥{{goods.price}}</template> <template v-if="data.showGoodsPrice">￥{{goods.SellingPrice}}</template>
</div> </div>
<div> <div>
<template v-if="cShowBuyBtn"> <template v-if="cShowBuyBtn">
...@@ -404,13 +404,13 @@ ...@@ -404,13 +404,13 @@
<div flex="box:first" v-if="cat.staticGoods"> <div flex="box:first" v-if="cat.staticGoods">
<div class="diy-goods-label">商品列表</div> <div class="diy-goods-label">商品列表</div>
<div> <div>
<draggable v-model="cat.goodsList" flex class="goods-list"> <draggable v-model="cat.goodsList" class="goods-list" style="display:flex">
<div class="goods-item" v-for="(goods,goodsIndex) in cat.goodsList"> <div class="goods-item" v-for="(goods,goodsIndex) in cat.goodsList" :key="goodsIndex">
<el-tooltip effect="dark" content="移除商品" placement="top"> <el-tooltip effect="dark" content="移除商品" placement="top">
<el-button @click="deleteGoods(goodsIndex,catIndex)" circle class="goods-delete" type="danger" <el-button @click="deleteGoods(goodsIndex,catIndex)" circle class="goods-delete" type="danger"
icon="el-icon-close"></el-button> icon="el-icon-close"></el-button>
</el-tooltip> </el-tooltip>
<div class="goods-pic" :style="'background-image:url('+goods.picUrl+')'"></div> <div class="goods-pic" :style="'background-image:url(http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+goods.CoverImage+')'"></div>
</div> </div>
</draggable> </draggable>
<div class="goods-add"> <div class="goods-add">
...@@ -419,7 +419,7 @@ ...@@ -419,7 +419,7 @@
</div> </div>
</div> </div>
</div> </div>
<el-button size="small" @click="catDialog.visible=true">添加分类</el-button> <el-button size="small" @click="isFenlei=true">添加分类</el-button>
</el-form-item> </el-form-item>
</template> </template>
<template v-else> <template v-else>
...@@ -431,13 +431,13 @@ ...@@ -431,13 +431,13 @@
<el-input size="small" v-model.number="data.goodsLength" type="number"></el-input> <el-input size="small" v-model.number="data.goodsLength" type="number"></el-input>
</el-form-item> </el-form-item>
<el-form-item v-show="data.addGoodsType == 1" label="商品列表"> <el-form-item v-show="data.addGoodsType == 1" label="商品列表">
<draggable v-model="data.list" flex class="goods-list"> <draggable v-model="data.list" class="goods-list" style="display:flex;">
<div class="goods-item" v-for="(goods,goodsIndex) in data.list"> <div class="goods-item" v-for="(goods,goodsIndex) in data.list" :key="goodsIndex">
<el-tooltip effect="dark" content="移除商品" placement="top"> <el-tooltip effect="dark" content="移除商品" placement="top">
<el-button @click="deleteGoods(goodsIndex,null)" circle class="goods-delete" type="danger" <el-button @click="deleteGoods(goodsIndex,null)" circle class="goods-delete" type="danger"
icon="el-icon-close"></el-button> icon="el-icon-close"></el-button>
</el-tooltip> </el-tooltip>
<div class="goods-pic" :style="'background-image:url('+goods.picUrl+')'"></div> <div class="goods-pic" :style="'background-image:url(http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+goods.CoverImage+')'"></div>
</div> </div>
</draggable> </draggable>
<div class="goods-add"> <div class="goods-add">
...@@ -524,17 +524,38 @@ ...@@ -524,17 +524,38 @@
<el-dialog title="选择文件" :visible.sync="choicImg" width="1240px"> <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
<ChooseImg @SelectId="SelectId"></ChooseImg> <ChooseImg @SelectId="SelectId"></ChooseImg>
</el-dialog> </el-dialog>
<!-- 选择分类 -->
<el-dialog title="选择分类" :visible.sync="isFenlei" width="800px">
<ChooseFenlei ref="ChooseFenlei"></ChooseFenlei>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="quxiaoFenlei()">取 消</el-button>
<el-button size="small" type="danger" @click="getChoiceFenlei()">确 定</el-button>
</span>
</el-dialog>
<!-- 选择商品 -->
<el-dialog title="选择商品" :visible.sync="isShowGoods">
<choiceGood ref="choiceGood"></choiceGood>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="quxiaoGoods()">取 消</el-button>
<el-button size="small" type="danger" @click="getGoodsChoice()">确 定</el-button>
</span>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import draggable from "vuedraggable" import draggable from "vuedraggable"
import ChooseImg from "@/components/global/ChooseImg.vue"; import ChooseImg from "@/components/global/ChooseImg.vue";
import ChooseFenlei from "../../common/choiceFenlei.vue";
import choiceGood from "../../common/choiceGood.vue";
export default { export default {
props: ["goodData", "index", "dataLeng"], props: ["goodData", "index", "dataLeng"],
components: { components: {
draggable, draggable,
ChooseImg ChooseImg,
ChooseFenlei,
choiceGood
}, },
data() { data() {
return { return {
...@@ -542,25 +563,10 @@ ...@@ -542,25 +563,10 @@
position: 'center center', position: 'center center',
repeat: 'no-repeat', repeat: 'no-repeat',
choicImg:false, choicImg:false,
catDialog: { isFenlei:false,
visible: false, isShowGoods:false,
page: 1, //添加的下标
loading: null, comIndex:-1,
pagination: null,
list: null,
selectedList: null,
},
goodsDialog: {
visible: false,
page: 1,
catIndex: null,
catId: null,
loading: null,
pagination: null,
list: null,
selectedList: null,
keyword: null
},
goodsTags: [{ goodsTags: [{
name: '热销', name: '热销',
picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goods-tag-rx.png', picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goods-tag-rx.png',
...@@ -588,6 +594,10 @@ ...@@ -588,6 +594,10 @@
resetSord(IsUp) { resetSord(IsUp) {
this.$emit('getSord', this.index, IsUp); this.$emit('getSord', this.index, IsUp);
}, },
//点击触发父组件删除
delPlugin(){
this.$emit('comDelPlugin', this.index);
},
cCatGoodsList(cat, catIndex) { cCatGoodsList(cat, catIndex) {
const goodsList = cat.goodsList; const goodsList = cat.goodsList;
let newList = []; let newList = [];
...@@ -599,9 +609,9 @@ ...@@ -599,9 +609,9 @@
} else { } else {
const defaultGoodsItem = { const defaultGoodsItem = {
id: 0, id: 0,
name: '商品名称', Name: '商品名称',
picUrl: '', picUrl: '',
price: '100.00', SellingPrice: '100.00',
}; };
newList = new Array(cat.goodsNum).fill(defaultGoodsItem); newList = new Array(cat.goodsNum).fill(defaultGoodsItem);
} }
...@@ -621,129 +631,16 @@ ...@@ -621,129 +631,16 @@
this.data.goodsTagPicUrl = ''; this.data.goodsTagPicUrl = '';
this.data.customizeGoodsTag = true; this.data.customizeGoodsTag = true;
}, },
loadCatData() {
this.catDialog.loading = true;
this.catDialog.selectedList = null;
this.$request({
params: {
r: 'mall/cat/index',
page: this.catDialog.page,
}
}).then(response => {
this.catDialog.loading = false;
if (response.data.code === 0) {
let list = this.transCatList(response.data.data.list);
let newList = [];
for (let i in list) {
if (list[i].status == 1) {
newList.push(list[i]);
}
}
this.catDialog.list = newList;
// this.catDialog.pagination = response.data.data.pagination;
} else {}
}).catch(e => {});
},
transCatList(list) {
let newList = [];
for (let i in list) {
if (list[i].child && list[i].child.length) {
let listJ = list[i].child;
delete list[i].child;
newList.push(list[i]);
for (let j in listJ) {
if (listJ[j].child && listJ[j].child.length) {
let listK = listJ[j].child;
delete listJ[j].child;
newList.push(listJ[j]);
for (let k in listK) {
newList.push(listK[k]);
}
} else {
newList.push(listJ[j]);
}
}
} else {
newList.push(list[i]);
}
}
return newList;
},
catDialogPageChange(page) {
this.catDialog.page = page;
this.loadCatData();
},
catSelectionChange(e) {
this.catDialog.selectedList = e;
},
addCat() {
this.catDialog.visible = false;
for (let i in this.catDialog.selectedList) {
this.data.catList.push({
id: this.catDialog.selectedList[i].id,
name: this.catDialog.selectedList[i].name,
menuName: this.catDialog.selectedList[i].name,
goodsNum: 30,
staticGoods: false,
goodsList: [],
});
}
this.catDialog.selectedList = null;
},
deleteCat(index) { deleteCat(index) {
this.data.catList.splice(index, 1); this.data.catList.splice(index, 1);
}, },
loadGoodsData() {
this.goodsDialog.loading = true;
this.$request({
params: {
r: 'plugin/diy/mall/template/get-goods',
page: this.goodsDialog.page,
mch_id: 0,
cat_id: this.goodsDialog.catId,
keyword: this.goodsDialog.keyword
},
}).then(response => {
this.goodsDialog.loading = false;
if (response.data.code === 0) {
this.goodsDialog.list = response.data.data.list;
this.goodsDialog.pagination = response.data.data.pagination;
} else {}
}).catch(e => {});
},
goodsDialogPageChange(page) {
this.goodsDialog.page = page;
this.loadGoodsData();
},
showGoodsDialog(catIndex) { showGoodsDialog(catIndex) {
if (catIndex !== null) { if (catIndex !== null) {
this.goodsDialog.catIndex = catIndex; this.comIndex=catIndex
this.goodsDialog.catId = this.data.catList[catIndex].id;
} else { } else {
this.goodsDialog.catIndex = null; this.comIndex=null;
this.goodsDialog.catId = null;
}
this.goodsDialog.visible = true;
},
goodsSelectionChange(e) {
this.goodsDialog.selectedList = e;
},
addGoods() {
this.goodsDialog.visible = false;
for (let i in this.goodsDialog.selectedList) {
console.log(this.goodsDialog.selectedList[i]);
const item = {
id: this.goodsDialog.selectedList[i].id,
name: this.goodsDialog.selectedList[i].name,
picUrl: this.goodsDialog.selectedList[i].cover_pic,
price: this.goodsDialog.selectedList[i].price,
};
if (this.goodsDialog.catIndex !== null) {
this.data.catList[this.goodsDialog.catIndex].goodsList.push(item);
} else {
this.data.list.push(item);
}
} }
this.isShowGoods = true;
}, },
deleteGoods(goodsIndex, catIndex) { deleteGoods(goodsIndex, catIndex) {
if (catIndex !== null) { if (catIndex !== null) {
...@@ -787,8 +684,36 @@ ...@@ -787,8 +684,36 @@
str= 'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+url str= 'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+url
} }
return str; return str;
} },
//选择商品分类
getChoiceFenlei(){
var ckedArr=this.$refs.ChooseFenlei.getChoicedFenlei();
this.data.catList=this.data.catList.concat(ckedArr);
this.isFenlei=false;
this.$refs.ChooseFenlei.toggleSelection();
},
//取消商品分类选择
quxiaoFenlei(){
this.isFenlei=false;
this.$refs.ChooseFenlei.toggleSelection();
},
//选择商品
getGoodsChoice(){
var ckedArr = this.$refs.choiceGood.getChoicedGoods();
if(this.comIndex!==null){
this.data.catList[this.comIndex].goodsList=this.data.catList[this.comIndex].goodsList.concat(ckedArr);
}else{
this.data.list=this.data.list.concat(ckedArr);
}
this.isShowGoods=false;
this.$refs.choiceGood.toggleSelection();
},
//取消选择商品
quxiaoGoods(){
this.isShowGoods=false;
this.$refs.choiceGood.toggleSelection();
}
}, },
computed: { computed: {
cListStyle() { cListStyle() {
...@@ -902,7 +827,6 @@ ...@@ -902,7 +827,6 @@
return 'width: 100%;'; return 'width: 100%;';
}, },
cButtonStyle() { cButtonStyle() {
console.log(this.data.buyBtnStyle);
let style = let style =
`background: ${this.data.buttonColor};border-color: ${this.data.buttonColor};height:48px;line-height:46px;padding:0 20px;`; `background: ${this.data.buttonColor};border-color: ${this.data.buttonColor};height:48px;line-height:46px;padding:0 20px;`;
if (this.data.buyBtnStyle === 3 || this.data.buyBtnStyle === 4) { if (this.data.buyBtnStyle === 3 || this.data.buyBtnStyle === 4) {
......
src/components/sallCenter/plugin/link.vue 0 → 100644
View file @ 8b0bdc54
<style>
.diy-link {
width: 100%;
padding: 30px 0;
position: relative;
}
.diy-link>div {
width: 100%;
}
.diy-link .title {
flex-grow: 1;
padding: 0 24px;
}
.diy-link .title>div {
display: inline-block;
vertical-align: middle;
}
.diy-link .arrow {
width: 12px;
height: 22px;
position: absolute;
right: 24px;
top: 50%;
margin-top: -6px;
}
.diy-component-edit .link-page .el-input-group__append {
background-color: #fff
}
.diy-link .big-style {
height: 50px;
line-height: 50px;
font-size: 36px;
}
.diy-link .big-style .title-icon {
width: 50px;
height: 50px;
margin-right: 16px;
vertical-align: middle;
}
.diy-link .medium-style {
height: 36px;
line-height: 36px;
font-size: 28px;
}
.diy-link .medium-style .title-icon {
width: 36px;
height: 36px;
margin-right: 16px;
vertical-align: middle;
}
.diy-link .small-style {
height: 28px;
line-height: 28px;
font-size: 24px;
}
.diy-link .small-style .title-icon {
width: 28px;
height: 28px;
margin-right: 16px;
vertical-align: middle;
}
.title-line {
width: 82px;
height: 5px;
vertical-align: middle;
margin: 0 20px;
}
.title-line.star {
height: 20px;
width: 28px;
}
.title-line.star .top-icon {
width: 28px;
height: 4px;
margin-bottom: 12px;
}
.title-line.star .bottom-icon {
width: 28px;
height: 4px;
}
.title-line.div {
width: 8px;
height: 28px;
margin: 0 10px 0 0;
}
.title-line.radius {
width: 28px;
height: 28px;
margin: 0 10px 0 0;
border-radius: 14px;
border: 2px solid #353535;
}
.link-gallery-item {
width: 100px;
height: 100px;
border: 1px solid #e3e3e3;
border-radius: 2px;
margin-right: 10px;
margin-bottom: 10px;
position: relative;
}
</style>
<template>
<div :class="{'active':linkData.isCked}">
<div class="diy-component-options" v-if="linkData.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="diy-link" :style="cStyle" flex="cross:center">
<div :class="style" flex="dir:left cross:center">
<div v-if="data.style == 1" class="title" :style="{textAlign: data.position}">
<img v-if="data.picSwitch" class="title-icon" :src="data.picUrl" alt="">
<div style="font-weight: 600">{{data.title?data.title:'这里是标题示例'}}</div>
</div>
<div v-else-if="data.style == 2" class="title" style="text-align: center">
<img :style="{backgroundColor: data.styleColor}" class="title-line"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/line-style.png">
<div style="font-weight: 600">{{data.title?data.title:'这里是标题示例'}}</div>
<img :style="{backgroundColor: data.styleColor}" class="title-line"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/line-style.png">
</div>
<div v-else-if="data.style == 3" class="title" style="text-align: center">
<div class="title-line star">
<div :style="{backgroundColor: data.styleColor}" class="top-icon"></div>
<div :style="{backgroundColor: data.styleColor}" class="bottom-icon"></div>
</div>
<div style="font-weight: 600">{{data.title?data.title:'这里是标题示例'}}</div>
<div class="title-line star">
<div :style="{backgroundColor: data.styleColor}" class="top-icon"></div>
<div :style="{backgroundColor: data.styleColor}" class="bottom-icon"></div>
</div>
</div>
<div v-else-if="data.style == 4" class="title" style="text-align: left">
<img :style="{backgroundColor: data.styleColor}" class="title-line div"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/div-style.png">
<div style="font-weight: 600">{{data.title?data.title:'这里是标题示例'}}</div>
</div>
<div v-else-if="data.style == 5" class="title" style="text-align: left">
<div :style="[{'borderColor':data.styleColor,'backgroundColor':data.background}]" class="title-line radius">
</div>
<div style="font-weight: 600">{{data.title?data.title:'这里是标题示例'}}</div>
</div>
<img class="arrow" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/icon-jiantou-r.png"
v-if="data.arrowsSwitch">
</div>
</div>
</div>
<div class="diy-component-edit" v-if="linkData.isCked">
<el-form label-width="100px" @submit.native.prevent>
<el-form-item label="标题">
<label slot="label">标题
<el-tooltip class="item" effect="dark" content="标题长度不超过10个字" placement="top">
<i class="el-icon-info"></i>
</el-tooltip>
</label>
<el-input size="small" v-model="data.title" maxlength="10"></el-input>
</el-form-item>
<el-form-item label="字体大小">
<el-radio v-model="data.fontSize" label="36">大</el-radio>
<el-radio v-model="data.fontSize" label="28">中</el-radio>
<el-radio v-model="data.fontSize" label="24">小</el-radio>
</el-form-item>
<el-form-item label="文字颜色">
<el-color-picker size="small" v-model="data.color"></el-color-picker>
<el-input size="small" style="width: 80px;margin-right: 25px;" v-model="data.color"></el-input>
</el-form-item>
<el-form-item label="背景颜色">
<el-color-picker size="small" v-model="data.background"></el-color-picker>
<el-input size="small" style="width: 80px;margin-right: 25px;" v-model="data.background"></el-input>
</el-form-item>
<el-form-item label="标题样式">
<el-radio v-model="data.style" label="1">样式1</el-radio>
<el-radio v-model="data.style" label="2">样式2</el-radio>
<el-radio v-model="data.style" label="3">样式3</el-radio>
<el-radio v-model="data.style" label="4">样式4</el-radio>
<el-radio v-model="data.style" label="5">样式5</el-radio>
</el-form-item>
<el-form-item v-if="data.style == '1'" label="标题位置">
<el-radio v-model="data.position" label="left">居左</el-radio>
<el-radio v-model="data.position" label="center">居中</el-radio>
<el-radio v-model="data.position" label="right">居右</el-radio>
</el-form-item>
<el-form-item v-if="data.style != '1'" label="样式颜色">
<el-color-picker v-model="data.styleColor"></el-color-picker>
<el-input size="small" style="width: 80px;margin-right: 25px;" v-model="data.styleColor"></el-input>
</el-form-item>
<el-form-item label="链接页面">
<el-input size="small" class="link-page" v-model="data.link.name" :disabled="true">
<template slot="append">
<el-button @click="isShowLink=true">选择链接</el-button>
</template>
</el-input>
</el-form-item>
<el-form-item v-if="data.style == '1'" label="图标开关">
<el-switch v-model="data.picSwitch"></el-switch>
</el-form-item>
<template v-if="data.picSwitch">
<el-form-item label="图标">
<label slot="label">图标
<el-tooltip class="item" effect="dark" content="最大宽度750px，最大高度36px，图标等比例缩放" placement="top">
<i class="el-icon-info"></i>
</el-tooltip>
</label>
<el-button size="mini" @click="choicImg=true">选择图标</el-button>
<div flex="main:center cross:center" class="link-gallery-item">
<img v-if="data.picUrl!=''" style="max-width:100%;max-height: 100%;" :src="getIconLink(data.picUrl)"/>
</div>
</el-form-item>
</template>
<el-form-item label="箭头开关">
<el-switch v-model="data.arrowsSwitch"></el-switch>
</el-form-item>
</el-form>
</div>
<!-- 选择图片文件 -->
<el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
<ChooseImg @SelectId="SelectId"></ChooseImg>
</el-dialog>
<el-dialog title="选择链接" :visible.sync="isShowLink" width="800px">
<chooseMeun ref="chooseMeun"></chooseMeun>
<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>
</div>
</template>
<script>
import ChooseImg from "@/components/global/ChooseImg.vue";
import chooseMeun from "../../common/chooseMeun.vue";
export default {
props: ["linkData", "index", "dataLeng"],
components: {
ChooseImg,
chooseMeun
},
data() {
return {
choicImg: false,
isShowLink: false,
data: this.linkData.data,
};
},
created() {
},
methods: {
//向父组件传值 并调用排序
resetSord(IsUp) {
this.$emit('getSord', this.index, IsUp);
},
//点击触发父组件删除
delPlugin() {
this.$emit('comDelPlugin', this.index);
},
//选择图片
SelectId(msg) {
this.data.picUrl = msg.url;
this.choicImg = false;
},
//判断是否包含http
getIconLink(url) {
let str = ''
if (url.indexOf('http') != -1) {
str = url
} else {
str = 'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + url
}
return str;
},
//获取选择链接
getChoiceLink() {
//调用子组件方法
var obj = this.$refs.chooseMeun.getChooseMenu();
this.data.link.name=obj.PageName;
this.isShowLink = false;
},
},
computed: {
cStyle() {
if (this.data.background) {
return `color: ${this.data.color};` +
`background: ${this.data.background};`
} else {
return `color: ${this.data.color};`
}
},
style() {
if (this.data.fontSize == '36') {
return `big-style`
} else if (this.data.fontSize == '28') {
return `medium-style`
} else {
return `small-style`;
}
}
},
mounted() {
}
};
</script>
src/components/sallCenter/plugin/navigationIcon.vue
View file @ 8b0bdc54
...@@ -143,7 +143,7 @@ ...@@ -143,7 +143,7 @@
<template> <template>
<div :class="{'active':navData.isCked}"> <div :class="{'active':navData.isCked}">
<div class="diy-component-options" v-if="navData.isCked"> <div class="diy-component-options" v-if="navData.isCked">
<el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;"></el-button> <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-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-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> <el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)" style="right: -25px; top: 30px;"></el-button>
...@@ -386,6 +386,10 @@ ...@@ -386,6 +386,10 @@
str= 'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+url str= 'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+url
} }
return str; return str;
},
//点击触发父组件删除
delPlugin(){
this.$emit('comDelPlugin', this.index);
} }
}, },
mounted() { mounted() {
......
src/components/sallCenter/plugin/notice.vue 0 → 100644
View file @ 8b0bdc54
<style>
.diy-notice {
width: 100%;
height: 80px;
padding: 0 24px;
justify-content: space-between;
}
.diy-notice .content {
flex-grow: 1;
}
.diy-notice .content div {
white-space: nowrap;
overflow-x: hidden;
}
.diy-notice-dialog {
min-width: 900px;
}
.diy-notice-dialog .left .phone {
width: 750px;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 80px;
zoom: 0.5;
font-size: 28px;
position: relative;
}
.diy-notice-dialog .left .notice-dialog {
width: 100%;
max-height: 800px;
background-color: #FFFFFF;
padding: 24px;
}
.notice-gallery-item {
width: 100px;
height: 100px;
border: 1px solid #e3e3e3;
border-radius: 2px;
margin-right: 10px;
margin-bottom: 10px;
position: relative;
}
.diy-notice-dialog .left .phone {
width: 750px;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 80px;
zoom: 0.5;
font-size: 28px;
position: relative;
}
</style>
<template>
<div :class="{'active':noticeData.isCked}">
<div class="diy-component-options" v-if="noticeData.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="diy-notice" :style="cStyle" flex="dir:left cross:center">
<img :src="getIconLink(data.icon)" style="width: 36px;height: 36px;margin-right: 24px;">
<div class="content" flex="dir:left box:first">
<div style="min-width: 2rem;max-width: 7rem;">{{data.name}}</div>
<div style="margin: 0 12px;">{{data.content}}</div>
</div>
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/icon-left-arrow.png"
style="width: 10px;height: 18px;">
</div>
</div>
<div class="diy-component-edit" v-if="noticeData.isCked">
<el-form label-width="100px" @submit.native.prevent>
<el-form-item label="公告名称">
<el-input v-model="data.name" max="8"></el-input>
</el-form-item>
<el-form-item label="公告内容">
<el-input type="textarea" :rows="3" v-model="data.content"></el-input>
</el-form-item>
<el-form-item label="公告图标">
<el-tooltip class="item" effect="dark" content="建议尺寸36*36" placement="top">
<el-button size="mini" @click="choicImg=true,checkIndex=1">选择图片</el-button>
</el-tooltip>
<div flex="main:center cross:center" class="notice-gallery-item">
<img :src="getIconLink(data.icon)" style="width:100%;height:100%;" class="app-gallery-img"
draggable="false">
</div>
</el-form-item>
<el-form-item label="文字颜色">
<el-color-picker size="small" v-model="data.textColor"></el-color-picker>
<el-input size="small" style="width: 80px;margin-right: 25px;" v-model="data.textColor"></el-input>
</el-form-item>
<el-form-item label="背景颜色">
<el-color-picker size="small" v-model="data.background"></el-color-picker>
<el-input size="small" style="width: 80px;margin-right: 25px;" v-model="data.background"></el-input>
</el-form-item>
<el-form-item label="弹窗设置">
<el-button @click="dialogVisible = !dialogVisible" size="small">弹窗设置</el-button>
</el-form-item>
</el-form>
</div>
<!-- 选择图片文件 -->
<el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
<ChooseImg @SelectId="SelectId"></ChooseImg>
</el-dialog>
<!-- 公告弹窗 -->
<el-dialog title="弹窗设置" :visible.sync="dialogVisible" width="956px" custom-class="diy-notice-dialog">
<div flex="dir:left box:mean">
<div class="left" flex="main:center cross:center">
<div class="phone" flex="main:center cross:center">
<div style="width: 600px">
<img :src="getIconLink(data.headerUrl)" style="width: 600px;height: 150px;display: block">
<div class="notice-dialog">
<div style="margin-bottom: 24px;max-height: 600px;overflow-y: auto;">{{data.content}}</div>
<div flex="dir:left main:center">
<div :style="btnStyle" style="text-align: center;">{{data.btnText}}</div>
</div>
</div>
</div>
</div>
</div>
<div>
<el-form label-width="100px" @submit.native.prevent>
<el-form-item label="头部图片">
<el-tooltip class="item" effect="dark" content="建议尺寸600*150" placement="top">
<el-button size="mini" @click="choicImg=true,checkIndex=2">选择图片</el-button>
</el-tooltip>
<div flex="main:center cross:center" class="notice-gallery-item">
<img style="max-width:100%;max-height: 100%;" :src="getIconLink(data.headerUrl)" />
</div>
</el-form-item>
<el-form-item label="按钮颜色">
<el-color-picker v-model="data.btnColor"></el-color-picker>
</el-form-item>
<el-form-item label="按钮宽度">
<label slot="label">按钮宽度
<el-tooltip class="item" effect="dark" content="最大宽度500px" placement="top">
<i class="el-icon-info"></i>
</el-tooltip>
</label>
<el-input v-model.number="data.btnWidth" type="number" max="500">
<template slot="append">
<span>px</span>
</template>
</el-input>
</el-form-item>
<el-form-item label="按钮高度">
<label slot="label">按钮高度
<el-tooltip class="item" effect="dark" content="最大高度80px" placement="top">
<i class="el-icon-info"></i>
</el-tooltip>
</label>
<el-input v-model.number="data.btnHeight" type="number" max="80">
<template slot="append">
<span>px</span>
</template>
</el-input>
</el-form-item>
<el-form-item label="按钮圆角">
<label slot="label">按钮圆角
<el-tooltip class="item" effect="dark" content="最大圆角40px" placement="top">
<i class="el-icon-info"></i>
</el-tooltip>
</label>
<el-input v-model.number="data.btnRadius" type="number" max="40">
<template slot="append">
<span>px</span>
</template>
</el-input>
</el-form-item>
<el-form-item label="按钮文本内容">
<el-input v-model="data.btnText"></el-input>
</el-form-item>
<el-form-item label="按钮文本颜色">
<el-color-picker v-model="data.btnTextColor"></el-color-picker>
</el-form-item>
</el-form>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" size="small" @click="dialogVisible = false">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import ChooseImg from "@/components/global/ChooseImg.vue";
export default {
props: ["noticeData", "index", "dataLeng"],
components: {
ChooseImg
},
data() {
return {
choicImg: false,
dialogVisible: false,
data: this.noticeData.data,
checkIndex: 0,
};
},
created() {
},
methods: {
//向父组件传值 并调用排序
resetSord(IsUp) {
this.$emit('getSord', this.index, IsUp);
},
//点击触发父组件删除
delPlugin() {
this.$emit('comDelPlugin', this.index);
},
//选择图片
SelectId(msg) {
if (this.checkIndex == 1) {
this.data.icon = msg.url;
} else if (this.checkIndex == 2) {
this.data.headerUrl = msg.url;
}
this.choicImg = false;
},
//判断是否包含http
getIconLink(url) {
let str = ''
if (url.indexOf('http') != -1) {
str = url
} else {
str = 'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + url
}
return str;
}
},
computed: {
cStyle() {
if (this.data.background) {
return `background: ${this.data.background};` +
`color: ${this.data.textColor};`
} else {
return `color: ${this.data.textColor};`
}
},
btnStyle() {
return `background: ${this.data.btnColor};` +
`color: ${this.data.btnTextColor};` +
`border-radius: ${this.data.btnRadius}px;` +
`width: ${this.data.btnWidth}px;` +
`height: ${this.data.btnHeight}px;` +
`line-height: ${this.data.btnHeight}px;`
}
},
mounted() {
}
};
</script>
src/components/sallCenter/plugin/rubik.vue
View file @ 8b0bdc54
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
<template> <template>
<div :class="{'active':rubData.isCked}"> <div :class="{'active':rubData.isCked}">
<div class="diy-component-options" v-if="rubData.isCked"> <div class="diy-component-options" v-if="rubData.isCked">
<el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;"></el-button> <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-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)" <el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)"
style="right: -25px; top: 0;"></el-button> style="right: -25px; top: 0;"></el-button>
...@@ -713,6 +713,10 @@ ...@@ -713,6 +713,10 @@
resetSord(IsUp){ resetSord(IsUp){
this.$emit('getSord', this.index,IsUp); this.$emit('getSord', this.index,IsUp);
}, },
//点击触发父组件删除
delPlugin(){
this.$emit('comDelPlugin', this.index);
}
}, },
updated() { updated() {
this.init = false; this.init = false;
......
src/components/sallCenter/plugin/search.vue
View file @ 8b0bdc54
<template> <template>
<div :class="{'active':searchData.isCked}"> <div :class="{'active':searchData.isCked}">
<div class="diy-component-options" v-if="searchData.isCked"> <div class="diy-component-options" v-if="searchData.isCked">
<el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;"></el-button> <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-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-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> <el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)" style="right: -25px; top: 30px;"></el-button>
...@@ -56,7 +56,12 @@ ...@@ -56,7 +56,12 @@
//向父组件传值 并调用排序 //向父组件传值 并调用排序
resetSord(IsUp){ resetSord(IsUp){
this.$emit('getSord', this.index,IsUp); this.$emit('getSord', this.index,IsUp);
} },
//点击触发父组件删除
delPlugin(){
this.$emit('comDelPlugin', this.index);
},
}, },
mounted() { mounted() {
} }
......
src/components/sallCenter/plugin/video.vue 0 → 100644
View file @ 8b0bdc54
<style>
.diy-video {
width: 100%;
height: 400px;
background: #353535;
}
.diy-video .el-input-group__append {
background-color: #fff
}
.video-gallery-item {
width: 100px;
height: 100px;
border: 1px solid #e3e3e3;
border-radius: 2px;
margin-right: 10px;
margin-bottom: 10px;
position: relative;
}
</style>
<template>
<div :class="{'active':videoData.isCked}">
<div class="diy-component-options" v-if="videoData.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="diy-video">
<img :src="getIconLink(data.pic_url)" style="width: 100%;height:100%;" v-if="data.pic_url">
</div>
</div>
<div class="diy-component-edit" v-if="videoData.isCked">
<el-form label-width="100px" @submit.native.prevent>
<el-form-item label="封面图片">
<el-tooltip class="item" effect="dark" content="建议尺寸750*400" placement="top">
<el-button size="mini" @click="choicImg=true">选择图片</el-button>
</el-tooltip>
<div flex="main:center cross:center" class="video-gallery-item">
<img v-if="data.pic_url!=''" style="max-width:100%;max-height: 100%;" :src="getIconLink(data.pic_url)" />
</div>
</el-form-item>
<el-form-item label="视频链接">
<label slot="label">视频链接
<el-tooltip class="item" effect="dark" content="支持格式mp4;支持编码H.264;视频大小不能超过50 MB" placement="top">
<i class="el-icon-info"></i>
</el-tooltip>
</label>
<el-input size="small" v-model="data.url" placeholder="请输入视频原地址或选择上传视频">
<template slot="append">
<el-button size="mini" @click="choicImg=true">选择文件</el-button>
</template>
</el-input>
</el-form-item>
</el-form>
</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: ["videoData", "index", "dataLeng"],
components: {
ChooseImg
},
data() {
return {
choicImg: false,
data: this.videoData.data,
};
},
created() {
},
methods: {
//向父组件传值 并调用排序
resetSord(IsUp) {
this.$emit('getSord', this.index, IsUp);
},
//点击触发父组件删除
delPlugin() {
this.$emit('comDelPlugin', this.index);
},
//选择图片
SelectId(msg) {
this.data.pic_url = msg.url;
this.choicImg = false;
},
//判断是否包含http
getIconLink(url) {
let str = ''
if (url.indexOf('http') != -1) {
str = url
} else {
str = 'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + url
}
return str;
}
},
computed: {
},
mounted() {
}
};
</script>
src/components/sallCenter/templateEdit.vue
View file @ 8b0bdc54
...@@ -66,9 +66,11 @@ ...@@ -66,9 +66,11 @@
height: 705px; height: 705px;
margin-left: 6px; margin-left: 6px;
} }
.mobile-framework{
.mobile-framework {
width: 375px; width: 375px;
} }
.mobile-framework-header { .mobile-framework-header {
height: 60px; height: 60px;
line-height: 60px; line-height: 60px;
...@@ -87,68 +89,77 @@ ...@@ -87,68 +89,77 @@
background-position: left center; background-position: left center;
} }
.diy-component-preview { .diy-component-preview {
cursor: pointer; cursor: pointer;
position: relative; position: relative;
zoom: 0.5; zoom: 0.5;
-moz-transform: scale(0.5); -moz-transform: scale(0.5);
-moz-transform-origin: top left; -moz-transform-origin: top left;
font-size: 28px; font-size: 28px;
} }
.diy-component-edit {
position: absolute; .diy-component-edit {
top: 0; position: absolute;
bottom: 0; top: 0;
left: 465px; bottom: 0;
right: 0; left: 465px;
background: #fff; right: 0;
padding: 20px; background: #fff;
overflow: auto; padding: 20px;
min-width: 650px; overflow: auto;
padding-right:20%; min-width: 650px;
} padding-right: 20%;
.diy-component-options { }
position: relative;
} .diy-component-options {
.active .diy-component-preview { position: relative;
border: 2px dashed #409EFF; }
left: -2px;
right: -2px; .active .diy-component-preview {
width: calc(100% + 4px); border: 2px dashed #409EFF;
} left: -2px;
.diy-search { right: -2px;
padding: 24px; width: calc(100% + 4px);
cursor: pointer; }
background: rgb(242, 242, 242);
} .diy-search {
.diy-component-options .el-button { padding: 24px;
height: 25px; cursor: pointer;
line-height: 25px; background: rgb(242, 242, 242);
width: 25px; }
padding: 0;
text-align: center; .diy-component-options .el-button {
border: none; height: 25px;
border-radius: 0; line-height: 25px;
position: absolute; width: 25px;
margin-left: 0; padding: 0;
} text-align: center;
.diy-search > div { border: none;
height: 60px; border-radius: 0;
line-height: 60px; position: absolute;
padding: 0 24px; margin-left: 0;
font-size: 28px; }
}
.diy-component-edit .el-color-picker { .diy-search>div {
vertical-align: middle; height: 60px;
} line-height: 60px;
.tpEdit_btmMenu{ padding: 0 24px;
height: 54px; font-size: 28px;
width: 100%; }
display: flex;
align-items: center; .diy-component-edit .el-color-picker {
justify-content: center; vertical-align: middle;
background: #fff; }
}
.tpEdit_btmMenu {
height: 54px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
}
</style> </style>
<template> <template>
<div class="templateEdit"> <div class="templateEdit">
...@@ -169,7 +180,8 @@ ...@@ -169,7 +180,8 @@
<div class="component-group" v-for="(item,index) in allComponents" :key="index"> <div class="component-group" v-for="(item,index) in allComponents" :key="index">
<div class="component-group-name">{{item.GroupName}}</div> <div class="component-group-name">{{item.GroupName}}</div>
<div flex class="component-list"> <div flex class="component-list">
<div class="component-item" v-for="(subItem,subIndex) in item.SubList" @click="addPlugin(subItem.Id)" :key="subIndex"> <div class="component-item" v-for="(subItem,subIndex) in item.SubList" @click="addPlugin(subItem.Id)"
:key="subIndex">
<img :src="subItem.Icon" alt="" /> <img :src="subItem.Icon" alt="" />
<div>{{subItem.Name}}</div> <div>{{subItem.Name}}</div>
</div> </div>
...@@ -192,11 +204,22 @@ ...@@ -192,11 +204,22 @@
</div> </div>
<!-- 为空的样式结束 --> <!-- 为空的样式结束 -->
<div v-for="(item,index) in dataList" :key="index" @click="getItem(item)"> <div v-for="(item,index) in dataList" :key="index" @click="getItem(item)">
<search v-if="item.Id=='search'" :searchData="item" @getSord="getSord" :index="index" :dataLeng="dataList.length"></search> <search v-if="item.Id=='search'" :searchData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
<navigationIcon v-if="item.Id=='nav'" :navData="item" @getSord="getSord" :index="index" :dataLeng="dataList.length"></navigationIcon> :index="index" :dataLeng="dataList.length"></search>
<banner v-if="item.Id=='banner'" :banData="item" @getSord="getSord" :index="index" :dataLeng="dataList.length"></banner> <navigationIcon v-if="item.Id=='nav'" :navData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
<rubik v-if="item.Id=='rubik'" :rubData="item" @getSord="getSord" :index="index" :dataLeng="dataList.length"></rubik> :index="index" :dataLeng="dataList.length"></navigationIcon>
<goods v-if="item.Id=='goods'" :goodData="item" @getSord="getSord" :index="index" :dataLeng="dataList.length"></goods> <banner v-if="item.Id=='banner'" :banData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
:index="index" :dataLeng="dataList.length"></banner>
<rubik v-if="item.Id=='rubik'" :rubData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
:index="index" :dataLeng="dataList.length"></rubik>
<goods v-if="item.Id=='goods'" :goodData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
:index="index" :dataLeng="dataList.length"></goods>
<notice v-if="item.Id=='notice'" :noticeData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
:index="index" :dataLeng="dataList.length"></notice>
<mylink v-if="item.Id=='link'" :linkData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
:index="index" :dataLeng="dataList.length"></mylink>
<myvideo v-if="item.Id=='video'" :videoData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
:index="index" :dataLeng="dataList.length"></myvideo>
</div> </div>
</div> </div>
</div> </div>
...@@ -214,13 +237,16 @@ ...@@ -214,13 +237,16 @@
import banner from "../sallCenter/plugin/banner.vue" import banner from "../sallCenter/plugin/banner.vue"
import rubik from "../sallCenter/plugin/rubik.vue" import rubik from "../sallCenter/plugin/rubik.vue"
import goods from "../sallCenter/plugin/goods.vue" import goods from "../sallCenter/plugin/goods.vue"
import notice from "../sallCenter/plugin/notice.vue"
import mylink from "../sallCenter/plugin/link.vue"
import myvideo from "../sallCenter/plugin/video.vue"
export default { export default {
data() { data() {
return { return {
allComponents:[], allComponents: [],
dataList:[], dataList: [],
//是否为空 //是否为空
isEmpty:true, isEmpty: true,
}; };
}, },
created() { created() {
...@@ -232,13 +258,16 @@ ...@@ -232,13 +258,16 @@
banner, banner,
rubik, rubik,
goods, goods,
notice,
mylink,
myvideo
}, },
methods: { methods: {
//获取左侧菜单 //获取左侧菜单
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); console.log(this.allComponents);
} else { } else {
this.Info(res.data.message); this.Info(res.data.message);
...@@ -246,143 +275,206 @@ ...@@ -246,143 +275,206 @@
}) })
}, },
//点击基础组件 //点击基础组件
addPlugin(Id){ addPlugin(Id) {
this.isEmpty=false; this.isEmpty = false;
switch(Id.toString()) { switch (Id.toString()) {
//搜索 //搜索
case 'search': case 'search':
let searchObj = { let searchObj = {
Id:'search', Id: 'search',
isCked:false, isCked: false,
data:{ data: {
color:'#FFFFFF', color: '#FFFFFF', //搜索框颜色
background:'#f2f2f2', background: '#f2f2f2', //背景颜色
radius:4, radius: 4, //圆角
placeholder:'搜索', placeholder: '搜索', //提示文字
textColor:'#555555', textColor: '#555555', //文字颜色
textPosition:"left" textPosition: "left" //文字位置
}
} }
this.dataList.push(searchObj); }
break; this.dataList.push(searchObj);
break;
//导航图标
case 'nav': case 'nav':
let navObj={ let navObj = {
Id:'nav', Id: 'nav',
isCked:false, isCked: false,
data:{ data: {
color:'#353535', color: '#353535',
rows:1, rows: 1, //每页行数
columns:3, columns: 3, //每行个数
scroll:true, scroll: true, //左右滑动
navs:[], navs: [], //导航图标
showImg:false, showImg: false, //背景图片
backgroundColor:'#ffffff', backgroundColor: '#ffffff', //背景颜色
backgroundPicUrl:'', backgroundPicUrl: '', //背景链接
position:5, position: 5, //图片位置
mode:1, mode: 1, //填充方式
backgroundHeight:100, backgroundHeight: 100, //背景图宽
backgroundWidth:100, backgroundWidth: 100, //背景图高
borderBackground:'#ffffff' }
} }
} this.dataList.push(navObj);
this.dataList.push(navObj); break;
break; //轮播广告
case 'banner': case 'banner':
let banObj={ let banObj = {
Id:"banner", Id: "banner",
isCked:false, isCked: false,
data:{ data: {
style:1, style: 1, //样式
fill:1, //填充方式0-留白 1填充 fill: 1, //填充方式0-留白 1填充
height:450, height: 450, //默认高度
banners:[], banners: [], //轮播图
} }
} }
this.dataList.push(banObj); this.dataList.push(banObj);
break; break;
//公告
case 'notice':
let noticeObj = {
Id: 'notice',
isCked: false,
data: {
name: '公告',
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,
btnRadius: 40,
btnText: '我知道了',
btnTextColor: '#ffffff'
}
}
this.dataList.push(noticeObj);
break;
// 专题未做
//标题
case 'link':
let linkObj = {
Id: 'link',
isCked: false,
data: {
title: '', //标题
style: '1', //标题样式
fontSize: '36', //字体大小
position: 'left', //标题位置
styleColor: '#353535', //样式颜色
link: {}, //链接
picSwitch: false, //图标开关
arrowsSwitch: false, //箭头开关
picUrl: '', //图标地址
color: '#353535', //文字颜色
background: '#ffffff' //背景颜色
}
}
this.dataList.push(linkObj);
break;
//图片广告
case 'rubik': case 'rubik':
let rubObj={ let rubObj = {
Id:'rubik', Id: 'rubik',
isCked:false, isCked: false,
data:{ data: {
style:-1, style: -1, //样式-选取几张图
space:0, space: 0, //图片件间隔
height:0, height: 0, //选中的第几张图 对应的style_list里的height
w:1, w: 1, //选中的第几张图 对应的style_list里的w
h:1, h: 1, //选中的第几张图 对应的style_list里的h
list:[], list: [], //选中的第几张图的小区域对应的数据
hotspot:[] hotspot: [] //热区划分
} }
} }
this.dataList.push(rubObj); this.dataList.push(rubObj);
break; break;
//视频
case 'video':
let videoObj = {
Id: 'video',
isCked: false,
data: {
pic_url: '', //图片地址
url: '' //视频地址
}
}
this.dataList.push(videoObj);
break;
//商品
case 'goods': case 'goods':
let goodsObj={ let goodsObj = {
Id:'goods', Id: 'goods',
isCked:false, isCked: false,
data:{ data: {
showCat: false, showCat: false, //显示分类
catPosition: 'top', catPosition: 'top', //分类栏位置
catStyle: 1, catStyle: 1, //分类样式
catList: [], catList: [], //分类列表
list: [], list: [], //商品列表
addGoodsType: 0, addGoodsType: 0, //商品添加方式
goodsLength: 10, goodsLength: 10, //商品数量
listStyle: 1, listStyle: 1, //列表样式
goodsCoverProportion: '1-1', goodsCoverProportion: '1-1', //商品封面图宽高比例
fill: 1, fill: 1, //商品封面图填充
goodsStyle: 1, goodsStyle: 1, //商品样式
textStyle: 1, textStyle: 1, //文本样式
showGoodsName: true, showGoodsName: true, //显示商品名称
showGoodsPrice: true, showGoodsPrice: true, //显示商品价格
showBuyBtn: true, showBuyBtn: true, //显示购买按钮
buyBtn: 'cart', buyBtn: 'cart', //购买按钮样式
buyBtnStyle: 1, buyBtnStyle: 1, //购买按钮文字样式
buyBtnText: '购买', buyBtnText: '购买', //购买按钮文字
buttonColor: '#ff4544', buttonColor: '#ff4544', //购买按钮颜色
showGoodsTag: false, showGoodsTag: false, //显示商品角标
customizeGoodsTag: false, customizeGoodsTag: false, //商品角标自定义
goodsTagPicUrl: '', goodsTagPicUrl: '', //商品角标链接
showImg: false, showImg: false, //
backgroundColor: '#fff', backgroundColor: '#fff', //背景颜色
backgroundPicUrl: '', backgroundPicUrl: '', //背景链接
position: 5, position: 5,
mode: 1, mode: 1,
backgroundHeight: 100, backgroundHeight: 100, //背景高
backgroundWidth: 100, backgroundWidth: 100, //背景宽
} }
} }
this.dataList.push(goodsObj); this.dataList.push(goodsObj);
break; break;
} }
}, },
//给子组件调用 重新排序上移下移 //给子组件调用 重新排序上移下移
getSord(index,IsUp){ getSord(index, IsUp) {
var currentItem = this.dataList[index]; var currentItem = this.dataList[index];
if(IsUp==0){ if (IsUp == 0) {
if (index > 0) { if (index > 0) {
var upItem = this.dataList[index - 1]; var upItem = this.dataList[index - 1];
this.$set(this.dataList, index - 1, currentItem); this.$set(this.dataList, index - 1, currentItem);
this.$set(this.dataList, index, upItem); this.$set(this.dataList, index, upItem);
} }
}else{ } else {
if(index!=this.dataList.length-1){ if (index != this.dataList.length - 1) {
var downItem = this.dataList[index + 1]; var downItem = this.dataList[index + 1];
this.$set(this.dataList, index + 1, currentItem); this.$set(this.dataList, index + 1, currentItem);
this.$set(this.dataList, index, downItem); this.$set(this.dataList, index, downItem);
} }
} }
}, },
//删除组件事件
comDelPlugin(index) {
this.dataList.splice(index, 1);
},
//点击选中 //点击选中
getItem(item){ getItem(item) {
this.dataList.forEach(x=>{ this.dataList.forEach(x => {
x.isCked=false; x.isCked = false;
}) })
item.isCked=true; item.isCked = true;
}, },
//点击保存 //点击保存
getAllData(){ getAllData() {
console.log(this.dataList,'dataListtt'); console.log(this.dataList, 'dataListtt');
} }
}, },
mounted() { mounted() {
......
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