jobslink-user-clent/components/companyList/companyList.vue

<template>
	<view class="body" @click="goInfo(companyitem.missionNo)">
		<view class="heads">
			<view class="head_left">
				<rich-text :nodes="string">
				</rich-text>
			</view>

			<view class="head_right">
				{{ companyitem.wage }}{{ wageUnit[companyitem.wageUnitCategory] }}
			</view>
		</view>
		<view class="ask">
			<view class="askList">
				{{ companyitem.tradeNames }}
			</view>
			<view class="askList" v-for="(item, index) in skillNames" :key="index">
				{{ item }}
			</view>
		</view>
		<!-- <view class="allName">
			{{ companyitem.companyName }}
		</view> -->
		<view style="width: 100%;height: 1rpx;background-color: #999;margin: 0 auto;opacity: .5;"></view>
		<view class="timeAddress" style="position: relative;">
			<view style="display: flex;align-items: center;">
				<image src="../../static/img/city.png" style="width: 40rpx;height: 40rpx;margin-right: 10rpx;" mode=""></image>
				<view style="font-size: 26rpx;color:#333;">{{ companyitem.missionCompanyName }}</view>
			</view>
			<!-- <view v-if="near">
				{{ companyitem.distanceStr }}km
			</view>
			<view v-else>
				{{ getCity(companyitem.cityId) }}
			</view> -->
			<view style="display: flex;align-items: center;position:absolute;right:0;">
				<image src="../../static/img/location_new.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
				<view>2.2km</view>
			</view>
		</view>
		<view class="comment" v-if='comment' @tap.stop="goComment(companyitem.missionNo)">
			<view class="comment_content commentimg" v-if='companyitem.scoreAll > 0'>
				<image class="commentimg_image" src="../../static/img/star.full.svg" v-for="index1 in companyitem.scoreAll"
					mode="" :key="index1"></image>
				<image class="commentimg_image" src="../../static/img/star.empty.svg"
					v-for="index2 in (5 - companyitem.scoreAll)" mode="" :key="index2"></image>
			</view>
			<view class="comment_content allName gocomment" v-else>
				评价
			</view>
		</view>
	</view>
</template>

<script>
import {
	toDoller,
	dateFormat
} from "../../untils/format.js";
import dictionary from '@/common/textdata.js';

export default {
	beforeCreate: function () { },
	props: {
		companyitem: {
			type: Object,
			default() { return [] }
		},
		comment: {
			type: Boolean,
			default: false
		},
		noApply: {
			type: Boolean,
			default: true
		},
		near: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			...dictionary,
			string: "<div style='overflow: hidden;white-space: nowrap;text-overflow: ellipsis;'>" + this.companyitem.missionTitle +
				"</div>"
		};
	},
	computed: {
		skillNames() {
			return this.companyitem.skillNames.split(',')
		}
	},
	methods: {
		goComment: function (no) {
			uni.navigateTo({
				url: `../../pageMy/mycomment/mycomment?missionNo=${encodeURIComponent(no)}`
			})
		},
		goInfo: function (no) {
			const isCan = this.noApply === false ? '0' : '1'
			uni.navigateTo({
				url: `/pages/projectInfo/projectInfo?missionNo=${encodeURIComponent(no)}&isCan=${isCan}`
			})
		},
		getCity: function (val) {
			if (val) {
				let areas = this.$store.getters.getAreaParents(val)
				if (areas.length === 3) {
					return areas[0].label + '-' + areas[1].label + '-' + areas[2].label
				}
			}
		},
		toDoller,
		dateFormat
	}
}
</script>

<style>
.commentimg_image {
	width: 40rpx;
	height: 40rpx;
}

.commentimg {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.gocomment {
	font-size: 26rpx !important;
	border-radius: 5rpx;
	border: 1rpx solid #c3c3c3;
	width: 160rpx;
	text-align: center;
	float: right;
	height: 50rpx;
	line-height: 50rpx;
}

.timeAddress {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: PingFangSC-Regular;
	font-size: 24rpx;
	color: #999999;
	margin: 10rpx 0;
	padding: 10rpx 0;
}

.allName {
	font-family: PingFangSC-Regular;
	font-size: 28rpx;
	color: #666666;
}

.askList {
	/* width: 14%; */
	font-family: PingFangSC-Regular;
	font-size: 24rpx;
	color: #666666;
	background-color: #f6f6f6;
	padding: 5rpx 15rpx;
	margin-right: 10rpx;
	margin-bottom: 10rpx;
}

.ask {
	overflow: hidden;
	width: 100%;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin: 20rpx 0;
}

.head_right {
	ont-family: PingFangSC-Medium;
	font-size: 28rpx;
	color: #F46161;
	font-weight: bold;
}

.head_left {
	font-family: PingFangSC-Medium;
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	width: 350rpx;
	overflow: hidden;
	white-space: nowrap;
	/*不换行*/
	text-overflow: ellipsis;
	/*超出部分文字以...显示*/
}

.highlight {
	color: #F46161;
}

.body {
	width: 690rpx;
	margin: 0rpx auto;
	background-color: #fefefe;
	overflow: hidden;
	box-sizing: border-box;
	padding: 20rpx;
	padding-bottom: 0;
	border-radius: 20rpx;
	margin-top: 20rpx;
}

.heads {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
</style>