fuyuan-housekeeping-uniapp/src/bundle/pages/account_detail/components/list.vue

112 lines
2.8 KiB
Vue

<template>
<z-paging ref="paging" v-model="balance.lists" @query="queryList" :fixed="false" height="100%">
<!-- 余额明细列表 -->
<view class="balance-details">
<view v-for="(item, index) in balance.lists" :key="index">
<view class="balance-details-item">
<view class="flex">
<view class="flex-1 balance-details-item-text">{{
item?.changeTypeDesc
}}</view>
<view
class="balance-details-item-amount"
:class="{ 'text-error': item.action === 0 }"
>
{{ item.actionDesc + item.changeAmount }}
</view>
</view>
<view class="balance-details-item-time">{{ item.remark }}</view>
<view class="balance-details-item-time">{{ item.createTime }}</view>
</view>
</view>
</view>
</z-paging>
</template>
<script lang="ts" setup>
import { reactive, watch, shallowRef } from 'vue'
import { apiAccountLogLists } from '@/api/wallet'
import { onLoad } from '@dcloudio/uni-app'
const props = withDefaults(
defineProps<{
status: string | number
index: number
}>(),
{
status: ''
}
)
watch(
() => props.index,
async () => {
paging.value.reload()
},
{ immediate: true }
)
const balance = reactive({
lists: [] as any,
change_type: 1
})
// 下拉组件的Ref
const paging = shallowRef()
const queryList = async (pageNo = 1, pageSize = 10) => {
try {
const { lists } = await apiAccountLogLists({
action: props.status,
pageNo,
pageSize
})
paging.value.complete(lists)
} catch (e) {
paging.value.complete(false)
}
}
onLoad((options: any) => {
balance.change_type = options.changeObject
if (balance.change_type == 2) {
uni.setNavigationBarTitle({
title: '佣金明细'
})
}
})
</script>
<style lang="scss" scoped>
.balance-details {
.balance-details-item {
background-color: #fff;
padding: 20rpx 30rpx;
border-bottom: 1rpx solid #ebebeb;
.balance-details-item-text {
font-size: 30rpx;
font-weight: 400;
}
.balance-details-item-amount-add {
font-size: 34rpx;
font-weight: 400;
color: #ff0017;
}
.balance-details-item-amount {
font-size: 34rpx;
font-weight: 400;
}
.balance-details-item-time {
font-size: 24rpx;
font-weight: 400;
color: #999;
margin-top: 10rpx;
}
}
}
</style>