提交

api/product.js

@@ -6,8 +6,8 @@ class product extends request {
     //     console.log(res);
     // }
 
-    static async getProductList(page = 1, pageSize = 10) {
-        const res = await this.getRequest(`${this.BASE_URL}Product/index?page=${page}&pageSize=${pageSize}`)
+    static async getProductList(productType=1,page = 1, pageSize = 10) {
+        const res = await this.getRequest(`${this.BASE_URL}Product/index?productType=${productType}&page=${page}&pageSize=${pageSize}`)
         return res.data;
     }
     static async getProductById(id) {

pages/index/index.js

@@ -16,13 +16,24 @@ const app = getApp();
 Page({
   data: {
 
-    tabs: [],
+    tabs: [{
+        title: '足浴'
+      },
+      {
+        title: '美甲'
+      },
+      {
+        title: '附加服务'
+      }
+    ],
     activeTab: 0,
-    productHeight: 0,
+    tabHeight: 500,
     productList: [],
     isLocation: false,
-    pageNo: 1,
-    pageSum: 0
+    pageNo: [1, 1, 1],
+    pageSum: [],
+    activeIndex: 0,
+    productHeight: 0
 
   },
 
@@ -38,44 +49,56 @@ Page({
       wx.setStorageSync('token', tokenData.token)
       requestApi.HEAD.token = tokenData.token
     }
-    if (!options.storeId){
-    wx.getSetting({
-      success: (res) => {
-        let authSetting = res.authSetting
-        if (authSetting['scope.userLocation']) {
-          console.log('已授权地理位置')
-          // 已授权
-          self.getLocation();
-        } else {
-          // 未授权
-          console.log('未授权地理位置');
-          wx.getLocation({
-            type: 'wgs84',
-            async success(res) {
-              console.log(res)
-              const latitude = res.latitude
-              const longitude = res.longitude
-              wx.setStorageSync('lon', longitude)
-              wx.setStorageSync('lat', latitude)
-              const rs = await storeApi.getNearStore(latitude, longitude)
-              console.log(rs.info);
-              self.setData({
-                locationFlag: true,
-                storeInfo: rs.info
-              })
-            }
-          })
+    if (!options.storeId) {
+      wx.getSetting({
+        success: (res) => {
+          let authSetting = res.authSetting
+          if (authSetting['scope.userLocation']) {
+            console.log('已授权地理位置')
+            // 已授权
+            self.getLocation();
+          } else {
+            // 未授权
+            console.log('未授权地理位置');
+            wx.getLocation({
+              type: 'wgs84',
+              async success(res) {
+                console.log(res)
+                const latitude = res.latitude
+                const longitude = res.longitude
+                wx.setStorageSync('lon', longitude)
+                wx.setStorageSync('lat', latitude)
+                const rs = await storeApi.getNearStore(latitude, longitude)
+                console.log(rs.info);
+                self.setData({
+                  locationFlag: true,
+                  storeInfo: rs.info
+                })
+              }
+            })
+          }
         }
-      }
-    })
-  }else {
-    const rs = await storeApi.getStoreByI(options.storeId)
-    self.setData({
-      storeInfo: rs.info
+      })
+    } else {
+      const rs = await storeApi.getStoreByI(options.storeId)
+      self.setData({
+        storeInfo: rs.info
+      })
+    }
+
+    //根据机型设置现有的tab-content盒子高度
+    let windowHeight = parseInt(wx.getSystemInfoSync().windowHeight) * parseInt(750 / wx.getSystemInfoSync().windowWidth) - 185
+
+    await this.getProductList();
+    let tabs = this.data.tabs;
+    let activeTab = this.data.activeTab;
+    console.log(tabs[activeTab].list.length)
+    let productHeight = tabs[activeTab].list.length * 170 
+    this.setData({
+      tabHeight: windowHeight,
+      productHeight
     })
-  } 
 
-    // this.getProductHeight()
   },
   onShow: async function (op) {
     console.log(op)
@@ -85,47 +108,49 @@ Page({
       wx.setStorageSync('token', tokenData.token)
       requestApi.HEAD.token = tokenData.token
     }
-    if (self.data.chooseStoreId){
+    if (self.data.chooseStoreId) {
       const rs = await storeApi.getStoreById(self.data.chooseStoreId)
       self.setData({
         storeInfo: rs.info,
-        chooseStoreId:0
+        chooseStoreId: 0
       })
     }
-    
-    var tabs = await this.getProductList(true);
-    this.setData({
-      tabs
-    });
+
+    await this.getProductList();
+
   },
 
 
   getProductList: async function (refresh = false) {
     const self = this
-    let pageNo = 1
-    if (refresh) {
-      pageNo = 1
-      this.setData({
-        pageNo
-      })
-    } else {
-      pageNo = this.data.pageNo;
-    }
+    let activeTab = self.data.activeTab;
+    let tabs = self.data.tabs;
+    let pageSum = self.data.pageSum;
+    let pageNo = self.data.pageNo;
+
+
 
-    let productList = this.data.productList;
-    const proList = await productApi.getProductList(pageNo, 4)
-    let list = proList.list;
-    if (pageNo == 1) {
-      productList = list
+    let prolist = await productApi.getProductList(activeTab + 1, pageNo[activeTab],10);
+    pageSum[activeTab] = prolist.pageCount;
+    let list = prolist.list;
+
+    if (!tabs[activeTab].list) {
+      tabs[activeTab].list = [];
+    }
+    if (pageNo[activeTab] == 1) {
+      tabs[activeTab].list = list;
     } else {
       list.forEach((item) => {
-        productList.push(item)
+        let oldList = tabs[activeTab].list;
+        oldList.push(item);
+        tabs[activeTab].list = oldList;
       })
     }
 
+
     self.setData({
-      productList,
-      pageSum: proList.pageCount
+      tabs,
+      pageSum
     })
   },
   requestAll(url, data, header = {}, method) {
@@ -181,9 +206,12 @@ Page({
 
   onChange(e) {
     const index = e.detail.index
+    let pageNo = this.data.pageNo;
     this.setData({
-      activeTab: index
-    })
+        activeTab: index,
+        // pageNo: [1, 1, 1, 1]
+      }),
+      this.getProductList()
   },
   handleClick(e) {
 
@@ -218,16 +246,23 @@ Page({
    * 页面上拉触底事件的处理函数
    */
   onReachBottom: function () {
-    console.log(1213131)
+    let activeTab = this.data.activeTab;
     let pageNo = this.data.pageNo;
     let pageSum = this.data.pageSum;
-    pageNo++;
-    if (this.data.pageNo <= pageSum) {
-      this.setData({
-        pageNo
-      })
+    pageNo[activeTab]++;
+    console.log('触底了')
+    this.setData({
+      pageNo
+    })
+
+    if (pageNo[activeTab] <= pageSum[activeTab]) {
+
+      console.log(pageNo)
+
       this.getProductList()
     }
+
+
   },
   /**
    * 页面相关事件处理函数--监听用户下拉动作
@@ -286,7 +321,7 @@ Page({
       // return
     }
     wx.navigateTo({
-      url: '../appointment/appointment?' + 'shopId=' + shopId + '&productId=' + productId + '&address=' + address+"&shopName="+shopName,
+      url: '../appointment/appointment?' + 'shopId=' + shopId + '&productId=' + productId + '&address=' + address + "&shopName=" + shopName,
     })
   }
 })

pages/index/index.scss

@@ -9,7 +9,7 @@ Page {
   width: 100%;
   height: 100%;
   background-color: #F7F7F7;
-
+  // overflow-y: hidden;
   /* 门店的标题 */
   .shop {
 
@@ -44,15 +44,7 @@ Page {
 
     }
 
-    .shop-info {
-      width: 100%;
-      height: 500rpx;
-
-      >image {
-        width: 100%;
-
-      }
-    }
+   
 
 
     /* 未获得授权时显示获取授权按钮 */
@@ -82,25 +74,64 @@ Page {
 
 
   .product {
-    overflow-y: auto;
+    height: 600px;
+    .tab-content{
+      overflow-y: auto;
+      height: 600px;
+      
+    }
     // padding-top: 590rpx;
-    /* .weui-tabs {
+    .weui-tabs {
       .weui-tabs-bar__wrp {
         .weui-tabs-bar__content {
-          height: 100rpx;
-          line-height: 99rpx;
-          white-space: nowrap;
-          display: flex;
-          justify-content: space-around;
-          border-bottom: 1rpx solid #ECECEC;
-
+         display: flex;
+         height: 100rpx;
+         justify-content: flex-start;
+          .weui-tabs-bar__item{
+            // width: 33.33%;
+            flex:1;
+            position: relative;
+            .weui-tabs-bar__title{
+              text-align: center;
+              line-height: 100rpx;
+              width: 100%;
+              
+            }
+          }
+            & .weui-tabs-bar__item:nth-of-type(2){
+              &::before,&::after{
+                content: '';
+                position: absolute;
+                height: 40rpx;
+                width: 1rpx;
+                background-color: #fff;
+              }
+              &::before{
+                left: 0;
+                top: 50%;
+                transform: translateY(-50%);
+              }
+              &::after{
+                right: 0;
+                top: 50%;
+                transform: translateY(-50%);
+              }
+            }
         }
       }
-    } */
+    } 
 
+    .shop-info {
+      width: 100%;
+      height: 500rpx;
+
+      >image {
+        width: 100%;
+
+      }
+    }
     .productinfo {
-      width: 95%;
-      height: 550rpx;
+      width: 93%;
       padding: 10rpx 0;
       margin: 0 auto;
 

pages/index/index.wxml

@@ -1,6 +1,4 @@
-<view class="content">
-  <view></view>
-</view>
+
 <!-- index.wxml -->
 <view class="container">
   <!-- 店铺信息 -->
@@ -16,30 +14,36 @@
       </navigator>
     </view>
     <!-- 店铺 -->
-    <view wx:if="{{locationFlag}}">
-      <view class="shop-info">
-        <image class="shop-img" src="{{storeInfo.logo}}" lazy-load="false"></image>
-      </view>
-    </view>
     <view class="user-location-btn" wx:if="{{!locationFlag}}">
       <button class="location-btn" open-type="getLocation" catchtap="getLocation">授权获取附近门店</button>
     </view>
   </view>
   <!-- 产品信息 -->
   <view class="product">
-    <block wx:for="{{productList}}" wx:key="id">
-      <view class="productinfo">
-        <view class="product-item" data-productid="{{item.id}}" bindtap="gotoAppointment">
-          <image class="product-img" src="{{item.productImg}}" lazy-load="false" binderror="" bindload=""></image>
-          <view class="product-desc">
-            <view class="fw700 product-name">{{item.productName}}</view>
-            <view class="price">
-              <view class="gold">会员价：¥{{item.currentPrice}}</view>
-              <view class="gray">非会员价：¥{{item.oldPrice}}</view>
-            </view>
+    <mp-tabs tabs="{{tabs}}" activeTab="{{activeTab}}" swiperClass="weui-tabs-swiper" bindtabclick="onTabClick" bindchange="onChange" activeClass="tab-bar-title__selected" tabUnderlineColor="#292E37" tabInactiveTextColor="#fff" tabActiveTextColor="#b1a384" tabBackgroundColor="#292E37" swiperHeight="{{productHeight}}">
+      <block wx:for="{{tabs}}" wx:key="title">
+        <view class="tab-content" data-set="{{item}}" slot="tab-content-{{index}}" bind:tap="handleClick" >
+          <view class="shop-info">
+            <image class="shop-img" src="{{storeInfo.logo}}" lazy-load="false"></image>
+          </view>
+          <view class="productinfo" >
+            <block wx:for="{{tabs[index].list}}" wx:key="id">
+              <view class="product-item" data-productid="{{item.id}}" bindtap="gotoAppointment">
+                <image class="product-img" src="{{item.productImg}}" lazy-load="false" binderror="" bindload=""></image>
+                <view class="product-desc">
+                  <view class="fw700 product-name">{{item.productName}}</view>
+                  <view class="price">
+                    <view class="gold">会员价：¥{{item.currentPrice}}</view>
+                    <view class="gray">非会员价：¥{{item.oldPrice}}</view>
+                  </view>
+                </view>
+              </view>
+            </block>
           </view>
         </view>
-      </view>
-    </block>
+      </block>
+    </mp-tabs>
+    <!-- </view>
+    </block> -->
   </view>
 </view>

pages/index/index.wxss

@@ -42,15 +42,6 @@ Page {
   transform: translateY(-50%);
 }
 
-.container .shop .shop-info {
-  width: 100%;
-  height: 500rpx;
-}
-
-.container .shop .shop-info > image {
-  width: 100%;
-}
-
 .container .shop .user-location-btn {
   width: 100%;
   height: 220rpx;
@@ -73,25 +64,62 @@ Page {
 }
 
 .container .product {
+  height: 600px;
+}
+
+.container .product .tab-content {
   overflow-y: auto;
-  /* .weui-tabs {
-      .weui-tabs-bar__wrp {
-        .weui-tabs-bar__content {
-          height: 100rpx;
-          line-height: 99rpx;
-          white-space: nowrap;
-          display: flex;
-          justify-content: space-around;
-          border-bottom: 1rpx solid #ECECEC;
+  height: 600px;
+}
+
+.container .product .weui-tabs .weui-tabs-bar__wrp .weui-tabs-bar__content {
+  display: flex;
+  height: 100rpx;
+  justify-content: flex-start;
+}
+
+.container .product .weui-tabs .weui-tabs-bar__wrp .weui-tabs-bar__content .weui-tabs-bar__item {
+  flex: 1;
+  position: relative;
+}
+
+.container .product .weui-tabs .weui-tabs-bar__wrp .weui-tabs-bar__content .weui-tabs-bar__item .weui-tabs-bar__title {
+  text-align: center;
+  line-height: 100rpx;
+  width: 100%;
+}
+
+.container .product .weui-tabs .weui-tabs-bar__wrp .weui-tabs-bar__content .weui-tabs-bar__item:nth-of-type(2)::before, .container .product .weui-tabs .weui-tabs-bar__wrp .weui-tabs-bar__content .weui-tabs-bar__item:nth-of-type(2)::after {
+  content: '';
+  position: absolute;
+  height: 40rpx;
+  width: 1rpx;
+  background-color: #fff;
+}
+
+.container .product .weui-tabs .weui-tabs-bar__wrp .weui-tabs-bar__content .weui-tabs-bar__item:nth-of-type(2)::before {
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
 
-        }
-      }
-    } */
+.container .product .weui-tabs .weui-tabs-bar__wrp .weui-tabs-bar__content .weui-tabs-bar__item:nth-of-type(2)::after {
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.container .product .shop-info {
+  width: 100%;
+  height: 500rpx;
+}
+
+.container .product .shop-info > image {
+  width: 100%;
 }
 
 .container .product .productinfo {
-  width: 95%;
-  height: 550rpx;
+  width: 93%;
   padding: 10rpx 0;
   margin: 0 auto;
 }
@@ -124,7 +152,7 @@ Page {
 .container .product .productinfo .product-item .product-desc .price {
   display: flex;
   justify-content: flex-start;
-  line-height: 33rpx;
+  line-height: 50rpx;
 }
 
 .container .product .productinfo .product-item .product-desc .price :last-child {
@@ -136,18 +164,16 @@ Page {
 }
 
 .fw700 {
-  font-weight: 400;
-  font-size: 32rpx;
+  font-weight: 500;
+  font-size: 17px;
 }
 
 .gold {
-  font-size: 30rpx;
+  font-size: 15px;
   color: #b1a384;
-  letter-spacing: 0rpx;
 }
 
 .gray {
-  font-size: 26rpx;
+  font-size: 13px;
   color: #999;
-  letter-spacing: 0rpx;
 }

pages/personorder/personorder.wxml

@@ -5,7 +5,7 @@
         swiperHeight="{{(tabs[activeTab].list.length)*420}}">
         <block wx:for="{{tabs}}" wx:key="title">
             <view class="tab-content" data-set="{{item}}" slot="tab-content-{{index}}" bind:tap="handleClick">
-                <view  class="orders">
+                <view  class="orders" >
                     <block wx:for="{{tabs[index].list}}" wx:key="id">
                         <view class="orderinfo card">
                             <view class="order-item" bindtap="showOrderInfo" data-orderid="{{item.id}}"