vue中的mescroll搜索運(yùn)用及各種填坑處理

<template>
    <div class="wrap">
      <!-- 搜索框 -->
      <div class="searchInputArea">
        <div class="searchBarBox">
          <div class="inputWrap" >
            <form onsubmit="javascript:return false" action>
              <input :placeholder = "placeholderStr" type="search" ref = "input" v-model="keyword" />
              <span class="clearBtn" v-show="keyword" @click="clear"></span>   
            </form>  
          </div> 
        </div>
      </div> 
      <div class="myFastChoiceBlock" v-show="!keyword">   
        <!-- 最近伙伴和我的關(guān)注 -->
        <fast-choice :successInvite="successInvite" @invite="inviteClick"></fast-choice>
      </div>  
      <div class="searchContainer">      
        <search-content :searchName="keyword" :successInvite="successInvite" @inviteClick="inviteClick" v-if="keyword !== ''"></search-content>
      </div>
       <!-- 協(xié)議彈出層 -->
      <pop-up @change="closeLayer" v-if="popuShow">
        <h3 class="title">{{protocolTitle}}</h3>
        <div class="content" v-html="protocolCon"></div>
        <div class="confirmBtn" :class="{active:isActive}" @click="confirmProtocol">{{btntxt}}</div>
        <div class="popCloseCon" @click="closeActionClick"></div>
      </pop-up>
      <!-- 比例彈出層 -->
      <scale @change="closeScale" @send="sendAjaxClick" :number="scaleCount" :scaleBtn="scaleBtn" :scaleDesc="scaleDesc" v-show="isScale" :userId="userId"></scale>
    </div>
</template>
<script>
  import FastChoice from './components/fastChoice';
  import PopUp from './components/PopUp';
  import scale from './components/scale';
  import SearchContent from './components/searchContent';
  const pageSize=10;
  let t='';
  export default {
    name: "Search",
    data() {
      return {
         placeholderStr: '搜一搜你想找的TA',
         keyword: '',
         list: [],
         timerKey: null,
         dataList:[],//列表數(shù)據(jù)
         totalPage:1,
         popuShow:false,//協(xié)議彈出層
         isScale:false,//比例彈出層
         scaleValue:'',//分成比例
         userId:'',
         isActive:true,//操作協(xié)議按鈕灰色顯示
         sencond:5,//秒數(shù)
         btntxt:'', //操作協(xié)議層按鈕文字顯示
         scaleValue:'',//分成比例
         scaleDesc:'',//比例彈窗描述
         scaleBtn:'',
         scaleCount:'50%',//默認(rèn)分成比例
         successInvite: [],//默認(rèn)未邀請
         protocolTitle:'',//協(xié)議標(biāo)題
         protocolCon:'' //協(xié)議內(nèi)容
      };
    },
    components:{FastChoice,PopUp,scale, SearchContent},
    watch: {
      keyword () {
        if (!this.keyword){
          return;
        }
      }
    },
    mounted() {
      this.protocolAjax(); 
    },
    methods: {
      //邀請
      inviteClick (item) {
       //點(diǎn)擊邀請過的不予操作
       if(this.successInvite.indexOf(item.hwUserId) > -1 || item.inviteStatus){
         return;
       }
       this.isScale = true;
       this.userId = item.hwUserId;
       this.scaleDesc = '邀請成功后你可獲取該用戶部分收益，選擇雙方都認(rèn)可的分成比例可以提高邀請成功率哦~';
       this.scaleBtn = '發(fā)送邀請';
       this.scaleCount = '50%';//邀請比例統(tǒng)一為50%
      },
      //點(diǎn)擊發(fā)送邀請
      sendAjaxClick (value){
        this.scaleValue = value;
        this.popuShow = true;
        this.isScale = false;
        this.isActive = true;
        this.sencond = 5 ;
        this.timer();
      },
      //5s時(shí)間倒計(jì)時(shí)
      timer() {
        if (this.sencond > 0) {
          this.btntxt="已閱讀同意并確認(rèn)邀請("+this.sencond+"s)";
          this.sencond--;
          t=setTimeout(this.timer, 1000);     
        } else{
          this.isActive = false;
          this.sencond = 5;
          this.btntxt="已閱讀同意并確認(rèn)邀請";  
        }
      },
      //已閱讀同意并確認(rèn)
      confirmProtocol () {
        if(this.isActive){
          return false;
        }
        this.sendAjax();
      },
      //發(fā)送邀請請求
      sendAjax () {
        console.log(this.scaleValue);
        let dd = this.scaleValue.toString();
        this.$request.post(_basePath + '/activity/page20191018/inviteArtist.html',{userId: this.userId,shareRate:this.scaleValue}).then((res) => {
          this.successInvite.push(this.userId) ;
          mui.toast("已發(fā)送邀請，對方接受后會通知你哦",2000);
          this.closeActionClick();
        }).catch(() => {})
      },  
      //關(guān)閉操作協(xié)議彈窗
      closeActionClick() {
        this.popuShow = false;
        clearTimeout(t);//清除倒計(jì)時(shí)
      },
       //關(guān)閉分成比例彈窗
      closeScale () {
        this.isScale = false; 
      },
      clear () {
        this.keyword = "";
        this.$refs["input"].focus();
      },
      protocolAjax () {
         this.$request.post(_basePath + '/activity/page20191018/queryProtocol.html',{type:0}).then((res) => {
         this.protocolTitle = res.title;
         this.protocolCon = res.content;
        }).catch(() => {})
      }
    },
  };
</script>
<style lang="scss" scoped>
 @import "search";
</style>

<template>
  <div>
    <div ref="mescroll" class="mescroll">
      <div class="search-content wrapper" ref="scroller" > 
        <ul>
          <li class="item" v-for="(item,index) in dataList" :key="index">
            <div class="personBlock" @click="openUserClick(item.userDetail.userId)">
              <div class="showImg">
                <img :src="item.userDetail.userThumUrl" />
                <template v-if="item.userDetail.kolFlag">
                  <em v-if="item.userDetail.kolFlag" class="icon c_kol"></em>
                </template>
                <template v-else>
                  <em class="icon c_company" v-if="item.userDetail.upSignType == '1'"></em>
                  <em class="icon c_person" v-if="item.userDetail.upSignType == '0'"></em>
                </template>
                
              </div>
              <div class="showInfo">
                <div class="name">{{item.userDetail.nickName}}</div>
                <div class="attentionCount">
                  {{item.userDetail.fansCount || 0}}人關(guān)注TA
                </div>
              </div>
            </div>
            <div class="sendBtn" :class="{active:item.userDetail.inviteStatus || (successInvite.indexOf(item.userDetail.hwUserId) > -1 ) }" @click="inviteClick(item.userDetail)">
              <span v-if="item.userDetail.inviteStatus || successInvite.indexOf(item.userDetail.hwUserId) > -1">已邀請</span>
              <span v-else>邀請</span>
            </div>
          </li> 
        </ul> 
        
      </div>
    </div>
    <empty v-show="isEmpty">
      <p class="note">納尼，竟然找不到這個(gè)人…</p>
    </empty>
  </div>  
</template>

<script>
import MeScroll from 'mescroll.js';
import 'mescroll.js/mescroll.min.css';
import Empty from './empty';
 const pageSize=10;
export default {
  name: 'SearchContent',
  props: {
    searchName: {
      type: String,
      default: ''
    },
    successInvite: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      dataList: [],
      mescroll: null, //mescroll實(shí)例對象
      totalPage:1,
      isEmpty:false
    }
  },
  components:{
    Empty 
  },
  watch: {
    'searchName' () {
      this.dataList = [];//要清空，不然有時(shí)候會出現(xiàn)上拉加載不了
      this.searchName !== '' && this.mescroll.resetUpScroll();
    }
  },
  mounted () {
    console.log(this.searchName)
    this.mescroll = new MeScroll(this.$refs.mescroll, { //在mounted初始化mescroll,確保此處配置的ref有值
      down:{isLock: true}, //下拉刷新的配置. (如果下拉刷新和上拉加載處理的邏輯是一樣的,則down可不用寫了)            
      up: {
          callback: this.upCallback,
          // 以下是一些常用的配置,當(dāng)然不寫也可以的.
          page: {
            num: 0, //當(dāng)前頁 默認(rèn)0,回調(diào)之前會加1; 即callback(page)會從1開始
            size: 10, //每頁數(shù)據(jù)條數(shù),默認(rèn)10
          },
          htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">正在加載中..</p>',
          htmlNodata: '<p class="upwarp-nodata" >當(dāng)當(dāng)當(dāng)~已經(jīng)到底啦~</p>',
          noMoreSize: 1, //如果列表已無數(shù)據(jù),可設(shè)置列表的總數(shù)量要大于5才顯示無更多數(shù)據(jù);
          isBounce: true,
      },
      down:{
        use:false
      },
    });
  },
  methods: {
     //點(diǎn)擊調(diào)起個(gè)人主頁
    openUserClick (item) {
      console.log(item)
      var userId = item;
       mui.openClient({"pageType": "userHome","userId":item});
    },
     //上拉回調(diào) page = {num:1, size:10}; num:當(dāng)前頁 ,默認(rèn)從1開始; size:每頁數(shù)據(jù)條數(shù),默認(rèn)10
    upCallback(page) {
      //聯(lián)網(wǎng)請求
      this.$request.post(_basePath + '/activity/page20191018/searchAll.html', {hintKey:this.searchName,searchType:91,pageNo:page.num,pageSize:page.size,actionSource:'07'}).then((response) => {
          if(response && response.resultList){
           // 請求的列表數(shù)據(jù)
            let result = response.resultList[0];
            let arr = result.list;
            // 如果是第一頁需手動置空列表
            if (page.num === 1) this.dataList = []
            // 把請求到的數(shù)據(jù)添加到列表
            this.dataList = this.dataList.concat(arr)
            // 數(shù)據(jù)渲染成功后,隱藏下拉刷新的狀態(tài)
            this.totalPage = result.total % pageSize > 0 ? Math.floor(result.total / 10 + 1) : result.total / 10;//計(jì)算總頁數(shù)超過就不loadMore
            this.$nextTick(() => {
                this.mescroll.endSuccess(arr.length);
                this.mescroll.endByPage(arr.length, this.totalPage)
            }) 
          }else{
            this.isEmpty = true;
            this.mescroll.endErr();
          }          
      }).catch(() => {
          this.mescroll.endErr();
      })
    },
    inviteClick(item) {
      this.$emit('inviteClick',item);
    }
}

}
</script>

<style lang="scss" scoped>
.mescroll {
  position: fixed;
  top: .9rem;
  bottom: 0;
  left:0;
  height: auto;
}
.search-content{
  padding:0 .24rem; 
  background: #121223;
  ul{
    height:auto;
    .item{
      display:flex;
      justify-content:space-between;
      align-items:center;
      width:100%;
      height:1.56rem;
      .personBlock{
        display:flex;
        justify-content: flex-start;
        align-items: center;
        .showImg{
          position:relative;
          width:1rem;
          height:1rem;
          margin-right:.16rem;
          border:.02rem solid #51516D;
          border-radius:50%;
          box-sizing: border-box;
          img{width:100%;height:100%;border-radius:50%}
          .icon{
            position: absolute;
            bottom:0;
            right:0;
            width:.28rem;
            height:.28rem;
            background-image:url();
            background-repeat:no-repeat;
            background-size:contain;
            &.c_company{background-image:url(../../images/c_company.png);}
            &.c_person{background-image:url(../../images/c_person.png);}
            &.c_kol{background-image:url(../../images/kol.png);}
          }
        }
        .showInfo{
          .name{font-size:.3rem;color:#fff;font-weight:500;line-height:.42rem;text-align:left;}
          .attentionCount{font-size:.26rem;font-weight:400;color:#716D80;text-align:left;}
        }
      }
      
      .sendBtn{
        width:1.44rem;
        height:.56rem;
        line-height:.56rem;
        background:#FF005E;
        border-radius:.28rem;
        color:#fff;
        text-align:center;
        &.active{background:#2C2B41;color:#fff}
      }
    }
  }
}  

</style>

watch: {
    'searchName' () {
      this.dataList = [];//要清空，不然有時(shí)候會出現(xiàn)上拉加載不了
      this.searchName !== '' && this.mescroll.resetUpScroll();
    }
  },

// html
<mescroll-uni top="100" @down="downCallback" @up="upCallback" @init="mescrollInit" :up="upOption" :down="downOption">

//data:
// 下拉刷新的常用配置
downOption: {
 use: true, // 是否啟用下拉刷新; 默認(rèn)true
 auto: false, // 是否在初始化完畢之后自動執(zhí)行下拉刷新的回調(diào); 默認(rèn)true
},
// 上拉加載的常用配置
upOption: {
 use: true, // 是否啟用上拉加載; 默認(rèn)true
 auto: true, // 是否在初始化完畢之后自動執(zhí)行上拉加載的回調(diào); 默認(rèn)true
 textNoMore:'我是有底線的 >_<',
 page: {
 num:0,
 size: 4
 }
},
list:[],

//methods:
// 下拉回調(diào)
downCallback(mescroll){
 mescroll.setPageNum(1)
 this.list = []
 mescroll.resetUpScroll(); 
 setTimeout(()=>{
 console.log(666);
 // 隱藏下拉加載狀態(tài)
 mescroll.endErr()
 },1000)
},
// 上拉回調(diào)
upCallback(mescroll){
 setTimeout(()=>{
 let pageNum = mescroll.num == 0 ? 1: mescroll.num; // 頁碼, 默認(rèn)從1開始
 let pageSize = mescroll.size;
 this.getPageList(pageNum, pageSize).then((res)=>{
  mescroll.endSuccess(res)
 })
 },1000)
}