<!--
|
* @Author: 小明丶
|
* @Date: 2019-10-23 17:26:01
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-04-24 15:06:29
|
* @Description:
|
-->
|
<template>
|
<div class="hb-box">
|
<!-- <van-nav-bar title="红包账户" left-arrow @click-left="onClickLeft" /> -->
|
<v-navbar title="红包账户"></v-navbar>
|
<div class="color-squre">
|
<img src="../../../../static/img/bg.png" style="width:100%;height:100%">
|
</div>
|
<div class="balance-box">
|
<div class="left">
|
<p class="tit">
|
<img src="../../../../static/img/hongbaoxiao.png" />红包余额（元）
|
<!-- <img src="../static/img/hongbaoxiao.png" />红包余额（元） -->
|
</p>
|
<p class="balance">{{this.balance}}</p>
|
</div>
|
<div class="right">
|
<van-button
|
round
|
type="info"
|
size="small"
|
color="#896EDB"
|
style="width:75px;
|
background:rgba(137,110,219,1);
|
box-shadow:0px 5px 7px 0px rgba(137,98,255,0.32);
|
border-radius:14px;
|
margin-top:44px;box-shadow:0px 10px 14px 0px rgba(137,98,255,0.32);border: .02rem solid rgb(137, 110, 219);"
|
@click="goNext"
|
>提现</van-button>
|
</div>
|
</div>
|
<div class="tab">
|
<div class="packet-records" @click="checkPacket" :class="col.clOne">
|
<p>红包记录</p>
|
</div>
|
<div class="withdrawals-record" @click="checkWithdrawals" :class="col.clTwo">
|
<p>提现记录</p>
|
</div>
|
<div class="packet-box" v-if="tabValue=='packet'">
|
<van-list
|
v-model="loading"
|
:finished="finished"
|
finished-text="没有更多了"
|
@load="onLoad"
|
>
|
<div class="content-box" v-for="(item,index) in packet" :key="index">
|
<p>{{item.redPacketTitle}}</p>
|
<p>
|
<span>{{item.redPacketDtl}}</span>
|
<span>{{item.amount}}</span>
|
</p>
|
<p>{{item.creTimeStr}}</p>
|
</div>
|
</van-list>
|
</div>
|
<div class="withdrawals-box" v-if="tabValue=='withdrawals'">
|
<van-list
|
v-model="loadingTwo"
|
:finished="finishedTwo"
|
finished-text="没有更多了"
|
@load="onLoadTwo"
|
>
|
<div class="content-box-two" v-for="(item,index) in withdrawals" :key="index">
|
<div class="left">
|
<p>{{item.expendDesc}}</p>
|
<p>{{item.creTimeStr}}</p>
|
</div>
|
<div class="right">
|
<p>{{item.amount}}</p>
|
</div>
|
</div>
|
</van-list>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import Vue from "vue";
|
import { NavBar } from "vant";
|
import myApi from "../../../api/index"
|
Vue.use(NavBar);
|
export default {
|
data() {
|
return {
|
list: [],
|
loading: false,
|
loadingTwo:false,
|
finished: false,
|
finishedTwo:false,
|
balance: "", //红包余额
|
tabValue: "packet", //tab切换控制
|
packet: [
|
], //红包记录数据
|
withdrawals: [
|
], //提现记录数据
|
col: {
|
clOne: {
|
checked: true
|
},
|
clTwo: {
|
checked: false
|
}
|
}, //样式控制
|
phoneNumber: "", //账号绑定的支付宝账号
|
state: 2, //是否绑定支付宝
|
};
|
},
|
created(){
|
this.$api.redPacketInit().then((res)=>{
|
//console.log(res)
|
this.balance = res.body.balanceAmount
|
if(res.body.aliAccount!=null){
|
this.phoneNumber = res.body.aliAccount
|
this.state = 1
|
}
|
})
|
},
|
mounted(){
|
// this.$api.redPacketIncomeList().then((res)=>{
|
// //console.log(res)
|
// this.packet = res.body.items
|
// })
|
|
},
|
updated(){
|
window.onresize
|
},
|
methods: {
|
onLoadTwo(){
|
if(!this.finishedTwo){
|
// 异步更新数据
|
if(this.withdrawals.length<=0){
|
this.$api.redPacketExpendList().then((res)=>{
|
//console.log(res)
|
if(res.body.items.length>0){
|
this.withdrawals = [...res.body.items]
|
// 加载状态结束
|
this.loadingTwo = false;
|
}
|
if(res.body.items.length==0){
|
//console.log(1)
|
this.loadingTwo = false;
|
this.finishedTwo = true;
|
}
|
})
|
}else{
|
this.$api.redPacketExpendList({
|
incomeId: this.withdrawals[this.withdrawals.length-1].id,
|
}).then((res)=>{
|
//console.log(res)
|
if(res.body.items.length>0){
|
this.withdrawals = [...this.withdrawals,...res.body.items]
|
// 加载状态结束
|
|
this.loadingTwo = false;
|
}
|
if(res.body.items.length==0){
|
//console.log(1)
|
this.loadingTwo = false;
|
this.finishedTwo = true;
|
}
|
})
|
}
|
|
}
|
|
|
},
|
onLoad() {
|
console.log(1)
|
if(!this.finished){
|
// 异步更新数据
|
if(this.packet.length<=0){
|
this.$api.redPacketIncomeList({}).then((res)=>{
|
//console.log(res)
|
if(res.body.items.length>0){
|
this.packet = [...res.body.items]
|
// 加载状态结束
|
this.loading = false;
|
}
|
if(res.body.items.length==0){
|
//console.log(1)
|
this.loading = false;
|
this.finished = true;
|
}
|
})
|
}else{
|
this.$api.redPacketIncomeList({
|
incomeId: this.packet[this.packet.length-1].id,
|
}).then((res)=>{
|
//console.log(res)
|
if(res.body.items.length>0){
|
this.packet = [...this.packet,...res.body.items]
|
// 加载状态结束
|
this.loading = false;
|
}
|
if(res.body.items.length==0){
|
//console.log(1)
|
this.loading = false;
|
this.finished = true;
|
}
|
})
|
}
|
|
}
|
|
|
},//滑动加载
|
onClickLeft() {
|
this.$router.go(-1);
|
}, //返回
|
checkPacket() {
|
this.tabValue = "packet";
|
this.col.clOne.checked = true;
|
this.col.clTwo.checked = false;
|
}, //切换红包记录
|
checkWithdrawals() {
|
//console.log('checkWithdrawals')
|
this.$api.redPacketExpendList().then((res)=>{
|
//console.log(res)
|
this.withdrawals = res.body.items
|
})
|
this.tabValue = "withdrawals";
|
this.col.clOne.checked = false;
|
this.col.clTwo.checked = true;
|
}, //切换提现记录
|
goNext() {
|
this.$router.push({
|
name: "withdrawals",
|
params: {
|
phoneNumber: this.phoneNumber,
|
balance: this.balance,
|
state: this.state,
|
}
|
});
|
} //跳转提现
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.hb-box {
|
& {
|
position: relative;
|
background-color: #f0f1f3;
|
height: 100vh;
|
}
|
.color-squre {
|
width: 100%;
|
height: 130px;
|
// background-image: url("../static/img/bg.png");
|
// background-size: cover;
|
}
|
.balance-box {
|
& {
|
width: 94%;
|
height: 115px;
|
background: rgba(255, 255, 255, 1);
|
box-shadow: 0px 8px 20px 0px rgba(66, 61, 93, 0.05);
|
border-radius: 10px;
|
position: absolute;
|
top: 1.8rem;
|
left: 3%;
|
display: flex;
|
}
|
.left {
|
& {
|
width: 50%;
|
}
|
.tit {
|
color: #333333;
|
font-size: 14px;
|
font-weight: Medium;
|
text-align: center;
|
margin-top: 9px;
|
img {
|
width: 27px;
|
height: 32px;
|
position: relative;
|
top: 15px;
|
}
|
}
|
.balance {
|
color: #333333;
|
font-size: 36px;
|
font-weight: Bold;
|
text-align: center;
|
margin-top: 10px;
|
margin-bottom: 14px;
|
}
|
}
|
.right {
|
& {
|
width: 50%;
|
margin-right: 10px;
|
text-align: center;
|
}
|
}
|
}
|
.tab {
|
& {
|
width: 94%;
|
display: flex;
|
flex-wrap: wrap;
|
margin-top: 1.06rem;
|
margin-left: 3%;
|
}
|
.checked {
|
background-color: white !important;
|
color: #896edb !important;
|
}
|
.packet-box::-webkit-scrollbar,.withdrawals-box::-webkit-scrollbar {
|
display: none;
|
}
|
.packet-records {
|
width: 50%;
|
height: 44px;
|
font-weight: Bold;
|
font-size: 16px;
|
color: #666666;
|
background-color: #fafafa;
|
border-radius: 10px 10px 0px 0px;
|
p {
|
text-align: center;
|
line-height: 44px;
|
}
|
}
|
.withdrawals-record {
|
font-weight: Bold;
|
width: 50%;
|
height: 44px;
|
font-size: 16px;
|
color: #666666;
|
background-color: #fafafa;
|
border-radius: 10px 10px 0px 0px;
|
p {
|
text-align: center;
|
line-height: 44px;
|
}
|
}
|
.packet-box {
|
& {
|
width: 100%;
|
height: 325px;
|
overflow: scroll;
|
background-color: #ffffff;
|
box-sizing: border-box;
|
padding: 8px 24px 24px 24px;
|
}
|
.content-box {
|
border-bottom: 1px solid #eeeeee;
|
box-sizing: border-box;
|
padding: 16px 0 16px 0;
|
p:nth-of-type(1) {
|
font-size: 14px;
|
font-weight: bold;
|
margin-bottom: 5px;
|
}
|
p:nth-of-type(2) {
|
margin-bottom: 10px;
|
span:nth-of-type(1) {
|
display: inline-block;
|
font-size: 12px;
|
color: #666666;
|
width: 50%;
|
text-align: left;
|
}
|
span:nth-of-type(2) {
|
font-size: 18px;
|
color: #ff6666;
|
display: inline-block;
|
text-align: right;
|
width: 48%;
|
}
|
}
|
p:nth-of-type(3) {
|
margin-bottom: 10px;
|
font-size: 12px;
|
color: #666666;
|
}
|
}
|
}
|
.withdrawals-box {
|
& {
|
width: 100%;
|
height: 300px;
|
overflow: scroll;
|
background-color: #ffffff;
|
box-sizing: border-box;
|
padding: 8px 24px 24px 24px;
|
}
|
.content-box-two {
|
border-bottom: 1px solid #eeeeee;
|
box-sizing: border-box;
|
padding: 16px 0 16px 0;
|
display: flex;
|
.left,
|
.right {
|
width: 50%;
|
}
|
.left {
|
p:nth-of-type(1) {
|
margin-bottom: 10px;
|
color: #666666;
|
font-size: 12px;
|
}
|
p:nth-of-type(2) {
|
color: #666666;
|
font-size: 12px;
|
}
|
}
|
.right {
|
box-sizing: border-box;
|
padding-top: 10px;
|
p {
|
color: #666666;
|
font-size: 18px;
|
text-align: right;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
