bocai_supplyChain_uni/components/list/yiJob.vue

<template>
	<view class="g-components-yi-list-job g_bg_f_5">
		<g-loading paddingBottom="g_pb_120" v-if="loading && speed == -1" />
		<view
			v-if="!loading && speed == 0"
			style="width: calc(100% - 20px); margin: 0 auto"
			class="g_h_all g_flex_column_center"
			:style="{
				'padding-top': pt + 'rpx',
			}"
		>
			<g-empty :text="emptyText" style="margin-top: 30px" />
		</view>
		<view v-if="speed > 0" class="link">
			<view class="">
				<view class="g_p_10 item g_position_rela g_mb_10 g_ml_12 g_mr_12 g_bg_f g_radius_8" :class="from == 'share' ? 'g_pr_32' : ''" style="border-bottom: 1px solid #f3f3f3" v-for="(item, index) in jobArray" :key="index" @click="handleCard(item, index)">
					<image v-if="item.recruitment == 2" src="http://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/tingzhao.svg" class="g_w_82 g_h_65" style="position: absolute; left: 50%; top: 0; transform: translateX(-50%)"> </image>
					<view class="m-top g_flex_row_between">
						<view class="g_flex_none g_mr_8 g_w_53 g_h_53 g_flex_c g_position_rela" style="overflow: hidden" v-if="appid != 'wxb0c590fd696b79be' && !isUseNewJob">
							<image :src="item.logo ? item.logo : defaultLogo" class="g_w_53" mode="widthFix"></image>
							<view class="r-obj" hover-class="none" v-if="item.recommend == 1"> 主推 </view>
						</view>
						<view class="g_flex_1 g_flex_column_between">
							<view class="g_flex_1 g_flex_row_between g_lh_1">
								<view class="g_flex_none g_flex_column_start">
									<view class="g_ell_1 g_fs_18 g_fw_600" style="color: rgba(0, 0, 0, 0.85); max-width: 500rpx">{{ item.jobName }}</view>
								</view>
								<!-- {{item.cus_price}} -->
								<view class="g_fs_14 g_flex_row_end" style="color: rgba(0, 0, 0, 0.45)">
									<view v-if="isuse == 'fujin'">{{ Number(Number(item.distance) / 1000).toFixed(2) + "km" }} </view>
									<view v-if="isuse != 'fujin'">{{ dateUtil.timeShowXXX(item.updateTime) }}</view>
								</view>
							</view>

							<view class="g_flex_none g_flex_row_between g_mt_6">
								<view class="g_flex_none g_flex_row_start g_fs_14" style="color: rgba(0, 0, 0, 0.45)">
									<!-- <view class="g_ell_1" style="max-width: 124px" hover-class="none" hover-stop-propagation="false" v-if="appid != 'wxb0c590fd696b79be' && !isUseNewJob">
										{{ item.district }}
									</view> -->
									<view class="g_ell_1" style="max-width: 124px; margin-right: 2px" hover-class="none" hover-stop-propagation="false"> {{ item.district }}{{ item.district ? "丨" : "" }} </view>
									{{ item.gender + "丨" + item.age }}
								</view>
								<view class="g_flex_none g_flex_column_center b_btn" @click.stop="openApplyPop(item, index)" v-if="false"> 立即报名 </view>
								<!-- <view class="g_flex_row_start g_fs_12 g_pr_4" v-if="from == 'tob'" style="background: linear-gradient(138deg, #fde0ad 22%, #fac474); border-radius: 2px; color: #754300; height: 20px">
									<view class>
										<image class="g_mr_4" style="width: 20px; height: 20px; display: block" src="../../static/image/fee.svg" mode="aspecFill" lazy-load="false"></image>
									</view>
									<view class="g_fs_13 g_flex_column_center">
										{{ item.fuWuFei }}
									</view>
								</view> -->
								<!-- <view v-else-if="appInfo.applyNumDisplay == 1" class="g_flex_none g_flex_column_center g_fs_14" style="color: rgba(0, 0, 0, 0.45)">
									报名{{ item.id % 8 == 0 ? "200+" : (item.id % 8) * 100 + "+" }}
								</view> -->
							</view>
						</view>
					</view>
					<view class="m-bottom g_flex_row_between g_mt_8">
						<view class="g_flex_none g_mr_8 g_w_53" v-if="appid != 'wxb0c590fd696b79be' && !isUseNewJob">
							<view class="collect g_flex_row_center flex_center" @click.stop="handleCollect(item, index)" :class="item.collected == 0 ? '' : 'collectred'" style="width: 52px">
								<view class="g_flex_column_center g_h_20">
									<icon class="iconfont icon-shoucang icon 0" style="color: #888" v-if="item.collected == 0"></icon>
									<icon class="iconfont icon-yishoucang g_c_f40 icon 1" style v-else></icon>
								</view>
								<view class="g_flex_column_center g_h_20">
									<text class="f10" :class="item.collected == 0 ? 'g_c_8' : 'g_c_f40'" style="margin-left: 2px; height: 20px; line-height: 20px">
										{{ item.collected == 0 ? "收藏" : "已收藏" }}
									</text>
								</view>
							</view>
						</view>
						<view class="g_flex_1 g_flex_row_between flex_center">
							<view class="g_flex_1 g_flex_row_between">
								<view class="g_flex_row_start_none g_flex_1" style="max-width: 75%; flex-wrap: wrap; height: 22px; overflow: hidden">
									<view class="label_btn" v-for="(itm, inx) in item.jobSpecialLabelNameArray" :key="inx">{{ itm }}</view>
									<view class="label_btn" v-if="item.jobSpecialLabelNameArray.length == 0" hover-class="none" hover-stop-propagation="false"> 暂无特色 </view>
								</view>
							</view>
						</view>
					</view>
					<view class="g_mt_6" hover-class="none" hover-stop-propagation="false">
						<!-- v-if="isLogin" -->
						<view class="g_flex_column_start g_fs_22 g_c_f40 g_fw_600">
							<rich-text class="g_lh_1" :nodes="item.cus_price" v-if="item.cus_price != '月薪'"></rich-text>
							<view v-else>{{ item.monthlyPay }}<span class="g_fs_14" hover-class="none" hover-stop-propagation="false"> 元/月 </span> </view>
							<!-- <text class="g_fs_14">元/月</text> -->
						</view>
						<!-- <view class="g_flex_column_start g_fs_20 g_c_f40 g_c_9" v-else>
							<text class="g_fs_14">登录后查看</text>
						</view> -->
					</view>
					<view class="checkBox" hover-class="none" v-if="from == 'share'" @click.stop="checkJob(item)">
						<checkbox class="biggerSize" style="transform: scale(0.8, 0.8)" color="g_c_main" :checked="item.checked" :value="item.checked"></checkbox>
					</view>
				</view>
			</view>
			<view class="g_mt_32 g_pb_32 g_c_9 g_pl_12" v-if="isShowLoginBtn" hover-class="none">
				<view class="" hover-class="none" hover-stop-propagation="false"> 未登录时只能使用部分功能，申请加入稻田即可使用更多功能。</view>
				<view class="g_text_c g_c_sub g_mt_24 g_fs_14" hover-class="none" hover-stop-propagation="false">
					<quickLogin @successLogin="successLogin">登录稻田</quickLogin>
				</view>
			</view>

			<view class="g_bg_f_5" v-if="jobArray && jobArray.length > 0 && !isShowLoginBtn && from != 'collect'">
				<g-panel-hr :str="query.isFinish >= 0 && query.isFinish < query.size ? speed + '个职位' : '加载中'" />
			</view>
			<!-- #ifdef H5 -->
			<view style="height: 50px"></view>
			<!-- #endif -->
		</view>

		<u-popup v-model="popApply.isShow" mode="center" z-index="999999" border-radius="12" :closeable="true" :mask-close-able="true" @close="handleClose">
			<view class="">
				<view class="g_text_c g_fs_18 g_fw_600 g_pt_18 g_flex_c" style="position: absolute; top: 0; left: 0; width: 100%">快速报名</view>
				<applyPanel :jid="jid" @exportForm="submitApply" />
			</view>
		</u-popup>
	</view>
</template>

<script>
import applyPanel from "../../pages/home/child/applyRecord.vue";
import quickLogin from "../quickLogin.vue";
var dateUtil = require("../../utils/dateUtil.js");
export default {
	components: {
		applyPanel,
		quickLogin,
	},
	data() {
		return {
			isUseNewJob: getApp().globalData.isUseNewJob,
			localBaseImg: this.G.store().localBaseImg,
			appid: getApp().globalData.appid,
			defaultLogo: "",
			dateUtil,
			cdnBaseImg: this.G.store().cdnBaseImg,
			jobArray: [],
			isLogin: false,
			popApply: {
				isShow: false,
			},
			jid: 0,
			appInfo: {},
		};
	},
	props: {
		list: {
			type: Array,
			default: () => {
				return [];
			},
		},
		loading: {
			type: Boolean,
			default: () => {
				return true;
			},
		},
		speed: {
			type: Number,
			default: () => {
				return -1;
			},
		},
		query: {
			type: Object,
			default: () => {
				return {
					page: 1,
					size: 10,
					list: [],
					isFinish: -1,
				};
			},
		},
		from: {
			type: String,
			default: () => {
				return "default";
			},
		},
		isuse: {
			type: String,
			default: () => {
				return "default";
			},
		},
		emptyText: {
			type: String,
			default: () => {
				return "嘿，这里还没有数据呢";
			},
		},
		isShowLoginBtn: {
			default: () => {
				return false;
			},
		},
		pt: {
			default: 0,
		},
	},
	watch: {
		list(val) {
			this.jobArray = val;
			this.appInfo = uni.getStorageSync("miniApp-info");
			this.$forceUpdate();
			if (uni.getStorageSync("apply-token")) {
				this.isLogin = true;
			} else {
				this.isLogin = false;
			}
		},
	},
	beforeCreate() {
		setTimeout(() => {}, 1000);
	},
	created() {
		let that = this;
		that.defaultLogo = uni.getStorageSync("miniApp-info").logo;
		this.jobArray = this.list;
		if (uni.getStorageSync("apply-token")) {
			that.isLogin = true;
		} else {
			that.isLogin = false;
		}
	},
	methods: {
		handleCard($item) {
			console.log("$item", $item);
			let that = this;
			if (that.from == "record") {
				uni.$emit("changeJobInfo", { info: $item });
				uni.navigateBack({
					delta: 1,
				});
				return;
			} else {
				this.$emit("clickCard", $item);
			}
		},
		goLogin() {
			uni.reLaunch({
				url: "/pages/login/index",
			});
		},
		openApplyPop($item) {
			let that = this;
			this.getCode((res) => {
				uni.setStorageSync("apply-code", res);
				that.jid = $item.id;
				that.popApply.isShow = true;
			});
		},
		getCode(callback = () => {}) {
			uni.login({
				success(wxRes) {
					callback(wxRes.code);
				},
				fail(res) {
					console.log(res);
				},
			});
		},
		handleClose() {
			// uni.showTabBar();
		},
		checkJob(_item) {
			this.$emit("checkJob", _item);
		},
		submitApply(e) {
			let that = this;
			let params = {
				userName: e.name,
				tel: e.tel,
				jobId: that.jid,
			};
			console.log('uni.getStorageSync("AGENCY_ID")', uni.getStorageSync("AGENCY_ID"));
			console.log('uni.getStorageSync("userinfo")', uni.getStorageSync("apply-userinfo"));
			return;
			if (uni.getStorageSync("AGENCY_ID") == uni.getStorageSync("apply-userinfo").user.agencyId) {
				params.agencyUserId = uni.getStorageSync("apply-userinfo").user.id;
			}

			that.G.Post(that.api.yi_job_recordJob, params, (res) => {
				that.popApply.isShow = false;
				// uni.showTabBar();
				uni.showToast({
					title: "报名成功",
					icon: "success",
				});
			});
		},
		handleCollect($item) {
			let that = this;
			if (this.isLogin) {
				// uni.navigateTo({
				// 	url: "/root/detail/work?id=" + $item.id,
				// });
				$item.collected = !$item.collected;
				that.G.Get(that.api.yi_job_collect + "/" + $item.id, {}, (res) => {
					if ($item.collected) {
						uni.showToast({
							icon: "none",
							title: "收藏成功",
						});
					} else {
						uni.showToast({
							icon: "none",
							title: "取消收藏",
						});
					}
				});
			} else {
				uni.showModal({
					title: "登录提示",
					content: "收藏功能需要登录才能使用,是否登录",
					success(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: "/pages/login/index",
							});
						} else {
						}
					},
				});
			}
		},
		successLogin(e) {
			this.$emit("successLogin");
		},
	},
};
</script>

<style lang="scss">
.g-components-yi-list-job {
	height: 100%;
	.label_btn {
		display: inline-block;
		height: 20px;
		box-sizing: border-box;
		font-size: 12px;
		font-weight: 400;
		color: #666;
		background: #f1faff;
		border-radius: 2px;
		padding: 0 4px 0px;
		line-height: 20px;
		margin-right: 6px;
		margin-bottom: 0px;
		position: relative;
		top: 1px;
	}
	.b_btn {
		width: 72px;
		height: 24px;
		background-color: #ff4400;
		font-size: 14px;
		border-radius: 99px;
		line-height: 24px;
		color: #fff;
		text-align: center;
	}
	.collect {
		border: 1px solid rgb(236, 235, 235);
		border-radius: 2px;
		height: 20px;
		box-sizing: border-box;
		text-align: center;
		margin: 0;
		padding: 0px;
		background-color: #fff;
		line-height: 20px;
		width: 52px;
		// margin-top: 2px;
		.icon {
			font-size: 10px;
			// height: 22px;
			line-height: 38px;
		}
		.f10 {
			font-size: 10px !important;
		}
		.lh12 {
			line-height: 12px;
		}
	}
	.collectred {
		background: #ffeee9;
		color: #ff4400;
		border: 1rpx solid #ff4400;
	}
	.r-obj {
		width: 28px;
		background-color: #ff4400;
		position: absolute;
		right: 0;
		top: 0px;
		border-radius: 0;
		color: #fff;
		font-size: 12px;
		zoom: 0.85;
		padding: 0px;
		text-align: center;
	}
}
.u-switch-text .u-switch {
	border: 0;
}
.checkBox {
	position: absolute;
	right: -4px;
	top: 20px;
	height: 100px;
}
.biggerSize::after {
	content: "";
	/* display: inline-block; */
	width: 40px;
	height: 100px;
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 99;
	transform: translate(-50%, -50%);
}
</style>