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

<template>
    <view class="body" @click="goInfo(companyitem.id)">
        <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.jobCompanyName }}
		</view> -->
        <view style="width: 100%;height: 1rpx;background-color: #999;margin: 0 auto;opacity: .5;"></view>
        <view class="timeAddress" style="position: relative;">
            <!-- <view v-if="companyitem.missionCompanyName">
				{{ companyitem.missionCompanyName }}
			</view> -->
            <!-- <view>
				<image src="../../static/img/city.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
				{{ companyitem.jobCompanyName }}
			</view> -->
            <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.jobCompanyName }}</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>{{distance(companyitem)}}</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';
    import {
        addZeroPrefix,
        getDistanceFromLatLonInKm
    } from '@/untils/tools.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
            },
            position: Object,
        },
        data() {
            return {
                ...dictionary,
                string: "<div style='overflow: hidden;white-space: nowrap;text-overflow: ellipsis;'>" + this.companyitem
                    .jobName +
                    "</div>"
            };
        },
        computed: {
            skillNames() {
                if (this.companyitem.skillNames) {
                    return this.companyitem.skillNames.split(',')
                } else {
                    return []
                }
            }
        },
        methods: {
            distance(item) {
                const {
                    lon,
                    lat
                } = item
                if (this.position && lon > 0) {
                    const {
                        longitude,
                        latitude
                    } = this.position
                    const {
                        m,
                        km
                    } = getDistanceFromLatLonInKm(lat, lon, latitude, longitude)
                    return m > 1000 ? `${km.toFixed(2)}km` : `${m.toFixed(2)}m`
                }
                return '--km'
            },
            goComment: function(no) {
                uni.navigateTo({
                    url: `../../pageMy/mycomment/mycomment?missionNo=${encodeURIComponent(no)}`
                })
            },
            goInfo: function(no) {
                console.log('11111')
                const isCan = this.noApply === false ? '0' : '1'
                uni.navigateTo({
                    url: `/pages/projectInfo/workInfo?workId=${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>