yizhizan-pc/src/views/post/postInfo.vue

<template>
	<div @click.stop="closeShow()" class="postInfos" style="padding-bottom: 20px;">
		<!-- 岗位详情 -->
		<div class="postInfo flex align-center justify-center">
			<div class="postInfo-box">
				<!-- 岗位名称/薪资 -->
				<div class="postInfo-box-top flex align-center justify-between">
					<div class="postInfo-box-top-l">
						{{ info.ruleClassifyName }}
						<span>{{ info.salaryRange }}</span>
					</div>
					<!-- <div class="postInfo-box-top-r flex align-center">
						<div @click.stop="getShare()" class="postInfo-box-top-r-qr flex align-center">
							<img src="/images/postimg/share.png" alt="" />
							分享岗位
							<div v-if="isShowQr" class="postInfo-box-top-r-qrs flex align-center justify-center">
								<img :src="qr" alt="" />
							</div>
						</div>
						<div @click.stop="openShow()" class="flex align-center">
							<img src="/images/postimg/jubao.png" alt="" />
							举报
						</div>
					</div> -->
				</div>
				<div class="postInfo-box-status flex align-center">
					{{ info.province ? info.province : '' }}{{ info.city ? info.city : '' }}{{ info.county ? info.county
					: '' }}{{ info.address ? info.address : '' }}
				</div>
				<!-- 地址、要求 -->
				<div class="postInfo-box-ins">
					{{info.city}} {{info.county}}<el-divider direction="vertical" />{{info.experience}}<el-divider
						direction="vertical" />{{info.education}}
				</div>
				<!-- 标签/操作 -->
				<div class="postInfo-box-labels flex justify-between">
					<div class="postInfo-box-labels-l flex align-center flex-wrap">
						<img :src="info.hr && info.hr.hrImg ? info.hr.hrImg : '/default.jpg'"
							style="width: 40px;height: 40px;border-radius: 50%;" mode="">
						</img>
						<div class="company-info-text">
							{{ info.user && info.user.userName || '未知' }}·{{ info.hr && info.hr.hrPosition || '未知' }}
						</div>
						<div class="reply-time">{{ info.respondTime || (info.user && (info.user.onlineMinutes == '从未在线' ? '不久前在线' : info.user.onlineMinutes)) }}</div>
					</div>
					<div class="postInfo-box-labels-r flex align-center">
						<div @click.stop="setCollection()"
							class="postInfo-box-labels-r-s flex align-center justify-center">
							<el-icon v-if="info.isCollection==0" :size="20" style="margin-right: 6px;">
								<Star />
							</el-icon>
							<el-icon v-else :size="20" style="margin-right: 6px;">
								<StarFilled />
							</el-icon>
							{{info.isCollection==0?'收藏':'已收藏'}}
						</div>
						<div @click.stop="openMeg()" class="postInfo-box-labels-r-l flex align-center justify-center">
							立即沟通
						</div>
					</div>
				</div>

			</div>
		</div>
		<!-- 岗位介绍 -->
		<div class="postJs flex align-center justify-center">
			<div class="postJs-box">
				<div class="postJs-box-title" style="margin-bottom: 10px;">
					岗位介绍
				</div>
				<div class="postJs-box-content" v-html="info.positionDetails"></div>

				<div class="postJs-box-tag flex align-center flex-wrap" v-if="info.positionTag">
					<div class="postJs-box-tag-item"
						v-for="(item, index) in info.positionTag ? info.positionTag.split(',') : []" :key="index">
						{{ item }}
					</div>
				</div>
			</div>
		</div>
		<!-- 岗位福利 -->
		<div class="postJs flex align-center justify-center">
			<div class="postJs-box">
				<div class="postJs-box-title">
					岗位福利
				</div>
				<div class="postJs-box-tag flex align-center flex-wrap" v-if="info.welfareTag">
					<div class="postJs-box-tag-item" v-for="(item, index) in info.welfareTag ? info.welfareTag.split(';') : []" :key="index">
						{{ item }}
					</div>
				</div>
			</div>
		</div>
		<!-- 公司简介 -->
		<div class="postGs flex align-center justify-center">
			<div class="postGs-box">
				<div class="postGs-box-title">
					公司基本信息
				</div>
				<div class="postGs-box-info flex align-center">
					<img :src="info.company && info.company.companyLogo?info.company.companyLogo:'/default.jpg'" alt="" />
					<div class="postGs-box-info-r">
						<div class="postGs-box-info-r-name">
							{{ info.company?.companyName || info.company?.companyAllName || '匿名公司' }}
						</div>
						<div class="postGs-box-info-r-bottom">
							{{info.company?info.company.companyScope:''}}
							<span>
								{{info.company?info.company.companyPeople:''}}
							</span>
						</div>
					</div>
				</div>
				<el-divider />
				<div id="container" class="postMap">

				</div>
				<div class="postGs-box-address flex align-center">
					<el-icon size="18" color="#00DD9A" style="margin-right: 10px;">
						<Location />
					</el-icon>
					{{info.company?info.company.companyAddress:''}}
				</div>
			</div>
		</div>
		<!-- 消息组件 -->
		<messageCom v-if="showMeg" :byUserId="byUserId" :postPushId="postPushId"
			:chatConversationId="chatConversationId" :showMeg="showMeg" :userType="1" @closeMeg="closeMeg" />
		<!-- 举报弹窗 -->
		<el-dialog v-model="show" @close="closeJb" :draggable="true" destroy-on-close align-center center>
			<template #header>
				<div class="my-header flex align-center">
					<div class="my-header-title" style="font-weight: bold;">
						举报
					</div>
				</div>
			</template>
			<div class="jb" v-loading="loading">
				<div class="jb-title">
					问题和意见
				</div>
				<div class="jb-text">
					<el-input resize="none" :input-style="inputStyles" v-model="sendDate.content"
						:autosize="{ minRows: 6, maxRows: 8 }" type="textarea" placeholder="请详细描述你的问题和意见..." />
				</div>
				<div class="jb-title" style="margin-top: 20px;">
					电话/微信
				</div>
				<div class="jb-text jb-texts">
					<el-input :input-style="inputStyles" style="width: 100%;" v-model="sendDate.contact"
						placeholder="方便我们联系您" />
				</div>
				<div class="jb-title" style="margin-top: 20px;">
					上传图片
				</div>
				<div class="jb-text jb-texts" style="background-color: #ffffff;">
					<el-upload v-model:file-list="imgs" :action="action" :on-preview="handlePictureCardPreview"
						:on-remove="handleRemove" list-type="picture-card">
						<el-icon>
							<Plus />
						</el-icon>
					</el-upload>
					<el-dialog v-model="dialogVisible">
						<img w-full :src="dialogImageUrl" style="width: 100%;height: auto;" alt="Preview Image" />
					</el-dialog>
				</div>
				<div class="jb-btn flex align-center">
					<el-button @click.stop="show = false">取消</el-button>
					<el-button type="primary" @click.stop="reportSave">提交</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		ROOTPATH,
		ROOTPATH4
	} from '../../../comment/httpUrl.js'
	import axios from 'axios'
	import messageCom from '../../components/messageCom/messageCom.vue'
	import {
		ElMessageBox,
		ElMessage,
	} from 'element-plus'
	export default {
		components: {
			messageCom
		},
		data() {
			return {
				dialogImageUrl: '',
				dialogVisible: false,
				action: ROOTPATH4 + 'sqx_fast/alioss/upload',
				byUserId: '',
				chatConversationId: '',
				showMeg: false, //是否打开聊天组件
				sendDate: {
					content: '',
					contact: ''
				},
				inputStyles: {
					border: 'none',
					background: '#F7F7F7',
					borderRadius: '8px',
					boxShadow: 'none',
				},
				show: false,
				postPushId: '', //岗位id
				info: {}, //岗位详情
				qr: '', //分享二维码
				isShowQr: false, //是否显示分享二维码
				screenHeight: 0, //屏幕高度
				loading: false,
				imgs: [], //上传图片
			}
		},
		mounted() {
			this.screenHeight = window.innerHeight
			this.postPushId = this.$route.query.postPushId
			let inviterCode = this.$route.query.inviterCode
			if (inviterCode) {
				localStorage.setItem('inviterCode', inviterCode)
			}
			if (this.postPushId) {
				// this.qr = ROOTPATH + '/app/invite/mpPageCreateQr?page=pages/index/game/order&postPushId=' + this.postPushId
				this.getJobInfo()
			}

		},
		methods: {
			//移除图片
			handleRemove(e) {
				let imgs = []
				this.imgs.map(item => {
					imgs.push(item.response.data)
				})
				this.sendDate.imgs = imgs.join(',')
			},
			//放大查看
			handlePictureCardPreview(e) {
				this.dialogImageUrl = e.url
				this.dialogVisible = true
			},
			closeJb() {
				this.imgs = []
				this.sendDate = {
					content: '',
					contact: ''
				}
			},
			//去登录
			goLogo() {
				this.$router.push({
					name: 'login'
				})
			},
			//关闭子弹窗组件的回调
			closeMeg(data) {
				//关闭聊天组件
				this.showMeg = data
			},
			//立即联系
			openMeg() {
				if (!localStorage.getItem('token')) {
					this.goLogo()
					return
				}
				this.$Request.post('/app/chat/insertChatConversation', {
					userId: localStorage.getItem('userId'), //用户userid
					focusedUserId: this.info.user.userId, //企业userid
					type: 1,
					postPushId: this.info.postPushId,
					resumesId: localStorage.getItem('resumeId')
				}, {
					type: 'json'
				}).then(res => {
					if (res.code == 0) {
						this.byUserId = this.info.user.userId
						this.chatConversationId = res.data.chatConversationId
						this.showMeg = true
					}
				})
			},
			//初始化地图
			initMap() {
				var center = new TMap.LatLng(this.info.lat, this.info.lng); //设置中心点坐标
				//初始化地图
				var map = new TMap.Map(container, {
					center: center
				});

				//创建并初始化MultiMarker
				var markerLayer = new TMap.MultiMarker({
					map: map, //指定地图容器
					//样式定义
					styles: {
						//创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
						"myStyle": new TMap.MarkerStyle({
							"width": 30, // 点标记样式宽度（像素）
							"height": 30, // 点标记样式高度（像素）
							"src": '/images/postimg/mapMarker.png', //图片路径
							//焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
							"anchor": {
								x: 16,
								y: 32
							}
						})
					},
					//点标记数据数组
					geometries: [{
						"id": "1", //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
						"styleId": 'myStyle', //指定样式id
						"position": new TMap.LatLng(this.info.lat, this.info.lng) //点标记坐标位置
					}]
				});
			},
			//举报
			reportSave() {
				if (!this.sendDate.content) {
					ElMessageBox.alert('请输入举报内容', '提示', {
						confirmButtonText: '确认',
					})
					return
				}
				if (!this.sendDate.contact) {
					ElMessageBox.alert('请输入联系方式', '提示', {
						confirmButtonText: '确认',
					})
					return
				}
				if (this.imgs.length > 0) {
					let imgs = []
					this.imgs.map(item => {
						imgs.push(item.response.data)
					})
					this.sendDate.imgs = imgs.join(',')
				}
				this.loading = true
				let data = {
					title: this.sendDate.contact,
					content: JSON.stringify(this.sendDate),
					state: 3,
					byUserId: this.postPushId
				}
				this.$Request.post('/app/message/insertMessage', data, {
					type: 'json'
				}).then(res => {
					if (res.code == 0) {
						ElMessage({
							message: '已提交',
							type: 'success',
							duration: 1500,
							offset: this.screenHeight / 2
						})
						this.loading = false
						this.show = false
					} else {
						this.loading = false
						ElMessageBox.alert(res.msg, '提示', {
							confirmButtonText: '确认'
						})
					}
				})
			},
			//打开举报弹框
			openShow() {
				if (!localStorage.getItem('token')) {
					this.goLogo()
					return
				}
				this.sendDate = {
					content: '',
					contact: ''
				}
				this.show = true
			},
			/**
			 * 收藏岗位
			 */
			setCollection() {
				if (!localStorage.getItem('token')) {
					this.goLogo()
					return
				}
				this.$Request.post("/app/myCollection/saveCollection", {
					postPushId: this.postPushId,
					type: 1
				}).then(res => {
					if (res.code == 0) {
						if (res.msg == '收藏成功'){
							this.info.isCollection = 1
						}else{
							this.info.isCollection = 0
						}
					}
				})
			},
			closeShow() {
				this.isShowQr = false
			},
			//显示二维码
			getShare() {
				// this.isShowQr = !this.isShowQr
				if (!localStorage.getItem('token')) {
					this.goLogo()
					return
				}
				let url = ROOTPATH4 + '' + this.$route.name + '?postPushId=' + this.$route.query.postPushId +
					'&inviterCode=' + this.$store.state.invitationCode
				ElMessageBox.confirm(
					url,
					'分享岗位', {
						confirmButtonText: '一键复制',
						cancelButtonText: '取消',
						type: 'warning',
					}
				).then(() => {
					navigator.clipboard.writeText(url)
						.then(() => {
							ElMessage({
								type: 'success',
								message: '复制成功',
								duration: 1500,
								offset: this.screenHeight / 2
							})
						})
						.catch(() => {
							ElMessage({
								type: 'info',
								message: '复制失败',
								duration: 1500,
								offset: this.screenHeight / 2
							})

						})
				}).catch(() => {

				})
			},

			//获取岗位详情
			getJobInfo() {
				let data = {
					userId: localStorage.getItem('userId'),
					postPushId: this.postPushId
				}
				this.$Request.get('/app/postPush/selectPostPushDetails', {
					params: data
				}).then(res => {
					this.info = res.data
					//处理标签
					if (this.info.positionWelfare) {
						this.info.positionWelfare = this.info.positionWelfare.split(',')
					} else {
						this.info.positionWelfare = []
					}
					// 处理tag
					if (this.info.tag) {
						this.info.tag = this.info.tag.split(',')
					} else {
						this.info.tag = []
					}
					this.initMap()
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	$marginTop-60: 120px;


	:deep(.el-input__wrapper) {
		background-color: #F7F7F7 !important;
		box-shadow: none !important;
	}

	:deep(.el-input) {
		--el-input-focus-border: none;
		--el-input-focus-border-color: none;
	}

	:deep(.is-focus) {
		box-shadow: none;
	}

	:deep(.el-textarea__inner) {
		box-shadow: none;
	}

	:deep(.el-input__wrapper:hover) {
		box-shadow: none;
	}

	:deep(.el-dialog) {
		border-radius: 14px !important;
		padding: 0 !important;
	}

	:deep(.el-dialog__body) {
		padding-top: 10px !important;

	}

	:deep(.el-dialog__header) {
		background: linear-gradient(45deg, #f2fffa, #FFFFFF);
		padding: 10px;
		border-radius: 14px 14px 0 0;
	}








	.jb {
		width: calc(100% - 20px);
		padding: 0 10px 10px 10px;

		.jb-title {
			color: #333333;
			font-size: 14px;
			font-weight: 500;
		}

		.jb-text {
			width: 100%;
			margin-top: 10px;
			background-color: #F7F7F7;
			border-radius: 8px;
		}

		.jb-btn {
			margin-top: 40px;
			justify-content: flex-end;
		}
	}

	.postInfo {
		width: 100%;
		height: auto;
		margin-top: 20px;

		.postInfo-box {
			width: calc(100% - $marginTop-60 * 2);
			height: 100%;
			background-color: #ffffff;
			border-radius: 16px;
			padding: 30px 30px 10px 30px;
		}

		.postInfo-box-top-l {
			font-size: 20px;
			font-weight: 500;

			span {
				margin-left: 30px;
				font-size: 18px;
				color: #00DD9A;
				font-weight: 500;
			}
		}

		.postInfo-box-top-r {
			img {
				width: 20px;
				height: 20px;
				margin-right: 10px;
			}

			font-size: 14px;

			div {
				color: #999999;
				margin-left: 30px;
				cursor: pointer;
			}
		}

		.postInfo-box-top-r-qr {
			position: relative;

			.postInfo-box-top-r-qrs {
				position: absolute;
				bottom: -160px;
				left: 15%;
				transform: translate(-50%, 0);
				z-index: 999;
				width: 150px;
				height: 150px;
				background-color: #ffffff;
				border-radius: 10px;
				border: 1px solid #f5f5f5;

				img {
					width: 120px;
					height: 120px;
					margin-right: 0;
				}
			}
		}

		.postInfo-box-status {
			margin-top: 20px;
			color: #9ca4ab;
			font-size: 14px;

			img {
				width: 20px;
				height: 20px;
				margin-right: 10px;
			}
		}

		.postInfo-box-ins {
			margin-top: 20px;
			font-size: 16px;
			color: #666666;
		}

		.postInfo-box-labels {
			margin-top: 30px;
			width: 100%;
			align-items: flex-end;
		}

		.postInfo-box-labels-l {
			width: 70%;
			cursor: pointer;
			.company-info-text {
				margin: 0 10px;
				color: rgba(156, 164, 171, 1);
				font-size: 12px;
				font-weight: 400;
			}
		
			.reply-time {
				border-radius: 4px;
				background: rgba(236, 225, 253, 1);
				padding: 4px;
				color: rgba(106.94, 84.63, 214.02, 0.96);
				font-size: 12px;
				font-weight: 400;
			}
		}

		.postInfo-box-labels-r {
			width: 30%;
			justify-content: flex-end;
			margin-bottom: 20px;

			.postInfo-box-labels-r-s {
				width: 120px;
				height: 40px;
				border: 1px solid #00DD9A;
				border-radius: 8px;
				color: #00DD9A;
				font-size: 18px;
				cursor: pointer;
			}

			.postInfo-box-labels-r-l {
				width: 210px;
				height: 40px;
				background: #00DD9A;
				border-radius: 8px;
				font-size: 18px;
				color: #ffffff;
				margin-left: 20px;
				cursor: pointer;
			}
		}
	}

	.postJs {
		width: 100%;
		height: auto;
		margin-top: 20px;

		.postJs-box {
			width: calc(100% - $marginTop-60 * 2);
			height: 100%;
			border-radius: 16px;
			padding: 30px;
			background-color: #ffffff;
		}

		.postJs-box-title {
			font-weight: 500;
			font-size: 18px;
		}

		.postJs-box-tag {
			margin-top: 20px;

			.postJs-box-tag-item {
				margin-right: 20px;
				margin-bottom: 20px;
				padding: 6px 16px;
				border-radius: 4px;
				background-color: #F5F5F5;
				color: #333333;
				font-size: 15px;
				cursor: pointer;
			}
		}

		.postJs-box-content {
			font-size: 16px;
			color: #666666;
			white-space: pre-wrap;
		}
	}

	.postGs {
		width: 100%;
		height: auto;
		margin-top: 20px;

		.postGs-box {
			width: calc(100% - $marginTop-60 * 2);
			height: 100%;
			border-radius: 16px;
			padding: 30px;
			background-color: #ffffff;
		}

		.postGs-box-title {
			font-weight: 500;
			font-size: 18px;
		}

		.postGs-box-info {
			margin-top: 30px;

			img {
				width: 64px;
				height: 64px;
				margin-right: 10px;
				border-radius: 50%;
			}

			.postGs-box-info-r-name {
				color: #666666;
				font-size: 16px;
			}

			.postGs-box-info-r-bottom {
				margin-top: 10px;
				color: #666666;
				font-size: 14px;

				span {
					margin-left: 10px;
				}
			}
		}

		.postMap {
			width: 100%;
			height: 200px;
			border-radius: 10px;
		}

		.postGs-box-address {
			font-size: 14px;
			color: #666666;
			margin-top: 20px;
		}
	}
</style>