cansnow
360 lines
12 KiB
Vue
360 lines
12 KiB
Vue
<template>
|
|
<view>
|
|
<u-navbar :background="{ background: '#efefef'}" :border-bottom="true" :is-back="false">
|
|
<view style=" display: flex;flex-direction: row;justify-content: space-between;align-items: center; flex: 1; padding: 0 30rpx; ">
|
|
<view style="width: 150rpx;" @click="goBack()">
|
|
<u-icon name="close" :size="32"></u-icon>
|
|
</view>
|
|
<view @click="addRecord()" style="color:#404133;font-size: 34rpx;font-weight: bold;text-align: center;">
|
|
<text>账单</text>
|
|
</view>
|
|
<view style="width: 150rpx;">
|
|
<text style="font-size: 34rpx;color: #000000;" @click="serviceCenter()">客服中心</text>
|
|
</view>
|
|
</view>
|
|
</u-navbar>
|
|
<view>
|
|
<view class="u-flex u-row-between u-col-center u-border-bottom"
|
|
style="padding:34rpx 30rpx;">
|
|
<view @click="openTradeTypePop()" style="background-color:#e3e3e3;height:60rpx;line-height: 50rpx; border-radius: 30rpx;padding: 0rpx 16rpx;">
|
|
<u-icon name="arrow-down-fill" size="16" color="#666666"
|
|
label="全部账单" label-size="26rpx" label-pos="left" margin-right="6rpx">
|
|
</u-icon>
|
|
</view>
|
|
<view @click="toBillStatistics()">
|
|
<u-icon name="arrow-right" color="#acb0b7"
|
|
label="统计" label-color="#acb0b7" label-pos="left"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view style="padding:34rpx 30rpx;background-color:#efefef;width:100%;"
|
|
class="u-flex u-row-between u-col-center">
|
|
<view >
|
|
<u-icon name="arrow-down" size="24" color="#333333" @click="openTimePicker"
|
|
:label="activeMonthObj.currentYear+'年'+activeMonthObj.currentMonth+'月'"
|
|
label-color="#333333"
|
|
label-size="30rpx" label-pos="left"
|
|
margin-right="6rpx">
|
|
</u-icon>
|
|
</view>
|
|
<view class="u-flex u-row-left u-col-center" style="color:#acb0b7;" @click="openUpdateModel()">
|
|
<view class="u-m-r-16">支出¥{{Number(activeMonthObj.outputAmount).toFixed(2)}}</view>
|
|
<view>收入¥{{Number(activeMonthObj.inputAmount).toFixed(2)}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style="background-color:#ffffff;width: 100%;">
|
|
<scroll-view :scroll-x="false" :scroll-y="true" class="hidden-scroll-bar"
|
|
:style="'width: 100%;height:'+scrollviewHeight+'px'"
|
|
:scroll-into-view="scrollIntoViewId"
|
|
@scrolltoupper="scrolltoUpper"
|
|
@scrolltolower="scrolltolower">
|
|
<template v-if="activeMonthObj.recordList&&activeMonthObj.recordList.length>0">
|
|
<view v-for="(record,index) in activeMonthObj.recordList" :key="index"
|
|
:id="'record_'+index"
|
|
class="u-flex u-row-between u-col-center"
|
|
style="width: 100%;">
|
|
<view style="width: 18%;padding: 30rpx 20rpx 30rpx 30rpx;">
|
|
<u-image :src="record.tradeIcon" width="90rpx" height="90rpx"
|
|
shape="circle" bg-color="#909399"></u-image>
|
|
</view>
|
|
<view style="width: 82%;padding: 30rpx 30rpx 30rpx 0rpx"
|
|
class="u-flex u-row-between u-col-center u-border-bottom">
|
|
<view @click="showUpdatePop(record,index)">
|
|
<view style="font-size: 34rpx;font-weight: 500;width:400rpx" class="u-line-1">{{record.tradeTitle}}</view>
|
|
<view style="font-size: 28rpx;color: #909399;margin-top:6rpx;">{{formatTimeStr(record.createTime)}}</view>
|
|
</view>
|
|
<view class="u-p-b-40" @click="toDetail(record)">
|
|
<text v-if="record.tradeDirection=='out'"
|
|
style="color: #000000;font-weight: bold;font-size: 32rpx;">{{"-"+Number(record.tradeValue).toFixed(2)}}</text>
|
|
<text v-if="record.tradeDirection=='in'"
|
|
style="color: #f29100;font-weight: bold;font-size: 32rpx;">{{"+"+Number(record.tradeValue).toFixed(2)}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</scroll-view>
|
|
</view>
|
|
<!-- 当前月份统计信息修改 -->
|
|
<u-popup v-model="currentMonthPopFlag" mode="center" :mask-close-able="false" negative-top="200" closeable>
|
|
<view class="u-p-30">
|
|
<view class="u-m-t-30">
|
|
<u-form :model="activeMonthObj" ref="activeMonthObj" label-width="150rpx">
|
|
<u-form-item label="当前年度">
|
|
<u-input v-model="activeMonthObj.currentYear" type="number" placeholder="月份"/>
|
|
</u-form-item>
|
|
<u-form-item label="当前月份">
|
|
<u-input v-model="activeMonthObj.currentMonth" type="number" placeholder="月份"/>
|
|
</u-form-item>
|
|
<u-form-item label="当月收入">
|
|
<u-input v-model="activeMonthObj.inputAmount" type="number" placeholder="本月收入"/>
|
|
</u-form-item>
|
|
<u-form-item label="当月支出">
|
|
<u-input v-model="activeMonthObj.outputAmount" type="number" placeholder="本月支出"/>
|
|
</u-form-item>
|
|
</u-form>
|
|
</view>
|
|
<view class="u-p-30">
|
|
<view>
|
|
<u-button type="success" @click="submitUpdate">确定</u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
<!-- 月份查询筛选-->
|
|
<u-picker mode="time" v-model="timePickerShow" :params="timeParams"
|
|
confirm-color="#3c2e55" confirm-text="确定" @confirm="timePickerConfirm"
|
|
:show-time-tag="false"></u-picker>
|
|
|
|
<!-- 新增或者修改时间选择器 -->
|
|
<!-- 消费类型 -->
|
|
<u-popup v-model="tradeTypePopFlag" mode="bottom"
|
|
:border-radius="16" close-icon-color="#000000"
|
|
:closeable="true" close-icon-pos="top-left">
|
|
<view style="width: 100%;padding: 20rpx;background-color: #f0f0f0;">
|
|
<view style="margin-top: 20rpx; text-align: center;font-weight: bold;">选择筛选项</view>
|
|
<view style="margin-top: 50rpx;text-align: center;padding: 0rpx 20rpx;margin-bottom: 100rpx;">
|
|
<u-row>
|
|
<u-col :span="4" v-for="(tradeTypeItem,index) in tradeTypeList" :key="index">
|
|
<view v-if="index==4"
|
|
class="trade-type trade-type-4"
|
|
:class="currentTradeType.value==tradeTypeItem.value?'trade-type trade-type-4 trade-type-active':'trade-type trade-type-4'"
|
|
@click="selectTradeType(tradeTypeItem)">
|
|
{{tradeTypeItem.title}}
|
|
</view>
|
|
<view v-else @click="selectTradeType(tradeTypeItem)"
|
|
:class="currentTradeType.value==tradeTypeItem.value?'trade-type trade-type-active':'trade-type'">
|
|
{{tradeTypeItem.title}}
|
|
</view>
|
|
</u-col>
|
|
</u-row>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import billList from '@/util/billList';
|
|
export default {
|
|
data() {
|
|
return {
|
|
scrollviewHeight:0,
|
|
scrollIntoViewId:'',
|
|
currentMonthIndex:new Date().getMonth()+1, //当前月份
|
|
currentYearIndex: new Date().getFullYear(),//当期年份
|
|
currentMonthPopFlag:false,//当前月份信息修改弹窗控制器
|
|
//当前月份数据
|
|
activeMonthObj:{
|
|
currentYear:2022,
|
|
currentMonth:5,
|
|
outputAmount:0.00,
|
|
inputAmount:0.00,
|
|
recordList:[]
|
|
},
|
|
timePickerShow:false, //时间选择器开关
|
|
//时间参数
|
|
timeParams:{
|
|
year: true,
|
|
month: true,
|
|
day: false,
|
|
hour: false,
|
|
minute: false,
|
|
second: false,
|
|
timestamp: true,
|
|
},
|
|
tradeTypePopFlag:false,
|
|
tradeTypeList:[
|
|
{"title":"全部",value:"0"},{"title":"红包",value:"1"},{"title":"转账",value:"2"},
|
|
{"title":"群收款",value:"3"},{"title":"二维码收付款",value:"4"},{"title":"商户消费",value:"5"},
|
|
{"title":"充值提现",value:"6"},{"title":"信用卡还款",value:"7"},{"title":"有退款",value:"8"},
|
|
],
|
|
currentTradeType:{title:'全部',value:"0"}
|
|
};
|
|
},
|
|
onLoad:function(){
|
|
let that=this;
|
|
this.scrollviewHeight= that.$u.sys().windowHeight*0.76; // 0.828
|
|
this.getRecordList();
|
|
},
|
|
methods:{
|
|
goBack(){
|
|
uni.navigateBack();
|
|
},
|
|
openTimePicker:function(){
|
|
let that=this;
|
|
that.timePickerShow=true;
|
|
},
|
|
timePickerConfirm:function(obj){
|
|
let year=obj.year;
|
|
let monthStr=obj.month;
|
|
let month= (new Date(obj.timestamp*1000)).getMonth()+1;
|
|
console.log("选择的月份",month);
|
|
this.currentMonthIndex=month;
|
|
this.currentYearIndex=year;
|
|
this.getRecordList();
|
|
},
|
|
//获取缓存记录
|
|
getRecordList:function(){
|
|
this.activeMonthObj.recordList=[];
|
|
this.activeMonthObj.inputAmount=0.00;
|
|
this.activeMonthObj.outputAmount=0.00;
|
|
this.activeMonthObj.currentMonth=this.currentMonthIndex;
|
|
this.activeMonthObj.currentYear=this.currentYearIndex;
|
|
let month=this.currentMonthIndex<10?("0"+this.currentMonthIndex):this.currentMonthIndex;
|
|
let param={
|
|
timeDuring:this.currentYearIndex+"-"+month,
|
|
tradeType:this.currentTradeType.value=='0'?'':this.currentTradeType.value,
|
|
}
|
|
console.log("获取账单记录参数",param);
|
|
this.activeMonthObj=JSON.parse(JSON.stringify(billList.tempBillList[0]));
|
|
console.log("this.activeMonthObj",this.activeMonthObj);
|
|
this.$forceUpdate();
|
|
return;
|
|
/* this.$u.api.imUser.getUserAccountRecordList(param).then(res => {
|
|
if(res.code==200&&res.data){
|
|
this.activeMonthObj.recordList=res.data.recordList;
|
|
this.activeMonthObj.inputAmount=res.data.monthAccountInfo.inputAmount;
|
|
this.activeMonthObj.outputAmount=res.data.monthAccountInfo.outputAmount;
|
|
console.log("获取账单记录结果",this.activeMonthObj);
|
|
}else{
|
|
|
|
}
|
|
}) */
|
|
},
|
|
//打开修改弹窗
|
|
openUpdateModel:function(){
|
|
this.currentMonthPopFlag=true;
|
|
},
|
|
//提交修改
|
|
submitUpdate:function(){
|
|
this.currentMonthPopFlag=false;
|
|
},
|
|
//打开新增记录弹窗
|
|
addRecord:function(){
|
|
let that=this;
|
|
that.addPopFlag=true;
|
|
},
|
|
serviceCenter(){
|
|
this.$u.route({
|
|
url:'/pages/tabbar/my/service/my-bill-question',
|
|
});
|
|
},
|
|
toDetail:function(record){
|
|
let that=this;
|
|
this.$u.route({
|
|
url:'/pages/tabbar/my/service/my-bill-detail',
|
|
params:{
|
|
record:encodeURIComponent(JSON.stringify(record))
|
|
}
|
|
});
|
|
},
|
|
scrolltoUpper:function(){
|
|
this.currentMonthIndex=new Date().getMonth()+1; //当前月份
|
|
this.currentYearIndex=new Date().getFullYear();//当期年份
|
|
this.getRecordList();
|
|
},
|
|
//监听滚动
|
|
scrolltolower:function(){
|
|
let that=this;
|
|
console.log("监听到页面滚动到底部");
|
|
this.currentMonthIndex=this.currentMonthIndex-1;
|
|
let month=this.currentMonthIndex<10?"0"+this.currentMonthIndex:this.currentMonthIndex;
|
|
let param={
|
|
timeDuring:this.currentYearIndex+"-"+month,
|
|
tradeType:this.currentTradeType.value=='0'?'6':this.currentTradeType.value,
|
|
}
|
|
console.log("获取上一个月的账单记录参数",param);
|
|
that.getRecordList();
|
|
return;
|
|
this.$u.api.imUser.getUserAccountRecordList(param).then(res => {
|
|
console.log("获取上一个月的账单记录结果",res);
|
|
if(res.code==200&&res.data){
|
|
let recordList=res.data.recordList;
|
|
if(recordList!=null&&recordList.length>0){
|
|
that.activeMonthObj.recordList=that.activeMonthObj.recordList.concat(recordList);
|
|
that.activeMonthObj.inputAmount=res.data.monthAccountInfo.inputAmount;
|
|
that.activeMonthObj.outputAmount=res.data.monthAccountInfo.outputAmount;
|
|
that.activeMonthObj.currentMonth=this.currentMonthIndex;
|
|
}
|
|
}else{
|
|
this.currentMonthIndex=this.currentMonthIndex+1;
|
|
}
|
|
})
|
|
},
|
|
formatTimeStr:function(timeStr){
|
|
//console.log("timeStr",timeStr);
|
|
timeStr=timeStr.replace(/-/g,"/");
|
|
let cdate=new Date(timeStr);
|
|
let month= cdate.getMonth()+1;
|
|
//console.log("month",month);
|
|
let day=cdate.getDate();
|
|
let hour= cdate.getHours();
|
|
let min=cdate.getMinutes();
|
|
let monthStr=month+"月";
|
|
let dayStr=day+"日";
|
|
let hourStr=hour+":";
|
|
let minStr=min;
|
|
/* if(month<10){
|
|
monthStr="0"+month+"月";
|
|
}
|
|
if(day<10){
|
|
dayStr="0"+day+"日";
|
|
} */
|
|
if(hour<10){
|
|
hourStr="0"+hour+":";
|
|
}
|
|
if(min<10){
|
|
minStr="0"+min;
|
|
}
|
|
let formatStr=monthStr+dayStr+" "+hourStr+minStr;
|
|
//console.log("formatStr",formatStr);
|
|
return formatStr;
|
|
},
|
|
openTradeTypePop:function(){
|
|
let that=this;
|
|
that.tradeTypePopFlag=true;
|
|
},
|
|
selectTradeType:function(tradeItem){
|
|
this.currentTradeType=tradeItem;
|
|
this.tradeTypePopFlag=false;
|
|
this.getRecordList();
|
|
},
|
|
toBillStatistics:function(){
|
|
this.$u.route({
|
|
url:'/pages/tabbar/my/service/my-bill-statistics',
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
::v-deep .u-picker-view{
|
|
background-color: #f3f4f6;
|
|
}
|
|
.trade-type{
|
|
height: 120rpx;
|
|
padding:40rpx 30rpx 0rpx 30rpx;
|
|
margin-bottom: 16rpx;
|
|
background-color: #e2e2e2;
|
|
border-radius: 10rpx;
|
|
text-align: center;
|
|
color: #000000;
|
|
}
|
|
.trade-type-4{
|
|
padding:25rpx 30rpx 0rpx 30rpx;
|
|
}
|
|
.trade-type-active{
|
|
background-color: rgb(232,248,238);
|
|
border:1rpx solid #18b566;
|
|
font-weight: bold;
|
|
color:#18b566;
|
|
}
|
|
|
|
</style>
|
|
<style>
|
|
page{
|
|
background-color: #efefef;
|
|
}
|
|
|
|
</style> |