Skip to content

V
vue2-elm

momo的小宝贝 / vue2-elm
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
V
vue2-elm

体验新版 GitCode，发现更多精彩内容 >>

提交 bf6ccda3 编写于 作者: M maguohua
浏览文件
操作

updata cart

上级 7f7da37b
隐藏空白更改
内联 并排
Showing with 76 addition and 36 deletion
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.
先完成此消息的编辑！
想要评论请 注册 或