实装首页的banner，ipinfo，prodClass

pages/index/index.js

@@ -6,64 +6,9 @@ const App = getApp();
 
 Page({
   data: {
-    brandList: [
-      {
-        name: "全部IP",
-      },
-      {
-        name: "火影忍者",
-      },
-      {
-        name: "原神",
-      },
-      {
-        name: "柯南",
-      },
-      {
-        name: "非人哉",
-      },
-      {
-        name: "海贼王",
-      },
-      {
-        name: "初音",
-      },
-      {
-        name: "千与千寻",
-      },
-      {
-        name: "樱木花道",
-      },
-      {
-        name: "原神",
-      },
-    ],
-    categoryList: [
-      {
-        name: "立绘",
-      },
-      {
-        name: "立绘",
-      },
-      {
-        name: "立绘",
-      },
-      {
-        name: "立绘",
-      },
-      {
-        name: "立绘",
-      },
-      {
-        name: "立绘",
-      },
-      {
-        name: "立绘",
-      },
-      {
-        name: "立绘",
-      },
-    ],
+    bannerList: [],
+    ipInfoList: [],
+    prodClassList: [],
     showAddCartModal: false,
     currentProduct: null
   },
@@ -79,15 +24,28 @@ Page({
   handleCloseAddCartModal() {
     this.setData({ showAddCartModal: false });
   },
-  methods: {
-    onLoad: async function (options) {
+  onLoad: async function (options) {
 
-      // 生命周期函数--监听页面加载
-      console.log("onLoad");
-      console.log('App.globalData', App.globalData);
+    // 生命周期函数--监听页面加载
+    console.log("onLoad");
+    console.log('App.globalData', App.globalData);
+
+    const resBanner = await API.getBanners({});
+    console.log('resBanner', resBanner);
+    this.setData({
+      bannerList : resBanner.bannerList
+    });
+
+    const resBrand = await API.getIpInfos({});
+    console.log('resBrand', resBrand);
+    this.setData({
+      ipInfoList : resBrand.ipInfoList
+    });
+    const resCategory = await API.getProdClasses({});
+    console.log('resCategory', resCategory);
+    this.setData({
+      prodClassList : resCategory.prodClassList
+    });
 
-      const res = await API.getBanners({});
-      console.log('res', res);
-    },
   },
 })

pages/index/index.wxml

@@ -6,9 +6,17 @@
 
   <view class="banner">
     <view class="banner-item">
-      banner
+      <swiper class="bannerSwiper" indicator-dots='{{true}}' indicator-color='rgba(33, 33, 33, .3)' indicator-active-color='rgba(33, 33, 33, 1)' circular='{{true}}' current='{{index}}' autoplay style="{{''}}" bindchange='bindchange'>
+        <block wx:for='{{bannerList}}' wx:key='this'>
+          <swiper-item>
+              <image class="bannerImg" mode='widthFix' src="{{item.bannerUrl}}" data-item="{{item}}"></image>
+          </swiper-item>
+        </block>
+    </swiper>
     </view>
   </view>
+  <!-- <banner position="index" bannerList="{{bannerList}}"/> -->
+
   <view class="hot-bar">
     <view class="hot-A">
       <image src="/images/index/hot-item.png" class="hot-image"></image>
@@ -21,19 +29,19 @@
     </view>
   </view>
   <view class="brand-bar">
-    <view wx:for="{{brandList}}" wx:key="index" class="brand-item">
-      <image src="/images/index/brand-item.png" class="brand-image"></image>
+    <view wx:for="{{ipInfoList}}" wx:key="index" class="brand-item">
+      <image src="{{item.ipUrl}}" data-item="{{item}}" class="brand-image"></image>
       <!-- <text class="brand-name">{{item.name}}</text> -->
     </view>
   </view>
-  <view class="slider">
+  <!-- <view class="slider">
     <view class="slider-item">
       slider
     </view>
-  </view>
+  </view> -->
   <view class="category">
-    <view wx:for="{{categoryList}}" wx:key="index" class="category-item">
-      <image src="/images/index/category-item.png" class="category-image"></image>
+    <view wx:for="{{prodClassList}}" wx:key="index" class="category-item">
+      <image src="{{item.classUrl}}" data-item="{{item}}" class="category-image"></image>
     </view>
   </view>
 

pages/index/index.wxss

@@ -14,11 +14,17 @@ page {
 }
 .banner .banner-item {
   border: 1px solid #dfefec;
-  width: 690rpx;
+  width: 100%;
   height: 310rpx;
   display: block;
   border-radius: 25rpx;
 }
+.banner .banner-item .bannerImg {
+  width: 100%;
+  height: auto;
+  display:block;
+}
+
 .hot-bar {
   padding: 14rpx 30rpx 10rpx;
   display: flex;