<template>
<section class="wallet-record">
<Header :title="title" :meaushow='meaushow'></Header>
<div class="record-content">
<div class="record-type" @click="showPopType">{{text}}<van-icon name="arrow-down" class="va-m" style="font-size:20px;margin-left: 5px;"/> </div>
<div class="record-date">
<span @click="showPopDate">{{recordYear}}年{{recordMonth}}月 <van-icon name="arrow-down" class="va-m" style="font-size:16px;"/></span>
</div>
<ul class="record-detail">
<template v-if="walletRecordData.length > 0">
<li v-for="(item,index) in walletRecordData" :key="index">
<div class="record-item"><span>{{item.wallet_type == 1 ? '钱包充值' : '钱包提现'}}</span><br/>{{item.create_time}}</div>
<div class="record-num" v-if="item.wallet_type == 2">
{{item.amount_format}}<br/>
<span v-if="item.status == 1" class="withdrawText">提现中</span>
<span v-else class="successText">已完成</span>
</div>
<div class="record-num" v-if="item.wallet_type == 1">
{{item.amount_format}}<br/>
<span v-if="item.status == 1" class="rechargeBtn" @click="detail(item.amount,item.wallet_id)">待支付</span>
<span v-else class="successText">已完成</span>
</div>
</li>
</template>
<template v-else>
<li class="no-data">
<i class="iconfont icon-zanwushuju" style="color: #999;margin: 0 auto;display: block;text-align: center;font-size: 90px;padding-top: 60px;"></i>
<p style="color: #333;width: 80%;margin: 0 auto;font-size: 13px;margin-top: 28px;">您的钱包当前还没有记录哦，去看看商品吧~ <a style="color: #1080d0;" href="/v3/s">去搜索</a></p> </li>
</template>
</ul>
<van-popup v-model="dateShow" position="bottom" :overlay="true">
<van-datetime-picker v-model="currentDate" type="year-month" :formatter="formatter" @cancel="onDateCancel" @confirm="onDateConfirm" @change="dateChange"/>
</van-popup>
</div>
<!--记录类型弹出框-->
<div class="dialog-layer-shade" v-if="dialog">
<div class="dialog-layer">
<p class="tit">交易类型</p>
<ul class="tab boxsiz">
<li :class="{'curr':active==index}" v-for="(item,index) in columns" :key="index" @click="onTypeConfirm(item.keyId,index)">{{item.text}}</li>
</ul>
<a href="javascript:;" class="btn" @click="dialog=false">取消</a>
</div>
</div>
</section>
</template>
<script>
import Vue from 'vue';
import {mapState} from 'vuex'
import Header from '@/views/common/Header.vue';
import {Icon, Popup, DatetimePicker, Picker, Toast} from 'vant';
Vue.use(Icon).use(Popup).use(DatetimePicker).use(Picker).use(Toast);
export default {
name: 'walletRecord',
data() {
return {
title: "充值提现记录",
text:'全部',
meaushow: true,
recordYear: new Date().getFullYear(),
recordMonth: (new Date().getMonth() + 1) < 10 ? "0" + (new Date().getMonth() + 1) : (new Date().getMonth() + 1),
updateYear: '',
updateMonth: '',
dateShow: false, //年月弹出层
typeShow: false, //类型弹出层
currentDate: new Date(), //目前年月
typeCheckedkeyId: '',
typeCheckedText: '',
dialog:false,
active:0,
columns: [
{"keyId": '', "text": "全部"},
{"keyId": 1, "text": "钱包充值"},
{"keyId": 2, "text": "钱包提现"}
]
}
},
computed: {
...mapState({
walletRecordData: state => state.wallet.walletRecordData
})
},
watch: {},
created() {
//格式化日期
function setDate(date) {
y = date.getFullYear();
m = date.getMonth() + 1;
d = date.getDate();
m = m < 10 ? "0" + m : m;
d = d < 10 ? "0" + d : d;
return y + "-" + m + "-" + d;
}
//封装时间格式
function format(time, format) {
var t = new Date(time);
var tf = function (i) {
return (i < 10 ? '0' : '') + i
};
return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
switch (a) {
case 'yyyy':
return tf(t.getFullYear());
break;
case 'MM':
return tf(t.getMonth() + 1);
break;
case 'mm':
return tf(t.getMinutes());
break;
case 'dd':
return tf(t.getDate());
break;
case 'HH':
return tf(t.getHours());
break;
case 'ss':
return tf(t.getSeconds());
break;
}
})
}
//获取当前月的第一天
function getCurrentMonthFirst() {
var date = new Date();
date.setDate(1);
return date;
}
//获取当前月的最后一天
function getCurrentMonthLast() {
var date = new Date();
var currentMonth = date.getMonth();
var nextMonth = ++currentMonth;
var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
var oneDay = 1000 * 60 * 60 * 24;
return new Date(nextMonthFirstDay - oneDay);
}
this.$store.dispatch({
type: 'walletRecordList',
wallet_type: '',
stime: format(getCurrentMonthFirst(), 'yyyy-MM-dd'),
etime: format(getCurrentMonthLast(), 'yyyy-MM-dd')
})
},
methods: {
showPopDate() {
if (!this.dateShow) {
this.dateShow = true;
} else {
this.dateShow = false;
}
},
showPopType() {
this.dialog=!this.dialog;
},
formatter(type, value) {
if (type === 'year') {
return `${value}`;
} else if (type === 'month') {
return `${value}`
}
return value;
},
dateChange(value) {
this.updateYear = value.getValues()[0];
this.updateMonth = value.getValues()[1];
},
onDateCancel() {
this.dateShow = false;
this.recordYear = this.recordYear;
this.recordMonth = this.recordMonth;
},
onDateConfirm() {
this.dateShow = false;
this.recordYear = this.updateYear || this.recordYear;
this.recordMonth = this.updateMonth || this.recordMonth;
//获取某年某月的第一天
function getMonthFirstDay(y, m) {
var date = new Date(y, m - 1, 1);
var firstDate = new Date(date.getTime());
return firstDate.getFullYear() + '-' + (Number(firstDate.getMonth()) + 1) + '-' + firstDate.getDate();
}
//获取某年某月的最后一天
function getMonthLastDay(y, m) {
var date = new Date(y, m, 1);
var lastDate = new Date(date.getTime() - 1000 * 60 * 60 * 24);
return lastDate.getFullYear() + '-' + (Number(lastDate.getMonth()) + 1) + '-' + lastDate.getDate();
}
this.$store.dispatch({
type: 'walletRecordList',
wallet_type: this.typeCheckedkeyId || '',
stime: getMonthFirstDay(this.recordYear, this.recordMonth),
etime: getMonthLastDay(this.recordYear, this.recordMonth)
})
},
onTypeConfirm(value, index) {
this.dialog = false;
this.active=index;
this.text=this.columns[index].text;
this.typeCheckedkeyId = value;
this.recordYear = this.updateYear || this.recordYear;
this.recordMonth = this.updateMonth || this.recordMonth;
//获取某年某月的第一天
function getMonthFirstDay(y, m) {
var date = new Date(y, m - 1, 1);
var firstDate = new Date(date.getTime());
return firstDate.getFullYear() + '-' + (Number(firstDate.getMonth()) + 1) + '-' + firstDate.getDate();
}
//获取某年某月的最后一天
function getMonthLastDay(y, m) {
var date = new Date(y, m, 1);
var lastDate = new Date(date.getTime() - 1000 * 60 * 60 * 24);
return lastDate.getFullYear() + '-' + (Number(lastDate.getMonth()) + 1) + '-' + lastDate.getDate();
}
this.$store.dispatch({
type: 'walletRecordList',
wallet_type: value,
stime: getMonthFirstDay(this.recordYear, this.recordMonth),
etime: getMonthLastDay(this.recordYear, this.recordMonth)
})
},
onTypeCancel() {
this.typeShow = false;
},
detail(amount,wallet_id) { //待支付的钱包充值订单，可跳去查看详情
//直接调用$router.push实现携带参数的跳转
this.$router.push({
path: '/wallet/recharge',
query: {
amount: amount,
wallet_id:wallet_id
}
})
}
},
components: {
Header
}
}
</script>
<style scoped>
@import "../../assets/css/wallet/wallet.css";
</style>