chore: 今日吃啥页面

mer_uniapp/pages/what_to_eat_today/index/index.vue

@@ -1,57 +1,81 @@
 <template>
 	<view :data-theme="theme">
 		<view class="cart_nav" :style='"height:"+navH+"rpx;"'>
-			<nav-bar iconColor='#fff' backgroundColor="#FF6702"  ref="navBarRef"  navTitle="今日吃啥">
+			<nav-bar iconColor='#fff' backgroundColor="#FF6702" ref="navBarRef" navTitle="今日吃啥">
 			</nav-bar>
 		</view>
-		<view class="content">
+		<view class="content" :style="{'background-image': `url(../static/img/背景.png)`}">
 			<view class="items">
 				<view class="item" v-for="(item,i) in items" :key="i" :class="item.checked ? 'active':'notActive'"
-				 @click="handleCheck(i)">
-					<img :src="item.icon" alt="" style="height: 80rpx;width: 80rpx;margin-right: 19rpx;"/>
+					@click="handleCheck(i)">
+					<img :src="item.icon" alt="" style="height: 80rpx;width: 80rpx;margin-right: 19rpx;" />
 					<view class="">
 						{{item.label}}
 					</view>
 				</view>
 			</view>
+			<image class="start-btn" src="../static/img/开始按钮.png" mode="" @click="onStartBtnClick"></image>
 		</view>
+		<!-- 评论 -->
+		<uni-popup type="center" animation ref="activate" :mask-click="false">
+			<view class="model-container">
+				<img @click="onClose" src="../static/img/关闭.png" alt="" style="height: 49rpx;width: 49rpx;"
+					class="m-close" />
+				<view class="goods-items">
+					<view class="g-item" v-for="ite in 2" :key="ite">
+						<img src="../static/img/甜点.png" alt="" style="height: 230rpx;width: 230rpx;" />
+						<view class="g-title">
+							张记煲仔饭套餐
+						</view>
+						<view class="g-price">
+							¥18
+						</view>
+						
+						<view class="choose-btn" @click="onChoose({id:23})">
+							选择
+						</view>
+					</view>
+				</view>
+			</view>
+		</uni-popup>
 	</view>
 </template>
 
 <script>
-		import navBar from '@/components/navBar';
+	import navBar from '@/components/navBar';
 	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
 	let app = getApp();
 	export default {
-		components:{navBar},
+		components: {
+			navBar
+		},
 		data() {
 			return {
-					theme: app.globalData.theme,
-							navH:'',
+				theme: app.globalData.theme,
+				navH: '',
 				statusBarHeight: app.globalData.statusBarHeight,
 				navigationBarHeight: 0,
 				loading: false,
 				loadTitle: '',
-				items:[
-					{
-						label:'我不挑食',
-						icon:require('../static/img/甜点.png'),
-						checked:true
+				items: [{
+						label: '我不挑食',
+						icon: require('../static/img/甜点.png'),
+						checked: true
 					},
 					{
-						label:'减肥套餐',
-						icon:require('../static/img/减肥餐.png'),
-						checked:true
+						label: '减肥套餐',
+						icon: require('../static/img/减肥餐.png'),
+						checked: true
 					},
 					{
-						label:'精致小食',
-						icon:require('../static/img/小食.png'),
-						checked:true
+						label: '精致小食',
+						icon: require('../static/img/小食.png'),
+						checked: true
 					},
 					{
-						label:'豪华美食',
-						icon:require('../static/img/豪华餐.png'),
-						checked:true
+						label: '豪华美食',
+						icon: require('../static/img/豪华餐.png'),
+						checked: true
 					}
 				]
 			}
@@ -68,13 +92,26 @@
 		},
 		methods: {
 			handleCheck(i) {
-					this.items[i].checked = !this.items[i].checked
+				this.items[i].checked = !this.items[i].checked
 			},
 			handBack() {
 				uni.navigateBack({
 					delta: 1
 				})
 			},
+			onStartBtnClick() {
+				uni.showLoading()
+				this.$refs.activate.open()
+				uni.hideLoading()
+			},
+			onClose() {
+				this.$refs.activate.close()
+			},
+			onChoose(data) {
+				uni.navigateTo({
+					url: `/pages/goods/goods_details/index?id=${data.id}&mt=0&type=4`,
+				})
+			}
 		},
 		mounted() {
 
@@ -91,36 +128,44 @@
 		text-align: center;
 		position: relative;
 	}
+
 	.back-button {
-	
+
 		width: 25rpx;
-	
+
 		height: 25rpx;
-	
+
 		border-right: 4rpx solid #fff;
 		border-bottom: 4rpx solid #fff;
-	
+
 		transform: rotate(135deg);
-	
+
 		margin-left: 10rpx;
-	
+
 		display: inline-block;
 		position: absolute;
 		left: 40rpx;
 		top: 25rpx;
 	}
-	
-	
+
+
 	.content {
-		margin-top: 96rpx;
-		padding-top: 39rpx;
+		position: relative;
+		height: calc(100vh - 49px);
+		width: 100vw;
+		padding-top: 135rpx;
+		/* background-image: url('../static/img/背景.png'); */
+		background-size: cover;
+		background-repeat: no-repeat;
 	}
+
 	.items {
 		display: grid;
 		grid-template-columns: auto auto;
 		grid-gap: 19.23rpx;
 		margin: 0 57rpx;
 	}
+
 	.item {
 		display: flex;
 		align-items: center;
@@ -130,16 +175,90 @@
 		font-family: PingFangSC, PingFang SC;
 		width: 308rpx;
 		height: 96rpx;
-		background: linear-gradient( 180deg, #FFE7CA 0%, #FFFFFF 100%);
+		background: linear-gradient(180deg, #FFE7CA 0%, #FFFFFF 100%);
 		border-radius: 8rpx;
 		border: 4rpx solid;
 		border-image: linear-gradient(225deg, rgba(255, 194, 80, 1), rgba(255, 220, 107, 1), rgba(255, 225, 133, 1)) 4 4 !important;
 		padding: 9rpx;
 	}
+
 	.active {
 		border: 4rpx solid;
 	}
+
 	.notActive {
 		border: none;
 	}
-</style>
+
+	.start-btn {
+		position: absolute;
+		width: 153rpx;
+		height: 80rpx;
+		top: 55%;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+
+	.model-container {
+		position: relative;
+		width: 712rpx;
+		height: 654rpx;
+		background-color: #fff;
+		border-radius: 23rpx;
+		padding-top: 96rpx;
+	}
+
+	.m-close {
+		position: absolute;
+		right: 39rpx;
+		top: 20rpx;
+	}
+
+	.goods-items {
+		margin: 0 39rpx;
+		display: flex;
+		gap: 20rpx;
+	}
+
+	.g-item {
+		padding: 38.46rpx;
+		background: linear-gradient(180deg, #FFF9F1 0%, #FFFFFF 100%);
+		border-radius: 8rpx;
+		border: 2rpx solid;
+		border-image: linear-gradient(225deg, rgba(255, 194, 80, 1), rgba(255, 220, 107, 1), rgba(255, 225, 133, 1)) 2 2;
+	}
+
+	.g-title {
+		margin-top: 19rpx;
+		font-family: PingFangSC, PingFang SC;
+		font-size: 27rpx;
+		color: #141414;
+		line-height: 38rpx;
+		text-align: center;
+	}
+
+	.g-price {
+		font-family: PingFangSC, PingFang SC;
+		font-weight: 600;
+		font-size: 31rpx;
+		color: #FF9805;
+		line-height: 42rpx;
+		text-align: center;
+		margin-bottom: 10rpx;
+	}
+
+	.choose-btn {
+		width: 154rpx;
+		height: 54rpx;
+		background: linear-gradient(180deg, #FFAC3D 0%, #FF1E1D 100%);
+		border-radius: 15rpx;
+		border: 2rpx solid #FFD288;
+		font-family: PingFangSC, PingFang SC;
+		font-size: 27rpx;
+		color: #FFFFFF;
+		line-height: 54rpx;
+		text-align: center;
+
+		margin: auto;
+	}
+</style>