Skip to content

E
ElectricitySheep
Commit 6d78524d authored by zhengke's avatar zhengke
Browse files
Options

增加组件

parent 6b2f0e23
Hide whitespace changes
Inline Side-by-side
Showing with 3563 additions and 14 deletions
src/components/sallCenter/plugin/advance.vue 0 → 100644
View file @ 6d78524d
<style>
.diy-advance .diy-component-edit .goods-list {
line-height: normal;
flex-wrap: wrap;
}
.diy-advance .diy-component-edit .goods-item,
.diy-advance .diy-component-edit .goods-add {
width: 50px;
height: 50px;
border: 1px solid #e2e2e2;
background-position: center;
background-size: cover;
margin-right: 15px;
margin-bottom: 15px;
position: relative;
}
.diy-advance .diy-component-edit .goods-add {
cursor: pointer;
}
.diy-advance .diy-component-edit .goods-delete {
position: absolute;
top: -11px;
right: -11px;
width: 25px;
height: 25px;
line-height: 25px;
padding: 0 0;
visibility: hidden;
}
.diy-advance .diy-component-edit .goods-item:hover .goods-delete {
visibility: visible;
}
/*-------------------- 预览部分 --------------------*/
.diy-advance .diy-component-preview .goods-list {
flex-wrap: wrap;
padding: 10px;
}
.diy-advance .diy-component-preview .goods-item {
position: relative;
}
.diy-advance .diy-component-preview .goods-tag {
position: absolute;
top: 0;
left: 0;
width: 64px;
height: 64px;
background-position: center;
background-size: cover;
}
.diy-advance .diy-component-preview .goods-pic {
width: 100%;
height: 706px;
background-color: #e2e2e2;
background-position: center;
background-size: cover;
position: relative;
background-repeat: no-repeat;
}
.diy-advance .diy-component-preview .goods-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.diy-advance .diy-component-preview .goods-cover-3-2 .goods-pic {
height: 470px;
}
.diy-advance .diy-component-preview .goods-list-2 .goods-pic {
height: 343px;
}
.diy-advance .diy-component-preview .goods-list--1 .goods-pic {
width: 200px;
height: 200px;
margin-right: 20px;
}
.diy-advance .diy-component-preview .goods-list--1 .goods-item {
margin-bottom: 20px;
}
.diy-advance .diy-component-preview .goods-list--1 .goods-item:last-child {
margin-bottom: 0;
}
.diy-advance .diy-component-preview .goods-name-static {
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-break: break-all;
margin-bottom: 12px;
}
.diy-advance .diy-component-preview .goods-price {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #ff4544;
line-height: 48px;
}
.diy-advance .diy-component-preview .goods-advance-timer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 80px;
line-height: 80px;
padding: 0 20px;
background: -webkit-linear-gradient(left, #f44, #ff8b8b);
background: -webkit-gradient(linear, left top, right top, from(#f44), to(#ff8b8b));
background: -moz-linear-gradient(left, #f44, #ff8b8b);
background: linear-gradient(90deg, #f44, #ff8b8b);
color: #fff;
}
.diy-advance .plugin-name {
height: 28px;
line-height: 28px;
padding: 0 8px;
color: #ff4544;
font-size: 24px;
background-color: #feeeee;
border-radius: 14px;
margin-right: 8px;
}
.des-text {
display: inline-block;
height: 28px;
border: 1px solid #ff4544;
border-radius: 8px;
font-size: 19px;
line-height: 26px;
text-align: center;
padding: 0 5px;
}
</style>
<template>
<div :class="{'active':advanceData.isCked}">
<div class="diy-component-options" v-if="advanceData.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-advance">
<div class="diy-component-preview" :style="cListStyle">
<div class="goods-list" :class="'goods-list-'+data.listStyle" :flex="cListFlex">
<div v-for="(item,index) in cList" style="padding: 10px;" :style="cItemStyle" :key="index">
<div class="goods-item" :flex="cGoodsFlex" :class="'goods-cover-'+data.goodsCoverProportion"
:style="cGoodsStyle">
<div class="goods-pic" :style="cGoodsPicStyle(item.CoverImage)">
<div :style="cTimerStyle" :flex="cTimerFlex" class="goods-advance-timer"
v-if="data.listStyle===1 || data.listStyle===2">
<div v-if="data.listStyle===1">预售</div>
<div>距结束 xx:xx:xx</div>
</div>
</div>
<div v-if="data.showGoodsTag" class="goods-tag"
:style="'background-image: url('+getIconLink(data.goodsTagPicUrl)+');'"></div>
<div :style="cGoodsInfoStyle">
<div class="goods-name" :class="data.listStyle===-1?'goods-name-static':''">
<template v-if="data.showGoodsName"><span v-if="data.listStyle!=1" class="plugin-name">预售</span>{{item.name}}</template>
</div>
<div v-if="data.listStyle===-1" style="color: #909399;">
<i class="el-icon-time"></i>
距结束 <span style="color: #FF4544;">xx:xx:xx</span>
</div>
<div flex="box:last cross:bottom">
<div class="goods-price" :style="cPriceStyle">
<div class="des-text">
定金{{item.deposit}}抵{{item.swell_deposit}}
</div>
<div style="color: #ff4544;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;letter-spacing: -1px;">
<span>￥{{item.price}}</span><span v-if="data.listStyle == -1" style="color: #909399;text-decoration: line-through;font-size: 24px;margin-left: 10px;">￥{{item.originalPrice}}</span>
</div>
<div v-if="data.listStyle != -1" style="color: #909399;text-decoration: line-through;font-size: 24px;line-height: 1">
<span>￥{{item.originalPrice}}</span>
</div>
</div>
<div v-if="cShowBuyBtn" style="padding: 10px;">
<el-button :style="cButtonStyle" type="primary" style="font-size: 24px;">{{data.buyBtnText}}</el-button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="diy-component-edit" v-if="advanceData.isCked">
<el-form @submit.native.prevent label-width="150px">
<el-form-item label="商品列表">
<draggable class="goods-list" flex v-model="data.list" ref="parentNode">
<div class="goods-item drag-drop" v-for="(goods,goodsIndex) in data.list" :key="goodsIndex"
:style="'background-image: url('+getIconLink(goods.CoverImage)+');'">
<el-button @click="deleteGoods(goodsIndex)" class="goods-delete" size="small" circle type="danger"
icon="el-icon-close"></el-button>
</div>
<div class="goods-add" flex="main:center cross:center" @click="isShowGoods=true">
<i class="el-icon-plus"></i>
</div>
</draggable>
</el-form-item>
<el-form-item label="购买按钮颜色">
<el-color-picker v-model="data.buttonColor"></el-color-picker>
</el-form-item>
<el-form-item label="列表样式">
<el-radio v-model="data.listStyle" :label="-1" @change="listStyleChange">列表模式</el-radio>
<el-radio v-model="data.listStyle" :label="1" @change="listStyleChange">一行一个</el-radio>
<el-radio v-model="data.listStyle" :label="2" @change="listStyleChange">一行两个</el-radio>
</el-form-item>
<el-form-item label="商品封面图宽高比例" v-if="data.listStyle==1">
<el-radio v-model="data.goodsCoverProportion" label="1-1">1:1</el-radio>
<el-radio v-model="data.goodsCoverProportion" label="3-2">3:2</el-radio>
</el-form-item>
<el-form-item label="商品封面图填充">
<el-radio v-model="data.fill" :label="1">填充</el-radio>
<el-radio v-model="data.fill" :label="0">留白</el-radio>
</el-form-item>
<el-form-item label="商品样式">
<el-radio v-model="data.goodsStyle" :label="1">白底无边框</el-radio>
<el-radio v-model="data.goodsStyle" :label="2">白底有边框</el-radio>
<el-radio v-model="data.goodsStyle" :label="3">无底无边框</el-radio>
</el-form-item>
<el-form-item label="显示商品名称">
<el-switch v-model="data.showGoodsName"></el-switch>
</el-form-item>
<el-form-item v-if="data.listStyle!==-1" label="文本样式">
<el-radio v-model="data.textStyle" :label="1">左对齐</el-radio>
<el-radio v-model="data.textStyle" :label="2">居中</el-radio>
</el-form-item>
<template v-if="cShowEditBuyBtn">
<el-form-item label="显示购买按钮">
<el-switch v-model="data.showBuyBtn"></el-switch>
</el-form-item>
<el-form-item v-if="data.showBuyBtn" label="购买按钮样式">
<el-radio v-model="data.buyBtnStyle" :label="1">填充</el-radio>
<el-radio v-model="data.buyBtnStyle" :label="2">线条</el-radio>
<el-radio v-model="data.buyBtnStyle" :label="3">圆角填充</el-radio>
<el-radio v-model="data.buyBtnStyle" :label="4">圆角线条</el-radio>
</el-form-item>
<el-form-item v-if="data.showBuyBtn" label="购买按钮文字">
<el-input size="small" v-model="data.buyBtnText"></el-input>
</el-form-item>
</template>
<el-form-item label="显示商品角标">
<el-switch v-model="data.showGoodsTag"></el-switch>
</el-form-item>
<el-form-item label="商品角标样式" v-if="data.showGoodsTag">
<el-radio v-model="data.goodsTagPicUrl" v-for="tag in goodsTags" :label="tag.picUrl" :key="tag.name"
@change="goodsTagChange">
{{tag.name}}
</el-radio>
<el-radio v-model="data.customizeGoodsTag" :label="true" @change="customizeGoodsTagChange">自定义
</el-radio>
</el-form-item>
<el-form-item label="自定义商品角标" v-if="data.showGoodsTag&&data.customizeGoodsTag">
<div class="zk_pic_box" @click="choicImg=true" flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(data.goodsTagPicUrl) + ')'}">
<i v-if="data.goodsTagPicUrl==''" class="el-icon-picture-outline"></i>
<el-button type="danger" v-if="data.goodsTagPicUrl!=''" class="image-delete" size="mini"
icon="el-icon-close" @click.stop="data.goodsTagPicUrl=''" circle></el-button>
</div>
</el-form-item>
<el-form-item label="背景颜色">
<el-color-picker v-model="data.backgroundColor" size="small"></el-color-picker>
<el-input type="text" v-model="data.backgroundColor" size="small" style="width: 80px; margin-right: 25px;">
</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">
<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>
</template>
<script>
import draggable from "vuedraggable"
import ChooseImg from "@/components/global/ChooseImg.vue";
import choiceGood from "../../common/choiceGood.vue";
export default {
props: ["advanceData", "index", "dataLeng"],
components: {
draggable,
ChooseImg,
choiceGood
},
data() {
return {
choicImg: false,
isShowGoods: false,
data: this.advanceData.data,
position: 'center center',
repeat: 'no-repeat',
goodsTags: [{
name: '热销',
picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goods-tag-rx.png',
},
{
name: '新品',
picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goods-tag-xp.png',
},
{
name: '折扣',
picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goods-tag-zk.png',
},
{
name: '推荐',
picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goods-tag-tj.png',
},
],
};
},
created() {
},
methods: {
//向父组件传值 并调用排序
resetSord(IsUp) {
this.$emit('getSord', this.index, IsUp);
},
//点击触发父组件删除
delPlugin() {
this.$emit('comDelPlugin', this.index);
},
//选择图片
SelectId(msg) {
this.data.goodsTagPicUrl = 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;
},
cGoodsPicStyle(picUrl) {
let style = `background-image: url(${this.getIconLink(picUrl)});` +
`background-size: ${(this.data.fill === 1 ? 'cover' : 'contain')};`;
return style;
},
listStyleChange(listStyle) {
if (listStyle === -1 && this.data.textStyle === 2) {
this.data.textStyle = 1;
}
},
deleteGoods(index) {
this.data.list.splice(index, 1);
},
goodsTagChange(e) {
this.data.goodsTagPicUrl = e;
this.data.customizeGoodsTag = false;
},
customizeGoodsTagChange(e) {
this.data.goodsTagPicUrl = '';
this.data.customizeGoodsTag = true;
},
//选择商品
getGoodsChoice() {
var ckedArr = this.$refs.choiceGood.getChoicedGoods();
console.log(ckedArr, 'ddd');
this.data.list = this.data.list.concat(ckedArr);
this.isShowGoods = false;
this.$refs.choiceGood.toggleSelection();
},
//取消选择商品
quxiaoGoods() {
this.isShowGoods = false;
this.$refs.choiceGood.toggleSelection();
}
},
computed: {
cListStyle() {
if (this.data.backgroundColor) {
return `background-color:${this.data.backgroundColor};background-image:url(${this.data.backgroundPicUrl});background-size:${this.data.backgroundWidth}% ${this.data.backgroundHeight}%;background-repeat:${this.repeat};background-position:${this.position}`
} else {
return `background-image:url(${this.data.backgroundPicUrl});background-size:${this.data.backgroundWidth}% ${this.data.backgroundHeight}%;background-repeat:${this.repeat};background-position:${this.position}`
}
},
cList() {
if (!this.data.list || !this.data.list.length) {
const item = {
id: 0,
name: '演示商品名称',
CoverImage: '',
price: '100.00',
originalPrice: '300.00',
deposit: '10',
swell_deposit: '20',
};
return [item, item, ];
} else {
return this.data.list;
}
},
cListFlex() {
if (this.data.listStyle === -1) {
return 'dir:top';
} else {
return 'dir:left';
}
},
cItemStyle() {
if (this.data.listStyle === 2) {
return 'width: 50%;';
} else {
return 'width: 100%;';
}
},
cGoodsStyle() {
let style = 'border-radius:5px;';
if (this.data.goodsStyle === 2) {
style += 'border: 1px solid #e2e2e2;';
}
if (this.data.goodsStyle != 3) {
style += 'background-color:#ffffff';
}
return style;
},
cGoodsInfoStyle() {
let style = 'position:relative;';
if (this.data.listStyle !== -1) {
style += 'padding:20px;';
} else {
style += 'padding: 15px 20px 0 0;';
}
if (this.data.textStyle === 2) {
style += 'text-align: center;';
}
return style;
},
cPriceStyle() {
let style = 'margin-top: 10px;';
if (this.data.textStyle === 2) {
style += 'text-align: center;width: 100%;';
}
return style;
},
cGoodsFlex() {
if (this.data.listStyle === -1) {
return 'dir:left box:first';
} else {
return 'dir:top';
}
},
cButtonStyle() {
console.log(this.data.buyBtnStyle);
let style =
`background: ${this.data.buttonColor};border-color: ${this.data.buttonColor};height:48px;line-height:50px;padding: 0 20px;`;
if (this.data.buyBtnStyle === 3 || this.data.buyBtnStyle === 4) {
style += `border-radius:24px;`;
}
if (this.data.buyBtnStyle === 2 || this.data.buyBtnStyle === 4) {
style += `background:#fff;color:${this.data.buttonColor}`;
}
return style;
},
cTimerStyle() {
if (this.data.listStyle === 2) {
return 'height:60px;line-height:60px;font-size:24px;text-align:center;';
} else {
return '';
}
},
cTimerFlex() {
if (this.data.listStyle === 2) {
return 'main:center';
} else {
return 'box:last';
}
},
cShowBuyBtn() {
return this.data.textStyle !== 2 &&
this.data.showBuyBtn;
},
cShowEditBuyBtn() {
return this.data.textStyle !== 2
},
},
mounted() {
}
};
</script>
src/components/sallCenter/plugin/bargain.vue 0 → 100644
View file @ 6d78524d
<style>
.diy-bargain .diy-component-edit .goods-list {
line-height: normal;
flex-wrap: wrap;
}
.diy-bargain .diy-component-edit .goods-item,
.diy-bargain .diy-component-edit .goods-add {
width: 50px;
height: 50px;
border: 1px solid #e2e2e2;
background-position: center;
background-size: cover;
margin-right: 15px;
margin-bottom: 15px;
position: relative;
}
.diy-bargain .diy-component-edit .goods-add {
cursor: pointer;
}
.diy-bargain .diy-component-edit .goods-delete {
position: absolute;
top: -11px;
right: -11px;
width: 25px;
height: 25px;
line-height: 25px;
padding: 0 0;
visibility: hidden;
}
.diy-bargain .diy-component-edit .goods-item:hover .goods-delete {
visibility: visible;
}
/*-------------------- 预览部分 --------------------*/
.diy-bargain .diy-component-preview .goods-list {
flex-wrap: wrap;
padding: 10px;
}
.diy-bargain .diy-component-preview .goods-item {
position: relative;
}
.diy-bargain .diy-component-preview .goods-tag {
position: absolute;
top: 0;
left: 0;
width: 64px;
height: 64px;
background-position: center;
background-size: cover;
}
.diy-bargain .diy-component-preview .goods-pic {
width: 100%;
height: 706px;
background-color: #e2e2e2;
background-position: center;
background-size: cover;
position: relative;
background-repeat: no-repeat;
}
.diy-bargain .diy-component-preview .goods-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.diy-bargain .diy-component-preview .goods-cover-3-2 .goods-pic {
height: 470px;
}
.diy-bargain .diy-component-preview .goods-list-2 .goods-pic {
height: 343px;
}
.diy-bargain .diy-component-preview .goods-list--1 .goods-pic {
width: 200px;
height: 200px;
margin-right: 20px;
}
.diy-bargain .diy-component-preview .goods-list--1 .goods-item {
margin-bottom: 20px;
}
.diy-bargain .diy-component-preview .goods-list--1 .goods-item:last-child {
margin-bottom: 0;
}
.diy-bargain .diy-component-preview .goods-name-static {
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-break: break-all;
margin-bottom: 12px;
}
.diy-bargain .diy-component-preview .goods-price {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #ff4544;
line-height: 48px;
}
.diy-bargain .diy-component-preview .goods-bargain-timer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 80px;
line-height: 80px;
padding: 0 20px;
background: -webkit-linear-gradient(left, #f44, #ff8b8b);
background: -webkit-gradient(linear, left top, right top, from(#f44), to(#ff8b8b));
background: -moz-linear-gradient(left, #f44, #ff8b8b);
background: linear-gradient(90deg, #f44, #ff8b8b);
color: #fff;
}
.diy-bargain .plugin-name {
height: 28px;
line-height: 28px;
padding: 0 8px;
color: #ff4544;
font-size: 24px;
background-color: #feeeee;
border-radius: 14px;
margin-right: 8px;
}
</style>
<template>
<div :class="{'active':barData.isCked}">
<div class="diy-component-options" v-if="barData.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-bargain">
<div class="diy-component-preview" :style="cListStyle">
<div class="goods-list" :class="'goods-list-'+data.listStyle" :flex="cListFlex">
<div v-for="(item,index) in cList" style="padding: 10px;" :style="cItemStyle" :key="index">
<div class="goods-item" :flex="cGoodsFlex" :class="'goods-cover-'+data.goodsCoverProportion"
:style="cGoodsStyle">
<div class="goods-pic" :style="cGoodsPicStyle(item.CoverImage)">
<div :style="cTimerStyle" :flex="cTimerFlex" class="goods-bargain-timer"
v-if="data.listStyle===1 || data.listStyle===2">
<div v-if="data.listStyle===1">砍价</div>
<div>距结束 xx:xx:xx</div>
</div>
</div>
<div v-if="data.showGoodsTag" class="goods-tag"
:style="'background-image: url('+getIconLink(data.goodsTagPicUrl)+');'"></div>
<div :style="cGoodsInfoStyle">
<div class="goods-name" :class="data.listStyle===-1?'goods-name-static':''">
<template v-if="data.showGoodsName"><span v-if="data.listStyle!=1"
class="plugin-name">砍价</span>{{item.name}}</template>
</div>
<div v-if="data.listStyle===-1" style="color: #909399;">
<i class="el-icon-time"></i>
距结束 <span style="color: #FF4544;">xx:xx:xx</span>
</div>
<div flex="box:last cross:bottom">
<div class="goods-price" :style="cPriceStyle">
<div
style="color: #ff4544;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;letter-spacing: -1px;">
￥{{item.price}}
</div>
<div v-if="data.listStyle == -1"
style="color: #909399;text-decoration: line-through;position: absolute;left: 0;bottom: 0;font-size: 24px;">
<span>￥{{item.originalPrice}}</span>
</div>
<div v-else style="color: #909399;text-decoration: line-through;font-size: 24px;line-height: 1">
<span>￥{{item.originalPrice}}</span>
</div>
</div>
<div v-if="cShowBuyBtn" style="padding: 0 10px;">
<el-button :style="cButtonStyle" type="primary" style="font-size: 24px;">{{data.buyBtnText}}
</el-button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="diy-component-edit" v-if="barData.isCked">
<el-form @submit.native.prevent label-width="150px">
<el-form-item label="商品列表">
<draggable class="goods-list" flex v-model="data.list" ref="parentNode">
<div class="goods-item drag-drop" v-for="(goods,goodsIndex) in data.list" :key="goodsIndex"
:style="'background-image: url('+getIconLink(goods.CoverImage)+');'">
<el-button @click="deleteGoods(goodsIndex)" class="goods-delete" size="small" circle type="danger"
icon="el-icon-close"></el-button>
</div>
<div class="goods-add" flex="main:center cross:center" @click="isShowGoods=true">
<i class="el-icon-plus"></i>
</div>
</draggable>
</el-form-item>
<el-form-item label="购买按钮颜色">
<el-color-picker v-model="data.buttonColor"></el-color-picker>
</el-form-item>
<el-form-item label="列表样式">
<el-radio v-model="data.listStyle" :label="-1" @change="listStyleChange">列表模式</el-radio>
<el-radio v-model="data.listStyle" :label="1" @change="listStyleChange">一行一个</el-radio>
<el-radio v-model="data.listStyle" :label="2" @change="listStyleChange">一行两个</el-radio>
</el-form-item>
<el-form-item label="商品封面图宽高比例" v-if="data.listStyle==1">
<el-radio v-model="data.goodsCoverProportion" label="1-1">1:1</el-radio>
<el-radio v-model="data.goodsCoverProportion" label="3-2">3:2</el-radio>
</el-form-item>
<el-form-item label="商品封面图填充">
<el-radio v-model="data.fill" :label="1">填充</el-radio>
<el-radio v-model="data.fill" :label="0">留白</el-radio>
</el-form-item>
<el-form-item label="商品样式">
<el-radio v-model="data.goodsStyle" :label="1">白底无边框</el-radio>
<el-radio v-model="data.goodsStyle" :label="2">白底有边框</el-radio>
<el-radio v-model="data.goodsStyle" :label="3">无底无边框</el-radio>
</el-form-item>
<el-form-item label="显示商品名称">
<el-switch v-model="data.showGoodsName"></el-switch>
</el-form-item>
<el-form-item v-if="data.listStyle!==-1" label="文本样式">
<el-radio v-model="data.textStyle" :label="1">左对齐</el-radio>
<el-radio v-model="data.textStyle" :label="2">居中</el-radio>
</el-form-item>
<template v-if="cShowEditBuyBtn">
<el-form-item label="显示购买按钮">
<el-switch v-model="data.showBuyBtn"></el-switch>
</el-form-item>
<el-form-item v-if="data.showBuyBtn" label="购买按钮样式">
<el-radio v-model="data.buyBtnStyle" :label="1">填充</el-radio>
<el-radio v-model="data.buyBtnStyle" :label="2">线条</el-radio>
<el-radio v-model="data.buyBtnStyle" :label="3">圆角填充</el-radio>
<el-radio v-model="data.buyBtnStyle" :label="4">圆角线条</el-radio>
</el-form-item>
<el-form-item v-if="data.showBuyBtn" label="购买按钮文字">
<el-input size="small" v-model="data.buyBtnText"></el-input>
</el-form-item>
</template>
<el-form-item label="显示商品角标">
<el-switch v-model="data.showGoodsTag"></el-switch>
</el-form-item>
<el-form-item label="商品角标样式" v-if="data.showGoodsTag">
<el-radio v-model="data.goodsTagPicUrl" v-for="tag in goodsTags" :label="tag.picUrl" :key="tag.name"
@change="goodsTagChange">
{{tag.name}}
</el-radio>
<el-radio v-model="data.customizeGoodsTag" :label="true" @change="customizeGoodsTagChange">自定义
</el-radio>
</el-form-item>
<el-form-item label="自定义商品角标" v-if="data.showGoodsTag&&data.customizeGoodsTag">
<div class="zk_pic_box" @click="choicImg=true" flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(data.goodsTagPicUrl) + ')'}">
<i v-if="data.goodsTagPicUrl==''" class="el-icon-picture-outline"></i>
<el-button type="danger" v-if="data.goodsTagPicUrl!=''" class="image-delete" size="mini"
icon="el-icon-close" @click.stop="data.goodsTagPicUrl=''" circle></el-button>
</div>
</el-form-item>
<el-form-item label="背景颜色">
<el-color-picker v-model="data.backgroundColor" size="small"></el-color-picker>
<el-input type="text" v-model="data.backgroundColor" size="small" style="width: 80px; margin-right: 25px;">
</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">
<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>
</template>
<script>
import draggable from "vuedraggable"
import ChooseImg from "@/components/global/ChooseImg.vue";
import choiceGood from "../../common/choiceGood.vue";
export default {
props: ["barData", "index", "dataLeng"],
components: {
draggable,
ChooseImg,
choiceGood
},
data() {
return {
choicImg: false,
isShowGoods: false,
data: this.barData.data,
position: 'center center',
repeat: 'no-repeat',
goodsTags: [{
name: '热销',
picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goods-tag-rx.png',
},
{
name: '新品',
picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goods-tag-xp.png',
},
{
name: '折扣',
picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goods-tag-zk.png',
},
{
name: '推荐',
picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goods-tag-tj.png',
},
],
};
},
created() {
},
methods: {
//向父组件传值 并调用排序
resetSord(IsUp) {
this.$emit('getSord', this.index, IsUp);
},
//点击触发父组件删除
delPlugin() {
this.$emit('comDelPlugin', this.index);
},
//选择图片
SelectId(msg) {
this.data.goodsTagPicUrl = 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;
},
cGoodsPicStyle(picUrl) {
let style = `background-image: url(${this.getIconLink(picUrl)});` +
`background-size: ${(this.data.fill === 1 ? 'cover' : 'contain')};`;
return style;
},
listStyleChange(listStyle) {
if (listStyle === -1 && this.data.textStyle === 2) {
this.data.textStyle = 1;
}
},
deleteGoods(index) {
this.data.list.splice(index, 1);
},
goodsTagChange(e) {
this.data.goodsTagPicUrl = e;
this.data.customizeGoodsTag = false;
},
customizeGoodsTagChange(e) {
this.data.goodsTagPicUrl = '';
this.data.customizeGoodsTag = true;
},
//选择商品
getGoodsChoice() {
var ckedArr = this.$refs.choiceGood.getChoicedGoods();
console.log(ckedArr, 'ddd');
this.data.list = this.data.list.concat(ckedArr);
this.isShowGoods = false;
this.$refs.choiceGood.toggleSelection();
},
//取消选择商品
quxiaoGoods() {
this.isShowGoods = false;
this.$refs.choiceGood.toggleSelection();
}
},
computed: {
cListStyle() {
if (this.data.backgroundColor) {
return `background-color:${this.data.backgroundColor};background-image:url(${this.data.backgroundPicUrl});background-size:${this.data.backgroundWidth}% ${this.data.backgroundHeight}%;background-repeat:${this.repeat};background-position:${this.position}`
} else {
return `background-image:url(${this.data.backgroundPicUrl});background-size:${this.data.backgroundWidth}% ${this.data.backgroundHeight}%;background-repeat:${this.repeat};background-position:${this.position}`
}
},
cList() {
if (!this.data.list || !this.data.list.length) {
const item = {
id: 0,
name: '演示商品名称',
CoverImage: '',
price: '100.00',
originalPrice: '300.00',
};
return [item, item, ];
} else {
return this.data.list;
}
},
cListFlex() {
if (this.data.listStyle === -1) {
return 'dir:top';
} else {
return 'dir:left';
}
},
cItemStyle() {
if (this.data.listStyle === 2) {
return 'width: 50%;';
} else {
return 'width: 100%;';
}
},
cGoodsStyle() {
let style = 'border-radius:5px;';
if (this.data.goodsStyle === 2) {
style += 'border: 1px solid #e2e2e2;';
}
if (this.data.goodsStyle != 3) {
style += 'background-color:#ffffff';
}
return style;
},
cGoodsInfoStyle() {
let style = 'position:relative;';
if (this.data.listStyle !== -1) {
style += 'padding:20px;';
} else {
style += 'padding: 15px 20px 0 0;'
}
if (this.data.textStyle === 2) {
style += 'text-align: center;';
}
return style;
},
cPriceStyle() {
let style = 'margin-top:10px;';
if (this.data.textStyle === 2) {
style += 'text-align: center;width: 100%;';
}
return style;
},
cGoodsFlex() {
if (this.data.listStyle === -1) {
return 'dir:left box:first';
} else {
return 'dir:top';
}
},
cButtonStyle() {
let style =
`background: ${this.data.buttonColor};border-color: ${this.data.buttonColor};height:48px;line-height50px;padding:0 20px;`;
if (this.data.buyBtnStyle === 3 || this.data.buyBtnStyle === 4) {
style += `border-radius:24px;`;
}
if (this.data.buyBtnStyle === 2 || this.data.buyBtnStyle === 4) {
style += `background:#fff;color:${this.data.buttonColor}`;
}
return style;
},
cTimerStyle() {
if (this.data.listStyle === 2) {
return 'height:60px;line-height:60px;font-size:24px;text-align:center;';
} else {
return '';
}
},
cTimerFlex() {
if (this.data.listStyle === 2) {
return 'main:center';
} else {
return 'box:last';
}
},
cShowBuyBtn() {
return this.data.textStyle !== 2 &&
this.data.showBuyBtn
},
cShowEditBuyBtn() {
return this.data.textStyle !== 2
},
},
mounted() {
}
};
</script>
src/components/sallCenter/plugin/booking.vue 0 → 100644
View file @ 6d78524d
<style>
.diy-booking .diy-component-edit .goods-list {
line-height: normal;
flex-wrap: wrap;
}
.diy-booking .diy-component-edit .goods-item,
.diy-booking .diy-component-edit .goods-add {
width: 50px;
height: 50px;
border: 1px solid #e2e2e2;
background-position: center;
background-size: cover;
margin-right: 15px;
margin-bottom: 15px;
position: relative;
}
.diy-booking .diy-component-edit .goods-add {
cursor: pointer;
}
.diy-booking .diy-component-edit .goods-delete {
position: absolute;
top: -11px;
right: -11px;
width: 25px;
height: 25px;
line-height: 25px;
padding: 0 0;
visibility: hidden;
}
.diy-booking .diy-component-edit .goods-item:hover .goods-delete {
visibility: visible;
}
/*-------------------- 预览部分 --------------------*/
.diy-booking .diy-component-preview .goods-list {
flex-wrap: wrap;
padding: 10px;
}
.diy-booking .diy-component-preview .goods-item {
position: relative;
}
.diy-booking .diy-component-preview .goods-tag {
position: absolute;
top: 0;
left: 0;
width: 64px;
height: 64px;
background-position: center;
background-size: cover;
}
.diy-booking .diy-component-preview .goods-pic {
width: 100%;
height: 706px;
background-color: #e2e2e2;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.diy-booking .diy-component-preview .goods-name {
margin-bottom: 18px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.diy-booking .diy-component-preview .goods-cover-3-2 .goods-pic {
height: 470px;
}
.diy-booking .diy-component-preview .goods-list-2 .goods-pic {
height: 343px;
}
.diy-booking .diy-component-preview .goods-list--1 .goods-pic {
width: 200px;
height: 200px;
margin-right: 20px;
}
.diy-booking .diy-component-preview .goods-list--1 .goods-item {
margin-bottom: 20px;
}
.diy-booking .diy-component-preview .goods-list--1 .goods-item:last-child {
margin-bottom: 0;
}
.diy-booking .diy-component-preview .goods-name-static {
height: 130px;
padding: 10px 0;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
word-break: break-all;
}
.diy-booking .diy-component-preview .goods-price {
color: #ff4544;
line-height: 48px;
}
.diy-booking .diy-component-preview .buy-btn {
border-color: #ff4544;
color: #ff4544;
padding: 0 20px;
height: 48px;
line-height: 50px;
font-size: 24px;
}
.diy-booking .diy-component-preview .buy-btn.el-button--primary {
background-color: #ff4544;
color: #fff;
}
.diy-booking .diy-component-preview .goods-item .buy-btn.is-round {
border-radius: 24px;
}
</style>
<template>
<div :class="{'active':bookData.isCked}">
<div class="diy-component-options" v-if="bookData.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-booking">
<div class="diy-component-preview" :style="cListStyle">
<div class="goods-list" :class="'goods-list-'+data.listStyle" :flex="cListFlex">
<div v-for="(item,index) in cList" style="padding: 10px;" :style="cItemStyle" :key="index">
<div class="goods-item" :flex="cGoodsFlex" :class="'goods-cover-'+data.goodsCoverProportion"
:style="cGoodsStyle">
<div class="goods-pic" :style="cGoodsPicStyle(item.CoverImage)"></div>
<div v-if="data.showGoodsTag" class="goods-tag"
:style="'background-image: url('+getIconLink(data.goodsTagPicUrl)+');'"></div>
<div :style="cGoodsInfoStyle">
<div class="goods-name" :class="data.listStyle===-1?'goods-name-static':''">
<template v-if="data.showGoodsName">{{item.name}}</template>
</div>
<div flex="box:last cross:bottom">
<div class="goods-price" :style="cPriceStyle">
<template v-if="item.price=='0.00' || item.price==0">免费</template>
<template v-else>￥{{item.price}}</template>
</div>
<div v-if="cShowBuyBtn" style="padding: 0 10px;">
<el-button :style="cButtonStyle" v-if="data.buyBtnStyle===1" class="buy-btn" type="primary"
size="small">{{data.buyBtnText}}
</el-button>
<el-button :style="cButtonStyle" v-if="data.buyBtnStyle===2" class="buy-btn" size="small">
{{data.buyBtnText}}
</el-button>
<el-button :style="cButtonStyle" v-if="data.buyBtnStyle===3" class="buy-btn" type="primary"
size="small" round>{{data.buyBtnText}}
</el-button>
<el-button :style="cButtonStyle" v-if="data.buyBtnStyle===4" class="buy-btn" size="small" round>
{{data.buyBtnText}}
</el-button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="diy-component-edit" v-if="bookData.isCked">
<el-form @submit.native.prevent label-width="150px">
<el-form-item label="商品列表">
<draggable class="goods-list" flex v-model="data.list" ref="parentNode">
<div class="goods-item drag-drop" v-for="(goods,goodsIndex) in data.list" :key="goodsIndex"
:style="'background-image: url('+getIconLink(goods.CoverImage)+');'">
<el-button @click="deleteGoods(goodsIndex)" class="goods-delete" size="small" circle type="danger"
icon="el-icon-close"></el-button>
</div>
<div class="goods-add" flex="main:center cross:center" @click="isShowGoods=true">
<i class="el-icon-plus"></i>
</div>
</draggable>
</el-form-item>
<el-form-item label="购买按钮颜色">
<el-color-picker v-model="data.buttonColor"></el-color-picker>
</el-form-item>
<el-form-item label="列表样式">
<el-radio v-model="data.listStyle" :label="-1" @change="listStyleChange">列表模式</el-radio>
<el-radio v-model="data.listStyle" :label="1" @change="listStyleChange">一行一个</el-radio>
<el-radio v-model="data.listStyle" :label="2" @change="listStyleChange">一行两个</el-radio>
</el-form-item>
<el-form-item label="商品封面图宽高比例" v-if="data.listStyle==1">
<el-radio v-model="data.goodsCoverProportion" label="1-1">1:1</el-radio>
<el-radio v-model="data.goodsCoverProportion" label="3-2">3:2</el-radio>
</el-form-item>
<el-form-item label="商品封面图填充">
<el-radio v-model="data.fill" :label="1">填充</el-radio>
<el-radio v-model="data.fill" :label="0">留白</el-radio>
</el-form-item>
<el-form-item label="商品样式">
<el-radio v-model="data.goodsStyle" :label="1">白底无边框</el-radio>
<el-radio v-model="data.goodsStyle" :label="2">白底有边框</el-radio>
<el-radio v-model="data.goodsStyle" :label="3">无底无边框</el-radio>
</el-form-item>
<el-form-item label="显示商品名称">
<el-switch v-model="data.showGoodsName"></el-switch>
</el-form-item>
<el-form-item v-if="data.listStyle!==-1" label="文本样式">
<el-radio v-model="data.textStyle" :label="1">左对齐</el-radio>
<el-radio v-model="data.textStyle" :label="2">居中</el-radio>
</el-form-item>
<template v-if="cShowEditBuyBtn">
<el-form-item label="显示购买按钮">
<el-switch v-model="data.showBuyBtn"></el-switch>
</el-form-item>
<el-form-item v-if="data.showBuyBtn" label="购买按钮样式">
<el-radio v-model="data.buyBtnStyle" :label="1">填充</el-radio>
<el-radio v-model="data.buyBtnStyle" :label="2">线条</el-radio>
<el-radio v-model="data.buyBtnStyle" :label="3">圆角填充</el-radio>
<el-radio v-model="data.buyBtnStyle" :label="4">圆角线条</el-radio>
</el-form-item>
<el-form-item v-if="data.showBuyBtn" label="购买按钮文字">
<el-input size="small" v-model="data.buyBtnText"></el-input>
</el-form-item>
</template>
<el-form-item label="显示商品角标">
<el-switch v-model="data.showGoodsTag"></el-switch>
</el-form-item>
<el-form-item label="商品角标样式" v-if="data.showGoodsTag">
<el-radio v-model="data.goodsTagPicUrl" v-for="tag in goodsTags" :label="tag.picUrl" :key="tag.name"
@change="goodsTagChange">
{{tag.name}}
</el-radio>
<el-radio v-model="data.customizeGoodsTag" :label="true" @change="customizeGoodsTagChange">自定义
</el-radio>
</el-form-item>
<el-form-item label="自定义商品角标" v-if="data.showGoodsTag&&data.customizeGoodsTag">
<div class="zk_pic_box" @click="choicImg=true" flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(data.goodsTagPicUrl) + ')'}">
<i v-if="data.goodsTagPicUrl==''" class="el-icon-picture-outline"></i>
<el-button type="danger" v-if="data.goodsTagPicUrl!=''" class="image-delete" size="mini"
icon="el-icon-close" @click.stop="data.goodsTagPicUrl=''" circle></el-button>
</div>
</el-form-item>
<el-form-item label="背景颜色">
<el-color-picker v-model="data.backgroundColor" size="small"></el-color-picker>
<el-input type="text" v-model="data.backgroundColor" size="small" style="width: 80px; margin-right: 25px;">
</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">
<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>
</template>
<script>
import draggable from "vuedraggable"
import ChooseImg from "@/components/global/ChooseImg.vue";
import choiceGood from "../../common/choiceGood.vue";
export default {
props: ["bookData", "index", "dataLeng"],
components: {
draggable,
ChooseImg,
choiceGood
},
data() {
return {
choicImg: false,
isShowGoods: false,
data: this.bookData.data,
position: 'center center',
repeat: 'no-repeat',
goodsTags: [{
name: '热销',
picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goods-tag-rx.png',
},
{
name: '新品',
picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goods-tag-xp.png',
},
{
name: '折扣',
picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goods-tag-zk.png',
},
{
name: '推荐',
picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goods-tag-tj.png',
},
],
};
},
created() {
},
methods: {
//向父组件传值 并调用排序
resetSord(IsUp) {
this.$emit('getSord', this.index, IsUp);
},
//点击触发父组件删除
delPlugin() {
this.$emit('comDelPlugin', this.index);
},
//选择图片
SelectId(msg) {
this.data.goodsTagPicUrl = 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;
},
cGoodsPicStyle(picUrl) {
let style = `background-image: url(${this.getIconLink(picUrl)});` +
`background-size: ${(this.data.fill === 1 ? 'cover' : 'contain')};`;
return style;
},
listStyleChange(listStyle) {
if (listStyle === -1 && this.data.textStyle === 2) {
this.data.textStyle = 1;
}
},
deleteGoods(index) {
this.data.list.splice(index, 1);
},
goodsTagChange(e) {
this.data.goodsTagPicUrl = e;
this.data.customizeGoodsTag = false;
},
customizeGoodsTagChange(e) {
this.data.goodsTagPicUrl = '';
this.data.customizeGoodsTag = true;
},
//选择商品
getGoodsChoice() {
var ckedArr = this.$refs.choiceGood.getChoicedGoods();
console.log(ckedArr, 'ddd');
this.data.list = this.data.list.concat(ckedArr);
this.isShowGoods = false;
this.$refs.choiceGood.toggleSelection();
},
//取消选择商品
quxiaoGoods() {
this.isShowGoods = false;
this.$refs.choiceGood.toggleSelection();
}
},
computed: {
cListStyle() {
if (this.data.backgroundColor) {
return `background-color:${this.data.backgroundColor};background-image:url(${this.data.backgroundPicUrl});background-size:${this.data.backgroundWidth}% ${this.data.backgroundHeight}%;background-repeat:${this.repeat};background-position:${this.position}`
} else {
return `background-image:url(${this.data.backgroundPicUrl});background-size:${this.data.backgroundWidth}% ${this.data.backgroundHeight}%;background-repeat:${this.repeat};background-position:${this.position}`
}
},
cButtonStyle() {
let style =
`background: ${this.data.buttonColor};border-color: ${this.data.buttonColor};height:48px;line-height:50px;padding: 0 20px;`;
if (this.data.buyBtnStyle === 3 || this.data.buyBtnStyle === 4) {
style += `border-radius:24px;`;
}
if (this.data.buyBtnStyle === 2 || this.data.buyBtnStyle === 4) {
style += `background:#fff;color:${this.data.buttonColor}`;
}
return style;
},
cList() {
if (!this.data.list || !this.data.list.length) {
const item = {
id: 0,
name: '演示商品名称',
CoverImage: '',
price: '300.00',
};
return [item, item, ];
} else {
return this.data.list;
}
},
cListFlex() {
if (this.data.listStyle === -1) {
return 'dir:top';
} else {
return 'dir:left';
}
},
cItemStyle() {
if (this.data.listStyle === 2) {
return 'width: 50%;';
} else {
return 'width: 100%;';
}
},
cGoodsStyle() {
let style = 'border-radius:5px;';
if (this.data.goodsStyle === 2) {
style += 'border: 1px solid #e2e2e2;';
}
if (this.data.goodsStyle != 3) {
style += 'background-color:#ffffff';
}
return style;
},
cGoodsInfoStyle() {
let style = '';
if (this.data.listStyle !== -1) {
style += 'padding:20px;';
}
if (this.data.textStyle === 2) {
style += 'text-align: center;';
}
return style;
},
cPriceStyle() {
let style = '';
if (this.data.textStyle === 2) {
style += 'text-align: center;width: 100%;';
}
return style;
},
cGoodsFlex() {
if (this.data.listStyle === -1) {
return 'dir:left box:first';
} else {
return 'dir:top';
}
},
cShowBuyBtn() {
return this.data.textStyle !== 2 &&
this.data.showBuyBtn;
},
cShowEditBuyBtn() {
return this.data.textStyle !== 2
},
},
mounted() {
}
};
</script>
src/components/sallCenter/plugin/coupon.vue 0 → 100644
View file @ 6d78524d
<style>
.diy-coupon {
width: 100%;
padding: 16px;
min-height: 150px;
overflow-x: auto;
padding-left: 24px;
}
.diy-coupon .diy-coupon-one {
width: 256px;
height: 130px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
margin-right: 24px;
flex: none;
}
.diy-coupon .diy-coupon-one .right {
width: 1.6rem;
font-size: 26px;
line-height: 1.25;
text-align: center;
margin-right: 2px;
}
</style>
<template>
<div :class="{'active':couponData.isCked}">
<div class="diy-component-options" v-if="couponData.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-coupon" flex="dir:left" :style="cListStyle">
<div class="diy-coupon-one" flex="dir:left" :style="cStyle1" v-for="(item,index) in 2" :key="index+'s'">
<div style="text-align: center;width: 215px">
<div style="height: 80px;line-height: 80px;font-size: 28px">￥1000</div>
<div style="height: 50px;line-height: 50px;font-size: 24px">满200元可用</div>
</div>
<div class="right" flex="main:center cross:center">立即领取</div>
</div>
<div class="diy-coupon-one" flex="dir:left" :style="cStyle2" v-for="(item,sindex) in 2" :key="sindex+'d'">
<div style="text-align: center;width: 215px">
<div style="height: 80px;line-height: 80px;font-size: 28px">￥1000</div>
<div style="height: 50px;line-height: 50px;font-size: 24px">满200元可用</div>
</div>
<div class="right" flex="main:center cross:center">已领取</div>
</div>
</div>
</div>
<div class="diy-component-edit" v-if="couponData.isCked">
<el-form label-width="100px" @submit.native.prevent>
<el-form-item label="字体颜色">
<el-color-picker size="small" v-model="data.textColor"></el-color-picker>
</el-form-item>
<el-form-item label="不可领取">
<el-tooltip class="item" effect="dark" content="建议尺寸256*130" placement="top">
<el-button @click="choicImg=true,ckedIndex=1" size="mini">选择图片</el-button>
</el-tooltip>
<div class="zk_pic_box" style="width:100px;height:100px;" flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(data.receiveBg) + ')'}">
<el-button type="danger"
v-if="data.receiveBg!='https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/icon-coupon-no.png'"
class="image-delete" size="mini" icon="el-icon-close"
@click.stop="data.receiveBg='https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/icon-coupon-no.png'"
circle></el-button>
</div>
</el-form-item>
<el-form-item label="可领取">
<el-tooltip class="item" effect="dark" content="建议尺寸256*130" placement="top">
<el-button size="mini" @click="choicImg=true,ckedIndex=2">选择图片</el-button>
</el-tooltip>
<div class="zk_pic_box" style="width:100px;height:100px;" flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(data.unclaimedBg) + ')'}">
<el-button type="danger"
v-if="data.unclaimedBg!='https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/icon-coupon-index.png'"
class="image-delete" size="mini" icon="el-icon-close"
@click.stop="data.unclaimedBg='https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/icon-coupon-index.png'"
circle></el-button>
</div>
</el-form-item>
<el-form-item label="背景颜色">
<el-color-picker v-model="data.backgroundColor" size="small"></el-color-picker>
<el-input type="text" v-model="data.backgroundColor" size="small" style="width: 80px; margin-right: 25px;">
</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: ["couponData", "index", "dataLeng"],
components: {
ChooseImg
},
data() {
return {
choicImg: false,
data: this.couponData.data,
ckedIndex: -1,
position: 'center center',
repeat: 'no-repeat'
};
},
created() {
},
methods: {
//向父组件传值 并调用排序
resetSord(IsUp) {
this.$emit('getSord', this.index, IsUp);
},
//点击触发父组件删除
delPlugin() {
this.$emit('comDelPlugin', this.index);
},
//选择图片
SelectId(msg) {
if (this.ckedIndex == 1) {
this.data.receiveBg = msg.url;
} else if (this.ckedIndex == 2) {
this.data.unclaimedBg = 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: {
cListStyle() {
if (this.data.backgroundColor) {
return `background-color:${this.data.backgroundColor};background-image:url(${this.getIconLink(this.data.backgroundPicUrl)});background-size:${this.data.backgroundWidth}% ${this.data.backgroundHeight}%;background-repeat:${this.repeat};background-position:${this.position}`
} else {
return `background-image:url(${this.getIconLink(this.data.backgroundPicUrl)});background-size:${this.data.backgroundWidth}% ${this.data.backgroundHeight}%;background-repeat:${this.repeat};background-position:${this.position}`
}
},
cStyle1() {
return `background-image: url('${this.getIconLink(this.data.unclaimedBg)}');` +
`color: ${this.data.textColor}`;
},
cStyle2() {
return `background-image: url('${this.getIconLink(this.data.receiveBg)}');` +
`color: ${this.data.textColor}`;
},
},
mounted() {
}
};
</script>
src/components/sallCenter/plugin/integral-mall.vue 0 → 100644
View file @ 6d78524d
<style>
.diy-integral-mall .diy-component-edit .goods-list {
line-height: normal;
flex-wrap: wrap;
}
.diy-integral-mall .diy-component-edit .goods-item,
.diy-integral-mall .diy-component-edit .goods-add {
width: 50px;
height: 50px;
border: 1px solid #e2e2e2;
background-position: center;
background-size: cover;
margin-right: 15px;
margin-bottom: 15px;
position: relative;
}
.diy-integral-mall .diy-component-edit .goods-add {
cursor: pointer;
}
.diy-integral-mall .diy-component-edit .goods-delete {
position: absolute;
top: -11px;
right: -11px;
width: 25px;
height: 25px;
line-height: 25px;
padding: 0 0;
visibility: hidden;
}
.diy-integral-mall .diy-component-edit .goods-item:hover .goods-delete {
visibility: visible;
}
.diy-integral-mall .diy-component-edit hr {
height: 0;
border-width: 0 0 1px 0;
border-bottom: 1px solid #e2e2e2;
position: absolute;
top: 250px;
left: 25px;
width: 95%;
}
/*-------------------- 预览部分 --------------------*/
.diy-integral-mall .diy-component-preview .goods-list {
flex-wrap: wrap;
padding: 10px;
}
.diy-integral-mall .diy-component-preview .goods-item {
position: relative;
}
.diy-integral-mall .diy-component-preview .goods-tag {
position: absolute;
top: 0;
left: 0;
width: 64px;
height: 64px;
background-position: center;
background-size: cover;
}
.diy-integral-mall .diy-component-preview .goods-pic {
width: 100%;
height: 706px;
background-color: #e2e2e2;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.diy-integral-mall .diy-component-preview .goods-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.diy-integral-mall .diy-component-preview .goods-cover-3-2 .goods-pic {
height: 470px;
}
.diy-integral-mall .diy-component-preview .goods-list-2 .goods-pic {
height: 343px;
}
.diy-integral-mall .diy-component-preview .goods-list--1 .goods-pic {
width: 200px;
height: 200px;
margin-right: 20px;
}
.diy-integral-mall .diy-component-preview .goods-list--1 .goods-item {
margin-bottom: 20px;
}
.diy-integral-mall .diy-component-preview .goods-list--1 .goods-item:last-child {
margin-bottom: 0;
}
.diy-integral-mall .diy-component-preview .goods-name-static {
height: 80px;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
word-break: break-all;
margin-bottom: 12px;
}
.diy-integral-mall .diy-component-preview .goods-price {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #ff4544;
line-height: 48px;
}
.diy-integral-mall .diy-component-preview .coupon-list {
padding: 10px;
}
.diy-integral-mall .diy-component-preview .coupon-item {
width: 256px;
height: 130px;
background-size: cover;
background-position: center;
margin: 10px;
}
.diy-integral-mall .diy-component-preview .coupon-condition {
height: 50px;
line-height: 50px;
text-align: center;
font-size: 24px;
}
</style>
<template>
<div :class="{'active':mallData.isCked}">
<div class="diy-component-options" v-if="mallData.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-integral-mall">
<div class="diy-component-preview" :style="cListStyle">
<div v-if="data.showCoupon" style="overflow-x: auto;" class="coupon-list" flex="dir:left">
<div style="display: inline-block" v-for="(item,cindex) in couponList" :key="cindex">
<div class="coupon-item"
:style="'background-image: url('+getIconLink(data.couponPicUrl)+'); color: '+data.couponColor+';'" flex="box:last">
<div flex="dir:top box:last">
<div flex="main:center cross:center">
<div>
<span style="font-size: 24px;">￥</span><span style="font-size: 32px;">50.00</span>
</div>
</div>
<div class="coupon-condition">满100可用</div>
</div>
<div flex="cross:center" style="width: 56px; padding: 0 15px;line-height: 1.15;font-size: 24px;">
立即兑换
</div>
</div>
</div>
</div>
<div v-if="data.showGoods" class="goods-list" :class="'goods-list-'+data.listStyle" :flex="cListFlex">
<div v-for="(item,index) in cList" style="padding: 10px;" :style="cItemStyle" :key="index">
<div class="goods-item" :flex="cGoodsFlex" :class="'goods-cover-'+data.goodsCoverProportion"
:style="cGoodsStyle">
<div class="goods-pic" :style="cGoodsPicStyle(item.CoverImage)"></div>
<div v-if="data.showGoodsTag" class="goods-tag"
:style="'background-image: url('+getIconLink(data.goodsTagPicUrl)+');'"></div>
<div :style="cGoodsInfoStyle">
<div class="goods-name" :class="data.listStyle===-1?'goods-name-static':''">
<template v-if="data.showGoodsName">{{item.name}}</template>
</div>
<div flex="box:last cross:bottom">
<div class="goods-price" :style="cPriceStyle">
<div>
<template v-if="item.integral > 0">{{item.integral}}积分</template>
</div>
<div v-if="data.listStyle == -1"
style="color: #909399;text-decoration: line-through;position: absolute;left: 0;bottom: 0;font-size: 24px;">
<span>￥{{item.originalPrice}}</span>
</div>
<div v-else style="color: #909399;text-decoration: line-through;font-size: 24px;line-height: 1">
<span>￥{{item.originalPrice}}</span>
</div>
</div>
<div v-if="cShowBuyBtn" style="padding: 0 10px;">
<el-button :style="cButtonStyle" type="primary" style="font-size: 24px;">{{data.buyBtnText}}
</el-button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="diy-component-edit" v-if="mallData.isCked">
<el-form @submit.native.prevent label-width="150px">
<template>
<el-form-item label="显示优惠券">
<el-switch v-model="data.showCoupon"></el-switch>
</el-form-item>
<el-form-item v-if="data.showCoupon" label="优惠券文字颜色">
<el-color-picker v-model="data.couponColor"></el-color-picker>
</el-form-item>
<el-form-item v-if="data.showCoupon" label="优惠券背景图片">
<!-- <app-image-upload width="320" height="164" v-model="data.couponPicUrl"></app-image-upload> -->
<div class="zk_pic_box" @click="choicImg=true,commomIndex=1" flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(data.couponPicUrl) + ')'}">
<i v-if="data.couponPicUrl==''" class="el-icon-picture-outline"></i>
<el-button type="danger" v-if="data.couponPicUrl!=''" class="image-delete" size="mini"
icon="el-icon-close" @click.stop="data.couponPicUrl=''" circle></el-button>
</div>
</el-form-item>
</template>
<template>
<hr>
<el-form-item style="margin-top: 35px" label="显示商品">
<el-switch v-model="data.showGoods"></el-switch>
</el-form-item>
<el-form-item v-if="data.showGoods" label="商品列表">
<div class="goods-list" flex>
<div class="goods-item" v-for="(goods,goodsIndex) in data.list" :key="goodsIndex"
:style="'background-image: url('+getIconLink(goods.CoverImage)+');'">
<el-button @click="deleteGoods(goodsIndex)" class="goods-delete" size="small" circle type="danger"
icon="el-icon-close"></el-button>
</div>
<div class="goods-add" flex="main:center cross:center" @click="isShowGoods=true">
<i class="el-icon-plus"></i>
</div>
</div>
</el-form-item>
<el-form-item v-if="data.showGoods" label="购买按钮颜色">
<el-color-picker v-model="data.buttonColor"></el-color-picker>
</el-form-item>
<el-form-item v-if="data.showGoods" label="列表样式">
<el-radio v-model="data.listStyle" :label="-1" @change="listStyleChange">列表模式</el-radio>
<el-radio v-model="data.listStyle" :label="1" @change="listStyleChange">一行一个</el-radio>
<el-radio v-model="data.listStyle" :label="2" @change="listStyleChange">一行两个</el-radio>
</el-form-item>
<el-form-item v-if="data.showGoods&&data.listStyle==1" label="商品封面图宽高比例">
<el-radio v-model="data.goodsCoverProportion" label="1-1">1:1</el-radio>
<el-radio v-model="data.goodsCoverProportion" label="3-2">3:2</el-radio>
</el-form-item>
<el-form-item v-if="data.showGoods" label="商品封面图填充">
<el-radio v-model="data.fill" :label="1">填充</el-radio>
<el-radio v-model="data.fill" :label="0">留白</el-radio>
</el-form-item>
<el-form-item label="商品样式">
<el-radio v-model="data.goodsStyle" :label="1">白底无边框</el-radio>
<el-radio v-model="data.goodsStyle" :label="2">白底有边框</el-radio>
<el-radio v-model="data.goodsStyle" :label="3">无底无边框</el-radio>
</el-form-item>
<el-form-item v-if="data.listStyle!==-1" label="文本样式">
<el-radio v-model="data.textStyle" :label="1">左对齐</el-radio>
<el-radio v-model="data.textStyle" :label="2">居中</el-radio>
</el-form-item>
<el-form-item v-if="data.showGoods" label="显示商品名称">
<el-switch v-model="data.showGoodsName"></el-switch>
</el-form-item>
<template v-if="cShowEditBuyBtn && data.showGoods">
<el-form-item label="显示购买按钮">
<el-switch v-model="data.showBuyBtn"></el-switch>
</el-form-item>
<el-form-item v-if="data.showBuyBtn && data.showGoods" label="购买按钮样式">
<el-radio v-model="data.buyBtnStyle" :label="1">填充</el-radio>
<el-radio v-model="data.buyBtnStyle" :label="2">线条</el-radio>
<el-radio v-model="data.buyBtnStyle" :label="3">圆角填充</el-radio>
<el-radio v-model="data.buyBtnStyle" :label="4">圆角线条</el-radio>
</el-form-item>
<el-form-item v-if="data.showBuyBtn && data.showGoods" label="购买按钮文字">
<el-input maxlength='4' size="small" v-model="data.buyBtnText"></el-input>
</el-form-item>
</template>
<el-form-item v-if="data.showGoods" label="显示商品角标">
<el-switch v-model="data.showGoodsTag"></el-switch>
</el-form-item>
<el-form-item label="商品角标样式" v-if="data.showGoodsTag">
<el-radio v-model="data.goodsTagPicUrl" v-for="tag in goodsTags" :label="tag.picUrl" :key="tag.name"
@change="goodsTagChange">
{{tag.name}}
</el-radio>
<el-radio v-model="data.customizeGoodsTag" :label="true" @change="customizeGoodsTagChange">自定义
</el-radio>
</el-form-item>
<el-form-item label="自定义商品角标" v-if="data.showGoodsTag&&data.customizeGoodsTag && data.showGoods">
<div class="zk_pic_box" @click="choicImg=true,commomIndex=2" flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(data.goodsTagPicUrl) + ')'}">
<i v-if="data.goodsTagPicUrl==''" class="el-icon-picture-outline"></i>
<el-button type="danger" v-if="data.goodsTagPicUrl!=''" class="image-delete" size="mini"
icon="el-icon-close" @click.stop="data.goodsTagPicUrl=''" circle></el-button>
</div>
</el-form-item>
<el-form-item label="背景颜色">
<el-color-picker v-model="data.backgroundColor" size="small"></el-color-picker>
<el-input type="text" v-model="data.backgroundColor" size="small"
style="width: 80px; margin-right: 25px;">
</el-input>
</el-form-item>
</template>
</el-form>
</div>
</div>
<!-- 选择图片文件 -->
<el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
<ChooseImg @SelectId="SelectId"></ChooseImg>
</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>
</template>
<script>
import draggable from "vuedraggable"
import ChooseImg from "@/components/global/ChooseImg.vue";
import choiceGood from "../../common/choiceGood.vue";
export default {
props: ["mallData", "index", "dataLeng"],
components: {
draggable,
ChooseImg,
choiceGood
},
data() {
return {
choicImg: false,
isShowGoods: false,
data: this.mallData.data,
commomIndex:-1,
position: 'center center',
repeat: 'no-repeat',
couponList: [1, 2, 3, 4],
goodsTags: [{
name: '热销',
picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goods-tag-rx.png',
},
{
name: '新品',
picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goods-tag-xp.png',
},
{
name: '折扣',
picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goods-tag-zk.png',
},
{
name: '推荐',
picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goods-tag-tj.png',
},
],
};
},
created() {
},
methods: {
//向父组件传值 并调用排序
resetSord(IsUp) {
this.$emit('getSord', this.index, IsUp);
},
//点击触发父组件删除
delPlugin() {
this.$emit('comDelPlugin', this.index);
},
//选择图片
SelectId(msg) {
if(this.commomIndex==1){
this.data.couponPicUrl=msg.url;
}else if(this.commomIndex==2){
this.data.goodsTagPicUrl = 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;
},
cGoodsPicStyle(picUrl) {
let style = `background-image: url(${this.getIconLink(picUrl)});` +
`background-size: ${(this.data.fill === 1 ? 'cover' : 'contain')};`;
return style;
},
listStyleChange(listStyle) {
if (listStyle === -1 && this.data.textStyle === 2) {
this.data.textStyle = 1;
}
},
deleteGoods(index) {
this.data.list.splice(index, 1);
},
goodsTagChange(e) {
this.data.goodsTagPicUrl = e;
this.data.customizeGoodsTag = false;
},
customizeGoodsTagChange(e) {
this.data.goodsTagPicUrl = '';
this.data.customizeGoodsTag = true;
},
//选择商品
getGoodsChoice() {
var ckedArr = this.$refs.choiceGood.getChoicedGoods();
console.log(ckedArr, 'ddd');
this.data.list = this.data.list.concat(ckedArr);
this.isShowGoods = false;
this.$refs.choiceGood.toggleSelection();
},
//取消选择商品
quxiaoGoods() {
this.isShowGoods = false;
this.$refs.choiceGood.toggleSelection();
}
},
computed: {
cListStyle() {
if (this.data.backgroundColor) {
return `background-color:${this.data.backgroundColor};background-image:url(${this.data.backgroundPicUrl});background-size:${this.data.backgroundWidth}% ${this.data.backgroundHeight}%;background-repeat:${this.repeat};background-position:${this.position}`
} else {
return `background-image:url(${this.data.backgroundPicUrl});background-size:${this.data.backgroundWidth}% ${this.data.backgroundHeight}%;background-repeat:${this.repeat};background-position:${this.position}`
}
},
cList() {
if (!this.data.list || !this.data.list.length) {
const item = {
id: 0,
name: '演示商品名称',
CoverImage: '',
price: '0.00',
integral: 50,
originalPrice: '50.00',
};
return [item, item, ];
} else {
return this.data.list;
}
},
cListFlex() {
if (this.data.listStyle === -1) {
return 'dir:top';
} else {
return 'dir:left';
}
},
cItemStyle() {
if (this.data.listStyle === 2) {
return 'width: 50%;';
} else {
return 'width: 100%;';
}
},
cGoodsStyle() {
let style = 'border-radius:5px;';
if (this.data.goodsStyle === 2) {
style += 'border: 1px solid #e2e2e2;';
}
if (this.data.goodsStyle != 3) {
style += 'background-color:#ffffff';
}
return style;
},
cGoodsInfoStyle() {
let style = 'position:relative;';
if (this.data.listStyle !== -1) {
style += 'padding:20px;';
} else {
style += 'padding: 15px 20px 0 0;'
}
if (this.data.textStyle === 2) {
style += 'text-align: center;';
}
return style;
},
cPriceStyle() {
let style = 'margin-top: 10px;';
if (this.data.textStyle === 2) {
style += 'text-align: center;width: 100%;';
}
return style;
},
cGoodsFlex() {
if (this.data.listStyle === -1) {
return 'dir:left box:first';
} else {
return 'dir:top';
}
},
cButtonStyle() {
let style =
`background: ${this.data.buttonColor};border-color: ${this.data.buttonColor};height:48px;line-height50px;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;
},
cShowBuyBtn() {
return this.data.textStyle !== 2 &&
this.data.showBuyBtn
},
cShowEditBuyBtn() {
return this.data.textStyle !== 2
},
},
mounted() {
}
};
</script>
src/components/sallCenter/plugin/lottery.vue 0 → 100644
View file @ 6d78524d
<style>
.diy-lottery .diy-component-edit .goods-list {
line-height: normal;
flex-wrap: wrap;
}
.diy-lottery .diy-component-edit .goods-item,
.diy-lottery .diy-component-edit .goods-add {
width: 50px;
height: 50px;
border: 1px solid #e2e2e2;
background-position: center;
background-size: cover;
margin-right: 15px;
margin-bottom: 15px;
position: relative;
}
.diy-lottery .diy-component-edit .goods-add {
cursor: pointer;
}
.diy-lottery .diy-component-edit .goods-delete {
position: absolute;
top: -11px;
right: -11px;
width: 25px;
height: 25px;
line-height: 25px;
padding: 0 0;
visibility: hidden;
}
.diy-lottery .diy-component-edit .goods-item:hover .goods-delete {
visibility: visible;
}
/*-------------------- 预览部分 --------------------*/
.diy-lottery .diy-component-preview .goods-list {
flex-wrap: wrap;
padding: 10px;
}
.diy-lottery .diy-component-preview .goods-item {
position: relative;
}
.diy-lottery .diy-component-preview .goods-tag {
position: absolute;
top: 0;
left: 0;
width: 64px;
height: 64px;
background-position: center;
background-size: cover;
}
.diy-lottery .diy-component-preview .goods-pic {
width: 100%;
height: 706px;
background-color: #e2e2e2;
background-position: center;
background-size: cover;
position: relative;
background-repeat: no-repeat;
}
.diy-lottery .diy-component-preview .goods-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.diy-lottery .diy-component-preview .goods-cover-3-2 .goods-pic {
height: 470px;
}
.diy-lottery .diy-component-preview .goods-list-2 .goods-pic {
height: 343px;
}
.diy-lottery .diy-component-preview .goods-list--1 .goods-pic {
width: 200px;
height: 200px;
margin-right: 20px;
}
.diy-lottery .diy-component-preview .goods-list--1 .goods-item {
margin-bottom: 20px;
}
.diy-lottery .diy-component-preview .goods-list--1 .goods-item:last-child {
margin-bottom: 0;
}
.diy-lottery .diy-component-preview .goods-name-static {
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-break: break-all;
margin-bottom: 12px;
}
.diy-lottery .diy-component-preview .goods-price {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #ff4544;
line-height: 48px;
}
.diy-lottery .diy-component-preview .goods-lottery-timer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 80px;
line-height: 80px;
padding: 0 20px;
background: -webkit-linear-gradient(left, #f44, #ff8b8b);
background: -webkit-gradient(linear, left top, right top, from(#f44), to(#ff8b8b));
background: -moz-linear-gradient(left, #f44, #ff8b8b);
background: linear-gradient(90deg, #f44, #ff8b8b);
color: #fff;
}
</style>
<template>
<div :class="{'active':lottData.isCked}">
<div class="diy-component-options" v-if="lottData.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-lottery">
<div class="diy-component-preview" :style="cListStyle">
<div class="goods-list" :class="'goods-list-'+data.listStyle" :flex="cListFlex">
<div v-for="(item,index) in cList" style="padding: 10px;" :style="cItemStyle" :key="index">
<div class="goods-item" :flex="cGoodsFlex" :class="'goods-cover-'+data.goodsCoverProportion"
:style="cGoodsStyle">
<div class="goods-pic" :style="cGoodsPicStyle(item.CoverImage)">
<div :style="cTimerStyle" :flex="cTimerFlex" class="goods-lottery-timer"
v-if="data.listStyle===1 || data.listStyle===2">
<div v-if="data.listStyle===1">抽奖</div>
<div>距结束 xx:xx:xx</div>
</div>
</div>
<div v-if="data.showGoodsTag" class="goods-tag"
:style="'background-image: url('+getIconLink(data.goodsTagPicUrl)+');'"></div>
<div :style="cGoodsInfoStyle">
<div class="goods-name" :class="data.listStyle===-1?'goods-name-static':''">
<template v-if="data.showGoodsName">{{item.name}}</template>
</div>
<div v-if="data.listStyle===-1" style="color: #909399;">
<i class="el-icon-time"></i>
距结束 <span style="color: #FF4544;">xx:xx:xx</span>
</div>
<div flex="box:last cross:bottom">
<div class="goods-price" :style="cPriceStyle">
<div style="color: #ff4544;">免费</div>
<div v-if="data.listStyle == -1" style="color: #909399;text-decoration: line-through;position: absolute;left: 0;bottom: 0;font-size: 24px;">
<span>￥{{item.originalPrice}}</span>
</div>
<div v-else style="color: #909399;text-decoration: line-through;font-size: 24px;line-height: 1">
<span>￥{{item.originalPrice}}</span>
</div>
</div>
<div v-if="cShowBuyBtn" style="padding: 0 10px;">
<el-button :style="cButtonStyle" type="primary" style="font-size: 24px;">{{data.buyBtnText}}</el-button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="diy-component-edit" v-if="lottData.isCked">
<el-form @submit.native.prevent label-width="150px">
<el-form-item label="商品列表">
<draggable class="goods-list" flex v-model="data.list" ref="parentNode">
<div class="goods-item drag-drop" v-for="(goods,goodsIndex) in data.list" :key="goodsIndex"
:style="'background-image: url('+getIconLink(goods.CoverImage)+');'">
<el-button @click="deleteGoods(goodsIndex)" class="goods-delete" size="small" circle type="danger"
icon="el-icon-close"></el-button>
</div>
<div class="goods-add" flex="main:center cross:center" @click="isShowGoods=true">
<i class="el-icon-plus"></i>
</div>
</draggable>
</el-form-item>
<el-form-item label="购买按钮颜色">
<el-color-picker v-model="data.buttonColor"></el-color-picker>
</el-form-item>
<el-form-item label="列表样式">
<el-radio v-model="data.listStyle" :label="-1" @change="listStyleChange">列表模式</el-radio>
<el-radio v-model="data.listStyle" :label="1" @change="listStyleChange">一行一个</el-radio>
<el-radio v-model="data.listStyle" :label="2" @change="listStyleChange">一行两个</el-radio>
</el-form-item>
<el-form-item label="商品封面图宽高比例" v-if="data.listStyle==1">
<el-radio v-model="data.goodsCoverProportion" label="1-1">1:1</el-radio>
<el-radio v-model="data.goodsCoverProportion" label="3-2">3:2</el-radio>
</el-form-item>
<el-form-item label="商品封面图填充">
<el-radio v-model="data.fill" :label="1">填充</el-radio>
<el-radio v-model="data.fill" :label="0">留白</el-radio>
</el-form-item>
<el-form-item label="商品样式">
<el-radio v-model="data.goodsStyle" :label="1">白底无边框</el-radio>
<el-radio v-model="data.goodsStyle" :label="2">白底有边框</el-radio>
<el-radio v-model="data.goodsStyle" :label="3">无底无边框</el-radio>
</el-form-item>
<el-form-item label="显示商品名称">
<el-switch v-model="data.showGoodsName"></el-switch>
</el-form-item>
<el-form-item v-if="data.listStyle!==-1" label="文本样式">
<el-radio v-model="data.textStyle" :label="1">左对齐</el-radio>
<el-radio v-model="data.textStyle" :label="2">居中</el-radio>
</el-form-item>
<template v-if="cShowEditBuyBtn">
<el-form-item label="显示购买按钮">
<el-switch v-model="data.showBuyBtn"></el-switch>
</el-form-item>
<el-form-item v-if="data.showBuyBtn" label="购买按钮样式">
<el-radio v-model="data.buyBtnStyle" :label="1">填充</el-radio>
<el-radio v-model="data.buyBtnStyle" :label="2">线条</el-radio>
<el-radio v-model="data.buyBtnStyle" :label="3">圆角填充</el-radio>
<el-radio v-model="data.buyBtnStyle" :label="4">圆角线条</el-radio>
</el-form-item>
<el-form-item v-if="data.showBuyBtn" label="购买按钮文字">
<el-input size="small" v-model="data.buyBtnText"></el-input>
</el-form-item>
</template>
<el-form-item label="显示商品角标">
<el-switch v-model="data.showGoodsTag"></el-switch>
</el-form-item>
<el-form-item label="商品角标样式" v-if="data.showGoodsTag">
<el-radio v-model="data.goodsTagPicUrl" v-for="tag in goodsTags" :label="tag.picUrl" :key="tag.name"
@change="goodsTagChange">
{{tag.name}}
</el-radio>
<el-radio v-model="data.customizeGoodsTag" :label="true" @change="customizeGoodsTagChange">自定义
</el-radio>
</el-form-item>
<el-form-item label="自定义商品角标" v-if="data.showGoodsTag&&data.customizeGoodsTag">
<div class="zk_pic_box" @click="choicImg=true" flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(data.goodsTagPicUrl) + ')'}">
<i v-if="data.goodsTagPicUrl==''" class="el-icon-picture-outline"></i>
<el-button type="danger" v-if="data.goodsTagPicUrl!=''" class="image-delete" size="mini"
icon="el-icon-close" @click.stop="data.goodsTagPicUrl=''" circle></el-button>
</div>
</el-form-item>
<el-form-item label="背景颜色">
<el-color-picker v-model="data.backgroundColor" size="small"></el-color-picker>
<el-input type="text" v-model="data.backgroundColor" size="small" style="width: 80px; margin-right: 25px;">
</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">
<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>
</template>
<script>
import draggable from "vuedraggable"
import ChooseImg from "@/components/global/ChooseImg.vue";
import choiceGood from "../../common/choiceGood.vue";
export default {
props: ["lottData", "index", "dataLeng"],
components: {
draggable,
ChooseImg,
choiceGood
},
data() {
return {
choicImg: false,
isShowGoods: false,
data: this.lottData.data,
position: 'center center',
repeat: 'no-repeat',
goodsTags: [{
name: '热销',
picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goods-tag-rx.png',
},
{
name: '新品',
picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goods-tag-xp.png',
},
{
name: '折扣',
picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goods-tag-zk.png',
},
{
name: '推荐',
picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goods-tag-tj.png',
},
],
};
},
created() {
},
methods: {
//向父组件传值 并调用排序
resetSord(IsUp) {
this.$emit('getSord', this.index, IsUp);
},
//点击触发父组件删除
delPlugin() {
this.$emit('comDelPlugin', this.index);
},
//选择图片
SelectId(msg) {
this.data.goodsTagPicUrl = 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;
},
cGoodsPicStyle(picUrl) {
let style = `background-image: url(${this.getIconLink(picUrl)});` +
`background-size: ${(this.data.fill === 1 ? 'cover' : 'contain')};`;
return style;
},
listStyleChange(listStyle) {
if (listStyle === -1 && this.data.textStyle === 2) {
this.data.textStyle = 1;
}
},
deleteGoods(index) {
this.data.list.splice(index, 1);
},
goodsTagChange(e) {
this.data.goodsTagPicUrl = e;
this.data.customizeGoodsTag = false;
},
customizeGoodsTagChange(e) {
this.data.goodsTagPicUrl = '';
this.data.customizeGoodsTag = true;
},
//选择商品
getGoodsChoice() {
var ckedArr = this.$refs.choiceGood.getChoicedGoods();
console.log(ckedArr, 'ddd');
this.data.list = this.data.list.concat(ckedArr);
this.isShowGoods = false;
this.$refs.choiceGood.toggleSelection();
},
//取消选择商品
quxiaoGoods() {
this.isShowGoods = false;
this.$refs.choiceGood.toggleSelection();
}
},
computed: {
cListStyle() {
if (this.data.backgroundColor) {
return `background-color:${this.data.backgroundColor};background-image:url(${this.data.backgroundPicUrl});background-size:${this.data.backgroundWidth}% ${this.data.backgroundHeight}%;background-repeat:${this.repeat};background-position:${this.position}`
} else {
return `background-image:url(${this.data.backgroundPicUrl});background-size:${this.data.backgroundWidth}% ${this.data.backgroundHeight}%;background-repeat:${this.repeat};background-position:${this.position}`
}
},
cList() {
if (!this.data.list || !this.data.list.length) {
const item = {
id: 0,
name: '演示商品名称',
CoverImage: '',
price: '100.00',
originalPrice: '300.00',
};
return [item, item, ];
} else {
return this.data.list;
}
},
cListFlex() {
if (this.data.listStyle === -1) {
return 'dir:top';
} else {
return 'dir:left';
}
},
cItemStyle() {
if (this.data.listStyle === 2) {
return 'width: 50%;';
} else {
return 'width: 100%;';
}
},
cGoodsStyle() {
let style = 'border-radius:5px;';
if (this.data.goodsStyle === 2) {
style += 'border: 1px solid #e2e2e2;';
}
if (this.data.goodsStyle != 3) {
style += 'background-color:#ffffff';
}
return style;
},
cGoodsInfoStyle() {
let style = 'position:relative;';
if (this.data.listStyle !== -1) {
style += 'padding:20px;';
} else {
style += 'padding: 15px 20px 0 0;'
}
if (this.data.textStyle === 2) {
style += 'text-align: center;';
}
return style;
},
cPriceStyle() {
let style = 'margin-top: 10px;';
if (this.data.textStyle === 2) {
style += 'text-align: center;width: 100%;';
}
return style;
},
cGoodsFlex() {
if (this.data.listStyle === -1) {
return 'dir:left box:first';
} else {
return 'dir:top';
}
},
cButtonStyle() {
let style =
`background: ${this.data.buttonColor};border-color: ${this.data.buttonColor};height:48px;line-height50px;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;
},
cTimerStyle() {
if (this.data.listStyle === 2) {
return 'height:60px;line-height:60px;font-size:24px;text-align:center;';
} else {
return '';
}
},
cTimerFlex() {
if (this.data.listStyle === 2) {
return 'main:center';
} else {
return 'box:last';
}
},
cShowBuyBtn() {
return this.data.textStyle !== 2 &&
this.data.showBuyBtn
},
cShowEditBuyBtn() {
return this.data.textStyle !== 2
},
},
mounted() {
}
};
</script>
src/components/sallCenter/plugin/pintuan.vue 0 → 100644
View file @ 6d78524d
<style>
.diy-pintuan .diy-component-edit .goods-list {
line-height: normal;
flex-wrap: wrap;
display: flex;
}
.diy-pintuan .diy-component-edit .goods-item,
.diy-pintuan .diy-component-edit .goods-add {
width: 50px;
height: 50px;
border: 1px solid #e2e2e2;
background-position: center;
background-size: cover;
margin-right: 15px;
margin-bottom: 15px;
position: relative;
}
.diy-pintuan .diy-component-edit .goods-add {
cursor: pointer;
}
.diy-pintuan .diy-component-edit .goods-delete {
position: absolute;
top: -11px;
right: -11px;
width: 25px;
height: 25px;
line-height: 25px;
padding: 0 0;
visibility: hidden;
}
.diy-pintuan .diy-component-edit .goods-item:hover .goods-delete {
visibility: visible;
}
/*-------------------- 预览部分 --------------------*/
.diy-pintuan .diy-component-preview .goods-list {
flex-wrap: wrap;
padding: 10px;
}
.diy-pintuan .diy-component-preview .goods-item {
position: relative;
}
.diy-pintuan .diy-component-preview .goods-tag {
position: absolute;
top: 0;
left: 0;
width: 64px;
height: 64px;
background-position: center;
background-size: cover;
}
.diy-pintuan .diy-component-preview .goods-pic {
width: 100%;
height: 706px;
background-color: #e2e2e2;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.diy-pintuan .diy-component-preview .goods-name {
margin-bottom: 10px;
}
.diy-pintuan .diy-component-preview .goods-cover-3-2 .goods-pic {
height: 470px;
}
.diy-pintuan .diy-component-preview .goods-list-2 .goods-pic {
height: 343px;
}
.diy-pintuan .diy-component-preview .goods-list--1 .goods-pic {
width: 200px;
height: 200px;
margin-right: 20px;
}
.diy-pintuan .diy-component-preview .goods-list--1 .goods-item {
margin-bottom: 20px;
}
.diy-pintuan .diy-component-preview .goods-list--1 .goods-item:last-child {
margin-bottom: 0;
}
.diy-pintuan .diy-component-preview .goods-name-static {
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-all;
height: 80px;
margin-bottom: 0;
}
.diy-pintuan .diy-goods-pt-info {
border: 1px solid #ff4544;
border-radius: 5px;
font-size: 24px;
padding: 0 8px;
height: 35px;
line-height: 35px;
display: inline-block;
color: #ff4544;
}
</style>
<template>
<div :class="{'active':pintuanData.isCked}">
<div class="diy-component-options" v-if="pintuanData.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-pintuan">
<div class="diy-component-preview" :style="cListStyle">
<div class="goods-list" :class="'goods-list-'+data.listStyle" :flex="cListFlex">
<div v-for="(item,index) in cList" style="padding: 10px;" :style="cItemStyle" :key="index">
<div class="goods-item" :flex="cGoodsFlex" :class="'goods-cover-'+data.goodsCoverProportion"
:style="cGoodsStyle">
<div class="goods-pic" :style="cGoodsPicStyle(item.CoverImage)"></div>
<div v-if="data.showGoodsTag" class="goods-tag"
:style="'background-image: url('+getIconLink(data.goodsTagPicUrl)+');'"></div>
<div :style="cGoodsInfoStyle">
<div class="goods-name goods-name-static">
<template v-if="data.showGoodsName">
<div>{{item.name}}</div>
</template>
</div>
<div class="diy-goods-pt-info">{{item.peopleNum}}人团</div>
<div flex="box:last cross:bottom">
<div class="goods-price" :style="cPriceStyle">
<div style="color: #ff4544">
<span style="letter-spacing: -1px;">￥{{item.pintuanPrice}}</span>
</div>
</div>
<div v-if="cShowBuyBtn" style="padding: 0 10px;">
<el-button :style="cButtonStyle" type="primary" style="font-size: 24px;">{{data.buyBtnText}}
</el-button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="diy-component-edit" v-if="pintuanData.isCked">
<el-form @submit.native.prevent label-width="150px">
<el-form-item label="商品列表">
<draggable class="goods-list" flex v-model="data.list" ref="parentNode">
<div class="goods-item drag-drop" v-for="(goods,goodsIndex) in data.list" :key="goodsIndex"
:style="'background-image: url('+getIconLink(goods.CoverImage)+');'">
<el-button @click="deleteGoods(goodsIndex)" class="goods-delete" size="small" circle type="danger"
icon="el-icon-close"></el-button>
</div>
<div class="goods-add" flex="main:center cross:center" @click="isShowGoods=true">
<i class="el-icon-plus"></i>
</div>
</draggable>
</el-form-item>
<el-form-item label="购买按钮颜色">
<el-color-picker v-model="data.buttonColor"></el-color-picker>
</el-form-item>
<el-form-item label="列表样式">
<el-radio v-model="data.listStyle" :label="-1" @change="listStyleChange">列表模式</el-radio>
<el-radio v-model="data.listStyle" :label="1" @change="listStyleChange">一行一个</el-radio>
<el-radio v-model="data.listStyle" :label="2" @change="listStyleChange">一行两个</el-radio>
</el-form-item>
<el-form-item label="商品封面图宽高比例" v-if="data.listStyle==1">
<el-radio v-model="data.goodsCoverProportion" label="1-1">1:1</el-radio>
<el-radio v-model="data.goodsCoverProportion" label="3-2">3:2</el-radio>
</el-form-item>
<el-form-item label="商品封面图填充">
<el-radio v-model="data.fill" :label="1">填充</el-radio>
<el-radio v-model="data.fill" :label="0">留白</el-radio>
</el-form-item>
<el-form-item label="商品样式">
<el-radio v-model="data.goodsStyle" :label="1">白底无边框</el-radio>
<el-radio v-model="data.goodsStyle" :label="2">白底有边框</el-radio>
<el-radio v-model="data.goodsStyle" :label="3">无底无边框</el-radio>
</el-form-item>
<el-form-item label="显示商品名称">
<el-switch v-model="data.showGoodsName"></el-switch>
</el-form-item>
<el-form-item v-if="data.listStyle!==-1" label="文本样式">
<el-radio v-model="data.textStyle" :label="1">左对齐</el-radio>
<el-radio v-model="data.textStyle" :label="2">居中</el-radio>
</el-form-item>
<template v-if="cShowEditBuyBtn">
<el-form-item label="显示购买按钮">
<el-switch v-model="data.showBuyBtn"></el-switch>
</el-form-item>
<el-form-item v-if="data.showBuyBtn" label="购买按钮样式">
<el-radio v-model="data.buyBtnStyle" :label="1">填充</el-radio>
<el-radio v-model="data.buyBtnStyle" :label="2">线条</el-radio>
<el-radio v-model="data.buyBtnStyle" :label="3">圆角填充</el-radio>
<el-radio v-model="data.buyBtnStyle" :label="4">圆角线条</el-radio>
</el-form-item>
<el-form-item v-if="data.showBuyBtn" label="购买按钮文字">
<el-input size="small" v-model="data.buyBtnText"></el-input>
</el-form-item>
</template>
<el-form-item label="显示商品角标">
<el-switch v-model="data.showGoodsTag"></el-switch>
</el-form-item>
<el-form-item label="商品角标样式" v-if="data.showGoodsTag">
<el-radio v-model="data.goodsTagPicUrl" v-for="tag in goodsTags" :label="tag.picUrl" :key="tag.name"
@change="goodsTagChange">
{{tag.name}}
</el-radio>
<el-radio v-model="data.customizeGoodsTag" :label="true" @change="customizeGoodsTagChange">自定义
</el-radio>
</el-form-item>
<el-form-item label="自定义商品角标" v-if="data.showGoodsTag&&data.customizeGoodsTag">
<div class="zk_pic_box" @click="choicImg=true" flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(data.goodsTagPicUrl) + ')'}">
<i v-if="data.goodsTagPicUrl==''" class="el-icon-picture-outline"></i>
<el-button type="danger" v-if="data.goodsTagPicUrl!=''" class="image-delete" size="mini"
icon="el-icon-close" @click.stop="data.goodsTagPicUrl=''" circle></el-button>
</div>
</el-form-item>
<el-form-item label="背景颜色">
<el-color-picker v-model="data.backgroundColor" size="small"></el-color-picker>
<el-input type="text" v-model="data.backgroundColor" size="small" style="width: 80px; margin-right: 25px;">
</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">
<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>
</template>
<script>
import draggable from "vuedraggable"
import ChooseImg from "@/components/global/ChooseImg.vue";
import choiceGood from "../../common/choiceGood.vue";
export default {
props: ["pintuanData", "index", "dataLeng"],
components: {
draggable,
ChooseImg,
choiceGood
},
data() {
return {
choicImg: false,
isShowGoods:false,
data: this.pintuanData.data,
position: 'center center',
repeat: 'no-repeat',
goodsTags: [{
name: '热销',
picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goods-tag-rx.png',
},
{
name: '新品',
picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goods-tag-xp.png',
},
{
name: '折扣',
picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goods-tag-zk.png',
},
{
name: '推荐',
picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goods-tag-tj.png',
},
],
};
},
created() {
},
methods: {
//向父组件传值 并调用排序
resetSord(IsUp) {
this.$emit('getSord', this.index, IsUp);
},
//点击触发父组件删除
delPlugin() {
this.$emit('comDelPlugin', this.index);
},
//选择图片
SelectId(msg) {
this.data.goodsTagPicUrl = 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;
},
cGoodsPicStyle(picUrl) {
let style = `background-image: url(${this.getIconLink(picUrl)});` +
`background-size: ${(this.data.fill === 1 ? 'cover' : 'contain')};`;
return style;
},
listStyleChange(listStyle) {
if (listStyle === -1 && this.data.textStyle === 2) {
this.data.textStyle = 1;
}
},
deleteGoods(index) {
this.data.list.splice(index, 1);
},
goodsTagChange(e) {
this.data.goodsTagPicUrl = e;
this.data.customizeGoodsTag = false;
},
customizeGoodsTagChange(e) {
this.data.goodsTagPicUrl = '';
this.data.customizeGoodsTag = true;
},
//选择商品
getGoodsChoice(){
var ckedArr = this.$refs.choiceGood.getChoicedGoods();
console.log(ckedArr,'ddd');
this.data.list=this.data.list.concat(ckedArr);
this.isShowGoods=false;
this.$refs.choiceGood.toggleSelection();
},
//取消选择商品
quxiaoGoods(){
this.isShowGoods=false;
this.$refs.choiceGood.toggleSelection();
}
},
computed: {
cListStyle() {
if (this.data.backgroundColor) {
return `background-color:${this.data.backgroundColor};background-image:url(${this.data.backgroundPicUrl});background-size:${this.data.backgroundWidth}% ${this.data.backgroundHeight}%;background-repeat:${this.repeat};background-position:${this.position}`
} else {
return `background-image:url(${this.data.backgroundPicUrl});background-size:${this.data.backgroundWidth}% ${this.data.backgroundHeight}%;background-repeat:${this.repeat};background-position:${this.position}`
}
},
cList() {
if (!this.data.list || !this.data.list.length) {
const item = {
id: 0,
name: '演示商品名称',
CoverImage: '',
price: '300.00',
pintuanPrice: '250.00',
peopleNum: 3,
};
return [item, item, ];
} else {
return this.data.list;
}
},
cListFlex() {
if (this.data.listStyle === -1) {
return 'dir:top';
} else {
return 'dir:left';
}
},
cItemStyle() {
if (this.data.listStyle === 2) {
return 'width: 50%;';
} else {
return 'width: 100%;';
}
},
cGoodsStyle() {
let style = 'border-radius:5px;';
if (this.data.goodsStyle === 2) {
style += 'border: 1px solid #e2e2e2;';
}
if (this.data.goodsStyle != 3) {
style += 'background-color:#ffffff';
}
return style;
},
cGoodsInfoStyle() {
let style = '';
if (this.data.listStyle !== -1) {
style += 'padding:20px;';
} else {
style += 'padding:10px 20px 0 0;';
}
if (this.data.textStyle === 2) {
style += 'text-align: center;';
}
return style;
},
cPriceStyle() {
let style =
'margin-top:10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;color: #ff4544;line-height: 48px;';
if (this.data.textStyle === 2) {
style += 'text-align: center;width: 100%;';
}
return style;
},
cGoodsFlex() {
if (this.data.listStyle === -1) {
return 'dir:left box:first';
} else {
return 'dir:top';
}
},
cButtonStyle() {
let style =
`background: ${this.data.buttonColor};border-color: ${this.data.buttonColor};height:48px;line-height50px;padding:0 20px;`;
if (this.data.buyBtnStyle === 3 || this.data.buyBtnStyle === 4) {
style += `border-radius:24px;`;
}
if (this.data.buyBtnStyle === 2 || this.data.buyBtnStyle === 4) {
style += `background:#fff;color:${this.data.buttonColor}`;
}
return style;
},
cShowBuyBtn() {
return this.data.textStyle !== 2 &&
this.data.showBuyBtn
},
cShowEditBuyBtn() {
return this.data.textStyle !== 2
},
},
mounted() {
}
};
</script>
src/components/sallCenter/plugin/timer.vue 0 → 100644
View file @ 6d78524d
<style>
.chooseLink .el-input-group__append {
background-color: #fff;
}
</style>
<template>
<div :class="{'active':timerData.isCked}">
<div class="diy-component-options" v-if="timerData.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 style="font-size: 0;">
<img v-if="data.picUrl" :src="getIconLink(data.picUrl)" style="width: 100%;height: auto;">
</div>
<div style="height: 140px; padding:0 50px; color: #fff;background-size: cover;background-position: center;"
:style="'background-image: url('+bottomBg+');'" flex="cross:center">
<div>
<div>距离活动开始还有</div>
<div>xx天xx小时xx分xx秒</div>
</div>
</div>
</div>
<div class="diy-component-edit" v-if="timerData.isCked">
<el-form label-width="100px" @submit.native.prevent>
<el-form-item label="图片">
<div class="zk_pic_box" @click="choicImg=true" flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(data.picUrl) + ')'}">
<i v-if="data.picUrl==''" class="el-icon-picture-outline"></i>
<el-button type="danger" v-if="data.picUrl!=''" class="image-delete" size="mini"
icon="el-icon-close" @click.stop="data.picUrl=''" circle></el-button>
</div>
</el-form-item>
<el-form-item class="chooseLink" label="链接">
<el-input style="width: 300px" v-model="data.link.url" placeholder="点击选择链接" :disabled="true" size="small">
<el-button size="small" slot="append" @click="isShowLink=true">选择链接</el-button>
</el-input>
</el-form-item>
<el-form-item label="开始时间">
<el-date-picker v-model="data.startDateTime" size="small" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
placeholder="选择日期时间">
</el-date-picker>
</el-form-item>
<el-form-item label="结束时间">
<el-date-picker v-model="data.endDateTime" size="small" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
placeholder="选择日期时间">
</el-date-picker>
</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: ["timerData", "index", "dataLeng"],
components: {
ChooseImg,
chooseMeun
},
data() {
return {
choicImg:false,
isShowLink:false,
data: this.timerData.data,
bottomBg: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/timer-bottom-bg.png',
};
},
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.url=obj.PageUrl;
this.isShowLink = false;
},
},
computed: {},
mounted() {
}
};
</script>
src/components/sallCenter/templateEdit.vue
View file @ 6d78524d
......@@ -228,14 +228,28 @@
:index="index" :dataLeng="dataList.length"></checkIn>
<userInfo v-if="item.Id=='user-info'" :userData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
:index="index" :dataLeng="dataList.length"></userInfo>
<userOrder v-if="item.Id=='user-order'" :orderData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
:index="index" :dataLeng="dataList.length"></userOrder>
<userOrder v-if="item.Id=='user-order'" :orderData="item" @getSord="getSord"
@comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></userOrder>
<mymap v-if="item.Id=='map'" :mapData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
:index="index" :dataLeng="dataList.length"></mymap>
<mpLink v-if="item.Id=='mp-link'" :mpData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
:index="index" :dataLeng="dataList.length"></mpLink>
<coupon v-if="item.Id=='coupon'" :couponData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
:index="index" :dataLeng="dataList.length"></coupon>
<timer v-if="item.Id=='timer'" :timerData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
:index="index" :dataLeng="dataList.length"></timer>
<pintuan v-if="item.Id=='pintuan'" :pintuanData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
:index="index" :dataLeng="dataList.length"></pintuan>
<booking v-if="item.Id=='booking'" :bookData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
:index="index" :dataLeng="dataList.length"></booking>
<bargain v-if="item.Id=='bargain'" :barData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
:index="index" :dataLeng="dataList.length"></bargain>
<integralMall v-if="item.Id=='integral-mall'" :mallData="item" @getSord="getSord"
@comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></integralMall>
<lottery v-if="item.Id=='lottery'" :lottData="item" @getSord="getSord"
@comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></lottery>
<advance v-if="item.Id=='advance'" :advanceData="item" @getSord="getSord"
@comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></advance>
</div>
</div>
</div>
......@@ -263,6 +277,14 @@
import userInfo from "../sallCenter/plugin/user-info.vue"
import userOrder from "../sallCenter/plugin/user-order.vue"
import mpLink from "../sallCenter/plugin/mp-link.vue"
import coupon from "../sallCenter/plugin/coupon.vue"
import timer from "../sallCenter/plugin/timer.vue"
import pintuan from "../sallCenter/plugin/pintuan.vue"
import booking from "../sallCenter/plugin/booking.vue"
import bargain from "../sallCenter/plugin/bargain.vue"
import integralMall from "../sallCenter/plugin/integral-mall.vue"
import lottery from "../sallCenter/plugin/lottery.vue"
import advance from "../sallCenter/plugin/advance.vue"
export default {
data() {
return {
......@@ -290,7 +312,15 @@
userInfo,
userOrder,
mymap,
mpLink
mpLink,
coupon,
timer,
pintuan,
booking,
bargain,
integralMall,
lottery,
advance,
},
methods: {
//获取左侧菜单
......@@ -543,31 +573,31 @@
navs: [{
url: '',
openType: 'navigate',
picUrl:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/user-order-dfk.png',
picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/user-order-dfk.png',
text: '待付款',
},
{
url: '',
openType: 'navigate',
picUrl:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/user-order-dfh.png',
picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/user-order-dfh.png',
text: '待发货',
},
{
url: '',
openType: 'navigate',
picUrl:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/user-order-dsh.png',
picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/user-order-dsh.png',
text: '待收货',
},
{
url: '',
openType: 'navigate',
picUrl:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/user-order-ywc.png',
picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/user-order-ywc.png',
text: '待评价',
},
{
url: '',
openType: 'navigate',
picUrl:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/user-order-sh.png',
picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/user-order-sh.png',
text: '售后',
},
],
......@@ -595,7 +625,7 @@
}
this.dataList.push(mapObj);
break;
//微信公众号
//微信公众号
case 'mp-link':
let gzhObj = {
Id: 'mp-link',
......@@ -606,8 +636,8 @@
}
this.dataList.push(gzhObj);
break;
//自定义表单-未做
//图文详情
//自定义表单-未做
//图文详情
case 'image-text':
let tuwenObj = {
Id: 'image-text',
......@@ -618,7 +648,235 @@
}
this.dataList.push(tuwenObj);
break;
//优惠券
case 'coupon':
let couponObj = {
Id: 'coupon',
isCked: false,
data: {
textColor: '#ffffff', //字体颜色
receiveBg: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/icon-coupon-no.png', //不可领取
unclaimedBg: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/icon-coupon-index.png', //可领取
showImg: false,
backgroundColor: '#fff', //背景颜色
backgroundPicUrl: '',
position: 5,
mode: 1,
backgroundHeight: 100,
backgroundWidth: 100,
}
}
this.dataList.push(couponObj);
break;
//倒计时
case 'timer':
let timerObj = {
Id: 'timer',
isCked: false,
data: {
picUrl: '', //图片
link: { //链接
url: '',
openType: '',
},
startDateTime: '', //开始时间
endDateTime: '', //结束时间
}
}
this.dataList.push(timerObj);
break;
//拼团
case 'pintuan':
let pintuanObj = {
Id: 'pintuan',
isCked: false,
data: {
buttonColor: '#ff4544',
list: [],
listStyle: 1,
textStyle: 1,
fill: 1,
goodsCoverProportion: '1-1',
goodsStyle: 1,
showGoodsName: true,
showBuyBtn: true,
buyBtnStyle: 1,
buyBtnText: '去拼团',
showGoodsTag: false,
customizeGoodsTag: false,
goodsTagPicUrl: '',
showImg: false,
backgroundColor: '#fff',
backgroundPicUrl: '',
position: 5,
mode: 1,
backgroundHeight: 100,
backgroundWidth: 100,
}
}
this.dataList.push(pintuanObj);
break;
//预约
case 'booking':
let bookObj = {
Id: 'booking',
isCked: false,
data: {
buttonColor: '#ff4544',
list: [],
listStyle: 1,
fill: 1,
goodsCoverProportion: '1-1',
goodsStyle: 1,
textStyle: 1,
showGoodsName: true,
showBuyBtn: true,
buyBtnStyle: 1,
buyBtnText: '预约',
showGoodsTag: false,
customizeGoodsTag: false,
goodsTagPicUrl: '',
showImg: false,
backgroundColor: '#fff',
backgroundPicUrl: '',
position: 5,
mode: 1,
backgroundHeight: 100,
backgroundWidth: 100,
}
}
this.dataList.push(bookObj);
break;
//砍价
case 'bargain':
let barObj = {
Id: 'bargain',
isCked: false,
data: {
buttonColor: '#ff4544',
list: [],
listStyle: 1,
fill: 1,
goodsCoverProportion: '1-1',
goodsStyle: 1,
textStyle: 1,
showGoodsName: true,
showBuyBtn: true,
buyBtnStyle: 1,
buyBtnText: '去参与',
showGoodsTag: false,
customizeGoodsTag: false,
goodsTagPicUrl: '',
showImg: false,
backgroundColor: '#fff',
backgroundPicUrl: '',
position: 5,
mode: 1,
backgroundHeight: 100,
backgroundWidth: 100,
}
}
this.dataList.push(barObj);
break;
//积分商城
case 'integral-mall':
let mallObj = {
Id: 'integral-mall',
isCked: false,
data: {
showCoupon: true,
showGoods: true,
couponColor: '#ffffff',
couponPicUrl: 'http://wx.weibaoge.cn/plugins/diy/assets/images/coupon-background.png',
buttonColor: '#ff4544',
list: [],
listStyle: 1,
fill: 1,
goodsCoverProportion: '1-1',
goodsStyle: 1,
textStyle: 1,
showGoodsName: true,
showBuyBtn: true,
buyBtnStyle: 1,
buyBtnText: '立即兑换',
showGoodsTag: false,
customizeGoodsTag: false,
goodsTagPicUrl: '',
showImg: false,
backgroundColor: '#fff',
backgroundPicUrl: '',
position: 5,
mode: 1,
backgroundHeight: 100,
backgroundWidth: 100,
}
}
this.dataList.push(mallObj);
break;
//抽奖
case 'lottery':
let lottObj = {
Id: 'lottery',
isCked: false,
data: {
buttonColor: '#ff4544',
list: [],
listStyle: 1,
fill: 1,
goodsCoverProportion: '1-1',
goodsStyle: 1,
textStyle: 1,
showGoodsName: true,
showBuyBtn: true,
buyBtnStyle: 1,
buyBtnText: '去参与',
showGoodsTag: false,
customizeGoodsTag: false,
goodsTagPicUrl: '',
showImg: false,
backgroundColor: '#fff',
backgroundPicUrl: '',
position: 5,
mode: 1,
backgroundHeight: 100,
backgroundWidth: 100,
}
}
this.dataList.push(lottObj);
break;
//预售
case 'advance':
let advanceObj = {
Id: 'advance',
isCked: false,
data: {
buttonColor: '#ff4544',
list: [],
listStyle: 1,
fill: 1,
goodsCoverProportion: '1-1',
goodsStyle: 1,
textStyle: 1,
showGoodsName: true,
showBuyBtn: true,
buyBtnStyle: 1,
buyBtnText: '抢购',
showGoodsTag: false,
customizeGoodsTag: false,
goodsTagPicUrl: '',
goodsIndex: 0,
start_x: 0,
showImg: false,
backgroundColor: '#fff',
backgroundPicUrl: '',
position: 5,
mode: 1,
backgroundHeight: 100,
backgroundWidth: 100,
}
}
this.dataList.push(advanceObj);
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