jiaju/pages/index/index.vue

<template>
    <view class="content">
       <page-head text="首页"></page-head>
        <navigator class="int" url="/pages/search/search">
            <image class="intImg" src="../../static/ss.png" mode=""></image>
            <input placeholder="搜索" placeholder-class="InputC" class="input" type="text" value="" />
        </navigator>
        <swiper class="swiper" indicator-color="rgba(255,255,255,0.3)" indicator-active-color="rgba(255,255,255,1)"
            :indicator-dots="indicatorDots">
            <swiper-item v-for="(item,index) in bannerData ">
                <view @click="navD(item.spu_id)" class="swiper-item uni-bg-red">
                    <image class="img" :src="item.src" mode=""></image>
                </view>
            </swiper-item>

        </swiper>

        <view class="title">
            推荐商品
        </view>

        <view class="navList">
            <view class="navListCon">
                <view v-for="(item,index) in navData" class="text" @click="navState(index)" :class="item.state?'on':''">
                    {{item.title}}
                </view>
            </view>
        </view>

        <view class="list">
            <view class="listCon" v-for="(item,index) in HomeData" @click="details(item.id)">
                <image :src="item.cover" class="img" mode=""></image>
                <view class="text">
                    {{item.name}}
                </view>

                <view class="money">
                    <view class="moneyNum">
                        <text >￥</text>{{item.price_text}}
                    </view>
                    <view class="btn" v-if="item.customized==1">
                        可定制
                    </view>
                </view>
            </view>

        <uni-load-more  :status="moreState"></uni-load-more>

        </view>
        <tab stateTab="index"></tab>
    </view>
</template>

<script>
    import tab from "../../component/tab.vue";
    export default {
        components: {
            tab
        },
        data() {
            return {
                loadState:true,
                title: 'Hello',
                navDataState: 0,
                indicatorDots: true,
                bannerData: [],
                moreState:"more",
                HomeData: [],
                classifyId: "",
                num:10,
                listData: [{}],
                navData: [],
                arr: {
                    page: 1,
                    size: 10,
                    is_home: 1,
                }
            }
        },
        onLoad() {
            this.getbannerData()
            this.getNavData()


        },
        onReachBottom() {
          this.arr.size=this.arr.size+this.num
        
          if( (this.arr.page*this.arr.size) <=this.total+ this.num){
              if((this.arr.page*this.arr.size)!=this.total){
                  this.getHomeData()
              }else{
                       this.moreState="no-more"
              }
          }else{
              console.log(123)
                 this.moreState="no-more"
          }
        },
        methods: {
            getHomeData() {
                this.moreState="loading"
                this.request({
                    url: this.host + "/api/spu/home",
                    type: "post",
                    data: {
                        ...this.arr,
                        category_id: this.classifyId
                    },
                    success: (res) => {
                        
                        this.HomeData = res.data.data.list
                         this.total = res.data.data.total
                   
                         if( (this.arr.page*this.arr.size) <=this.total){
                         
                         }else{
                                  console.log("----------")
                              this.moreState="no-more"
                              
                         }
                    }
                })
            },
            details(id) {
                uni.navigateTo({
                    url: '/pages/commodity/commodity?id=' + id
                });
            },
            navD(id){
               uni.navigateTo({
                   url: '/pages/commodity/commodity?id=' + id
               }); 
            },
            getbannerData() {
                this.request({
                    url: this.host + "/api/common/slides",
                    type: "post",
                    data: {
                        size: "1000",
                        position: "home-banner"
                    },
                    success: (res) => {
                        this.bannerData = res.data.data
                    }
                })
            },
            getNavData() {
                this.request({
                    url: this.host + "/api/spu/condition",
                    type: "post",
                    data: {
                        is_home: "1",
                    },
                    success: (res) => {
                        this.navData = res.data.data
                        for (var i = 0; i < this.navData.length; i++) {
                            this.navData[i] = {
                                ...this.navData[i],
                                state: false
                            }
                        }
                        this.navData[0].state = true
                        this.classifyId = this.navData[0].id
                        this.getHomeData()
                    }
                })
            },
            navState(index) {
  this.arr.size=this.num
                for (var i = 0; i < this.navData.length; i++) {
                    this.navData[i] = {
                        ...this.navData[i],
                        state: false
                    }
                }
                this.classifyId = this.navData[index].id
                this.navData[index].state = true
                this.navData = [...this.navData]
                this.getHomeData()
            },

        }
    }
</script>

<style>
    .int {
        margin: auto;
        width: 670rpx;
        height: 98rpx;
        border-radius: 30rpx;
        background-color: #DEDEDE;
        position: relative;
  

    }

    .dis {
        width: 100%;
    }

    .int .input {
        padding-left: 107rpx;
        width: 100%;
        height: 100%;

        box-sizing: border-box;
    }

    .InputC {
        font-size: 36rpx;
        font-weight: bold;
        color: #8c8c9b;
    }

    .intImg {
        width: 40rpx;
        position: absolute;
        left: 40rpx;
        height: 40rpx;
        top: 50%;
        margin-top: -20rpx;
    }

    .swiper {
        width: 670rpx;
        margin: auto;
        height: 331rpx;
        border-radius: 30rpx;
        overflow: hidden;
        margin-top: 42rpx;
    }

    .swiper .img {
        width: 100%;
        height: 331rpx;
        border-radius: 30rpx;
    }

    .title {
        margin: auto;
        margin-top: 60rpx;
        color: #000000;
        font-size: 48rpx;
        font-weight: bold;
        line-height: 48rpx;
        width: 670rpx;

        position: relative;
        margin-bottom: 44rpx;
    }

    .title:after {
        content: "";
        position: absolute;
        width: 75rpx;
        height: 5rpx;
        background-color: #000;
        border-radius: 2.5rpx;
        left: 0rpx;
        bottom: -30rpx;


    }

    .navList {
        padding-left: 40rpx;
        margin: auto;
        overflow-x: auto;
        padding-top: 30rpx;
        padding-bottom: 54rpx;

    }

    .navListCon {
        display: flex;
        overflow-x: auto;

    }

    .navListCon::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
    }

    .navList .text {
        width: 136rpx;
        height: 64rpx;
        flex: none;
        font-weight: 500;
        color: #8c8c9b;
        font-size: 30rpx;
        text-align: center;
        display: inline-block;
        line-height: 64rpx;
        border-radius: 20rpx;
        margin-right: 15rpx;
    }

    .navList .on {
        color: #fff;
        background-color: #D33333;
    }

    .list {
        padding: 0 40rpx;
    }

    .listCon {
        width: 100%;
        text-align: center;
        margin-bottom: 68rpx;
        
    }

    .listCon .img {
        width: 100%;
        border-radius: 30rpx;
        max-height: 450rpx;
    }

    .listCon .text {
        text-align: left;
        font-size: 36rpx;
        color: #000000;
        font-weight: bold;
        margin-bottom: 23rpx;
        margin-top: 30rpx;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        word-break: break-all;
        -webkit-line-clamp: 1;
        overflow: hidden;
    }

    .money {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }

    .moneyNum {
        font-size: 32rpx;
        color: #000000;
        font-weight: bold;
    }

    .btn {
        width: 115rpx;
        height: 46rpx;
        background-color: #D33333;
        text-align: center;
        line-height: 46rpx;
        font-size: 24rpx;
        border-radius: 23rpx;
        
        color: #FFFFFF;

    }

    .content {
        padding-bottom: 139rpx;
        padding-top: 20rpx;
    }
</style>