u
This commit is contained in:
oneao committed
1 parent
7cd7bbd166
commit
ff327ba2fd
47 files changed
+4362
-1230
No files matched your search
@@ -1,23 +1,275 @@
|
||||
<script lang="ts" setup>
|
||||
import type { CompanyListItem } from '@/types/company'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import QueryCompany from '@/components/QueryCompany.vue'
|
||||
import { queryCompanyApi } from '@/request/api/company'
|
||||
import { useCommonStore } from '@/store/common'
|
||||
|
||||
const router = useRouter()
|
||||
const commonStore = useCommonStore()
|
||||
|
||||
const page = reactive<Pagination>({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
})
|
||||
|
||||
const loading = ref<boolean>(true)
|
||||
|
||||
const companyList = ref<CompanyListItem[]>([])
|
||||
|
||||
onMounted(() => {
|
||||
getCompanyList()
|
||||
})
|
||||
|
||||
function getCompanyList() {
|
||||
loading.value = true
|
||||
|
||||
queryCompanyApi({
|
||||
currentPage: page.current,
|
||||
pageSize: page.pageSize,
|
||||
|
||||
areas: commonStore.companyQuery.areas.map((item: string[]) => item.join(',')),
|
||||
industries: commonStore.companyQuery.industries,
|
||||
name: commonStore.companyQuery.name,
|
||||
}).then((res) => {
|
||||
if (res.isSuccess) {
|
||||
companyList.value = res.data.records
|
||||
page.total = res.data.total
|
||||
}
|
||||
else {
|
||||
ElMessage.error(res.message || '加载失败，请稍后再试')
|
||||
}
|
||||
}).catch((err) => {
|
||||
console.log(err)
|
||||
ElMessage.error('加载失败，请稍后再试')
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
function toDetail(data: CompanyListItem) {
|
||||
router.push({
|
||||
path: '/company/detail',
|
||||
query: {
|
||||
id: data.id,
|
||||
},
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="query">
|
||||
<QueryCompany style="width: 1200px;" />
|
||||
<div class="company-wrapper">
|
||||
<div class="company-container">
|
||||
<QueryCompany @search="getCompanyList()" />
|
||||
|
||||
<div class="list-container">
|
||||
<div class="list-header">
|
||||
<div class="search-title">
|
||||
为您找到
|
||||
<span>
|
||||
{{ page.total }}
|
||||
</span>
|
||||
条相关企业
|
||||
</div>
|
||||
</div>
|
||||
<div class="company-list">
|
||||
<div v-for="item in companyList" :key="item.id" class="company-item">
|
||||
<el-avatar shape="square" :src="item.logo || '/no-avatar.png'" :size="70" class="company-logo" />
|
||||
|
||||
<div class="company-info">
|
||||
<div class="company-header">
|
||||
<div class="company-name">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="company-tags">
|
||||
<el-tag v-for="tag in item.industries" :key="tag" type="primary" effect="dark">
|
||||
{{ tag }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<p class="company-profile">
|
||||
{{ item.profile || '-' }}
|
||||
</p>
|
||||
<div class="company-footer">
|
||||
<div class="company-details">
|
||||
<div class="detail-item">
|
||||
<i-material-symbols:location-on />
|
||||
<span>{{ item.areas.join('/') || '___' }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<i-material-symbols:mail />
|
||||
<span>{{ item.email || '___' }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<i-material-symbols:call />
|
||||
<span>{{ item.phone || '___' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="company-actions">
|
||||
<el-button @click="toDetail(item)">
|
||||
<i-ri:information-2-line />
|
||||
<span class="button-text">
|
||||
详细
|
||||
</span>
|
||||
</el-button>
|
||||
|
||||
<el-button type="primary">
|
||||
<i-ri:message-3-fill />
|
||||
<span class="button-text">
|
||||
发起聊天
|
||||
</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="company-pagination">
|
||||
<el-pagination
|
||||
v-model:current-page="page.current"
|
||||
:page-size="page.pageSize"
|
||||
:total="page.total"
|
||||
layout="prev, pager, next"
|
||||
background
|
||||
size="large"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrapper {
|
||||
.company-wrapper {
|
||||
width: 100%;
|
||||
.query {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.company-container {
|
||||
padding: 48px 0px;
|
||||
width: 1250px;
|
||||
}
|
||||
|
||||
.list-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 36px;
|
||||
|
||||
.list-header {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
background-color: #fff;
|
||||
.search-title {
|
||||
font-weight: bold;
|
||||
span {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.company-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.company-item {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 13px 26px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
&:hover {
|
||||
background-color: #f2f8fe;
|
||||
|
||||
.company-name {
|
||||
color: var(--el-color-primary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.company-logo {
|
||||
flex-shrink: 0;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.company-info {
|
||||
flex: 1;
|
||||
|
||||
.company-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 6px;
|
||||
|
||||
.company-name {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.company-tags {
|
||||
margin-bottom: 6px;
|
||||
> * {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.company-profile {
|
||||
color: #64748b;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.company-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.company-details {
|
||||
display: flex;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 16px;
|
||||
span {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.company-actions {
|
||||
display: flex;
|
||||
> * {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.button-text {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.company-pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
margin: 16px 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user