MeiMeiZhuan/pages/index/hotindex.vue

<template>
  <div class="quality-recommend">
	<!-- <view class="return_img"><image src="../../static/img/img47.png"></image></view> -->
    <div class="slider-banner swiper">
			<view class="swiper">
				<swiper indicator-dots="true" :autoplay="autoplay" :circular="circular" :interval="interval" :duration="duration"
				 indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
					<block v-for="(item,index) in imgUrls" :key="index">
						<swiper-item>
							<image :src="item.img" class="slide-image"></image>
						</swiper-item>
					</block>
				</swiper>
			</view>
    </div>
    <div class="title flex-center">
      <div class="line"></div>
      <div class="name">
        <span class="iconfont" :class="icon"></span>{{ name }}
      </div>
      <div class="line"></div>
    </div>
		<view class="wrapper">
			<GoodList  :bastList="goodsList" :is-sort="false"></GoodList>
			<uni-load-more :status="loadingType"></uni-load-more>
			<!-- <view class="txt-bar" v-if="goodsList.length>0 && !isScroll">我是有底线的~</view>
			<emptyPage v-if="goodsList.length==0 && !isScroll" title="暂无数据~"></emptyPage> -->
		</view>
  </div>
</template>
<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import emptyPage from '@/components/emptyPage.vue'
import GoodList from "@/components/goodList/index.vue";
import {groomList,productDetail} from '@/api/product.js'
// import { getGroomList } from "@/api/store";
export default {
  name: "HotNewGoods",
  components: {
    GoodList,
		emptyPage,
  },
  props: {},
  data: function() {
    return {
      imgUrls: [],
      goodsList: [],
	  specList:'',
	  specSelected:'',
	  productValue:[],
	  loadingType:'loading',
      name: "",
      icon: "",
			type:0,
			autoplay:true,
			circular:true,
			interval: 3000,
			duration: 500,
			page:1,
			limit:10,
			isScroll:true
    };
  },
  //加载更多
  onReachBottom() {
  	this.loadData();
  },
  onLoad: function(option) {
	this.type = option.type
	console.log(option);
    this.titleInfo();
    this.getIndexGroomList();
  },
  methods: {
    titleInfo: function() {
      if (this.type === "1") {
        this.name = "精品推荐";
        this.icon = "icon-jingpintuijian";
        // document.title = "精品推荐";
				uni.setNavigationBarTitle({
					title:"精品推荐"
				})
      } else if (this.type === "2") {
        this.name = "热门榜单";
        this.icon = "icon-remen";
				uni.setNavigationBarTitle({
					title:"热门榜单"
				})
      } else if (this.type === "3") {
        this.name = "首发新品";
        this.icon = "icon-xinpin";
				uni.setNavigationBarTitle({
					title:"首发新品"
				})
      }else if (this.type === "4") {
        this.name = "促销单品";
        this.icon = "icon-xinpin";
				uni.setNavigationBarTitle({
					title:"促销单品"
				})
      }
    },
    getIndexGroomList: function() {
		if(!this.isScroll) return
		let obj = this;
		let type = this.type;
		groomList({
			page:obj.page,
			limit:obj.limit
			},type).then(res => {
				console.log(res,'res')
			obj.imgUrls = res.data.banner;
			let goodsList = obj.goodsList.concat(res.data.list);
			console.log(obj.page,'1')
			let a = res.data.list.length;
			for(let i = 0 ;i<a;i++){
				let goodsid;
				goodsid = res.data.list[i].id;
				console.log(obj.page,'2')
				productDetail({}, goodsid)
					.then(({data}) => {
						obj.specList = data.productAttr;//保存产品属性
						obj.specSelected = []; //初始化默认选择对象
						obj.productValue = data.productValue;
						for (let i = 0; i < obj.specList.length; i++) {
							// 设置默认数据
							let attrValue = obj.specList[i].attr_value[0];
							attrValue.check = true;
							obj.specSelected.push(attrValue.attr);
						}
						let str = obj.specSelected.join(',');
						let actionPrice = obj.productValue[str].price;
						console.log(obj.page,'3')
						console.log(actionPrice,i,'actionPrice')
						if(obj.page == 1)
						{
							goodsList[i].price = actionPrice;
						}else{
							let a = (obj.page - 1) * 10 + i;
							goodsList[a].price = actionPrice;
						}
					});
			}
			setTimeout(function(){
				console.log(obj.page,'4')
				console.log(goodsList,'goodsList2')
				obj.goodsList = goodsList;
				// 判断是否还有下一页，有是more  没有是nomore
				if (obj.limit == res.data.list.length) {
					obj.page++;
					obj.loadingType = 'more';
				} else {
					obj.loadingType = 'nomore';
				}
				if (type === 'refresh') {
					if (loading == 1) {
						uni.hideLoading();
					} else {
						uni.stopPullDownRefresh();
					}
				}
			}, 500);
			
			obj.isScroll = res.data.list.length>=obj.limit
        })
        .catch(function(res) {
          console.log(res)
        });
    }
  },
	onReachBottom() {
		this.getIndexGroomList()
	}
};
</script>
<style lang="scss">
	/deep/ .empty-box{
		background-color: #f5f5f5;
	}
	.return_img{
		z-index: 100;
		position: absolute;
		top:20rpx;
		left:20rpx;
		image{
			width: 50rpx;
			height: 50rpx;
		}
	}
	.swiper,swiper,swiper-item,.slide-image{
		width: 100%;
		height: 280rpx;
	}
	.quality-recommend {
		.wrapper{
			background: #fff;
		}
		.title {
	    height: 120rpx;
	    font-size:32rpx;
	    color: #282828;
	    background-color: #f5f5f5;
			.line{
				width: 230rpx;
				height: 2rpx;
				background-color: #e9e9e9;
			}
		}	
	}
	.txt-bar{
		padding: 20rpx 0;
		text-align: center;
		font-size: 26rpx;
		color: #666;
		background-color: #f5f5f5;
	}
</style>