小程序：首页接口对接

htmldev/wxMini/components/goods-item-normal/index.js

@@ -2,7 +2,9 @@ Component({
   /**
    * 组件的属性列表
    */
-  properties: {},
+  properties: {
+    item: Object
+  },
 
   /**
    * 组件的初始数据

htmldev/wxMini/components/goods-item-normal/index.scss

@@ -20,7 +20,6 @@
     display: block;
     width: 100%;
     height: 100%;
-    background: pink;
   }
 }
 

htmldev/wxMini/components/goods-item-normal/index.wxml

@@ -2,20 +2,20 @@
   <view class="goods-cover-wrap">
     <image
       class="goods-cover"
-      mode="widthFix" src=""></image>
+      mode="widthFix" src="{{item.product_img_url}}"></image>
   </view>
   <view class="goods-describe">
-    <view class="name-wrap has-tag">
-      <view class="name">名字名字名字</view>
-      <view class="tag">预售</view>
+    <view class="name-wrap {{item.product_sale_at === 0 ? 'has-tag' : ''}}">
+      <view class="name">{{item.product_title}}</view>
+      <view class="tag" wx:if="{{item.product_sale_at === 0}}">预售</view>
     </view>
     <view class="price-wrap">
       <view class="now">
         <view class="unit">￥</view>
-        <view class="yuan">99999</view>
-        <view class="jiao">.50</view>
+        <view class="yuan">{{tools.fen2YuanAndJiao(item.product_market_price).yuan}}</view>
+        <view class="jiao">{{tools.fen2YuanAndJiao(item.product_market_price).jiao}}</view>
       </view>
-      <view class="old">￥99999.00</view>
+      <view class="old">{{tools.fen2Yuan(item.product_price)}}</view>
     </view>
     <view class="star-words">
       <text
@@ -34,3 +34,4 @@
     </view>
   </view>
 </view>
+<wxs src="../../components/wxs/index.wxs" module="tools"></wxs>

htmldev/wxMini/components/wxs/index.wxs

@@ -113,8 +113,8 @@ function fen2YuanAndJiao(num) {
   if (isNaN(num)) {
     return ''
   }
-  const temp = (num * 0.01).toFixed(2) * 1
-  const val = temp.toString().split('.')
+  var temp = (num * 0.01).toFixed(2) * 1
+  var val = temp.toString().split('.')
 
   return {
     yuan: val[0],

htmldev/wxMini/mixin/pages.js

@@ -1,4 +1,5 @@
 const { request } = require('../api/request')
+const { debounce } = require('../utils/util')
 
 module.exports = {
   data() {
@@ -13,15 +14,17 @@ module.exports = {
     }
   },
   methods: {
-    handleKeyWords(event) {
+    handleKeyWords: debounce(function (event) {
       const { formkey } = event.target.dataset
 
       if (formkey) {
         this.setData({
           [`searchForm.${formkey}`]: event.detail.value
+        }, () => {
+          this.refreshOrderList()
         })
       }
-    },
+    }, 2000),
     async fetchOrderList() {
       const that = this
       const isRefresh = that.data.isRefresh
@@ -46,7 +49,7 @@ module.exports = {
             'page_size': that.data.pagesize,
             ...that.data.searchForm
           },
-          showLoading: true
+          showLoading: false
         })
         if (status) {
           const { list } = data

htmldev/wxMini/pages/newGoods/newGoods.js

@@ -1,9 +1,17 @@
+const pages = require('../../mixin/pages')
+
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
+    ...pages.data(),
+    listUrl: '/api/user/new/product/list',
+    searchForm: {
+      'key_words': '',
+      'type': '1' // 1最新上架2热度最高
+    },
     nav: [
       {
         name: '最新',
@@ -13,15 +21,15 @@ Page({
         name: '热度最高',
         value: '2'
       }
-    ],
-    active: '1'
+    ]
   },
+  ...pages.methods,
 
   /**
    * 生命周期函数--监听页面加载
    */
-  onLoad(options) {
-
+  async onLoad(options) {
+    this.fetchOrderList()
   },
 
   /**
@@ -56,14 +64,20 @@ Page({
    * 页面相关事件处理函数--监听用户下拉动作
    */
   onPullDownRefresh() {
-
+    if (this.data.freshing) {
+      return
+    }
+    this.setData({
+      freshing: true
+    })
+    this.bindCallBack()
   },
 
   /**
    * 页面上拉触底事件的处理函数
    */
   onReachBottom() {
-
+    this.fetchOrderList()
   },
 
   /**
@@ -71,12 +85,17 @@ Page({
    */
   onShareAppMessage() {
 
+  },
+  bindCallBack() {
+    this.refreshOrderList()
   },
   handleNav(e) {
     const { value } = e.detail
 
     this.setData({
-      active: value
+      'searchForm.type': value
+    }, () => {
+      this.refreshOrderList()
     })
   }
 })

htmldev/wxMini/pages/newGoods/newGoods.json

@@ -1,6 +1,10 @@
 {
   "usingComponents": {
     "customer-tab": "../../components/customer-tab/index",
-    "goods-item-normal": "../../components/goods-item-normal/index"
-  }
+    "goods-item-normal": "../../components/goods-item-normal/index",
+    "van-loading": "@vant/weapp/loading/index"
+  },
+  "backgroundTextStyle": "dark",
+  "enablePullDownRefresh": true,
+  "onReachBottomDistance": 50
 }

htmldev/wxMini/pages/newGoods/newGoods.scss

@@ -9,3 +9,17 @@
 .main {
   padding: 58rpx 0 220rpx;
 }
+
+.pullup-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 50px;
+}
+
+.van-loading__text {
+  color: #969799;
+  font-size: 14px;
+  line-height: 20px;
+}

htmldev/wxMini/pages/newGoods/newGoods.wxml

@@ -2,19 +2,30 @@
   <view class="app_page-header-search margin-bottom-20">
     <view class="app_page-header-search-warp app_width-690">
       <label for="header-search">
-        <image src=""></image>
+        <image src="../../image/common/search@2x.png"></image>
       </label>
       <input
         placeholder-class="app_header-search-placeholder"
         value=""
-        placeholder="搜索信息"></input>
+        placeholder="搜索信息"
+        data-formkey="key_words"
+        bind:input="handleKeyWords"></input>
     </view>
   </view>
   <customer-tab
     nav="{{nav}}"
-    active="{{active}}"
+    active="{{searchForm.type}}"
     bind:change="handleNav"/>
   <view class="main">
-    <goods-item-normal/>
+    <block wx:for="{{listData}}" wx:key="id">
+      <goods-item-normal item="{{item}}"/>
+    </block>
+    <view class="pullup-wrapper" wx:if="{{!isRefresh}}">
+      <van-loading
+        wx:if="{{!finished}}"
+        size="24px"
+        type="spinner">加载中...
+      </van-loading>
+    </view>
   </view>
 </view>

htmldev/wxMini/utils/util.js

@@ -266,7 +266,6 @@ function debounce(fn, wait = 1000, immediate = false) {
     if (immediate && !timer) {
       fn.apply(context, args)
     }
-
     timer = setTimeout(() => {
       fn.apply(context, args)
     }, wait)