yizhizan-h5/my/renzheng/companyBaseInfo.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">1</text>
				<text>/6</text>
			</view>
			
			<view class="main-title">基本信息</view>
			<view>开始完善公司主页吧，让求职者了解公司</view>
			
			<view class="section">
				<view class="title">公司Logo</view>
				<view>该logo将出现在公司主页及公司下展示的所有职位上</view>
				<view class="upload-wrapper flex align-center" @click="chooseImage">
					<image :src="companyLogo || '/static/logo.png'" class="logo" mode="aspectFill"></image>
					<view class="tip-text">重新上传</view>
				</view>
				<view>请上传清晰且完整的图片</view>
			</view>
			
			<view class="section">
				<view class="title">公司名称</view>
				<view class="input-wrapper">
					<input v-model="companyName" placeholder="请输入公司名称" maxlength="100" class="input" placeholder-class="placeholder-class" />
				</view>
			</view>
			
			<view class="section">
				<view class="title">公司全称</view>
				<view style="height: 32rpx;">{{ companyAllName }}</view>
			</view>
			
			<view class="section">
				<view class="title">融资阶段</view>
				<view class="input-wrapper" @click="openSelectModal(1)">
					<view class="input-content">
						<text class="input-value" v-if="companyDevelop">{{ companyDevelop }}</text>
						<text class="input-placeholder" v-else>请选择融资阶段</text>
					</view>
					<u-icon name="arrow-down"></u-icon>
				</view>
			</view>
			
			<view class="section">
				<view class="title">人员规模</view>
				<view class="input-wrapper" @click="openSelectModal(2)">
					<view class="input-content">
						<text class="input-value" v-if="companyPeople">{{ companyPeople }}</text>
						<text class="input-placeholder" v-else>请选择人员规模</text>
					</view>
					<u-icon name="arrow-down"></u-icon>
				</view>
			</view>
			
			<view class="section">
				<view class="title"><text class="required">*</text>公司业务类型</view>
				<view>
					<u-checkbox-group size="24">
						<u-checkbox 
							label-size="24"
							@change="checkboxChange" 
							v-model="item.checked" 
							v-for="item in companyTypeList" :key="item.value" 
							:name="item.value"
						>{{item.label}}</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
			
			<u-select
				v-model="showSelect"
				:default-value="defaultValue"
				:list="selectList"
				@confirm="confirmSelect"
			></u-select>
		</view>
		
		<view class="fixed-button">
			<view class="button" @click="handleSave">保存</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'
	import { companyType, companyDevelop, companyPeopleNum } from '@/constants/common.js'
	export default {
		components: {
			navBar
		},
		data() {
			return {
				companyId: '',
				companyLogo: '',
				companyName: '',
				companyAllName: '',
				companyDevelop: '', // 融资阶段
				companyPeople: '', // 人员规模
				companyTypes: [], // 公司类型
				loading: false,
				showSelect: false,
				openType: 1, // 1融资阶段 2人员规模
				uploading: false,
				uploadProgress: 0,
			};
		},
		computed: {
			// 公司业务类型
			companyTypeList() {
				return companyType.map(type => {
					if (this.companyTypes.includes(type.value)) {
						type.checked = true
					} else {
						type.checked = false
					}
					return type
				})
			},
			
			// 选择器列表数据
			selectList() {
				return (this.openType == 1 ? companyDevelop : companyPeopleNum).map(item => {
					return {
						value: item,
						label: item
					}
				}) || []
			},
			
			// 回显数组
			defaultValue() {
				const index = (this.openType == 1 ? companyDevelop : companyPeopleNum).findIndex(item => {
					if (this.openType == 1 && item == this.companyDevelop) {
						return item
					}
					if (this.openType != 1 && item == this.companyPeople) {
						return item
					}
				})
				return [index == -1 ? 0 : index]
			}
		},
		onLoad() {
			this.getCompanyInfo()
		},
		methods: {
			// 跳转至下一步 
			toNext() {
				uni.redirectTo({
					url: '/my/renzheng/companyWelfare'
				})
			},
			
			// 获取公司信息
			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.companyLogo = res.data.companyLogo
						this.companyName = res.data.companyName
						this.companyAllName = res.data.companyAllName
						this.companyDevelop = res.data.companyDevelop
						this.companyPeople = res.data.companyPeople
						// 设置公司业务类型
						if (res.data.type) {
							const types = JSON.parse(res.data.type)
							this.companyTypes= types
						}
						uni.hideLoading()
					})
					.catch((err) => {
						uni.hideLoading()
						uni.showToast({
							title: '网络异常',
							icon: 'none'
						})
					})
			},
			
			// 选择图片
			async chooseImage() {
				// 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;
			
						// 这里可以添加图片验证
						this.validateAndUploadImage(tempFilePaths[0]);
					},
					fail: (error) => {
						console.log("选择图片失败:", error);
						uni.showToast({
							title: "选择图片失败",
							icon: "none",
						});
					},
				});
			},
			
			// 验证并上传图片
			validateAndUploadImage(tempFilePath) {
				// 获取图片信息
				uni.getImageInfo({
					src: tempFilePath,
					success: (imageInfo) => {
						console.log("图片信息:", imageInfo);
			
						// 开始上传
						this.uploadImage(tempFilePath);
					},
					fail: (error) => {
						console.log("获取图片信息失败:", error);
						this.uploadImage(tempFilePath); // 即使获取信息失败也继续上传
					},
				});
			},
			
			// 上传图片到服务器
			uploadImage(filePath) {
				this.uploading = true;
				this.uploadProgress = 0;
			
				// 模拟上传进度
				const progressTimer = setInterval(() => {
					this.uploadProgress += 10;
					if (this.uploadProgress >= 90) {
						clearInterval(progressTimer);
					}
				}, 100);
			
				this.$queue.uploadFile(filePath, (path) => {
					if (path) {
						clearInterval(progressTimer);
						this.uploadProgress = 100;
						this.companyLogo = path
						uni.showToast({
							title: '上传成功',
							icon: 'success'
						});
					} else {
						uni.showToast({
							title: data.message || '上传失败',
							icon: 'none'
						});
					}
					setTimeout(() => {
						this.uploading = false;
					}, 500);
				})
			},
			
			checkboxChange(item) {
				if (item.value) {
					this.companyTypes.push(item.name)
				} else {
					const index = this.companyTypes.findIndex(type => type.value == item.name)
					this.companyTypes.splice(index, 1)
				}
			},
			
			openSelectModal(type) {
				this.openType = type
				this.showSelect = true
			},
			
			// 选择select数据
			confirmSelect(e) {
				let item = e[0]
				if (this.openType == 1) {
					this.companyDevelop = item.value
				} else {
					this.companyPeople = item.value
				}
			},
			
			handleSave() {
				if (this.loading) return
				
				if (!this.companyTypes.length) {
					return this.$queue.showToast('请选择公司类型')
				}
				
				uni.showLoading({ title: '保存中' })
				this.loading = true
				let companyData = {
					companyId: this.companyId,
					companyLogo: this.companyLogo,
					companyName: this.companyName,
					companyAllName: this.companyAllName,
					companyDevelop: this.companyDevelop,
					companyPeople: this.companyPeople,
					type: JSON.stringify(this.companyTypes)
				}
				
				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 = true
						uni.hideLoading()
					})
					.catch(() => {
						this.loading = true
						uni.hideLoading()
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './company.scss';
</style>