Skip to content

E
ElectricitySheep
Commit 0938ab3f authored by zhengke's avatar zhengke
Browse files
Options

增加

parent 95398f16
Hide whitespace changes
Inline Side-by-side
Showing with 2096 additions and 58 deletions
src/components/common/choiceArea.vue 0 → 100644
View file @ 0938ab3f
<style>
.app-hotspot .shadow {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
border: 1px solid #2E9FFF;
}
.app-hotspot .hotspot {
position: absolute;
left: 0;
top: 0;
border: 1px dashed #5CB3FD;
z-index: 100;
}
.app-hotspot .hotspot .close {
position: absolute;
right: -16px;
top: -16px;
z-index: 101
}
.app-hotspot .el-input {
width: 70px;
}
.app-hotspot .right label {
padding: 0 10px;
}
.app-hotspot .inside {
position: relative;
width: 750px;
min-height: 1334px;
background-color: #eee;
zoom: 0.5;
}
.app-hotspot .pic {
width: auto;
height: auto;
max-width: 750px;
max-height: 1334px;
transform: scale(0.5);
}
.app-hotspot .pic-list {
position: relative;
}
.app-hotspot .pic-list div {
position: absolute;
left: 0;
top: 0;
}
.app-hotspot {
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.app-hotspot .el-input-group__append {
background-color: #fff;
}
</style>
<template id="app-hotspot">
<div class="app-hotspot">
<div @click="dialogVisible = !dialogVisible" style="display: inline-block">
<slot></slot>
</div>
<el-dialog append-to-body title="热区划分" :visible.sync="dialogVisible" :close-on-click-modal="false"
class="app-hotspot" width="900px">
<div flex="dir:left box:first">
<div class="inside" flex="dir:left main:center cross:center" ref="inside">
<div style="position: relative;" ref="box">
<div class="shadow" :style="{zIndex: zIndex}" @click="click" @mousedown="mousedown" @mouseup="mouseup"
@mousemove="mousemove" @mouseout="mouseout "></div>
<div class="hotspot"
:style="{width:item.width+'px',height:item.height+'px',left:item.left+'px',
top:item.top+'px', maxWidth:'calc('+width+' - '+item.left+'px)',
maxHeight:'calc('+height+' - '+item.top+'px)', backgroundColor: index == key ? 'rgba(92, 179, 253, 0.2)' : ''}"
@click="select(key)" v-for="(item, key) in hotspotList" :key="key" :data-index="key">
<div class="close" @click.stop="del(key)" v-if="item.is_close">
<img style="width: 32px;height: 32px" src="http://wx.weibaoge.cn/web/statics/img/mall/icon-close.png">
</div>
</div>
<div class="pic-list" :style="style" v-if="picList && picList.length > 0">
<template v-for="(item, index) in picList">
<div :style="item" :key="index">
<img :src="item.pic_url" style="width: 100%;visibility: hidden;display: block;">
</div>
<img :src="item.pic_url" style="width: 100%;visibility: hidden;display: block;">
</template>
</div>
<div :style="style" flex="dir:left main:center cross:center" v-else>
<img style="width: auto;height: auto;max-width: 100%;max-height: 100%" :src="picUrl">
</div>
</div>
</div>
<el-form label-width="120px">
<div class="right" v-if="index > -1">
<el-form-item label="热区尺寸">
<el-row type="flex">
<el-col :span="12">
<div flex="dir:left">
<label>W</label>
<el-input size="small" type="number" v-model.number="hotspotList[index].width" :max="maxWidth">
</el-input>
<label>px</label>
</div>
</el-col>
<el-col :span="12">
<div flex="dir:left">
<label>H</label>
<el-input size="small" type="number" v-model.number="hotspotList[index].height" :max="maxHeight">
</el-input>
<label>px</label>
</div>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="热区位置">
<el-row type="flex">
<el-col :span="12">
<div flex="dir:left">
<label>X</label>
<el-input size="small" type="number" v-model.number="hotspotList[index].left">
</el-input>
<label>px</label>
</div>
</el-col>
<el-col :span="12">
<div flex="dir:left">
<label>Y</label>
<el-input size="small" type="number" v-model.number="hotspotList[index].top">
</el-input>
<label>px</label>
</div>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="热区链接" v-if="isLink">
<el-input size="small" style="width: 100%;" :disabled="true" v-model="hotspotList[index].link.PageName">
<template slot="append">
<el-button @click="isShowLink=true">选择链接</el-button>
</template>
</el-input>
</el-form-item>
<el-form-item label="热区属性" v-if="mode == 'auth'">
<el-radio-group v-model="hotspotList[index].open_type">
<el-radio label="login" :disabled="radioDisabled('login')">登录按钮</el-radio>
<el-radio label="cancel" :disabled="radioDisabled('cancel')">不登录按钮</el-radio>
</el-radio-group>
</el-form-item>
</div>
<div v-if="index == -1 && hotspotList.length == 0" style="padding: 20px 40px;">请先在左侧蓝框内用鼠标划出热区范围</div>
<el-form-item v-else label="">
<el-button style="margin-left: 10px" type="primary" size="small" @click="confirm">保存</el-button>
<el-button size="small" @click="clearAll">重置</el-button>
</el-form-item>
</el-form>
</div>
</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 chooseMeun from "../common/chooseMeun.vue";
export default {
props: {
multiple: Boolean,
picUrl: String,
width: {
type: String,
default: '750px'
},
height: {
type: String,
default: '1334px'
},
hotspotArray: {
type: Array,
default: []
},
isLink: Boolean,
picList: Array,
max: Number,
mode: String
},
data() {
return {
isShowLink: false,
dialogVisible: false,
is_mousedown: false,
is_mousemove: false,
is_close: false,
hotspot: {
height: 0,
width: 0,
left: 0,
top: 0,
defaultX: 0,
defaultY: 0,
is_close: false,
link: '',
open_type: ''
},
hotspotList: [],
index: -1,
zIndex: 99,
};
},
components: {
chooseMeun
},
watch: {
dialogVisible(oldVal, newVal) {
this.hotspotList = JSON.parse(JSON.stringify(this.hotspotArray))
this.index = -1;
}
},
computed: {
style() {
return {
width: this.width,
height: this.height
};
},
maxWidth() {
return parseFloat(this.width) - this.hotspotList[this.index].left;
},
maxHeight() {
return parseFloat(this.height) - this.hotspotList[this.index].top;
},
},
methods: {
click(e) {
this.is_mousedown = false;
},
position(e) {
function getElementPosition(e) {
var x = 0,
y = 0;
while (e != null) {
x += e.offsetLeft;
y += e.offsetTop;
e = e.offsetParent;
}
return {
x: x,
y: y
};
}
// 缩放比例
let zoom = 2;
// 获取图片距离浏览器的x/y（真实的尺寸，不受zoom属性影响）
// let position = getElementPosition(this.$refs.box);
// 获取父容器距离浏览器的x/y（真实的尺寸，不受zoom属性影响）
// let inside = getElementPosition(this.$refs.inside);
// 图片距离缩放容器左边和顶部
// let picX = (position.x - inside.x) / zoom;
// let picY = (position.y - inside.y) / zoom;
// 鼠标点下时距离浏览器的x/y（需要计算zoom属性的影响）
// position.x = e.clientX + (e.offsetX + picX) * (zoom - 1) - position.x;
// position.y = e.clientY + (e.offsetY + picY) * (zoom - 1) - position.y;
// position.x = (e.clientX - inside.x) * zoom - (position.x - inside.x);
// position.y = (e.clientY - inside.y) * zoom - (position.y - inside.y);
let position = {
x: e.offsetX * zoom,
y: e.offsetY * zoom
};
return position;
},
mousedown(e) {
if (!this.multiple) {
if (this.hotspotList.length > 0) {
return;
}
} else {
if (this.max && this.hotspotList.length === this.max) {
return;
}
}
let position = this.position(e);
this.is_mousedown = true;
let hotspot = JSON.parse(JSON.stringify(this.hotspot));
hotspot.left = position.x;
hotspot.top = position.y;
hotspot.defaultX = position.x;
hotspot.defaultY = position.y;
this.hotspotList.push(hotspot);
this.index = this.hotspotList.length - 1;
this.zIndex = 102;
},
mousemove(e) {
if (this.is_mousedown) {
if (this.index === -1) {
return;
}
let position = this.position(e);
let hotspot = this.hotspotList[this.index];
this.hotspotList[this.index].left = Math.min(position.x, hotspot.defaultX);
this.hotspotList[this.index].top = Math.min(position.y, hotspot.defaultY);
this.hotspotList[this.index].width = Math.abs(hotspot.defaultX - position.x);
this.hotspotList[this.index].height = Math.abs(hotspot.defaultY - position.y);
this.is_mousemove = true;
}
},
mouseout(e) {
if (this.index === -1) {
return;
}
this.is_mousedown = false;
this.hotspotList[this.index].is_close = true;
this.is_mousemove = false;
this.zIndex = 99;
},
mouseup(e) {
if (this.index === -1) {
return;
}
this.is_mousedown = false;
this.hotspotList[this.index].is_close = true;
this.is_mousemove = false;
this.zIndex = 99;
},
del(index) {
this.hotspotList.splice(index, 1);
this.index = -1;
},
select(index) {
if (this.is_mousemove) {
return;
}
this.index = index;
},
clearAll() {
this.index = -1;
this.hotspotList = [];
},
confirm() {
this.dialogVisible = false;
this.index = -1;
this.$emit('confirm', this.hotspotList);
},
radioDisabled(name) {
for (let i in this.hotspotList) {
if (this.hotspotList[i].open_type && this.hotspotList[i].open_type == name && i != this.index) {
return true;
}
}
return false;
},
//获取选择链接
getChoiceLink() {
//调用子组件方法
var obj = this.$refs.chooseMeun.getChooseMenu();
if (this.index > -1 && this.hotspotList.length > 0) {
this.hotspotList[this.index].link = obj
}
this.isShowLink = false;
},
}
};
</script>
src/components/sallCenter/plugin/goods.vue 0 → 100644
View file @ 0938ab3f
<style>
/*-----------------设置部分--------------*/
.diy-goods .diy-component-edit .diy-goods-label {
width: 85px;
}
.diy-goods .diy-component-edit .cat-item {
border: 1px solid #e2e2e2;
margin-bottom: 5px;
padding: 15px;
max-width: 400px;
}
.diy-goods .diy-component-edit .goods-list {
flex-wrap: wrap;
}
.diy-goods .diy-component-edit .goods-item,
.diy-goods .diy-component-edit .goods-add {
width: 50px;
height: 50px;
position: relative;
margin-right: 15px;
margin-bottom: 15px;
}
.diy-goods .diy-component-edit .goods-add .el-button {
width: 100%;
height: 100%;
border-radius: 0;
padding: 0;
}
.diy-goods .diy-component-edit .goods-pic {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
.diy-goods .diy-component-edit .goods-delete {
position: absolute;
left: calc(100% - 13px);
top: -13px;
width: 25px;
height: 25px;
line-height: 25px;
padding: 0 0;
visibility: hidden;
z-index: 1;
}
.diy-goods .diy-component-edit .goods-item:hover .goods-delete {
visibility: visible;
}
.diy-goods .diy-component-edit .cat-item-options {
position: relative;
}
.diy-goods .diy-component-edit .cat-item-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;
top: -16px;
right: -40px;
}
/*-----------------预览部分--------------*/
.diy-goods .diy-component-preview .cat-list {}
.diy-goods .diy-component-preview .cat-list-top {}
.diy-goods .diy-component-preview .cat-list-left {
width: 160px;
}
.diy-goods .diy-component-preview .cat-item {
height: 104px;
padding: 0 10px;
text-align: center;
max-width: 100%;
white-space: nowrap;
}
.diy-goods .diy-component-preview .cat-list-left .cat-name {
overflow: hidden;
text-overflow: ellipsis;
}
.diy-goods .diy-component-preview .cat-item.active {
color: #ff4544;
}
.diy-goods .diy-component-preview .cat-list-top .cat-item {
margin: 0 20px;
}
.diy-goods .diy-component-preview .cat-list-top {
overflow-x: auto;
}
.diy-goods .diy-component-preview .cat-list-top.cat-style-1 .cat-item {
border-bottom: 4px solid transparent;
}
.diy-goods .diy-component-preview .cat-list-top.cat-style-2 .cat-name {
background: #ff4544;
color: #fff;
border-radius: 100px;
padding: 0 18px;
}
.diy-goods .diy-component-preview .cat-list-top .cat-item.active {
border-bottom-color: #ff4544;
}
.diy-goods .diy-component-preview .cat-list-left .cat-item {
border-left: 2px solid transparent;
}
.diy-goods .diy-component-preview .cat-list-left .cat-item.active {
border-left-color: #ff4544;
}
.diy-goods .diy-component-preview .goods-list {
padding: 11px;
}
.diy-goods .diy-component-preview .goods-item {
padding: 11px;
}
.diy-goods .diy-component-preview .goods-pic {
background-size: cover;
background-position: center;
width: 99.8%;
height: 700px;
background-color: #f6f6f6;
background-repeat: no-repeat;
position: relative;
border-radius: 10px 10px 0 0;
}
.diy-goods .diy-component-preview .goods-pic-3-2 {
height: 471px;
}
.diy-goods .diy-component-preview .goods-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 10px;
}
.diy-goods .diy-component-preview .goods-name-static {
height: 94px;
}
.diy-goods .diy-component-preview .goods-price {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #ff4544;
line-height: 48px;
}
.diy-goods .diy-component-preview .goods-list-style--1 .goods-item,
.diy-goods .diy-component-preview .goods-list-style-1 .goods-item {
width: 100%;
}
.diy-goods .diy-component-preview .goods-list-style-2 .goods-item {
width: 50%;
}
.diy-goods .diy-component-preview .goods-list-style-3 .goods-item {
width: 33.333333%;
}
.diy-goods .diy-component-preview .goods-list-style-0 .goods-item {
width: 249px;
}
.diy-goods .diy-component-preview .goods-list-style--1 .goods-pic {
width: 200px;
height: 200px;
border-radius: 10px 0 0 10px;
}
.diy-goods .diy-component-preview .goods-list-style-2 .goods-pic {
height: 342px;
border-radius: 10px 10px 0 0;
}
.diy-goods .diy-component-preview .goods-list-style-0 .goods-pic,
.diy-goods .diy-component-preview .goods-list-style-3 .goods-pic {
height: 200px;
border-radius: 10px 10px 0 0;
}
.diy-goods .diy-component-preview .goods-pic-fill-0 {
background-size: contain;
}
.diy-goods .diy-component-preview .buy-btn {
border-color: #ff4544;
color: #ff4544;
padding: 0 20px;
height: 48px;
line-height: 50px;
font-size: 24px;
}
.diy-goods .diy-component-preview .buy-btn.el-button--primary {
background-color: #ff4544;
color: #fff;
}
.diy-goods .diy-component-preview .goods-tag {
position: absolute;
top: 0;
left: 0;
width: 64px;
height: 64px;
z-index: 1;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
.diy-goods hr {
border: none;
height: 1px;
background-color: #e2e2e2;
}
.diy-goods .diy-component-preview .goods-item .buy-btn.is-round {
border-radius: 24px;
}
.diy-goods .goods-item.goods-cat-list {
border-top: 1px solid #e2e2e2;
}
.diy-goods .goods-item.goods-cat-list:first-of-type {
border-top: 0;
}
.diy-goods .cat-list {
max-height: 500px;
overflow: auto;
}
.Goodspic-box{
width: 70px;
height: 70px;
border: 1px solid #ccc;
cursor: pointer;
background-color: #fff;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
.Goodspic-box i {
font-size: 22px;
color: #909399;
}
.Goodspic-box .size-tip {
line-height: 1.35;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
color: #fff;
background: rgba(0, 0, 0, 0.2);
letter-spacing: -1px;
}
</style>
<template>
<div :class="{'active':goodData.isCked}">
<div class="diy-component-options" v-if="goodData.isCked">
<el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;"></el-button>
<el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button>
<el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)"
style="right: -25px; top: 0;"></el-button>
<el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)"
style="right: -25px; top: 30px;"></el-button>
</div>
<div class="diy-goods">
<div class="diy-component-preview" :style="cListStyle">
<div :flex="cMainFlex">
<div :flex="cCatFlex" class="cat-list"
v-if="data.showCat && (data.catPosition=='left'||(data.catPosition=='top'&&cCatList.length>1))"
:class="'cat-list-'+data.catPosition+' cat-style-'+data.catStyle">
<div class="cat-item" v-for="(item,index) in cCatList" :class="index===0?'active':''"
flex="main:center cross:center">
<div class="cat-name">{{item.menuName}}</div>
</div>
</div>
<div class="goods-list" :class="'goods-list-style-'+data.listStyle">
<div v-for="(cat,catIndex) in cCatList">
<div v-if="data.catPosition==='left'" style="color: #666666;margin: 24px 11px;font-size: 24px">
{{cat.menuName}}
</div>
<div :style="cGoodsListStyle" flex>
<div v-for="(goods,goodsIndex) in cCatGoodsList(cat, catIndex)" class="goods-item"
:class="data.catPosition==='left'?'goods-cat-list':''">
<div style="display: inline-block;" :style="cGoodsItemWidth">
<div :style="cGoodsItemStyle" :flex="cGoodsItemFlex" style="position: relative;">
<div class="goods-pic"
:class="'goods-pic-'+data.goodsCoverProportion+' goods-pic-fill-'+data.fill"
:style="'background-image: url('+goods.picUrl+')'">
<div v-if="data.showGoodsTag" class="goods-tag"
:style="'background-image: url('+ getIconLink(data.goodsTagPicUrl)+')'"></div>
</div>
<div :style="cGoodsItemInfoStyle">
<div class="goods-name" :class="data.listStyle===-1?'goods-name-static':''">
<template v-if="data.showGoodsName">{{goods.name}}</template>
</div>
<div flex="box:last">
<div class="goods-price">
<template v-if="data.showGoodsPrice">￥{{goods.price}}</template>
</div>
<div>
<template v-if="cShowBuyBtn">
<template v-if="data.buyBtn==='cart'">
<i style="font-size: 48px;color: #ff4544;" class="el-icon-shopping-cart-1"></i>
</template>
<template v-if="data.buyBtn==='add'">
<i style="font-size: 48px;color: #ff4544;" class="el-icon-circle-plus-outline"></i>
</template>
<template v-if="data.buyBtn==='text'">
<div :style="cButtonStyle" style="font-size: 24px;border: 1px solid;color: #ffffff;">
{{data.buyBtnText}}</div>
</template>
</template>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="diy-component-edit" v-if="goodData.isCked">
<el-form label-width='150px' @submit.native.prevent>
<el-form-item label="显示分类">
<el-switch v-model="data.showCat" @change="showCatChange"></el-switch>
</el-form-item>
<template v-if="data.showCat">
<el-form-item label="分类栏位置">
<el-radio v-model="data.catPosition" @change="catPositionChange" label="top">顶部</el-radio>
<el-radio v-model="data.catPosition" label="left">左侧</el-radio>
<div style="color: #909399;line-height: normal;">只有一个分类时顶部不会显示分类栏</div>
</el-form-item>
<el-form-item label="分类样式" v-if="data.catPosition==='top'">
<el-radio v-model="data.catStyle" :label="1">样式1</el-radio>
<el-radio v-model="data.catStyle" :label="2">样式2</el-radio>
</el-form-item>
<el-form-item label="分类列表">
<div v-for="(cat,catIndex) in data.catList" class="cat-item" :key="catIndex">
<div class="cat-item-options">
<el-button type="primary" icon="el-icon-delete" @click="deleteCat(catIndex)"></el-button>
</div>
<div flex="box:first">
<div class="diy-goods-label">商品分类</div>
<div>{{cat.name}}</div>
</div>
<div flex="box:first">
<div class="diy-goods-label">菜单名称</div>
<div>
<el-input v-model="cat.menuName" size="small"></el-input>
</div>
</div>
<div flex="box:first">
<div class="diy-goods-label">商品数量</div>
<div>
<el-input v-model.number="cat.goodsNum" type="number" min="1" max="30" size="small"
:disabled="cat.staticGoods" @change="catGoodsNumChange(catIndex)"></el-input>
</div>
</div>
<div flex="box:first">
<div class="diy-goods-label">自定义商品</div>
<div>
<el-switch v-model="cat.staticGoods"></el-switch>
</div>
</div>
<div flex="box:first" v-if="cat.staticGoods">
<div class="diy-goods-label">商品列表</div>
<div>
<draggable v-model="cat.goodsList" flex class="goods-list">
<div class="goods-item" v-for="(goods,goodsIndex) in cat.goodsList">
<el-tooltip effect="dark" content="移除商品" placement="top">
<el-button @click="deleteGoods(goodsIndex,catIndex)" circle class="goods-delete" type="danger"
icon="el-icon-close"></el-button>
</el-tooltip>
<div class="goods-pic" :style="'background-image:url('+goods.picUrl+')'"></div>
</div>
</draggable>
<div class="goods-add">
<el-button @click="showGoodsDialog(catIndex)" icon="el-icon-plus"></el-button>
</div>
</div>
</div>
</div>
<el-button size="small" @click="catDialog.visible=true">添加分类</el-button>
</el-form-item>
</template>
<template v-else>
<el-form-item label="商品添加">
<el-radio v-model="data.addGoodsType" :label="0">自动添加</el-radio>
<el-radio v-model="data.addGoodsType" :label="1">手动添加</el-radio>
</el-form-item>
<el-form-item v-show="data.addGoodsType == 0" label="商品数量">
<el-input size="small" v-model.number="data.goodsLength" type="number"></el-input>
</el-form-item>
<el-form-item v-show="data.addGoodsType == 1" label="商品列表">
<draggable v-model="data.list" flex class="goods-list">
<div class="goods-item" v-for="(goods,goodsIndex) in data.list">
<el-tooltip effect="dark" content="移除商品" placement="top">
<el-button @click="deleteGoods(goodsIndex,null)" circle class="goods-delete" type="danger"
icon="el-icon-close"></el-button>
</el-tooltip>
<div class="goods-pic" :style="'background-image:url('+goods.picUrl+')'"></div>
</div>
</draggable>
<div class="goods-add">
<el-button size="small" @click="showGoodsDialog(null)" icon="el-icon-plus"></el-button>
</div>
</el-form-item>
</template>
<hr>
<el-form-item label="列表样式" v-if="data.catPosition==='top'">
<el-radio v-model="data.listStyle" :label="-1">列表模式</el-radio>
<el-radio v-model="data.listStyle" :label="0">左右滑动</el-radio>
<el-radio v-model="data.listStyle" :label="1">一行一个</el-radio>
<el-radio v-model="data.listStyle" :label="2">一行两个</el-radio>
<el-radio v-model="data.listStyle" :label="3">一行三个</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 label="显示商品价格">
<el-switch v-model="data.showGoodsPrice"></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>
<el-form-item label="显示购买按钮" v-if="data.textStyle !== 2">
<el-switch v-model="data.showBuyBtn"></el-switch>
</el-form-item>
<el-form-item label="购买按钮样式" v-if="data.textStyle !== 2&&data.showBuyBtn">
<el-radio v-model="data.buyBtn" label="cart">购物车</el-radio>
<el-radio v-model="data.buyBtn" label="add">加号</el-radio>
<el-radio v-if="data.listStyle!=3" v-model="data.buyBtn" label="text">文字</el-radio>
</el-form-item>
<el-form-item label="购买按钮文字样式" v-if="data.textStyle !== 2&&data.showBuyBtn&&data.buyBtn=='text'">
<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 label="购买按钮颜色" v-if="data.textStyle !== 2&&data.showBuyBtn&&data.buyBtn=='text'">
<el-color-picker v-model="data.buttonColor"></el-color-picker>
</el-form-item>
<el-form-item label="购买按钮文字" v-if="data.textStyle !== 2&&data.showBuyBtn&&data.buyBtn=='text'">
<el-input maxlength="4" size="small" v-model="data.buyBtnText"></el-input>
</el-form-item>
<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 flex="main:center cross:center" @click="choicImg=true" class="Goodspic-box" :style="{backgroundImage:'url(http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+data.goodsTagPicUrl+')'}">
<i v-if="data.goodsTagPicUrl==''" class="el-icon-picture-outline"></i>
<div class="size-tip">64 × 64</div>
</div>
</el-form-item>
<el-form-item label="背景颜色">
<div class="input-color" flex="dir:left cross:center">
<el-color-picker size="small" v-model="data.backgroundColor"></el-color-picker>
<el-input size="small" style="width: 80px;margin-right: 25px;" v-model="data.backgroundColor"></el-input>
</div>
</el-form-item>
</el-form>
</div>
</div>
<!-- 选择图片文件 -->
<el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
<ChooseImg @SelectId="SelectId"></ChooseImg>
</el-dialog>
</div>
</template>
<script>
import draggable from "vuedraggable"
import ChooseImg from "@/components/global/ChooseImg.vue";
export default {
props: ["goodData", "index", "dataLeng"],
components: {
draggable,
ChooseImg
},
data() {
return {
data: this.goodData.data,
position: 'center center',
repeat: 'no-repeat',
choicImg:false,
catDialog: {
visible: false,
page: 1,
loading: null,
pagination: null,
list: null,
selectedList: null,
},
goodsDialog: {
visible: false,
page: 1,
catIndex: null,
catId: null,
loading: null,
pagination: null,
list: null,
selectedList: null,
keyword: null
},
goodsTags: [{
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);
},
cCatGoodsList(cat, catIndex) {
const goodsList = cat.goodsList;
let newList = [];
if (this.data.catPosition == 'top' && catIndex > 0) {
newList = [];
} else {
if (goodsList && goodsList.length) {
newList = goodsList;
} else {
const defaultGoodsItem = {
id: 0,
name: '商品名称',
picUrl: '',
price: '100.00',
};
newList = new Array(cat.goodsNum).fill(defaultGoodsItem);
}
}
return newList;
},
goodsTagChange(e) {
this.data.goodsTagPicUrl = e;
this.data.customizeGoodsTag = false;
},
catPositionChange(e) {
if (e === 'left') {
this.data.listStyle = -1;
}
},
customizeGoodsTagChange(e) {
this.data.goodsTagPicUrl = '';
this.data.customizeGoodsTag = true;
},
loadCatData() {
this.catDialog.loading = true;
this.catDialog.selectedList = null;
this.$request({
params: {
r: 'mall/cat/index',
page: this.catDialog.page,
}
}).then(response => {
this.catDialog.loading = false;
if (response.data.code === 0) {
let list = this.transCatList(response.data.data.list);
let newList = [];
for (let i in list) {
if (list[i].status == 1) {
newList.push(list[i]);
}
}
this.catDialog.list = newList;
// this.catDialog.pagination = response.data.data.pagination;
} else {}
}).catch(e => {});
},
transCatList(list) {
let newList = [];
for (let i in list) {
if (list[i].child && list[i].child.length) {
let listJ = list[i].child;
delete list[i].child;
newList.push(list[i]);
for (let j in listJ) {
if (listJ[j].child && listJ[j].child.length) {
let listK = listJ[j].child;
delete listJ[j].child;
newList.push(listJ[j]);
for (let k in listK) {
newList.push(listK[k]);
}
} else {
newList.push(listJ[j]);
}
}
} else {
newList.push(list[i]);
}
}
return newList;
},
catDialogPageChange(page) {
this.catDialog.page = page;
this.loadCatData();
},
catSelectionChange(e) {
this.catDialog.selectedList = e;
},
addCat() {
this.catDialog.visible = false;
for (let i in this.catDialog.selectedList) {
this.data.catList.push({
id: this.catDialog.selectedList[i].id,
name: this.catDialog.selectedList[i].name,
menuName: this.catDialog.selectedList[i].name,
goodsNum: 30,
staticGoods: false,
goodsList: [],
});
}
this.catDialog.selectedList = null;
},
deleteCat(index) {
this.data.catList.splice(index, 1);
},
loadGoodsData() {
this.goodsDialog.loading = true;
this.$request({
params: {
r: 'plugin/diy/mall/template/get-goods',
page: this.goodsDialog.page,
mch_id: 0,
cat_id: this.goodsDialog.catId,
keyword: this.goodsDialog.keyword
},
}).then(response => {
this.goodsDialog.loading = false;
if (response.data.code === 0) {
this.goodsDialog.list = response.data.data.list;
this.goodsDialog.pagination = response.data.data.pagination;
} else {}
}).catch(e => {});
},
goodsDialogPageChange(page) {
this.goodsDialog.page = page;
this.loadGoodsData();
},
showGoodsDialog(catIndex) {
if (catIndex !== null) {
this.goodsDialog.catIndex = catIndex;
this.goodsDialog.catId = this.data.catList[catIndex].id;
} else {
this.goodsDialog.catIndex = null;
this.goodsDialog.catId = null;
}
this.goodsDialog.visible = true;
},
goodsSelectionChange(e) {
this.goodsDialog.selectedList = e;
},
addGoods() {
this.goodsDialog.visible = false;
for (let i in this.goodsDialog.selectedList) {
console.log(this.goodsDialog.selectedList[i]);
const item = {
id: this.goodsDialog.selectedList[i].id,
name: this.goodsDialog.selectedList[i].name,
picUrl: this.goodsDialog.selectedList[i].cover_pic,
price: this.goodsDialog.selectedList[i].price,
};
if (this.goodsDialog.catIndex !== null) {
this.data.catList[this.goodsDialog.catIndex].goodsList.push(item);
} else {
this.data.list.push(item);
}
}
},
deleteGoods(goodsIndex, catIndex) {
if (catIndex !== null) {
this.data.catList[catIndex].goodsList.splice(goodsIndex, 1);
} else {
this.data.list.splice(goodsIndex, 1);
}
},
listStyleChange(listStyle) {
if (listStyle === -1 && this.data.textStyle === 2) {
this.data.textStyle = 1;
}
if (this.data.textStyle === 2 && this.data.buyBtn === 'text') {
this.data.buyBtn = 'cart';
}
},
catGoodsNumChange(catIndex) {
if (this.data.catList[catIndex].goodsNum > 30) {
this.data.catList[catIndex].goodsNum = 30;
}
if (this.data.catList[catIndex].goodsNum < 1) {
this.data.catList[catIndex].goodsNum = 1;
}
},
showCatChange(value) {
if (!value) {
this.data.catPosition = 'top';
}
},
//选择图片
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;
}
},
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}`
}
},
cMainFlex() {
if (this.data.catPosition === 'left') {
return 'dir:left box:first';
}
if (this.data.catPosition === 'top') {
return 'dir:top';
}
},
cCatFlex() {
if (this.data.catPosition === 'left') {
return 'dir:top';
}
if (this.data.catPosition === 'top') {
return 'dir:left';
}
},
cCatList() {
if (this.data.showCat) {
if (this.data.catList && this.data.catList.length) {
return this.data.catList;
} else {
const defaultCatItem = {
id: 0,
name: '分类名称',
menuName: '分类名称',
goodsList: [],
goodsNum: 3,
};
return [defaultCatItem, defaultCatItem];
}
} else {
return [{
id: null,
name: null,
menuName: null,
goodsList: this.data.list,
}];
}
},
cCatStyle() {},
cGoodsListStyle() {
if (this.data.listStyle === 0) {
return 'flex-wrap: nowrap;overflow-x:auto;';
} else {
return 'flex-wrap: wrap;';
}
},
cGoodsItemFlex() {
if (this.data.listStyle === -1) {
return 'dir:left box:first cross:center';
}
return 'dir:top';
},
cGoodsItemStyle() {
let style;
if (this.data.goodsStyle != 3) {
if (this.data.listStyle === -1) {
style = 'border: 1px solid #e2e2e2;border-radius:10px;background:#fff;'
} else {
style = 'border: 1px solid #e2e2e2;border-radius:10px;background:#fff;'
}
} else {
return style
}
if (this.data.goodsStyle === 2) {
return style
} else if (this.data.goodsStyle === 1) {
if (this.data.listStyle === -1) {
return 'border-radius:10px;background:#fff;'
} else {
return 'border-radius:10px;background:#fff;'
}
} else {
return 'background:#fff;';
}
},
cShowBuyBtn() {
if (!this.data.showBuyBtn) {
return false;
}
if (this.data.textStyle === 2 || this.data.listStyle === 0) {
return false;
}
return true;
},
cGoodsItemInfoStyle() {
let style = '';
if (this.data.textStyle === 2) {
style += `text-align: center;`;
}
if (this.data.listStyle === -1) {
style += `height: 200px;padding: 20px 24px 20px 32px;`;
} else {
style += `padding:24px 24px;`;
}
return style;
},
cGoodsItemWidth() {
if (this.data.listStyle === 0) {
return 'width: 200px;';
}
return 'width: 100%;';
},
cButtonStyle() {
console.log(this.data.buyBtnStyle);
let style =
`background: ${this.data.buttonColor};border-color: ${this.data.buttonColor};height:48px;line-height:46px;padding:0 20px;`;
if (this.data.buyBtnStyle === 3 || this.data.buyBtnStyle === 4) {
style += `border-radius:999px;`;
}
if (this.data.buyBtnStyle === 2 || this.data.buyBtnStyle === 4) {
style += `background:#fff;color:${this.data.buttonColor}`;
}
return style;
},
},
mounted() {
}
};
</script>
src/components/sallCenter/plugin/rubik.vue
View file @ 0938ab3f
<style> <style>
.diy-rubik .layout { .diy-rubik .layout {
width: 750px; width: 750px;
position: relative; position: relative;
} }
.diy-rubik .layout .rubik {
position: absolute; .diy-rubik .layout .rubik {
top: 0; position: absolute;
left: 0; top: 0;
border: 1px dashed #c9c9c9; left: 0;
cursor: pointer; border: 1px dashed #c9c9c9;
color: #c9c9c9; cursor: pointer;
z-index: 11; color: #c9c9c9;
} z-index: 11;
.diy-component-preview{ }
background-color: #fff;
} .diy-component-preview {
.diy-component-preview:hover { background-color: #fff;
box-shadow: inset 0 0 10000px rgba(0, 0, 0, .03); }
}
.diy-component-preview:hover {
box-shadow: inset 0 0 10000px rgba(0, 0, 0, .03);
}
.diy-rubik .block {
border: 1px solid #e0e0e0;
padding: 25px;
margin: 0 50px 50px 0;
zoom: 0.2;
text-align: center;
cursor: pointer;
}
.diy-rubik .rubik-list {
width: 750px;
height: 372px;
}
.diy-rubik .block.active {
border: 1px #5CB3FD solid;
}
.defaultImg {
background: url('../../../assets/img/default.png')
}
.diy-rubik .layout .rubik.active {
border: 1px solid #5CB3FD;
}
.app-gallery-item {
width: 100px;
height: 100px;
border: 1px solid #e3e3e3;
border-radius: 2px;
margin-right: 10px;
margin-bottom: 10px;
position: relative;
}
</style> </style>
<template> <template>
<div :class="{'active':rubData.isCked}"> <div :class="{'active':rubData.isCked}">
<div class="diy-component-options" v-if="rubData.isCked"> <div class="diy-component-options" v-if="rubData.isCked">
<el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;"></el-button> <el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;"></el-button>
<el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button> <el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button>
<el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)" style="right: -25px; top: 0;"></el-button> <el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)"
<el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)" style="right: -25px; top: 30px;"></el-button> style="right: -25px; top: 0;"></el-button>
</div> <el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)"
<div class="diy-rubik"> style="right: -25px; top: 30px;"></el-button>
<div class="diy-component-preview"> </div>
<div class="layout" style="height:360px;"> <div class="diy-rubik">
<div class="rubik" style="width:100%;height:100%;z-index:16;"></div> <div class="diy-component-preview">
<!-- <div flex="main:center cross:center" class="rubik" style="x: 0px; y: 0px; width: calc(100% - 0px); height: calc(100% - 0px); left: 0%; top: 0%;"> <div class="layout" :style="blockStyle(rubData.data.style)" :class="{'defaultImg':rubData.data.style==8}"
<span>宽度为750，不限高度</span> @click="blockClick">
</div> --> <div class="rubik" style="width:100%;height:100%;" @mousemove="blockMove"
</div> :style="rubData.isCked ? (isMove ? 'z-index: 12' : 'z-index: 10') : 'z-index: 16'"></div>
</div> <template v-for="(item, index) in cList">
<div class="diy-component-edit" v-if="rubData.isCked"> <div class="rubik" flex="main:center cross:center" :key="index+1" @click.stop="selectRubik(index)"
:class="rubik == index ? 'active' : ''" :style="layoutRubik(index)">
<template v-if="rubData.data.style == 8">
<el-button class="delete" v-show="index == rubik && !isMove" size="mini" type="danger"
icon="el-icon-close" circle @click.stop="deleteRubik(index)"></el-button>
</template>
<span v-if="!rubData.data.list[index].pic_url">{{rubikSize(index)}}</span>
<img v-else :src="'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+rubData.data.list[index].pic_url"
style="width: 100%;visibility: hidden;">
</div> </div>
<div class="rubik" :style="emptyStyle(index)" v-if="rubData.data.style == 8" :key="index"></div>
<img v-if="rubData.data.list[index].pic_url && rubData.data.style == 0"
:src="'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+rubData.data.list[index].pic_url"
:key="index" style="width: 100%;visibility: hidden;display: block">
</template>
</div> </div>
</div>
<div class="diy-component-edit" v-if="rubData.isCked">
<el-form label-width="100px">
<el-tabs v-model="activeName" type="card">
<el-tab-pane label="图片样式" name="first">
<el-form-item label="样式">
<div flex="dir:left" style="flex-wrap: wrap;">
<div class="block" @click="selectStyle(index)" :class="blockActive(index)"
v-for="(item,index) in style_list" :key="index">
<div class="rubik-list">
<img :src="item.icon" style="width: 750px; height: 360px;" alt="" />
</div>
<div style="font-size: 60px; margin: 30px;">{{item.name}}</div>
</div>
</div>
</el-form-item>
</el-tab-pane>
<el-tab-pane label="图片上传" name="second">
<el-form-item label="图片间隙" v-if="rubData.data.style > 0">
<el-input v-model="rubData.data.space" size="small" type="number" min="0" max="10">
<template slot="append">px</template>
</el-input>
</el-form-item>
<template v-if="rubData.data.style == 8">
<el-form-item label="魔方宽度">
<el-input v-model="rubData.data.w" size="small" type="number" min="0" max="10">
</el-input>
</el-form-item>
<el-form-item label="魔方高度">
<el-input v-model="rubData.data.h" size="small" type="number" min="0" max="10">
</el-input>
</el-form-item>
</template>
<template v-if="!rubData.data.list[rubik]">
<el-form-item label="图片上传">
<span>请先在左边选择图片位置</span>
</el-form-item>
</template>
<template v-else>
<el-card shadow="never">
<el-form-item label="图片上传">
<el-button size="mini" @click="choicImg=true">选择图片</el-button>
<div flex style="flex-wrap: wrap;" v-if="rubData.data.list[rubik].pic_url">
<div flex="main:center cross:center" class="app-gallery-item"
style="height: 100px; width: 100px;">
<img
:src="'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+rubData.data.list[rubik].pic_url"
style="width:100%;height:100%;">
</div>
</div>
</el-form-item>
<el-form-item label="选择链接">
<el-input size="small" v-model="rubData.data.list[rubik].link.name" :disabled="true">
<template slot="append">
<el-button @click="isShowLink=true">选择链接</el-button>
</template>
</el-input>
</el-form-item>
</el-card>
</template>
<el-form-item label="热区划分">
<choiceArea :multiple="true" :pic-list="rubData.data.list" :hotspot-array="rubData.data.hotspot"
width="750px" :height="rubData.data.height + 'px'" @confirm="selectHotspot" :is-link="true">
<el-button size="mini">划分热区</el-button>
</choiceArea>
</el-form-item>
</el-tab-pane>
</el-tabs>
</el-form>
</div>
</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> </template>
<script> <script>
import chooseMeun from "../../common/chooseMeun.vue";
import ChooseImg from "@/components/global/ChooseImg.vue";
import choiceArea from "../../common/choiceArea.vue";
export default { export default {
props: ["rubData","index","dataLeng"], props: ["rubData", "index", "dataLeng"],
data() { data() {
return { return {
rubik: 0,
init: true,
activeName: 'first',
link: '',
isMove: false,
zoom: 2, // 缩放倍数
choicImg: false,
isShowLink: false,
style_list: [{
name: '1张图',
height: 360,
w: 1,
h: 1,
list: [{
w: 1,
h: 1,
x: 0,
y: 0,
}, ],
icon: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/rubik-0.png',
},
{
name: '2张图',
height: 360,
w: 25,
h: 12,
list: [{
w: 10,
h: 12,
x: 0,
y: 0,
},
{
w: 15,
h: 12,
x: 10,
y: 0,
},
],
icon: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/rubik-1.png',
},
{
name: '3张图',
height: 360,
w: 25,
h: 12,
list: [{
w: 10,
h: 12,
x: 0,
y: 0,
},
{
w: 15,
h: 6,
x: 10,
y: 0,
},
{
w: 15,
h: 6,
x: 10,
y: 6,
},
],
icon: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/rubik-2.png',
},
{
name: '4张图',
height: 360,
w: 50,
h: 24,
list: [{
w: 20,
h: 24,
x: 0,
y: 0,
},
{
w: 30,
h: 12,
x: 20,
y: 0,
},
{
w: 15,
h: 12,
x: 20,
y: 12,
},
{
w: 15,
h: 12,
x: 35,
y: 12,
},
],
icon: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/rubik-3.png',
},
{
name: '2张图平分',
height: 240,
w: 50,
h: 16,
list: [{
w: 25,
h: 16,
x: 0,
y: 0,
},
{
w: 25,
h: 16,
x: 25,
y: 0,
},
],
icon: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/rubik-4.png',
},
{
name: '3张图平分',
height: 240,
w: 75,
h: 24,
list: [{
w: 25,
h: 24,
x: 0,
y: 0,
},
{
w: 25,
h: 24,
x: 25,
y: 0,
},
{
w: 25,
h: 24,
x: 50,
y: 0,
},
],
icon: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/rubik-5.png',
},
{
name: '4张图左右平分',
height: 186,
w: 4,
h: 1,
list: [{
w: 1,
h: 1,
x: 0,
y: 0,
},
{
w: 1,
h: 1,
x: 1,
y: 0,
},
{
w: 1,
h: 1,
x: 2,
y: 0,
},
{
w: 1,
h: 1,
x: 3,
y: 0,
},
],
icon: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/rubik-6.png',
},
{
name: '4张图上下平分',
height: 372,
w: 250,
h: 124,
list: [{
w: 125,
h: 62,
x: 0,
y: 0,
},
{
w: 125,
h: 62,
x: 125,
y: 0,
},
{
w: 125,
h: 62,
x: 0,
y: 62,
},
{
w: 125,
h: 62,
x: 125,
y: 62,
},
],
icon: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/rubik-7.png',
},
{
name: '自定义魔方',
height: 372,
w: 375,
h: 186,
list: [{},
{
w: 125,
h: 93,
x: 125,
y: 0,
},
{
w: 125,
h: 93,
x: 250,
y: 0,
},
{
w: 125,
h: 93,
x: 0,
y: 93,
},
{
w: 125,
h: 93,
x: 125,
y: 93,
},
{
w: 125,
h: 93,
x: 250,
y: 93,
},
],
icon: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/rubik-8.png',
},
]
}; };
}, },
created() { created() {},
components: {
ChooseImg,
chooseMeun,
choiceArea
},
computed: {
cList() {
return this.rubData.data.list
},
}, },
methods: { methods: {
// 魔方展示样式(preview) // 魔方展示样式(preview)
blockStyle(index) { blockStyle(index) {
// if (index === 8) { if (index === 8) {
// let per = 750 / this.data.w; let per = 750 / this.rubData.data.w;
// this.data.height = this.data.h * 750 / this.data.w; this.rubData.data.height = this.rubData.data.h * 750 / this.rubData.data.w;
// return `height: ${this.data.height}px;background-image: url('${this.img}');background-size: ${per}px ${per}px;`; return `height: ${this.rubData.data.height}px;background-size: ${per}px ${per}px;`;
// } else { } else {
// if (index === 0) { if (index === 0) {
// this.data.height = 'auto'; this.rubData.data.height = 'auto';
// return `height: ${this.data.list[0].pic_url ? 'auto' : '360px'}`; return `height: ${this.rubData.data.list[0].pic_url ? 'auto' : '360px'}`;
// } }
// return `height: ${this.style_list[index] ? this.style_list[index].height : 360}px`; return `height: ${this.style_list[index] ? this.style_list[index].height : 360}px`;
// } }
}, },
// 自定义魔方点击事件(preview)
blockClick(e) {
if (this.rubData.data.style < 8) {
return;
}
if (this.isMove) {
this.isMove = false;
this.rubData.data.list[this.rubik] ? this.rubData.data.list[this.rubik].zIndex = 11 : '';
} else {
this.isMove = true;
// 每一小格的宽度
let per = this.rubData.data.w > 0 && this.rubData.data.h > 0 ? 750 / this.rubData.data.w : 750;
// 每一小格宽度的百分比
let wPer = this.rubData.data.w > 0 ? 100 / this.rubData.data.w : 100;
// 每一小格高度的百分比
let hPer = this.rubData.data.h > 0 ? 100 / this.rubData.data.h : 100;
// x轴占多少格
let numberX = Math.floor(e.offsetX * this.zoom / per);
// y轴咱多少格
let numberY = Math.floor(e.offsetY * this.zoom / per);
for (let i in this.rubData.data.list) {
let _this = this.rubData.data.list[i];
if (numberX >= _this.x && numberX < _this.x + _this.w && numberY >= _this.y && numberY < _this.y + _this
.h) {
this.isMove = false;
return;
}
}
let block = {
backgroundColor: '#fff',
numberX: numberX,
numberY: numberY,
x: numberX,
y: numberY,
w: 1,
h: 1,
link: {}
};
this.rubData.data.list.push(JSON.parse(JSON.stringify(block)));
this.rubik = this.rubData.data.list.length - 1;
}
},
// 选择图片展示样式(edit)
selectStyle(index) {
this.rubData.data.style = index;
if (index === 8) {
this.rubData.data.list = [];
this.rubData.data.w = 1;
this.rubData.data.h = 1;
return;
}
let style = JSON.parse(JSON.stringify(this.style_list[index]));
for (let i in style.list) {
style.list[i].link = {};
}
this.rubData.data.height = style.height;
this.rubData.data.w = style.w;
this.rubData.data.h = style.h;
this.rubData.data.list = style.list;
this.rubData.data.hotspot = [];
},
// 图片展示样式选中(edit)
blockActive(index) {
return this.rubData.data.style === index ? 'active' : ''
},
// 图片选中事件(preview)
selectRubik(index) {
if (this.rubData.data.list && this.rubData.data.list[this.rubik]) {
this.rubData.data.list[this.rubik].zIndex = 11;
}
this.rubik = index;
this.isMove = false;
},
// 选中图片展示样式的展示(preview)
layoutRubik(index) {
let list = this.rubData.data.list;
if (!list) {
return '';
}
let style = list[index];
style = this.getStyle(style, this.rubData.data, true, true);
if (style.pic_url) {
style.backgroundImage = `url('http://viitto-1301420277.cos.ap-chengdu.myqcloud.com${style.pic_url}')`;
style.backgroundRepeat = 'no-repeat';
style.backgroundSize = 'cover';
style.backgroundPosition = 'center';
}
return style;
},
// 通过占比获取图片的宽度、高度、左边距、上边距
getStyle(block, list, isSpace = true, isPreview = false) {
let width = block.w * 100 / list.w + '%';
let height = block.h * 100 / list.h + '%';
let left = block.x * 100 / list.w + '%';
let top = block.y * 100 / list.h + '%';
if (isSpace) {
let space = this.rubData.data.space;
let wMultiple = 0;
let hMultiple = 0;
if (block.w < list.w) {
wMultiple += 1;
}
if (block.h < list.h) {
hMultiple += 1;
}
if (block.x > 0) {
left = `calc(${left} + ${space}px)`;
}
if (block.y > 0) {
top = `calc(${top} + ${space}px)`;
}
if (block.x + block.w < list.w && block.x > 0) {
wMultiple += 1;
}
if (block.y + block.h < list.h && block.y > 0) {
hMultiple += 1;
}
width = `calc(${width} - ${space * wMultiple}px)`;
height = `calc(${height} - ${space * hMultiple}px)`;
}
if (this.rubData.data.style === 0 && isPreview && this.rubData.data.list[0].pic_url) {
height = 'auto';
}
block.width = width;
block.height = height;
block.left = left;
block.top = top;
return block;
},
// 各个图片的尺寸标注(preview)
rubikSize(index) {
if (this.rubData.data.style <= -1) {
return '';
}
if (this.rubData.data.style == 0) {
return '宽度为750，不限高度';
}
let style = this.rubData.data;
let object = style.list[index];
return `${Math.ceil(object.w * 750 / style.w)}*${Math.ceil(object.h * 750 / style.w)}`;
},
emptyStyle(index) {
let list = JSON.parse(JSON.stringify(this.rubData.data.list));
if (!list) {
return '';
}
let style = list[index];
style = this.getStyle(style, this.rubData.data, false, true);
style.background = '#F7F7F7';
style.zIndex = 9;
style.border = 'none';
return style;
},
// 自定义魔方鼠标移动事件(preview)
blockMove(e) {
if (!this.isMove) {
return;
}
let per = this.rubData.data.w > 0 && this.rubData.data.h > 0 ? 750 / this.rubData.data.w : 750;
let wPer = this.rubData.data.w > 0 ? 100 / this.rubData.data.w : 100;
let hPer = this.rubData.data.h > 0 ? 100 / this.rubData.data.h : 100;
let future = this.rubData.data.list[this.rubik];
if (!future) {
return;
}
// x轴占多少格
let numberX = Math.floor(e.offsetX * this.zoom / per);
// y轴咱多少格
let numberY = Math.floor(e.offsetY * this.zoom / per);
let futureX = Math.min(numberX, future.numberX);
let futureY = Math.min(numberY, future.numberY);
let futureW = (Math.abs(numberX - future.numberX) + 1);
let futureH = (Math.abs(numberY - future.numberY) + 1);
for (let i in this.rubData.data.list) {
let _this = this.rubData.data.list[i];
if (i == this.rubik) {
continue;
}
if (futureX + futureW <= _this.x) {
continue;
} else if (futureX < _this.x && futureX + futureW > _this.x) {
if (futureH + futureY <= _this.y) {
continue;
} else if (futureY < _this.y && futureY + futureH > _this.y) {
futureH = _this.y - futureY;
} else if (futureY >= _this.y && futureY < _this.y + _this.h) {
futureW = _this.x - futureX;
} else {
continue;
}
} else if (futureX >= _this.x && futureX < _this.x + _this.w) {
if (futureY + futureH <= _this.y) {
continue;
} else if (futureY + futureH > _this.y && futureY < _this.y) {
futureH = _this.y - futureY;
} else if (futureY >= _this.y && futureY < _this.y + _this.h) {
return;
} else {
continue;
}
} else {
continue;
}
}
if (futureW == 0) {
return;
}
if (futureH == 0) {
return;
}
future.x = futureX;
future.y = futureY;
future.w = futureW;
future.h = futureH;
},
rubikLink() {
if (!this.rubData.data.list[this.rubik].link) {
Vue.set(this.rubData.data.list[this.rubik], 'link', {});
}
return this.rubData.data.list[this.rubik].link.name
},
//获取选择链接
getChoiceLink() {
//调用子组件方法
var obj = this.$refs.chooseMeun.getChooseMenu();
if (this.rubik < 0) {
return '';
}
if (this.rubData.data.list.length <= 0) {
return '';
}
this.rubData.data.list[this.rubik].link.name = obj.PageName;
this.isShowLink = false;
},
// 热区选择(edit)
selectHotspot(list) {
this.rubData.data.hotspot = list;
},
//选择图片
SelectId(msg) {
this.rubData.data.list[this.rubik].pic_url = msg.url;
this.choicImg = false;
},
//向父组件传值 并调用排序
resetSord(IsUp){
this.$emit('getSord', this.index,IsUp);
},
},
updated() {
this.init = false;
},
watch: {
'rubData.data.w': {
handler(newVal, oldVal) {
if (this.rubData.data.style == 8 && !this.init) {
this.rubData.data.list = [];
}
this.rubData.data.w = Math.max(newVal, 1);
if (this.rubData.data.style == 8) {
this.rubData.data.w = Math.min(this.rubData.data.w, 10)
}
},
},
'rubData.data.h': {
handler(newVal, oldVal) {
if (this.rubData.data.style == 8 && !this.init) {
this.rubData.data.list = [];
}
this.rubData.data.h = Math.max(newVal, 1);
if (this.rubData.data.style == 8) {
this.rubData.data.h = Math.min(this.rubData.data.h, 10)
}
},
},
'rubData.data.space': {
handler(newVal, oldVal) {
this.rubData.data.space = Math.min(Math.max(newVal, 0), 10);
},
},
rubik(newVal, oldVal) {
if (!this.isMove) {
this.rubData.data.list[newVal] ? this.rubData.data.list[newVal].zIndex = 12 : '';
this.rubData.data.list[oldVal] ? this.rubData.data.list[oldVal].zIndex = 11 : '';
}
},
space(newVal, oldVal) {
this.rubData.data.space = Math.max(newVal, 0);
for (let i in this.rubData.data.list) {
let block = this.rubData.data.list[i];
block = this.getStyle(block, this.rubData.data);
}
},
}, },
mounted() { mounted() {
......
src/components/sallCenter/templateEdit.vue
View file @ 0938ab3f
...@@ -196,6 +196,7 @@ ...@@ -196,6 +196,7 @@
<navigationIcon v-if="item.Id=='nav'" :navData="item" @getSord="getSord" :index="index" :dataLeng="dataList.length"></navigationIcon> <navigationIcon v-if="item.Id=='nav'" :navData="item" @getSord="getSord" :index="index" :dataLeng="dataList.length"></navigationIcon>
<banner v-if="item.Id=='banner'" :banData="item" @getSord="getSord" :index="index" :dataLeng="dataList.length"></banner> <banner v-if="item.Id=='banner'" :banData="item" @getSord="getSord" :index="index" :dataLeng="dataList.length"></banner>
<rubik v-if="item.Id=='rubik'" :rubData="item" @getSord="getSord" :index="index" :dataLeng="dataList.length"></rubik> <rubik v-if="item.Id=='rubik'" :rubData="item" @getSord="getSord" :index="index" :dataLeng="dataList.length"></rubik>
<goods v-if="item.Id=='goods'" :goodData="item" @getSord="getSord" :index="index" :dataLeng="dataList.length"></goods>
</div> </div>
</div> </div>
</div> </div>
...@@ -203,7 +204,7 @@ ...@@ -203,7 +204,7 @@
</div> </div>
</div> </div>
<div class="tpEdit_btmMenu"> <div class="tpEdit_btmMenu">
<el-button type="primary" size="small">保存</el-button> <el-button type="primary" size="small" @click="getAllData()">保存</el-button>
</div> </div>
</div> </div>
</template> </template>
...@@ -212,6 +213,7 @@ ...@@ -212,6 +213,7 @@
import navigationIcon from "../sallCenter/plugin/navigationIcon.vue" import navigationIcon from "../sallCenter/plugin/navigationIcon.vue"
import banner from "../sallCenter/plugin/banner.vue" import banner from "../sallCenter/plugin/banner.vue"
import rubik from "../sallCenter/plugin/rubik.vue" import rubik from "../sallCenter/plugin/rubik.vue"
import goods from "../sallCenter/plugin/goods.vue"
export default { export default {
data() { data() {
return { return {
...@@ -228,7 +230,8 @@ ...@@ -228,7 +230,8 @@
search, search,
navigationIcon, navigationIcon,
banner, banner,
rubik rubik,
goods,
}, },
methods: { methods: {
//获取左侧菜单 //获取左侧菜单
...@@ -283,7 +286,6 @@ ...@@ -283,7 +286,6 @@
} }
} }
this.dataList.push(navObj); this.dataList.push(navObj);
console.log(this.dataList,'this.dataList');
break; break;
case 'banner': case 'banner':
let banObj={ let banObj={
...@@ -314,6 +316,44 @@ ...@@ -314,6 +316,44 @@
} }
this.dataList.push(rubObj); this.dataList.push(rubObj);
break; break;
case 'goods':
let goodsObj={
Id:'goods',
isCked:false,
data:{
showCat: false,
catPosition: 'top',
catStyle: 1,
catList: [],
list: [],
addGoodsType: 0,
goodsLength: 10,
listStyle: 1,
goodsCoverProportion: '1-1',
fill: 1,
goodsStyle: 1,
textStyle: 1,
showGoodsName: true,
showGoodsPrice: true,
showBuyBtn: true,
buyBtn: 'cart',
buyBtnStyle: 1,
buyBtnText: '购买',
buttonColor: '#ff4544',
showGoodsTag: false,
customizeGoodsTag: false,
goodsTagPicUrl: '',
showImg: false,
backgroundColor: '#fff',
backgroundPicUrl: '',
position: 5,
mode: 1,
backgroundHeight: 100,
backgroundWidth: 100,
}
}
this.dataList.push(goodsObj);
break;
} }
}, },
//给子组件调用 重新排序上移下移 //给子组件调用 重新排序上移下移
...@@ -339,6 +379,10 @@ ...@@ -339,6 +379,10 @@
x.isCked=false; x.isCked=false;
}) })
item.isCked=true; item.isCked=true;
},
//点击保存
getAllData(){
console.log(this.dataList,'dataListtt');
} }
}, },
mounted() { mounted() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment