首页

pages.json

@@ -173,7 +173,19 @@
     	{
     		"navigationStyle": "custom"
     	}
-    }
+    },
+	{
+		"path": "pages/code/index",
+		"style": {
+			"navigationBarTitleText": "个人二维码"
+		}
+	},
+	{
+		"path": "pages/weeklyMenu/index",
+		"style": {
+			"navigationBarTitleText": "一周菜谱"
+		}
+	}
   ],
   "tabBar": {
     "color": "#000000",

pages/code/index.vue

@@ -1,77 +1,99 @@
 <template>
-  <view class="page">
+	<view class="work-container">
-    <!-- 标题 -->
+		<!-- 标题 -->
-    <view class="title">出示二维码支付</view>
+		<view class="title">出示二维码支付</view>
 
-    <!-- 副标题 -->
+		<!-- 副标题 -->
-    <view class="subtitle">冯武鹏</view>
+		<view class="subtitle">冯武鹏</view>
 
-    <!-- 二维码 -->
+		<!-- 二维码 -->
-    <image class="qr-code" src="https://example.com/qr-code.png" mode="aspectFill"></image>
+		<image class="qr-code" src="/static/images/code.png" mode="aspectFill"></image>
 
-    <!-- 有效期 -->
+		<!-- 有效期 -->
-    <view class="valid-time">有效时间15分钟</view>
+		<view class="valid-time">有效时间15分钟</view>
 
-    <!-- 刷新按钮 -->
+		<!-- 刷新按钮 -->
-    <u-button class="refresh-button" type="primary" @click="refreshQrCode">刷新二维码</u-button>
+		<!-- <u-button class="refresh-button" type="primary" @click="refreshQrCode">刷新二维码</u-button> -->
-  </view>
+		<view class="action-btn">
+		  <button @click="refreshQrCode" class="login-btn cu-btn block bg-blue lg round">刷新二维码</button>
+		</view>
+	</view>
 </template>
 
 <script>
-export default {
+	export default {
-  data() {
+		data() {
-    return {
+			return {
-      qrCodeUrl: 'https://example.com/qr-code.png' // 替换为实际的二维码URL
+				qrCodeUrl: '/static/images/code.png' // 替换为实际的二维码URL
-    };
+			};
-  },
+		},
-  methods: {
+		methods: {
-    refreshQrCode() {
+			refreshQrCode() {
-      // 模拟刷新二维码
+				// 模拟刷新二维码
-      this.qrCodeUrl = `https://example.com/qr-code-${Math.random()}.png`;
+				this.qrCodeUrl = `/static/images/code.png`;
-    }
+			}
-  }
+		}
-};
+	};
 </script>
 
 <style scoped>
-.page {
+	page {
-  display: flex;
+		display: flex;
-  flex-direction: column;
+		flex-direction: column;
-  align-items: center;
+		box-sizing: border-box;
-  padding: 20px;
+		background-color: #F9FBFF;
-  background-color: #f0f8ff; /* 背景颜色 */
+		min-height: 100%;
-}
+		height: auto;
+	}
 
-.title {
+	.work-container {
-  font-size: 24px;
+		background-color: #FFFFFF;
-  color: #333;
+		text-align: center;
-  margin-bottom: 10px;
+	}
-}
 
-.subtitle {
+	.title {
-  font-size: 18px;
+		font-size: 22px;
-  color: #666;
+		color: #333;
-  margin-bottom: 20px;
+		margin-bottom: 10px;
-}
+		font-weight: 600;
+	}
 
-.qr-code {
+	.subtitle {
-  width: 300px; /* 二维码宽度 */
+		font-size: 18px;
-  height: 300px; /* 二维码高度 */
+		color: #333;
-  margin-bottom: 20px;
+		margin-bottom: 20px;
-}
+		font-weight: 600;
+	}
 
-.valid-time {
+	.qr-code {
-  font-size: 16px;
+		width: 200px;
-  color: #666;
+		/* 二维码宽度 */
-  margin-bottom: 40px;
+		height: 200px;
-}
+		/* 二维码高度 */
+		margin-bottom: 20px;
+	}
 
-.refresh-button {
+	.valid-time {
-  width: 100%;
+		font-size: 16px;
-  max-width: 300px;
+		color: #666;
-  height: 50px;
+		margin-bottom: 100px;
-  border-radius: 25px;
+	}
-  background-color: #e97c3d; /* 按钮背景颜色 */
+
-  color: #fff; /* 按钮文字颜色 */
+	.refresh-button {
-}
+		width: 100%;
+		max-width: 300px;
+		height: 35px;
+		border-radius: 25px;
+		background-color: #e97c3d;
+		/* 按钮背景颜色 */
+		color: #fff;
+		/* 按钮文字颜色 */
+	}
+	
+	.login-btn {
+	  height: 35px;
+	  margin-left: 30rpx;
+	  margin-right: 30rpx;
+	  background-color: #e97c3d;
+	}
 </style>

pages/index.vue

@@ -6,16 +6,12 @@
 		</view>
 
 		<!-- 轮播图 -->
-		<uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
+		<u-swiper :list="bannerList" @change="handleSwiperChange" :autoplay="true" :interval="3000"></u-swiper>
-			<swiper class="swiper-box" :current="swiperDotIndex" :autoplay="true" :interval="3000"
+		<!-- 指示器 -->
-				@change="changeSwiper">
+		<view class="external-indicator">
-				<swiper-item v-for="(item, index) in data" :key="index">
+			<view v-for="(item, index) in bannerList" :key="index" class="indicator-dot"
-					<view class="swiper-item" @click="clickBannerItem(item)">
+				:class="{ 'active': index === current }"></view>
-						<image :src="item.image" mode="aspectFill" :draggable="false" />
+		</view>
-					</view>
-				</swiper-item>
-			</swiper>
-		</uni-swiper-dot>
 
 		<!-- 功能按钮区 -->
 		<view class="function-area">
@@ -68,16 +64,17 @@
 			return {
 				current: 0,
 				swiperDotIndex: 0,
-				data: [{
+				bannerList: [
-						image: '/static/images/banner/banner01.jpg'
+					'/static/images/banner/banner01.jpg',
-					},
+					'/static/images/banner/banner1.jpg',
-					{
+					'/static/images/banner/01.jpg',
-						image: '/static/images/banner/banner02.jpg'
+					'/static/images/banner/banner4.jpg',
-					},
+				],
-					{
+				list5: [
-						image: '/static/images/banner/banner03.jpg'
+					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
-					}
+					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
-				]
+					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
+				],
 			}
 		},
 		methods: {
@@ -102,6 +99,10 @@
 					url: '/pages/code/index'
 				})
 			},
+			handleSwiperChange(e) {
+				this.current = e.current; // 更新当前活动的指示点索引
+			}
+			},
 			goToRemainingSum() {
 				// 跳转到余额/充值页面
 				uni.navigateTo({
@@ -113,6 +114,31 @@
 </script>
 
 <style lang="scss">
+	.external-indicator {
+		display: flex;
+		justify-content: center;
+		margin-top: 10px;
+		/* 与轮播图之间的间距 */
+	}
+
+	.indicator-dot {
+		width: 24px;
+		/* 长方形宽度 */
+		height: 4px;
+		/* 长方形高度 */
+		background-color: rgba(15, 39, 75, 0.5);
+		/* 默认颜色 */
+		margin: 0 5px;
+		transition: all 0.3s ease-in-out;
+		/* 添加过渡效果 */
+		border-radius: 4px 4px 4px 4px;
+	}
+
+	.active {
+		background: #0F274B;
+		/* 选中时的颜色 */
+	}
+
 	/* #ifndef APP-NVUE */
 	page {
 		display: flex;
@@ -147,7 +173,7 @@
 
 	.function-area {
 		margin-top: 30rpx;
-		border-radius: 12rpx;
+		border-radius: 16rpx;
 		padding: 0rpx;
 		display: flex;
 		justify-content: space-between;
@@ -228,6 +254,7 @@
 				width: 160rpx;
 				height: 160rpx;
 				margin-bottom: -60rpx;
+
 				image {
 					width: 100%;
 					height: 100%;
@@ -253,7 +280,8 @@
 					width: 160rpx;
 					height: 160rpx;
 					margin-bottom: -60rpx;
-					image{
+
+					image {
 						width: 100%;
 						height: 100%;
 						margin-left: 60rpx;
@@ -272,6 +300,7 @@
 					display: flex;
 					align-items: baseline;
 					margin-left: -50rpx;
+
 					.currency {
 						font-size: 24rpx;
 						color: #333;