// pages/userDrtail/index.js import * as echarts from '../../../components/ec-canvas/echarts'; const app = getApp() Page({ data: { ec: { lazyLoad: true }, trendObj: { province_list: [], city_list: [] }, pageMove: 1, tab: 1, user_id: '', range: 1, timeObj:{id:1,name:'昨日'}, addTimeObj: {id:7,name:'近7天'}, moveObj: {}, sexTrend: true, ageTrend: true, deviceTrend: true, pageLive: 1, safeAreaTop:50+app.data.safeAreaTop, followObj:{}, timeList:[ {id:1,name:'昨日'}, {id:7,name:'近7天'}, {id:30,name:'近30天'}, ], isReset:false, isOneFalg:true, timeRangeList:[ {id:7,name:'近7天'}, {id:30,name:'近30天'}, ], addDataObj:{}, fanTrendTimeFlag:false, type: 1, pagesize:20, total:0, page:1, search_key_word:'', if_extlink:'', is_like_count_min:'', video_sort_type:{id:'createtime',name:'按最新'}, video_list:[], video_sort_type_list:[ {id:'createtime',name:'按最新'}, {id:'like_count',name:'按点赞'}, {id:'forward_count',name:'按转发'}, {id:'comment_count',name:'按评论'}, ], video_sort_type_flag:false, scrollTop:0, videoLoading:false, isHaveMoreData:true, liveDataObj:{}, detailObj: { cookie_status:1 }, userExtAppListData:[{}], authorizeFlag:false, claimFlag:false, cookie_status:1 }, onLoad: function (options) { this.setData({ user_id: options.user_id }) }, onShow() { this.getDetail(); this.init() this.isClaim() }, init(){ if(this.data.type==1){ if(this.data.tab==1) { this.getFollowData(); this.getAddData(); }else { this.getFansData(); } } if(this.data.type ==2){ this.setData({ moveList: [], pageMove: 1, pagesMove: 1 }) this.getMoveData() this.getMoveList(); } if(this.data.type==3){ this.setData({ liveList: [], pageLive: 1, pagesLive: 1 }) this.getLiveData() this.getLiveList() } }, getFollowData(){//视频号--关注者数据 wx.showLoading({ title: '加载中', }) app.func.req('/api/sphClaimInfo/followRangeIndex', 'get', { 'user_id': this.data.user_id, "range": this.data.range }, (res) => { wx.hideLoading() wx.stopPullDownRefresh(); if(res && res.errno == 0){ //成功 this.setData({ followObj: res.rst }) }else if(res.errno!=4003){ wx.showToast({ title: res.err, icon: 'none', duration: 2000 }) } },(err)=>{ wx.hideLoading() wx.stopPullDownRefresh(); }) }, toDetail(e) { // return; wx.navigateTo({ url: '/pages/moveDetail/moveDetail?user_id='+this.data.user_id+'&video_id='+e.currentTarget.dataset.item.video_id, }) }, goUserDetail(e){ wx.navigateTo({ url: '/pages/userDrtail/index?user_id='+e.currentTarget.dataset.user_id, }) }, goVideoDetail(e){ wx.navigateTo({ url: '/pages/videoDetail/videoDetail?video_id='+e.currentTarget.dataset.item.video_id+'&user_id='+e.currentTarget.dataset.item.user_id, }) }, checkTab(e) { this.setData({ tab: e.currentTarget.dataset.type }) this.init(); }, getFansData(){//粉丝画像 wx.showLoading({ title: '加载中', }) app.func.req('/api/sphClaimUser/fansPortrait', 'get', { 'uid': this.data.user_id }, (res) => { wx.hideLoading() wx.stopPullDownRefresh(); if(res && res.errno == 0){ //成功 var sexList = [],deviceList = [],ageObj = {nameList:[],valueList:[]}; if(res.rst&&Object.keys(res.rst).length>0&&res.rst.sex_list) { res.rst.sex_list.forEach(item => { sexList.push({ value: item.scale, name: item.dim }) }) }else { this.setData({ trendObj: res.rst&&!Array.isArray(res.rst)&&Object.keys(res.rst)?res.rst:{ province_list: [], city_list: [] }, sexList: sexList, deviceList: deviceList, ageObj: ageObj, sexTrend: sexList.length>0, deviceTrend: deviceList.length>0, ageTrend: ageObj.nameList.length>0, }) console.log(this.data.trendObj) return; } Object.keys(res.rst).length>0&&res.rst.device_list&&res.rst.device_list.forEach(item => { deviceList.push({ value: item.scale, name: item.dim }) }) Object.keys(res.rst).length>0&&res.rst.age_list&&res.rst.age_list.forEach(item => { ageObj.nameList.push(item.dim) ageObj.valueList.push(item.value) }) this.setData({ trendObj: res.rst, sexList: sexList, deviceList: deviceList, ageObj: ageObj, sexTrend: sexList.length>0, deviceTrend: deviceList.length>0, ageTrend: ageObj.nameList.length>0, }) this.data.sexList.length>0&&this.sexTrend(); this.data.deviceList.length>0&&this.deviceTrend(); this.data.ageObj.nameList.length>0&&this.ageTrend(); }else if(res.errno!=4003){ wx.showToast({ title: res.err, icon: 'none', duration: 2000 }) } },(err)=>{ wx.hideLoading() wx.stopPullDownRefresh(); }) }, //增长趋势数据 getAddData(){ app.func.req('/api/sphClaimInfo/followRangeChart', 'get', { "user_id": this.data.user_id, "begin_date": app.func.getDay(-Number(this.data.addTimeObj.id-1),false), "end_date": app.func.getDay(0,false) }, (res) => { if(res && res.errno == 0){ wx.hideLoading() //成功 this.setData({ addDataObj: res.rst }) this.addTrend() }else if(res.errno!=4003){ wx.showToast({ title: res.err, icon: 'none', duration: 2000 }) } }) }, addTrend(){//增长趋势 var echartsComponnet = this.selectComponent('#addEcharts') var _this = this; echartsComponnet.init((canvas, width, height, dpr) => { // 初始化图表 const Chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var option = { tooltip : { trigger: 'axis', show: true, formatter:function(params) { var result = params[0].name + "\n"; params.forEach((item, index) => { result += item.seriesName + ":" + app.func.NumberHandle(item.value) + "\n"; }); return result; } }, grid: { left: "7%", right: "0%", top: "3%", containLabel: true }, legend: { show: true, bottom: '0%', textStyle: { color:'#000', fontSize: 10 } }, xAxis: [ { type: "category", data: _this.data.addDataObj.date, axisLine: { lineStyle:{ color:'#89899C' } }, axisTick: { show: false }, splitLine: { show: false }, axisLabel:{ color:'#89899C', fontSize:10, rotate:30, }, } ], yAxis: [ { type: "value", // name: "预估增量", axisLine: { show:false }, axisTick: { show: false }, splitLine: { lineStyle: { color: "#89899C", type: "dashed" } }, axisLine: { lineStyle:{ color:'#89899C' } }, nameTextStyle: { color: "#89899C", fontSize:12, padding: [0, -30, 0, 0] }, axisLabel: { color:'#89899C', fontSize:12, formatter: function(params) { var result = params; return app.func.NumberHandle(result); } } } ], series: [ { smooth: true, type: "line", name:"新增关注", barWidth: (100 / _this.data.addDataObj.date.length) > 10 ? 10 : (100 / _this.data.addDataObj.date.length), data: _this.data.addDataObj.add, itemStyle: { opacity: 0, color: "#FF835E", barBorderRadius: [4, 4, 4, 4], borderType: "dotted" } }, { smooth: true, type: "line", name:"净增关注", barWidth: (100 / _this.data.addDataObj.date.length) > 10 ? 10 : (100 / _this.data.addDataObj.date.length), data: _this.data.addDataObj.net_add, itemStyle: { opacity: 0, color: "#2662FF", barBorderRadius: [4, 4, 4, 4], borderType: "dotted" } }, { smooth: true, type: "line", name:"取消关注", barWidth: (100 / _this.data.addDataObj.date.length) > 10 ? 10 : (100 / _this.data.addDataObj.date.length), data: _this.data.addDataObj.reduce, itemStyle: { opacity: 0, color: "#2EDD99", barBorderRadius: [4, 4, 4, 4], borderType: "dotted" } }, { smooth: true, type: "line", name:"关注者数", barWidth: (100 / _this.data.addDataObj.date.length) > 10 ? 10 : (100 / _this.data.addDataObj.date.length), data: _this.data.addDataObj.total, itemStyle: { opacity: 0, color: "#8C5EFF", barBorderRadius: [4, 4, 4, 4], borderType: "dotted" } }] }; Chart.setOption(option); // 注意这里一定要返回 chart 实例,否则会影响事件处理等 return Chart; }); }, //性别 sexTrend(){ var echartsComponnet = this.selectComponent('#sexEcharts') var _this = this; echartsComponnet.init((canvas, width, height, dpr) => { // 初始化图表 const Chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var option = { color: ['#6ECFFE','#6E71F2','#FEA33F'], tooltip: { trigger: 'item', formatter(data) { return data.data.name+':'+data.value+'%' } }, grid: { left: "3%", right: "10%", top: "2%", bottom: '2%', containLabel: true }, legend: { show: true, bottom: '0%', textStyle: { color:'#000', fontSize: 10 } }, series: [{ type: 'pie', radius: ['40%', '60%'], avoidLabelOverlap: false, avoidLabelOverlap:true,//是否启用防止标签重叠策略 minShowLabelAngle: 2, minAngle: 22,//最小的扇区角度(0 ~ 360),用于防止某个值过小导致扇区太小影响交互 label: { normal: { formatter: '{a|{b}}{abg|}\n{hr|}\n {per|{d}%}', rich: { a: { color: '#666666', fontSize: 11, lineHeight: 20, align: 'center' }, hr: { width: '100%', height: 0, alien:'center' }, per: { color: '#000000', align: 'center', fontSize: 13, } } } }, labelLine: { normal: { show: true } }, data: _this.data.sexList }] }; Chart.setOption(option); // 注意这里一定要返回 chart 实例,否则会影响事件处理等 return Chart; }); }, //设备 deviceTrend(){ var echartsComponnet = this.selectComponent('#deviceEcharts') var _this = this; echartsComponnet.init((canvas, width, height, dpr) => { // 初始化图表 const Chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var option = { color: ['#6ECFFE','#6E71F2','#FEA33F','#FEED6E','#FE6E6E','#6EFEAA'], tooltip: { trigger: 'item', formatter(data) { return data.data.name+':'+data.value+'%' } }, grid: { left: "3%", right: "10%", top: "2%", bottom: '2%', containLabel: true }, legend: { show: true, bottom: '0%', textStyle: { color:'#000', fontSize: 10 } }, series: [{ type: 'pie', radius: ['40%', '60%'], avoidLabelOverlap: false, avoidLabelOverlap:true,//是否启用防止标签重叠策略 minShowLabelAngle: 2, minAngle: 22,//最小的扇区角度(0 ~ 360),用于防止某个值过小导致扇区太小影响交互 label: { normal: { formatter: '{a|{b}}{abg|}\n{hr|}\n {per|{d}%}', rich: { a: { color: '#666666', fontSize: 11, lineHeight: 20, align: 'center' }, hr: { width: '100%', height: 0, alien:'center' }, per: { color: '#000000', align: 'center', fontSize: 13, } } } }, labelLine: { normal: { show: true } }, data: _this.data.deviceList }] }; Chart.setOption(option); // 注意这里一定要返回 chart 实例,否则会影响事件处理等 return Chart; }); }, ageTrend(){//年龄分布 var echartsComponnet = this.selectComponent('#ageEcharts') var _this = this; echartsComponnet.init((canvas, width, height, dpr) => { // 初始化图表 const Chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var option = { tooltip : { trigger: 'axis', show: true, formatter:function(params) { params = params[0]; var result = ""; result = params.name + ':' + (params.value?(params.value):'-') return result; } }, grid: { left: "0%", right: "0%", bottom: '0%', top: '4%', containLabel: true }, legend: { show: true, bottom: '0%', textStyle: { color:'#000', fontSize: 10 } }, xAxis: [ { type: "category", data: _this.data.ageObj.nameList, axisLine: { lineStyle:{ color:'#89899C' } }, axisTick: { show: false }, splitLine: { show: false }, axisLabel:{ color:'#89899C', fontSize:10, rotate:30, }, } ], yAxis: [ { type: "value", axisLine: { lineStyle:{ color:'#ECEDF2' } }, min: function (value) { return value.min <= 0 ? value.min : 0; }, axisTick: { show: false }, splitLine: { lineStyle: { color: "#89899C", type: "dashed" } }, axisLine: { lineStyle:{ color:'#89899C' } }, nameTextStyle: { color: "#999999", fontSize:14, padding: [0, -20, 0, 0] }, axisLabel: { color:'#999999', fontSize:13, } } ], series: [ { smooth: true, type: "bar", // name:"新增关注", barWidth: (100 / _this.data.ageObj.nameList.length) > 10 ? 10 : (100 / _this.data.ageObj.nameList.length), data: _this.data.ageObj.valueList, itemStyle: { color: "#4B76FB", barBorderRadius: [4, 4, 4, 4], borderType: "dotted" } }] }; Chart.setOption(option); // 注意这里一定要返回 chart 实例,否则会影响事件处理等 return Chart; }); }, showTime(e) { switch (e.currentTarget.dataset.type) { case '1': this.setData({ showTimeCheck: !this.data.showTimeCheck }) break; case '2': this.setData({ showFollowTime: !this.data.showFollowTime }) break; default: break; } }, closeDiv() { this.setData({ showTimeCheck: false, showFollowTime: false }) }, checkTime(e) { // 关注者数据的周期指标 if(e.currentTarget.dataset.type==1) { this.setData({ timeObj: e.currentTarget.dataset.item, showTimeCheck: false, range: e.currentTarget.dataset.item.id }) if(this.data.type==1) { this.getFollowData(); }else if(this.data.type==2) { this.getMoveData(); }else { this.getLiveData(); } }else if(e.currentTarget.dataset.type==2) { wx.showLoading({ title: '加载中', }) this.setData({ addTimeObj: e.currentTarget.dataset.item, showFollowTime: false }) this.getAddData(); } }, // 重新激活 againActivationEvent(e){ var user_id = e.currentTarget.dataset.user_id this.setData({isReset:true,user_id:user_id}) this.getToken() }, cancelTask(){ this.setData({claimTaskFlag:false,authorizeFlag:false}) }, getToken(){ wx.showLoading({ title: '获取授权码', }) this.setData({claimTaskFlag:false}) app.func.req('/api/sphClaim/getToken', 'get', { }, (res) => { wx.hideLoading() wx.stopPullDownRefresh() if(res && res.errno == 0){ //成功 this.setData({ authorizeFlag:true, imgCode:'https://sph.wenxingshuju.com/wx_sph/api/sphClaim/getQRcode?token='+res.rst.token, token:res.rst.token }) }else{ wx.showToast({ title: res.err, icon: 'none', duration: 2000 }) } },()=>{ wx.stopPullDownRefresh() wx.hideLoading() }) }, typeEvent(e){ var data = e.currentTarget.dataset; if(data.type == this.data.type){ return } this.setData({ timeObj:{id:1,name:'昨日'}, addTimeObj: {id:7,name:'近7天'}, type:data.type }) this.init() }, closeToast(){ this.setData({ fanTrendTimeFlag:false, zzcFlag:false, video_sort_type_flag:false }) }, getMoveData(){//动态数据 app.func.req('/api/sphClaimInfo/dynamicRangeIndex', 'get', { "user_id": this.data.user_id, "range": this.data.range }, (res) => { if(res && res.errno == 0){ //成功 this.setData({ moveObj: res.rst }) }else if(res.errno!=4003){ wx.showToast({ title: res.err, icon: 'none', duration: 2000 }) } },(err)=>{ this.setData({ videoLoading:false }) wx.hideLoading() }) }, getMoveList(){//动态列表 wx.showLoading({ title: '加载中', }) app.func.req('/api/sphClaimUser/videoIndex', 'get', { "uid": this.data.user_id, "page": this.data.pageMove?this.data.pageMove:1, "page_size": 2, }, (res) => { wx.hideLoading() this.setData({ videoLoading:false }) if(res && res.errno == 0){ //成功 var moveList = [] if(this.data.pageMove==1) { moveList = res.rst.data }else { moveList = this.data.moveList.concat(res.rst.data); } this.setData({ moveList: moveList, pagesMove: res.rst.pageInfo.pages, moveLength: moveList.length>0?moveList.length:-1 }) }else if(res.errno!=4003){ wx.showToast({ title: res.err, icon: 'none', duration: 2000 }) } },(err)=>{ this.setData({ videoLoading:false }) wx.hideLoading() }) }, video_sort_type_click(){ this.setData({ zzcFlag:!this.data.video_sort_type_flag, video_sort_type_flag:!this.data.video_sort_type_flag, }) }, videoSeachInputChange(e){ this.setData({ search_key_word: e.detail.value }) }, goVideoDetail(e){ wx.navigateTo({ url: '/pages/videoDetail/videoDetail?video_id='+e.currentTarget.dataset.item.video_id+'&user_id='+this.data.user_id, }) }, onPageScroll: function(res) {//获取滑动的距离 this.setData({ scrollTop:res.scrollTop }) }, goScrolltop:function(e){//返回顶部 if (wx.pageScrollTo) { wx.pageScrollTo({ scrollTop: 0 }) } else { wx.showModal({ title: '提示', content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。' }) } }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { if(this.data.type==2&&this.data.pageMove { wx.hideLoading() if(res && res.errno == 0){ this.setData({ liveDataObj:res.rst }) }else{ wx.showToast({ title: res.err, icon: 'none', duration: 2000 }) } },()=>{ wx.hideLoading() }) }, getDetail(){ app.func.req('/api/sphClaimInfo/list', 'get', { user_id:this.data.user_id }, (res) => { if(res && res.errno == 0){ this.setData({ detailObj:res.rst.length>0?res.rst[0]:{} }) }else{ wx.showToast({ title: res.err, icon: 'none', duration: 2000 }) } },()=>{ }) }, getLiveList(){ app.func.req('/api/sphClaimUser/liveIndex', 'get', { uid:this.data.user_id, page: this.data.pageLive?this.data.pageLive:1, page_size: 20, sort: 'createTime' }, (res) => { if(res && res.errno == 0){ var liveList = []; if(this.data.pageLive==1) { liveList = res.rst.data }else { liveList = this.data.liveList.concat(res.rst.data); } this.setData({ liveList: liveList, pagesLive: res.rst.pageInfo.pages, liveLength: liveList.length>0?liveList.length:-1 }) }else{ wx.showToast({ title: res.err, icon: 'none', duration: 2000 }) } },()=>{ }) }, claimInit(){ this.setData({authorizeFlag:false}) this.isClaim() }, goClaim(){ if(!this.data.claimFlag||this.data.cookie_status!=1){//去认领 this.setData({authorizeFlag:true}) }else{ // wx.navigateTo({ // url: '/pages/claim/index/index', // }) } }, isClaim(){//判断是否认领 app.func.req('/api/sphClaim/isClaim', 'get', { uid: this.data.user_id }, (res) => { this.setData({claimFlag : res.rst}) if(this.data.claimFlag){ app.func.req('/api/sphClaimInfo/list', 'get', { user_id:this.data.user_id }, (res) => { if(res && res.errno == 0){ if(res.rst.length!=0){ this.setData({ cookie_status:res.rst[0].cookie_status, }) } }else{ wx.showToast({ title: res.err, icon: 'none', duration: 2000 }) } },()=>{ }) } },(err)=>{ }) }, onPullDownRefresh: function () { this.getFollowData() this.init() }, onShareAppMessage: function (res) { return { title:'问星数据【视频号版】最新的视频号分析工具', } } })