Skip to content

E
ElectricitySheep
Commit 366bfb2d authored by zhengke's avatar zhengke
Browse files
Options

增加组件

parent 06e8e11f
Show whitespace changes
Inline Side-by-side
Showing with 2758 additions and 6 deletions
src/components/sallCenter/plugin/advert.vue 0 → 100644
View file @ 366bfb2d
<style>
.diy-live .room-box {
display: flex;
flex-direction: column;
}
.diy-live .room-box .label {
color: #999999;
}
/*样式一*/
.diy-live .style-box-1 {
background: #ffffff;
border-radius: 16px;
padding: 20px;
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
}
.diy-live .style-box-1 .item {
height: 360px;
background: #999999;
border-radius: 16px;
position: relative;
overflow: hidden;
}
.diy-live .style-box-1 .label-box {
border-top-left-radius: 16px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
}
.diy-live .style-box-1 .text-time {
color: #ffffff;
font-size: 24px;
margin: 0 20px;
}
.diy-live .style-box-1 .label-box-item {
background: #22ac38;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
display: flex;
align-items: center;
padding: 12px 20px;
}
.diy-live .style-box-1 .icon {
width: 10px;
height: 10px;
background: #ffffff;
border-radius: 50%;
}
.diy-live .style-box-1 .text {
color: #ffffff;
font-size: 24px;
margin-left: 12px;
}
.diy-live .style-box-1 .user-info-box {
position: absolute;
bottom: 0;
left: 0;
display: flex;
align-items: center;
margin: 20px;
}
.diy-live .style-box-1 .avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: #ffffff;
}
.diy-live .style-box-1 .nickname {
width: 578px;
margin-left: 12px;
font-size: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #ffffff;
}
.diy-live .style-box-1 .title {
width: 645px;
font-size: 32px;
color: #353535;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 28px 0 20px;
}
.diy-live .style-box-1 .goods-box {
display: flex;
align-items: center;
padding: 10px;
background: #f7f7f7;
border-radius: 16px;
}
.diy-live .style-box-1 .goods-cover {
border-radius: 8px;
width: 80px;
height: 80px;
background: #999999;
}
.diy-live .style-box-1 .goods-item {
display: flex;
flex-direction: column;
margin-left: 16px;
}
.diy-live .style-box-1 .goods-name {
width: 540px;
font-size: 26px;
color: #666666;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.diy-live .style-box-1 .goods-price {
margin-top: 16px;
}
/*样式二*/
.diy-live .style-box-2 {
width: 100%;
display: flex;
justify-content: space-between;
}
.diy-live .style-box-2 .item {
background: #ffffff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
}
.diy-live .style-box-2 .live-img-box {
border-radius: 16px;
overflow: hidden;
position: relative;
}
.diy-live .style-box-2 .live-img {
width: 346px;
height: 346px;
background: #999999;
}
.diy-live .style-box-2 .label-box-item {
width: 100%;
border-top-right-radius: 24px;
border-bottom-right-radius: 24px;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
}
.diy-live .style-box-2 .label-box {
padding: 12px 20px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
background: #777777;
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
}
.diy-live .style-box-2 .icon {
width: 10px;
height: 10px;
background: #ffffff;
border-radius: 50%;
}
.diy-live .style-box-2 .text {
color: #ffffff;
font-size: 24px;
margin-left: 12px;
}
.diy-live .style-box-2 .user-info {
position: absolute;
bottom: 0;
left: 0;
margin: 20px;
display: flex;
justify-content: center;
}
.diy-live .style-box-2 .avatar {
width: 40px;
height: 40px;
background: #ffffff;
border-radius: 50%;
}
.diy-live .style-box-2 .nickname {
margin-left: 12px;
font-size: 24px;
width: 194px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #ffffff;
}
.diy-live .style-box-2 .title {
font-size: 28px;
color: #353535;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 28px;
width: 290px;
}
.diy-live .style-box-2 .goods-box {
display: flex;
margin: 0 28px 28px;
align-items: center;
}
.diy-live .style-box-2 .goods-cover {
width: 80px;
height: 80px;
border-radius: 16px;
background: #999999;
}
.diy-live .style-box-2 .goods-item {
display: flex;
flex-direction: column;
margin-left: 16px;
}
.diy-live .style-box-2 .goods-name {
font-size: 26px;
color: #666666;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 194px;
}
.diy-live .style-box-2 .goods-price {
font-size: 26px;
color: #353535;
margin-top: 16px;
}
/*样式三*/
.diy-live .style-box-3 {
display: flex;
flex-direction: row;
border-radius: 16px;
overflow: hidden;
background: #ffffff;
}
.diy-live .style-box-3 .live-item {
position: relative;
}
.diy-live .style-box-3 .live-img {
width: 360px;
height: 360px;
background: #999999;
border-radius: 16px;
}
.diy-live .style-box-3 .label-box {
position: absolute;
top: 0;
left: 0;
border-top-right-radius: 24px;
border-bottom-right-radius: 24px;
display: flex;
align-items: center;
}
.diy-live .style-box-3 .label-box-item {
display: flex;
align-items: center;
padding: 12px 20px;
border-top-right-radius: 24px;
border-bottom-right-radius: 24px;
background: #22ac38;
}
.diy-live .style-box-3 .icon {
width: 10px;
height: 10px;
border-radius: 50%;
background: #ffffff;
}
.diy-live .style-box-3 .text {
color: #ffffff;
margin-left: 12px;
}
.diy-live .style-box-3 .text-time {
color: #ffffff;
margin-left: 12px;
}
.diy-live .style-box-3 .item {
display: flex;
flex-direction: column;
padding: 0 20px;
}
.diy-live .style-box-3 .title {
width: 310px;
height: 100px;
font-size: 36px;
color: #353535;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.diy-live .style-box-3 .user-info-box {
display: flex;
margin: 20px 0;
align-items: center;
}
.diy-live .style-box-3 .avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: #f7f7f7;
}
.diy-live .style-box-3 .nickname {
color: #000;
: #f7f7f7;
margin-left: 12px;
width: 258px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.diy-live .style-box-3 .goods-box {
display: flex;
justify-content: space-between;
}
.diy-live .style-box-3 .goods-box {
display: flex;
justify-content: space-between;
}
.diy-live .style-box-3 .goods-cover {
width: 148px;
height: 148px;
border-radius: 16px;
background: #999999;
padding: 10px;
display: flex;
align-items: flex-end;
}
.diy-live .style-box-3 .goods-price {
font-size: 24px;
color: #ffffff;
}
.diy-live .style-box-3 .goods-cover-2 {
flex-direction: column;
align-items: center;
justify-content: center;
color: #ffffff;
}
</style>
<template>
<div :class="{'active':advData.isCked}">
<div class="diy-component-options" v-if="advData.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-live">
<div class="diy-component-preview" v-loading="!data">
<div style="padding: 50px 0;text-align: center;background: #fff;">这是一个流量主广告位</div>
</div>
<div class="diy-component-edit" v-if="advData.isCked">
<el-form label-width="100px" @submit.native.prevent>
<el-form-item>
<el-alert style="line-height: normal;" :closable="false" type="warning" title="流量主广告需要申请开通流量主功能。">
</el-alert>
</el-form-item>
<el-form-item label="广告位类型" prop="type">
<el-radio-group v-model="data.type" style="line-height: 35px">
<el-radio label="">Banner</el-radio>
<el-radio label="rewarded-video">激励式视频</el-radio>
<el-radio label="interstitial">插屏</el-radio>
<el-radio label="video">视频广告</el-radio>
<el-radio label="before-video">前贴视频</el-radio>
<el-radio label="grid" v-if="false">格子广告</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="广告位ID" prop="id">
<el-input size="small" v-model="data.id"></el-input>
</el-form-item>
<el-form-item v-if="data.type === 'before-video'" label="视频播放链接" prop="video_url">
<el-input v-model="data.video_url" placeholder="请输入视频原地址或选择上传视频">
<template slot="append">
<!-- <app-attachment :multiple="false" :max="1" v-model="data.video_url" type="video"> -->
<el-tooltip class="item" effect="dark" content="支持格式mp4;支持编码H.264;视频大小不能超过50 MB" placement="top">
<el-button size="mini" @click="choicImg=true">添加视频</el-button>
</el-tooltip>
<!-- </app-attachment> -->
</template>
</el-input>
<el-link class="box-grow-0" type="primary" style="font-size:12px" v-if='data.video_url' :underline="false"
target="_blank" :href="data.video_url">视频链接
</el-link>
</el-form-item>
<el-form-item v-if="['interstitial', 'rewarded-video', 'before-video'].includes(data.type)" prop="pic_url"
label="广告封面">
<el-tooltip class="item" effect="dark" content="建议尺寸:750 * 287" placement="top">
<el-button size="mini" @click="choicImg=true">选择图片</el-button>
</el-tooltip>
<div class="customize-share-title">
<div class="zk_pic_box" flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(data.pic_url) + ')'}">
<i v-if="data.pic_url==''" class="el-icon-picture-outline"></i>
</div>
</div>
</el-form-item>
<el-form-item label="广告奖励" prop="award_type" v-if="data.type == 'rewarded-video'">
<el-radio-group v-model="data.award_type">
<el-radio label="0">无</el-radio>
<el-radio label="1">积分</el-radio>
<el-radio label="2">优惠券</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="积分数量" prop="num" v-if="data.award_type == 1 && data.type == 'rewarded-video'">
<el-input style="max-width: 180px" v-model="data.award_num" size="small" type="number" autocomplete="off">
</el-input>
</el-form-item>
<el-form-item label="优惠券" prop="award_coupons" v-if="data.award_type == 2 && data.type == 'rewarded-video'">
<el-tag style="margin:5px" v-for="(tag,i) in data.award_coupons" :key="i" closable
@close="couponClose(data,i)">
{{tag.send_num}}张 | {{tag.name}}
</el-tag>
<!-- <app-select-coupon v-model="data.award_coupons"> -->
<el-button class="button-new-tag" size="small">新增优惠券</el-button>
<!-- </app-select-coupon> -->
</el-form-item>
<el-form-item label="奖励发放限制" prop="award_limit_type" v-if="data.type == 'rewarded-video'">
<el-radio-group v-model="data.award_limit_type">
<el-radio label="0">无限制</el-radio>
<el-radio label="1">每人{{data.award_limit}}次</el-radio>
<el-radio label="2">每天{{data.award_limit}}次</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="限制次数" prop="award_limit"
v-if="data.type == 'rewarded-video' && data.award_limit_type !=0">
<el-input style="max-width: 180px" v-model="data.award_limit" size="small" type="number" min="0"
oninput="this.value = this.value.replace(/[^0-9]/g, '')" autocomplete="off"></el-input>
</el-form-item>
</el-form>
</div>
</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: ["advData", "index", "dataLeng"],
components: {
ChooseImg
},
data() {
return {
loading: false,
choicImg:false,
data: this.advData.data,
};
},
created() {
},
methods: {
//向父组件传值 并调用排序
resetSord(IsUp) {
this.$emit('getSord', this.index, IsUp);
},
//点击触发父组件删除
delPlugin() {
this.$emit('comDelPlugin', this.index);
},
couponClose(row, index) {
row.award_coupons.splice(index, 1);
},
//判断是否包含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;
},
//选择图片
SelectId(msg) {
this.data.pic_url = msg.url;
this.choicImg = false;
},
},
computed: {
},
mounted() {
}
};
</script>
src/components/sallCenter/plugin/empty.vue 0 → 100644
View file @ 366bfb2d
<style>
.diy-live .room-box {
display: flex;
flex-direction: column;
}
.diy-live .room-box .label {
color: #999999;
}
/*样式一*/
.diy-live .style-box-1 {
background: #ffffff;
border-radius: 16px;
padding: 20px;
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
}
.diy-live .style-box-1 .item {
height: 360px;
background: #999999;
border-radius: 16px;
position: relative;
overflow: hidden;
}
.diy-live .style-box-1 .label-box {
border-top-left-radius: 16px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
}
.diy-live .style-box-1 .text-time {
color: #ffffff;
font-size: 24px;
margin: 0 20px;
}
.diy-live .style-box-1 .label-box-item {
background: #22ac38;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
display: flex;
align-items: center;
padding: 12px 20px;
}
.diy-live .style-box-1 .icon {
width: 10px;
height: 10px;
background: #ffffff;
border-radius: 50%;
}
.diy-live .style-box-1 .text {
color: #ffffff;
font-size: 24px;
margin-left: 12px;
}
.diy-live .style-box-1 .user-info-box {
position: absolute;
bottom: 0;
left: 0;
display: flex;
align-items: center;
margin: 20px;
}
.diy-live .style-box-1 .avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: #ffffff;
}
.diy-live .style-box-1 .nickname {
width: 578px;
margin-left: 12px;
font-size: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #ffffff;
}
.diy-live .style-box-1 .title {
width: 645px;
font-size: 32px;
color: #353535;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 28px 0 20px;
}
.diy-live .style-box-1 .goods-box {
display: flex;
align-items: center;
padding: 10px;
background: #f7f7f7;
border-radius: 16px;
}
.diy-live .style-box-1 .goods-cover {
border-radius: 8px;
width: 80px;
height: 80px;
background: #999999;
}
.diy-live .style-box-1 .goods-item {
display: flex;
flex-direction: column;
margin-left: 16px;
}
.diy-live .style-box-1 .goods-name {
width: 540px;
font-size: 26px;
color: #666666;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.diy-live .style-box-1 .goods-price {
margin-top: 16px;
}
/*样式二*/
.diy-live .style-box-2 {
width: 100%;
display: flex;
justify-content: space-between;
}
.diy-live .style-box-2 .item {
background: #ffffff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
}
.diy-live .style-box-2 .live-img-box {
border-radius: 16px;
overflow: hidden;
position: relative;
}
.diy-live .style-box-2 .live-img {
width: 346px;
height: 346px;
background: #999999;
}
.diy-live .style-box-2 .label-box-item {
width: 100%;
border-top-right-radius: 24px;
border-bottom-right-radius: 24px;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
}
.diy-live .style-box-2 .label-box {
padding: 12px 20px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
background: #777777;
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
}
.diy-live .style-box-2 .icon {
width: 10px;
height: 10px;
background: #ffffff;
border-radius: 50%;
}
.diy-live .style-box-2 .text {
color: #ffffff;
font-size: 24px;
margin-left: 12px;
}
.diy-live .style-box-2 .user-info {
position: absolute;
bottom: 0;
left: 0;
margin: 20px;
display: flex;
justify-content: center;
}
.diy-live .style-box-2 .avatar {
width: 40px;
height: 40px;
background: #ffffff;
border-radius: 50%;
}
.diy-live .style-box-2 .nickname {
margin-left: 12px;
font-size: 24px;
width: 194px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #ffffff;
}
.diy-live .style-box-2 .title {
font-size: 28px;
color: #353535;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 28px;
width: 290px;
}
.diy-live .style-box-2 .goods-box {
display: flex;
margin: 0 28px 28px;
align-items: center;
}
.diy-live .style-box-2 .goods-cover {
width: 80px;
height: 80px;
border-radius: 16px;
background: #999999;
}
.diy-live .style-box-2 .goods-item {
display: flex;
flex-direction: column;
margin-left: 16px;
}
.diy-live .style-box-2 .goods-name {
font-size: 26px;
color: #666666;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 194px;
}
.diy-live .style-box-2 .goods-price {
font-size: 26px;
color: #353535;
margin-top: 16px;
}
/*样式三*/
.diy-live .style-box-3 {
display: flex;
flex-direction: row;
border-radius: 16px;
overflow: hidden;
background: #ffffff;
}
.diy-live .style-box-3 .live-item {
position: relative;
}
.diy-live .style-box-3 .live-img {
width: 360px;
height: 360px;
background: #999999;
border-radius: 16px;
}
.diy-live .style-box-3 .label-box {
position: absolute;
top: 0;
left: 0;
border-top-right-radius: 24px;
border-bottom-right-radius: 24px;
display: flex;
align-items: center;
}
.diy-live .style-box-3 .label-box-item {
display: flex;
align-items: center;
padding: 12px 20px;
border-top-right-radius: 24px;
border-bottom-right-radius: 24px;
background: #22ac38;
}
.diy-live .style-box-3 .icon {
width: 10px;
height: 10px;
border-radius: 50%;
background: #ffffff;
}
.diy-live .style-box-3 .text {
color: #ffffff;
margin-left: 12px;
}
.diy-live .style-box-3 .text-time {
color: #ffffff;
margin-left: 12px;
}
.diy-live .style-box-3 .item {
display: flex;
flex-direction: column;
padding: 0 20px;
}
.diy-live .style-box-3 .title {
width: 310px;
height: 100px;
font-size: 36px;
color: #353535;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.diy-live .style-box-3 .user-info-box {
display: flex;
margin: 20px 0;
align-items: center;
}
.diy-live .style-box-3 .avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: #f7f7f7;
}
.diy-live .style-box-3 .nickname {
color: #000;
: #f7f7f7;
margin-left: 12px;
width: 258px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.diy-live .style-box-3 .goods-box {
display: flex;
justify-content: space-between;
}
.diy-live .style-box-3 .goods-box {
display: flex;
justify-content: space-between;
}
.diy-live .style-box-3 .goods-cover {
width: 148px;
height: 148px;
border-radius: 16px;
background: #999999;
padding: 10px;
display: flex;
align-items: flex-end;
}
.diy-live .style-box-3 .goods-price {
font-size: 24px;
color: #ffffff;
}
.diy-live .style-box-3 .goods-cover-2 {
flex-direction: column;
align-items: center;
justify-content: center;
color: #ffffff;
}
</style>
<template>
<div :class="{'active':emptyData.isCked}">
<div class="diy-component-options" v-if="emptyData.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-live">
<div class="diy-component-preview" v-loading="!data">
<div style="padding: 20px 0">
<div class="diy-empty" :style="cStyle"></div>
</div>
</div>
<div class="diy-component-edit" v-if="emptyData.isCked">
<el-form label-width="100px" @submit.native.prevent>
<el-form-item label="背景颜色">
<el-color-picker size="small" v-model="data.background"></el-color-picker>
<el-input size="small" style="width: 80px;margin-right: 25px;" v-model="data.background"></el-input>
</el-form-item>
<el-form-item label="高度">
<el-input size="small" v-model.number="data.height" type="number" min="1">
<div slot="append">px</div>
</el-input>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
export default {
props: ["emptyData", "index", "dataLeng"],
components: {},
data() {
return {
loading: false,
data: this.emptyData.data,
};
},
created() {
},
methods: {
//向父组件传值 并调用排序
resetSord(IsUp) {
this.$emit('getSord', this.index, IsUp);
},
//点击触发父组件删除
delPlugin() {
this.$emit('comDelPlugin', this.index);
},
showGoodsChange(e) {
console.log(e)
}
},
computed: {
cStyle() {
if (this.data.background) {
return `background: ${this.data.background};` +
`height: ${this.data.height}px;`;
} else {
return `height: ${this.data.height}px;`;
}
},
},
mounted() {
}
};
</script>
src/components/sallCenter/plugin/live.vue 0 → 100644
View file @ 366bfb2d
<style>
.diy-live .room-box {
display: flex;
flex-direction: column;
}
.diy-live .room-box .label {
color: #999999;
}
/*样式一*/
.diy-live .style-box-1 {
background: #ffffff;
border-radius: 16px;
padding: 20px;
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
}
.diy-live .style-box-1 .item {
height: 360px;
background: #999999;
border-radius: 16px;
position: relative;
overflow: hidden;
}
.diy-live .style-box-1 .label-box {
border-top-left-radius: 16px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
}
.diy-live .style-box-1 .text-time {
color: #ffffff;
font-size: 24px;
margin: 0 20px;
}
.diy-live .style-box-1 .label-box-item {
background: #22ac38;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
display: flex;
align-items: center;
padding: 12px 20px;
}
.diy-live .style-box-1 .icon {
width: 10px;
height: 10px;
background: #ffffff;
border-radius: 50%;
}
.diy-live .style-box-1 .text {
color: #ffffff;
font-size: 24px;
margin-left: 12px;
}
.diy-live .style-box-1 .user-info-box {
position: absolute;
bottom: 0;
left: 0;
display: flex;
align-items: center;
margin: 20px;
}
.diy-live .style-box-1 .avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: #ffffff;
}
.diy-live .style-box-1 .nickname {
width: 578px;
margin-left: 12px;
font-size: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #ffffff;
}
.diy-live .style-box-1 .title {
width: 645px;
font-size: 32px;
color: #353535;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 28px 0 20px;
}
.diy-live .style-box-1 .goods-box {
display: flex;
align-items: center;
padding: 10px;
background: #f7f7f7;
border-radius: 16px;
}
.diy-live .style-box-1 .goods-cover {
border-radius: 8px;
width: 80px;
height: 80px;
background: #999999;
}
.diy-live .style-box-1 .goods-item {
display: flex;
flex-direction: column;
margin-left: 16px;
}
.diy-live .style-box-1 .goods-name {
width: 540px;
font-size: 26px;
color: #666666;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.diy-live .style-box-1 .goods-price {
margin-top: 16px;
}
/*样式二*/
.diy-live .style-box-2 {
width: 100%;
display: flex;
justify-content: space-between;
}
.diy-live .style-box-2 .item {
background: #ffffff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
}
.diy-live .style-box-2 .live-img-box {
border-radius: 16px;
overflow: hidden;
position: relative;
}
.diy-live .style-box-2 .live-img {
width: 346px;
height: 346px;
background: #999999;
}
.diy-live .style-box-2 .label-box-item {
width: 100%;
border-top-right-radius: 24px;
border-bottom-right-radius: 24px;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
}
.diy-live .style-box-2 .label-box {
padding: 12px 20px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
background: #777777;
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
}
.diy-live .style-box-2 .icon {
width: 10px;
height: 10px;
background: #ffffff;
border-radius: 50%;
}
.diy-live .style-box-2 .text {
color: #ffffff;
font-size: 24px;
margin-left: 12px;
}
.diy-live .style-box-2 .user-info {
position: absolute;
bottom: 0;
left: 0;
margin: 20px;
display: flex;
justify-content: center;
}
.diy-live .style-box-2 .avatar {
width: 40px;
height: 40px;
background: #ffffff;
border-radius: 50%;
}
.diy-live .style-box-2 .nickname {
margin-left: 12px;
font-size: 24px;
width: 194px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #ffffff;
}
.diy-live .style-box-2 .title {
font-size: 28px;
color: #353535;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 28px;
width: 290px;
}
.diy-live .style-box-2 .goods-box {
display: flex;
margin: 0 28px 28px;
align-items: center;
}
.diy-live .style-box-2 .goods-cover {
width: 80px;
height: 80px;
border-radius: 16px;
background: #999999;
}
.diy-live .style-box-2 .goods-item {
display: flex;
flex-direction: column;
margin-left: 16px;
}
.diy-live .style-box-2 .goods-name {
font-size: 26px;
color: #666666;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 194px;
}
.diy-live .style-box-2 .goods-price {
font-size: 26px;
color: #353535;
margin-top: 16px;
}
/*样式三*/
.diy-live .style-box-3 {
display: flex;
flex-direction: row;
border-radius: 16px;
overflow: hidden;
background: #ffffff;
}
.diy-live .style-box-3 .live-item {
position: relative;
}
.diy-live .style-box-3 .live-img {
width: 360px;
height: 360px;
background: #999999;
border-radius: 16px;
}
.diy-live .style-box-3 .label-box {
position: absolute;
top: 0;
left: 0;
border-top-right-radius: 24px;
border-bottom-right-radius: 24px;
display: flex;
align-items: center;
}
.diy-live .style-box-3 .label-box-item {
display: flex;
align-items: center;
padding: 12px 20px;
border-top-right-radius: 24px;
border-bottom-right-radius: 24px;
background: #22ac38;
}
.diy-live .style-box-3 .icon {
width: 10px;
height: 10px;
border-radius: 50%;
background: #ffffff;
}
.diy-live .style-box-3 .text {
color: #ffffff;
margin-left: 12px;
}
.diy-live .style-box-3 .text-time {
color: #ffffff;
margin-left: 12px;
}
.diy-live .style-box-3 .item {
display: flex;
flex-direction: column;
padding: 0 20px;
}
.diy-live .style-box-3 .title {
width: 310px;
height: 100px;
font-size: 36px;
color: #353535;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.diy-live .style-box-3 .user-info-box {
display: flex;
margin: 20px 0;
align-items: center;
}
.diy-live .style-box-3 .avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: #f7f7f7;
}
.diy-live .style-box-3 .nickname {
color: #000;
: #f7f7f7;
margin-left: 12px;
width: 258px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.diy-live .style-box-3 .goods-box {
display: flex;
justify-content: space-between;
}
.diy-live .style-box-3 .goods-box {
display: flex;
justify-content: space-between;
}
.diy-live .style-box-3 .goods-cover {
width: 148px;
height: 148px;
border-radius: 16px;
background: #999999;
padding: 10px;
display: flex;
align-items: flex-end;
}
.diy-live .style-box-3 .goods-price {
font-size: 24px;
color: #ffffff;
}
.diy-live .style-box-3 .goods-cover-2 {
flex-direction: column;
align-items: center;
justify-content: center;
color: #ffffff;
}
</style>
<template>
<div :class="{'active':liveData.isCked}">
<div class="diy-component-options" v-if="liveData.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-live">
<div class="diy-component-preview" v-loading="!data">
<div :style="{padding: '20px', background: data.background}">
<div class="style-box-1" v-for="(item, index) in liveList" v-if="data.style_type == 1 && index == 0"
:key="index">
<div class="item">
<div class="label-box">
<div class="label-box-item">
<div class="icon"></div>
<div class="text">{{item.text}}</div>
</div>
<span class="text-time">{{item.text_time}}</span>
</div>
<div class="user-info-box">
<div class="avatar"></div>
<span class="nickname">{{item.nickname}}</span>
</div>
</div>
<div class="title">{{item.title}}</div>
<div v-if="data.is_show_goods" class="goods-box">
<div class="goods-cover"></div>
<div class="goods-item">
<span class="goods-name">{{item.goods_list[0].goods_name}}</span>
<span class="goods-price">{{item.goods_list[0].goods_price}}</span>
</div>
</div>
</div>
<div class="style-box-2" v-if="data.style_type == 2">
<div class="item" v-for="(item, index) in liveList" :key="index">
<div class="live-img-box">
<div class="live-img"></div>
<div class="label-box-item">
<div class="label-box">
<div class="icon"></div>
<div class="text">已结束</div>
</div>
</div>
<div class="user-info">
<div class="avatar"></div>
<span class="nickname">{{item.nickname}}</span>
</div>
</div>
<div class="title">{{item.title}}</div>
<div v-if="data.is_show_goods" class="goods-box">
<div class="goods-cover"></div>
<div class="goods-item">
<div class="goods-name">{{item.goods_list[0].goods_name}}</div>
<div class="goods-price">{{item.goods_list[0].goods_price}}</div>
</div>
</div>
</div>
</div>
<div class="style-box-3" v-if="data.style_type == 3 && index == 0" v-for="(item, index) in liveList"
:key="index">
<div class="live-item">
<div class="live-img"></div>
<div class="label-box">
<div class="label-box-item">
<div class="icon"></div>
<div class="text">{{item.text}}</div>
</div>
<span class="text-time">{{item.text_time}}</span>
</div>
</div>
<div class="item">
<div class="title">{{item.title}}</div>
<div class="user-info-box">
<div class="avatar"></div>
<span class="nickname">{{item.nickname}}</span>
</div>
<div v-if="data.is_show_goods" class="goods-box">
<div class="goods-cover">
<span class="goods-price">{{item.goods_list[0].goods_price}}</span>
</div>
<div class="goods-cover goods-cover-2">
<div>{{item.goods_list.length}}</div>
<div>宝贝</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="diy-component-edit" v-if="liveData.isCked">
<el-form v-loading="loading" @submit.native.prevent label-width="100px">
<el-form-item label="显示商品">
<el-switch v-model="data.is_show_goods" @change="showGoodsChange"></el-switch>
</el-form-item>
<el-form-item label="卡片样式">
<el-radio v-model="data.style_type" :label="1">样式1</el-radio>
<el-radio v-model="data.style_type" :label="2">样式2</el-radio>
<el-radio v-model="data.style_type" :label="3">样式3</el-radio>
</el-form-item>
<el-form-item label="直播间数量">
<div class="room-box">
<el-input size="small" type="number" v-model.number="data.number" placeholder="请输入直播间数量"></el-input>
<span class="label">此组件最多支持20个直播间</span>
</div>
</el-form-item>
<el-form-item label="背景颜色">
<el-color-picker size="small" v-model="data.background"></el-color-picker>
<el-input size="small" style="width: 100px;" v-model="data.background"></el-input>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
export default {
props: ["liveData", "index", "dataLeng"],
components: {},
data() {
return {
loading: false,
data:this.liveData.data,
default: {
background: '#f7f7f7',
is_show_goods: true,
style_type: 1,
number: 5,
},
form: {},
background: '#FFFFFF',
top_bottom_padding: 0,
liveList: [{
title: '直播间名称',
nickname: '主播昵称',
text: '预告',
text_time: '今晚19:00开播',
goods_list: [{
goods_name: '商品名称',
goods_price: '￥469.00'
}, {
goods_name: '商品名称',
goods_price: '￥469.00'
}, ]
}, {
title: '直播间名称',
nickname: '主播昵称',
text: '预告',
text_time: '今晚19:00开播',
goods_list: [{
goods_name: '商品名称',
goods_price: '￥469.00'
}, {
goods_name: '商品名称',
goods_price: '￥469.00'
}, ]
}]
};
},
created() {
},
methods: {
//向父组件传值 并调用排序
resetSord(IsUp) {
this.$emit('getSord', this.index, IsUp);
},
//点击触发父组件删除
delPlugin() {
this.$emit('comDelPlugin', this.index);
},
showGoodsChange(e) {
console.log(e)
}
},
computed: {
},
mounted() {
}
};
</script>
src/components/sallCenter/plugin/modal.vue 0 → 100644
View file @ 366bfb2d
<style>
.diy-modal .modal-background {
width: 224px;
height: 400px;
background: rgba(0, 0, 0, 0.5);
border-radius: 5px;
margin-right: 20px;
}
.diy-modal .modal-container {
max-width: 184px;
max-height: 300px;
overflow: hidden;
}
.diy-modal .modal-container img {
max-width: 100%;
max-height: 100%;
}
.diy-modal .pic-select {
width: 72px;
height: 72px;
color: #00a0e9;
border: 1px solid #ccc;
line-height: normal;
text-align: center;
cursor: pointer;
font-size: 12px;
}
.diy-modal .pic-preview {
width: 72px;
height: 72px;
border: 1px solid #ccc;
cursor: pointer;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.diy-modal .edit-options {
position: relative;
}
.diy-modal .edit-options .el-button {
height: 25px;
line-height: 25px;
width: 25px;
padding: 0;
text-align: center;
border: none;
border-radius: 0;
position: absolute;
margin-left: 0;
}
.chooseLink .el-input-group__append {
background-color: #fff;
}
</style>
<template>
<div :class="{'active':modalData.isCked}">
<div class="diy-component-options" v-if="modalData.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-modal">
<div class="diy-component-preview" v-loading="!data">
<div @click="dialogVisible=true" style="padding: 20px 0;text-align: center;">
<div>弹窗广告设置</div>
<div style="font-size: 22px;color: #909399">本条内容不占高度</div>
</div>
</div>
<div class="diy-component-edit" v-if="modalData.isCked">
<el-dialog title="弹窗广告设置" :visible.sync="dialogVisible" :close-on-click-modal="false">
<div flex="box:first">
<div>
<div class="modal-background" flex="main:center cross:center">
<div class="modal-container" flex="main:center cross:center">
<img v-if="data.list.length" :src="getIconLink(data.list[0].picUrl)">
</div>
</div>
</div>
<div>
<el-form @submit.native.prevent>
<el-form-item label="是否开启">
<el-switch v-model="data.opened"></el-switch>
</el-form-item>
<el-form-item v-if="data.opened" label="广告图片">
<span style="color: #909399;">图片最大高度700px，最大宽度650px。</span>
<br>
<div
style="border: 1px solid #e2e2e2;padding: 5px;margin-bottom: 5px;line-height: normal;max-width: 400px"
v-for="(item,index) in data.list" :key="index">
<div class="edit-options">
<el-button @click="deleteAd(index)" icon="el-icon-delete" type="primary"
style="right: -31px;top: -6px;"></el-button>
</div>
<div flex="box:first">
<div style="margin-right: 10px">
<div class="zk_pic_box" @click="choicImg=true,comImgIndex=index" flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(item.picUrl) + ')'}">
<i v-if="item.picUrl==''" class="el-icon-picture-outline"></i>
<el-button type="danger" v-if="item.picUrl!=''" class="image-delete" size="mini"
icon="el-icon-close" @click.stop="item.picUrl=''" circle></el-button>
</div>
</div>
<div class="chooseLink">
<div style="margin: 5px 0;">广告链接</div>
<el-input v-model="item.link.url" placeholder="点击选择链接" :disabled="true" size="small">
<el-button slot="append" size="small" @click="isShowLink=true,comImgIndex=index">选择链接
</el-button>
</el-input>
</div>
</div>
</div>
<el-button size="small" @click="addAd" v-if="data.list.length<3">添加广告</el-button>
</el-form-item>
<el-form-item v-if="data.opened" label="弹窗次数">
<el-radio v-model="data.times" :label="0">每次</el-radio>
<el-radio v-model="data.times" :label="1">仅首次</el-radio>
</el-form-item>
<el-button style="padding: 9px 25px" v-if="data.opened" size="small" type="primary"
@click="dialogVisible = false">保存</el-button>
</el-form>
</div>
</div>
</el-dialog>
</div>
</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: ["modalData", "index", "dataLeng"],
components: {
ChooseImg,
chooseMeun
},
data() {
return {
dialogVisible: false,
choicImg: false,
isShowLink: false,
data: this.modalData.data,
comImgIndex: null,
};
},
created() {
},
methods: {
//向父组件传值 并调用排序
resetSord(IsUp) {
this.$emit('getSord', this.index, IsUp);
},
//点击触发父组件删除
delPlugin() {
this.$emit('comDelPlugin', this.index);
},
addAd() {
this.data.list.push({
picUrl: '',
link: {
url: '',
openType: '',
},
});
},
deleteAd(index) {
this.data.list.splice(index, 1);
},
//选择图片
SelectId(msg) {
this.data.list[this.comImgIndex].picUrl = msg.url;
this.choicImg = false;
},
//选择链接
getChoiceLink() {
//调用子组件方法
var obj = this.$refs.chooseMeun.getChooseMenu();
// this.data.list[this.comImgIndex].link.openType = link.open_type;
this.data.list[this.comImgIndex].link.url = obj.PageUrl;
this.isShowLink = false;
},
//判断是否包含http
getIconLink(url) {
let str = ''
if (url.indexOf('http') != -1) {
str = url
} else {
str = 'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + url
}
return str;
},
},
computed: {
},
mounted() {
}
};
</script>
src/components/sallCenter/plugin/quick-nav.vue 0 → 100644
View file @ 366bfb2d
<style>
.diy-quick-nav .pic-select {
width: 72px;
height: 72px;
color: #00a0e9;
border: 1px solid #ccc;
line-height: normal;
text-align: center;
cursor: pointer;
font-size: 12px;
}
.diy-quick-nav .pic-preview {
width: 72px;
height: 72px;
border: 1px solid #ccc;
cursor: pointer;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.diy-quick-nav .edit-item {
border: 1px solid #e2e2e2;
padding: 15px;
margin-bottom: 20px;
}
</style>
<template>
<div :class="{'active':quickData.isCked}">
<div class="diy-component-options" v-if="quickData.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-quick-nav">
<div class="diy-component-preview" v-loading="!data">
<div style="padding: 20px 0;text-align: center;">
<div>快捷导航设置</div>
<div style="font-size: 22px;color: #909399">本条内容不占高度</div>
</div>
</div>
<div class="diy-component-edit" v-if="quickData.isCked">
<el-form @submit.native.prevent label-width="100px">
<el-form-item label="快捷导航开关">
<el-switch v-model="data.navSwitch" :inactive-value="0" :active-value="1"></el-switch>
</el-form-item>
<el-form-item v-if="data.navSwitch == 1" label="使用商城配置">
<el-switch v-model="data.useMallConfig"></el-switch>
</el-form-item>
<template v-if="!data.useMallConfig && data.navSwitch == 1">
<el-form-item label="导航样式">
<el-radio v-model="data.navStyle" :label="1">样式1(点击收起)</el-radio>
<el-radio v-model="data.navStyle" :label="2">样式2(全部展示)</el-radio>
</el-form-item>
<el-form-item label="收起图标">
<app-image-upload width="100" height="100" v-model="data.closedPicUrl"></app-image-upload>
<div class="zk_pic_box" @click="choicImg=true,getImgUtl(1)"
flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(data.closedPicUrl) + ')'}">
<i v-if="data.closedPicUrl==''" class="el-icon-picture-outline"></i>
<el-button type="danger" v-if="data.closedPicUrl!=''" class="image-delete" size="mini"
icon="el-icon-close" @click.stop="data.closedPicUrl=''" circle></el-button>
</div>
</el-form-item>
<el-form-item label="展开图标">
<div class="zk_pic_box" @click="choicImg=true,getImgUtl(2)"
flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(data.openedPicUrl) + ')'}">
<i v-if="data.openedPicUrl==''" class="el-icon-picture-outline"></i>
<el-button type="danger" v-if="data.openedPicUrl!=''" class="image-delete" size="mini"
icon="el-icon-close" @click.stop="data.openedPicUrl=''" circle></el-button>
</div>
</el-form-item>
<div class="edit-item">
<div style="margin-bottom: 10px;">返回首页</div>
<el-form-item label="是否开启">
<el-switch v-model="data.home.opened"></el-switch>
</el-form-item>
<el-form-item v-if="data.home.opened" label="图标">
<div class="zk_pic_box" @click="choicImg=true,getImgUtl(3)"
flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(data.home.picUrl) + ')'}">
<i v-if="data.home.picUrl==''" class="el-icon-picture-outline"></i>
<el-button type="danger" v-if="data.home.picUrl!=''" class="image-delete" size="mini"
icon="el-icon-close" @click.stop="data.home.picUrl=''" circle></el-button>
</div>
</el-form-item>
</div>
<div class="edit-item">
<div style="margin-bottom: 10px;">小程序客服</div>
<el-form-item label="是否开启">
<el-switch v-model="data.customerService.opened"></el-switch>
</el-form-item>
<el-form-item v-if="data.customerService.opened" label="图标">
<div class="zk_pic_box" @click="choicImg=true,getImgUtl(4)"
flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(data.customerService.picUrl) + ')'}">
<i v-if="data.customerService.picUrl==''" class="el-icon-picture-outline"></i>
<el-button type="danger" v-if="data.customerService.picUrl!=''" class="image-delete" size="mini"
icon="el-icon-close" @click.stop="data.customerService.picUrl=''" circle></el-button>
</div>
</el-form-item>
</div>
<div class="edit-item">
<div style="margin-bottom: 10px;">一键拨号</div>
<el-form-item label="是否开启">
<el-switch v-model="data.tel.opened"></el-switch>
</el-form-item>
<el-form-item v-if="data.tel.opened" label="图标">
<div class="zk_pic_box" @click="choicImg=true,getImgUtl(5)"
flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(data.tel.picUrl) + ')'}">
<i v-if="data.tel.picUrl==''" class="el-icon-picture-outline"></i>
<el-button type="danger" v-if="data.tel.picUrl!=''" class="image-delete" size="mini"
icon="el-icon-close" @click.stop="data.tel.picUrl=''" circle></el-button>
</div>
</el-form-item>
<el-form-item v-if="data.tel.opened" label="电话号码">
<el-input v-model="data.tel.number"></el-input>
</el-form-item>
</div>
<div class="edit-item">
<div style="margin-bottom: 10px;">网页链接</div>
<el-form-item label="是否开启">
<el-switch v-model="data.web.opened"></el-switch>
</el-form-item>
<el-form-item v-if="data.web.opened" label="图标">
<div class="zk_pic_box" @click="choicImg=true,getImgUtl(6)"
flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(data.web.picUrl) + ')'}">
<i v-if="data.web.picUrl==''" class="el-icon-picture-outline"></i>
<el-button type="danger" v-if="data.web.picUrl!=''" class="image-delete" size="mini"
icon="el-icon-close" @click.stop="data.web.picUrl=''" circle></el-button>
</div>
</el-form-item>
<el-form-item v-if="data.web.opened" label="网址">
<el-input v-model="data.web.url"></el-input>
</el-form-item>
</div>
<div class="edit-item">
<div style="margin-bottom: 10px;">跳转小程序</div>
<el-form-item label="是否开启">
<el-switch v-model="data.mApp.opened"></el-switch>
</el-form-item>
<el-form-item v-if="data.mApp.opened" label="图标">
<div class="zk_pic_box" @click="choicImg=true,getImgUtl(7)"
flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(data.mApp.picUrl) + ')'}">
<i v-if="data.mApp.picUrl==''" class="el-icon-picture-outline"></i>
<el-button type="danger" v-if="data.mApp.picUrl!=''" class="image-delete" size="mini"
icon="el-icon-close" @click.stop="data.mApp.picUrl=''" circle></el-button>
</div>
</el-form-item>
<el-form-item v-if="data.mApp.opened" label="appId">
<el-input v-model="data.mApp.appId"></el-input>
</el-form-item>
<el-form-item v-if="data.mApp.opened" label="页面路径">
<el-input v-model="data.mApp.page"></el-input>
</el-form-item>
</div>
<div class="edit-item">
<div style="margin-bottom: 10px;">地图导航</div>
<el-form-item label="是否开启">
<el-switch v-model="data.mapNav.opened"></el-switch>
</el-form-item>
<el-form-item v-if="data.mapNav.opened" label="图标">
<div class="zk_pic_box" @click="choicImg=true,getImgUtl(8)"
flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(data.mapNav.picUrl) + ')'}">
<i v-if="data.mapNav.picUrl==''" class="el-icon-picture-outline"></i>
<el-button type="danger" v-if="data.mapNav.picUrl!=''" class="image-delete" size="mini"
icon="el-icon-close" @click.stop="data.mapNav.picUrl=''" circle></el-button>
</div>
</el-form-item>
<el-form-item v-if="data.mapNav.opened" label="详细地址">
<el-input v-model="data.mapNav.address"></el-input>
</el-form-item>
<el-form-item v-if="data.mapNav.opened" label="经纬度">
<el-input v-model="data.mapNav.location" @focus="isShowMap=true" placeholder="点击进入地图选择" readonly></el-input>
</el-form-item>
</div>
<div class="edit-item">
<div style="margin-bottom: 10px;">自定义按钮</div>
<el-form-item label="是否开启">
<el-switch v-model="data.customize.opened"></el-switch>
</el-form-item>
<el-form-item v-if="data.customize.opened" label="图标">
<app-image-upload width="100" height="100" v-model="data.customize.picUrl"></app-image-upload>
</el-form-item>
<el-form-item v-if="data.customize.opened" label="跳转链接">
<el-input :disabled="true" size="small" v-model="data.customize.link_url" autocomplete="off">
<el-button size="mini" @click="isShowLink=true">选择链接</el-button>
</el-input>
</el-form-item>
</div>
</template>
</el-form>
</div>
</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>
<!-- 地图选址 -->
<el-dialog title="地图展示" :visible.sync="isShowMap" width="960px">
<commonMap @map-submit="mapEvent"></commonMap>
</el-dialog>
</div>
</template>
<script>
import ChooseImg from "@/components/global/ChooseImg.vue";
import chooseMeun from "../../common/chooseMeun.vue";
import commonMap from "../../common/commonMap.vue";
export default {
props: ["quickData", "index", "dataLeng"],
components: {
ChooseImg,
chooseMeun,
commonMap
},
data() {
return {
choicImg: false,
isShowLink: false,
isShowMap:false,
data: this.quickData.data,
type:null,
};
},
created() {
},
methods: {
//向父组件传值 并调用排序
resetSord(IsUp) {
this.$emit('getSord', this.index, IsUp);
},
//点击触发父组件删除
delPlugin() {
this.$emit('comDelPlugin', this.index);
},
//选择图片
SelectId(msg) {
switch (this.type){
case 1:
this.data.closedPicUrl=msg.url;
break;
case 2:
this.data.openedPicUrl=msg.url;
break;
case 3:
this.data.home.picUrl=msg.url;
break;
case 4:
this.data.customerService.picUrl=msg.url;
break;
case 5:
this.data.tel.picUrl=msg.url;
break;
case 6:
this.data.web.picUrl=msg.url;
break;
case 7:
this.data.mApp.picUrl=msg.url;
break;
case 8:
this.data.mapNav.picUrl=msg.url;
break;
}
this.choicImg = false;
},
//选择链接
getChoiceLink() {
//调用子组件方法
var obj = this.$refs.chooseMeun.getChooseMenu();
this.data.customize.link_url = obj.PageUrl;
this.isShowLink = 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;
},
getImgUtl(type,) {
this.type = type;
},
mapEvent(e) {
this.data.mapNav.location = e.lat + ',' + e.long;
},
},
computed: {
},
mounted() {
}
};
</script>
src/components/sallCenter/plugin/vip-card.vue 0 → 100644
View file @ 366bfb2d
<style>
.diy-user-label .el-form-item__label {
width: 4.5rem !important;
}
.diy-user-label>.el-form-item__label {
width: 6rem !important;
}
.diy-user-label .el-form-item__content {
margin-left: 4.5rem !important;
}
.diy-user-label>.el-form-item__content {
margin-left: 7rem !important;
}
.diy-del-btn.el-button--mini.is-circle {
position: absolute;
top: -16px;
right: -16px;
padding: 8px;
}
.diy-reset {
position: absolute;
top: 7px;
left: 90px;
}
.diy-buy-user-info>div {
position: relative;
width: 750px;
height: 120px;
margin: 0 auto;
}
.diy-buy-user-info .buy-bg {
height: 120px;
width: 702px;
margin: 0 24px;
border-radius: 16px;
}
.diy-buy-user-info .buy-logo {
width: 60px;
height: 60px;
position: absolute;
z-index: 5;
left: 42px;
top: 30px;
}
.diy-buy-user-info .buy-big {
position: absolute;
z-index: 5;
left: 120px;
top: 26px;
font-size: 26px;
color: #D0B8A5;
}
.diy-buy-user-info .buy-small {
position: absolute;
z-index: 5;
left: 120px;
font-size: 16px;
bottom: 24px;
color: #C09878;
}
.diy-buy-user-info .buy-btn {
position: absolute;
right: 42px;
top: 34px;
width: 140px;
height: 52px;
line-height: 52px;
border-radius: 26px;
text-align: center;
z-index: 5;
font-size: 24px;
color: #5A4D40;
}
.diy-buy-user-info .buy-btn.default {
background: linear-gradient(to right, #fbdec7, #f3bf95);
}
.diy-color-picker {
margin-left: 10px;
}
.VipApp-image {
background-size: cover;
background-position: center center;
width: 80px;
height: 80px;
border-radius: 0%;
border:1px solid #d1d1d1;
}
</style>
<template>
<div :class="{'active':vipData.isCked}">
<div class="diy-component-options" v-if="vipData.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-vip-card">
<div class="diy-component-preview" v-loading="!data">
<div class="diy-buy-user-info"
:style="{'background-color':background,'padding': top_bottom_padding + `px 0`,'height': top_bottom_padding*2 + 120 +'px'}">
<div>
<img class="buy-bg" :src="getIconLink(buy_bg)" alt="">
<img class="buy-logo" src="../../../assets/img/storeDesign/logo.png" alt="" />
<div class="buy-big" :style="{'color':data.buy_big_color}">{{data.buy_big}}</div>
<div class="buy-small" :style="{'color':data.buy_small_color}">{{data.buy_small}}</div>
<div :class="data.buy_btn_bg_color ? 'buy-btn' : 'buy-btn default'"
:style="{'background-color': data.buy_btn_bg_color ? data.buy_btn_bg_color : '','color':data.buy_btn_color}">
{{data.buy_btn_text}}</div>
</div>
</div>
</div>
<div class="diy-component-edit" v-if="vipData.isCked">
<el-form v-loading="loading" @submit.native.prevent label-width="100px">
<el-form-item label="背景色">
<el-color-picker @change="chooseColor" class="diy-color-picker" size="small" v-model="background">
</el-color-picker>
<el-input size="small" style="width: 80px;margin-right: 25px;" v-model="background"></el-input>
</el-form-item>
<el-form-item label="上下间距">
<el-input @change="chooseHeight" size="small" v-model="top_bottom_padding">
<template slot="append">px</template>
</el-input>
</el-form-item>
<el-form-item label="使用插件配置">
<el-switch v-model="usePluginConfig"></el-switch>
</el-form-item>
<template v-if="!usePluginConfig">
<el-form label-position="left">
<el-form-item class="diy-user-label" label="未购买用户" prop="buy_user">
<el-form-item label="背景图" prop="buy_bg">
<div style="position: relative">
<el-tooltip class="item" effect="dark" content="建议尺寸:702*120" placement="top">
<el-button size="mini" @click="comIndex=1,choicImg=true">选择文件</el-button>
</el-tooltip>
<div style="margin: 10px 0;position: relative;width: 80px;">
<div class="VipApp-image" :style="'background-image: url('+getIconLink(buy_bg)+')'"></div>
<el-button v-if="buy_bg != ''" class="diy-del-btn" @click="resetImg(1,'buy')" size="mini"
type="danger" icon="el-icon-close" circle></el-button>
</div>
<el-button size="mini" @click="resetImg(2,'buy')" class="diy-reset" type="primary">恢复默认</el-button>
</div>
</el-form-item>
<el-form-item label="文字" prop="buy_text">
<div flex="dir:left cross:center">
<el-input maxlength="15" style="margin-left: 10px;width: 240px" size="small" v-model="data.buy_big"
placeholder="大标题（字符限制15）"></el-input>
<el-color-picker class="diy-color-picker" size="small" v-model="data.buy_big_color">
</el-color-picker>
<el-input size="small" style="width: 80px;margin-right: 25px;" v-model="data.buy_big_color">
</el-input>
</div>
<div flex="dir:left cross:center">
<el-input maxlength="10" style="margin-left: 10px;width: 240px" size="small"
v-model="data.buy_small" placeholder="小标题（字符限制10）"></el-input>
<el-color-picker class="diy-color-picker" size="small" v-model="data.buy_small_color">
</el-color-picker>
<el-input size="small" style="width: 80px;margin-right: 25px;" v-model="data.buy_small_color">
</el-input>
</div>
</el-form-item>
<el-form-item label="按钮颜色" prop="buy_btn_bg_color">
<el-color-picker class="diy-color-picker" size="small" v-model="data.buy_btn_bg_color">
</el-color-picker>
<el-input size="small" style="width: 80px;margin-right: 25px;" v-model="data.buy_btn_bg_color">
</el-input>
</el-form-item>
<el-form-item label="按钮文字" prop="buy_btn_text">
<div flex="dir:left cross:center">
<el-input maxlength="4" style="margin-left: 10px;width: 240px" size="small"
v-model="data.buy_btn_text" placeholder="大标题（字符限制4）"></el-input>
<el-color-picker class="diy-color-picker" size="small" v-model="data.buy_btn_color">
</el-color-picker>
<el-input size="small" style="width: 80px;margin-right: 25px;" v-model="data.buy_btn_color">
</el-input>
</div>
</el-form-item>
</el-form-item>
</el-form>
<el-form label-position="left">
<el-form-item class="diy-user-label" label="已购买用户" prop="renew_user">
<el-form-item label="背景图" prop="renew_bg">
<div style="position: relative">
<el-tooltip class="item" effect="dark" content="建议尺寸:702*120" placement="top">
<el-button size="mini" @click="comIndex=2,choicImg=true">选择文件</el-button>
</el-tooltip>
<div style="margin: 10px 0;position: relative;width: 80px;">
<div class="VipApp-image" :style="'background-image: url('+getIconLink(renew_bg)+')'"></div>
<el-button v-if="renew_bg != ''" class="diy-del-btn" @click="resetImg(1,'renew')" size="mini"
type="danger" icon="el-icon-close" circle></el-button>
</div>
<el-button size="mini" @click="resetImg(2,'renew')" class="diy-reset" type="primary">恢复默认
</el-button>
</div>
</el-form-item>
<el-form-item label="文字" prop="renew_text">
<div flex="dir:left cross:center">
<el-input maxlength="15" style="margin-left: 10px;width: 240px" size="small"
v-model="data.renew_text" placeholder="标题（字符限制15）"></el-input>
<el-color-picker class="diy-color-picker" size="small" v-model="data.renew_text_color">
</el-color-picker>
<el-input size="small" style="width: 80px;margin-right: 25px;" v-model="data.renew_text_color">
</el-input>
</div>
</el-form-item>
<el-form-item label="按钮颜色" prop="renew_btn_bg_color">
<el-color-picker class="diy-color-picker" size="small" v-model="data.renew_btn_bg_color">
</el-color-picker>
<el-input size="small" style="width: 80px;margin-right: 25px;" v-model="data.renew_btn_bg_color">
</el-input>
</el-form-item>
</el-form-item>
</el-form>
</template>
</el-form>
</div>
</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: ["vipData", "index", "dataLeng"],
components: {
ChooseImg
},
data() {
return {
choicImg: false,
loading: false,
usePluginConfig: false,
data:this.vipData.data,
comIndex: -1,
default: {
buy_bg: 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/buy_bg.png',
renew_bg: 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/logo.png',
buy_big_color: '#D0B8A5',
buy_small_color: '#C09878',
buy_btn_color: '#5A4D40',
buy_btn_bg_color: '',
buy_big: '开通超级会员，立省更多',
buy_small: '超值全场8.8折！',
buy_btn_text: '立即开通',
renew_text_color: '#D0B8A5',
renew_btn_bg_color: '',
renew_text: 'SVIP会员优享9.5折，全场包邮',
},
form: {},
background: '#FFFFFF',
top_bottom_padding: 0,
buy_bg: '',
renew_bg: '',
plugin: {
buy_bg: 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/buy_bg.png',
renew_bg: 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/logo.png',
buy_big_color: '#D0B8A5',
buy_small_color: '#C09878',
buy_btn_color: '#5A4D40',
buy_btn_bg_color: '',
buy_big: '开通超级会员，立省更多',
buy_small: '超值全场8.8折！',
buy_btn_text: '立即开通',
renew_text_color: '#D0B8A5',
renew_btn_bg_color: '',
renew_text: 'SVIP会员优享9.5折，全场包邮',
},
};
},
created() {
this.reset();
},
methods: {
//向父组件传值 并调用排序
resetSord(IsUp) {
this.$emit('getSord', this.index, IsUp);
},
//点击触发父组件删除
delPlugin() {
this.$emit('comDelPlugin', this.index);
},
//选择图片
SelectId(msg) {
if (this.comIndex == 1) {
this.data.buy_bg = msg.url;
this.buy_bg = msg.url;
} else if (this.comIndex == 2) {
this.data.renew_bg = msg.url;
this.renew_bg = 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;
},
chooseColor() {
this.data.background = this.background;
},
chooseHeight() {
this.data.top_bottom_padding = this.top_bottom_padding;
},
reset() {
let that = this;
if (that.usePluginConfig) {
that.data = that.plugin;
that.data.usePluginConfig = that.usePluginConfig;
that.buy_bg = that.plugin.buy_bg;
that.renew_bg = that.plugin.renew_bg;
that.data.background = that.background;
that.data.top_bottom_padding = that.top_bottom_padding;
} else {
that.data.usePluginConfig = that.usePluginConfig;
that.buy_bg = 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/buy_bg.png';
that.renew_bg = 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/buy_bg.png';
that.data.background = that.background;
that.data.top_bottom_padding = that.top_bottom_padding;
that.data.background = that.background;
that.data.top_bottom_padding = that.top_bottom_padding;
that.data.buy_big_color=that.default.buy_big_color;
that.data.buy_small_color=that.default.buy_small_color;
that.data.buy_btn_color=that.default.buy_btn_color;
that.data.buy_btn_bg_color=that.default.buy_btn_bg_color;
that.data.buy_big=that.default.buy_big;
that.data.buy_big=that.default.buy_big;
that.data.buy_small=that.default.buy_small;
that.data.buy_btn_text=that.default.buy_btn_text;
that.data.renew_text_color=that.default.renew_text_color;
that.data.renew_btn_bg_color=that.default.renew_btn_bg_color;
that.data.renew_text=that.default.renew_text;
}
},
// loadData() {
// let that = this;
// that.loading = true;
// request({
// params: {
// r: 'plugin/vip_card/mall/setting/index'
// },
// method: 'get'
// }).then(e => {
// that.loading = false;
// if (e.data.code == 0) {
// if (e.data.data.setting != "") {
// that.plugin = e.data.data.setting.form
// }
// }
// }).catch(e => {
// that.loading = false;
// });
// },
resetImg(res, position) {
switch (position) {
case 'buy':
if (res == 2) {
this.buy_bg = 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/buy_bg.png';
this.data.buy_bg = 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/buy_bg.png';
} else {
this.buy_bg = '';
this.data.buy_bg = '';
}
break;
case 'renew':
if (res == 2) {
this.renew_bg = 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/buy_bg.png';
this.data.renew_bg = 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/buy_bg.png';
} else {
this.renew_bg = '';
this.data.renew_bg = '';
}
break;
}
},
},
computed: {
},
mounted() {
}
};
</script>
src/components/sallCenter/templateEdit.vue
View file @ 366bfb2d
......@@ -246,10 +246,22 @@
: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>
<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>
<vipCard v-if="item.Id=='vip-card'" :vipData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
:index="index" :dataLeng="dataList.length"></vipCard>
<live v-if="item.Id=='live'" :liveData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
:index="index" :dataLeng="dataList.length"></live>
<empty v-if="item.Id=='empty'" :emptyData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
:index="index" :dataLeng="dataList.length"></empty>
<advert v-if="item.Id=='ad'" :advData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
:index="index" :dataLeng="dataList.length"></advert>
<modal v-if="item.Id=='modal'" :modalData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
:index="index" :dataLeng="dataList.length"></modal>
<quickNav v-if="item.Id=='quick-nav'" :quickData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
:index="index" :dataLeng="dataList.length"></quickNav>
</div>
</div>
</div>
......@@ -285,6 +297,12 @@
import integralMall from "../sallCenter/plugin/integral-mall.vue"
import lottery from "../sallCenter/plugin/lottery.vue"
import advance from "../sallCenter/plugin/advance.vue"
import vipCard from "../sallCenter/plugin/vip-card.vue"
import live from "../sallCenter/plugin/live.vue"
import empty from "../sallCenter/plugin/empty.vue"
import advert from "../sallCenter/plugin/advert.vue"
import modal from "../sallCenter/plugin/modal.vue"
import quickNav from "../sallCenter/plugin/quick-nav.vue"
export default {
data() {
return {
......@@ -321,6 +339,12 @@
integralMall,
lottery,
advance,
vipCard,
live,
empty,
advert,
modal,
quickNav
},
methods: {
//获取左侧菜单
......@@ -877,6 +901,155 @@
}
this.dataList.push(advanceObj);
break;
//超级会员卡
case 'vip-card':
let vipObj = {
Id: 'vip-card',
isCked: false,
data: {
background: '#FFFFFF',
usePluginConfig: true,
top_bottom_padding: 0,
buy_bg: 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/buy_bg.png',
renew_bg: 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/buy_bg.png',
buy_big_color: '',
buy_small_color: '',
buy_btn_color: '',
buy_btn_bg_color: '',
buy_big: '',
buy_small: '',
buy_btn_text: '',
renew_text_color: '',
renew_btn_bg_color: '',
renew_text: '',
}
}
this.dataList.push(vipObj);
break;
//直播
case 'live':
let liveObj = {
Id: 'live',
isCked: false,
data: {
background: '#f7f7f7',
is_show_goods: true,
style_type: 1,
number: 5,
}
}
this.dataList.push(liveObj);
break;
//空白块
case 'empty':
let emptyObj = {
Id: 'empty',
isCked: false,
data: {
background: '#ffffff',
height: 10,
}
}
this.dataList.push(emptyObj);
break;
//流量主广告
case 'ad':
let adObj = {
Id: 'ad',
isCked: false,
data: {
id: '',
type: '',
pic_url: '',
video: '',
award_type: '0',
award_coupons: [
/*{
send_num: 3,
name: '优惠券',
coupon_id: 710,
} */
],
award_num: '',
award_limit_type: '0',
award_limit: 0,
}
}
this.dataList.push(adObj);
break;
//弹窗广告
case 'modal':
let modalObj = {
Id: 'modal',
isCked: false,
data: {
opened: false,
list: [{
picUrl: '',
link: {
url: '',
openType: '',
},
}, ],
times: 0
}
}
this.dataList.push(modalObj);
break;
//快捷导航
case 'quick-nav':
let quickObj = {
Id: 'quick-nav',
isCked: false,
data: {
navSwitch: 0,
useMallConfig: true,
navStyle: 1,
closedPicUrl: '',
openedPicUrl: '',
home: {
opened: false,
picUrl: '',
},
customerService: {
opened: false,
picUrl: '',
},
tel: {
opened: false,
picUrl: '',
number: '',
},
web: {
opened: false,
picUrl: '',
url: '',
},
mApp: {
opened: false,
picUrl: '',
appId: '',
page: '',
},
mapNav: {
opened: false,
picUrl: '',
address: '',
location: '',
},
customize: {
opened: false,
picUrl: '',
open_type: '',
params: '',
link_url: '',
key: '',
}
}
}
this.dataList.push(quickObj);
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