yizhizan-h5/my/renzheng/companyLogo.vue

<template>
	<view class="switch-roles">
		<nav-bar title="公司信息" color="#000"></nav-bar>
		<view class="roles-content">
			<view class="content">
				<view class="progress-num"> <text>6</text>/8 </view>
				<view class="title">
					<view>添加公司LOGO</view>
				</view>
				<view class="desc">该logo将出现在公司主页及公司下展示的所有职位上</view>

				<view class="content-index">
					<!-- Logo上传区域 -->
					<view class="upload-section">
						<view class="upload-box" :class="{ 'has-image': logoImage }" @click="chooseImage">
							<view v-if="!logoImage" class="upload-placeholder">
								<u-icon name="plus" color="#999" size="40"></u-icon>
								<text class="upload-text">添加照片</text>
							</view>
							<view v-else class="image-preview">
								<image :src="logoImage" mode="aspectFill" class="preview-image"></image>
								<view class="image-mask" @click.stop="previewImage">
									<u-icon name="eye" color="#fff" size="40"></u-icon>
								</view>
								<view class="delete-btn" @click.stop="deleteImage">
									<u-icon name="close" color="#fff" size="20"></u-icon>
								</view>
							</view>
						</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: !logoImage }" @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: "",
				logoImage: "", // 上传的logo图片URL
				uploading: false, // 是否正在上传
				uploadProgress: 0, // 上传进度
			};
		},
		components: {
			navBar,
		},
		onLoad(options) {
			let companyInfo = uni.getStorageSync('companyInfo');
			this.logoImage = companyInfo.companyLogo;
		},
		methods: {
			// 选择图片
			async chooseImage() {
				const that = this;
				// 1. 检查权限状态
				const hasPermission = await this.$queue.checkPermission(
					'camera',
					'选择/拍摄照片需要相机/相册权限，用于上传用户头像',
					this
				);

				// 2. 如果未授权或者用户拒绝，显示提示
				if (!hasPermission) {
					return;
				}

				uni.chooseImage({
					count: 1,
					sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
					success: (res) => {
						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
						const tempFilePaths = res.tempFilePaths;

						// 这里可以添加图片验证
						that.validateAndUploadImage(tempFilePaths[0]);
					},
					fail: (error) => {
						console.log("选择图片失败:", error);
						uni.showToast({
							title: "选择图片失败",
							icon: "none",
						});
					},
				});
			},




			// 验证并上传图片
			validateAndUploadImage(tempFilePath) {
				const that = this;

				// 获取图片信息
				uni.getImageInfo({
					src: tempFilePath,
					success: (imageInfo) => {
						console.log("图片信息:", imageInfo);

						// 这里可以添加图片尺寸验证
						// if (imageInfo.width < 100 || imageInfo.height < 100) {
						//   uni.showToast({
						//     title: '图片尺寸过小，建议200×200px以上',
						//     icon: 'none'
						//   });
						//   return;
						// }

						// 开始上传
						that.uploadImage(tempFilePath);
					},
					fail: (error) => {
						console.log("获取图片信息失败:", error);
						that.uploadImage(tempFilePath); // 即使获取信息失败也继续上传
					},
				});
			},

			// 上传图片到服务器
			uploadImage(filePath) {
				const that = this;
				that.uploading = true;
				that.uploadProgress = 0;

				// 模拟上传进度
				const progressTimer = setInterval(() => {
					that.uploadProgress += 10;
					if (that.uploadProgress >= 90) {
						clearInterval(progressTimer);
					}
				}, 100);

				this.$queue.uploadFile(filePath, (path) => {
					if (path) {
						clearInterval(progressTimer);
						that.uploadProgress = 100;
						that.logoImage = path
						uni.showToast({
							title: '上传成功',
							icon: 'success'
						});
					} else {
						uni.showToast({
							title: data.message || '上传失败',
							icon: 'none'
						});
					}
					setTimeout(() => {
						that.uploading = false;
					}, 500);
				})
			},

			// 预览图片
			previewImage() {
				if (this.logoImage) {
					uni.previewImage({
						urls: [this.logoImage],
						current: 0,
					});
				}
			},

			// 删除图片
			deleteImage() {
				const that = this;
				uni.showModal({
					title: "提示",
					content: "确定要删除这个LOGO吗？",
					success: (res) => {
						if (res.confirm) {
							that.logoImage = "";
							that.uploadProgress = 0;
						}
					},
				});
			},
			goJobPostingSecond() {
				if (!this.logoImage) {
					uni.showToast({
						title: "请上传公司LOGO",
						icon: "none",
					});
					return;
				}
				
				let companyData = {
					companyId: this.$queue.getData('companyId'),
					companyLogo: this.logoImage
				}
				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/companyImg?companyData=${encodeURIComponent(JSON.stringify(companyData))}&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;

						.upload-box {
							width: 142rpx;
							height: 142rpx;
							border-radius: 8rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							background: #eee;
							position: relative;
							overflow: hidden;

							&.has-image {
								border-style: solid;
								border-color: #016bf6;
							}

							.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-subtext {
									color: #999;
									font-size: 20rpx;
								}
							}

							.image-preview {
								width: 100%;
								height: 100%;
								position: relative;

								.preview-image {
									width: 100%;
									height: 100%;
									border-radius: 12rpx;
								}

								.image-mask {
									position: absolute;
									top: 0;
									left: 0;
									width: 100%;
									height: 100%;
									background: rgba(0, 0, 0, 0.5);
									display: flex;
									align-items: center;
									justify-content: center;
									opacity: 0;
									transition: opacity 0.3s;

									&:active {
										opacity: 1;
									}
								}

								.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-progress {
							margin-top: 20rpx;
							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>