代码提交

pages/index/components/Recommend/index.vue

@@ -6,83 +6,39 @@
     @update: 2023-10-27 14:42
 -->
 <script setup>
-import { onLoad } from '@dcloudio/uni-app'
-import { usePage } from "@/hooks";
-import { getProductList } from "@/api/product";
-import Empty from "@/components/Empty/index.vue"
-import ListLoadOver from "@/components/ListLoadOver/index.vue"
-import ListLoadLoading from "@/components/ListLoadLoading/index.vue"
-import { useRouter } from "@/hooks/useRouter";
-
-const {refresh, dataList, loadend, loading, listEmpty} = usePage(getProductList)
-const {push} = useRouter()
-onLoad(() => {
-  refresh()
-})
-
-
+import Recommend from "@/components/Recommend/index.vue";
+import UvIcon from "@/uni_modules/uv-icon/components/uv-icon/uv-icon.vue";
 </script>
 
 <template>
-  <blank size="15"></blank>
-
-  <activity
-      title="商品推荐"
-      more="查看更多"
-      @moreClick="push({ url: '/pages/goodsList/goodsList' })"
-  >
-    <view class="card goods-row">
-      <template v-if="!listEmpty">
-        <uv-grid
-            :border="false"
-            :col="2"
-            :gutter="10"
-        >
-          <uv-grid-item
-              v-for="(item, index) in dataList"
-              :key="index"
-          >
-            <goods
-                class="item"
-                link
-                card
-                :data="item"
-                :storeName="item.storeName"
-                :price="item.price"
-                :stock="true"
-            >
-            </goods>
-          </uv-grid-item>
-        </uv-grid>
-      </template>
-      <Empty
-          v-else
-          :iconSrc="emptyIcon"
-      >
-        这里空空如也~
-      </Empty>
-      <!-- 加载中 -->
-      <ListLoadLoading v-if="loading" />
-      <!-- 加载完毕-->
-      <ListLoadOver v-if="loadend" />
-    </view>
-
-  </activity>
+  <Recommend ref="recommendRef" :more="false">
+    <template #head>
+      <view class="head flex flex-ai__center flex-jc__sb">
+        <view class="left">
+          商品推荐
+        </view>
+        <view class="right flex flex-ai__center flex-jc__end">
+          查看更多
+          <uv-icon name="arrow-right" color="#999" size="14" />
+        </view>
+      </view>
+    </template>
+  </Recommend>
 </template>
 
 <style
     scoped
     lang="scss"
 >
-@import "@/style/main.scss";
-
-.goods-row {
-  @include usePadding(20, 20);
-  border-radius: 15rpx;
-
-  .item {
-    width: 100%;
-    margin: 0 10rpx;
+.head{
+  margin-top: 20rpx;
+  .left{
+    font-size: 32rpx;
+    color: #333333;
+  }
+  .right{
+    font-size: 24rpx;
+    color: #999999;
   }
 }
 </style>

pages/index/index.vue

@@ -2,7 +2,6 @@
   <view class="home-container">
     <view class="header-row">
       <Header
-          :scroll-top="scrollTop"
           :left-width="140"
           @animation="handleHeaderAnimation"
       >
@@ -19,19 +18,14 @@
           <view
               class="search-col"
               :style="searchShadow"
-              @click="toSearch"
+              @tap="toSearch"
           >
             <uv-icon
                 name="search"
-                size="26"
+                size="40rpx"
             />
             <view class="search-input">
-              <input
-                  type="text"
-                  disabled
-                  placeholder="搜索商品"
-                  @click="toSearch"
-              />
+              搜索商品
             </view>
           </view>
         </template>
@@ -68,7 +62,7 @@
 
       <!-- 热门直播 -->
       <Live v-if="false" />
-      <Recommend ref="recommendRef" />
+      <Recommend />
     </template>
     <!-- h5 tabbar 底部 -->
     <view class="h5-tabbar-height"></view>
@@ -89,8 +83,9 @@ import Group from './components/Group/index.vue'
 import Live from './components/Live/index.vue'
 import NewProduct from './components/NewProduct/index.vue'
 import Seckill from './components/Seckill/index.vue'
-import Recommend from './components/Recommend/index.vue'
+import Recommend from "./components/Recommend/index.vue";
 import UvIcon from "@/uni_modules/uv-icon/components/uv-icon/uv-icon.vue";
+import { useScroll } from "@/hooks/useScroll";
 
 const main = useMainStore()
 const {push} = useRouter()
@@ -118,19 +113,18 @@ function handleHeaderAnimation(numericalValue) {
   }
 }
 
-const scrollTop = ref(0)
+/*const scrollTop = ref(0)
 onPageScroll((e) => {
   scrollTop.value = e.scrollTop
-})
+})*/
 
 onLoad(() => {
   main.init()
   doGetHomeData()
 })
 
-onReachBottom(() => {
-  unref(recommendRef).onReachBottom && unref(recommendRef).onReachBottom();
-})
+useScroll()
+
 </script>
 
 <style lang="scss">
@@ -153,13 +147,16 @@ onReachBottom(() => {
     .search-col {
       @include useFlex(flex-start, center);
       @include usePadding(30, 15);
-      width: 100%;
+      width: 320rpx;
       height: 60rpx;
       border-radius: 50rpx;
       background: $white-color;
+      margin-left: 50rpx;
 
       .search-input {
         margin-left: 30rpx;
+        font-size: 24rpx;
+        color: #999999;
       }
     }
   }
@@ -169,4 +166,6 @@ onReachBottom(() => {
 .goods-row {
   padding: 0 8rpx;
 }
+
+
 </style>