product.vue
2.82 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
90
91
92
93
94
95
<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 = Object.assign(state.productList, res.data)
})
}
let detail = (id: string) => {
router.push("/productDetail/" + id)
}
onMounted(()=> {
getProductList()
})
const arrowPath = ref("/")
defineExpose({arrowPath})
</script>
<style scoped>
</style>