购物车页面制作

order-app/package.json

@@ -63,7 +63,7 @@
     "@dcloudio/vite-plugin-uni": "3.0.0-4070520250711001",
     "@vue/runtime-core": "^3.4.21",
     "sass": "^1.90.0",
-    "sass-loader": "^10.1.1",
+    "sass-loader": "^16.0.5",
     "vite": "5.2.8"
   }
 }

order-app/src/main.js

@@ -2,12 +2,12 @@ import {
 	createSSRApp
 } from "vue";
 // 引入 uView UI
-import uView from './uni_modules/vk-uview-ui'
+import uView from './uni_modules/vk-uview-ui';
 import App from "./App.vue";
 export function createApp() {
 	const app = createSSRApp(App);
 	// 使用 uView UI
-	app.use(uView)
+	app.use(uView);
 	return {
 		app,
 	};

order-app/src/pages.json

@@ -5,27 +5,27 @@
 			"style": {
 				"navigationBarTitleText": "首页"
 			}
-		},
+		}, {
-		{
 			"path": "pages/category/category",
-			"style" : 
+			"style": {
-			{
+				"navigationBarTitleText": "分类",
-				"navigationBarTitleText" : "分类"
+				"enablePullDownRefresh": false
 			}
-		},
+
-		{
+		}, {
 			"path": "pages/car/car",
-			"style" : 
+			"style": {
-			{
+				"navigationBarTitleText": "购物车",
-				"navigationBarTitleText" : "购物车"
+				"enablePullDownRefresh": false
 			}
-		},
+
-		{
+		}, {
 			"path": "pages/mine/mine",
-			"style" : 
+			"style": {
-			{
+				"navigationBarTitleText": "我的",
-				"navigationBarTitleText" : "我的"
+				"enablePullDownRefresh": false
 			}
+
 		},
 		{
 			"path" : "pages/detail/detail",
@@ -36,9 +36,9 @@
 		}
 	],
 	"globalStyle": {
-		//导航字体颜色 只有黑白
+		// 导航字体颜色，仅支持 black/white
 		"navigationBarTextStyle": "white",
-		//导航全局标题 当页面没有配置时生效
+		//导航全局标题，当页面没有配置的时候生效
 		"navigationBarTitleText": "微信点餐小程序",
 		//导航字体颜色
 		"navigationBarBackgroundColor": "#F3AF28",
@@ -46,8 +46,8 @@
 		"backgroundColor": "#F8F8F8"
 	},
 	"tabBar": {
-		"color": "#7A7E83",
+		"color": "#333333",
-		"selectedColor": "#3cc51f",
+		"selectedColor": "#F3AF28",
 		"borderStyle": "black",
 		"backgroundColor": "#ffffff",
 		"list": [{
@@ -72,5 +72,4 @@
 			"text": "我的"
 		}]
 	}
-
 }

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

@@ -1,22 +1,252 @@
 <template>
+	<view style='padding-bottom: 60px;' 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">
+					<checkbox-group @change="selected($event,item)">
+						<label>
+							<checkbox class="selected" :data-goodsId="item.goodsId" :data-price="item.price"
+								:data-num="item.num" color="#555555" :checked="item.flag" />
+						</label>
+					</checkbox-group>
+					<image :src="item.goodsImage" style="width: 150rpx;height: 140rpx;margin-left: 10px;"></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="subtract" @click="reduce(item)">-</text>
+				<text class="num">{{item.num}}</text>
+				<text @click="add(item)" class="add">+</text>
+			</view>
+		</view>
+	</view>
+	<view class="end">
+		<view class="end-left">
+			<checkbox-group @change="selectAlls()">
+				<label>
+					<checkbox :checked="allchecked" />全选
+				</label>
+			</checkbox-group>
 			<view>
-		
+				总计：<text style="color: #f00;font-weight: bold;">￥ {{totalPrice}}</text>
+			</view>
+		</view>
+		<view class="end-right">
+			结算({{totalNum}})
+		</view>
 	</view>
 </template>
 
-<script>
+<script setup>
-	export default {
+	import {
-		data() {
+		ref,
-			return {
+		reactive,
+		computed
+	} from 'vue'
+	const show = ref(true);
+	const allchecked = ref(true);
+	const checked = ref(true);
+	const goods = reactive([{
+			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",
+			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",
+		}
+	])
+	const selected = (e, item) => {
+		console.log(e)
+		console.log(item)
+		if (item.flag == true) {
+			item.flag = false;
+		} else {
+			item.flag = true;
+		}
+		// 过滤出数组中checked为true的项目，如果和原List长度相等，就全选显示
+		let newArr = goods.filter(item => (item.flag == true))
+		if (newArr.length === goods.length) {
+			allchecked.value = true;
+		} else {
+			allchecked.value = false;
+		}
+		// console.log(goods)
+	}
 
+	const selectAlls = () => {
+		if (allchecked.value == true) {
+			allchecked.value = false;
+			// 遍历RecordList数组 取消全选
+			goods.forEach(item => {
+				// this.$set(item, 'flag', false)
+				item.flag = false
+			})
+		} else {
+			allchecked.value = true;
+			// 遍历RecordList数组 设置全选
+			goods.forEach(item => {
+				// this.$set(item, 'flag', true)
+				item.flag = true
+			})
+		}
 	}
-		},
-		methods: {
 
+	const reduce = (item) => {
+		let num = item.num
+		if (num > 1) {
+			num -= 1
+		} else if (num = 1) {
+			uni.showToast({
+				title: "该宝贝不能减少了哟~"
+			})
 		}
+		item.num = num
 	}
+
+	const add = (item) => {
+		let num = item.num
+		item.num = num + 1
+	}
+
+	const totalNum = computed(() => {
+		let totalNum = 0;
+		goods.map(item => {
+			item.flag ? totalNum += item.num : totalNum += 0
+		})
+		return totalNum
+	})
+
+	const totalPrice = computed(() => {
+		let totalPrice = 0;
+		goods.map(item => {
+			item.flag ? totalPrice += item.num * item.price : totalPrice += 0
+		})
+		return totalPrice
+	})
 </script>
 
-<style>
+<style lang="scss">
+	.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;
+			justify-content: space-around;
+			flex-direction: column;
+			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: #F44545;
+			text-align: center;
+			color: #fff;
+		}
+	}
 </style>

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

@@ -1,11 +1,5 @@
 <template>
 	<view class="u-wrap">
-		<!-- <view class="u-search-box">
-			<view class="u-search-inner">
-				<u-icon name="search" color="#909399" :size="28"></u-icon>
-				<text class="u-search-text">搜索uView</text>
-			</view>
-		</view> -->
 		<view class="u-menu-wrap">
 			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
 				<view v-for="(item,index) in tabbar" :key="index" class="u-tab-item"
@@ -39,26 +33,27 @@
 	import {
 		ref,
 		getCurrentInstance
-	} from 'vue';
+	} from "vue"
+	// 获取组件实例
 	const instance = getCurrentInstance();
 	const tabbar = ref([{
 		"name": "早点",
 		"foods": [{
 				"name": "豆浆",
 				"key": "豆浆",
-					"icon": "/static/swiper_1.png",
+				"icon": "/static/test-5.png",
 				"cat": 6
 			},
 			{
 				"name": "油条",
 				"key": "糕点饼干",
-					"icon": "/static/swiper_1.png",
+				"icon": "/static/test-8.png",
 				"cat": 6
 			},
 			{
 				"name": "油条",
 				"key": "糕点饼干",
-					"icon": "/static/swiper_1.png",
+				"icon": "/static/test-8.png",
 				"cat": 6
 			}
 		]
@@ -68,13 +63,13 @@
 		"foods": [{
 				"name": "小锅米线",
 				"key": "豆浆",
-					"icon": "/static/swiper_1.png",
+				"icon": "/static/test-5.png",
 				"cat": 6
 			},
 			{
 				"name": "豆花米线",
 				"key": "糕点饼干",
-					"icon": "/static/swiper_1.png",
+				"icon": "/static/test-5.png",
 				"cat": 6
 			}
 		]
@@ -101,9 +96,7 @@
 	const getElRect = (elClass, dataVal)=>{
 		new Promise((resolve, reject) => {
 			const query = uni.createSelectorQuery().in(instance);
-			query.select('.' + elClass).fields({
+			query.select('.' + elClass).fields({size: true},res => {
-				size: true
-			}, res => {
 				// 如果节点尚未生成，res值为null，循环调用执行
 				if(!res) {
 					setTimeout(() => {
@@ -117,6 +110,7 @@
 	}
 </script>
 
+
 <style lang="scss" scoped>
 	.u-wrap {
 		height: calc(100vh);
@@ -180,7 +174,7 @@
 	.u-tab-item-active::before {
 		content: "";
 		position: absolute;
-		border-left: 4px solid $u-type-primary;
+		border-left: 4px solid #F3AF28;
 		height: 32rpx;
 		left: 0;
 		top: 39rpx;
@@ -236,3 +230,4 @@
 		height: 120rpx;
 	}
 </style>
+

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

@@ -1,7 +1,7 @@
 <template>
+	<view>
 		<u-swiper name='images' border-radius='1' :duration='duration' :interval='interval' :height="height"
-		:list="swipperList">
+			:list="swipperList"></u-swiper>
-	</u-swiper>
 	</view>
 	<view class="info">
 		<view class="title">
@@ -10,6 +10,7 @@
 		<view class="price">
 			{{price}}<span class='goodsUnit'>{{goodsUnit}}</span>
 		</view>
+	</view>
 	<view class="spec-driver">
 		规格
 	</view>
@@ -20,10 +21,10 @@
 		</view>
 	</view>
 	<view class="detalis">
-			<view @click="tabClick(0)" class="left" :class="{'tabIndex === 0 ? 'item-active':'item'}]">
+		<view @click="tabClick(0)" class="left" :class="[tabIndex == 0 ? 'item-active':'item']">
 			详情
 		</view>
-			<view @click="tabClick(1)" class="right" :class="{'tabIndex === 1 ? 'item-active':'item'}]">
+		<view @click="tabClick(1)" class="right" :class="[tabIndex == 1 ? 'item-active':'item']">
 			评论
 		</view>
 	</view>
@@ -47,12 +48,11 @@
 					我是内容一
 					我是内容一
 					我是内容一
-						我是内容一
 				</view>
 			</scroll-view>
 		</swiper-item>
 		<swiper-item class="swiper-item">
-				<scroll-view scroll-y style="height: 100%;width: 100%">
+			<scroll-view scroll-y style="height: 100%;width: 100%;">
 				<view class="page-box">
 					我是内容二
 					我是内容二
@@ -71,6 +71,8 @@
 					我是内容二
 					我是内容二
 					我是内容二
+					我是内容二
+					我是内容二
 				</view>
 			</scroll-view>
 		</swiper-item>
@@ -79,7 +81,7 @@
 		<view class="left">
 			<view class="item">
 				<u-icon name="home" :size="40" :color="$u.color['contentColor']"></u-icon>
-					<view class="text u-line-1">店铺</view>
+				<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>
@@ -95,12 +97,12 @@
 </template>
 
 <script setup>
-	import {
-		ref
-	} from 'vue';
 	import {
 		onLoad
 	} from '@dcloudio/uni-app';
+	import {
+		ref
+	} from 'vue';
 	const current = ref(0)
 	//轮播图高度
 	const height = ref('400')
@@ -112,7 +114,7 @@
 	const interval = ref(2000)
 	//滑动动画时长
 	const duration = ref(500)
-	//定义轮播图数据
+	//定义轮播图的数据
 	const swiperList = ref([])
 	//轮播图数据
 	const swipperList = ref([])
@@ -148,10 +150,9 @@
 		swiperCurrent.value = current;
 		tabIndex.value = current;
 	}
-
 	onLoad((options) => {
 		const goods = JSON.parse(options.goods)
-		swiperList.value = goods.goodsImage.split(',')
+		swipperList.value = goods.goodsImage.split(',')
 		console.log(goods)
 		goodsUnit.value = goods.goodsUnit
 		title.value = goods.goodsName
@@ -160,7 +161,7 @@
 	})
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 	page {
 		display: flex;
 		flex-direction: column;

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

@@ -1,12 +1,13 @@
 <template>
-	<u-swiper name='images' border-radius='1' :duration='duration' :interval='interval' :height="height"
+	<u-swiper border-radius='1' :duration='duration' :interval='interval' :height="height" :list="swiperList">
-		:list="swiperList"></u-swiper>
+	</u-swiper>
-	<u-divider margin-top='20' margin-bottom='20' color="#F3AF28">热门推荐</u-divider>
+	<u-divider margin-top='20' margin-bottom='20' color="#F3AF28">店长推荐</u-divider>
 	<view class="wrap">
-		<u-waterfall v-model="flowList" ref="uWaterfall1">
+		<u-waterfall v-model="flowList" ref="uWaterfall">
 			<template v-slot:left="{leftList}">
 				<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
-					<u-lazy-load @click="toDetails(item)" threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
+					<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
+					<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
 					<view class="demo-title">
 						{{item.title}}
 					</view>
@@ -17,13 +18,13 @@
 						<view class="demo-title">
 							/份
 						</view>
-						<image @click="toDetails(item)" class="carimg" :src="carimg"></image>
+						<image class="carimg" :src="carimg"></image>
 					</view>
 				</view>
 			</template>
 			<template v-slot:right="{rightList}">
 				<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
-					<u-lazy-load @click="toDetails(item)" threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
+					<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
 					<view class="demo-title">
 						{{item.title}}
 					</view>
@@ -34,7 +35,7 @@
 						<view class="demo-title">
 							/份
 						</view>
-						<image @click="toDetails(item)" class="carimg" :src="carimg"></image>
+						<image class="carimg" :src="carimg"></image>
 					</view>
 				</view>
 			</template>
@@ -46,7 +47,6 @@
 	import {
 		ref
 	} from 'vue';
-	//购物车图片
 	const carimg = ref('/static/goodscar.png')
 	//轮播图高度
 	const height = ref('400')
@@ -58,47 +58,57 @@
 	const interval = ref(2000)
 	//滑动动画时长
 	const duration = ref(500)
-	//定义轮播图数据
+	//定义轮播图的数据
 	const swiperList = ref([{
-		image: '/static/swiper_1.png'
+		image: '/static/swipper1.png'
 	}, {
-		image: '/static/swiper_1.png'
+		image: '/static/swipper2.png'
 	}, {
-		image: '/static/swiper_1.png'
+		image: '/static/swipper3.png'
 	}])
-	//瀑布流数据
+	//列表数据
 	const flowList = ref([{
-			price: 75,
+			price: 20,
 			title: '小炒肉盖饭',
-			image: '/static/swiper_1.png'
+			image: '/static/test-5.png',
 		},
 		{
-			price: 385,
+			price: 12,
 			title: '手拉面',
-			image: '/static/swiper_1.png'
+			image: '/static/test-8.png',
 		},
 		{
-			price: 784,
+			price: 10,
 			title: '小笼包',
-			image: '/static/swiper_1.png'
+			image: '/static/test-5.png',
 		},
 		{
-			price: 7891,
+			price: 15,
 			title: '馄饨',
-			image: '/static/swiper_1.png'
+			image: '/static/test-8.png',
 		},
 		{
-			price: 2341,
+			price: 18,
 			title: '香菇肉片盖饭',
-			image: '/static/swiper_1.png'
+			image: '/static/test-8.png',
 		},
 		{
-			price: 2342,
+			price: 15,
 			title: '番茄鸡蛋盖饭',
-			image: '/static/swiper_1.png'
+			image: '/static/test-8.png',
+		},
+		{
+			price: 18,
+			title: '香菇肉片盖饭',
+			image: '/static/test-8.png',
+		},
+		{
+			price: 15,
+			title: '番茄鸡蛋盖饭',
+			image: '/static/test-8.png',
 		}
 	])
-    //跳转至详情
+	//跳转详情
 	const toDetails = (item) => {
 		//在起始页面跳转到details.vue页面并传递参数
 		uni.navigateTo({
@@ -107,7 +117,7 @@
 	}
 </script>
 
-<style>
+<style lang="scss">
 	.content {
 		display: flex;
 		flex-direction: column;
@@ -140,7 +150,7 @@
 
 	.demo-warter {
 		border-radius: 8px;
-		margin: 5px;
+		/* margin: 5px; */
 		background-color: #ffffff;
 		padding: 5px;
 		position: relative;
@@ -194,7 +204,7 @@
 
 	.demo-price {
 		font-size: 30rpx;
-		color: #FF7670;
+		color: $u-type-error;
 		margin-top: 5px;
 	}
 
@@ -212,7 +222,7 @@
 	.carimg {
 		height: 50rpx;
 		width: 50rpx;
-		margin-top: 5rpx;
+		margin-top: 5px;
 		margin-left: 8px;
 	}
 </style>

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

@@ -1,6 +1,6 @@
 <template>
 	<view>
-		
+		我的
 	</view>
 </template>