购物车

pages/cart/index.vue

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-05-03 22:41:15
  * @LastEditors: ch
- * @LastEditTime: 2022-05-12 17:05:02
+ * @LastEditTime: 2022-05-12 17:36:08
  * @Description: file content
 -->
 <template>
@@ -38,9 +38,17 @@
 							<td>
 								<UIGoodsInfo :goods="item"></UIGoodsInfo>
 							</td>
-							<td width="115">{{item.productSku ? item.productSku.sellPrice : '--'}}</td>
-							<td width="115">{{item.number}}</td>
-							<td width="115">999</td>
+							<td width="115">
+								<UiMoney :money="item.productSku ? item.productSku.sellPrice : 0"></UiMoney>
+							</td>
+							<td width="115">
+								<el-input-number :value="item.number" @change="onChangeStepper($event, item)" 
+								:min="1" :max="item.maxBuyNum" size="mini">
+								</el-input-number>
+							</td>
+							<td width="115">
+								<UiMoney :money="item.totalPrice"></UiMoney>
+							</td>
 							<td width="115">
 								<a @click="handleDelete(item.id)" class="del">删除</a>
 							</td>
@@ -68,7 +76,8 @@
 	
 </template>
 <script>
-import {ApiGetCartList, ApiDeleteCartGoods} from '@/plugins/api/cart';
+import {ApiGetCartList, ApiDeleteCartGoods, ApiPutCartNum} from '@/plugins/api/cart';
+import {Debounce} from '@/plugins/utils';
 import UIGoodsInfo from '../../components/UIGoodsInfo.vue';
 import UiButton from '../../components/UiButton.vue';
 import UiMoney from '../../components/UiMoney.vue';
@@ -118,14 +127,27 @@ export default {
 			}
 			this.isLoading = false
 			this.list = result.map(item => {
+
+				const singleBuyLimit = item.product.singleBuyLimit;
+				const stock = item.productSku && item.productSku.stock;
+				// 最大可买数量
+				item.maxBuyNum =  singleBuyLimit ? Math.min(singleBuyLimit, stock || 1) : stock;
+				// 状态
 				item.status = item.product.isEnable ?  
 					(!item.productSku || item.productSku.stock == 0) ? 'notSku': 'normal' : 
 					'isDisable';
+				// sku标签 
 				item.skuDescribe = item.status === 'normal' ? item.productSku?.name : 
 					item.status === 'normal' ? '请重新选择商品规格' :  '宝贝已失效，暂时无法购买';
+				// 小计
+				item.totalPrice = item.status === 'normal' ? 
+					this.calcMonery(item.productSku.sellPrice, item.number) : 0
 				return item;
 			});
 		},
+		calcMonery(moery, number){
+			return (((moery * 100) * number) / 100).toFixed(2);
+		},
 		/**
 		 * 商品选择框改变，全选按钮 半选，全选，不选状态
 		 */
@@ -138,6 +160,41 @@ export default {
 		 */
 		handleCheckAll(val) {
 			this.checkedIds = val ? this.normalList.map(item => item.id) : [] ;
+		},
+		/**
+		 * 监听步进器更改事件
+		 */
+        onChangeStepper(value, item) {
+			
+            // 记录一个节流函数句柄
+            if (!item.debounceHandle) {
+				item.oldValue = item.number
+                item.debounceHandle = Debounce(this.updateCartNum, 500)
+            }
+            // 更新商品数量
+			item.number = value;
+			item.totalPrice = this.calcMonery(item.productSku.sellPrice, value);
+            // 提交更新购物车数量 (节流)
+            item.debounceHandle(item, item.oldValue, value);
+        },
+        /**
+		 * 提交更新购物车数量
+		 */
+        async updateCartNum(item, oldValue, newValue) {
+			const {error, result} = await ApiPutCartNum({
+				id : item.id,
+				number : item.number
+			});
+			if(error){
+				this.$message.error(error.message);
+				item.number = item.sku;
+				return false;
+			}
+			if(result.isBeyondMaxLimit){
+				this.$message.error('数量超出范围');
+				item.number = result.canSetShoppingCartNumber;
+				return false;
+			}
         },
 		/**
 		 * 删除选中的商品