微信小程序兼容修改

packageA/pages/UnitDetails/UnitDetails.vue

@@ -21,15 +21,25 @@
         </view>
         <view class="companyinfo-right">
           <view class="row1">{{ companyInfo?.companyName }}</view>
-          <view class="row2">
-            {{ companyInfo?.scale }}
+          <view class="row2" v-if="companyInfo?.industry || companyInfo?.scale">
+            <dict-tree-Label
+              v-if="companyInfo?.industry"
+              dictType="industry"
+              :value="companyInfo?.industry"
+            ></dict-tree-Label>
+            <span v-if="companyInfo?.industry && companyInfo?.scale">&nbsp;·&nbsp;</span>
+            <dict-Label 
+              v-if="companyInfo?.scale"
+              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.companyIntroduction
+          companyInfo.description
         }}</view>
         <!-- <view class="info-title title2">公司地址</view>
                 <view class="locationCompany"></view> -->
@@ -46,32 +56,39 @@
         <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">
-              <!-- @click="navTo(`/packageA/pages/post/post?jobId=${JSON.stringify(job)}`)" -->
-              <view class="cards" :style="getItemBackgroundStyle('bj2.png')">
-                <view class="card-company">
-                  <text class="company">{{ job.jobTitle }}</text>
-                  <view class="salary"> ￥{{ job.salaryRange }}/月 </view>
-                </view>
-                <view class="card-tags">
-                  <view class="tag jy">
-									  <image :src="`${baseUrl}/jobfair/jy.png`" mode=""></image>
-                    {{ job.experienceRequirement }}
-                  </view>
-                  <view class="tag xl">
-									<image :src="`${baseUrl}/jobfair/xx.png`" mode=""></image>
-                    {{ job.educationRequirement }}
-                  </view>
-                  <view class="tag yd" v-if="job.jobRequirement">
-									<image :src="`${baseUrl}/jobfair/lx-1.png`" mode=""></image>
-                    {{ job.jobRequirement }}
+            <view v-for="job in companyInfo.jobInfoList" :key="job.jobId" class="job-card-wrapper">
+              <view class="cards" @click="navTo(`/packageA/pages/post/post?jobId=${job.jobId}`)">
+                <view class="card-header">
+                  <view class="card-title-row">
+                    <text class="job-title">{{ job.jobTitle }}</text>
+                    <view class="card-pay">
+                      <view class="pay-text">
+                        <text class="salary-amount">￥{{ formatSalary(job.minSalary, job.maxSalary) }}</text>
+                        <text class="salary-unit">/月</text>
+                      </view>
+                    </view>
                   </view>
                 </view>
-                <view class="card-companyName">
-									<image :src="`${baseUrl}/jobfair/hd.png`" mode=""></image>
-                  {{ job.jobDescription }}
+                
+                <view class="card-tags" v-if="job.experience || job.education">
+                  <view class="tag tag-experience" v-if="job.experience">
+                    <image class="tag-icon" :src="`${baseUrl}/jobfair/jy.png`" mode="aspectFit"></image>
+                    <view class="tag-text">
+                      <dict-Label dictType="experience" :value="job.experience"></dict-Label>
+                    </view>
                   </view>
-
+                  <view class="tag tag-education" v-if="job.education">
+                    <image class="tag-icon" :src="`${baseUrl}/jobfair/xx.png`" mode="aspectFit"></image>
+                    <view class="tag-text">
+                      <dict-Label dictType="education" :value="job.education"></dict-Label>
+                    </view>
+                  </view>
+                </view>
+                
+                <view class="card-location" v-if="job.jobLocation">
+                  <image class="location-icon" src="/static/icon/point3.png" mode="aspectFit"></image>
+                  <text class="location-text">{{ job.jobLocation }}</text>
+                </view>
               </view>
             </view>
           </template>
@@ -90,7 +107,7 @@ import config from "@/config.js";
 import { storeToRefs } from "pinia";
 import useLocationStore from "@/stores/useLocationStore";
 const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
-const { $api, navTo, vacanciesTo, navBack } = inject("globalFunction");
+const { $api, navTo, vacanciesTo, navBack, parseQueryParams } = inject("globalFunction");
 const isExpanded = ref(false);
 const pageState = reactive({
   page: 0,
@@ -101,9 +118,16 @@ const pageState = reactive({
 });
 const companyInfo = ref({
   jobInfoList: [],
+  companyName: '',
+  scale: '',
+  industry: '',
+  description: '',
+  isCollection: false
 });
 
 const baseUrl = config.imgBaseUrl;
+const companyIdRef = ref(null);
+
 const getItemBackgroundStyle = (imageName) => ({
   backgroundImage: `url(${baseUrl}/jobfair/${imageName})`,
   backgroundSize: "100% 100%", // 覆盖整个容器
@@ -111,14 +135,167 @@ const getItemBackgroundStyle = (imageName) => ({
   backgroundRepeat: "no-repeat",
 });
 
+// 获取公司详情
+function getCompanyDetail(companyId) {
+  if (!companyId) {
+    console.error('companyId 不能为空');
+    return;
+  }
+  
+  // 尝试获取公司详情，如果接口不存在，可能公司详情会包含在职位数据中
+  $api.createRequest(`/app/company/${companyId}`).then((resData) => {
+    if (resData && resData.data) {
+      const data = resData.data;
+      companyInfo.value = {
+        ...companyInfo.value,
+        ...data,
+        companyName: data.name || data.companyName || data.company?.name || '',
+        scale: data.scale || data.company?.scale || '',
+        industry: data.industry || data.company?.industry || '',
+        description: data.description || data.companyIntroduction || data.introduction || data.company?.introduction || '',
+        isCollection: data.isCollection || false,
+        // 如果接口直接返回了职位列表，也设置进去
+        jobInfoList: data.jobInfoList || data.jobs || data.list || companyInfo.value.jobInfoList || []
+      };
+      console.log('companyInfo',companyInfo.value);
+    }
+    // 获取在招职位列表
+    getCompanyJobs(companyId);
+  }).catch((error) => {
+    console.error('获取公司详情失败:', error);
+    // 如果获取公司详情失败，尝试通过职位列表接口获取公司信息
+    // 或者直接获取职位列表
+    getCompanyJobs(companyId);
+  });
+}
+
+// 获取公司在招职位列表
+function getCompanyJobs(companyId) {
+  if (!companyId) {
+    return;
+  }
+  
+  // 使用正确的 API 路径：/app/company/job/{companyId}
+  $api.createRequest(`/app/company/job/${companyId}`, {}, 'GET').then((resData) => {
+    console.log('获取职位列表返回数据:', resData);
+    if (resData) {
+      // 优先检查 rows 字段（根据实际返回的数据结构）
+      if (resData.rows && Array.isArray(resData.rows)) {
+        companyInfo.value.jobInfoList = resData.rows;
+      }
+      // 如果返回的是数组
+      else if (Array.isArray(resData)) {
+        companyInfo.value.jobInfoList = resData;
+      }
+      // 如果返回的是对象，包含列表字段
+      else if (resData.data) {
+        if (Array.isArray(resData.data)) {
+          companyInfo.value.jobInfoList = resData.data;
+        } else if (resData.data.rows && Array.isArray(resData.data.rows)) {
+          companyInfo.value.jobInfoList = resData.data.rows;
+        } else if (resData.data.list && Array.isArray(resData.data.list)) {
+          companyInfo.value.jobInfoList = resData.data.list;
+        } else if (resData.data.jobInfoList && Array.isArray(resData.data.jobInfoList)) {
+          companyInfo.value.jobInfoList = resData.data.jobInfoList;
+        } else {
+          companyInfo.value.jobInfoList = [];
+        }
+      } else {
+        companyInfo.value.jobInfoList = [];
+      }
+    } else {
+      companyInfo.value.jobInfoList = [];
+    }
+  }).catch((error) => {
+    console.error('获取在招职位列表失败:', error);
+    companyInfo.value.jobInfoList = [];
+  });
+}
+
 onLoad((options) => {
-  companyInfo.value = JSON.parse(options.job);
-  console.log(companyInfo.value, "companyInfo.value");
+  console.log('options',options);
+  let companyId = null;
+  
+  // 优先从 options 中获取 companyId（小程序和 H5 都支持）
+  if (options && options.companyId) {
+    companyId = decodeURIComponent(options.companyId);
+  } 
+  // 如果 options 中没有，尝试从 URL 解析（仅 H5 环境）
+  else {
+    // 使用 try-catch 包裹，避免在小程序环境中访问 window.location 报错
+    try {
+      // #ifdef H5
+      const params = parseQueryParams();
+      companyId = params.companyId;
+      // #endif
+    } catch (e) {
+      console.warn('解析 URL 参数失败:', e);
+    }
+  }
+  
+  console.log('companyId', companyId);
+  
+  if (companyId) {
+    companyIdRef.value = companyId;
+    getCompanyDetail(companyId);
+  } else {
+    console.error('未获取到 companyId 参数');
+    // 如果参数名是 job，尝试兼容旧的方式
+    if (options && options.job) {
+      try {
+        const parsedData = JSON.parse(options.job);
+        if (parsedData.companyId) {
+          companyIdRef.value = parsedData.companyId;
+          getCompanyDetail(parsedData.companyId);
+        } else {
+          companyInfo.value = { ...companyInfo.value, ...parsedData };
+        }
+      } catch (e) {
+        console.error('解析 job 参数失败:', e);
+      }
+    }
+  }
+});
+
+onShow(() => {
+  // 仅在 H5 环境中从 URL 获取参数（小程序环境中 onShow 不会传递 URL 参数）
+  // #ifdef H5
+  try {
+    const params = parseQueryParams();
+    const companyId = params.companyId;
+    
+    if (companyId && companyId !== companyIdRef.value) {
+      companyIdRef.value = companyId;
+      getCompanyDetail(companyId);
+    }
+  } catch (e) {
+    console.warn('onShow 中解析 URL 参数失败:', e);
+  }
+  // #endif
 });
 
 function expand() {
   isExpanded.value = !isExpanded.value;
 }
+
+// 格式化薪资范围
+function formatSalary(minSalary, maxSalary) {
+  if (minSalary && maxSalary) {
+    return `${minSalary}-${maxSalary}`;
+  } else if (minSalary) {
+    return `${minSalary}起`;
+  } else if (maxSalary) {
+    return `最高${maxSalary}`;
+  }
+  return '面议';
+}
+
+// 截断文本，超过指定长度显示省略号
+function truncateText(text, maxLength) {
+  if (!text) return '';
+  if (text.length <= maxLength) return text;
+  return text.substring(0, maxLength) + '...';
+}
 </script>
 
 <style lang="stylus" scoped>
@@ -259,93 +436,135 @@ image {
       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;
+    .job-card-wrapper {
       margin-top: 22rpx;
-      padding-bottom: 18rpx;
+      
+      &:first-child {
+        margin-top: 0;
+      }
+    }
 
-      .card-company {
-        display: flex;
-        justify-content: space-between;
-        align-items: flex-start;
-
-        .company {
-          font-weight: 600;
-          font-size: 32rpx;
-          color: #333333;
-        }
-
-        .salary {
-          font-weight: 600;
-          font-size: 28rpx;
-          color: #F83A3C;
-          white-space: nowrap;
-          line-height: 48rpx;
-        }
+    .cards {
+      padding: 30rpx;
+      background: #FFFFFF;
+      box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(0, 0, 0, 0.08);
+      border-radius: 24rpx;
+      transition: all 0.3s ease;
+      position: relative;
+      overflow: hidden;
+      
+      &:active {
+        transform: scale(0.98);
+        box-shadow: 0rpx 1rpx 8rpx 0rpx rgba(0, 0, 0, 0.12);
       }
 
-      .card-companyName {
-        font-weight: 400;
-        font-size: 28rpx;
-        color: #fff;
-        margin-top: 23rpx;
-        display: flex;
-        align-items: center;
-        image{
-          width: 24rpx;
-          height: 24rpx;
-          margin-right: 8rpx;
+      .card-header {
+        margin-bottom: 0;
+        
+        .card-title-row {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          gap: 20rpx;
+          
+          .job-title {
+            flex: 1;
+            font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
+            text-align: left;
+            word-break: break-all;
+            font-weight: 500;
+            font-size: 32rpx;
+            color: #333333;
+          }
+          
+          .card-pay {
+            flex-shrink: 0;
+            display: flex;
+            align-items: center;
+            
+            .pay-text {
+              font-family: DIN-Medium;
+              font-weight: 500;
+              font-size: 28rpx;
+              color: #4C6EFB;
+              line-height: 45rpx;
+              white-space: nowrap;
+              
+              .salary-amount {
+                font-family: DIN-Medium;
+                font-weight: 500;
+                font-size: 28rpx;
+                color: #4C6EFB;
+                line-height: 45rpx;
+              }
+              
+              .salary-unit {
+                font-weight: 400;
+                font-size: 20rpx;
+                color: #4C6EFB;
+                margin-left: 4rpx;
+              }
+            }
+          }
         }
       }
 
       .card-tags {
         display: flex;
         flex-wrap: wrap;
-          margin: 25rpx 0 35rpx;
-          image{
+        gap: 10rpx;
+        margin-top: 20rpx;
+        margin-bottom: 20rpx;
+        
+        .tag {
+          display: flex;
+          align-items: center;
+          width: fit-content;
+          height: 30rpx;
+          padding: 6rpx 20rpx;
+          border-radius: 4rpx;
+          background: #F4F4F4;
+          font-weight: 400;
+          font-size: 24rpx;
+          color: #6C7282;
+          white-space: nowrap;
+          line-height: 30rpx;
+          text-align: center;
+          
+          .tag-icon {
             width: 24rpx;
             height: 24rpx;
             margin-right: 8rpx;
+            flex-shrink: 0;
+          }
+          
+          .tag-text {
+            line-height: 1;
           }
-        .jy {
-          background: #D9EDFF;
-          color: #0086FF;
-        }
-
-        .xl {
-          background: #FFF1D5;
-          color: #FF7F01;
-        }
-        .yd {
-          background: #FFD8D8;
-          color: #F83A3C;
-        }
-
-        .tag {
-          width: fit-content;
-          height: 30rpx;
-          border-radius: 4rpx;
-          padding: 6rpx 20rpx;
-          line-height: 30rpx;
-          font-weight: 400;
-          font-size: 24rpx;
-          text-align: center;
-          white-space: nowrap;
-          margin-right: 20rpx;
-          display: flex;
-          align-items: center;
         }
       }
-
-      .card-bottom {
-        margin-top: 32rpx;
+      
+      .card-location {
         display: flex;
-        justify-content: space-between;
-        font-size: 28rpx;
-        color: #6C7282;
+        align-items: flex-start;
+        margin-top: 20rpx;
+        
+        .location-icon {
+          width: 28rpx;
+          height: 28rpx;
+          margin-right: 4rpx;
+          margin-top: 0;
+          flex-shrink: 0;
+        }
+        
+        .location-text {
+          flex: 1;
+          font-weight: 400;
+          font-size: 24rpx;
+          color: #999999;
+          line-height: 25rpx;
+          word-break: break-all;
+        }
       }
     }
   }