menduner-uniapp/pagesA/interview/item.vue

<template>
  <view v-if="list.length > 0" class="ss-m-x-20">
    <view v-for="(item, index) in list" :key="index">
      <view class="sub-li-bottom" @click.stop="toDetail(0, item)">
        <view class="avatarBox">
          <image class="enterAvatar" :src="item.enterprise?.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'"></image>
        </view>
        <view>
          <span class="ss-m-x-20 color-66" style="font-weight: bold;">{{ item.contact?.name || ' -- ' }}</span>
          <span>{{ item.contact?.postNameCn }}</span>
          <span class="divider tag-gap1 ss-m-x-10" v-if="item.contact?.postNameCn && item.invitePhone"> | </span>
          <span class="mr">{{ item.invitePhone }}</span>
        </view>
      </view>
      <!-- 职位信息 -->
      <view class="list-shape">
        <view class="titleBox my-5" @click="toDetail(1, item)">
          <span style="font-size: 16px;font-weight: 700; color: #345768;">{{item.job?.name}}</span>
          <span class="salary-text">{{ item.job?.payFrom }}-{{ item.job?.payTo }}/{{ item.job?.payName }}</span>
        </view>
        <!-- 面试时间、地点 -->
        <view class="color-666 font-size-14 ss-m-t-20" @click="toDetail(1, item)">
          <view>面试时间：{{ timesTampChange(item.time, 'Y-M-D h:m') }}</view>
          <view class="ss-m-t-20">面试地点：{{ item.address }}</view>
        </view>

        <view v-if="item.status === '0'">
					<view class="divided-line"></view>
					<view class="d-flex justify-end">
						<span style="color: #dd524d;text-decoration: underline;" @click="handleAction(item, 'refuse')">拒绝</span>
						<span style="color: #00897B;margin-left: 65rpx;text-decoration: underline;" @click="handleAction(item, 'agree')">同意</span>
					</view>
				</view>
      </view>
    </view>
  </view>

</template>

<script setup>
import { timesTampChange } from '@/utils/date'

const emits = defineEmits(['action'])
const props = defineProps({
  list: { type: Array, default: () => [] }
})

//岗位详情
const toDetail = (isPosition, item) =>{
  const url = isPosition ? `/pagesB/positionDetail/index?id=${item.job?.id}` : `/pagesB/companyDetail/index?id=${item.enterprise?.id}`
  uni.navigateTo({ url })
}

const handleAction = (item, type) => {
  emits('action', item, type)
}

</script>

<style scoped lang="scss">
.noMore{
  margin: 20px 0;
}

.date-time{
  color:#d9d0d2;
  float: right;
}

.divided-line {
  width: 100%;
  height: 1px;
  background-color: #f0f2f7;
  margin: 20px 0;

}
.enterAvatar{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin: auto;
}

.sub-li-bottom {
  margin-top: 10px;
  display: flex;
  // justify-content:space-between;
  align-items: center;
  background: linear-gradient(90deg, #f5fcfc 0, #fcfbfa 100%);
  font-size: 13px;
  padding: 5px 30rpx;
  border-radius: 12px 12px 0 0;
  .avatarBox {
    max-width: 40px;
    max-height: 40px;
  }
}

.salary-text {
	float: right;
	color: #CEC149;
  font-weight: 700;
}
.list-shape {
	padding: 10px 30rpx 10px;
  background-color: #fff;
  border-radius: 0 0 12px 12px;
  .titleBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.tag-gap{
	margin: 10rpx 10rpx 10rpx 0;
}
.tag-gap1{
  margin-bottom: 20px;
}
.divider-mx{
	margin: 0 10rpx;
}
.divider {
	color:#e4d4d2;
}

//公司名称
.cer-end{
  position: absolute;
  top: 85%;
  right: 16%;
}
.cer-text{
  text-decoration: underline;
  margin: 0 5rpx;
}
//一行展示不全...
.dis{
	display: flex;
	align-items: center;
}
.show-more{
	width: 26vw;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* 列表触底暂无更多 */
.noMore{ text-align:center; color:grey; }
.mt { margin-top: 10rpx; }
.mb { margin-bottom: 10rpx; }
.ml { margin-left: 20rpx; }
.mr { margin-right: 20rpx; }
.mr-10{ margin-right: 10rpx; }
.my-5{ margin: 5px 0; }
</style>