You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
626 lines
15 KiB
626 lines
15 KiB
<template>
|
|
<view class="homePage">
|
|
<view class="nav_area dis-flex-between-center">
|
|
<view class="left-btn" @click="toUrl('login')" v-html="(!isLogin&&userType=='user')?'请登录':''"
|
|
:class="(!isLogin&&userType=='user')?'haveIcon':''"></view>
|
|
<view class="" style="font-size: 18px;color: #101010;" v-html="userType=='user'?'顶呱刮':'顶呱刮-总平台'"></view>
|
|
<view class="right-btn" @click="changeAudio" v-html="userType=='user'?'音乐':''"
|
|
:class="(userType=='user'&&!isPlay)?'playIcon':(userType=='user'&&isPlay)?'pauseIcon':''">
|
|
<!-- <audio src="../../static/audio/pd-5b7671cee8051387.mp3" poster="" name="" author="" action="" controls></audio> -->
|
|
</view>
|
|
</view>
|
|
<view class="home_1" v-if="userType=='user'">
|
|
<view class="banner_area">
|
|
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
|
|
<swiper-item v-for="(item, index) in bannerList" :key="index">
|
|
<image :src="item.image" mode=""></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
</view>
|
|
<view class="" style="color: #b0b0b0;font-size: 14px;height: 30px;line-height: 14px;">
|
|
公告：<text style="color: #101010;">关于中奖概率调整问题</text>
|
|
</view>
|
|
<view class="dis-flex goods_area">
|
|
<view v-for="(item,index) in goodsList" :key="index" class="goods_item">
|
|
<view class="" @click="toUrl(item)">
|
|
{{item.title}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="list_area">
|
|
<view class="list_title">中奖记录</view>
|
|
<view class="dis-flex-between-center t-h">
|
|
<view class="">ID</view>
|
|
<view class="">手机号码</view>
|
|
<view class="">中奖金额</view>
|
|
</view>
|
|
<view v-for="(item,index) in recordsList" :key="index" class="t-d dis-flex-between-center">
|
|
<view class="">{{item.user_id}}</view>
|
|
<view class="">{{item.phone}}</view>
|
|
<view class="black"><text class="red">{{item.awards_amount}}</text>元</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="home_2" v-if="userType=='background'">
|
|
<view class="">
|
|
<view class="title">
|
|
待办<text style="color: #999;font-size: 12px;">（更新于：{{needInfo.update_time}}）</text>
|
|
</view>
|
|
<view class="card">
|
|
<view class="">{{needInfo.down_scores_quota.title}}</view>
|
|
<view class="t2">{{needInfo.down_scores_quota.quota}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="">
|
|
<view class="title">
|
|
用户统计
|
|
</view>
|
|
<view class="pie_area">
|
|
<view class="pie_box" id="piechart">
|
|
|
|
</view>
|
|
<view class="right">
|
|
<view class="right1">
|
|
<view class="">
|
|
<view class="label" style="font-size: 12px;">代理人数</view>
|
|
<view class="" style="font-weight: bold;padding-left: 20px;">{{userStatistics.agent.num}}</view>
|
|
</view>
|
|
<view class="" style="font-weight: bold;">{{userStatistics.agent.rate}}</view>
|
|
</view>
|
|
<view class="right1">
|
|
<view class="">
|
|
<view class="label" style="font-size: 12px;">用户人数</view>
|
|
<view class="" style="font-weight: bold;padding-left: 20px;">{{userStatistics.user.num}}</view>
|
|
</view>
|
|
<view class="" style="font-weight: bold;">{{userStatistics.user.rate}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="">
|
|
<view class="title">
|
|
上下分数据
|
|
</view>
|
|
<view class="chart_tab">
|
|
<view class="item" @click="changeChartIndex(1)" :class="chartIndex==1?'active':''">上分统计</view>
|
|
<view class="item" @click="changeChartIndex(2)" :class="chartIndex==2?'active':''">下分数据</view>
|
|
</view>
|
|
<view class="chart_area">
|
|
<view class="chart">
|
|
<view class="" style="color: #999;font-size: 14px;">
|
|
{{ chartIndex==1?'上分总数':'下分总数' }}：<text style="color: #101010;">{{ UpDownSta.sum_value }}</text>
|
|
</view>
|
|
<view class="" id="mychart" style="width: 670rpx;height: 250px;"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
import API from '@/common/js/api.js'
|
|
// import updateTabBar from '@/common/js/updateTabBar.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
userType: 'background',//user|agent|background
|
|
bannerList: [],
|
|
goodsList: [],
|
|
recordsList: [1,2,3,4,5,6],
|
|
chartIndex: 1,//1上分2下分
|
|
myChart: null,
|
|
pieChart: null,
|
|
innerAudioContext: null,
|
|
isPlay: false,
|
|
nomore: false,
|
|
page: 1,
|
|
needInfo: {
|
|
update_time: '2023/08/30 19:00',
|
|
down_scores_quota: {
|
|
title: '待下分额度',
|
|
quota: '10010.00'
|
|
}
|
|
},
|
|
userStatistics: {
|
|
agent: {
|
|
num: '7',
|
|
rate: '36.84%'
|
|
},
|
|
user: {
|
|
num: '12',
|
|
rate: '63.16%'
|
|
},
|
|
sum: {
|
|
num: "19人" //总人数
|
|
}
|
|
},
|
|
UpDownSta: {
|
|
"histogram": [
|
|
{"date": "09", //月份
|
|
"value": "20.00" //数据
|
|
},
|
|
], //柱状图
|
|
"sum_value": "20.00" ,//总数据,
|
|
xData: ['1月', '2月', '3月', '4月', '5月'],
|
|
data: [155, 250, 360, 100, 180, 204]
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
isLogin(){
|
|
return uni.getStorageSync('user_token');
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getAwardRecords();
|
|
|
|
},
|
|
created() {
|
|
this.userType = uni.getStorageSync('userType');
|
|
|
|
if(this.userType=='user'){
|
|
this.getZoneList();
|
|
this.getRotationChart();
|
|
}
|
|
if(this.userType=='background'){
|
|
this.getNeedSta();
|
|
this.getUserSta();
|
|
this.getUpDownSta();
|
|
}
|
|
},
|
|
mounted() {
|
|
if(this.userType=='user'){
|
|
this.innerAudioContext = uni.createInnerAudioContext();
|
|
this.innerAudioContext.autoplay = false;
|
|
this.innerAudioContext.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3';
|
|
this.innerAudioContext.onPlay(() => {
|
|
console.log('开始播放');
|
|
});
|
|
this.innerAudioContext.onPause(() => {
|
|
console.log('暂停播放');
|
|
});
|
|
this.innerAudioContext.onError((res) => {
|
|
console.log(res.errMsg);
|
|
console.log(res.errCode);
|
|
});
|
|
}
|
|
|
|
if(this.userType=='background'){
|
|
this.pieChart = echarts.init(document.getElementById('piechart'));
|
|
this.myChart = echarts.init(document.getElementById('mychart'));
|
|
setTimeout(()=>{
|
|
this.renderPie();
|
|
this.renderChart();
|
|
}, 200)
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
toUrl(item){
|
|
if(item=='login'){
|
|
uni.navigateTo({
|
|
url: '/uni_modules/uni-id-pages/pages/login/login-withpwd'
|
|
})
|
|
}else if(item=='login'){
|
|
|
|
}else if(item=='login'){
|
|
|
|
}else{
|
|
uni.navigateTo({
|
|
url:'/pages/goodslist/goodslist?type='+item.title+'&id='+item.id
|
|
})
|
|
}
|
|
|
|
},
|
|
changeChartIndex(type){
|
|
this.chartIndex = type;
|
|
this.getUpDownSta(type);
|
|
setTimeout(()=>{
|
|
this.myChart.clear();
|
|
this.renderChart();
|
|
}, 200)
|
|
},
|
|
renderChart(){
|
|
let yMax = ([...this.UpDownSta.data].sort())[this.UpDownSta.data.length-1];
|
|
let interval = yMax / 5;
|
|
// yMax = interval*6;
|
|
let option = {
|
|
color: ['#5087EC','#74C0C8'],
|
|
// title: {
|
|
// text: '上分总数：',
|
|
// textStyle: {
|
|
// color: '#999',
|
|
// fontSize: 14,
|
|
// fontWeight: 'normal'
|
|
// }
|
|
// },
|
|
grid: {
|
|
top: '12%',
|
|
bottom: '12%'
|
|
},
|
|
tooltip: {},
|
|
xAxis: {
|
|
data: this.UpDownSta.xData,
|
|
|
|
},
|
|
yAxis: [{
|
|
min: 0,
|
|
max: yMax,
|
|
interval: interval
|
|
},
|
|
{
|
|
min: 0,
|
|
max: yMax,
|
|
interval: interval
|
|
}],
|
|
series: [
|
|
{
|
|
name: '',
|
|
type: 'bar',
|
|
barMaxWidth: 30,
|
|
data: this.UpDownSta.data
|
|
},
|
|
{
|
|
name: '',
|
|
type: 'line',
|
|
// data: [175, 180, 410, 208, 195, 330],
|
|
data: this.UpDownSta.data,
|
|
yAxisIndex: 1
|
|
}
|
|
]
|
|
};
|
|
|
|
this.myChart.setOption(option);
|
|
},
|
|
renderPie(){
|
|
let option = {
|
|
color: ['#678CFD', '#22c18b'],
|
|
series: [
|
|
{
|
|
name: '',
|
|
type: 'pie',
|
|
radius: ['68%', '98%'],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 4,
|
|
borderColor: '#fff',
|
|
borderWidth: 0
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: 40,
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: [
|
|
{ value: this.userStatistics.agent.num, name: 'Search Engine' },
|
|
{ value: this.userStatistics.user.num, name: 'Direct' }
|
|
]
|
|
}
|
|
]
|
|
};
|
|
|
|
this.pieChart.setOption(option);
|
|
},
|
|
changeAudio(){
|
|
if(this.userType!=='user') return;
|
|
if(this.isPlay){
|
|
this.isPlay = false;
|
|
this.innerAudioContext.pause();
|
|
}else{
|
|
this.isPlay = true;
|
|
this.innerAudioContext.play();
|
|
}
|
|
},
|
|
|
|
/*轮播图*/
|
|
getRotationChart(){
|
|
API.getRotationChart({
|
|
page:1, limit: 10
|
|
}, res=>{
|
|
this.bannerList = res.data.list;
|
|
})
|
|
},
|
|
/*专区*/
|
|
getZoneList(){
|
|
API.getZoneList({}, res=>{
|
|
this.goodsList = res.data;
|
|
})
|
|
},
|
|
/*记录*/
|
|
getAwardRecords(page=1, limit=20){
|
|
API.getAwardRecords({
|
|
page:page, limit: limit
|
|
}, res=>{
|
|
this.recordsList = res.data.list;
|
|
if(res.data.list.length<10){
|
|
this.nomore = true;
|
|
}
|
|
})
|
|
},
|
|
/*总后台待办*/
|
|
getNeedSta(){
|
|
API.request('/adminStatistics/needStatistics', {}, res=>{
|
|
this.needInfo = res.data;
|
|
})
|
|
},
|
|
/*总后台用户统计*/
|
|
getUserSta(){
|
|
API.request('/adminStatistics/userStatistics', {}, res=>{
|
|
this.userStatistics = res.data;
|
|
})
|
|
},
|
|
/*总后台上下分统计数据*/
|
|
getUpDownSta(type=1){
|
|
API.request('/adminStatistics/upAndDownStatistics', {type: type}, res=>{
|
|
this.UpDownSta = res.data;
|
|
this.UpDownSta.xData = this.UpDownSta.histogram.map(item=>{
|
|
return item.date;
|
|
})
|
|
this.UpDownSta.data = this.UpDownSta.histogram.map(item=>{
|
|
return item.value;
|
|
})
|
|
})
|
|
}
|
|
|
|
|
|
},
|
|
onReachBottom() {
|
|
if(!this.nomore){
|
|
this.page++;
|
|
this.getAwardRecords(this.page, 10);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.dis-flex{
|
|
display: flex;
|
|
}
|
|
.dis-flex-between-center{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.homePage{
|
|
padding: 90rpx 12.5px 50px;
|
|
}
|
|
.nav_area {
|
|
position: fixed;
|
|
top: 0px;
|
|
left: 0px;
|
|
z-index: 99;
|
|
background-color: #fff;
|
|
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
|
|
width: 700rpx;
|
|
height: 88rpx;
|
|
padding: 0px 25rpx;
|
|
padding-top: var(--status-bar-height);
|
|
box-sizing: content-box;
|
|
color: #b0b0b0;
|
|
font-size: 14px;
|
|
|
|
.left-btn{
|
|
flex: 0.3;
|
|
height: 48rpx;
|
|
line-height: 48rpx;
|
|
|
|
&.haveIcon::before{
|
|
content: '';
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
display: inline-block;
|
|
background-image: url("../../static/home/iconPark-me@2x.png");
|
|
background-size: contain;
|
|
vertical-align: middle;
|
|
margin-right: 10rpx;
|
|
margin-top: -2px;
|
|
}
|
|
}
|
|
.right-btn{
|
|
flex: 0.3;
|
|
text-align: right;
|
|
height: 48rpx;
|
|
line-height: 48rpx;
|
|
|
|
&.playIcon::after{
|
|
content: '';
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
display: inline-block;
|
|
background-image: url("../../static/home/md-volume_off@2x.png");
|
|
background-size: contain;
|
|
vertical-align: middle;
|
|
margin-left: 10rpx;
|
|
margin-top: -2px;
|
|
}
|
|
&.pauseIcon::after{
|
|
content: '';
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
display: inline-block;
|
|
background-image: url("../../static/home/md-volume_up@2x.png");
|
|
background-size: contain;
|
|
vertical-align: middle;
|
|
margin-left: 10rpx;
|
|
margin-top: -2px;
|
|
}
|
|
}
|
|
}
|
|
.home_1{
|
|
.banner_area{
|
|
padding: 20px 0px;
|
|
swiper{
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
}
|
|
image{
|
|
width: 700rpx;
|
|
height: 300rpx;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
.goods_area{
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
|
|
.goods_item{
|
|
width: 107px;
|
|
height: 54px;
|
|
border: 1px solid #FAAB0E;
|
|
border-radius: 10px;
|
|
margin-bottom: 20px;
|
|
color: #FAAB0E;
|
|
font-size: 14px;
|
|
line-height: 54px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.list_area{
|
|
font-size: 14px;
|
|
|
|
.list_title{
|
|
font-size: 16px;
|
|
color: #101010;
|
|
font-weight: bold;
|
|
height: 30px;
|
|
}
|
|
.t-h{
|
|
color: #cecece;
|
|
height: 30px;
|
|
}
|
|
.t-d{
|
|
color: #999;
|
|
height: 30px;
|
|
}
|
|
.red{
|
|
color: #e50000;
|
|
}
|
|
.black{
|
|
color: #101010;
|
|
}
|
|
}
|
|
|
|
}
|
|
.home_2{
|
|
padding: 20px 7.5px;
|
|
.title{
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 18px;
|
|
color: #101010;
|
|
font-weight: bold;
|
|
}
|
|
.card{
|
|
width: 670rpx;
|
|
height: 160rpx;
|
|
border-radius: 10px;
|
|
background-image: linear-gradient(to right, #B2E6FF, #57ACFF);
|
|
margin: 10px auto 20px;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
box-sizing: border-box;
|
|
padding: 30rpx 20rpx;
|
|
|
|
.t2{
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
.pie_area{
|
|
display: flex;
|
|
.pie_box{
|
|
width: 332rpx;height: 332rpx;
|
|
margin: 0px 20rpx 20rpx -20rpx;
|
|
box-sizing: border-box;
|
|
border: 10px solid #fff;
|
|
}
|
|
.right{
|
|
padding-top: 40rpx;
|
|
}
|
|
.right1{
|
|
width: 304rpx;
|
|
height: 86rpx;
|
|
border-radius: 5px;
|
|
background-color: #fafaff;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10rpx 20rpx;
|
|
margin-bottom: 20rpx;
|
|
font-size: 14px;
|
|
}
|
|
.label{
|
|
padding-left: 20px;
|
|
position: relative;
|
|
margin-bottom: 3px;
|
|
}
|
|
.right1:nth-of-type(1) .label::before{
|
|
content: '';
|
|
display: inline-block;
|
|
width: 24rpx;height: 24rpx;
|
|
border-radius: 2px;
|
|
background-color: #22c18b;
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 0px;
|
|
}
|
|
.right1:nth-of-type(2) .label::before{
|
|
content: '';
|
|
display: inline-block;
|
|
width: 24rpx;height: 24rpx;
|
|
border-radius: 2px;
|
|
background-color: #678CFD;
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 0px;
|
|
}
|
|
}
|
|
|
|
.chart_tab{
|
|
width: 380rpx;
|
|
height: 160rpx;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
background-color: #fafaff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
margin-top: 20rpx;
|
|
margin-bottom: 30rpx;
|
|
|
|
.item{
|
|
width: 160rpx;
|
|
height: 120rpx;
|
|
text-align: center;
|
|
line-height: 120rpx;
|
|
color: #101010;
|
|
font-size: 14px;
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
}
|
|
.item.active{
|
|
color: #678CFD;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.chart_area{
|
|
|
|
}
|
|
}
|
|
</style>
|
|
|