125 lines
3.0 KiB
Vue
125 lines
3.0 KiB
Vue
<template>
|
|
<view>
|
|
<wd-navbar title="我的账单" :bordered="false" left-arrow custom-style="background-color: transparent !important;" safeAreaInsetTop @click-left="back"></wd-navbar>
|
|
<z-paging ref="paging" :refresher-enabled="showLoading" v-model="dataList" use-page-scroll @query="queryList">
|
|
<view class="p30">
|
|
|
|
|
|
|
|
<view>
|
|
<view style="display: flex; align-items: center; justify-content: space-between">
|
|
<image style="width: 74rpx; height: 34rpx" mode="widthFix" src="/static/icons/zhangdan.png"></image>
|
|
|
|
<wd-picker @close="showLoading = true" @open="showLoading = false" :columns="columns" v-model="queryPrams.bizType" use-default-slot @confirm="handleConfirm">
|
|
<view style="display: flex; align-items: center; font-size: 28rpx">
|
|
{{ typeName || '筛选' }}
|
|
<image style="margin-left: 15rpx; width: 35rpx; height: 35rpx" src="/static/icons/xia.png"></image>
|
|
</view>
|
|
</wd-picker>
|
|
</view>
|
|
|
|
<view class="wall_list" v-for="(item, index) in dataList" :key="index">
|
|
<view>
|
|
<view style="margin-bottom: 25rpx; font-size: 28rpx">{{ item.title }}</view>
|
|
<view style="font-size: 24rpx; color: #999">
|
|
{{ timeFormat(item.createTime, 'yyyy-MM-dd hh:mm:ss') }}
|
|
</view>
|
|
</view>
|
|
<view style="font-size: 32rpx; font-weight: bold; color: #799675">￥{{ item.money }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</z-paging>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed } from 'vue';
|
|
import api from '@/api/index';
|
|
import { Store } from '@/store';
|
|
const store = Store();
|
|
const paging = ref(null);
|
|
const dataList = ref([]);
|
|
const columns = ref([]);
|
|
|
|
const showLoading = ref(true);
|
|
|
|
const typeName = ref('');
|
|
|
|
const queryPrams = ref({
|
|
bizType: ''
|
|
});
|
|
|
|
const userInfo = computed(
|
|
() =>
|
|
store.userInfo || {
|
|
inviteCode: '',
|
|
nickname: '',
|
|
mobile: '',
|
|
avatar: '',
|
|
paywallet: {
|
|
balance: 0
|
|
}
|
|
}
|
|
);
|
|
|
|
import { timeFormat } from '@/utils/fun.js';
|
|
|
|
const queryList = (pageNo, pageSize) => {
|
|
api.moneyRecord({ pageNo, pageSize, ...queryPrams.value })
|
|
.then((res: any) => {
|
|
columns.value = Object.entries(res.bizType).map(([value, label]) => ({
|
|
value,
|
|
label
|
|
}));
|
|
columns.value.unshift({
|
|
label: '全部',
|
|
value: ''
|
|
});
|
|
paging.value.complete(res.list);
|
|
})
|
|
.catch((res) => {
|
|
paging.value.complete(false);
|
|
});
|
|
};
|
|
|
|
const handleConfirm = (e) => {
|
|
if (!e.value) {
|
|
typeName.value = '';
|
|
} else {
|
|
typeName.value = e.selectedItems.label;
|
|
}
|
|
paging.value.reload();
|
|
};
|
|
|
|
const back = () => {
|
|
uni.navigateBack();
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.block_wall {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
&_tit {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.wall_list {
|
|
width: 690rpx;
|
|
height: 118rpx;
|
|
background: #ffffff;
|
|
box-shadow: 0rpx 2rpx 8rpx 2rpx rgba(0, 88, 219, 0.06);
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 30rpx;
|
|
margin-top: 30rpx;
|
|
}
|
|
</style>
|