dingdong-mall/pages/my/my-money-bag.vue

86 lines
2.4 KiB
Vue
Raw Normal View History

2022-05-26 20:24:33 +08:00
<template>
<view>
<!-- 顶部操作条 -->
<cu-custom :bgColor="'bg-main-color'" :isBack="true">
<block slot="backText">返回</block>
<block slot="content">我的钱包</block>
</cu-custom>
<view class="margin-sm shadow-warp">
<view class="padding-tb-lg padding-lr bg-gradual-color light">
<view>账户余额</view>
<view class="flex justify-between margin-top-sm">
<view class="text-xxl">{{myMoneyBag.balance}}</view>
</view>
<view class="flex justify-end margin-top-sm align-center">
<view class="margin-lr-sm text-lg">{{myMoneyBag.bankNum}}</view>
<view class="cu-btn bg-white radius" @click="bindBankAccount">账户绑定</view>
</view>
</view>
</view>
<view class="margin-bottom-lg">
<view v-for="(billItem, index) in myMoneyBag.bill">
<uni-collapse v-model="openStatusArr[index]">
<uni-collapse-item>
<template v-slot:title>
<view class="padding bg-white">
<view class="margin-bottom-xs">{{billItem.duration}}</view>
<view>
<text class="margin-right"><text>支出</text><text class="text-price text-black">{{billItem.outgoings}}</text></text>
<text><text>收入</text><text class="text-price text-black">{{billItem.income}}</text></text>
</view>
</view>
</template>
<view>
<view v-for="(item, index1) in billItem.statement" class="bg-white padding flex justify-between align-center" @click="showDetail">
<view>
<view class="margin-bottom-xs">{{item.name}}</view>
<view>{{item.createTime}}</view>
</view>
<view class="text-price text-black">{{item.inOutMoney}}</view>
</view>
</view>
</uni-collapse-item>
</uni-collapse>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
openStatusArr: [['0']], //0打开1收起
myMoneyBag: {}
}
},
onLoad() {
this.loadData();
},
onShow() {
// TODO: 查询展示绑定的账户
},
methods: {
async loadData() {
this.myMoneyBag = await this.$api.data('myMoneyBag');
for(let i = 0; i < this.myMoneyBag.bill.length - 1; i++) {
this.openStatusArr.concat(['1']);
}
},
showDetail() {
uni.navigateTo({
url: '/pages/my/statement-desc'
})
},
bindBankAccount() {
uni.navigateTo({
url: '/pages/my/bank-account-bind'
})
}
},
}
</script>
<style>
</style>