2025/4/29/(1)

app/api/base.js

@@ -1,5 +1,7 @@
 module.exports = {
-  bauseUrl:"http://192.168.2.123:8084",
+  // bauseUrl:"http://iwenwiki.com:3001",//公共地址
-  banner:"/api/banner",
+  bauseUrl:"http://192.168.2.192:8084",
-  goods:/api/front/pageList/suggest 
+  // goods:"/api/goods", //商品列表
+  goods:"/api/front/pagelist/product/0? page=1&limit=10",
+  
 }

app/api/index.js

@@ -1,7 +1,11 @@
-const {require} = require("../utils/request")
+const {request} = require("../utils/request")
-const { goods} = require("./base")
+const { goods, bauseUrl} = require("./base")
 
 
 function getGoods(data){
-  return request()
+  return request(bauseUrl + goods,"GET",data)
+}
+
+module.exports = {
+  getGoods
 }

app/components/back-to-top/back-to-top.js

@@ -0,0 +1,22 @@
+Component({
+  properties: {
+    // 是否显示返回顶部按钮
+    show: {
+      type: Boolean,
+      value: false,
+      observer: function(newVal) {
+        this.setData({ isVisible: newVal });
+      }
+    }
+  },
+  data: {
+    isVisible: false
+  },
+  methods: {
+    // 触发父页面的返回顶部方法
+    scrollToTop() {
+      // 使用 triggerEvent 触发父页面的事件
+      this.triggerEvent('scrolltomain');
+    }
+  }
+});

app/components/back-to-top/back-to-top.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

app/components/back-to-top/back-to-top.wxml

@@ -0,0 +1,3 @@
+<view class="back-to-top" wx:if="{{isVisible}}" bindtap="scrollToTop">
+  <image src="/images/arrow-up.png" mode="aspectFit"></image>
+</view>

app/components/back-to-top/back-to-top.wxss

@@ -0,0 +1,18 @@
+.back-to-top {
+  position: fixed;
+  bottom: 50px;
+  right: 20px;
+  width: 50px;
+  height: 50px;
+  background-color: rgba(85, 84, 84, 0.5);
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.back-to-top image {
+  width: 35px;
+  height: 35px;
+}

app/components/goods-list/goods-list.js

@@ -5,7 +5,10 @@ Component({
    * 组件的属性列表
    */
   properties: {
-
+    goodsData: {
+      type: Array,
+      value: []
+    }
   },
 
   /**

app/components/goods-list/goods-list.wxml

@@ -1,68 +1,18 @@
 <view class="list">
-  <view class="item">
+  <view class="item" wx:for="{{goodsData}}" wx:key="index">
     <view class="goods_img">
-      <image src="http://iwenwiki.com:3001/images/goods/1.webp" mode="widthFix" />
+      <image mode="widthFix" src="{{item.image}}"  />
     </view>
     <view class="goods_info">
-    <text class="goods_name">松下（Panasonic）DC-BS1HGK微单相机 数码相机 模块化摄影机 视频 直播多机位 电影</text>
+    <text class="goods_name">{{item.storeName}}</text>
+    <view class="goods_weight">规格：{{item.size}}</view>
     <view class="goods_price">
-      ￥<text>21298</text>.00
+    <view>￥<text>{{item.price}}</text></view>
+    
+    <view class="goods_gwc" bindtap="addToCart">
+    <image class="cart-icon" src="/images/gouwuche2.png"></image>
   </view>
     </view>
     </view>
-  <view class="item">
-    <view class="goods_img">
-      <image src="http://iwenwiki.com:3001/images/goods/1.webp" mode="widthFix" />
-    </view>
-    <view class="goods_info">
-    <text class="goods_name">松下（Panasonic）DC-BS1HGK微单相机 数码相机 模块化摄影机 视频 直播多机位 电影</text>
-    <view class="goods_price">
-      ￥<text>21298</text>.00
-    </view>
-    </view>
-  </view>
-  <view class="item">
-    <view class="goods_img">
-      <image src="http://iwenwiki.com:3001/images/goods/1.webp" mode="widthFix" />
-    </view>
-    <view class="goods_info">
-    <text class="goods_name">松下（Panasonic）DC-BS1HGK微单相机 数码相机 模块化摄影机 视频 直播多机位 电影</text>
-    <view class="goods_price">
-      ￥<text>21298</text>.00
-    </view>
-    </view>
-  </view>
-  <view class="item">
-    <view class="goods_img">
-      <image src="http://iwenwiki.com:3001/images/goods/1.webp" mode="widthFix" />
-    </view>
-    <view class="goods_info">
-    <text class="goods_name">松下（Panasonic）DC-BS1HGK微单相机 数码相机 模块化摄影机 视频 直播多机位 电影</text>
-    <view class="goods_price">
-      ￥<text>21298</text>.00
-    </view>
-    </view>
-  </view>
-  <view class="item">
-    <view class="goods_img">
-      <image src="http://iwenwiki.com:3001/images/goods/1.webp" mode="widthFix" />
-    </view>
-    <view class="goods_info">
-    <text class="goods_name">松下（Panasonic）DC-BS1HGK微单相机 数码相机 模块化摄影机 视频 直播多机位 电影</text>
-    <view class="goods_price">
-      ￥<text>21298</text>.00
-    </view>
-    </view>
-  </view>
-  <view class="item">
-    <view class="goods_img">
-      <image src="http://iwenwiki.com:3001/images/goods/1.webp" mode="widthFix" />
-    </view>
-    <view class="goods_info">
-    <text class="goods_name">松下（Panasonic）DC-BS1HGK微单相机 数码相机 模块化摄影机 视频 直播多机位 电影</text>
-    <view class="goods_price">
-      ￥<text>21298</text>.00
-    </view>
-    </view>
   </view>
 </view>

app/components/goods-list/goods-list.wxss

@@ -18,7 +18,7 @@
   font-size: 14px;
   text-align: left;
   line-height:1.05rem;
-  height: 4.8rem;
+  height: 2rem;
   font-family: -apple-system,'Helvetica Neue', sans-serif;
   overflow: hidden;
   display: -webkit-box;
@@ -34,3 +34,17 @@
 .list .item .goods_info .goods_price text{
   font-size: 1rem;
 }
+.goods_weight{
+  color: rgb(107, 107, 107);
+  font-size: 15px;
+}
+.cart-icon{
+  height: 25px;
+  width: 25px;
+  margin-right: 10px;
+}
+.list .item .goods_info .goods_price{
+  display: flex;
+  align-items:center;
+  justify-content:space-between;
+}

app/pages/index/index.js

@@ -1,6 +1,10 @@
+const {
+  getGoods
+} = require("../../api/index.js")
 Page({
   data: {
     value: "",
+    showBackToTop: false,
     navData: [{
         id: "1",
         text: "即将开团",
@@ -19,14 +23,65 @@ Page({
         icon: "stop-circle-o",
         color: "#36ab60"
       }
-    ]
+    ],
+    page: 1,
+    goodsData: []
   },
+  onLoad() {
+    this.http(this.data.page)
+  },
+
   /*
   点击搜索框获取焦点
   */
-  clickSearch(){
+  clickSearch() {
-wx.navigateTo({
+    wx.navigateTo({
       url: '/pages/search/search',
-})
+    })
+  },
+  onScroll(event) {
+    // 获取滚动位置
+    const scrollTop = event.detail.scrollTop;
+    // 当滚动到一定位置时显示返回顶部按钮
+    this.setData({
+      showBackToTop: scrollTop > 300
+    });
+
+  },
+  handleScrollToTop() {
+    // console.log("尝试返回顶部");
+    wx.pageScrollTo({
+      scrollTop: 0,
+      duration: 300,
+      // success: () => console.log("返回顶部成功"),
+      // fail: (err) => console.error("返回顶部失败", err)
+    });
+  },
+
+  http(page) {
+    getGoods({
+      page
+    }).then(res => {
+      if (!res.data.msg) {
+        this.setData({
+          // 老数据合并新数据，做累加操作
+         goodsData: this.data.goodsData.concat(res.data.data)
+        })
+      } else {
+        //给出用户提示
+        wx.showToast({
+          title: res.data.msg,
+          icon: "success",
+          duration: 2000
+        })
+      }
+    })
+  },
+  onScrollToLower() {
+    // 更改页面
+    this.setData({
+      page: this.data.page += 1
+    })
+    this.http(this.data.page)
   }
 })

app/pages/index/index.json

@@ -4,7 +4,8 @@
     "van-search": "@vant/weapp/search/index",
     "van-grid": "@vant/weapp/grid/index",
     "van-grid-item": "@vant/weapp/grid-item/index",
-    "goods-list":"/components/goods-list/goods-list"
+    "goods-list":"/components/goods-list/goods-list",
+    "back-to-top":"/components/back-to-top/back-to-top"
   }
 
 }

app/pages/index/index.wxml

@@ -1,4 +1,7 @@
 <view class="head">
+  <scroll-view scroll-y style="height: 100vh;" bindscroll="onScroll"
+  bindscrolltolower="onScrollToLower">
+  <!-- 页面内容 -->
   <view class="head_a">
     <view class="head_b">
     <!-- <view class="head_c">
@@ -12,10 +15,20 @@
       </view>
     </view>
   </view>
+ 
   <view class="head_box" >
     <van-grid column-num="3" gutter="10" border="{{false}}">
-      <van-grid-item wx:for="{{navData}}" wx:key="id" icon="{{item.icon}}" text="{{item.text}}" icon-color="{{item.color}}" />
+      <van-grid-item
+      wx:key="index"
+       wx:for="{{navData}}" wx:key="id" icon="{{item.icon}}" text="{{item.text}}" icon-color="{{item.color}}" />
     </van-grid>
-    <goods-list></goods-list>
+    <goods-list goodsData="{{goodsData}}"></goods-list>
   </view>
+  <!--  -->
+  <back-to-top show="{{showBackToTop}}" bind:scrolltomain="handleScrollToTop"></back-to-top>
+  <view wx:if="{{!hasMore}}" style="text-align: center; padding: 20px; color: #999;">
+    已经到底啦，往上看看吧
+  </view>
+</scroll-view>
 </view>
+

app/pages/index/index.wxss

@@ -19,13 +19,7 @@
   display: flex;
   flex-direction: column;
 }
-/* .head_c{
+
-  position: relative;
-  bottom: 10px;
-  display: flex;
-  align-items:center;
-  justify-content:space-between;
-} */
  .van-search{
   width: 360px;
 } 

app/pages/search/search.js

@@ -1,3 +1,6 @@
+const {
+  getGoods
+} = require("../../api/index.js")
 Page({
 
   /**
@@ -5,6 +8,7 @@ Page({
    */
   data: {
     searchText: ""
+    
   },
 
   /**

app/pages/search/search.json

@@ -1,6 +1,7 @@
 {
   "usingComponents": {
     "van-search": "@vant/weapp/search/index",
-    "van-button": "@vant/weapp/button/index"
+    "van-button": "@vant/weapp/button/index",
+    "goods-list":"/components/goods-list/goods-list"
   }
 }

app/pages/search/search.wxml

@@ -9,4 +9,6 @@
   
 </van-search>
 <van-button style="margin-right: 10px;" type="primary" size="small" slot="action" bind:tap="onSearchCliclk">搜索</van-button>
+
 </view>
+<goods-list goodsData="{{goodsData}}"></goods-list>