首页添加搜索框 物业管理等

api/community.js

@@ -1,4 +1,6 @@
 export const apiArr = {
+	isShowSearch: '/api/v1/wechat/home-page/search-enable/info', // 获取搜索框是否显示
+	hotWord: '/api/v1/wechat/home-page/search-hot-word/info', // 获取搜索框热词
 	list: '/api/v1/wechat/community/list', // 获取社区列表
 	info: '/api/v1/wechat/community/info', // 获取单个社区信息
 	isJoin: '/api/v1/wechat/community/is-join', // 用户是否加入社区、楼宇、房间

pages/index/index.css

@@ -1,13 +1,44 @@
+
 .container {
 	background-color: #f9f9f9;
 }
+
+.hot-word-container {
+	height: 40px;
+	overflow: hidden;
+	position: relative;
+	flex: 1;
+}
+
+.hot-word-scroll {
+	transition: transform 0.5s ease;
+}
+
+.hot-word-item {
+	height: 40px;
+	line-height: 40px;
+	padding: 0 10px;
+	color: #666;
+}
+
+.hot-word-item:active {
+	background-color: #f5f5f5;
+}
+
+.searchBox2 {
+	display: flex;
+	align-items: center;
+}
+
 .white_container {
 	background: #FFFFFF;
 	padding: 0 20rpx;
 }
+
 page {
 	background-color: #FFFFFF;
 }
+
 .grid_Pic {
 	width: 61.5rpx;
 	height: 63.14rpx;
@@ -35,15 +66,80 @@ page {
 	margin-right: 10rpx;
 }
 
+.search2 {
+	padding: 20rpx 0;
+}
+
+.function-nav {
+	display: flex;
+	justify-content: space-around;
+	padding: 20rpx 0;
+	margin: 20rpx -20rpx 0 -20rpx;
+
+	background-color: #f7f6fb;
+}
+
+.function-item {
+	width: 200rpx;
+	height: 180rpx;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	border-radius: 20rpx;
+	background-color: #fff;
+}
+
+.icon-box {
+	width: 120rpx;
+	height: 100rpx;
+	border-radius: 10rpx;
+	margin-top: 15rpx;
+	margin-bottom: 10rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.icon-box image {
+	width: 70rpx;
+	height: 70rpx;
+}
+
+.function-item text {
+	font-size: 28rpx;
+	color: #333;
+}
+
+.searchBox2 {
+	width: 100%;
+	height: 60rpx;
+	background-color: #f6f7fb;
+	border-radius: 100rpx 100rpx 100rpx 100rpx;
+	margin-right: 170rpx;
+	display: flex;
+	box-sizing: border-box;
+	align-items: center;
+	padding-left: 30rpx;
+	padding-right: 30rpx;
+	font-size: 26rpx;
+}
+
+.searchBox2 image {
+	width: 28rpx;
+	height: 28rpx;
+	margin-right: 16rpx;
+}
+
 .swiper {
 	width: 710rpx;
 	height: 300rpx;
 	margin: 0 auto;
-	margin-top: 30rpx;
+	margin-top: 10rpx;
 	position: relative;
 	border-radius: 20rpx;
 	overflow: hidden;
 }
+
 .swiper swiper {
 	height: 100%;
 }
@@ -117,6 +213,7 @@ page {
 	font-size: 36rpx;
 	color: #222222;
 }
+
 .local {
 	max-width: 414rpx;
 	overflow: hidden;
@@ -124,6 +221,7 @@ page {
 	text-overflow: ellipsis;
 
 }
+
 .Tit_desc {
 	padding: 0 12rpx;
 	height: 36rpx;
@@ -154,6 +252,7 @@ page {
 	position: relative;
 	margin-bottom: 12rpx;
 }
+
 .serverList_left {
 	display: block;
 	width: 260rpx;
@@ -188,6 +287,7 @@ margin-right: 12rpx;
 .serverItem4 {
 	background: #F0FDFF;
 }
+
 .serverItem5 {
 	background: #EFF7FF;
 	margin-right: 12rpx;
@@ -228,6 +328,7 @@ background: linear-gradient( 180deg, #FFFFFF 0%, #FFEDF2 100%);
 	top: 30rpx;
 	right: 11rpx;
 }
+
 .serverItem5 image {
 	width: 162rpx;
 	height: 93rpx;
@@ -260,16 +361,19 @@ background: linear-gradient( 180deg, #FFFFFF 0%, #FFEDF2 100%);
 .padding_bottom32 {
 	padding-bottom: 32rpx;
 }
+
 .main {
 	display: flex;
 	flex-wrap: wrap;
 }
+
 .list_pic {
 	width: 345rpx;
 	height: 345rpx;
 	margin-right: 20rpx;
 	margin-bottom: 20rpx;
 }
+
 .list_pic:nth-child(2n) {
 	margin-right: 0;
 }

pages/index/index.vue

@@ -10,6 +10,43 @@
           </view>
         </view>
       </view>
+      <!--  -->
+      <!-- 功能导航区 -->
+      <view class="function-nav">
+        <view class="function-item">
+          <div class="icon-box">
+            <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/Index_add.png" mode="widthFix" />
+          </div>
+          <text>店铺管理</text>
+        </view>
+        <view class="function-item">
+          <div class="icon-box">
+            <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/Index_add.png" mode="widthFix" />
+          </div>
+          <text>供应商订单</text>
+        </view>
+        <view class="function-item" @click="goToWuye">
+          <div class="icon-box">
+            <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/Index_add.png" mode="widthFix" />
+          </div>
+          <text>物业管理</text>
+        </view>
+      </view>
+      <!-- 搜索框 -->
+      <div class="search2" v-if="isShowSearch">
+        <div class="searchBox2">
+          <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
+            mode="aspectFill"></image>
+          <div class="hot-word-container">
+            <div class="hot-word-scroll" :style="{ transform: 'translateY(' + scrollPosition + 'px)' }">
+              <div v-for="(word, index) in hotWord" :key="index" class="hot-word-item"
+                @click="handleHotWordClick(word)">
+                {{ word }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
       <!-- 轮播图 -->
       <view class="swiper">
         <swiper @animationfinish="swipers" autoplay circular>
@@ -19,8 +56,7 @@
         </swiper>
 
         <view class="cirList">
-					<view :class="['cir', currentIdx == index ? 'active' : '']" v-for="(item, index) in bannerList"
+          <view :class="['cir', currentIdx == index ? 'active' : '']" v-for="(item, index) in bannerList" :key="index">
-						:key="index">
           </view>
         </view>
       </view>
@@ -55,7 +91,8 @@
 
 
         <view class="serverList_right">
-					<view :class="['serverItem', `serverItem${index +1}` ]" @tap="headerServerClick(item)" v-for="(item, index) in homeRightList" :key="index">
+          <view :class="['serverItem', `serverItem${index + 1}`]" @tap="headerServerClick(item)"
+            v-for="(item, index) in homeRightList" :key="index">
             <view class="serverTit">{{ item.title }}</view>
             <image :src="item.pic_src" mode="" />
           </view>
@@ -107,6 +144,8 @@ export default {
   }, //2.注册组件
   data() {
     return {
+      isShowSearch: false,
+
       loading: false,
       city: "",
       qqmap_key: '',
@@ -135,14 +174,67 @@ export default {
       bottomList: [],
       bottomTotal: 0,
       flag: false,
+
+      hotWord: [], // 搜索热词
+      scrollPosition: 0, // 滚动位置
+      scrollInterval: null, // 滚动定时器
+      itemHeight: 40, // 每个热词项的高度
     }
   },
 
   methods: {
+
+    goToWuye() {
+      uni.navigateTo({
+        url: '/packages/workOrderDashboard/index/index'
+      })
+    },
+
     swipers(e) {
       this.currentIdx = e.detail.current
     },
 
+    // 处理热词点击
+    handleHotWordClick(word) {
+      console.log('点击的热词:', word);
+    },
+
+    // 启动滚动动画
+    startScrollAnimation() {
+      // 清除已有的定时器
+      if (this.scrollInterval) {
+        clearInterval(this.scrollInterval);
+      }
+
+      // 如果没有热词，不启动滚动
+      if (this.hotWord.length === 0) {
+        return;
+      }
+
+      let index = 0;
+      const totalHeight = this.hotWord.length * this.itemHeight;
+      const containerHeight = this.itemHeight; // 容器高度，只显示一项
+
+      this.scrollInterval = setInterval(() => {
+        index++;
+        // 当滚动到底部时，重置到顶部
+        if (index * this.itemHeight >= totalHeight) {
+          this.scrollPosition = 0;
+          index = 0;
+        } else {
+          this.scrollPosition = -index * this.itemHeight;
+        }
+      }, 2000); // 每2秒滚动一次
+    },
+
+    // 停止滚动动画
+    stopScrollAnimation() {
+      if (this.scrollInterval) {
+        clearInterval(this.scrollInterval);
+        this.scrollInterval = null;
+      }
+    },
+
     map() {
       uni.navigateTo({
         url: '/pages/shopcity/shopcity'
@@ -450,6 +542,18 @@ export default {
     filterShowList(list, type) {
       if (list && list.length == 0) return [];
       return list.filter((item) => item.show_status == type);
+    },
+
+    async showSearch() {
+      const res = await request(apiArr.isShowSearch, "POST", {}, { slice: false });
+      this.isShowSearch = res.search_enable == 1
+    },
+
+    async getSearchVal() {
+      const res = await request(apiArr.hotWord, "POST", {}, { slice: false });
+      // 支持英文逗号和中文逗号分割
+      this.hotWord = res.search_hot_word.split(/[,，]/)
+      console.log("🚀 ~ getSearchVal ~ res:", this.hotWord)
     }
 
   },
@@ -458,6 +562,35 @@ export default {
     const meun = menuButtonInfo();
     this.top = meun.top;
     this.localHeight = meun.height;
+    this.showSearch()
+    this.getSearchVal()
+  },
+
+  onShow() {
+    // 页面显示时启动滚动动画
+    this.startScrollAnimation();
+  },
+
+  onHide() {
+    // 页面隐藏时停止滚动动画
+    this.stopScrollAnimation();
+  },
+
+  onUnload() {
+    // 页面卸载时停止滚动动画
+    this.stopScrollAnimation();
+  },
+
+  // 监听hotWord变化，重新启动滚动
+  watch: {
+    hotWord: {
+      handler(newVal) {
+        if (newVal.length > 0) {
+          this.startScrollAnimation();
+        }
+      },
+      immediate: true
+    }
   },
   onShow() {
     this.flag = false