128 lines
2.8 KiB
Vue
128 lines
2.8 KiB
Vue
<template>
|
||
<j-nav-bar color="#FFF" nav-bar-background="#f9bf3a"/>
|
||
<div>
|
||
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
||
<van-list
|
||
v-model:loading="loading"
|
||
:finished="finished"
|
||
finished-text="没有更多了"
|
||
@load="onLoad"
|
||
>
|
||
|
||
<view class="j-item" v-for="item in borrowList" :key="item.id" @click="goInfo(item.tradeNo)">
|
||
<view class="j-item-t">贷款编号：{{item.tradeNo}}</view>
|
||
|
||
<view style="display: flex; justify-content: space-between">
|
||
|
||
<view class="j-item-c">
|
||
<view>贷款总额：{{ item.totalLoanMoney }}元</view>
|
||
<view class="yellow_color1">每期还款：{{ item.avgRepayment }}*{{ item.totalMonth }}</view>
|
||
<view>贷款申请日期：{{ new Date(item.createTime).format('yyyy-MM-dd hh:mm:ss') }}</view>
|
||
</view>
|
||
|
||
<view :style="{paddingRight: px2vw(20)}" @click.stop="toContract(item.tradeNo)" style="display: flex; justify-content: center; align-items: center; flex-flow: column">
|
||
<van-icon size="50" name="orders-o" />
|
||
合同
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</van-list>
|
||
</van-pull-refresh>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import {onMounted, reactive, ref} from "vue";
|
||
import {getBorrowPage} from "@/api";
|
||
import {useRouter} from "vue-router";
|
||
import {px2vw} from "@/utils";
|
||
const list = ref([]);
|
||
const loading = ref(false);
|
||
const finished = ref(false);
|
||
const refreshing = ref(false);
|
||
|
||
|
||
const router = useRouter()
|
||
|
||
const onLoad = () => {
|
||
if (refreshing.value) {
|
||
list.value = [];
|
||
refreshing.value = false;
|
||
}
|
||
|
||
_getBorrowPage()
|
||
loading.value = false;
|
||
};
|
||
|
||
const onRefresh = () => {
|
||
// 清空列表数据
|
||
finished.value = false;
|
||
|
||
// 重新加载数据
|
||
// 将 loading 设置为 true，表示处于加载状态
|
||
loading.value = true;
|
||
onLoad();
|
||
};
|
||
|
||
const borrowPage = {
|
||
pageNum: 0,
|
||
pageSize: 100,
|
||
}
|
||
const borrowList = reactive([])
|
||
const _getBorrowPage = () => {
|
||
getBorrowPage(borrowPage).then(res => {
|
||
borrowList.newPush(res)
|
||
})
|
||
}
|
||
|
||
const goInfo = (tradeNo) => {
|
||
router.push({
|
||
path: '/borrowInfo',
|
||
query: {
|
||
tradeNo: tradeNo
|
||
}
|
||
})
|
||
}
|
||
const toContract = (tradeNo) => {
|
||
router.push({
|
||
path: '/contract',
|
||
query: {
|
||
tradeNo: tradeNo
|
||
}
|
||
})
|
||
}
|
||
|
||
onMounted(() => {
|
||
_getBorrowPage()
|
||
})
|
||
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.j-item {
|
||
display: flex;
|
||
flex-flow: column;
|
||
margin: 20px;
|
||
border-radius: 10px;
|
||
box-shadow: 0 0 1vw 0px #e0e0e0;
|
||
background: #fff;
|
||
overflow: hidden;
|
||
&-t {
|
||
padding: 20px;
|
||
display: flex;
|
||
width: 100%;
|
||
background: #f9fbff;
|
||
color: #738aa4;
|
||
}
|
||
&-c {
|
||
padding: 20px;
|
||
display: flex;
|
||
width: 100%;
|
||
flex-flow: column;
|
||
}
|
||
}
|
||
|
||
|
||
</style> |