acfun统计（也许该叫acfun主页）
目前為
// ==UserScript==
// @name acfun统计
// @description acfun统计（也许该叫acfun主页）
// @namespace syachiku
// @author syachiku
// @match https://www.acfun.cn/member*
// @run-at document-end
// @grant GM_addStyle
// @grant GM_xmlhttpRequest
// @version 0.0.13
// @require https://cdnjs.cloudflare.com/ajax/libs/qs/6.9.4/qs.min.js
// @require https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js
// @require https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js
// @require https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js
// @require https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.14.1/index.min.js
// @require https://cdnjs.cloudflare.com/ajax/libs/echarts/5.0.2/echarts.min.js
// @require https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js
// @require https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.2.0/exceljs.min.js
// @require https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.9.0/viewer.min.js
// ==/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 : 'http://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/#area=push',
FOLLOWING : '/member/#area=following',
FOLLOWER : '/member/#area=followers',
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',
},
},
HEADERS : {
ACFUN_API_SERVER : {
acPlatform : 'ANDROID_PHONE',
appVersion : '6.40.1.486',
},
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 : 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];
}
function addCssResource(url){
commonRequrest(url, 'get', null, true, function(isSuccess, css){
if(isSuccess){
GM_addStyle(css);
}
})
}
// 添加element-ui样式
addCssResource('https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.14.1/theme-chalk/index.min.css');
// 加载图片查看器样式
addCssResource('https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.9.0/viewer.min.css');
var statVue = null;
var feedVue = null;
// 加载统计页面Vue实例
function loadStatVue(){
// 若vue已实例化，且对应的el元素存在，则表示已加载结束
if(statVue && !document.querySelector('#acfunstat-container')){
return true;
}
// 容器
var navEle = document.querySelector('#list-guide-left');
// 容器不存在
if(!navEle){
return false;
}
// 添加导航选项
var navItem = document.createElement('div');
navItem.classList.add('part-guide-left');
navItem.innerHTML = `
<div class="banner">
<a href="javascript:void(0)" class="tab fixed">
<i class="icon icon-bar-chart"></i>统计
</a>
</div>
`;
// 监听点击事件
navItem.addEventListener('click', function(e){
e.stopPropatation = true;
// 若vue已实例化，且对应的el元素存在，则表示已加载结束
if(statVue && !document.querySelector('#acfunstat-container')){
return;
}
// 删除其它菜单项的active类
var activeNavItem = navEle.querySelector('.part-guide-left.active');
activeNavItem.classList.remove('active');
// 添加active类
navItem.classList.add('active');
// 修改展示内容
document.querySelector('#area-main-right').innerHTML = `
<style>
@font-face{
font-family:element-icons;
src:url('https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.14.1/theme-chalk/fonts/element-icons.ttf');
}
#block-first .item{
font-family: verdana,Tahoma,Arial,"微软雅黑","宋体",sans-serif;
margin: 0 0 16px;
width : 50%;
}
#block-first .item .l .icon {
font-size: 24px;
color: #ccc;
margin: 12px 8px 0 0;
}
#block-first .item .a {
font-size: 18px;
font-weight: bold;
letter-spacing: -.1em;
line-height: 1.2;
color: #333;
}
#block-first .item .a .pts {
font-family: Candara,verdana,Tahoma,Arial,"微软雅黑","宋体",sans-serif;
font-size: 32px;
margin: 0 8px;
}
#block-first .item .b {
font-size: 12px;
font-style: italic;
line-height: 1.2;
color: #999;
}
#block-detail .item{
width : 50%;
}
#block-detail .item li {
list-style:none;
color: #3a9bd9 !important;
}
#block-detail .item li span {
color: #666;
font-weight: bold;
}
#block-detail .item.l{
border-right: 1px solid #ddd;
}
.el-table__body-wrapper.is-scrolling-none::-webkit-scrollbar{
width: 10px;
height: 1px;
}
.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;
}
.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;
}
.btn-toggle-info{
border-top: 1px dashed #999;
text-align: center;
color: #08c;
height: 16px;
line-height: 16px;
}
.btn-toggle-info span{
display: block;
margin-top: -8px;
cursor: pointer;
background-color: #fff;
width: 128px;
}
#gift-trend-container{
height : 200px;
width : 100%;
}
</style>
<div id="block-title-banner">
<p>统计</p>
<div>
<a href="/member/">AcFun</a><span class="d">Stat</span>
</div>
<span class="clearfix"></span>
</div>
<div id="block-banner-right" class="block banner">
<a href="#area=acfunstat" data-type="views" class="tab">
<i class="icon"></i>送出/收到礼物
</a>
</div>
<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 id="block-first" class="block">
<div class="mainer">
<div class="banner">
<p class="tab fixed">总体{{filterText}}</p>
<p class="r">
<i class="icon icon-cog" title="配置" style="color: #3a9bd9;font-size:24px;cursor:pointer;" @click="openSettingDialog"></i>
<i class="icon icon-book" title="导出excel" style="color: #3a9bd9;font-size:24px;cursor:pointer;" @click="exportGift"></i>
</p>
</div>
<div class="item l">
<div class="l">
<i style="color: #f69;" class="icon icon-gift"></i>
</div>
<div class="l">
<div class="a">
送出礼物价值<span id="pts-online-splash" style="color: #f69;" class="pts">{{send}}</span>AC币
</div>
<div class="b">
用户送出礼物价值的AC币总和
</div>
</div>
<span class="clearfix"></span>
</div>
<div class="item r">
<div class="l">
<i style="color: #f69;" class="icon icon-gift"></i>
</div>
<div class="l">
<div class="a">
收到礼物价值<span id="pts-online-splash" style="color: #f69;" class="pts">{{receive}}</span>钻石
</div>
<div class="b">
用户收到礼物价值的钻石总和
</div>
</div>
<span class="clearfix"></span>
</div>
<span class="clearfix"></span>
</div>
</div>
<div id="block-detail" class="block">
<div class="mainer">
<div class="item l">
<div class="banner">
<p class="tab fixed">送出礼物用户排行</p>
</div>
<div id="send-gift-user-table">
<el-table :data="sendUserList" style="width: 100%" class="user-table" height="400">
<el-table-column prop="userName" label="用户名" min-width="50%">
<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="30%">
</el-table-column>
<el-table-column prop="send" label="AC币" min-width="20%">
</el-table-column>
</el-table>
</div>
<span class="clearfix"></span>
</div>
<div class="item r">
<div class="banner">
<p class="tab fixed">收到礼物用户排行</p>
</div>
<div id="receive-gift-user-table">
<el-table :data="receiveUserList" style="width: 100%" class="user-table" height="400">
<el-table-column prop="userName" label="用户名" min-width="50%">
<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="30%">
</el-table-column>
<el-table-column prop="receive" label="钻石" min-width="20%">
</el-table-column>
</el-table>
</div>
<span class="clearfix"></span>
</div>
<span class="clearfix"></span>
</div>
</div>
<p class="btn-toggle-info" @click="handleShowGiftTrend" v-if="!showGiftTrend"><span><i class="icon icon-chevron-down"></i>点击查看礼物趋势</span></p>
<div class="block" v-if="showGiftTrend">
<div class="mainer">
<div class="banner">
<p class="tab fixed">{{switchToSendGiftTrend?'送出礼物趋势':'收到礼物趋势'}}</p>
<div class="r">
<el-form :inline="true" :model="giftTrendFormData" size="mini">
<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>
<el-button type="primary" @click="handleSwitchToSendGiftTrend">{{switchToSendGiftTrend?'切换至收到礼物趋势':'切换至送出礼物趋势'}}</el-button>
</el-form-item>
</el-form>
</div>
</div>
<div id="gift-trend-container">
</div>
</div>
</div>
</template>
<el-drawer :title="switchToSendGiftTrend?'送出礼物详情':'收到礼物详情'" :visible.sync="showGiftDetail" direction="ltr" :modal="false" :size="670">
<div v-if="switchToSendGiftTrend">
<div id="send-gift-table">
<el-table :data="giftDetailList" style="width: 100%" class="user-table" height="500">
<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="150">
</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>
</div>
</div>
<div v-else>
<div id="receive-gift-table">
<el-table :data="giftDetailList" style="width: 100%" class="user-table" height="500">
<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="150">
</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>
</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="isContainPeach">
<el-switch v-model="settingFormData.isContainPeach" active-text="包括桃子" inactive-text="不包括桃子">
</el-switch>
</el-form-item>
<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>
`;
history.replaceState(null, null, '/member/#area=acfunstat');
// 初始化实例
new Vue({
el : '#acfunstat-container',
data : function(){
return {
send : 0,
receive : 0,
sendGiftList : [],
receiveGiftList : [],
giftDetailList : [],
showGiftDetail : false,
showGiftTrend : false,
sendUserList : [],
receiveUserList : [],
userInfo : {},
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',
},
};
},
methods : {
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);
}
});
},
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.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'){
// 统计送出礼物总ac币
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.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');
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;
}
userInfo.receiveGiftList.splice(userInfo.receiveGiftList.length, 0, ...uids[userInfo.uid]);
userInfo.receive += _.sumBy(uids[userInfo.uid], 'azuanAmount');
nextGetReceiveGiftList();
});
}
}
}
else{
getReceiveGiftList();
}
}
},
);
}
}
getReceiveGiftList();
},
// 渲染趋势
renderGiftTrend : function(){
var vue = this;
var data = this.switchToSendGiftTrend?this.sendGiftList:this.receiveGiftList;
// 筛选用户
if(this.giftTrendFormData.uid){
data = _.filter(data, {userId:_.parseInt(this.giftTrendFormData.uid)});
}
// 按时间分组
data = _.groupBy(data, function(item){
// 按天筛选
if(vue.giftTrendFormData.unit == 'day'){
return item.dayUnitText;
}
// 按周筛选
if(vue.giftTrendFormData.unit == 'week'){
return item.weekUnitText;
}
// 按月筛选
if(vue.giftTrendFormData.unit == 'month'){
return item.monthUnitText;
}
// 按年筛选
if(vue.giftTrendFormData.unit == 'year'){
return item.yearUnitText;
}
});
// 转化格式
var lineNameData = _.sortBy(Object.keys(data));
var lineValueData = [];
lineNameData.forEach(function(unit){
lineValueData.push(_.sumBy(data[unit], vue.switchToSendGiftTrend?'acoin':'azuanAmount'));
});
var chart = 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);
chart.on('click', function (params) {
// 隐藏tooltip
chart.dispatchAction({
type: 'hideTip',
});
// 设置礼物数据
vue.giftDetailList = data[params.name];
// 展示
vue.showGiftDetail = 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 = false;
this.send = 0;
this.receive = 0;
this.sendGiftList = [];
this.receiveGiftList = [];
this.giftDetailList = [];
this.sendUserList = [];
this.receiveUserList = [];
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();
});
});
}
});
},
// 导出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: 'azuanAmount', width: 20, },
];
rowIndex = 1;
sheet.addRow({userName: '用户名', uid : '用户uid', '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.receiveUserList.forEach(function(userInfo){
sheet.addRow({userName: userInfo.userName, uid : userInfo.uid, azuanAmount:userInfo.receive});
// 设置记录样式
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 : {
},
watch: {
// 监听趋势表单数据变化
giftTrendFormData : {
deep : true,
handler : function(newVal, oldVal){
if(this.showGiftTrend){
this.renderGiftTrend();
}
},
},
},
mounted : function(){
// 打开弹窗
this.openSettingDialog();
},
});
});
navEle.append(navItem);
return true;
}
// 加载动态页面Vue实例
function loadFeedVue(){
var vue = null;
// 若vue已实例化，且对应的el元素存在，则表示已加载结束
if(vue && !document.querySelector('#acfunfeed-container')){
return true;
}
// 检查是否为“圈子”导航菜单
pushEle = document.querySelector('#list-guide-left a[href="#area=push"]');
if(pushEle){
if(!pushEle.parentElement.parentElement.classList.contains('active')){
return false;
}
}
else{
return false;
}
// 容器
var navEle = document.querySelector('#block-banner-right');
// 容器不存在，无法挂载
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="icon icon-step-backward" title="最初"></i></span>
<span class="pager pager-fore" v-if="page>1" @click="toPrevPage"><i class="icon icon-chevron-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"><i class="icon icon-chevron-right" title="下一页"></i></span>
<span class="pager pager-first" @click="toFinalPage"><i class="icon icon-step-forward" title="最末"></i></span>
<span class="hint">当前位置：<input class="ipt-pager" type="number" v-model="jumpPage" :data-max="total"><button class="btn mini btn-pager" @click="toJumpPage(jumpPage)">跳页</button> 共{{total}}页</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)" @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">
<div class="inner">
<div 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>
</div>
<div 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">
<feed-comment :comment="comment" v-for="comment in feed.hotComments" @content-click="handleCommentContentClick"/>
</div>
</div>
<span class="clearfix"></span>
</div>
</div>
`;
// 文章内容HTML
var articleHTML = `
<div :data-aid="feed.resourceId" :class="{block:true,item:!isInRepost}" :key="feed.resourceId">
<div class="inner">
<div 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>
</div>
<div 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">
<feed-comment :comment="comment" v-for="comment in feed.hotComments" @content-click="handleCommentContentClick"/>
</div>
</div>
<span class="clearfix"></span>
</div>
</div>
`;
// 动态内容HTML
var activityHTML = `
<div :data-aid="feed.resourceId" :class="{block:true,item:!isInRepost}" :key="feed.resourceId">
<div :class="{inner : true, repost:feed.isRepost}">
<div 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>
</div>
<div class="r">
<p class="block-title"><a href="javascript:void(0)" :title="feed.isRepost?'转发':'动态'" target="_blank" class="channel">{{feed.isRepost?'转发':'动态'}}</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="{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">
<feed-comment :comment="comment" v-for="comment in feed.hotComments" @content-click="handleCommentContentClick"/>
</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" @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" @comment-content-click="handleCommentContentClick"/>
</template>
<!-- 转发动态 -->
<template v-if="feed.repostSource.isActivity">
<feed-activity :feed="feed.repostSource" :isInRepost="true" @content-click="handleActivityContentClick" @cover-click="handleActivityCoverClick" @comment="handleCommentClick" @like="handleLikeClick" @banana="handleBananaClick" @comment-content-click="handleCommentContentClick"/>
</template>
</div>
</template>
</div>
<span class="clearfix"></span>
</div>
</div>
`;
// 评论
var commentHTML = `
<div class="ac-hot-comment-list">
<div>
<div class="area-comment-top block" :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>
</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="comment.index">#{{comment.index}}</span>
</div>
</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(page){
if(page>this.total){
this.$message({
type : 'error',
message : `无法跳至指定位置（页码不得大于${this.total}）`,
});
}
else{
this.$emit('change', {
page : page,
total : this.total,
pageSize : this.pageSize,
pcursor : this.pcursors[page-1],
});
}
},
},
computed : {
total : function(){
return this.pcursors.length;
},
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-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 : {
// 点击动态内容
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-comment', {
data : function(){
return {
};
},
props : ['comment'],
methods : {
handleCommentContentClick : function(comment, event){
this.$emit('content-click', comment, event);
},
},
template : commentHTML,
});
// 修改展示内容
document.querySelector('#block-first>.mainer').innerHTML = `
<style>
@font-face{
font-family:element-icons;
src:url('https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.14.1/theme-chalk/fonts/element-icons.ttf');
}
.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{
display: block;
margin-top: -8px;
background-color: #fff;
width: 128px;
}
#acfunfeed-container .name {
color : #c66 !important;
}
#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 .item {
position: relative;
overflow: hidden;
border: 1px solid #eee;
box-shadow: none;
background-color: #fcfcfc;
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 {
position: relative;
width : 19%;
}
#acfunfeed-container .item .r {
position: relative;
width : 78%;
}
#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;
}
#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
}
#acfunfeed-container .item .thumb-preview {
margin: 8px 0 16px 8px
}
#acfunfeed-container .item .thumb-avatar {
position: absolute;
left: 96px;
top: 45px
}
#acfunfeed-container .item .block-title {
margin: 10px auto 0
}
#acfunfeed-container .item .channel {
background-color: #c66;
position: static;
display: inline-block;
*display: inline;
margin: 0 4px 4px 0;
padding: 0 4px
}
#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 {
padding : 10px !important;
}
#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 {
min-width: 31px
}
#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: 16%;
}
#list-feed-feed .item .r {
width: 82%;
}
#acfunfeed-container .area-repost .block .r {
width: 82%;
}
#acfunfeed-container .item .preview {
width: 130px;
height: 74px;
object-fit : cover;
}
#acfunfeed-container .item .thumb-avatar {
top: 48px;
left: 104px
}
}
#acfunfeed-container .item .ubb-at {
cursor : pointer;
color : #08c;
}
#acfunfeed-container .item .ubb-img {
cursor : pointer;
color : #08c;
}
#acfunfeed-container .item .ubb-emot {
vertical-align: baseline;
max-width: 48px!important;
max-height: 48px!important;
margin: 4px 1px 0;
}
#acfunfeed-container .block .info .icon{
display : inline-block;
width : 12px;
height : 12px;
cursor : pointer;
}
#acfunfeed-container .block .info .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 .block .info .commentcount .icon:hover {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTNweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSIwIDAgMTMgMTMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjUgKDY3NDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5pY29uX2NvbW1lbnRfcGxfaG92ZXI8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iaWNvbl9jb21tZW50X3BsX2hvdmVyIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iaWNvbl/mlofnq6Dor4TorrotY29weS0iIGZpbGw9IiNGRDRDNUMiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik00LjA3MDAyNzQ3LDEyIEwwLjYzNzM2MDU2NCwxMi45ODA3NjIgQzAuMzE3OTUyNDYxLDEzLjA3MjAyMTQgMCwxMi44MzIxODk0IDAsMTIuNSBMMCw0IEMwLDIuNzIzODU3NjMgMC43MjM4NTc2MjUsMiAyLDIgTDExLDIgQzEyLjI3NjE0MjQsMiAxMywyLjcyMzg1NzYzIDEzLDQgTDEzLDEwIEMxMywxMS4yNzYxNDI0IDEyLjI3NjE0MjQsMTIgMTEsMTIgTDQuMDcwMDI3NDcsMTIgWiBNOSw1IEM4LjQ0NzcxNTI1LDUgOCw1LjQ0NzcxNTI1IDgsNiBMOCw3IEM4LDcuNTUyMjg0NzUgOC40NDc3MTUyNSw4IDksOCBDOS41NTIyODQ3NSw4IDEwLDcuNTUyMjg0NzUgMTAsNyBMMTAsNiBDMTAsNS40NDc3MTUyNSA5LjU1MjI4NDc1LDUgOSw1IFogTTQsNSBDMy40NDc3MTUyNSw1IDMsNS40NDc3MTUyNSAzLDYgTDMsNyBDMyw3LjU1MjI4NDc1IDMuNDQ3NzE1MjUsOCA0LDggQzQuNTUyMjg0NzUsOCA1LDcuNTUyMjg0NzUgNSw3IEw1LDYgQzUsNS40NDc3MTUyNSA0LjU1MjI4NDc1LDUgNCw1IFoiIGlkPSJDb21iaW5lZC1TaGFwZSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+);
}
#acfunfeed-container .block .info .commentcount.active .icon {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTNweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSIwIDAgMTMgMTMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjUgKDY3NDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5pY29uX2NvbW1lbnRfcGxfaG92ZXI8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iaWNvbl9jb21tZW50X3BsX2hvdmVyIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iaWNvbl/mlofnq6Dor4TorrotY29weS0iIGZpbGw9IiNGRDRDNUMiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik00LjA3MDAyNzQ3LDEyIEwwLjYzNzM2MDU2NCwxMi45ODA3NjIgQzAuMzE3OTUyNDYxLDEzLjA3MjAyMTQgMCwxMi44MzIxODk0IDAsMTIuNSBMMCw0IEMwLDIuNzIzODU3NjMgMC43MjM4NTc2MjUsMiAyLDIgTDExLDIgQzEyLjI3NjE0MjQsMiAxMywyLjcyMzg1NzYzIDEzLDQgTDEzLDEwIEMxMywxMS4yNzYxNDI0IDEyLjI3NjE0MjQsMTIgMTEsMTIgTDQuMDcwMDI3NDcsMTIgWiBNOSw1IEM4LjQ0NzcxNTI1LDUgOCw1LjQ0NzcxNTI1IDgsNiBMOCw3IEM4LDcuNTUyMjg0NzUgOC40NDc3MTUyNSw4IDksOCBDOS41NTIyODQ3NSw4IDEwLDcuNTUyMjg0NzUgMTAsNyBMMTAsNiBDMTAsNS40NDc3MTUyNSA5LjU1MjI4NDc1LDUgOSw1IFogTTQsNSBDMy40NDc3MTUyNSw1IDMsNS40NDc3MTUyNSAzLDYgTDMsNyBDMyw3LjU1MjI4NDc1IDMuNDQ3NzE1MjUsOCA0LDggQzQuNTUyMjg0NzUsOCA1LDcuNTUyMjg0NzUgNSw3IEw1LDYgQzUsNS40NDc3MTUyNSA0LjU1MjI4NDc1LDUgNCw1IFoiIGlkPSJDb21iaW5lZC1TaGFwZSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+);
}
#acfunfeed-container .block .info .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 .block .info .likecount .icon:hover {
background-image: url(//cdnfile.aixifan.com/static/article/widget/content/img/keyFrames/frame12.fd90720499ace4b7850b.svg);
}
#acfunfeed-container .block .info .likecount.active .icon {
background-image: url(//cdnfile.aixifan.com/static/article/widget/content/img/keyFrames/frame12.fd90720499ace4b7850b.svg);
}
#acfunfeed-container .block .info .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 .block .info .collectcount .icon:hover {
background-image: url(//cdnfile.aixifan.com/static/article/widget/content/img/icon_follow_hover.c96c3455cd5ebe98a14d.svg);
}
#acfunfeed-container .block .info .collectcount.active .icon {
background-image: url(//cdnfile.aixifan.com/static/article/widget/content/img/icon_follow_hover.c96c3455cd5ebe98a14d.svg);
}
#acfunfeed-container .block .info .bananacount {
position : relative;
}
#acfunfeed-container .block .info .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 .block .info .bananacount .icon:hover {
background-image: url(//cdnfile.aixifan.com/static/article/widget/content/img/icon_banana_hover.31b7f8940e072833fa9c.svg);
}
#acfunfeed-container .block .info .bananacount.active .icon {
background-image: url(//cdnfile.aixifan.com/static/article/widget/content/img/icon_banana_hover.31b7f8940e072833fa9c.svg);
}
#acfunfeed-container .block .info .verified-icon{
display : inline-block;
width : 12px;
height : 12px;
}
#acfunfeed-container .block .info .verified-icon.monkey-verified-icon{
background-image: url(//cdnfile.aixifan.com/static/common/static/img/icon_monkey.1b51622f33db76d86ce4.svg);
background-position: 0;
background-size: cover;
background-origin: content-box;
background-repeat: no-repeat;
}
#acfunfeed-container .block .info .verified-icon.official-verified-icon{
background-image: url(//cdnfile.aixifan.com/static/common/static/img/icon_v.9830a4cddee7ed5c25bc.svg);
background-position: 0;
background-size: cover;
background-origin: content-box;
background-repeat: no-repeat;
}
#acfunfeed-container .block .info .verified-icon.avi-verified-icon{
background-image: url(//cdnfile.aixifan.com/static/common/static/img/icon_avi.38445e8a9e69abb681be.svg);
background-position: 0;
background-size: cover;
background-origin: content-box;
background-repeat: no-repeat;
}
#acfunfeed-container .block .info .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 .ac-hot-comment-list .area-comment-top {
width: 100%;
position: relative;
}
#acfunfeed-container .ac-hot-comment-list .area-comment-first {
position: relative;
height: auto;
}
#acfunfeed-container .ac-hot-comment-list .area-comment-left {
width: 30px;
height: 50px;
float: left;
left: 10px;
bottom: -5px;
margin-top: -5px;
position: relative;
}
#acfunfeed-container .ac-hot-comment-list .area-comment-left .thumb {
position: relative;
border: none;
background: 0;
margin: 0;
padding: 0;
border-radius: 0;
box-shadow: none;
display: block;
}
#acfunfeed-container .ac-hot-comment-list .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%;
}
#acfunfeed-container .ac-hot-comment-list .area-comment-right {
margin-left: 50px;
}
#acfunfeed-container .ac-hot-comment-list .area-comment-title {
height: 20px;
line-height: 25px;
display: flex;
align-items: center;
}
#acfunfeed-container .ac-hot-comment-list .area-comment-title .name {
margin-right: 2px;
color: #333333;
font-size: 12px;
margin-left : 0px;
}
#acfunfeed-container .ac-hot-comment-list .area-comment-title .time_day, #acfunfeed-container .ac-hot-comment-list .area-comment-title .time_times {
font-size: 12px;
color: #999999;
}
#acfunfeed-container .ac-hot-comment-list .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 .ac-hot-comment-list .area-comment-tool {
position: relative;
clear: both;
font-size: 12px;
color: #999999;
margin-bottom: 17px;
}
#acfunfeed-container .ac-hot-comment-list .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;
}
#acfunfeed-container .ac-hot-comment-list .area-comment-up:hover {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTNweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSIwIDAgMTMgMTMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjUgKDY3NDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5pY29uX2NvbW1lbnRfel9ob3ZlcjwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJpY29uX2NvbW1lbnRfel9ob3ZlciIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9InphbjMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLCAtMS4wMDAwMDApIiBmaWxsPSIjRkQ0QzVDIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8cGF0aCBkPSJNMS41LDQgQzIuMzI4NDI3MTIsNCAzLDQuNjcxNTcyODggMyw1LjUgTDMsMTEuNSBDMywxMi4zMjg0MjcxIDIuMzI4NDI3MTIsMTMgMS41LDEzIEMwLjY3MTU3Mjg3NSwxMyAxLjY2NTMzNDU0ZS0xNSwxMi4zMjg0MjcxIDAsMTEuNSBMMCw1LjUgQzAsNC42NzE1NzI4OCAwLjY3MTU3Mjg3NSw0IDEuNSw0IFoiIGlkPSJSZWN0YW5nbGUtMTUiPjwvcGF0aD4KICAgICAgICAgICAgPHBhdGggZD0iTTEwLjcyNDY4NzUsNC44OTY0MzQyNCBDMTIuMTc1MjczOSw0Ljg5NjQzNDI0IDEzLjI5MDY3NjcsNi4yODE2NDkyIDEyLjkzNzU2NTIsNy40NzE1MTU5IEwxMS44NTQxMDI3LDExLjEyMjQxODMgQzExLjQxNDk5MjUsMTIuNjAyMDcxMyAxMC45MTg4NDk4LDEzIDkuNDI0NTMyNTgsMTMgTDQuNSwxMyBDNC4yMjM4NTc2MywxMyA0LDEyLjc3NjE0MjQgNCwxMi41IEw0LDUuMzUgQzQsNS4xODAxMTA0MyA0LjA4NjI2NTQxLDUuMDIxODQ0MzEgNC4yMjkwNDczMyw0LjkyOTc4MDI0IEw1LjIzODAwMzgyLDQuMjgwOTE2NDUgQzUuNTY2OTA2ODYsNC4wMzE3NjI4NyA1Ljc5MzUzMTAyLDMuNzQxNDkzNzMgNS45NTM2NDI0OSwzLjM5NTAxODk4IEM2LjA5MjkyNDE5LDMuMDkzNjE5MDIgNi4xMjIwNzA2OSwyLjk4MTY0MjI2IDYuMjc3NDgyODgsMi4yNTk5NTk1NiBDNi40ODk5Mzc4LDEuMjczMzg5MzUgNi44NjM3MzY2OSwwLjgzODg1MDAzMiA3Ljc5NzQxMDQ2LDEuMDQyMjI4ODYgQzkuMjg0MjE3OTgsMS4zNjYwOTQ4NSA5LjU3MTk0NDUxLDIuNzM0MTgxNzMgOC44NDMwMTU5OSw0Ljg5NjQzNDI0IEwxMC43MjQ2ODc1LDQuODk2NDM0MjQgWiIgaWQ9IlBhdGgtNCI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat;
color: #FD4C5C;
}
#acfunfeed-container .ac-hot-comment-list .area-comment-up.active {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTNweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSIwIDAgMTMgMTMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjUgKDY3NDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5pY29uX2NvbW1lbnRfel9ob3ZlcjwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJpY29uX2NvbW1lbnRfel9ob3ZlciIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9InphbjMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLCAtMS4wMDAwMDApIiBmaWxsPSIjRkQ0QzVDIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8cGF0aCBkPSJNMS41LDQgQzIuMzI4NDI3MTIsNCAzLDQuNjcxNTcyODggMyw1LjUgTDMsMTEuNSBDMywxMi4zMjg0MjcxIDIuMzI4NDI3MTIsMTMgMS41LDEzIEMwLjY3MTU3Mjg3NSwxMyAxLjY2NTMzNDU0ZS0xNSwxMi4zMjg0MjcxIDAsMTEuNSBMMCw1LjUgQzAsNC42NzE1NzI4OCAwLjY3MTU3Mjg3NSw0IDEuNSw0IFoiIGlkPSJSZWN0YW5nbGUtMTUiPjwvcGF0aD4KICAgICAgICAgICAgPHBhdGggZD0iTTEwLjcyNDY4NzUsNC44OTY0MzQyNCBDMTIuMTc1MjczOSw0Ljg5NjQzNDI0IDEzLjI5MDY3NjcsNi4yODE2NDkyIDEyLjkzNzU2NTIsNy40NzE1MTU5IEwxMS44NTQxMDI3LDExLjEyMjQxODMgQzExLjQxNDk5MjUsMTIuNjAyMDcxMyAxMC45MTg4NDk4LDEzIDkuNDI0NTMyNTgsMTMgTDQuNSwxMyBDNC4yMjM4NTc2MywxMyA0LDEyLjc3NjE0MjQgNCwxMi41IEw0LDUuMzUgQzQsNS4xODAxMTA0MyA0LjA4NjI2NTQxLDUuMDIxODQ0MzEgNC4yMjkwNDczMyw0LjkyOTc4MDI0IEw1LjIzODAwMzgyLDQuMjgwOTE2NDUgQzUuNTY2OTA2ODYsNC4wMzE3NjI4NyA1Ljc5MzUzMTAyLDMuNzQxNDkzNzMgNS45NTM2NDI0OSwzLjM5NTAxODk4IEM2LjA5MjkyNDE5LDMuMDkzNjE5MDIgNi4xMjIwNzA2OSwyLjk4MTY0MjI2IDYuMjc3NDgyODgsMi4yNTk5NTk1NiBDNi40ODk5Mzc4LDEuMjczMzg5MzUgNi44NjM3MzY2OSwwLjgzODg1MDAzMiA3Ljc5NzQxMDQ2LDEuMDQyMjI4ODYgQzkuMjg0MjE3OTgsMS4zNjYwOTQ4NSA5LjU3MTk0NDUxLDIuNzM0MTgxNzMgOC44NDMwMTU5OSw0Ljg5NjQzNDI0IEwxMC43MjQ2ODc1LDQuODk2NDM0MjQgWiIgaWQ9IlBhdGgtNCI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat;
color: #FD4C5C;
}
</style>
<p class="alert alert-info">目前还不支持动态详情和动态评论功能。。。</p>
<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">
<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" @content-click="handleActivityContentClick" @cover-click="handleActivityCoverClick" @comment="handleCommentClick" @like="handleLikeClick" @banana="handleBananaClick" @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="设置" :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="sortType">
<el-select v-model="settingFormData.sortType" style="width:200px;">
<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-select>
</el-form-item>
<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 : '#acfunfeed-container',
data : function(){
return {
feedType : feedType,
uid : parseInt(document.querySelector('#block-user-left .d a').href.replace(config.ACFUN_SERVER + config.URLS.ACFUN_USER.SPACE + '/', '')),
page : 1,
pcursor : "0",
pcursors : ["0"],
feedList : [],
feedProfileList : [],
settingFormDialogVisible : false,
settingFormData : {
// 默认获取今日动态
dateRegion : [moment().startOf('day')._d, moment().startOf('day')._d],
// 排序方式为日期
sortType : 'date',
},
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();
}
},
},]
},
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;
// 已获取结束
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;
}, config.HEADERS.ACFUN_API_SERVER,
);
},
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.feedProfileList = feedList;
// 按发布时间排序
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');
}
var pcursors = [];
for(var index=0; index<Math.ceil(vue.feedProfileList.length/config.PAGE.PAGESIZE);++index){
pcursors.push(index);
}
vue.pcursors = pcursors;
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 = $("#block-first").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}]的个人空间`;
// 如果有热评
if(feed.hotComments && feed.hotComments.length>0){
feed.hotComments.forEach(function(comment){
comment.moment = {
};
comment.userInfo = {
name : comment.userName,
headUrl : 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 = vue.ubb2html(comment, comment.content);
});
}
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;
}
});
}
feed.tagResourceTypeText = this.getResourceText(feed.tagResourceType);
// 动态类型
if(feed.tagResourceType == 3 || feed.tagResourceType == 10){
// 设置动态文本
feed.moment.htmlText = this.ubb2html(feed, feed.moment.text);
// 转发动态
if(feed.repostSource){
feed.isRepost = true;
// 处理转发内容
var isSuccess = this.processFeed(feed.repostSource);
// 无法获取转发内容
if(!isSuccess){
feed.repostSource = null;
feed.caption = `${feed.userInfo.name}发布了新动态`;
}
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;
},
// 获取动态类型
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){
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 = `<span class="ubb-img"><i class="icon icon-image"></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;
},
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){
// 查看动态图片
if(feed.moment.imgs && feed.moment.imgs.length>0){
this.openImageViewer(feed.moment.imgs);
}
},
// 评论
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){
this.previewImages = images;
this.$nextTick(function(){
// 已初始化，则更新图片数据
if(this.gallery){
this.gallery.update();
}
// 初始化
else{
this.gallery = new Viewer(document.getElementById('preview-image'));
}
this.gallery.show();
});
},
// 打开设置弹窗
openSettingDialog : function(){
this.settingFormDialogVisible = true;
},
// 更改设置提交
handleSettingFormSubmit : function(){
var vue = this;
this.$refs.settingForm.validate((valid) => {
// 通过校验
if(valid){
// 只是修改了排序方式
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 = [];
// 按发布时间排序
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');
}
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;
}
});
},
},
computed : {
},
mounted : function(){
var vue = this;
// 加载表情包
this.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;
}
});
},
});
};
// 添加导航选项
var navItem = document.createElement('a');
navItem.id = 'area-feed';
navItem.href = 'javascript:void(0)';
navItem.classList.add('tab');
navItem.innerHTML = `
<i class="icon"></i>
动态推送
<span class="hint hidden hint-feed-left">(0)</span>
`;
// 添加元素
navEle.append(navItem);
navItem.addEventListener('click', function(e){
e.stopPropatation = true;
// 删除其它菜单项的active类
var activeNavItem = navEle.querySelector('.active');
activeNavItem.classList.remove('active');
// 添加active类
navItem.classList.add('active');
history.replaceState(null, null, '/member/#area=feed');
// 修改标题
document.querySelector('#block-title-banner p').innerText = '动态推送';
document.querySelector('#block-title-banner .d').innerText = 'Feed';
document.title = '动态推送';
// 加载vue
loadVue('feed');
});
var navItemVup = document.createElement('a');
navItemVup.id = 'area-feed-vup';
navItemVup.href = 'javascript:void(0)';
navItemVup.classList.add('tab');
navItemVup.innerHTML = `
<i class="icon"></i>
V圈动态
<span class="hint hidden hint-feed-vup-left">(0)</span>
`;
// 添加元素
navEle.append(navItemVup);
navItemVup.addEventListener('click', function(e){
e.stopPropatation = true;
// 删除其它菜单项的active类
var activeNavItem = navEle.querySelector('.active');
activeNavItem.classList.remove('active');
// 添加active类
navItemVup.classList.add('active');
history.replaceState(null, null, '/member/#area=feed-vup');
// 修改标题
document.querySelector('#block-title-banner p').innerText = 'V圈动态';
document.querySelector('#block-title-banner .d').innerText = 'Feed';
document.title = 'V圈动态';
// 加载vue
loadVue('feed-vup');
});
return true;
}
function checkLoadVue(loadFunc){
window.setTimeout(function(){
var isSuccess = loadFunc();
if(!isSuccess){
checkLoadVue();
}
}, 1000);
}
window.onload = function(){
checkLoadVue(loadStatVue);
// 推送页面
if([config.ACFUN_SERVER + config.URLS.ACFUN_USER.PUSH, config.ACFUN_SERVER + config.URLS.ACFUN_USER.FOLLOWER, config.ACFUN_SERVER + config.URLS.ACFUN_USER.FOLLOWING].indexOf(window.location.href) != -1){
checkLoadVue(loadFeedVue);
}
};
window.onhashchange = function(event){
// 推送页面
if([config.ACFUN_SERVER + config.URLS.ACFUN_USER.PUSH, config.ACFUN_SERVER + config.URLS.ACFUN_USER.FOLLOWER, config.ACFUN_SERVER + config.URLS.ACFUN_USER.FOLLOWING].indexOf(window.location.href) != -1){
checkLoadVue(loadFeedVue);
}
};
})();
QingJ © 2025
镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址