小程序：首页接口对接

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

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

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

@@ -4,28 +4,33 @@
   <view class="goods-cover-wrap">
     <image
       class="goods-cover"
-      mode="widthFix" src=""></image>
+      mode="widthFix"
+      src="{{item.product_img_url}}"></image>
   </view>
   <view class="name-wrap">
-    <view class="tag">精选</view>
-    <view class="name">名字名字名字名字名字名字名字名字名字</view>
+    <view
+      class="tag"
+      wx:if="{{item.product_is_select === 1}}">精选
+    </view>
+    <view class="name {{item.product_is_select === 1 ? 'has-tag' : ''}}">{{item.product_title}}</view>
   </view>
-  <view class="dessciption">这是一段描述这是一段描述这是一段描述这是一段描述这是一段描述这是一段描述</view>
+  <view class="dessciption">{{item.product_desc}}</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="key-words-list">
     <view
       class="key-words"
       wx:for="{{3}}"
       wx:key="item">
-      <image class="label" src=""></image>
+      <image class="label" src="../../image/common/top1.png"></image>
       <text class="value">销量高销量高销量高销量高</text>
     </view>
   </view>
 </view>
+<wxs src="../../components/wxs/index.wxs" module="tools"></wxs>

htmldev/wxMini/components/goods-item-large/index.wxss

@@ -18,7 +18,6 @@
   display: block;
   width: 100%;
   height: 100%;
-  background: pink;
 }
 
 .name-wrap {
@@ -30,6 +29,7 @@
 .name-wrap .tag {
   width: 44rpx;
   height: 24rpx;
+  margin-right: 10rpx;
   border-radius: 12rpx;
   background: rgba(255, 76, 44, 1);
   line-height: 24rpx;
@@ -39,8 +39,7 @@
 }
 
 .name-wrap .name {
-  width: calc(100% - 54rpx);
-  margin-left: 10rpx;
+  width: 100%;
   font-size: 28rpx;
   color: rgba(57, 67, 87, 1);
   white-space: nowrap;
@@ -48,6 +47,10 @@
   text-overflow: ellipsis;
 }
 
+.name-wrap .name.has-tag {
+  width: calc(100% - 54rpx);
+}
+
 .dessciption {
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -113,12 +116,11 @@
 }
 
 .key-words-list .label {
-  width: 12rpx;
-  height: 22rpx;
-  background-color: pink;
+  width: 18rpx;
+  height: 18rpx;
 }
 
-.key-words-list .value{
+.key-words-list .value {
   width: 125rpx;
   margin-left: 2rpx;
   font-size: 16rpx;

htmldev/wxMini/components/wxs/index.wxs

@@ -109,6 +109,19 @@ function yuan2Fen(num) {
   return result
 }
 
+function fen2YuanAndJiao(num) {
+  if (isNaN(num)) {
+    return ''
+  }
+  const temp = (num * 0.01).toFixed(2) * 1
+  const val = temp.toString().split('.')
+
+  return {
+    yuan: val[0],
+    jiao: val[1] ? '.' + val[1] : ''
+  }
+}
+
 function mToKm(distance) {
   if (isNaN(distance)) {
     return ''
@@ -127,6 +140,7 @@ module.exports = {
   computedFormOrderCarCount: computedFormOrderCarCount,
   fen2Yuan: fen2Yuan,
   yuan2Fen: yuan2Fen,
+  fen2YuanAndJiao: fen2YuanAndJiao,
   mToKm: mToKm,
   cutDownTime: cutDownTime,
   imgFilter: imgFilter

htmldev/wxMini/pages/home/api/index.js

@@ -1,11 +1,11 @@
 const { request } = require('../../../api/request')
 
 /**
- * 商户信息
+ * 首页轮播图
  * @returns {Promise<*>}
  */
-export const getShopInfo = () => request({
-  url: '/api/shop/info',
+export const getLunboList = () => request({
+  url: '/api/user/home/lunbo/list',
   method: 'POST',
   showLoading: true
 })

htmldev/wxMini/pages/home/home.js

@@ -1,5 +1,6 @@
 const pages = require('../../mixin/pages')
 const { getProductCategoryList } = require('../../api/common')
+const { getLunboList } = require('./api/index')
 let leftHeight = 0
 let rightHeight = 0
 let query = null
@@ -16,12 +17,7 @@ Page({
       key_words: '',
       category_id: ''
     },
-    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
-    txtlist: [
-      '这是第一条公告内容',
-      '小程序上下滚动效果总结',
-      '这是一行上下滚动的文字，文字最好短点，超过一行省略'
-    ],
+    txtlist: [],
     headerNav: [
       {
         icon: 'partner@2x.png',
@@ -45,7 +41,6 @@ Page({
       }
     ],
     categoryList: [],
-    list: [],
     leftList: [],
     rightList: []
   },
@@ -54,6 +49,7 @@ Page({
    * 生命周期函数--监听页面加载
    */
   async onLoad(options) {
+    this.fetchLunboList()
     await this.fetchProductCategoryList()
     this.fetchOrderList()
   },
@@ -114,6 +110,23 @@ Page({
   },
   bindCallBack() {
     this.refreshOrderList()
+    this.fetchLunboList()
+  },
+  async fetchLunboList() {
+    try {
+      const { status, data, msg } = await getLunboList()
+      if (status) {
+        const { lunbos } = data
+        this.setData({
+          lunbos: lunbos
+        })
+      } else {
+        wx.showToast({
+          title: msg,
+          icon: 'none'
+        })
+      }
+    } catch (err) {}
   },
   async fetchProductCategoryList() {
     try {
@@ -145,12 +158,12 @@ Page({
   },
   async isLeft() {
     const {
-      list,
+      listData,
       leftList,
       rightList
     } = this.data
     query = wx.createSelectorQuery()
-    for (const item of list) {
+    for (const item of listData) {
       leftHeight <= rightHeight ? leftList.push(item) : rightList.push(item)
       await this.getBoxHeight(leftList, rightList)
     }

htmldev/wxMini/pages/home/home.json

@@ -2,7 +2,8 @@
   "usingComponents": {
     "van-tab": "@vant/weapp/tab/index",
     "van-tabs": "@vant/weapp/tabs/index",
-    "goods-item-large": "../../components/goods-item-large"
+    "goods-item-large": "../../components/goods-item-large",
+    "van-loading": "@vant/weapp/loading/index"
   },
   "backgroundColor": "#F6F6F6",
   "backgroundTextStyle": "dark",

htmldev/wxMini/pages/home/home.wxml

@@ -18,23 +18,27 @@
   </view>
 
   <!-- 轮播 -->
-  <view class="page-section">
+  <view
+    class="page-section"
+    wx:if="{{!!lunbos.length}}">
     <swiper
       indicator-dots="{{true}}"
       indicator-color="rgba(151, 209, 79, 1)"
       indicator-active-color="#FFF"
       autoplay="{{false}}">
-      <block wx:for="{{background}}" wx:key="*this">
+      <block wx:for="{{lunbos}}" wx:key="*this">
         <swiper-item>
-          <view class="swiper-item {{item}}">
-            <image src=""></image>
+          <view class="swiper-item">
+            <image src="{{item.lunbo_img_url}}"></image>
           </view>
         </swiper-item>
       </block>
     </swiper>
   </view>
   <!-- 消息通知 -->
-  <view class="news-section">
+  <view
+    class="news-section"
+    wx:if="{{!!txtlist.length}}">
     <image src="../../image/home/notice.png"></image>
     <swiper
       vertical="{{true}}"
@@ -99,12 +103,23 @@
   <!--瀑布流-->
   <view class="waterfall">
     <view class="waterfall-left">
-      <goods-item-large/>
+      <block wx:for="{{leftList}}" wx:key="id">
+        <goods-item-large item="{{item}}"/>
+      </block>
     </view>
     <view class="waterfall-right">
-      <goods-item-large/>
+      <block wx:for="{{leftList}}" wx:key="id">
+        <goods-item-large item="{{item}}"/>
+      </block>
     </view>
   </view>
+  <view class="pullup-wrapper" wx:if="{{!isRefresh}}">
+    <van-loading
+      wx:if="{{!finished}}"
+      size="24px"
+      type="spinner">加载中...
+    </van-loading>
+  </view>
 </view>
   <!--自定义tabbar页面被遮挡-->
 <view style="padding-bottom:25%;"></view>

htmldev/wxMini/pages/home/home.wxss

@@ -215,3 +215,17 @@
   padding: 30rpx 0;
   margin: 0 auto;
 }
+
+.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;
+}