Files
sykl-sm/pages/user/census.vue

281 lines
6.2 KiB
Vue

<template>
<view class="content">
<view class="back">
<view class="back-title">
锶源昆仑统计数据
</view>
</view>
<view class="parade">
<view class="dataOne">
<view class="dataOne-item">
<view class="dataOne-number">
{{activities.all}}
</view>
<view class="dataOne-text">
发行总量
</view>
</view>
<view class="dataOne-item">
<view class="dataOne-number">
{{activities.donate}}
</view>
<view class="dataOne-text">
已捐数量
</view>
</view>
<view class="dataOne-item">
<view class="dataOne-number">
{{activities.residue}}
</view>
<view class="dataOne-text">
剩余数量
</view>
</view>
</view>
<!-- 订单数据 -->
<view class="dataOther">
<view class="dataOther-title">
订单数据
</view>
<view class="dataOther-list">
<view class="dataOther-item" @click="$router.push({name: 'CensusOrder', params: {state: 'all', newTitle: '总订单'}})">
<view class="dataOther-number">
{{orders.all}}
</view>
<view class="dataOther-text">
总订单数
</view>
<view class="dataOther-see">
查看
</view>
</view>
<view class="dataOther-item" @click="$router.push({name: 'CensusOrder', params: {state: ' PAID', newTitle: '待发货'}})">
<view class="dataOther-number">
{{orders.paid}}
</view>
<view class="dataOther-text">
待发货数
</view>
<view class="dataOther-see">
查看
</view>
</view>
<view class="dataOther-item" @click="$router.push({name: 'CensusOrder', params: {state: 'DELIVERED', newTitle: '已发货'}})">
<view class="dataOther-number">
{{orders.delivered}}
</view>
<view class="dataOther-text">
已发货
</view>
<view class="dataOther-see">
查看
</view>
</view>
<view class="dataOther-item" @click="$router.push({name: 'CensusOrder', params: {state: 'SIGNED', newTitle: '已签收'}})">
<view class="dataOther-number">
{{orders.signed}}
</view>
<view class="dataOther-text">
已签收
</view>
<view class="dataOther-see">
查看
</view>
</view>
<view class="dataOther-item" @click="$router.push({name: 'CensusUser'})">
<view class="dataOther-number">
{{orders.users}}
</view>
<view class="dataOther-text">
捐献人数
</view>
<view class="dataOther-see dataOther-red">
查看
</view>
</view>
<view class="dataOther-item">
<view class="dataOther-number">
{{orders.amount}}
</view>
<view class="dataOther-text">
收款总额
</view>
</view>
</view>
</view>
<!-- 会员数据 -->
<!-- <view class="dataOther">
<view class="dataOther-title">
会员数据
</view>
<view class="dataOther-list">
<view class="dataOther-item">
<view class="dataOther-number">
{{users.all}}
</view>
<view class="dataOther-text">
注册总量
</view>
</view>
<view class="dataOther-item">
<view class="dataOther-number">
{{users.yk}}
</view>
<view class="dataOther-text">
月卡数
</view>
</view>
<view class="dataOther-item">
<view class="dataOther-number">
{{users.jk}}
</view>
<view class="dataOther-text">
季卡数
</view>
</view>
<view class="dataOther-item">
<view class="dataOther-number">
{{users.nk}}
</view>
<view class="dataOther-text">
年卡数
</view>
</view>
</view>
</view> -->
</view>
</view>
</template>
<script>
import { censusData } from '@/apis/interfaces/user'
export default {
data() {
return {
activities: '',
orders : '',
users : ''
};
},
onShow() {
// 获取查看数据
this.censusInfo();
},
methods:{
// 查看数据
censusInfo() {
censusData().then(res => {
this.activities = res.activities
this.orders = res.orders
this.users = res.users
console.log(res)
}).catch(err => {
uni.showToast({
title: err.message,
icon: "none"
})
})
},
}
}
</script>
<style lang="scss" scoped>
.content {
overflow: hidden;
background-color: #f5f5f5;
height: 100vh;
overflow-y: scroll;
padding-bottom: 30rpx;
box-sizing: border-box;
}
.back {
background-image: linear-gradient(to right, #6884fc, #868afe);
text-align: center;
padding: 80rpx 0 140rpx;
.back-title {
color: #ffffff;
font-size: 34rpx;
}
}
.parade {
margin-top: -70rpx;
padding: 0 30rpx;
box-sizing: border-box;
.dataOne {
background-color: #ffffff;
padding: 40rpx 0;
box-sizing: border-box;
display: flex;
.dataOne-item {
flex: 3;
text-align: center;
.dataOne-number {
font-size: 40rpx;
font-weight: 600;
margin-top: 5rpx;
}
.dataOne-text {
font-size: 24rpx;
}
}
}
.dataOther {
background-color: #ffffff;
margin-top: 30rpx;
padding: 30rpx 30rpx 0;
.dataOther-title {
font-weight: 600;
margin-bottom: 20rpx;
}
.dataOther-list {
overflow: hidden;
padding: 20rpx 0;
margin: 0 -10rpx;
.dataOther-item {
background-color: #f4f7fd;
width: calc(33.33% - 20rpx);
margin: 0 10rpx 20rpx;
padding: 25rpx 0;
text-align: center;
border-radius: 8rpx;
float: left;
position: relative;
overflow: hidden;
.dataOther-see {
position: absolute;
right: 0;
top: 0;
background-color: #f0bb6e;
color: #ffffff;
font-size: 22rpx;
padding: 0 12rpx;
line-height: 34rpx;
border-radius: 0 0 0 10rpx;
&.dataOther-red {
background-color: #d86a6b;
}
}
.dataOther-text {
font-size: 24rpx;
color: #383c4b;
margin-top: 5rpx;
}
.dataOther-number {
color: #315cf4;
font-weight: 600;
font-size: 38rpx;
text {
font-size: 24rpx;
}
}
}
}
}
}
</style>