330 lines
8.0 KiB
Vue
330 lines
8.0 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"
|
|
></image>
|
|
<image src="@/static/icon/collect2.png" v-else></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?.companyName }}</view>
|
|
<view class="row2">
|
|
{{ companyInfo?.scale }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="conetent-info" :class="{ expanded: isExpanded }">
|
|
<view class="info-title">公司介绍</view>
|
|
<view class="info-desirption">{{
|
|
companyInfo.companyIntroduction
|
|
}}</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">
|
|
<view class="views">
|
|
<view class="Detail-title"><text class="title">在招职位</text></view>
|
|
<template v-if="companyInfo.jobInfoList.length != 0">
|
|
<view v-for="job in companyInfo.jobInfoList" :key="job.id">
|
|
<view class="cards" @click="navTo(`/packageA/pages/post/post?jobId=${JSON.stringify(job)}`)">
|
|
<view class="card-company">
|
|
<text class="company">{{ job.jobTitle }}</text>
|
|
<view class="salary"> {{ job.salaryRange }}元 </view>
|
|
</view>
|
|
<view class="card-companyName">{{ job.companyName }}</view>
|
|
<view class="card-companyName">{{ job.jobDescription }}</view>
|
|
<view class="card-tags">
|
|
<view class="tag">
|
|
{{ job.educationRequirement }}
|
|
</view>
|
|
<view class="tag">
|
|
{{ job.experienceRequirement }}
|
|
</view>
|
|
<!-- <view class="tag">
|
|
{{ vacanciesTo(job.vacancies) }}
|
|
</view> -->
|
|
<view class="tag" v-if="job.jobRequirement">
|
|
{{ job.jobRequirement }}
|
|
</view>
|
|
</view>
|
|
<view class="card-bottom">
|
|
<view>{{ job.postingDate }}</view>
|
|
<view>
|
|
<convert-distance
|
|
:alat="job.latitude"
|
|
:along="job.longitude"
|
|
:blat="latitude"
|
|
:blong="longitude"
|
|
></convert-distance>
|
|
<dict-Label
|
|
class="mar_le10"
|
|
dictType="area"
|
|
:value="job.jobLocationAreaCode"
|
|
></dict-Label>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<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) => {
|
|
companyInfo.value = JSON.parse(options.job);
|
|
console.log(companyInfo.value, "companyInfo.value");
|
|
});
|
|
|
|
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>
|