zhishifufei_uniapp/pages/store/index.vue

<template>
  <BaseContainer class="store" :fixedNav="false">
		<view class="header"
				:style="'padding-top:' + (menutop * 2 + 58 + 18) + 'rpx;'">
		  <view class="search"
				@click="getsearch()"
				:style="{background: scrollTop > 10 ? '#f5f5f5' : 'transparent', paddingTop: (menutop * 2) + 'rpx', paddingBottom: '20rpx', height: (menutop * 2 + 58 + 20) + 'rpx'}"
		  >
				<view>
				  <image class="image_icon" :src="getImgPath('/public/images/icon.png')" mode="aspectFill" />
				  <view class="name">
				    搜索商品
				  </view>
				</view>
		  </view>
		</view>
    <view style="padding: 0 30rpx;">
      <view class="swiper-box">
        <swiper class="custom-banner" indicator-dots autoplay
          @click="handleBannerClick" @change="getChangeImage">
          <swiper-item v-for="(item, index) in banner" :key="index" :data-url="item.url" class="swiper-item">
            <image :data-url="item.url" mode="aspectFill" :src="item.pic" :alt="item.title" />
          </swiper-item>
        </swiper>
      </view>
      <view class="tab-bar-placeholder">
				<view class="flex tab-content">
					<view :data-idx="index" class="tab-item" v-for="(item, index) in categoryList" :key="item.id"  @click="handleCateClick(item)">
							<image v-if="item.id > 0" :src="item.pic" mode="aspectFill"></image>
							<image v-else :src="getImgPath('/static/frontend/more.png')" mode="aspectFill"></image>
							<view>{{ item.name }}</view>
						</view>
				</view>
      </view>
			<!-- 广告 -->
			<advert />
      <view class="goods-section">
				<view class="goods-title">精品推荐</view>
        <view class="list">
          <navigator hover-class="none" v-for="item in goodsList" :key="item.id" class="item flex"
            :url="'/pages/store/detail?id=' + item.id">
            <view class="image">
              <image mode="aspectFit" class="img" :src="item.image" alt="" />
            </view>
            <view class="text">
              <view class="title">{{ item.store_name }}</view>
              <view class="group">
								<view class="group-l">
									<view class="price">
									  ￥<span class="num">{{ item.price }}</span>
									</view>
									<view class="sale">已售{{ item.sales }}件</view>
								</view>
								<view class="group-r">
									<view class="auth-btn flex">
										<image src="@/static/images/store/icon.png" mode="aspectFill"></image>
										正版授权
									</view>
								</view>
              </view>
            </view>
          </navigator>
        </view>
        <view v-if="goodsList.length && !loading" class="finished">{{ loadTitle }}</view>
        <view v-if="finished && !goodsList.length" class="empty">
          <image mode="aspectFill" :src="getImgPath('/wap/first/zsff/images/empty.png')" alt="暂无商品" />
          <view>暂无商品</view>
        </view>
       <!--  <view style="height: var(--tab-bar-height)"></view> -->
      </view>
    </view>
  </BaseContainer>
</template>

<script>
import { getGoodsCateList, getGoodsList, getRecommendGoodsList, getIndexData } from "@/api/store";
import RecommendPoster from "@/components/RecommendPoster/index.vue";
import Advert from '@/components/Advert/index.vue';

  export default {
		components: {
			RecommendPoster,
			Advert,
		},
    data() {
      const systemInfo = this.$util.getSystemInfo();
      const { statusBarHeight } = systemInfo;
      return {
				advertList: [
					{
						"id": 46,
						"title": "广告1",
						"url": "#",
						"banner": "https://mytest101011.oss-cn-shenzhen.aliyuncs.com/d588f202305161726583206.png",
						"sort": "0"
					}
				],
        statusBarHeight,
        banner: [],
        categoryList: [],
        goodsList: [],
        activeId: 0,
        loadTitle: "",
        page: 1,
        limit: 16,
        loading: false,
        finished: false,
        isFixed: false,
        offsetTop: 0,
        offsetHeight: 0,
        tabBarFixed: false,
        tabBarTopSize: 0,
        color_one: '',
				color_two: '',
				menutop: 10,
				scrollTop: 0,
      };
    },
    onLoad() {
      this.handlePageScroll = this.$util.debounce(this.handlePageScroll, 30);
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			/* #ifdef MP-WEIXIN ||  MP-KUAISHOU  */
			this.menutop = menuButtonInfo.top;
			/* #endif */
			 /* #ifdef APP-PLUS  */
			 let platform = uni.getSystemInfoSync().platform
			 if(platform === 'ios'){
			    this.menutop = 60;
			 }else{
			  this.menutop = 40;
			 }
			/* #endif */
			 /* #ifdef MP-TOUTIAO  */
			 this.menutop = 10;
			/* #endif */
			this.getGoodsCateList();
      // this.getGoodsList();
			this.getRecommendGoodsList();
      this.getIndexData();
    },
    onReachBottom() {
      // this.getGoodsList();
    },
    onPageScroll({ scrollTop }) {
			this.scrollTop = scrollTop;
      this.handlePageScroll(scrollTop);
    },
    onShareAppMessage() {
      return {};
    },
    onShareTimeline() {
      return {};
    },
    mounted() {
    },
    methods: {
			getsearch() {
				uni.navigateTo({
				  url:'/pages/store/goodsList'
				})
			},
      handlePageScroll(scrollTop) {
				console.log(scrollTop);
        this.tabBarFixed = scrollTop + this.statusBarHeight >= this.tabBarTopSize;
      },
      async getIndexData() {
        try {
          const { data } = await getIndexData();
          this.banner = data;
          if(!this.color_one &&  !this.color_two){
          this.color_one = this.banner[0].color_one;
          this.color_two = this.banner[0].color_two;
        }
        } catch (err) { }
      },
      // 点击轮播图
      handleBannerClick(e) {
       
        if (e.target.dataset.url === undefined) return;
        uni.navigateTo({
          url: e.target.dataset.url,
        });
      },
      getChangeImage(e) {
        this.banner.forEach((item, index) => {
          if (index == e.detail.current) {
            this.color_one = item.color_one;
            this.color_two = item.color_two;
          }
        });
			},
			// 获取分类
			async getGoodsCateList() {
			  try {
			    const { data } = await getGoodsCateList();
			    console.log(data);
					this.categoryList = data.category_list.concat([
					  {
					    name: "全部",
					    id: 0,
					  },
					]);
			  } catch (err) { }
			},
			async getRecommendGoodsList() {
			  // if (this.loading || this.finished) {
			  //   return;
			  // }
			  this.loadTitle = "";
			  this.loading = true;
			
			  try {
			    const { data } = await getRecommendGoodsList({});
					console.log('recommendGoodsList', data);
			    this.goodsList = data;
					console.log(this.goodsList);
			  } catch (err) {
					console.log(err);
				}
			
			  this.loading = false;
			},
      // 获取商品列表
      async getGoodsList() {
        if (this.loading || this.finished) {
          return;
        }
        this.loadTitle = "";
        this.loading = true;

        try {
          const { data } = await getGoodsList({
            cId: this.activeId,
            page: this.page++,
            limit: this.limit,
          });
					
          this.goodsList = this.goodsList.concat(data);
					console.log(this.goodsList);
          this.finished = data.length < this.limit;
          this.loadTitle = this.finished ? "已全部加载完" : "上拉加载更多";
        } catch (err) {
					console.log(err);
				}

        this.loading = false;
      },
      // 点击商品分类
      handleCateClick(item) {
				if (item.name === '全部') {
					console.log(1);
					uni.navigateTo({
						url: '/pages/store/goodsCate'
					});
				} else {
					uni.navigateTo({
						url: `/pages/store/goodsList?categoryId=${item.id}`
					});
				}
      },
    },
  };
</script>
<style>
page{
  background: #F7F8F9;
}
</style>
<style lang="scss" scoped>
	.goods-section{
		width: 690rpx;
		border-radius: 24rpx;
		margin: auto;
		.goods-title {
			padding-left: 23rpx;
			position: relative;
			color: #333;
			font-size: 34rpx;
			line-height: 74rpx;
			margin-bottom: 33rpx;
			margin-top: 48rpx;
			&:before {
				content: '';
				background: linear-gradient(0deg, #24a9e1, #0f74bb);
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
				width: 8rpx;
				height: 26rpx;
				border-radius: 4rpx;
			}
		}
	}
	.advert {
		background: transparent;
		padding: 0;
		>image {
			width: 100%;
			height: 110rpx;
		}
	}
	swiper {

		/deep/ {
			.wx-swiper-dots-horizontal,
			.uni-swiper-dots-horizontal {
				left: 70%;
			}

			.wx-swiper-dot,
			.uni-swiper-dot {
				width: 12rpx;
				height: 8rpx;
				background: #8ab1ff;
				border-radius: 4rpx;
				float: left;
			}

			.wx-swiper-dot-active,
			.uni-swiper-dot-active {
				width: 24rpx;
				height: 8rpx;
				background: #FFFFFF !important;
				border-radius: 4rpx;
			}
		}
	}
  .nothing {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400rpx;
    height: 400rpx;

    transform: translate(-50%, -50%);
  }

  .swiper-box {
    
    /* #ifndef MP-TOUTIAO */
    height: 306rpx;
  /* #endif */
  
  }

  .custom-banner {
    width: 690rpx;
    height: 290rpx;
    margin: 0 auto;
    overflow: hidden;
  }

  .swiper-item {
    padding: 30rpx 0;
  }

  .swiper-item image {
    width: 100%;
    height: 100%;
  }

  swiper {

    /deep/ {
      .wx-swiper-dots-horizontal,
      .uni-swiper-dots-horizontal {
        bottom: 60rpx;
      }

      .wx-swiper-dot,
      .uni-swiper-dot {
        width: 10rpx;
        height: 10rpx;
        border-radius: 5rpx;
        margin-right: 5rpx;
        margin-left: 5rpx;
      }

      .wx-swiper-dot-active,
      .uni-swiper-dot-active {
        width: 20rpx;
      }
    }
  }

  .tab-content {
		width: 690rpx;
		margin: 30rpx auto 22rpx;
		background: #fff;
		flex-wrap: wrap;
		padding-top: 30rpx;
		border-radius: 10rpx;
  }

  .tab-item {
    width: 25%;
    font-size: 24rpx;
		line-height: 24rpx;
    font-weight: 400;
    color: #666;
		margin-bottom: 50rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		>image {
			width: 94rpx;
			height: 94rpx;
			margin-bottom: 11rpx;
		}
		>view {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
  }
   /* #ifdef MP-KUAISHOU */
  .swiper-item{
    padding: 0 !important;
  }
   /* #endif */
  .store{
    // padding-bottom: calc(var(--tab-bar-height) + 60rpx);
		background: linear-gradient(to top, transparent 0%, #f6f6f6 70%, #D3F2FF 80%, #53B2F5 100%);
  }
	.store .header {
		z-index: 99;
		width: 100%;
	}
	.store .header .search {width: 100%;
		font-size: 26rpx;
		color: #aaa;
		padding: 0;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		>view {
			width: 90%;
			background-color: #fff;
			display: flex;
			align-items: center;
			border-radius: 40rpx;
			height: 100%;
			margin-left: 5%;
			/* #ifdef MP-WEIXIN */
			width: 65%;
			/* #endif */
		}
		.iconfont2,
		.iconfont {
		  margin-right: 16rpx;
		  font-size: 28rpx;
		  ;
		  line-height: 1;
		  color: #aaa;
		}
		
		.image_icon {
		  width: 42rpx;
		  height: 42rpx;
		  margin-left: 28rpx;
		}
		
		.name {
		  margin-left: 10rpx;
		}
	}
  /* 商品列表 */
  .store .finished,
  .store .loading {
    font-size: 28rpx;
    line-height: 100rpx;
    text-align: center;
    color: #bbb;
  }

  .store .fa-spin {

    animation: fa-spin 1s infinite linear;
  }

  .store .empty {
    margin-top: 100rpx;
    font-size: 28rpx;
    text-align: center;
    color: #bbb;
  }

  .store .empty image {
    display: block;
    width: 414rpx;
    height: 305rpx;
    margin: 0 auto;
    pointer-events: none;
  }

  .store .banner {
    position: relative;
    padding-top: 30rpx;
    padding-bottom: 30rpx;
  }

  .store .banner .swiper-container {
    width: 710rpx;
    height: 310rpx;
    border-radius: 20rpx;
  }

  .store .banner image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 20rpx;

    object-fit: cover;
    pointer-events: none;
  }

  .store .nothing {
    display: block;
    width: 414rpx;
    margin: 30rpx auto;
    pointer-events: none;
    -webkit-touch-callout: none;
  }

  .store .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .store .list .item {
    width: 334rpx;
		height: 455rpx;
    margin-bottom: 20rpx;
		background: #fff;
		flex-direction: column;
		align-items: center;
		padding-bottom: 25rpx;
		&:nth-child(2n + 1) {
			margin-right: 20rpx;
		}
  }

  .store .list .image {
    width: 250rpx;
		height: 225rpx;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
		margin-bottom: 30rpx;
  }

  .store .list .image .img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    pointer-events: none;
    -webkit-touch-callout: none;
  }

  .store .list .text {
		flex: 1;
		width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
		padding: 0 20rpx;
  }

  .store .list .title {
    overflow: hidden;
    font-size: 28rpx;
    line-height: 35rpx;
		height: 70rpx;
    color: #333;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .store .list .group {
    display: flex;
    justify-content: space-between;
    align-items: center;
		margin-top: auto;
  }

  .store .list .price {
    font-size: 22rpx;
		line-height: 32rpx;
    color: #F8473E;
  }

  .store .list .price .num {
    font-size: 32rpx;
  }

  .store .list .sale {
    font-size: 20rpx;
		line-height: 20rpx;
    color: #999;
		margin-top: 7rpx;
  }
	.store .list .auth-btn {
		width: 130rpx;
		height: 39rpx;
		border-radius: 6rpx;
		border: 1px solid #0F74BB;
		justify-content: center;
		color: #0F74BB;
		font-size: 20rpx;
		line-height: 39rpx;
		image {
			width: 20rpx;
			height: 23rpx;
			margin-right: 8rpx;
			margin-top: 7rpx;
		}
	}
</style>