|
|
@@ -1,25 +1,21 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
+ <u-picker v-model="showTime" mode="time" :params="params" :default-time="defaultTime" @confirm="confirmTime"></u-picker>
|
|
|
<view class="top">
|
|
|
<view class="value">
|
|
|
<text>我的余额</text>
|
|
|
- <text class="text-price">188.00</text>
|
|
|
- </view>
|
|
|
- <view class="flex justify-center align-center">
|
|
|
- <view class="cu-btn btn">
|
|
|
- 充值
|
|
|
- </view>
|
|
|
+ <text>{{pointValue}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="data">
|
|
|
<view class="left">
|
|
|
- <view>
|
|
|
- <text>2021年7月</text>
|
|
|
+ <view @click.stop="showTime = true">
|
|
|
+ <text>{{defaultTime}}</text>
|
|
|
<text class="cuIcon-unfold padding-left-10"></text>
|
|
|
</view>
|
|
|
- <view>
|
|
|
+ <!-- <view>
|
|
|
<text>支出 ￥ 165.00 收入 ￥ 463.00</text>
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
</view>
|
|
|
<view class="right">
|
|
|
<text>统计</text>
|
|
|
@@ -27,43 +23,107 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <view hover-class="hoverClass" @click="$jump('/pages/mine/bill-detail')" class="card" v-for="(item,index) in 4" :key="index">
|
|
|
- <view class="left">
|
|
|
- <image src="@/static/icon/ruixin.png" mode=""></image>
|
|
|
- <view class="">
|
|
|
- <text>瑞幸咖啡</text>
|
|
|
- <text>7月20日 12:00</text>
|
|
|
+ <view class="card">
|
|
|
+ <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
|
|
|
+ :up="upOption">
|
|
|
+ <view @click="$jump('/pages/bill/bill-detail?bill-detail='+JSON.stringify(item)+'&type==balance')" class="item" hover-class="hoverClass"
|
|
|
+ v-for="(item,index) in list" :key="index">
|
|
|
+ <view class="area1">
|
|
|
+ <view class="item-padding">
|
|
|
+ <image v-if="item.type==3" :src="item.logo" mode="aspectFit"></image>
|
|
|
+ <image v-if="item.type==2" src="/static/icon/life.png" mode="aspectFit"></image>
|
|
|
+ <view class="">
|
|
|
+ <text>{{item.name}}</text>
|
|
|
+ <text>{{item.updateTime}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="item.type==3" class="area3 text-area u-flex-1" >
|
|
|
+ <view class="item-padding" style="text-align: right;flex:1;font-size: 34rpx;color: #000000;margin-right: 20rpx;">-￥{{item.pointValue}}</view>
|
|
|
+ </view>
|
|
|
+ <view v-if="item.type==2" class="area3 text-area u-flex-1" >
|
|
|
+ <view class="item-padding" style="text-align: right;flex:1;font-size: 34rpx;color: #F39248;margin-right: 20rpx;">+￥{{item.pointValue}}</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="right">
|
|
|
- <text>￥-10</text>
|
|
|
- </view>
|
|
|
+ </mescroll-body>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import MescrollMixin from "@/components/mescroll-body/mescroll-mixins.js";
|
|
|
export default {
|
|
|
+ mixins: [MescrollMixin],
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
+ list:[],
|
|
|
+ downOption:{
|
|
|
+ auto:false
|
|
|
+ },
|
|
|
+ showTime:false,
|
|
|
+ params: {
|
|
|
+ year: true,
|
|
|
+ month: true,
|
|
|
+ },
|
|
|
+ defaultTime:'',
|
|
|
+ pointValue:''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ if(options.pointValue){
|
|
|
+ this.pointValue = options.pointValue
|
|
|
}
|
|
|
+ let m = new Date().getMonth() + 1
|
|
|
+ let y = new Date().getFullYear()
|
|
|
+ let m1 = m<10? ("0" + m) : m
|
|
|
+ this.defaultTime = y + '-' + m1
|
|
|
},
|
|
|
methods: {
|
|
|
-
|
|
|
+ confirmTime(e){
|
|
|
+ this.defaultTime = e.year + '-' +e.month
|
|
|
+ this.downCallback()
|
|
|
+ },
|
|
|
+ upCallback(mescroll) {
|
|
|
+ let params = {
|
|
|
+ current:mescroll.num,
|
|
|
+ size:mescroll.size,
|
|
|
+ userId:this.vuex_userId,
|
|
|
+ monthTime:this.defaultTime
|
|
|
+ }
|
|
|
+ try {
|
|
|
+ this.$api.account.remainList(params).then(res => {
|
|
|
+ let data = res.data.records
|
|
|
+ let total = res.data.total
|
|
|
+ mescroll.endBySize(data.length, total);
|
|
|
+ if (mescroll.num == 1) this.list = []; //如果是第一页需手动制空列表
|
|
|
+ this.list = this.list.concat(data); //追加新数据
|
|
|
+ })
|
|
|
+ } catch (e) {
|
|
|
+ this.mescroll.endErr()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ downCallback() {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.mescroll.resetUpScroll();
|
|
|
+ }, 10)
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
+
|
|
|
.btn {
|
|
|
background-color: #FC8D38;
|
|
|
color: #FFFFFF;
|
|
|
border-radius: 50rpx;
|
|
|
border: 1rpx solid #FFFFFF;
|
|
|
}
|
|
|
+
|
|
|
+ .hoverClass1{
|
|
|
+ box-shadow: 0rpx 0rpx 10rpx #DDDDDD;
|
|
|
+ }
|
|
|
|
|
|
.top {
|
|
|
padding: 50rpx;
|
|
|
@@ -90,7 +150,7 @@
|
|
|
}
|
|
|
|
|
|
.data {
|
|
|
- padding: 40rpx 0 25rpx 40rpx;
|
|
|
+ padding: 50rpx 0 25rpx 40rpx;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
|
|
|
@@ -111,6 +171,7 @@
|
|
|
}
|
|
|
|
|
|
.right {
|
|
|
+ padding-right: 20rpx;
|
|
|
color: #666666;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
@@ -118,51 +179,75 @@
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .card{
|
|
|
- border-bottom: 1rpx solid #DDDDDD;
|
|
|
+
|
|
|
+ .card {
|
|
|
background-color: #FFFFFF;
|
|
|
- padding: 30rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+
|
|
|
+ .area-padding {
|
|
|
+ padding: 40rpx 0 20rpx;
|
|
|
+ }
|
|
|
|
|
|
- .left{
|
|
|
+ .text-area{
|
|
|
display: flex;
|
|
|
- image{
|
|
|
- width: 80rpx;
|
|
|
- height: 80rpx;
|
|
|
- }
|
|
|
-
|
|
|
- view{
|
|
|
- padding-left: 20rpx;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .area1 {
|
|
|
+ padding-left: 30rpx;
|
|
|
+ width: 55%;
|
|
|
+
|
|
|
+ view:first-child {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
-
|
|
|
- text:first-child{
|
|
|
- font-size: 32rpx;
|
|
|
- padding-bottom: 10rpx;
|
|
|
- color: #000;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx
|
|
|
}
|
|
|
-
|
|
|
- text:last-child{
|
|
|
- font-size: 26rpx;
|
|
|
- color: #888888;
|
|
|
+
|
|
|
+ view {
|
|
|
+ padding-left: 15rpx;
|
|
|
+ padding-bottom: 5rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ text:first-child {
|
|
|
+ font-size: 32rpx;
|
|
|
+ padding-bottom: 10rpx;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ text:last-child {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #888888;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .right{
|
|
|
+
|
|
|
+ .area2 {
|
|
|
+ width: 25%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .area3 {
|
|
|
+ width: 20%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-padding {
|
|
|
+ padding: 20rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ padding: 5rpx;
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- text{
|
|
|
- font-size: 34rpx;
|
|
|
- }
|
|
|
+ border-bottom: 1rpx solid #DDDDDD;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
- }
|
|
|
+ .item:last-child{
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
|
|
|
|
|
|
+
|
|
|
+ }
|
|
|
</style>
|
