first commit

pages/home/home.js

@@ -0,0 +1,100 @@
+// pages/personal/personal.js
+import { requestUrl } from '../../utils/config.js';
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    menuItems: [],
+    swiperList:[]
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    this.getMenu();
+    this.getSwiperList();
+  },
+  getMenu(){
+    wx.request({
+      url: requestUrl + '/api/get-menu', // 更改为你的实际API地址
+      success: (res) => {
+        console.log(res.data)
+        this.setData({ menuItems: res.data.data });
+      }
+    });
+  }, 
+  getSwiperList(){
+    let that = this; // 在回调中使用this，所以需要先保存它的引用
+    wx.request({
+      url: requestUrl + '/api/get-swiper-list', // 确保requestUrl已定义且正确
+      method: "GET",
+      success(res) {
+        console.log(res.data); // 打印响应内容
+        // 假设返回的数据结构是{ image_ids: [...] }
+        if(res.data.code == 0 && res.data.msg == "ok"){
+          console.log("请求成功")
+          that.setData({swiperList:res.data.data})
+        } else {
+          // 处理错误或空数据的情况
+          console.log("Received empty or incorrect format data");
+        }
+      },
+      fail(error) {
+        // 请求失败的处理
+        console.error("Request failed", error);
+      }
+    });
+  },
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+    
+  }
+})

pages/home/home.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/home/home.wxml

@@ -0,0 +1,20 @@
+<view class="page-body">
+  <view>
+    <!-- 轮播图组件 -->
+    <swiper indicator-dots="true" autoplay="true" interval="3000" duration="500" indicator-color="rgba(128,128,128,1)" indicator-active-color="rgba(255,255,255,1)" circular="true">
+      <swiper-item wx:for="{{swiperList}}" wx:key="unique">
+        <image src="{{item.path}}" class="slide-image" mode="widthFix"></image>
+      </swiper-item>
+    </swiper>
+
+  </view>
+  <!-- 四宫格容器 -->
+  <view class="grid-container">
+    <view class="card">
+      <navigator wx:for="{{menuItems}}" wx:key="id" url="{{item.url}}" class="grid-item">
+        <image src="data:image/png;base64,{{item.base64EncodedImage}}"></image>
+        <text>{{item.menu_name}}</text>
+      </navigator>
+    </view>
+  </view>
+</view>

pages/home/home.wxss

@@ -0,0 +1,43 @@
+.page-body {
+  display: flex;
+  flex-direction: column;
+}
+
+.slide-image {
+  width: 100%;
+  height: 100%;
+}
+
+/* 四宫格布局样式 */
+.grid-container {
+  display: flex;
+  justify-content: center;
+}
+
+.card {
+  width: 96%; /* 根据实际情况调整 */
+  height: 290rpx;
+  border-radius: 30rpx; /* 圆角大小 */
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* 阴影效果，根据需要调整 */
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around; /* 子项在主轴线上的对齐方式 */
+  margin: 20px 0; /* 卡片外边距 */
+}
+
+.grid-item {
+  width: 48%; /* 每个项目占据一行的48%，两列布局 */
+  text-align: center; /* 文本居中 */
+  margin-bottom: 20px; /* 底部外边距 */
+  margin-top: 20rpx;
+}
+
+.grid-item image {
+  width: 40rpx; /* 图像大小，根据需要调整 */
+  height: 40rpx;
+  margin-bottom: 5rpx; /* 图像与文本之间的间距，根据需要调整 */
+}
+
+.grid-item text {
+  display: block; /* 让文本独占一行 */
+}