后端 + 前端:添加到购物车

This commit is contained in:
YunaiV
2019-04-11 19:49:58 +08:00
parent 4300ce141d
commit b807a63966
22 changed files with 541 additions and 177 deletions

View File

@@ -45,3 +45,24 @@ export function createOrder(params) {
});
}
// Cart
export function addCart(skuId, quantity) {
return request({
url: '/order-api/users/cart/add',
method: 'post',
params: {
skuId,
quantity,
}
});
}
export function countCart() {
return request({
url: '/order-api/users/cart/count',
method: 'get',
params: {
}
});
}

View File

@@ -8,8 +8,7 @@
style="background:#fff"
>
<template slot="thumb">
<!-- TODO 芋艿 暂时去掉等会就恢复 -->
<!-- <img :src="product.picUrls[0]"/>-->
<img :src="product.picUrls[0]"/>
<!-- TODO 芋艿 暂时去掉 -->
<!-- <p v-if="product.imageTag!=null&&product.imageTag!=''" class="image_tag">{{product.imageTag}}</p>-->
</template>

View File

@@ -208,6 +208,7 @@ service.interceptors.response.use(
// this.$router.push({ path: '/login' })
// TODO 跳转到登陆页.不是很优雅
location.replace('/#login');
location.reload();
}
}
});

View File

@@ -58,7 +58,8 @@ const routes = [
component: () => import('../page/user/info/detail'),
name: 'user',
meta: {
title: '个人信息'
title: '个人信息',
requireAuth: true,
}
},
{
@@ -178,7 +179,8 @@ const routes = [
path: '/order',
component: () => import('../page/shipping/order'),
meta: {
title: '确认订单'
title: '确认订单',
requireAuth: true,
}
},
{

View File

@@ -6,74 +6,36 @@
<van-checkbox v-model="checkedAll" >全选</van-checkbox>
</template>
</van-cell>
<van-checkbox-group class="card-goods" v-model="checkedGoods">
<div class="promotion-group">
<div v-for="(item,index) in goods"
:key="index" class="card-goods__item">
<div v-for="(item,index) in goods" :key="index" class="card-goods__item">
<van-checkbox :name="item.id"></van-checkbox>
<product-card :product='item' :iscard='true' >
<template slot>
<van-cell value="修改" >
<template slot="title">
<van-tag type="danger">促销</van-tag>
<span class="van-cell-text" >满60元减5元</span>
</template>
</van-cell>
</template>
<product-card :product='item' :iscard='false' >
<!-- <template slot>-->
<!-- <van-cell value="修改" >-->
<!-- <template slot="title">-->
<!-- <van-tag type="danger">促销</van-tag>-->
<!-- <span class="van-cell-text" >满60元减5元</span>-->
<!-- </template>-->
<!-- </van-cell>-->
<!-- </template>-->
</product-card>
</div>
</div>
<div class="promotion-group">
<van-cell is-link class="head">
<template slot="title">
<van-checkbox v-model="checkedAll" >京东自营</van-checkbox>
</template>
</van-cell>
<div v-for="(item,index) in goods"
:key="index+10" class="card-goods__item">
<van-checkbox :name="item.id"></van-checkbox>
<product-card :product='item' :iscard='true' >
<template slot>
<van-cell value="修改" >
<template slot="title">
<van-tag type="danger">促销</van-tag>
<span class="van-cell-text" >满60元减5元</span>
</template>
</van-cell>
</template>
</product-card>
</div>
<van-cell value="去凑单" is-link class="promotion">
<template slot="title">
<p><van-tag type="danger">满减</van-tag>购满60元可减5元</p>
</template>
</van-cell>
<div v-for="(item,index) in goods"
:key="index+20" class="card-goods__item">
<van-checkbox :name="item.id"></van-checkbox>
<product-card :product='item' :iscard='true' >
<template slot>
<van-cell value="修改" >
<template slot="title">
<van-tag type="danger">促销</van-tag>
<span class="van-cell-text" >满60元减5元</span>
</template>
</van-cell>
</template>
</product-card>
</div>
</div>
<!-- <div class="promotion-group">-->
<!-- <van-cell is-link class="head">-->
<!-- <template slot="title">-->
<!-- <van-checkbox v-model="checkedAll" >京东自营</van-checkbox>-->
<!-- </template>-->
<!-- </van-cell>-->
<!-- </div>-->
</van-checkbox-group>
<div style="height:50px;"></div>
<van-submit-bar
:price="totalPrice"
@@ -103,7 +65,7 @@ export default {
desc: '3.18kg/件',
price: '200.00',
quantity: 1,
imageURL: 'https://img.yzcdn.cn/public_files/2017/10/24/2f9a36046449dafb8608e99990b3c205.jpeg',
picUrls: ['https://img.yzcdn.cn/public_files/2017/10/24/2f9a36046449dafb8608e99990b3c205.jpeg'],
imageTag:'比加入时降5元',
}, {
id: '2',
@@ -111,7 +73,7 @@ export default {
desc: '约600g',
price: '690.00',
quantity: 1,
imageURL: 'https://img.yzcdn.cn/public_files/2017/10/24/f6aabd6ac5521195e01e8e89ee9fc63f.jpeg',
picUrls: ['https://img.yzcdn.cn/public_files/2017/10/24/f6aabd6ac5521195e01e8e89ee9fc63f.jpeg'],
gift: [
{
title: "星巴克Starbucks星冰乐小熊吊饰星巴克Starbucks星冰乐小熊吊饰",
@@ -128,7 +90,7 @@ export default {
desc: '约680g/3个',
price: '2680.00',
quantity: 1,
imageURL: 'https://img.yzcdn.cn/public_files/2017/10/24/320454216bbe9e25c7651e1fa51b31fd.jpeg'
picUrls: ['https://img.yzcdn.cn/public_files/2017/10/24/320454216bbe9e25c7651e1fa51b31fd.jpeg']
}]
};
},
@@ -143,7 +105,7 @@ export default {
},
methods: {
onSubmit() {
this.$router.push('/order')
}
}
@@ -201,5 +163,5 @@ export default {
}
}
</style>
</style>

View File

@@ -74,7 +74,7 @@
<van-goods-action-mini-btn icon="like-o" @click="sorry">
收藏
</van-goods-action-mini-btn>
<van-goods-action-mini-btn icon="cart" @click="onClickCart">
<van-goods-action-mini-btn icon="cart" :info="cartCount > 0 ? cartCount : undefined" @click="onClickCart">
购物车
</van-goods-action-mini-btn>
<van-goods-action-big-btn @click="showSku">
@@ -167,6 +167,8 @@
<script>
// import skuData from '../../data/sku';
import {getProductSpuInfo} from '../../api/product';
import {addCart, countCart} from '../../api/order';
import { Dialog } from 'vant';
export default {
components: {},
@@ -190,26 +192,12 @@
},
attrValueMap: new Map(), // 规格值的映射
// show:false,
// showTag:false,
// goods: {
// title: '【每日一粒益智又长高】 Lifeline Care 儿童果冻鱼油DHA维生素D3聪明长高 软糖 30粒 2件装',
// subtitle:'【品牌直采】Q弹美味无腥味果冻鱼油每粒含足量鱼油DHA帮助视网膜和大脑健康发育让你的宝宝明眼又聪明同时补充400国际单位维生素D3强壮骨骼和牙齿。特含DPA让宝宝免疫力更强没病来扰。',
// price: 2680,
// market_price:9999,
// express: '免运费',
// remain: 19,
// thumb: [
// 'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg',
// 'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg'
// ],
// info:'<p style="text-align:center;"><img src="https://haitao.nosdn2.127.net/ac19460151ee4d95a6657202bcfc653c1531470912089jjjq8ml410763.jpg" ></p><p style="text-align:center;"><img src="https://haitao.nos.netease.com/2a91cfad22404e5498d347672b1440301531470912182jjjq8mnq10764.jpg" ></p><p style="text-align:center;"><img src="https://haitao.nos.netease.com/caddd5a213de4c1cb1347c267e8275731531470912412jjjq8mu410765.jpg" ></p>',
// },
showBase: false, // 是否显示 sku 坦诚
showBase: false, // 是否显示 sku 弹层
closeOnClickOverlay: true, // 是否在点击蒙层后关闭
hideStock: true, // 是否显示商品剩余库存
cartCount: 0,
};
},
methods: {
@@ -231,9 +219,9 @@
this.initialSku.quantity = value;
},
skuSelected({skuValue, selectedSku, selectedSkuComb}) { // 选择 sku
console.log(skuValue);
console.log(selectedSku);
console.log(selectedSkuComb);
// console.log(skuValue);
// console.log(selectedSku);
// console.log(selectedSkuComb);
this.initialSku = {
...selectedSkuComb,
quantity: 1,
@@ -256,25 +244,36 @@
this.showTag = true;
},
onBuyClicked(data) {
const { selectedNum, goodsId } = data;
console.log(data);
const { selectedNum } = data;
// debugger;
// console.log(data);
// this.$toast(JSON.stringify(data));
this.$router.push({
path:'/order',
query:{
skuId: goodsId,
skuId: data.selectedSkuComb.id,
quantity: selectedNum,
}
});
},
onAddCartClicked(data) {
this.$toast(JSON.stringify(data));
const { selectedNum } = data;
// debugger;
addCart(data.selectedSkuComb.id,selectedNum).then(data => {
// 修改购物车数量
this.cartCount = data;
// 提示
Dialog.alert({
title: '系统提示',
message: '添加购物车成功',
});
});
},
},
mounted() {
// 获得商品数据
let id = this.$route.params.id; // 商品编号
let response = getProductSpuInfo(id);
response.then(data => {
getProductSpuInfo(id).then(data => {
// 设置 spu
this.spu = data;
// 初始化 vanSku
@@ -337,6 +336,10 @@
this.initialSku = vanSku.list[0];
this.initialSku.quantity = 1;
});
// 获得购物车数量
countCart().then(data => {
this.cartCount = data;
})
}
};
</script>

View File

@@ -16,12 +16,22 @@
<div>{{addressData.address}}</div>
</template>
</van-cell>
<div style="height:15px;"></div>
<div style="height:15px;"></div>
<div class="card" v-for="(product,i) in products" :key="i">
<product-card :product='product'/>
<!-- <div class="card" v-for="(product,i) in products" :key="i">-->
<!-- <product-card :product='product'/>-->
<!-- </div>-->
<div v-for="(itemGroup, i) in itemGroups" >
<div class="card" v-for="(item, j) in itemGroup.items" :key="j">
<product-card :product='convertProduct(item)'/>
</div>
<div style="height:15px;"></div>
</div>
<div style="height:15px;"></div>
<van-cell-group>
<van-field
@@ -61,7 +71,6 @@
import {createOrder, getConfirmCreateOrder} from '../../api/order';
import {GetDefaultAddress} from '../../api/user';
import orderStore from '../../store/order'
import eventBus from '../eventBus';
export default {
data() {
@@ -141,8 +150,17 @@
remark,
})
},
convertProduct() {
convertProduct(item) {
// debugger;
return {
...item.spu,
quantity: item.buyQuantity,
price: item.price,
sku: {
...item,
spu: undefined,
}
};
}
},
mounted: function() {