You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

715 lines
19 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div class="detail-container">
<a-modal
title="录单"
:visible="visible"
class="modal"
:confirm-loading="confirmLoading"
@ok="handleOk"
@cancel="handleCancel"
:maskClosable="false"
okText="提交"
cancelText="取消"
:destroyOnClose="true"
>
<a-form-model ref="ruleForm" :model="form" :rules="rules" :colon="false">
<a-form-model-item ref="name" label="老乡姓名" prop="name">
<a-input
v-model="form.name"
@blur="
() => {
$refs.name.onFieldBlur();
}
"
/>
</a-form-model-item>
<a-form-model-item ref="tel" label="老乡电话" prop="tel">
<a-input
v-model="form.tel"
@blur="
() => {
$refs.tel.onFieldBlur();
}
"
/>
</a-form-model-item>
<a-form-model-item
ref="peoplecard"
label="老乡身份证号"
prop="peoplecard"
>
<a-input v-model="form.peoplecard" />
</a-form-model-item>
<a-form-model-item ref="username" label="报名人" prop="username">
<a-input v-model="form.username" />
</a-form-model-item>
</a-form-model>
</a-modal>
<!-- 面包屑 -->
<a-breadcrumb class="w">
<a-breadcrumb-item href="">
<router-link to="/main"><a-icon type="home" /></router-link>
</a-breadcrumb-item>
<a-breadcrumb-item href="">
<router-link to="/list">
<span>一手职位</span>
</router-link>
</a-breadcrumb-item>
<a-breadcrumb-item href="">
<span>企业详情</span>
</a-breadcrumb-item>
</a-breadcrumb>
<!-- 主体区域 -->
<div class="maincontent w">
<div class="maincontentleft">
<div class="subset">
<div class="subsetleft">
<div class="imgbox">
<a-carousel
arrows
:autoplay="true"
effect="fade"
:dots="true"
ref="scrollimg"
v-if="storeImage.length !== 0"
>
<div
slot="prevArrow"
class="custom-slick-arrow"
style="left: 5px; z-index: 99"
>
<a-icon type="left-circle" />
</div>
<div
slot="nextArrow"
class="custom-slick-arrow"
style="right: 5px; z-index: 99"
>
<a-icon type="right-circle" />
</div>
<img
v-for="(item, index) in storeImage"
:key="index"
:src="item"
alt=""
/>
</a-carousel>
<img v-else src="../../../static/img/nopicture.png" alt="" />
</div>
<div class="jobinfobox">
<div class="jobname">{{ jobDetail.aliasName }}</div>
<div class="jobinfo">
<span>{{ jobDetail.district }}</span>
<span>{{ jobDetail.gender }}</span>
<span>{{ jobDetail.age }}</span>
</div>
<div class="jobtag">
<span>返费</span>
<span
v-for="(item, index) in jobDetail.jobSpecialLabelNames"
:key="index"
>{{ item }}</span
>
</div>
<div class="jobpricemonth">
<span>{{ jobDetail.minMonthlyPay }}</span
>-<span>{{ jobDetail.maxMonthlyPay }}</span
>元/月
</div>
<div class="jobpricehour">
<template v-if="jobDetail.hourlyPay"
><span>{{ jobDetail.hourlyPay }}</span
>元/小时</template
>
<template v-else-if="jobDetail.dayPay"
><span>{{ jobDetail.dayPay }}</span
>元/日</template
>
</div>
<div class="billbutton">
<span>服务费 <i>1.5</i>元/小时</span>
<button @click="showmodal">录单</button>
</div>
</div>
</div>
</div>
<div class="jobinformationbox">
<h1><i>职位信息</i></h1>
<div
v-html="jobDetail.baseInfo"
style="white-space: break-spaces"
></div>
</div>
</div>
<div class="maincontentright">
<div class="hotphone">
<h1 class="bottombox"><i>服务热线</i></h1>
<p>0371-666666666</p>
</div>
<div class="companyinfo">
<div class="companydetail">
<h1 class="bottombox"><i>企业详情</i></h1>
<p style="text-align: center">{{ jobDetail.aliasName }}</p>
<div class="imgbox">
<img v-if="storeImage.length !== 0" :src="storeImage[0]" alt="" />
<img v-else src="../../../static/img/nopicture.png" alt="" />
</div>
<p>
<!-- 我是文案我很长很长我是文案我 很长很长我是文案我很长很长我
是文案我很长很长我是文案我很 长很长 -->
</p>
</div>
<div class="companylocation">
<h1 class="bottombox"><i>企业位置</i></h1>
<div class="imgbox">
<img src="../../assets/map.png" alt="" />
</div>
</div>
</div>
<recommend />
</div>
</div>
</div>
</template>
<script>
import { getJobDetailApi } from "../../api/job";
import { disposeJobListData } from "../../utils/commonUtil";
import recommend from "../../components/FirstJob/components/recommend.vue";
export default {
// 组件名称
name: "",
// 局部注册的组件
components: {
recommend,
},
// 组件参数 接收来自父组件的数据
props: {},
// 组件状态值
data() {
return {
relationList: [],
jobDetail: {},
storeImage: [],
id: this.$route.params.id,
visible: false, // 录单模态框的展示
confirmLoading: false, // 录单提交的loading效果
form: {
// 录单数据
name: "",
tel: "",
peoplecard: "",
username: "",
},
rules: {
// 录单校验规则
name: [{ required: true, message: "请输入姓名", trigger: "submit" }],
tel: [{ required: true, message: "请输入手机号", trigger: "submit" }],
},
};
},
// 计算属性
computed: {},
// 侦听器
watch: {},
// 生命周期钩子 注:没用到的钩子请自行删除
/**
* 组件实例创建完成属性已绑定但DOM还未生成$ el属性还不存在
*/
created() {
// console.log(this.$router.matcher.match());
this.getJobDetail();
},
/**
* el 被新创建的 vm.el 替换,并挂载到实例上去之后调用该钩子。
* 如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.el 也在文档内。
*/
mounted() {
// console.log(this.$refs.scrollimg);
// this.$refs.scrollimg.goTo(0, false);
},
// 组件方法
methods: {
async getJobDetail() {
try {
const { data } = await getJobDetailApi(this.id);
console.log(data);
if (data.status === 200) {
this.jobDetail = disposeJobListData(data.data.storeJob);
data.data.storeImage.forEach((item) => {
this.storeImage.push(item.url);
});
console.log(this.storeImage);
} else {
this.$message.warning("数据获取失败");
}
// = data.data.recordList;
console.log(data);
console.log(this.jobDetail);
} catch (error) {
console.log(error);
}
},
// 录单弹出层的关闭
handleCancel() {
this.visible = false;
this.form = {
// 录单数据
name: "",
tel: "",
peoplecard: "",
username: "",
};
},
// 录单提交按钮的回调
handleOk() {
this.$refs.ruleForm.validate((ispass, no) => {
console.log(ispass);
if (ispass) {
this.confirmLoading = true;
setTimeout(() => {
this.confirmLoading = false;
this.visible = false;
}, 2000);
} else {
console.log(123);
}
console.log(no);
});
},
// 弹出录单模态框
showmodal(id) {
this.visible = true;
console.log(id);
},
},
};
</script>
<style scoped lang="less">
.detail-container {
overflow: hidden;
// border-top: 1px solid #eeefef;
background-color: #f6f6f6;
}
//
.modal {
.ant-form-item {
// margin-bottom: 0;
margin-top: -8px;
.ant-input {
// width: 430px;
height: 40px;
// border: none;
border: 1px solid #dddddd;
box-shadow: none !important;
// background-color: #f6f6f6;
}
}
/deep/ .ant-modal-footer {
padding: 10px 24px;
.ant-btn {
&:hover {
color: #ff6a00;
border-color: #ff6a00;
}
}
.ant-btn.ant-btn-primary {
background-color: #ff6a00 !important;
border: none;
line-height: 32px;
margin-left: 12px;
color: #fff;
&:hover {
background-color: #ff8025 !important;
}
}
}
/deep/ .ant-modal-header {
.ant-modal-title {
font-size: 20px;
// font-weight: bold;
}
}
/deep/ .ant-modal-body {
padding: 24px 24px 8px 24px;
}
}
/deep/ .maincontent {
display: flex;
justify-content: space-between;
margin-top: 16px;
.maincontentleft {
width: 914px;
margin-right: 16px;
text-align: left;
.subset {
display: flex;
justify-content: space-between;
padding: 16px;
margin-bottom: 16px;
width: 914px;
background-color: #fff;
// height: 302px;
border-radius: 4px;
// border: 1px solid #eeefef;
.subsetleft {
display: flex;
.imgbox {
width: 320px;
// height: 240px;
margin-right: 20px;
overflow: hidden;
position: relative;
// .slick-active {
// button {
// background-color: #fe6a00 !important;
// }
// }
// .slick-track {
// transition: all 0s ease 0s !important;
// }
img {
// position: absolute;
width: 100%;
// height: 100%;
height: 240px;
// top: 50%;
// left: 50%;
// left: 0;
// top: 0;
// right: 0;
// bottom: 0;
// margin: auto;
// transform: translateX(-50%) translateY(-50%);
}
.ant-carousel {
.slick-slide {
text-align: center;
height: 230px;
// height: 160px;
// line-height: 160px;
background: #364d79;
overflow: hidden;
}
.custom-slick-arrow {
width: 40px;
height: 40px;
font-size: 40px;
margin-top: -20px;
border-radius: 50%;
color: #fff;
background-color: rgba(31, 45, 61, 0.11);
opacity: 0.6;
}
.custom-slick-arrow:before {
// color: #ff6a00;
display: none;
}
.custom-slick-arrow:hover {
// background-color: #ff6a00cc;
opacity: 0.8;
}
.slick-slide h3 {
color: #fff;
}
}
}
.jobinfobox {
.jobname {
// margin: 12px 0;
font-size: 20px;
font-weight: 600;
text-align: left;
color: #4d575e;
line-height: 20px;
// &:hover {
// color: #ff6a00;
// }
}
.jobinfo {
margin-top: 16px;
opacity: 0.5;
font-size: 16px;
font-weight: 400;
text-align: left;
color: #4d575e;
line-height: 20px;
}
.jobtag {
margin-top: 14px;
text-align: left;
span:first-child {
color: #ff6a00;
background: rgba(254, 97, 0, 0.1);
}
span {
margin-right: 8px;
font-size: 16px;
padding: 2px 10px;
background: rgba(51, 51, 51, 0.06);
border-radius: 4px;
}
}
.jobpricemonth {
margin-top: 16px;
font-size: 16px;
font-weight: 400;
text-align: left;
color: #4d575e;
line-height: 22px;
}
.jobpricehour {
margin-top: 16px;
font-size: 16px;
font-weight: bold;
text-align: left;
color: #ff6a00;
// line-height: 24px;
span {
vertical-align: baseline;
font-size: 20px;
line-height: 24px;
}
}
.billbutton {
display: flex;
justify-content: flex-start;
margin-top: 15px;
span {
padding: 0 16px;
height: 36px;
margin-right: 20px;
border-radius: 4px;
background-color: rgba(254, 97, 0, 0.1);
font-size: 18px;
font-weight: bold;
color: #ff6a00;
line-height: 34px;
}
button {
width: 160px;
// padding: 0 16px;
height: 36px;
border: none;
background-color: #ff6a00;
color: #fff;
font-weight: bold;
font-size: 18px;
border-radius: 4px;
cursor: pointer;
&:hover {
background-color: #ff7614;
}
}
}
}
// .jobinfobox {
// .jobname {
// // margin: 12px 0;
// font-size: 20px;
// font-weight: 600;
// text-align: left;
// color: #4d575e;
// line-height: 30px;
// }
// .jobinfo {
// margin-top: 16px;
// opacity: 0.5;
// font-size: 16px;
// font-weight: 400;
// text-align: left;
// color: #4d575e;
// line-height: 22px;
// }
// .jobtag {
// margin-top: 16px;
// span:first-child {
// color: #ff6a00;
// background: rgba(254, 97, 0, 0.06);
// }
// span {
// margin-right: 8px;
// font-size: 16px;
// padding: 2px 14px;
// text-align: left;
// background: rgba(51, 51, 51, 0.06);
// border-radius: 4px;
// }
// }
// .jobpricemonth {
// margin-top: 16px;
// font-size: 18px;
// text-align: left;
// color: #4d575e;
// line-height: 22px;
// }
// .jobpricehour {
// margin-top: 20px;
// font-size: 18px;
// font-weight: bold;
// text-align: left;
// color: #ff6a00;
// line-height: 18px;
// span {
// vertical-align: bottom;
// font-size: 24px;
// line-height: 18px;
// }
// }
// .billbutton {
// display: flex;
// justify-content: flex-start;
// margin-top: 20px;
// span {
// padding: 0 16px;
// height: 36px;
// margin-right: 20px;
// border-radius: 4px;
// background-color: rgba(254, 97, 0, 0.1);
// font-size: 18px;
// font-weight: bold;
// color: #ff6a00;
// line-height: 34px;
// }
// button {
// width: 160px;
// // padding: 0 16px;
// height: 36px;
// border: none;
// background-color: #ff6a00;
// color: #fff;
// font-weight: bold;
// font-size: 18px;
// border-radius: 4px;
// }
// }
// }
}
}
.jobinformationbox {
width: 914px;
// border: 1px solid #eeefef;
overflow: hidden;
border-radius: 4px;
padding: 0 20px 20px 20px;
background-color: #fff;
h1 {
font-size: 20px;
text-align: left;
color: #4d575e;
line-height: 33px;
margin-bottom: 20px;
font-weight: bold;
padding: 10px 0;
border-bottom: 1px solid #eeefef;
span {
height: 25px;
}
}
dl {
dt {
margin: 30px 0 20px 0;
font-size: 20px;
text-align: left;
color: #4d575e;
line-height: 28px;
}
dd {
ul {
li {
line-height: 32px;
}
}
}
}
}
}
.maincontentright {
> div {
margin-bottom: 16px;
}
.hotphone {
width: 270px;
overflow: hidden;
// height: 114px;
padding: 0 20px 20px 20px;
border-radius: 4px;
background-color: #fff;
text-align: center;
// border: 1px solid #eeefef;
p {
font-size: 24px;
color: #ff6a00;
// font-weight: bold;
margin-top: 12px;
}
}
.companyinfo {
overflow: hidden;
padding: 0 20px 20px 20px;
border-radius: 4px;
// border: 1px solid #eeefef;
background-color: #fff;
.companydetail {
p:first-of-type {
width: 230px;
font-size: 18px;
font-weight: bold;
text-align: left;
color: #4d575e;
margin-bottom: 12px;
line-height: 22px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.imgbox {
width: 230px;
height: 172px;
margin-bottom: 12px;
img {
width: 100%;
height: 100%;
}
}
p:last-of-type {
font-size: 16px;
text-align: left;
color: #788085;
line-height: 22px;
margin-bottom: 15px;
}
}
.companylocation {
h1 {
// height: 50px;
// line-height: 50px;
padding-top: 10px;
text-align: center;
// border-top: 1px solid #eeefef;
}
.imgbox {
width: 230px;
height: 172px;
img {
width: 100%;
height: 100%;
}
}
}
}
}
}
</style>