ks-app-employment-service/packageA/pages/UnitDetails/UnitDetails.vue

<template>
    <view class="container">
        <!-- 单位基本信息 -->
        <view class="company-header">
            <text class="company-name">{{ companyInfo.name }}</text>
            <view class="company-info">
                <view class="location">
                    <uni-icons type="location-filled" color="#4778EC" size="24"></uni-icons>
                    青岛 {{ companyInfo.location }}
                </view>
                <view class="industry" style="display: inline-block">
                    {{ companyInfo.industry }}
                    <dict-Label dictType="scale" :value="companyInfo.scale"></dict-Label>
                </view>
            </view>
        </view>
        <view class="hr"></view>
        <!-- 单位介绍 -->
        <view class="company-description">
            <view class="section-title">单位介绍</view>
            <text class="description">
                {{ companyInfo.description }}
            </text>
        </view>

        <!-- 在招职位 -->
        <view class="job-list">
            <text class="section-title">在招职位</text>
            <view
                class="job-row"
                v-for="job in pageState.list"
                :key="job.id"
                @click="navTo(`/packageA/pages/post/post?jobId=${job.jobId}`)"
            >
                <view class="left">
                    <text class="job-title">{{ job.jobTitle }}</text>
                    <view class="job-tags">
                        <!-- <view class="tag" v-for="tag in job.tags" :key="tag">{{ tag }}</view> -->
                        <view class="tag">
                            <dict-Label dictType="education" :value="job.education"></dict-Label>
                        </view>
                        <view class="tag">
                            <dict-Label dictType="experience" :value="job.experience"></dict-Label>
                        </view>
                        <view class="tag">{{ job.vacancies }}人</view>
                    </view>
                    <text class="location">
                        青岛
                        <dict-Label dictType="area" :value="job.jobLocationAreaCode"></dict-Label>
                    </text>
                </view>
                <view class="right">
                    <text class="salary">{{ job.minSalary }}-{{ job.maxSalary }}/月</text>
                    <text class="hot" v-if="job.isHot">🔥</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { reactive, inject, watch, ref, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import dictLabel from '@/components/dict-Label/dict-Label.vue';
const { $api, navTo } = inject('globalFunction');
const pageState = reactive({
    page: 0,
    list: [],
    total: 0,
    maxPage: 1,
    pageSize: 10,
});
const companyInfo = ref({});
onLoad((options) => {
    console.log(options);
    getCompanyInfo(options.companyId);
});

function getCompanyInfo(id) {
    $api.createRequest(`/app/company/${id}`).then((resData) => {
        companyInfo.value = resData.data;
        getJobsList();
    });
}

function getJobsList(type = 'add') {
    if (type === 'refresh') {
        pageState.page = 0;
        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;
        pageState.list = resData.rows;
        pageState.total = resData.total;
        pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
    });
}
</script>

<style lang="stylus">
.container
  display flex
  flex-direction column
  background-color #f8f8f8
.hr
    height: 10rpx;
.company-header
  padding 20rpx 40rpx
  background-color #fff
  .company-name
    font-size 56rpx
    font-weight bold
    color #333
    margin-bottom 10rpx
  .company-info
    font-size 24rpx
    color #666
    display flex
    align-items center
    justify-content space-between
    .location
      display flex
      align-items center

.company-description
  padding 20rpx 40rpx
  background-color #fff
  margin-bottom 10rpx
  .section-title
    font-size 42rpx
    font-weight bold
    margin-bottom 10rpx

  .description
    font-size 24rpx
    color #333
    line-height 36rpx

.job-list
  padding 20rpx 40rpx
  background-color #fff
  .section-title
    font-size 42rpx
    font-weight bold
    margin-bottom 10rpx
  .job-row
    display flex
    justify-content space-between
    align-items flex-start
    padding 20rpx
    border 2rpx solid #D9D9D9
    margin-top 20rpx
    border-radius 17rpx 17rpx 17rpx 17rpx
    .left
      display flex
      flex-direction column
      flex-grow 1
      .job-title
        font-size 28rpx
        font-weight bold
        color #333
        margin-bottom 10rpx
      .job-tags
        display flex
        gap 10rpx
        margin-bottom 10rpx
        .tag
          background-color #22c55e
          color #fff
          padding 5rpx 10rpx
          border-radius 12rpx
          font-size 20rpx
      .location
        font-size 24rpx
        color #666
    .right
      display flex
      flex-direction column
      align-items flex-end
      .salary
        font-size 28rpx
        color #3b82f6
        font-weight bold
      .hot
        color #ff6b6b
        font-size 24rpx
        margin-top 5rpx
</style>