yizhizan-h5/my/enterpriseInfo/enterpriseInfo.vue

<template>
	<view class="content">
		<!-- 顶部导航 -->
		<view class="nav-bar">
			<view class="nav-left" @click="goBack">
				<u-icon name="arrow-leftward" color="rgba(51, 51, 51, 1)" style="font-size: 38rpx;"></u-icon>
			</view>
			<view class="nav-title">公司介绍</view>
			<view class="nav-right">
				<view class="nav-icons">
					<view class="nav-icon" @click="setCollection">
						<image v-if="isCollection==0" src="/static/images/index/guanzhu.svg" class="icon-img"></image>
						<image v-else src="/static/images/index/gzActive.svg" class="icon-img"></image>
					</view>
					<view class="nav-icon" @click="showShare">
						<image src="/static/images/index/fenxiang.svg" class="icon-img"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 企业信息 -->
		<view class="info flex justify-center">
			<view class="info-box flex align-center justify-between">
				<view class="info-box-r">
					<view class="info-box-r-title" v-show="info.companyName">
						{{info.companyName}}
					</view>
					<view class="info-box-r-label flex align-center flex-wrap">
						<view class="info-box-r-label-item" v-if="info.companyPeople">
							{{info.companyPeople}}
						</view> 
						<view class="info-box-r-label-item" v-show="info.companyScope">
							{{info.companyScope}}
						</view>
					</view>
				</view>
				<image :src="info.companyLogo?info.companyLogo:'../../static/logo.png'"
					style="width: 120rpx;height: 120rpx;border-radius: 50%;" mode="">
				</image>
			</view>
		</view>

		<!-- 急聘标签 -->
		

		<!-- 公司地址 -->
		<view class="address flex justify-center">
			<view class="address-box flex justify-center">
				<view class="address-box-c">
					<!-- 工作时间 -->
					<view class="working-hours flex align-center">
						<u-icon name="clock" color="rgba(51, 51, 51, 1)" size="38" style="margin-right: 12rpx;"></u-icon>
						<text>上午9:00-下午06:30</text>
					</view>
					
					<!-- 福利标签 -->
					<view class="benefits-section">
						<view class="benefits-tags flex align-center flex-wrap">
							<view class="benefit-tag">
								<image src="/static/images/index/huizhang.svg" class="tag-icon"></image>
								<text>五险一金</text>
							</view>
							<view class="benefit-tag">
								<image src="/static/images/index/huizhang.svg" class="tag-icon"></image>
								<text>补充医疗保险</text>
							</view>
							<view class="benefit-tag">
								<image src="/static/images/index/huizhang.svg" class="tag-icon"></image>
								<text>定期体检</text>
							</view>
							<view class="benefit-tag">
								<image src="/static/images/index/huizhang.svg" class="tag-icon"></image>
								<text>年终奖</text>
							</view>
						</view>
					</view>
					
					<!-- 地址信息 -->
					<view @click="openMap()" class="address-box-c-add flex justify-between align-center">
						<view class="address-box-c-add-l flex align-center">
							<u-icon name="map" style="margin-right: 12rpx;" color="rgba(51, 51, 51, 1)" size="24"></u-icon>
							<text>{{info.province?info.province:''}}{{info.city?info.city:''}}{{info.district?info.district:''}}{{info.companyAddress?info.companyAddress:''}}</text>
						</view>
						<!-- 
							<view class="address-box-c-add-r">
								<u-icon name="arrow-right" color="rgba(51, 51, 51, 1)" size="24"></u-icon>
							</view>	
						-->
					</view>
				</view>
			</view>
		</view>
		<!-- 企业介绍 -->
		<view class="remarks flex justify-center">
			<view class="remarks-box">
				<view class="remarks-box-title">
					公司介绍
				</view>
				<view class="remarks-box-con">
					<u-read-more show-height="100" :shadow-style="shadowStyle" color="#FD6416" text-indent="0"
						closeText="展开">
						<!-- <rich-text :nodes="info.companyDetails"
							style="color: #ffffff;font-size: 28rpx;font-weight: 500;">
						</rich-text> -->
						<view class="remarks-box-con-item">
							汉睿国际（汉睿集团）成立于2019年11月，是一家致力于打造跨境电商一站式综合服务平台的企业。集团依托全球视野下的跨境服务资源，通过“跨境电商赋能 + 人才培养孵化 + 产业链撮合”的运营模式，推动跨境电商本土XXXXXXXXXXXXXXXXXX...
						</view>
					</u-read-more>
				</view>
			</view>
		</view>

		<!-- 主营业务 -->
		<view class="business-section flex justify-center">
			<view class="business-box">
				<view class="business-title">主营业务</view>
				<view class="business-tags flex flex-wrap">
					<view class="business-tag" v-for="(business, index) in businessList" :key="index">
						{{business}}
					</view>
				</view>
			</view>
		</view>

		<!-- hr介绍 -->
		<view class="hr-section flex justify-center">
			<view class="hr-box">
				<view class="hr-header flex justify-between align-center">
					<view class="hr-title">HR介绍</view>
					<view class="view-all-jobs" @click="goToMoreJobs">
						<text>查看所有职位</text>
					</view>
				</view>
				
				<view class="hr-list flex justify-between">
					<view class="hr-item" v-for="(hr, index) in hrList" :key="index">
						<view class="hr-content flex align-center">
							<view class="hr-avatar-container">
								<view class="hr-avatar" :style="{ backgroundColor: hr.color }">
									<text class="avatar-text">{{hr.name.charAt(0)}}</text>
								</view>
								<view class="online-dot"></view>
							</view>
							<view class="hr-text">
								<view class="hr-name">{{hr.name}}</view>
								<view class="hr-position">{{hr.position}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 人才发展 -->
		<view class="talent-section flex justify-center">
			<view class="talent-box">
				<view class="talent-title">人才发展</view>
				<view class="talent-tags flex flex-wrap">
					<view class="talent-tag" v-for="(talent, index) in talentList" :key="index">
						{{talent}}
					</view>
				</view>
			</view>
		</view>

		<!-- 公司风采 -->
		

		<!-- 工商信息 -->
		<view class="gsInfo flex justify-center">
			<view class="gsInfo-box flex justify-center">
				<view class="gsInfo-box-c">
					<view class="gsInfo-box-c-title">
						工商信息
					</view>
					<view class="gsInfo-box-c-item">
						公司全称：{{info.companyName?info.companyName:''}}
					</view>
					<view class="gsInfo-box-c-item">
						成立时间：{{info.companyCreateTime?info.companyCreateTime:''}}
					</view>
					<view class="gsInfo-box-c-item">
						注册资本：{{info.companyRegisteredFund?info.companyRegisteredFund:''}}万人民币
					</view>
					<view class="gsInfo-box-c-item">
						法人代表：{{info.companyLegalPerson?info.companyLegalPerson:'未知'}}
					</view>
				</view>
			</view>
		</view>

		<!-- 全部岗位弹窗 -->
		<btnPopous ref="jobPopup" v-if="showJobPopup && companyId" :companyId="companyId" :cittArr="cittArr" :classify="classify" :moneyArr="moneyArr"
			:jyArr="jyArr" @closePopup="closeJobPopup" />
	</view>
</template>

<script>
	import btnPopous from '../../components/btnPopous/btnPopous.vue'
	export default {
		components: {
			btnPopous
		},
		data() {
			return {
				backStyle: {
					color: '#ffffff'
				},
				shadowStyle: {
					backgroundImage: 'none',
				},
				companyId: '',
				info: {},
				isCollection: 0, // 收藏状态
				showJobPopup: false, // 控制职位弹窗显示
				cittArr: [], //企业发布岗位的城市数组
				moneyArr: [], //薪资列表数组
				jyArr: [], //工作经验列表数组
				classify: [], //岗位名称数组
				hrList: [
					{
						name: '孙先生',
						position: '人事经理',
						color: '#4A90E2'
					},
					{
						name: '宋先生',
						position: 'HRBP',
						color: '#7ED321'
					},
					{
						name: '邹先生',
						position: 'HR助力',
						color: '#F5A623'
					}
				],
				businessList: ['居家日用', '食品饮料', '3C数码', '美妆日化'],
				talentList: ['考核晋升', '项目奖金', '股票期权', '每年普调']
			};
		},
		//分享
		onShareAppMessage(res) {
			return {
				path: '/my/enterpriseInfo/enterpriseInfo?companyId=' + this.companyId + '&invitation=' + uni
					.getStorageSync(
						'invitationCode'),
				title: this.info.companyName,
			}
		},
		/*
		 * uniapp微信小程序分享页面到微信朋友圈
		 */
		onShareTimeline(res) {
			return {
				path: '/my/enterpriseInfo/enterpriseInfo?companyId=' + this.companyId + '&invitation=' + uni
					.getStorageSync(
						'invitationCode'),
				title: this.info.companyName,
			}
		},
		// onPageScroll(e) {
		// 	if (e.scrollTop > 100) {
		// 		uni.setNavigationBarTitle({
		// 			title: '西安省钱兄网络科技有限公司'
		// 		})
		// 	} else {
		// 		uni.setNavigationBarTitle({
		// 			title: '企业详情'
		// 		})
		// 	}
		// },
		onLoad(option) {
			// 获取邀请码保存到本地
			if (option.invitation) {
				this.$queue.setData('inviterCode', option.invitation);
			}
			// #ifdef MP-WEIXIN
			if (option.scene) {
				const scene = decodeURIComponent(option.scene);
				this.$queue.setData('inviterCode', scene.split(',')[0]);
			}
			// #endif
			uni.showLoading({
				title: '加载中'
			})
			this.companyId = option.companyId
			this.getInfo();
			this.getCityCompanyId();
			this.getMoney();
			this.getJy();
			this.getClassify();
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			// 显示分享选项
			showShare() {
				// 可以添加分享逻辑
				uni.showToast({
					title: '分享功能',
					icon: 'none'
				});
			},
			// 收藏企业
			setCollection() {
				this.$Request.postT("/app/myCollection/saveCollection", {
					companyId: this.companyId,
					type: 2 // 2表示收藏企业
				}).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: res.msg
						})
						this.isCollection = this.isCollection == 0 ? 1 : 0;
					}
				})
			},
			// 显示所有职位弹窗
			goToMoreJobs() {
				this.showJobPopup = true;
				this.$nextTick(() => {
					if (this.$refs.jobPopup) {
						this.$refs.jobPopup.topY = true;
					}
				});
			},
			// 关闭职位弹窗
			closeJobPopup() {
				this.showJobPopup = false;
			},
			openMap() {
				let that = this
				if (that.info.companyLat && that.info.companyLng) {
					uni.openLocation({
						latitude: that.info.companyLat,
						longitude: that.info.companyLng,
						address: that.info.province + '' + that.info.city + '' + that.info.district + '' + that
							.info
							.companyAddress,
						name: that.info.companyAddress
					})
				} else {
					uni.showToast({
						title: '暂无位置信息',
						icon: 'none'
					})
				}


			},
			/**
			 * 岗位分类数组
			 */
			getClassify() {
				this.$Request.getT("/app/postPush/getCompanyClassify", {
					companyId: this.companyId
				}).then(res => {
					if (res.code == 0) {
						this.classify = res.data //岗位分类列表数组
					}
				})
			},
			/**
			 * 获取薪资 列表
			 */
			getMoney() {
				this.$Request.get("/app/dict/list", {
					type: '薪资 '
				}).then(res => {
					if (res.code == 0) {
						this.moneyArr = res.data //薪资列表数组
					}
				})
			},
			/**
			 * 获取工作经验列表
			 */
			getJy() {
				this.$Request.get("/app/dict/list", {
					type: '工作经验 '
				}).then(res => {
					if (res.code == 0) {
						this.jyArr = res.data //工作经验列表数组
					}
				})
			},
			/**
			 * 根据公司id查询已发布岗位的市
			 */
			getCityCompanyId() {
				let data = {
					companyId: this.companyId
				}
				this.$Request.getT("/app/postPush/getCityCompanyId", data).then(res => {
					if (res.code == 0) {
						this.cittArr = res.data
					}
				})
			},
			//获取企业详情
			getInfo() {
				let that = this
				this.$Request.get("/app/company/selectCompanyByCompanyId", {
					companyId: this.companyId
				}).then(res => {
					if (res.code == 0) {
						this.info = res.data
						if (this.info.companyName) {
							uni.setNavigationBarTitle({
								title: that.info.companyName
							})
						}
						// let reg = /.+?(省|市|自治区|自治州|县|区)/g
						// let cityarr = this.info.companyAddress.match(reg)
						// if (cityarr && cityarr != null) {
						// 	if (cityarr.length == 3) {
						// 		this.info.companyAddress = cityarr[0] + '' + cityarr[1] + '' + cityarr[2]
						// 	} else {
						// 		this.info.companyAddress = cityarr[0] + '' + cityarr[1]
						// 	}
						// }
					}
					uni.hideLoading()
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		// background-color: #4B4D5C;
		// overflow: hidden;
	}

	.content {
		padding-top: 88rpx!important;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;
		padding: 0 40rpx;

		.nav-left {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			width: 96rpx;
		}

		.nav-title {
			color: rgba(34, 37, 42, 1);
			font-family: DM Sans;
			font-size: 16px;
			font-weight: 400;
			line-height: 24px;
			letter-spacing: 0px;
			text-align: left;
		}

		.nav-right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			width: 96rpx;
		}

		.nav-icons {
			display: flex;
			align-items: center;
			gap: 24rpx;
		}

		.nav-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 36rpx;
			height: 36rpx;
		}

		.icon-img {
			width: 42rpx;
			height: 42rpx;
		}
	}

	.info {
		width: 100%;
		height: 100rpx;
		margin-top: 50rpx;

		.info-box {
			width: 686rpx;
			height: 100%;

			.info-box-r {
				width: calc(100% - 150rpx);
			}

			.info-box-r-title {
				color: rgba(58, 57, 67, 1);
				font-family: DM Sans;
				font-size: 42rpx;
				font-weight: 700;
				line-height: 30px;
				letter-spacing: 0px;
				text-align: left;
			}

			.info-box-r-label {
				color: #FFFFFF;
				font-size: 28rpx;
				font-weight: 500;
				margin-top: 20rpx;

				.info-box-r-label-item {
					color: rgba(153, 153, 153, 1);
					font-family: DM Sans;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 16px;
					letter-spacing: 0%;
					text-align: left;
				}
			}
		}
	}

	.remarks {
		width: 100%;
		margin-top: 50rpx;

		.remarks-box {
			width: 686rpx;

			.remarks-box-title {
				color: rgba(34, 37, 42, 1);
				font-family: DM Sans;
				font-size: 16px;
				font-weight: 400;
				line-height: 24px;
				letter-spacing: 0px;
				text-align: left;
			}

			.remarks-box-con {
				margin-top: 30rpx;

				.remarks-box-con-item {
					color: rgba(153, 153, 153, 1);
					font-family: DM Sans;
					font-size: 14px;
					font-weight: 400;
					line-height: 18px;
					letter-spacing: 0px;
					text-align: left;
				}
			}
		}
	}

	.address {
		width: 100%;
		margin-top: 50rpx;

		.address-box {
			width: 686rpx;
			border-radius: 24rpx;

			.address-box-c {
				width: 100%;

				.working-hours {
					margin-bottom: 24rpx;
					
					text {
						color: rgba(51, 51, 51, 1);
						font-size: 28rpx;
						font-weight: 400;
					}
				}

				.benefits-section {
					margin-bottom: 24rpx;

					.benefits-tags {
						gap: 12rpx;

						.benefit-tag {
							background: rgba(40, 107, 229, 0.1);
							border-radius: 12rpx;
							padding: 12rpx;
							display: flex;
							align-items: center;
							gap: 8rpx;

							.tag-icon {
								width: 48rpx;
								height: 48rpx;
							}

							text {
								color: rgba(34, 37, 42, 0.5);
								font-family: DM Sans;
								font-size: 12px;
								font-weight: 400;
								line-height: 22px;
								letter-spacing: 0px;
								text-align: left;
							}
						}
					}
				}

				.address-box-c-add {
					padding: 0;

					.address-box-c-add-l {
						color: rgba(102, 102, 102, 1);
						font-family: DM Sans;
						font-size: 24rpx;
						font-weight: 400;
						line-height: 16px;
						letter-spacing: 0px;
						text-align: left;
					}

					.address-box-c-add-r {
						width: 48rpx;
						height: 48rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
	}

	.business-section {
		width: 100%;
		margin-top: 30rpx;

		.business-box {
			width: 686rpx;
			background: #ffffff;
			border-radius: 24rpx;

			.business-title {
				color: rgba(34, 37, 42, 1);
				font-family: DM Sans;
				font-size: 16px;
				font-weight: 400;
				line-height: 24px;
				letter-spacing: 0px;
				text-align: left;
				margin-bottom: 24rpx;
			}

			.business-tags {
				gap: 12rpx;

				.business-tag {
					background: transparent;
					border: 1px solid rgba(153, 196, 250, 1);
					border-radius: 12rpx;
					padding: 6rpx 12rpx;
					color: rgba(40, 107, 229, 1);
					font-family: DM Sans;
					font-size: 20rpx;
					font-weight: 400;
					line-height: 16px;
					letter-spacing: 0px;
					text-align: center;
				}
			}
		}
	}

	.talent-section {
		width: 100%;
		margin-top: 30rpx;

		.talent-box {
			width: 686rpx;
			background: #ffffff;
			border-radius: 24rpx;

			.talent-title {
				color: rgba(34, 37, 42, 1);
				font-family: DM Sans;
				font-size: 16px;
				font-weight: 400;
				line-height: 24px;
				letter-spacing: 0px;
				text-align: left;
				margin-bottom: 24rpx;
			}

			.talent-tags {
				gap: 12rpx;

				.talent-tag {
					background: rgba(153, 153, 153, 0.1);
					border-radius: 12rpx;
					padding: 6rpx 12rpx;
					color: rgba(102, 102, 102, 1);
					font-family: DM Sans;
					font-size: 20rpx;
					font-weight: 400;
					line-height: 16px;
					letter-spacing: 0px;
					text-align: center;
				}
			}
		}
	}

	.hr-section {
		width: 100%;

		.hr-box {
			width: 686rpx;
			background: #ffffff;
			border-radius: 24rpx;

			.hr-header {
				padding: 50rpx 0 0 0;
				margin-bottom: 30rpx;

				.hr-title {
					color: rgba(34, 37, 42, 1);
					font-family: DM Sans;
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
					letter-spacing: 0px;
					text-align: left;
				}

				.view-all-jobs {
					text {
						color: rgba(255, 102, 0, 1);
						font-family: DM Sans;
						font-size: 12px;
						font-weight: 400;
						line-height: 16px;
						letter-spacing: 0px;
						text-align: right;
					}
				}
			}

			.hr-list {
				padding: 0 0 30rpx 0;

				.hr-item {
					flex: 1;

					.hr-content {
						align-items: center;

						.hr-avatar-container {
							position: relative;
							margin-right: 16rpx;

							.hr-avatar {
								width: 80rpx;
								height: 80rpx;
								border-radius: 50%;
								display: flex;
								align-items: center;
								justify-content: center;
								position: relative;

								.avatar-text {
									color: #ffffff;
									font-size: 32rpx;
									font-weight: 600;
								}
							}

							.online-dot {
								position: absolute;
								bottom: 4rpx;
								right: 4rpx;
								width: 20rpx;
								height: 20rpx;
								background-color: #7ED321;
								border-radius: 50%;
								border: 3rpx solid #ffffff;
							}
						}

						.hr-text {
							.hr-name {
								color: rgba(34, 37, 42, 1);
								font-family: DM Sans;
								font-size: 28rpx;
								font-weight: 500;
								line-height: 20px;
								margin-bottom: 4rpx;
								text-align: left;
							}

							.hr-position {
								color: rgba(153, 153, 153, 1);
								font-family: DM Sans;
								font-size: 24rpx;
								font-weight: 400;
								line-height: 16px;
								text-align: left;
							}
						}
					}
				}
			}
		}
	}

	.gsInfo {
		width: 100%;
		margin-top: 20rpx;

		.gsInfo-box {
			width: 686rpx;
			height: 100%;
			border-radius: 24rpx;

			.gsInfo-box-c {
				width: 100%;
				height: 100%;
				padding-top: 30rpx;
				padding-bottom: 30rpx;
			}

			.gsInfo-box-c-title {
				color: rgba(34, 37, 42, 1);
				font-family: DM Sans;
				font-size: 16px;
				font-weight: 400;
				line-height: 24px;
				letter-spacing: 0px;
				text-align: left;
				margin-bottom: 10rpx;
			}

			.gsInfo-box-c-item {
				color: rgba(153, 153, 153, 1);
				font-family: DM Sans;
				font-size: 12px;
				font-weight: 400;
				line-height: 16px;
				letter-spacing: 0%;
				text-align: left;
				margin-bottom: 10rpx;
			}
		}
	}
</style>