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

2025-12-04 17:18:45 +08:00
parent f7e20aa6a0
commit d564281671
5 changed files with 357 additions and 65 deletions
--- a/config.js
+++ b/config.js
@@ -1,7 +1,7 @@
 export default {
    // baseUrl: 'http://39.98.44.136:8080', // 测试
-    // baseUrl: 'http://222.80.110.161:11111/api/ks', // 测试
-    baseUrl: 'http://ks.zhaopinzao8dian.com/api/ks', // 测试
+    baseUrl: 'http://222.80.110.161:11111/api/ks', // 正式环境
+    // baseUrl: 'http://ks.zhaopinzao8dian.com/api/ks', // 测试

 	LCBaseUrl:'http://10.110.145.145:9100',//招聘、培训、帮扶
 	LCBaseUrlInner:'http://10.110.145.145:10100',//内网端口
--- a/packageA/pages/post/post.vue
+++ b/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
--- a/pages.json
+++ b/pages.json
@@ -83,7 +83,7 @@
      {
        "path": "pages/search/search",
        "style": {
-          "navigationBarTitleText": ""
+          "navigationBarTitleText": "搜索职位"
        }
      },
      {
--- a/pages/job/publishJob.vue
+++ b/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;
--- a/pages/search/search.vue
+++ b/pages/search/search.vue
@@ -1,15 +1,15 @@
 <template>
    <view class="container safe-area-top">
-        <view>
+        <!-- 自定义头部搜索框 -->
+        <view class="custom-header">
            <view class="top">
-                <image class="btnback button-click" src="@/static/icon/back.png" @click="navBack"></image>
+                <!-- <image class="btnback button-click" src="@/static/icon/back.png" @click="navBack"></image> -->
                <view class="search-box">
                    <uni-icons
                        class="iconsearch"
                        color="#666666"
                        type="search"
                        size="18"
-                        @confirm="searchCollection"
                    ></uni-icons>
                    <input
                        class="inputed"
@@ -200,61 +200,16 @@ function dataToImg(data) {
    display: flex
    flex-direction: column
    background: #F4f4f4
-    height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
-    .view-top{
-        display: flex;
-        justify-content: space-around
-        background: #FFFFFF;
-        .top-item{
-            padding: 6rpx 0 18rpx 0
-        }
-        .active{
-            color: #256BFA;
-            font-weight: 500;
-            position: relative;
-        }
-        .active::after{
-            position: absolute;
-            content: ''
-            left: calc(50% - 12rpx)
-            bottom: 10rpx
-            width: 24rpx
-            height: 6rpx
-            background: #256BFA
-        }
-    }
-    .main-content{
-        background: #FFFFFF
-        height: 100%
-        .content-top{
-            padding: 28rpx
-            display: flex
-            justify-content: space-between
-            align-items: center
-            .top-left{
-                font-weight: 600;
-                font-size: 36rpx;
-                color: #000000;
-                line-height: 42rpx;
-            }
-        }
-        .content-history{
-            padding: 0 28rpx;
-            display: flex
-            flex-wrap: wrap
-            .history-tag{
-                margin-right: 40rpx
-                margin-bottom: 20rpx
-                white-space: nowrap
-                font-weight: 400;
-                font-size: 28rpx;
-                color: #333333;
-                background: #F5F5F5;
-                border-radius: 12rpx 12rpx 12rpx 12rpx;
-                width: fit-content;
-                padding: 12rpx 20rpx
-            }
-        }
+    height: 100vh;
+    .custom-header {
+        background-color: #fff;
+        padding:0;
+        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 999;
    }
    .top {
 		display: flex;
@@ -262,8 +217,6 @@ function dataToImg(data) {
        justify-content: space-between
 		background-color: #fff;
 		padding: 20rpx 20rpx;
-        position: sticky;
-        top: 0
        .btnback{
            width: 60rpx;
            height: 60rpx;
@@ -304,6 +257,45 @@ function dataToImg(data) {
 			color: #256BFA;
 		}
 	}
+    .main-content{
+        background: #FFFFFF
+        height: 100%
+        margin-top: 140rpx;
+        .content-top{
+            padding: 28rpx
+            display: flex
+            justify-content: space-between
+            align-items: center
+            .top-left{
+                font-weight: 600;
+                font-size: 36rpx;
+                color: #000000;
+                line-height: 42rpx;
+            }
+        }
+        .content-history{
+            padding: 0 28rpx;
+            display: flex
+            flex-wrap: wrap
+            .history-tag{
+                margin-right: 40rpx
+                margin-bottom: 20rpx
+                white-space: nowrap
+                font-weight: 400;
+                font-size: 28rpx;
+                color: #333333;
+                background: #F5F5F5;
+                border-radius: 12rpx 12rpx 12rpx 12rpx;
+                width: fit-content;
+                padding: 12rpx 20rpx
+            }
+        }
+    }
+    .Detailscroll-view{
+        flex: 1
+        overflow: hidden
+        margin-top: 140rpx;
+    }
 }

 .slot-item