jiaju/pages/search/search.vue

<template>
    <view class="content pt">
          <page-head text="搜索" navState="true" ></page-head>
        <view class="top">
            <view class="int">
                <image class="intImg" src="../../static/ss.png" mode=""></image>
                <input  placeholder="搜索"   v-model="inputVal"  @input="inputFun()" placeholder-class="InputC" class="input" type="text" value="" />
            </view>
            
            <view class="title" v-if="inputVal">
             结果：{{inputVal}} <text class="cor">（{{total}}）  </text>   
            </view>
        </view>
     
        
        <view class="classifyConList">
            <view class="list" @click="details(item.id)" v-for="(item,index) in HomeData">
                <image class="img" :src="item.cover" mode="aspectFill"></image>
                <view class="text">
                   {{item.name}}
                </view>
                <view class="textA">
                    <view class="money">
                        <text >￥</text>{{item.price_text}}
                    </view>
                    <view class="btn" v-if="item.customized==1">
                        可定制
                    </view>
                </view>
        
            </view>
        
        </view>
        <uni-load-more v-if="loadStateIf" :status="loadState"></uni-load-more>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                inputVal:"",
                total:0,
                HomeData:[],
                loadStateIf:false,
                num:10,
               record:"",
                loadState:"more",
                arr: {
                    page: 1,
                    size: 10,
                }
            }
        },
        onReachBottom() {
          this.arr.size= this.arr.size+this.num
        
          if( (this.arr.page*this.arr.size) <=this.total+this.num ){
              this.inputFun()
          }else{
               this.loadState="no-more"
          }
        },
        methods: {
            details(id) {
                uni.navigateTo({
                    url: '/pages/commodity/commodity?id=' + id
                });
            },
            inputFun(){
                if(!this.inputVal){
                      this.HomeData=[]
                          this.loadStateIf=false
                      return
                }
                if(this.record!=this.inputVal){
                   this.arr.size=this.num
                   this.record=this.inputVal
                     uni.pageScrollTo({
                                       scrollTop: 0,
                                       duration: 1,
                                   });
                }
                this.loadState="loading"
                this.request({
                    url: this.host + "/api/spu/home",
                    type: "post",
                    data: {
                        ...this.arr,
                        keyword:this.inputVal
                    
                    },
                    success: (res) => {
                        if(res.data.data.list.length>1){
                            this.loadStateIf=true
                        }
                   this.loadState="more",
                          
                        this.HomeData = res.data.data.list
                         this.total = res.data.data.total
                         if( (this.arr.page*this.arr.size) <=this.total ){
                         
                         }else{
                              this.loadState="no-more"
                              
                         }
                    }
                })
            }
        }
    }
</script>

<style>
    .top{
        position: fixed;
        width: 100%;
        left: 0rpx;
           padding-top: 170rpx;
           top: 0rpx;
           background-color: #f6f6f6;
           padding-right: 40rpx;
           padding-left: 40rpx;
           z-index: 2;
    }
   .int {
        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;
    }
   .title{
       font-size: 30rpx;
       color: #000;
       padding: 40rpx 0rpx 15rpx 0rpx;
       font-weight: bold;
   }
   .title .cor{
       color: #f8551c;
   }
   .content{
       padding-right: 40rpx;
       padding-left: 40rpx;
   }
   .classifyConList {
       display: flex;
       padding-top: 200rpx;
       padding-bottom: 60rpx;
       box-sizing: border-box;
       flex-wrap: wrap;
       justify-content: space-between;
   }
   
   .classifyConList .list {
        width: 320rpx;
       height: 433rpx;
       margin-top: 30rpx;
       border-radius: 30rpx;
       background-color: #FFFFFF;
       position: relative;
   }
   
   .classifyConList .list .img {
       width: 319rpx;
       height: 221rpx;
       border-radius: 30rpx;
   }
   
   .classifyConList .list .text {
       display: -webkit-box;
       -webkit-line-clamp: 2;
       word-break: break-all;
       overflow: hidden;
       text-overflow: ellipsis;
       -webkit-box-orient: vertical;
       font-size: 28rpx;
       margin-top: 15rpx;
       line-height: 50rpx;
       padding: 0 12rpx;
       font-weight: bold;
   }
   
   .classifyConList .list .textA {
       box-sizing: border-box;
       display: flex;
       margin-top: 10rpx;
       padding: 0 12rpx;
       position: absolute;
       bottom: 35rpx;
       left: 0rpx;
       width: 100%;
       align-items: center;
       justify-content: space-between;
   }
   
   .classifyConList .list .textA .money {
       font-size: 28rpx;
       font-weight: bold;
   }
   
   .classifyConList .list .textA .btn {
       font-size: 18rpx;
       font-weight: bold;
       width: 86rpx;
       height: 28rpx;
       border-radius: 14rpx;
       color: #FFFFFF;
       line-height: 28rpx;
       text-align: center;
       line-height: 28rpx;
       background-color: #D33333;
   }
</style>