vue中的mescroll搜索运用及各种填坑处理-创新互联

父组件处理：

成都创新互联公司是一家集网站建设,西山企业网站建设,西山品牌网站建设,网站定制,西山网站建设报价,网络营销,网络优化,西山网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

<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">   
        <!-- 最近伙伴和我的关注 -->
        <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>
       <!-- 协议弹出层 -->
      <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:[],//列表数据
         totalPage:1,
         popuShow:false,//协议弹出层
         isScale:false,//比例弹出层
         scaleValue:'',//分成比例
         userId:'',
         isActive:true,//操作协议按钮灰色显示
         sencond:5,//秒数
         btntxt:'', //操作协议层按钮文字显示
         scaleValue:'',//分成比例
         scaleDesc:'',//比例弹窗描述
         scaleBtn:'',
         scaleCount:'50%',//默认分成比例
         successInvite: [],//默认未邀请
         protocolTitle:'',//协议标题
         protocolCon:'' //协议内容
      };
    },
    components:{FastChoice,PopUp,scale, SearchContent},
    watch: {
      keyword () {
        if (!this.keyword){
          return;
        }
      }
    },
    mounted() {
      this.protocolAjax(); 
    },
    methods: {
      //邀请
      inviteClick (item) {
       //点击邀请过的不予操作
       if(this.successInvite.indexOf(item.hwUserId) > -1 || item.inviteStatus){
         return;
       }
       this.isScale = true;
       this.userId = item.hwUserId;
       this.scaleDesc = '邀请成功后你可获取该用户部分收益，选择双方都认可的分成比例可以提高邀请成功率哦~';
       this.scaleBtn = '发送邀请';
       this.scaleCount = '50%';//邀请比例统一为50%
      },
      //点击发送邀请
      sendAjaxClick (value){
        this.scaleValue = value;
        this.popuShow = true;
        this.isScale = false;
        this.isActive = true;
        this.sencond = 5 ;
        this.timer();
      },
      //5s时间倒计时
      timer() {
        if (this.sencond > 0) {
          this.btntxt="已阅读同意并确认邀请("+this.sencond+"s)";
          this.sencond--;
          t=setTimeout(this.timer, 1000);     
        } else{
          this.isActive = false;
          this.sencond = 5;
          this.btntxt="已阅读同意并确认邀请";  
        }
      },
      //已阅读同意并确认
      confirmProtocol () {
        if(this.isActive){
          return false;
        }
        this.sendAjax();
      },
      //发送邀请请求
      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("已发送邀请，对方接受后会通知你哦",2000);
          this.closeActionClick();
        }).catch(() => {})
      },  
      //关闭操作协议弹窗
      closeActionClick() {
        this.popuShow = false;
        clearTimeout(t);//清除倒计时
      },
       //关闭分成比例弹窗
      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>

本文标题：vue中的mescroll搜索运用及各种填坑处理-创新互联
文章URL：https://www.cdcxhl.com/article6/dcgpog.html

成都网站建设公司_创新互联，为您提供外贸网站建设、手机网站建设、虚拟主机、网站营销、品牌网站制作、响应式网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联