- 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>