zhaojs
2023-07-13 70f5b82bc3fceafac2faf470280876b0eca6fac8
uniapp/components/indexPage.vue
@@ -24,29 +24,13 @@
                           <view class="swiper-item defIcon" @click="goUrl(items)">
                              <image :src="items.image" mode="aspectFit"></image>
                           </view>
                        </swiper-item>
                     </swiper>
                  </view>
                  <view class="centerSwiper-container colCenCen borderBox" v-if="singleLineList.length>0">
                     <swiper class="swiper-box" :autoplay="true" :interval="5000" :duration="300" circular>
                        <swiper-item v-for="(items,index) in singleLineList" :key='index'>
                           <view class="swiper-item defIcon" @click="goUrl(items)">
                              <image :src="items.image" mode="aspectFit"></image>
                           </view>
                        </swiper-item>
                     </swiper>
                  </view>
                  <view class="cardsList-container rowCenBet borderBox" v-if="doubleLineList.length>0">
                     <block v-for="(items,index) in doubleLineList" :key='index'>
                        <view class="card-items defIcon" @click="goUrl(items)">
                           <image :src="items.image" mode="aspectFill" lazy-load="true"></image>
                        </view>
                     </block>
                  </view>
                  <!-- 金刚区 -->
                  <view class="navslider-box" v-if="navbarShowList.length > 0">
                     <swiper class="swiper-type swiper-nav"
@@ -63,11 +47,58 @@
                        </swiper-item>
                     </swiper>
                  </view>
                  <!--单列图片-->
               <!--    <view class="centerSwiper-container colCenCen borderBox" v-if="singleLineList.length>0">
                     <swiper class="swiper-box" :autoplay="true" :interval="5000" :duration="300" circular>
                        <swiper-item v-for="(items,index) in singleLineList" :key='index'>
                           <view class="swiper-item defIcon" @click="goUrl(items)">
                              <image :src="items.image" mode="aspectFit"></image>
                           </view>
                        </swiper-item>
                     </swiper>
                  </view> -->
                  <!--快捷入口图标-->
                  <view class="c-loading-img rowCenCen">
                     <view class="imgbox defIcon" v-for="(eitem,index) in fastenter" :key="index" @click="goUrl(eitem)">
                        <image :src="eitem.image"></image>
                     </view>
                  </view>
                  <!--左轮播,右两行-->
                  <view class="centerflex f_contant">
                     <view class="f_centerSwiper-container swiper-box swiper-item f_left">
                        <swiper class="swiper-box" :autoplay="true" :interval="3000" :duration="300" :indicator-active-color="'#fff'" :indicator-dots="true" circular>
                           <swiper-item v-for="(items,index) in popBannerSList" :key='index'>
                              <view class="swiper-item defIcon" @click="goUrl(items)">
                                 <image :src="items.image" mode="aspectFit"></image>
                              </view>
                           </swiper-item>
                        </swiper>
                     </view>
                     <view class="f_right">
                        <view class="f_imgcon" v-if='enterTop.length>0' >
                           <image :src="enterTop[0].image"  @click="goUrl(enterTop[0])"></image>
                        </view>
                        <view class="f_imgcon" v-if='enterDown.length>0'>
                           <image :src="enterDown[0].image"  @click="goUrl(enterDown[0])"></image>
                        </view>
                     </view>
                  </view>
                  <!--双列图片-->
                  <view class="cardsList-container rowCenBet borderBox" v-if="doubleLineList.length>0">
                     <block v-for="(items,index) in doubleLineList" :key='index'>
                        <view class="card-items defIcon" @click="goUrl(items)">
                           <image :src="items.image" mode="aspectFill" lazy-load="true"></image>
                        </view>
                     </block>
                  </view>
               </view>
            </view>
            <view class="pagebottomBody-container colCen borderBox">
               <view class="bottomSwiper-container colCenCen borderBox" v-if="bottomBannerList.length>0">
                  <swiper class="swiper-box" :autoplay="true" :interval="3000" :duration="300" circular>
                     <swiper-item v-for="(items,index) in bottomBannerList" :key='index'>
@@ -77,8 +108,8 @@
                     </swiper-item>
                  </swiper>
               </view>
               <view class="van-row">
               <!--全网热销-->
               <!-- <view class="van-row">
                  <view class="van-col van-col--12" style="padding-right: 10rpx;">
                     <view class="home-row" @click="gorxb()">
                        <view class="title"><text class="name">全网热销榜</text>
@@ -126,9 +157,9 @@
                        </view>
                     </view>
                  </view>
               </view>
               </view> -->
               <!-- 大家都在买 -->
               <view class="everysBuying-container colCen" v-if="zdmList.length>0">
               <!-- <view class="everysBuying-container colCen" v-if="zdmList.length>0">
                  <view class="box-bar-content rowCen">
                     <view class="title-text">
                        每日必买
@@ -183,11 +214,9 @@
                     </scroll-view>
                  </view>
                  <!-- <view class="progress">
                  后面处理
               </view> -->
               </view>
               <view class="goodsFalling-container colCen" v-if="fallingList.length>0">
               <!-- <view class="goodsFalling-container colCen" v-if="fallingList.length>0">
                  <view class="box-bar-content rowCen">
                     <view class="title-text">
                        好货直降
@@ -253,10 +282,10 @@
                        </view>
                     </scroll-view>
                  </view>
               </view>
               </view> -->
               <!-- 福利抢购 -->
               <view class="welfare-container colCen">
               <!-- <view class="welfare-container colCen">
                  <view class="titlebar-container rowCenBet">
                     <view class="left-content rowCen">
                        <view class="titletext">
@@ -330,7 +359,7 @@
                        </view>
                     </block>
                  </view>
               </view>
               </view> -->
               <!-- 实时疯抢榜 -->
@@ -363,6 +392,7 @@
                  v-if="bottomGoodsList.length>0">
                  <block v-for="(items,index) in bottomGoodsList" :key="index">
                     <view class="goods-items" @click="goDetails(items)">
                         <!-- <colGoodsImg v-if="index==0&&itembannerList&&itembannerList.length>0" :popBannerSList="itembannerList"></colGoodsImg> -->
                        <colGoods :items="items"></colGoods>
                     </view>
                  </block>
@@ -382,6 +412,7 @@
   import slideTop from './slideTop.vue'
   import colGoods from './colGoods.vue'
   import empowerModel from './empowerModel.vue'
      import colGoodsImg from '@/components/colGoodsImg.vue'
   export default {
      props: {
         recomendType: {
@@ -403,10 +434,12 @@
      components: {
         slideTop,
         colGoods,
         empowerModel
         empowerModel,
         colGoodsImg
      },
      data() {
         return {
            popBannerSList:[],
            fallingList: [],
            pageHeight: '',
            headerColor: '',
@@ -417,21 +450,22 @@
            navbarShowList: [],
            navbarList: [],
            sliderH: '',
            scrollTop: 0,
            scrollindex: 0,
            zdmList: [],
            phbList: [],
            dyList: [],
            rqList: [],
            typedataList: [
               {
                  mainTitle: '京东',
                  subTitle: '官方保障',
                  type: 2
               },
               {
                  mainTitle: '抖音',
                  subTitle: '好物抢购',
                  type: 6
               },
               {
                  mainTitle: '拼多多',
@@ -460,9 +494,19 @@
            triggeredstate: true,
            swpidx: 0,
            canrefresh: true,
            fastenter:[],
            itembannerList:[],
            enterTop:[],
            enterDown:[],
            tbbanner:[],
            jdbanner:[],
            dybanner:[],
            pddbanner:[],
            wphbanner:[],
         }
      },
      watch: {
         recomendType(nval, oval){
            if(nval != oval)this.changeRecommend()
         },
@@ -494,6 +538,7 @@
         this.getbottomGoodsList(this.bottomType);
         this.getGOODSfalling();
         this.getRQList();
         //this.getPageImg();
      },
      mounted() {
         this.$emit('scrolltoTop')
@@ -505,8 +550,8 @@
      methods: {
         changeRecommend(){
            var tmp_1 = {
               mainTitle: '热推',
               subTitle: '热推商品',
               mainTitle: '天猫',
               subTitle: '天猫热销',
               type: 5
            };
            var tmp_2 = {
@@ -515,7 +560,7 @@
               type: 1
            };
            var open_like_recommend = uni.getStorageSync('open_like_recommend');
            if(this.typedataList.length == 4)this.typedataList.shift()
            if(this.typedataList.length == 5)this.typedataList.shift()
            if(open_like_recommend == 1){
               this.typedataList.unshift(tmp_2);
               this.bottomType = tmp_2.type;
@@ -560,7 +605,6 @@
         },
         onRestore() {
            this.swpidx = 0
            console.log('下拉被终止');
         },
         pagescroll(e) {
            this.$emit('scrollNum', e.detail.scrollTop)
@@ -584,26 +628,34 @@
         onAbort() {
            console.log('refushstop');
         },
         getBannerInfo() {
            // banner数据
            var that = this;
            this.$u.api.getBanner({
               type: '1,3,4,5'
               type: '1,3,4,5,11,12,13,14'
            }).then(e => {
               if (e.code == 1) return that.$alert(e.msg);
               var res = e.data.info;
               this.topBannerList = res.topBannerList;
               this.headerColor = this.topBannerList[0].colour;
               if(res.topBannerList&&res.topBannerList.length>0)
               {
                  this.topBannerList = res.topBannerList;
                  this.headerColor = this.topBannerList[0].colour;
               }
               this.singleLineList = res.singleLineList;
               this.doubleLineList = res.doubleLineList;
               this.bottomBannerList = res.bottomBannerList;
               this.fastenter=res.indexbanner;
               this.popBannerSList=res.popBannerSList;
               this.enterTop=res.enterTop;
               this.enterDown=res.enterDown;
               setTimeout(() => {
                  this.triggeredstate = false;
                  this._freshing = false;
               }, 300)
            }).catch(function(err) {
               console.log(err)
            })
         },
@@ -613,7 +665,6 @@
            })
         },
         
         godydetails(itm) {
            const info = {}
            info.nowInfo = itm
@@ -646,7 +697,49 @@
               that.dyList = e.data.dygoods;
            }).catch(function(err) {})
         },
         getPageImg()
         {
             var that=this;
            this.$u.api.getBanner({
               type: '11,16,17,18,19,20'
            }).then(e => {
               if (e.code == 1) return that.$alert(e.msg);
               var res = e.data.info;
               that.tbbanner=res.tmImg;
               that.jdbanner=res.jdImg;
               that.dybanner=res.dyImg;
               that.pddbanner=res.pddImg;
               that.wphbanner=res.wphImg;
               that.changeBanner(that.bottomCurrent);
            }).catch(function(err) {
               console.log(err)
            })
         },
         changeBanner(type)
         {
            switch(type)
            {
               case 2://京东
                 this.itembannerList=this.jdbanner;
                 break;
               case 6://抖音
                 this.itembannerList=this.dybanner;
                 break;
               case 3://拼多多
                  this.itembannerList=this.pddbanner;
                  break;
               case 4://唯品会
                  this.itembannerList=this.wphbanner;
                  break;
               default:
               this.itembannerList=[];
                  break;
            }
            if(this.itembannerList&&this.itembannerList>0)
            {
               that.bottomGoodsList.unshift(this.itembannerList[0]);
            }
         },
         getbottomGoodsList(type) {
            var that = this;
            this.$u.api.getGoodThing({
@@ -702,6 +795,7 @@
            if (this.bottomCurrent != idx) {
               this.currentPage = 1;
               this.bottomType = info.type;
               this.changeBanner(info.type);
               this.getbottomGoodsList(this.bottomType);
               this.$nextTick(() => {
                  this.$emit('scrolltoview')
@@ -726,10 +820,14 @@
         },
         goUrl(info) {
            console.log(info)
            utils.goUrl(info, this)
         },
         goFUrl(info)
         {
            uni.navigateTo({
               url: info.url
            });
         },
         gojgqUrl(info) {
            if (info.urlType == '0') {
               uni.navigateTo({
@@ -797,6 +895,68 @@
</script>
<style lang="scss">
   .f_contant
   {
          display: flex;
          justify-content: space-between;
          width: 96%;
          height: 500rpx;
          flex-direction: row;
         padding: 20rpx 0;
         margin: auto;
         .f_left{
            width:49%;
            border-radius: 12rpx;
            background: #fff;
         }
         .f_right{
            width:49%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
         }
         .f_imgcon
         {
            height: 49%;
            border-radius: 12rpx;
            image
            {
               width:100%;
               border-radius: 12rpx;
               height: 100%;
            }
         }
         .f_centerSwiper-container {
            .swiper-box {
               width: 100%;
               height: 100%;
               .swiper-item {
                  width: 100%;
                  height: 100%;
               }
            }
         }
   }
   .c-loading-img {
           width: 96%;
          height: 132rpx;
          background: #fff;
          margin: auto;
         margin-top: 20rpx;
         border-radius: 12rpx;
         justify-content:space-between;
         padding:5rpx;
      .imgbox {
         width: 158rpx;
         height: 105rpx;
         // max-height: 72rpx;
      }
   }
   .juan {
      height: 28rpx;
      background: linear-gradient(90deg, #ff8873 0, #ff4f4f 100%);
@@ -861,7 +1021,7 @@
      .pageBody-container {
         width: 100%;
         //background-color: #FFFFFF;
         margin-bottom: 16rpx;
         //margin-bottom: 16rpx;
         .column-container {
            width: 100%;
@@ -869,7 +1029,7 @@
            .bannerSwiper-container {
               width: 100%;
               height: 280rpx;
               height: 230rpx;
               padding: 0 16rpx;
               margin-bottom: 16rpx;