productDetail.vue
4.43 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<template>
<div class="product_detail_container">
<div class="detail_bg_wrap">
<el-image class="top_bg" :src="getImage('detail-bg.png', '/home')"></el-image>
<div class="detail_wrap">
<div class="sec_wrap">
<div class="product_dsc">
<div class="dsc_name">{{ state.productDetail.productName }}</div>
<div class="dsc_bank">{{ state.productDetail.bankName }}</div>
<el-row>
<el-col :span="8" class="dsc_col">
<el-image class="title_img" :src="getImage('fangk.png', '/home')" fit="contain"></el-image>
<span>放款快</span>
</el-col>
<el-col :span="8" class="dsc_col">
<el-image class="title_img" :src="getImage('edu.png', '/home')" fit="contain"></el-image>
<span>额度高</span>
</el-col>
<el-col :span="8" class="dsc_col">
<el-image class="title_img" :src="getImage('lilv.png', '/home')" fit="contain"></el-image>
<span>利率低</span>
</el-col>
</el-row>
</div>
<div class="detail_dsc">
<div class="dsc_name">最高可借额度（元）</div>
<div class="dsc_amount">{{ util.moneyFormat(state.productDetail.loanLimitMax * 10000) }}</div>
<el-row>
<el-col :span="12" class="dsc_col">
<div class="col_title font_red">{{ state.productDetail.interestRateMin }}%</div>
<div>年利率低至</div>
</el-col>
<el-col :span="12" class="dsc_col">
<div class="col_title">{{ state.productDetail.timeLimitMax }}个月</div>
<div>贷款期限最长</div>
</el-col>
</el-row>
</div>
<div class="product_detail_wrap">
<div class="apply_name">
<el-image class="title_img" :src="getImage('circle-coin.png', '/home')" fit="contain"></el-image>
<span>项目详情</span>
</div>
<div class="detail_ord">
<label>产品简介：</label>
<div>{{ state.productDetail.productIntroduction }}</div>
</div>
<div class="detail_ord">
<label>适用客户：</label>
<div>{{ state.productDetail.customerScope }}</div>
</div>
<div class="detail_ord">
<label>申请条件：</label>
<div>{{ state.productDetail.applicationConditions }}</div>
</div>
<div class="detail_ord">
<label>提交材料：</label>
<div>{{ state.productDetail.applicationData }}</div>
</div>
</div>
<div class="detail_btn">
<el-button type="primary" round :loading="loading" @click="linkTo" class="primary-btn" style="width: 100%">
下一步
</el-button>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang='ts'>
import * as util from "./../utils/until"
import router from "../router/index";
import './../assets/css/productDetail.scss'
import getImage from './../assets/getImage'
import * as api from "./../interface/api"
import {getProductDetail} from "./../interface/api";
import {loginMain} from './../store/index'
import {storeToRefs} from 'pinia';
let loginAct = loginMain()
let {getStoreToken, getUserInfo} = storeToRefs(loginAct)
const route = useRoute();
const arrowPath = ref("/product")
let loading = ref(false)
let state = reactive({
productDetail: {},
isLogin: false,
userInfo: {},
})
watchEffect(() => {
state.isLogin = !!getStoreToken.value
state.userInfo = Object.assign(state.userInfo, getUserInfo)
})
let getProductDetail = (id: string) => {
api.getProductDetail({id: id}).then(res => {
state.productDetail = Object.assign(state.productDetail, res.data)
})
}
let linkTo = () => {
if (state.isLogin) {
if (state.userInfo.identityTypeStatus == '0' || state.userInfo.identityTypeStatus == '2') {
router.push("/authResult")
} else if (state.userInfo.identityTypeStatus == '1') {
ElMessage.error("我要跳转到资方H5啊")
} else {
router.push("/baseInfo")
}
} else {
router.push("/login")
}
}
onMounted(()=> {
let productId = route.path.split("/").slice(-1).toString()
getProductDetail(productId)
})
defineExpose({arrowPath})
</script>
<style scoped>
</style>