492 lines
12 KiB
Vue
492 lines
12 KiB
Vue
<template>
|
||
<view class="pages">
|
||
<u-navbar title="首页" :border-bottom="false" :background="bgc" back-icon-color="#3D3D3D" title-color='#3D3D3D'
|
||
title-size='36' height='44'></u-navbar>
|
||
|
||
<view class="my">
|
||
<view class="mylt">
|
||
<view class="myname">
|
||
{{infoobj.nickName == undefined ?'--' : infoobj.nickName}}
|
||
</view>
|
||
<view class="mytel">
|
||
{{infoobj.phonenumber == undefined ? '--' :infoobj.phonenumber}}
|
||
</view>
|
||
</view>
|
||
<view class="myrt" @click="btnshiming">
|
||
{{infoobj.isReal == true ? '已实名' : '去实名'}}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 余额 -->
|
||
<view class="yue">
|
||
<!-- 背景图 -->
|
||
<image class="bj" src="https://api.ccttiot.com/smartmeter/img/static/uXaoTV3GIW6q0QHcM4De" mode=""></image>
|
||
|
||
<view class="zhye">
|
||
账户余额（元）
|
||
</view>
|
||
<view class="yuan">
|
||
{{infoobj.balance == undefined ? '' : infoobj.balance}}
|
||
</view>
|
||
<view class="leiji">
|
||
<view class="one">
|
||
累计提现：{{infoobj.withDrawlAmount == undefined ? '' : infoobj.withDrawlAmount}}
|
||
</view>
|
||
<view class="two" @click="btntx">
|
||
立即提现
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 订单统计 -->
|
||
<view class="orderhe">
|
||
<view class="order_tit">
|
||
订单统计
|
||
</view>
|
||
<view class="ordertongji">
|
||
<view class="orderday">
|
||
<view class="sj">
|
||
<text @click="btnriq(1)" :class="dateindex == 1 ? 'dateactive' : ''">今日</text>
|
||
<text @click="btnriq(2)" :class="dateindex == 2 ? 'dateactive' : ''">昨日</text>
|
||
<text @click="btnriq(3)" :class="dateindex == 3 ? 'dateactive' : ''">近七日</text>
|
||
<text @click="btnriq(4)" :class="dateindex == 4 ? 'dateactive' : ''">近30日</text>
|
||
</view>
|
||
</view>
|
||
<u-picker mode="time" v-model="show" :params="params" @confirm="confirm"></u-picker>
|
||
<view class="date">
|
||
<text @click="btnks(1)">{{firsTime}}</text> -- <text @click="btnks(2)">{{lasTime}}</text>
|
||
</view>
|
||
<view class="shuju">
|
||
<view class="sjone">
|
||
<view class="je">{{tongobj.billAmount == undefined ? '--' : tongobj.billAmount}}</view>
|
||
<view class="shu">订单总额</view>
|
||
</view>
|
||
<view class="sjone">
|
||
<view class="je">{{tongobj.billCount == undefined ? '--' : tongobj.billCount}}</view>
|
||
<view class="shu">订单总数</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 更多功能 -->
|
||
<view class="gongneng">
|
||
<view class="gongneng_tit">
|
||
更多功能
|
||
</view>
|
||
<view class="gn_list">
|
||
<view class="list_val" @click="btnpage(5)" v-if="infoobj.type == 2">
|
||
<view class="lt">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/umjPUc8nDKf1JwVqRAeb" mode=""></image> <text>套餐管理</text>
|
||
</view>
|
||
<view class="rt">
|
||
<u-icon name="arrow-right" color="#3D3D3D" size="28"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="list_val" @click="btnpage(1)">
|
||
<view class="lt">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/ugRskRdiSlYgPUQRjLF2" mode=""></image> <text>订单管理</text>
|
||
</view>
|
||
<view class="rt">
|
||
<u-icon name="arrow-right" color="#3D3D3D" size="28"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="list_val" @click="btnpage(2)">
|
||
<view class="lt">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uqVEQwsv3PCSKImbVuHU" mode=""></image> <text>财务明细</text>
|
||
</view>
|
||
<view class="rt">
|
||
<u-icon name="arrow-right" color="#3D3D3D" size="28"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="list_val" @click="btnpage(3)">
|
||
<view class="lt">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/utKRJIU6hnonnHjRHDwg" mode=""></image> <text>设备管理</text>
|
||
</view>
|
||
<view class="rt">
|
||
<u-icon name="arrow-right" color="#3D3D3D" size="28"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="list_val" @click="btnpage(4)">
|
||
<view class="lt">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uZTgZyEIQ1NCnGQEboQG" mode=""></image> <text>推广管理</text>
|
||
</view>
|
||
<view class="rt">
|
||
<u-icon name="arrow-right" color="#3D3D3D" size="28"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
// backgroundColor: "#8883f0",
|
||
},
|
||
params: {
|
||
year: true,
|
||
month: true,
|
||
day: true,
|
||
hour: false,
|
||
minute: false,
|
||
second: false
|
||
},
|
||
show: false,
|
||
num: '',
|
||
dateindex: 1,
|
||
firsTime:'',
|
||
lasTime:'',
|
||
infoobj:{},
|
||
tongobj:{}
|
||
}
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
// 分享到好友（会话）
|
||
onShareAppMessage: function() {
|
||
return {
|
||
title: '创亿康',
|
||
path: '/pages/index/index'
|
||
}
|
||
},
|
||
onShow() {
|
||
let today = new Date()
|
||
this.firsTime = this.formatDate(today)
|
||
this.lasTime = this.formatDate(today)
|
||
this.getinfo()
|
||
},
|
||
// 分享到朋友圈
|
||
onShareTimeline: function() {
|
||
return {
|
||
title: '创亿康',
|
||
query: '',
|
||
path: '/pages/index/index'
|
||
}
|
||
},
|
||
methods: {
|
||
// 获取当前用户信息
|
||
getinfo(){
|
||
this.$u.get(`/app/user/userInfo`).then(res => {
|
||
if(res.code == 200){
|
||
this.infoobj = res.data
|
||
this.gettongji()
|
||
}
|
||
})
|
||
},
|
||
// 订单统计
|
||
gettongji(){
|
||
this.$u.get(`/app/dashboard/billCount?userId=${this.infoobj.userId}&startDate=${this.firsTime}&endDate=${this.lasTime}`).then(res => {
|
||
if(res.code == 200){
|
||
this.tongobj = res.data
|
||
}
|
||
})
|
||
},
|
||
|
||
btnpage(num){
|
||
if(num == 1){
|
||
uni.navigateTo({
|
||
url:'/page_user/orderlist'
|
||
})
|
||
}else if(num == 2){
|
||
uni.navigateTo({
|
||
url:'/page_user/caiwu'
|
||
})
|
||
}else if(num == 3){
|
||
uni.navigateTo({
|
||
url:'/page_user/devicelist'
|
||
})
|
||
}else if(num == 4){
|
||
uni.navigateTo({
|
||
url:'/page_user/tuiguang'
|
||
})
|
||
}else if(num == 5){
|
||
uni.navigateTo({
|
||
url:'/page_fenbao/listtaocan'
|
||
})
|
||
}
|
||
},
|
||
// 跳转到实名
|
||
btnshiming(){
|
||
if(this.infoobj.isReal == true){
|
||
uni.showToast({
|
||
title: '已完成实名',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}else{
|
||
uni.navigateTo({
|
||
url:'/page_user/shiming'
|
||
})
|
||
}
|
||
},
|
||
// 跳转到提现
|
||
btntx(){
|
||
uni.navigateTo({
|
||
url:'/page_user/tixian'
|
||
})
|
||
},
|
||
|
||
btnks(num) {
|
||
this.show = true
|
||
if (num == 1) {
|
||
this.num = 1
|
||
} else {
|
||
this.num = 2
|
||
}
|
||
},
|
||
confirm(e) {
|
||
if (this.num == 1) {
|
||
this.firsTime = e.year + '-' + e.month + '-' + e.day
|
||
this.dateindex = 0
|
||
this.gettongji()
|
||
} else {
|
||
this.lasTime = e.year + '-' + e.month + '-' + e.day
|
||
this.dateindex = 0
|
||
this.gettongji()
|
||
}
|
||
},
|
||
btnriq(num) {
|
||
this.dateindex = num
|
||
if (num == 1) {
|
||
let today = new Date();
|
||
this.firsTime = this.formatDate(today)
|
||
this.lasTime = this.formatDate(today)
|
||
this.gettongji()
|
||
} else if (num == 2) {
|
||
let yesterday = new Date()
|
||
yesterday.setDate(yesterday.getDate() - 1)
|
||
this.firsTime = this.formatDate(yesterday)
|
||
this.lasTime = this.formatDate(new Date())
|
||
this.gettongji()
|
||
} else if (num == 3) {
|
||
let today = new Date()
|
||
let firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 6)
|
||
this.firsTime = this.formatDate(firstDayOfMonth)
|
||
this.lasTime = this.formatDate(new Date())
|
||
this.gettongji()
|
||
} else if (num == 4) {
|
||
let today = new Date()
|
||
let firstDayOfLastMonth = new Date(today.getFullYear(), today.getMonth() - 1,today.getDate() + 1)
|
||
let lastDayOfLastMonth = new Date(today.getFullYear(), today.getMonth(), today.getDate())
|
||
this.firsTime = this.formatDate(firstDayOfLastMonth)
|
||
this.lasTime = this.formatDate(lastDayOfLastMonth)
|
||
this.gettongji()
|
||
}
|
||
},
|
||
formatDate(date) {
|
||
let year = date.getFullYear()
|
||
let month = String(date.getMonth() + 1).padStart(2, '0')
|
||
let day = String(date.getDate()).padStart(2, '0')
|
||
return `${year}-${month}-${day}`
|
||
},
|
||
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.dateactive {
|
||
background: #E3E3FF !important;
|
||
color: #3D3D3D !important;
|
||
}
|
||
/deep/ .u-title {
|
||
padding-bottom: 15rpx;
|
||
}
|
||
|
||
/deep/ .u-icon__icon {
|
||
padding-bottom: 15rpx;
|
||
}
|
||
|
||
.pages {
|
||
width: 750rpx;
|
||
padding: 0 46rpx;
|
||
box-sizing: border-box;
|
||
.gongneng{
|
||
margin-top: 20rpx;
|
||
.gongneng_tit{
|
||
font-size: 36rpx;
|
||
color: #3D3D3D;
|
||
font-weight: 600;
|
||
}
|
||
.gn_list{
|
||
width: 658rpx;
|
||
max-height: 420rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
margin-top: 20rpx;
|
||
border-radius: 20rpx;
|
||
.list_val{
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 18rpx 36rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.lt{
|
||
display: flex;
|
||
align-items: center;
|
||
image{
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.orderhe{
|
||
.order_tit{
|
||
font-size: 36rpx;
|
||
color: #3D3D3D;
|
||
margin-top: 20rpx;
|
||
font-weight: 600;
|
||
}
|
||
.ordertongji {
|
||
width: 658rpx;
|
||
height: 332rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
margin-top: 20rpx;
|
||
.shuju {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
margin-top: 24rpx;
|
||
.sjone{
|
||
width: 170rpx;
|
||
margin: auto;
|
||
text-align: center;
|
||
.je{
|
||
font-size: 40rpx;
|
||
color: #3D3D3D;
|
||
font-weight: 600;
|
||
}
|
||
.shu{
|
||
font-size: 20rpx;
|
||
color: #3D3D3D;
|
||
margin-top: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.date {
|
||
padding-left: 80rpx;
|
||
padding-right: 80rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 26rpx;
|
||
text {
|
||
padding: 6rpx 18rpx;
|
||
box-sizing: border-box;
|
||
background: #eee;
|
||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||
font-size: 24rpx;
|
||
color: #808080;
|
||
}
|
||
}
|
||
|
||
.orderday {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
padding: 10rpx 12rpx;
|
||
box-sizing: border-box;
|
||
text {
|
||
margin-right: 10rpx;
|
||
border-radius: 20rpx;
|
||
text-align: center;
|
||
display: inline-block;
|
||
width: 148rpx;
|
||
height: 84rpx;
|
||
text-align: center;
|
||
line-height: 84rpx;
|
||
color: #979797;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.yue{
|
||
position: relative;
|
||
width: 658rpx;
|
||
height: 334rpx;
|
||
margin: auto;
|
||
margin-top: 20rpx;
|
||
padding-top: 34rpx;
|
||
padding-left: 38rpx;
|
||
padding-right: 38rpx;
|
||
box-sizing: border-box;
|
||
.zhye{
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
.yuan{
|
||
font-size: 66rpx;
|
||
color: #FFFFFF;
|
||
font-weight: 600;
|
||
margin-top: 14rpx;
|
||
}
|
||
.leiji{
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
margin-top: 56rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.one{
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
.two{
|
||
width: 182rpx;
|
||
height: 64rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 35rpx 35rpx 35rpx 35rpx;
|
||
font-size: 32rpx;
|
||
color: #8883F0;
|
||
text-align: center;
|
||
line-height: 64rpx;
|
||
border-radius: 30rpx;
|
||
}
|
||
}
|
||
.bj{
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: -1;
|
||
}
|
||
}
|
||
.my{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 20rpx;
|
||
.mylt{
|
||
margin-right: 34rpx;
|
||
.myname{
|
||
font-size: 36rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
.mytel{
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
}
|
||
.myrt{
|
||
width: 138rpx;
|
||
height: 50rpx;
|
||
background: #7E90E7;
|
||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||
text-align: center;
|
||
line-height: 50rpx;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
</style> |