You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
345 lines
8.5 KiB
345 lines
8.5 KiB
<!-- 我的钱包 -->
|
|
<template>
|
|
<view class="wallet-wrap">
|
|
<!-- 钱包卡片 -->
|
|
<view class="head_box u-flex u-row-center u-col-center">
|
|
<view class="card-box">
|
|
<view class="card-head u-flex u-col-center">
|
|
<view class="card-title u-m-r-10">可提现金额（元）</view>
|
|
<view @tap="showMoney = !showMoney" class="u-iconfont"
|
|
:class="showMoney ? 'uicon-eye' : 'uicon-eye-off'" style="color: #fff;font-size: 46rpx;"></view>
|
|
</view>
|
|
<view class="money-num u-p-t-50">{{ showMoney ? userInfo.money || '0.00' : '*****' }}</view>
|
|
<button v-if="initRecharge.enable ==='1'" class="u-reset-button topup-btn"
|
|
@tap="$Router.push('/pages/user/wallet/top-up')">充值</button>
|
|
<button class="u-reset-button withdraw-btn"
|
|
@tap="$Router.push('/pages/user/wallet/withdraw')">提现</button>
|
|
</view>
|
|
</view>
|
|
<!-- 筛选 -->
|
|
<u-sticky offset-top="0" :enable="true">
|
|
<view class="filter-box u-flex u-row-between">
|
|
<button class="u-reset-button date-btn u-flex" @tap="showCalendar = true">
|
|
{{ selDateText }}
|
|
<text class="u-iconfont uicon-arrow-down-fill u-m-l-20" style="color: #e5e5e5"></text>
|
|
</button>
|
|
<view class="total-box">收入￥{{ incomeMoney || '0.00' }} 支出￥{{ expendMoney || '0.00' }}</view>
|
|
</view>
|
|
<!-- 状态分类 -->
|
|
<view class="u-flex nav-box">
|
|
<view class="state-item u-flex-1 " v-for="(state, index) in statusList" :key="state.value"
|
|
@tap="onTab(state.value)">
|
|
<text class="state-title"
|
|
:class="{ 'title-active': stateCurrent === state.value }">{{ state.name }}</text>
|
|
<text class="underline" :class="{ 'underline-active': stateCurrent === state.value }"></text>
|
|
</view>
|
|
</view>
|
|
</u-sticky>
|
|
|
|
<!-- 钱包记录 -->
|
|
<view class="wallet-list u-flex" v-for="item in walletLog" :key="item.id">
|
|
<image class="head-img u-m-r-20" :src="item.avatar" mode=""></image>
|
|
<view class="list-content">
|
|
<view class="title-box u-flex u-row-between">
|
|
<text class="title u-ellipsis-1">{{ item.type_name }}{{ item.title ? '-' + item.title : '' }}</text>
|
|
<view class="money">
|
|
<text v-if="item.wallet >= 0" class="add font-OPPOSANS">+{{ item.wallet }}</text>
|
|
<text v-else class="minus font-OPPOSANS">{{ item.wallet }}</text>
|
|
</view>
|
|
</view>
|
|
<text class="time">{{ $u.timeFormat(item.createtime, 'yyyy-mm-dd hh:MM') }}</text>
|
|
</view>
|
|
</view>
|
|
<!-- 空置页 -->
|
|
<shopro-empty v-if="isEmpty" marginTop="200rpx" :image="$IMG_URL + '/imgs/empty/no_data.png'" tipText="暂无数据~">
|
|
</shopro-empty>
|
|
<!-- 更多 -->
|
|
<u-loadmore v-if="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
|
|
<!-- 日期选择 -->
|
|
<u-calendar v-model="showCalendar" ref="uCalendar" safeAreaInsetBottom mode="range" start-text="开始"
|
|
end-text="结束" active-bg-color="#7063d2" active-color="#fff" range-bg-color="#e5e2ff" range-color="#7063d2"
|
|
:customStyle="{ background: 'linear-gradient(90deg, #A36FFF, #5336FF)', boxShadow: '0 7rpx 11rpx 2rpx rgba(124, 103, 214, 0.34)' }"
|
|
@change="selDate"></u-calendar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState, mapActions, mapGetters } from 'vuex';
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {
|
|
isEmpty: false,
|
|
stateCurrent: 'all', //默认
|
|
statusList: [{
|
|
name: '全部',
|
|
value: 'all'
|
|
},
|
|
{
|
|
name: '收入',
|
|
value: 'add'
|
|
},
|
|
{
|
|
name: '支出',
|
|
value: 'reduce'
|
|
}
|
|
],
|
|
showMoney: true,
|
|
//日期选择
|
|
showCalendar: false,
|
|
selDateText: '',
|
|
walletLog: [], //钱包记录
|
|
propsDate: '', //日期参数
|
|
incomeMoney: '', //收入
|
|
expendMoney: '', //支出
|
|
loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
|
|
currentPage: 1,
|
|
lastPage: 1
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters(['isLogin', 'userInfo', 'initRecharge'])
|
|
},
|
|
onShow() {
|
|
this.isLogin && this.getUserInfo();
|
|
this.getToday();
|
|
this.currentPage = 1;
|
|
this.lastPage = 1;
|
|
this.walletLog = [];
|
|
this.getWalletLog();
|
|
},
|
|
// 触底加载更多
|
|
onReachBottom() {
|
|
if (this.currentPage < this.lastPage) {
|
|
this.currentPage += 1;
|
|
this.getWalletLog();
|
|
}
|
|
},
|
|
methods: {
|
|
...mapActions(['getUserInfo']),
|
|
// 今日
|
|
getToday() {
|
|
let now = new Date();
|
|
let dateText = `${now.getFullYear()}/${now.getMonth() + 1}/${now.getDate()}`;
|
|
this.selDateText = `${now.getFullYear()}.${now.getMonth() + 1}.${now.getDate()}`;
|
|
this.propsDate = `${dateText}-${dateText}`;
|
|
},
|
|
// tab切换
|
|
onTab(state) {
|
|
if (this.stateCurrent !== state) {
|
|
this.stateCurrent = state;
|
|
this.currentPage = 1;
|
|
this.lastPage = 1;
|
|
this.walletLog = [];
|
|
this.getWalletLog();
|
|
}
|
|
},
|
|
// 日期选择
|
|
selDate(e) {
|
|
this.walletLog = [];
|
|
this.currentPage = 1;
|
|
this.lastPage = 1;
|
|
this.selDateText = `${e.startYear}.${e.startMonth}.${e.startDay}-${e.endYear}.${e.endMonth}.${e.endDay}`;
|
|
let dateText = `${e.startYear}/${e.startMonth}/${e.startDay}-${e.endYear}/${e.endMonth}/${e.endDay}`;
|
|
this.propsDate = dateText;
|
|
this.getWalletLog();
|
|
this.$refs.uCalendar.init();
|
|
},
|
|
// 钱包明细
|
|
getWalletLog() {
|
|
let that = this;
|
|
that.loadStatus = 'loading';
|
|
that.$http('money.walletLog', {
|
|
wallet_type: 'money',
|
|
status: that.stateCurrent,
|
|
date: that.propsDate,
|
|
page: that.currentPage
|
|
}).then(res => {
|
|
if (res.code === 1) {
|
|
that.walletLog = [...that.walletLog, ...res.data.wallet_logs.data];
|
|
that.incomeMoney = res.data.income;
|
|
that.expendMoney = Math.abs(res.data.expend);
|
|
that.isEmpty = !that.walletLog.length;
|
|
that.lastPage = res.data.wallet_logs.last_page;
|
|
that.loadStatus = that.currentPage < res.data.wallet_logs.last_page ? 'loadmore' :
|
|
'nomore';
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
// 钱包记录
|
|
.wallet-list {
|
|
width: 750rpx;
|
|
padding: 30rpx;
|
|
background-color: #ffff;
|
|
border-bottom: 1rpx solid #eeeeee;
|
|
|
|
.head-img {
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
border-radius: 50%;
|
|
background: #ccc;
|
|
}
|
|
|
|
.list-content {
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
flex: 1;
|
|
|
|
.title {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
width: 400rpx;
|
|
}
|
|
|
|
.time {
|
|
color: #c0c0c0;
|
|
font-size: 22rpx;
|
|
}
|
|
}
|
|
|
|
.money {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
|
|
.add {
|
|
color: #7063d2;
|
|
}
|
|
|
|
.minus {
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 钱包
|
|
.head_box {
|
|
width: 750rpx;
|
|
background-color: #fff;
|
|
padding: 30rpx 0;
|
|
|
|
.card-box {
|
|
width: 690rpx;
|
|
min-height: 300rpx;
|
|
padding: 40rpx;
|
|
background: url($IMG_URL+'/imgs/user/money_wallet_bg.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
box-shadow: 1rpx 5rpx 16rpx 0 rgba(94, 73, 195, 0.81);
|
|
border-radius: 30rpx;
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
.card-head {
|
|
color: #fff;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.money-num {
|
|
font-size: 70rpx;
|
|
line-height: 70rpx;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.reduce-num {
|
|
font-size: 26rpx;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.withdraw-btn {
|
|
width: 120rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
background: #ffffff;
|
|
border-radius: 30px;
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
color: #5848c4;
|
|
position: absolute;
|
|
right: 30rpx;
|
|
top: 40rpx;
|
|
}
|
|
|
|
.topup-btn {
|
|
width: 120rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
border-radius: 30px;
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
color: #fff;
|
|
border: 1px solid #fff;
|
|
position: absolute;
|
|
right: 180rpx;
|
|
top: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 筛选
|
|
|
|
.filter-box {
|
|
height: 120rpx;
|
|
padding: 0 30rpx;
|
|
background-color: #f6f6f6;
|
|
|
|
.date-btn {
|
|
background-color: #fff;
|
|
line-height: 54rpx;
|
|
border-radius: 27rpx;
|
|
padding: 0 20rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
color: #666666;
|
|
}
|
|
|
|
.total-box {
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
// 分类
|
|
.state-item {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #fff;
|
|
border-bottom: 1rpx solid rgba(#999, 0.5);
|
|
|
|
.state-title {
|
|
color: #666;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
line-height: 90rpx;
|
|
}
|
|
|
|
.title-active {
|
|
color: #333;
|
|
}
|
|
|
|
.underline {
|
|
display: block;
|
|
width: 68rpx;
|
|
height: 4rpx;
|
|
background: #fff;
|
|
border-radius: 2rpx;
|
|
}
|
|
|
|
.underline-active {
|
|
background: #5e49c3;
|
|
display: block;
|
|
width: 68rpx;
|
|
height: 4rpx;
|
|
border-radius: 2rpx;
|
|
}
|
|
}
|
|
</style>
|
|
|