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>