122 lines
3.1 KiB
Vue
122 lines
3.1 KiB
Vue
|
<template>
|
||
|
|
<view class="uni-container">
|
||
|
|
<u-navbar :autoBack="true" :placeholder="true" :bgColor="bgColor">
|
||
|
|
<view slot='center' style="font-size: 36rpx; font-weight: bold;">
|
||
|
|
消费记录
|
||
|
|
</view>
|
||
|
|
</u-navbar>
|
||
|
|
<view class="month-box" v-for="(item, index) in list">
|
||
|
|
<view class="h4" @click="changeOpen(index)">
|
||
|
|
<view class="date">{{item.time}}</view>
|
||
|
|
<u-icon v-if="!item.isClose" name="arrow-down-fill"></u-icon>
|
||
|
|
<u-icon v-if="item.isClose" name="arrow-up-fill"></u-icon>
|
||
|
|
</view>
|
||
|
|
<view class="list-box" v-if="!item.isClose">
|
||
|
|
<view class="item" v-for="(item1, index1) in item.data" :key="index1">
|
||
|
|
<view class="name">{{item1.name}}</view>
|
||
|
|
<view class="time">{{item1.time}}</view>
|
||
|
|
<view class="sum">
|
||
|
|
<text v-if="item1.tradeType == 1 || item1.tradeType == 3">+</text>
|
||
|
|
<text v-if="item1.tradeType == 2">-</text>
|
||
|
|
{{item1.amount || 0}}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view v-if="list.length == 0" style="padding-top: 50rpx;">
|
||
|
|
<u-empty mode="list" text="暂无数据"></u-empty>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
bgColor: '#FFFFFF',
|
||
|
|
list: []
|
||
|
|
};
|
||
|
|
},
|
||
|
|
async onLoad (options) {
|
||
|
|
let info = await this.$http.logList({accountNo: options.accountNo});
|
||
|
|
let arr = [];
|
||
|
|
let data = info.rows;
|
||
|
|
for (var i = 0; i < data.length; i ++) {
|
||
|
|
arr.push({ name: data[i].title, time: this.$utils.splitDate(data[i].createTime), select: this.$utils.splitDates(data[i].createTime), tradeType: data[i].tradeType, amount: data[i].amount });
|
||
|
|
}
|
||
|
|
this.list = this.$utils.resetArr(arr, 'select');
|
||
|
|
console.log(this.list)
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
changeOpen(i) {
|
||
|
|
if (this.list[i].isClose) {
|
||
|
|
this.$set(this.list[i],'isClose',false)
|
||
|
|
} else {
|
||
|
|
this.$set(this.list[i],'isClose',true)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.uni-container {
|
||
|
|
width: 100%;
|
||
|
|
min-height: 100vh;
|
||
|
|
box-sizing: border-box;
|
||
|
|
background: #F6F6F6;
|
||
|
|
.month-box {
|
||
|
|
margin: 32rpx 24rpx 0;
|
||
|
|
.h4 {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
flex-direction: row;
|
||
|
|
.date {
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: rgba(0,0,0,0.85);
|
||
|
|
}
|
||
|
|
/deep/.u-icon {
|
||
|
|
margin-left: 9rpx;
|
||
|
|
.u-icon__icon {
|
||
|
|
font-size: 22rpx !important;
|
||
|
|
color: #999999 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.list-box {
|
||
|
|
margin-top: 20rpx;
|
||
|
|
background: #FFFFFF;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
padding: 0 24rpx;
|
||
|
|
.item {
|
||
|
|
border-bottom: 1rpx solid #E8E8E8;
|
||
|
|
padding: 24rpx 0 20rpx;
|
||
|
|
position: relative;
|
||
|
|
&:last-child {
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
.name {
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: rgba(0,0,0,0.85);
|
||
|
|
}
|
||
|
|
.time {
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: rgba(0,0,0,0.25);
|
||
|
|
margin-top: 8rpx;
|
||
|
|
}
|
||
|
|
.sum {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
right: 0;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 36rpx;
|
||
|
|
color: #FF3333;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|