图片上传开发。详情页面图片展示

packageA/pages/post/post.vue

@@ -68,6 +68,39 @@
                     {{ jobInfo.description }}
                 </view>
             </view>
+            <!-- 职位图片 -->
+            <view class="content-card" v-if="jobInfo.filesList && jobInfo.filesList.length > 0">
+                <view class="card-title">
+                    <text class="title">职位图片</text>
+                </view>
+                <view class="job-images">
+                    <view class="image-item" v-for="(file, index) in jobInfo.filesList" :key="file.id">
+                        <image :src="file.fileUrl" mode="aspectFit" @click="previewImage(file.fileUrl, index)"></image>
+                    </view>
+                </view>
+            </view>
+            <!-- 联系人信息 -->
+            <view class="content-card" v-if="jobInfo.jobContactList && jobInfo.jobContactList.length > 0">
+                <view class="card-title">
+                    <text class="title">联系人信息</text>
+                </view>
+                <view class="contact-list">
+                    <view class="contact-item" v-for="(contact, index) in jobInfo.jobContactList" :key="index">
+                        <view class="contact-info">
+                            <view class="contact-label">联系人：</view>
+                            <view class="contact-value">{{ contact.contactPerson }}</view>
+                        </view>
+                        <view class="contact-info">
+                            <view class="contact-label">职位：</view>
+                            <view class="contact-value">{{ contact.position }}</view>
+                        </view>
+                        <view class="contact-info">
+                            <view class="contact-label">电话：</view>
+                            <view class="contact-value">{{ contact.contactPersonPhone }}</view>
+                        </view>
+                    </view>
+                </view>
+            </view>
             <!-- 公司信息 -->
             <view class="content-card">
                 <view class="card-title">
@@ -482,6 +515,16 @@ function formatPublishTime(dateString) {
         return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
     }
 }
+
+// 预览图片
+function previewImage(url, index) {
+    // 获取所有图片的URL列表
+    const allImageUrls = jobInfo.value.filesList.map(file => file.fileUrl);
+    uni.previewImage({
+        urls: allImageUrls,
+        current: index
+    });
+}
 </script>
 
 <style lang="stylus" scoped>
@@ -583,6 +626,55 @@ for i in 0..100
         }
     }
 }
+
+// 职位图片样式
+.job-images{
+    margin-top: 30rpx
+    display: flex
+    flex-wrap: wrap
+    gap: 20rpx
+    .image-item{
+        width: calc(50% - 10rpx)
+        height: 300rpx
+        border-radius: 12rpx
+        overflow: hidden
+        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1)
+        image{
+            width: 100%
+            height: 100%
+            object-fit: cover
+        }
+    }
+}
+
+// 联系人信息样式
+.contact-list{
+    margin-top: 30rpx
+    .contact-item{
+        padding: 20rpx
+        background-color: #f8f9fa
+        border-radius: 12rpx
+        .contact-info{
+            display: flex
+            align-items: center
+            margin-bottom: 15rpx
+            &:last-child{
+                margin-bottom: 0
+            }
+            .contact-label{
+                font-weight: 500
+                font-size: 28rpx
+                color: #333333
+                width: 120rpx
+            }
+            .contact-value{
+                font-weight: 400
+                font-size: 28rpx
+                color: #495265
+            }
+        }
+    }
+}
 // ai
 .ai-explain{
     margin-top: 28rpx