yizhizan-h5/my/renzheng/companyImg.vue

<template>
	<view class="page-container">
		<nav-bar title="公司信息">
			<view class="nav-bar-right-btn" slot="right" @click="toNext">跳过</view>
		</nav-bar>
		
		<view class="content">
			<view class="num-title">
				<text class="current-num">5</text>
				<text>/6</text>
			</view>
			
			<view class="main-title">展示公司照片</view>
			<view>在公司主页上展示亮眼的照片，体现企业氛围与文化魅力；最多上传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="36"></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-item">注意事项：</view>
					<view class="warning-item">
						<text>1.</text>
						<text>请上传清晰且完整的图片</text>
					</view>
					<view class="warning-item">
						<text>2.</text>
						<text>请上传品牌相关的图片，含有其他内容将无法通过审核（包括但不限于含有水印、招聘信息、联系方式、二维码等相关内容）</text>
					</view>
					<view class="warning-item">
						<text>3.</text>
						<text>上传图片须符合中国相关法律法规，不得含有违法内容或不良信息</text>
					</view>
				</view>
			</view>
		</view>

		<view class="fixed-button">
			<view class="button" @click="goJobPostingSecond">保存</view>
		</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 {
				loading: false,
				companyId: '',
				text: "",
				imageList: [], // 上传的图片列表
				maxCount: 20, // 最大上传数量
				uploading: false, // 是否正在上传
				uploadProgress: 0, // 上传进度
				// isUpdateMode: false // 新增：标记是否为编辑模式
			};
		},
		components: {
			navBar,
		},
		onLoad(options) {
			this.getCompanyInfo()
		},
		methods: {
			toNext() {
				uni.redirectTo({
					url: '/my/renzheng/peopleDev'
				})
			},
			
			// 获取公司信息
			getCompanyInfo() {
				uni.showLoading({ title: '加载中' })
				this.$Request.get('/app/company/selectCompanyByUserId')
					.then((res) => {
						if (res.code != 0) {
							uni.showToast({
								title: res.msg || '查询状态失败',
								icon: 'none'
							});
							return
						}
						this.companyId = res.data.companyId
						this.parsePhotoString(res.data.photos);
						uni.hideLoading()
					})
					.catch((err) => {
						uni.hideLoading()
						uni.showToast({
							title: '网络异常',
							icon: 'none'
						})
					})
			},

			// 解析照片字符串为对象数组
			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.loading) return
				if (this.imageList.length === 0) {
					uni.showToast({
						title: "请上传公司照片",
						icon: "none",
					});
					return;
				}

				// 获取所有图片URL
				const imageUrls = this.imageList.map(item => item.url);
				
				this.loading = true
				uni.showLoading({ title: '保存中' })
				let companyData = {
					companyId: this.companyId,
					photos: imageUrls.join(',')
				}
				this.$Request.postJson('/app/company/updateCompany', companyData)
					.then(res => {
						if (res.code == 0) {
							uni.showToast({
								title: '提交成功',
								duration: 1500,
							});
							setTimeout(() => {
								uni.$emit('updateCompanyInfo')
								uni.navigateBack()
							}, 500)
						}
						this.loading = false
						uni.hideLoading()
					})
					.catch(() => {
						this.loading = false
						uni.hideLoading()
					})
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import './company.scss';
	
	.content-index {
		margin-top: 20rpx;
		width: 100%;
	
		.upload-section {
			margin-bottom: 20rpx;
	
			.images-grid {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 20rpx 110rpx;
				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;
					justify-content: center;
					background: #eee;
	
					.upload-placeholder {
						display: flex;
						flex-direction: column;
						align-items: center;
						padding-top: 56rpx;
	
						.upload-text {
							color: #666;
							font-size: 16rpx;
							line-height: 1;
							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 {
			.warning-item {
				display: flex;
				color: rgba(102, 102, 102, 1);
				font-size: 24rpx;
				font-weight: 400;
				line-height: 32rpx;
				margin-bottom: 8rpx;
			}
		}
	}
</style>