Commit 82d7d1e8 authored by zhengke's avatar zhengke

修改

parent bb8b0960
<style>
/*-----------------设置部分--------------*/
.diy-goods .diy-component-edit .diy-goods-label {
width: 85px;
}
.diy-goods .diy-component-edit .cat-item {
border: 1px solid #e2e2e2;
margin-bottom: 5px;
padding: 15px;
max-width: 400px;
}
.diy-goods .diy-component-edit .goods-list {
flex-wrap: wrap;
}
.diy-goods .diy-component-edit .goods-pic {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
.diy-goods .diy-component-edit .goods-delete {
position: absolute;
left: calc(100% - 10px);
top: -10px;
width: 20px;
height: 20px;
line-height: 20px;
padding: 0 0;
visibility: hidden;
z-index: 1;
}
.diy-goods .diy-component-edit .goods-item:hover .goods-delete {
visibility: visible;
}
/*-----------------预览部分--------------*/
.diy-goods .diy-component-preview .goods-list {
padding: 11px;
}
.diy-goods .diy-component-preview .goods-item {
padding: 11px;
}
.diy-goods .diy-component-preview .goods-pic {
background-size: cover;
background-position: center;
width: 99.8%;
height: 700px;
background-color: #f6f6f6;
background-repeat: no-repeat;
position: relative;
border-radius: 10px 10px 0 0;
}
.diy-goods .diy-component-preview .goods-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 10px;
}
.diy-goods .diy-component-preview .goods-name-static {
height: 94px;
}
.diy-goods .diy-component-preview .goods-price {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #ff4544;
line-height: 48px;
}
.diy-goods .diy-component-preview .goods-list-style--1 .goods-item,
.diy-goods .diy-component-preview .goods-list-style-1 .goods-item {
width: 100%;
}
.diy-goods .diy-component-preview .goods-list-style-2 .goods-item {
width: 50%;
}
.diy-goods .diy-component-preview .goods-list-style-3 .goods-item {
width: 33.333333%;
}
.diy-goods .diy-component-preview .goods-list-style-0 .goods-item {
width: 249px;
}
.diy-goods .diy-component-preview .goods-list-style--1 .goods-pic {
width: 200px;
height: 200px;
border-radius: 10px 0 0 10px;
}
.diy-goods .diy-component-preview .goods-list-style-2 .goods-pic {
height: 342px;
border-radius: 10px 10px 0 0;
}
.diy-goods .diy-component-preview .goods-list-style-0 .goods-pic,
.diy-goods .diy-component-preview .goods-list-style-3 .goods-pic {
height: 200px;
border-radius: 10px 10px 0 0;
}
.diy-goods .diy-component-preview .goods-pic-fill-0 {
background-size: contain;
}
.diy-goods .diy-component-preview .buy-btn {
border-color: #ff4544;
color: #ff4544;
padding: 0 20px;
height: 48px;
line-height: 50px;
font-size: 24px;
}
.diy-goods .diy-component-preview .buy-btn.el-button--primary {
background-color: #ff4544;
color: #fff;
}
.diy-goods .diy-component-preview .goods-tag {
position: absolute;
top: 0;
left: 0;
width: 64px;
height: 64px;
z-index: 1;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
.diy-goods hr {
border: none;
height: 1px;
background-color: #e2e2e2;
}
.diy-goods .goods-item.goods-cat-list {
border-top: 1px solid #e2e2e2;
}
.diy-goods .goods-item.goods-cat-list:first-of-type {
border-top: 0;
}
.diy-goods .cat-list {
max-height: 500px;
overflow: auto;
}
.goodsDialog .el-dialog__body {
padding: 10px 20px;
}
.education-edit-item {
border: 1px solid #dcdfe6;
padding: 5px;
margin-bottom: 5px;
position: relative;
}
.education_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;
}
.education-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;
}
.education_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;
}
.education_image_upload .image-delete {
position: absolute;
top: -10px;
right: -10px;
padding: 5px;
visibility: hidden;
z-index: 1;
}
.education_image_upload:hover .image-delete {
visibility: visible;
}
</style>
<template>
<div :class="{'active':cusData.isCked}">
<div class="diy-component-options" v-if="cusData.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-goods">
<div class="diy-component-preview"
:style="{'backgroundColor':data.backgroundColor}">
<div :flex="cMainFlex" :style="{marginLeft:data.PaddingLeft+'px',
marginRight:data.PaddingRight+'px',marginTop:data.PaddingTop+'px',
marginBottom:data.PaddingBottom+'px'}">
<div class="goods-list" :class="'goods-list-style-'+data.listStyle">
<div v-for="(cat,catIndex) in cCatList" :key="catIndex">
<div :style="cGoodsListStyle" flex>
<div v-for="(goods,goodsIndex) in cCatGoodsList(cat, catIndex)" class="goods-item" :key="goodsIndex"
:class="data.catPosition==='left'?'goods-cat-list':''">
<div style="display: inline-block;" :style="cGoodsItemWidth">
<div :style="{'borderRadius':data.SearchFilletPX+'px'}" :flex="cGoodsItemFlex" style="position: relative;border:1px solid rgb(226, 226, 226);overflow:hidden">
<div class="goods-pic"
:class="'goods-pic-'+data.goodsCoverProportion+' goods-pic-fill-'+data.fill"
:style="'background-image: url('+getIconLink(goods.picUrl)+')'">
</div>
<div :style="cGoodsItemInfoStyle">
<div class="goods-name" :class="data.listStyle===-1?'goods-name-static':''">
<div style="font-size:30px;">{{goods.name}}</div>
<div style="font-size:25px;margin-top:10px;">{{goods.lableName}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="diy-component-edit" v-if="cusData.isCked">
<el-form label-width='150px' @submit.native.prevent>
<template>
<el-form-item label="自定义数量">
<el-input size="small" v-model.number="data.goodsLength" type="number"></el-input>
</el-form-item>
<el-form-item label="自定义列表">
<div flex="dir:top">
<div class="education-edit-item" v-for="(item,index) in data.list" :key="index">
<div class="education-edit-options">
<el-button type="primary" icon="el-icon-delete" @click="delBanner(index)"
style="position:absolute;top: -1px; right: -26px;"></el-button>
</div>
<div flex="box:first">
<div>
<div class="education_image_upload" style="margin:5px 5px 0 0;">
<div flex="main:center cross:center" @click="choiceMyImg(index)" class="pic-box"
:style="{backgroundImage:'url(' + getIconLink(item.picUrl) + ')'}">
<i style="font-size:22px;color:#909399;" class="el-icon-picture-outline"
v-if="item.picUrl==''"></i>
<div class="size-tip">720 × 250</div>
<el-button type="danger" v-if="item.picUrl!=''" class="image-delete" size="mini"
icon="el-icon-close" @click.stop="item.picUrl=''" circle></el-button>
</div>
</div>
</div>
<div>
<div>
<el-input type="text" v-model="item.name" placeholder="标题" size="small" style="margin-bottom:5px;"></el-input>
<el-input type="text" v-model="item.lableName" placeholder="副标题" size="small" style="margin-bottom:5px;"></el-input>
<el-input type="text" v-model="item.linkUrl" placeholder="点击选择链接" size="small">
<el-button slot="append" @click="getMyChoice(index)">选择链接</el-button>
</el-input>
</div>
</div>
</div>
</div>
</div>
<el-button size="small" @click="addBanner()">添加自定义</el-button>
</el-form-item>
</template>
<hr>
<el-form-item label="列表样式">
<el-radio v-model="data.listStyle" :label="-1">列表模式</el-radio>
<el-radio v-model="data.listStyle" :label="0">左右滑动</el-radio>
<el-radio v-model="data.listStyle" :label="1">一行一个</el-radio>
<el-radio v-model="data.listStyle" :label="2">一行两个</el-radio>
</el-form-item>
<el-form-item label="背景颜色">
<div class="input-color" flex="dir:left cross:center">
<el-color-picker size="small" v-model="data.backgroundColor"></el-color-picker>
<el-input size="small" style="width: 80px;margin-right: 25px;" v-model="data.backgroundColor"></el-input>
</div>
</el-form-item>
<el-form-item label="上边距">
<el-input type="number" size="small" :min="0" v-model="data.PaddingTop">
<template slot="append">px</template>
</el-input>
</el-form-item>
<el-form-item label="下边距">
<el-input type="number" size="small" :min="0" v-model="data.PaddingBottom">
<template slot="append">px</template>
</el-input>
</el-form-item>
<el-form-item label="左边距">
<el-input type="number" size="small" :min="0" v-model="data.PaddingLeft">
<template slot="append">px</template>
</el-input>
</el-form-item>
<el-form-item label="右边距">
<el-input type="number" size="small" :min="0" v-model="data.PaddingRight">
<template slot="append">px</template>
</el-input>
</el-form-item>
<el-form-item label="圆角">
<el-input type="number" size="small" :min="0" v-model="data.SearchFilletPX">
<template slot="append">px</template>
</el-input>
</el-form-item>
</el-form>
</div>
</div>
<!-- 选择图片文件 -->
<el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
<ChooseImg @SelectId="SelectId"></ChooseImg>
</el-dialog>
<!-- 选择商品 -->
<el-dialog title="选择商品" :visible.sync="isShowGoods" custom-class="goodsDialog">
<choiceGood ref="choiceGood"></choiceGood>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="isShowGoods=false">取 消</el-button>
<el-button size="small" type="danger" @click="getGoodsChoice()">确 定</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>
</div>
</template>
<script>
import ChooseImg from "@/components/global/ChooseImg.vue";
import choiceGood from "../../common/choiceGood.vue";
import chooseMenu from "../../common/chooseMenu.vue";
export default {
props: ["cusData", "index", "dataLeng"],
components: {
ChooseImg,
choiceGood,
chooseMenu
},
data() {
return {
//可以选择的商品数
ckGoods: 0,
data: this.cusData.data,
position: 'center center',
repeat: 'no-repeat',
choicImg: false,
isShowGoods: false,
//添加的下标
comIndex: -1,
commonIndex:0,
isShowLink:false,
};
},
created() {
},
methods: {
//向父组件传值 并调用排序
resetSord(IsUp) {
this.$emit('getSord', this.index, IsUp);
},
//点击触发父组件删除
delPlugin() {
this.$emit('comDelPlugin', this.index);
},
cCatGoodsList(cat, catIndex) {
const goodsList = cat.goodsList;
let newList = [];
if (catIndex > 0) {
newList = [];
} else {
if (goodsList && goodsList.length) {
newList = goodsList;
} else {
const defaultGoodsItem = {
id: 0,
name: '商品名称',
lableName:'',
picUrl: '',
linkUrl:'',
};
newList = new Array(cat.goodsNum).fill(defaultGoodsItem);
}
}
return newList;
},
//选择图片
SelectId(msg) {
this.data.list[this.commonIndex].picUrl=this.getIconLink(msg.url);
this.choicImg=false;
},
//选择商品
getGoodsChoice() {
var ckedArr = this.$refs.choiceGood.getChoicedGoods();
var myArray = [];
if (ckedArr && ckedArr.length > 0) {
ckedArr.forEach(element => {
myArray.push({
id: element.Id,
name: element.Name,
picUrl: element.CoverImage,
price: element.SellingPrice
});
});
}
if (this.comIndex !== null) {
} else {
this.data.list = this.data.list.concat(myArray);
}
this.isShowGoods = false;
this.$refs.choiceGood.toggleSelection();
},
//删除banner
delBanner(index){
this.data.list.splice(index,1);
},
//选取图片
choiceMyImg(index){
this.choicImg = true;
this.commonIndex=index;
},
//选择链接
getMyChoice(index){
this.isShowLink=true;
this.commonIndex=index;
},
//添加商品
addBanner(){
let obj={
id:0,
name:'', //标题
lableName:'', //副标题
picUrl:'', //商品图片
linkUrl:'' //链接
}
if(this.data.list.length<this.data.goodsLength){
// if(this.data.list.length>0){
for(var i=0;i<this.data.list.length;i++){
if(this.data.list[i].linkUrl==''){
this.Error(`请选择第${i+1}个的链接`);
return;
}
}
this.data.list.push(obj);
// }
}else{
this.Error('超出自定义数量');
}
},
//获取选择链接
getChoiceLink(){
//调用子组件方法
var obj = this.$refs.chooseMenu.getChooseMenu();
this.data.list[this.commonIndex].linkUrl=obj.PageUrl;
this.isShowLink = false;
},
},
computed: {
cMainFlex() {
if (this.data.catPosition === 'left') {
return 'dir:left box:first';
}
if (this.data.catPosition === 'top') {
return 'dir:top';
}
},
cCatFlex() {
if (this.data.catPosition === 'left') {
return 'dir:top';
}
if (this.data.catPosition === 'top') {
return 'dir:left';
}
},
cCatList() {
if (this.data.showCat) {
if (this.data.catList && this.data.catList.length) {
return this.data.catList;
} else {
const defaultCatItem = {
id: 0,
name: '分类名称',
menuName: '分类名称',
goodsList: [],
goodsNum: 3,
};
return [defaultCatItem, defaultCatItem];
}
} else {
return [{
id: null,
name: null,
menuName: null,
goodsList: this.data.list,
}];
}
},
cCatStyle() {},
cGoodsListStyle() {
if (this.data.listStyle === 0) {
return 'flex-wrap: nowrap;overflow-x:auto;';
} else {
return 'flex-wrap: wrap;';
}
},
cGoodsItemFlex() {
if (this.data.listStyle === -1) {
return 'dir:left box:first cross:center';
}
return 'dir:top';
},
cGoodsItemStyle() {
let style;
if (this.data.goodsStyle != 3) {
if (this.data.listStyle === -1) {
style = 'border: 1px solid #e2e2e2;border-radius:10px;background:#fff;'
} else {
style = 'border: 1px solid #e2e2e2;border-radius:10px;background:#fff;'
}
} else {
return style
}
if (this.data.goodsStyle === 2) {
return style
} else if (this.data.goodsStyle === 1) {
if (this.data.listStyle === -1) {
return 'border-radius:10px;background:#fff;'
} else {
return 'border-radius:10px;background:#fff;'
}
} else {
return 'background:#fff;';
}
},
cShowBuyBtn() {
if (!this.data.showBuyBtn) {
return false;
}
if (this.data.textStyle === 2 || this.data.listStyle === 0) {
return false;
}
return true;
},
cGoodsItemInfoStyle() {
let style = '';
if (this.data.textStyle === 2) {
style += `text-align: center;`;
}
if (this.data.listStyle === -1) {
style += `height: 200px;padding: 20px 24px 20px 32px;`;
} else {
style += `padding:24px 24px;`;
}
return style;
},
cGoodsItemWidth() {
if (this.data.listStyle === 0) {
return 'width: 200px;';
}
return 'width: 100%;';
},
cButtonStyle() {
let style =
`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) {
style += `border-radius:999px;`;
}
if (this.data.buyBtnStyle === 2 || this.data.buyBtnStyle === 4) {
style += `background:#fff;color:${this.data.buttonColor}`;
}
return style;
},
},
mounted() {
}
};
</script>
This source diff could not be displayed because it is too large. You can view the blob instead.
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