powerbank/pages/agentpages/index/index.vue

474 lines
9.7 KiB
Vue
Raw Normal View History

2024-05-11 10:57:53 +08:00
<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)">{{selector}}</text> -- <text @click="btnks(2)">{{selectors}}</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="../../../static/image/sbgl.png" mode=""></image>
</view>
<view class="icons" @click="btnnav(2)">
<image src="../../../static/image/dpgl.png" mode=""></image>
</view>
<view class="icons" @click="btnnav(3)">
<image src="../../../static/image/yygl.png" mode=""></image>
</view>
<view class="icons" @click="btnnav(4)">
<image src="../../../static/image/dlgl.png" mode=""></image>
</view>
<view class="icons" @click="btnnav(5)">
<image src="../../../static/image/ddgl.png" mode=""></image>
</view>
<view class="icons" @click="btnnav(6)">
<image src="../../../static/image/hydp.png" mode=""></image>
</view>
<view class="icons" @click="btnnav(7)">
<image src="../../../static/image/sjfx.png" mode=""></image>
</view>
<view class="icons" @click="btnnav(8)">
<image src="../../../static/image/a1.png" 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,
};
},
methods: {
btnriq(num) {
this.dateindex = num
},
btnks(num) {
this.show = true
if (num == 1) {
this.num = 1
} else {
this.num = 2
}
},
confirm(e) {
if (this.num == 1) {
this.selector = e.year + '-' + e.month + '-' + e.day
} else {
this.selectors = 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) {
2024-05-11 17:51:06 +08:00
uni.navigateTo({
url:'/page_user/yunying/index'
})
2024-05-11 10:57:53 +08:00
} else if (num == 4) {
2024-05-13 18:03:07 +08:00
uni.navigateTo({
url:'/page_user/daili/index'
})
2024-05-11 10:57:53 +08:00
} else if (num == 5) {
} else if (num == 6) {
} else if (num == 7) {
} 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'
})
}
},
},
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>