recruitment-wechat-uniapp-241012/components/list/workList/workItem.vue

<template>
	<view class="work-item"
	@click="$emit('click')">
		<view class="top">
			<view class="title">
				{{ item.title }}
			</view>
			<view class="price"
			v-if="item.salaryLow >= 1000">
				<text>
					{{ (item.salaryLow / 1000).toFixed(0) }}
				</text>
				<text
				v-if="item.salaryUp">
					-{{ (item.salaryUp / 1000).toFixed(0) }}
				</text>
				K
			</view>
			<view class="price" v-else>
				<text>{{ item.salaryLow }}</text>
				<text
				v-if="item.salaryUp">-{{ item.salaryUp }}</text>
			</view>
		</view>
		<view class="tag-list">
			<view 
			v-for="(t, i) in lableText"
			:key="i">
				{{ t }}
			</view>
		</view>
		<view class="bottom">
			<view class="address">
				<!-- <text>2.5km | 楚河汉区</text> -->
				{{ item.workAddress }}
			</view>
			<view class="time">
				<!-- 09月23日  16：20 -->
				{{ $dayjs(item.createTime).format('YYYY-MM-DD') }}
			</view>
			<view class="phone"
			@click.stop="callPhone">
				<image src="/static/image/home/phone.png" mode=""></image>
				联系老板
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props : {
			item : {
				default : {}
			}
		},
		computed : {
			lableText(){
				let arr = 
				this.item.tab ?
				this.item.tab.split('、')
				: []
				
				if(this.item.workAge){
					arr.unshift(this.item.workAge)
				}
				if(this.item.qulification){
					arr.unshift(this.item.qulification)
				}
				
				return arr
			},
		},
		data() {
			return {
				
			}
		},
		methods: {
			callPhone(){
				uni.makePhoneCall({
					phoneNumber: this.item.phone,
					success() {
						console.log('安卓拨打成功');
					},
					fail() {
						console.log('安卓拨打失败');
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.work-item{
	background-color: #fff;
	padding: 20rpx;
	border-radius: 20rpx;
	.top{
		display: flex;
		justify-content: space-between;
		font-weight: 900;
		.title{
		}
		.price{
			color: $uni-color;
		}
	}
	.bottom{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		gap: 16rpx;
		.time{
			color: #999999;
			flex-shrink: 0;
		}
		.phone{
			background-color: rgba($uni-color, 0.2);
			color: $uni-color;
			padding: 8rpx 16rpx;
			border-radius: 10rpx;
			flex-shrink: 0;
			image{
				width: 20rpx;
				height: 20rpx;
			}
		}
	}
}
</style>