Merge pull request '加入购物车功能实现' (#36) from Brunch_DBK into main

order-app/src/pages.json

@@ -33,6 +33,13 @@
 			{
 				"navigationBarTitleText" : ""
 			}
+		},
+		{
+			"path" : "pages/address/address",
+			"style" : 
+			{
+				"navigationBarTitleText" : ""
+			}
 		}
 	],
 	"globalStyle": {

order-app/src/pages/car/car.vue

@@ -39,14 +39,6 @@
 			结算({{totalNum}})
 		</view>
 	</view>
-	<view class="">
-		<view class="">
-			{{store.count}}
-		</view>
-		<view class="" @click="store.increment">
-			新增
-		</view>
-	</view>
 </template>
 
 <script setup>
@@ -63,57 +55,15 @@
 	const show = ref(true);
 	const allchecked = ref(true);
 	const checked = ref(true);
-	const goods = reactive([{
+	//获取购物车数据
-			flag: true,
+	const goods = computed(() => {
-			goodsName: "女款-M",
+		if(store.carList.length == 0){
-			goodsUnit: '/份',
+			allchecked.value = false;
-			goodsId: 1,
+		}else{
-			num: 1,
+			allchecked.value = true;
-			specsName: '中',
-			price: 149,
-			goodsImage: "http://192.168.1.3:8089/images/a35e4257-9e9a-43f8-b077-a7664064ce12.png",
-		},
-		{
-			flag: true,
-			goodsName: "女款-M",
-			goodsUnit: '/份',
-			goodsId: 1,
-			specsName: '中',
-			num: 1,
-			price: 149,
-			goodsImage: "http://192.168.1.3:8089/images/a35e4257-9e9a-43f8-b077-a7664064ce12.png",
-		},
-		{
-			flag: true,
-			goodsName: "女款-M",
-			goodsUnit: '/份',
-			goodsId: 1,
-			num: 1,
-			specsName: '中',
-			price: 149,
-			goodsImage: "http://192.168.1.3:8089/images/a35e4257-9e9a-43f8-b077-a7664064ce12.png",
-		},
-		{
-			flag: true,
-			goodsName: "女款-M",
-			goodsId: 1,
-			num: 1,
-			goodsUnit: '/份',
-			specsName: '中',
-			price: 149,
-			goodsImage: "http://192.168.1.3:8089/images/a35e4257-9e9a-43f8-b077-a7664064ce12.png",
-		},
-		{
-			flag: true,
-			goodsName: "女款-M",
-			goodsId: 1,
-			num: 1,
-			goodsUnit: '/份',
-			specsName: '中',
-			price: 149,
-			goodsImage: "http://192.168.1.3:8089/images/a35e4257-9e9a-43f8-b077-a7664064ce12.png",
 		}
-	])
+		return store.carList
+	})
 	const selected = (e, item) => {
 		console.log(e)
 		console.log(item)
@@ -123,8 +73,8 @@
 			item.flag = true;
 		}
 		// 过滤出数组中checked为true的项目，如果和原List长度相等，就全选显示
-		let newArr = goods.filter(item => (item.flag == true))
+		let newArr = store.carList.filter(item => (item.flag == true))
-		if (newArr.length === goods.length) {
+		if (newArr.length === store.carList.length) {
 			allchecked.value = true;
 		} else {
 			allchecked.value = false;
@@ -136,14 +86,14 @@
 		if (allchecked.value == true) {
 			allchecked.value = false;
 			// 遍历RecordList数组 取消全选
-			goods.forEach(item => {
+			store.carList.forEach(item => {
 				// this.$set(item, 'flag', false)
 				item.flag = false
 			})
 		} else {
 			allchecked.value = true;
 			// 遍历RecordList数组 设置全选
-			goods.forEach(item => {
+			store.carList.forEach(item => {
 				// this.$set(item, 'flag', true)
 				item.flag = true
 			})
@@ -155,11 +105,16 @@
 		if (num > 1) {
 			num -= 1
 		} else if (num = 1) {
-			uni.showToast({
+			store.carList.map((dom, i) => {
-				title: "该宝贝不能减少了哟~"
+				if (dom.goodsID == item.goodsID) {
+					store.carList.splice(i, 1)
+				}
 			})
 		}
-		item.num = num
+		item.num = num;
+		if (store.carList.length == 0) {
+			allchecked.value = false;
+		}
 	}
 
 	const add = (item) => {
@@ -169,7 +124,7 @@
 
 	const totalNum = computed(() => {
 		let totalNum = 0;
-		goods.map(item => {
+		store.carList.map(item => {
 			item.flag ? totalNum += item.num : totalNum += 0
 		})
 		return totalNum
@@ -177,7 +132,7 @@
 
 	const totalPrice = computed(() => {
 		let totalPrice = 0;
-		goods.map(item => {
+		store.carList.map(item => {
 			item.flag ? totalPrice += item.num * item.price : totalPrice += 0
 		})
 		return totalPrice

order-app/src/pages/detail/detail.vue

@@ -84,7 +84,7 @@
 				<view class="text u-line-1">首页</view>
 			</view>
 			<view class="item car">
-				<u-badge class="car-num" :count="9" type="error" :offset="[-3, -6]"></u-badge>
+				<u-badge class="car-num" :count="carCount" type="error" :offset="[-3, -6]"></u-badge>
 				<u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
 				<view class="text u-line-1">购物车</view>
 			</view>
@@ -101,8 +101,18 @@
 		onLoad
 	} from '@dcloudio/uni-app';
 	import {
-		ref
+		ref,
+		computed
 	} from 'vue';
+	import {
+		carStore
+	} from '../../store/car';
+	//获取store
+	const store = carStore()
+	//购物车数量动态变化
+	const carCount = computed(()=>{
+		return store.carList.length
+	})
 	const current = ref(0)
 	//轮播图高度
 	const height = ref('400')
@@ -130,17 +140,34 @@
 	const change = (index, item) => {
 		current.value = index
 		price.value = item.goodsPrice
+		carData.value.price = item.goodsPrice
+		carData.value.specsName = item.specsName
+		console.log(carData)
 	}
 	//详情tab
 	const swiperCurrent = ref(0)
 	const dx = ref(0)
 	const tabIndex = ref(0)
+	//购物车数据
+	const carData = ref({
+		flag: true,
+		goodsName: "",
+		goodsUnit: '',
+		goodsId: '',
+		num: 1,
+		specsName: '',
+		price: '',
+		goodsImage: ''
+	})
 	// tab栏内容切换
 	const tabClick = (index) => {
 		tabIndex.value = index;
 		swiperCurrent.value = index;
 	}
-
+	//加入购物车
+	const addCar = () => {
+		store.addCar(carData.value)
+	}
 	const animationfinish = ({
 		detail: {
 			current
@@ -158,6 +185,14 @@
 		title.value = goods.goodsName
 		price.value = goods.specs[0].goodsPrice
 		specs.value = goods.specs
+		content.value = goods.goodsDesc
+		//设置购物车数据
+		carData.value.goodsId = goods.goodsId
+		carData.value.goodsName = goods.goodsName
+		carData.value.goodsUnit = goods.goodsUnit
+		carData.value.specsName = goods.specs[0].specsName
+		carData.value.price = goods.specs[0].goodsPrice
+		carData.value.goodsImage = goods.goodsImage.split(',')[0]
 	})
 </script>
 

order-app/src/store/car.js

@@ -1,9 +1,14 @@
-// 引入
+// stores/counter.js
-import { defineStore } from 'pinia';
+import {
-//定义store
+	defineStore
+} from 'pinia';
+
 export const carStore = defineStore('carStore', {
 	state: () => {
-		return { count: 0 };
+		return {
+			count: 0,
+			carList: []
+		};
 	},
 	// 也可以这样定义
 	// state: () => ({ count: 0 })
@@ -11,5 +16,14 @@ export const carStore = defineStore('carStore', {
 		increment() {
 			this.count++;
 		},
+		addCar(goods) {
+			//查找是否存在，返回位置
+			const index = this.carList.findIndex(item => goods.goodsId == item.goodsId);
+			//存在，删除
+			if (index > -1) {
+				this.carList.splice(index, 1);
+			}
+			this.carList.push(goods);
+		}
 	},
 });