product.vue
3.22 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<template>
<div class="app_container">
<!--<div class="product_company">
<div>所属核心企业：</div>
<el-select v-model="coreCompanyId" placeholder="请选择所属核心企业">
<el-option
v-for="item in coreCompanyList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>-->
<el-skeleton animated :loading="state.isLoading" :count="5">
<template #template>
<el-skeleton-item style="background: linear-gradient(90deg,#dadaf5 25%,#cbc8ff 37%,#c6c7fd 63%); background-size: 400% 100%;"></el-skeleton-item>
</template>
<template #default>
<el-empty v-if="state.productList && state.productList.length == 0" description="暂无数据，请先进行企业认证" />
<div v-else v-for="item in state.productList" class="product_wrap">
<el-row>
<el-col :span="16">
<div class="product_name">{{item.productName}}</div>
<div class="limit_dsc">最高可借额度（元）</div>
<div class="limit_num">{{util.moneyFormat(item.loanLimitMax*10000)}}</div>
</el-col>
<el-col :span="8" class="btn_wrap">
<el-button type="primary" round :loading="loading" @click="detail(item.productId)" class="primary-btn">立即借款</el-button>
</el-col>
</el-row>
<el-divider style="margin: 20px 0px"/>
<el-row>
<el-col :span="12">
<div class="product_dsc">期限长达<span>{{item.timeLimitMax}}</span>个月</div>
</el-col>
<el-col :span="12">
<div class="product_dsc">利率低至<span class="font_red">{{item.interestRateMin}}%</span></div>
</el-col>
</el-row>
</div>
</template>
</el-skeleton>
</div>
</template>
<script setup lang='ts'>
import * as util from "./../utils/until"
import router from "../router/index";
import './../assets/css/product.scss'
import * as api from "./../interface/api"
let loading = ref(false)
let coreCompanyId = ref(1)
let coreCompanyList = ref([
{
label: '北京大禹创联商贸有限公司',
value: 1
},
{
label: '青岛中和盛杰食品有限公司',
value: 2
}
])
let state = reactive({
productList: [],
isLoading: true,
})
let getProductList = () => {
state.isLoading = true
api.getProductList().then(res=> {
state.isLoading = false
state.productList = res.data
})
}
getProductList()
let detail = (id: string) => {
router.push("/productDetail/" + id)
}
const arrowPath = ref("/")
defineExpose({arrowPath})
</script>
<style scoped>
</style>