yudao
/
mall-uniapp
mirror of https://gitee.com/yudaocode/yudao-mall-uniapp.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

✨ 购物车：列表

pull/26/head^2
YunaiV 2023-12-11 12:50:46 +08:00
parent 8fd8ff9f70
commit 7a15c9496c
5 changed files with 299 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pages/goods/index.vue
View File

@ -138,7 +138,7 @@
state.selectedSku = e; state.selectedSku = e;
} }
// 添加购物车 TODO 芋艿：待测试 // 添加购物车
function onAddCart(e) { function onAddCart(e) {
sheep.$store('cart').add(e); sheep.$store('cart').add(e);
} }

382
pages/index/cart.vue
View File

@ -1,200 +1,220 @@
<!-- 购物车界面 -->
<template> <template>
<s-layout title="购物车" tabbar="/pages/index/cart" :bgStyle="{ color: '#fff' }"> <s-layout title="购物车" tabbar="/pages/index/cart" :bgStyle="{ color: '#fff' }">
<s-empty v-if="state.list.length === 0" text="购物车空空如也,快去逛逛吧~" icon="/static/cart-empty.png" /> <s-empty
v-if="state.list.length === 0"
text="购物车空空如也,快去逛逛吧~"
icon="/static/cart-empty.png"
/>
<!-- 头部 --> <!-- 头部 -->
<view class="cart-box ss-flex ss-flex-col ss-row-between" v-if="state.list.length"> <view class="cart-box ss-flex ss-flex-col ss-row-between" v-if="state.list.length">
<view class="cart-header ss-flex ss-col-center ss-row-between ss-p-x-30"> <view class="cart-header ss-flex ss-col-center ss-row-between ss-p-x-30">
<view class="header-left ss-flex ss-col-center ss-font-26"> <view class="header-left ss-flex ss-col-center ss-font-26">
共 共
<text class="goods-number ui-TC-Main ss-flex">{{ state.list.length }}</text> <text class="goods-number ui-TC-Main ss-flex">{{ state.list.length }}</text>
件商品 件商品
</view> </view>
<view class="header-right"> <view class="header-right">
<button v-if="state.editMode" class="ss-reset-button" @tap="state.editMode = false"> <button v-if="state.editMode" class="ss-reset-button" @tap="state.editMode = false">
取消 取消
</button> </button>
<button v-else class="ss-reset-button ui-TC-Main" @tap="state.editMode = true"> <button v-else class="ss-reset-button ui-TC-Main" @tap="state.editMode = true">
编辑 编辑
</button> </button>
</view> </view>
</view> </view>
<!-- 内容 -->
<view class="cart-content ss-flex-1 ss-p-x-30 ss-m-b-40"> <!-- 内容 -->
<view class="goods-box ss-r-10 ss-m-b-14" v-for="item in state.list" :key="item.id"> <view class="cart-content ss-flex-1 ss-p-x-30 ss-m-b-40">
<view class="ss-flex ss-col-center"> <view class="goods-box ss-r-10 ss-m-b-14" v-for="item in state.list" :key="item.id">
<label class="check-box ss-flex ss-col-center ss-p-l-10" @tap="onSelectSingle(item.id)"> <view class="ss-flex ss-col-center">
<radio :checked="state.selectedIds.includes(item.id)" color="var(--ui-BG-Main)" <label class="check-box ss-flex ss-col-center ss-p-l-10" @tap="onSelectSingle(item.id)">
style="transform: scale(0.8)" @tap.stop="onSelectSingle(item.id)" /> <radio
</label> :checked="state.selectedIds.includes(item.id)"
<s-goods-item :title="item.spu.name" :img="item.spu.picUrl || item.goods.image" color="var(--ui-BG-Main)"
:price="item.sku.price/100" style="transform: scale(0.8)"
:skuText="item.sku.properties.length>1? item.sku.properties.reduce((items2,items)=>items2.valueName+' '+items.valueName):item.sku.properties[0].valueName" @tap.stop="onSelectSingle(item.id)"
priceColor="#FF3000" :titleWidth="400"> />
<template v-if="!state.editMode" v-slot:tool> </label>
<su-number-box :min="0" :max="item.sku.stock" :step="1" v-model="item.count" <s-goods-item
@change="onNumberChange($event, item)"></su-number-box> :title="item.spu.name"
</template> :img="item.sku.picUrl || item.spu.picUrl"
</s-goods-item> :price="fen2yuan(item.sku.price)"
</view> :skuText="item.sku.properties.map((property) => property.valueName).join(' ')"
</view> priceColor="#FF3000"
</view> :titleWidth="400"
<!-- 底部 --> >
<su-fixed bottom :val="48" placeholder v-if="state.list.length > 0" :isInset="false"> <template v-if="!state.editMode" v-slot:tool>
<view class="cart-footer ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom"> <su-number-box
<view class="footer-left ss-flex ss-col-center"> :min="0"
<label class="check-box ss-flex ss-col-center ss-p-r-30" @tap="onSelectAll"> :max="item.sku.stock"
<radio :checked="state.isAllSelected" color="var(--ui-BG-Main)" :step="1"
style="transform: scale(0.8)" @tap.stop="onSelectAll" /> v-model="item.count"
<view class="ss-m-l-8"> 全选 </view> @change="onNumberChange($event, item)"
</label> />
<text>合计：</text> </template>
<view class="text-price price-text"> </s-goods-item>
{{ state.totalPriceSelected }} </view>
</view> </view>
</view> </view>
<view class="footer-right">
<button v-if="state.editMode" class="ss-reset-button ui-BG-Main-Gradient pay-btn ui-Shadow-Main" <!-- 底部 -->
@tap="onDelete"> <su-fixed bottom :val="48" placeholder v-if="state.list.length > 0" :isInset="false">
删除 <view class="cart-footer ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom">
</button> <view class="footer-left ss-flex ss-col-center">
<button v-else class="ss-reset-button ui-BG-Main-Gradient pay-btn ui-Shadow-Main" <label class="check-box ss-flex ss-col-center ss-p-r-30" @tap="onSelectAll">
@tap="onConfirm"> <radio
去结算 :checked="state.isAllSelected"
{{ state.selectedIds?.length ? `(${state.selectedIds.length})` : '' }} color="var(--ui-BG-Main)"
</button> style="transform: scale(0.8)"
</view> @tap.stop="onSelectAll"
</view> />
</su-fixed> <view class="ss-m-l-8"> 全选 </view>
</view> </label>
</s-layout> <text>合计：</text>
<view class="text-price price-text">
{{ fen2yuan(state.totalPriceSelected) }}
</view>
</view>
<view class="footer-right">
<button
v-if="state.editMode"
class="ss-reset-button ui-BG-Main-Gradient pay-btn ui-Shadow-Main"
@tap="onDelete"
>
删除
</button>
<button
v-else
class="ss-reset-button ui-BG-Main-Gradient pay-btn ui-Shadow-Main"
@tap="onConfirm"
>
去结算
{{ state.selectedIds?.length ? `(${state.selectedIds.length})` : '' }}
</button>
</view>
</view>
</su-fixed>
</view>
</s-layout>
</template> </template>
<script setup> <script setup>
import sheep from '@/sheep'; import sheep from '@/sheep';
import { import { computed, reactive } from 'vue';
computed, import { fen2yuan } from '@/sheep/hooks/useGoods';
reactive, import { property } from 'lodash/util';
unref
} from 'vue';
const sys_navBar = sheep.$platform.navbar; const sys_navBar = sheep.$platform.navbar;
const cart = sheep.$store('cart'); const cart = sheep.$store('cart');
const state = reactive({ const state = reactive({
editMode: false, editMode: false,
list: computed(() => cart.list), list: computed(() => cart.list), // 购物车项的列表
selectedList: [], selectedIds: computed(() => cart.selectedIds),
selectedIds: computed(() => cart.selectedIds), isAllSelected: computed(() => cart.isAllSelected),
isAllSelected: computed(() => cart.isAllSelected), totalPriceSelected: computed(() => cart.totalPriceSelected),
totalPriceSelected: computed(() => cart.totalPriceSelected), });
});
// 单选选中
function onSelectSingle(id) {
console.log('单选')
cart.selectSingle(id);
}
// 全选
function onSelectAll() {
cart.selectAll(!state.isAllSelected);
}
// 结算 // 单选
function onConfirm() { function onSelectSingle(id) {
let items = [] cart.selectSingle(id);
let goods_list = []; }
state.selectedList = state.list.filter((item) => state.selectedIds.includes(item.id));
state.selectedList.map((item) => {
console.log(item, '便利');
// 此处前端做出修改
items.push({
skuId: item.sku.id,
count: item.count,
cartId: item.id,
})
goods_list.push({
// goods_id: item.goods_id,
goods_id: item.spu.id,
// goods_num: item.goods_num,
goods_num: item.count,
// 商品价格id真没有
// goods_sku_price_id: item.goods_sku_price_id,
});
});
// return;
if (goods_list.length === 0) {
sheep.$helper.toast('请选择商品');
return;
}
sheep.$router.go('/pages/order/confirm', {
data: JSON.stringify({
// order_type: 'goods',
// goods_list,
items,
// from: 'cart',
deliveryType: 1,
pointStatus: false,
}),
});
}
function onNumberChange(e, cartItem) { // 全选
if (e === 0) { function onSelectAll() {
cart.delete(cartItem.id); cart.selectAll(!state.isAllSelected);
return; }
}
if (cartItem.goods_num === e) return; // 结算
cartItem.goods_num = e; function onConfirm() {
cart.update({ const items = state.list
goods_id: cartItem.id, .filter((item) => state.selectedIds.includes(item.id))
goods_num: e, .map((item) => {
goods_sku_price_id: cartItem.goods_sku_price_id, return {
}); skuId: item.sku.id,
} count: item.count,
async function onDelete() { cartId: item.id,
cart.delete(state.selectedIds); };
} });
if (items.length === 0) {
sheep.$helper.toast('请选择商品');
return;
}
sheep.$router.go('/pages/order/confirm', {
data: JSON.stringify({
items,
// order_type: 'goods',
// goods_list,
// from: 'cart',
deliveryType: 1,
pointStatus: false,
}),
});
}
// 更新数量
function onNumberChange(number, cartItem) {
if (number === 0) {
cart.delete([cartItem.id]);
return;
}
if (cartItem.goods_num === number) {
return;
}
cartItem.goods_num = number;
cart.update({
goods_id: cartItem.id,
goods_num: number,
});
}
// 删除
async function onDelete() {
cart.delete(state.selectedIds);
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
:deep(.ui-fixed) { :deep(.ui-fixed) {
height: 72rpx; height: 72rpx;
} }
.cart-box { .cart-box {
width: 100%; width: 100%;
.cart-header { .cart-header {
height: 70rpx; height: 70rpx;
background-color: #f6f6f6; background-color: #f6f6f6;
width: 100%; width: 100%;
position: fixed; position: fixed;
left: 0; left: 0;
top: v-bind('sys_navBar') rpx; top: v-bind('sys_navBar') rpx;
z-index: 1000; z-index: 1000;
box-sizing: border-box; box-sizing: border-box;
} }
.cart-footer { .cart-footer {
height: 100rpx; height: 100rpx;
background-color: #fff; background-color: #fff;
.pay-btn { .pay-btn {
width: 180rpx; width: 180rpx;
height: 70rpx; height: 70rpx;
font-size: 28rpx; font-size: 28rpx;
line-height: 28rpx; line-height: 28rpx;
font-weight: 500; font-weight: 500;
border-radius: 40rpx; border-radius: 40rpx;
} }
} }
.cart-content { .cart-content {
margin-top: 70rpx; margin-top: 70rpx;
.goods-box { .goods-box {
background-color: #fff; background-color: #fff;
} }
} }
} }
</style> </style>

1
sheep/api/cart.js
View File

@ -15,6 +15,7 @@ export default {
request({ request({
url: 'cart', url: 'cart',
method: 'POST', method: 'POST',
// TODO 芋艿：这里没提示
custom: { custom: {
showSuccess: true, showSuccess: true,
successMsg: '已添加到购物车~', successMsg: '已添加到购物车~',

47
sheep/api/trade/cart.js Normal file
View File

@ -0,0 +1,47 @@
import request2 from '@/sheep/request2';
const CartApi = {
addCart: (data) => {
return request2({
url: '/app-api/trade/cart/add',
method: 'POST',
data: data,
// TODO 芋艿：这里没提示
custom: {
showSuccess: true,
successMsg: '已添加到购物车~',
}
});
},
updateCartCount: (data) => {
return request2({
url: '/app-api/trade/cart/update-count',
method: 'PUT',
data: data
});
},
updateCartSelected: (data) => {
return request2({
url: '/app-api/trade/cart/update-selected',
method: 'PUT',
data: data
});
},
deleteCart: (ids) => {
return request2({
url: '/app-api/trade/cart/delete',
method: 'DELETE',
params: {
ids
}
});
},
getCartList: () => {
return request2({
url: '/app-api/trade/cart/list',
method: 'GET',
});
},
};
export default CartApi;

101
sheep/store/cart.js
View File

@ -1,98 +1,93 @@
import { defineStore } from 'pinia'; import { defineStore } from 'pinia';
import cartApi from '@/sheep/api/cart'; import CartApi from '@/sheep/api/trade/cart';
const cart = defineStore({ const cart = defineStore({
id: 'cart', id: 'cart',
state: () => ({ state: () => ({
list: [], // 购物车列表 list: [], // 购物车列表
selectedIds: [], // 已选列表 selectedIds: [], // 已选列表
isAllSelected: false, //是否全选 isAllSelected: false, // 是否全选
cartSelectedTotalPrice: '0.00', // 选中项总金额 totalPriceSelected: 0, // 选中项总金额
}), }),
getters: {
totalPriceSelected: (state) => {
let price = 0;
if (!state.selectedIds.length) return price.toFixed(2);
state.list.forEach((item) => {
price += state.selectedIds.includes(item.id)
? Number(item.sku.price/100) * item.count
: 0;
});
return price.toFixed(2);
},
},
actions: { actions: {
// 获取购物车列表 // 获取购物车列表
async getList() { async getList() {
const { data, code } = await cartApi.list(); const { data, code } = await CartApi.getCartList();
if (code === 0) { if (code === 0) {
this.list = data.validList; this.list = data.validList;
// 计算各种关联属性
this.selectedIds = [];
this.isAllSelected = true;
this.totalPriceSelected = 0;
this.list.forEach((item) => {
if (item.selected) {
this.selectedIds.push(item.id);
this.totalPriceSelected += item.count * item.sku.price;
} else {
this.isAllSelected = false;
}
});
} }
}, },
// 添加购物车 // 添加购物车
async add(goodsInfo) { async add(goodsInfo) {
const { error } = await cartApi.append({ // 添加购物项
goods_id: goodsInfo.goods_id, const { code } = await CartApi.addCart({
goods_num: goodsInfo.goods_num, skuId: goodsInfo.id,
goods_sku_price_id: goodsInfo.id, count: goodsInfo.goods_num,
}); });
if (error === 0) { // 刷新购物车列表
this.getList(); if (code === 0) {
await this.getList();
} }
}, },
// 更新购物车 // 更新购物车
async update(goodsInfo) { async update(goodsInfo) {
const { error } = await cartApi.update({ const { code } = await CartApi.updateCartCount({
id: goodsInfo.goods_id, id: goodsInfo.goods_id,
count: goodsInfo.goods_num, count: goodsInfo.goods_num,
goods_sku_price_id: goodsInfo.goods_sku_price_id,
}); });
if (error === 0) { if (code === 0) {
// this.getList(); await this.getList();
} }
}, },
// 移除购物车 // 移除购物车
async delete(ids) { async delete(ids) {
if (typeof ids === 'array') { const { code } = await CartApi.deleteCart(ids.join(','));
ids = ids.join(',');
}
const { code } = await cartApi.delete(ids);
if (code === 0) { if (code === 0) {
this.selectAll(false); await this.getList();
this.getList();
} }
}, },
// 选择购物车商品 // 单选购物车商品
selectSingle(goodsId) { async selectSingle(goodsId) {
if (!this.selectedIds.includes(goodsId)) { const { code } = await CartApi.updateCartSelected({
this.selectedIds.push(goodsId); ids: [goodsId],
} else { selected: !this.selectedIds.includes(goodsId), // 取反
this.selectedIds.splice(this.selectedIds.indexOf(goodsId), 1); });
if (code === 0) {
await this.getList();
} }
this.isAllSelected = this.selectedIds.length === this.list.length;
}, },
// 全选 // 全选购物车商品
selectAll(flag) { async selectAll(flag) {
this.isAllSelected = flag; const { code } = await CartApi.updateCartSelected({
if (!flag) { ids: this.list.map((item) => item.id),
this.selectedIds = []; selected: flag
} else { });
this.list.forEach((item) => { if (code === 0) {
this.selectedIds.push(item.id); await this.getList();
});
} }
}, },
// 清空购物车 // 清空购物车
emptyList() { async emptyList() {
this.list = []; await this.delete(this.list.map((item) => item.id));
this.selectedIds = [];
this.isAllSelected = false;
this.cartSelectedTotalPrice = '0.00';
}, },
}, },
persist: { persist: {