vue中的mescroll搜索運(yùn)用及各種填坑處理-創(chuàng)新互聯(lián)

父組件處理：

成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),西山企業(yè)網(wǎng)站建設(shè),西山品牌網(wǎng)站建設(shè),網(wǎng)站定制,西山網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,西山網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。 
<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>

本文標(biāo)題：vue中的mescroll搜索運(yùn)用及各種填坑處理-創(chuàng)新互聯(lián)
文章URL：http://muchs.cn/article6/dcgpog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)、虛擬主機(jī)、網(wǎng)站營銷、品牌網(wǎng)站制作、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

商城網(wǎng)站建設(shè)