1 <template> 2 <div class="bodyContainer"> 3 <div class="allContent" id="pageTop"> 4 <!-- 經紀人 --> 5 <div class="brokerBlock" v-show="isBroker && !loading"> 6 <broker :list="brokerInfo" v-show="Object.keys(brokerInfo).length>0" @change="protocolClick" @remove="reomoveBrokerClick"></broker> 7 </div> 8 <!-- 我的藝人 --> 9 <div class="con artistCon" v-show="artistTotal > 0"> 10 <div class="title " :class="{isFixed:!isBroker}" id="artistTitle"> 11 我的藝人<span class="gray">({{artistTotal}}位)</span> 12 </div> 13 <ul class="artistList"> 14 <li class="box artistItem" v-for="item of artistInfoList" :key="item.userInfo.userId" > 15 <div class="personBlock"> 16 <div class="person" @click="openUserClick(item.userInfo.userId)"> 17 <div class="showImg"> 18 <img :src="item.userInfo.userThumUrl" /> 19 <template v-if="item.userInfo.kolFlag"> 20 <div class="icon c_kol" v-if="item.userInfo.kolFlag"></div> 21 </template> 22 <template v-else> 23 <div class="icon c_company" v-if="item.userInfo.upSignType == '1'"></div> 24 <div class="icon c_person" v-if="item.userInfo.upSignType == '0'"></div> 25 </template> 26 </div> 27 <div class="name" :class="{artistName:item.isRelease || item.status>=1}">{{item.userInfo.nickName}}</div> 28 <div class="situation" v-if="item.isRelease">關系已解除</div> 29 <div class="situation" v-if="item.status == 1">帳號已凍結</div> 30 <div class="situation" v-if="item.status == 2">帳號已暫停</div> 31 </div> 32 <div class="action" v-if="item.userInfo"> 33 <em class="chatIcon" v-if="item.userInfo.userId" @click="openChatClick(item.userInfo.userId)"></em> 34 <em v-if="!item.isRelease" class="revisionIcon" @click="revisionClick(item)"></em> 35 <em v-if="!item.isRelease" class="removeIcon" @click="removeArtistClick(item.userInfo.hwUserId)"></em> 36 </div> 37 </div> 38 <div v-if="!item.isRelease" class="works">本周作品更新 {{item.weekOpusNum}}</div> 39 <div class="divideInfo" v-if="!item.isRelease"> 40 <span v-if="item.shareRate">TA的分成占比{{item.shareRate}}</span> 41 <span v-if="item.shareAmount">· 累計分取 {{regFenToYuan(item.shareAmount)}}</span> 42 </div> 43 <div class="divideInfo" v-if="item.isRelease && item.shareAmount"> 44 <span>累計分得{{regFenToYuan(item.shareAmount)}}</span> 45 </div> 46 <div v-if="item.isRelease" class="inviteAgainBtn" :class="{active:successInvite.indexOf(item.userInfo.hwUserId) > -1 }" @click="inviteClick(item.userInfo.hwUserId)">重新邀請</div> 47 <div class="tips" v-if="item.remark">{{item.remark}}</div> 48 <div v-if="!item.isRelease" class="protocol" @click="protocolClick">合作協議</div> 49 </li> 50 </ul> 51 <!-- 上拉加載 --> 52 <div class="loadTxt"><em v-if="lock" class="rotate"></em>{{loadTxt}}</div> 53 </div> 54 <!-- 全局加載 --> 55 <div class="loadContainer" v-if="loading"><em class="rotate"></em>正在加載中...</div> 56 <!-- 數據為空 --> 57 <empty v-if="Object.keys(brokerInfo).length < 1 && artistTotal < 1 && !loading"> 58 <p class="note">你還沒有經紀人和藝人哦</p> 59 <router-link class="invite" :to="inviteLink">邀請藝人</router-link> 60 </empty> 61 </div> 62 63 <router-link class="rule" :to="ruleLink">查看規則</router-link> 64 <div class="inviteBlock" v-if="Object.keys(brokerInfo).length > 0 || artistTotal > 0"> 65 <router-link class="inviteArtistBtn" :to="inviteLink">邀請藝人</router-link> 66 </div> 67 <!-- 協議彈出層 --> 68 <pop-up @change="closeLayer" v-if="popuShow"> 69 <template v-if="protocolPopShow"> 70 <h2 class="title">{{protocolTitle}}</h2> 71 <div class="content" v-html="protocolCon"></div> 72 <div class="confirmBtn" @click="closeNoClick">確認</div> 73 </template> 74 <template v-else-if="actionPopShow"> 75 <h2 class="title">{{protocolTitle}}</h2> 76 <div class="content" v-html="protocolCon"></div> 77 <div class="confirmBtn" :class="{active:isActive}" @click="confirmProtocol">{{btntxt}}</div> 78 <div class="popCloseCon" @click="closeActionClick"></div> 79 </template> 80 <template v-else-if="removePopshow"> 81 <div class="content center"> 82 解除關系后經紀人將不再獲得藝人的收益分成，對方同意后將在下個結算賬期生效 83 </div> 84 <div class="action"> 85 <div class="btn confirmRemove" @click="confirmRemoveClick">確認解除</div><div class="btn noConfirmRemove" @click="closeLayer">我再想想</div> 86 </div> 87 </template> 88 </pop-up> 89 <!-- 比例彈出層 --> 90 <scale @change="closeScale" @send="sendAjaxClick" :number="scaleCount" :scaleBtn="scaleBtn" :scaleDesc="scaleDesc" v-show="isScale" :userId="userId"></scale> 91 </div> 92 </template> 93 <script> 94 import broker from './components/broker'; 95 import empty from './components/empty'; 96 import PopUp from './components/PopUp'; 97 import scale from './components/scale'; 98 const pageSize=6; 99 let t=''; 100 export default { 101 name: "Index", 102 data() { 103 return { 104 popuShow:false, //彈窗展示 105 protocolPopShow:false,//經紀人協議 106 actionPopShow:false,//操作協議層 107 removePopshow:false,//解除確認操作層 108 isScale:false,//比例彈出層 109 ruleLink: '/rule.html', 110 inviteLink:'/search.html', 111 userId:'', 112 isActive:true,//操作協議按鈕灰色顯示 113 sencond:5,//秒數 114 btntxt:'', //操作協議層按鈕文字顯示 115 scaleValue:'',//分成比例 116 scaleDesc:'',//比例彈窗描述 117 scaleBtn:'', 118 scaleCount:'50%', 119 personValue:'',//藝人還是經紀人 120 brokerInfo:{}, //經紀人列表 121 artistInfoList:[], //查詢藝人列表 122 artistTotal:0,//查詢藝人列表總數 123 isShow:false, // 是否顯示滾動條 124 successInvite:[],//發送邀請成功的華為id取數 125 totalPage:1, 126 paramsValue:[], 127 searchBarFixed:'', 128 isBroker:true, 129 offsetTop:0, 130 loading: true, //一開始頁面就要加載 131 pageNo:1,//當前頁 132 lock : false, //當在請求數據時，滾動時鎖定不能再發送分頁請求 133 loadTxt:'' , 134 protocolTitle:'',//協議標題 135 protocolCon:'' //協議內容 136 }; 137 }, 138 components:{broker,empty,PopUp,scale}, 139 mounted: function () { 140 this.protocolAjax(); 141 this.broker(); 142 this.featchData(); 143 144 window.addEventListener('scroll', this.handleScroll); 145 }, 146 watch:{ 147 $route(to,from){ 148 window.scrollTo(0,20); 149 if(to.name == 'index'){ 150 window.addEventListener('scroll', this.handleScroll); 151 } else { 152 window.removeEventListener('scroll', this.handleScroll) 153 } 154 } 155 }, 156 methods: { 157 handleScroll () { 158 let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;//滾動條滾動的長度 159 let _offsetHeight = document.querySelector('#pageTop').offsetHeight; //是指元素內容的高度 160 let brokeHeight = document.querySelector('.brokerBlock').offsetHeight; //經紀人內容高度 161 let clientHeightValue = document.documentElement.clientHeight || document.body.clientHeight; 162 163 console.log("scrollTop",scrollTop,"_offsetHeight",_offsetHeight,"brokeHeight",brokeHeight,"clientHeightValue",clientHeightValue) 164 if(scrollTop > brokeHeight){ //滾動條滾動的距離超過經紀人的內容高度 165 this.isBroker = false; 166 }else{ 167 this.isBroker = true; 168 } 169 if(this.pageNo > 1){ 170 //距離底部距離50就加載數據 171 if(_offsetHeight - clientHeightValue - scrollTop <= 50 ){ 172 if (this.totalPage <= this.pageNo) { 173 setTimeout(() => { 174 //mui.toast("已經沒有更多了~"); 175 this.loadTxt='當當當~已經到底啦~'; 176 }, 300) 177 return; 178 }else{ 179 this.featchData(); 180 } 181 } 182 } 183 }, 184 //獲取數據函數 185 featchData:function (){ 186 //如果已經在加載數據，不可以重復加載 187 if (this.lock) return; 188 this.lock = true; 189 this.loadTxt='正在加載中...'; 190 this.$request.post(_basePath + '/activity/page20191018/queryArtistList.html',{pageNo:this.pageNo,pageSize:pageSize}).then((res) => { 191 this.artistTotal = res.total; 192 193 this.totalPage = res.total % pageSize > 0 ? Math.floor(res.total / pageSize + 1) : res.total / pageSize; 194 let result = []; 195 res.artistInfoList.forEach((item) =>{ 196 result.push(item.userInfo.hwUserId) 197 }) 198 this.$request.post(_basePath + '/activity/page20191018/batchQueryUserAccount.html',{userIdList:result}).then((res2) => { 199 res2.userAccountDetailList.forEach((item,i) =>{ 200 res.artistInfoList[i].status = item.status; 201 }) 202 this.artistInfoList = res.artistInfoList; 203 }).catch(() => {}); 204 205 this.artistInfoList = [...this.artistInfoList, ...res.artistInfoList]; 206 ++this.pageNo; 207 this.lock = false; 208 this.loading = false; 209 this.loadTxt=''; 210 }).catch(() => { 211 this.lock = false; 212 this.loading = false; 213 }) 214 }, 215 //查詢經紀人列表 216 broker () { 217 this.$request.post(_basePath + '/activity/page20191018/queryBroker.html').then((res) => { 218 let result = []; 219 result.push(res.brokerInfo.userInfo.hwUserId) 220 this.$request.post(_basePath + '/activity/page20191018/batchQueryUserAccount.html',{userIdList:result}).then((res2) => { 221 res.brokerInfo.status = res2.userAccountDetailList[0].status; 222 this.brokerInfo = res.brokerInfo; 223 }).catch(() => {}); 224 }).catch(() => {}) 225 }, 226 //點擊調起個人主頁 227 openUserClick (item) { 228 console.log(item) 229 var userId = item; 230 mui.openClient({"pageType": "userHome","userId":item}); 231 }, 232 //點擊調起聊天窗口 233 openChatClick (item){ 234 console.log(item) 235 var userId = item; 236 mui.openClient({"pageType": "chat","userId":item}); 237 }, 238 //藝人解除關系 239 removeArtistClick (id) { 240 //1:藝人，0 – 不是（只是校驗是否可以解約 241 this.userId = id; 242 this.personValue = 1; 243 this.releaseRelationship (1,0); 244 }, 245 //經紀人解除關系 246 reomoveBrokerClick (id) { 247 this.userId = id; 248 this.personValue = 0; 249 this.releaseRelationship (0,0); 250 }, 251 //重新調整分成比例 252 revisionClick (item) { 253 this.isScale = true; 254 this.userId = item.userInfo.hwUserId; 255 this.scaleCount = item.shareRate; 256 this.scaleDesc = '調整分成需對方確認，選擇雙方都認可的分成比例可以提高調整成功率哦~'; 257 this.scaleBtn = '確認調整'; 258 }, 259 //重新邀請 260 inviteClick (id) { 261 if(this.successInvite.indexOf(id) > -1){ 262 return; 263 } 264 this.isScale = true; 265 this.userId = id; 266 this.scaleDesc = '邀請成功后你可獲取該用戶部分收益，選擇雙方都認可的分成比例可以提高邀請成功率哦~'; 267 this.scaleBtn = '發送邀請'; 268 this.scaleCount = '50%';//邀請比例統一為50% 269 }, 270 //點擊發送邀請 271 sendAjaxClick (value){ 272 273 this.scaleValue = value; 274 this.popuShow = true; 275 this.actionPopShow = true;//操作協議層展示 276 this.isScale = false; 277 this.isActive = true; 278 this.sencond = 5 ; 279 this.timer(); 280 }, 281 //5s時間倒計時 282 timer () { 283 if (this.sencond > 0) { 284 if(this.scaleDesc.indexOf("調整") > -1){ 285 this.btntxt="已閱讀同意並確認調整("+this.sencond+"s)"; 286 }else{ 287 this.btntxt="已閱讀同意並確認邀請("+this.sencond+"s)"; 288 } 289 this.sencond--; 290 t=setTimeout(this.timer, 1000); 291 } else{ 292 this.isActive = false; 293 this.sencond = 5; 294 if(this.scaleDesc.indexOf("調整") > -1){ 295 this.btntxt="已閱讀同意並確認調整"; 296 }else{ 297 this.btntxt="已閱讀同意並確認邀請"; 298 } 299 300 } 301 }, 302 //已閱讀同意並確認 303 confirmProtocol () { 304 if(this.isActive){ 305 return false; 306 } 307 if(this.scaleDesc.indexOf("調整") > -1){ 308 //比例調整請求 309 this.revisionAjax(); 310 }else{ 311 //邀請請求 312 this.sendAjax(); 313 } 314 315 }, 316 //發送邀請請求 317 sendAjax () { 318 this.$request.post(_basePath + '/activity/page20191018/inviteArtist.html',{userId: this.userId,shareRate:this.scaleValue}).then((res) => { 319 mui.toast("已發送邀請，對方接受后會通知你哦",2000); 320 this.successInvite.push(this.userId); 321 this.closeActionClick(); 322 }).catch(() => {}) 323 }, 324 //調整比例請求 325 revisionAjax () { 326 this.$request.post(_basePath + '/activity/page20191018/adjustShareRate.html',{userId: this.userId,shareRate:this.scaleValue}).then((res) => { 327 mui.toast("已發送調整消息，對方接受后會通知你哦",2000); 328 this.closeActionClick(); 329 }).catch(() => {}) 330 }, 331 //解除關系操縱請求 332 releaseRelationship (a,b) { 333 //a 0:經紀人 1藝人 334 //b 0：校驗 1：可以解約請求 335 this.$request.post(_basePath + '/activity/page20191018/releaseRelationship.html',{userId: this.userId,role:a,realRelease:b}).then((res) => { 336 // mui.toast("已發送解除消息，對方接受后會通知你哦",2000); 337 if(res.releaseStatus == '0'){ //不能解約 338 mui.toast(res.remark,2000) 339 }else if(res.releaseStatus == 1){ //可解約 340 this.popuShow = true; 341 this.actionPopShow = false; 342 this.protocolPopShow = false; 343 this.removePopshow = true; 344 }else if(res.releaseStatus == 2){ 345 mui.toast("已發送解除消息，對方接受后會通知你哦",2000); 346 } 347 }).catch(() => {}) 348 }, 349 //確認解除 350 confirmRemoveClick(){ 351 this.closeLayer(); 352 console.log(this.personValue); 353 this.releaseRelationship (this.personValue,1) 354 }, 355 356 //關閉操作協議彈窗 357 closeActionClick() { 358 this.popuShow = false; 359 this.actionPopShow = false; 360 clearTimeout(t);//清除倒計時 361 }, 362 //點擊合作協議 363 protocolClick(){ 364 this.protocolPopShow = true; 365 this.popuShow = true; 366 }, 367 368 //關閉彈窗 369 closeLayer(){ 370 this.popuShow = false; 371 this.actionPopShow = false; 372 this.protocolPopShow = false; 373 this.removePopshow = false; 374 clearTimeout(t);//清除倒計時 375 }, 376 //關閉解除操作確認 377 closeNoClick () { 378 this.popuShow = false; 379 this.protocolPopShow = false; 380 }, 381 //關閉分成比例彈窗 382 closeScale(){ 383 this.isScale = false; 384 }, 385 //分轉為元 386 regFenToYuan (fen) { 387 var num = fen; 388 num=fen*0.01; 389 num+=''; 390 var reg = num.indexOf('.') >-1 ? /(\d{1,3})(?=(?:\d{3})+\.)/g : /(\d{1,3})(?=(?:\d{3})+$)/g; 391 num=num.replace(reg,'$1'); 392 num = this.toDecimal2(num) 393 return num 394 }, 395 toDecimal2 (x) { 396 var f = parseFloat(x); 397 if (isNaN(f)) { 398 return false; 399 } 400 var f = Math.round(x * 100) / 100; 401 var s = f.toString(); 402 var rs = s.indexOf('.'); 403 if (rs < 0) { 404 rs = s.length; 405 s += '.'; 406 } 407 while (s.length <= rs + 2) { 408 s += '0'; 409 } 410 return s; 411 }, 412 //協議請求 413 protocolAjax() { 414 this.$request.post(_basePath + '/activity/page20191018/queryProtocol.html',{type:0}).then((res) => { 415 this.protocolTitle = res.title; 416 this.protocolCon = res.content; 417 }).catch(() => {}) 418 } 419 }, 420 destroyed() { 421 window.removeEventListener('scroll', this.handleScroll) 422 } 423 }; 424 </script> 425 426 <style lang="scss" scoped> 427 @import "index"; 428 .artistCon{padding-bottom:1.8rem;} 429 .loadTxt{ 430 margin-top:.2rem; 431 height:.4rem; 432 line-height:.4rem; 433 text-align:center; 434 color:#B6B3C5; 435 font-size:.24rem; 436 } 437 438 .allContent{ 439 overflow:auto; 440 -webkit-overflow-scrolling: touch; 441 442 } 443 #pageTop{ 444 .isFixed{ 445 position:fixed; 446 top:0; 447 z-index:100; 448 height:.9rem; 449 background: #121223; 450 width:100%; 451 } 452 } 453 </style>
注意事項
1、監聽滾動處理scroll
1 mounted: function () { 2 this.protocolAjax(); 3 this.broker(); 4 this.featchData(); 5 6 window.addEventListener('scroll', this.handleScroll); 7 },
2、跳到另外一個頁面再此返回手機上會出現一個黑屏，觸摸才會把黑屏去掉，解決辦法就是在返回頁面的時候，再滾動到頂部
1 watch:{ 2 $route(to,from){ 3 window.scrollTo(0,20); 4 if(to.name == 'index'){ 5 window.addEventListener('scroll', this.handleScroll); 6 } else { 7 window.removeEventListener('scroll', this.handleScroll) 8 } 9 } 10 },
3、scroll完以后要destroy
1 destroyed() { 2 window.removeEventListener('scroll', this.handleScroll) 3 }
4、分頁滾動處理
1 //獲取數據函數 2 featchData:function (){ 3 //如果已經在加載數據，不可以重復加載 4 if (this.lock) return; 5 this.lock = true; 6 this.loadTxt='正在加載中...'; 7 this.$request.post(_basePath + '/activity/page20191018/queryArtistList.html',{pageNo:this.pageNo,pageSize:pageSize}).then((res) => { 8 this.artistTotal = res.total; 9 10 this.totalPage = res.total % pageSize > 0 ? Math.floor(res.total / pageSize + 1) : res.total / pageSize; 11 let result = []; 12 res.artistInfoList.forEach((item) =>{ 13 result.push(item.userInfo.hwUserId) 14 }) 15 this.$request.post(_basePath + '/activity/page20191018/batchQueryUserAccount.html',{userIdList:result}).then((res2) => { 16 res2.userAccountDetailList.forEach((item,i) =>{ 17 res.artistInfoList[i].status = item.status; 18 }) 19 this.artistInfoList = res.artistInfoList; 20 }).catch(() => {}); 21 22 this.artistInfoList = [...this.artistInfoList, ...res.artistInfoList]; 23 ++this.pageNo; 24 this.lock = false; 25 this.loading = false; 26 this.loadTxt=''; 27 }).catch(() => { 28 this.lock = false; 29 this.loading = false; 30 }) 31 },
1 handleScroll () { 2 let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;//滾動條滾動的長度 3 let _offsetHeight = document.querySelector('#pageTop').offsetHeight; //是指元素內容的高度 4 let brokeHeight = document.querySelector('.brokerBlock').offsetHeight; //經紀人內容高度 5 let clientHeightValue = document.documentElement.clientHeight || document.body.clientHeight; 6 7 console.log("scrollTop",scrollTop,"_offsetHeight",_offsetHeight,"brokeHeight",brokeHeight,"clientHeightValue",clientHeightValue) 8 if(scrollTop > brokeHeight){ //滾動條滾動的距離超過經紀人的內容高度 9 this.isBroker = false; 10 }else{ 11 this.isBroker = true; 12 } 13 if(this.pageNo > 1){ 14 //距離底部距離50就加載數據 15 if(_offsetHeight - clientHeightValue - scrollTop <= 50 ){ 16 if (this.totalPage <= this.pageNo) { 17 setTimeout(() => { 18 //mui.toast("已經沒有更多了~"); 19 this.loadTxt='當當當~已經到底啦~'; 20 }, 300) 21 return; 22 }else{ 23 this.featchData(); 24 } 25 } 26 } 27 },