mz666
/
bocai_supplyChain_uni
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
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.
master
cyl/v3
cyl/master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '571e25195d'
${ noResults }
bocai_supplyChain_uni/components/chatEvent/job.vue

447 lines
11 KiB
Vue
Raw Normal View History Unescape Escape

初始化项目
8 months ago
<template>
<view class="g-components-chat-job"
>
<view :class="sanimate ? 'start_animate' : 'h420'">
<view class="h_def_min"
:class="'h_' + propsItem.isToggle + '_' + alljob.length"
v-if="alljob.length < 5"
>
<view class="g_pl_0 g_pr_0">
<view class="g_pt_12 g_pb_12 item" style="border-bottom: 1px solid #f3f3f3"
v-for="(jtem, jndex) in alljob" :key="jndex"
@click="goDetail(jtem)"
>
<view class="m-top g_flex_row_between">
<view class="g_flex_none g_mr_8 g_w_48 g_h_48 g_flex_c g_position_rela"
style="overflow: hidden">
<image
:src="jtem.logo ? jtem.logo : 'https://matripe.oss-cn-beijing.aliyuncs.com/default.png'"
class="g_w_48" mode="widthFix"></image>
</view>
<view class="g_flex_1 g_flex_column_between">
<view class="g_flex_1 g_flex_row_between">
<view class="g_flex_1 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: 350rpx">{{ jtem.jobName }}</view>
</view>
<view class="g_flex_none g_ml_16 g_flex_column_start g_fs_16 g_c_f40 g_fw_600">
<rich-text :nodes="jtem.cus_price" v-if="jtem.cus_price != '月薪'"></rich-text>
<view v-else>{{ jtem.monthlyPay }}</view>
</view>
</view>
<view class="g_flex_none g_flex_row_between">
<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">
{{ jtem.district }}
</view>
{{ jtem.age }}
</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">
<view class="collect g_flex_row_center" :class="jtem.collected == 0 ? '' : 'collectred'"
style="width: 52px" hover-stop-propagation>
<view class="g_flex_column_center g_h_22">
<icon class="iconfont icon-shoucang icon 0" style="color: #888"
v-if="jtem.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_22">
<text class="f10" :class="jtem.collected == 0 ? 'g_c_8' : 'g_c_f40'"
style="margin-left: 2px;height: 22px;line-height: 22px;">
{{ jtem.collected == 0 ? "收藏" : "已收藏" }}
</text>
</view>
</view>
</view>
<view class="g_flex_1 g_flex_row_between">
<view class="g_flex_1 g_flex_column_center">
<view class="g_flex_row_start_none">
<view class="label_btn" v-for="(itm, inx) in jtem.jobSpecialLabelNameArray" :key="inx">{{ itm }}</view>
</view>
</view>
<view class="g_flex_none g_flex_column_center g_fs_13" style="color: rgba(0, 0, 0, 0.45);">
<!-- 报名{{ jtem.id % 8 == 0 ? "200+" : (jtem.id % 8) * 100 + "+" }} -->
{{jtem._time}}
</view>
</view>
</view>
</view>
</view>
</view>
<view class="h_def_max"
:class="'h_' + propsItem.isToggle + '_' + alljob.length"
v-if="alljob.length >= 5"
>
<view class="g_pl_0 g_pr_0">
<view class="g_pt_12 g_pb_12 item" style="border-bottom: 1px solid #f3f3f3"
v-for="(jtem, jndex) in alljob" :key="jndex"
@click="goDetail(jtem)"
>
<view class="m-top g_flex_row_between">
<view class="g_flex_none g_mr_8 g_w_48 g_h_48 g_flex_c g_position_rela"
style="overflow: hidden">
<image
:src="jtem.logo ? jtem.logo : 'https://matripe.oss-cn-beijing.aliyuncs.com/default.png'"
class="g_w_48" mode="widthFix"></image>
</view>
<view class="g_flex_1 g_flex_column_between">
<view class="g_flex_1 g_flex_row_between">
<view class="g_flex_1 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: 350rpx">{{ jtem.jobName }}</view>
</view>
<view class="g_flex_none g_ml_16 g_flex_column_start g_fs_16 g_c_f40 g_fw_600">
<rich-text :nodes="jtem.cus_price" v-if="jtem.cus_price != '月薪'"></rich-text>
<view v-else>{{ jtem.monthlyPay }}</view>
</view>
</view>
<view class="g_flex_none g_flex_row_between">
<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">
{{ jtem.district }}
</view>
{{ jtem.age }}
</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">
<view class="collect g_flex_row_center" :class="jtem.collected == 0 ? '' : 'collectred'"
style="width: 52px" hover-stop-propagation>
<view class="g_flex_column_center g_h_22">
<icon class="iconfont icon-shoucang icon 0" style="color: #888"
v-if="jtem.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_22">
<text class="f10" :class="jtem.collected == 0 ? 'g_c_8' : 'g_c_f40'"
style="margin-left: 2px;height: 22px;line-height: 22px;">
{{ jtem.collected == 0 ? "收藏" : "已收藏" }}
</text>
</view>
</view>
</view>
<view class="g_flex_1 g_flex_row_between">
<view class="g_flex_1 g_flex_column_center">
<view class="g_flex_row_start_none">
<view class="label_btn" v-for="(itm, inx) in jtem.jobSpecialLabelNameArray" :key="inx">{{ itm }}</view>
</view>
</view>
<view class="g_flex_none g_flex_column_center g_fs_13" style="color: rgba(0, 0, 0, 0.45);">
<!-- 报名{{ jtem.id % 8 == 0 ? "200+" : (jtem.id % 8) * 100 + "+" }} -->
{{jtem._time}}
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view>
<view class="g_pt_12 g_pb_0 g_flex_row_center" @click="handleUpdateToggle(cusItem)"
v-if="alljob.length > 4"
>
<u-icon :name="propsItem.isToggle ? 'arrow-up' : 'arrow-down'"></u-icon>
</view>
<view class="g_pt_12 g_pb_12" v-else></view>
</view>
</view>
</template>
<script>
export default{
data(){
return {
alljob:[],
sanimate:false,
propsItem:{}
}
},
props:{
cusAllJob: {
type: Array,
default: () => {
return [];
},
},
cusItem:{
type: Object,
default: () => {
return {};
},
}
},
watch:{
propsItem(val){
if(val && val.length > 4){
this.propsItem.isToggle = true
}else{
this.propsItem.isToggle = false
}
}
},
created() {
this.alljob = this.cusAllJob;
this.propsItem = this.cusItem;
},
methods:{
handleUpdateToggle() {
let that = this;
if(that.alljob && that.alljob.length > 4){
that.sanimate = true;
that.$forceUpdate();
that.propsItem.isToggle = !that.propsItem.isToggle;
that.$emit('exportToggle')
}
},
goDetail($item){
let that = this;
console.log("前往详情页", $item);
if (uni.getStorageSync("apply-token")) {
that.isLogin = true;
} else {
that.isLogin = false;
}
if (that.isLogin) {
uni.navigateTo({
url: "/root/detail/work?id=" + $item.id,
});
} else {
uni.showModal({
title: "登录提示",
content: "该页面需要登录才能查看,是否登录",
success(res) {
if (res.confirm) {
uni.navigateTo({
url: "/pages/login/index",
});
} else {
}
},
});
}
}
}
}
</script>
<style lang="less">
.g-components-chat-job{
.label_btn {
display: inline-block;
height: 21px;
box-sizing: border-box;
font-size: 12px;
font-weight: 400;
color: #666;
background: #f1f1f1;
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: 22px;
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: 40px;
background-color: #ff4400;
position: absolute;
right: 0;
top: 4px;
border-radius: 2px 0 0 2px;
color: #fff;
font-size: 12px;
zoom: 0.85;
padding: 2px 0px;
text-align: center;
}
}
.h_def_min{
max-height: 420px;
overflow: hidden;
}
.h_def_max{
height: 420px;
overflow: hidden;
}
.h420{
max-height: 420px;
}
.start_animate{
.max-height{
max-height:auto;
}
.h_false_5{
animation-name: heightFalse5;
animation-duration: 0.5s;
animation-fill-mode: forwards;
overflow: hidden;
}
.h_true_5{
animation-name: heightTrue5;
animation-duration: 0.5s;
animation-fill-mode: forwards;
overflow: hidden;
}
.h_false_6{
animation-name: heightFalse6;
animation-duration: 0.5s;
animation-fill-mode: forwards;
overflow: hidden;
}
.h_true_6{
animation-name: heightTrue6;
animation-duration: 0.5s;
animation-fill-mode: forwards;
overflow: hidden;
}
.h_false_7{
animation-name: heightFalse7;
animation-duration: 0.5s;
animation-fill-mode: forwards;
overflow: hidden;
}
.h_true_7{
animation-name: heightTrue7;
animation-duration: 0.5s;
animation-fill-mode: forwards;
overflow: hidden;
}
.h_false_8{
animation-name: heightFalse8;
animation-duration: 0.5s;
animation-fill-mode: forwards;
overflow: hidden;
}
.h_true_8{
animation-name: heightTrue8;
animation-duration: 0.5s;
animation-fill-mode: forwards;
overflow: hidden;
}
}
@keyframes heightTrue5 {
0% {
height: 420px;
}
100% {
height: 525px;
}
}
@keyframes heightFalse5 {
0% {
height: 525px;
}
100% {
height: 420px;
}
}
@keyframes heightTrue6 {
0% {
height: 420px;
}
100% {
height: 630px;
}
}
@keyframes heightFalse6 {
0% {
height: 630px;
}
100% {
height: 420px;
}
}
@keyframes heightTrue7 {
0% {
height: 420px;
}
100% {
height: 735px;
}
}
@keyframes heightFalse7 {
0% {
height: 735px;
}
100% {
height: 420px;
}
}
@keyframes heightTrue8 {
0% {
height: 420px;
}
100% {
height: 840px;
}
}
@keyframes heightFalse8 {
0% {
height: 840px;
}
100% {
height: 420px;
}
}
</style>