|
@@ -2,56 +2,150 @@
|
|
|
<div class="mianBox">
|
|
|
<van-row class="headerBox">
|
|
|
<van-icon name="arrow-left" @click="$router.go(-1)" />
|
|
|
- 选择充值方式
|
|
|
+ 消费记录
|
|
|
</van-row>
|
|
|
- <van-row class="contentBox">
|
|
|
- <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
|
|
- <van-list
|
|
|
- v-model="loading"
|
|
|
- :finished="finished"
|
|
|
- finished-text="没有更多了"
|
|
|
- @load="onLoad"
|
|
|
- >
|
|
|
- <van-row class="listBoxCell" v-for="item in list" :key="item">
|
|
|
+ <van-tabs v-model="active" class="type" color="red" line-width="60px" @click="tab">
|
|
|
+ <van-tab title="充值记录">
|
|
|
+ <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
|
|
+ <van-list
|
|
|
+ v-model="loading"
|
|
|
+ :finished="finished"
|
|
|
+ finished-text="没有更多了"
|
|
|
+ @load="onLoad"
|
|
|
+ :style="height"
|
|
|
+ line-width="60px"
|
|
|
+ >
|
|
|
+ <van-row class="listBoxCell" v-for="(item,index) in recharge" :key="index">
|
|
|
<van-col span="18">
|
|
|
- <van-row class="jlName">充值记录</van-row>
|
|
|
- <van-row class="jlTime">时间:2021-03-08 12:37</van-row>
|
|
|
+ <van-row class="jlName">{{item.type}}</van-row>
|
|
|
+ <van-row class="jlTime">时间:{{item.createTime}}</van-row>
|
|
|
+ <van-row class="jlBalance">余额:{{item.balance}}</van-row>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="6" class="jlMoney" :class="item%2?'just':'negative'">+{{item.amt}}</van-col>
|
|
|
+ </van-row>
|
|
|
+ </van-list>
|
|
|
+ </van-pull-refresh>
|
|
|
+ </van-tab>
|
|
|
+ <van-tab title="消费记录">
|
|
|
+
|
|
|
+ <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
|
|
+ <van-list
|
|
|
+ v-model="loading"
|
|
|
+ :finished="finished"
|
|
|
+ finished-text="没有更多了"
|
|
|
+ @load="onLoad"
|
|
|
+ :style="height"
|
|
|
+ >
|
|
|
+ <van-row class="listBoxCell" v-for="(item,index) in consumption" :key="index">
|
|
|
+ <van-col span="18">
|
|
|
+ <van-row class="jlName">{{item.shopName}}</van-row>
|
|
|
+ <van-row class="jlTime">时间:{{item.createTime}}</van-row>
|
|
|
</van-col>
|
|
|
<van-col span="6" class="jlMoney" :class="item%2?'just':'negative'">+200元</van-col>
|
|
|
</van-row>
|
|
|
- </van-list>
|
|
|
- </van-pull-refresh>
|
|
|
- </van-row>
|
|
|
+ </van-list>
|
|
|
+ </van-pull-refresh>
|
|
|
+ </van-tab>
|
|
|
+ </van-tabs>
|
|
|
+ <van-cell title="选择日期区间" :value="date" @click="show = true" style="position: absolute;top:94px;left:0;z-index:10;"/>
|
|
|
+ <van-calendar v-model="show" type="range" @confirm="onConfirm" :min-date="minDate" />
|
|
|
+
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { Toast } from "vant";
|
|
|
+import { RechargeConsumption } from '@/plugins/common'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- list: [],
|
|
|
+ recharge: [],
|
|
|
+ consumption:[],
|
|
|
loading: false,
|
|
|
- finished: false,
|
|
|
- refreshing: false,
|
|
|
+ finished: true,
|
|
|
+ refreshing: true,
|
|
|
+ height:{
|
|
|
+ height:false,
|
|
|
+ marginTop:'60px',
|
|
|
+ },
|
|
|
+ active: 0,
|
|
|
+ date: '',
|
|
|
+ show: false,
|
|
|
+ minDate: new Date(2020, 1,1),
|
|
|
};
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ [Toast.name]: Toast
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ this.height.height = (document.documentElement.clientHeight - 120) + 'px'
|
|
|
+ this.onLoad();
|
|
|
+
|
|
|
+
|
|
|
},
|
|
|
methods: {
|
|
|
- onLoad() {
|
|
|
- setTimeout(() => {
|
|
|
- if (this.refreshing) {
|
|
|
- this.list = [];
|
|
|
- this.refreshing = false;
|
|
|
- }
|
|
|
+ tab(name, title) {
|
|
|
+ // Toast(name);
|
|
|
+ if(name==0){
|
|
|
+ this.consumption = []
|
|
|
+ }else{
|
|
|
+ this.recharge = []
|
|
|
+ }
|
|
|
+ this.date = ''
|
|
|
+
|
|
|
+
|
|
|
|
|
|
- for (let i = 0; i < 10; i++) {
|
|
|
- this.list.push(this.list.length + 1);
|
|
|
+ },
|
|
|
+ formatDate(date) {
|
|
|
+ return `${date.getMonth() + 1}/${date.getDate()}`;
|
|
|
+ },
|
|
|
+ onConfirm(date) {
|
|
|
+
|
|
|
+ this.show = false;
|
|
|
+
|
|
|
+ var start_ = new Date(date[0]);
|
|
|
+ var starTime= start_.getFullYear() + '-' + (start_.getMonth() + 1) + '-' + start_.getDate()
|
|
|
+ // + ' ' + start_.getHours() + '0:' + start_.getMinutes() + '0:0' + start_.getSeconds();
|
|
|
+ var end_ = new Date(date[1]);
|
|
|
+ var endTime=end_.getFullYear() + '-' + (end_.getMonth() + 1) + '-' + end_.getDate()
|
|
|
+ // + ' ' + end_.getHours() + '0:' + end_.getMinutes() + '0:0' + end_.getSeconds();
|
|
|
+ this.date = starTime + ' 至 ' + endTime
|
|
|
+ RechargeConsumption("charge", starTime + ' 00:00:00', endTime + ' 00:00:00' , 1, 20).then((res=>{
|
|
|
+ console.log(res)
|
|
|
+ this.recharge = []
|
|
|
+ if(res.data.data.records.length>0){
|
|
|
+ this.recharge = res.data.data.records
|
|
|
+ }else {
|
|
|
+ this.finished = false
|
|
|
+ this.finished = true
|
|
|
}
|
|
|
- this.loading = false;
|
|
|
|
|
|
- if (this.list.length >= 40) {
|
|
|
- this.finished = true;
|
|
|
+ }))
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ RechargeConsumption("charge", null, null , 1, 20)
|
|
|
+ .then((res=>{
|
|
|
+ console.log(res)
|
|
|
+ if(res.data.data.records.length>0){
|
|
|
+ this.recharge = res.data.data.records
|
|
|
+ }else {
|
|
|
+ this.finished = false
|
|
|
+ this.finished = true
|
|
|
}
|
|
|
- }, 1000);
|
|
|
+ }))
|
|
|
+ // setTimeout(() => {
|
|
|
+ // if (this.refreshing) {
|
|
|
+ // this.list = [];
|
|
|
+ // this.refreshing = false;
|
|
|
+ // }
|
|
|
+ // for (let i = 0; i < 10; i++) {
|
|
|
+ // this.list.push(this.list.length + 1);
|
|
|
+ // }
|
|
|
+ // this.loading = false;
|
|
|
+ // if (this.list.length >= 40) {
|
|
|
+ // this.finished = true;
|
|
|
+ // }
|
|
|
+ // }, 1000);
|
|
|
},
|
|
|
onRefresh() {
|
|
|
// 清空列表数据
|
|
@@ -73,38 +167,44 @@ export default {
|
|
|
height: 100vh;
|
|
|
color: #000;
|
|
|
box-sizing: border-box;
|
|
|
- .contentBox {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- overflow-y: auto;
|
|
|
- padding: 0 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- .listBoxCell{
|
|
|
- height: 75px;
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- border-bottom: 1px solid rgba(237,237,237,1);
|
|
|
- .jlName{
|
|
|
- font-size: 16px;
|
|
|
- color: #000;
|
|
|
- }
|
|
|
- .jlTime{
|
|
|
- margin-top: 10px;
|
|
|
- font-size: 12px;
|
|
|
- color: #ccc;
|
|
|
- }
|
|
|
- .jlMoney{
|
|
|
- text-align: right;
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
- .jlMoney.just{
|
|
|
- color: rgba(56,129,253,1);
|
|
|
- }
|
|
|
- .jlMoney.negative{
|
|
|
- color: rgba(242,46,60,1);
|
|
|
- }
|
|
|
- }
|
|
|
+ overflow-y: hidden;
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+.listBoxCell{
|
|
|
+ height: 75px;
|
|
|
+ width: 100%;
|
|
|
+ padding:0 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid rgba(237,237,237,1);
|
|
|
+ .jlName{
|
|
|
+ font-size: 16px;
|
|
|
+ color: #000;
|
|
|
}
|
|
|
+ .jlTime{
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #ccc;
|
|
|
+ }
|
|
|
+ .jlBalance{
|
|
|
+ margin-top:10px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(242,46,60,1);
|
|
|
+ }
|
|
|
+ .jlMoney{
|
|
|
+ text-align: right;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ .jlMoney.just{
|
|
|
+ color: rgba(56,129,253,1);
|
|
|
+ }
|
|
|
+ .jlMoney.negative{
|
|
|
+ color: rgba(242,46,60,1);
|
|
|
+ }
|
|
|
+}
|
|
|
+.van-list{
|
|
|
+ overflow-y: auto;
|
|
|
}
|
|
|
</style>
|