360 lines
6.7 KiB
Vue
360 lines
6.7 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="headBox flex-center">
|
||
<u-icon name="search" color="#333333" size="28" style="margin-right: 19rpx;"></u-icon>
|
||
<input v-model="order_num" type="text" class="flex1" placeholder="请输入要查询的订单号" />
|
||
<view class="searchBtn" @click="searchList">搜索</view>
|
||
</view>
|
||
<view class="moduleBox">
|
||
<view class="monthBox" @click="showDate = true">
|
||
<view class="text1">{{nowYear}}</view>
|
||
<text class="text2">年</text>
|
||
<view class="text1">{{nowMonth}}</view>
|
||
<text class="text2">月</text>
|
||
<u-icon class="text3" name="arrow-down-fill" color="#333333" size="12" style="margin-right: 19rpx;"></u-icon>
|
||
</view>
|
||
<view class="recordBox">
|
||
<view class="leftBox flex-center">
|
||
<text>充值</text>
|
||
<view class="priceBox">+{{statisticsObj.total_income}}</view>
|
||
</view>
|
||
<view class="leftBox flex-center" style="margin-left: 113rpx;">
|
||
<text>支出</text>
|
||
<view class="priceBox">-{{statisticsObj.total_expense}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="moduleBox" v-for="item in priceList">
|
||
<view class="text4">订单号：{{item.order_no}}</view>
|
||
<view class="flex-between">
|
||
<view class="centerBox">
|
||
<view class="text5">{{item.type_text}}</view>
|
||
<view class="text6">{{item.createtime_text}}</view>
|
||
</view>
|
||
<view class="bottomBox">
|
||
<view class="text7">{{item.money}}</view>
|
||
<view class="text8">{{item.status_text}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex-center noMore" v-show="page==lastPage">没有更多了</view>
|
||
<u-datetime-picker
|
||
:show="showDate"
|
||
v-model="nowDate"
|
||
mode="year-month"
|
||
@confirm="confirmDate"
|
||
@cancel="showDate=false"
|
||
></u-datetime-picker>
|
||
<!-- <u-button @click="showDate = true">打开</u-button> -->
|
||
</view>
|
||
</template>
|
||
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
page: 1,
|
||
limit: 10,
|
||
priceList: [],
|
||
statisticsObj: {},
|
||
showDate: false,
|
||
nowDate: Number(new Date()),
|
||
nowYear: '',
|
||
nowMonth: '',
|
||
lastPage: '',
|
||
order_num: ''
|
||
}
|
||
},
|
||
components:{
|
||
},
|
||
onLoad() {
|
||
this.confirmDate({mode:1})
|
||
this.getPriceList()
|
||
this.statistics()
|
||
},
|
||
onShow() {
|
||
|
||
},
|
||
onReachBottom (){
|
||
console.log('触底')
|
||
if(this.page<this.lastPage){
|
||
this.page++
|
||
this.getPriceList()
|
||
}
|
||
},
|
||
methods: {
|
||
searchList(){
|
||
this.priceList = [];
|
||
this.getPriceList()
|
||
},
|
||
confirmDate(val){
|
||
console.log(val)
|
||
let date = {}
|
||
if(val.mode == 1){
|
||
date = new Date();
|
||
}else{
|
||
date = new Date(val.value);
|
||
}
|
||
this.nowDate = Number(date);
|
||
this.nowYear = date.getFullYear();
|
||
this.nowMonth = date.getMonth() + 1; // 月份是从0开始的，所以要加1
|
||
this.showDate = false
|
||
this.getPriceList();
|
||
},
|
||
getPriceList(){
|
||
var _this = this;
|
||
_this.$api.priceList({
|
||
year: this.nowYear,
|
||
month: this.nowMonth,
|
||
order_num: this.order_num,
|
||
page: this.page,
|
||
limit: this.limit
|
||
},res=>{
|
||
if(res.code == '1'){
|
||
this.priceList = res.data.list
|
||
this.lastPage = Math.ceil(res.data.total/this.limit)
|
||
}else{
|
||
}
|
||
})
|
||
},
|
||
statistics(){
|
||
var _this = this;
|
||
_this.$api.statistics({
|
||
year: this.nowYear,
|
||
month: this.nowMonth
|
||
},res=>{
|
||
if(res.code == '1'){
|
||
this.statisticsObj = res.data
|
||
}else{
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page{
|
||
height: 100%;
|
||
}
|
||
.content{
|
||
padding: 0rpx 0rpx;
|
||
background: #F5F5FA;
|
||
height: 100%;
|
||
}
|
||
.headBox{
|
||
width: 100%;
|
||
background: #fff;
|
||
height: 80rpx;
|
||
padding-left: 32rpx;
|
||
padding-right: 32rpx;
|
||
margin-bottom: 20rpx;
|
||
.searchBtn{
|
||
font-size: 26rpx;
|
||
border:1rpx solid #F5F5FA;
|
||
padding: 10rpx 22rpx;
|
||
background: #F5F5FA;
|
||
border-radius: 8rpx;
|
||
}
|
||
}
|
||
.monthBox{
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: flex-end;
|
||
.text1{
|
||
font-weight: 500;
|
||
font-size: 60rpx;
|
||
color: #333333;
|
||
}
|
||
.text2{
|
||
font-weight: 500;
|
||
font-size: 22rpx;
|
||
color: #333333;
|
||
padding-bottom: 10rpx;
|
||
padding: 0 6rpx 13rpx;
|
||
}
|
||
.text3{
|
||
padding-bottom: 13rpx;
|
||
}
|
||
}
|
||
.recordBox{
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
font-weight: 500;
|
||
font-size: 26rpx;
|
||
color: #333333;
|
||
margin-top: 45rpx;
|
||
.priceBox{
|
||
margin-left: 13rpx;
|
||
}
|
||
}
|
||
.moduleBox{
|
||
background: #fff;
|
||
padding: 32rpx 36rpx 45rpx;
|
||
border-bottom: 1rpx solid #DEDEDE;
|
||
.text4{
|
||
font-weight: 500;
|
||
font-size: 22rpx;
|
||
color: #999999;
|
||
}
|
||
.centerBox{
|
||
margin-top: 25rpx;
|
||
.text5{
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
}
|
||
.text6{
|
||
font-weight: 500;
|
||
font-size: 22rpx;
|
||
color: #999999;
|
||
margin-top: 8rpx;
|
||
}
|
||
}
|
||
.bottomBox{
|
||
margin-top: 10rpx;
|
||
text-align: center;
|
||
.text7{
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #333333;
|
||
text-align: center;
|
||
}
|
||
.text8{
|
||
font-weight: bold;
|
||
font-size: 22rpx;
|
||
color: #333333;
|
||
margin-top: 8rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
.moduleBox:last-child{
|
||
border-bottom: none;
|
||
}
|
||
.noMore{
|
||
margin-top: 50rpx;
|
||
// font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
line-height: 36rpx;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
.hs-row{
|
||
width: 100%;
|
||
margin-left: 0;
|
||
padding: 40rpx 45rpx 40rpx 69rpx;
|
||
border-radius: 30rpx;
|
||
}
|
||
.hs-row-ft button{
|
||
height: 144rpx;
|
||
width: 144rpx;
|
||
padding: 0;
|
||
border-radius: 50%;background-color: #fff;line-height: 108px;
|
||
|
||
}
|
||
.hs-row-ft button::after{
|
||
border: none;
|
||
}
|
||
|
||
.user-head {
|
||
height: 140rpx;
|
||
}
|
||
|
||
.user-head-img {
|
||
height: 90upx;
|
||
width: 90upx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
|
||
.hs-row-na {
|
||
color: #666;
|
||
font-size: 26upx; text-align: right; padding-right: 15px;
|
||
width: 100%;
|
||
}
|
||
|
||
.hs-hd {
|
||
width: 160rpx;
|
||
}
|
||
|
||
.down {
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
.infoBox{
|
||
background: #fff;
|
||
border-radius: 30rpx;
|
||
overflow: hidden;
|
||
padding: 10rpx 0 10rpx;
|
||
}
|
||
.hs-list{
|
||
// padding: 33rpx 45rpx;
|
||
margin: 33rpx 45rpx 0;
|
||
padding-bottom: 33rpx;
|
||
border-bottom: 1px solid #DEDEDE;
|
||
overflow: hidden;
|
||
}
|
||
.hs-list:last-child{
|
||
border-bottom: none;
|
||
}
|
||
.escLogin{
|
||
padding: 40rpx 0;
|
||
border-radius: 30rpx;
|
||
background: #fff;
|
||
text-align: center;
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #282F38;
|
||
margin-top: 20rpx;
|
||
}
|
||
.rightText{
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #282F38;
|
||
}
|
||
.colorText{
|
||
color:#FB8F0C;
|
||
}
|
||
.modelLabel{
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #282F38;
|
||
padding: 42rpx 42rpx 20rpx;
|
||
}
|
||
.rightText2{
|
||
width: 115rpx;
|
||
height: 48rpx;
|
||
line-height: 48rpx;
|
||
text-align: center;
|
||
background: rgba(251,143,12,0.1);
|
||
border-radius: 10rpx;
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #FB8F0C;
|
||
}
|
||
</style> |