recyc/recycapp
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
recycapp/pages/mine/priceRecord.vue

359 lines
6.7 KiB
Vue
Raw Normal View History

'绘制页面'
2025-10-25 09:54:24 +08:00
<template>
<view class="content">
<view class="headBox flex-center">
<u-icon name="search" color="#333333" size="28" style="margin-right: 19rpx;"></u-icon>
'收支记录'
2025-10-31 15:27:59 +08:00
<input v-model="order_num" type="text" class="flex1" placeholder="请输入要查询的订单号" />
<view class="searchBtn" @click="searchList">搜索</view>
'绘制页面'
2025-10-25 09:54:24 +08:00
</view>
<view class="moduleBox">
'收支记录'
2025-10-31 15:27:59 +08:00
<view class="monthBox" @click="showDate = true">
<view class="text1">{{nowYear}}</view>
<text class="text2">年</text>
<view class="text1">{{nowMonth}}</view>
'绘制页面'
2025-10-25 09:54:24 +08:00
<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>
'收支记录'
2025-10-31 15:27:59 +08:00
<view class="priceBox">+{{statisticsObj.total_income}}</view>
'绘制页面'
2025-10-25 09:54:24 +08:00
</view>
<view class="leftBox flex-center" style="margin-left: 113rpx;">
<text>支出</text>
'收支记录'
2025-10-31 15:27:59 +08:00
<view class="priceBox">-{{statisticsObj.total_expense}}</view>
'绘制页面'
2025-10-25 09:54:24 +08:00
</view>
</view>
</view>
'收支记录'
2025-10-31 15:27:59 +08:00
<view class="moduleBox" v-for="item in priceList">
<view class="text4">订单号：{{item.order_no}}</view>
'绘制页面'
2025-10-25 09:54:24 +08:00
<view class="flex-between">
<view class="centerBox">
'收支记录'
2025-10-31 15:27:59 +08:00
<view class="text5">{{item.type_text}}</view>
<view class="text6">{{item.createtime_text}}</view>
'绘制页面'
2025-10-25 09:54:24 +08:00
</view>
<view class="bottomBox">
'收支记录'
2025-10-31 15:27:59 +08:00
<view class="text7">{{item.money}}</view>
<view class="text8">{{item.status_text}}</view>
'绘制页面'
2025-10-25 09:54:24 +08:00
</view>
</view>
</view>
'收支记录'
2025-10-31 15:27:59 +08:00
<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> -->
'绘制页面'
2025-10-25 09:54:24 +08:00
</view>
</template>
<script>
export default {
data() {
return {
'订单详情'
2025-10-26 16:36:59 +08:00
page: 1,
'收支记录'
2025-10-31 15:27:59 +08:00
limit: 10,
priceList: [],
statisticsObj: {},
showDate: false,
nowDate: Number(new Date()),
nowYear: '',
nowMonth: '',
lastPage: '',
order_num: ''
'绘制页面'
2025-10-25 09:54:24 +08:00
}
},
components:{
},
onLoad() {
'收支记录'
2025-10-31 15:27:59 +08:00
this.confirmDate({mode:1})
'资金列表'
2025-10-29 23:00:52 +08:00
this.getPriceList()
'收支记录'
2025-10-31 15:27:59 +08:00
this.statistics()
'绘制页面'
2025-10-25 09:54:24 +08:00
},
onShow() {
'收支记录'
2025-10-31 15:27:59 +08:00
},
onReachBottom (){
console.log('触底')
if(this.page<this.lastPage){
this.page++
this.getPriceList()
}
'绘制页面'
2025-10-25 09:54:24 +08:00
},
methods: {
'收支记录'
2025-10-31 15:27:59 +08:00
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
},
'订单详情'
2025-10-26 16:36:59 +08:00
getPriceList(){
var _this = this;
'资金列表'
2025-10-29 23:00:52 +08:00
_this.$api.priceList({
'收支记录'
2025-10-31 15:27:59 +08:00
year: this.nowYear,
month: this.nowMonth,
order_num: this.order_num,
'资金列表'
2025-10-29 23:00:52 +08:00
page: this.page,
limit: this.limit
},res=>{
'订单详情'
2025-10-26 16:36:59 +08:00
if(res.code == '1'){
'收支记录'
2025-10-31 15:27:59 +08:00
this.priceList = res.data.list
this.lastPage = Math.ceil(res.data.total/this.limit)
'订单详情'
2025-10-26 16:36:59 +08:00
}else{
}
})
},
'收支记录'
2025-10-31 15:27:59 +08:00
statistics(){
var _this = this;
_this.$api.statistics({
year: this.nowYear,
month: this.nowMonth
},res=>{
if(res.code == '1'){
this.statisticsObj = res.data
}else{
}
})
}
'绘制页面'
2025-10-25 09:54:24 +08:00
}
}
</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;
'收支记录'
2025-10-31 15:27:59 +08:00
padding-right: 32rpx;
'绘制页面'
2025-10-25 09:54:24 +08:00
margin-bottom: 20rpx;
'收支记录'
2025-10-31 15:27:59 +08:00
.searchBtn{
font-size: 26rpx;
border:1rpx solid #F5F5FA;
padding: 10rpx 22rpx;
background: #F5F5FA;
border-radius: 8rpx;
}
'绘制页面'
2025-10-25 09:54:24 +08:00
}
.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;
}
'收支记录'
2025-10-31 15:27:59 +08:00
.noMore{
margin-top: 50rpx;
// font-weight: bold;
font-size: 28rpx;
color: #333333;
line-height: 36rpx;
}
'绘制页面'
2025-10-25 09:54:24 +08:00
.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>
Reference in New Issue Copy Permalink