liedou_uniapp/pages/home/home.vue

<template>
  <view class="page-wrap" :style="{'background': `${newNavbarBackground.background}`, 'background-size': `${newNavbarBackground.backgroundSize}`}">
	<!-- 剪切板弹框 -->
	<clipboard v-if="is_clipbpard" @close="clipbpardClose"></clipboard>
	<u-navbar class="navbar-wrap" title=" " :background="newNavbarBackground" :title-size="36" :is-back="false" :title-bold="false" >
		<!-- S 搜索 -->
		<view class="search-wrap" @click="onClickSearch">
		  <image class="icon" src="https://ld.726p.com/ldyx_static/imgs/icon-search.png" />
		  <text class="pl-text">输入商品名或粘贴标题</text>
		  <view class="search-btn">搜索</view>
		</view>
		<!-- E 搜索 -->
	</u-navbar>

	<view class="scroll-view-wrap u-skeleton">
    <!-- S "精选"分类显示模块（渲染条件 当前tab为精选） -->
    <block>
      <!-- S 轮播图 -->
      <view v-if="swiperList && swiperList.length" class="swiper-wrap">
        <u-swiper
          class="u-skeleton-fillet"
          :border-radius="16"
          :list="swiperList"
          name="photo"
          mode="round"
          bg-color="transparent"
          @click="onClickSwiper"
          @change="onChangeSwiper"
        />
      </view>
      <!-- E 轮播图 -->
      <!-- S 专题入口 -->
      <view class="menu-wrap">
        <view class="menu-item" v-for="item in menu" :key="item.id" @click="onClickMenu(item)">
          <image class="item-icon u-skeleton-fillet" :src="item.img" />
          <text class="item-label u-skeleton-fillet">{{ item.name }}</text>
        </view>
      </view>
      <!-- E 专题入口 -->

      <!-- 平台tab -->
      <view class="platform-wrap" id="platform-wrap" :style="{'top': `${statusBarHeight + navigationBarHeight - 7}px`}">
        <view class="platform-tab" v-for="item in platfromList" :key="item.id" @click="onClickPlatfrom(item.id)">
          <text class="platfrom-tab-title">{{item.name}}</text>
          <view :class="['platfrom-tab-info', platfrom == item.id ? 'platfrom-tab-active' : '']"><text class="note">{{item.note}}</text></view>
        </view>
      </view>

        <!-- 淘宝 天猫 -->
        <block v-if="platfrom == 1">
          <!-- S 精选列表 -->
          <block v-if="goodsList && goodsList.length">
            <block v-for="(block, idx) in goodsList" :key="idx">
              <!-- S 商品列表 -->
              <view v-if="block.type == 1 && block.goods" class="goods-list-wrap">
              <horizontalGood :goodInfo="block.goods" path="HomeGoodsType2"></horizontalGood>
              </view>
              <!-- E 商品列表 -->
              <!-- S 商品列表 - 专题组 -->
              <view v-else-if="block.type == 2" class="goods-group-wrap" :style="{
              'background-image': `url(${block.adv_background_img})`,
              }">
                <scroll-view class="scroll-view-group" scroll-x="true">
                  <!-- 商品 -->
                  <view v-for="goodsItem in block.goodsList" :key="goodsItem.goods_id" class="goods-item-vertical" @click="onClickGoodsItem(goodsItem)">
                  <view v-if="user_level > 1 && goodsItem.commission_price > 0" class="commission-wrap">
                    <text>赚￥{{ goodsItem.commission_price }}</text>
                  </view>
                  <image class="goods-item-img" :src="goodsItem.img" />
                  <view class="title">{{ goodsItem.title }}</view>
                  <view class="bm-wrap">
                    <text class="price">￥{{ goodsItem.discount_price }}</text>
                    <view v-if="goodsItem.coupon_price > 0" class="coupon-wrap">
                    <text class="label">券</text>
                    <text class="value">{{ goodsItem.coupon_price }}元</text>
                    </view>
                  </view>
                  </view>
                  <!-- 更多 -->
                  <view class="goods-item-vertical more-wrap" @click="onClickMore({ id: block.id, name: block.name })">
                  <view class="more-btn">
                    <image src="https://ld.726p.com/ldyx_static/imgs/home-more.png" />
                    <text>更多</text>
                  </view>
                  </view>
                </scroll-view>
              </view>
              <!-- E 商品列表 - 专题组 -->
            </block>
          </block>
          <!-- E 精选列表 -->
          <!-- S 商品骨架 -->
          <view v-else class="goodsListEmpty goods-item-wrap" v-for="item in 3" :key="item">
            <view class="lt-wrap">
              <image class="goods-item-img u-skeleton-fillet" img-mode="widthFix" border-radius="10" />
            </view>
            <view class="rt-wrap">
              <view class="title u-skeleton-fillet">
                <image class="shop-icon" />
                <text class="">&nbsp;</text>
              </view>
              <view class="shop-wrap flex-center-between u-skeleton-fillet">
                <view class="flex-center">
                  <image class="shop-icon" />
                  <view class="shop-name" >&nbsp;</view>
                </view>
                <view class="salesVolume"></view>
              </view>
              <view class="price-wrap u-skeleton-fillet">
                <text class="price">&nbsp;</text>
                <text class="start-price"></text>
              </view>
              <view class="btm-wrap u-skeleton-fillet">
                <view class="coupon-wrap">
                  <text class="label">&nbsp;</text>
                  <text class="value"></text>
                </view>
                <view class="coupon-wrap commission-wrap">
                  <text class="label">&nbsp;</text>
                  <text class="value"></text>
                </view>
              </view>
            </view>
          </view>
          <!-- E 商品骨架 -->
        </block>

        <!-- 京东 -->
        <view class="bg-f5 u-skeleton-fillet">
          <view v-if="platfrom == 2" class="goods-list-double-wrap">
            <block v-for="(item, idx) in jd.goodsList" >
              <verticalGood class="verticalGoodItem" :key="item.goods.goods_id" :goodsItem="item.goods" v-if="item.goods"></verticalGood>
            </block>
          </view>
        </view>

        <!-- 拼多多 -->
        <view class="bg-f5">
          <view v-if="platfrom == 4" class="goods-list-double-wrap">
            <block v-for="(item, idx) in pdd.goodsList" >
              <verticalGood class="verticalGoodItem" :key="item.goods.goods_id" :goodsItem="item.goods" v-if="item.goods"></verticalGood>
            </block>
          </view>
        </view>

        <!-- 抖音 -->
        <view class="bg-f5">
          <view v-if="platfrom == 3" class="goods-list-double-wrap">
            <block v-for="(item, idx) in dy.goodsList" >
              <verticalGood class="verticalGoodItem" :key="item.goods_id" :goodsItem="item" v-if="item"></verticalGood>
            </block>
          </view>
        </view>

        <!-- 抖音 -->
        <view class="bg-f5">
          <view v-if="platfrom == 5" class="goods-list-double-wrap">
            <block v-for="(item, idx) in wph.goodsList" >
              <verticalGood class="verticalGoodItem" :key="item.goods_id" :goodsItem="item" v-if="item" />
            </block>
          </view>
        </view>
    </block>
    <!-- E "精选"分类显示模块 -->
	</view>
  <!-- E 滚动区 -->
	<!-- 回到顶部 -->
	<u-back-top :scroll-top="scroll.scrollTop"></u-back-top>

    <!-- #ifdef H5 -->
	  <icp></icp>
	  <!-- #endif -->

    <!-- S 首屏广告 -->
    <firstAdv v-if="isShowFirstAdv" @confirm="onConfirmFirstAdv" @cancel="onCancelFirstAdv" />
    <!-- E 首屏广告 -->

    <!-- S 联系客服 -->
    <wxServiceDialog v-if="isShowWxServiceDialog" :keyword="wxServiceKeyword" @confirm="onConfirmWxServiceDialog" @cancel="onCancelWxServiceDialog" />
    <!-- E 联系客服 -->

    <!--骨架组件-->
		<u-skeleton :loading="swiperListLoading || menuLoading" :animation="true" bgColor="#FFF" />

  </view>
</template>

<script>
  const app = getApp()
  import horizontalGood from '@/components/horizontalGood.vue'
  import verticalGood from '@/components/verticalGood.vue'
  import jdEliteId from '@/config/jdEliteId.js'
  import firstAdv from '@/components/firstAdv.vue'
  import wxServiceDialog from '@/components/wxServiceDialog.vue'
  export default {
	  components:{
		  horizontalGood,
		  verticalGood,
      firstAdv,
      wxServiceDialog,
	  },
    data() {
      return {
        newNavbarBackground:{
          background: `url(https://ld.726p.com/tbk/upload/c579f015a49a3f9e066f0ab00ab56f7.png) #ffffff no-repeat`,
          backgroundSize: '100% 370rpx',
        },
        statusBarHeight: app.globalData.statusBarHeight,
		    navigationBarHeight: app.globalData.navigationBarHeight,
        currentTabInfo: { // 当前选中的tab信息
          back_img: 'http://imgs.726p.com/tbk/upload/groupImg2019-01-23/182712/kx-5c484180f2cb9.png',
		      curIdx: 13, // 当前选择的“分类标签”下标
        },
        swiperList: [], // 轮播图列表(image指定图片路径，也可以通过name属性自定义)
        swiperListLoading: true,
        currentSwiperInfo: { // 当前选中的swiper信息
          photo_bg: '',
          curIdx: 0, // 当前选择的“轮播图”下标
        },
        menu: [
          {},{},{},{},{},
          {},{},{},{},{},
        ], // 精选-专题入口
        menuLoading: true,
        goodsList: [], // 商品列表
        filter: {
		      loading: false,
          hasNext: true,
          page: 1,
          category_id: 13, // 分类id 默认13 精选
          sort: 1, // 排序值：1综合、2销量(高到低)、3价格(低到高)、4价格(高到低)
          is_has_coupon: 0, // 是否只取有券商品：0否；1是，默认是0
        },
        user_level: uni.getStorageSync('userInfo') ? uni.getStorageSync('userInfo').user_level : '', // 当前用户等级
		    triggered: false,// 下拉刷新
        platfromList:[
          { id: 1, name: '淘宝', note: '今日推荐' },
          // { id: 2, name: '京东', note: '品质优选' },
          { id: 4, name: '拼多多', note: '热销爆品' },
          // { id: 3, name: '抖音', note: '爆款热播' },
          // { id: 5, name: '唯品会', note: '品牌特卖' },
        ],
        platfrom: 1,
        jd: {
          elite_index: 0,//每一页一个精选，上拉换下一页精选
          elite_name: '',
          elite_id: '',
          loading: false,
          hasNext: true,
          page: 1,
          page_size: 40,
          goodsList: [],
        },
        pdd: {
          hasNext: true,
          page: 1,
          page_size: 40,
          goodsList: [],
        },
        scroll: {
          scrollTop: 0,
          platfromSticky: 0,
          platfromStickyTop: app.globalData.statusBarHeight + app.globalData.navigationBarHeight - 7,
        },

        isShowFirstAdv: false, // 是否显示首屏广告
        isShowWxServiceDialog: false, // 是否显示微信客服
        wxServiceKeyword: '', // 微信客服关键字
        dy:{
          page: 1,
          page_size: 20,
          goodsList: [],
          loading: false,
          hasNext: true,
        },
        wph:{
          page: 1,
          page_size: 20,
          goodsList: [],
          loading: false,
          hasNext: true,
        },
      };
    },
    watch: {
      user_level() { // 监听用户等级变化 => 更新页面列表数据
      }
    },
    async onLoad() {
	  // 获取渠道版本信息 - 接口header中使用
	  await app.channelGetVersion()
	  this.jd.elite_id = jdEliteId[this.jd.elite_index].id;
	  this.jd.elite_name = jdEliteId[this.jd.elite_index].name;
	  // // 改变note京东文案
	  // this.platfromList.forEach((item)=>{
		 //  item.id == 2 ? item.note = this.jd.elite_name : '品质优选'
	  // })
	  this.init()

    // 判断是否显示首屏广告
    this.handleGetFirstAdv()
    },
    onShow() {
      // 获取用户等级
      this.user_level = app.handleGetUserLevel()
    },
    methods: {
	  async init (){
		  // 获取"精选-轮播图”数据
		  this.handleGetSwiperList()
		  // 获取"精选-专题入口"数据
		  this.handleGetMenuList()
		  // 淘宝
		  if (this.platfrom == 1) {
			  this.filter.page = 1;
			  this.goodsList = [];
			  await this.handleGetGoodsList()
		  }
		  // 京东
		  if(this.platfrom == 2) {
			  this.jd.page = 1;
			  await this.getJdGoodsList()
		  }
      // 拼多多
      if(this.platfrom == 4) {
        this.pdd.page = 1;
        await this.getPddGoodsList()
      }
      // 抖音
      if(this.platfrom == 3) {
        this.dy.page = 1;
        await this.getDyGoodsList()
      }
      // 唯品会
      if(this.platfrom == 5) {
        this.wph.page = 1;
        await this.getWphGoodsList()
      }
		  uni.stopPullDownRefresh()
	  },
      // 获取 精选 商品列表
      async handleGetGoodsList() {
        this.filter.category_id = this.currentTabInfo.id
        const { hasNext, page, category_id } = this.filter
        if (!hasNext) return false;
		    if (this.filter.loading) return false;
        try {
		      this.filter.loading = true;
          const url = this.$api.home_goodsAndStockList
          const params = { page, category_id }
          const { data: res = {} } = await this.$postJSON(url, params)
		      this.filter.loading = false;
          if (res && res.errno == 0 && Array.isArray(res.rst)) {
            if (!res.rst.length) { // 更新"是否有下一页"状态
              this.filter.hasNext = false
            } else {
              this.filter.hasNext = true
              this.filter.page++
              this.goodsList = [...this.goodsList, ...res.rst]
            }
          } else {
            uni.showToast({ title: res.err || '操作失败', icon: 'none' })
          }
        } catch (error) {
        } finally {
        }
      },
      // 精选-专题入口列表
      async handleGetMenuList() {
        try {
          const url = this.$api.home_groupRoundNew
          const params = {}
          const { data: res = {} } = await this.$postJSON(url, params)
          if (res && res.errno == 0 && Array.isArray(res.rst.data)) {
            // 过滤掉“需要跳转http链接”的入口
            this.menu = res.rst.data.filter(item => item.show_type == 2)
          } else {
            uni.showToast({ title: res.err || '操作失败', icon: 'none' })
            this.menu = []
          }
        } catch (error) {
          this.menu = []
        } finally {
          this.menuLoading = false
        }
      },
      // 获取轮播图数据
      async handleGetSwiperList() {
        try {
          const url = this.$api.home_bannerlist
          const params = {}
          const { data: res = {} } = await this.$get(url, params)
          if (res && res.errno == 0 && Array.isArray(res.rst.data)) {
            this.swiperList = [...res.rst.data]
            this.currentSwiperInfo = res.rst.data[0] ? {...res.rst.data[0]} : {}
          } else {
            uni.showToast({ title: res.err || '操作失败', icon: 'none' })
            this.swiperList = []
          }
        } catch (error) {
          this.swiperList = []
        } finally {
          this.swiperListLoading = false
        }
      },
      // 监听切换轮播图
      onChangeSwiper(idx) {
        this.currentSwiperInfo = {...this.swiperList[idx], curIdx: idx}
      },
      // 监听点击轮播图
      onClickSwiper(idx) {
        this.currentSwiperInfo = {...this.swiperList[idx], curIdx: idx}
        if (this.currentSwiperInfo.word) { // 当前轮播图有客服关键字口令 => 显示微信客服引导
          this.handleShowWxService(this.currentSwiperInfo.word)
        }
      },
      // 监听点击"精选-专题"入口
      onClickMenu(item = {}) {
        const { id, name, show_type, url } = item
        if (show_type == 2) {
          uni.navigateTo({
            url: `/pages/subPackages/home/subjectList?id=${id}&title=${encodeURIComponent(name)}&url=${encodeURIComponent(url)}&path=AdvFourListGoodsAction`
          })
        } else if (show_type == 6) {
			uni.navigateTo({
			  url: `/pages/subPackages/home/jdSubjectList?id=${id}&title=${encodeURIComponent(name)}&url=${encodeURIComponent(url)}&path=AdvFourListGoodsAction`
			})
		} else {
          uni.showToast({ title: '敬请期待', icon: 'none' })
        }
      },
      onClickGoodsItem(goodsItem) {
		  try{ app.categoryNew_countBuy({type:0,path:'HomeGoodsType2'}) }catch(e){} ; // 数据上报
        const { img = '', goods_id = '', coupon_price = '', discount_price = '', price = '', is_coupon = '', commission_rate = '', is_high_commission = '', coupon_end_time = '', coupon_start_time = '' } = goodsItem

        uni.navigateTo({
          url: `/pages/subPackages/home/goodsDetail?img=${encodeURIComponent(img)}&goods_id=${encodeURIComponent(goods_id)}&coupon_price=${encodeURIComponent(coupon_price)}&discount_price=${encodeURIComponent(discount_price)}&price=${encodeURIComponent(price)}&is_coupon=${encodeURIComponent(is_coupon)}&commission_rate=${encodeURIComponent(commission_rate)}&is_high_commission=${encodeURIComponent(is_high_commission)}&coupon_end_time=${encodeURIComponent(coupon_end_time)}&coupon_start_time=${encodeURIComponent(coupon_start_time)}`
        })
      },
      // 监听点击“搜索”
      onClickSearch() {
        uni.navigateTo({
          url: '/pages/subPackages/home/search',
        })
      },
      // 监听点击“横向列表-更多”
      onClickMore({ id, name }) {
        if (id) {
          uni.navigateTo({
            url: `/pages/subPackages/home/subjectList?id=${id}&title=${encodeURIComponent(name)}&path=ListAction`
          })
        } else {
          uni.showToast({ title: '敬请期待', icon: 'none' })
        }
      },
	  // 点击平台tab
	  onClickPlatfrom(id){
      if (this.platfrom == id) return;
		this.platfrom = id;
		if (this.platfrom == 2) { // 京东
			if (this.jd.goodsList.length <= 0 || !Array.isArray(this.jd.goodsList)) {
				this.jd.page = 1;
				this.getJdGoodsList()
			}
		}else if(this.platfrom == 4){ // 拼多多
      if (this.pdd.goodsList.length <= 0 || !Array.isArray(this.pdd.goodsList)) {
        this.pdd.page = 1;
        this.getPddGoodsList()
      }
		}else if(this.platfrom == 3){ // 抖音
      if (this.dy.goodsList.length <= 0 || !Array.isArray(this.dy.goodsList)) {
        this.dy.page = 1;
        this.getDyGoodsList()
      }
    }else if (this.platfrom == 5) { // 唯品会
      if (this.wph.goodsList.length <= 0 || !Array.isArray(this.wph.goodsList)) {
        this.wph.page = 1;
        this.getWphGoodsList()
      }
    }

		// 平台tab已经吸顶，切换平台滚动到固定位置
		this.isplatfromSticky().then((flag) => {
			if (flag) {
				uni.pageScrollTo({
					scrollTop: this.scroll.platfromSticky,
					duration: 100
				});
			}
		})
	  },
      //拼多多列表
      async getPddGoodsList(){
        if (!this.pdd.hasNext) return false;
        uni.showLoading({ title: '加载中...', mask: true })
        const url = this.$api_pdd.goodsList_add_recommend
        const params = {
          page: this.pdd.page,
          page_size: this.pdd.page_size
        }
        const { data: res = {} } = await this.$get(url, params)
        uni.hideLoading()
        if (res && res.errno == 0 && Array.isArray(res.rst.data)) {
          if (!res.rst.data.length) { // 更新"是否有下一页"状态
            this.pdd.hasNext = false
          } else {
            this.pdd.hasNext = true
            this.pdd.page++
            this.pdd.goodsList = this.pdd.goodsList.concat(res.rst.data)
          }
        } else {
          uni.showToast({ title: res.err || '操作失败', icon: 'none' })
            }
      },
      // 抖音商品列表
      async getDyGoodsList(){
        if (!this.dy.hasNext) return false;
        if (this.dy.loading) return false;
        try {
          uni.showLoading({ title: '加载中...', mask: true })
          this.dy.loading = true;
          const url = this.$api_dy.goodsList
          const params = {
            page: this.dy.page,
            page_size: this.dy.page_size
          }
          const { data: res = {} } = await this.$postJSON(url,params)
          this.dy.loading = false;
          if (res && res.errno == 0 && Array.isArray(res.rst.data)) {
            if (!res.rst.data.length) {
              this.dy.hasNext = false
            } else {
              this.dy.pages = res.rst.pageInfo.pages;
              this.dy.hasNext = true
              this.dy.page++
              this.dy.goodsList = [...this.dy.goodsList, ...res.rst.data]
            }
          } else {
            uni.showToast({ title: res.err || '操作失败', icon: 'none' })
          }
        } catch (error) {
        } finally {
          uni.hideLoading()
        }
      },
      // 唯品会商品列表
      async getWphGoodsList(){
        if (!this.wph.hasNext) return false;
        if (this.wph.loading) return false;
        try {
          uni.showLoading({ title: '加载中...', mask: true })
          this.wph.loading = true;
          const url = this.$api_wph.goodsList
          const params = {
            page: this.wph.page,
            page_size: this.wph.page_size
          }
          const { data: res = {} } = await this.$postJSON(url,params)
          this.wph.loading = false;
          if (res && res.errno == 0 && Array.isArray(res.rst.data)) {
            if (!res.rst.data.length) {
              this.wph.hasNext = false
            } else {
              this.wph.pages = res.rst.pageInfo.pages;
              this.wph.hasNext = true
              this.wph.page++
              const crtData = res.rst.data.filter(d => d.type == 1).map(d => ({...d.goods})) // 格式化后端反的数据格式
              this.wph.goodsList = [...this.wph.goodsList, ...crtData]
            }
          } else {
            uni.showToast({ title: res.err || '操作失败', icon: 'none' })
          }
        } catch (error) {
          console.log('error => ', error)
        } finally {
          uni.hideLoading()
        }
      },
	  // 京东指定频道的精选商品
	  async getJdGoodsList(){
		if (!this.jd.hasNext) return false;
		if (this.jd.loading) return false;
		try {
		  uni.showLoading({ title: '加载中...', mask: true })
		  this.jd.loading = true;
		  const url = this.$api_jd.jd_goodsListByEliteId
		  const params = {
			  elite_id: this.jd.elite_id,
			  page: this.jd.page,
			  page_size: this.jd.page_size
		  }
		  const { data: res = {} } = await this.$postJSON(url, params)
		  this.jd.loading = false;
		  if (res && res.errno == 0 && Array.isArray(res.rst.data)) {
			  this.jd.pages = res.rst.pageInfo.pages;
			  if (this.jd.elite_index == 0) {
				  this.jd.goodsList = res.rst.data;
			  } else {
				  this.jd.goodsList = this.jd.goodsList.concat(res.rst.data)
			  }
			  this.jd.elite_index++ ;

			  this.jd.elite_id = jdEliteId[this.jd.elite_index].id;
			  this.jd.elite_name = jdEliteId[this.jd.elite_index].name;
			  // // 改变note京东文案
			  // this.platfromList.forEach((item)=>{
			  // 		  item.id == 2 ? item.note = this.jd.elite_name : '品质优选'
			  // })

			  if (jdEliteId.length <= this.jd.elite_index) {
				  this.jd.hasNext = false;
			  } else {
				  this.jd.hasNext = true;
			  }
		  } else {
		    uni.showToast({ title: res.err || '操作失败', icon: 'none' })
		  }
		} catch (error) {
		} finally {
		  uni.hideLoading()
		}
	  },
	  // 判断平台tab是否吸顶
	  isplatfromSticky(){
		  let _this = this;
		  return new Promise((resolve) => {
			  let query = uni.createSelectorQuery().in(this);
			  query.select('#platform-wrap').boundingClientRect(data => {
			  	if (data.top <= _this.scroll.platfromStickyTop){
			  		resolve(true)
			  	} else {
					resolve(false)
			  	}
			  }).exec();
		  })
	  },

    // 监听确认活动攻略(微信客服)
    onConfirmWxServiceDialog() {
      // 关闭弹框
      this.onCancelWxServiceDialog()
      // 其他业务逻辑(暂无)...
    },
    // 监听关闭活动攻略(微信客服)
    onCancelWxServiceDialog() {
      this.isShowWxServiceDialog = false
    },

    // 判断是否显示首屏广告
    handleGetFirstAdv() {
      const isFirst = app.handleGetUserIsFirst()
      if (!isFirst) return false
      this.isShowFirstAdv = true
    },
    // 监听关闭首屏广告
    onCancelFirstAdv() {
      app.handleSetUserIsFirst(false)
      this.isShowFirstAdv = false
    },
    // 监听确认首屏广告
    onConfirmFirstAdv({ advKeyword }) {
      // 关闭广告
      this.onCancelFirstAdv()
      // 显示微信客服引导
      this.handleShowWxService(advKeyword)
    },
    // 显示微信客服引导
    handleShowWxService(keyword) {
      this.wxServiceKeyword = keyword
      this.isShowWxServiceDialog = true
    },
    },
	onPageScroll(e) {
		this.scroll.scrollTop = e.scrollTop;
		let _this = this;
		// 平台tab吸顶后 滚动的距离
		this.isplatfromSticky().then((flag) => {
			if (flag && _this.scroll.platfromSticky == 0) { // 吸顶
				_this.scroll.platfromSticky = e.scrollTop;
			}
		})
	},
	//上拉加载
	onReachBottom() {
		if (this.platfrom == 1){ // 淘宝
			this.handleGetGoodsList()
		}
		if (this.platfrom == 2) { // 京东
			this.getJdGoodsList()
		}
    if (this.platfrom == 4) { // 拼多多
      this.getPddGoodsList()
    }
    if (this.platfrom == 3) { // 抖音
      this.getDyGoodsList()
    }
    if (this.platfrom == 5) { // 唯品会
      this.getWphGoodsList()
    }
	},
	//下拉刷新
	onPullDownRefresh(){
		this.init()
	},
  }
</script>

<style lang="scss" scoped>
.page-wrap {
  position: relative;
  // height: 100vh;
  // overflow: hidden;
  background-attachment: fixed;
  .navbar-wrap {
    .search-wrap {
      display: flex;
      align-items: center;
      background-color: #fff;
      padding: 10rpx 10rpx 10rpx 20rpx;
      border-radius: 40rpx;
      width: 480rpx;
      margin-left: 20rpx;
      box-sizing: border-box;
      z-index: 9;
      .icon {
        margin-right: 20rpx;
        width: 27rpx;
        height: 27rpx;
      }
      .pl-text {
        font-size: 28rpx;
        color: #8A8A8A;
      flex:1;
      }
    .search-btn{
      width: 100rpx;
      height: 50rpx;
      background: linear-gradient(90deg, #FF9048 0%, #FB3F3C 100%);
      border-radius: 40rpx;
      color: #FFFFFF;
      font-size: 24rpx;
      text-align: center;
      line-height: 50rpx;
    }
    }
  }

  .tabs-wrap {
    /deep/ .u-tab-bar {
      bottom: 6rpx;
    }
  }
  .scroll-view-wrap {
    .swiper-wrap {
		margin: 20rpx 10rpx 0;
      padding: 0 12rpx;
    }
    .menu-wrap {
      margin-top: 12rpx;
      background-color: #fff;
      padding: 30rpx 0 10rpx;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      .menu-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 30rpx;
        margin-right: 20rpx;
        width: calc((100% - 80rpx) / 5); // 80rpx 是前4个元素的右间距之和（20 * 4）
        &:nth-of-type(5n + 0) {
          margin-right: 0;
        }
        .item-icon {
          width: 70rpx;
          height: 70rpx;
        }
        .item-label {
          margin-top: 10rpx;
          font-size: 26rpx;
          color: #666;
        }
      }
    }
    // .banner-wrap {
    //   display: flex;
    //   justify-content: center;
    //   background-color: #F5F5F5;
    //   .banner-img {
    //     width: 748rpx;
    //     height: 80rpx;
    //     vertical-align: middle; // 解决图片下边框缝隙问题
    //   }
    // }
    .goods-list-wrap {
      background-color: #F5F5F5;
      padding-bottom: 10rpx;

    }
    .goods-group-wrap {
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 71rpx 28rpx 10rpx;
      margin-bottom: 10rpx;
      width: 750rpx;
      height: 448rpx;
      .scroll-view-group {
        margin-top: 6rpx;
        white-space: nowrap;
        .goods-item-vertical {
          position: relative;
          padding-bottom: 10rpx;
          display: inline-block;
          margin-right: 20rpx;
          width: 260rpx;
          height: 350rpx;
          border-radius: 10rpx 10rpx 0 0;
          overflow: hidden;
          background-color: #fff;
          &.more-wrap {
            position: relative;
            .more-btn {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              display: flex;
              flex-direction: column;
              align-items: center;
              image {
                width: 150rpx;
                height: 150rpx;
              }
              text {
                margin-top: 30rpx;
                font-size: 28rpx;
                color: #333;
              }
            }

          }
          .commission-wrap {
            position: absolute;
            right: 0;
            top: 200rpx;
            padding: 2rpx 20rpx;
            background-image: url("https://ld.726p.com/ldyx_static/imgs/bg-commission.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            color: #fff;
            font-size: 20rpx;
            z-index: 4;
          }
          .goods-item-img {
            width: 260rpx;
            height: 260rpx;
            vertical-align: middle; // 解决图片下边框缝隙问题
          }
          .title {
            padding: 0 4rpx;
            margin-top: 10rpx;
            width: 100%;
            font-size: 26rpx;
            color: #333;
            overflow: hidden;
            word-wrap: normal;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .bm-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 4rpx;
            .price {
              font-size: 24rpx;
              color: #F51400;
            }
            .coupon-wrap {
              display: flex;
              align-items: center;
              width: 150rpx;
              height: 30rpx;
              background-image: url("https://ld.726p.com/ldyx_static/imgs/bg-quan-small.png");
              background-repeat: no-repeat;
              background-size: 100% 100%;
              color: #F51400;
              font-size: 20rpx;
              .label {
                width: 50rpx;
                text-align: center;
              }
              .value {
                flex: 1;
                text-align: center;
              }
            }
          }
        }
      }
    }
    .category-wrap {
      // margin: 4rpx 14rpx 0;
	  margin: 10rpx auto 22rpx;
      padding: 30rpx 0 10rpx;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      background-color: #fff;
      border-radius: 10rpx;
      .category-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 30rpx;
        margin-right: 20rpx;
        width: calc((100% - 60rpx) / 4); // 60rpx 是前3个元素的右间距之和（20 * 3）
        &:nth-of-type(4n + 0) {
          margin-right: 0;
        }
        .item-icon {
          width: 70rpx;
          height: 70rpx;
        }
        .item-label {
          margin-top: 10rpx;
          font-size: 26rpx;
          color: #999;
        }
      }
    }
    .sort-wrap {
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin: 10rpx auto 0;
      padding: 20rpx 10rpx;
      border-radius: 10rpx;
      font-size: 30rpx;
      color: #333;
      background-color: #fff;
      &.fixed {
        position: fixed;
        left: 0;
        right: 0;
        z-index: 9999;
      }
      .sort-item {
        display: flex;
        align-items: center;
        &.price-wrap {
          position: relative;
          .btn {
            position: absolute;
            font-size: 16rpx;
            color: #ccc;
            &.up {
              top: 4rpx;
              right: -24rpx;
            }
            &.down {
              bottom: 4rpx;
              right: -24rpx;
            }
            &.highlight {
              color: #FF4040;
            }
          }
        }
        .sort-img {
          margin-left: 10rpx;
          width: 28rpx;
          height: 28rpx;
        }
      }
      .on {
        color: #FF4040;
		font-weight: bold;
      }
    }
    .goods-list-double-wrap {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
	  margin:auto;
      .verticalGoodItem{
		  margin-bottom: 22rpx;
	  }
    }
  }
}
.goods-list-double-wrap,.sort-wrap,.category-wrap{
	width: 700rpx;
}
.bg-f5{
	background-color: #F5F5F5;
}
.platform-wrap{
	background-color: #F5F5F5;
	display: flex;
  justify-content: space-around;
	padding: 28rpx 20rpx 16rpx;
	position: sticky;
	z-index: 9;
	.platform-tab{
		text-align: center;
    width: 35%;

		.platfrom-tab-title{
			color: #1A1A1A;
			font-size: 36rpx;
			line-height: 50rpx;
			font-weight: bold;
		}
		.platfrom-tab-info{
			color: #999999;
			font-size: 24rpx;
			line-height: 34rpx;
			margin-top: 6rpx;
			padding: 0 10rpx;
		}
		.platfrom-tab-active{
			background: #FFD9D9;
			border-radius: 10rpx;
			position: relative;
			&::after{
				content: "";
				position: absolute;
				bottom:-26rpx;
				left:0;
				right:0;
				margin:auto;
				width:0;
				height:0;
				border:16rpx solid transparent;
				border-top: 16rpx solid #FFD9D9;
			}
			.note{
				background-image: linear-gradient(90deg, #FF9048 0%, #FB3F3C 100%);
				background-clip: text;
				color: transparent;
			}

		}
	}
}

.goodsListEmpty.goods-item-wrap {
  padding: 28rpx;
  display: flex;
  align-items: center;
  background-color: #fff;
  .lt-wrap {
    width: 220rpx;
    height: 220rpx;
border-radius: 10rpx;
overflow: hidden;
    .goods-item-img {
      width: 100%;
      height: 100%;
      vertical-align: middle; // 解决图片下边框缝隙问题
    }
  }
  .rt-wrap {
    margin-left: 20rpx;
flex: 1;
    .title {
      font-size: 30rpx;
      color: #1A1A1A;
      line-height: 42rpx;
      // 超出两行省略号
      word-break: break-all;
      overflow: hidden;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
font-weight: bold;
.shop-icon{
  width: 30rpx;
  height: 30rpx;
  border-radius: 6rpx;
  display: inline-block;
  margin-right: 6rpx;
  margin-top: -7rpx;
  vertical-align: middle;//解决图片下边框间隙问题
}
    }
    .shop-wrap {
      margin-top: 8rpx;
      display: flex;
      align-items: center;
      .shop-icon {
        width: 26rpx;
        height: 26rpx;
  vertical-align: middle;//解决图片下边框间隙问题
      }
      .shop-name {
        margin-left: 6rpx;
        font-size: 24rpx;
  line-height: 34rpx;
        color: #AAAAAA;
  flex: 1;
  max-width: 400rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
      }
    }
    .price-wrap {
      margin-top: 10rpx;
      display: flex;
      align-items: center;
      .price {
        font-size: 36rpx;
  line-height: 50rpx;
        color: #FF4040;
  font-weight: bold;
      }
      .start-price {
        margin-left: 10rpx;
        font-size: 24rpx;
        color: #999999;
  line-height: 34rpx;
  text-decoration: line-through;
      }

    }
    .btm-wrap {
      display: flex;
      align-items: center;
      margin-top: 10rpx;
      .coupon-wrap {
        display: flex;
        align-items: center;
        width: 144rpx;
        height: 36rpx;
        // background-image: url("https://ld.726p.com/ldyx_static/imgs/bg-quan-small.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        color: #FF4040;
        font-size: 25rpx;
  line-height: 36rpx;
        .label {
          width: 46rpx;
          text-align: center;
        }
        .value {
          flex: 1;
          text-align: center;
        }
      }
.commission-wrap {
  // background-image: url("https://ld.726p.com/ldyx_static/imgs/fan.png");
  color: #AE4300;
    margin-left: 12rpx;
}
    }

  }
}
</style>