Merge pull request '菜品详情页制作' (#22) from Brunch_DBK into main

order-app/src/pages.json

@@ -26,6 +26,13 @@
 			{
 				"navigationBarTitleText" : "我的"
 			}
+		},
+		{
+			"path" : "pages/detail/detail",
+			"style" : 
+			{
+				"navigationBarTitleText" : ""
+			}
 		}
 	],
 	"globalStyle": {

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

@@ -0,0 +1,322 @@
+<template>
+	<u-swiper name='images' border-radius='1' :duration='duration' :interval='interval' :height="height"
+		:list="swipperList">
+	</u-swiper>
+	</view>
+	<view class="info">
+		<view class="title">
+			{{title}}
+		</view>
+		<view class="price">
+			{{price}}<span class='goodsUnit'>{{goodsUnit}}</span>
+		</view>
+		<view class="spec-driver">
+			规格
+		</view>
+		<view class="spces">
+			<view @click="change(index,item)" :class="{ active: current === index }" v-for="(item,index) in specs"
+				class="item">
+				{{item.specsName}}
+			</view>
+		</view>
+		<view class="detalis">
+			<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>
+		</view>
+		<swiper class="swiper-box" :current="swiperCurrent" @animationfinish="animationfinish">
+			<swiper-item class="swiper-item">
+				<scroll-view scroll-y style="height: 100%;width: 100%;">
+					<view class="page-box">
+						我是内容一
+						我是内容一
+						我是内容一
+						我是内容一
+						我是内容一
+						我是内容一
+						我是内容一
+						我是内容一
+						我是内容一
+						我是内容一
+						我是内容一
+						我是内容一
+						我是内容一
+						我是内容一
+						我是内容一
+						我是内容一
+						我是内容一
+					</view>
+				</scroll-view>
+			</swiper-item>
+			<swiper-item class="swiper-item">
+				<scroll-view scroll-y style="height: 100%;width: 100%">
+					<view class="page-box">
+						我是内容二
+						我是内容二
+						我是内容二
+						我是内容二
+						我是内容二
+						我是内容二
+						我是内容二
+						我是内容二
+						我是内容二
+						我是内容二
+						我是内容二
+						我是内容二
+						我是内容二
+						我是内容二
+						我是内容二
+						我是内容二
+						我是内容二
+					</view>
+				</scroll-view>
+			</swiper-item>
+		</swiper>
+		<view class="navigation">
+			<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>
+				<view class="item car">
+					<u-badge class="car-num" :count="9" 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>
+			</view>
+			<view class="right">
+				<view class="cart btn u-line-1">加入购物车</view>
+				<view class="buy btn u-line-1">立即购买</view>
+			</view>
+		</view>
+</template>
+
+<script setup>
+	import {
+		ref
+	} from 'vue';
+	import {
+		onLoad
+	} from '@dcloudio/uni-app';
+	const current = ref(0)
+	//轮播图高度
+	const height = ref('400')
+	//是否显示面板指示点
+	const indicatorDots = ref(true)
+	//是否自动播放
+	const autoplay = ref(true)
+	//自动切换时间间隔
+	const interval = ref(2000)
+	//滑动动画时长
+	const duration = ref(500)
+	//定义轮播图数据
+	const swiperList = ref([])
+	//轮播图数据
+	const swipperList = ref([])
+	//标题
+	const title = ref('')
+	//价格
+	const price = ref(0)
+	//单位
+	const goodsUnit = ref('')
+	//规格
+	const specs = ref([])
+	//规格点击事件
+	const change = (index, item) => {
+		current.value = index
+		price.value = item.goodsPrice
+	}
+	//详情tab
+	const swiperCurrent = ref(0)
+	const dx = ref(0)
+	const tabIndex = ref(0)
+	// tab栏内容切换
+	const tabClick = (index) => {
+		tabIndex.value = index;
+		swiperCurrent.value = index;
+	}
+
+	const animationfinish = ({
+		detail: {
+			current
+		}
+	}) => {
+		console.log(current)
+		swiperCurrent.value = current;
+		tabIndex.value = current;
+	}
+
+	onLoad((options) => {
+		const goods = JSON.parse(options.goods)
+		swiperList.value = goods.goodsImage.split(',')
+		console.log(goods)
+		goodsUnit.value = goods.goodsUnit
+		title.value = goods.goodsName
+		price.value = goods.specs[0].goodsPrice
+		specs.value = goods.specs
+	})
+</script>
+
+<style lang="scss" scoped>
+	page {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+	}
+
+	.info {
+		display: flex;
+		align-items: center;
+		background-color: #FFF;
+	}
+
+	.title {
+		color: #313131;
+		font-weight: bold;
+		padding: 20rpx;
+		font-size: 30rpx;
+	}
+
+	.price {
+		color: #F3AF28;
+		padding: 20rpx;
+		font-weight: bold;
+	}
+
+	.goodsUnit {
+		padding-left: 3rpx;
+		color: #000;
+	}
+
+	.spec-driver {
+		display: flex;
+		align-items: center;
+		padding: 10rpx 20rpx;
+		font-weight: bold;
+		background-color: #f0f0f0;
+	}
+
+	.spces {
+		display: flex;
+		flex-wrap: wrap;
+		background-color: #FFF;
+		padding: 15rpx 10px;
+		margin: 10px 0px;
+
+		.item {
+			padding: 5px 20px;
+			margin: 0px 10px;
+			border-radius: 5px;
+			border: 1px solid #E2E2E2;
+		}
+
+		.active {
+			padding: 5px 20px;
+			margin: 0px 10px;
+			border-radius: 5px;
+			border: 1px solid #E2E2E2;
+			background-color: #F3AF28;
+			color: #FFF;
+		}
+	}
+
+	.detalis {
+		display: flex;
+		padding: 0px 5px;
+
+		.item {
+			flex-grow: 1;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			padding: 7px;
+		}
+
+		.left {
+			border-top-left-radius: 5px;
+			border-bottom-left-radius: 5px;
+			border-top: 1px solid #E2E2E2;
+			border-bottom: 1px solid #E2E2E2;
+			border-left: 1px solid #E2E2E2;
+		}
+
+		.right {
+			border-top-right-radius: 5px;
+			border-bottom-right-radius: 5px;
+			border: 1px solid #E2E2E2;
+		}
+
+		.item-active {
+			flex-grow: 1;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			padding: 7px;
+			background-color: #f0f0f0;
+		}
+	}
+
+	.navigation {
+		display: flex;
+		margin-top: 100rpx;
+		border: solid 2rpx #f2f2f2;
+		background-color: #ffffff;
+		padding: 16rpx 0;
+		position: fixed;
+		width: 100%;
+		bottom: 0;
+
+		.left {
+			display: flex;
+			font-size: 20rpx;
+
+			.item {
+				margin: 0 30rpx;
+
+				&.car {
+					text-align: center;
+					position: relative;
+
+					.car-num {
+						position: absolute;
+						top: -10rpx;
+						right: -10rpx;
+					}
+				}
+			}
+		}
+
+		.right {
+			display: flex;
+			font-size: 28rpx;
+			align-items: center;
+
+			.btn {
+				line-height: 66rpx;
+				padding: 0 30rpx;
+				border-radius: 36rpx;
+				color: #ffffff;
+			}
+
+			.cart {
+				background-color: #ed3f14;
+				margin-right: 30rpx;
+			}
+
+			.buy {
+				background-color: #F3AF28;
+			}
+		}
+	}
+
+	.swiper-box {
+		flex: 1;
+	}
+
+	.page-box {
+		padding: 20rpx;
+	}
+</style>

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

@@ -1,12 +1,12 @@
 <template>
-	<u-swiper border-radius='1' :duration='duration' :interval='interval' :height="height"
+	<u-swiper name='images' border-radius='1' :duration='duration' :interval='interval' :height="height"
 		:list="swiperList"></u-swiper>
 	<u-divider margin-top='20' margin-bottom='20' color="#F3AF28">热门推荐</u-divider>
 	<view class="wrap">
 		<u-waterfall v-model="flowList" ref="uWaterfall1">
 			<template v-slot:left="{leftList}">
 				<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
-					<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
+					<u-lazy-load @click="toDetails(item)" threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
 					<view class="demo-title">
 						{{item.title}}
 					</view>
@@ -17,13 +17,13 @@
 						<view class="demo-title">
 							/份
 						</view>
-						<image class="carimg" :src="carimg"></image>
+						<image @click="toDetails(item)" 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 threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
+					<u-lazy-load @click="toDetails(item)" threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
 					<view class="demo-title">
 						{{item.title}}
 					</view>
@@ -34,7 +34,7 @@
 						<view class="demo-title">
 							/份
 						</view>
-						<image class="carimg" :src="carimg"></image>
+						<image @click="toDetails(item)" class="carimg" :src="carimg"></image>
 					</view>
 				</view>
 			</template>
@@ -62,9 +62,9 @@
 	const swiperList = ref([{
 		image: '/static/swiper_1.png'
 	}, {
-		image: '/static/swiper_2.png'
+		image: '/static/swiper_1.png'
 	}, {
-		image: '/static/swiper_3.png'
+		image: '/static/swiper_1.png'
 	}])
 	//瀑布流数据
 	const flowList = ref([{
@@ -98,6 +98,13 @@
 			image: '/static/swiper_1.png'
 		}
 	])
+    //跳转至详情
+	const toDetails = (item)=>{
+		//在起始页面跳转到details.vue页面并传递参数
+		uni.navigateTo({
+			url:'../detail/detail?goods='+JSON.stringify(item)
+		});
+	}
 </script>
 
 <style>