|
|
@@ -1,549 +1,544 @@
|
|
|
<template>
|
|
|
- <view class="switch-roles">
|
|
|
- <nav-bar title="公司信息" color="#000"></nav-bar>
|
|
|
- <view class="roles-content">
|
|
|
- <view class="content">
|
|
|
- <view class="progress-num"> <text>7</text>/8 </view>
|
|
|
- <view class="title">
|
|
|
- <view>展示公司照片</view>
|
|
|
- </view>
|
|
|
- <view class="desc">在公司主页上展示亮眼的照片,体现企业氛围与文化魅力;最多上传20张</view>
|
|
|
-
|
|
|
- <view class="content-index">
|
|
|
- <!-- 多图上传区域 -->
|
|
|
- <view class="upload-section">
|
|
|
- <view class="images-grid">
|
|
|
- <!-- 已上传的图片 -->
|
|
|
- <view class="image-item" v-for="(image, index) in imageList" :key="index" @click="previewImage(index)">
|
|
|
- <image :src="image.url" mode="aspectFill" class="preview-image"></image>
|
|
|
- <view class="image-mask">
|
|
|
- <u-icon name="eye" color="#fff" size="30"></u-icon>
|
|
|
- </view>
|
|
|
- <view class="delete-btn" @click.stop="deleteImage(index)">
|
|
|
- <u-icon name="close" color="#fff" size="20"></u-icon>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 添加图片按钮 -->
|
|
|
- <view class="upload-box" v-if="imageList.length < maxCount" @click="chooseImage">
|
|
|
- <view class="upload-placeholder">
|
|
|
- <u-icon name="plus" color="#999" size="40"></u-icon>
|
|
|
- <text class="upload-text">添加照片</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 上传计数 -->
|
|
|
- <view class="upload-count" v-if="imageList.length > 0">
|
|
|
- 已上传 {{ imageList.length }}/{{ maxCount }} 张
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 上传进度 -->
|
|
|
- <view v-if="uploading" class="upload-progress">
|
|
|
- <view class="progress-bar">
|
|
|
- <view class="progress-inner" :style="{ width: uploadProgress + '%' }"></view>
|
|
|
- </view>
|
|
|
- <text class="progress-text">{{ uploadProgress }}%</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 注意事项 -->
|
|
|
- <view class="warning-box">
|
|
|
- <view class="warning-title">注意事项:</view>
|
|
|
- <view class="warning-list">
|
|
|
- <view class="warning-item">1. 请上传清晰且完整的图片</view>
|
|
|
- <view class="warning-item">2.
|
|
|
- 请上传品牌相关的图片,含有其他内容将无法通过审核(包括但不限于含有水印、招聘信息、联系方式、二维码等相关内容)</view>
|
|
|
- <view class="warning-item">3. 上传图片须符合中国相关法律法规,不得含有违法内容或不良信息</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="submit-btn" :class="{ disabled: imageList.length === 0 }" @click="goJobPostingSecond">下一步</view>
|
|
|
- <!-- 权限说明弹窗 -->
|
|
|
- <u-popup mode="top" ref="permission">
|
|
|
- <view class="popup-content">
|
|
|
- <view class="popup-text-permission">选择/拍摄照片需要相机/相册权限,用于上传用户头像</view>
|
|
|
- </view>
|
|
|
- </u-popup>
|
|
|
- </view>
|
|
|
+ <view class="switch-roles">
|
|
|
+ <nav-bar title="公司信息" color="#000"></nav-bar>
|
|
|
+ <view class="roles-content">
|
|
|
+ <view class="content">
|
|
|
+ <view class="progress-num"> <text>7</text>/8 </view>
|
|
|
+ <view class="title">
|
|
|
+ <view>展示公司照片</view>
|
|
|
+ </view>
|
|
|
+ <view class="desc">在公司主页上展示亮眼的照片,体现企业氛围与文化魅力;最多上传20张</view>
|
|
|
+
|
|
|
+ <view class="content-index">
|
|
|
+ <!-- 多图上传区域 -->
|
|
|
+ <view class="upload-section">
|
|
|
+ <view class="images-grid">
|
|
|
+ <!-- 已上传的图片 -->
|
|
|
+ <view class="image-item" v-for="(image, index) in imageList" :key="index"
|
|
|
+ @click="previewImage(index)">
|
|
|
+ <image :src="image.url" mode="aspectFill" class="preview-image"></image>
|
|
|
+ <view class="image-mask">
|
|
|
+ <u-icon name="eye" color="#fff" size="30"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="delete-btn" @click.stop="deleteImage(index)">
|
|
|
+ <u-icon name="close" color="#fff" size="20"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 添加图片按钮 -->
|
|
|
+ <view class="upload-box" v-if="imageList.length < maxCount" @click="chooseImage">
|
|
|
+ <view class="upload-placeholder">
|
|
|
+ <u-icon name="plus" color="#999" size="40"></u-icon>
|
|
|
+ <text class="upload-text">添加照片</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 上传计数 -->
|
|
|
+ <view class="upload-count" v-if="imageList.length > 0">
|
|
|
+ 已上传 {{ imageList.length }}/{{ maxCount }} 张
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 上传进度 -->
|
|
|
+ <view v-if="uploading" class="upload-progress">
|
|
|
+ <view class="progress-bar">
|
|
|
+ <view class="progress-inner" :style="{ width: uploadProgress + '%' }"></view>
|
|
|
+ </view>
|
|
|
+ <text class="progress-text">{{ uploadProgress }}%</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 注意事项 -->
|
|
|
+ <view class="warning-box">
|
|
|
+ <view class="warning-title">注意事项:</view>
|
|
|
+ <view class="warning-list">
|
|
|
+ <view class="warning-item">1. 请上传清晰且完整的图片</view>
|
|
|
+ <view class="warning-item">2.
|
|
|
+ 请上传品牌相关的图片,含有其他内容将无法通过审核(包括但不限于含有水印、招聘信息、联系方式、二维码等相关内容)</view>
|
|
|
+ <view class="warning-item">3. 上传图片须符合中国相关法律法规,不得含有违法内容或不良信息</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="submit-btn" :class="{ disabled: imageList.length === 0 }" @click="goJobPostingSecond">下一步</view>
|
|
|
+ <!-- 权限说明弹窗 -->
|
|
|
+ <u-popup mode="top" ref="permission">
|
|
|
+ <view class="popup-content">
|
|
|
+ <view class="popup-text-permission">选择/拍摄照片需要相机/相册权限,用于上传用户头像</view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import navBar from "@/components/nav-bar/index.vue";
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- text: "",
|
|
|
- imageList: [], // 上传的图片列表
|
|
|
- maxCount: 20, // 最大上传数量
|
|
|
- uploading: false, // 是否正在上传
|
|
|
- uploadProgress: 0, // 上传进度
|
|
|
- companyData: {},
|
|
|
- isUpdateMode: false // 新增:标记是否为编辑模式
|
|
|
- };
|
|
|
- },
|
|
|
- components: {
|
|
|
- navBar,
|
|
|
- },
|
|
|
- onLoad(options) {
|
|
|
- // 判断是否为编辑模式
|
|
|
- if (options.update == 'true') {
|
|
|
- this.isUpdateMode = true;
|
|
|
- this.loadSavedPhotos();
|
|
|
- }
|
|
|
-
|
|
|
- if (options.companyData) {
|
|
|
- this.companyData = JSON.parse(options.companyData);
|
|
|
- // 如果companyData中有照片数据,也显示出来
|
|
|
- if (this.companyData.photos) {
|
|
|
- this.loadCompanyDataPhotos();
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 加载已保存的照片数据(从缓存)
|
|
|
- loadSavedPhotos() {
|
|
|
- try {
|
|
|
- let companyInfo = uni.getStorageSync('companyInfo');
|
|
|
- console.log('从缓存获取的公司信息:', companyInfo);
|
|
|
-
|
|
|
- if (companyInfo?.photos) {
|
|
|
- // 处理字符串并转换为对象数组
|
|
|
- this.parsePhotoString(companyInfo.photos);
|
|
|
- console.log('已加载保存的照片:', this.imageList);
|
|
|
- } else {
|
|
|
- console.log('缓存中没有照片数据');
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- console.error('加载照片数据失败:', error);
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 加载companyData中的照片数据
|
|
|
- loadCompanyDataPhotos() {
|
|
|
- this.parsePhotoString(this.companyData.photos);
|
|
|
- },
|
|
|
-
|
|
|
- // 解析照片字符串为对象数组
|
|
|
- parsePhotoString(photoString) {
|
|
|
- if (!photoString) return;
|
|
|
-
|
|
|
- // 处理字符串:替换中文逗号,分割,过滤空值
|
|
|
- const photoUrls = photoString
|
|
|
- .replace(/,/g, ',')
|
|
|
- .split(',')
|
|
|
- .map(url => url.trim())
|
|
|
- .filter(url => url);
|
|
|
-
|
|
|
- // 转换为对象数组格式
|
|
|
- this.imageList = photoUrls.map(url => ({
|
|
|
- url: url
|
|
|
- }));
|
|
|
- },
|
|
|
-
|
|
|
- // 选择图片
|
|
|
- async chooseImage() {
|
|
|
- const that = this;
|
|
|
- const remainingCount = this.maxCount - this.imageList.length;
|
|
|
-
|
|
|
- if (remainingCount <= 0) {
|
|
|
- uni.showToast({
|
|
|
- title: `最多只能上传${this.maxCount}张图片`,
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 1. 检查权限状态
|
|
|
- const hasPermission = await this.$queue.checkPermission(
|
|
|
- 'camera',
|
|
|
- '选择/拍摄照片需要相机/相册权限,用于上传用户头像',
|
|
|
- this
|
|
|
- );
|
|
|
-
|
|
|
- // 2. 如果未授权或者用户拒绝,显示提示
|
|
|
- if (!hasPermission) {
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- uni.chooseImage({
|
|
|
- count: remainingCount, // 最多选择剩余数量
|
|
|
- sizeType: ["compressed"],
|
|
|
- sourceType: ["album", "camera"],
|
|
|
- success: (res) => {
|
|
|
- const tempFilePaths = res.tempFilePaths;
|
|
|
-
|
|
|
- // 批量上传图片
|
|
|
- that.uploadMultipleImages(tempFilePaths);
|
|
|
- },
|
|
|
- fail: (error) => {
|
|
|
- console.log("选择图片失败:", error);
|
|
|
- uni.showToast({
|
|
|
- title: "选择图片失败",
|
|
|
- icon: "none",
|
|
|
- });
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // 批量上传图片
|
|
|
- uploadMultipleImages(filePaths) {
|
|
|
- const that = this;
|
|
|
- that.uploading = true;
|
|
|
- that.uploadProgress = 0;
|
|
|
-
|
|
|
- let uploadedCount = 0;
|
|
|
- const totalCount = filePaths.length;
|
|
|
- const newImages = [];
|
|
|
-
|
|
|
- filePaths.forEach((filePath, index) => {
|
|
|
- this.$queue.uploadFile(filePath, (path) => {
|
|
|
- if (path) {
|
|
|
- uploadedCount++;
|
|
|
- newImages.push({
|
|
|
- url: path
|
|
|
- });
|
|
|
- that.imageList.push({
|
|
|
- url: path
|
|
|
- });
|
|
|
-
|
|
|
- // 更新进度
|
|
|
- that.uploadProgress = Math.floor((uploadedCount / totalCount) * 100);
|
|
|
-
|
|
|
- // 所有图片上传完成
|
|
|
- if (uploadedCount === totalCount) {
|
|
|
- that.uploading = false;
|
|
|
-
|
|
|
- // 如果是编辑模式,同时更新缓存
|
|
|
- if (that.isUpdateMode) {
|
|
|
- that.updateCachePhotos();
|
|
|
- }
|
|
|
-
|
|
|
- uni.showToast({
|
|
|
- title: `成功上传${uploadedCount}张图片`,
|
|
|
- icon: 'success'
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- else {
|
|
|
- uploadedCount++;
|
|
|
- console.log(`第${index + 1}张图片上传失败`);
|
|
|
- if (uploadedCount === totalCount) {
|
|
|
- that.uploading = false;
|
|
|
- uni.showToast({
|
|
|
- title: '部分图片上传失败',
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // 更新缓存中的照片
|
|
|
- updateCachePhotos() {
|
|
|
- try {
|
|
|
- let companyInfo = uni.getStorageSync('companyInfo');
|
|
|
- if (companyInfo) {
|
|
|
- // 获取所有图片URL
|
|
|
- const photoUrls = this.imageList.map(item => item.url);
|
|
|
- companyInfo.photos = photoUrls.join(',');
|
|
|
- uni.setStorageSync('companyInfo', companyInfo);
|
|
|
- console.log('已更新缓存中的照片数据');
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- console.error('更新缓存照片失败:', error);
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 预览图片
|
|
|
- previewImage(index) {
|
|
|
- if (this.imageList.length > 0) {
|
|
|
- const urls = this.imageList.map(item => item.url);
|
|
|
- uni.previewImage({
|
|
|
- urls: urls,
|
|
|
- current: index,
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 删除图片
|
|
|
- deleteImage(index) {
|
|
|
- const that = this;
|
|
|
- uni.showModal({
|
|
|
- title: "提示",
|
|
|
- content: "确定要删除这张照片吗?",
|
|
|
- success: (res) => {
|
|
|
- if (res.confirm) {
|
|
|
- that.imageList.splice(index, 1);
|
|
|
-
|
|
|
- // 如果是编辑模式,同时更新缓存
|
|
|
- if (that.isUpdateMode) {
|
|
|
- that.updateCachePhotos();
|
|
|
- }
|
|
|
-
|
|
|
- uni.showToast({
|
|
|
- title: "删除成功",
|
|
|
- icon: "success",
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // 下一步
|
|
|
- goJobPostingSecond() {
|
|
|
- if (this.imageList.length === 0) {
|
|
|
- uni.showToast({
|
|
|
- title: "请上传公司照片",
|
|
|
- icon: "none",
|
|
|
- });
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 获取所有图片URL
|
|
|
- const imageUrls = this.imageList.map(item => item.url);
|
|
|
- const companyData = {
|
|
|
- ...this.companyData,
|
|
|
- photos: imageUrls.join(',')
|
|
|
- };
|
|
|
-
|
|
|
- // 如果是编辑模式,同时更新缓存
|
|
|
- if (this.isUpdateMode) {
|
|
|
- this.updateCachePhotos();
|
|
|
- }
|
|
|
-
|
|
|
- uni.navigateTo({
|
|
|
- url: "/my/renzheng/mainWorkIntro?companyData=" +
|
|
|
- encodeURIComponent(JSON.stringify(companyData)) +
|
|
|
- (this.isUpdateMode ? "&update=true" : "")
|
|
|
- });
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
+ import navBar from "@/components/nav-bar/index.vue";
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ text: "",
|
|
|
+ imageList: [], // 上传的图片列表
|
|
|
+ maxCount: 20, // 最大上传数量
|
|
|
+ uploading: false, // 是否正在上传
|
|
|
+ uploadProgress: 0, // 上传进度
|
|
|
+ // isUpdateMode: false // 新增:标记是否为编辑模式
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ navBar,
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ this.loadSavedPhotos();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 加载已保存的照片数据(从缓存)
|
|
|
+ loadSavedPhotos() {
|
|
|
+ try {
|
|
|
+ let companyInfo = uni.getStorageSync('companyInfo');
|
|
|
+ console.log('从缓存获取的公司信息:', companyInfo);
|
|
|
+
|
|
|
+ if (companyInfo?.photos) {
|
|
|
+ // 处理字符串并转换为对象数组
|
|
|
+ this.parsePhotoString(companyInfo.photos);
|
|
|
+ console.log('已加载保存的照片:', this.imageList);
|
|
|
+ } else {
|
|
|
+ console.log('缓存中没有照片数据');
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('加载照片数据失败:', error);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 加载companyData中的照片数据
|
|
|
+ // loadCompanyDataPhotos() {
|
|
|
+ // this.parsePhotoString(this.companyData.photos);
|
|
|
+ // },
|
|
|
+
|
|
|
+ // 解析照片字符串为对象数组
|
|
|
+ parsePhotoString(photoString) {
|
|
|
+ if (!photoString) return;
|
|
|
+
|
|
|
+ // 处理字符串:替换中文逗号,分割,过滤空值
|
|
|
+ const photoUrls = photoString
|
|
|
+ .replace(/,/g, ',')
|
|
|
+ .split(',')
|
|
|
+ .map(url => url.trim())
|
|
|
+ .filter(url => url);
|
|
|
+
|
|
|
+ // 转换为对象数组格式
|
|
|
+ this.imageList = photoUrls.map(url => ({
|
|
|
+ url: url
|
|
|
+ }));
|
|
|
+ },
|
|
|
+
|
|
|
+ // 选择图片
|
|
|
+ async chooseImage() {
|
|
|
+ const that = this;
|
|
|
+ const remainingCount = this.maxCount - this.imageList.length;
|
|
|
+
|
|
|
+ if (remainingCount <= 0) {
|
|
|
+ uni.showToast({
|
|
|
+ title: `最多只能上传${this.maxCount}张图片`,
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 1. 检查权限状态
|
|
|
+ const hasPermission = await this.$queue.checkPermission(
|
|
|
+ 'camera',
|
|
|
+ '选择/拍摄照片需要相机/相册权限,用于上传用户头像',
|
|
|
+ this
|
|
|
+ );
|
|
|
+
|
|
|
+ // 2. 如果未授权或者用户拒绝,显示提示
|
|
|
+ if (!hasPermission) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ uni.chooseImage({
|
|
|
+ count: remainingCount, // 最多选择剩余数量
|
|
|
+ sizeType: ["compressed"],
|
|
|
+ sourceType: ["album", "camera"],
|
|
|
+ success: (res) => {
|
|
|
+ const tempFilePaths = res.tempFilePaths;
|
|
|
+
|
|
|
+ // 批量上传图片
|
|
|
+ that.uploadMultipleImages(tempFilePaths);
|
|
|
+ },
|
|
|
+ fail: (error) => {
|
|
|
+ console.log("选择图片失败:", error);
|
|
|
+ uni.showToast({
|
|
|
+ title: "选择图片失败",
|
|
|
+ icon: "none",
|
|
|
+ });
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 批量上传图片
|
|
|
+ uploadMultipleImages(filePaths) {
|
|
|
+ const that = this;
|
|
|
+ that.uploading = true;
|
|
|
+ that.uploadProgress = 0;
|
|
|
+
|
|
|
+ let uploadedCount = 0;
|
|
|
+ const totalCount = filePaths.length;
|
|
|
+ const newImages = [];
|
|
|
+
|
|
|
+ filePaths.forEach((filePath, index) => {
|
|
|
+ this.$queue.uploadFile(filePath, (path) => {
|
|
|
+ if (path) {
|
|
|
+ uploadedCount++;
|
|
|
+ newImages.push({
|
|
|
+ url: path
|
|
|
+ });
|
|
|
+ that.imageList.push({
|
|
|
+ url: path
|
|
|
+ });
|
|
|
+
|
|
|
+ // 更新进度
|
|
|
+ that.uploadProgress = Math.floor((uploadedCount / totalCount) * 100);
|
|
|
+
|
|
|
+ // 所有图片上传完成
|
|
|
+ if (uploadedCount === totalCount) {
|
|
|
+ that.uploading = false;
|
|
|
+
|
|
|
+ // 如果是编辑模式,同时更新缓存
|
|
|
+ // if (that.isUpdateMode) {
|
|
|
+ // that.updateCachePhotos();
|
|
|
+ // }
|
|
|
+
|
|
|
+ uni.showToast({
|
|
|
+ title: `成功上传${uploadedCount}张图片`,
|
|
|
+ icon: 'success'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ uploadedCount++;
|
|
|
+ console.log(`第${index + 1}张图片上传失败`);
|
|
|
+ if (uploadedCount === totalCount) {
|
|
|
+ that.uploading = false;
|
|
|
+ uni.showToast({
|
|
|
+ title: '部分图片上传失败',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 更新缓存中的照片
|
|
|
+ // updateCachePhotos() {
|
|
|
+ // try {
|
|
|
+ // let companyInfo = uni.getStorageSync('companyInfo');
|
|
|
+ // if (companyInfo) {
|
|
|
+ // // 获取所有图片URL
|
|
|
+ // const photoUrls = this.imageList.map(item => item.url);
|
|
|
+ // companyInfo.photos = photoUrls.join(',');
|
|
|
+ // uni.setStorageSync('companyInfo', companyInfo);
|
|
|
+ // console.log('已更新缓存中的照片数据');
|
|
|
+ // }
|
|
|
+ // } catch (error) {
|
|
|
+ // console.error('更新缓存照片失败:', error);
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+
|
|
|
+ // 预览图片
|
|
|
+ previewImage(index) {
|
|
|
+ if (this.imageList.length > 0) {
|
|
|
+ const urls = this.imageList.map(item => item.url);
|
|
|
+ uni.previewImage({
|
|
|
+ urls: urls,
|
|
|
+ current: index,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 删除图片
|
|
|
+ deleteImage(index) {
|
|
|
+ const that = this;
|
|
|
+ uni.showModal({
|
|
|
+ title: "提示",
|
|
|
+ content: "确定要删除这张照片吗?",
|
|
|
+ success: (res) => {
|
|
|
+ if (res.confirm) {
|
|
|
+ that.imageList.splice(index, 1);
|
|
|
+
|
|
|
+ // 如果是编辑模式,同时更新缓存
|
|
|
+ // if (that.isUpdateMode) {
|
|
|
+ // that.updateCachePhotos();
|
|
|
+ // }
|
|
|
+
|
|
|
+ uni.showToast({
|
|
|
+ title: "删除成功",
|
|
|
+ icon: "success",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 下一步
|
|
|
+ goJobPostingSecond() {
|
|
|
+ if (this.imageList.length === 0) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "请上传公司照片",
|
|
|
+ icon: "none",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 获取所有图片URL
|
|
|
+ const imageUrls = this.imageList.map(item => item.url);
|
|
|
+
|
|
|
+ let companyData = {
|
|
|
+ companyId: this.$queue.getData('companyId'),
|
|
|
+ photos: imageUrls.join(',')
|
|
|
+ }
|
|
|
+ this.$Request.postJson('/app/company/updateCompany', companyData).then(res => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '提交成功',
|
|
|
+ duration: 1500,
|
|
|
+ });
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/my/index'
|
|
|
+ });
|
|
|
+ }, 500)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // uni.navigateTo({
|
|
|
+ // url: "/my/renzheng/mainWorkIntro?companyData=" +
|
|
|
+ // encodeURIComponent(JSON.stringify(companyData)) +
|
|
|
+ // (this.isUpdateMode ? "&update=true" : "")
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-/* 样式保持不变 */
|
|
|
-.switch-roles {
|
|
|
- background-color: #fff;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- top: 0;
|
|
|
- bottom: 0;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-
|
|
|
- .roles-content {
|
|
|
- width: 100%;
|
|
|
- flex: 1;
|
|
|
- overflow: hidden;
|
|
|
- overflow-y: auto;
|
|
|
-
|
|
|
- .content {
|
|
|
- padding: 40rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- .progress-num {
|
|
|
- color: #016bf6;
|
|
|
- font-family: DM Sans;
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 500;
|
|
|
- width: 100%;
|
|
|
- padding-bottom: 20rpx;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- text {
|
|
|
- font-size: 48rpx;
|
|
|
- font-weight: 700;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .title {
|
|
|
- color: #333;
|
|
|
- width: 100%;
|
|
|
- font-family: DM Sans;
|
|
|
- font-size: 48rpx;
|
|
|
- font-weight: 700;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .desc {
|
|
|
- color: rgba(102, 102, 102, 1);
|
|
|
- width: 100%;
|
|
|
- font-family: DM Sans;
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 32rpx;
|
|
|
- letter-spacing: 0.5%;
|
|
|
- text-align: left;
|
|
|
- box-sizing: border-box;
|
|
|
- margin-bottom: 40rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .content-index {
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- .upload-section {
|
|
|
- margin-bottom: 20rpx;
|
|
|
-
|
|
|
- .images-grid {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(4, 1fr);
|
|
|
- gap: 20rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
-
|
|
|
- .image-item {
|
|
|
- width: 142rpx;
|
|
|
- height: 142rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- .preview-image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .image-mask {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: rgba(0, 0, 0, 0.3);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- opacity: 0;
|
|
|
- transition: opacity 0.3s;
|
|
|
- }
|
|
|
-
|
|
|
- .delete-btn {
|
|
|
- position: absolute;
|
|
|
- top: 8rpx;
|
|
|
- right: 8rpx;
|
|
|
- width: 30rpx;
|
|
|
- height: 30rpx;
|
|
|
- background: rgba(0, 0, 0, 0.5);
|
|
|
- border-radius: 50%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- &:active .image-mask {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .upload-box {
|
|
|
- width: 142rpx;
|
|
|
- height: 142rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- background: #eee;
|
|
|
-
|
|
|
- .upload-placeholder {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- .upload-text {
|
|
|
- color: #666;
|
|
|
- font-size: 20rpx;
|
|
|
- margin-top: 8rpx;
|
|
|
- font-family: DM Sans;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .upload-count {
|
|
|
- color: #666;
|
|
|
- font-size: 24rpx;
|
|
|
- text-align: center;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-progress {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 20rpx;
|
|
|
-
|
|
|
- .progress-bar {
|
|
|
- flex: 1;
|
|
|
- height: 8rpx;
|
|
|
- background: #f0f0f0;
|
|
|
- border-radius: 4rpx;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- .progress-inner {
|
|
|
- height: 100%;
|
|
|
- background: #016bf6;
|
|
|
- border-radius: 4rpx;
|
|
|
- transition: width 0.3s;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .progress-text {
|
|
|
- color: #016bf6;
|
|
|
- font-size: 24rpx;
|
|
|
- min-width: 80rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .warning-box {
|
|
|
- color: rgba(102, 102, 102, 1);
|
|
|
- font-family: DM Sans;
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 32rpx;
|
|
|
-
|
|
|
- .warning-item {
|
|
|
- margin-top: 8rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .submit-btn {
|
|
|
- flex-shrink: 0;
|
|
|
- border-radius: 999px;
|
|
|
- background: #ff6600;
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- font-family: DM Sans;
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 48rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- padding: 24rpx 32rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- margin: 30rpx 40rpx;
|
|
|
- margin-top: 20rpx;
|
|
|
-
|
|
|
- &.disabled {
|
|
|
- background: #ccc;
|
|
|
- color: #999;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ /* 样式保持不变 */
|
|
|
+ .switch-roles {
|
|
|
+ background-color: #fff;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .roles-content {
|
|
|
+ width: 100%;
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ .content {
|
|
|
+ padding: 40rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .progress-num {
|
|
|
+ color: #016bf6;
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ width: 100%;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 48rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: #333;
|
|
|
+ width: 100%;
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 48rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .desc {
|
|
|
+ color: rgba(102, 102, 102, 1);
|
|
|
+ width: 100%;
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 32rpx;
|
|
|
+ letter-spacing: 0.5%;
|
|
|
+ text-align: left;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-index {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .upload-section {
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+
|
|
|
+ .images-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(4, 1fr);
|
|
|
+ gap: 20rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+
|
|
|
+ .image-item {
|
|
|
+ width: 142rpx;
|
|
|
+ height: 142rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .preview-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-mask {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(0, 0, 0, 0.3);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ opacity: 0;
|
|
|
+ transition: opacity 0.3s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .delete-btn {
|
|
|
+ position: absolute;
|
|
|
+ top: 8rpx;
|
|
|
+ right: 8rpx;
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:active .image-mask {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-box {
|
|
|
+ width: 142rpx;
|
|
|
+ height: 142rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: #eee;
|
|
|
+
|
|
|
+ .upload-placeholder {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .upload-text {
|
|
|
+ color: #666;
|
|
|
+ font-size: 20rpx;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ font-family: DM Sans;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-count {
|
|
|
+ color: #666;
|
|
|
+ font-size: 24rpx;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-progress {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 20rpx;
|
|
|
+
|
|
|
+ .progress-bar {
|
|
|
+ flex: 1;
|
|
|
+ height: 8rpx;
|
|
|
+ background: #f0f0f0;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .progress-inner {
|
|
|
+ height: 100%;
|
|
|
+ background: #016bf6;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ transition: width 0.3s;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .progress-text {
|
|
|
+ color: #016bf6;
|
|
|
+ font-size: 24rpx;
|
|
|
+ min-width: 80rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .warning-box {
|
|
|
+ color: rgba(102, 102, 102, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 32rpx;
|
|
|
+
|
|
|
+ .warning-item {
|
|
|
+ margin-top: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .submit-btn {
|
|
|
+ flex-shrink: 0;
|
|
|
+ border-radius: 999px;
|
|
|
+ background: #ff6600;
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 48rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 24rpx 32rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 30rpx 40rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+
|
|
|
+ &.disabled {
|
|
|
+ background: #ccc;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|