Merge pull request '确认订单页面制作和改进' (#46) from Brunch_DBK into main

order-app/project.config.json

@@ -12,7 +12,16 @@
       "outputPath": ""
     },
     "useCompilerPlugins": false,
-    "minifyWXML": true
+    "minifyWXML": true,
+    "compileWorklet": false,
+    "uploadWithSourceMap": true,
+    "packNpmManually": false,
+    "minifyWXSS": true,
+    "localPlugins": false,
+    "disableUseStrict": false,
+    "condition": false,
+    "swc": false,
+    "disableSWC": true
   },
   "compileType": "miniprogram",
   "simulatorPluginLibVersion": {},
@@ -21,5 +30,6 @@
     "include": []
   },
   "appid": "wx6a41b250d82adc97",
-  "editorSetting": {}
+  "editorSetting": {},
+  "libVersion": "3.9.1"
 }

order-app/project.private.config.json

@@ -9,6 +9,14 @@
     "preloadBackgroundData": false,
     "autoAudits": false,
     "showShadowRootInWxmlPanel": true,
-    "compileHotReLoad": true
+    "compileHotReLoad": true,
+    "useApiHook": true,
+    "useApiHostProcess": true,
+    "useStaticServer": false,
+    "useLanDebug": false,
+    "showES6CompileOption": false,
+    "checkInvalidKey": true,
+    "ignoreDevUnusedFiles": true,
+    "bigPackageSizeSupport": false
   }
 }

order-app/src/pages.json

@@ -37,15 +37,21 @@
 		}, {
 			"path": "pages/address/address",
 			"style": {
-				"navigationBarTitleText": ""
+				"navigationBarTitleText": "新增地址"
 			}
 		},
+		// {
+		// 	"path": "common/common",
+		// 	"style": {
+		// 		"navigationBarTitleText": ""
+		// 	}
+		// },
 		{
-			"path" : "common/common",
+			"path": "pages/confirm/confirm",
-			"style" : 
+			"style": {
-			{
+				"navigationBarTitleText": "确认订单"
-				"navigationBarTitleText" : ""
+			}
-			}		}
+		}
 	],
 	"globalStyle": {
 		// 导航字体颜色，仅支持 black/white

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

@@ -35,7 +35,7 @@
 				总计：<text style="color: #f00;font-weight: bold;">￥ {{totalPrice}}</text>
 			</view>
 		</view>
-		<view class="end-right">
+		<view class="end-right" @click="confirm">
 			结算({{totalNum}})
 		</view>
 	</view>
@@ -130,7 +130,7 @@
 		})
 		return totalNum
 	})
-
+	//总共价格
 	const totalPrice = computed(() => {
 		let totalPrice = 0;
 		store.carList.map(item => {
@@ -138,6 +138,12 @@
 		})
 		return totalPrice
 	})
+	//跳转确认订单
+	const confirm = (item) => {
+		uni.navigateTo({
+			url: '../confirm/confirm'
+		});
+	}
 </script>
 
 <style lang="scss">
@@ -213,7 +219,7 @@
 		.end-right {
 			width: 30%;
 			line-height: 90rpx;
-			background-color: #F44545;
+			background-color: #F3AF28;
 			text-align: center;
 			color: #fff;
 		}

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

@@ -0,0 +1,228 @@
+<template>
+	<view class="address" @click="toAddress">
+		<view>
+			<view class="info">
+				<view class="name">
+					张明
+				</view>
+				<view class="phone">
+					18681xxxxx
+				</view>
+			</view>
+			<view>
+				北京工业大学
+			</view>
+		</view>
+		<u-icon name="arrow-right" color="#c8c9cc"></u-icon>
+	</view>
+	<view style="padding-bottom: 60px;margin-top: 10px;" v-if="goods.length > 0">
+		<view class="goods-detail" v-for="(item,index) in goods" :key="index">
+			<view class="detail-left">
+				<view class="goods-left">
+					<image style="width: 150rpx; height: 140rpx; margin-left:10px;" :src="item.goodsImage"></image>
+				</view>
+				<view class="size">
+					<text style="font-size: 25rpx;">名称：{{item.goodsName}}</text>
+					<text style="font-size: 25rpx;">规格：{{item.specsName}}</text>
+					<text class="goods-price">￥{{item.price}}{{item.goodsUnit}}</text>
+				</view>
+			</view>
+			<view class="detail-right">
+				<text class="num">x{{item.num}}</text>
+			</view>
+		</view>
+	</view>
+	<view class="end">
+		<view class="end-left">
+			<view>
+				总计：<text style="color: #F3AF28;font-weight: bold;">￥{{totalPrice}}</text>
+			</view>
+		</view>
+		<view class="end-right">
+			提交订单({{totalNum}})
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		reactive,
+		computed
+	} from 'vue'
+	import {
+		orderStore
+	} from '../../store/order.js'
+	//获取store
+	const store = orderStore()
+	const goods = computed(() => {
+		return store.orderList
+	})
+	// const goods = reactive([{
+	// 		flag: true,
+	// 		goodsName: "女款-M",
+	// 		goodsUnit: '/份',
+	// 		goodsId: 1,
+	// 		num: 1,
+	// 		specsName: '中',
+	// 		price: 149,
+	// 		goodsImage: "http://192.168.31.70:8089/images/a35e4257-9e9a-43f8-b077-a7664064ce12.png",
+	// 	},
+	// 	{
+	// 		flag: true,
+	// 		goodsName: "女款-M",
+	// 		goodsUnit: '/份',
+	// 		goodsId: 1,
+	// 		specsName: '中',
+	// 		num: 1,
+	// 		price: 149,
+	// 		goodsImage: "http://192.168.31.70:8089/images/a35e4257-9e9a-43f8-b077-a7664064ce12.png",
+	// 	},
+	// 	{
+	// 		flag: true,
+	// 		goodsName: "女款-M",
+	// 		goodsUnit: '/份',
+	// 		goodsId: 1,
+	// 		num: 1,
+	// 		specsName: '中',
+	// 		price: 149,
+	// 		goodsImage: "http://192.168.31.70:8089/images/a35e4257-9e9a-43f8-b077-a7664064ce12.png",
+	// 	},
+	// 	{
+	// 		flag: true,
+	// 		goodsName: "女款-M",
+	// 		goodsId: 1,
+	// 		num: 1,
+	// 		goodsUnit: '/份',
+	// 		specsName: '中',
+	// 		price: 149,
+	// 		goodsImage: "http://192.168.31.70:8089/images/a35e4257-9e9a-43f8-b077-a7664064ce12.png",
+	// 	}
+	// ])
+
+	//总数
+	const totalNum = computed(() => {
+		let totalNum = 0;
+		store.orderList.map(item => {
+			item.flag ? totalNum += item.num : totalNum += 0;
+		})
+		return totalNum
+	})
+	//总共价格
+	const totalPrice = computed(() => {
+		let totalPrice = 0;
+		store.orderList.map(item => {
+			item.flag ? totalPrice += item.num * item.price : totalPrice += 0;
+		})
+		return totalPrice
+	})
+	//跳转新增地址
+	const toAddress = (item) => {
+		uni.navigateTo({
+			url: '../address/address'
+		});
+	}
+</script>
+
+<style lang="scss">
+	page {
+		background-color: #f4f4f4;
+	}
+
+	.address {
+		display: flex;
+		justify-content: space-between;
+		background-color: #FFF;
+		padding: 10px 20px;
+
+		.info {
+			display: flex;
+
+			.name {
+				font-size: 15px;
+				font-weight: 600;
+			}
+
+			.phone {
+				margin-left: 10px;
+			}
+		}
+	}
+
+	.goods-detail {
+		display: flex;
+		padding: 30rpx 15rpx 30rpx 30rpx;
+		background-color: #FFF;
+		justify-content: space-between;
+		border-bottom: 5rpx solid #f1f1f1;
+		align-items: center;
+
+		.detail-left {
+			display: flex;
+
+			.goods-left {
+				display: flex;
+				align-items: center;
+			}
+
+			.size {
+				display: flex;
+				flex-direction: column;
+				justify-content: space-around;
+				margin-left: 30rpx;
+
+				.goods-price {
+					font-size: 25rpx;
+					color: #F44545;
+				}
+			}
+		}
+
+		.detail-right {
+			text {
+				width: 50rpx;
+				line-height: 50rpx;
+				text-align: center;
+				display: inline-block;
+				background-color: #F7F7F7;
+				margin-right: 10rpx;
+			}
+
+			.add {
+				color: #FA4305;
+				border-radius: 10rpx 30rpx 30rpx 10rpx;
+				margin-right: 20rpx;
+			}
+
+			.subtract {
+				border-radius: 30rpx 10rpx 10rpx 30rpx;
+			}
+		}
+	}
+
+	.end {
+		width: 100%;
+		height: 90rpx;
+		background-color: #fff;
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		display: flex;
+		align-items: center;
+
+		.end-left {
+			width: 70%;
+			display: flex;
+			justify-content: space-between;
+			padding: 0 30rpx;
+		}
+
+		.end-right {
+			width: 30%;
+			line-height: 90rpx;
+			background-color: #F3AF28;
+			text-align: center;
+			color: #fff;
+		}
+	}
+</style>

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

@@ -1,8 +1,7 @@
 <template>
-	<view>
 	<u-swiper name='images' border-radius='1' :duration='duration' :interval='interval' :height="height"
-			:list="swipperList"></u-swiper>
+		:list="swipperList">
-	</view>
+	</u-swiper>
 	<view class="info">
 		<view class="title">
 			{{title}}
@@ -75,31 +74,29 @@
 			</view>
 		</view>
 		<view class="right">
-			<view class="cart btn u-line-1">加入购物车</view>
+			<view class="cart btn u-line-1" @click="addCar">加入购物车</view>
-			<view class="buy btn u-line-1">立即购买</view>
+			<view @click="addBuy" class="buy btn u-line-1">立即购买</view>
 		</view>
 	</view>
 </template>
 
 <script setup>
 	import {
-		userLogin
+		computed,
-	} from '../../api/user';
+		ref
+	} from 'vue';
 	import {
 		onLoad
 	} from '@dcloudio/uni-app';
+	import { carStore } from '../../store/car.js' 
 	import {
-		ref,
+		orderStore
-		computed
+	} from '../../store/order.js'
-	} from 'vue';
+	import {userLogin} from '../../api/user.js'
-	import {
-		carStore
-	} from '../../store/car';
-	//菜品详情
-	const content = ref('')
 	//获取store
 	const store = carStore()
-	//购物车数量动态变化
+	const ostore = orderStore()
+	//购物车数量
 	const carCount = computed(()=>{
 		return store.carList.length
 	})
@@ -134,13 +131,12 @@
 		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: "",
@@ -160,6 +156,15 @@
 	const addCar = ()=>{
 		store.addCar(carData.value)
 	}
+	//立即购买
+	const addBuy = ()=>{
+		//清空
+		ostore.orderList = []
+		ostore.addOrder(carData.value)
+		uni.navigateTo({
+			url: '../confirm/confirm'
+		});
+	}
 	const animationfinish = ({
 		detail: {
 			current
@@ -201,7 +206,7 @@
 	})
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 	page {
 		display: flex;
 		flex-direction: column;

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

@@ -52,10 +52,6 @@
 </template>
 
 <script setup>
-	import {
-		getSwipperListApi,
-		getHotListApi
-	} from '../../api/home';
 	import {
 		ref
 	} from 'vue';

order-app/src/store/order.js

@@ -0,0 +1,45 @@
+// 引入
+import {
+	defineStore
+} from 'pinia';
+//通过defineStore定义一个store,
+// defineStore 第一个参数是唯一的
+export const orderStore = defineStore('orderStore', {
+	state: () => {
+		return {
+			count: 0,
+			//存储购物车数据
+			orderList: []
+		};
+	},
+	// 也可以这样定义
+	// state: () => ({ count: 0 })
+	actions: {
+		//单条数据加入
+		addOrder(goods) {
+			//判断是否已经加入到购物车
+			const index = this.orderList.findIndex(item => goods.goodsId == item.goodsId)
+			//存在，删除购物车数据里面的数据
+			if (index > -1) {
+				//删除原来的数据
+				this.orderList.splice(index, 1);
+			}
+			//加的购物车
+			this.orderList.push(goods)
+		},
+		//多条数据加入
+		addOrderList(list) {
+			list.forEach(goods => {
+				//判断是否已经加入到购物车
+				const index = this.orderList.findIndex(item => goods.goodsId == item.goodsId)
+				//存在，删除购物车数据里面的数据
+				if (index > -1) {
+					//删除原来的数据
+					this.orderList.splice(index, 1);
+				}
+				//加的购物车
+				this.orderList.push(goods)
+			})
+		}
+	},
+});