index.vue
9.73 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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
<template>
<div class="home_container">
<div class="bg_wrap">
<el-image class="top_bg" :src="getImage('sec1-bg.png', '/home')"></el-image>
<div class="content_wrap">
<div class="sec1_wrap">
<div class="sec1_title">联合供应链金融平台</div>
<div class="title_dsc">联合征信旗下专业供应链金融服务平台</div>
<div class="title_message">
<el-badge :value="state.noticeNum" class="item" @click="linkTo('/notice')">
<el-image :src="getImage('message-icon.png', '/home')"></el-image>
</el-badge>
</div>
</div>
<div class="notice_wrap">
<div class="notice_title">
<el-image class="notice_img" :src="getImage('notic.png', '/home')" fit="cover"></el-image>
<span>公告通知：</span>
</div>
<div class="notice_con">
<el-carousel direction="vertical" :autoplay="true" :height="'30px'" :indicator-position="'none'">
<el-carousel-item v-for="item in 4" :key="item">
<span>富民银行资方已接入</span>
</el-carousel-item>
</el-carousel>
</div>
</div>
<div class="recommend_wrap">
<el-row>
<el-col :span="6" class="recommend-col" v-for="item in recommendList">
<el-image class="recommend_img" :src="getImage(item.icon, '/home')" fit="contain"></el-image>
<div>{{item.name}}</div>
</el-col>
</el-row>
</div>
<div class="sec2_wrap">
<el-row :gutter="8">
<el-col :span="11" class="bg1_wrap">
<el-image class="sec2_bg1" :src="getImage('sec2-bg1.png', '/home')"></el-image>
<div class="bg1_con">
<div class="con_title">经销商融资贷款</div>
<div>先采购<span></span>再付款</div>
<div class="title_dsc">高额度<span></span>放款快</div>
<el-button round class="con_btn" @click="linkTo('/product')">去借款</el-button>
</div>
</el-col>
<el-col :span="13">
<el-row>
<el-col :span="24" class="bg2_wrap">
<el-image class="sec2_bg2" :src="getImage('sec2-bg2.png', '/home')"></el-image>
<div class="bg2_con">
<div class="con_title">核心企业入驻</div>
<div class="title_dsc">企业线上接洽入驻</div>
<el-button round class="con_btn" @click="linkTo('/mine')">去申请</el-button>
</div>
</el-col>
<el-col :span="24" class="bg3_wrap">
<el-image class="sec2_bg3" :src="getImage('sec2-bg3.png', '/home')"></el-image>
<div class="bg3_con">
<div class="con_title">资金方合作</div>
<div class="title_dsc">多资金方合作服务</div>
<el-button round class="con_btn" @click="linkTo('/mine')">去查看</el-button>
</div>
</el-col>
</el-row>
</el-col>
</el-row>
<el-carousel class="gg_wrap" :interval="5000" :autoplay="true" :height="'7rem'" :indicator-position="'none'">
<el-carousel-item v-for="item in 3" :key="item">
<div class="gg_bg_wrap">
<el-image class="gg_img" :src="getImage('gg1.png', '/home')"></el-image>
<div class="gg_con">
<div class="con_title">北京艾上智能科技有限公司</div>
<div class="con_money">提款98万元</div>
<div class="con_time">2023年3月8日 12:34:50</div>
</div>
</div>
</el-carousel-item>
</el-carousel>
</div>
<div class="sec3_wrap">
<div class="sec_title">
<el-image class="title_img" :src="getImage('circle-coin.png', '/home')" fit="cover"></el-image>
<span>平台优势</span>
</div>
<el-row>
<el-col :span="6" v-for="item in goodList">
<el-image class="good_img" :src="getImage(item.icon, '/home')" fit="contain"></el-image>
<div>{{item.name}}</div>
</el-col>
</el-row>
</div>
<div class="sec4_wrap">
<div class="sec_title">
<el-image class="title_img" :src="getImage('circle-coin.png', '/home')" fit="cover"></el-image>
<span>合作机构</span>
</div>
<el-row>
<el-col :span="6" v-for="item in bankList" class="sec4_col">
<el-image :class="item.isSmall ? 'good_img small' : 'good_img' " :src="getImage(item.icon, '/home')" fit="contain"></el-image>
<div>{{item.name}}</div>
</el-col>
<el-divider border-style="dashed"/>
<el-col :span="6" v-for="item in cooperationList">
<el-image :class="item.isSmall ? 'good_img small' : 'good_img' " :src="getImage(item.icon, '/home')" fit="contain"></el-image>
<div>{{item.name}}</div>
</el-col>
</el-row>
</div>
</div>
</div>
</div>
</template>
<script setup lang='ts'>
import './../assets/css/home.scss'
import getImage from './../assets/getImage'
import router from "../router/index";
import { loginMain } from './../store/index'
import { storeToRefs } from 'pinia';
let loginAct = loginMain()
let { getStoreToken, getUserInfo } = storeToRefs(loginAct)
import * as api from "./../interface/api"
let state = reactive({
isLogin: false,
userInfo: null,
noticeNum: undefined,
})
watchEffect(() => {
state.isLogin = getStoreToken.value ? true : false
state.userInfo = getUserInfo.value
})
let recommendList = reactive([
{
name: '采购融资',
icon: 'sec1-icon1.png',
},
{
name: '信用报告',
icon: 'sec1-icon2.png',
},
{
name: '评级服务',
icon: 'sec1-icon3.png',
},
{
name: '信用评价',
icon: 'sec1-icon4.png',
},
{
name: '核心企业',
icon: 'sec1-icon5.png',
},
{
name: '经销商',
icon: 'sec1-icon6.png',
},
{
name: '资金方',
icon: 'sec1-icon7.png',
},
{
name: '企业中心',
icon: 'sec1-icon8.png',
}
])
let goodList = reactive([
{
name: '纯信用',
icon: 'ys1.png',
},{
name: '利率低',
icon: 'ys2.png',
},{
name: '产品全',
icon: 'ys3.png',
},{
name: '服务好',
icon: 'ys4.png',
}
])
let bankList = reactive([
{
name: '中国银联',
icon: 'yh1.png',
isSmall: true,
},{
name: '中国银行',
icon: 'yh2.png',
isSmall: true,
},{
name: '平安银行',
icon: 'yh3.png',
},{
name: '中国农业',
icon: 'yh4.png',
isSmall: true,
}
])
let cooperationList = reactive([
{
name: '清华同方',
icon: 'hz1.png',
},{
name: '五征集团',
icon: 'hz2.png',
},{
name: '龙大食品',
icon: 'hz3.png',
isSmall: true,
},{
name: '伟仕佳节',
icon: 'he4.png',
}
])
let linkTo = (url: string) => {
if (url == '/mine' || url == '/notice') {
if (state.isLogin) {
router.push(url)
} else {
router.push('/login')
}
} else {
router.push(url)
}
}
if(state.isLogin) {
let num = 0
api.getNotice().then(res=> {
res.rows.forEach(item=> {
if (item.isRead == 1) {
num++
}
})
state.noticeNum = num == 0 ? undefined : state.noticeNum
})
}
const arrowPath = ref("/")
defineExpose({arrowPath})
</script>
<style scoped lang="scss">
</style>