525 lines
12 KiB
Vue
525 lines
12 KiB
Vue
<template>
|
||
<view class="page">
|
||
<!-- 代理首页显示 -->
|
||
<view class="userdaili">
|
||
<u-navbar title="代理首页" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
|
||
height='36'></u-navbar>
|
||
|
||
<view class="zhanghu">
|
||
<view class="zhtitle">
|
||
<text>账户余额（元）</text> <text class="tx" @click="btnnav(9)">提现明细</text>
|
||
</view>
|
||
<view class="zhje">
|
||
<text>1163.916</text> <text class="btntx" @click="btnnav(10)">立即提现</text>
|
||
</view>
|
||
<view class="buc">
|
||
收益提升技巧：加强关注，尽快为缺宝的设备补充充电宝
|
||
</view>
|
||
</view>
|
||
|
||
<view class="dttitle">
|
||
订单统计
|
||
</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="ddje">
|
||
<view class="shu">
|
||
32.5
|
||
</view>
|
||
<view class="sb">
|
||
订单总额
|
||
</view>
|
||
</view>
|
||
<text style="width: 1px;height: 60rpx;background: #979797;margin-top: 24rpx;"></text>
|
||
<view class="ddje">
|
||
<view class="shu">
|
||
9
|
||
</view>
|
||
<view class="sb">
|
||
订单总数
|
||
</view>
|
||
</view>
|
||
<text style="width: 1px;height: 60rpx;background: #979797;margin-top: 24rpx;"></text>
|
||
<view class="ddje">
|
||
<view class="shu">
|
||
0
|
||
</view>
|
||
<view class="sb">
|
||
新增店铺
|
||
</view>
|
||
</view>
|
||
<text style="width: 1px;height: 60rpx;background: #979797;margin-top: 24rpx;"></text>
|
||
<view class="ddje">
|
||
<view class="shu">
|
||
0
|
||
</view>
|
||
<view class="sb">
|
||
新增设备
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="dttitle">
|
||
更多功能
|
||
</view>
|
||
<view class="gongneng">
|
||
<view class="icons" @click="btnnav(1)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uzF1ga4MCbbHR31bxirs" mode=""></image>
|
||
</view>
|
||
<view class="icons" @click="btnnav(2)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/ukmYnCKd7yhDcJ2AuIFk" mode=""></image>
|
||
</view>
|
||
<view class="icons" @click="btnnav(3)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uD92bC1MehbLW7zJEfQv" mode=""></image>
|
||
</view>
|
||
<view class="icons" @click="btnnav(4)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uJbzJa6eZQJXB5duNMCS" mode=""></image>
|
||
</view>
|
||
<view class="icons" @click="btnnav(5)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uncmyIJG3jBulHFD5yFx" mode=""></image>
|
||
</view>
|
||
<!-- <view class="icons" @click="btnnav(6)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uJBvN2bcWx0x9eMGlFJ7" mode=""></image>
|
||
</view> -->
|
||
<view class="icons" @click="btnnav(7)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uWTuwYZaqodiuO5wmcKW" mode=""></image>
|
||
</view>
|
||
<view class="icons" @click="btnnav(8)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/u9QWVWIpUsXIK1Avpt3k" mode=""></image>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
params: {
|
||
year: true,
|
||
month: true,
|
||
day: true,
|
||
hour: false,
|
||
minute: false,
|
||
second: false
|
||
},
|
||
show: false,
|
||
selector: '2024-4-9',
|
||
selectors: '2024-4-9',
|
||
num: '',
|
||
dateindex: 1,
|
||
|
||
firsTime:'',
|
||
lasTime:''
|
||
};
|
||
},
|
||
onLoad() {
|
||
let today = new Date();
|
||
this.firsTime = this.formatDate(today);
|
||
this.lasTime = this.formatDate(today);
|
||
},
|
||
methods: {
|
||
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
|
||
} else {
|
||
this.lasTime = e.year + '-' + e.month + '-' + e.day
|
||
}
|
||
},
|
||
|
||
btnnav(num) {
|
||
if (num == 1) {
|
||
uni.navigateTo({
|
||
url: '/pages/agentpages/devicemanagement/index'
|
||
})
|
||
} else if (num == 2) {
|
||
uni.navigateTo({
|
||
url: '/pages/agentpages/shopguanli/index'
|
||
})
|
||
} else if (num == 3) {
|
||
uni.navigateTo({
|
||
url: '/page_user/yunying/index'
|
||
})
|
||
} else if (num == 4) {
|
||
uni.navigateTo({
|
||
url: '/page_user/daili/index'
|
||
})
|
||
} else if (num == 5) {
|
||
uni.navigateTo({
|
||
url: '/page_user/order/index'
|
||
})
|
||
} else if (num == 6) {
|
||
uni.navigateTo({
|
||
url: '/pages/agentpages/shopguanli/member/index'
|
||
})
|
||
} else if (num == 7) {
|
||
uni.navigateTo({
|
||
url:'/page_user/shuju/index'
|
||
})
|
||
} else if (num == 8) {
|
||
uni.navigateTo({
|
||
url: '/pages/agentpages/user/index'
|
||
})
|
||
} else if (num == 9) {
|
||
uni.navigateTo({
|
||
url: '/pages/detail/index'
|
||
})
|
||
} else if (num == 10) {
|
||
uni.navigateTo({
|
||
url: '/pages/detail/immediately/index'
|
||
})
|
||
}
|
||
},
|
||
// let today = new Date();
|
||
// // 获取七天前的日期
|
||
// // 格式化日期为 yyyy-MM-dd
|
||
// this.firsTime = this.formatDate(today);
|
||
// this.lasTime = this.formatDate(today);
|
||
btnriq(num) {
|
||
this.dateindex = num
|
||
if (num == 1) {
|
||
let today = new Date();
|
||
this.firsTime = this.formatDate(today);
|
||
this.lasTime = this.formatDate(today);
|
||
// this.operatingData()
|
||
} 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.operatingData()
|
||
} 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.operatingData()
|
||
} 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.operatingData()
|
||
}
|
||
},
|
||
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}`;
|
||
},
|
||
|
||
|
||
|
||
},
|
||
mounted() {
|
||
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
/deep/ .map {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.dateactive {
|
||
background: #E1F3ED;
|
||
}
|
||
|
||
page {
|
||
// background-color: ;
|
||
background: linear-gradient(180deg, #25CE88 0%, rgba(255, 255, 255, 0) 100%);
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.page {
|
||
width: 750rpx;
|
||
padding-left: 34rpx;
|
||
padding-right: 34rpx;
|
||
box-sizing: border-box;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
|
||
// 代理样式
|
||
.userdaili {
|
||
.gongneng {
|
||
width: 680rpx;
|
||
height: 304rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
padding: 0 50rpx;
|
||
box-sizing: border-box;
|
||
|
||
.icons {
|
||
display: inline-block;
|
||
width: 145rpx;
|
||
text-align: center;
|
||
|
||
image {
|
||
margin-top: 34rpx;
|
||
width: 50px;
|
||
height: 50px;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.ordertongji {
|
||
width: 680rpx;
|
||
height: 342rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
|
||
.shuju {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 40rpx;
|
||
box-sizing: border-box;
|
||
margin-top: 24rpx;
|
||
|
||
.ddje {
|
||
text-align: center;
|
||
|
||
.shu {
|
||
font-weight: 500;
|
||
font-size: 40rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.sb {
|
||
margin-top: 20rpx;
|
||
font-weight: 500;
|
||
font-size: 20rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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;
|
||
// background: #E1F3ED;
|
||
text-align: center;
|
||
line-height: 84rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.dttitle {
|
||
margin: 36rpx 0;
|
||
font-weight: 500;
|
||
font-size: 36rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.zhanghu {
|
||
margin-top: 32rpx;
|
||
width: 680rpx;
|
||
height: 264rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
padding: 36rpx 38rpx;
|
||
box-sizing: border-box;
|
||
|
||
.zhtitle {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.sj {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
text {
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
}
|
||
|
||
.tx {
|
||
font-size: 24rpx;
|
||
color: #27D089;
|
||
}
|
||
}
|
||
|
||
.zhje {
|
||
margin-top: 20rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid #ccc;
|
||
padding-bottom: 20rpx;
|
||
|
||
text {
|
||
font-weight: 500;
|
||
font-size: 48rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.btntx {
|
||
width: 156rpx;
|
||
height: 42rpx;
|
||
background: linear-gradient(270deg, #54DAA1 0%, #19CD82 100%);
|
||
border-radius: 40rpx 40rpx 40rpx 40rpx;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
line-height: 42rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
|
||
.buc {
|
||
margin-top: 20rpx;
|
||
font-size: 24rpx;
|
||
color: #979797;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
//样式结束
|
||
.title {
|
||
font-weight: 500;
|
||
font-size: 36rpx;
|
||
color: #3D3D3D;
|
||
line-height: 50rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
|
||
.guangg {
|
||
image {
|
||
width: 680rpx;
|
||
height: 238rpx;
|
||
}
|
||
}
|
||
|
||
.saoma {
|
||
width: 750rpx;
|
||
height: 186rpx;
|
||
background: #FFFFFF;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
padding-top: 38rpx;
|
||
border-radius: 54rpx 54rpx 0 0;
|
||
|
||
view {
|
||
text-align: center;
|
||
width: 676rpx;
|
||
height: 102rpx;
|
||
background: linear-gradient(270deg, #54DAA1 0%, #19CD82 100%);
|
||
border-radius: 54rpx 54rpx 54rpx 54rpx;
|
||
font-weight: 500;
|
||
font-size: 40rpx;
|
||
color: #FFFFFF;
|
||
margin: auto;
|
||
line-height: 102rpx;
|
||
}
|
||
|
||
image {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
vertical-align: middle;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
|
||
.ditu {
|
||
width: 100%;
|
||
height: 964rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 38rpx 38rpx 38rpx 38rpx;
|
||
margin-top: 34rpx;
|
||
padding-top: 16rpx;
|
||
|
||
.dtxs {
|
||
width: 642rpx;
|
||
height: 812rpx;
|
||
// background-color: red;
|
||
margin: auto;
|
||
}
|
||
|
||
.tubiao {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 50rpx;
|
||
box-sizing: border-box;
|
||
padding-top: 20rpx;
|
||
padding-bottom: 24rpx;
|
||
|
||
.gr {
|
||
text-align: center;
|
||
width: 100%;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
|
||
image {
|
||
display: block;
|
||
margin: auto;
|
||
margin-bottom: 14rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |