合并

pages/index/index.js

@@ -1,98 +1,98 @@
-// index.js
-const { API } = require('../../service/api.js');
-
-const App = getApp();
-
-
-Page({
-  data: {
-    bannerList: [],
-    ipInfoList: [],
-    prodClassList: [],
-    showAddCartModal: false,
-    currentProduct: null,
-    isCategoryMini: false
-  },
-  // 显示商品属性模态框
-  showAddCartModal(e) {
-    const product = e.detail;
-    this.setData({
-      showAddCartModal: true,
-      currentProduct:product
-    });
-  },
-  // 关闭商品属性模态框
-  handleCloseAddCartModal() {
-    this.setData({ showAddCartModal: false });
-  },
-
-  // 进入今日热门页
-  hotBut: function(){
-    wx.navigateTo({
-      url: '../Mall/hotCommodity/hotCommodity',
-    })
-  },
-  // 进入新品上市页
-  newBut: function(){
-    wx.navigateTo({
-      url: '../Mall/newCommodity/newCommodity',
-    })
-  },
-  // 进入预售页
-  presaleBut: function(){
-    wx.navigateTo({
-      url: '../Mall/presaleCommodity/presaleCommodity',
-    })
-  },
-
-  onLoad: async function (options) {
-
-    // 生命周期函数--监听页面加载
-    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
-    // });
-    this.setData({
-        prodClassList: [
-          { classUrl: 'someprod.jpg', title: '火影忍者' },
-          { classUrl: 'someprod.jpg', title: '初音' },
-          { classUrl: 'someprod.jpg', title: '原神' },
-          { classUrl: 'someprod.jpg', title: '柯南' },
-          { classUrl: 'someprod.jpg', title: '非人哉' },
-          { classUrl: 'someprod.jpg', title: '全部' },
-        ]
-      });
-  },
-
-  onPageScroll: function(e) {
-    wx.createSelectorQuery()
-      .select('.brand-bar')
-      .boundingClientRect((rect) => {
-        if (rect) {
-          const shouldBeMini = rect.top <= 40; // 在brand-bar进入顶部时，category切换为mini模式
-          if (this.data.isCategoryMini !== shouldBeMini) {
-            this.setData({
-              isCategoryMini: shouldBeMini
-            });
-          }
-        }
-      })
-      .exec();
-  }
-  
-})
+// index.js
+const { API } = require('../../service/api.js');
+
+const App = getApp();
+
+
+Page({
+  data: {
+    bannerList: [],
+    ipInfoList: [],
+    prodClassList: [],
+    showAddCartModal: false,
+    currentProduct: null,
+    isCategoryMini: false
+  },
+  // 显示商品属性模态框
+  showAddCartModal(e) {
+    const product = e.detail;
+    this.setData({
+      showAddCartModal: true,
+      currentProduct:product
+    });
+  },
+  // 关闭商品属性模态框
+  handleCloseAddCartModal() {
+    this.setData({ showAddCartModal: false });
+  },
+
+  // 进入今日热门页
+  hotBut: function(){
+    wx.navigateTo({
+      url: '../Mall/hotCommodity/hotCommodity',
+    })
+  },
+  // 进入新品上市页
+  newBut: function(){
+    wx.navigateTo({
+      url: '../Mall/newCommodity/newCommodity',
+    })
+  },
+  // 进入预售页
+  presaleBut: function(){
+    wx.navigateTo({
+      url: '../Mall/presaleCommodity/presaleCommodity',
+    })
+  },
+
+  onLoad: async function (options) {
+
+    // 生命周期函数--监听页面加载
+    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
+    // });
+    this.setData({
+        prodClassList: [
+          { classUrl: 'someprod.jpg', title: '火影忍者' },
+          { classUrl: 'someprod.jpg', title: '初音' },
+          { classUrl: 'someprod.jpg', title: '原神' },
+          { classUrl: 'someprod.jpg', title: '柯南' },
+          { classUrl: 'someprod.jpg', title: '非人哉' },
+          { classUrl: 'someprod.jpg', title: '全部' },
+        ]
+      });
+  },
+
+  onPageScroll: function(e) {
+    wx.createSelectorQuery()
+      .select('.brand-bar')
+      .boundingClientRect((rect) => {
+        if (rect) {
+          const shouldBeMini = rect.top <= 40; // 在brand-bar进入顶部时，category切换为mini模式
+          if (this.data.isCategoryMini !== shouldBeMini) {
+            this.setData({
+              isCategoryMini: shouldBeMini
+            });
+          }
+        }
+      })
+      .exec();
+  }
+  
+})

pages/index/index.wxml

@@ -1,55 +1,55 @@
-<!--index.wxml-->
-<view class="container">
-  
-  <!-- 头部 -->
-  <header position="index"></header>
-
-  <view class="banner">
-    <view class="banner-item">
-      <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-left.png" class="hot-image" bind:tap="hotBut"></image>
-    </view>
-    <view class="hot-B">
-      <image src="/images/index/hot-middle.png" class="hot-image" bind:tap="newBut"></image>
-    </view>
-    <view class="hot-C">
-      <image src="/images/index/hot-right.png" class="hot-image" bind:tap="presaleBut"></image>
-    </view>
-  </view>
-  <view class="brand-bar">
-    <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-item">
-      slider
-    </view>
-  </view> -->
-  <view class="category {{isCategoryMini ? 'mini' : ''}}">
-    <view wx:for="{{prodClassList}}" wx:key="index" class="category-item">
-      <image src="{{item.classUrl}}" data-item="{{item}}" class="category-image"></image>
-      <span>{{ item.title }}</span>
-    </view>
-  </view>
-
-  <!-- 商品列表 -->
-  <product-list position="index" bindaddCart="showAddCartModal"></product-list>
-
-  <!-- 商品属性模态框 -->
-  <addCartModel visible="{{showAddCartModal}}" product="{{currentProduct}}" bindclose="handleCloseAddCartModal"></addCartModel>
-
-</view>
+<!--index.wxml-->
+<view class="container">
+  
+  <!-- 头部 -->
+  <header position="index"></header>
+
+  <view class="banner">
+    <view class="banner-item">
+      <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-left.png" class="hot-image" bind:tap="hotBut"></image>
+    </view>
+    <view class="hot-B">
+      <image src="/images/index/hot-middle.png" class="hot-image" bind:tap="newBut"></image>
+    </view>
+    <view class="hot-C">
+      <image src="/images/index/hot-right.png" class="hot-image" bind:tap="presaleBut"></image>
+    </view>
+  </view>
+  <view class="brand-bar">
+    <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-item">
+      slider
+    </view>
+  </view> -->
+  <view class="category {{isCategoryMini ? 'mini' : ''}}">
+    <view wx:for="{{prodClassList}}" wx:key="index" class="category-item">
+      <image src="{{item.classUrl}}" data-item="{{item}}" class="category-image"></image>
+      <span>{{ item.title }}</span>
+    </view>
+  </view>
+
+  <!-- 商品列表 -->
+  <product-list position="index" bindaddCart="showAddCartModal"></product-list>
+
+  <!-- 商品属性模态框 -->
+  <addCartModel visible="{{showAddCartModal}}" product="{{currentProduct}}" bindclose="handleCloseAddCartModal"></addCartModel>
+
+</view>

pages/index/index.wxss

@@ -1,127 +1,127 @@
-/**index.wxss**/
-page {
-  overflow-x: hidden;
-  overflow-y: scroll;
-  display: flex;
-  flex-direction: column;
-}
-
-.banner {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 24rpx 0 10rpx;
-}
-.banner .banner-item {
-  border: 1px solid #dfefec;
-  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;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  align-items: center;
-}
-.hot-bar .hot-image {
-  width: 220rpx;
-  height: 300rpx;
-}
-.brand-bar {
-  padding: 14rpx 30rpx 10rpx;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: center;
-}
-.brand-bar .brand-item {
-  width: 120rpx;
-  height: 120rpx;
-  margin-bottom: 20rpx;
-}
-.brand-bar .brand-item .brand-image {
-  width: 100%;
-  height: 100%;
-}
-.slider {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 24rpx 0 10rpx;
-}
-.slider .slider-item {
-  border: 1px solid #dfefec;
-  width: 690rpx;
-  height: 220rpx;
-  display: block;
-  border-radius: 25rpx;
-}
-.category {
-  position: relative;
-  height: 300rpx;
-  margin: 14rpx 30rpx 10rpx 30rpx;
-  border: 1px solid #097561;
-  background-color: #cdf3ec;
-  border-radius: 25rpx;
-  padding: 20rpx;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: center;
-  transition: all 0.3s ease;
-}
-
-/* mini 模式的css */
-.category.mini {
-  position: fixed; /* 固定在页面顶部 */
-  z-index: 1000;
-  top: 0px; 
-  height: 80rpx;
-  padding: 0 20rpx;
-  flex-wrap: nowrap;
-  overflow-x: auto;
-}
-
-.category.mini .category-item {
-  width: auto;
-  height: 80rpx;
-  margin: 0 20rpx;
-  display: flex;
-  align-items: center;
-}
-
-.category.mini .category-item .category-image {
-  display: none;
-}
-
-.category.mini .category-item span {
-  font-size: 28rpx;
-  color: #097561;
-}
-/* mini 模式的css 结束 */
-
-
-.category .category-item {
-  width: 144rpx;
-  height: 174rpx;
-  margin-bottom: 0rpx;
-  font-size: 28rpx;
-  text-align: center;
-}
-.category .category-item .category-image {
-  width: 100%;
-  height: 124rpx;
-  background-color: #57c6b1;
-}
+/**index.wxss**/
+page {
+  overflow-x: hidden;
+  overflow-y: scroll;
+  display: flex;
+  flex-direction: column;
+}
+
+.banner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 24rpx 0 10rpx;
+}
+.banner .banner-item {
+  border: 1px solid #dfefec;
+  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;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: center;
+}
+.hot-bar .hot-image {
+  width: 220rpx;
+  height: 300rpx;
+}
+.brand-bar {
+  padding: 14rpx 30rpx 10rpx;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+}
+.brand-bar .brand-item {
+  width: 120rpx;
+  height: 120rpx;
+  margin-bottom: 20rpx;
+}
+.brand-bar .brand-item .brand-image {
+  width: 100%;
+  height: 100%;
+}
+.slider {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 24rpx 0 10rpx;
+}
+.slider .slider-item {
+  border: 1px solid #dfefec;
+  width: 690rpx;
+  height: 220rpx;
+  display: block;
+  border-radius: 25rpx;
+}
+.category {
+  position: relative;
+  height: 300rpx;
+  margin: 14rpx 30rpx 10rpx 30rpx;
+  border: 1px solid #097561;
+  background-color: #cdf3ec;
+  border-radius: 25rpx;
+  padding: 20rpx;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  transition: all 0.3s ease;
+}
+
+/* mini 模式的css */
+.category.mini {
+  position: fixed; /* 固定在页面顶部 */
+  z-index: 1000;
+  top: 0px; 
+  height: 80rpx;
+  padding: 0 20rpx;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+}
+
+.category.mini .category-item {
+  width: auto;
+  height: 80rpx;
+  margin: 0 20rpx;
+  display: flex;
+  align-items: center;
+}
+
+.category.mini .category-item .category-image {
+  display: none;
+}
+
+.category.mini .category-item span {
+  font-size: 28rpx;
+  color: #097561;
+}
+/* mini 模式的css 结束 */
+
+
+.category .category-item {
+  width: 144rpx;
+  height: 174rpx;
+  margin-bottom: 0rpx;
+  font-size: 28rpx;
+  text-align: center;
+}
+.category .category-item .category-image {
+  width: 100%;
+  height: 124rpx;
+  background-color: #57c6b1;
+}