Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
A
apaas-ui
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
gzga-jzapi
apaas-ui
Commits
107005a7
Commit
107005a7
authored
May 14, 2020
by
刘殿昕
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
购物车
parent
379c619d
Changes
4
Show whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
257 additions
and
192 deletions
+257
-192
src/components/shopping-cart/shopping-cart-cell.vue
src/components/shopping-cart/shopping-cart-cell.vue
+40
-19
src/components/shopping-cart/shopping-cart-com.vue
src/components/shopping-cart/shopping-cart-com.vue
+192
-11
src/components/shopping-cart/shopping-cart-list.vue
src/components/shopping-cart/shopping-cart-list.vue
+25
-89
src/components/shopping-cart/shopping-cart-options.vue
src/components/shopping-cart/shopping-cart-options.vue
+0
-73
No files found.
src/components/shopping-cart/shopping-cart-cell.vue
View file @
107005a7
...
...
@@ -15,7 +15,7 @@
/>
<div
class=
"shopping_cell_msg"
>
<div
class=
"shopping_cell_name"
>
{{
cellItem
.
name
+
ccce
}}
{{
cellItem
.
name
}}
<span
v-if=
"cellItem.mapService"
class=
"tags map_service"
...
...
@@ -34,31 +34,33 @@
<el-col
:span=
"5"
>
<div
class=
"shopping_cell_specification"
>
<div
class=
"shopping_cell_specification_val"
>
<div
class=
"shopping_cell_specification_val_specification"
>
规格:
访问次数:20/日,访问量:100/日
</div>
<div
class=
"shopping_cell_specification_val_type"
>
申请方式:
按月
</div>
<div
class=
"shopping_cell_specification_val_specification"
>
规格:
{{
specificationBtns
[
specification
]
}}
</div>
<div
class=
"shopping_cell_specification_val_type"
>
申请方式:
{{
specificationApplicationBtns
[
specificationApplication
]
}}
</div>
<div
class=
"shopping_cell_specification_edit"
>
<el-popover
placement=
"right"
width=
"280"
v-model=
"visible"
>
<el-popover
placement=
"right"
width=
"280"
v-model=
"visible"
@
after-leave=
"setSpecificationPop"
>
<div>
<div
class=
"shopping_cell_specification_title"
>
规格:
</div>
<div>
<el-button
v-for=
"(item, index) in specificationBtns"
:key=
"'specification' + index"
:class=
"specification == index ? 'shopping_cell_specification_btn active' : 'shopping_cell_specification_btn'"
:class=
"specification
Pop
== index ? 'shopping_cell_specification_btn active' : 'shopping_cell_specification_btn'"
size=
"mini"
>
{{
item
}}
</el-button>
@
click=
"changeSpecification(index)"
>
{{
index
+
1
+
"
.
"
+
item
}}
</el-button>
</div>
<div
class=
"shopping_cell_specification_title"
>
申请方式:
</div>
<div>
<el-button
v-for=
"(item, index) in specificationApplicationBtns"
:key=
"'specification' + index"
:class=
"specificationApplication == index ? 'shopping_cell_specification_btn active' : 'shopping_cell_specification_btn'"
:class=
"specificationApplication
Pop
== index ? 'shopping_cell_specification_btn active' : 'shopping_cell_specification_btn'"
size=
"mini"
>
{{
item
}}
</el-button>
@
click=
"changeSpecificationApplication(index)"
>
{{
item
}}
购买
</el-button>
</div>
</div>
<div
style=
"text-align: right; margin: 0
"
>
<div
class=
"pop_footer
"
>
<el-button
class=
"shopping_cell_specification_cancel"
size=
"mini"
...
...
@@ -68,7 +70,7 @@
<el-button
class=
"shopping_cell_specification_submit"
size=
"mini"
@
click=
"
visible = false
"
@
click=
"
submitPop
"
>
确定
</el-button>
</div>
<el-button
v-if=
"!readOnly"
circle
size=
"mini"
slot=
"reference"
>
...
...
@@ -108,9 +110,8 @@ export default {
}
},
watch
:
{
cellCheck
(
newV
,
oldV
)
{
// do something
console
.
log
(
newV
,
oldV
);
cellCheck
:
function
(
val
)
{
this
.
checkedItem
=
val
;
}
},
data
:
()
=>
({
...
...
@@ -121,18 +122,34 @@ export default {
visible
:
false
,
specification
:
1
,
specificationApplication
:
0
,
specificationPop
:
1
,
specificationApplicationPop
:
0
,
specificationBtns
:
[
"
1.
访问次数:20/日 访问量:100/日
"
,
"
2.
访问次数:200/日 访问量:1000/日
"
,
"
3.
访问次数:无上限 访问量:无上限
"
"
访问次数:20/日 访问量:100/日
"
,
"
访问次数:200/日 访问量:1000/日
"
,
"
访问次数:无上限 访问量:无上限
"
],
specificationApplicationBtns
:
[
"
按月
购买
"
,
"
按年购买
"
]
specificationApplicationBtns
:
[
"
按月
"
,
"
按年
"
]
}),
computed
:
{},
watch
:
{},
methods
:
{
getState
(
val
)
{
this
.
$emit
(
"
changeState
"
,
{
state
:
val
,
index
:
this
.
cellIndex
});
},
changeSpecification
(
val
)
{
this
.
specificationPop
=
val
;
},
changeSpecificationApplication
(
val
)
{
this
.
specificationApplicationPop
=
val
;
},
submitPop
()
{
this
.
specification
=
this
.
specificationPop
;
this
.
specificationApplication
=
this
.
specificationApplicationPop
;
this
.
visible
=
false
;
},
setSpecificationPop
()
{
this
.
specificationPop
=
this
.
specification
;
this
.
specificationApplicationPop
=
this
.
specificationApplication
;
}
},
mounted
()
{}
...
...
@@ -286,6 +303,10 @@ export default {
.shopping_cell_specification_cancel
{
color
:
#58617a
;
}
.pop_footer
{
text-align
:
right
;
margin
:
30px
5px
5px
;
}
</
style
>
<
style
>
.shopping_cell_specification_edit
.el-button
{
...
...
@@ -316,7 +337,7 @@ export default {
color
:
#8890a7
;
}
.shopping_cell_options
.el-checkbox__input.is-checked
+
.el-checkbox__label
{
color
:
#
68708
7
;
color
:
#
58607
7
;
}
.shopping_cell_options
.el-checkbox__inner
:hover
{
border-color
:
#d0d6f4
;
...
...
src/components/shopping-cart/shopping-cart-com.vue
View file @
107005a7
<
template
>
<div>
<div
class=
"shopping_list shopping_list_all"
>
<ShoppingCartList
:showHead=
"true"
:readOnly=
"false"
class=
"shopping_all_list"
/>
<div
class=
"shopping_all_head"
>
<el-row>
<el-col
:span=
"2"
class=
"shopping_all_head_item"
>
<el-checkbox
v-model=
"checkShopAll"
@
change=
"checkAll"
>
全选
</el-checkbox>
</el-col>
<el-col
:span=
"9"
class=
"shopping_all_head_item"
>
服务信息
</el-col>
<el-col
:span=
"5"
class=
"shopping_all_head_item"
>
规格
</el-col>
<el-col
:span=
"4"
class=
"shopping_all_head_item"
>
数量
</el-col>
<el-col
:span=
"4"
class=
"shopping_all_head_item"
>
操作
</el-col>
</el-row>
</div>
<ShoppingCartList
ref=
"shoppingList"
:checkShopAll=
"checkShopAll"
:list=
"list"
:checkList=
"checkList"
:readOnly=
"false"
@
changeState=
"changeState"
class=
"shopping_all_list"
/>
</div>
<div
class=
"shopping_list shopping_list_fail"
>
<div
class=
"expired_service"
>
已失效服务
</div>
<ShoppingCartList
:
showHead=
"false"
:
readOnly=
"true"
class=
"shopping_all_list"
/>
<ShoppingCartList
:readOnly=
"true"
class=
"shopping_all_list"
/>
</div>
<div
class=
"shopping_list shopping_list_options"
>
<ShoppingCartOptions
/>
<div
class=
"shopping_cart_options"
>
<el-row>
<el-col
:span=
"2"
class=
"shopping_cart_options_cell"
>
<el-checkbox
v-model=
"checkShopAll"
@
change=
"checkAll"
>
全选
</el-checkbox>
</el-col>
<el-col
:span=
"3"
class=
"shopping_cart_options_del"
>
<span
v-if=
"getNum == 0"
class=
"shopping_cart_options_del_service"
>
删除选中服务
</span>
<span
v-else
@
click=
"delSelectService"
class=
"shopping_cart_options_del_service_act"
>
删除选中服务
</span>
</el-col>
<el-col
:span=
"15"
class=
"shopping_cart_options_num"
>
共
{{
checkList
.
length
}}
项服务,已选择
<span>
{{
getNum
}}
</span>
项
</el-col>
<el-col
:span=
"4"
class=
"shopping_cart_options_cell"
>
<el-button
v-if=
"getNum == 0"
:disabled=
"true"
class=
"shopping_cart_options_cell_btn"
>
一键申请
</el-button>
<el-button
v-else
class=
"shopping_cart_options_cell_btn_act"
>
一键申请
</el-button>
</el-col>
</el-row>
</div>
</div>
</div>
</
template
>
<
script
>
import
ShoppingCartList
from
"
@/components/shopping-cart/shopping-cart-list
"
;
import
ShoppingCartOptions
from
"
@/components/shopping-cart/shopping-cart-options
"
;
export
default
{
components
:
{
ShoppingCartList
,
ShoppingCartOptions
ShoppingCartList
},
props
:
{},
data
:
()
=>
({
checkShopAll
:
false
,
checkList
:
[
false
,
false
,
false
],
list
:
[
{
id
:
0
,
name
:
"
水路货物周转量情况
"
,
type
:
"
基础数据服务
"
,
creator
:
"
贵州省交通运输厅0
"
,
state
:
1
,
mapService
:
1
},
{
id
:
1
,
name
:
"
水路货物周转量情况水路货物周水路货物周转量情况水路货物周
"
,
type
:
"
基础数据服务
"
,
creator
:
"
贵州省交通运输厅1
"
,
state
:
1
},
{
id
:
2
,
name
:
"
水路货物周转量情况水路货物周转量情况
"
,
type
:
"
基础数据服务
"
,
creator
:
"
贵州省交通运输厅2
"
,
state
:
1
,
mapService
:
1
}
]
}),
mounted
()
{},
methods
:
{}
computed
:
{
getNum
()
{
let
num
=
this
.
checkList
.
reduce
(
(
a
,
v
)
=>
(
v
===
true
?
a
+
1
:
a
+
0
),
0
);
return
num
;
}
},
methods
:
{
checkAll
(
val
)
{
this
.
$refs
.
shoppingList
.
setAllState
(
val
);
},
changeState
(
val
)
{
console
.
log
(
val
);
this
.
$set
(
this
.
checkList
,
val
.
index
,
val
.
state
);
if
(
this
.
checkList
.
indexOf
(
false
)
==
-
1
)
{
this
.
checkShopAll
=
true
;
}
else
{
this
.
checkShopAll
=
false
;
}
},
delSelectService
()
{
this
.
checkList
.
forEach
((
item
,
index
)
=>
{
if
(
item
===
true
)
{
console
.
log
(
this
.
list
[
index
]);
}
});
}
}
};
</
script
>
<
style
scoped
>
...
...
@@ -38,7 +132,6 @@ export default {
margin-bottom
:
20px
;
}
.shopping_list_all
{
}
.shopping_list_fail
{
}
...
...
@@ -61,4 +154,92 @@ export default {
line-height
:
28px
;
background-color
:
#eff1f8
;
}
.shopping_cart_options
{
height
:
80px
;
padding
:
0
20px
;
font-weight
:
700
;
line-height
:
80px
;
}
.shopping_cart_options_cell
{
text-align
:
center
;
}
.shopping_cart_options_del
{
}
.shopping_cart_options_del_service
{
color
:
#c8d0e7
;
}
.shopping_cart_options_del_service_act
{
cursor
:
pointer
;
color
:
#0f2683
;
}
.shopping_cart_options_num
{
text-align
:
right
;
font-size
:
14px
;
font-weight
:
500
;
color
:
#58617a
;
}
.shopping_cart_options_num
span
{
color
:
#e56600
;
}
.shopping_cart_options_cell_btn
{
width
:
90%
;
margin
:
0
10%
;
}
.shopping_cart_options_cell_btn_act
{
width
:
90%
;
margin
:
0
10%
;
background-color
:
#e56600
;
color
:
#fcefd6
;
}
.shopping_all_head
{
background-color
:
#e5f0ff
;
height
:
48px
;
padding
:
0
20px
;
font-weight
:
700
;
line-height
:
48px
;
}
.shopping_all_head_item
{
text-align
:
center
;
}
.shopping_list_page
{
padding
:
10px
20px
0
;
}
</
style
>
<
style
>
.shopping_cart_options_cell
.el-checkbox
{
font-weight
:
700
;
}
.shopping_cart_options_cell
.el-checkbox__inner
:hover
{
border-color
:
#626de9
;
}
.shopping_cart_options_cell
.el-checkbox__input.is-focus
.el-checkbox__inner
{
border-color
:
#626de9
;
}
.shopping_cart_options_cell
.el-checkbox__input.is-checked
.el-checkbox__inner
,
.el-checkbox__input.is-indeterminate
.el-checkbox__inner
{
background-color
:
#626de9
;
border-color
:
#626de9
;
}
.shopping_cart_options_cell
.el-checkbox__input.is-checked
+
.el-checkbox__label
{
color
:
#626de9
;
}
.shopping_all_head_item
.el-checkbox
{
font-weight
:
700
;
}
.shopping_all_head_item
.el-checkbox__inner
:hover
{
border-color
:
#626de9
;
}
.shopping_all_head_item
.el-checkbox__input.is-focus
.el-checkbox__inner
{
border-color
:
#626de9
;
}
.shopping_all_head_item
.el-checkbox__input.is-checked
.el-checkbox__inner
,
.el-checkbox__input.is-indeterminate
.el-checkbox__inner
{
background-color
:
#626de9
;
border-color
:
#626de9
;
}
.shopping_all_head_item
.el-checkbox__input.is-checked
+
.el-checkbox__label
{
color
:
#626de9
;
}
</
style
>
src/components/shopping-cart/shopping-cart-list.vue
View file @
107005a7
<
template
>
<div>
<div
v-if=
"showHead"
class=
"shopping_all_head"
>
<el-row>
<el-col
:span=
"2"
class=
"shopping_all_head_item"
>
<el-checkbox
v-model=
"checkedAll"
@
change=
"checkAll"
>
全选
</el-checkbox>
</el-col>
<el-col
:span=
"9"
class=
"shopping_all_head_item"
>
服务信息
</el-col>
<el-col
:span=
"5"
class=
"shopping_all_head_item"
>
规格
</el-col>
<el-col
:span=
"4"
class=
"shopping_all_head_item"
>
数量
</el-col>
<el-col
:span=
"4"
class=
"shopping_all_head_item"
>
操作
</el-col>
</el-row>
</div>
<div
class=
"shopping_list_page"
>
<ShoppingCartCell
v-for=
"(item, index) in list"
:cellItem=
"item"
:cellIndex=
"index"
:cellCheck=
"checkList[index]"
:cellCheck=
"checkList
s
[index]"
:key=
"item.id"
:readOnly=
"readOnly"
@
changeState=
"changeState"
...
...
@@ -32,97 +21,44 @@ export default {
ShoppingCartCell
},
props
:
{
showHead
:
{
type
:
Boolean
,
default
:
false
},
readOnly
:
{
type
:
Boolean
,
default
:
false
}
},
data
:
()
=>
({
checkedAll
:
false
,
checkList
:
[
false
,
false
,
false
],
list
:
[
{
id
:
0
,
name
:
"
水路货物周转量情况
"
,
type
:
"
基础数据服务
"
,
creator
:
"
贵州省交通运输厅0
"
,
state
:
1
,
mapService
:
1
checkShopAll
:
{
type
:
Boolean
},
{
id
:
1
,
name
:
"
水路货物周转量情况水路货物周水路货物周转量情况水路货物周
"
,
type
:
"
基础数据服务
"
,
creator
:
"
贵州省交通运输厅1
"
,
state
:
1
list
:
{
type
:
Array
},
{
id
:
2
,
name
:
"
水路货物周转量情况水路货物周转量情况
"
,
type
:
"
基础数据服务
"
,
creator
:
"
贵州省交通运输厅2
"
,
state
:
1
,
mapService
:
1
checkList
:
{
type
:
Array
,
default
:
()
=>
{[]}
}
]
},
watch
:
{
checkList
:
{
immediate
:
true
,
// 这句重要
handler
(
val
)
{
console
.
log
(
"
ss
"
)
this
.
checkLists
=
val
;
}
}
},
data
:
()
=>
({
checkedAll
:
false
,
checkLists
:
[]
}),
mounted
()
{},
methods
:
{
changeState
(
val
)
{
console
.
log
(
val
)
this
.
checkList
[
val
.
index
]
=
val
.
state
;
console
.
log
(
this
.
checkList
)
if
(
this
.
checkList
.
indexOf
(
false
)
==
-
1
)
{
this
.
checkedAll
=
true
;
}
else
{
this
.
checkedAll
=
false
;
}
this
.
$emit
(
"
changeState
"
,
val
);
},
checkAll
(
val
)
{
console
.
log
(
val
)
for
(
let
i
=
0
;
i
<
this
.
checkList
.
length
;
i
++
)
{
this
.
checkList
[
i
]
=
val
;
setAllState
(
val
)
{
for
(
let
i
=
0
;
i
<
this
.
checkLists
.
length
;
i
++
)
{
this
.
$set
(
this
.
checkLists
,
i
,
val
)
}
console
.
log
(
this
.
checkList
)
}
}
};
</
script
>
<
style
scoped
>
.shopping_all_head
{
background-color
:
#e5f0ff
;
height
:
48px
;
padding
:
0
20px
;
font-weight
:
700
;
line-height
:
48px
;
}
.shopping_all_head_item
{
text-align
:
center
;
}
.shopping_list_page
{
padding
:
10px
20px
0
;
}
</
style
>
<
style
>
.shopping_all_head_item
.el-checkbox
{
font-weight
:
700
;
}
.shopping_all_head_item
.el-checkbox__inner
:hover
{
border-color
:
#626de9
;
}
.shopping_all_head_item
.el-checkbox__input.is-focus
.el-checkbox__inner
{
border-color
:
#626de9
;
}
.shopping_all_head_item
.el-checkbox__input.is-checked
.el-checkbox__inner
,
.el-checkbox__input.is-indeterminate
.el-checkbox__inner
{
background-color
:
#626de9
;
border-color
:
#626de9
;
}
.shopping_all_head_item
.el-checkbox__input.is-checked
+
.el-checkbox__label
{
color
:
#626de9
;
}
</
style
>
\ No newline at end of file
src/components/shopping-cart/shopping-cart-options.vue
deleted
100644 → 0
View file @
379c619d
<
template
>
<div
class=
"shopping_cart_options"
>
<el-row>
<el-col
:span=
"2"
class=
"shopping_cart_options_cell"
>
<el-checkbox
v-model=
"checkedAll"
>
全选
</el-checkbox>
</el-col>
<el-col
:span=
"3"
class=
"shopping_cart_options_del"
>
删除选中服务
</el-col>
<el-col
:span=
"15"
class=
"shopping_cart_options_num"
>
共 4 项服务,已选择
<span>
3
</span>
项
</el-col>
<el-col
:span=
"4"
class=
"shopping_cart_options_cell"
>
<el-button
class=
"shopping_cart_options_cell_btn"
>
一键申请
</el-button>
</el-col>
</el-row>
</div>
</
template
>
<
script
>
export
default
{
components
:
{},
props
:
{},
data
:
()
=>
({
checkedAll
:
false
}),
mounted
()
{},
methods
:
{}
};
</
script
>
<
style
scoped
>
.shopping_cart_options
{
height
:
80px
;
padding
:
0
20px
;
font-weight
:
700
;
line-height
:
80px
;
}
.shopping_cart_options_cell
{
text-align
:
center
;
}
.shopping_cart_options_del
{
color
:
#0f2683
;
}
.shopping_cart_options_num
{
text-align
:
right
;
font-size
:
14px
;
font-weight
:
500
;
color
:
#58617a
;
}
.shopping_cart_options_num
span
{
color
:
#e56600
;
}
.shopping_cart_options_cell_btn
{
width
:
90%
;
margin
:
0
10%
;
background-color
:
#e56600
;
color
:
#fcefd6
;
}
</
style
>
<
style
>
.shopping_cart_options_cell
.el-checkbox
{
font-weight
:
700
;
}
.shopping_cart_options_cell
.el-checkbox__inner
:hover
{
border-color
:
#626de9
;
}
.shopping_cart_options_cell
.el-checkbox__input.is-focus
.el-checkbox__inner
{
border-color
:
#626de9
;
}
.shopping_cart_options_cell
.el-checkbox__input.is-checked
.el-checkbox__inner
,
.el-checkbox__input.is-indeterminate
.el-checkbox__inner
{
background-color
:
#626de9
;
border-color
:
#626de9
;
}
.shopping_cart_options_cell
.el-checkbox__input.is-checked
+
.el-checkbox__label
{
color
:
#626de9
;
}
</
style
>
\ No newline at end of file
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