114 lines
3.2 KiB
Vue
114 lines
3.2 KiB
Vue
<template>
|
|
<view>
|
|
<CuNavbar title="报销管理">
|
|
<template #right>
|
|
<view
|
|
@click="goPath('/pages/expense-account/submit')"
|
|
class="text-24rpx text-white"
|
|
>申请</view
|
|
>
|
|
</template>
|
|
</CuNavbar>
|
|
<uv-sticky bgColor="#fff">
|
|
<uv-tabs
|
|
:activeStyle="{ color: '#ee2c37' }"
|
|
:scrollable="false"
|
|
lineColor="#ee2c37"
|
|
:list="tabList"
|
|
></uv-tabs>
|
|
</uv-sticky>
|
|
<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
|
|
<view class="px-base space-y-20rpx mt-30rpx">
|
|
<view
|
|
v-for="item in list"
|
|
:key="item.id"
|
|
class="card-shadow bg-white rounded-19rpx p-base space-y-10rpx"
|
|
>
|
|
<view class="flex items-center justify-between">
|
|
<view class="text-30rpx"> {{ item.type.name }} </view>
|
|
<view
|
|
:style="[
|
|
{
|
|
color: statusFun(
|
|
item.workflow_check.check_status,
|
|
'statusExpense',
|
|
'color'
|
|
),
|
|
},
|
|
]"
|
|
class="text-24rpx"
|
|
>{{ item.workflow_check.check_status_text }}</view
|
|
>
|
|
</view>
|
|
<view class="text-24rpx text-hex-999999 flex">
|
|
<view class="w-140rpx">报销金额</view>
|
|
<view class="text-primary">{{ item.expense }}</view>
|
|
</view>
|
|
<view class="text-24rpx text-hex-999999 flex">
|
|
<view class="w-140rpx">报销时间</view>
|
|
<view class="text-hex-333">{{ timeFormat(item.created_at) }}</view>
|
|
</view>
|
|
<view class="text-24rpx text-hex-999999">
|
|
<view class="">
|
|
<text class="w-140rpx inline-block">报销原因:</text>
|
|
<text class="text-hex-333 leading-27rpx">{{ item.reason }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</mescroll-body>
|
|
</view>
|
|
</template>
|
|
<script setup>
|
|
import CuNavbar from '@/components/cu-navbar/index'
|
|
import { http } from '@/utils/request'
|
|
import { ref } from 'vue'
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
|
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js'
|
|
import { timeFormat } from '@climblee/uv-ui/libs/function'
|
|
import statusFun from '@/utils/status'
|
|
const { mescrollInit, downCallback, getMescroll } = useMescroll(
|
|
onPageScroll,
|
|
onReachBottom
|
|
)
|
|
const list = ref([])
|
|
|
|
const tabList = ref([
|
|
{
|
|
name: '我的报销',
|
|
},
|
|
{
|
|
name: '报销审核',
|
|
},
|
|
])
|
|
|
|
const upCallback = async (mescroll) => {
|
|
const { size, num } = mescroll
|
|
|
|
try {
|
|
const resData = await http.get('/reimbursements', {
|
|
params: {
|
|
per_page: size,
|
|
page: num,
|
|
},
|
|
})
|
|
const curPageData = resData || []
|
|
if (num === 1) list.value = []
|
|
list.value = list.value.concat(curPageData)
|
|
mescroll.endSuccess(curPageData.length)
|
|
} catch (error) {
|
|
console.log(error)
|
|
mescroll.endErr() // 请求失败, 结束加载
|
|
} finally {
|
|
// firstloading.value = false
|
|
}
|
|
}
|
|
|
|
const goPath = (url) => {
|
|
uni.navigateTo({
|
|
url,
|
|
})
|
|
}
|
|
</script>
|