Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
E
ElectricitySheep
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
黄媛媛
ElectricitySheep
Commits
0938ab3f
Commit
0938ab3f
authored
May 07, 2020
by
zhengke
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
增加
parent
95398f16
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
2096 additions
and
58 deletions
+2096
-58
choiceArea.vue
src/components/common/choiceArea.vue
+383
-0
goods.vue
src/components/sallCenter/plugin/goods.vue
+922
-0
rubik.vue
src/components/sallCenter/plugin/rubik.vue
+744
-55
templateEdit.vue
src/components/sallCenter/templateEdit.vue
+47
-3
No files found.
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
()
{
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment