后端 + 前端:添加到购物车
This commit is contained in:
@@ -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: {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -208,6 +208,7 @@ service.interceptors.response.use(
|
||||
// this.$router.push({ path: '/login' })
|
||||
// TODO 跳转到登陆页.不是很优雅
|
||||
location.replace('/#login');
|
||||
location.reload();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -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,
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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() {
|
||||
|
||||
Reference in New Issue
Block a user