321 lines
9.6 KiB
Vue
321 lines
9.6 KiB
Vue
<template>
|
|
<AppLayout title="" :use-scroll-view="false">
|
|
<template #headerleft>
|
|
<view class="btnback">
|
|
<image src="@/static/icon/back.png" @click="navBack"></image>
|
|
</view>
|
|
</template>
|
|
<template #headerright>
|
|
<view class="btn mar_ri10">
|
|
<image
|
|
src="@/static/icon/collect3.png"
|
|
v-if="!companyInfo.isCollection"
|
|
@click="companyCollection"
|
|
></image>
|
|
<image src="@/static/icon/collect2.png" v-else @click="companyCollection"></image>
|
|
</view>
|
|
</template>
|
|
<view class="content">
|
|
<view class="content-top">
|
|
<view class="companyinfo-left">
|
|
<image src="@/static/icon/companyIcon.png" mode=""></image>
|
|
</view>
|
|
<view class="companyinfo-right">
|
|
<view class="row1">{{ companyInfo?.name }}</view>
|
|
<view class="row2">
|
|
<dict-tree-Label
|
|
v-if="companyInfo?.industry"
|
|
dictType="industry"
|
|
:value="companyInfo?.industry"
|
|
></dict-tree-Label>
|
|
<span v-if="companyInfo?.industry"> </span>
|
|
<dict-Label dictType="scale" :value="companyInfo?.scale"></dict-Label>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="conetent-info" :class="{ expanded: isExpanded }">
|
|
<view class="info-title">公司介绍</view>
|
|
<view class="info-desirption">{{ companyInfo.description }}</view>
|
|
<!-- <view class="info-title title2">公司地址</view>
|
|
<view class="locationCompany"></view> -->
|
|
</view>
|
|
<view class="expand" @click="expand">
|
|
<text>{{ isExpanded ? '收起' : '展开' }}</text>
|
|
<image
|
|
class="expand-img"
|
|
:class="{ 'expand-img-active': !isExpanded }"
|
|
src="@/static/icon/downs.png"
|
|
></image>
|
|
</view>
|
|
<scroll-view scroll-y class="Detailscroll-view" @scrolltolower="getJobsList('add')">
|
|
<view class="views">
|
|
<view class="Detail-title"><text class="title">在招职位</text></view>
|
|
<renderJobs
|
|
v-if="pageState.list.length"
|
|
:list="pageState.list"
|
|
:longitude="longitudeVal"
|
|
:latitude="latitudeVal"
|
|
></renderJobs>
|
|
<empty v-else pdTop="200"></empty>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</AppLayout>
|
|
</template>
|
|
|
|
<script setup>
|
|
import point from '@/static/icon/point.png';
|
|
import { reactive, inject, watch, ref, onMounted, computed } from 'vue';
|
|
import { onLoad, onShow } from '@dcloudio/uni-app';
|
|
import dictLabel from '@/components/dict-Label/dict-Label.vue';
|
|
import { storeToRefs } from 'pinia';
|
|
import useLocationStore from '@/stores/useLocationStore';
|
|
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
|
|
const { $api, navTo, vacanciesTo, navBack } = inject('globalFunction');
|
|
|
|
const isExpanded = ref(false);
|
|
const pageState = reactive({
|
|
page: 0,
|
|
list: [],
|
|
total: 0,
|
|
maxPage: 1,
|
|
pageSize: 10,
|
|
});
|
|
const companyInfo = ref({});
|
|
|
|
onLoad((options) => {
|
|
console.log(options);
|
|
getCompanyInfo(options.companyId || options.bussinessId);
|
|
});
|
|
|
|
function companyCollection() {
|
|
const companyId = companyInfo.value.companyId;
|
|
if (companyInfo.value.isCollection) {
|
|
$api.createRequest(`/app/company/collection/${companyId}`, {}, 'DELETE').then((resData) => {
|
|
getCompanyInfo(companyId);
|
|
$api.msg('取消收藏成功');
|
|
});
|
|
} else {
|
|
$api.createRequest(`/app/company/collection/${companyId}`, {}, 'POST').then((resData) => {
|
|
getCompanyInfo(companyId);
|
|
$api.msg('收藏成功');
|
|
});
|
|
}
|
|
}
|
|
|
|
function getCompanyInfo(id) {
|
|
$api.createRequest(`/app/company/${id}`).then((resData) => {
|
|
companyInfo.value = resData.data;
|
|
getJobsList();
|
|
});
|
|
}
|
|
|
|
function getJobsList(type = 'add') {
|
|
if (type === 'refresh') {
|
|
pageState.page = 1;
|
|
pageState.maxPage = 1;
|
|
}
|
|
if (type === 'add' && pageState.page < pageState.maxPage) {
|
|
pageState.page += 1;
|
|
}
|
|
let params = {
|
|
current: pageState.page,
|
|
pageSize: pageState.pageSize,
|
|
};
|
|
$api.createRequest(`/app/company/job/${companyInfo.value.companyId}`, params).then((resData) => {
|
|
const { rows, total } = resData;
|
|
if (type === 'add') {
|
|
const str = pageState.pageSize * (pageState.page - 1);
|
|
const end = pageState.list.length;
|
|
const reslist = rows;
|
|
pageState.list.splice(str, end, ...reslist);
|
|
} else {
|
|
pageState.list = rows;
|
|
}
|
|
pageState.total = resData.total;
|
|
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
|
|
});
|
|
}
|
|
|
|
function expand() {
|
|
isExpanded.value = !isExpanded.value;
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.btnback{
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
}
|
|
.btn {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 52rpx;
|
|
height: 52rpx;
|
|
}
|
|
image {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
.content{
|
|
height: 100%
|
|
display: flex;
|
|
flex-direction: column
|
|
.content-top{
|
|
padding: 28rpx
|
|
padding-top: 50rpx
|
|
display: flex
|
|
flex-direction: row
|
|
flex-wrap: nowrap
|
|
.companyinfo-left{
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
margin-right: 24rpx
|
|
}
|
|
.companyinfo-right{
|
|
|
|
.row1{
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
}
|
|
.row2{
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #6C7282;
|
|
line-height: 45rpx;
|
|
}
|
|
}
|
|
}
|
|
.conetent-info{
|
|
padding: 0 28rpx
|
|
overflow: hidden;
|
|
max-height: 0rpx;
|
|
transition: max-height 0.3s ease;
|
|
.info-title{
|
|
font-weight: 600;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
}
|
|
.info-desirption{
|
|
margin-top: 12rpx
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #495265;
|
|
text-align: justified;
|
|
}
|
|
.title2{
|
|
margin-top: 48rpx
|
|
}
|
|
}
|
|
.expanded {
|
|
max-height: 1000rpx; // 足够显示完整内容
|
|
}
|
|
.expand{
|
|
display: flex
|
|
flex-wrap: nowrap
|
|
white-space: nowrap
|
|
justify-content: center
|
|
margin-top: 20rpx
|
|
margin-bottom: 28rpx
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #256BFA;
|
|
.expand-img{
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
.expand-img-active{
|
|
transform: rotate(180deg)
|
|
}
|
|
}
|
|
}
|
|
.Detailscroll-view{
|
|
flex: 1;
|
|
overflow: hidden;
|
|
background: #F4F4F4;
|
|
.views{
|
|
padding: 28rpx
|
|
.Detail-title{
|
|
font-weight: 600;
|
|
font-size: 32rpx;
|
|
color: #000000;
|
|
position: relative;
|
|
display: flex
|
|
justify-content: space-between
|
|
.title{
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
.Detail-title::before{
|
|
position: absolute
|
|
content: '';
|
|
left: -14rpx
|
|
bottom: 0
|
|
height: 16rpx;
|
|
width: 108rpx;
|
|
background: linear-gradient(to right, #CBDEFF, #FFFFFF);
|
|
border-radius: 8rpx;
|
|
z-index: 1;
|
|
}
|
|
.cards{
|
|
padding: 32rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
margin-top: 22rpx;
|
|
.card-company{
|
|
display: flex
|
|
justify-content: space-between
|
|
align-items: flex-start
|
|
.company{
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
}
|
|
.salary{
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #4C6EFB;
|
|
white-space: nowrap
|
|
line-height: 48rpx
|
|
}
|
|
}
|
|
.card-companyName{
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #6C7282;
|
|
}
|
|
.card-tags{
|
|
display: flex
|
|
flex-wrap: wrap
|
|
.tag{
|
|
width: fit-content;
|
|
height: 30rpx;
|
|
background: #F4F4F4;
|
|
border-radius: 4rpx;
|
|
padding: 6rpx 20rpx;
|
|
line-height: 30rpx;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #6C7282;
|
|
text-align: center;
|
|
margin-top: 14rpx;
|
|
white-space: nowrap
|
|
margin-right: 20rpx
|
|
}
|
|
}
|
|
.card-bottom{
|
|
margin-top: 32rpx
|
|
display: flex
|
|
justify-content: space-between
|
|
font-size: 28rpx;
|
|
color: #6C7282;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|