apply-assistant-v3/root/components/chatEvent/markdown.vue

<template>
	<view class="g-components-chat-markdown g_fs_17">
		<div class="g-tip-title g_flex_row_between"
				 style="background-color: #d6e9ff;
				 				padding: 10px 10px 22px 10px;
								border-top-left-radius: 8px;
								border-top-right-radius: 8px;
								position: relative;
								bottom: -16px;
								margin-top: -16px;
				"
				@click="handleMore"
		>
			<div class="g_flex_row_between g_w_all">
				<div class="g_flex_1 g_ell_1" style="font-size: 18px;color: #576b95;font-weight: 600;">
					智能匹配方案推荐
				</div>
				<div class="g_flex_none g_ml_12 g_flex_column_center">
					<i class="iconfont icon-gengduo11" style="color: #666666;"></i>
				</div>
			</div>
			<div class="g_mt_2" style="font-size: 14px;color: #888888;">
				更多信息可点击卡片查看详情。
			</div>
		</div>
		<div v-if="cusList && cusList.length > 0">
			<div class="item" v-for="(item,index) in cusList" :key="index">
				<view class="itema g_position_rela g_bg_f" 
						  @click="handleCard(item, index)"
							:class="isbor == 1 ? '' : 'bor8'"
				>
					<view class="g_pt_10 g_pb_10 g_border_e_b issa" style="width: calc(100% - 20px);margin: 0 auto;position: relative;">
						<i class="iconfont icon-yitingzhao" v-if="item.recruitment == 2"
							style="position: absolute; right: 30px; top: 50%; transform: translateY(-50%);color: #ff4d4f;font-size: 80px;z-index: 1;"
						></i>
						<!-- 基础信息 -->
						<view class="m-top g_flex_row_between">
							<view class="g_flex_1 g_flex_column_between">
								<view class="g_flex_1 g_flex_row_between g_lh_1">
									<view class="g_flex_none g_flex_row_start flex_center">
										<img class="g_w_32 g_h_16 g_mr_4" v-if="item.picked == 1" src="https://matripe-cms.oss-cn-beijing.aliyuncs.com/bocaigongyinglian/zhen.svg" alt="" />
										<view class="g_ell_1 g_fs_18 g_fw_600" style="color: rgba(0, 0, 0, 0.85); max-width: 500rpx; line-height: 1.3">{{ item.jobName }}</view>
									</view>
									<view class="g_fs_14 g_flex_row_end" style="color: rgba(0, 0, 0, 0.45)">
										<view>{{ timeShowXXX(item.updateTime) }}</view>
									</view>
								</view>

								<view class="g_flex_none g_flex_row_between g_mt_2">
									<view class="g_flex_none g_flex_row_start g_fs_14" style="color: rgba(0, 0, 0, 0.45)">
										<view class="g_ell_1" style="max-width: 136px; margin-right: 2px"> {{ item.district }}{{ item.district ? "丨" : "" }} </view>
										{{ item.gender + "丨" + item.age }}
									</view>
								</view>
							</view>
						</view>
						<!-- 标签 -->
						<view class="m-bottom g_flex_row_between g_mt_2">
							<view class="g_flex_1 g_flex_row_between flex_center">
								<view class="g_flex_1 g_flex_row_between">
									<view class="g_flex_row_start_none g_flex_1" style="max-width: 75%; flex-wrap: wrap; height: 22px; overflow: hidden"
											  v-if="item.jobSpecialLabelNames"
									>
										<view class="label_btn" v-for="(itm, inx) in item.jobSpecialLabelNames.split(',')" :key="inx">{{ itm }}</view>
										<view class="label_btn" v-if="item.jobSpecialLabelNameArray && item.jobSpecialLabelNameArray.length == 0"> 暂无特色 </view>
									</view>
								</view>
							</view>
						</view>
						<!-- 费用 -->
						<view class="g_mt_2">
							<view class="g_flex_row_between flex_center g_fs_22 g_c_f40 g_fw_600">
								<rich-text class="g_lh_1" :nodes="item.cus_price" v-if="item.cus_price != '月薪'"></rich-text>
								<view v-else>{{ (item.minMonthlyPay / 100) + '-' + (item.maxMonthlyPay / 100) }}<span class="g_fs_14"> 元/月 </span> </view>
								<view class="g_flex_row_start g_fs_12 g_pr_4 g_h_20 g_fw_400" style="background: linear-gradient(138deg, #fde0ad 22%, #fac474); border-radius: 2px; color: #754300; line-height: 20px">
									<view class>
										<image class="g_mr_4" style="width: 20px; height: 20px; display: block" src="https://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/fee.svg" mode="aspecFill" lazy-load="false"></image>
									</view>
									<view class="g_fs_13" v-if="userinfo.agencyStatus == 1">{{ item.fuWuFei || "费用待定" }}</view>
									<view class="biggerSize2 g_fs_13" v-else>{{ "仅代理可见" }}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="g_border_e_t g_p_8 g_flex_row_between flex_center" v-if="userinfo.corpUserFlag && false">
						<view class="g_c_6 g_fs_12 g_pr_4 g_radius_4 g_flex_row_start flex_center" style="background: #f1faff">
							<img class="g_w_33 g_h_22 g_mr_4" src="https://matripe-cms.oss-cn-beijing.aliyuncs.com/bocaigongyinglian/xmf.svg" alt="" />
							{{ item.supplierName || "-" }}
						</view>
					</view>
				</view>
			</div>
		</div>
		<div v-else class="g_p_10 g_bg_f g_flex_c g_mt_12" 
							  style="border-radius: 12px;padding: 24px 10px;"
								:style="{
									'border-radius': isbor == 1 ? '0' : '12px'
								}"
		>
			<u-empty
							text="暂无更多职位"
							:src="cdnBaseImg + 'noData.svg'"
			>
			</u-empty>
		</div>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				cdnBaseImg:this.G.store().cdnBaseImg,
				userinfo: uni.getStorageSync("apply-userinfo"),
			}
		},
		props: {
			cusList: {
				default: () => {
					return [];
				},
			},
			isbor: {
				default: () => {
					return 0;
				},
			},
		},
		onHide(){
			uni.removeStorageSync('test_file')
		},
		onUnload() {
			uni.removeStorageSync('test_file')
		},
		methods:{
			handleMore(){
				this.$emit('exportMore')
			},
			handleCard($item) {
				uni.navigateTo({
					url: "/root/detail/work?id=" + $item.id,
				});
			},
			timeShowXXX(updateTime) {
				const now = Date.now();
				const diff = now - updateTime;

				const seconds = Math.floor(diff / 1000);
				const minutes = Math.floor(seconds / 60);
				const hours = Math.floor(minutes / 60);
				const days = Math.floor(hours / 24);

				if (days < 2) {
					if (hours > 0) {
						return `${hours}小时前`;
					} else if (minutes > 0) {
						return `${minutes}分钟前`;
					} else {
						return `刚刚`;
					}
				} else {
					return `${days}天前`;
				}
			},
		}
	};
</script>

<style lang="scss">
	.g-components-chat-markdown{
		.label_btn {
			display: inline-block;
			height: 20px;
			box-sizing: border-box;
			font-size: 12px;
			font-weight: 400;
			color: #666;
			background: #f1faff;
			border-radius: 2px;
			padding: 0 4px 0px;
			line-height: 20px;
			margin-right: 6px;
			margin-bottom: 0px;
			position: relative;
			top: 1px;
		}
		.item{
			&:nth-child(1){
				.itema{
					border-top-left-radius: 8px;
					border-top-right-radius: 8px;
				}
			}
			&:last-child{
				.issa{
					border-bottom: none;
				}
				.bor8{
					border-bottom-left-radius: 8px !important;
					border-bottom-right-radius: 8px !important;
				}
			}
		}
	}
</style>