flat:AI+

packageA/pages/post/post.vue

@@ -1,63 +1,176 @@
 <template>
-  <view class="container">
-    <view class="job-header">
-      <view class="job-title">销售工程师-高级销售经理</view>
-      <view class="job-info">
-        <text class="salary">1万-2万/月</text>
-        <text class="views">1024浏览</text>
-      </view>
-      <view class="location-info">
-        <text class="location">📍 青岛 青岛经济技术开发区</text>
-        <text class="date">2022.1.3</text>
-        <view class="source">来源 智联招聘</view>
-      </view>
-    </view>
+    <view class="container">
+        <view class="job-header">
+            <view class="job-title">{{ jobInfo.jobTitle }}</view>
+            <view class="job-info">
+                <text class="salary">{{ jobInfo.minSalary }}-{{ jobInfo.maxSalary }}/月</text>
+                <text class="views">{{ jobInfo.view }}浏览</text>
+            </view>
+            <view class="location-info">
+                <view class="location" style="display: inline-block">
+                    📍 青岛
+                    <dict-Label dictType="area" :value="jobInfo.jobLocationAreaCode"></dict-Label>
+                </view>
+                <text class="date">{{ jobInfo.postingDate || '发布日期' }}</text>
+                <view class="source">来源 智联招聘</view>
+            </view>
+        </view>
 
-    <view class="job-details">
-      <text class="details-title">职位详情</text>
-      <view class="tags">
-        <view class="tag">本科</view>
-        <view class="tag">3-5年</view>
-      </view>
-      <view class="description">
-        （我司在永磁同步电机行业技术优势明显：最高载频24kHZ，最高运行频率3000HZ，最高运行转速180000rpm。）职责：
-        <br />
-        1、结合公司业务优势，深挖行业大客户需求，为客户提供针对性的营销解决方案；
-        <br />
-        2、有丰富的项目落地执行经验；
-        <br />
-        3、做好应收款控制与管理。
-        <br />
-        要求：
-        <br />
-        1、统招本科以上学历，电气相关专业；
-        <br />
-        2、有3年以上从事变频器或相关经验者优先。
-        <br />
-      </view>
-    </view>
+        <view class="job-details">
+            <text class="details-title">职位详情</text>
+            <view class="tags">
+                <view class="tag"><dict-Label dictType="education" :value="jobInfo.education"></dict-Label></view>
+                <view class="tag"><dict-Label dictType="experience" :value="jobInfo.experience"></dict-Label></view>
+            </view>
+            <view class="description" :style="{ whiteSpace: 'pre-wrap' }">
+                {{ jobInfo.description }}
+            </view>
+        </view>
 
-    <view class="company-info" @click="navTo('/packageA/pages/UnitDetails/UnitDetails')">
-      <view class="company-name">湖南沃森电气科技有限公司</view>
-      <view class="company-details">制造业 100-299人 单位详情</view>
-    </view>
+        <view
+            class="company-info"
+            @click="navTo(`/packageA/pages/UnitDetails/UnitDetails?companyId=${jobInfo.company.companyId}`)"
+        >
+            <view class="company-name">{{ jobInfo.company?.name }}</view>
+            <view class="company-details">
+                <dict-tree-Label
+                    v-if="jobInfo.company?.industry"
+                    dictType="industry"
+                    :value="jobInfo.company?.industry"
+                ></dict-tree-Label>
+                <span v-if="jobInfo.company?.industry">&nbsp;</span>
+                <dict-Label dictType="scale" :value="jobInfo.company?.scale"></dict-Label>
+                单位详情
+            </view>
+            <view class="company-map" v-if="jobInfo.latitude && jobInfo.longitude">
+                <map
+                    style="width: 100%; height: 100%"
+                    :latitude="jobInfo.latitude"
+                    :longitude="jobInfo.longitude"
+                    :markers="mapCovers"
+                ></map>
+            </view>
+        </view>
 
-    <view class="footer">
-      <button class="apply-btn">立即申请</button>
-      <view class="falls-card-matchingrate">
-        <uni-icons type="star" size="40"></uni-icons>
-        <!-- <uni-icons type="star-filled" color="#FFCB47" size="40"></uni-icons> -->
-      </view>
+        <view class="footer">
+            <!-- <button class="apply-btn" v-if="!jobInfo.isApply" @click="jobApply">立即申请</button> -->
+            <button class="apply-btn" @click="jobApply">立即申请</button>
+            <!-- <button class="apply-btn btned" v-else>已申请</button> -->
+            <view class="falls-card-matchingrate" @click="jobCollection">
+                <uni-icons v-if="!jobInfo.isCollection" type="star" size="40"></uni-icons>
+                <uni-icons v-else type="star-filled" color="#FFCB47" size="40"></uni-icons>
+            </view>
+        </view>
     </view>
-  </view>
 </template>
 
 <script setup>
-import { reactive, inject, watch, ref, onMounted } from 'vue';
-const { $api, navTo } = inject('globalFunction');
+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';
+const { $api, navTo, getLenPx, parseQueryParams } = inject('globalFunction');
+
+const jobInfo = ref({});
+const state = reactive({});
+const mapCovers = ref([]);
+const jobIdRef = ref();
+
+onLoad((option) => {
+    if (option.jobId) {
+        initLoad(option);
+    }
+});
+
+onShow(() => {
+    const option = parseQueryParams(); // 兼容微信内置浏览器
+    if (option.jobId) {
+        initLoad(option);
+    }
+});
+
+function initLoad(option) {
+    const jobId = atob(option.jobId);
+    if (jobId !== jobIdRef.value) {
+        jobIdRef.value = jobId;
+        getDetail(jobId);
+    }
+}
+
+function getDetail(jobId) {
+    $api.createRequest(`/app/job/${jobId}`).then((resData) => {
+        const { latitude, longitude, companyName } = resData.data;
+        jobInfo.value = resData.data;
+        if (latitude && longitude) {
+            mapCovers.value = [
+                {
+                    latitude: latitude,
+                    longitude: longitude,
+                    iconPath: point,
+                    label: {
+                        content: companyName,
+                        textAlign: 'center',
+                        padding: 3,
+                        fontSize: 12,
+                        bgColor: '#FFFFFF',
+                        anchorX: getTextWidth(companyName), // X 轴调整，负数向左
+                        borderRadius: 5,
+                    },
+                    width: 34,
+                },
+            ];
+        }
+    });
+}
+
+function getTextWidth(text, size = 12) {
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+    context.font = `${12}px Arial`;
+    return -(context.measureText(text).width / 2) - 20; // 计算文字中心点
+}
+
+// 申请岗位
+function jobApply() {
+    const jobId = jobInfo.value.jobId;
+    if (jobInfo.value.isApply) {
+        const jobUrl = jobInfo.value.jobUrl;
+        return window.open(jobUrl);
+    } else {
+        $api.createRequest(`/app/job/apply/${jobId}`, {}, 'GET').then((resData) => {
+            getDetail(jobId);
+            $api.msg('申请成功');
+            const jobUrl = jobInfo.value.jobUrl;
+            return window.open(jobUrl);
+        });
+    }
+}
+
+// 取消/收藏岗位
+function jobCollection() {
+    const jobId = jobInfo.value.jobId;
+    if (jobInfo.value.isCollection) {
+        $api.createRequest(`/app/job/collection/${jobId}`, {}, 'DELETE').then((resData) => {
+            getDetail(jobId);
+            $api.msg('取消收藏成功');
+        });
+    } else {
+        $api.createRequest(`/app/job/collection/${jobId}`, {}, 'POST').then((resData) => {
+            getDetail(jobId);
+            $api.msg('收藏成功');
+        });
+    }
+}
 </script>
 
 <style lang="stylus" scoped>
+
+::v-deep .amap-logo {
+  opacity: 0 !important;
+}
+::v-deep .amap-copyright {
+  opacity: 0 !important;
+}
 .container
   display flex
   flex-direction column
@@ -117,7 +230,7 @@ const { $api, navTo } = inject('globalFunction');
 .company-info
   background-color #fff
   padding 20rpx 40rpx
-  margin-bottom 10rpx
+  margin-bottom 300rpx
   .company-name
     font-size 28rpx
     font-weight bold
@@ -125,6 +238,13 @@ const { $api, navTo } = inject('globalFunction');
   .company-details
     font-size 24rpx
     color #666
+  .company-map
+    height: 340rpx
+    width: 100%
+    background: #e8e8e8
+    margin-top: 10rpx
+    border-radius: 16rpx
+    overflow: hidden
 
 .footer
   position fixed
@@ -143,4 +263,6 @@ const { $api, navTo } = inject('globalFunction');
     border-radius 30rpx
     font-size 32rpx
     margin-right: 30rpx
+  .btned
+    background-color #666666
 </style>