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

pages/job/publishJob.vue

@@ -134,7 +134,38 @@
                 </view>
             </view>
 
-            <!-- 岗位描述区块 -->
+            <!-- 图片上传区块 -->
+            <view class="form-block">
+                <view class="section-title">岗位图片</view>
+                <view class="form-group">
+                    <view class="upload-container">
+                        <view 
+                            class="upload-item upload-btn" 
+                            v-if="formData.images.length < 3"
+                            @click="chooseImage"
+                        >
+                            <view class="upload-icon">+</view>
+                            <view class="upload-text">上传图片</view>
+                        </view>
+                        <view 
+                            class="upload-item preview-item" 
+                            v-for="(image, index) in formData.images" 
+                            :key="index"
+                        >
+                            <image 
+                                :src="image.filePath" 
+                                class="preview-img"
+                                @click="previewImage(index)"
+                            ></image>
+                            <view class="delete-img-btn" @click="deleteImage(index)">
+                                <view class="delete-icon">×</view>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+
+        <!-- 岗位描述区块 -->
             <view class="form-block">
                 <view class="section-title">岗位描述</view>
                 <view class="form-group">
@@ -222,6 +253,7 @@ import { ref, reactive, onMounted, onUnmounted } from 'vue';
 import { onShow } from '@dcloudio/uni-app';
 import { storeToRefs } from 'pinia';
 import { createRequest } from '@/utils/request';
+import config from '@/config.js';
 import useDictStore from '@/stores/useDictStore';
 import useUserStore from '@/stores/useUserStore';
 import UniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
@@ -244,6 +276,7 @@ const formData = reactive({
     jobLocationAreaCode: '', // 新增：工作地点区县字典代码
     education: '', // 新增：学历要求字典值
     experience: '', // 新增：工作经验字典值
+    images: [], // 新增：岗位图片
     contacts: [
         {
             name: '',
@@ -490,6 +523,101 @@ const goToCompanySearch = () => {
     });
 };
 
+// 图片选择
+const chooseImage = () => {
+    uni.chooseImage({
+        count: 3 - formData.images.length, // 最多可选择的图片数量
+        success: async (res) => {
+            uni.showLoading({
+                title: '上传中...'
+            });
+            
+            try {
+                for (const tempFilePath of res.tempFilePaths) {
+                    const uploadResult = await uploadImage(tempFilePath);
+                    formData.images.push(uploadResult);
+                }
+            } catch (error) {
+                console.error('上传失败:', error);
+                uni.showToast({
+                    title: '上传失败，请重试',
+                    icon: 'none'
+                });
+            } finally {
+                uni.hideLoading();
+            }
+        },
+        fail: (err) => {
+            console.error('选择图片失败:', err);
+        }
+    });
+};
+
+// 图片上传
+const uploadImage = (tempFilePath) => {
+    return new Promise((resolve, reject) => {
+        let Authorization = '';
+        if (useUserStore().token) {
+            Authorization = `${useUserStore().token}`;
+        }
+        
+        uni.uploadFile({
+            url: config.baseUrl + '/app/file/uploadFile',
+            filePath: tempFilePath,
+            name: 'file',
+            header: {
+                'Authorization': encodeURIComponent(Authorization)
+            },
+            success: (uploadFileRes) => {
+                if (uploadFileRes.statusCode === 200) {
+                    try {
+                        const result = JSON.parse(uploadFileRes.data);
+                        if (result.code === 200) {
+                            resolve(result);
+                        } else {
+                            reject(new Error(result.msg || '上传失败'));
+                        }
+                    } catch (e) {
+                        reject(new Error('解析上传结果失败'));
+                    }
+                } else {
+                    reject(new Error('网络请求失败'));
+                }
+            },
+            fail: (err) => {
+                reject(err);
+            }
+        });
+    });
+};
+
+// 删除图片
+const deleteImage = async (index) => {
+    const image = formData.images[index];
+    if (image.id) {
+        try {
+            await createRequest(`/app/file/${image.id}`, {}, 'DELETE', true);
+        } catch (error) {
+            console.error('删除图片失败:', error);
+            uni.showToast({
+                title: '删除图片失败',
+                icon: 'none'
+            });
+            return;
+        }
+    }
+    formData.images.splice(index, 1);
+};
+
+// 预览图片
+const previewImage = (index) => {
+    const urls = formData.images.map(image => image.filePath);
+    uni.previewImage({
+        current: index,
+        urls: urls
+    });
+};
+
 // 处理企业选择
 const handleCompanySelected = (company) => {
     formData.companyName = company.name;
@@ -525,7 +653,8 @@ const publishJob = async () => {
             jobCategory: formData.jobCategory,
             companyId: formData.companyId,
             companyName: formData.companyName,
-            jobContactList: formData.contacts.filter(contact => contact.name.trim() && contact.phone.trim())
+            jobContactList: formData.contacts.filter(contact => contact.name.trim() && contact.phone.trim()),
+            filesList: formData.images.map(image => ({ bussinessid: image.bussinessid })) // 新增：岗位图片列表，使用bussinessid
         };
         
         // 调试信息：打印companyId
@@ -1034,6 +1163,85 @@ const validateForm = () => {
 }
 /* #endif */
 
+/* 图片上传样式 */
+.upload-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20rpx;
+    padding: 20rpx 0;
+}
+
+.upload-item {
+    width: 200rpx;
+    height: 200rpx;
+    border-radius: 12rpx;
+    position: relative;
+    box-sizing: border-box;
+}
+
+.upload-btn {
+    background-color: #f5f5f5;
+    border: 2rpx dashed #ddd;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    
+    &:active {
+        background-color: #e8e8e8;
+    }
+}
+
+.upload-icon {
+    font-size: 60rpx;
+    color: #999;
+    margin-bottom: 10rpx;
+    font-weight: 500;
+}
+
+.upload-text {
+    font-size: 24rpx;
+    color: #999;
+}
+
+.preview-item {
+    overflow: hidden;
+    background-color: #f5f5f5;
+}
+
+.preview-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.delete-img-btn {
+    position: absolute;
+    top: 10rpx;
+    right: 10rpx;
+    width: 40rpx;
+    height: 40rpx;
+    background-color: rgba(0, 0, 0, 0.6);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    
+    &:active {
+        background-color: rgba(0, 0, 0, 0.8);
+    }
+}
+
+.delete-icon {
+    font-size: 32rpx;
+    color: #fff;
+    font-weight: bold;
+}
+
 /* #ifdef MP-WEIXIN */
 .publish-job-page {
     position: fixed;