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.
apply-assistant-v3/components/list/job.vue

612 lines
17 KiB
Vue

<template>
<view class="g-components-yi-list-job g_bg_f_5">
<g-loading paddingBottom="g_pb_120" v-if="loading && speed == -1" />
<!-- 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',
}"
>
<!-- <view class="g_h_all" style="" v-if="!isLogin">
<unloginInfo></unloginInfo>
</view> -->
<g-empty :text="emptyText" :subText="emptySubText" style="margin-top: 30px" />
<view class="g_mt_32" v-if="isShowLoginBtn">
<g-button :btnText="'登录查看'" type="primary" @clickBtn="goLogin" />
</view>
</view>
<view v-if="speed > 0" class="link">
<block class="" v-for="(item, index) in jobArray" :key="index">
<view class="item g_position_rela g_mb_10 g_ml_12 g_mr_12 g_bg_f g_radius_8 g_border_e_b" :class="from == 'share' ? 'g_pr_32' : ''">
<view class="g_p_10" @click="handleCard(item, index)">
<image v-if="item.recruitment == 2 && from != 'mine'" 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_1 g_flex_column_between">
<view class="g_flex_1 g_flex_row_between g_lh_1">
<view class="g_flex_none g_flex_row_start flex_center">
<img class="g_w_32 g_h_16 g_mr_4" v-if="item.picked == 1" src="https://matripe-cms.oss-cn-beijing.aliyuncs.com/bocaigongyinglian/zhen.svg" alt="" />
<view class="g_ell_1 g_fs_18 g_fw_600" style="color: rgba(0, 0, 0, 0.85); max-width: 500rpx; line-height: 1.3">{{ 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>{{ timeShowXXX(item.updateTime) }}</view>
</view>
</view>
<view class="g_flex_none g_flex_row_between g_mt_6">
<view class="g_flex_row_between flex_center g_fs_14 g_flex_1" style="color: rgba(0, 0, 0, 0.45)">
<view class="g_ell_1" style="max-width: 250px">
<view class="" style=""> {{ item.district }}{{ item.district ? "丨" : "" }}{{ (item.gender || "-") + "丨" + item.age }} </view>
</view>
<view class="" hover-class="none" hover-stop-propagation="false">
{{ item.distance && item.storeDistrict ? item.distance : "" }}
</view>
</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 && item.jobSpecialLabelNameArray.length == 0"> 暂无特色 </view>
</view>
</view>
</view>
</view>
<view class="g_mt_6">
<!-- v-if="isLogin" -->
<view class="g_flex_row_between flex_center g_fs_18 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"> 元/月 </span> </view>
<view class="g_flex_row_start g_fs_12 g_pr_4 g_h_20 g_fw_400" style="background: linear-gradient(138deg, #fde0ad 22%, #fac474); border-radius: 2px; color: #754300; line-height: 20px">
<view class>
<image class="g_mr_4" style="width: 20px; height: 20px; display: block" src="https://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/fee.svg" mode="aspecFill" lazy-load="false"></image>
</view>
<view class="g_fs_13">{{ (recordStatus == 3 || recordStatus == 4 || recordStatus == 5) && !isSelf ? "关注查看" : item.policyClassify == 1 ? item.fuWuFei : "总价" }}</view>
</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 class="" @click.stop>
<view class="g_flex_row_between flex_center g_border_e_t g_p_8" v-if="from == 'mine'">
<u-switch v-model="item.recruitmentValue" :showText="true" openText="开" closeText="停" class="" size="44" @change="recruitmentChange($event, item)" activeColor="#07C160"></u-switch>
<view class="g_flex_column_center g_pl_10 g_h_all biggerSize" @click.stop="showConfig(item)">
<i class="iconfont icon-gengduo2 icon g_c_b1" style="font-size: 32rpx"></i>
</view>
</view>
<view class="g_flex_row_between flex_center g_border_e_t g_p_8">
<view class="g_c_6 g_fs_12 g_pr_4 g_radius_4 g_flex_row_start flex_center" style="background: #f1faff">
<img class="g_w_33 g_h_22 g_mr_4" src="https://matripe-cms.oss-cn-beijing.aliyuncs.com/bocaigongyinglian/xmf.svg" alt="" />
{{ item.fullName || item.agencyName || "-" }}
</view>
</view>
</view>
</view>
</block>
<!-- <view class="g_mt_32 g_pb_32 g_c_9 g_pl_12" v-if="isShowLoginBtn && jobArray.length > 0" hover-class="none">
<view class="g_text_c g_c_sub g_mt_24 g_fs_14">
<quickLogin @successLogin="successLogin">登录伯才</quickLogin>
</view>
</view> -->
<view class="g_bg_f_5" style="padding: 16px 0 32px 0" v-if="jobArray && jobArray.length > 0 && !isShowLoginBtn && from != 'collect'">
<u-loadmore :status="status" :loadText="{ loadmore: '加载中', loading: '加载中', nomore: speed + '个职位' }" />
<!-- <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="bottom" z-index="999999" border-radius="12" :closeable="false" :mask-close-able="true" @close="handleClose">
<view class="g_text_c g_bg_f5">
<view class="g_bg_f">
<view class="g_p_16 g_fs_14 g_c_6">职位管理</view>
<view class="g_c_3">
<view class="g_fs_16 g_p_16 g_border_e_t" @click="updateJob"> 编辑 </view>
<view class="g_fs_16 g_p_16 g_border_e_t g_c_fa2b" @click="delJob"> 删除 </view>
</view>
</view>
<view class="g_fs_16 g_p_16 g_mt_10 g_bg_f" @click="handleClose"> 取消 </view>
</view>
</u-popup>
</view>
</template>
<script>
import unloginInfo from "@/components/unloginInfo.vue";
export default {
components: {
unloginInfo,
},
data() {
return {
userinfo: uni.getStorageSync("apply-userinfo"),
themeColor: getApp().globalData.themeColor,
isUseNewJob: getApp().globalData.isUseNewJob,
localBaseImg: this.G.store().localBaseImg,
appid: getApp().globalData.appid,
defaultLogo: "",
cdnBaseImg: this.G.store().cdnBaseImg,
jobArray: [],
isLogin: false,
popApply: {
isShow: false,
},
jid: 0,
appInfo: {},
};
},
// 计算属性
computed: {
status() {
if (this.query.isFinish >= 0 && this.query.isFinish < this.query.size) {
return "nomore";
} else {
return "loading";
}
},
},
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";
},
},
isSelf: {
type: Boolean,
default: () => {
return false;
},
},
isuse: {
type: String,
default: () => {
return "default";
},
},
emptyText: {
type: String,
default: () => {
return "嘿,这里还没有数据呢";
},
},
emptySubText: {
type: String,
default: () => {
return uni.getStorageSync("apply-token") ? "关注发单号,查看发单号职位" : "";
},
},
isShowLoginBtn: {
default: () => {
return false;
},
},
pt: {
default: 0,
},
reload: {
default: 0,
},
isTrigger: {
// 下拉的判断
default: false,
},
isHaveOrder: {
default: () => {
return false;
},
},
active: {
default: () => {
return 0;
},
},
recordStatus: {
default: () => {
return 1;
},
},
bg: {
default: () => {
return "#ededed";
},
},
isShowLoginBtn: {
default: () => {
return false;
},
},
},
watch: {
list: {
handler(val) {
this.jobArray = val;
console.log("this.jobArrayval", this.jobArray);
this.appInfo = uni.getStorageSync("miniApp-info");
if (uni.getStorageSync("apply-token")) {
this.isLogin = true;
} else {
this.isLogin = false;
}
},
deep: true,
immediate: true,
},
reload() {
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;
console.log("this.jobArray", this.jobArray);
},
methods: {
tobeAgencyToast() {
uni.showModal({
title: "",
content: "抱歉,您需先成为伯才代理以获得使用权限。",
confirmColor: "#576b95",
confirmText: "入驻平台",
cancelText: "知道了",
success(res) {
if (res.confirm) {
wx.navigateTo({
url: "/root/other/tobeAgencyChoose",
});
}
},
});
},
handleCard($item) {
console.log("$item", $item);
let that = this;
if (that.from == "record") {
uni.$emit("changeJobInfo", { info: $item });
uni.navigateBack({
delta: 1,
});
return;
} else {
if (that.recordStatus == 1 || that.recordStatus == 2 || that.isSelf) {
uni.navigateTo({
url: "/root/detail/job?id=" + $item.leafCateId + "&from=" + that.from,
});
} else {
uni.showToast({
title: "关注发单号后才可查看详情",
icon: "none",
});
}
// 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;
console.log("that.jid", that.jid);
that.popApply.isShow = true;
});
},
getCode(callback = () => {}) {
uni.login({
success(wxRes) {
callback(wxRes.code);
},
fail(res) {
console.log(res);
},
});
},
handleClose() {
this.popApply.isShow = false;
// 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",
});
});
},
recruitmentChange($e, $item) {
let that = this;
console.log($e);
console.log($item);
this.G.Get(this.api.update_job_recruitment + "/" + $item.id, { recruitment: $e ? 1 : 2 }, (res) => {
console.log("res", res);
// that.$emit("updateList");
});
},
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");
},
delJob() {
let that = this;
this.G.handleConfirm({
content: "是否删除该职位",
success(res) {
if (res.confirm) {
that.G.Post(that.api.job_delJob + "/" + that.jid, {}, (res) => {
console.log(res);
that.$emit("updateList");
that.popApply.isShow = false;
});
}
},
});
},
updateJob() {
let that = this;
uni.navigateTo({
url: `/root/merchantManagement/jobForm?id=${that.jid}`,
});
this.popApply.isShow = false;
},
showConfig(_item) {
console.log(_item);
this.jid = _item.id;
this.popApply.isShow = true;
},
timeShowXXX(updateTime) {
const now = Date.now();
const diff = now - updateTime;
const seconds = Math.floor(diff / 1000);
const minutes = Math.floor(seconds / 60);
const hours = Math.floor(minutes / 60);
const days = Math.floor(hours / 24);
if (days < 2) {
if (hours > 0) {
return `${hours}小时前`;
} else if (minutes > 0) {
return `${minutes}分钟前`;
} else {
return `刚刚`;
}
} else {
return `${days}天前`;
}
},
},
};
</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 {
position: relative;
.biggerSize::after {
content: "";
/* display: inline-block; */
width: 40px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
z-index: 99;
transform: translate(-50%, -50%);
}
}
</style>