acfun统计。
目前为
// ==UserScript== // @name acfun统计 // @description acfun统计。 // @namespace syachiku // @author syachiku // @include https://www.acfun.cn/member* // @include https://www.acfun.cn/v/ac* // @run-at document-start // @grant GM_addStyle // @grant GM_xmlhttpRequest // @grant GM_getResourceText // @grant GM_getResourceURL // @version 0.1.1.2 // @require https://cdn.jsdelivr.net/npm/[email protected]/dist/qs.min.js // @require https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/uuidv4.min.js // @require https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js // @require https://cdn.jsdelivr.net/npm/[email protected]/min/moment.min.js // @require https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js // @require https://cdn.jsdelivr.net/npm/[email protected]/lib/index.min.js // @require https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js // @require https://cdn.jsdelivr.net/npm/[email protected]/dist/FileSaver.min.js // @require https://cdn.jsdelivr.net/npm/[email protected]/dist/exceljs.min.js // @require https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js // @require https://cdn.jsdelivr.net/npm/[email protected]/dist/viewer.min.js // @require https://cdn.jsdelivr.net/npm/[email protected]/nerdamer.core.min.js // @resource elementcss https://cdn.jsdelivr.net/npm/[email protected]/lib/theme-chalk/index.css // @resource element-icons https://cdn.jsdelivr.net/npm/[email protected]/lib/theme-chalk/fonts/element-icons.ttf // @resource viewercss https://cdn.jsdelivr.net/npm/[email protected]/dist/viewer.min.css // ==/UserScript== ;(async function(){ Vue.use(ELEMENT); Vue.prototype.$message = ELEMENT.Message; const config = { ACFUN_SERVER : 'https://www.acfun.cn', ACFUN_MOBILE_SERVER : 'https://m.acfun.cn', ACFUN_API_SERVER : 'https://api-ipv6.app.acfun.cn', ACFUNLIVE_SERVER : 'https://live.acfun.cn', ACFUN_TOKEN_SERVER : 'https://id.app.acfun.cn', KUAISHOU_SERVER : 'https://kuaishouzt.com', ACFUN_GIF_SERVER : 'https://zt.gifshow.com/', URLS : { ACFUN_USER : { MAIN : '/member', INFO : '/rest/pc-direct/user/userInfo', PUSH : '/member/feeds', SPACE : '/u', FEED : '/rest/app/feed/followFeedV2', IS_BLOCKED : '/rest/app/user/block/isBlock', FEED_PROFILE : '/rest/app/feed/profile', }, WALLET : { SEND_GIFT : '/rest/apph5-direct/pay/reward/giveRecords', RECEIVE_GIFT : '/rest/apph5-direct/pay/reward/receiveRecords', }, TOKEN : { GET_TOKEN : '/rest/web/token/get', }, INTERACT : { ADD : '/rest/zt/interact/add', DELETE : '/rest/zt/interact/delete', COLLECT : '/rest/app/favorite', UNCOLLECT : '/rest/app/unFavorite', THROW_BANANA : '/rest/app/banana/throwBanana', }, GIF : { LIST : '/rest/zt/emoticon/package/list', }, GIFT : { LIST : '/rest/zt/live/gift/all', }, RESOURCE : { COMMENT : '/rest/app/comment/list', SUB_COMMENT : '/rest/app/comment/sublist', }, }, HEADERS : { ACFUN_API_SERVER : { acPlatform : 'ANDROID_PHONE', appVersion : '6.43.0.513', }, KUAISHOU_SERVER : { cookie : document.cookie, origin : 'https://www.acfun.cn', referer: 'https://www.acfun.cn/', }, }, UBB : { PATTERN : { AT : /\[at\s+uid=(?<uid>\d+)\]\@(?<userName>.+?)\[\/at\]/g, IMG : /\[img=(?<title>.+?)\](?<url>.+?)\[\/img\]/g, EMOT : /\[emot=[0-9a-zA-Z]*,(?<id>[0-9a-zA-Z]+?)\/\]/g, }, }, VERIFIED_TYPE : { MONKEY : 1, OFFICIAL : 2, AVI : 3, UP_COLLEGE : 5, }, KUAISHOU : { SID : 'acfun.midground.api', KPN : 'ACFUN_APP', KPF : 'PC_WEB', SUBBIZ : 'mainApp', }, PAGE : { PAGESIZE : 20, }, VUP : [13722552, 23682490, 2869300, 243278, 37693149, 36115445, 4209327, 41230276, 265135, 40909488, 38085972, 34195163, 36782183, 20680343, 34154121, 36544712, 37934837, 2494933, 638405, 32098395, 36694691, 35948175, 36424299, 36526321, 37901408, 12656144, 4425861, 1425669, 13707663, 41107216, 7005405, 35863426, 38330313, 13877450, 39628089, 472630, 41254970, 12703493, 13971213, 35119946, 14449482, 40837172, 13973820, 41062897, 26090924, 23118761, 8125299, 2531957, 39953383, 34611213, 2947895, 35764170, 17777390, 369511, 17380058, 421952, 64441, 37662640, 36117178, 2321079, 797929, 41531703, 33060288, 34934622, 445338, 14500422, 40685184, 279106, 41086322, 34288617, 40056188, 14136064, 30064507, 179922, 38415057, 29652543, 40656720, 1236468, 11143550, 36853070, 605382, 20806699, 33873163, 13942878, 1005951, 31827419, 32844838, 32448048, 34743261, 824281, 33747640, 30344247, 33133627, 17511164, 16559892, 281592, 8500263, 922344, 30352828, 156843, 38393515, 36782454, 32018526, 36665878, 33523936, 40533362, 23738302, 13706346, 35847915, 33356650, 12696349, 5981678, 4427057, 426155, 37181305, 42012804, 34235815, 41955085, 33551100, 13715631, 173620, 26922112, 13945614, 26055450, 3568347, 34905158, 2501, 40740702, 34878269, 13847612, 34968669, 957980, 41581859, 32441412, 6144047, 8864786, 207893, 31967179, 12152626, 16817638, 3473754, 36846901, 712387, 39854908, 17912421, 12891327, 17943098, 1308727, 6851521, 1600171, 34015103, 34785904, 18284887, 36429189, 41161644, 32095190, 4770973, 38651218, 36493618, 138810, 32483115, 36419533, 34878375, 12061153, 251750, 34210520, 13783338, 34412780, 35979929, 39880948, 13747109, 1744181, 13146389, 38068231, 13617066, 40822239, 34195269, 652096, 34267306, 35213225, 31541670, 261980, 23638807, 67073, 3206664, 42094122, 41086280, 42281494, 20543116, 36626547, 316003, 6011113, 17601567, 41086366, 34261972, 16203556, 26035486, 26675034, 14129090, 19469544, 6125244, 880716, 14073450, 32619650, 13288440, 23737978, 37540450, 5938017, 9378772, 32812696, 10644252, 19751874, 36624899, 35422484, 32461770, 33836710, 33937905, 25846636, 39289326, 37296847, 39876394, 35980635, 10062768, 1045560, 31834850, 33366289, 16300936, 35146763, 33070412, 31930322, 3156144, 31798936, 35924649, 32917077, 41529501, 14168480, 29945722, 337056, 32706742, 335814, 17136328, 13846646, 6114412, 21654061, 13747679, 23984515, 23984768, 32565979, 35889531, 31425941, 32505631, 36571875, 23984366, 4240095, 462905, 869660, 30749208, 1323824, 33531528, 12972680, 21626450, 38109076, 19302348, 36625184, 1963847, 10406618, 39373823, 37522724, 34144920, 32623529, 1851701, 28626748, 34035144, 42413523, 41420265, 36171544, 42551921, 10028588, 42692747, 33023277, 40065559, 12048958, 40450694, 44026597, 36936805, 42707250, 42703582, 44753354, 12645128, 6092018, 43250076, 42863321, 42910834, 21616835, 4623706, 44672969, 41077579, 28741368, 25956307, 7822884, 43663910], }; // 是否为空 function isNullOrEmpty(val){ return _.isUndefined(val) || _.isNull(val) || _.isNaN(val) || (((_.isObject(val) && !_.isDate(val)) || _.isArray(val) || _.isString(val)) && _.isEmpty(val)) } function matchAll(text, pattern){ var result = []; for(var match of text.matchAll(pattern)){ result.push({ text : match[0], groups : match.groups, }); } return result; } // 通用请求 function commonRequrest(url, method, form, raw, callback, headers){ var isSuccess = false; var data = null; if(!headers){ headers = {}; } if(method == 'post'){ headers['Content-Type'] = 'application/x-www-form-urlencoded'; if(form){ form = Qs.stringify(form); } } if(method == 'get' && form){ form = Qs.stringify(form); url += '?' + form; } // 获取了token if(config.TOKEN){ headers['Authorization'] = `Token ${config.TOKEN}`; } GM_xmlhttpRequest({ synchronous : !_.isFunction(callback), method : method.toUpperCase(), url : url, data : form, headers : _.clone(headers), onload : function(res){ // 200 if(res.status==200){ if(raw){ callback(true, res.responseText); } else{ res = JSON.parse(res.responseText); isSuccess = res[config.RESPONSE.FIELD.STATUS] == config.RESPONSE.STATUS.SUCCESS; data = res[config.RESPONSE.FIELD.DATA]; if(_.isFunction(callback)){ callback(isSuccess, data); } } } else{ if(_.isFunction(callback)){ callback(isSuccess, data); } } }, onerror : function(){ if(_.isFunction(callback)){ callback(isSuccess, data); } }, onabort : function(){ if(_.isFunction(callback)){ callback(isSuccess, data); } }, }); return [isSuccess, data]; } var cssResourceRequested = []; async function addResource(type, name){ if(cssResourceRequested.indexOf(name)!=-1){ return; } cssResourceRequested.push(name); if(type == 'css'){ var content = await GM_getResourceText(name); if(content){ GM_addStyle(content); } } else if(type == 'font'){ var content = await GM_getResourceURL(name); if(content){ content = content.replace('data:application;base64,', ''); GM_addStyle(` @font-face{ font-family:${name}; src:url(data:font/truetype;charset=utf-8;base64,${content})format('truetype'); } `); } } } var statVue = null; var feedVue = null; var videoVue = null; // 加载统计页面Vue实例 function loadStatVue(){ // 若vue已实例化，且对应的el元素存在，则表示已加载结束 if(statVue && !document.querySelector('#acfunstat-container')){ return true; } // 容器 var navEle = document.querySelector('.ac-member-navigation'); // 容器不存在 if(!navEle){ return false; } // 添加导航选项 var navItem = document.createElement('a'); navItem.classList.add('ac-member-navigation-item'); navItem.innerHTML = ` <span class="ac-icon"><i class="iconfont"></i></span>统计 `; // 监听点击事件 navItem.addEventListener('click', function(e){ e.stopPropatation = true; // 若vue已实例化，且对应的el元素存在，则表示已加载结束 if(statVue && !document.querySelector('#acfunstat-container')){ return; } // 删除其它菜单项的active类 var activeNavItem = navEle.querySelector('.router-link-exact-active'); activeNavItem.classList.remove('router-link-exact-active'); activeNavItem.classList.remove('ac-member-navigation-item-active'); // 添加active类 navItem.classList.add('router-link-exact-active'); navItem.classList.add('ac-member-navigation-item-active'); // 添加element-ui样式 addResource('css', 'elementcss'); addResource('font', 'element-icons'); // 修改展示内容 document.querySelector('.ac-member-main').innerHTML = ` <style> #acfunstat-container .tools-container{ text-align : right; } #acfunstat-container .tools-container span{ width: 150px; display : inline-block; text-align : center; height : 28px; line-height : 28px; padding: 0 6px; background: #fff; border-radius: 5px; font-family: PingFangSC,PingFangSC-Regular; font-weight: 400; border: 1px solid #98df58; color: #98df58; } #acfunstat-container .block{ border-bottom: 1px solid #f5f5f5; padding : 20px 0; font-size: 14px; font-family: PingFangSC,PingFangSC-Regular; font-weight: 400; text-align: left; color : #333; } #acfunstat-container .block h2{ font-size: 18px; font-weight: 500; text-align: left; color: #333; line-height : 26px; height : 26px; } #acfunstat-container .overview-container{ margin-top : 20px; } #acfunstat-container .overview-container .overview-value{ margin-left : 10px; color : #fd4c5d; } #acfunstat-container .gift-trend-filter-form{ text-align : right; } #acfunstat-container .el-table__body-wrapper.is-scrolling-none::-webkit-scrollbar{ width: 10px; height: 1px; } #acfunstat-container .el-table__body-wrapper.is-scrolling-none::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: #535353; } #acfunstat-container .el-table__body-wrapper.is-scrolling-none::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 10px; background: #EDEDED; } #acfunstat-container #gift-trend-container{ height : 200px; width : 100%; } </style> <div id="acfunstat-container" v-cloak> <div class="block" v-if="isGettingSendGiftList"> <div class="mainer"> <span>正在获取送出礼物记录。已获取{{sendGiftList.length}}条记录</span> </div> </div> <div class="block" v-if="isGettingReceiveGiftList"> <div class="mainer"> <span>正在获取收到礼物记录。已获取{{receiveGiftList.length}}条记录</span> </div> </div> <template v-if="hasGetSendGiftList && hasGetReceiveGiftList"> <div class="block"> <el-row> <el-col :span="12"> <h2>总体{{filterText}}</h2> </el-col> <el-col :span="12" class="tools-container"> <a href="javascript:void(0)" @click="openSettingDialog"> <span>配置</span> </a> <a href="javascript:void(0)" @click="exportGift"> <span>导出excel</span> </a> </el-col> </el-row> <el-row class="overview-container"> <el-col :span="12"> <span class="overview-title">送出礼物（AC币）</span><span class="overview-value">{{send}}</span> </el-col> <el-col :span="12"> <span class="overview-title">收到礼物（钻石）</span><span class="overview-value">{{receive}}</span> </el-col> </el-row> </div> <div class="block"> <el-row> <el-col :span="12"> <h2>送出礼物用户排行</h2> <el-row> <el-table :data="sendUserListPage" style="width: 100%" class="user-table" height="414"> <el-table-column prop="rank" label="排名" type="index" :index="(index)=>tableRankingIndex(index, sendUserListPagination)" min-width="10%"> </el-table-column> <el-table-column prop="userName" label="用户名" min-width="55%"> <template slot-scope="scope"> <el-avatar shape="circle" fit="fill" size="40" :src="scope.row.photo"></el-avatar> <el-link style="cursor:pointer;" @click="toUserSpace(scope.row)">{{scope.row.userName}}</el-link> </template> </el-table-column> <el-table-column prop="uid" label="用户uid" min-width="20%"> </el-table-column> <el-table-column prop="send" label="AC币" min-width="15%"> </el-table-column> </el-table> <el-pagination :current-page.sync="sendUserListPagination.page" layout="total, prev, pager, next" :total="sendUserListPagination.total" :page-size="sendUserListPagination.pageSize" > </el-pagination> </el-row> </el-col> </el-row> </div> <div class="block"> <el-row :gutter="20"> <el-col :span="12"> <h2>桃榜</h2> <el-row> <el-table :data="peachUserRankListPage" style="width: 100%" class="user-table" height="414"> <el-table-column prop="rank" label="排名" type="index" :index="(index)=>tableRankingIndex(index, peachUserRankListPagination)" min-width="10%"> </el-table-column> <el-table-column prop="userName" label="用户名" min-width="55%"> <template slot-scope="scope"> <el-avatar shape="circle" fit="fill" size="40" :src="scope.row.photo"></el-avatar> <el-link style="cursor:pointer;" @click="toUserSpace(scope.row)">{{scope.row.userName}}</el-link> </template> </el-table-column> <el-table-column prop="uid" label="用户uid" min-width="20%"> </el-table-column> <el-table-column prop="receivePeach" label="桃" min-width="15%"> </el-table-column> </el-table> <el-pagination :current-page.sync="peachUserRankListPagination.page" layout="total, prev, pager, next" :total="peachUserRankListPagination.total" :page-size="peachUserRankListPagination.pageSize" > </el-pagination> </el-row> </el-col> <el-col :span="12"> <h2>贡献榜</h2> <el-row> <el-table :data="giftUserRankListPage" style="width: 100%" class="user-table" height="414"> <el-table-column prop="rank" label="排名" type="index" :index="(index)=>tableRankingIndex(index, giftUserRankListPagination)" min-width="10%"> </el-table-column> <el-table-column prop="userName" label="用户名" min-width="55%"> <template slot-scope="scope"> <el-avatar shape="circle" fit="fill" size="40" :src="scope.row.photo"></el-avatar> <el-link style="cursor:pointer;" @click="toUserSpace(scope.row)">{{scope.row.userName}}</el-link> </template> </el-table-column> <el-table-column prop="uid" label="用户uid" min-width="20%"> </el-table-column> <el-table-column prop="receiveAcoin" label="AC币" min-width="15%"> </el-table-column> </el-table> <el-pagination :current-page.sync="giftUserRankListPagination.page" layout="total, prev, pager, next" :total="giftUserRankListPagination.total" :page-size="giftUserRankListPagination.pageSize" > </el-pagination> </el-row> </el-col> </el-row> </div> <div class="block"> <el-row> <el-col :span="8"> <h2>{{switchToSendGiftTrend?'送出礼物趋势':'收到礼物趋势'}}</h2> </el-col> <el-col :span="16"> <el-form :inline="true" :model="giftTrendFormData" size="mini" class="gift-trend-filter-form"> <el-form-item> <el-select v-model="giftTrendFormData.unit" style="width:100px;"> <el-option label="按天展示" value="day" key="day"></el-option> <el-option label="按周展示" value="week" key="week"></el-option> <el-option label="按月展示" value="month" key="month"></el-option> <el-option label="按年展示" value="year" key="year"></el-option> </el-select> </el-form-item> <el-form-item v-if="switchToSendGiftTrend"> <el-select v-model="giftTrendFormData.uid" filterable placeholder="用户筛选"> <el-option label="不筛选" value=""></el-option> <el-option :label="userInfo.userName" :value="userInfo.uid" :key="userInfo.uid" v-for="userInfo in sendUserList"></el-option> </el-select> </el-form-item> <el-form-item v-else> <el-select v-model="giftTrendFormData.uid" filterable placeholder="用户筛选"> <el-option label="不筛选" value=""></el-option> <el-option :label="userInfo.userName" :value="userInfo.uid" :key="userInfo.uid" v-for="userInfo in receiveUserList"/> </el-select> </el-form-item> <el-form-item class="tools-container"> <a href="javascript:void(0)" @click="handleSwitchToSendGiftTrend"> <span>{{switchToSendGiftTrend?'切换至收到礼物趋势':'切换至送出礼物趋势'}}</span> </a> </el-form-item> </el-form> </el-col> </el-row> <el-row> <div id="gift-trend-container"> </div> </el-row> </div> </template> <el-drawer :title="switchToSendGiftTrend?'送出礼物详情':'收到礼物详情'" :visible.sync="showGiftDetail" direction="ltr" :modal="false" :size="700"> <div v-if="switchToSendGiftTrend"> <div id="send-gift-table"> <el-table :data="giftDetailListPage" style="width: 100%" class="user-table" height="558"> <el-table-column prop="userName" label="用户名" :width="200"> <template slot-scope="scope"> <el-avatar shape="circle" fit="fill" size="40" :src="userInfo[scope.row.userId].photo"></el-avatar> <el-link style="cursor:pointer;" @click="toUserSpace(userInfo[scope.row.userId])">{{userInfo[scope.row.userId].userName}}</el-link> </template> </el-table-column> <el-table-column prop="userId" label="用户uid" :width="100"> </el-table-column> <el-table-column prop="createTimeText" label="送出时间" :width="180"> </el-table-column> <el-table-column prop="giftText" label="送出礼物" :width="100"> </el-table-column> <el-table-column prop="acoin" label="AC币" :width="70"> </el-table-column> </el-table> <el-pagination :current-page.sync="giftDetailListPagination.page" layout="total, prev, pager, next" :total="giftDetailListPagination.total" :page-size="giftDetailListPagination.pageSize" > </el-pagination> </div> </div> <div v-else> <div id="receive-gift-table"> <el-table :data="giftDetailListPage" style="width: 100%" class="user-table" height="558"> <el-table-column prop="userName" label="用户名" width="200"> <template slot-scope="scope"> <el-avatar shape="circle" fit="fill" size="40" :src="userInfo[scope.row.userId].photo"></el-avatar> <el-link style="cursor:pointer;" @click="toUserSpace(userInfo[scope.row.userId])">{{userInfo[scope.row.userId].userName}}</el-link> </template> </el-table-column> <el-table-column prop="userId" label="用户uid" width="100"> </el-table-column> <el-table-column prop="createTimeText" label="收到时间" width="180"> </el-table-column> <el-table-column prop="giftText" label="收到礼物" width="100"> </el-table-column> <el-table-column prop="azuanAmount" label="钻石" width="70"> </el-table-column> </el-table> <el-pagination :current-page.sync="giftDetailListPagination.page" layout="total, prev, pager, next" :total="giftDetailListPagination.total" :page-size="giftDetailListPagination.pageSize" > </el-pagination> </div> </div> </el-drawer> <el-dialog title="设置" :visible.sync="settingFormDialogVisible" :modal="false" width="550px" custom-class="setting-form-dialog" :modal-append-to-body="false"> <el-form :model="settingFormData" class="setting-form" ref="settingForm" :rules="settingFormRules" @submit.native.prevent> <el-form-item label="时间范围" label-width="130px" prop="dateRegion"> <el-date-picker v-model="settingFormData.dateRegion" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="settingFormPickerOptions" style="width:100%" > </el-date-picker> </el-form-item> <el-form-item style="display:flex;justify-content:center;"> <el-button type="primary" @click="handleSettingFormSubmit">提交</el-button> </el-form-item> </el-form> </el-dialog> </div> `; // 初始化实例 new Vue({ el : '#acfunstat-container', data : function(){ return { send : 0, receive : 0, sendGiftList : [], receiveGiftList : [], giftDetailList : [], showGiftDetail : false, showGiftTrend : true, sendUserList : [], receiveUserList : [], peachUserRankList : [], giftUserRankList : [], userInfo : {}, sendUserListPagination : { page : 1, total : 0, pageSize : 5, }, peachUserRankListPagination : { page : 1, total : 0, pageSize : 5, }, giftUserRankListPagination : { page : 1, total : 0, pageSize : 5, }, giftDetailListPagination : { page : 1, total : 0, pageSize : 7, }, isGettingSendGiftList : false, isGettingReceiveGiftList : false, hasGetReceiveGiftList : false, hasGetSendGiftList : false, filterText : '', settingFormDialogVisible : false, settingFormData : { isContainPeach : true, }, settingFormRules : { }, settingFormPickerOptions : { shortcuts : [{ text : '本周', onClick(picker) { const end = moment().endOf('week').add(1, 'days')._d; const start = moment().startOf('week').add(1, 'days')._d; picker.$emit('pick', [start, end]); }, },{ text : '上周', onClick(picker) { const end = moment().subtract(1, 'weeks').endOf('week').add(1, 'days')._d; const start = moment().subtract(1, 'weeks').startOf('week').add(1, 'days')._d; picker.$emit('pick', [start, end]); }, },{ text : '本月', onClick(picker) { const end = moment().endOf('month')._d; const start = moment().startOf('month')._d; picker.$emit('pick', [start, end]); }, },{ text : '上月', onClick(picker) { const end = moment().subtract(1, 'months').endOf('month')._d; const start = moment().subtract(1, 'months').startOf('month')._d; picker.$emit('pick', [start, end]); }, },] }, switchToSendGiftList : true, switchToSendGiftTrend : true, giftTrendFormData : { unit : 'day', }, giftList : [], giftNameMapper : {}, // 是否已初始化趋势图 initGiftTrendFinish : false, renderGiftTrendChartObj : null, renderGiftTrendData : null, }; }, methods : { tableRankingIndex : function(index, pagination){ return (pagination.page-1) * pagination.pageSize + index + 1; }, getUserInfo : function(uid, userName, callback){ var vue = this; if(uid in this.userInfo){ if(_.isFunction(callback)){ callback(true, this.userInfo[uid]); } return; } // 获取用户信息 commonRequrest(config.ACFUNLIVE_SERVER + config.URLS.ACFUN_USER.INFO + `?userId=${uid}`, 'get', null, true, function(isSuccess, data){ var userInfo = null; if(data){ data = JSON.parse(data); if(data.result == 0){ userInfo = { uid : uid, photo : data.profile.headUrl, userName : data.profile.name, }; } else{ userInfo = { uid : uid, userName : userName, photo : 'https://tx-free-imgs.acfun.cn/style/image/defaultAvatar.jpg', }; } } else{ userInfo = { uid : uid, userName : userName, photo : 'https://tx-free-imgs.acfun.cn/style/image/defaultAvatar.jpg', }; } vue.userInfo[uid] = userInfo; if(_.isFunction(callback)){ callback(isSuccess, userInfo); } }); }, getToken : function(callback){ var vue = this; // 已有token if(this.token){ callback(true, this.token); } else{ // 获取token commonRequrest(config.ACFUN_TOKEN_SERVER + config.URLS.TOKEN.GET_TOKEN, 'post', {sid:config.KUAISHOU.SID}, true, function(isSuccess, data){ // 获取成功 if(isSuccess){ data = JSON.parse(data); if(data['acfun.midground.api_st']){ vue.token = data['acfun.midground.api_st']; callback(true, vue.token); } else{ callback(false); } } else{ callback(false); } }, config.HEADERS.KUAISHOU_SERVER); } }, getGiftList : function(callback){ var vue = this; this.getToken(function(isSuccess, token){ // 获取token失败 if(!isSuccess){ vue.$message({ type : 'error', message : 'token获取失败', }); callback(false); } else{ var params = { 'acfun.midground.api_st' : token, subBiz: config.KUAISHOU.SUBBIZ, kpn: config.KUAISHOU.KPN, kpf: config.KUAISHOU.KPF, }; // 提交 commonRequrest(config.KUAISHOU_SERVER + config.URLS.GIFT.LIST, 'post', params, true, function(isSuccess, data){ // 获取成功 if(isSuccess){ data = JSON.parse(data); if(data.result == 1 && data.data && data.data.giftList){ var giftList = []; var giftNameMapper = []; data.data.giftList.forEach(function(item){ if(item.payWalletType != 1){ return true; } var gift = { id : item.giftId, name : item.giftName, price : item.giftPrice, url : item.pngPicList[0].url, }; giftList.push(gift); giftNameMapper[gift.name] = gift; }); vue.giftList = giftList; vue.giftNameMapper = giftNameMapper; callback(true); } else{ callback(false); } } else{ callback(false); } }); } }); }, getSendGiftList : function(callback){ var vue = this; var startDate = null,endDate=null; var isContainPeach = this.settingFormData.isContainPeach; // 筛选了时间范围 if(this.settingFormData.dateRegion && this.settingFormData.dateRegion.length==2){ startDate = this.settingFormData.dateRegion[0].getTime(); endDate = this.settingFormData.dateRegion[1].getTime(); } // 获取数据时的游标 var pcursor = "0"; var getSendGiftList = function(){ vue.isGettingSendGiftList = true; if(pcursor == 'no_more'){ // 统计送出礼物总ac币 vue.send = _.sumBy(_.flatMap(vue.userInfo), 'send'); vue.send = vue.send?vue.send:0; // 讲用户按送出ac币价值倒序 vue.sendUserList = _.sortBy(_.filter(vue.userInfo, (userInfo)=>{return userInfo.send>0;}), function(userInfo){ return -userInfo.send; }); vue.sendUserListPagination.total = vue.sendUserList.length; vue.isGettingSendGiftList = false; vue.hasGetSendGiftList = true; if(_.isFunction(callback)){ callback(); } return; } else{ commonRequrest(config.ACFUN_MOBILE_SERVER + config.URLS.WALLET.SEND_GIFT, 'get',{pcursor : pcursor,},true, function(isSuccess, data){ // 获取数据失败 if(!isSuccess){ vue.$message({ type : 'error', message : '获取送出礼物列表失败', }); pcursor = 'no_more'; getSendGiftList(); } else{ data = JSON.parse(data); pcursor = data['pcursor']; if(data.records && data.records.length>0){ var uids = {}; var uidUserNameMapper = {}; // 获取用户信息 data.records.forEach(function(record){ record.createDate = moment(record.createTime).startOf('day')._d.getTime(); // 指定了起始时间 if(startDate && record.createDate<startDate){ pcursor = "no_more"; return; } // 指定了终止时间 else if(endDate && record.createDate>endDate){ return; } // 不包含桃子 else if(!isContainPeach && record.giftName == '桃子'){ return; } if(!(record.userId in uids)){ uids[record.userId] = []; } uidUserNameMapper[record.userId] = record.userName; var now = moment(record.createTime); // 设置送出时间 record.createTimeText = now.format('YYYY-MM-DD HH:mm:ss'); record.giftText = `${record.giftCount}个${record.giftName}`; // 设置时间单位，便于获取趋势 record.dayUnitText = now.format('YYYY-MM-DD'); record.monthUnitText = now.format('YYYY-MM'); record.yearUnitText = now.format('YYYY'); record.weekUnitText = now.startOf('week').add(1, 'days').format('YYYY-MM-DD'); uids[record.userId].push(record); vue.sendGiftList.push(record); }); // 没有任何记录 if(Object.keys(uids).length==0){ getSendGiftList(); } else{ var nextGetSendGiftList = _.after(Object.keys(uids).length, getSendGiftList); for(var uid in uids){ vue.getUserInfo(uid, uidUserNameMapper[uid], function(isSuccess, userInfo){ // 统计送出给用户AC币 if(userInfo.sendGiftList == null){ userInfo.sendGiftList = []; } if(userInfo.send==null){ userInfo.send = 0; } userInfo.sendGiftList.splice(userInfo.sendGiftList.length, 0, ...uids[userInfo.uid]); userInfo.send += _.sumBy(uids[userInfo.uid], 'acoin'); nextGetSendGiftList(); }); } } } else{ getSendGiftList(); } } }, ); } } getSendGiftList(); }, getReceiveGiftList : function(callback){ var vue = this; var startDate = null,endDate=null; var isContainPeach = this.settingFormData.isContainPeach; // 筛选了时间范围 if(this.settingFormData.dateRegion && this.settingFormData.dateRegion.length==2){ startDate = this.settingFormData.dateRegion[0].getTime(); endDate = this.settingFormData.dateRegion[1].getTime(); } // 获取数据时的游标 var pcursor = "0"; var getReceiveGiftList = function(){ vue.isGettingReceiveGiftList = true; if(pcursor == 'no_more'){ // 统计送出礼物总钻石币 vue.receive = _.sumBy(_.flatMap(vue.userInfo), 'receive'); vue.receive = vue.receive?vue.receive:0; // 讲用户按送出ac币价值倒序 vue.receiveUserList = _.sortBy(_.filter(vue.userInfo, (userInfo)=>{return userInfo.receive>0;}), function(userInfo){ return -userInfo.receive; }); // 桃榜 vue.peachUserRankList = _.sortBy(_.filter(vue.userInfo, (userInfo)=>{return userInfo.receivePeach>0;}), function(userInfo){ return -userInfo.receivePeach; }); vue.peachUserRankListPagination.total = vue.peachUserRankList.length; // 贡献榜 vue.giftUserRankList = _.sortBy(_.filter(vue.userInfo, (userInfo)=>{return userInfo.receiveAcoin>0;}), function(userInfo){ return -userInfo.receiveAcoin; }); vue.giftUserRankListPagination.total = vue.giftUserRankList.length; vue.isGettingReceiveGiftList = false; vue.hasGetReceiveGiftList = true; if(_.isFunction(callback)){ callback(); } return; } else{ commonRequrest(config.ACFUN_MOBILE_SERVER + config.URLS.WALLET.RECEIVE_GIFT, 'get',{pcursor : pcursor,},true, function(isSuccess, data){ // 获取数据失败 if(!isSuccess){ vue.$message({ type : 'error', message : '获取送出礼物列表失败', }); pcursor = 'no_more'; getReceiveGiftList(); } else{ data = JSON.parse(data); pcursor = data['pcursor']; if(data.records && data.records.length>0){ var uids = {}; var uidUserNameMapper = {}; // 获取用户信息 data.records.forEach(function(record){ record.createDate = moment(record.createTime).startOf('day')._d.getTime(); // 指定了起始时间 if(startDate && record.createDate<startDate){ pcursor = "no_more"; return; } // 指定了终止时间 else if(endDate && record.createDate>endDate){ return; } // 不包含桃子 else if(!isContainPeach && record.giftName == '桃子'){ return; } if(!(record.userId in uids)){ uids[record.userId] = []; } uidUserNameMapper[record.userId] = record.userName; var now = moment(record.createTime); // 设置送出时间 record.createTimeText = now.format('YYYY-MM-DD HH:mm:ss'); if(record.giftName == '桃子'){ record.acoin = 0; record.peachAmount = record.giftCount; } else{ record.acoin = vue.giftNameMapper[record.giftName].price * record.giftCount; record.peachAmount = 0; } record.giftText = `${record.giftCount}个${record.giftName}`; // 设置时间单位，便于获取趋势 record.dayUnitText = now.format('YYYY-MM-DD'); record.monthUnitText = now.format('YYYY-MM'); record.yearUnitText = now.format('YYYY'); record.weekUnitText = now.startOf('week').add(1, 'days').format('YYYY-MM-DD'); uids[record.userId].push(record); vue.receiveGiftList.push(record); }); // 没有任何记录 if(Object.keys(uids).length==0){ getReceiveGiftList(); } else{ var nextGetReceiveGiftList = _.after(Object.keys(uids).length, getReceiveGiftList); for(var uid in uids){ vue.getUserInfo(uid, uidUserNameMapper[uid], function(isSuccess, userInfo){ // 统计送出给用户AC币 if(userInfo.receiveGiftList == null){ userInfo.receiveGiftList = []; } if(userInfo.receive==null){ userInfo.receive = 0; } if(userInfo.receiveAcoin==null){ userInfo.receiveAcoin = 0; } if(userInfo.receivePeach==null){ userInfo.receivePeach = 0; } userInfo.receiveGiftList.splice(userInfo.receiveGiftList.length, 0, ...uids[userInfo.uid]); userInfo.receive += _.sumBy(uids[userInfo.uid], 'azuanAmount'); userInfo.receiveAcoin += _.sumBy(uids[userInfo.uid], 'acoin'); userInfo.receivePeach += _.sumBy(uids[userInfo.uid], 'peachAmount'); nextGetReceiveGiftList(); }); } } } else{ getReceiveGiftList(); } } }, ); } } getReceiveGiftList(); }, // 渲染趋势 renderGiftTrend : function(){ var data = this.switchToSendGiftTrend?this.sendGiftList:this.receiveGiftList; // 筛选用户 if(this.giftTrendFormData.uid){ data = _.filter(data, {userId:_.parseInt(this.giftTrendFormData.uid)}); } // 按时间分组 data = _.groupBy(data, (item)=>{ // 按天筛选 if(this.giftTrendFormData.unit == 'day'){ return item.dayUnitText; } // 按周筛选 if(this.giftTrendFormData.unit == 'week'){ return item.weekUnitText; } // 按月筛选 if(this.giftTrendFormData.unit == 'month'){ return item.monthUnitText; } // 按年筛选 if(this.giftTrendFormData.unit == 'year'){ return item.yearUnitText; } }); // 转化格式 var lineNameData = _.sortBy(Object.keys(data)); var lineValueData = []; lineNameData.forEach((unit)=>{ lineValueData.push(_.sumBy(data[unit], this.switchToSendGiftTrend?'acoin':'azuanAmount')); }); var chart = this.initGiftTrendFinish?this.renderGiftTrendChartObj:echarts.init(document.getElementById('gift-trend-container')); var option = { xAxis: { type: 'category', name : '时间', data : lineNameData, }, yAxis: { type: 'value', name : this.switchToSendGiftTrend?'AC币':'钻石', }, series: [{ type: 'line', data : lineValueData, name : this.switchToSendGiftTrend?'AC币':'钻石', },], tooltip : { trigger : 'axis', axisPointer : { type : 'line', axis : 'x', }, confine : true, }, dataZoom : [{ type : 'inside', orient : 'horizontal', }], }; chart.setOption(option); this.renderGiftTrendData = data; if(!this.initGiftTrendFinish){ chart.on('click', (params)=> { // 隐藏tooltip chart.dispatchAction({ type: 'hideTip', }); this.giftDetailListPagination = { page : 1, total : this.renderGiftTrendData[params.name].length, pageSize : 7, }; // 设置礼物数据 this.giftDetailList = this.renderGiftTrendData[params.name]; // 展示 this.showGiftDetail = true; }); } if(!this.initGiftTrendFinish){ this.renderGiftTrendChartObj = chart; } this.initGiftTrendFinish = true; }, // 打开设置弹窗 openSettingDialog : function(){ this.settingFormDialogVisible = true; }, // 更改设置提交 handleSettingFormSubmit : function(){ var vue = this; this.$refs.settingForm.validate((valid) => { // 通过校验 if(valid){ this.hasGetSendGiftList = false; this.hasGetReceiveGiftList = false; this.showGiftDetail = false; this.showGiftTrend = true; this.send = 0; this.receive = 0; this.sendGiftList = []; this.receiveGiftList = []; this.giftDetailList = []; this.sendUserList = []; this.receiveUserList = []; this.peachUserRankList = []; this.giftUserRankList = []; this.sendUserListPagination = { page : 1, total : 0, pageSize : 5, }; this.peachUserRankListPagination = { page : 1, total : 0, pageSize : 5, }; this.giftUserRankListPagination = { page : 1, total : 0, pageSize : 5, }; for(var uid in this.userInfo){ this.userInfo[uid] = { uid : uid, userName : this.userInfo[uid].userName, photo : this.userInfo[uid].photo, }; } this.$message({ type : 'info', message : '开始获取数据', }); this.settingFormDialogVisible = false; this.getSendGiftList(function(){ vue.getReceiveGiftList(function(){ vue.$message({ type : 'success', message : '数据获取成功', }); // 生成筛选文字 vue.filterText = vue.formatFilterText(); // 获取趋势 if(vue.showGiftTrend){ vue.$nextTick(function(){ vue.giftTrendFormData = { unit : 'day', }; }); } }); }); } }); }, // 导出excel exportGift : function(){ var vue = this; var workbook = new ExcelJS.Workbook(); var sheet = workbook.addWorksheet('送出礼物用户排行榜'); sheet.columns = [ { key: 'userName', width: 30, }, { key: 'uid', width: 10, }, { key: 'acoin', width: 20, }, ]; var rowIndex = 1; sheet.addRow({userName: '用户名', uid : '用户uid', 'acoin' : 'AC币'}); // 设置列名样式 var headerRow = sheet.getRow(rowIndex); for(var i=1;i<=sheet.columns.length;++i){ headerRow.getCell(i).alignment = {vertical: 'middle', horizontal: 'center'}; headerRow.getCell(i).border = { top: {style:'thin'}, left: {style:'thin'}, bottom: {style:'thin'}, right: {style:'thin'}, }; } rowIndex += 1; // 获取送出礼物用户排行 this.sendUserList.forEach(function(userInfo){ sheet.addRow({userName: userInfo.userName, uid : userInfo.uid, acoin:userInfo.send}); // 设置记录样式 var recordRow = sheet.getRow(rowIndex); for(var i=1;i<=sheet.columns.length;++i){ // recordRow.getCell(i).alignment = {vertical: 'middle', horizontal: 'center'}; recordRow.getCell(i).border = { top: {style:'thin'}, left: {style:'thin'}, bottom: {style:'thin'}, right: {style:'thin'}, }; } rowIndex += 1; }); sheet = workbook.addWorksheet('桃榜'); sheet.columns = [ { key: 'userName', width: 30, }, { key: 'uid', width: 10, }, { key: 'receivePeach', width: 20, }, ]; rowIndex = 1; sheet.addRow({userName: '用户名', uid : '用户uid', 'receivePeach' : '桃'}); // 设置列名样式 var headerRow = sheet.getRow(rowIndex); for(var i=1;i<=sheet.columns.length;++i){ headerRow.getCell(i).alignment = {vertical: 'middle', horizontal: 'center'}; headerRow.getCell(i).border = { top: {style:'thin'}, left: {style:'thin'}, bottom: {style:'thin'}, right: {style:'thin'}, }; } rowIndex += 1; // 获取桃榜 this.peachUserRankList.forEach(function(userInfo){ sheet.addRow({userName: userInfo.userName, uid : userInfo.uid, receivePeach:userInfo.receivePeach}); // 设置记录样式 var recordRow = sheet.getRow(rowIndex); for(var i=1;i<=sheet.columns.length;++i){ // recordRow.getCell(i).alignment = {vertical: 'middle', horizontal: 'center'}; recordRow.getCell(i).border = { top: {style:'thin'}, left: {style:'thin'}, bottom: {style:'thin'}, right: {style:'thin'}, }; } rowIndex += 1; }); sheet = workbook.addWorksheet('贡献榜'); sheet.columns = [ { key: 'userName', width: 30, }, { key: 'uid', width: 10, }, { key: 'receiveAcoin', width: 20, }, ]; rowIndex = 1; sheet.addRow({userName: '用户名', uid : '用户uid', 'receiveAcoin' : 'AC币'}); // 设置列名样式 var headerRow = sheet.getRow(rowIndex); for(var i=1;i<=sheet.columns.length;++i){ headerRow.getCell(i).alignment = {vertical: 'middle', horizontal: 'center'}; headerRow.getCell(i).border = { top: {style:'thin'}, left: {style:'thin'}, bottom: {style:'thin'}, right: {style:'thin'}, }; } rowIndex += 1; // 获取贡献榜 this.giftUserRankList.forEach(function(userInfo){ sheet.addRow({userName: userInfo.userName, uid : userInfo.uid, receiveAcoin:userInfo.receiveAcoin}); // 设置记录样式 var recordRow = sheet.getRow(rowIndex); for(var i=1;i<=sheet.columns.length;++i){ // recordRow.getCell(i).alignment = {vertical: 'middle', horizontal: 'center'}; recordRow.getCell(i).border = { top: {style:'thin'}, left: {style:'thin'}, bottom: {style:'thin'}, right: {style:'thin'}, }; } rowIndex += 1; }); sheet = workbook.addWorksheet('送出礼物详情'); sheet.columns = [ { key: 'userName', width: 30, }, { key: 'uid', width: 10, }, { key: 'createTimeText', width: 20, }, { key: 'giftName', width: 20, }, { key: 'giftCount', width: 20, }, { key: 'acoin', width: 20, }, ]; var rowIndex = 1; sheet.addRow({userName: '用户名', uid : '用户uid', createTimeText : '送出时间', giftName:'礼物名称', giftCount:'礼物数量', acoin : 'AC币'}); // 设置列名样式 var headerRow = sheet.getRow(rowIndex); for(var i=1;i<=sheet.columns.length;++i){ headerRow.getCell(i).alignment = {vertical: 'middle', horizontal: 'center'}; headerRow.getCell(i).border = { top: {style:'thin'}, left: {style:'thin'}, bottom: {style:'thin'}, right: {style:'thin'}, }; } rowIndex += 1; // 获取送出礼物详情 this.sendGiftList.forEach(function(giftDetail){ sheet.addRow({userName: giftDetail.userName, uid : giftDetail.userId, createTimeText:giftDetail.createTimeText, giftName:giftDetail.giftName, giftCount:giftDetail.giftCount, acoin:giftDetail.acoin}); // 设置记录样式 var recordRow = sheet.getRow(rowIndex); for(var i=1;i<=sheet.columns.length;++i){ // recordRow.getCell(i).alignment = {vertical: 'middle', horizontal: 'center'}; recordRow.getCell(i).border = { top: {style:'thin'}, left: {style:'thin'}, bottom: {style:'thin'}, right: {style:'thin'}, }; } rowIndex += 1; }); sheet = workbook.addWorksheet('收到礼物详情'); sheet.columns = [ { key: 'userName', width: 30, }, { key: 'uid', width: 10, }, { key: 'createTimeText', width: 20, }, { key: 'giftName', width: 20, }, { key: 'giftCount', width: 20, }, { key: 'azuanAmount', width: 20, }, ]; var rowIndex = 1; sheet.addRow({userName: '用户名', uid : '用户uid', createTimeText : '收到时间', giftName:'礼物名称', giftCount:'礼物数量', azuanAmount : '钻石'}); // 设置列名样式 var headerRow = sheet.getRow(rowIndex); for(var i=1;i<=sheet.columns.length;++i){ headerRow.getCell(i).alignment = {vertical: 'middle', horizontal: 'center'}; headerRow.getCell(i).border = { top: {style:'thin'}, left: {style:'thin'}, bottom: {style:'thin'}, right: {style:'thin'}, }; } rowIndex += 1; // 获取送出礼物详情 this.receiveGiftList.forEach(function(giftDetail){ sheet.addRow({userName: giftDetail.userName, uid : giftDetail.userId, createTimeText:giftDetail.createTimeText, giftName:giftDetail.giftName, giftCount:giftDetail.giftCount, azuanAmount:giftDetail.azuanAmount}); // 设置记录样式 var recordRow = sheet.getRow(rowIndex); for(var i=1;i<=sheet.columns.length;++i){ // recordRow.getCell(i).alignment = {vertical: 'middle', horizontal: 'center'}; recordRow.getCell(i).border = { top: {style:'thin'}, left: {style:'thin'}, bottom: {style:'thin'}, right: {style:'thin'}, }; } rowIndex += 1; }); ;(async function(){ var buffer = await workbook.xlsx.writeBuffer(); var file = new File([buffer], `【${moment().format('YYYY-MM-DD')}】acfun统计${vue.filterText}.xlsx`); saveAs(file); })(); }, // 展示趋势 handleShowGiftTrend : function(){ this.showGiftTrend = true; this.$nextTick(function(){ this.renderGiftTrend(); }); }, // 切换趋势 handleSwitchToSendGiftTrend : function(){ this.switchToSendGiftTrend = !this.switchToSendGiftTrend; this.$nextTick(function(){ this.renderGiftTrend(); }); }, // 跳转至用户主页 toUserSpace : function(userInfo){ window.open(config.ACFUN_SERVER + config.URLS.ACFUN_USER.SPACE + `/${userInfo.uid}`); }, formatFilterText : function(){ var dateRegionText = null,isContainPeachText=null; // 筛选了时间范围 if(this.settingFormData.dateRegion && this.settingFormData.dateRegion.length==2){ dateRegionText = `${moment(this.settingFormData.dateRegion[0]).format('YYYY-MM-DD')} 至 ${moment(this.settingFormData.dateRegion[1]).format('YYYY-MM-DD')}`; } if(!this.settingFormData.isContainPeach){ isContainPeachText = '不包含桃子'; } var texts = _.filter([dateRegionText, isContainPeachText]).join('、'); if(isNullOrEmpty(texts)){ return ''; } else{ return '（' + texts + '）'; } }, }, computed : { sendUserListPage : function(){ return !this.sendUserList || this.sendUserList.length == 0?[]:this.sendUserList.slice((this.sendUserListPagination.page-1)*this.sendUserListPagination.pageSize, this.sendUserListPagination.page*this.sendUserListPagination.pageSize); }, peachUserRankListPage : function(){ return !this.peachUserRankList || this.peachUserRankList.length == 0?[]:this.peachUserRankList.slice((this.peachUserRankListPagination.page-1)*this.peachUserRankListPagination.pageSize, this.peachUserRankListPagination.page*this.peachUserRankListPagination.pageSize); }, giftUserRankListPage : function(){ return !this.giftUserRankList || this.giftUserRankList.length == 0?[]:this.giftUserRankList.slice((this.giftUserRankListPagination.page-1)*this.giftUserRankListPagination.pageSize, this.giftUserRankListPagination.page*this.giftUserRankListPagination.pageSize); }, giftDetailListPage : function(){ return !this.giftDetailList || this.giftDetailList.length == 0?[]:this.giftDetailList.slice((this.giftDetailListPagination.page-1)*this.giftDetailListPagination.pageSize, this.giftDetailListPagination.page*this.giftDetailListPagination.pageSize); }, }, watch: { // 监听趋势表单数据变化 giftTrendFormData : { deep : true, handler : function(newVal, oldVal){ if(this.showGiftTrend){ this.$nextTick(function(){ this.renderGiftTrend(); }); } }, }, }, mounted : function(){ var vue = this; vue.$message({ type : 'info', message : '正在获取礼物列表', }); // 获取礼物列表 this.getGiftList(function(isSuccess){ if(isSuccess){ vue.$message({ type : 'success', message : '礼物列表获取成功', }); // 打开弹窗 vue.openSettingDialog(); } else{ vue.$message({ type : 'error', message : '礼物列表获取失败', }); } }); }, }); }); navEle.append(navItem); return true; } // 加载动态页面Vue实例 function loadFeedVue(){ var vue = null; // 若vue已实例化，且对应的el元素存在，则表示已加载结束 if(vue && !document.querySelector('#acfunfeed-container')){ return true; } // 检查是否为“关注动态”导航菜单 var pushEle = document.querySelector('.ac-member-navigation-item[href="/member/feeds"]'); if(pushEle){ if(!pushEle.classList.contains('ac-member-navigation-item-active')){ return false; } } else{ return false; } // 容器 var navEle = document.querySelector('.ac-tabs-nav'); // 容器不存在，无法挂载 if(!navEle){ return false; } // 监听点击事件 function loadVue(feedType){ // 若vue已实例化，且对应的el元素存在，则表示已加载结束 if(feedVue && !document.querySelector('#acfunfeed-container')){ return; } // 分页HTML var paginatorHTML = ` <div class="area-pager"> <span class="pager pager-last" v-if="page>1" @click="toFirstPage"><i class="el-icon el-icon-d-arrow-left" title="最初"></i></span> <span class="pager pager-fore" v-if="page>1" @click="toPrevPage"><i class="el-icon el-icon-arrow-left" title="上一页"></i></span> <span :class="{pager:true,'pager-fores':choosePage!=page,'pager-here':choosePage==page,'active':choosePage==page}" :data-page="choosePage" @click="toJumpPage(choosePage)" :key="choosePage" v-for="choosePage in pages">{{choosePage}}</span> <span class="pager pager-hind" @click="toNextPage" v-if="page<total"><i class="el-icon el-icon-arrow-right" title="下一页"></i></span> <span class="pager pager-first" @click="toFinalPage" v-if="page<total"><i class="el-icon el-icon-d-arrow-right" title="最末"></i></span> <span class="hint">当前位置：<input class="ipt-pager" type="text" v-model="jumpPage" :data-max="total"><button class="btn mini btn-pager" @click="toJumpPage(jumpPage)">跳页</button></span> <span class="clearfix"></span> </div> `; // 投蕉HTML var bananaHTML = ` <div class="div-banana"> <span :class="{bananaer:true, active:num<=count}" :data-num="num" @click.prevent.stop="$emit('throw-banana', feed, count, $event)" @mouseenter.prevent.stop="count = num" @mouseout.prevent.stop="count = 0" v-for="num in total"></span> </div> `; // 视频内容HTML var videoHTML = ` <div :data-aid="feed.resourceId" :class="{block:true,item:!isinrepost}" :key="feed.resourceId"> <el-row> <el-col class="l"> <a target="_blank" :href="feed.shareUrl" class="thumb thumb-preview"><img :data-aid="feed.resourceId" :src="feed.coverUrl" class="preview" /> <div class="cover"></div></a> <a target="_blank" :href="feed.userInfo.shareUrl" :title="feed.userInfo.hoverText" class="thumb thumb-avatar"><img :data-uid="feed.userInfo.id" :data-name="feed.userInfo.name" :src="feed.userInfo.headUrl" class="avatar" /></a> </el-col> <el-col class="r"> <p class="block-title"><a :href="feed.channel.shareUrl" :title="feed.channel.hoverText" target="_blank" class="channel">{{feed.channel.name}}</a><a :data-aid="feed.resourceId" target="_blank" :href="feed.shareUrl" class="title">{{feed.caption}}</a></p> <div class="info"> <a target="_blank" :data-uid="feed.userInfo.id" :href="feed.userInfo.shareUrl" class="name">{{feed.userInfo.name}}</a> <i class="verified-icon monkey-verified-icon" v-if="feed.userInfo.isMonkeyVerified"/> <i class="verified-icon official-verified-icon" v-if="feed.userInfo.isOfficialVerified"/> <i class="verified-icon up-college-verified-icon" v-if="feed.userInfo.isUpCollegeVerified"/> <i class="verified-icon avi-verified-icon" v-if="feed.userInfo.isAviVerified"/> <span>/</span> <span>发布于<span class="time">{{feed.time}}</span></span> <span>/</span> <span class="viewcount">播放:<span class="views pts">{{feed.viewCount}}</span></span> <span :class="{commentcount:true}"><i class="icon" @click="handleCommentClick(feed, $event)"/>评论:<span class="comments pts">{{feed.commentCount}}</span></span> <span :class="{likecount:true, active:feed.isLike}"><i class="icon" @click="handleLikeClick(feed, $event)"/>点赞:<span class="likes pts">{{feed.likeCount}}</span></span> <span :class="{collectcount:true, active:feed.isFavorite}"><i class="icon" @click="handleCollectClick(feed, $event)"/>收藏:<span class="favors pts">{{feed.stowCount}}</span></span> <span :class="{bananacount:true, active:feed.isThrowBanana}"><i class="icon" @click="handleBananaClick(feed, $event)"/>香蕉:<span class="bananas pts">{{feed.bananaCount}}</span><feed-banana :feed="feed" v-if="feed.showDivBanana" @throw-banana="handleThrowBanana"/></span> </div> <p class="desc">{{feed.description}}</p> <div class="area-tag"> <template v-if="feed.tag && feed.tag.length>0"> <a class="tag" target="_blank" :key="tag.tagId" v-for="tag in feed.tag" :href="tag.shareUrl">{{tag.tagName}}</a> </template> <template v-else> 该稿件暂无标签。 </template> </div> <div class="area-hot-comment" v-if="feed.hotComments && feed.hotComments.length>0"> <div class="block"> <feed-comment :comment="comment" :key="comment.commentId" v-for="comment in feed.hotComments" @content-click="handleCommentContentClick"/> </div> </div> </el-col> </el-row> </div> `; // 文章内容HTML var articleHTML = ` <div :data-aid="feed.resourceId" :class="{block:true,item:!isinrepost}" :key="feed.resourceId"> <el-row> <el-col class="l"> <a target="_blank" :href="feed.shareUrl" class="thumb thumb-preview"><img :data-aid="feed.resourceId" :src="feed.coverUrl" class="preview" /> <div class="cover"></div></a> <a target="_blank" :href="feed.userInfo.shareUrl" :title="feed.userInfo.hoverText" class="thumb thumb-avatar"><img :data-uid="feed.userInfo.id" :data-name="feed.userInfo.name" :src="feed.userInfo.headUrl" class="avatar" /></a> </el-col> <el-col class="r"> <p class="block-title"><a :href="feed.channel.shareUrl" :title="feed.channel.hoverText" target="_blank" class="channel">{{feed.channel.name}}</a><a :data-aid="feed.resourceId" target="_blank" :href="feed.shareUrl" class="title">{{feed.caption}}</a></p> <div class="info"> <a target="_blank" :data-uid="feed.userInfo.id" :href="feed.userInfo.shareUrl" class="name">{{feed.userInfo.name}}</a> <i class="verified-icon monkey-verified-icon" v-if="feed.userInfo.isMonkeyVerified"/> <i class="verified-icon official-verified-icon" v-if="feed.userInfo.isOfficialVerified"/> <i class="verified-icon up-college-verified-icon" v-if="feed.userInfo.isUpCollegeVerified"/> <i class="verified-icon avi-verified-icon" v-if="feed.userInfo.isAviVerified"/> <span>/</span> <span>发布于<span class="time">{{feed.time}}</span></span> <span>/</span> <span class="viewcount">播放:<span class="views pts">{{feed.viewCount}}</span></span> <span :class="{commentcount:true}"><i class="icon" @click="handleCommentClick(feed, $event)"/>评论:<span class="comments pts">{{feed.commentCount}}</span></span> <span :class="{likecount:true, active:feed.isLike}"><i class="icon" @click="handleLikeClick(feed, $event)"/>点赞:<span class="likes pts">{{feed.likeCount}}</span></span> <span :class="{collectcount:true, active:feed.isFavorite}"><i class="icon" @click="handleCollectClick(feed, $event)"/>收藏:<span class="favors pts">{{feed.stowCount}}</span></span> <span :class="{bananacount:true, active:feed.isThrowBanana}"><i class="icon" @click="handleBananaClick(feed, $event)"/>香蕉:<span class="bananas pts">{{feed.bananaCount}}</span><feed-banana :feed="feed" v-if="feed.showDivBanana" @throw-banana="handleThrowBanana"/></span> </div> <p class="desc">{{feed.beginParagraph}}</p> <div class="area-tag"> <template v-if="feed.tag && feed.tag.length>0"> <a class="tag" target="_blank" :key="tag.tagId" v-for="tag in feed.tag" :href="tag.shareUrl">{{tag.tagName}}</a> </template> <template v-else> 该稿件暂无标签。 </template> </div> <div class="area-hot-comment" v-if="feed.hotComments && feed.hotComments.length>0"> <div class="block"> <feed-comment :comment="comment" :key="comment.commentId" v-for="comment in feed.hotComments" @content-click="handleCommentContentClick"/> </div> </div> </el-col> </el-row> </div> `; // 动态内容HTML var activityHTML = ` <div :data-aid="feed.resourceId" :class="{block:true,item:!isinrepost}" :key="feed.resourceId"> <el-row :class="{repost:feed.isRepost}"> <el-col class="l" v-if="!feed.isRepost"> <a target="_blank" class="thumb thumb-preview" @click.prevent.stop="handleActivityCoverClick(feed, $event)"><img :data-aid="feed.resourceId" :src="feed.coverUrl" class="preview" /> <div class="cover"></div></a> <a target="_blank" :href="feed.userInfo.shareUrl" :title="feed.userInfo.hoverText" class="thumb thumb-avatar"><img :data-uid="feed.userInfo.id" :data-name="feed.userInfo.name" :src="feed.userInfo.headUrl" class="avatar" /></a> </el-col> <el-col class="r"> <p class="block-title"><a href="javascript:void(0)" :title="feed.isRepost?'转发':'动态'" target="_blank" class="channel">{{feed.isRepost?'转发':'动态'}}</a><a href="javascript:void(0)" :data-aid="feed.resourceId" class="title" @click="handleActivityTitleClick(feed, $event)">{{feed.caption}}</a></p> <div class="info"> <a target="_blank" :data-uid="feed.userInfo.id" :href="feed.userInfo.shareUrl" class="name">{{feed.userInfo.name}}</a> <i class="verified-icon monkey-verified-icon" v-if="feed.userInfo.isMonkeyVerified"/> <i class="verified-icon official-verified-icon" v-if="feed.userInfo.isOfficialVerified"/> <i class="verified-icon up-college-verified-icon" v-if="feed.userInfo.isUpCollegeVerified"/> <i class="verified-icon avi-verified-icon" v-if="feed.userInfo.isAviVerified"/> <span>/</span> <span>发布于<span class="time">{{feed.time}}</span></span> <span>/</span> <span :class="{commentcount:true}"><i class="icon" @click="handleCommentClick(feed, $event)"/>评论:<span class="comments pts">{{feed.commentCount}}</span></span> <span :class="{likecount:true, active:feed.isLike}"><i class="icon" @click="handleLikeClick(feed, $event)"/>点赞:<span class="likes pts">{{feed.likeCount}}</span></span> <span :class="{bananacount:true, active:feed.isThrowBanana}"><i class="icon" @click="handleBananaClick(feed, $event)"/>香蕉:<span class="bananas pts">{{feed.bananaCount}}</span></span> </div> <p class="desc" v-html="feed.moment.htmlText" @click="handleActivityContentClick(feed, $event)"></p> <div class="area-hot-comment" v-if="feed.hotComments && feed.hotComments.length>0"> <div class="block"> <feed-comment :key="comment.commentId" :comment="comment" v-for="comment in feed.hotComments" @content-click="handleCommentContentClick"/> </div> </div> <!-- 包含转发内容 --> <template v-if="feed.repostSource"> <!-- <p class="btn-toggle-info"><span><i class="icon icon-chevron-down"></i>以下是转发内容</span></p> --> <div class="area-repost"> <!-- 转发视频 --> <template v-if="feed.repostSource.isVideo"> <feed-video :feed="feed.repostSource" :isinrepost="true" @comment="handleCommentClick" @like="handleLikeClick" @collect="handleCollectClick" @banana="handleBananaClick" @throw-banana="handleThrowBanana" @comment-content-click="handleCommentContentClick"/> </template> <!-- 转发文章 --> <template v-else-if="feed.repostSource.isArticle"> <feed-article :feed="feed.repostSource" :isinrepost="true" @comment="handleCommentClick" @like="handleLikeClick" @collect="handleCollectClick" @banana="handleBananaClick" @throw-banana="handleThrowBanana" @comment-content-click="handleCommentContentClick"/> </template> <!-- 转发动态 --> <template v-if="feed.repostSource.isActivity"> <feed-activity :feed="feed.repostSource" :isinrepost="true" @title-click="handleActivityTitleClick" @content-click="handleActivityContentClick" @cover-click="handleActivityCoverClick" @comment="handleCommentClick" @like="handleLikeClick" @banana="handleBananaClick" @comment-content-click="handleCommentContentClick"/> </template> </div> </template> </el-col> </el-row> </div> `; // 动态详情 var activityDetailHTML = ` <div :class="{'activity-container':true, 'block':isinrepost}"> <div class="activity-user"> <div class="user-detail"> <a target="_blank" :href="feed.userInfo.shareUrl" :title="feed.userInfo.hoverText" class="thumb thumb-avatar"><img :data-uid="feed.userInfo.id" :data-name="feed.userInfo.name" :src="feed.userInfo.headUrl" class="avatar"></img></a> <div class="user-name-time"> <p class="name-text"> <a target="_blank" :href="feed.userInfo.shareUrl" :title="feed.userInfo.hoverText">{{feed.userInfo.name}}</a> <i class="verified-icon monkey-verified-icon" v-if="feed.userInfo.isMonkeyVerified"/> <i class="verified-icon official-verified-icon" v-if="feed.userInfo.isOfficialVerified"/> <i class="verified-icon up-college-verified-icon" v-if="feed.userInfo.isUpCollegeVerified"/> <i class="verified-icon avi-verified-icon" v-if="feed.userInfo.isAviVerified"/> </p> <p class="time-text">{{feed.time}}</p> </div> </div> <div :class="{'follow-btn':true, 'unfollow':!feed.userInfo.isFollowing}"> <template v-if="feed.userInfo.isFollowing"> <img src="//ali-imgs.acfun.cn/kos/nlav10360/static/pages/momentDetail/img/icon_button_followed.c954786a213003c13a59.png"></img> </template> <template v-else> <img src="//ali-imgs.acfun.cn/kos/nlav10360/static/pages/momentDetail/img/icon_button_follow.9fc198404af1fa79ae5e.png"></img> 关注 </template> </div> </div> <div class="activity-content"> <div class="activity-moment-text"> <p v-html="feed.moment.htmlText"></p> </div> <div class="activity-moment-img-container" v-if="feed.moment.imgs"> <img :src="image.originUrl?image.originUrl:image.url" :alt="image.title?image.title:'图片'" v-for="image in feed.moment.imgs" @click="handleActivityCoverClick(feed, $event, image)"></img> </div> </div> <div :class="{'activity-repost-content':true, item:!feed.repostSource.isActivity}" v-if="feed.repostSource"> <!-- 转发视频 --> <template v-if="feed.repostSource.isVideo"> <feed-video :feed="feed.repostSource" :isinrepost="true" @comment="handleCommentClick" @like="handleLikeClick" @collect="handleCollectClick" @banana="handleBananaClick" @throw-banana="handleThrowBanana" @comment-content-click="handleCommentContentClick"/> </template> <!-- 转发文章 --> <template v-else-if="feed.repostSource.isArticle"> <feed-article :feed="feed.repostSource" :isinrepost="true" @comment="handleCommentClick" @like="handleLikeClick" @collect="handleCollectClick" @banana="handleBananaClick" @throw-banana="handleThrowBanana" @comment-content-click="handleCommentContentClick"/> </template> <!-- 转发动态 --> <template v-if="feed.repostSource.isActivity"> <feed-activity-detail :feed="feed.repostSource" :isinrepost="true" @cover-click="handleActivityCoverClick"></feed-activity-detail> </template> </div> <div class="activity-comment-container" v-if="hotCommentList && hotCommentList.length>0"> <div class="activity-comment-title"> <span class="comment-title-str">热门评论</span> <span class="comment-title-number">{{hotCommentList.length}}</span> </div> <div class="activity-comment-list" v-loading="commentLoading"> <feed-comment :comment="comment" :key="comment.commentId" v-for="comment in hotCommentList" @content-click="handleCommentContentClick" @see-more-click="handleFetchComment(null, comment)"/> </div> </div> <div class="activity-comment-container" v-if="!isinrepost && feed.getCommentList"> <div class="activity-comment-title"> <span class="comment-title-str">全部评论</span> <span class="comment-title-number">{{commentCount}}</span> </div> <!-- 评论分页 --> <feed-paginator :pcursors="commentPcursors" :pcursor="commentPcursor" :page="commentPage" @change="handleFetchComment"/> <div class="activity-comment-list" v-loading="commentLoading"> <p class="activity-comment-list-empty" v-if="!commentList || commentList.length==0">暂无评论</p> <feed-comment :comment="comment" :key="comment.commentId" v-for="comment in commentList" @content-click="handleCommentContentClick" @see-more-click="handleFetchComment(null, comment)"/> </div> <!-- 评论分页 --> <feed-paginator :pcursors="commentPcursors" :pcursor="commentPcursor" :page="commentPage" @change="handleFetchComment"/> </div> </div> `; // 评论 var commentHTML = ` <div :class="{'area-comment':true, 'area-sub-comment':issubcomment}"> <div class="area-comment-top" :data-commentid="comment.commentId"> <div class="area-comment-first clearfix"> <div class="area-comment-left"> <a class="thumb" target="_blank" :href="comment.userInfo.shareUrl"> <img class="avatar" :src="comment.userInfo.headUrl" /> </a> </div> <div class="area-comment-right"> <div class="area-comment-title info"> <a class="name" target="_blank" :data-userid="comment.userInfo.id" :href="comment.userInfo.shareUrl" style="color: #fd4c5c">{{comment.userInfo.name}}</a> <i class="verified-icon monkey-verified-icon" v-if="comment.userInfo.isMonkeyVerified"/> <i class="verified-icon official-verified-icon" v-if="comment.userInfo.isOfficialVerified"/> <i class="verified-icon up-college-verified-icon" v-if="comment.userInfo.isUpCollegeVerified"/> <i class="verified-icon avi-verified-icon" v-if="comment.userInfo.isAviVerified"/> <template v-if="comment.time"> <span class="time-day">发表于</span> <span class="time-times">{{comment.time}}</span> </template> <span class="up-sign" v-if="comment.isUp">UP</span> <span class="sticky-sign" v-if="comment.isSticky">置顶</span> </div> <div class="area-comment-des"> <p class="area-comment-des-content" v-html="comment.content" @click="handleCommentContentClick(comment, $event)"></p> </div> <div class="area-comment-tool"> <a class="area-comment-like area-comment-up">赞 {{comment.likeCount>0?comment.likeCount:''}}</a> <a class="area-comment-reply">回复</a> </div> </div> <span class="index-comment" v-if="!issubcomment && comment.index">#{{comment.index}}</span> </div> </div> <div class="area-sub-comment-container" v-if="comment.subCommentList && comment.subCommentList.length"> <feed-comment :comment="subComment" :issubcomment="true" :key="subComment.commentId" v-for="subComment in comment.subCommentList" @content-click="handleCommentContentClick" /> <div class="area-see-more-container"> <span>共{{comment.subCommentCount}}条回复</span> <template v-if="comment.pcursor != 'no_more'"> <span>，</span> <span class="area-see-more" v-if="!comment.loading" @click="handleSeeMoreClick(comment, $event)">点击继续查看</span> </template> </div> </div> </div> `; Vue.component('feed-paginator', { data : function(){ return { pageSize : config.PAGE.PAGESIZE, pageRange : 4, jumpPage : 1, }; }, methods : { toNextPage : function(){ this.$emit('change', { page : this.page + 1, total : this.total, pageSize : this.pageSize, pcursor : this.pcursors[this.page], }); }, toPrevPage : function(){ this.$emit('change', { page : this.page - 1, total : this.total, pageSize : this.pageSize, pcursor : this.pcursors[this.page-2], }); }, toFinalPage : function(){ this.$emit('change', { page : this.total, total : this.total, pageSize : this.pageSize, pcursor : this.pcursors[this.total-1], }); }, toFirstPage : function(){ this.$emit('change', { page : 1, total : this.total, pageSize : this.pageSize, pcursor : this.pcursors[0], }); }, toJumpPage : function(pageText){ var page = parseInt(pageText); if(_.isNaN(page)){ this.$message({ type : 'error', message : `无法识别的页码：${pageText}`, }); } else if(page>this.total){ this.$message({ type : 'error', message : `无法跳至指定位置（页码不得大于${this.total}）`, }); } else if(page<1){ this.$message({ type : 'error', message : `无法跳至指定位置（页码不得小于1）`, }); } else{ this.$emit('change', { page : page, total : this.total, pageSize : this.pageSize, pcursor : this.pcursors[page-1], }); } }, }, computed : { total : function(){ return this.pcursors.length>0?_.filter(this.pcursors, function(pcursor){return pcursor!='no_more';}).length:0; }, minPage : function(){ // 当前页码往前N页 return Math.max(1, this.page - this.pageRange); }, maxPage : function(){ // 当前页码往后N页 return Math.min(this.total, this.page + this.pageRange); }, pages : function(){ var minPage = this.minPage,maxPage = this.maxPage; var pages = []; for(var page=minPage;page<=maxPage;++page){ pages.push(page); } return pages; }, }, watch : { page : function(oldVal, newVal){ this.jumpPage = this.page; }, }, props : ['pcursors', 'pcursor', 'page'], template : paginatorHTML, }); Vue.component('feed-banana', { data : function(){ return { total : 5, count : 0, }; }, props : ['feed'], template : bananaHTML, }); Vue.component('feed-comment', { data : function(){ return { }; }, props : ['comment', 'issubcomment'], methods : { handleCommentContentClick : function(comment, event){ this.$emit('content-click', comment, event); }, handleSeeMoreClick : function(comment, event){ this.$emit('see-more-click', comment, event); } }, template : commentHTML, }); Vue.component('feed-video', { data : function(){ return {}; }, props : ['feed', 'isinrepost'], methods : { // 评论视频 handleCommentClick :function(feed, event){ this.$emit('comment', feed, event); }, // 点赞视频 handleLikeClick :function(feed, event){ this.$emit('like', feed, event); }, // 投蕉视频 handleBananaClick :function(feed, event){ this.$emit('banana', feed, event); }, // 收藏视频 handleCollectClick :function(feed, event){ this.$emit('collect', feed, event); }, handleThrowBanana : function(feed, count, event){ this.$emit('throw-banana', feed, count, event); }, handleCommentContentClick : function(comment, event){ this.$emit('comment-content-click', comment, event); }, }, template : videoHTML, }); Vue.component('feed-article', { data : function(){ return {}; }, props : ['feed', 'isinrepost'], methods : { // 评论文章 handleCommentClick :function(feed, event){ this.$emit('comment', feed, event); }, // 点赞文章 handleLikeClick :function(feed, event){ this.$emit('like', feed, event); }, // 投蕉文章 handleBananaClick :function(feed, event){ this.$emit('banana', feed, event); }, // 收藏文章 handleCollectClick :function(feed, event){ this.$emit('collect', feed, event); }, handleThrowBanana : function(feed, count, event){ this.$emit('throw-banana', feed, count, event); }, handleCommentContentClick : function(comment, event){ this.$emit('comment-content-click', comment, event); }, }, template : articleHTML, }); Vue.component('feed-activity', { data : function(){ return {}; }, props : ['feed', 'isinrepost'], methods : { // 点击动态标题 handleActivityTitleClick : function(feed, event){ this.$emit('title-click', feed, event); }, // 点击动态内容 handleActivityContentClick : function(feed, event){ this.$emit('content-click', feed, event); }, // 点击动态封面 handleActivityCoverClick : function(feed, event){ this.$emit('cover-click', feed, event); }, // 评论 handleCommentClick :function(feed, event){ this.$emit('comment', feed, event); }, // 点赞 handleLikeClick :function(feed, event){ this.$emit('like', feed, event); }, // 投蕉 handleBananaClick :function(feed, event){ this.$emit('banana', feed, event); }, // 收藏 handleCollectClick :function(feed, event){ this.$emit('collect', feed, event); }, handleThrowBanana : function(feed, count, event){ this.$emit('throw-banana', feed, count, event); }, handleCommentContentClick : function(comment, event){ this.$emit('comment-content-click', comment, event); }, }, template : activityHTML, }); Vue.component('feed-activity-detail', { data : function(){ return { commentLoading : false, commentPcursors : this.feed.commentPcursors, commentPcursor : this.feed.commentPcursor, commentList : this.feed.commentList, hotCommentList : [], commentCount : 0, commentPage : this.feed.commentPage, }; }, props : ['feed', 'isinrepost'], methods : { // 点击动态标题 handleActivityTitleClick : function(feed, event){ this.$emit('title-click', feed, event); }, // 点击动态内容 handleActivityContentClick : function(feed, event){ this.$emit('content-click', feed, event); }, // 点击动态封面 handleActivityCoverClick(feed, event, image){ this.$emit('cover-click', feed, event, image); }, // 评论 handleCommentClick :function(feed, event){ this.$emit('comment', feed, event); }, // 点赞 handleLikeClick :function(feed, event){ this.$emit('like', feed, event); }, // 投蕉 handleBananaClick :function(feed, event){ this.$emit('banana', feed, event); }, // 收藏 handleCollectClick :function(feed, event){ this.$emit('collect', feed, event); }, handleThrowBanana : function(feed, count, event){ this.$emit('throw-banana', feed, count, event); }, handleCommentContentClick : function(comment, event){ this.$emit('comment-content-click', comment, event); }, // 获取评论列表 handleFetchComment : function(pageObj, comment){ var vue = this; var isSubComment = !isNullOrEmpty(comment) && comment.commentId; if(isNullOrEmpty(pageObj)){ pageObj = { pcursor : comment.pcursor?comment.pcursor : '0', pageSize : config.PAGE.PAGESIZE, } } if(isSubComment){ comment.loading = true; } else{ this.commentPage = pageObj.page; this.commentLoading = true; this.commentList = []; } this.feed.getCommentList(pageObj, comment, function(isSuccess, pcursor, commentCount, commentList, hotCommentList){ if(!isSuccess){ vue.$message({ type : 'error', message : '获取评论列表失败', }); } else{ if(isSubComment){ comment.pcursor = pcursor; comment.subCommentList.splice(comment.subCommentList.length, 0, ...commentList); } else{ // 最新一页 if(pageObj.page == pageObj.total){ vue.commentPcursors.push(pcursor); } vue.commentList = commentList; vue.commentCount = commentCount; if(hotCommentList && hotCommentList.length>0){ vue.hotCommentList = hotCommentList; } } } if(isSubComment){ comment.loading = false; } else{ vue.commentLoading = false; } }); } }, mounted : function(){ // 获取评论 if(!this.isinrepost && this.feed && this.feed.getCommentList){ this.handleFetchComment({ page : this.commentPage, pageSize : config.PAGE.PAGESIZE, total : 1, pcursor : "0", }); } }, template : activityDetailHTML, }); // 隐藏其它tab内容 document.querySelectorAll('.ac-tabs-container .ac-tabs-panel').forEach(function(ele){ ele.style.display = 'none'; }); // 添加element-ui样式 addResource('css', 'elementcss'); addResource('font', 'element-icons'); // 加载图片查看器样式 addResource('css', 'viewercss'); // 修改展示内容 document.querySelector('#feed-content').innerHTML = ` <style> .hidden{ display : none; } .btn-toggle-info{ margin-top : 10px; border-top: 1px dashed #999; text-align: center; color: #999; height: 16px; line-height: 16px; } .btn-toggle-info span{ position: relative; top: -8px; background-color: #fff; width: 128px; } #acfunfeed-container .name { color : #c66 !important; } #list-feed-feed{ font-family: PingFangSC,PingFangSC-Regular; min-height : 400px; background: #e5e5e5; padding: 20px; } #acfunfeed-container .banner .more { overflow: visible; margin: 0 8px 0 0; padding: 0 } #acfunfeed-container .banner .more:hover { background: none; box-shadow: none } #acfunfeed-container .mainer { padding: 8px } #acfunfeed-container .unit .l { width: 120px; padding: 0 0 0 40px } #acfunfeed-container .unit .r { width: 620px } #acfunfeed-container .subtitle { margin: 4px 0; height: 24px; line-height: 24px; font-size: 13px; padding: 0 4px; border-radius: 2px; box-shadow: 0 1px 1px rgba(0,0,0,0.2); background-color: #c66; color: #fff; display: inline-block; *display: inline; cursor: default } #acfunfeed-container .block{ padding: 20px 10px; font-size: 14px; font-family: PingFangSC,PingFangSC-Regular; font-weight: 400; text-align: left; color: #333; background: white; box-shadow: 1px 1px 5px 1px #888888; } #acfunfeed-container .item { position: relative; overflow: hidden; border: 1px solid #eee; box-shadow: none; background-color: white; margin : 0 auto 16px; } #acfunfeed-container .item:hover .block-manage { right: 8px } #acfunfeed-container .item .area-cont { width: auto; height: auto; margin: 8px 10px; padding: 8px; background-color: #ffe; color: #333; display: none; border: 1px solid #ddd; border-top: 1px solid #ebebeb; border-bottom: 1px solid #b7b7b7; box-shadow: 0 1px 1px rgba(0,0,0,0.1) } #acfunfeed-container .item .desc { color: #666; margin: 4px auto 0; white-space : pre-line; } #acfunfeed-container .item .block-manage { position: absolute; left: auto; top: auto; right: -128px; bottom: 8px; transition: .2s all ease .2s } #acfunfeed-container .item .l { width : 130px; margin-right : 20px; } #acfunfeed-container .item .r { width : calc(100% - 150px); } #acfunfeed-container .item .repost { width : 97%; } #acfunfeed-container .item .repost>.r { position: relative; width : 100%; } #acfunfeed-container .item .thumb { border: none; background: none; box-shadow: none } #acfunfeed-container .item .preview { width: 122px; height: 69.5px; object-fit : cover; cursor : pointer; } #acfunfeed-container .item .avatar { width: 40px; height: 40px; box-shadow: 0 1px 4px rgba(0,0,0,0.3); background-color: #fff; border-radius: 2px object-fit: cover; } #acfunfeed-container .item .thumb-preview { margin: 8px 0 16px 8px } #acfunfeed-container .item .thumb-avatar { position: absolute; left: 96px; top: 45px } #acfunfeed-container .item .channel { background-color: #c66; position: static; display: inline-block; margin: 0 4px 4px 0; padding: 0 6px; color: white; border-radius: 5px; } #acfunfeed-container .item .title { color: #08c; font-size: 14px } #acfunfeed-container .inner { position: relative } #acfunfeed-container #list-feed-feed .item .info { color: #999; margin: 4px auto 0 } #acfunfeed-container a{ text-decoration: none !important; } #acfunfeed-container .area-tag { display: inline-block; *display: inline; border-top: 1px dashed #ddd; margin: 8px 0 16px; padding: 8px 16px 0 0; color: #999; font-size: 12px } #acfunfeed-container .area-tag a { margin: 0 8px 8px 0; color: #369 } #acfunfeed-container .area-repost { background: #e5e5e5 !important; padding: 20px 10px; } #acfunfeed-container .area-hot-comment { display: inline-block; *display: inline; border-top: 1px dashed #ddd; margin: 8px 0 16px; padding: 8px 16px 0 0; color: #999; font-size: 12px; width : 100%; } #acfunfeed-container .area-repost .block .r{ width : 76%; } #acfunfeed-container .btn-history-delete { float: right; height: 24px; line-height: 24px; font-size: 12px; color: #999; background-color: #eee; padding: 0 8px; border-radius: 2px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.2); cursor: pointer; font-family: "Microsoft YaHei","微软雅黑",tahoma,arial,simsun,"宋体"; margin: 4px } #acfunfeed-container .btn-history-delete:hover { color: #fff; background-color: #c33; box-shadow: inset 0 1px 2px rgba(0,0,0,0.5) } #acfunfeed-container .removed { text-align: center; line-height: 8; color: #999 } #acfunfeed-container .hint-list-index { position: absolute; left: auto; top: auto; right: 12px; bottom: 0; font-size: 64px; line-height: 64px; height: 64px; width: auto; text-align: right; color: #eee; z-index: 0; letter-spacing: -.1em; cursor: default } #acfunfeed-container .area-pager { padding: 0; margin: 8px auto } #acfunfeed-container .area-pager .pager { cursor: pointer; text-align: center; display: inline-block; height: 28px; line-height: 28px; vertical-align: top; font-size: 14px; box-sizing: border-box; margin: 0 2px; color: #222; min-width: 30px; border-radius: 3px; border: 1px solid #e5e5e5; background: #fff; } #acfunfeed-container .area-pager .pager.active{ color : white; min-width: 35.5px; background: #ec4556; border: 1px solid #ec4556; } #acfunfeed-container .area-pager .hint{ height: 28px; line-height: 28px; display: inline-block; vertical-align : top; } #acfunfeed-container .area-pager .hint .ipt-pager{ margin: 0 5px; padding: 0 10px; height: 28px; line-height: 28px; font-size: 12px; box-shadow: none; width: 50px; border-radius: 4px; border: 1px solid #ddd; outline: none; text-align: center; vertical-align : top; } #acfunfeed-container .area-pager .hint .btn-pager{ height: 100%; margin-left: 10px; border: 1px solid #e5e5e5; border-radius: 5px; } #acfunfeed-container .item-comms .area-cont { display: block } .no-rgba #acfunfeed-container .item { border-color: #ccc } #list-channel-push { margin: 8px auto 16px; padding: 0 0 16px; border-bottom: 1px dashed #ddd } #list-group-push { overflow: visible; margin: 0 auto 16px; padding: 0 0 16px; border-bottom: 1px #ddd dashed } #list-group-push .item-push { display: inline-block; *display: inline; float: left; margin: 4px 8px 0 0; position: relative; overflow: hidden; border-color: rgba(0,0,0,0.1) } .btn-manage-push { min-width: 0; *width: auto; padding: 0 } .btn-manage-push .icon { margin: 0 .2em } .btn-manage-push .item { background-color: #fff } @media screen and (min-width:1440px) { #list-feed-feed .item .l { width: 140px; margin-right : 20px; } #list-feed-feed .item .r { width: calc(100% - 160px); } #acfunfeed-container .item .preview { width: 130px; height: 74px; object-fit : cover; } #acfunfeed-container .item .thumb-avatar { top: 48px; left: 104px } } #acfunfeed-container .ubb-at { cursor : pointer; color : #08c; } #acfunfeed-container .ubb-img { cursor : pointer; color : #08c; } #acfunfeed-container .ubb-img .iconfont{ font-size : 15px; } #acfunfeed-container .ubb-emot { vertical-align: baseline; max-width: 48px!important; max-height: 48px!important; margin: 4px 1px 0; } #acfunfeed-container .icon{ display : inline-block; width : 12px; height : 12px; cursor : pointer; } #acfunfeed-container .commentcount .icon{ background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTNweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSIwIDAgMTMgMTMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjUgKDY3NDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5pY29uX2NvbW1lbnRfcGw8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iaWNvbl9jb21tZW50X3BsIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iaWNvbl/mlofnq6Dor4TorrotY29weS0yIiBmaWxsPSIjOTk5OTk5IiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8cGF0aCBkPSJNNC4wNzAwMjc0NywxMiBMMC42MzczNjA1NjQsMTIuOTgwNzYyIEMwLjMxNzk1MjQ2MSwxMy4wNzIwMjE0IDAsMTIuODMyMTg5NCAwLDEyLjUgTDAsNCBDMCwyLjcyMzg1NzYzIDAuNzIzODU3NjI1LDIgMiwyIEwxMSwyIEMxMi4yNzYxNDI0LDIgMTMsMi43MjM4NTc2MyAxMyw0IEwxMywxMCBDMTMsMTEuMjc2MTQyNCAxMi4yNzYxNDI0LDEyIDExLDEyIEw0LjA3MDAyNzQ3LDEyIFogTTksNSBDOC40NDc3MTUyNSw1IDgsNS40NDc3MTUyNSA4LDYgTDgsNyBDOCw3LjU1MjI4NDc1IDguNDQ3NzE1MjUsOCA5LDggQzkuNTUyMjg0NzUsOCAxMCw3LjU1MjI4NDc1IDEwLDcgTDEwLDYgQzEwLDUuNDQ3NzE1MjUgOS41NTIyODQ3NSw1IDksNSBaIE00LDUgQzMuNDQ3NzE1MjUsNSAzLDUuNDQ3NzE1MjUgMyw2IEwzLDcgQzMsNy41NTIyODQ3NSAzLjQ0NzcxNTI1LDggNCw4IEM0LjU1MjI4NDc1LDggNSw3LjU1MjI4NDc1IDUsNyBMNSw2IEM1LDUuNDQ3NzE1MjUgNC41NTIyODQ3NSw1IDQsNSBaIiBpZD0iQ29tYmluZWQtU2hhcGUiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==); background-position: 0; background-size: cover; background-origin: content-box; background-repeat: no-repeat; } #acfunfeed-container .commentcount .icon:hover { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTNweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSIwIDAgMTMgMTMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjUgKDY3NDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5pY29uX2NvbW1lbnRfcGxfaG92ZXI8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iaWNvbl9jb21tZW50X3BsX2hvdmVyIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iaWNvbl/mlofnq6Dor4TorrotY29weS0iIGZpbGw9IiNGRDRDNUMiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik00LjA3MDAyNzQ3LDEyIEwwLjYzNzM2MDU2NCwxMi45ODA3NjIgQzAuMzE3OTUyNDYxLDEzLjA3MjAyMTQgMCwxMi44MzIxODk0IDAsMTIuNSBMMCw0IEMwLDIuNzIzODU3NjMgMC43MjM4NTc2MjUsMiAyLDIgTDExLDIgQzEyLjI3NjE0MjQsMiAxMywyLjcyMzg1NzYzIDEzLDQgTDEzLDEwIEMxMywxMS4yNzYxNDI0IDEyLjI3NjE0MjQsMTIgMTEsMTIgTDQuMDcwMDI3NDcsMTIgWiBNOSw1IEM4LjQ0NzcxNTI1LDUgOCw1LjQ0NzcxNTI1IDgsNiBMOCw3IEM4LDcuNTUyMjg0NzUgOC40NDc3MTUyNSw4IDksOCBDOS41NTIyODQ3NSw4IDEwLDcuNTUyMjg0NzUgMTAsNyBMMTAsNiBDMTAsNS40NDc3MTUyNSA5LjU1MjI4NDc1LDUgOSw1IFogTTQsNSBDMy40NDc3MTUyNSw1IDMsNS40NDc3MTUyNSAzLDYgTDMsNyBDMyw3LjU1MjI4NDc1IDMuNDQ3NzE1MjUsOCA0LDggQzQuNTUyMjg0NzUsOCA1LDcuNTUyMjg0NzUgNSw3IEw1LDYgQzUsNS40NDc3MTUyNSA0LjU1MjI4NDc1LDUgNCw1IFoiIGlkPSJDb21iaW5lZC1TaGFwZSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+); } #acfunfeed-container .commentcount.active .icon { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTNweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSIwIDAgMTMgMTMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjUgKDY3NDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5pY29uX2NvbW1lbnRfcGxfaG92ZXI8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iaWNvbl9jb21tZW50X3BsX2hvdmVyIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iaWNvbl/mlofnq6Dor4TorrotY29weS0iIGZpbGw9IiNGRDRDNUMiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik00LjA3MDAyNzQ3LDEyIEwwLjYzNzM2MDU2NCwxMi45ODA3NjIgQzAuMzE3OTUyNDYxLDEzLjA3MjAyMTQgMCwxMi44MzIxODk0IDAsMTIuNSBMMCw0IEMwLDIuNzIzODU3NjMgMC43MjM4NTc2MjUsMiAyLDIgTDExLDIgQzEyLjI3NjE0MjQsMiAxMywyLjcyMzg1NzYzIDEzLDQgTDEzLDEwIEMxMywxMS4yNzYxNDI0IDEyLjI3NjE0MjQsMTIgMTEsMTIgTDQuMDcwMDI3NDcsMTIgWiBNOSw1IEM4LjQ0NzcxNTI1LDUgOCw1LjQ0NzcxNTI1IDgsNiBMOCw3IEM4LDcuNTUyMjg0NzUgOC40NDc3MTUyNSw4IDksOCBDOS41NTIyODQ3NSw4IDEwLDcuNTUyMjg0NzUgMTAsNyBMMTAsNiBDMTAsNS40NDc3MTUyNSA5LjU1MjI4NDc1LDUgOSw1IFogTTQsNSBDMy40NDc3MTUyNSw1IDMsNS40NDc3MTUyNSAzLDYgTDMsNyBDMyw3LjU1MjI4NDc1IDMuNDQ3NzE1MjUsOCA0LDggQzQuNTUyMjg0NzUsOCA1LDcuNTUyMjg0NzUgNSw3IEw1LDYgQzUsNS40NDc3MTUyNSA0LjU1MjI4NDc1LDUgNCw1IFoiIGlkPSJDb21iaW5lZC1TaGFwZSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+); } #acfunfeed-container .likecount .icon{ background-image: url(//cdnfile.aixifan.com/static/article/widget/content/img/keyFrames/frame1.3039ed46b4f6639fa576.svg); background-position: 0; background-size: cover; background-origin: content-box; background-repeat: no-repeat; } #acfunfeed-container .likecount .icon:hover { background-image: url(//cdnfile.aixifan.com/static/article/widget/content/img/keyFrames/frame12.fd90720499ace4b7850b.svg); } #acfunfeed-container .likecount.active .icon { background-image: url(//cdnfile.aixifan.com/static/article/widget/content/img/keyFrames/frame12.fd90720499ace4b7850b.svg); } #acfunfeed-container .collectcount .icon{ background-image: url(//cdnfile.aixifan.com/static/article/widget/content/img/icon_follow.67c57d40c135d9f5036d.svg); background-position: 0; background-size: cover; background-origin: content-box; background-repeat: no-repeat; } #acfunfeed-container .collectcount .icon:hover { background-image: url(//cdnfile.aixifan.com/static/article/widget/content/img/icon_follow_hover.c96c3455cd5ebe98a14d.svg); } #acfunfeed-container .collectcount.active .icon { background-image: url(//cdnfile.aixifan.com/static/article/widget/content/img/icon_follow_hover.c96c3455cd5ebe98a14d.svg); } #acfunfeed-container .bananacount { position : relative; } #acfunfeed-container .bananacount .icon{ background-image: url(//cdnfile.aixifan.com/static/article/widget/content/img/icon_banana.d21040881e9721eb1fc8.svg); background-position: 0; background-size: cover; background-origin: content-box; background-repeat: no-repeat; } #acfunfeed-container .bananacount .icon:hover { background-image: url(//cdnfile.aixifan.com/static/article/widget/content/img/icon_banana_hover.31b7f8940e072833fa9c.svg); } #acfunfeed-container .bananacount.active .icon { background-image: url(//cdnfile.aixifan.com/static/article/widget/content/img/icon_banana_hover.31b7f8940e072833fa9c.svg); } #acfunfeed-container .verified-icon{ display : inline-block; width : 12px; height : 12px; background-position: 0; background-size: 100% 100%; background-origin: content-box; background-repeat: no-repeat; } #acfunfeed-container .verified-icon.monkey-verified-icon{ background-image: url(//cdnfile.aixifan.com/static/common/static/img/icon_monkey.1b51622f33db76d86ce4.svg); } #acfunfeed-container .verified-icon.official-verified-icon{ background-image: url(//cdnfile.aixifan.com/static/common/static/img/icon_v.9830a4cddee7ed5c25bc.svg); } #acfunfeed-container .verified-icon.avi-verified-icon{ background-image: url(//cdnfile.aixifan.com/static/common/static/img/icon_avi.38445e8a9e69abb681be.svg); } #acfunfeed-container .verified-icon.up-college-verified-icon{ background-image: url(//cdnfile.aixifan.com/static/common/static/img/icon_up.260498c08f0b823da4d5.svg); background-position: 0; background-size: cover; background-origin: content-box; background-repeat: no-repeat; } #acfunfeed-container .div-banana{ top: 15px; right : 0px; position: absolute; z-index: 1; width: 280px; height: 75px; padding: 20px 0px 10px 20px; background: url(//cdnfile.aixifan.com/static/common/widget/bannanaer/img/BananaCard.baf4c0fa9919bc187505.svg) no-repeat 100% 50%; box-shadow: 0 2px 5px rgb(0 0 0 / 30%); border-radius: 5px; } #acfunfeed-container .div-banana .bananaer { background: url(//cdnfile.aixifan.com/static/common/widget/bannanaer/img/icon_bananaer_fl.bbac4d0170df4626860f.svg) 50% no-repeat; width: 32px; height: 32px; margin-right: 20px; cursor: pointer; display: inline-block; vertical-align: middle; font-size: 14px; line-height: 30px; height: 30px; } #acfunfeed-container .div-banana .bananaer.active{ -webkit-animation:pulse .5s ease .2s both; animation:pulse .5s ease .2s both; background:url(//cdnfile.aixifan.com/static/common/widget/bannanaer/img/icon_banana_active.1e02b5c47e1c404a68ba.svg) 50% no-repeat; } #acfunfeed-container .div-banana .text{ display: inline-block; vertical-align: middle; line-height: 30px; margin-top: 2px; width: 100%; height: 14px; text-align: center; font-size: 14px; line-height: 14px; color: #fff; float: left; padding-right: 20px; } #acfunfeed-container .area-comment .area-comment-top { width: 100%; position: relative; } #acfunfeed-container .area-comment .area-comment-first { position: relative; height: auto; } #acfunfeed-container .area-comment .area-comment-left { width: 30px; height: 50px; float: left; left: 10px; bottom: -5px; margin-top: -5px; position: relative; } #acfunfeed-container .area-comment .area-comment-left .thumb { position: relative; border: none; background: 0; margin: 0; padding: 0; border-radius: 0; box-shadow: none; display: block; } #acfunfeed-container .area-comment .area-comment-left .avatar { width: 30px; height: 30px; margin: 0; padding: 0; border: 1px solid #ffffff; box-shadow: 0 0 0 rgb(0 0 0 / 0%); border-radius: 50%; object-fit: cover; } #acfunfeed-container .area-comment .area-comment-right { margin-left: 50px; } #acfunfeed-container .area-comment .area-comment-title { height: 20px; line-height: 25px; display: flex; align-items: center; } #acfunfeed-container .area-comment .area-comment-title .name { margin-right: 2px; color: #333333; font-size: 12px; margin-left : 0px; } #acfunfeed-container .area-comment .area-comment-title .time-day{ margin-left : 10px; } #acfunfeed-container .area-comment .area-comment-title .time-day, #acfunfeed-container .area-comment .area-comment-title .time-times { font-size: 12px; color: #999999; } #acfunfeed-container .area-comment .area-comment-title .sticky-sign{ display: inline-block; margin-left: 4px; padding: 0 6px; color: #c66; border-radius: 5px; font-size: 12px; border : 1px solid #c66; line-height: 16px; height: 16px; text-align : center; } #acfunfeed-container .area-comment .area-comment-title .up-sign{ display: inline-block; margin-left: 4px; padding: 0 6px; color: #409EFF; border-radius: 5px; font-size: 12px; border : 1px solid #409EFF; line-height: 16px; height: 16px; text-align : center; } #acfunfeed-container .area-comment .area-comment-des { color: #333333; font-size: 14px; margin: 8px 0 13px 0; word-wrap: break-word; word-break: break-word; line-height: 1.38; } #acfunfeed-container .area-comment .area-comment-tool { position: relative; clear: both; font-size: 12px; color: #999999; margin-bottom: 17px; } #acfunfeed-container .area-comment .area-comment-up { background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTNweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSIwIDAgMTMgMTMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjUgKDY3NDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5pY29uX2NvbW1lbnRfejwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJpY29uX2NvbW1lbnRfeiIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9InphbjEiIGZpbGw9IiM5OTk5OTkiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0xLjUsMyBDMi4zMjg0MjcxMiwzIDMsMy42NzE1NzI4OCAzLDQuNSBMMywxMC41IEMzLDExLjMyODQyNzEgMi4zMjg0MjcxMiwxMiAxLjUsMTIgQzAuNjcxNTcyODc1LDEyIDEuNTU0MzEyMjNlLTE1LDExLjMyODQyNzEgLTEuMTEwMjIzMDJlLTE2LDEwLjUgTC0xLjExMDIyMzAyZS0xNiw0LjUgQy0xLjExMDIyMzAyZS0xNiwzLjY3MTU3Mjg4IDAuNjcxNTcyODc1LDMgMS41LDMgWiIgaWQ9IlJlY3RhbmdsZS0xNSI+PC9wYXRoPgogICAgICAgICAgICA8cGF0aCBkPSJNMTAuNzI0Njg3NSwzLjg5NjQzNDI0IEMxMi4xNzUyNzM5LDMuODk2NDM0MjQgMTMuMjkwNjc2Nyw1LjI4MTY0OTIgMTIuOTM3NTY1Miw2LjQ3MTUxNTkgTDExLjg1NDEwMjcsMTAuMTIyNDE4MyBDMTEuNDE0OTkyNSwxMS42MDIwNzEzIDEwLjkxODg0OTgsMTIgOS40MjQ1MzI1OCwxMiBMNC41LDEyIEM0LjIyMzg1NzYzLDEyIDQsMTEuNzc2MTQyNCA0LDExLjUgTDQsNC4zNSBDNCw0LjE4MDExMDQzIDQuMDg2MjY1NDEsNC4wMjE4NDQzMSA0LjIyOTA0NzMzLDMuOTI5NzgwMjQgTDUuMjM4MDAzODIsMy4yODA5MTY0NSBDNS41NjY5MDY4NiwzLjAzMTc2Mjg3IDUuNzkzNTMxMDIsMi43NDE0OTM3MyA1Ljk1MzY0MjQ5LDIuMzk1MDE4OTggQzYuMDkyOTI0MTksMi4wOTM2MTkwMiA2LjEyMjA3MDY5LDEuOTgxNjQyMjYgNi4yNzc0ODI4OCwxLjI1OTk1OTU2IEM2LjQ4OTkzNzgsMC4yNzMzODkzNDcgNi44NjM3MzY2OSwtMC4xNjExNDk5NjggNy43OTc0MTA0NiwwLjA0MjIyODg2MTYgQzkuMjg0MjE3OTgsMC4zNjYwOTQ4NDUgOS41NzE5NDQ1MSwxLjczNDE4MTczIDguODQzMDE1OTksMy44OTY0MzQyNCBMMTAuNzI0Njg3NSwzLjg5NjQzNDI0IFoiIGlkPSJQYXRoLTQiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==) no-repeat; background-size: 13px 13px; background-position: 1px 1px; padding-left: 20px; color: #999; cursor : pointer; margin-right : 20px; } #acfunfeed-container .area-comment .area-comment-reply { background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTNweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSIwIDAgMTMgMTMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjUgKDY3NDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5pY29uX2NvbW1lbnRfcGw8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iaWNvbl9jb21tZW50X3BsIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iaWNvbl/mlofnq6Dor4TorrotY29weS0yIiBmaWxsPSIjOTk5OTk5IiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8cGF0aCBkPSJNNC4wNzAwMjc0NywxMiBMMC42MzczNjA1NjQsMTIuOTgwNzYyIEMwLjMxNzk1MjQ2MSwxMy4wNzIwMjE0IDAsMTIuODMyMTg5NCAwLDEyLjUgTDAsNCBDMCwyLjcyMzg1NzYzIDAuNzIzODU3NjI1LDIgMiwyIEwxMSwyIEMxMi4yNzYxNDI0LDIgMTMsMi43MjM4NTc2MyAxMyw0IEwxMywxMCBDMTMsMTEuMjc2MTQyNCAxMi4yNzYxNDI0LDEyIDExLDEyIEw0LjA3MDAyNzQ3LDEyIFogTTksNSBDOC40NDc3MTUyNSw1IDgsNS40NDc3MTUyNSA4LDYgTDgsNyBDOCw3LjU1MjI4NDc1IDguNDQ3NzE1MjUsOCA5LDggQzkuNTUyMjg0NzUsOCAxMCw3LjU1MjI4NDc1IDEwLDcgTDEwLDYgQzEwLDUuNDQ3NzE1MjUgOS41NTIyODQ3NSw1IDksNSBaIE00LDUgQzMuNDQ3NzE1MjUsNSAzLDUuNDQ3NzE1MjUgMyw2IEwzLDcgQzMsNy41NTIyODQ3NSAzLjQ0NzcxNTI1LDggNCw4IEM0LjU1MjI4NDc1LDggNSw3LjU1MjI4NDc1IDUsNyBMNSw2IEM1LDUuNDQ3NzE1MjUgNC41NTIyODQ3NSw1IDQsNSBaIiBpZD0iQ29tYmluZWQtU2hhcGUiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==) no-repeat; background-size: 13px 13px; background-position: 0 1px; padding-left: 17px; color: #999; cursor : pointer; } #acfunfeed-container .area-comment .area-comment-up:hover { background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTNweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSIwIDAgMTMgMTMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjUgKDY3NDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5pY29uX2NvbW1lbnRfel9ob3ZlcjwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJpY29uX2NvbW1lbnRfel9ob3ZlciIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9InphbjMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLCAtMS4wMDAwMDApIiBmaWxsPSIjRkQ0QzVDIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8cGF0aCBkPSJNMS41LDQgQzIuMzI4NDI3MTIsNCAzLDQuNjcxNTcyODggMyw1LjUgTDMsMTEuNSBDMywxMi4zMjg0MjcxIDIuMzI4NDI3MTIsMTMgMS41LDEzIEMwLjY3MTU3Mjg3NSwxMyAxLjY2NTMzNDU0ZS0xNSwxMi4zMjg0MjcxIDAsMTEuNSBMMCw1LjUgQzAsNC42NzE1NzI4OCAwLjY3MTU3Mjg3NSw0IDEuNSw0IFoiIGlkPSJSZWN0YW5nbGUtMTUiPjwvcGF0aD4KICAgICAgICAgICAgPHBhdGggZD0iTTEwLjcyNDY4NzUsNC44OTY0MzQyNCBDMTIuMTc1MjczOSw0Ljg5NjQzNDI0IDEzLjI5MDY3NjcsNi4yODE2NDkyIDEyLjkzNzU2NTIsNy40NzE1MTU5IEwxMS44NTQxMDI3LDExLjEyMjQxODMgQzExLjQxNDk5MjUsMTIuNjAyMDcxMyAxMC45MTg4NDk4LDEzIDkuNDI0NTMyNTgsMTMgTDQuNSwxMyBDNC4yMjM4NTc2MywxMyA0LDEyLjc3NjE0MjQgNCwxMi41IEw0LDUuMzUgQzQsNS4xODAxMTA0MyA0LjA4NjI2NTQxLDUuMDIxODQ0MzEgNC4yMjkwNDczMyw0LjkyOTc4MDI0IEw1LjIzODAwMzgyLDQuMjgwOTE2NDUgQzUuNTY2OTA2ODYsNC4wMzE3NjI4NyA1Ljc5MzUzMTAyLDMuNzQxNDkzNzMgNS45NTM2NDI0OSwzLjM5NTAxODk4IEM2LjA5MjkyNDE5LDMuMDkzNjE5MDIgNi4xMjIwNzA2OSwyLjk4MTY0MjI2IDYuMjc3NDgyODgsMi4yNTk5NTk1NiBDNi40ODk5Mzc4LDEuMjczMzg5MzUgNi44NjM3MzY2OSwwLjgzODg1MDAzMiA3Ljc5NzQxMDQ2LDEuMDQyMjI4ODYgQzkuMjg0MjE3OTgsMS4zNjYwOTQ4NSA5LjU3MTk0NDUxLDIuNzM0MTgxNzMgOC44NDMwMTU5OSw0Ljg5NjQzNDI0IEwxMC43MjQ2ODc1LDQuODk2NDM0MjQgWiIgaWQ9IlBhdGgtNCI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat; color: #FD4C5C; } #acfunfeed-container .area-comment .area-comment-up.active { background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTNweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSIwIDAgMTMgMTMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjUgKDY3NDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5pY29uX2NvbW1lbnRfel9ob3ZlcjwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJpY29uX2NvbW1lbnRfel9ob3ZlciIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9InphbjMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLCAtMS4wMDAwMDApIiBmaWxsPSIjRkQ0QzVDIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8cGF0aCBkPSJNMS41LDQgQzIuMzI4NDI3MTIsNCAzLDQuNjcxNTcyODggMyw1LjUgTDMsMTEuNSBDMywxMi4zMjg0MjcxIDIuMzI4NDI3MTIsMTMgMS41LDEzIEMwLjY3MTU3Mjg3NSwxMyAxLjY2NTMzNDU0ZS0xNSwxMi4zMjg0MjcxIDAsMTEuNSBMMCw1LjUgQzAsNC42NzE1NzI4OCAwLjY3MTU3Mjg3NSw0IDEuNSw0IFoiIGlkPSJSZWN0YW5nbGUtMTUiPjwvcGF0aD4KICAgICAgICAgICAgPHBhdGggZD0iTTEwLjcyNDY4NzUsNC44OTY0MzQyNCBDMTIuMTc1MjczOSw0Ljg5NjQzNDI0IDEzLjI5MDY3NjcsNi4yODE2NDkyIDEyLjkzNzU2NTIsNy40NzE1MTU5IEwxMS44NTQxMDI3LDExLjEyMjQxODMgQzExLjQxNDk5MjUsMTIuNjAyMDcxMyAxMC45MTg4NDk4LDEzIDkuNDI0NTMyNTgsMTMgTDQuNSwxMyBDNC4yMjM4NTc2MywxMyA0LDEyLjc3NjE0MjQgNCwxMi41IEw0LDUuMzUgQzQsNS4xODAxMTA0MyA0LjA4NjI2NTQxLDUuMDIxODQ0MzEgNC4yMjkwNDczMyw0LjkyOTc4MDI0IEw1LjIzODAwMzgyLDQuMjgwOTE2NDUgQzUuNTY2OTA2ODYsNC4wMzE3NjI4NyA1Ljc5MzUzMTAyLDMuNzQxNDkzNzMgNS45NTM2NDI0OSwzLjM5NTAxODk4IEM2LjA5MjkyNDE5LDMuMDkzNjE5MDIgNi4xMjIwNzA2OSwyLjk4MTY0MjI2IDYuMjc3NDgyODgsMi4yNTk5NTk1NiBDNi40ODk5Mzc4LDEuMjczMzg5MzUgNi44NjM3MzY2OSwwLjgzODg1MDAzMiA3Ljc5NzQxMDQ2LDEuMDQyMjI4ODYgQzkuMjg0MjE3OTgsMS4zNjYwOTQ4NSA5LjU3MTk0NDUxLDIuNzM0MTgxNzMgOC44NDMwMTU5OSw0Ljg5NjQzNDI0IEwxMC43MjQ2ODc1LDQuODk2NDM0MjQgWiIgaWQ9IlBhdGgtNCI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat; color: #FD4C5C; } #acfunfeed-container .area-comment .area-comment-reply:hover { background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTNweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSIwIDAgMTMgMTMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjUgKDY3NDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5pY29uX2NvbW1lbnRfcGxfaG92ZXI8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iaWNvbl9jb21tZW50X3BsX2hvdmVyIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iaWNvbl/mlofnq6Dor4TorrotY29weS0iIGZpbGw9IiNGRDRDNUMiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik00LjA3MDAyNzQ3LDEyIEwwLjYzNzM2MDU2NCwxMi45ODA3NjIgQzAuMzE3OTUyNDYxLDEzLjA3MjAyMTQgMCwxMi44MzIxODk0IDAsMTIuNSBMMCw0IEMwLDIuNzIzODU3NjMgMC43MjM4NTc2MjUsMiAyLDIgTDExLDIgQzEyLjI3NjE0MjQsMiAxMywyLjcyMzg1NzYzIDEzLDQgTDEzLDEwIEMxMywxMS4yNzYxNDI0IDEyLjI3NjE0MjQsMTIgMTEsMTIgTDQuMDcwMDI3NDcsMTIgWiBNOSw1IEM4LjQ0NzcxNTI1LDUgOCw1LjQ0NzcxNTI1IDgsNiBMOCw3IEM4LDcuNTUyMjg0NzUgOC40NDc3MTUyNSw4IDksOCBDOS41NTIyODQ3NSw4IDEwLDcuNTUyMjg0NzUgMTAsNyBMMTAsNiBDMTAsNS40NDc3MTUyNSA5LjU1MjI4NDc1LDUgOSw1IFogTTQsNSBDMy40NDc3MTUyNSw1IDMsNS40NDc3MTUyNSAzLDYgTDMsNyBDMyw3LjU1MjI4NDc1IDMuNDQ3NzE1MjUsOCA0LDggQzQuNTUyMjg0NzUsOCA1LDcuNTUyMjg0NzUgNSw3IEw1LDYgQzUsNS40NDc3MTUyNSA0LjU1MjI4NDc1LDUgNCw1IFoiIGlkPSJDb21iaW5lZC1TaGFwZSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat; color: #FD4C5C; } #acfunfeed-container .area-comment .area-comment-reply.active { background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTNweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSIwIDAgMTMgMTMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjUgKDY3NDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5pY29uX2NvbW1lbnRfcGxfaG92ZXI8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iaWNvbl9jb21tZW50X3BsX2hvdmVyIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iaWNvbl/mlofnq6Dor4TorrotY29weS0iIGZpbGw9IiNGRDRDNUMiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik00LjA3MDAyNzQ3LDEyIEwwLjYzNzM2MDU2NCwxMi45ODA3NjIgQzAuMzE3OTUyNDYxLDEzLjA3MjAyMTQgMCwxMi44MzIxODk0IDAsMTIuNSBMMCw0IEMwLDIuNzIzODU3NjMgMC43MjM4NTc2MjUsMiAyLDIgTDExLDIgQzEyLjI3NjE0MjQsMiAxMywyLjcyMzg1NzYzIDEzLDQgTDEzLDEwIEMxMywxMS4yNzYxNDI0IDEyLjI3NjE0MjQsMTIgMTEsMTIgTDQuMDcwMDI3NDcsMTIgWiBNOSw1IEM4LjQ0NzcxNTI1LDUgOCw1LjQ0NzcxNTI1IDgsNiBMOCw3IEM4LDcuNTUyMjg0NzUgOC40NDc3MTUyNSw4IDksOCBDOS41NTIyODQ3NSw4IDEwLDcuNTUyMjg0NzUgMTAsNyBMMTAsNiBDMTAsNS40NDc3MTUyNSA5LjU1MjI4NDc1LDUgOSw1IFogTTQsNSBDMy40NDc3MTUyNSw1IDMsNS40NDc3MTUyNSAzLDYgTDMsNyBDMyw3LjU1MjI4NDc1IDMuNDQ3NzE1MjUsOCA0LDggQzQuNTUyMjg0NzUsOCA1LDcuNTUyMjg0NzUgNSw3IEw1LDYgQzUsNS40NDc3MTUyNSA0LjU1MjI4NDc1LDUgNCw1IFoiIGlkPSJDb21iaW5lZC1TaGFwZSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat; color: #FD4C5C; } #acfunfeed-container .area-comment .index-comment { color: #999999; font-size: 12px; position: absolute; top: 0; right: 10px; } #acfunfeed-container .activity-container{ font-family: PingFangSC-Regular; } #acfunfeed-container .activity-container .activity-user{ display: flex; align-items: center; justify-content: space-between; height : 50px; } #acfunfeed-container .activity-container .activity-user .user-detail{ display: flex; align-items: center; flex: 1; } #acfunfeed-container .activity-container .activity-user .follow-btn{ height: 40px; text-align: center; cursor : pointer; } #acfunfeed-container .activity-container .activity-user .follow-btn.unfollow{ background-color: #ff4a57; border-radius: 15px; display: flex; align-items: center; width : 85px; font-size : 16px; color : white; } #acfunfeed-container .activity-container .activity-user .user-detail .thumb-avatar { margin-right : 10px; } #acfunfeed-container .activity-container .activity-user .user-detail .avatar { width: 40px; height: 40px; object-fit: cover; border-radius: 100%; } #acfunfeed-container .activity-container .activity-user .user-detail .user-name-time{ height: 40px; display: flex; flex-direction: column; justify-content: space-between; } #acfunfeed-container .activity-container .activity-user .user-detail .user-name-time .name-text { font-size : 16px; color: #333; } #acfunfeed-container .activity-container .verified-icon{ width: 16px; height: 16px; } #acfunfeed-container .activity-container .activity-user .user-detail .user-name-time .time-text { font-size : 14px; color: #999; } #acfunfeed-container .activity-container .activity-content{ padding : 10px 0; } #acfunfeed-container .activity-container > .activity-content{ border-bottom : 1px solid #e5e5e5; } #acfunfeed-container .activity-container .activity-content .activity-moment-text{ color: #333; white-space : pre-line; font-size : 20px; } #acfunfeed-container .activity-container .activity-content .activity-moment-img-container{ margin-top : 10px; display: flex; flex-wrap: wrap; } #acfunfeed-container .activity-container .activity-content .activity-moment-img-container img{ width: 200px; height: 200px; object-fit: cover; border-radius : 10px; cursor: pointer; margin-right : 10px; margin-bottom : 10px; } #acfunfeed-container .activity-container .activity-repost-content{ background: #e5e5e5 !important; padding: 20px 10px; border-bottom: 1px solid #e5e5e5; } #acfunfeed-container .activity-container .activity-repost-content .activity-container .activity-content .activity-moment-img-container img{ width: 185px; height: 185px; } #acfunfeed-container .activity-container .activity-comment-container{ margin-top : 20px; } #acfunfeed-container .activity-container .activity-comment-container .activity-comment-list{ min-height : 150px; } #acfunfeed-container .activity-container .activity-comment-container .activity-comment-list-empty { height : 150px; line-height : 150px; font-size : 20px; color: #333333; text-align : center; } #acfunfeed-container .activity-container .activity-comment-container .activity-comment-title .comment-title-str{ font-size : 20px; line-height : 20px; color : #333333; } #acfunfeed-container .activity-container .activity-comment-container .activity-comment-title .comment-title-number{ font-size : 14px; color : #999999; line-height : 14px; } #acfunfeed-container .activity-container .area-comment .ubb-img{ width: 150px; height: 150px; object-fit: cover; border-radius : 10px; cursor: pointer; margin-right : 10px; margin-bottom : 10px; } #acfunfeed-container .activity-container .area-comment.area-sub-comment .ubb-img{ width: 120px; height: 120px; } #acfunfeed-container .activity-container .area-sub-comment-container{ background: #e5e5e5; padding: 20px 0px 10px 30px; } #acfunfeed-container .activity-container .area-sub-comment-container .area-see-more{ color: #2596D2; cursor: pointer; } #acfunfeed-container .activity-container .area-comment { border-bottom: 1px solid #e5e5e5; padding: 20px 0; } #acfunfeed-container .activity-container .area-comment.area-sub-comment { border-bottom: 1px solid #e5e5e5; padding: 10px 0; } </style> <div id="acfunfeed-container" v-cloak> <!-- 分页 --> <div> <div class="l" style="width:90%;"> <feed-paginator :pcursors="pcursors" :pcursor="pcursor" :page="page" @change="handleFetchFeed"/> </div> <div class="r" style="width:10%;text-align:right;" v-if="feedType == 'feed-vup'"> <i class="icon icon-cog" title="配置" style="color: #3a9bd9;font-size:24px;cursor:pointer;" @click="openSettingDialog"></i> </div> <span class="clearfix"></span> </div> <p v-if="feedType == 'feed-vup' && isGettingFeedProfileList">正在获取V圈动态（<span>{{hasGetVupCount}}</span>/<span>{{vupCount}}</span>）</p> <div id="list-feed-feed" v-loading="loading"> <template v-for="feed in feedList"> <!-- 视频 --> <feed-video :feed="feed" :isinrepost="false" v-if="feed.isVideo" @comment="handleCommentClick" @like="handleLikeClick" @collect="handleCollectClick" @banana="handleBananaClick" @throw-banana="handleThrowBanana" @comment-content-click="handleCommentContentClick"></feed-video> <!-- 文章 --> <feed-article :feed="feed" :isinrepost="false" v-else-if="feed.isArticle" @comment="handleCommentClick" @like="handleLikeClick" @collect="handleCollectClick" @banana="handleBananaClick" @throw-banana="handleThrowBanana" @comment-content-click="handleCommentContentClick"></feed-article> <!-- 动态 --> <feed-activity :feed="feed" :isinrepost="false" v-else-if="feed.isActivity" @title-click="handleActivityTitleClick" @content-click="handleActivityContentClick" @cover-click="handleActivityCoverClick" @comment="handleCommentClick" @collect="handleCollectClick" @like="handleLikeClick" @banana="handleBananaClick" @throw-banana="handleThrowBanana" @comment-content-click="handleCommentContentClick"></feed-activity> </template> </div> <!-- 分页 --> <div> <feed-paginator :pcursors="pcursors" :pcursor="pcursor" :page="page" @change="handleFetchFeed"/> </div> <!-- 一个隐藏域用于显示图片 --> <div id="preview-image" class="hidden" v-if="previewImages && previewImages.length>0"> <li v-for="image in previewImages"><img :src="image.originUrl?image.originUrl:image.url" :alt="image.title?image.title:'图片'"></li> </div> <el-dialog title="设置" key="setting-form-dialog" :visible.sync="settingFormDialogVisible" :modal="false" width="550px" custom-class="setting-form-dialog" :modal-append-to-body="false"> <el-form :model="settingFormData" class="setting-form" ref="settingForm" :rules="settingFormRules" @submit.native.prevent> <el-form-item label="动态筛选" label-width="130px" prop="resourceTypeTextList"> <el-select v-model="settingFormData.resourceTypeTextList" multiple style="width:100%;"> <el-option label="文章" value="文章" key="文章"></el-option> <el-option label="视频" value="视频" key="视频"></el-option> <el-option label="动态" value="动态" key="动态"></el-option> <el-option label="转发" value="转发" key="转发"></el-option> </el-select> </el-form-item> <el-form-item label="排序方式" label-width="130px" prop="sortType"> <el-select v-model="settingFormData.sortType" style="width:100%;"> <el-option label="发布时间" value="date" key="date"></el-option> <el-option label="评论数量" value="comment" key="comment"></el-option> <el-option label="点赞数量" value="like" key="like"></el-option> <el-option label="投蕉数量" value="banana" key="banana"></el-option> <el-option label="自定义热度" value="heat" key="heat"></el-option> </el-select> </el-form-item> <template v-if="settingFormData.sortType == 'heat'"> <el-form-item label="文章热度" label-width="130px" prop="articleHeatExpression"> <el-input v-model="settingFormData.articleHeatExpression" autocomplete="off" style="width:100%;" placeholder="请输入文章热度计算方法"></el-input> </el-form-item> <el-form-item label="视频热度" label-width="130px" prop="videoHeatExpression"> <el-input v-model="settingFormData.videoHeatExpression" autocomplete="off" style="width:100%;" placeholder="请输入视频热度计算方法"></el-input> </el-form-item> <el-form-item label="动态热度" label-width="130px" prop="activityHeatExpression"> <el-input v-model="settingFormData.activityHeatExpression" autocomplete="off" style="width:100%;" placeholder="请输入动态热度计算方法"></el-input> </el-form-item> </template> <el-form-item label="时间范围" label-width="130px" prop="dateRegion"> <el-date-picker v-model="settingFormData.dateRegion" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="settingFormPickerOptions" style="width:100%" > </el-date-picker> </el-form-item> <el-form-item style="display:flex;justify-content:center;"> <el-button type="primary" @click="handleSettingFormSubmit">提交</el-button> </el-form-item> </el-form> </el-dialog> <el-dialog title="动态详情" key="activity-detail-dialog" :visible.sync="activityDetailDialogVisible" :modal="true" :destroy-on-close="true" width="670px" custom-class="activity-detail-dialog" :modal-append-to-body="false" @close="handleActivityDetailDialogClose"> <feed-activity-detail :feed="activeFeed" v-if="activeFeed" @cover-click="handleActivityCoverClick" @comment-content-click="handleCommentContentClick" @cover-click="handleActivityCoverClick" @comment="handleCommentClick" @collect="handleCollectClick" @like="handleLikeClick" @banana="handleBananaClick" @throw-banana="handleThrowBanana"></feed-activity-detail> </el-dialog> </div> `; // 显示tab内容 document.querySelector('#feed-content').style.display = 'block'; // 初始化实例 new Vue({ el : '#acfunfeed-container', data : function(){ var vue = this; return { feedType : feedType, uid : parseInt(document.querySelector('.user-avatar-dropdown .name a').href.replace(config.ACFUN_SERVER + config.URLS.ACFUN_USER.SPACE + '/', '')), page : 1, pcursor : "0", pcursors : ["0"], feedList : [], feedProfileList : [], feedProfileAllList : [], settingFormDialogVisible : false, // 是否正在获取数据 loading : false, // 当前显示详情的动态 activeFeed : null, activityDetailDialogVisible : false, settingFormData : { // 默认获取今日动态 dateRegion : [moment().startOf('day')._d, moment().startOf('day')._d], // 排序方式为日期 sortType : 'date', // 查看动态类型 resourceTypeTextList : [], // 视频热度计算方法 videoHeatExpression : 'dianzan + pinglun + toujiao + bofang + shoucang', // 文章热度计算方法 articleHeatExpression : 'dianzan + pinglun + toujiao + bofang + shoucang', // 动态热度计算方法 activityHeatExpression : 'dianzan + pinglun + toujiao*5', }, settingFormRules : { dateRegion : [{ trigger: 'blur', validator: function(rule, value, callback){ if(value==null || value[0]==null){ callback(new Error('请设置起始日期')); } else if((moment().startOf('day')._d-value[0])/1000/60/60/24 >7){ callback(new Error('起始日期不得早于一周前')); } else{ callback(); } }, },], videoHeatExpression : [{ trigger: 'blur', validator: function(rule, value, callback){ if(vue.settingFormData.sortType == 'heat' && !value){ callback(new Error('请填写热度计算方法')); } else{ var exp = null; try{ exp = nerdamer(value); } catch(err){ } if(exp){ var diff = _.differenceWith(exp.variables(), ['dianzan', 'pinglun', 'toujiao', 'bofang', 'shoucang']); if(diff.length>0){ callback(new Error(`热度计算方法中含有非法的变量名：${diff.join('、')}`)); } else{ callback(); } } else{ callback(new Error('热度计算方法非法')); } } }, }], articleHeatExpression : [{ trigger: 'blur', validator: function(rule, value, callback){ if(vue.settingFormData.sortType == 'heat' && !value){ callback(new Error('请填写热度计算方法')); } else{ var exp = null; try{ exp = nerdamer(value); } catch(err){ } if(exp){ var diff = _.differenceWith(exp.variables(), ['dianzan', 'pinglun', 'toujiao', 'bofang', 'shoucang']); if(diff.length>0){ callback(new Error(`热度计算方法中含有非法的变量名：${diff.join('、')}`)); } else{ callback(); } } else{ callback(new Error('热度计算方法非法')); } } }, }], activityHeatExpression : [{ trigger: 'blur', validator: function(rule, value, callback){ if(vue.settingFormData.sortType == 'heat' && !value){ callback(new Error('请填写热度计算方法')); } else{ var exp = null; try{ exp = nerdamer(value); } catch(err){ } if(exp){ var diff = _.differenceWith(exp.variables(), ['dianzan', 'pinglun', 'toujiao']); if(diff.length>0){ callback(new Error(`热度计算方法中含有非法的变量名：${diff.join('、')}`)); } else{ callback(); } } else{ callback(new Error('热度计算方法非法')); } } }, }], }, previewImages : null, // 用于交互的token token : null, // 表情表 emotMapper : null, // 正在获取用户动态 isGettingFeedProfileList : false, // 获取用户动态结束 hasGetFeedProfileList : false, hasGetVupCount : 0, vupCount : config.VUP.length, settingFormPickerOptions : { shortcuts : [{ text : '今天', onClick(picker) { const end = moment().startOf('day')._d; const start = moment().startOf('day')._d; picker.$emit('pick', [start, end]); }, },{ text : '昨天', onClick(picker) { const end = moment().subtract(1, 'days').startOf('day')._d; const start = moment().subtract(1, 'days').startOf('day')._d; picker.$emit('pick', [start, end]); }, },{ text : '近两天', onClick(picker) { const end = moment().startOf('day')._d; const start = moment().subtract(1, 'days').startOf('day')._d; picker.$emit('pick', [start, end]); }, },{ text : '本周', onClick(picker) { const end = moment().endOf('week').add(1, 'days')._d; const start = moment().startOf('week').add(1, 'days')._d; picker.$emit('pick', [start, end]); }, },] }, dateRegion : [null, null], }; }, methods : { getToken : function(callback){ var vue = this; // 已有token if(this.token){ callback(true, this.token); } else{ // 获取token commonRequrest(config.ACFUN_TOKEN_SERVER + config.URLS.TOKEN.GET_TOKEN, 'post', {sid:config.KUAISHOU.SID}, true, function(isSuccess, data){ // 获取成功 if(isSuccess){ data = JSON.parse(data); if(data['acfun.midground.api_st']){ vue.token = data['acfun.midground.api_st']; callback(true, vue.token); } else{ callback(false); } } else{ callback(false); } }, config.HEADERS.KUAISHOU_SERVER); } }, getEmot : function(id, callback){ var vue = this; // 未获取表情包 if(this.emotMapper!=null){ if(_.isFunction(callback)){ callback(true, this.emotMapper[id]); } return this.emotMapper[id]; } else{ // 获取表情包 commonRequrest(config.ACFUN_GIF_SERVER + config.URLS.GIF.LIST, 'post', {kpn:config.KUAISHOU.KPN}, true, function(isSuccess, data){ // 获取成功 if(isSuccess){ data = JSON.parse(data); if(data.emotionPackageList && data.emotionPackageList.length>0){ var emotMapper = {}; // 遍历各类表情包 data.emotionPackageList.forEach(function(emotionPackage){ // 遍历表情包 if(!emotionPackage.emotions || emotionPackage.emotions.length==0){ return; } emotionPackage.emotions.forEach(function(emot){ if(emot.emotionImageSmallUrl && emot.emotionImageSmallUrl.length>0){ emotMapper[emot.id] = emot.emotionImageSmallUrl[0].url; } }); }); vue.emotMapper = emotMapper; if(_.isFunction(callback)){ callback(true, emotMapper[id]); } } else{ if(_.isFunction(callback)){ callback(false); } } } else{ if(_.isFunction(callback)){ callback(false); } } },); } }, postLike : function(isAdd, resourceId, resourceType, callback){ var vue = this; var url = config.KUAISHOU_SERVER + (isAdd?config.URLS.INTERACT.ADD : config.URLS.INTERACT.DELETE); var params = { kpn: config.KUAISHOU.KPN, kpf: config.KUAISHOU.KPF, subBiz: config.KUAISHOU.SUBBIZ, userId : vue.uid, interactType: 1, objectId : resourceId, }; // 文章 if(resourceType == 1){ params.objectType = 3; } // 视频 else if(resourceType == 2){ params.objectType = 2; } // 动态 else if(resourceType == 3){ params.objectType = 10; } this.getToken(function(isSuccess, token){ // 获取token失败 if(!isSuccess){ vue.$message({ type : 'error', message : 'token获取失败', }); callback(false); } else{ params['acfun.midground.api_st'] = token; // 提交 commonRequrest(url, 'post', params, true, function(isSuccess, data){ // 获取成功 if(isSuccess){ data = JSON.parse(data); if(data.result == 1){ callback(true); } else{ callback(false); } } else{ callback(false); } }); } }); }, postCollect : function(isAdd, resourceId, resourceType, callback){ var vue = this; var url = config.ACFUN_API_SERVER + (isAdd?config.URLS.INTERACT.COLLECT : config.URLS.INTERACT.UNCOLLECT); var params = { }; if(isAdd){ params.resourceId = resourceId; } else{ params.resourceIds = resourceId; } // 文章 if(resourceType == 1){ params.resourceType = 3; } // 视频 else if(resourceType == 2){ params.resourceType = 9; } // 动态 else if(resourceType == 3){ params.resourceType = 10; } // 提交 commonRequrest(url, 'post', params, true, function(isSuccess, data){ // 获取成功 if(isSuccess){ data = JSON.parse(data); if(data.result == 0){ callback(true); } else{ callback(false); } } else{ callback(false); } }, config.HEADERS.ACFUN_API_SERVER); }, postBanana : function(count, resourceId, resourceType, callback){ var vue = this; var url = config.ACFUN_API_SERVER + config.URLS.INTERACT.THROW_BANANA; var params = { count : count, resourceId : resourceId, }; // 文章 if(resourceType == 1){ params.resourceType = 3; } // 视频 else if(resourceType == 2){ params.resourceType = 2; } // 动态 else if(resourceType == 3){ params.resourceType = 10; } // 提交 commonRequrest(url, 'post', params, true, function(isSuccess, data){ // 获取成功 if(isSuccess){ data = JSON.parse(data); if(data.result == 0){ callback(true); } else{ callback(false); } } else{ callback(false); } }, config.HEADERS.ACFUN_API_SERVER); }, getUserInfo : function(uid, userName, callback){ var vue = this; if(uid in this.userInfo){ if(_.isFunction(callback)){ callback(true, this.userInfo[uid]); } return; } // 获取用户信息 commonRequrest(config.ACFUNLIVE_SERVER + config.URLS.ACFUN_USER.INFO + `?userId=${uid}`, 'get', null, true, function(isSuccess, data){ var userInfo = null; if(data){ data = JSON.parse(data); if(data.result == 0){ userInfo = { uid : uid, photo : data.profile.headUrl, userName : data.profile.name, }; } else{ userInfo = { uid : uid, userName : userName, photo : 'https://tx-free-imgs.acfun.cn/style/image/defaultAvatar.jpg', }; } } else{ userInfo = { uid : uid, userName : userName, photo : 'https://tx-free-imgs.acfun.cn/style/image/defaultAvatar.jpg', }; } vue.userInfo[uid] = userInfo; if(_.isFunction(callback)){ callback(isSuccess, userInfo); } }); }, // 获取推送列表 getFeedList : function(pageObj){ var vue = this; this.loading = true; this.feedList =[]; // 已获取结束 if(pageObj.pcursor == "no_more"){ callback(true, []); return; } commonRequrest(config.ACFUN_API_SERVER + config.URLS.ACFUN_USER.FEED, 'get',{pcursor : pageObj.pcursor,count:pageObj.pageSize,},true, function(isSuccess, data){ if(!isSuccess){ vue.$message({ type : 'error', message : '获取动态推送失败', }); return; } data = JSON.parse(data); // 最新一页 if(pageObj.page == pageObj.total){ vue.pcursors.push(data.pcursor); } var feedList = []; data.feedList.forEach(function(feed){ var isSuccess = vue.processFeed(feed); if(isSuccess){ feedList.push(feed); } }); vue.feedList = feedList; vue.loading = false; }, config.HEADERS.ACFUN_API_SERVER, ); }, // 获取动态评论列表 getCommentList : function(feed, pageObj, comment, callback){ var vue = this; // 已获取结束 if(pageObj.pcursor == "no_more"){ callback(true, []); return; } var url = config.ACFUN_API_SERVER + config.URLS.RESOURCE.COMMENT; var params = { pcursor : pageObj.pcursor, count : pageObj.pageSize, sourceType : 4, sourceId : feed.resourceId, showHotComments : pageObj.pcursor=='0' && pageObj.total == 1?1:0, }; var headers = _.clone(config.HEADERS.ACFUN_API_SERVER); var isSubComment = false; // 获取子评论 if(comment && comment.commentId){ url = config.ACFUN_API_SERVER + config.URLS.RESOURCE.SUB_COMMENT; params.rootCommentId = comment.commentId; isSubComment = true; // 佛了，请求楼中楼评论还得在请求头加个uuid，否则报错 headers.random = uuidv4().toUpperCase(); } commonRequrest(url, 'get', params,true, function(isSuccess, data){ if(!isSuccess){ return; } data = JSON.parse(data); var commentList = []; var hotCommentList = []; var commentMapper = {}; if(!isSubComment){ data.hotComments.forEach(function(comment){ var isSuccess = vue.processComment(comment, true); if(isSuccess){ comment.subCommentList = []; commentMapper[comment.commentId] = comment; hotCommentList.push(comment); } }); } (isSubComment?data.subComments:data.rootComments).forEach(function(comment){ // 已经在热评中 if(comment.commentId in commentMapper){ commentList.push(commentMapper[comment.commentId]); } else{ var isSuccess = vue.processComment(comment, true); if(isSuccess){ comment.subCommentList = []; commentMapper[comment.commentId] = comment; commentList.push(comment); // 如果是置顶评论，将其加入热门评论中 if(comment.isSticky){ hotCommentList.splice(0, 0, comment); } } } }); // 包含子评论 if(!isNullOrEmpty(data.subCommentsMap)){ for(var commentId in data.subCommentsMap){ if(commentId in commentMapper){ data.subCommentsMap[commentId].subComments.forEach(function(subComment){ var isSuccess = vue.processComment(subComment, true); if(isSuccess){ commentMapper[commentId].pcursor = data.subCommentsMap[commentId].pcursor; commentMapper[commentId].subCommentList.push(subComment); } }); } } } if(_.isFunction(callback)){ callback(isSuccess, data.pcursor, isSubComment?data.subCommentCount:data.commentCount, commentList, hotCommentList); } }, headers, ); }, getFeedProfileList : function(uid, callback){ var vue = this; var startDate = null,endDate=null; // 筛选了时间范围 if(this.settingFormData.dateRegion && this.settingFormData.dateRegion.length==2){ startDate = this.settingFormData.dateRegion[0].getTime(); endDate = this.settingFormData.dateRegion[1].getTime(); } // 获取数据时的游标 var pcursor = "0"; var feedList = []; var noError = true; var getFeedProfileList = function(){ if(pcursor == 'no_more'){ if(_.isFunction(callback)){ callback(noError, feedList); } return; } else{ commonRequrest(config.ACFUN_API_SERVER + config.URLS.ACFUN_USER.FEED_PROFILE, 'get',{pcursor : pcursor, userId : uid, count : 10,},true, function(isSuccess, data){ // 获取数据失败 if(!isSuccess){ noError = false; pcursor = 'no_more'; } else{ data = JSON.parse(data); pcursor = data['pcursor']; if(data.feedList && data.feedList.length>0){ data.feedList.forEach(function(feed){ feed.createDate = moment(feed.createTime).startOf('day')._d.getTime(); // 指定了起始时间 if(startDate && feed.createDate<startDate){ // 非置顶 if(!feed.isTop){ pcursor = "no_more"; } return; } // 指定了终止时间 else if(endDate && feed.createDate>endDate){ return; } var isSuccess = vue.processFeed(feed); if(isSuccess){ feedList.push(feed); } }); } } getFeedProfileList(); }, config.HEADERS.ACFUN_API_SERVER ); } } getFeedProfileList(); }, getVupFeedProfileList : function(callback){ var vue = this; var feedList = []; // 5个5个遍历vup var batchSize = 5; var startIndex = null, endIndex = 0; var fetchData = function(){ vue.isGettingFeedProfileList = true; startIndex = endIndex; endIndex = Math.min(endIndex + batchSize, config.VUP.length); // 已遍历结束 if(startIndex>=config.VUP.length){ vue.isGettingFeedProfileList = false; vue.hasGetFeedProfileList = true; vue.feedProfileAllList = feedList; // 刷新筛选 vue.processFeedProfileList(); // 刷新热度 if(vue.settingFormData.sortType == 'heat'){ vue.processFeedHeat(); } // 按发布时间排序 if(vue.settingFormData.sortType == 'date'){ vue.feedProfileList = _.orderBy(vue.feedProfileList, 'createTime', 'desc'); } // 按评论数量排序 else if(vue.settingFormData.sortType == 'comment'){ vue.feedProfileList = _.orderBy(vue.feedProfileList, 'commentCount', 'desc'); } // 按点赞数量排序 else if(vue.settingFormData.sortType == 'like'){ vue.feedProfileList = _.orderBy(vue.feedProfileList, 'likeCount', 'desc'); } // 按投蕉数量排序 else if(vue.settingFormData.sortType == 'banana'){ vue.feedProfileList = _.orderBy(vue.feedProfileList, 'bananaCount', 'desc'); } // 按热度排序 else if(vue.settingFormData.sortType == 'heat'){ vue.feedProfileList = _.orderBy(vue.feedProfileList, 'heat', 'desc'); } callback(true, vue.feedProfileList); return; } var batchEnd = _.after(endIndex-startIndex, fetchData); for(var index=startIndex;index<endIndex;++index){ vue.getFeedProfileList(config.VUP[index], function(isSuccess, data){ vue.hasGetVupCount += 1; // 获取成功 if(isSuccess){ feedList.splice(feedList.length, 0, ...data); } batchEnd(); }); } } fetchData(); }, handleFetchFeed : function(pageObj){ this.page = pageObj.page; var position = $("#list-feed-feed").offset(); position.top = position.top-60; $("html,body").animate({scrollTop:position.top}, 100); // 加载关注动态 if(this.feedType == 'feed'){ this.getFeedList(pageObj); } // 加载v圈动态 else if(this.feedType == 'feed-vup'){ var startIndex = (pageObj.page-1) * pageObj.pageSize; var endIndex = Math.min(this.feedProfileList.length, startIndex + pageObj.pageSize); this.feedList = this.feedProfileList.slice(startIndex, endIndex); } }, // 跳转至用户主页 toUserSpace : function(userInfo){ window.open(config.ACFUN_SERVER + config.URLS.ACFUN_USER.SPACE + `/${userInfo.uid}`); }, // 处理动态 processFeed : function(feed){ var vue = this; // 无法获取用户信息 if(!feed.userInfo){ return false; } feed.showDivBanana = false; feed.userInfo.shareUrl = `/u/${feed.userInfo.id}`; feed.userInfo.hoverText = `点击访问[${feed.userInfo.name}]的个人空间`; feed.tagResourceTypeText = this.getResourceText(feed.tagResourceType); // 如果有热评 if(feed.hotComments && feed.hotComments.length>0){ feed.hotComments.forEach(function(comment){ vue.processComment(comment); }); } if(feed.userInfo.verifiedTypes && feed.userInfo.verifiedTypes.length>0){ feed.userInfo.verifiedTypes.forEach(function(verifyType){ // 管理员 if(verifyType == config.VERIFIED_TYPE.MONKEY){ feed.userInfo.isMonkeyVerified = true; } // 官方认证 else if(verifyType == config.VERIFIED_TYPE.OFFICIAL){ feed.userInfo.isOfficialVerified = true; } // AVI认证 else if(verifyType == config.VERIFIED_TYPE.AVI){ feed.userInfo.isAviVerified = true; } // UP主学院 else if(verifyType == config.VERIFIED_TYPE.UP_COLLEGE){ feed.userInfo.isUpCollegeVerified = true; } }); } // 动态类型 if(feed.tagResourceType == 3 || feed.tagResourceType == 10){ // 设置动态文本 feed.moment.htmlText = this.ubb2html(feed, feed.moment.text); // 转发动态 if(feed.repostSource){ feed.isRepost = true; feed.tagResourceTypeText = '转发'; // 处理转发内容 var isSuccess = this.processFeed(feed.repostSource); // 无法获取转发内容 if(!isSuccess){ feed.repostSource = null; feed.caption = `${feed.userInfo.name}发布了新动态`; } // 不支持的转发内容 else if(!feed.repostSource.tagResourceTypeText){ return false; } else{ feed.caption = `${feed.userInfo.name}转发了@${feed.repostSource.userInfo.name}的${feed.repostSource.tagResourceTypeText}`; } } else{ feed.caption = `${feed.userInfo.name}发布了新动态`; } feed.isActivity = true; } // 视频类型 else if(feed.tagResourceType == 2){ feed.channel.shareUrl = `/v/list${feed.channel.id}/index.htm`; feed.channel.hoverText = `点击访问${feed.channel.name}频道`; // 无简介 if(!feed.description && (!feed.detail || !feed.detail.description)){ feed.description = '此稿件暂无简介。'; } else if(feed.detail.description){ feed.description = feed.detail.description; } // 把<br/>转为回车符 feed.description = feed.description.replace(/<br\/>/g, '\n'); // 包含标签 if(feed.tag && feed.tag.length>0){ feed.tag.forEach(function(tag){ tag.shareUrl = `/search?keyword=${tag.tagName}`; }); } feed.isVideo = true; } // 文章类型 else if(feed.tagResourceType == 1){ feed.caption = feed.articleTitle; feed.channel.shareUrl = `/v/list${feed.channel.id}/index.htm`; feed.channel.hoverText = `点击访问${feed.channel.name}频道`; // 包含标签 if(feed.tag && feed.tag.length>0){ feed.tag.forEach(function(tag){ tag.shareUrl = `/search?keyword=${tag.tagName}`; }); } feed.isArticle = true; } return true; }, // 处理评论 processComment : function(comment, showImg){ // 无法获取用户信息 if(!comment.userId){ return false; } comment.moment = { }; comment.userInfo = { name : comment.userName, headUrl : _.isArray(comment.headUrl)?comment.headUrl[0].url:comment.headUrl, id : comment.userId, shareUrl : `/u/${comment.userId}`, verifiedTypes : comment.verifiedTypes, }; comment.userInfo.verifiedTypes.forEach(function(verifyType){ // 管理员 if(verifyType == config.VERIFIED_TYPE.MONKEY){ comment.userInfo.isMonkeyVerified = true; } // 官方认证 else if(verifyType == config.VERIFIED_TYPE.OFFICIAL){ comment.userInfo.isOfficialVerified = true; } // AVI认证 else if(verifyType == config.VERIFIED_TYPE.AVI){ comment.userInfo.isAviVerified = true; } // UP主学院 else if(verifyType == config.VERIFIED_TYPE.UP_COLLEGE){ comment.userInfo.isUpCollegeVerified = true; } }); comment.content = this.ubb2html(comment, comment.content, showImg); if(comment.postDate){ comment.time = comment.postDate; } if(comment.floor){ comment.index = comment.floor; } return true; }, processFeedHeat : function(){ var vue = this; this.feedProfileList.forEach(function(feed){ // 计算热度值 try{ var heatExpression = null; if(feed.isArticle){ heatExpression = vue.settingFormData.articleHeatExpressionObj; } else if(feed.isVideo){ heatExpression = vue.settingFormData.videoHeatExpressionObj; } else if(feed.isActivity){ heatExpression = vue.settingFormData.activityHeatExpressionObj; } if(heatExpression){ heatExpression = heatExpression.evaluate({ bofang : feed.viewCount?feed.viewCount:0, dianzan : feed.likeCount?feed.likeCount:0, toujiao : feed.bananaCount?feed.bananaCount:0, pinglun : feed.commentCount?feed.commentCount:0, shoucang : feed.stowCount?feed.stowCount:0, }); // 得到结果 if(heatExpression.isNumber()){ feed.heat = Number(heatExpression.text()); } else{ feed.heat = 0; } } else{ feed.heat = 0; } } catch(err){ feed.heat = 0; } }); }, processFeedProfileList : function(){ // 设置了动态类型筛选 if(this.settingFormData.resourceTypeTextList && this.settingFormData.resourceTypeTextList.length>0){ var resourceTypeTextList = this.settingFormData.resourceTypeTextList; this.feedProfileList = _.filter(this.feedProfileAllList, function(feed){ return resourceTypeTextList.indexOf(feed.tagResourceTypeText)!=-1; }); } else{ this.feedProfileList = this.feedProfileAllList; } var pcursors = []; for(var index=0; index<Math.ceil(this.feedProfileList.length/config.PAGE.PAGESIZE);++index){ pcursors.push(index); } this.pcursors = pcursors; }, // 获取动态类型 getResourceText : function(resourceType){ if(resourceType == 1){ return '文章'; } else if(resourceType == 2){ return '视频'; } else if(resourceType == 3 || resourceType == 10){ return '动态'; } }, // ubb转html ubb2html : function(feed, text, showImg){ var vue = this; // 转化艾特 var matchAt = matchAll(text, config.UBB.PATTERN.AT); matchAt.forEach(function(match){ var html = `<a target="_blank" href="${config.ACFUN_SERVER + config.URLS.ACFUN_USER.SPACE}/${match.groups.uid}" class="ubb-at">@${match.groups.userName}</a>`; text = text.replace(match.text, html); }); // 转化图片 var matchImg = matchAll(text, config.UBB.PATTERN.IMG); var images = []; matchImg.forEach(function(match){ var html = showImg?`<img class="ubb-img" alt="${match.groups.title}" src="${match.groups.url}"></img>`:`<span class="ubb-img ac-icon"><i class="iconfont"></i>${match.groups.title}</span>`; text = text.replace(match.text, html); images.push(match.groups); }); if(images.length>0){ feed.moment.imgs = images; } // 转化表情包 var matchEmot = matchAll(text, config.UBB.PATTERN.EMOT); matchEmot.forEach(function(match){ var emot = vue.getEmot(match.groups.id); var html = `<img class="ubb-emot" src="${emot}"/>`; text = text.replace(match.text, html); }); return text; }, handleActivityTitleClick : function(feed, event){ if(!feed.getCommentList){ feed.commentPage = 1; feed.commentPcursor = "0"; feed.commentPcursors = ["0"]; feed.commentLoading = false; feed.commentList = []; feed.getCommentList = _.bind(this.getCommentList, null, feed); } this.activeFeed = feed; this.activityDetailDialogVisible = true; }, handleActivityContentClick : function(feed, event){ // 点击查看图片 if(event.target.classList.contains('ubb-img') || event.target.parentElement.classList.contains('ubb-img')){ this.openImageViewer(feed.moment.imgs); } }, handleCommentContentClick : function(comment, event){ // 点击查看图片 if(event.target.classList.contains('ubb-img') || event.target.parentElement.classList.contains('ubb-img')){ this.openImageViewer(comment.moment.imgs); } }, handleActivityCoverClick : function(feed, event, image){ // 查看动态图片 if(feed.moment.imgs && feed.moment.imgs.length>0){ this.openImageViewer(feed.moment.imgs, image); } }, // 评论 handleCommentClick :function(feed, event){ }, // 点赞 handleLikeClick :function(feed, event){ var vue = this; this.postLike(!feed.isLike, feed.resourceId, feed.tagResourceType, function(isSuccess){ if(isSuccess){ vue.$message({ type : 'success', message : `${feed.isLike?'取消':''}点赞成功`, }); feed.isLike = !feed.isLike; feed.likeCount += feed.isLike?1:-1; } else{ vue.$message({ type : 'error', message : `${feed.isLike?'取消':''}点赞失败`, }); } }); }, // 投蕉 handleBananaClick :function(feed, event){ // 已投蕉，无法再投 if(feed.isThrowBanana){ this.$message({ type : 'info', message : '已经投过蕉了哦！', }); } else{ // 如果是动态，直接投一蕉 if(feed.isActivity){ this.handleThrowBanana(feed, 1); } // 否则打开投蕉页面 else{ feed.showDivBanana = !feed.showDivBanana; } } }, // 收藏 handleCollectClick :function(feed, event){ var vue = this; this.postCollect(!feed.isFavorite, feed.resourceId, feed.tagResourceType, function(isSuccess){ if(isSuccess){ vue.$message({ type : 'success', message : `${feed.isFavorite?'取消':''}收藏成功`, }); feed.isFavorite = !feed.isFavorite; feed.stowCount += feed.isFavorite?1:-1; } else{ vue.$message({ type : 'error', message : `${feed.isFavorite?'取消':''}收藏失败`, }); } }); }, handleThrowBanana : function(feed, count){ feed.showDivBanana = false; var vue = this; this.postBanana(count, feed.resourceId, feed.tagResourceType, function(isSuccess){ if(isSuccess){ vue.$message({ type : 'success', message : `投${count}蕉成功`, }); feed.isThrowBanana = true; feed.bananaCount += count; } else{ vue.$message({ type : 'error', message : `投${count}蕉失败`, }); } }); }, openImageViewer : function(images, image){ var vue = this; var index = 0; if(image && (image.url || image.originUrl)){ index = _.findIndex(images, function(item){ return item.url == image.url || item.originUrl == image.originUrl; }); if(index==-1){ index = 0; } } this.previewImages = images; this.$nextTick(function(){ // 初始化 this.gallery = new Viewer(document.getElementById('preview-image'), { hide : function(){ vue.gallery.destroy(); }, initialViewIndex : index, zIndex : 9999, }); this.gallery.show(); }); }, // 打开设置弹窗 openSettingDialog : function(){ this.settingFormDialogVisible = true; }, // 更改设置提交 handleSettingFormSubmit : function(){ var vue = this; this.$refs.settingForm.validate((valid) => { // 通过校验 if(valid){ this.settingFormData.articleHeatExpressionObj = nerdamer(this.settingFormData.articleHeatExpression); this.settingFormData.videoHeatExpressionObj = nerdamer(this.settingFormData.videoHeatExpression); this.settingFormData.activityHeatExpressionObj = nerdamer(this.settingFormData.activityHeatExpression); // 只是没修改过时间范围 if( ( (this.dateRegion[0]==null && this.settingFormData.dateRegion[0]==null) || (this.dateRegion[0] !=null && this.settingFormData.dateRegion[0] != null && this.dateRegion[0].getTime()==this.settingFormData.dateRegion[0].getTime()) ) && ( (this.dateRegion[1]==null && this.settingFormData.dateRegion[1]==null) || (this.dateRegion[0] !=null && this.settingFormData.dateRegion[1] != null && this.dateRegion[1].getTime()==this.settingFormData.dateRegion[1].getTime()) ) ){ this.feedList = []; // 刷新筛选 this.processFeedProfileList(); // 刷新热度 if(this.settingFormData.sortType == 'heat'){ this.processFeedHeat(); } // 按发布时间排序 if(this.settingFormData.sortType == 'date'){ this.feedProfileList = _.orderBy(this.feedProfileList, 'createTime', 'desc'); } // 按评论数量排序 else if(this.settingFormData.sortType == 'comment'){ this.feedProfileList = _.orderBy(this.feedProfileList, 'commentCount', 'desc'); } // 按点赞数量排序 else if(this.settingFormData.sortType == 'like'){ this.feedProfileList = _.orderBy(this.feedProfileList, 'likeCount', 'desc'); } // 按投蕉数量排序 else if(this.settingFormData.sortType == 'banana'){ this.feedProfileList = _.orderBy(this.feedProfileList, 'bananaCount', 'desc'); } // 按热度排序 else if(this.settingFormData.sortType == 'heat'){ this.feedProfileList = _.orderBy(this.feedProfileList, 'heat', 'desc'); } this.handleFetchFeed({ page : 1, pageSize : config.PAGE.PAGESIZE, }); } else{ this.dateRegion = _.cloneDeep(this.settingFormData.dateRegion); this.feedList = []; this.hasGetVupCount = 0; this.hasGetFeedProfileList = false; this.getVupFeedProfileList(function(){ vue.handleFetchFeed({ page : 1, pageSize : config.PAGE.PAGESIZE, }); }); } this.settingFormDialogVisible = false; } }); }, handleActivityDetailDialogClose : function(){ this.activeFeed = null; }, }, computed : { }, mounted : function(){ var vue = this; // 加载表情包 vue.getEmot(null, function(){ // 加载关注动态 if(vue.feedType == 'feed'){ vue.hasGetFeedProfileList = true; vue.handleFetchFeed({ page : 1, pageSize : config.PAGE.PAGESIZE, total : 1, pcursor : "0", }); } // 加载V圈动态 else if(vue.feedType == 'feed-vup'){ vue.settingFormDialogVisible = true; } }); } }); }; // 设置tab下的导航条位置 function setNavBarPosition(){ var navBarItem = navEle.querySelector('.ac-tabs-nav-ink'); var activeNavItem = navEle.querySelector('.ac-tabs-nav-active'); navBarItem.style.transform = `translateX(${activeNavItem.offsetLeft}px)`; navBarItem.style.width = `${activeNavItem.clientWidth}px`; } // 添加导航选项 var navItem = document.createElement('li'); navItem.setAttribute('data-value', 'feed'); navItem.classList.add('ac-tabs-nav-item'); navItem.innerHTML = ` 动态推送 `; // 添加元素 navEle.insertBefore(navItem, navEle.querySelector('.ac-tabs-nav-ink')); navItem.addEventListener('click', function(e){ e.stopPropatation = true; // 删除其它菜单项的active类 var activeNavItem = navEle.querySelector('.ac-tabs-nav-active'); activeNavItem.classList.remove('ac-tabs-nav-active'); // 添加active类 navItem.classList.add('ac-tabs-nav-active'); // 设置导航条位置 setNavBarPosition(); // 修改标题 document.title = '动态推送'; // 加载vue loadVue('feed'); }); /*var navItemVup = document.createElement('li'); navItemVup.setAttribute('data-value', 'feed-vup'); navItemVup.classList.add('ac-tabs-nav-item'); navItemVup.innerHTML = ` V圈动态 `; // 添加元素 navEle.insertBefore(navItemVup, navEle.querySelector('.ac-tabs-nav-ink')); navItemVup.addEventListener('click', function(e){ e.stopPropatation = true; // 删除其它菜单项的active类 var activeNavItem = navEle.querySelector('.ac-tabs-nav-active'); activeNavItem.classList.remove('ac-tabs-nav-active'); // 添加active类 navItemVup.classList.add('ac-tabs-nav-active'); // 设置导航条位置 setNavBarPosition(); // 修改标题 document.title = 'V圈动态'; // 加载vue loadVue('feed-vup'); });*/ // 在内容区内增加一个tabs块用于展示 var contentContainerEle = document.querySelector('.ac-tabs-container'); var contentEle = document.createElement('div'); contentEle.id = 'feed-content'; contentEle.classList.add('ac-tabs-panel'); contentEle.style.display = 'none'; contentContainerEle.append(contentEle); // 设置导航条位置 setNavBarPosition(); return true; } // 加载视频页面样式 function loadVideoStyle(){ /*GM_addStyle(` body #pagelet_newheader{ display : none; } body #pagelet_footer{ display : none; } body #main{ padding : 0 !important; margin : 0 !important; } body #main{ overflow : hidden; } body #main #pagelet_toolbar #toolbar{ display : none; } body #main #main-content{ width : 100% !important; max-width : 100% !important; } body #main #main-content .left-column{ width : 100% !important; max-width : 100% !important; } body #main-content .left-column > :not(.player-box) { display: none; } body #main #main-content .left-column .player-box #player{ width : 100% !important; max-width : 100% !important; } body #main #main-content .right-column{ display : none; } `); document.querySelector('#ACPlayer .container-player').setAttribute('data-bind-attr', 'web');*/ return true; } function checkLoadVue(loadFunc){ window.setTimeout(function(){ var isSuccess = loadFunc(); if(!isSuccess){ checkLoadVue(loadFunc); } }, 1000); } window.onload = function(){ checkLoadVue(loadStatVue); // 推送页面 if(window.location.href.startsWith(config.ACFUN_SERVER + config.URLS.ACFUN_USER.PUSH)){ checkLoadVue(loadFeedVue); } }; // 视频页面 if(window.location.href.startsWith(config.ACFUN_SERVER + '/v/ac')){ checkLoadVue(loadVideoStyle); } // 监听导航选项点击 $('.ac-member-navigation').on('click', '.ac-member-navigation-item', function(){ // 点击关注动态选项 if($(this).text().trim().indexOf('关注动态')!=-1){ checkLoadVue(loadFeedVue); } else{ // 销毁内容 $('#acfunfeed-container').remove(); } }); // 监听tab选项点击 $('body').on('click', '.ac-tabs-nav .ac-tabs-nav-item', function(){ // 点击了非动态推送的选项 if($(this).attr('data-value') != 'feed'){ // 销毁内容 $('#acfunfeed-container').remove(); // 移除高亮 $('.ac-tabs-nav .ac-tabs-nav-item[data-value="feed"]').removeClass('ac-tabs-nav-active'); } }); })();
QingJ © 2025
镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址
