apply-assistant-v3/components/panel/record.vue

<template>
	<view class="g-components-panel-record">
		<view class="ui-list ui-list-text g_mb_10 bgf" style="border-top: 0">
			<block v-for="(group, key) in item" :key="key" class="item-box">
				<view v-if="group" class="item-group" style="padding-top: 0; padding-bottom: 0; padding-right: 32rpx; position: relative; margin-left: 20px">
					<view class="titleMain">
						<view v-if="dateUtil.spliceStr(key) == '1'" class="des" style="position: relative"> <i class="iconfont icon-shenhezhong"></i>报名审核中 </view>
						<view v-if="dateUtil.spliceStr(key) == '2'" class="des" style="position: relative"> <i class="iconfont icon-baomingchenggong"></i>报名成功 </view>
						<view v-if="dateUtil.spliceStr(key) == '3'" class="des" style="position: relative"> <i class="iconfont icon-mianshitongguo"></i>待入职 </view>
						<view v-if="dateUtil.spliceStr(key) == '4'" class="des" style="position: relative"> <i class="iconfont icon-ruzhichenggong"></i>在职中 </view>
						<view v-if="dateUtil.spliceStr(key) == '5'" class="des" style="position: relative"> <i class="iconfont icon-yilizhi"></i>已离职 </view>
						<view v-if="dateUtil.spliceStr(key) == '6'" class="des" style="position: relative"> <i class="iconfont icon-baomingchenggong"></i>已完成 </view>
						<view v-if="dateUtil.spliceStr(key) == '9'" class="des" style="position: relative"> <i class="iconfont icon-yuyuelizhi"></i>约离职 </view>
						<view v-if="dateUtil.spliceStr(key) == '11'" class="des" style="position: relative"> <i class="iconfont icon-wei"></i>报名失败 </view>
						<view v-if="dateUtil.spliceStr(key) == '12'" class="des" style="position: relative"> <i class="iconfont icon-yijiedao"></i>已接到 </view>
						<view v-if="dateUtil.spliceStr(key) == '13'" class="des" style="position: relative"> <i class="iconfont icon-wei"></i>未接到 </view>
						<view v-if="dateUtil.spliceStr(key) == '14'" class="des" style="position: relative"> <i class="iconfont icon-wei"></i>面试未通过 </view>
						<view v-if="dateUtil.spliceStr(key) == '15'" class="des" style="position: relative"> <i class="iconfont icon-wei"></i>未入职 </view>
					</view>
					<view style="position: relative" v-for="(itm, inx) in group" class="ui-step-one" :key="inx">
						<view class="cb-cricle"></view>
						<view
							class="ui-list-info"
							:style="{
								'padding-bottom': itm.desp == '' ? '18px' : '24px',
							}"
						>
							<view class="g_fs_12 g_c_3 g_flex_row_start" style="white-space: pre-line">
								<view style="line-height: 20px; color: #666">
									{{ itm.desp }}
								</view>
								<!-- <block v-if="itm.policy">
									<text class="g_ml_8 g_c_main g_flex_column_center" @click="goInfo(itm)">详情</text>
								</block> -->
							</view>
							<view class="g_fs_12 g_c_9" :class="itm.desp == '' ? '' : 'g_mt_4'">
                <!-- {{ itm.creator }}， -->
								<text class>{{ itm.create_time }}</text>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
import timeUtil from "../../utils/dateUtil.js";

export default {
	data() {
		return {
			dateUtil: timeUtil,
		};
	},
	props: {
		item: {
			default() {
				return {};
			},
		},
	},
	created() {
		console.log("created", this.item);
	},
	onShow() {
		console.log("onShow", this.item);
	},
	watch: {
		item(val) {
			console.log("watch", this.item);
		},
	},
	methods: {
		goInfo(e) {
			console.log("跟进记录组件内点击", e);
			this.$emit("clickInfo", {
				info: e.policy,
				time: e.create_time,
				type: "view",
				title: "查看服务费",
			});
		},
	},
};
</script>

<style lang="scss">
.g-components-panel-record {
	.ui-list-info {
		padding-left: 26rpx;
		border-left: 2px solid #ccc;
		padding-bottom: 15px;
		margin-top: -12px;
	}
	.cb-cricle {
		position: absolute;
		left: -4.5px;
		top: 6px;
		background: #ccc;
		width: 10px;
		height: 10px;
		border-radius: 100%;
	}
	.iconfont {
		position: absolute;
		top: 0px;
		left: -10px;
		display: inline-block;
		width: 20px;
		height: 20px;
		font-size: 14px;
		font-weight: normal;
		text-align: center;
		line-height: 20px;
		border-radius: 50%;
		background: #00b666;
		color: #ffffff;
	}
	.des {
		padding-bottom: 20px;
		padding-left: 26rpx;
		border-left: 2px solid #cccccc;
		left: 0px;
		line-height: 22px;
		// height: 50px;
		font-size: 16px;
		font-weight: bold;
		color: #333333;
	}
	.item-group {
		&:last-child {
			.ui-step-one {
				&:last-child {
					.ui-list-info {
						border-left: 2px solid transparent;
					}
				}
			}
		}
	}
}
</style>