1 <template>
  2        <div class="wrap">
  3             <!-- 搜索框 -->
  4             <div class="searchInputArea">
  5                 <div class="searchBarBox">
  6                     <div class="inputWrap" >
  7                         <form onsubmit="javascript:return false" action>
  8                             <input :placeholder = "placeholderStr" type="search" ref = "input" v-model="keyword"  />
  9                             <span class="clearBtn" v-show="keyword" @click="clear"></span>      
 10                         </form>   
 11                     </div> 
 12                 </div>
 13             </div>  
 14             <div class="myFastChoiceBlock" v-show="!keyword">      
 15                 <!-- 最近伙伴和我的关注 -->
 16                 <fast-choice :successInvite="successInvite" @invite="inviteClick"></fast-choice>
 17             </div>   
 18             <div class="searchContainer">           
 19                 <search-content :searchName="keyword" :successInvite="successInvite" @inviteClick="inviteClick" v-if="keyword !== ''"></search-content>
 20             </div>
 21              <!-- 协议弹出层 -->
 22             <pop-up @change="closeLayer" v-if="popuShow">
 23                 <h2 class="title">{{protocolTitle}}</h2>
 24                 <div class="content" v-html="protocolCon"></div>
 25                 <div class="confirmBtn" :class="{active:isActive}"  @click="confirmProtocol">{{btntxt}}</div>
 26                 <div class="popCloseCon" @click="closeActionClick"></div>
 27             </pop-up>
 28             <!-- 比例弹出层 -->
 29             <scale @change="closeScale" @send="sendAjaxClick" :number="scaleCount" :scaleBtn="scaleBtn"  :scaleDesc="scaleDesc"  v-show="isScale" :userId="userId"></scale>
 30        </div>
 31 </template>
 32 
 33 <script>
 34     import FastChoice from './components/fastChoice';
 35     import PopUp from './components/PopUp';
 36     import scale from './components/scale';
 37     import SearchContent from './components/searchContent';
 38     const pageSize=10;
 39     let t='';
 40     export default {
 41         name: "Search",
 42         data() {
 43             return {
 44                  placeholderStr: '搜一搜你想找的TA',
 45                  keyword: '',
 46                  list: [],
 47                  timerKey: null,
 48                  dataList:[],//列表数据
 49                  totalPage:1,
 50                  popuShow:false,//协议弹出层
 51                  isScale:false,//比例弹出层
 52                  scaleValue:'',//分成比例
 53                  userId:'',
 54                  isActive:true,//操作协议按钮灰色显示
 55                  sencond:5,//秒数
 56                  btntxt:'',  //操作协议层按钮文字显示
 57                  scaleValue:'',//分成比例
 58                  scaleDesc:'',//比例弹窗描述
 59                  scaleBtn:'',
 60                  scaleCount:'50%',//默认分成比例
 61                  successInvite: [],//默认未邀请
 62                  protocolTitle:'',//协议标题
 63                  protocolCon:'' //协议内容
 64             };
 65         },
 66         components:{FastChoice,PopUp,scale, SearchContent},
 67         watch: {
 68             keyword () {
 69                 if (!this.keyword){
 70                     return;
 71                 }
 72             }
 73         },
 74         mounted() {
 75            this.protocolAjax(); 
 76         },
 77         methods: {
 78             //邀请
 79             inviteClick (item) {
 80               //点击邀请过的不予操作
 81               if(this.successInvite.indexOf(item.hwUserId) > -1 || item.inviteStatus){
 82                  return;
 83               }
 84               this.isScale = true;
 85               this.userId = item.hwUserId;
 86               this.scaleDesc = '邀请成功后你可获取该用户部分收益，选择双方都认可的分成比例可以提高邀请成功率哦~';
 87               this.scaleBtn = '发送邀请';
 88               this.scaleCount = '50%';//邀请比例统一为50%
 89             },
 90             //点击发送邀请
 91             sendAjaxClick (value){
 92                 this.scaleValue = value;
 93                 this.popuShow = true;
 94                 this.isScale = false;
 95                 this.isActive = true;
 96                 this.sencond = 5 ;
 97                 this.timer();
 98             },
 99             //5s时间倒计时
100             timer() {
101                 if (this.sencond > 0) {
102                     this.btntxt="已阅读同意并确认邀请("+this.sencond+"s)";
103                     this.sencond--;
104                     t=setTimeout(this.timer, 1000);          
105                 } else{
106                     this.isActive = false;
107                     this.sencond = 5;
108                     this.btntxt="已阅读同意并确认邀请";    
109                 }
110             },
111             //已阅读同意并确认
112             confirmProtocol () {
113                 if(this.isActive){
114                     return false;
115                 }
116                 this.sendAjax();
117             },
118             //发送邀请请求
119             sendAjax () {
120                 console.log(this.scaleValue);
121                 let dd = this.scaleValue.toString();
122                 this.$request.post(_basePath + '/activity/page20191018/inviteArtist.html',{userId: this.userId,shareRate:this.scaleValue}).then((res) => {
123                     this.successInvite.push(this.userId) ;
124                     mui.toast("已发送邀请，对方接受后会通知你哦",2000);
125                     this.closeActionClick();
126                 }).catch(() => {})
127             },   
128             //关闭操作协议弹窗
129             closeActionClick() {
130                 this.popuShow = false;
131                 clearTimeout(t);//清除倒计时
132             },
133              //关闭分成比例弹窗
134             closeScale () {
135                this.isScale = false; 
136             },
137             clear () {
138                 this.keyword = "";
139                 this.$refs["input"].focus();
140             },
141             protocolAjax () {
142                  this.$request.post(_basePath + '/activity/page20191018/queryProtocol.html',{type:0}).then((res) => {
143                  this.protocolTitle = res.title;
144                  this.protocolCon = res.content;
145                 }).catch(() => {})
146             }
147         },
148     };
149 </script>
150 
151 <style lang="scss" scoped>
152  @import "search";
153 </style>

  1 <template>
  2     <div>
  3         <div ref="mescroll" class="mescroll">
  4             <div class="search-content wrapper" ref="scroller" >  
  5                 <ul>
  6                     <li class="item"  v-for="(item,index) in dataList" :key="index">
  7                         <div class="personBlock" @click="openUserClick(item.userDetail.userId)">
  8                             <div class="showImg">
  9                                 <img :src="item.userDetail.userThumUrl" />
 10                                 <template  v-if="item.userDetail.kolFlag">
 11                                     <em v-if="item.userDetail.kolFlag" class="icon c_kol"></em>
 12                                 </template>
 13                                 <template  v-else>
 14                                     <em class="icon c_company" v-if="item.userDetail.upSignType == '1'"></em>
 15                                     <em class="icon c_person" v-if="item.userDetail.upSignType == '0'"></em>
 16                                 </template>
 17                                 
 18                             </div>
 19                             <div class="showInfo">
 20                                 <div class="name">{{item.userDetail.nickName}}</div>
 21                                 <div class="attentionCount">
 22                                     {{item.userDetail.fansCount || 0}}人关注TA
 23                                 </div>
 24                             </div>
 25                         </div>
 26                         <div class="sendBtn" :class="{active:item.userDetail.inviteStatus || (successInvite.indexOf(item.userDetail.hwUserId) > -1 ) }"  @click="inviteClick(item.userDetail)">
 27                             <span v-if="item.userDetail.inviteStatus || successInvite.indexOf(item.userDetail.hwUserId) > -1">已邀请</span>
 28                             <span v-else>邀请</span>
 29                         </div>
 30                     </li>  
 31                 </ul> 
 32                 
 33             </div>
 34         </div>
 35         <empty v-show="isEmpty">
 36             <p class="note">纳尼，竟然找不到这个人…</p>
 37         </empty>
 38     </div>    
 39 </template>
 40 
 41 <script>
 42 import MeScroll from 'mescroll.js';
 43 import 'mescroll.js/mescroll.min.css';
 44 import Empty from './empty';
 45  const pageSize=10;
 46 export default {
 47     name: 'SearchContent',
 48     props: {
 49         searchName: {
 50             type: String,
 51             default: ''
 52         },
 53         successInvite: {
 54             type: Array,
 55             default: []
 56         }
 57     },
 58     data() {
 59         return {
 60             dataList: [],
 61             mescroll: null, //mescroll实例对象
 62             totalPage:1,
 63             isEmpty:false
 64         }
 65     },
 66     components:{
 67        Empty 
 68     },
 69     watch: {
 70         'searchName' () {
 71             this.dataList = [];//要清空，不然有时候会出现上拉加载不了
 72             this.searchName !== '' && this.mescroll.resetUpScroll();
 73         }
 74     },
 75     mounted () {
 76         console.log(this.searchName)
 77         this.mescroll = new MeScroll(this.$refs.mescroll, { //在mounted初始化mescroll,确保此处配置的ref有值
 78             down:{isLock: true}, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则down可不用写了)                       
 79             up: {
 80                     callback: this.upCallback,
 81                     // 以下是一些常用的配置,当然不写也可以的.
 82                     page: {
 83                         num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
 84                         size: 10, //每页数据条数,默认10
 85                     },
 86                     htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">正在加载中..</p>',
 87                     htmlNodata: '<p class="upwarp-nodata" style="height:.4rem">当当当~已经到底啦~</p>',
 88                     noMoreSize: 1, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
 89                     isBounce: true,
 90             },
 91             down:{
 92                 use:false
 93             },
 94         });
 95     },
 96     methods: {
 97          //点击调起个人主页
 98         openUserClick (item) {
 99             console.log(item)
100             var userId = item;
101              mui.openClient({"pageType": "userHome","userId":item});
102         },
103          //上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
104         upCallback(page) {
105             //联网请求
106             this.$request.post(_basePath + '/activity/page20191018/searchAll.html', {hintKey:this.searchName,searchType:91,pageNo:page.num,pageSize:page.size,actionSource:'07'}).then((response) => {
107                     if(response && response.resultList){
108                       // 请求的列表数据
109                         let result = response.resultList[0];
110                         let arr = result.list;
111                         // 如果是第一页需手动置空列表
112                         if (page.num === 1) this.dataList = []
113                         // 把请求到的数据添加到列表
114                         this.dataList = this.dataList.concat(arr)
115                         // 数据渲染成功后,隐藏下拉刷新的状态
116                         this.totalPage = result.total % pageSize > 0 ? Math.floor(result.total / 10 + 1) : result.total / 10;//计算总页数超过就不loadMore
117                         this.$nextTick(() => {
118                                 this.mescroll.endSuccess(arr.length);
119                                 this.mescroll.endByPage(arr.length, this.totalPage)
120                         }) 
121                     }else{
122                         this.isEmpty = true;
123                         this.mescroll.endErr();
124                     }                    
125             }).catch(() => {
126                     this.mescroll.endErr();
127             })
128         },
129         inviteClick(item) {
130             this.$emit('inviteClick',item);
131         }
132 }
133 
134 }
135 </script>
136 
137 <style lang="scss" scoped>
138 .mescroll {
139     position: fixed;
140     top: .9rem;
141     bottom: 0;
142     left:0;
143     height: auto;
144 }
145 .search-content{
146     padding:0 .24rem; 
147     background: #121223;
148     ul{
149         height:auto;
150         .item{
151             display:flex;
152             justify-content:space-between;
153             align-items:center;
154             width:100%;
155             height:1.56rem;
156             .personBlock{
157                 display:flex;
158                 justify-content: flex-start;
159                 align-items: center;
160                 .showImg{
161                     position:relative;
162                     width:1rem;
163                     height:1rem;
164                     margin-right:.16rem;
165                     border:.02rem solid #51516D;
166                     border-radius:50%;
167                     box-sizing: border-box;
168                     img{width:100%;height:100%;border-radius:50%}
169                     .icon{
170                         position: absolute;
171                         bottom:0;
172                         right:0;
173                         width:.28rem;
174                         height:.28rem;
175                         background-image:url();
176                         background-repeat:no-repeat;
177                         background-size:contain;
178                         &.c_company{background-image:url(../../images/c_company.png);}
179                         &.c_person{background-image:url(../../images/c_person.png);}
180                         &.c_kol{background-image:url(../../images/kol.png);}
181                     }
182                 }
183                 .showInfo{
184                     .name{font-size:.3rem;color:#fff;font-weight:500;line-height:.42rem;text-align:left;}
185                     .attentionCount{font-size:.26rem;font-weight:400;color:#716D80;text-align:left;}
186                 }
187             }
188             
189             .sendBtn{
190                 width:1.44rem;
191                 height:.56rem;
192                 line-height:.56rem;
193                 background:#FF005E;
194                 border-radius:.28rem;
195                 color:#fff;
196                 text-align:center;
197                 &.active{background:#2C2B41;color:#fff}
198             }
199         }
200     }
201 }    
202 
203 </style>