1 <template> 2 <div class="wrap"> 3 <!-- 搜索框 --> 4 <div class="searchInputArea"> 5 <div class="searchBarBox"> 6 <div class="inputWrap" > 7 <form onsub ...
父組件處理：
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>View Code
子組件處理：
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>View Code
填坑處理：v-if="keyword !== ''"來判斷載入子組件的條件，然後子組件通過監聽keyword的變化，重置mescroll：如下：
1、用戶未輸入搜索關鍵詞時，mescroll不能就直接初始話，要在用戶輸入的時候才能初始化，所以子組件就接受了父組件的keyword，並用
watch: {
'searchName' () {
this.dataList = [];//要清空，不然有時候會出現上拉載入不了
this.searchName !== '' && this.mescroll.resetUpScroll();
}
},
2、搜索完以後點擊搜索輸入框右邊里的關閉按鈕，發現其他列表不能滑動。解決方法：要加：isBounce: true,
