150 lines
3.4 KiB
Vue
150 lines
3.4 KiB
Vue
<template>
|
|
<view class="wallet">
|
|
<view class="bg"></view>
|
|
<view class="block">
|
|
<view class="bg-white balance u-m-l-16 u-m-r-16 br24 column-center">
|
|
<view>账户余额(元)</view>
|
|
<view class="u-m-t-14 bold-600 xxl">￥ {{ wallet.user_money }}</view>
|
|
</view>
|
|
|
|
<view class="bg-white wallet-btn u-m-t-24 u-m-l-16 u-m-r-16 row-between br24">
|
|
<view>
|
|
<navigator hover-class="none" url="/pages/recharge/balance" class="row">
|
|
<u-image :src="cloudPath + 'img/icon_my_wallet.png'" width="56" height="56"></u-image>
|
|
<text class="u-m-l-18 nr">充值</text>
|
|
</navigator>
|
|
</view>
|
|
<view>
|
|
<u-line color="#EEE" direction="col" length="60"/>
|
|
</view>
|
|
<view>
|
|
<navigator hover-class="none" url="/pages/recharge/record" class="row">
|
|
<u-image :src="cloudPath + 'img/icon_my_wallet_record.png'" width="56" height="56"></u-image>
|
|
<text class="u-m-l-18 nr">充值记录</text>
|
|
</navigator>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="list bg-white br16 u-p-32" style="height: 962rpx;">
|
|
<view class="lg">钱包明细</view>
|
|
<scroll-view scroll-y="true" style="height: 880rpx;" :refresher-enabled="true"
|
|
:refresher-triggered="isRefreshing"
|
|
@refresherrefresh="refreshCallback"
|
|
@scrolltolower="upCallback">
|
|
<view class="u-m-t-16">
|
|
<view class="u-m-b-16" v-for="(item, index) in lists" :key="index">
|
|
<view class="nr row-between">
|
|
<view>{{ item.source_type }}</view>
|
|
<view class="deduct">{{ item.change_amount }}</view>
|
|
</view>
|
|
<view class="date xs u-m-t-16">{{ item.change_amount }}</view>
|
|
</view>
|
|
</view>
|
|
<loading-footer :status="loadingStatus"></loading-footer>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
|
|
import { getWallet, getAccountLog } from '@/api/user'
|
|
import { loadingType } from "@/utils/type"
|
|
import { loadingFun } from "@/utils/tools"
|
|
export default {
|
|
mixins: [MescrollMixin],
|
|
data() {
|
|
return {
|
|
wallet: {},
|
|
page: 1,
|
|
loadingStatus: loadingType.LOADING,
|
|
lists: [],
|
|
isRefreshing: false // 控制刷新状态
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getWalletFun()
|
|
this.upCallback()
|
|
},
|
|
methods: {
|
|
refreshCallback() {
|
|
this.isRefreshing = true;
|
|
this.page = 1
|
|
this.lists = []
|
|
this.loadingStatus = loadingType.LOADING
|
|
this.upCallback()
|
|
},
|
|
|
|
// 初始化数据
|
|
upCallback() {
|
|
let {
|
|
lists,
|
|
loadingStatus,
|
|
page
|
|
} = this;
|
|
loadingFun(getAccountLog, page, lists, loadingStatus, { source: 1, type: 0}).then(res => {
|
|
if(res) {
|
|
setTimeout(() => {
|
|
this.isRefreshing = false;
|
|
}, 500);
|
|
this.page = res.page;
|
|
this.lists = res.dataList
|
|
this.loadingStatus = res.status
|
|
}
|
|
})
|
|
},
|
|
|
|
// 获取钱包数据
|
|
getWalletFun() {
|
|
getWallet().then(res => {
|
|
this.wallet = res.data
|
|
console.log("wallet>>>", this.wallet);
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.wallet {
|
|
position: relative;
|
|
}
|
|
.bg {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: #517AAD;
|
|
height: 320rpx;
|
|
}
|
|
|
|
.block {
|
|
position: absolute;
|
|
top: 24rpx;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.balance {
|
|
height: 209rpx;
|
|
}
|
|
|
|
.wallet-btn {
|
|
height: 150rpx;
|
|
padding: 0 100rpx;
|
|
}
|
|
|
|
.list {
|
|
margin: 22rpx 34rpx;
|
|
height: 962rpx;
|
|
box-shadow: 0rpx 6rpx 28rpx 4rpx rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.deduct {
|
|
color: rgba(0, 0, 0, 0.6)
|
|
}
|
|
|
|
.date {
|
|
color: rgba(0, 0, 0, 0.4)
|
|
}
|
|
</style> |