From f658ca9baf41d2f099f466e01d92545b19cbca2c Mon Sep 17 00:00:00 2001
From: lSun <15893999301@qq.com>
Date: Thu, 2 Jan 2025 16:15:19 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index.vue | 404 +++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 334 insertions(+), 70 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index ad19dfa..ecdf0fd 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,77 +1,341 @@
 <template>
-  <view>
-    <u-grid border @click="click">
-      <u-grid-item v-for="(baseListItem, baseListIndex) in baseList" :key="baseListIndex">
-        <u-icon :customStyle="{ paddingTop: 20 + 'px' }" :name="baseListItem.name" :size="22"></u-icon>
-        <text class="grid-text">{{ baseListItem.title }}</text>
-      </u-grid-item>
-    </u-grid>
-    <u-toast ref="uToast" />
-  </view>
+	<view class="work-container">
+
+		<view class="header">
+			<text class="header-text">皖送e餐</text>
+		</view>
+
+		<!-- 轮播图 -->
+		<uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
+			<swiper class="swiper-box" :current="swiperDotIndex" :autoplay="true" :interval="3000"
+				@change="changeSwiper">
+				<swiper-item v-for="(item, index) in data" :key="index">
+					<view class="swiper-item" @click="clickBannerItem(item)">
+						<image :src="item.image" mode="aspectFill" :draggable="false" />
+					</view>
+				</swiper-item>
+			</swiper>
+		</uni-swiper-dot>
+
+		<!-- 功能按钮区 -->
+		<view class="function-area">
+			<view class="function-item" @click="goToMenu">
+				<view class="icon-box menu">
+					<image src="/static/images/index/weeklyMenu.png" mode="aspectFit"></image>
+				</view>
+				<text class="function-text">一周菜谱</text>
+			</view>
+			<view class="function-item" @click="goToOrder">
+				<view class="icon-box order">
+					<image src="/static/images/index/food.png" mode="aspectFit"></image>
+				</view>
+				<text class="function-text">预订餐</text>
+			</view>
+		</view>
+
+		<!-- 底部信息区 -->
+		<view class="bottom-info">
+			<!-- 左侧二维码区域 -->
+			<view class="qr-area" @click="goCode">
+				<view class="qr-title">个人二维码</view>
+				<view class="qr-subtitle">核身、支付、核销</view>
+				<view class="qr-code">
+					<image src="/static/images/index/code.png" mode="aspectFit"></image>
+				</view>
+			</view>
+
+			<!-- 右侧余额区域 -->
+			<view class="balance-area">
+				<view class="balance-text">
+					<text class="balance-label">余额/充值</text>
+					<view class="balance-amount">
+						<text class="currency">¥</text>
+						<text class="amount">1.03</text>
+					</view>
+					<view class="wallet-icon">
+						<image src="/static/images/index/balance.png" mode="aspectFit"></image>
+					</view>
+				</view>
+			</view>
+		</view>
+
+	</view>
 </template>
 
 <script>
-export default {
-  data() {
-    return {
-      baseList: [
-        {
-          name: 'photo',
-          title: '库存查询'
-        },
-        {
-          name: 'lock',
-          title: '退料清点'
-        },
-        {
-          name: 'star',
-          title: '检验入库'
-        },
-        {
-          name: 'hourglass',
-          title: '库存盘点'
-        },
-        {
-          name: 'home',
-          title: '到货确认单'
-        },
-        {
-          name: 'star',
-          title: '派车管理'
-        }
-      ]
-    }
-  },
-  methods: {
-    click(index) {
-      console.log('🚀 ~ click ~ index:', index)
-      let url = ''
-      if (index === 0) {
-        url = '/pages/inventory/index'
-      } else if (index === 1) {
-        url = '/pages/returnInventory/index'
-      } else if (index === 2) {
-        url = '/pages/inspectionEntry/index'
-      } else if (index === 3) {
-        url = '/pages/stockTaking/index'
-      } else if (index === 4) {
-        url = '/pages/arrivalConfirmation/index'
-      } else if (index === 5) {
-        url = '/pages/sendACarSystem/index'
-      }
-      uni.navigateTo({ url })
-    }
-  }
-}
+	export default {
+		data() {
+			return {
+				current: 0,
+				swiperDotIndex: 0,
+				data: [{
+						image: '/static/images/banner/banner01.jpg'
+					},
+					{
+						image: '/static/images/banner/banner02.jpg'
+					},
+					{
+						image: '/static/images/banner/banner03.jpg'
+					}
+				]
+			}
+		},
+		methods: {
+			changeSwiper(e) {
+				this.current = e.detail.current
+			},
+			goToMenu() {
+				// 跳转到菜单页面
+				uni.navigateTo({
+					url: '/pages/menu/index'
+				})
+			},
+			goToOrder() {
+				// 跳转到订餐页面
+				uni.navigateTo({
+					url: '/pages/order/index'
+				})
+			},
+			goCode() {
+				// 跳转到订餐页面
+				uni.navigateTo({
+					url: '/pages/code/index'
+				})
+			}
+		}
+	}
 </script>
 
 <style lang="scss">
-.grid-text {
-  font-size: 14px;
-  color: #909399;
-  padding: 10rpx 0 20rpx 0rpx;
-  /* #ifndef APP-PLUS */
-  box-sizing: border-box;
-  /* #endif */
-}
-</style>
+	/* #ifndef APP-NVUE */
+	page {
+		display: flex;
+		flex-direction: column;
+		box-sizing: border-box;
+		background-color: #FAFCFF;
+		min-height: 100%;
+		height: auto;
+	}
+
+	view {
+		font-size: 14px;
+		line-height: inherit;
+	}
+
+	/* #endif */
+	.work-container {
+		background-color: #FAFCFF;
+		padding: 0 30rpx;
+	}
+
+	.header {
+		padding: 50rpx 0;
+
+		.header-text {
+			font-size: 36rpx;
+			font-weight: 700;
+			color: #333;
+		}
+	}
+
+
+	.function-area {
+		margin-top: 30rpx;
+		border-radius: 12rpx;
+		padding: 0rpx;
+		display: flex;
+		justify-content: space-between;
+		margin-bottom: 30rpx;
+		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+
+		.function-item {
+			background-color: #FFFFFF;
+			border-radius: 12rpx;
+			padding: 40rpx;
+			display: flex;
+			align-items: center;
+			gap: 18rpx;
+			flex: 0 0 calc(50% - 30rpx);
+			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+
+		}
+
+		.icon-box {
+			width: 66rpx;
+			height: 66rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			border-radius: 50%;
+
+			&.menu {
+				background-color: #F5F5F5;
+			}
+
+			&.order {
+				background-color: #FFF7F2;
+			}
+		}
+
+		.function-text {
+			font-size: 28rpx;
+			color: #333;
+			font-weight: 600;
+		}
+	}
+
+	.bottom-info {
+		margin-top: 30rpx;
+		border-radius: 12rpx;
+		padding: 0 0 0 0;
+		display: flex;
+		justify-content: space-between;
+		gap: 20rpx;
+		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+
+		.qr-area,
+		.balance-area {
+			background-color: #FFFFFF;
+			border-radius: 12rpx;
+			padding: 80rpx;
+			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+		}
+
+		.qr-area {
+			.qr-title {
+				font-size: 30rpx;
+				color: #333;
+				margin-bottom: 8rpx;
+				margin-top: -45rpx;
+				margin-left: -45rpx;
+				font-weight: 700;
+			}
+
+			.qr-subtitle {
+				font-size: 24rpx;
+				color: #333;
+				margin-bottom: 20rpx;
+				margin-left: -45rpx;
+			}
+
+			.qr-code {
+				width: 160rpx;
+				height: 160rpx;
+				margin-bottom: -60rpx;
+				image {
+					width: 100%;
+					height: 100%;
+					margin-left: 60rpx;
+				}
+			}
+		}
+
+		.balance-area {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+
+			.balance-text {
+				text-align: center;
+				display: flex;
+				flex-direction: column;
+				gap: 8rpx;
+				margin-left: 0rpx;
+				
+				.wallet-icon {
+					width: 160rpx;
+					height: 160rpx;
+					margin-bottom: -60rpx;
+					image{
+						width: 100%;
+						height: 100%;
+						margin-left: 60rpx;
+					}
+				}
+
+				.balance-label {
+					font-size: 24rpx;
+					color: #333;
+					margin-top: -72rpx;
+					margin-left: -160rpx;
+					font-weight: 600;
+				}
+
+				.balance-amount {
+					display: flex;
+					align-items: baseline;
+					margin-left: -50rpx;
+					.currency {
+						font-size: 24rpx;
+						color: #333;
+						margin-right: 4rpx;
+					}
+
+					.amount {
+						font-size: 36rpx;
+						font-weight: 700;
+						color: #333;
+					}
+				}
+			}
+		}
+	}
+
+	.text {
+		text-align: center;
+		font-size: 26rpx;
+		margin-top: 10rpx;
+	}
+
+	.grid-item-box {
+		flex: 1;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 15px 0;
+	}
+
+	.uni-margin-wrap {
+		width: 690rpx;
+		width: 100%;
+		;
+	}
+
+	.swiper {
+		height: 300rpx;
+	}
+
+	.swiper-box {
+		height: 150px;
+	}
+
+	.swiper-item {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		color: #fff;
+		height: 300rpx;
+		line-height: 300rpx;
+	}
+
+	@media screen and (min-width: 500px) {
+		.uni-swiper-dot-box {
+			width: 400px;
+			/* #ifndef APP-NVUE */
+			margin: 0 auto;
+			/* #endif */
+			margin-top: 8px;
+		}
+
+		.image {
+			width: 100%;
+		}
+	}
+</style>
\ No newline at end of file