hbsmUniapp/src/pagesShop/pages/balance/balance.vue

205 lines
4.8 KiB
Vue
Raw Normal View History

2025-08-19 23:31:48 +08:00
<script setup lang="ts">
import { nextTick, ref } from 'vue'
import { onLoad, onPageScroll, onReachBottom, onShow } from '@dcloudio/uni-app'
import useZPaging from '@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js'
import { getBalanceLogApi } from '@/api/member'
import type { balanceLogResultItem } from '@/types/member'
import type { TabItem } from '@/types/global'
import { pageUrl } from '@/utils/constants'
const paging = ref()
useZPaging(paging)
const dataList = ref<balanceLogResultItem[]>([])
const statisticsData = ref({
balance: '0',
total_recharge: '0',
total_expend: '0',
})
const tabList = ref<TabItem[]>([])
const tabIndex = ref(0)
const tabsChange = (index: number) => {
tabIndex.value = index
paging.value.refresh()
}
const dataTypes = ref<TabItem[]>()
const queryList = (page: number, page_size: number) => {
const params = {
page,
page_size,
type: tabList.value[tabIndex.value]?.value ?? 'all',
}
getBalanceLogApi(params).then((res) => {
paging.value.complete(res.result.data)
tabList.value = res.result.tabs
statisticsData.value = res.result.statistics
dataTypes.value = res.result.types
})
}
const toRecharge = () => {
uni.navigateTo({
url: `${pageUrl['balance-recharge']}`,
})
}
const getTypeDesc = (type: number) => {
return dataTypes.value!.find((item) => Number(item.value) == type)?.name ?? ''
}
onShow(() => {
nextTick(() => {
paging.value.reload()
})
})
</script>
<template>
<view class="container">
<z-paging
ref="paging"
v-model="dataList"
@query="queryList"
:safe-area-inset-bottom="true"
:auto="false"
:paging-style="{ background: '#fff' }"
>
<template #top>
<view style="margin: 10rpx">
<view class="card">
<view class="card-item">
<view class="top">
<view class="total">
<view class="title">当前余额</view>
<text class="money" id="statistics_balance">{{ statisticsData.balance }}</text>
</view>
<view class="button">
<button hover-class="button-hover" @tap="toRecharge">充值</button>
</view>
</view>
<view class="cumulative">
<view>
<view class="title">累计充值(不含赠送)</view>
<text class="money">{{ statisticsData.total_recharge }}</text>
</view>
<view>
<view class="title">累计支出</view>
<text class="money">{{ statisticsData.total_expend }}</text>
</view>
</view>
</view>
</view>
</view>
<z-tabs :list="tabList" @change="tabsChange" :current="tabIndex" />
</template>
<view class="list">
<view class="list-item" v-for="(item, index) in dataList" :key="index">
<view>
<view class="desc"> {{ getTypeDesc(item.type) }}</view>
<view class="memo">{{ item.memo }}</view>
<view class="time">{{ item.create_time }}</view>
</view>
<view class="money">
<view v-if="Number(item.money) >= 0" class="add">+{{ item.money }}</view>
<view v-else class="sub">{{ item.money }}</view>
</view>
</view>
</view>
</z-paging>
</view>
</template>
<style lang="scss">
.container {
.card {
width: 100%;
background-color: #ff5f3c;
border-radius: 30rpx;
padding: 5rpx;
.card-item {
padding: 30rpx;
color: #fff;
font-size: 26rpx;
text {
font-size: 40rpx;
}
& > view {
margin-bottom: 30rpx;
}
}
}
.top {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 20rpx;
.money {
display: flex;
flex-direction: column;
}
button {
font-size: 26rpx;
border-radius: 24rpx;
line-height: 60rpx;
}
}
.cumulative {
display: flex;
justify-content: space-between;
}
.title {
padding-bottom: 10rpx;
}
.list {
font-size: 30rpx;
&-item {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #eee;
padding: 35rpx;
.desc {
padding-bottom: 15rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 500rpx;
}
.memo {
font-size: 26rpx;
padding-bottom: 15rpx;
overflow: hidden;
text-overflow: ellipsis;
width: 500rpx;
color: #666;
}
.time {
color: #999;
font-size: 24rpx;
}
.money {
.add {
color: red;
}
.sub {
color: green;
}
}
}
}
}
</style>