bocai_supplyChain_pc/src/components/FirstJob/joblist.vue

<template>
	<div class="joblist-container">
		<!-- <div class="searchbox">
      <div class="w">
        <span></span>
      </div>
    </div> -->
		<!-- 录单弹出框 -->
		<!-- <a-drawer title="报名" placement="right" :closable="true" :visible="visible" labelAlign="right" width="480" @close="onClose"> -->
		<!-- <recordbill :visible.sync="visible" :firminfo="apply"></recordbill> -->
		<!-- </a-drawer> -->
		<!-- <a-modal
      title="报名"
      :visible="visible"
      class="modal"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      :maskClosable="false"
      okText="提交"
      cancelText="取消"
      :destroyOnClose="true"
    >
    </a-modal> -->
		<!-- 城市的弹出框 -->
		<a-modal class="cityModal" v-model="visible" width="680px" @cancel="cityModalClose" title="请选择城市" :footer="null">
			<div class="inputBox"><a-input placeholder="请输入城市名称" allow-clear width="300px" v-model="cityValue" @keyup.enter="searchCity" @input="resetCityList"></a-input><a-button @click="searchCity">确认</a-button></div>
			<ul class="firstList">
				<li @click="[(currentCityList = hotCityList), (activeInd = -1)]">
					<div :class="activeInd == -1 ? 'active' : ''">热门地区</div>
				</li>
				<li v-for="(item, index) in hasJobCityList.firstList" :key="index" @click="[changeCurrentCity(index), (activeInd = index)]">
					<div :class="activeInd == index ? 'active' : ''">
						<span v-for="i in item" :key="i">{{ i }}</span>
					</div>
				</li>
			</ul>
			<ul class="currentCity">
				<li v-for="(item, index) in currentCityList" :key="index">
					<div @click="searchJob(item)">{{ item.name }}</div>
				</li>
			</ul>
		</a-modal>
		<!-- 筛选导航 -->
		<div class="navigation" id="navigation">
			<div class="w">
				<!-- 特色筛选的列表盒子 -->
				<div v-if="isspecialboxshow" class="specialbox" @click.stop="">
					<div class="w">
						<ul>
							<li
								v-for="(item, index) in specialList"
								:key="index"
								@click.stop="specialclick(index, item)"
								:class="{
									'special-active': specialactive.indexOf(item.name) > -1,
								}"
							>
								{{ item.name }}
							</li>
						</ul>
					</div>
				</div>

				<span class="searchBox">
					<a-input placeholder="搜索企业/公司/职位" @keyup.enter="onSearch" @input="resetsearch" v-model="formvalue.aliasName" class="searchinput" style="" allow-clear
						><div slot="prefix" @click="visible = true">
							<span>{{ currentCity }}</span
							><i class="iconfont icon-sousuoxiala"></i
							><a-input
								class="ageinput"
								placeholder="年龄,如20"
								v-model="formvalue.ageStr"
								type="number"
								@mousewheel.prevent="() => false"
								@input="resetAgeSearch"
								@keyup.enter="onSearch"
								@click.stop="
									() => {
										return false;
									}
								"
							></a-input>
						</div>
						<button slot="suffix" @click="onSearch" style="">搜索</button>
					</a-input>
				</span>
				<div class="hotStore">
					<span>热门企业：</span>
					<ul>
						<li v-for="(item, index) in hotStoreList" :key="index" @click="getHotStoreList(item)">
							{{ item.storeName }}
						</li>
						<!-- <li @click="resetResult" style="color: #aaa">重置</li> -->
					</ul>
				</div>
				<ul class="filterbox" style="">
					<!-- @click="visible = true" -->
					<!-- <li>
						<i class="iconfont icon-dingwei"></i
						><a-cascader
							:options="cityoption"
							change-on-select
							@change="onChange"
							placeholder="选择城市"
							v-model="formvalue.district"
							popupClassName="flitercity"
							:getPopupContainer="
								(triggerNode) => {
									return triggerNode.parentNode || document.body;
								}
							"
							id="city"
							:popupStyle="{
								transform: 'all .1s',
							}"
							><i slot="suffixIcon" class="iconfont icon-xiala"></i
						></a-cascader>
					</li> -->
					<li>
						<a-cascader
							:options="options.price"
							placeholder="工价"
							@change="onChange"
							popupClassName="monthlypay"
							:getPopupContainer="
								(triggerNode) => {
									return triggerNode.parentNode || document.body;
								}
							"
							v-model="formvalue.monthlyPayStr"
							id="price"
							><i slot="suffixIcon" class="iconfont icon-xiala"></i
						></a-cascader>
					</li>
					<li>
						<a-cascader
							:options="options.gender"
							placeholder="性别"
							@change="onChange"
							class="gender"
							popupClassName="gender"
							:getPopupContainer="
								(triggerNode) => {
									return triggerNode.parentNode || document.body;
								}
							"
							v-model="formvalue.sex"
							id="gender"
							><i slot="suffixIcon" class="iconfont icon-xiala"></i
						></a-cascader>
					</li>
					<!-- <li>
						<a-cascader
							:options="options.age"
							placeholder="年龄"
							@change="onChange"
							popupClassName="agestr"
							:getPopupContainer="
								(triggerNode) => {
									return triggerNode.parentNode || document.body;
								}
							"
							v-model="formvalue.ageStr"
							id="age"
							><i slot="suffixIcon" class="iconfont icon-xiala"></i
						></a-cascader>
					</li> -->
					<li class="special">
						<div @click.stop="isspecialboxshowclick" :style="isspecialboxshow ? 'color:#ff6a00' : ''">
							<ul class="showspecial" v-if="specialactive.length !== 0">
								<li v-for="(item, index) in specialactive" :key="index" @click.stop>{{ item }}<i class="iconfont icon-guanbi" @click.stop="delmark(index)"></i></li>
							</ul>
							<span v-if="specialactive.length > 3">...</span>
							<span :style="specialactive.length > 0 ? 'color:#ff6a00' : ''" v-if="specialactive.length === 0">特色</span><i class="iconfont icon-xiala" :class="isspecialboxshow ? 'turn' : ''" :style="isspecialboxshow ? 'color:#ff6a00' : ''"></i>
						</div>
					</li>
					<li class="claerfilter">
						<a @click="claerfilter" href="javascript:;">清空筛选条件</a>
					</li>
				</ul>
			</div>
		</div>
		<!-- 面包屑 -->
		<!-- <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="">
        <span>一手职位</span>
      </a-breadcrumb-item>
    </a-breadcrumb> -->
		<!-- 主体部分 -->
		<div class="w" id="maincontent">
			<div class="maincontentleft">
				<div style="text-align: center">
					<a-spin tip="加载中..." :spinning="isspinning"></a-spin>
				</div>
				<!-- <div
          class="nodata"
          v-if="jobMainList.length === 0 && isspinning === false"
        > -->
				<template v-if="jobMainList.length === 0 && isspinning === false">
					<a-empty class="nodata" description="暂无符合条件的岗位" />
				</template>
				<!-- </div> -->
				<div v-if="!isspinning">
					<div class="subset" v-for="(item, index) in jobMainList" :key="index">
						<router-link target="_blank" :to="'/detail/' + item.id" rel="opener">
							<div class="subsetleft" @click="totop">
								<div class="imgbox">
									<img v-if="item.logo.length !== 0" :src="item.logo" />
									<img v-else src="../../../static/img/nopicture.png" style="height: 169px; width: " />
								</div>
								<div class="jobinfobox">
									<!-- <router-link
                  target="_blank"
                  :to="'/detail/' + item.id"
                  rel="opener"
                > -->
									<div class="jobname">{{ item.jobName }}</div>
									<!-- </router-link> -->
									<div class="jobinfo">
										<span>{{ item.district }}</span>
										<span>{{ item.gender }}</span>
										<span>{{ item.age }}</span>
									</div>
									<div class="jobtag">
										<!-- <span>返费</span> -->
										<span v-for="(item1, index) in item.jobSpecialLabelNames" :key="index">{{ item1 }}</span>
									</div>
									<div class="jobpricemonth">
										<!-- :style="{ opacity: item.minMonthlyPay ? '1' : '0' }" -->

										<span>{{ item.minMonthlyPay ? item.minMonthlyPay : "" }}</span
										>-<span>{{ item.maxMonthlyPay ? item.maxMonthlyPay : "" }}</span
										>元/月
									</div>
									<div class="jobpricehour">
										{{ getSalaryClassifyValue(item.salaryClassify, item.salaryClassifyValue) }}

										<!-- <template v-if="item.hourlyPay"
                    ><span>{{ item.hourlyPay }}</span
                    >元/小时</template
                  >
                  <template v-else-if="item.dayPay"
                    ><span>{{ item.dayPay }}</span
                    >元/日</template
                  > -->
									</div>
								</div>
							</div>
						</router-link>
						<div class="subsetright">
							<div class="topContainer">
								<div class="updateTime" style="display: none">
									<span>更新时间：{{ item.updateTime || "--" }} ( {{ item.diffTime || "--" }} ) </span>
								</div>
								<div class="topbox">
									<div>服务费</div>
									<div>{{ item.servetype }}</div>
								</div>
							</div>
							<div class="bottombox1">
								<!-- <a-popover title="" trigger="click" placement="bottomRight">
									<template slot="content" class="jobDesp_content">
										<div :class="'copy' + index" @click="copyText($event, index)">复制</div>
										<span v-if="item.jobDesp" :class="'copyInfo' + index">{{ item.jobDesp }}</span
										><span v-else>暂无详单</span>
									</template> -->
								<router-link target="_blank" :to="'/detail/' + item.id" rel="opener"> <a-button type="primary" class="jobDesp">更多</a-button></router-link>
								<!-- </a-popover> -->

								<button @click="torecord(item)">报名</button>

								<!-- <button @click="showmodal(item)" @click="">报名</button> -->
							</div>
						</div>
					</div>
				</div>
				<div class="pagecontainer">
					<a-pagination :current="+formvalue.pageNum" :default-current="1" :defaultPageSize="8" :total="formvalue.total" @change="pageChange" />
					<div class="ant-pagination-options-quick-jumper">跳至<input ref="pageinput" type="text" @keyup.enter="inputpageChange" @blur="inputpageChange" />页</div>
				</div>
			</div>
			<div class="maincontentright">
				<div class="dateinfo">
					<h1 class="bottombox"><i>我的日历</i></h1>
					<p
						class="day"
						:style="{
							'font-size': '60px',
							color: '#FF6A00',
							'line-height': '80px',
							'margin-top': '8px',
						}"
					>
						{{ dateinfo.day }}
					</p>
					<p class="week" :style="{ 'font-size': '16px', color: '#FF6A00' }">
						{{ dateinfo.week }}
					</p>
					<p class="date" :style="{ 'font-size': '16px', color: '#FF6A00' }">
						{{ dateinfo.date }}
					</p>
				</div>
				<div class="hotphone">
					<h1 class="bottombox"><i>服务热线</i></h1>
					<p>0371-6611 3723</p>
				</div>
				<!-- <div class="relationme">
          <p class="bottombox"><i>一手单合作</i></p>
          <button>发布一手单</button>
        </div> -->
				<recommend />
			</div>
		</div>
	</div>
</template>

<script>
import {
	// JobListApi,
	getJobSpecialApi,
	getProvinceApi,
	getHotCityApi,
	getCityWhichHasJobApi,
	getHotStoreApi,
	// getCityApi,
} from "../../api/job";
import { moneyToFixed, getSalaryClassifyValue } from "../../utils/commonUtil";
import recommend from "@/components/FirstJob/components/recommend.vue";
import { nationlist } from "../../utils/datalist";
import Clipboard from "clipboard";
// import PinYin from '../../utils/ChinesePY'
// import recordbill from "@/components/FirstJob/components/recordbill.vue";
export default {
	// 注入获取职位列表的方法
	inject: ["getJobList", "reload"],
	// 组件名称
	name: "",
	// 局部注册的组件
	components: {
		recommend,
		// recordbill,
	},
	// 组件参数 接收来自父组件的数据
	props: {
		isspecialboxshow: {
			require: true,
		},
		formvalue: {
			// type: Object,
			require: true,
		},
		jobMainList: {
			require: true,
		},
		isspinning: {
			require: true,
		}, // 加载中显示
	},
	// 组件状态值
	data() {
		return {
			// jobMainList: [], // 职位列表
			specialList: [], // 获取的特色列表
			// searchvalue: "",
			specialactive: [], // 点中的特色标签索引
			specialvalue: [], // 点中的特色标签
			visible: false, // 录单模态框的展示
			confirmLoading: false, // 录单提交的loading效果
			cityoption: [], // 城市列表
			hotCityList: [], // 热门城市列表
			hasJobCityList: {}, // 有职位的城市列表
			currentCityList: {}, // 当前首字母展示的城市列表
			currentCity: "全国",
			cityValue: "", // 城市输入框内容
			activeInd: -1,
			hotStoreList: [],
			newFormValue: [],
			apply: "", // 报名企业id
			proxyinfo: JSON.parse(sessionStorage.getItem("LOGIN_DATA")),
			nationlist: nationlist,

			dateinfo: {
				day: "",
				week: "",
				date: "",
			},

			options: {
				//
				price: [
					{
						value: "3000-4000",
						label: "3000-4000元",
						uid: 1,
					},
					{
						value: "4000-5000",
						label: "4000-5000元",
						uid: 1,
					},
					{
						value: "5000-6000",
						label: "5000-6000元",
						uid: 1,
					},
					{
						value: "6000-7000",
						label: "6000-7000元",
						uid: 1,
					},
				],
				age: [
					{
						value: "16-45",
						label: "16-45岁",
						uid: 2,
					},
					{
						value: "18-35",
						label: "18-35岁",
						uid: 2,
					},
					{
						value: "45-58",
						label: "45-58岁",
						uid: 2,
					},
					{
						value: "58",
						label: "58岁以上",
						uid: 2,
					},
				],
				gender: [
					{
						value: "1",
						label: "男",
						uid: 3,
					},
					{
						value: "2",
						label: "女",
						uid: 3,
					},
					{
						value: "-1",
						label: "男女不限",
						uid: 3,
					},
				],
			},
			relationList: [],
		};
	},
	// 计算属性
	computed: {},
	// 侦听器
	watch: {
		formvalue: {
			handler(e) {
				console.log(e);
				// 筛选列表数据处理
				// if(e.city !== undefined){
				// if (e.district.length === 0) {
				// 	document.getElementById("city").style.width = 85 + "px";
				// } else {
				// 	const result = e.district.join("");
				// 	// console.log(result);
				// 	if (result.length > 6) {
				// 		document.getElementById("city").style.width = (result.length + 3) * 14 + "px";
				// 		document.getElementById("city").style.maxWidth = "210px";
				// 		document.querySelector("#city").nextElementSibling.style.width = (result.length + 3) * 14 + "px"; // 获取下一个兄弟元素s
				// 		document.getElementById("city").nextElementSibling.style.maxWidth = "210px";
				// 	} else if (result.length > 5) {
				// 		document.getElementById("city").style.width = (result.length + 2.8) * 14 + "px";
				// 		document.querySelector("#city").nextElementSibling.style.width = (result.length + 2.6) * 14 + "px";
				// 	} else if (result.length > 4) {
				// 		document.getElementById("city").style.width = (result.length + 2.4) * 14 + "px";
				// 		document.querySelector("#city").nextElementSibling.style.width = (result.length + 2.4) * 14 + "px";
				// 	} else {
				// 		document.getElementById("city").style.width = (result.length + 1.5) * 14 + "px";
				// 		document.getElementById("city").style.minWidth = 72 + "px";
				// 		document.querySelector("#city").nextElementSibling.style.width = (result.length + 1.5) * 14 + "px";
				// 	}
				// }
				// }
				// 工价的判断
				if (e.monthlyPayStr.length == 0) {
					document.getElementById("price").style.width = 60 + "px";
					document.getElementById("price").style.minWidth = 60 + "px";
				} else {
					const result = e.monthlyPayStr.join("");
					if (result.length >= 0) {
						document.getElementById("price").style.width = "120px";
						document.getElementById("price").nextElementSibling.style.width = "130px";
						// document.querySelector(".ant-cascader-picker-label").style.width =
						// "150px";
					}
				}
				if (e.monthlyPayStr.length == 0) {
					document.getElementById("price").style.width = 60 + "px";
					document.getElementById("price").style.minWidth = 60 + "px";
				} else {
					const result = e.monthlyPayStr.join("");
					if (result.length >= 0) {
						document.getElementById("price").style.width = "120px";
						document.getElementById("price").nextElementSibling.style.width = "130px";
						// document.querySelector(".ant-cascader-picker-label").style.width =
						// "150px";
					}
				}
				// 年龄筛选长度的判断
				// if (e.ageStr.length === 0) {
				// 	document.getElementById("age").style.width = 60 + "px";
				// } else {
				// 	const result = e.ageStr.join("");
				// 	if (result.length >= 0) {
				// 		document.getElementById("age").style.width = "90px";
				// 		document.getElementById("age").nextElementSibling.style.width = "90px";
				// 		// document.querySelector(".ant-cascader-picker-label").style.width =
				// 		// "150px";
				// 	}
				// }
			},
			deep: true,
		},
		$route: {
			handler(to, from) {
				console.log("ischange");
				console.log(to);
				console.log(from);
			},
			deep: true,
		},
	},
	// 组件

	// 生命周期钩子   注：没用到的钩子请自行删除
	/**
	 * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
	 */
	created() {
		console.log(this.proxyinfo);
		// this.reload();
		this.getJobList();
		this.getJobSpecial();
		this.getProvince();
		this.getdateinfo();
		this.getHotCity();
		this.getCityWhichHasJob();
		this.getHotStore();
	},
	/**
	 * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
	 * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
	 */
	mounted() {
		this.$nextTick(() => {});
		setTimeout(() => {
			console.log(this.jobMainList);
		}, 200);
		// document.querySelector(".ant-pagination-options-quick-jumper").innerHTML =
		//   "跳至<input  type='text'>页";
		console.log(this.formvalue);
		console.log(this.$route);
	},
	// 组件方法
	methods: {
		// 处理筛选框的定位
		// filterbox() {
		//   return () => {
		//     return document.getElementById("filterbox")[0];
		//     // return document.body;
		//   };
		// },

		//搜索企业名称
		onSearch(e) {
			console.log(e);
			// if (typeof e === "string" || typeof e === "number") {
			//   if (e.length !== 0) {
			//     console.log("zifuchuan ");
			//     this.formvalue.aliasName = e;
			//     this.getJobList();
			//   }
			// } else
			this.formvalue.pageNum = 1;
			if (this.formvalue.aliasName.trim() !== "" || this.formvalue.ageStr.trim() !== "") {
				// console.log("search1");
				// this.formvalue.aliasName = this.searchvalue;
				console.log(this.formvalue);
				this.getJobList();
			}

			// this.$router.push("/list").catch((err) => {
			//   console.log(err);
			// });
		},
		// 获取职位特色
		async getJobSpecial() {
			try {
				const { data } = await getJobSpecialApi();
				console.log(data);
				this.specialList = data.data;
			} catch (error) {
				console.log(error);
			}
		},

		// 获取省份列表
		async getProvince() {
			// const that = this;
			try {
				const { data } = await getProvinceApi();
				// console.log(data);
				data.data.pop();
				this.cityoption = data.data;

				// console.log(this.cityoption);
				// console.log(data);
			} catch (error) {
				console.log(error);
			}
		},
		// 筛选职位
		onChange(e, item) {
			console.log(e);
			console.log(item);
			console.log(this.formvalue);
			// if (item) {
			// 	if (item.uid === 1) {
			// 		console.log(1);
			// 		this.formvalue.monthlyPayStr = item[0];
			// 	} else if (item.uid === 2) {
			// 		this.formvalue.ageStr = item[0];
			// 	} else if (item[0].id) {
			// 		console.log(e.join());
			// 		this.formvalue.district = e;
			// 	} else
			// if (item[0].uid == 3){
			// 		this.formvalue.sex = item[0].value;

			//   }
			// }
			this.getJobList();
		},
		pageChange(e) {
			console.log(e);
			this.formvalue.pageNum = e;
			this.$refs.pageinput.value = "";
			this.getJobList();
		},
		inputpageChange(e) {
			const pagenumcount = this.formvalue.total / this.formvalue.pageSize;
			console.log(pagenumcount);
			if (e.target.value) {
				if (e.target.value > pagenumcount) {
					this.formvalue.pageNum = Math.ceil(pagenumcount);
				} else {
					this.formvalue.pageNum = e.target.value;
				}
			} else {
				this.formvalue.pageNum = 1;
			}
			this.getJobList();
			console.log(e);
		},
		handleChange() {},
		claerfilter() {
			const { pageNum, pageSize, total } = this.formvalue;
			// this.formvalue = {  // 改变引用地址不会使vue侦听到数据的变化,
			//   district: [],
			//   monthlyPayStr: [],
			//   ageStr: [],
			//   jobSpecialLabelIds: [],
			//   pageNum,
			//   pageSize,
			//   total, //分页配置
			// };
			this.formvalue.district = [];
			this.formvalue.monthlyPayStr = [];
			this.formvalue.ageStr = "";
			this.formvalue.jobSpecialLabelIds = [];
			this.formvalue.aliasName = "";
			this.formvalue.cityName = "";
			this.formvalue.sex = [];
			this.formvalue.levelType = "";
			this.formvalue.hotStoreId = "";
			this.currentCity = "全国";
			this.formvalue.pageNum = pageNum;
			this.formvalue.pageSize = pageSize;
			this.formvalue.total = total;
			// console.log(this.formvalue);
			this.specialactive = [];
			this.specialvalue = [];
			this.getJobList();
		},
		specialclick(index, item) {
			console.log(item);
			console.log(index);
			let arrIndex = this.specialactive.indexOf(item.name);
			if (arrIndex > -1) {
				this.specialactive.splice(arrIndex, 1);
				this.specialvalue.splice(arrIndex, 1);
			} else {
				this.specialactive.push(item.name);
				this.specialvalue.push(item.id);
			}
			this.formvalue.jobSpecialLabelIds = this.specialvalue;
			// console.log(this.specialactive);
			this.getJobList();
			console.log(this.specialvalue);
			console.log(this.formvalue);
			// console.log(index);
		},
		isspecialboxshowclick() {
			this.$emit("update:isspecialboxshow", !this.isspecialboxshow);
		},
		totop() {
			// console.log(window);
			document.body.scrollTop = 0;
			document.documentElement.scrollTop = 0;
			// window.body.scrollY = 0;
		},
		moneyToFixed(value) {
			console.log(value);
			return moneyToFixed(value);
		},
		// 重置搜索结果
		resetsearch(e) {
			// console.log(e);
			if (e.target.value.length === 0) {
				this.formvalue.aliasName = "";

				this.getJobList();
			}
			// this.$router.push("/list").catch((err) => {
			//   console.log(err);
			// });
		},
		resetAgeSearch(e) {
			if (e.target.value.length === 0) {
				this.formvalue.ageStr = "";

				this.getJobList();
			}
		},
		cityModalClose() {
			// 城市选择弹出框关闭
			this.cityValue = "";
			this.searchCity();
		},

		// 获取日期信息
		getdateinfo() {
			const date = new Date();
			// console.log(date);
			// console.log(date.getDate());
			// console.log(date.getDay());
			// console.log(date.getFullYear());
			// console.log(date.getMonth());
			if (date.getDay() === 1) {
				this.dateinfo.week = "星期一";
			} else if (date.getDay() === 2) {
				this.dateinfo.week = "星期二";
			} else if (date.getDay() === 3) {
				this.dateinfo.week = "星期三";
			} else if (date.getDay() === 4) {
				this.dateinfo.week = "星期四";
			} else if (date.getDay() === 5) {
				this.dateinfo.week = "星期五";
			} else if (date.getDay() === 6) {
				this.dateinfo.week = "星期六";
			} else if (date.getDay() === 7) {
				this.dateinfo.week = "星期日";
			}
			// console.log(date.getDate());
			// console.log(date.getDate().length);
			if (date.getDate().toString().length <= 1) {
				this.dateinfo.day = "0" + date.getDate();
				console.log(this.dateinfo.day);
			} else {
				this.dateinfo.day = date.getDate();
				console.log(this.dateinfo.day);
			}
			this.dateinfo.date = date.getFullYear() + "." + (date.getMonth() + 1);
		},
		delmark(index) {
			console.log(index);
			this.specialactive.splice(index, 1);
			this.specialvalue.splice(index, 1);
			this.getJobList();
		},
		torecord(item) {
			// 跳转到路由新页面的方法
			console.log(item);
			// let userinfo = JSON.stringify(item);

			this.$router.push({ name: "recordbill", params: item });
			sessionStorage.setItem("CURRENT_FIRM", JSON.stringify(item));
		},
		getSalaryClassifyValue(salaryClassify, salaryClassifyValue) {
			return getSalaryClassifyValue(salaryClassify, salaryClassifyValue);
		},
		async getHotCity() {
			try {
				const { data } = await getHotCityApi();
				console.log(data);
				if (data.status == 200) {
					this.hotCityList = data.data;
					this.currentCityList = this.hotCityList;
				}
			} catch (error) {
				console.log(error);
			}
		},
		async getCityWhichHasJob() {
			try {
				const { data } = await getCityWhichHasJobApi();
				console.log(data);
				if (data.status == 200) {
					let pinyinList = [];
					data.data.forEach((item) => {
						if (pinyinList.indexOf(item.firstLetter) == -1) {
							pinyinList.push(item.firstLetter);
						}
					});
					pinyinList.sort(); // 拼音首字母排序
					let firstList = [];
					let cityList = [];
					let num = -1;

					pinyinList.forEach((item, i) => {
						if (i % 5 == 0) {
							num++;
							firstList[num] = [];
						}
						firstList[num].push(item);
					});
					firstList.forEach((item, i) => {
						cityList[i] = [];

						item.forEach((item1) => {
							data.data.forEach((item2) => {
								if (item2.firstLetter == item1) {
									cityList[i].push(item2);
								}
							});
						});
					});
					this.hasJobCityList.firstList = firstList;
					this.hasJobCityList.cityList = cityList;
				}
			} catch (error) {
				console.log(error);
			}
		},
		async getHotStore() {
			try {
				const { data } = await getHotStoreApi();
				console.log(data);
				if (data.status == 200) {
					let middle = [];
					this.hotStoreList = data.data;
					this.hotStoreList.forEach((item, index) => {
						if (index <= 4) {
							middle.push(item);
						}
					});
					this.hotStoreList = middle;
					// console.log(this.hotStoreList);
				}
			} catch (error) {
				console.log(error);
			}
		},
		changeCurrentCity(index) {
			this.currentCityList = this.hasJobCityList.cityList[index];
			console.log(index);
		},
		searchCity() {
			this.currentCityList = [];
			if (this.cityValue) {
				this.hotCityList.forEach((item) => {
					// console.log(item);
					// console.log(item.name.indexOf(this.cityValue));
					if (item.name.indexOf(this.cityValue) > -1) {
						console.log(123);
						this.currentCityList.push(item);
					}
				});
			}
			if (this.currentCityList.length == 0) {
				this.currentCityList = this.hotCityList;
			}
		},
		resetCityList(e) {
			if (e.target.value.length === 0) {
				this.cityValue = "";
				this.currentCityList = this.hotCityList;
			}
		},
		searchJob(item) {
			console.log(item);
			this.formvalue.cityName = item.name;
			this.formvalue.levelType = item.levelType;
			this.currentCity = item.name;
			this.getJobList();
			this.visible = false;
		},
		getHotStoreList(item) {
			console.log(item);
			this.formvalue.aliasName = item.storeName;
			// this.formvalue.hotStoreId = item.storeId;
			this.getJobList();
		},
		resetResult() {
			this.formvalue.cityName = "";
			this.formvalue.levelType = "";
			this.formvalue.hotStoreId = "";
			this.currentCity = "全国";
			console.log(this.formvalue);
			this.getJobList();
		},
		copyText(event, ind) {
			// 复制文本内容
			var clipboard = new Clipboard(".copy" + ind, {
				// .copy 是点击的触发元素
				target: function () {
					// 通过target指定要复印的节点
					return document.querySelector(".copyInfo" + ind); // .copyInfo 是要复制的目标内容
				},
			});
			console.log(clipboard);
			// if(){

			// }
			clipboard.on("success", (e) => {
				// success 是成功的回调 success => error 可以捕获复制失败的异常信息
				console.log(123);
				console.log(e);
				this.$message.success("复制成功");
				clipboard.destroy();
			});
		},
		// todetail(item) {
		//   const routeURL = this.$router.resolve({
		//     name: "Detail",
		//     query: item.id,
		//   });
		//   window.open(routeURL.href, "_blank");
		//   console.log(item);
		// },
	},
};
</script>

<style scoped lang="less">
.dropdown {
	display: inline-block;
	width: 100px;
	height: 32px;
	line-height: 30px;
	font-size: 16px;
	// border: 1px solid rgba(77, 87, 94, 0.3);
	border-radius: 4px;
	margin-left: 16px;
	border: 1px solid #ff6a00;
	background-color: #fff;
	color: rgba(255, 106, 0, 1);
	text-align: center;
	cursor: pointer;
	&:hover {
		color: #fff;

		background-color: rgba(255, 121, 26);
	}
}
/deep/ .ant-drawer-content {
	box-sizing: border-box;
}
// 录单模态框样式
/deep/ .ant-drawer-wrapper-body {
	// overflow: none;
	// position: relative;
	&::-webkit-scrollbar {
		/*滚动条整体样式*/
		width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
		height: 4px;
	}

	.ant-drawer-header {
		position: absolute;
		width: 100%;
		background-color: #fff;
		padding: 12px 24px;
		z-index: 999;
		.ant-drawer-close {
			height: 48px;
			width: 48px;
			line-height: 48px;
		}
	}
	.ant-drawer-body {
		overflow-y: auto;
		margin-top: 47px;
	}
}

/deep/ .ant-form {
	// overflow: auto;
	margin-bottom: 50px;
}

/deep/ .ant-form-item {
	// margin-bottom: 0;
	display: flex;
	justify-content: start;
	align-items: middle;
	margin-top: -8px;
	.ant-form-item-label {
		line-height: 40px;
		// font-weight: bold;
	}

	.ant-input {
		// width: 430px;
		height: 40px;
		// border: none;
		border: 1px solid #dddddd;
		box-shadow: none !important;
		// background-color: #f6f6f6;
	}
	.ant-select-selection__rendered,
	.ant-select-selection--single,
	.ant-select {
		height: 40px;
		// border: none;
		// border: 1px solid #dddddd;
		line-height: 40px;
		box-shadow: none !important;
		border-color: #d9d9d9;
		/deep/ .ant-form-item-children {
			line-height: 40px;
			// .ant-radio-checked {
			// }
			// display: flex !important;
		}
		// &:hover {
		//   border-color: #d9d9d9;
		// }
		// &:focus {
		//   border-color: #d9d9d9;
		// }
		// &:active {
		//   border-color: #d9d9d9;
		// }
	}
}
// /deep/ .ant-modal-footer {
//   padding: 10px 24px;
//   .ant-btn {
//     box-shadow: none;
//     &: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;
//     box-shadow: none;
//     &:hover {
//       background-color: #ff8025 !important;
//     }
//   }
// }
/deep/ .ant-modal-header {
	.ant-modal-title {
		font-size: 20px;
		// font-weight: normal;
	}
}
/deep/ .ant-drawer-body {
	overflow: auto;
	padding: 20px 16px 8px 16px;
}

/deep/ .navigation {
	// margin-top: -1px;
	width: 100vw;
	background-color: #fff;
	border: 1px solid #f6f6f6;
	// height: 72px;
	// margin-bottom: 10px;
	// line-height: 100px;

	position: relative;
	z-index: 999;
	.special-active {
		color: rgb(254, 97, 0) !important;
		background-color: rgba(255, 106, 0, 0.1) !important;
	}
	.ant-cascader-picker-focused {
		input {
			transition: all 0.3s;
		}
		input::placeholder {
			color: rgb(255, 106, 0) !important;
		}
		i {
			color: rgb(255, 106, 0) !important;
		}
	}
	> .w {
		// height: 72px;
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
		.searchinput {
			margin-top: 19px;
			// margin-right: 285px;
			width: 1200px;
			height: 44px;
			&.ant-input-affix-wrapper {
				position: relative;
				.ant-input-prefix {
					position: absolute;
					left: 8px;
					top: 50%;
					background-color: #fff;
					transform: translateY(-50%);
					> div {
						> span {
							display: inline-block;
							width: 50px;
						}
					}
					i {
						font-size: 12px;
						// margin-left: 15px;
						color: #adadad;
					}
				}
				.ant-input-suffix {
					right: 0px !important;
					.ant-input-clear-icon {
						margin-right: 20px;
						width: 1.5em !important;
						height: 1.5em !important;
						> svg {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
			> .ant-input {
				width: 100%;
				height: 44px;
				text-indent: 170px;
				background: #fff;
				// border: 1px solid rgba(77, 87, 94, 0.3);
				// border-radius: 136px;
				box-shadow: 0px 2px 4px 0px transparent;
				font-size: 14px !important;
				padding-right: 0;
				border-color: #e9e9e9;
				&::placeholder {
					// text-indent: 30px;
					font-size: 14px !important;
				}
				&:hover {
					border-color: #ff6a00;
					box-shadow: none;
				}
				&:focus {
					border-color: #ff6a00;
				}
			}
			button {
				width: 120px;
				height: 44px;
				color: white;
				background: #ff6a00;
				border-color: #ff6a00;
				border: none;
				// border-radius: 16px;
				font-size: 18px;
				box-shadow: none;
				cursor: pointer;
				outline: none;
				&:hover {
					background-color: #ff842b;
				}
				// &:focus {
				//   border: none;
				// }
			}
			.ageinput {
				padding: 0;
				margin: 0 15px;
				height: 32px;
				width: 100px;
				border-radius: 0;
				text-indent: 10px;
				border-color: #e9e9e9;
				border-top-color: transparent;
				border-bottom-color: transparent;
				&::-webkit-inner-spin-button {
					-webkit-appearance: none;
				}
				&:hover {
					border-left-color: #e9e9e9;
					border-right-color: #e9e9e9;
				}
				&:focus {
					box-shadow: none;
					border-left-color: #e9e9e9;
					border-right-color: #e9e9e9;
				}
			}
		}
		.specialbox {
			position: absolute;
			border-bottom: 1px solid #f6f6f6;
			box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
			// display: ;
			transition: all 0.4s;
			left: 0;
			top: 144px;
			width: 100vw;
			background-color: #fff;
			z-index: 999;
			ul {
				overflow: hidden;
				padding: 20px 0 8px 0;
				li {
					padding: 4px 16px;
					margin: 0px 16px 12px 0;
					cursor: pointer;
					float: left;
					background: rgba(216, 216, 216, 0.3);
					border-radius: 15px;
					font-size: 14px;
					color: #4d575e;
					line-height: 22px;
					&:hover {
						color: rgb(254, 97, 0);
						background-color: rgba(255, 106, 0, 0.1);
					}
				}
			}
		}
		.hotStore {
			margin: 8px 0 12px 0;
			font-size: 14px;
			line-height: 2;
			display: flex;
			> span {
				width: 80px;
			}
			ul {
				display: flex;
				flex-wrap: wrap;
				flex: 1;
				li {
					color: #ff6a00;
					margin-right: 20px;
					overflow: hidden;
					cursor: pointer;
					&:hover {
						color: #ff8f3f;
					}
					&:active {
						color: #e24f00;
					}
					// &:nth-child(-n + 5) {
					// 	display: none;
					// }
				}
			}
		}
		.filterbox {
			display: flex;
			justify-content: flex-start;
			min-width: 645px;
			> li {
				// margin-top: 22px;
				font-size: 14px;
				color: #4d575e;
				margin-right: 4px;
				.ant-cascader-picker {
					width: auto;
					position: relative;
					transform: translateY(-2px);
					.anticon-close-circle {
						font-size: 14px;
					}
					.icon-xiala {
						font-size: 12px;
						transform: translateY(1px) scale(0.5);
					}
					.ant-cascader-input {
						width: 60px;
						// margin-top: -5px;
						// max-width: 150px !important;
						border: none;
						padding: 0;
						// margin-bottom: 6px;
						box-shadow: none;

						&::placeholder {
							// width: auto;
							// text-indent: 20px;
							color: #4d575ecc;
							line-height: 20px;
							font-size: 14px;
						}
					}

					span {
						width: 60px;
						// max-width: 150px;
						color: rgb(255, 106, 0) !important;
						font-size: 14px;
						padding: 0 20px 0 0;
						text-align: left;
						line-height: 22px !important;
					}
				}
			}
			> li:first-child {
				> i {
					position: relative;
					display: inline-block;
					width: 12px;
					height: 15px;
					margin-right: 6px;
					font-size: 14px;
					color: #ff6a00;
					// margin-top: -9px;
					&::before {
						position: absolute;
						left: 0;
						top: -2px;
					}
				}
				.ant-cascader-picker {
					width: auto;
					position: relative;
					.ant-cascader-input {
						min-width: 85px;
						&:hover &::placeholder {
							color: #ff6a00;
						}
					}

					.ant-cascader-input::placeholder {
						// width: auto;
						color: #4d575ecc;
						text-indent: 0;
						line-height: 20px;
						font-size: 14px;
					}
					span {
						// width: auto;
						// max-width: 150px;
						// min-width: 140px;
						text-align: left;
					}
				}
			}
			.special {
				position: relative;
				div:first-child {
					height: 32px;
					margin-top: -2px;
					line-height: 32px;
					color: #4d575ecc;
					display: flex;
					cursor: pointer;
					> .showspecial {
						height: 32px;
						overflow: hidden;
						li {
							margin: 6px 5px 0 0;
							float: left;
							height: 20px;
							line-height: 19px;
							padding: 0 8px;
							color: #fff;
							background-color: #ff6a00;
							border-radius: 999px;
							i {
								display: inline-block;
								font-size: 12px;
								height: 12px;
								position: relative;
								margin-left: 3px;

								transform: scale(0.8);
								// vertical-align: middle;
							}
							&:nth-child(n + 4) {
								display: none;
							}
						}
					}
					.icon-xiala {
						transition: all 0.2s;
						position: relative;
						// float: left;
						color: #c5c5c5;
						margin-left: 4px;
						display: inline-block;
						font-size: 12px;
						transform: translateY(0px) scale(0.5);
					}
					// .turn {
					//   transform: translateY(-1px) scale(0.6) rotate(180deg);
					// }
				}
			}
			> li:last-child {
				position: relative;
				color: #8c8d8f;
				font-size: 14px;
				margin: 0px 25px 0 20px;
				// color: rgba(78, 88, 95, 0.8);
				transform: translateY(-1px);
				// margin-left: 25px;
				a {
					display: inline-block;
					margin-top: 7px;
					transition: all 0.5s;
					line-height: 14px;
					&:active {
						color: rgb(255, 106, 0);
						transition: none;
					}
				}
			}
		}
	}
}

/deep/ #maincontent {
	display: flex;
	justify-content: space-between;
	margin-top: 16px;
	.maincontentleft {
		width: 944px;
		margin-right: 16px;
		text-align: left;
		.nodata {
			overflow: hidden;
			height: 230px;
			padding-top: 30px;
			text-align: center;
			background-color: #fff;
			border-radius: 5px;
			margin: 0 auto;
			color: #00000066;
			margin-bottom: 20px;
			p {
				position: relative;
				transform: translateY(35px);
			}
		}
		.subset {
			display: flex;
			justify-content: space-between;
			// width: 944px;
			// height: 212px;
			padding: 20px;
			margin-bottom: 16px;
			background: #ffffff;
			border-radius: 4px;
			transition: all 0.2s;

			&:hover {
				// position: relative;
				box-shadow: 3px 3px 20px 0px rgba(77, 87, 94, 0.1);
				// transform: translateY(-0.5px);
			}
			.subsetleft {
				display: flex;
				.imgbox {
					width: 169px;
					height: 169px;
					margin-right: 16px;
					position: relative;
					overflow: hidden;
					img {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translateX(-50%) translateY(-50%);

						// width: 100%;
						height: 100%;
					}
				}
				.jobinfobox {
					.jobname {
						// margin: 12px 0;
						font-size: 20px;
						// font-weight: 400;
						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: 12px;
						font-size: 16px;
						font-weight: 400;
						text-align: left;
						color: #4d575e;
						line-height: 22px;
					}
					.jobpricehour {
						margin-top: 12px;
						font-size: 16px;
						font-weight: normal;
						text-align: left;
						color: #ff6a00;
						// line-height: 24px;
						span {
							vertical-align: baseline;
							font-size: 20px;
							line-height: 24px;
						}
					}
				}
			}
			.subsetright {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-end;
				.topContainer {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: flex-end;
					margin-top: -8px;
				}
				.updateTime {
					line-height: 1;
					font-size: 14px;
					color: #999;
				}
				.topbox {
					width: 116px;
					height: 54px;
					margin-top: 8px;
					overflow: hidden;
					text-align: center;
					background: rgba(255, 106, 0, 0.1);
					border-radius: 4px;
					line-height: 30px;
					div {
						// font-weight: normal;
						font-size: 16px;
						span {
							font-size: 20px;
							// font-weight: normal;
						}
					}
					div:first-child {
						height: 24px;
						background: #ff6a00;
						line-height: 21px;
						font-size: 14px;
						color: #ffffff;
						border: 1px solid #ff6a00;
						border-radius: 4px 4px 0px 0px;
					}
					div:last-child {
						font-weight: normal;
						background-color: #fff4e3;
						color: #ff6a00 !important;
					}
				}
				.bottombox1 {
					display: flex;
					align-items: center;
					.jobDesp {
						border: 1px solid #ff6a00;
						background-color: #fff;
						color: rgba(255, 106, 0, 1);
						transition: none;
						box-shadow: none;
						text-shadow: none;
						cursor: pointer;
						&:hover {
							color: #fff;

							background-color: rgba(255, 121, 26);
						}
					}
					button {
						width: 100px;
						height: 32px;
						font-size: 16px;
						// border: 1px solid rgba(77, 87, 94, 0.3);
						border-radius: 4px;
					}
					> a {
						button:first-child {
							border: 1px solid #d9d9d9;
							// border-radius: 4px;
							color: #4d575e;
							background-color: #fff;
							cursor: pointer;
							&:hover {
								color: #ff7614;
								border-color: #ff7614;
								background-color: #fff;
							}
						}
					}

					> button:last-child {
						margin-left: 16px;
						border: 1px solid #ff6a00;
						background-color: #fff;
						color: rgba(255, 106, 0, 1);
						cursor: pointer;
						&:hover {
							color: #fff;

							background-color: rgba(255, 121, 26);
						}
					}
				}
			}
		}
		// .pagecontainer {
		//   display: flex;
		//   justify-content: center;
		//   text-align: center;
		//   margin-bottom: 30px;
		//   .ant-pagination-options-quick-jumper {
		//     margin-left: 10px;
		//     font-size: 16px;
		//   }
		//   .ant-pagination-disabled {
		//     a:hover {
		//       color: #c5c5c5 !important;
		//     }
		//   }
		//   .ant-pagination-next,
		//   .ant-pagination-prev {
		//     a:hover {
		//       color: #ff6a00;
		//     }
		//   }
		//   input[type="text"] {
		//     box-shadow: none;
		//     &:focus {
		//       border: 1px solid #ff6a00;
		//     }
		//     &:hover {
		//       border: 1px solid #ff6a00;
		//     }
		//   }
		//   .ant-pagination-item {
		//     border: none;
		//     a:hover {
		//       color: #ff6a00;
		//     }
		//   }
		//   .ant-pagination-item-active {
		//     background: #ff6a00;
		//     a {
		//       color: white;
		//     }
		//     a:hover {
		//       color: white;
		//     }
		//   }
		//   .ant-pagination-item-link {
		//     border: none;
		//   }
		// }
	}
	.maincontentright {
		width: 240px;
		> div {
			margin-bottom: 16px;
		}
		.dateinfo {
			text-align: center;
			overflow: hidden;
			border-radius: 4px;
			position: relative;
			padding-bottom: 10px;
			background-color: #fff4e3;
			.bottombox {
				position: relative;
				margin-top: 0;
				margin-bottom: 0;
				padding-top: 10px;
				font-size: 16px;
				border-bottom: none;
				color: #fff;
				background-color: #ff6a00;
				&::after {
					left: 0;
					display: none;
				}
			}
		}
		.hotphone {
			overflow: hidden;
			position: relative;
			width: 240px;
			height: 160px;
			// height: 114px;
			padding: 0 20px 20px 20px;
			border-radius: 4px;
			background-color: #fff;
			text-align: center;
			p {
				position: absolute;
				width: 100%;
				font-size: 24px;
				color: #ff6a00;
				// font-weight: normal;
				top: 65%;
				left: 50%;
				transform: translateX(-50%) translateY(-50%);
			}
		}
		.relationme {
			overflow: hidden;
			position: relative;
			width: 240px;
			height: 160px;
			padding: 0 20px 20px;
			background: #ffffff;
			text-align: center;
			button {
				position: absolute;
				width: 120px;
				height: 32px;
				margin-top: 16px;
				font-size: 16px;
				line-height: 20px;
				border-radius: 999px;
				border: 0;
				background-color: #ff6a00;
				color: #fff;
				top: 55%;
				left: 50%;
				transform: translateX(-50%) translateY(-50%);
			}
		}
	}
}
.cityModal {
	.inputBox {
		display: flex;
	}
	/deep/ .ant-input-affix-wrapper {
		flex: 1;
		margin-right: 30px;
		.ant-input {
			&:hover {
				border-color: #ff6a00;
			}
			&:focus {
				border-color: #ff6a00;
				box-shadow: none;
			}
		}
	}
	.ant-btn {
		&:hover {
			border-color: #ff6a00;
			color: #ff6a00;
		}
		&:active {
			border-color: #ee3f00;
			color: #ee3f00;
		}
		&:focus {
			border-color: #ff6a00;
			color: #ff6a00;
		}
	}
	button {
		width: 60px;
		height: 32px;
	}
	.firstList {
		display: flex;
		justify-content: start;
		margin: 30px 0;
		li {
			width: 16.6%;
			text-align: center;
			div {
				width: 60%;
				padding-bottom: 5px;
				cursor: pointer;
			}
			.active {
				color: #ff6a00;
				// position: relative;
				// &::after {
				//   content:'';
				//   display: block;
				//   position: absolute;
				//   height: 2px;
				//   width: 50px;
				//   bottom: 0;
				//   left: 0;
				//   background-color: #ff6a00;
				// }
				border-bottom: 2px solid #ff6a00;
			}
		}
	}
	.currentCity {
		display: flex;
		flex-wrap: wrap;
		li {
			width: 16.6%;
			margin-bottom: 20px;
			text-align: center;
			cursor: pointer;
			div {
				width: 60%;
			}
		}
	}
}
</style>