veterans_H5/h5_web/pages/jobDetails/jobDetails.vue

<!-- 
 * @title 职位详情 
 * @author Rockery(1113269755@qq.com)
-->

<template>
	<view class="jobdetails">
		<view class="jobdetails-head">
			<u-card :border="false" :head-border-bottom="false" :foot-border-top="false" :padding="0" :border-radius="0"
				class="jobdetails-head-card">
				<view slot="head">
					<view class="jobdetails-head-cardhead">
						<view class="content">
							<view class="left">
								<view>{{ recruitmentData.postName }}</view>
								<view>经验{{ recruitmentData.workYear }}年 /
									{{ getEducationBg(recruitmentData.educationBg) }} / {{ recruitmentData.cityName }}
								</view>
							</view>
							<view class="right">
								<view class="salary">{{ `${recruitmentData.lowestSalary || ''}k - ${recruitmentData.highestSalary || ''}k` }}</view>
								<view v-if="recruitmentData.postStatus == 0">职位已下架</view>
							</view>
						</view>
					</view>
				</view>
				<view slot="body">
					<view class="jobdetails-head-cardbody">
						<view class="container" @tap="tapHeadCardBody(recruitmentData)">
							<view class="container-image">
								<u-image :src="recruitmentData.companyLogoUrl" width="96" height="96" border-radius="10" mode="aspectFill">
									<view slot="error">
										<u-image src="../../static/img/default-company.jpg" width="96" height="96" border-radius="10" mode="aspectFill"/>
									</view>
								</u-image>
							</view>
							<view class="content">
								<view class="content-left">
									<view>{{ recruitmentData.companyName }}</view>
									<view>{{ getCompanyType(companyInfo.trade) }} · {{ getCompanyScope(companyInfo.scope) }}</view>
								</view>
								<view class="content-right">
									<u-icon name="arrow-right" color="#d2d3d5" size="30"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view slot="foot">
					<view class="jobdetails-head-cardfoot">
						<view class="content">
							<view class="content-left">
								<view>
									{{ `${recruitmentData.provinceName || ''}${recruitmentData.cityName || ''}${recruitmentData.areaName || ''}` }}（{{ recruitmentData.companyAddress || '' }}）
								</view>
							</view>
							<!-- <view class="content-right" @tap="tapHeadCardFoot(recruitmentData)">
                <u-icon name="map-fill" color="#709078" size="30" class="content-right-icon"></u-icon>
                <view class="content-right-text">查看位置</view>
              </view> -->
						</view>
					</view>
				</view>
			</u-card>
		</view>

		<view class="jobdetails-content">
			<u-card :border="false" :head-border-bottom="false" :foot-border-top="false" :padding="0" :border-radius="0"
				class="jobdetails-content-card">
				<view slot="head">
					<view class="jobdetails-content-cardhead">
						<view class="container">
							<view class="title">职位描述</view>
							<view class="content">
								<!-- <u-input :disabled="true" v-model="detailsInfo.description" type="textarea" class="content-textarea" /> -->
								<u-parse :html="recruitmentData.description"></u-parse>
							</view>
						</view>
					</view>
				</view>
				<!-- <view slot="body">
          <view class="jobdetails-content-cardbody">
            <view class="container">
              <view class="title">职位要求</view>
              <view class="content">
                <u-input :disabled="true" v-model="detailsInfo.jobRequire" type="textarea" class="content-textarea" />
              </view>
            </view>
          </view>
      	</view> -->
			</u-card>
		</view>

		<view class="jobdetailsbtn" v-if="!isSubmit && recruitmentData.postStatus == 1">
			<view class="jobdetailsbtn-container">
				<view class="jobdetailsbtn-content">
					<view>
						<u-button type="primary" @click="handleResumeClick" class="jobdetailsubmitbtn">提交简历</u-button>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recruitmentData: {},
				detailsInfo: {},
				degrEducList: [],
				isSubmit: true,
				companyInfo: {},
				companyScopeList: [],
				companyTradeList: []
			};
		},
		onLoad(param) {
			this.getVeteDegrEduc();
			this.getDict('company_scope');
			this.getDict('company_trade');
			if (param.id) {
				this.getPostDetails(param.id)
				this.judgeIsSubmit(param.id)
			}
			if (param.isSubmit) {
				this.isSubmit = param.isSubmit
			}
		},
		onShow() {
		},
		methods: {
			/**
			 * 获取字典
			 * company_scope  公司规模
			 * company_trade  公司类型
			 */
			getDict(key) {
				this.$u.api.getDictdataUrl({
					key: key
				}).then(res => {
					if (res.code === 200) {
						if (key === 'company_scope') {
							this.companyScopeList = res.data
						} else if (key === 'company_trade') {
							this.companyTradeList = res.data;
						}
					}
				})
			},
			/**
			 * 获取企业类别
			 * @param {Object} val
			 */
			getCompanyType(val) {
				let name;
				this.companyTradeList.forEach(item => {
					if (item.text == val) {
						name = item.label
					}
				})
				return name;
			},
			/**
			 * 获取企业规模
			 * @param {Object} val
			 */
			getCompanyScope(val) {
				let name;
				this.companyScopeList.forEach(item => {
					if (item.text == val) {
						name = item.label
					}
				})
				return name;
			},
			/**
			 * 获取文化程度类别
			 */
			getVeteDegrEduc() {
				this.$u.api.getDictdataUrl({
					key: 'degr_educ'
				}).then(res => {
					if (res.code == 200) {
						this.degrEducList = res.data.map(item => {
							return {
								...item,
								value: item.text
							}
						});
					}
				});
			},
			/**
			 * 获取教育等级名称
			 * @param {Object} value
			 */
			getEducationBg(value) {
				let name;
				this.degrEducList.forEach(item => {
					if (item.value == value) {
						name = item.label
					}
				})
				return name;
			},
			/**
			 * 通过职位id获取详情
			 * @param { String } id 职位id 
			 */
			getPostDetails(id) {
				this.$u.api.company.getPostDetails({
					id
				}).then(res => {
					if (res.code === 200) {
						this.recruitmentData = res.data;
						this.getCompanyDetails(res.data.companyId);
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						})
					}
				}).catch(() => {
					this.$refs.uToast.show({
						title: '系统异常!',
						type: 'error'
					})
				})
			},
			/**
			 * 获取企业详情
			 * @param { String } id 获取详情企业id
			 */
			getCompanyDetails(id) {
				this.$u.api.company.getCompanyDetails({
					id: id
				}).then(res => {
					if (res.code === 200) {
						this.companyInfo = res.data
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						})
					}
				}).catch((err) => {
					this.$refs.uToast.show({
						title: '系统异常!',
						type: 'error'
					})
				})
			},
			judgeIsSubmit(id) {
				this.$u.api.company.judgeIsSubmit({
					id
				}).then(res => {
					if (res.code === 200) {
						if (res.data === 0) {
							this.isSubmit = false
						} else {
							this.isSubmit = true
						}
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						})
					}
				}).catch(() => {
					this.$refs.uToast.show({
						title: '系统异常!',
						type: 'error'
					})
				})
			},
			/**
			 * 企业信息事件
			 */
			tapHeadCardBody(param) {
				this.$u.route({
					url: 'pages/businessDetails/businessDetails',
					params: {
						id: param.companyId
					}
				});
			},
			/**
			 * 企业位置事件
			 */
			tapHeadCardFoot(param) {

			},
			/**
			 * 提交简历按钮事件
			 */
			handleResumeClick() {
				this.$u.api.company.deliveryResume({
					postId: this.recruitmentData.id
				}).then(res => {
					if (res.code === 200) {
						this.$u.route({
							url: 'pages/resumeDeliveryResults/resumeDeliveryResults',
							params: {
								// item: JSON.stringify(param)
							}
						});
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						})
					}
				}).catch(() => {
					this.$refs.uToast.show({
						title: '系统异常!',
						type: 'error'
					})
				})
			}
		}
	}
</script>

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