From 03d981283edb460596ced5dee9b69cbb7f2d5681 Mon Sep 17 00:00:00 2001
From: chenweiqiang <chenweiqiang@home.local>
Date: Sun, 11 May 2025 10:47:52 +0800
Subject: [PATCH] modify

---
 src/App.vue                  |   3 +-
 src/pages.json               |   4 +-
 src/pages/category/index.vue | 275 ++++++++++++++++++++++++++++++++---
 src/pages/home/home.vue      |  60 +++++---
 4 files changed, 299 insertions(+), 43 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 1d90ea6..a29745a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -23,6 +23,7 @@ export default {
 @import "@/static/iconfont/iconfont.css";
 page {
   background-color: #f0f0f0;
-  min-height: 100vh;
+  min-height: 100vh;   /* 固定高度为视口高度 */
 }
+
 </style>
diff --git a/src/pages.json b/src/pages.json
index be3161b..7477830 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -2,7 +2,9 @@
 	"pages": [
 		{
 			"path": "pages/home/home",
-			"style": {}
+			"style": {
+				"navigationBarTitleText": "uni-app"
+			}
 		},
 		{
 			"path": "pages/category/index",
diff --git a/src/pages/category/index.vue b/src/pages/category/index.vue
index 598162a..4b8f6dc 100644
--- a/src/pages/category/index.vue
+++ b/src/pages/category/index.vue
@@ -1,5 +1,36 @@
 <template>
-    <view>{{title}}</view>
+  <view class="top-fixed">
+    <view class="top">
+      <uni-icons type="location" size="30"></uni-icons>
+      <text>上海</text>
+      <uni-search-bar class="search-w-50" v-model="searchContent" placeholder="请输入查询内容" clearButton="auto" cancelButton="none" @confirm="searchClick" />
+    </view>
+    <scroll-view class="scroll-H" scroll-x="true" show-scrollbar="false" > 
+        <button class="category-btn" v-for="item in categoryList" 
+        :type="item.id ===selectId?'primary':'default'"
+        :key="item.id"
+        @click="categoryFilter(item.id)">
+        {{item.name}}
+        </button>   
+    </scroll-view>
+  </view>
+  
+  <scroll-view class="scroll-V" scroll-y>
+    <GroupOrderComponent v-for="item in orderList" :key="item.id" 
+    :id="item.id"
+    :type="item.type"
+    :desc="item.desc"
+    :status="item.status"
+    :pickupAddr = "item.pickup_addr"
+    :itemList="item.item_list"
+    :groupLeader = "item.group_leader"
+    :statisticDesc = "item.statistic_desc"
+    @share="shareClick"
+    @join="joinClicked"
+    @fav="favClick"
+    ></GroupOrderComponent>
+  </scroll-view>
+  
 </template>
 
 <script>
@@ -7,37 +38,241 @@ export default {
   data() {
     return {
       title: '分类首页',
+      selectId:0,
+      categoryList:[
+        {
+          id:1,
+          name:"全部"
+        },
+        {
+          id:2,
+          name:"生鲜"
+        },
+        {
+          id:3,
+          name:"食品"
+        },
+        {
+          id:4,
+          name:"日用"
+        },
+        {
+          id:5,
+          name:"日期"
+        },
+        {
+          id:6,
+          name:"服装"
+        },
+        {
+          id:7,
+          name:"美妆"
+        },
+        {
+          id:8,
+          name:"文办"
+        }
+      ],
+      orderList: [
+        {
+          id:"1",
+          type:"express",
+          desc:"测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述",
+          status:"start",
+          pickup_addr:"自提点地址",
+          item_list:[
+            {
+              id:1,
+              image_url:"/static/logo.png",
+              price:"20"
+            },
+            {
+              id:2,
+              image_url:"/static/logo.png",
+              price:"30"
+            },
+            {
+              id:3,
+              image_url:"/static/logo.png",
+              price:"40"
+            },
+            {
+              id:4,
+              image_url:"/static/logo.png",
+              price:"60"
+            }
+          ],
+          group_leader:{
+            id:1,
+            fav:true,
+            avatar:"adsfadfa",
+            nickname:"测试团长1"
+          },
+          statistic_desc:"20000人参团"
+        },
+        {
+          id:"2",
+          type:"express",
+          desc:"测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述",
+          status:"start",
+          pickup_addr:"自提点地址",
+          item_list:[
+            {
+              id:1,
+              image_url:"/static/logo.png",
+              price:"20"
+            },
+            {
+              id:2,
+              image_url:"/static/logo.png",
+              price:"30"
+            },
+            {
+              id:3,
+              image_url:"/static/logo.png",
+              price:"40"
+            },
+            {
+              id:4,
+              image_url:"/static/logo.png",
+              price:"60"
+            }
+          ],
+          group_leader:{
+            id:1,
+            fav:true,
+            avatar:"adsfadfa",
+            nickname:"测试团长1"
+          },
+          statistic_desc:"20000人参团"
+        },
+        {
+          id:"3",
+          type:"pickup",
+          desc:"测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述",
+          status:"start",
+          pickup_addr:"自提点地址自提点地址自提点地址自提点地址自提点地址自提点地址自提点地址自提点地址",
+          item_list:[
+            {
+              id:1,
+              image_url:"/static/logo.png",
+              price:"20"
+            },
+            {
+              id:2,
+              image_url:"/static/logo.png",
+              price:"30"
+            },
+            {
+              id:3,
+              image_url:"/static/logo.png",
+              price:"40"
+            },
+            {
+              id:4,
+              image_url:"/static/logo.png",
+              price:"60"
+            }
+          ],
+          group_leader:{
+            id:2,
+            fav:false,
+            avatar:"adsfadfa",
+            nickname:"测试团长2"
+          },
+          statistic_desc:"20000人参团"
+        },
+        {
+          id:"4",
+          type:"express",
+          desc:"测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述",
+          status:"start",
+          pickupAddr:"自提点地址",
+          item_list:[
+            {
+              id:1,
+              image_url:"/static/logo.png",
+              price:"20"
+            },
+            {
+              id:2,
+              image_url:"/static/logo.png",
+              price:"30"
+            },
+            {
+              id:3,
+              image_url:"/static/logo.png",
+              price:"40"
+            },
+            {
+              id:4,
+              image_url:"/static/logo.png",
+              price:"60"
+            }
+          ],
+          group_leader:{
+            id:3,
+            fav:false,
+            avatar:"adsfadfa",
+            nickname:"测试团长3"
+          },
+          statistic_desc:"20000人参团"
+        },
+      ]
+    }
+  },
+  onLoad() {
+    // 处理分类选中
+    console.log("aa:",this.categoryList.length)
+    if (this.categoryList.length > 0) {
+      this.selectId = this.categoryList[0].id
+    }
+  },
+  methods: {
+    categoryFilter(categoryID) {
+      this.selectId = categoryID
     }
   },
-  onLoad() {},
-  methods: {},
 }
 </script>
 
-<style>
-.content {
+<style scoped>
+.top-fixed {
+  background: #f0f0f0;
+  position: fixed;
+  z-index: 999;   /* 确保悬浮层级最高 */
+  width: 100%;
+  height: 240rpx;
+  top: 60rpx;
+}
+.top {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
+  margin: 20rpx;
 }
 
-.logo {
-  height: 200rpx;
-  width: 200rpx;
-  margin-top: 200rpx;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 50rpx;
+.search-w-50 {
+	width: 70%;
 }
 
-.text-area {
-  display: flex;
-  justify-content: center;
+.scroll-H {
+  white-space: nowrap;
+  height:100rpx;
 }
 
-.title {
-  font-size: 36rpx;
-  color: #8f8f94;
+.scroll-V {
+  position: fixed;
+  top:300rpx;
+  height:68vh;
+}
+
+.category-btn {
+  display: inline-block;
+  margin-left: 20rpx;
+  margin-right: 20rpx;
+	width: 100rpx;
+	height: 60rpx;
+	line-height: 60rpx;
+	font-size: 24rpx;
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/home/home.vue b/src/pages/home/home.vue
index c1634f2..a5ae030 100644
--- a/src/pages/home/home.vue
+++ b/src/pages/home/home.vue
@@ -1,25 +1,29 @@
 <template>
-  <view class="top">
-    <uni-icons type="location" size="30"></uni-icons>
-    <text>上海</text>
-    <uni-search-bar class="search-w-50" v-model="searchContent" placeholder="请输入查询内容" clearButton="auto" cancelButton="none" @confirm="searchClick" />
+  <view class="top-fixed">
+    <view class="top">
+      <uni-icons type="location" size="30"></uni-icons>
+      <text>上海</text>
+      <uni-search-bar class="search-w-50" v-model="searchContent" placeholder="请输入查询内容" clearButton="auto" cancelButton="none" @confirm="searchClick" />
+    </view>
+    <view class="tip">
+      <text >火热开团中</text>
+    </view>
   </view>
-  <view class="content">
-    <text >火热开团中</text>
-  </view>
-  <GroupOrderComponent v-for="item in data" :key="item.id" 
-    :id="item.id"
-    :type="item.type"
-    :desc="item.desc"
-    :status="item.status"
-    :pickupAddr = "item.pickup_addr"
-    :itemList="item.item_list"
-    :groupLeader = "item.group_leader"
-    :statisticDesc = "item.statistic_desc"
-    @share="shareClick"
-    @join="joinClicked"
-    @fav="favClick"
-    ></GroupOrderComponent>
+  <scroll-view scroll-y class="content">
+    <GroupOrderComponent v-for="item in data" :key="item.id" 
+      :id="item.id"
+      :type="item.type"
+      :desc="item.desc"
+      :status="item.status"
+      :pickupAddr = "item.pickup_addr"
+      :itemList="item.item_list"
+      :groupLeader = "item.group_leader"
+      :statisticDesc = "item.statistic_desc"
+      @share="shareClick"
+      @join="joinClicked"
+      @fav="favClick"
+      ></GroupOrderComponent>
+  </scroll-view>
 </template>
 
 <script>
@@ -195,6 +199,14 @@ export default {
 </script>
 
 <style>
+.top-fixed {
+  background: #f0f0f0;
+  position: fixed;
+  z-index: 999;   /* 确保悬浮层级最高 */
+  width: 100%;
+  height: 240rpx;
+  top: 60rpx;
+}
 .top {
   display: flex;
   align-items: center;
@@ -205,7 +217,7 @@ export default {
 	width: 70%;
 }
 
-.content {
+.tip {
   display: flex;
   margin-left: 20px;
 }
@@ -228,4 +240,10 @@ export default {
   font-size: 36rpx;
   color: #8f8f94;
 }
+
+.content {
+  position: fixed;
+  top:300rpx;
+  height:68vh;
+}
 </style>