Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
momo的小宝贝
vue2-elm
提交
bf6ccda3
V
vue2-elm
项目概览
momo的小宝贝
/
vue2-elm
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue2-elm
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
bf6ccda3
编写于
2月 08, 2017
作者:
M
maguohua
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
updata cart
上级
7f7da37b
变更
4
显示空白变更内容
内联
并排
Showing
4 changed file
with
76 addition
and
36 deletion
+76
-36
README.md
README.md
+1
-1
src/components/common/buyCart.vue
src/components/common/buyCart.vue
+44
-21
src/page/shop/shop.vue
src/page/shop/shop.vue
+5
-5
src/store/mutations.js
src/store/mutations.js
+26
-9
未找到文件。
README.md
浏览文件 @
bf6ccda3
...
...
@@ -2,7 +2,7 @@
vue2的发布后自己也研究了一段时间,奈何公司的技术栈是以react为主,没有机会好好利用vue2去做一个完整的项目。虽然写了几个demo,但和写一个完整的项目还是有很大差别的。于是自己想着用空余的时间写一个项目,选择了饿了么也只是因为经常用,熟悉它的布局。之前的饿了么官网是用angular写的,最近才发现原来这段时间改成了vue1,看来饿了么也入了vue的坑。
既然要写一个完整的项目,就要认真对待,
除了付款其他所有功能都尽可能的实现,包括登陆、注册
、加入购物车、下单等等,也包括所有我能注意到的细节也都一并做出来,所以这绝对算是一个比较大的项目。
既然要写一个完整的项目,就要认真对待,
所以除了付款其他所有功能都尽可能的实现,包括登陆、注册、搜索
、加入购物车、下单等等,也包括所有我能注意到的细节也都一并做出来,所以这绝对算是一个比较大的项目。
首先遇到的问题当然是跨域,我们启动本地服务器是获取不到官网数据的,这是跨域的。当然解决的方法很多,jsonp,nginx反向代理,webpack-dev-server的proxy。这里我用的是 http-proxy-middleware 其实它们的原理是一样的。
...
...
src/components/common/buyCart.vue
浏览文件 @
bf6ccda3
...
...
@@ -2,19 +2,29 @@
<section
class=
"cart_module"
>
<section
v-if=
"!foods.specifications.length"
class=
"cart_button"
>
<transition
name=
"showReduce"
>
<svg
class=
"cart_minus"
@
click=
"removeOutCart(foods.category_id, foods.item_id, foods.specfoods[0].food_id)"
v-if=
"foodNum"
>
<svg
class=
"cart_minus"
@
click=
"removeOutCart(foods.category_id, foods.item_id, foods.specfoods[0].food_id
, foods.specfoods[0].name, foods.specfoods[0].price, ''
)"
v-if=
"foodNum"
>
<use
xmlns:xlink=
"http://www.w3.org/1999/xlink"
xlink:href=
"#cart-minus"
></use>
</svg>
</transition>
<transition
name=
"
showNum
"
>
<transition
name=
"
fade
"
>
<span
class=
"cart_num"
v-if=
"foodNum"
>
{{
foodNum
}}
</span>
</transition>
<svg
class=
"cart_add"
@
click=
"addToCart(foods.category_id, foods.item_id, foods.specfoods[0].food_id)"
>
<svg
class=
"cart_add"
@
click=
"addToCart(foods.category_id, foods.item_id, foods.specfoods[0].food_id
, foods.specfoods[0].name, foods.specfoods[0].price, ''
)"
>
<use
xmlns:xlink=
"http://www.w3.org/1999/xlink"
xlink:href=
"#cart-add"
></use>
</svg>
</section>
<section
v-else
class=
"choose_specification"
>
选规格
<section>
<transition
name=
"fade"
>
<div
class=
"specs_cover"
></div>
</transition>
<transition
name=
"fade"
>
<div
class=
"specs_list"
>
foods
</div>
</transition>
</section>
</section>
</section>
</
template
>
...
...
@@ -24,6 +34,7 @@
data
(){
return
{
foodNum
:
0
,
showSpecs
:
false
,
}
},
created
(){
...
...
@@ -31,21 +42,21 @@
},
props
:[
'
foods
'
,
'
shopCart
'
,
'
index
'
],
methods
:
{
removeOutCart
(
category_id
,
item_id
,
food_id
){
removeOutCart
(
category_id
,
item_id
,
food_id
,
name
,
price
,
specs
){
if
(
this
.
foodNum
>
0
)
{
this
.
foodNum
--
;
this
.
$emit
(
'
reduce
'
,
category_id
,
item_id
,
food_id
,
this
.
index
);
this
.
$emit
(
'
reduce
'
,
category_id
,
item_id
,
food_id
,
this
.
index
,
name
,
price
,
specs
);
}
},
addToCart
(
category_id
,
item_id
,
food_id
){
addToCart
(
category_id
,
item_id
,
food_id
,
name
,
price
,
specs
){
this
.
foodNum
++
;
this
.
$emit
(
'
add
'
,
category_id
,
item_id
,
food_id
,
this
.
index
);
this
.
$emit
(
'
add
'
,
category_id
,
item_id
,
food_id
,
this
.
index
,
name
,
price
,
specs
);
},
getIintNum
(
category_id
,
item_id
){
if
(
this
.
shopCart
&&
this
.
shopCart
[
category_id
]
&&
this
.
shopCart
[
category_id
][
item_id
])
{
let
num
=
0
;
Object
.
values
(
this
.
shopCart
[
category_id
][
item_id
]).
forEach
((
item
,
index
)
=>
{
num
+=
item
;
num
+=
item
.
num
;
})
return
num
;
}
else
{
...
...
@@ -62,19 +73,6 @@
.cart_button
{
display
:
flex
;
align-items
:
center
;
.showReduce-enter-active
,
.showReduce-leave-active
{
transition
:
all
.5s
ease-out
;
}
.showReduce-enter
,
.showReduce-leave-active
{
opacity
:
0
;
transform
:
translateX
(
1rem
);
}
.showNum-enter-active
,
.showNum-leave-active
{
transition
:
all
.5s
;
}
.showNum-enter
,
.showNum-leave-active
{
opacity
:
0
;
}
svg
{
@include
wh
(
.8rem
,
.8rem
);
fill
:
#3190e8
;
...
...
@@ -91,6 +89,31 @@
background-color
:
$blue
;
border-radius
:
0
.5rem
;
border
:
1px
solid
$blue
;
.specs_cover
{
position
:
fixed
;
top
:
0
;
left
:
0
;
right
:
0
;
bottom
:
0
;
background-color
:
rgba
(
0
,
0
,
0
,.
03
);
z-index
:
17
;
}
.specs_list
{
}
}
}
.showReduce-enter-active
,
.showReduce-leave-active
{
transition
:
all
.5s
ease-out
;
}
.showReduce-enter
,
.showReduce-leave-active
{
opacity
:
0
;
transform
:
translateX
(
1rem
);
}
.fade-enter-active
,
.fade-leave-active
{
transition
:
all
.5s
;
}
.fade-enter
,
.fade-leave-active
{
opacity
:
0
;
}
</
style
>
src/page/shop/shop.vue
浏览文件 @
bf6ccda3
...
...
@@ -278,14 +278,14 @@
this
.
TitleDetailIndex
=
index
;
}
},
addToCart
(
category_id
,
item_id
,
food_id
,
index
){
this
.
ADD_CART
({
shopid
:
this
.
shopId
,
category_id
,
item_id
,
food_id
});
addToCart
(
category_id
,
item_id
,
food_id
,
index
,
name
,
price
,
specs
){
this
.
ADD_CART
({
shopid
:
this
.
shopId
,
category_id
,
item_id
,
food_id
,
name
,
price
,
specs
});
let
num
=
this
.
categoryNum
[
index
];
num
++
;
this
.
categoryNum
.
splice
(
index
,
1
,
num
);
},
removeOutCart
(
category_id
,
item_id
,
food_id
,
index
){
this
.
REDUCE_CART
({
shopid
:
this
.
shopId
,
category_id
,
item_id
,
food_id
});
removeOutCart
(
category_id
,
item_id
,
food_id
,
index
,
name
,
price
,
specs
){
this
.
REDUCE_CART
({
shopid
:
this
.
shopId
,
category_id
,
item_id
,
food_id
,
name
,
price
,
specs
});
let
num
=
this
.
categoryNum
[
index
];
num
--
;
this
.
categoryNum
.
splice
(
index
,
1
,
num
);
...
...
@@ -297,7 +297,7 @@
let
num
=
0
;
Object
.
values
(
this
.
shopCart
[
item
.
foods
[
0
].
category_id
]).
forEach
(
item
=>
{
Object
.
values
(
item
).
forEach
(
insetitem
=>
{
num
+=
insetitem
;
num
+=
insetitem
.
num
;
})
})
newArr
[
index
]
=
num
;
...
...
src/store/mutations.js
浏览文件 @
bf6ccda3
...
...
@@ -8,35 +8,52 @@ export default {
state
.
longitude
=
longitude
;
},
// 加入购物车
[
ADD_CART
]
(
state
,
{
shopid
,
category_id
,
item_id
,
food_id
})
{
[
ADD_CART
]
(
state
,
{
shopid
,
category_id
,
item_id
,
food_id
,
name
,
price
,
specs
})
{
let
cart
=
state
.
cartList
;
if
(
cart
[
shopid
]
&&
cart
[
shopid
][
category_id
]
&&
cart
[
shopid
][
category_id
][
item_id
]
&&
cart
[
shopid
][
category_id
][
item_id
][
food_id
])
{
cart
[
shopid
][
category_id
][
item_id
][
food_id
]
++
;
cart
[
shopid
][
category_id
][
item_id
][
food_id
]
[
'
num
'
]
++
;
}
else
if
(
cart
[
shopid
]
&&
cart
[
shopid
][
category_id
]
&&
cart
[
shopid
][
category_id
][
item_id
]){
cart
[
shopid
][
category_id
][
item_id
][
food_id
]
=
1
;
cart
[
shopid
][
category_id
][
item_id
][
food_id
]
=
{};
cart
[
shopid
][
category_id
][
item_id
][
food_id
][
'
num
'
]
=
1
;
cart
[
shopid
][
category_id
][
item_id
][
food_id
][
'
name
'
]
=
name
;
cart
[
shopid
][
category_id
][
item_id
][
food_id
][
'
price
'
]
=
price
;
cart
[
shopid
][
category_id
][
item_id
][
food_id
][
'
specs
'
]
=
specs
;
}
else
if
(
cart
[
shopid
]
&&
cart
[
shopid
][
category_id
]){
cart
[
shopid
][
category_id
][
item_id
]
=
{};
cart
[
shopid
][
category_id
][
item_id
][
food_id
]
=
1
;
cart
[
shopid
][
category_id
][
item_id
][
food_id
][
'
num
'
]
=
1
;
cart
[
shopid
][
category_id
][
item_id
][
food_id
][
'
name
'
]
=
name
;
cart
[
shopid
][
category_id
][
item_id
][
food_id
][
'
price
'
]
=
price
;
cart
[
shopid
][
category_id
][
item_id
][
food_id
][
'
specs
'
]
=
specs
;
}
else
if
(
cart
[
shopid
]){
cart
[
shopid
][
category_id
]
=
{};
cart
[
shopid
][
category_id
][
item_id
]
=
{};
cart
[
shopid
][
category_id
][
item_id
][
food_id
]
=
1
;
cart
[
shopid
][
category_id
][
item_id
][
food_id
]
=
{};
cart
[
shopid
][
category_id
][
item_id
][
food_id
][
'
num
'
]
=
1
;
cart
[
shopid
][
category_id
][
item_id
][
food_id
][
'
name
'
]
=
name
;
cart
[
shopid
][
category_id
][
item_id
][
food_id
][
'
price
'
]
=
price
;
cart
[
shopid
][
category_id
][
item_id
][
food_id
][
'
specs
'
]
=
specs
;
}
else
{
cart
[
shopid
]
=
{};
cart
[
shopid
][
category_id
]
=
{};
cart
[
shopid
][
category_id
][
item_id
]
=
{};
cart
[
shopid
][
category_id
][
item_id
][
food_id
]
=
1
;
cart
[
shopid
][
category_id
][
item_id
][
food_id
]
=
{};
cart
[
shopid
][
category_id
][
item_id
][
food_id
][
'
num
'
]
=
1
;
cart
[
shopid
][
category_id
][
item_id
][
food_id
][
'
name
'
]
=
name
;
cart
[
shopid
][
category_id
][
item_id
][
food_id
][
'
price
'
]
=
price
;
cart
[
shopid
][
category_id
][
item_id
][
food_id
][
'
specs
'
]
=
specs
;
}
state
.
cartList
=
Object
.
assign
({},
cart
);
setStore
(
'
buyCart
'
,
state
.
cartList
);
},
[
REDUCE_CART
]
(
state
,
{
shopid
,
category_id
,
item_id
,
food_id
})
{
[
REDUCE_CART
]
(
state
,
{
shopid
,
category_id
,
item_id
,
food_id
,
name
,
price
,
specs
})
{
let
cart
=
state
.
cartList
;
if
(
cart
[
shopid
]
&&
cart
[
shopid
][
category_id
]
&&
cart
[
shopid
][
category_id
][
item_id
]
&&
cart
[
shopid
][
category_id
][
item_id
][
food_id
])
{
if
(
cart
[
shopid
][
category_id
][
item_id
][
food_id
]
>
0
)
{
cart
[
shopid
][
category_id
][
item_id
][
food_id
]
--
;
if
(
cart
[
shopid
][
category_id
][
item_id
][
food_id
]
[
'
num
'
]
>
0
)
{
cart
[
shopid
][
category_id
][
item_id
][
food_id
]
[
'
num
'
]
--
;
state
.
cartList
=
Object
.
assign
({},
cart
);
setStore
(
'
buyCart
'
,
state
.
cartList
);
}
else
{
cart
[
shopid
][
category_id
][
item_id
][
food_id
]
=
null
;
}
}
},
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录