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 }}年 / {{ recruitmentData.educationBg }}</view>
              </view>
              <view class="right">{{ `${recruitmentData.lowestSalary || ''} ~ ${recruitmentData.highestSalary || ''}k` }}</view>
            </view>
          </view>
    		</view>
    		<view slot="body">
          <view class="jobdetails-head-cardbody">
            <view class="container" @tap="tapHeadCardBody(recruitmentData)">
              <view class="container-image">
                <image :src="recruitmentData.companyLogoUrl" mode="aspectFill" class="image"></image>
              </view>
              <view class="content">
                <view class="content-left">
                  <view >{{ recruitmentData.companyName }}</view>
                  <view >快递和运输 · 199-499人</view>
                </view>
                <view class="content-right">
                  <u-icon name="arrow-right" color="#000000" size="48"></u-icon>
                </view>
              </view>
            </view>
          </view>
    		</view>
    		<view slot="foot">
          <view class="jobdetails-head-cardfoot">
            <view class="content">
              <view class="content-left">
                <view >{{ recruitmentData.companyAddress }}）</view>
              </view>
              <view class="content-right" @tap="tapHeadCardFoot(recruitmentData)">
                <u-icon name="map-fill" color="#028DFE" 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">
      <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: {
          jobDesc: `1、规划产品发展方向，制定产品计划和竞争策略；\n2、编写产品需求文档，对产品需求进行评估及确认项目开发周期；\n3、跟踪项目进度，协调各方资源，产品培训和产品演示；\n4、对产品的设计、开发、包装、渠道、定价、上市、维护等过程进行全程监控；\n5、协助营销市场部门，参与各类市场活动等`,
          jobRequire: `1. 大专学历，2年以上蓝牙耳机产品经理岗位经验；\n2. 英语听说读写能力强，能熟练用英语与国外客户沟通交流；\n3、熟悉产品设计、研发流程，有完整的项目管理经验；\n4、有创造性、规划产品，有较强的市场敏锐性和超前意识。`
        },
				isSubmit: false
			};
		},
		onLoad(param) {
			if (param.id) {
				this.getPostDetails(param.id)
				this.judgeIsSubmit(param.id)
			}
			if (param.isSubmit) {
				this.isSubmit = param.isSubmit
			}
		},
		onShow() {
		},
		methods: {
			/**
			 * 通过职位id获取详情
			 * @param { String } id 职位id 
			 */
			getPostDetails(id) {
				this.$u.api.company.getPostDetails({ id }).then(res => {
					if (res.code === 200) {
						this.recruitmentData = res.data
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						})
					}
				}).catch(() => {
					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>