Skip to content

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

增加组件

parent 6b2f0e23
Expand all Show whitespace changes
Inline Side-by-side
Showing with 3563 additions and 14 deletions
src/components/sallCenter/plugin/advance.vue 0 → 100644
View file @ 6d78524d
This diff is collapsed.
src/components/sallCenter/plugin/bargain.vue 0 → 100644
View file @ 6d78524d
This diff is collapsed.
src/components/sallCenter/plugin/booking.vue 0 → 100644
View file @ 6d78524d
This diff is collapsed.
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
This diff is collapsed.
src/components/sallCenter/plugin/lottery.vue 0 → 100644
View file @ 6d78524d
This diff is collapsed.
src/components/sallCenter/plugin/pintuan.vue 0 → 100644
View file @ 6d78524d
This diff is collapsed.
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
This diff is collapsed.
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