wepy代码知识点

index-page

<style lang="less">
.index-nood-modal {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 99999999999;
  .step1 {
    position: relative;
    width: 100%;
    height: 100%;
    .long-click {
      position: absolute;
      right: 53rpx;
      top: 21rpx;
      width: 532rpx;
      height: 488rpx;
    }
    .next {
      position: absolute;
      left: 0;
      right: 0;
      margin: 0 auto;
      bottom: 180rpx;
      width: 280rpx;
      height: 105rpx;
    }
  }
  .step2 {
    position: relative;
    width: 100%;
    height: 100%;
    .switch {
      position: absolute;
      width: 726rpx;
      height: 756rpx;
      left: 12rpx;
      right: 12rpx;
      top: 0;
      margin: 0 auto;
    }

    .known {
      position: absolute;
      left: 0;
      right: 0;
      margin: 0 auto;
      bottom: 180rpx;
      width: 280rpx;
      height: 105rpx;
    }
  }
}
#indexPage .wx-swiper-dot {
  margin-bottom: 20rpx;
  width: 12rpx;
  height: 12rpx;
  opacity: 0.2;
  background: #ffffff;
}
#indexPage .wx-swiper-dot-active {
  opacity: 1;
  background: #ffffff;
}
#indexPage::-webkit-scrollbar {
  display: none;
  height: 0;
  width: 0;
  color: transparent;
}
#indexPage {
  height: 100vh;
  .over::-webkit-scrollbar {
    display: none;
    height: 0;
    width: 0;
    color: transparent;
  }
  .ip-head {
    position: relative;
    z-index: 999;
    top: 0;
  }
  .head {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    padding: 42rpx;
    z-index: 9999;
    transition: all 0.5s linear;
    .search {
      height: 72rpx;
      line-height: 72rpx;
      position: relative;
      background: rgb(250, 250, 250);
      border-radius: 36rpx;
      .search-icon {
        position: absolute;
        top: 50%;
        left: 38rpx;
        width: 44rpx;
        height: 44rpx;
        transform: translateY(-50%);
      }
      input {
        height: 100%;
        padding-left: 94rpx;
        font-size: 28rpx;
        color: rgb(178, 178, 178);
      }
    }
  }
  .swipe {
    .item {
      height: 100%;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.i-mango {
  width: 240rpx;
  height: 260rpx;
  margin: 0 auto;
  margin-top: 160rpx;
  margin-bottom: 160rpx;
  image {
    width: 100%;
    height: 100%;
  }
}

.topWord {
  width: 100%;
  height: 227rpx;
  margin-left: 36rpx;
  margin-bottom: -66rpx;
  position: relative;
  .tpArrow {
    width: 58rpx;
    height: 58rpx;
    position: absolute;
    right: 76rpx;
    bottom: 93rpx;
    display: none;
    image {
      width: 100%;
      height: 100%;
    }
  }
  view {
    width: 100%;
  }
  .topBox {
    height: 136rpx;
    view {
      width: 72rpx;
      height: 72rpx;
      background-color: white;
      margin-top: -7rpx;
    }
    .newProductCn {
      height: 72rpx;
      font-size: 36rpx;
      width: 267rpx;
      background-color: white;
    }
  }
  .bottomBox {
    .newProductEn {
      font-size: 18rpx;
      line-height: 22rpx;
      color: #c2c2c2;
      letter-spacing: 15rpx;
      background-color: white;
      height: 18rpx;
      line-height: 18rpx;
      width: 620rpx;
      overflow: hidden;
    }
    view {
      width: 72rpx;
      height: 72rpx;
      background-color: white;
    }
  }
}
.scroll-tab-bar {
  width: 100%;
  height: 120rpx;
  line-height: 120rpx;
  white-space: nowrap;
  padding: 0rpx 41rpx;
  background-color: #ffffff;
  box-sizing: border-box;
  position: sticky;
  position: -webkit-sticky;
  z-index: 99;
  top: 0;
  .cpb-bar-item {
    display: inline-block;
    line-height: 120rpx;
    height: 120rpx;
    padding: 0rpx 36rpx;
    font-size: 30rpx;
    color: #171717;
    letter-spacing: 3.44rpx;
    background-color: #ffffff;
    overflow: hidden;
  }
  .currentCategoryStyle {
    font-family: PingFangSC-Semibold;
    font-size: 42rpx;
    color: #353535;
    letter-spacing: 4.5rpx;
    font-weight: 700;
  }
  .categoryPoint {
    width: 3px;
    height: 15.9rpx;
    background-color: #ff8080;
    transform: rotate(-135deg);
    display: inline-block;
    position: relative;
    top: -4rpx;
  }
  .category-point-left {
    left: -12rpx;
  }
  .category-point-right {
    right: -12rpx;
  }
}
.cpb-products {
  width: 100%;
  // 开启3d加速
  transform: translate3d(0, 0, 0);
  .odd-bgc {
    background-color: #f4f4f4;
  }
  .even-bgc {
    background-color: #dcebf2;
  }
  .cpb-line {
    width: 100%;
    height: 86rpx;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    .cpb-right-line {
      width: 387rpx;
      border-bottom: 1rpx solid #eeeeee;
      margin-right: 42rpx;
    }
  }
  .cpb-line:nth-last-child(1) {
    display: none;
  }
  .cpb-category-name {
    height: 122rpx; // 减去描述之后的高度, 标题距离顶部和底部都是21px
    .cpb-category-name-top {
      height: 45rpx;
      margin-top: 42rpx;
      position: relative;
      .tt {
        width: 20rpx;
        height: 20rpx;
        position: absolute;
        top: -140rpx;
        left: 0rpx;
      }
      .cpb-category-name-top-line {
        border: none;
        width: 168rpx;
        border-bottom: 1rpx solid #b2b2b2;
      }
      .cpb-category-name-top-text {
        font-size: 32rpx;
        letter-spacing: 3rpx;
        line-height: 45rpx;
        padding: 0rpx 24rpx;
        background-color: #ffffff;
        color: #353535;
        font-weight: 700;
      }
    }
    .cpb-category-name-bottom {
      font-size: 18rpx;
      letter-spacing: 2rpx;
      line-height: 25rpx;
      text-align: center;
      background-color: #ffffff;
      color: #b2b2b2;
      margin-top: 12rpx;
    }
  }
  .cpb-product {
    padding-left: 42rpx;

    .cpb-left-img {
      width: 240rpx;
      height: 240rpx;
      margin-right: 36rpx;
      position: relative;
      border-radius: 18rpx;
      overflow: hidden;
      image {
        width: 100%;
        height: 100%;
      }
      .idForScroll {
        position: absolute;
        top: -200rpx;
        left: 0rpx;
        width: 10rpx;
        height: 1rpx;
        background-color: rgba(0, 0, 0, 0);
      }
    }
    .cpb-right-text {
      width: 382rpx;
      justify-content: space-between;
      .cpb-title {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        white-space: normal;
        word-wrap: break-word;
        font-size: 30rpx;
        letter-spacing: 3.4rpx;
        color: #353535;
        line-height: 42rpx;
      }
      .cpb-des {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        white-space: normal;
        word-wrap: break-word;
        font-size: 22rpx;
        letter-spacing: 3rpx;
        color: rgba(155, 155, 155, 0.87);
        line-height: 30rpx;
        margin-top: 18rpx;
      }
      .pro-activity {
        background: #ff5b21;
        border-radius: 6rpx;
        padding: 11rpx 12rpx;
        height: 36rpx;
        font-size: 20rpx;
        line-height: 1;
        color: #ffffff;
        letter-spacing: 1rpx;
        box-sizing: border-box;
        text-align: center;
        margin-top: 30rpx;
        font-weight: bold;
      }

      .pro-new-upload {
        background: #78e6b2;
        border-radius: 6rpx;
        padding: 11rpx 12rpx;
        height: 36rpx;
        font-size: 20rpx;
        line-height: 1;
        color: #fff;
        letter-spacing: 1rpx;
        box-sizing: border-box;
        text-align: center;
        margin-right: 24rpx;
        margin-top: 30rpx;
        font-weight: bold;
      }
      .activityLabel {
        background-color: #ff8375;
        border-radius: 6rpx;
        font-family: PingFangTC-Regular;
        font-size: 18rpx;
        color: #ffffff;
        letter-spacing: 1px;
        display: inline-block;
        padding: 5rpx 12rpx;
        margin-top: 18rpx;
        line-height: 25rpx;
      }
      .cpb-bottom {
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        overflow: hidden;
        margin-bottom: 10rpx;

        .cpb-after-account {
          font-size: 22rpx;
          height: 36rpx;
          width: 60rpx;
          box-sizing: border-box;
          border: 2rpx solid #ff5b21;
          color: #ff5b21;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          letter-spacing: 0;
        }
        .cpb-now-price {
          font-size: 36rpx;
          line-height: 36rpx;
          color: #ff675a;
          margin-right: 10rpx;
          align-self: center;
          .cpb-now-price-rmb {
            font-size: 36rpx;
            line-height: 36rpx;
            color: #ff5b21;
            letter-spacing: 0;
            margin-right: 6rpx;
          }
          .cpb-now-price-num {
            font-size: 36rpx;
            line-height: 36rpx;
            color: #ff5b21;
            letter-spacing: 0;
          }
          .cpb-now-price-param {
            font-size: 22rpx;
            color: #ff5b21;
            letter-spacing: 1.69rpx;
            margin-left: 10rpx;
          }
        }
        .cpb-old-price {
          font-size: 24rpx;
          color: #bbbbbb;
          letter-spacing: 1rpx;
          text-decoration: line-through;
          line-height: 24rpx;
          align-self: center;
        }
      }
    }
  }
}
.new-coupon-container {
  z-index: 99999;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.75);
  align-items: center;
  .coupon-fail {
    margin-top: 492rpx;
    font-size: 32rpx;
    color: #ffffff;
    letter-spacing: 3rpx;
    text-align: center;
    line-height: 50rpx;
  }
  .coupon-item {
    margin-top: 415rpx;
    height: 250rpx;
    width: 590rpx;
    background: url(https://image.velo.top/image/product/1525333541120.jpg)
      no-repeat;
    background-size: 100% 100%;
    padding: 42rpx 88rpx 42rpx 182rpx;
    box-sizing: border-box;
    .coupon-item-content {
      align-items: center;
      width: 320rpx;
      color: #353535;
      .coupon-content-left {
        .coupon-icon {
          font-size: 36rpx;
          letter-spacing: 2rpx;
        }
        .conpon-price {
          font-size: 72rpx;
          letter-spacing: 0;
        }
      }
      .coupon-content-right {
        margin-left: 18rpx;
        .coupon-name {
          font-family: PingFang-SC-Medium;
          font-size: 28rpx;
          font-weight: bold;
        }
        .coupon-date {
          white-space: nowrap;
          font-family: PingFangSC-Regular;
          font-size: 22rpx;
          letter-spacing: 0;
        }
      }
    }
    .coupon-btn {
      line-height: 0;
      width: 320rpx;
      height: 52rpx;
      border-radius: 26rpx;
      background: #ff7e5a;
      font-size: 24rpx;
      color: #ffffff;
      letter-spacing: 2.4rpx;
    }
  }
}
</style>
<template>
  <view>
    <!-- 新人优惠券 -->
    <newerCoupon :isShow.sync="isShowNewerCoupon"></newerCoupon>
    <!-- 固定在顶部的标题, 需要商品有滚动效果时启用该代码 -->
    <view class="index-nood-modal" wx:if="{{noodStatus===1 || noodStatus===2}}">
      <view class="step1" wx:if="{{noodStatus===1}}">
        <image class="long-click" src="../asserts/img/long-click.png"></image>
        <image class="next" @tap="nextNoodGuide" src="../asserts/img/next.png"></image>
      </view>
      <view class="step2"  wx:if="{{noodStatus===2}}">
        <view class="switch-applet-box">
          <image class="switch" src="../asserts/img/switch-applet.png"></image>
        </view>
        <image class="known" @tap="knowNoodGuide" src="../asserts/img/know.png"></image>
      </view>
    </view>
    <scroll-view scroll-y="true" id="indexPage"  enable-back-to-top='{{true}}'  @scroll="mainScroll"  scroll-into-view="scrollId{{pageScrollTo}}">
      <!-- 新年物流通知 -->
      <newYearNotice wx:if='{{showMailTip}}'></newYearNotice>

      <view class='over'>
        <view class="ip-head">
          <view class="head flex-h flex-cc">
            <view class="search flex-1" @tap="toSearch">
              <image class="search-icon" src="../asserts/img/search.png"></image>
              <input placeholder="{{searchKeyWord?searchKeyWord:'搜索商品'}}" disabled="true" />
            </view>
          </view>
          <view class="swipe">
            <swiper style="height:660rpx" indicator-dots="{{indicatorDots}}"
                autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="true">
                <block wx:for="{{bannerData.imgUri}}" wx:key='{{index}}'>
                  <swiper-item class="item"  id="{{index}}" @tap.stop='bannerPush' >
                    <image src="{{item}}" class="slide-image" width="355" height="150"/>
                  </swiper-item>
                </block>
            </swiper>
          </view>
        </view>
        <!-- 固定吸顶的tab list -->
        <scroll-view class="scroll-tab-bar" scroll-x="true" scroll-into-view="categoryTitleTop{{currentTitleIndex}}" scroll-with-animation="true">
          <repeat for="{{categArr}}" key="index">
            <view id="categoryTitleTop{{index}}" style="{{index==0?'padding-left:20rpx;':''}}" class="cpb-bar-item {{currentTitleIndex==index?'currentCategoryStyle':''}}" @tap.stop="showCurrentCategoryProducts" data-sourceid="{{item.sourceId}}" data-category="{{index}}" >
              <view class="categoryPoint category-point-left"  wx:if="{{currentTitleIndex===index}}"></view>
              {{item.title}}
              <view class="categoryPoint category-point-right" wx:if="{{currentTitleIndex===index}}"></view>
            </view>
          </repeat>
        </scroll-view>
        <!-- 商品列表 -->
        <view class="cpb-products flex-v">
          <repeat for="{{productArrs}}" key="idx" index="idx" item="item">
            <view class="cpb-category-name"  wx:if="{{item.title}}">
              <view class="cpb-category-name-top flex-h flex-cc">
                <view class="cpb-category-name-top-line"></view>
                <view class="cpb-category-name-top-text">{{item.title}}</view>
                <view class="cpb-category-name-top-line"></view>
                <view class="tt" style="{{idx == 0 ? 'top:0rpx;':''}}"></view>
              </view>
            </view>
            <view class="cpb-product flex-h" style=""  @tap.stop="gotoProductDetail" data-productid="{{item.productId}}" data-index="{{(idx+1)%2}}" >
              <view class="cpb-left-img flex-h flex-cc {{ (idx+1)%2?'pro-even-bk':'pro-odd-bk'}}">
                <image @load="bindloadImage" src="{{item.productUri}}"></image>
                <view class="idForScroll" id="scrollId{{item.sourceIndex}}" style="{{idx?'':'top:-240rpx;'}}"></view>
              </view>
              <view class="cpb-right-text flex-v">
                <view>
                  <view class="cpb-title" style='-webkit-line-clamp: {{item.actName||item.newProduct?1:2}}'> {{item.productName}} </view>
                  <view class="cpb-des">{{item.shortDescription}}</view>
                  <view class="flex-h">
                    <view class="{{android6?'pro-new-upload':'flex-h flex-cc pro-new-upload-flex'}}" wx:if="{{item.newProduct}}">上新</view>
                    <view class="{{android6?'pro-activity':'flex-h flex-cc pro-active'}}" wx:if='{{item.actName}}'>{{item.actName?item.actName:''}}</view>
                  </view>
                </view>

                <view class="cpb-bottom flex-h flex-cc">
                  <!-- <view class="cpb-after-account">券后</view> -->
                  <view class="cpb-now-price flex-h flex-cc">
                    <view class="cpb-now-price-rmb">¥</view>
                    <view class="cpb-now-price-num">{{item.priceAfterDiscount/100}}</view>
                    <view class="cpb-now-price-param" wx:if="{{item.params}}"> / {{item.params}}</view>
                  </view>
                  <view class="cpb-old-price" hidden='{{item.price==item.priceAfterDiscount}}'>¥{{(item.price/100)}}</view>
                </view>
              </view>
            </view>
            <view class="cpb-line" wx:if="{{item.isCategoryLastProduct!='yes'}}" >
              <view class="cpb-right-line"></view>
            </view>
          </repeat>
        </view>
        <!-- 新品推荐 -->
        <repeat for="{{ newProductMoreGoodsData }}" key="index" index="index" item="item">
          <newProduct wx:if="{{item.floorType == 'new_launch'}}" :allInfo="item" ></newProduct>
        </repeat>
        <!-- footer -->
        <view class="i-mango" style="{{addImangoMargin?'margin-top:100rpx;':''}}">
          <image src="../asserts/img/end_wanwei.png"></image>
        </view>
      </view>
      <custoast/>
    </scroll-view>
    <!-- new 优惠券组件 -->
    <view class="new-coupon-container flex-v" wx:if='{{detail.isPopup}}' catchtouchmove>
      <view class="coupon-item flex-v flex-bc" wx:if='{{detail.allowAccept}}'>
        <view class="coupon-item-content flex-h" >
          <view class="coupon-content-left flex-h flex-cc">
            <view class="coupon-icon">￥</view>
            <view class="conpon-price">{{(detail.couponInfo.discount||0)/100}}</view>
          </view>
          <view class="coupon-content-right">
            <view class="coupon-name">{{detail.couponInfo.couponName}}</view>
            <view class="coupon-date">{{detail.couponInfo.validTime}}</view>
          </view>
        </view>
        <view class='coupon-btn flex-h flex-cc' @tap='receiveCoupon'><view>立即领取</view></view>
      </view>

      <view class='coupon-fail flex-v flex-cc' hidden='{{detail.allowAccept}}' wx:if='{{detail.recieveResult===0}}'>
        <view>领券成功</view>
        <view>请通过购买链接下单~</view>
      </view>
       <view class='coupon-fail flex-v flex-cc' hidden='{{detail.allowAccept}}' wx:if='{{detail.recieveResult===1||detail.recieveResult===3}}'>
        <view>抱歉，你来晚啦~</view>
        <view>券已领完，下次要早点哦~</view>
      </view>
       <view class='coupon-fail flex-v flex-cc' hidden='{{detail.allowAccept}}' wx:if='{{detail.recieveResult===2}}'>
        <view>抱歉，您的领券数量已达上限</view>
      </view>
    </view>
  </view>
</template>

<script>
import wepy from 'wepy'
import toast from '../components/toast'
import moreGoodsProd from '../components/more-goods-prod'
import newProduct from '../components/new-product'
import tabBar from '../components/tab-bar'
import NewYearNotice from '../components/new-year-notice'
import newerCoupon from '../components/newer-coupon'
import { checkUpdateApplet } from '../utils/util.js'
var event = require('../utils/event.js')

import {
  getIndexFrame,
  getFloorProductList,
  shareProduct,
  getNotice,
  pageRecord,
  wanweiIndexProductListV2,
  linkBindFromMP,
  pushRegisterDot,
  getCouponConfig,
  receiveCoupon
  // generateShareId
} from '../service/api'

export default class Index extends wepy.page {
  config = {
    navigationBarTitleText: '大叔家Ocandy'
  }

  components = {
    newProduct: newProduct,
    moreGoodsProd: moreGoodsProd,
    custoast: toast,
    tabBar: tabBar,
    newYearNotice: NewYearNotice,
    newerCoupon: newerCoupon
  }

  data = {
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    duration: 300,
    bannerData: {},
    bannerTarget: null,
    bannerTargetTypeArr: null,
    bannerTargetTitle: null,
    addShopCarProductId: '',
    indexFrame: [],
    newProductMoreGoodsData: [],
    pageScrollTo: '',
    addImangoMargin: false,
    noodStatus: 0,
    showMailTip: false,
    // 是否显示新手的优惠券
    isShowNewerCoupon: false,
    // 主页和搜索页输入框里的推荐搜索文字
    searchKeyWord: '',
    noRepeat: false,
    pageLoadTime: {},
    categoryAllData: [],
    categArr: [],
    productArrs: [],
    currentTitleIndex: 0,
    noReapClick: false,
    iosFixed: false,
    isIOS: false,
    scrollTopArr: [],
    current: -1,
    tabHeight: 70,
    isTabClick: false,
    detail: null
  }

  methods = {
    gotoProductDetail(e) {
      if (this.$parent.globalData.preventMoreTap(e)) {
        return
      }
      var type = e.currentTarget.dataset.index
      var productId = e.currentTarget.dataset.productid
      wx.navigateTo({
        url: `/pages/product-detail-page?type=${type}&productId=${productId}`,
        complete: () => {
          this.$emit('clearTimeOut')
        }
      })
    },
    bindloadImage() {
      if (!this.noRepeat) {
        this.noRepeat = true
        // 第一张图片加载完毕去获取dom的高度数组
        this.getScrollArray()

        this.pageLoadTime.imgTime = new Date().getTime()
        pageRecord({
          path: 'pages/index-page',
          readyTime: this.pageLoadTime.startTime,
          loadTime: this.pageLoadTime.imgTime
        }).then(res => {})
        console.log(
          'index-page=>bindloadImage=>总耗时',
          this.pageLoadTime.imgTime - this.pageLoadTime.startTime
        )
        setTimeout(() => {
          this.noRepeat = true
          this.$apply()
        }, 3000)
      }
    },
    showCurrentCategoryProducts(e) {
      // 如果是点击tabbar 则禁止滚动事件触发,1s后解开
      this.isTabClick = true
      setTimeout(() => {
        this.isTabClick = false
        this.$apply()
      }, 1000)
      if (this.noReapClick === false) {
        this.noReapClick = true
        setTimeout(() => {
          this.noReapClick = false
          this.$apply()
        }, 500)
        this.pageScrollTo = e.currentTarget.dataset.sourceid + '0'
        setTimeout(() => {
          this.pageScrollTo = ''
          this.$apply()
        }, 1000)
        // title
        this.currentTitleIndex = e.currentTarget.dataset.category
        this.$apply()
      }
    },
    knowNoodGuide() {
      this.noodStatus = 3
      wx.showTabBar()
    },
    nextNoodGuide() {
      wepy.setStorageSync('indexNood', 1)
      this.noodStatus = 2
    },
    mainScroll(e) {
      if (this.isTabClick) {
        return
      }
      this.getCategoryNameTop()
    },
    toSearch(e) {
      if (this.$parent.globalData.preventMoreTap(e)) {
        return
      }
      wx.navigateTo({
        url: '/subPackage/search-page'
      })
    },
    bannerPush(e) {
      if (this.$parent.globalData.preventMoreTap(e)) {
        return
      }
      let target = this.bannerTarget[e.currentTarget.id]
      let targetType = this.bannerTargetTypeArr[e.currentTarget.id]
      let shareTitle = this.bannerTargetTitle[e.currentTarget.id]

      if (targetType === '0') {
        // 0不跳转
        console.log('index-page=>bannerPush=>不跳转')
      } else if (targetType === '1') {
        // 1跳转活动
        wx.navigateTo({
          url: `/pages/newer-coupon-page?shareTitle=${shareTitle}`
        })
      } else if (targetType === '2') {
        // 2跳转h5
        wx.navigateTo({
          url: `/pages/activity-page?url=${target}&shareTitle=${shareTitle}`
        })
      } else if (targetType === '3') {
        // 3跳转商品详情
        wx.navigateTo({
          url: `/pages/product-detail-page?productId=${target}`
        })
      }
    },
    receiveCoupon() {
      receiveCoupon({ couponConfigId: this.detail.couponConfigId }).then(
        res => {
          console.log('product-detial=>receiveCoupon=>领取优惠券', res)
          if (res && res.data) {
            return
          }
          if (res.allowWatch) {
            wx.showTabBar()
            this.detail.isPopup = false
            this.toast({ title: res.msg, time: 1000 })
          } else {
            this.detail.recieveResult = res.recieveResult
            this.detail.allowAccept = 0
          }

          this.$apply()
        }
      )
    }
  }

  onShareAppMessage(res) {
    var _this = this
    var productId = res.target ? res.target.dataset.productid : ''
    var shareId = res.target ? res.target.dataset.shareid : ''
    var type = res.target ? res.target.dataset.type : ''
    var floorIndex = res.target ? res.target.dataset.floorindex : ''
    var index = res.target ? res.target.dataset.index : ''
    var bindRelationshareId = this.$parent.globalData.bindRelationshareId

    console.log(
      'index-page =>onShareAppMessge =>bindRelationshareId',
      bindRelationshareId
    )
    var path =
      res.from !== 'menu'
        ? `/pages/index-page?productId=${productId}&isShare=1&type=${type}&shareId=${shareId}`
        : `/pages/index-page?bindRelationshareId=${bindRelationshareId}`
    return {
      title: res.target ? res.target.dataset.title : '好吃的，在大叔家Ocandy',
      path: path,
      imageUrl: res.target ? res.target.dataset.imgurl : '',
      success: function(_) {
        // 转发成功
        if (res.from !== 'menu') {
          shareProduct({ productId: productId }).then(res => {
            _this.newProductMoreGoodsData[floorIndex].products[index].shareNum++
            _this.$apply()
          })
        } else {
          // 更换shareId方法
          _this.$parent.changeRelationShareId()
        }
      }
    }
  }

  toast(obj) {
    return new Promise((resolve, reject) => {
      this.$invoke('custoast', 'showToast', obj).then(res => {
        resolve(res)
      })
    })
  }

  events = {
    emitCategoryAllData(categoryAllData) {
      this.$broadcast('broadcastCategoryAllData', categoryAllData)
    },
    'index-emit': (...args) => {
      let $event = args[args.length - 1]
      console.log(
        `index-page=>emitCategoryAllData=> ${this.$name} receive ${
          $event.name
        } from ${$event.source.$name}`
      )
    },
    openShopCar: arg => {
      this.addShopCarProductId = arg
      this.$invoke('attrbox', 'setAnimation', {
        productId: this.addShopCarProductId,
        from: 'index'
      })
      this.$apply()
    }
  }

  getIndexData() {
    this.newProductMoreGoodsData = []
    getIndexFrame({}).then(res => {
      this.indexFrame = res
      if (res[res.length - 1].floorType === 'recommend') {
        this.addImangoMargin = true
      }
      // 获取初始数据, 将先后顺序放到新数组
      res.forEach((item, index) => {
        var idx = this.newProductMoreGoodsData.length
        // 新品发布
        if (item.sourceId && item.floorType === 'new_launch') {
          this.newProductMoreGoodsData[idx] = {}
          this.newProductMoreGoodsData[idx].floorType = item.floorType // 楼层信息
          this.newProductMoreGoodsData[idx].sourceData = item // 原始数据, 用于渲染'新品发布'

          setTimeout(() => {
            getFloorProductList({ sourceId: item.sourceId }).then(res => {
              this.newProductMoreGoodsData[idx].products = res // 商品数据
              this.$apply()
            })
          }, 2000)
          // 更多优选
        } else if (item.sourceId && item.floorType === 'recommend') {
          this.newProductMoreGoodsData[idx] = {}
          this.newProductMoreGoodsData[idx].floorType = item.floorType // 楼层信息
          this.newProductMoreGoodsData[idx].sourceData = item // 原始数据,  用于渲染'更多优选'
          setTimeout(() => {
            getFloorProductList({ sourceId: item.sourceId }).then(res => {
              this.newProductMoreGoodsData[idx].products = res // 商品数据
              this.$apply()
            })
          }, 2000)
          // banner数据
        } else if (item.floorType === 'banner') {
          this.bannerData = item
          this.bannerData.imgUri = item.imgUri.split(',')
          this.bannerTarget = item.target.split(',')
          this.bannerTargetTypeArr = item.targetType.split(',')
          this.bannerTargetTitle = item.title.split(',')
          console.log(
            'index-page=>getIndexData=>this.bannerTargetTitle',
            this.bannerTargetTitle
          )
        }
      })
      this.$apply()
    })
  }

  indexNood() {
    const indexNood = wepy.getStorageSync('indexNood')
    if (indexNood === 0) {
      this.noodStatus = 1
      wx.hideTabBar()
    }
  }

  onReady() {
    this.pageLoadTime.domTime =
      new Date().getTime() - this.pageLoadTime.startTime
  }
  getScrollArray() {
    var query = wx.createSelectorQuery()
    query
      .selectAll('.cpb-category-name')
      .boundingClientRect(res => {
        res.forEach(element => {
          this.scrollTopArr.push(element.top - this.tabHeight)
        })
      })
      .exec()
    wx.hideLoading()
  }
  findPlace(code, arr) {
    let array = arr.slice(0)
    var codeMin = Math.min.apply(null, array)
    var codeIndex = 0
    if (code <= codeMin) {
      codeIndex = 0
    } else {
      array.push(code)
      array.sort(function(x, y) {
        return x - y
      })
      codeIndex = array.indexOf(code) - 1
    }
    return codeIndex
  }

  getCategoryNameTop() {
    wx
      .createSelectorQuery()
      .select('#indexPage')
      .fields({ scrollOffset: true }, res => {
        this.current = this.findPlace(res.scrollTop, this.scrollTopArr)
        if (this.current !== this.currentTitleIndex) {
          this.currentTitleIndex = this.current
          this.$apply()
        }
      })
      .exec()
  }

  async initData() {
    this.categoryAllData = await wanweiIndexProductListV2({})

    if (!this.categoryAllData.length) {
      return
    }

    this.categoryAllData.forEach((item, index) => {
      if (item.productList.length) {
        item.productList[item.productList.length - 1].isCategoryLastProduct =
          'yes'
      }

      let title = item.title
      let description = item.description
      let flag = true

      // 如果某个分类的商品个数为0则不往下执行
      if (!item.productList.length) {
        return
      }

      // 记录此分类的商品数量
      item.productsLength = item.productList.length

      item.productList.forEach((itm, idx) => {
        if (typeof item === 'object') {
          if (flag) {
            itm.title = title
            itm.description = description
            // 将此分类的商品数量挂载到此分类的第一个商品上
            itm.productsLength = item.productsLength
            flag = false
            this.productArrs.push(itm)
          } else {
            this.productArrs.push(itm)
          }
        }
      })
      // 获取分类的数据
      this.categArr.push({
        title: item.title,
        sourceId: item.sourceId,
        productsLength: item.productList[0].productsLength
      })
    })

    this.categoryScrollTo = this.categArr[0].sourceId
    this.$apply()
  }

  GZHToGroupDetail(opts) {
    if (opts.openRecordId) {
      wx.navigateTo({
        url: `/pages/group/group-detail-page?openRecordId=${opts.openRecordId}`
      })
    } else if (opts.toPage === 'couponPage') {
      wx.navigateTo({
        url: `/pages/coupon-page`
      })
    } else {
      if (opts.toPage) {
        wx.navigateTo({
          url: opts.toPage
        })
      }
    }
  }

  noticeCardCoupon() {
    event.emit('readyToGetGlobalData', 1)
  }

  async onLoad(opt) {
    wx.hideShareMenu()
    wx.showLoading({
      title: '加载中...'
    })
    console.log('index-page =>onload =>opt', opt)
    //  获取设备信息
    const deviceInfo = wx.getSystemInfoSync()
    if (deviceInfo.platform === 'ios') {
      this.isIOS = true
    } else {
      this.isIOS = false
    }
    this.$parent.globalData.isAndroid = deviceInfo.platform === 'android'

    // 初始化图片打点时间
    this.pageLoadTime.startTime = new Date().getTime()

    await this.$parent.userLogin()

    // 首页领取优惠券
    if (opt.scene) {
      this.getCoupon(opt.scene)
    }

    // 运营打点
    this.yyDot(opt)

    // 从首页或活动分享menu分享进来，绑定关系
    this.judgeRelation(opt)

    // 通知卡片, 获取优惠券信息
    this.noticeCardCoupon()
    // 公众号跳转到拼团详情
    this.GZHToGroupDetail(opt)
    // 输入框的搜索关键字
    this.searchKeyWord = this.$parent.globalData.searchKeyWord
    // 获取分类信息
    this.initData()
    this.getNoticeList()
    // 获取主页信息
    this.getIndexData()
    this.$apply()
    // 判断推手身份,展示推手新手引导
    if (this.$parent.globalData.isPush === 1) {
      this.indexNood()
    }

    // 判断不是推手且(此处不确定)
    console.log(
      'index-page=>onload=>opt.recommend',
      opt.recommend,
      this.$parent.globalData.isPush
    )
    if (opt.recommend && this.$parent.globalData.isPush === 0) {
      wx.navigateTo({
        url: `/pages/product-detail-page?type=${opt.type}&productId=${
          opt.productId
        }&shareId=${opt.shareId}`
      })
    }

    await this.$broadcast('onLoadFuc')
    // 如果为1则弹框, 领券
    this.isShowNewerCoupon = this.$parent.globalData.newWxCoupon
    this.$apply()
  }

  // 扫码首页领取优惠券
  getCoupon(couponConfigId) {
    getCouponConfig({ couponConfigId: couponConfigId }).then(res => {
      this.detail = res
      wx.hideTabBar()
      console.log('index-page=>getCoupon=>获取优惠券', res)
    })
  }

  // 运营来源打点
  yyDot(opts) {
    if (opts.yysource) {
      pushRegisterDot({
        yysource: opts.yysource,
        velo: 'ww',
        accId: this.$parent.globalData.accId || ''
      }).then(res => {
        console.log('index-page=>yyDot=>res', res)
      })
    }
  }

  onShow() {
    checkUpdateApplet()
  }
  getNoticeList() {
    getNotice({}).then(res => {
      console.log('index-page=>getNoticeList=>获取notice', res)
      this.noticeList = res || []
      if (res && res.length > 0) {
        this.showMailTip = true
        this.$parent.globalData.addBannerHeight = 72
      } else {
        this.showMailTip = false
        this.$parent.globalData.addBannerHeight = 0
      }
      this.$apply()
    })
  }

  /**
   * 请求绑定关系的接口,绑定上级关系
   */
  bindRelation(opt) {
    linkBindFromMP({ fromId: opt.bindRelationshareId }).then(
      res => {
        console.log(
          'index-page =>onload =>linkBindFromMP绑定成功',
          opt.bindRelationshareId,
          res
        )
      },
      err => {
        console.log('index-page =>onload =>linkBindFromMP绑定失败=>err', err)
      }
    )
  }

  /**
   * 判断是否需要绑定从首页和活动页右上角分享出来的页面
   */
  async judgeRelation(opt) {
    // 请求shareId
    await this.$parent.getIndexShareId().then(res => {
      console.log('index-page =>judgeRelation =>获取shareId成功')
      wx.showShareMenu()
    })

    // 判断是否需要绑定关系
    if (opt.bindRelationshareId && this.$parent.globalData.isPush !== 1) {
      this.bindRelation(opt)
    }

    // 判断是否需要跳转到活动页
    if (opt.pagePath) {
      var url = opt.actUrl
        ? `${opt.pagePath}?shareTitle=${opt.shareTitle}&url=${opt.actUrl}`
        : `${opt.pagePath}?shareTitle=${opt.shareTitle}`
      wx.navigateTo({
        url: url
      })
    }
  }
}
</script>

home-page-old

<style lang="less">
.homePage {
  .tabbar {
    height: 80rpx;
    width: 100%;
    align-items: center;
    .bar-item {
      height: 100%;
      .content {
        height: 100%;
        position: relative;
        .title {
          font-size: 30rpx;
          line-height: 50rpx;
          letter-spacing: 1rpx;
          color: #333333;
        }
        .select-bar {
          color: #ff8080;
        }
        .border-line {
          position: absolute;
          width: 100%;
          height: 5rpx;
          background: #ff8080;
          left: 0;
          bottom: 0;
        }
      }
    }
  }
  .banner {
    height: 400rpx;
    width: 100%;
    position: relative;
    .search-box {
      width: 691rpx;
      height: 80rpx;
      position: absolute;
      left: 30rpx;
      top: 20rpx;
      background: #fff;
      border-radius: 40rpx;
      align-items: center;
      font-size: 28rpx;
      color: #cccccc;
      z-index: 99;
      .icon {
        height: 24rpx;
        width: 24rpx;
        margin-left: 25rpx;
        margin-right: 21rpx;
      }
    }
    .swiper {
      width: 100%;
      height: 100%;
      .swiper-item {
        width: 100%;
        height: 100%;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .discount {
    width: 690rpx;
    height: 140rpx;
    background: #000;
    margin: 40rpx 0;
  }
  .tag-bar {
    margin-top: 30rpx;
    width: 100%;
    justify-content: flex-start;
    .item {
      min-width: 25%;
      max-width: 25%;
      margin-bottom: 20rpx;
      .icon {
        height: 90rpx;
        width: 90rpx;
        min-width: 90rpx;
        margin-bottom: 20rpx;
      }
      .tag-name {
        font-size: 24rpx;
        color: #666666;
      }
    }
  }
  .activity {
    margin-top: 30rpx;
    width: 100%;
    .act-title {
      height: 140rpx;
      width: 100%;
      .act-name {
        padding: 0 38rpx;
        height: 60rpx;
        border: 2rpx solid #ff8080;
        border-radius: 30rpx;
        font-size: 32rpx;
        color: #333333;
        background: #fff5f1;
      }
    }
    .act-title-1 {
      height: 400rpx;
      width: 100%;
      .act-name {
        padding: 0 38rpx;
        height: 60rpx;
        border: 2rpx solid #ff8080;
        border-radius: 30rpx;
        font-size: 32rpx;
        color: #333333;
        background: #fff5f1;
      }
    }
    .goods-top {
      width: 100%;
    }
    .goods-item {
      margin-top: 40rpx;
      width: 100%;
      padding: 0 30rpx;
      box-sizing: border-box;
      .goods-img {
        height: 200rpx;
        width: 200rpx;
        border-radius: 20rpx;
      }
      .goods-right {
        margin-left: 20rpx;
        height: 200rpx;
        .goods-name {
          font-size: 28rpx;
          color: #333333;
          overflow: hidden;
          margin-bottom: 15rpx;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          white-space: normal;
          display: -webkit-box;
          text-overflow: ellipsis;
          word-wrap: break-word;
        }
        .goods-desc {
          font-size: 24rpx;
          color: #999999;
          overflow: hidden;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          white-space: normal;
          display: -webkit-box;
          text-overflow: ellipsis;
          word-wrap: break-word;
        }
        .goods-price {
          width: 100%;
          font-size: 36rpx;
          color: #ff8080;
          align-items: flex-end;
          line-height: 40rpx;
          .fail-price {
            line-height: 40rpx;
            font-size: 24rpx;
            color: #999;
            margin-left: 33rpx;
            text-decoration: line-through;
          }
        }
      }
    }
    .act-goods {
      margin-top: 40rpx;
      height: 280rpx;
      width: 100%;
      white-space: nowrap;
      .act-item {
        margin-right: 54rpx;
        display: inline-block;
        height: 240rpx;
        width: 636rpx;
        background: #f7f7f7;
        padding: 0 30rpx;
        box-sizing: border-box;
        .act-item-container {
          align-items: center;
          height: 100%;
          width: 100%;
        }

        .goods-img {
          height: 200rpx;
          width: 200rpx;
          border-radius: 20rpx;
        }
        .goods-right {
          margin-left: 20rpx;
          height: 200rpx;
          .goods-name {
            font-size: 26rpx;
            color: #666666;
            overflow: hidden;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            white-space: normal;
            display: -webkit-box;
            text-overflow: ellipsis;
            word-wrap: break-word;
          }
          .goods-desc {
            margin-bottom: 25rpx;
            font-size: 24rpx;
            color: #666666;
            overflow: hidden;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            white-space: normal;
            display: -webkit-box;
            text-overflow: ellipsis;
            word-wrap: break-word;
          }
          .goods-price {
            width: 100%;
            font-size: 36rpx;
            color: #ff8080;
            align-items: flex-end;
            line-height: 40rpx;
            .fail-price {
              line-height: 40rpx;
              font-size: 24rpx;
              color: #999;
              margin-left: 10rpx;
              text-decoration: line-through;
            }
          }
        }
      }
    }
  }
  .adv-title {
    width: 100%;
    height: 360rpx;
  }
  .adv-list {
    margin-top: 40rpx;
    // margin-bottom: 70rpx;
    width: 100%;
    white-space: nowrap;
    .adv-item-container {
      display: inline-block;
      margin-left: 30rpx;
      .adv-item {
        align-items: center;
        margin-bottom: 20rpx;
        .adv-img {
          width: 200rpx;
          height: 200rpx;
          border-radius: 20rpx;
          background: #f5f5f5;
          margin-bottom: 20rpx;
        }
        .adv-name {
          width: 200rpx;
          height: 60rpx;
          overflow: hidden;
          line-height: 30rpx;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          white-space: normal;
          display: -webkit-box;
          text-overflow: ellipsis;
          word-wrap: break-word;
          font-size: 26rpx;
          color: #333333;
          text-align: center;
          margin-bottom: 20rpx;
        }
        .adv-price {
          font-size: 28rpx;
          color: #ff8080;
          text-align: center;
        }
      }
    }
  }
}
</style>
<template>
  <view class='container homePage'>

     <view class="tabbar flex-h">
      <view class="bar-item flex-v flex-1 flex-cc" wx:for='{{tagBar}}' wx:key='index' @tap='tagChange' id='{{index}}'>
        <view class="content flex-v flex-cc">
          <view class="title {{currentIndex==index ? 'select-bar':''}}">{{item.title}}</view>
          <view class="border-line" wx:if='{{currentIndex==index}}'></view>
        </view>
      </view>
    </view>

    <view class="banner">
      <view class="search-box flex-h" @tap='toSearch'>
       <image class="icon"></image>
       <view class="search-content">搜索商品</view>
       <!-- 大家都在搜：水光针 -->
      </view>
      <!--轮播图-->
      <swiper class='swiper' autoplay interval='5000' circular>
        <swiper-item wx:for='{{banner}}' wx:key='index' class='swiper-item'>
          <image src='{{item.imgUri}}' @tap='bannerTap' id='{{item.target}}'></image>
        </swiper-item>
      </swiper>
    </view>

    <!-- 优惠券 -->
    <view class="discount" wx:if='{{false}}'></view>

    <!-- tag -->
    <view class="tag-bar flex-h flex-wrap">
      <view class="item flex-v flex-cc flex-1" wx:for='{{tabBar}}' wx:key='index' @tap='tagTap' id='{{index}}'>
        <image class="icon" src='{{item.icon}}'></image>
        <view class="tag-name">{{item.tagName}}</view>
      </view>
    </view>

    <block wx:for='{{floorList}}' wx:key='index'>
      <view class="activity flex-v flex-cc" wx:if='{{item.type==0}}'>
        <image class="act-title flex-cc flex-h" src='{{item.icon}}' @tap='tagTap' id='{{index}}' data-type='banner'>
          <!-- <view class="act-name flex-cc flex-h">限时购</view> -->
        </image>

        <view class="goods-item flex-h" wx:for='{{item.products}}' wx:key='index' wx:for-item='pItem'  @tap='toGoodsDetail' id='{{pItem.productId}}'>
          <image class="goods-img" src="{{pItem.imgUri}}"></image>
          <view class="goods-right flex-1 flex-v flex-bc">
            <view class="goods-top">
              <view class="goods-name">{{pItem.productName}}</view>
              <view class="goods-desc">{{pItem.shortDescription}}</view>
            </view>
            <view class="goods-price flex-h">
              <view class="real-price">￥{{pItem.SELL_PRICE/100 || 0}}</view>
              <view class="fail-price">￥{{pItem.underlinePrice/100 || 0}}</view>
            </view>
          </view>
        </view>

        <!-- <scroll-view class="act-goods" scroll-x=‘{{true}}’>
          <view class="act-item" wx:for='{{[0,0,0,0,0]}}'>
            <view class="act-item-container flex-h">
              <image class="goods-img"></image>
              <view class="goods-right flex-1 flex-v flex-bc">
                <view class="goods-top">
                  <view class="goods-desc">两盒大套装</view>
                  <view class="goods-name">私人定制美眼打造 超靓玻尿酸 极致美白享受  不一样的体验</view>
                </view>
                <view class="goods-price flex-h">
                  <view class="real-price">￥999</view>
                  <view class="fail-price">￥999</view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view> -->
      </view>

      <block wx:if='{{item.type==1}}' >
        <image src='{{item.icon}}' class="adv-title" style='margin-top:30rpx;' @tap='tagTap' id='{{index}}' data-type='banner'></image>
        <view class="adv-list flex-h flex-wrap">
          <view class="adv-item-container" wx:for='{{item.products}}' wx:key='index' wx:for-item='pItem'>
            <view class="adv-item flex-v" @tap='toGoodsDetail' id='{{pItem.productId}}'>
              <image class="adv-img" src='{{pItem.imgUri}}'></image>
              <view class="adv-name">{{pItem.productName}}</view>
              <view class="adv-price">¥ {{pItem.SELL_PRICE/100||0}}</view>
            </view>
          </view>
        </view>
      </block>

      <view class="activity flex-v flex-cc" wx:if='{{item.type==2}}' style='margin-bottom:50rpx'>
        <image class="act-title-1 flex-cc flex-h" src='{{item.icon}}' @tap='tagTap' id='{{index}}' data-type='banner'>
          <!-- <view class="act-name flex-cc flex-h">限时购</view> -->
        </image>

        <view class="goods-item flex-h" wx:for='{{item.products}}' wx:key='index' wx:for-item='pItem'  @tap='toGroupGoodsDetail' id='{{pItem.groupId}}' data-opid='{{pItem.groupOpenRecordId}}'>
          <image class="goods-img" src='{{pItem.imgUri}}'></image>
          <view class="goods-right flex-1 flex-v flex-bc">
            <view class="goods-top">
              <view class="goods-name">{{pItem.productName}}</view>
              <view class="goods-desc">{{pItem.shortDescription}}</view>
            </view>
            <view class="goods-price flex-h">
              <view class="real-price">￥{{pItem.SELL_PRICE/100||0}}</view>
              <view class="fail-price">￥{{pItem.underlinePrice/100||0}}</view>
            </view>
          </view>
        </view>
      </view>

    </block>
    <authBox></authBox>
  </view>
</template>

<script>
import wepy from 'wepy'
import toast from '../components/toast'
import authBox from '../components/auth-box'
import { indexData, indexBannerAndTag } from '../service/api.js'
var event = require('../utils/event.js')
export default class Home extends wepy.page {
  config = {
    navigationBarTitleText: '大叔家Ocandy'
  }

  components = {
    custoast: toast,
    authBox: authBox
  }

  data = {
    banner: [],
    tabBar: [],
    // recommendList: [],
    floorList: [],
    currentIndex: 0
  }

  methods = {
    bannerTap(e) {
      if (e.currentTarget.id) {
        wx.navigateTo({ url: e.currentTarget.id })
      }
    },
    toSearch() {
      wx.navigateTo({
        url: '/subPackage/search-page?autoFocus=true'
      })
    },
    tagChange(e) {
      this.currentIndex = e.currentTarget.id
      this.$apply()
    },
    toGoodsDetail(e) {
      wx.navigateTo({
        url: '/pages/product-detail-page?productId=' + e.currentTarget.id
      })
    },
    toGroupGoodsDetail(e) {
      wx.navigateTo({
        url:
          '/pages/group/group-product-page?groupId=' +
          e.currentTarget.id +
          '&openRecordId=' +
          e.currentTarget.dataset.opid
      })
    },
    tagTap(e) {
      let index = e.currentTarget.id
      if (e.currentTarget.dataset.type == 'banner') {
        wx.navigateTo({
          url: this.floorList[index].redictTarget
            ? this.floorList[index].redictTarget
            : `/subPackage/search-page?tagId=${this.floorList[index].id}`
        })
      } else {
        wx.navigateTo({
          url: this.tabBar[index].redictTarget
            ? this.tabBar[index].redictTarget
            : `/subPackage/search-page?tagId=${this.tabBar[index].id}`
        })
      }
      console.log('index==:>', this.tabBar[index].redictTarget)
      // this.tabBar[index].redictTarget &&
      // wx.navigateTo({
      //   url: this.tabBar[index].redictTarget
      //     ? this.tabBar[index].redictTarget
      //     : `/subPackage/search-page?tagId=${this.tabBar[index].id}`
      // })
    }
  }

  onShareAppMessage(res) {
    return {
      title: '大叔家Ocandy'
    }
  }

  toast(obj) {
    return new Promise((resolve, reject) => {
      this.$invoke('custoast', 'showToast', obj).then(res => {
        resolve(res)
      })
    })
  }

  // _indexBannerAndTag() {
  //   indexBannerAndTag({}).then(res => {
  //     console.log('banner+tag==>', res)
  //     this.banner = res.banner
  //     this.tagBar = res.tagBar
  //     this.$apply()
  //   })
  // }

  _indexData() {
    indexData({}).then(res => {
      // this.recommendList = res.recommendList
      this.floorList = res.tagList
      this.banner = res.banners
      this.tabBar = res.tabBar
      this.$apply()
      console.log('indexData==>', res)
})
  }

  events = {}

  // onReady() {}

  async onLoad(opt) {
    // wx.hideShareMenu()
    wx.showLoading({
      title: '加载中...'
    })
    let isLogin = await this.$parent.userLogin()
    console.log('进入首页，当前登录状态===>', isLogin)
    wx.hideLoading()
    // 调起授权框 登陆&授权成功走请求
    if (!isLogin) {
      console.log('---------', !isLogin)
      this.$invoke('authBox', 'showAuthBox')
      event.on('getAuthSuc', this, () => this.onLoad())
    } else {
      // this._indexBannerAndTag()
      this._indexData()
    }
  }
}
</script>

home-page

<style lang="less">
  .box {
    position: relative;
    .images-box {
      width: 100%;
      height: 400rpx;
    }
    .sign {
      position: absolute;
      bottom: 32rpx;
      right: 30rpx;
      width: 100rpx;
      height: 46rpx;
      font-size: 26rpx;
      text-align: center;
      background: rgba(0, 0, 0, .4);
      border-radius: 20rpx;
      line-height: 46rpx;
      color: #ffffff;
    }
  }
  .group-person {
    align-items: center;
    background-color: #F5F5F5;
    height: 100rpx;
    text-align: center;
    .list-person {
      color: #666666;
      line-height: 100rpx;
      font-size: small;
      margin-left: 30rpx;
    }
    .avatar-list {
      margin-left: 280rpx;
      .avatar {
        width: 60rpx;
        height: 60rpx;
        line-height: 100rpx;
        border-radius: 50%;
        margin-right: -15rpx;
      }
    }
  }
  .clear{
    clear: both;
    overflow: hidden;
  }
  navigator{
    display:inline;
  }
  .list{
    margin-top: 20rpx;
    .list_item{
      margin-top:10px;
      margin-bottom: 30rpx;
      padding: 30rpx;
      height:100px;
      /*border-bottom:1px solid #E8E8E8;*/
      .img{
        float:left;
        image{
          width: 210rpx;
          height: 210rpx;
          border-radius: 10rpx;
        }
      }
    }
  }
  .list .list_item .info{
    width: 69%;
    float: right;
    height: 110px;
    position: relative;
  }
  .list .list_item .info .title{
    color:#333;
    margin-left: 22rpx;
    font-size: 30rpx;
  }
  .list .list_item .info .flex-h .group-price{
    color: #8d8d8d;
    margin-left: 22rpx;
    margin-top: 30rpx;
    margin-bottom: 58rpx;
    font-size: 26rpx;
  }
  .list .list_item .info .flex-h .price{
    color: #ff5050;
    margin-top: 30rpx;
    margin-bottom: 58rpx;
    font-size: 22rpx;
  }
  .list .list_item .info .flex-h .rel-price{
    color: #afafaf;
    margin-left: 24rpx;
    margin-bottom: 58rpx;
    margin-top: 30rpx;
    font-size: 20rpx;
  }
  .list .list_item .info .flex-h .num{
    position: absolute;
    right: 20rpx;
    bottom: 15rpx;
    color: #afafaf;
    font-size: 22rpx;
  }
  .line {
    background-color: #f5f5f5;
    height: 10rpx;
  }

  .scroll-view-x {
    height: 400rpx;
    white-space:nowrap;
    display:flex;
    padding-top:10rpx;
  }
  .scroll-view-x .pic {
    width: 260rpx;
    height: 260rpx;
    margin-left: 15rpx;
  }
  .slider {
    height: 452rpx;
    overflow-x: auto;
    white-space: nowrap;
  }
  .slider::-webkit-scrollbar {
    display: none; /*不展示横向滚动条*/
  }
  .slide_son{
    margin-left: 30rpx;
    width: 260rpx;
    display: inline-block;
  }
  .slide_son image{
    width: 260rpx;
    height: 260rpx;
    display: block;
    border-radius: 10rpx;
  }
  .slider_title {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space:normal;
    word-break: break-all;
    word-wrap : break-word;
    width: 208rpx;
    margin-top: 30rpx;
    margin-bottom: 30rpx;
    font-size: 26rpx;
  }
  .slide_price{
    color: #FF4D4D;
    font-size: 28rpx;
    line-height: 28rpx;
    height: 28rpx;
  }
  .slider_sale{
    color: #666666;
    font-size: 26rpx;
    line-height: 28rpx;
    height: 28rpx;
    margin-right: 10rpx;
  }
  .slider-v {
    float: left;
    margin-left: 0%;
    width: 50%;
    margin-top: 35rpx;
    /*margin-bottom: 44rpx;*/
    height: 512rpx;
    .slide_son{
      display: inline-block;
      width: 335rpx;
      margin: 20rpx;
    }
  }
  .slider-v .slide_son image{
    width: 320rpx;
    height: 320rpx;
    display: block;
  }
  .slider-v .slide_son .slider_title {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space:normal;
    word-break: break-all;
    word-wrap : break-word;
    width: 328rpx;
    margin-top: 30rpx;
    margin-bottom: 30rpx;
    font-size: 26rpx;
  }
  .slider-v .slide_son .slider_sale {
    color: #afafaf;
    font-size: 13px;
    line-height: 30px;
    height: 30px;
    margin-right: 5px;
    margin-left: 10rpx;
  }
  .slider-v .slide_son .slider_btn {
    color: white;
    text-align: center;
    width: 190rpx;
    height: 40rpx;
    margin-top: 20rpx;
    line-height: 40rpx;
    border-radius: 5rpx;
    background-color: #FF4D4D;
    display: block;
    font-size: 24rpx;
  }
  .list .list_item .info .flex-h .group-persons {
    position:absolute;
    left:20rpx;
    bottom:10rpx;
    color:white;
    text-align:center;
    width:110rpx;
    height:36rpx;
    line-height:40rpx;
    border-top-left-radius: 10rpx;
    border-bottom-left-radius: 10rpx;
    background: linear-gradient(to left,#FFB2B2,#FF4D4D);
    display:block;
    font-size:24rpx;
    border: 1rpx solid #ff4d4d;
    border-right:none;
  }
  .list .list_item .info .flex-h .group-persons-price {
    position: absolute;
    right: 180rpx;
    bottom: 10rpx;
    color: #ff4d4d;
    border: 1rpx solid #ff4d4d;
    border-left:none;
    text-align: center;
    width: 165rpx;
    height: 36rpx;
    line-height: 40rpx;
    border-top-right-radius: 10rpx;
    border-bottom-right-radius: 10rpx;
    display: block;
    font-size: 24rpx;
  }
  .newgroup {
    margin-bottom: 40rpx;
    width: 100%;
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    position: relative;
    margin-top: 100rpx;
  }
  .newproduct {
    height: 100rpx;
    margin-top: 70rpx;
    margin-bottom: 40rpx;
    width: 100%;
    line-height: 70rpx;
    text-align: center;
    position: relative;
    margin-top: 100rpx;
  }
  .hotproduct {
    margin-top: 100rpx;
    margin-bottom: 40rpx;
    width: 100%;
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    position: relative;
  }
  .newgroup .right image {
    position: absolute;
    height: 16rpx;
    width: 294rpx;
    float: left;
    left: 0rpx;
  }
  .newproduct .right image {
    position: absolute;
    height: 16rpx;
    width: 294rpx;
    float: left;
    left: 0rpx;
  }
  .hotproduct .right image {
    position: absolute;
    height: 16rpx;
    width: 294rpx;
    float: left;
    left: 0rpx;
  }
  .newgroup .title{
    width: 120rpx;
    height: 50rpx;
    position: absolute;
    top: -30rpx;
    margin-left: 317rpx;
    font-size: 30rpx;
    color: #333333;
  }
  .newproduct .title{
    width: 120rpx;
    height: 50rpx;
    text-align: center;
    position: absolute;
    top: -30rpx;
    margin-left: 317rpx;
    font-size: 30rpx;
    color: #333333;
  }
  .hotproduct .title{
    width: 120rpx;
    height: 50rpx;
    position: absolute;
    top: -30rpx;
    margin-left: 317rpx;
    font-size: 30rpx;
    color: #333333;
  }
  .newgroup .left image {
    position: absolute;
    height: 16rpx;
    width: 294rpx;
    float: right;
    right: 0rpx;
  }
  .newproduct .left image {
    position: absolute;
    height: 16rpx;
    width: 294rpx;
    float: right;
    right: 0rpx;
  }
  .hotproduct .left image {
    position: absolute;
    height: 16rpx;
    width: 294rpx;
    float: right;
    right: 0rpx;
  }
  .newgroup .us-title {
    font-size: 18rpx;
    margin-top: 20rpx;
    color: #333333;
  }
  .newproduct .us-title {
    font-size: 18rpx;
    margin-top: 20rpx;
    color: #333333;
  }
  .hotproduct .us-title {
    font-size: 18rpx;
    margin-top: 20rpx;
    color: #333333;
  }

  .wrap{
    margin-top: 30rpx;
    height: 300rpx;
    display: flex;
    justify-content: space-around;
    image {
      width: 150rpx;
      height: 230rpx;
    }
  }
</style>

<template>
  <view class="box">
    <swiper class="images-box" autoplay interval='5000' circular duration='500' @change="swiperChange">
      <block wx:for="{{banners}}" wx:key='index'>
        <swiper-item>
          <image src="{{item.imgUri}}"  style="width:100%; height:400rpx;" @tap='bannerTap' id='{{item.target}}'/>
        </swiper-item>
      </block>
    </swiper>
    <view class="sign" >{{currentIndex}}/{{banners.length}}</view>
  </view>

  <block wx:if="{{canGetCoupon}}">
    <view class="wrap">
      <image src="../pages/images/10@2x.png"></image>
      <image src="../pages/images/20@2x.png"></image>
      <image src="../pages/images/50@2x.png"></image>
      <image src="../pages/images/all@2x.png" @tap="getCoupon"></image>
    </view>
  </block>

  <block wx:for='{{floorList}}' wx:key='list'>
    <view wx:if='{{item.type==0}}'>
      <!--新品拼团 GROUP PURCHASE-->
      <view class="newgroup flex-v">
        <view class="flex-h">
          <view class="left"><image src="data:images/right.png"></image></view>
          <sapn class="title">{{item.tagName}}</sapn>
          <view class="right"><image src="data:images/left.png"></image></view>
        </view>
        <view class="us-title">{{item.remarks}}</view>
      </view>
      <!--新品拼团列表-->
      <view>
        <image src="{{item.icon}}" style="width: 100%; height: 360rpx;" @tap='toGroupListPage' id='{{item.redictTarget}}' data-type='banner'/>
      </view>
      <view class="group-person flex-h">
        <view class="list-person">
          已有900人拼团
        </view>
        <view class="avatar-list">
          <image class="avatar" src="data:images/1.png"></image>
          <image class="avatar" src="data:images/2.png"></image>
          <image class="avatar" src="data:images/3.png"></image>
          <image class="avatar" src="data:images/4.png"></image>
          <image class="avatar" src="data:images/5.png"></image>
        </view>
      </view>

      <!--团购详情页-->
      <view class="list">
        <block wx:for='{{item.products}}' wx:key='list'  wx:for-index='index' >
          <view class="list_item" @tap='toGroupGoodsDetail' id='{{item.groupId}}' data-opid='{{item.groupOpenRecordId}}'>
            <navigator url="details?id={{item.goods_id}}">
              <view class="img">
                <image src="{{item.imgUri}}"  mode="scaleToFill"/>
              </view>
              <view class="info">
                <view class="title">{{item.productName}}</view>
                <view class="flex-h" style="height: 26rpx; line-height: 26rpx;">
                  <view class="group-price">拼团价:</view>
                  <view class="price">￥{{item.SELL_PRICE/100}}</view>
                  <view class="rel-price">￥<span style="text-decoration: line-through;">{{item.underlinePrice/100}}</span></view>
                </view>
                <view class="flex-h" style="margin-top: 20rpx;">
                  <view class="group-persons">{{item.num}}人团</view>
                  <view class="group-persons-price" >拼团省{{item.currentPrice/100}}元</view>
                  <view class="num">已拼{{item.productNum}}件</view>
                </view>
              </view>
            </navigator>
            <view class="clear"></view>
          </view>
        </block>
        <view wx:if="{{index !== item.products.length-1}}" class="line"></view>
      </view>
    </view>

    <block wx:if='{{item.type==1}}'>
      <!--新品预售 NEW COMMODITY-->
      <view class="newproduct flex-v">
        <view class="flex-h">
          <view class="left"><image src="data:images/right.png"></image></view>
          <sapn class="title">{{item.tagName}}</sapn>
          <view class="right"><image src="data:images/left.png"></image></view>
        </view>
        <view class="us-title">{{item.remarks}}</view>
      </view>
      <!--新品预售列表-->
      <view style="margin-bottom: 30rpx; margin-top: -20rpx; height: 400rpx; background-color: white;">
        <image style="width: 100%; height: 360rpx;" src='{{item.icon}}' @tap='tagnewTap' id='{{item.redictTarget}}' data-type='banner'/>
      </view>
      <view class="slider" wx:for="{{item.products}}" wx:key='index' wx:for-item='item' @tap='toappointGoodsDetail' id='{{item.appointId}}'>
        <view class="slide_son">
          <image src="{{item.imgUri}}"/>
          <view class="slider_title">{{item.productName}}</view>
          <view class="flex-h" style="height: 26rpx; line-height: 26rpx;">
            <view class="slider_sale">定金:</view>
            <view class="slide_price">{{item.appointPrice/100}}抵{{item.currentPrice/100}}</view>
            <view class="slider_sale">元</view>
          </view>
        </view>
      </view>
    </block>

    <view wx:if='{{item.type==3}}'>
      <!--爆品推荐-->
      <view class="hotproduct flex-v">
        <view class="flex-h">
          <view class="left"><image src="data:images/right.png"></image></view>
          <sapn class="title">{{item.tagName}}</sapn>
          <view class="right"><image src="data:images/left.png"></image></view>
        </view>
        <view class="us-title">{{item.remarks}}</view>
      </view>
      <!--爆品推荐列表-->
      <view @tap='tagTap' id='{{item.redictTarget}}' data-type='banner'>
        <image src="{{item.icon}}" style="width: 100%; height: 360rpx;"/>
      </view>
      <view wx:for="{{item.products}}" @tap='toGoodsDetail' id='{{item.productId}}'>
        <view class="slider-v" style="margin-bottom: 100rpx;">
          <view class="slide_son" style="float: left; width: 40%; margin-left: 5%;">
            <image src="{{item.imgUri}}"/>
            <view class="slider_title">{{item.productName}}</view>
            <span class="slide_price">￥{{item.currentPrice/100}}</span>
            <span class="slider_sale">￥<span style="text-decoration: line-through;">{{item.underlinePrice/100}}</span></span>
            <!--<span class="slider_btn">领券享7折优惠</span>-->
          </view>
        </view>
      </view>
    </view>
  </block>
  <foot></foot>
  <authBox></authBox>
</template>
<script>
  import wepy from 'wepy'
  import toast from '../components/toast'
  import authBox from '../components/auth-box'
  import Foot from '../components/foot'
  import { indexData, getCoupon } from '../service/api.js'
  var event = require('../utils/event.js')
  export default class Home extends wepy.page {navigationBarTitleText
    config = {
      navigationBarTitleText: '大叔家Ocandy'
    }

    components = {
      custoast: toast,
      foot: Foot,
      authBox: authBox
    }

    data = {
      tabBar: [],
      // recommendList: [],
      floorList: [],
      banners: [],
      currentIndex: 1,
      canGetCoupon: false
    }

    methods = {
      getCoupon: function (e) {
        this._getCoupon()
      },
      swiperChange: function (e) {
        this.currentIndex = e.detail.current + 1
      },
      bannerTap(e) {
        if (e.currentTarget.id) {
          wx.navigateTo({
            url: e.currentTarget.id
          })
        }
      },
      toSearch() {
        wx.navigateTo({
          url: '/subPackage/search-page?autoFocus=true'
        })
      },
      tagChange(e) {
        this.currentIndex = e.currentTarget.id
        this.$apply()
      },
      // 爆品详情
      toGoodsDetail(e) {
        wx.navigateTo({
          url: '/pages/product-detail-page?productId=' + e.currentTarget.id
        })
      },
      // 新品拼团列表
      toGroupListPage(e) {
        if (e.currentTarget.id) {
          wx.navigateTo({
            url: e.currentTarget.id
          })
        }
      },
      // 新品拼团产品详情
      toGroupGoodsDetail(e) {
        wx.navigateTo({
          url:
            '/pages/group/group-product-page?groupId=' +
            e.currentTarget.id +
            '&openRecordId=' +
            e.currentTarget.dataset.opid
        })
      },
      // 预售列表
      tagnewTap(e) {
        if (e.currentTarget.id) {
          wx.navigateTo({
            url: e.currentTarget.id
          })
        }
      },
      // 新品预售详情
      toappointGoodsDetail(e) {
        wx.navigateTo({
          url: '/pages/appoint/appoint-product-page?appointId=' + e.currentTarget.id
        })
      },
      // 爆品列表
      tagTap(e) {
        if (e.currentTarget.id) {
          wx.navigateTo({
            url: e.currentTarget.id
          })
        }
      }
    }

    onShareAppMessage(res) {
      return {
        title: '大叔家Ocandy'
      }
    }

    toast(obj) {
      return new Promise((resolve, reject) => {
        this.$invoke('custoast', 'showToast', obj).then(res => {
          resolve(res)
        })
      })
    }

    // _indexBannerAndTag() {
    //   indexBannerAndTag({}).then(res => {
    //     console.log('banner+tag==>', res)
    //     this.banner = res.banner
    //     this.tagBar = res.tagBar
    //     this.$apply()
    //   })
    // }

    _indexData() {
      indexData({}).then(res => {
        this.floorList = res.tagList
        this.banners = res.banners
        this.$apply()
        console.log('indexData-page-new==>', res)
      })
    }

    _getCoupon() {
      getCoupon({}).then(res => {
        console.log('indexData-getCoupon==>', res)
      })
      wx.showToast({
        title: '获取成功',
        icon: 'success',
        duration: 1000,
        mask: true
      })
    }
    events = {}

    // onReady() {}

    async onLoad(opt) {
      // wx.hideShareMenu()
      wx.showLoading({
        title: '加载中...'
      })
      let isLogin = await this.$parent.userLogin()
      console.log('进入首页，当前登录状态===>', isLogin)
      wx.hideLoading()
      // 调起授权框 登陆&授权成功走请求
      if (!isLogin) {
        console.log('---------', !isLogin)
        this.$invoke('authBox', 'showAuthBox')
        event.on('getAuthSuc', this, () => this.onLoad())
      } else {
        // this._indexBannerAndTag()
        this._indexData()
        this.canGetCoupon = this.$parent.globalData.canGetCoupon
        console.log('进入首页，当前登录状态===>获取优惠券===>', this.canGetCoupon)
        this.$apply()
      }
    }
  }
</script>

---

请点赞！因为你的鼓励是我写作的最大动力！

吹逼交流群：711613774