store-shop-uniapp/pages/tabbar/index/index.vue

<template>
  <div class="hom-page" :style="{'padding-top': height + 'px'}">
    <global-loading />
    <u-sticky offset-top="0" h5-nav-height="0" bg-color="#fff">
      <view class="head">
        <!-- #ifdef MP-WEIXIN -->
        <view
            class="header weiXinBox"
            :style="{'padding-top': topHeight + 'px'}"
        >
          <view
              class="topBox"
              :style="{'height': height + 'px'}"
          >
            <image
                class="logo"
                src="https://ceres.zkthink.com/static/assets/img/logo.png"
                mode="widthFix"
            ></image>
          </view>
        </view>
        <view
            class="wxBtnBg"
            :style="{'padding-top': (topHeight + height + 10) + 'px'}"
        >
          <view
              class="weiXinBoxBtn"
              @click="searchPro"
          >
            <image
                class="search-icon"
                src="https://ceres.zkthink.com/static/images/searchImg.png"
                mode="widthFix"
            >
            </image>
            <text>请输入您想要的宝贝</text>
          </view>
        </view>
        <!-- #endif -->
        <!-- #ifdef H5 || APP-PLUS -->
        <view class="header">
          <view class="topBox topWap">
            <image
                class="logo"
                src="https://ceres.zkthink.com/static/assets/img/logo.png"
                mode="widthFix"
            ></image>
            <view
                class="search-btn"
                @click="searchPro"
            >
              <image
                  class="search-icon"
                  src="https://ceres.zkthink.com/static/img/search.png"
                  mode="widthFix"
              >
              </image>
            </view>
          </view>
        </view>
        <!-- #endif -->
        <category-list @tabChange="tabChange"></category-list>
      </view>
    </u-sticky>
    <canvas-page ref="canvasPage"
                 :componentsData="componentsData"
                 v-if="activeTab==0"
                 :terminal="terminal"
                 :typeId="1"
    ></canvas-page>
    <category-show ref="categoryShow"
                   v-else
                   :categoryid="categoryid"></category-show>
    <ad-window ref="adWindow"
               :triggerCondition="1"></ad-window>
    <view class="reachBottom"
          v-if="topLeft > 400">
      <image class="reach-icon"
             src="https://ceres.zkthink.com/static/img/reachBottom.png"
             mode="widthFix">
      </image>
      <text class="reach-text">这里到底了哦~~</text>
    </view>
    <tui-modal :show="privacyShow"
               :custom="true"
               :fadein="true">
      <view class="Put-box1">
        <view class="text-align fs34 fs-bold">
          协议与隐私政策
        </view>
        <p class="mar-top-20">欢迎来到cereshop！我们根据最新的法律、法规、监管政策要求，更新了cereshop隐私政策。</p>
        <view class="flex-display flex-sp-between">
          <view class="btn submit"
                @click="privacyShow = false">
            同意
          </view>
        </view>
      </view>
    </tui-modal>
  </div>
</template>

<script>
import tuiModal from "@/components/modal/modal";
import AdWindow from "@/components/adWindow";
const NET = require('@/utils/request')
const API = require('../../../config/api')
import api from '@/components/canvasShow/config/api'
import CategoryList from "@/components/basics/categoryList.vue"
import CategoryShow from "@/components/basics/categoryShow.vue"
import comHeader from '@/components/canvasShow/basics/header/app'
import canvasPage from '@/components/canvasShow/canvasShowPage.vue'

export default {
  components: {
    AdWindow,
    CategoryList,
    CategoryShow,
    canvasPage,
    tuiModal
  },
  data() {
    return {
      terminal: API.terminal,
      activeTab: 0,
      categoryid: 0,
      topHeight: 0,
      height: 0,
      topLeft: 0,
      privacyShow: false,
      componentsData: [],
      typeId: 1
    }
  },
  onReachBottom() {
    this.HandleLoadMoreProduct()
  },
  onLoad() {
    if (!uni.getStorageSync('storage_key')) {
      // #ifdef APP-PLUS
      this.privacyShow = true
      // #endif
    }
    this.$nextTick(() => {
      this.canvasGet()
      this.$refs.adWindow.getAd()
    })
  },
  onShow() {
    // #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
    let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
    this.topHeight = menuButtonInfo.top
    this.height = menuButtonInfo.height
    // #endif

  },
  onPageScroll(e) {
    this.topLeft = e.scrollTop
  },
  methods: {
    // 读取画布
    canvasGet() {
      var _this = this
      var apiUrl = api.getCanvas + '?terminal=' + this.terminal + '&type=' + this.typeId
      if (this.shopId) {
        apiUrl += '&shopId=' + this.shopId
      }
      let params = {
        url: apiUrl,
        method: 'GET'
      }
      // uni.showLoading({
      //   mask: true,
      //   title: '加载中...',
      // })
      NET.request(apiUrl, {}, 'GET').then(res => {
        if (JSON.stringify(res.data) !== '{}') {
          var componentsData = JSON.parse(res.data.json)
          this.componentsData = componentsData
        }
        uni.hideLoading()
      }).catch(res => {
        uni.hideLoading()
      })
    },
    // 分享到朋友圈
    onShareTimeline: function() {
      return {
        title: this.miniHomeRemark,
        imageUrl: this.miniHomeImg,
        path: 'pages/tabbar/index/index',
      }
    },
    // 分享好友
    onShareAppMessage: function() {
      return {
        title: this.miniHomeRemark,
        imageUrl: this.miniHomeImg,
        path: 'pages/tabbar/index/index',
      }
    },
    /**
     * 请求非首页的子组件的下一页
     * */
    HandleLoadMoreProduct(){
      if (this.activeTab != 0) {
        let pitchOnPage = this.$refs.categoryShow
        if (pitchOnPage.total !== 0 && pitchOnPage.productList.length < pitchOnPage.total) {
          pitchOnPage.page++
          pitchOnPage.getData()
        }
      }
    },
    /**
     * 清空非首页的子组件商品数据
     * 回滚请求参数到起始页
     * */
    HandleCleanActiveTabProduct(){
      if(this.$refs.categoryShow){
        let pitchOnPage = this.$refs.categoryShow
        pitchOnPage.total = 0
        pitchOnPage.page=1
        pitchOnPage.productList=[{},{},{},{},{},{},{},{}]
      }
    },
    tabChange(index, id) {
      this.HandleCleanActiveTabProduct()
      this.activeTab = index
      this.categoryid = id
    },
    // 查询产品
    searchPro(key, type) {
      uni.navigateTo({
        url: `/pages_category_page1/search/index/index`
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.hom-page{
  margin-top: calc(20rpx + var(--status-bar-height));
}
.head{
  background: #fff;

}
.header {
  background: #fff;
  .toLive {
    height: 40px;
    color: #FFF;
    background-color: #333;
  }

  .topBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .logo {
    width: 280rpx;
    height: 42rpx;
    margin-top: -40rpx;
    // margin-left: 30rpx;
  }

  .search-btn {
    height: 66rpx;
    background: rgba(255, 255, 255, 1);
    border-radius: 33rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 30rpx;

    .search-icon {
      width: 60rpx;
      height: 60rpx;
      // margin-left: 33rpx;
    }

    .search-word {
      font-size: 26rpx;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      margin-left: 10rpx;
    }
  }

  .tabs-nav-warp {
    margin-top: 20rpx;
    padding: 0 30rpx;
  }

  .tabs-nav {
    .ul {
      display: flex;

      .li {
        flex: 1 0 auto;
        margin-left: 36rpx;
        font-size: 30rpx;
        color: #999999;
        position: relative;
        padding-bottom: 18rpx;

        &:first-child {
          margin-left: 0;
        }

        &.on {
          &:after {
            content: '';
            width: 100%;
            height: 4rpx;
            background: #C5AA7B;
            position: absolute;
            left: 0;
            bottom: 0;
          }

          font-weight: bold;
        }
      }
    }
  }
}

.weiXinBox {
  width: 100%;
  position: fixed;
  background: #FFFFFF;
  z-index: 99;
}

.wxBtnBg {
  padding: 0 20rpx;

  .weiXinBoxBtn {
    display: flex;
    align-items: center;
    padding: 10rpx 0 10rpx 15rpx;
    width: 100%;
    background: #F3F4F5;
    opacity: 1;

    .search-icon {
      width: 50rpx;
      height: 50rpx;
      margin-right: 20rpx;
    }

    text {
      color: #999999;
    }
  }
}

.terminal1 {
  .header {
    .topBox {
      // justify-content: left;

      .search-btn {
        .search-icon {
          margin-left: 0rpx;
        }
      }
    }
  }
}

.topTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100rpx;
  width: 100%;

  .topText {
    text-align: center;
    color: #000000;
    font-size: 38rpx;
    font-weight: bold;
  }
}

.topWap {
  padding-top: 60rpx;

  .logo {
    margin-top: 0 !important;
  }
}

.terminal2 {
}

.terminal3 {
}

// 触底样式
.reachBottom {
  margin-top: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  .reach-icon {
    width: 150rpx;
    height: 150rpx;
  }

  .reach-text {
    margin: 20rpx 0;
    color: #CCCCCC;
  }
}

.Put-box1 {
  .btn {
    text-align: center;
    margin-top: 40rpx;
    border: 1px solid #333333;
    height: 80upx;
    line-height: 80upx;
    width: 100%;
    color: #333333;
  }

  .submit {
    background-color: #333333;
    color: #FFEBC4;
  }
}
</style>