hire-wx-houxuanren/pagesD/order-info.vue

<template>
	<view class="order-info">
		<view class="jieshou-info-bg"></view>
		<view class="jieshou-info-header u-flex-col u-row-center">
			<view class="header-title u-flex" @click="showjinzhan = true" v-if="detail.stage == 'recommend'">
				<text class="text1" v-if="detail.recommend_status == 'pending'">待反馈</text>
				<text class="text1" v-if="detail.recommend_status == 'viewed'">待反馈</text>
				<text class="text1" v-if="detail.recommend_status == 'overdue'">反馈逾期</text>
				<text class="text1" v-if="detail.recommend_status == 'passed'">评估通过</text>
				<text class="text1" v-if="detail.recommend_status == 'interviewed'">发起面试</text>
				<text class="text1" v-if="detail.recommend_status == 'undetermined'">简历待定</text>
				<text class="text1" v-if="detail.recommend_status == 'failed'">已淘汰</text>
				<u-icon name="arrow-up-fill" style="transform: rotate(90deg) !important;" color="#fff" size="12"></u-icon>
			</view>
			<view class="header-title u-flex" @click="showjinzhan = true" v-if="detail.stage == 'failed'">
				<text class="text1" v-if="detail.failed_type == 'un_refused'">未淘汰</text>
				<text class="text1" v-if="detail.failed_type == 'assess_failed'">评估未通过</text>
				<text class="text1" v-if="detail.failed_type == 'interview_failed'">面试未通过</text>
				<text class="text1" v-if="detail.failed_type == 'give_up_interview'">放弃面试</text>
				<text class="text1" v-if="detail.failed_type == 'refuse_offer'">拒绝offer</text>
				<text class="text1" v-if="detail.failed_type == 'no_over'">未过保</text>
				<text class="text1" v-if="detail.failed_type == 'offer_failed'">offer阶段淘汰</text>
				<text class="text1" v-if="detail.failed_type == 'entry_failed'">入职阶段淘汰</text>
				<text class="text1" v-if="detail.failed_type == 'over_protected_failed'">过保阶段淘汰</text>
				<text class="text1" v-if="detail.failed_type == 'reject_interview'">拒绝面试</text>
				<u-icon name="arrow-up-fill" style="transform: rotate(90deg);" color="#fff" size="24"></u-icon>
				<text class="text2" v-if="detail.failed_type != 'un_refused'">已淘汰</text>
			</view>
			<view class="header-title u-flex" @click="showjinzhan = true" v-if="detail.stage == 'interview'">
				<text class="text1" v-if="detail.interview_status == 'pending'">未到达该阶段</text>
				<text class="text1" v-if="detail.interview_status == 'uninterviewed'">待面试</text>
				<text class="text1" v-if="detail.interview_status == 'interviewed'">已面试</text>
				<text class="text1" v-if="detail.interview_status == 'passed'">面试通过</text>
				<text class="text1" v-if="detail.interview_status == 'failed'">面试未通过</text>
				<text class="text1" v-if="detail.interview_status == 'accepted'">已接受面试</text>
				<text class="text1" v-if="detail.interview_status == 'refused'">已拒绝</text>
				<text class="text1" v-if="detail.interview_status == 'hire'">拟录用</text>
				<text class="text1" v-if="detail.interview_status == 'interview_finished'">面试已通过</text>
				<u-icon name="arrow-up-fill" style="transform: rotate(90deg);" color="#fff" size="24"></u-icon>
				<text class="text2" v-if="detail.interview_status == 'failed'">已淘汰</text>
			</view>
			<view class="header-title u-flex" @click="showjinzhan = true" v-if="detail.stage == 'offer'">
				<text class="text1" v-if="detail.offer_status == 'pending'">还未到达该阶段</text>
				<text class="text1" v-if="detail.offer_status == 'unissued'">待发放offer</text>
				<text class="text1" v-if="detail.offer_status == 'issued'">已发放offer</text>
				<text class="text1" v-if="detail.offer_status == 'accepted'">已接受</text>
				<text class="text1" v-if="detail.offer_status == 'rejected'">已拒绝</text>
				<text class="text1" v-if="detail.offer_status == 'failed'">已淘汰</text>
				<u-icon name="arrow-up-fill" style="transform: rotate(90deg);" color="#fff" size="24"></u-icon>
				<text class="text2" v-if="detail.offer_status == 'rejected'">已淘汰</text>
				<text class="dakuan-icon" v-if="detail.offer_status == 'accepted'">待打款</text>
			</view>
			<view class="header-title u-flex" @click="showjinzhan = true" v-if="detail.stage == 'entry'">
				<text class="text1" v-if="detail.entry_status == 'pending'">还未到达该阶段</text>
				<text class="text1" v-if="detail.entry_status == 'unentry'">未入职</text>
				<text class="text1" v-if="detail.entry_status == 'progressing'">未入职</text>
				<text class="text1" v-if="detail.entry_status == 'entry'">已入职</text>
				<text class="text1" v-if="detail.entry_status == 'failed'">已淘汰</text>
				<u-icon name="arrow-up-fill" style="transform: rotate(90deg);" color="#fff" size="24"></u-icon>
			</view>
			<view class="header-title u-flex" @click="showjinzhan = true" v-if="detail.stage == 'over_protected'">
				<text class="text1" v-if="detail.over_protected_status == 'pending'">还未到达该阶段</text>
				<text class="text1" v-if="detail.over_protected_status == 'progressing'">过保中</text>
				<text class="text1" v-if="detail.over_protected_status == 'passed'">已过保</text>
				<text class="text1" v-if="detail.over_protected_status == 'failed'">已淘汰</text>
				<u-icon name="arrow-up-fill" style="transform: rotate(90deg);" color="#fff" size="24"></u-icon>
				<text class="text2" v-if="detail.over_protected_status == 'failed'">已淘汰</text>
				<text class="dakuan-icon" v-if="detail.hr_pay_status == 'unpaid'">未支付</text>
				<text class="dakuan-icon" v-if="detail.hr_pay_status == 'paying'">支付中</text>
				<text class="dakuan-icon" v-if="detail.hr_pay_status == 'part'">部分支付</text>
				<text class="dakuan-icon" v-if="detail.hr_pay_status == 'paid'">已支付</text>
				<text class="dakuan-icon" v-if="detail.hr_pay_status == 'refunding'">退款中</text>
				<text class="dakuan-icon" v-if="detail.hr_pay_status == 'refunded'">已退款</text>
				<text class="dakuan-icon" v-if="detail.hr_pay_status == 'overdue'">已逾期</text>
			</view>
			<!-- status.状态:unpaid=未支付,paying=支付中,paid=已支付,refunding=退款中,refunded=已退款,overdue.已逾期, discount_amount.折扣金额 -->
			<view class="order-time">
				{{detail.updatetime || ''}}
			</view>
			<view class="header-jindu u-flex u-row-between">
				<view class="jindu-xian u-flex">
					<text v-for="(item,index) in jindu" :key="index"
						style="width: 25%;height: 100%;background-color: #fff;"></text>
				</view>
				<view class="jindu-item u-flex u-row-center" v-for="(item,index) in jindulist" :key="index"
					:class="{'jindu-item1' : index <= jindu}">
					<text></text>
				</view>
			</view>
			<view class="jindu-text u-flex u-row-between">
				<text :class="{text:jindu >= index}" v-for="(item,index) in jindulist" :key="index">{{item.name}}</text>
			</view>
		</view>
		<view class="mianshi-box" v-if="detail.stage == 'failed' && ['assess_failed'].includes(detail.failed_type)">
			<view class="mianshi-header u-flex u-row-between">
				<text class="text1">淘汰原因</text>
			</view>
			<view class="mianshi-item u-flex u-row-between" style="padding: 32rpx 0;">
				<text>{{detail.refused_reason}}</text>
			</view>
		</view>
		<view class="yiguobao-box u-flex-col u-col-center u-row-center"
			v-if="detail.stage == 'over_protected' && detail.over_protected_status == 'passed'">
			<image src="static/yiguobao.png" mode=""></image>
			<text>恭喜！您已过保</text>
		</view>
		<view class="mianshi-box" v-if="['issued','accepted','rejected'].includes(detail.offer_status) || detail.offer">
			<view class="mianshi-header u-flex u-row-between">
				<text class="text1">offer信息</text>
				<view v-if="detail.offer_status == 'issued'" class="mianshi-right u-flex u-row-center"
					style="background-color: #FFF9EB;">
					<text style="color: #F7B500;">待反馈</text>
				</view>
				<view v-if="detail.offer_status == 'accepted'" class="mianshi-right u-flex u-row-center"
					style="background-color: #F3FAF3;">
					<text style="color: #61BF60;">已通过</text>
				</view>
				<view v-if="detail.offer_status == 'rejected'" class="mianshi-right u-flex u-row-center"
					style="background-color: #FFEFF0;">
					<text style="color: #F2413A;">已拒绝</text>
				</view>
			</view>
			<view class="mianshi-item u-flex u-row-between">
				<text>任职岗位</text>
				<text>{{detail.job.job_name}}</text>
			</view>
			<view class="mianshi-item u-flex u-row-between">
				<text>入职时间</text>
				<text>{{detail.offer.entry_time}}</text>
			</view>
			<view class="mianshi-item u-flex u-row-between">
				<text>入职地址</text>
				<text>{{detail.offer.entry_address}}</text>
			</view>
			<view class="mianshi-item u-flex u-row-between">
				<text>入职薪资</text>
				<text>{{detail.offer.salary}}K·{{detail.offer.salary_type == 'year' ? '年薪' : '月薪'}}</text>
			</view>
			<view class="mianshi-item u-flex u-row-between">
				<text>福利待遇</text>
				<text>{{detail.offer.benefits}}</text>
			</view>
		</view>
		<swiper v-if="detail.interviews &&  detail.interviews.length > 0"
			@change="(e) => {mianshidetail = detail.interviews[e.detail.current]}"
			style="height: 250px;width: 702rpx;margin: 0 auto 20rpx auto;background-color: #fff;border-radius: 20rpx;"
			:indicator-dots="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in detail.interviews" :key="index">
				<view class="mianshi-box">
					<view class="mianshi-header u-flex u-row-between">
						<text class="text1">面试信息</text>
						<view v-if="item.status == 'failed'" class="mianshi-right u-flex u-row-center"
							style="background-color: #FCECEB;">
							<text style="color: #F2413A;">面试淘汰</text>
						</view>
						<view v-else class="mianshi-right u-flex u-row-center">
							<image src="static/mianshi.png" mode=""></image>
							<text>第{{item.period}}轮</text>
						</view>
					</view>
					<view class="mianshi-item u-flex u-row-between">
						<text>面试轮次</text>
						<text>{{item.period_sum}}轮</text>
					</view>
					<view class="mianshi-item u-flex u-row-between">
						<text>面试方式</text>
						<text>{{item.type == 'offline' ? '线下面试' : '线上面试'}}</text>
					</view>
					<view class="mianshi-item u-flex u-row-between">
						<text>面试时间</text>
						<text>{{item.interview_time}}</text>
					</view>
					<view class="mianshi-item u-flex u-row-between" v-if="item.type == 'offline'">
						<text>面试地点</text>
						<text>{{item.address}}</text>
					</view>
					<view class="mianshi-item u-flex u-row-between" v-else>
						<text>面试链接</text>
						<text>{{item.url}}</text>
					</view>
					<view class="mianshi-item u-flex u-row-between">
						<text>联系人</text>
						<text>{{item.contact_name}}</text>
					</view>
					<view class="mianshi-item u-flex u-row-between">
						<text>联系电话</text>
						<text>{{item.contact_mobile}}</text>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="mianshi-box">
			<view v-if="mianshidetail.status == 'failed'">
				<view class="mianshi-item u-flex u-row-between">
					<text>淘汰原因</text>
					<text>{{mianshidetail.refused_reason}}</text>
				</view>
				<view class="mianshi-item u-flex u-row-between">
					<text>推荐意见</text>
					<text>{{mianshidetail.recommend_opinion}}</text>
				</view>
			</view>
		</view>
		<view class="tuijian-box" v-if="detail.resume_recommend">
			<view class="tuijian-header u-flex u-row-between">
				<text>推荐信息</text>
				<text>推荐时间：{{detail.resume_recommend.createtime}}</text>
			</view>
			<view class="tuijian-item u-flex u-row-between">
				<text>推荐理由</text>
				<text>{{detail.resume_recommend.recommend_reason}}</text>
			</view>
			<view class="tuijian-item u-flex u-row-between">
				<text>求职理由</text>
				<text>{{detail.resume_recommend.job_reason}}</text>
			</view>
			<view class="tuijian-item u-flex u-row-between">
				<text>离职周期</text>
				<text>{{detail.resume_recommend.resign_period_text}}</text>
			</view>
			<view class="tuijian-item u-flex u-row-between">
				<text>目前薪资</text>
				<text>{{Number(detail.resume_recommend.current_salary)}}K/{{detail.resume_recommend.current_salary_type == 'month' ? '月' : '年'}}</text>
			</view>
			<view class="tuijian-item u-flex u-row-between">
				<text>期望薪资</text>
				<text>{{Number(detail.resume_recommend.expect_salary)}}K/{{detail.resume_recommend.expect_salary_type == 'month' ? '月' : '年'}}</text>
			</view>
			<view class="tuijian-item u-flex u-row-between">
				<text>可约面时间</text>
				<text>{{detail.resume_recommend.interview_time}}</text>
			</view>
			<view class="tuijian-user u-flex u-row-between" v-if="detail.recommend_info">
				<image :src="detail.recommend_info.avatar" class="user-img" mode=""></image>
				<view class="user-center u-flex-1 u-flex-col">
					<text>{{detail.recommend_info.username}}</text>
					<text>{{detail.recommend_info.type}}</text>
				</view>
				<text class="chat-btn">立即聊聊</text>
			</view>
		</view>
		<view class="jieshao-box">
			<!-- 			<view class="jieshao-user jieshao-user1 u-flex u-row-between">
				<view class="left u-flex-col">
					<text class="user-name">{{detail.resume.name || ''}}</text>
					<view class="user-tips1">
						{{detail.resume.province || ''}}·{{detail.resume.city || ''}}｜{{detail.resume.experience || 0}}年｜{{detail.resume.education_name || ''}} | {{detail.resume.salary || 0}}K/{{detail.resume.salary_type == 'year' ? '年' : '月'}}
					</view>
				</view>
				<view class="right">
					<image :src="detail.resume.avatar" class="img1" mode=""></image>
					<image v-if="detail.resume.sex == 'male'" src="../static/images/nan.png" class="sex" mode=""></image>
					<image v-if="detail.resume.sex == 'female'" src="../static/images/nv.png" class="sex" mode=""></image>
				</view>
			</view> -->
			<!-- 			<view class="u-flex item-other" v-if="detail.resume_job_experience[0]">
				<image src="../static/images/dizhi.png" mode=""></image>
				<text>{{detail.resume_job_experience[0].company_name}}·{{detail.resume_job_experience[0].job_name}}</text>
			</view>
			<view class="u-flex item-other" v-if="detail.resume_education_experience[0]">
				<image src="../static/images/zhiye.png" mode=""></image>
				<text>{{detail.resume_education_experience[0].name}}·{{detail.resume_education_experience[0].major}}</text>
			</view> -->
			<view class="content">
				<view class="u-flex u-row-between ">
					<view class="u-flex">
						<view class="font">{{detail.job.job_name}}</view>
					</view>
					<view class="money">{{detail.job.salary_min}}-{{detail.job.salary_max}}K
						<text v-if="detail.job.salary_structure">·{{detail.job.salary_structure}}</text>
					</view>
				</view>
				<view class="u-flex" style="margin: 16rpx 0 14rpx 0;">
					<text class="introduce">{{detail.company.name}}</text>
					<text class="introduce">{{detail.company.stage_name}}</text>
					<text class="introduce">{{detail.company.scale_name}}</text>
				</view>
				<view class="u-flex" style="margin-bottom: 24rpx;">

					<view class="tabs">
						{{detail.company.province}}{{detail.company.city}}
					</view>
					<view class="tabs">
						{{detail.job.education_name}}
					</view>
					<view class="tabs">
						{{detail.job.experience_name}}
					</view>
				</view>
				<view class="u-flex u-row-between u-col-center">
					<view class=" u-flex u-col-center">
						<image :src="detail.recommend_info.avatar" mode=""
							style="width: 50rpx;height: 50rpx;border-radius: 50%;">
						</image>
						<view class="" style="margin-left: 16rpx;">
							<text>{{detail.recommend_info.username}}</text>·
							<text>{{detail.recommend_info.type}}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 				<view class="bottom u-flex  u-row-between">
					<text class="tou">{{detail.updatetime}}{{detail.updatetime?"投递":""}}</text>
					<text class="success">投递成功</text>
				</view> -->



			<!-- 		<view class="jieshao-user jieshao-user2 u-flex u-row-between" style="margin-top: 30rpx;">
				<view class="left u-flex-col">
					<text class="user-name">{{detail.job.job_name || ''}}</text>
					<view class="user-tips1">
						{{detail.job.work_province || ''}}·{{detail.job.work_city || ''}}｜{{detail.job.experience_name || 0}}年｜{{detail.job.education_name || ''}} | {{detail.job.salary_min || 0}}-{{detail.job.salary_max || 0}}K
					</view>
				</view>
			</view> -->
			<!-- 			<view class="u-flex item-other">
				<image src="static/address.png" mode=""></image>
				<text>{{detail.company.name || ''}}</text>
			</view>
			<view class="u-flex item-other">
				<image src="static/dingwei.png" mode=""></image>
				<text>{{detail.job.work_city || ''}}</text>
			</view> -->
			<view class="tongguo-offter u-flex u-row-between" v-if="detail.hr_pay_sum">
				<text>佣金金额</text>
				<text>¥{{detail.hr_pay_sum}}</text>
			</view>
		</view>
		<view class="pay-box" v-if="detail.hr_periods && detail.hr_periods.length > 0">
			<view class="pay-header u-flex u-row-between">
				<text class="text1">支付方式</text>
				<view class="u-flex">
					<text class="text2">{{detail.hr_periods.length}}次付款</text>
					<u-icon name="info-circle-fill" color="#999999" size="24"></u-icon>
				</view>
			</view>
			<view class="pay-item u-flex u-col-top u-row-between" v-for="(a,b) in detail.hr_periods" :key="b">
				<text class="text1">{{a.normal_time}}</text>
				<view class="u-flex-col u-col-center">
					<text class="xian1"></text>
				</view>
				<view class="text2 u-flex u-row-right">
					<text class="price" v-if="a.status == 'paid'" style="color: #76777D;">¥{{a.normal_price}}</text>
					<text class="price" v-else-if="a.status == 'unpaid'"
						style="color: #1A1C24">¥{{a.normal_price}}</text>
					<text class="price" v-else style="color: #F2413A;">¥{{a.normal_price}}</text>
					<text class="price-status1" v-if="a.status == 'paid'">已打款</text>
					<text class="price-status2" v-if="a.status == 'paying'">支付中</text>
					<text class="price-status2" v-if="a.status == 'refunding'">退款中</text>
					<text class="price-status2" v-if="a.status == 'refunded'">已退款</text>
					<text class="price-status2" v-if="a.status == 'overdue'">已逾期</text>
				</view>
			</view>
		</view>
		<view class="tuijian-box">
			<view class="tuijian-item u-flex u-row-between">
				<text>订单编号</text>
				<text>{{detail.order_no || ''}}</text>
			</view>
			<view class="tuijian-item u-flex u-row-between">
				<text>订单时间</text>
				<text>{{detail.createtime || ''}}</text>
			</view>
		</view>

		<view style="height: 100rpx;"></view>
		<view class="safe-area-inset-bottom"></view>
		<view class="jieshou-down">
			<view v-if="detail.stage == 'over_protected'">
				<view class="jieshou-btn u-flex u-row-right">
					<!-- unpaid.未支付，paying.支付中, part.部分支付,paid.已完成支付, refunding.退款中, refund_part. 部分退款, refunded.已退款 -->
					<view v-if="!['unpaid','paying'].includes(detail.hr_pay_status)" class="text2"
						@click="showdakuan = true">查看打款信息</view>
					<view
						v-if="!['unpaid','paying','refunding','refund_part','refunded'].includes(detail.hr_pay_status)"
						class="text2" @click="tokaipiao">申请开票</view>
					<view v-if="['unpaid','part'].includes(detail.hr_pay_status)" class="text4" @click="todakuan">确认打款
					</view>
					<view v-if="['paid'].includes(detail.hr_pay_status)" class="text4" @click="totuikuan()">申请退款</view>
				</view>
			</view>
			<view class="safe-area-inset-bottom"></view>
		</view>
		<u-popup :show="showjinzhan" mode="bottom" border-radius="32" height="900" :closeable="true" @close="showjinzhan = false">
			<view class="order-jindu-popup">
				<view class="order-jindu-header u-flex">
					<text>订单进展</text>
					<text>订单时长进展：{{gettime()}}</text>
				</view>
				<view class="order-jindu-body">
	<!-- 				<view class="body-user u-flex u-row-between">
						<image :src="detail.recommend_info.avatar" class="user-img" mode=""></image>
						<view class="user-center u-flex-col">
							<text class="text1">{{detail.recommend_info.username}}</text>
							<text class="text2">{{detail.recommend_info.type}}</text>
						</view>
						<text class="jubao-btn" @click="showjubao = true">举报</text>
					</view> -->
					<view class="body-item u-flex u-col-top" v-for="(item,index) in logs" :key="index">
						<view class="item-left u-flex-col u-col-center">
							<view class="first-box u-flex u-row-center" v-if="index == 0">
								<text></text>
							</view>
							<view class="last-box" v-else></view>
							<view class="left-xian" v-if="index < (logs.length - 1)"></view>
						</view>
						<view class="item-right u-flex-col" :style="{opacity: index == 0 ? 1 : 0.5}">
							<text>{{item.content}}</text>
							<text>{{item.createtime}}</text>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showdakuan" mode="center" border-radius="28">
			<view class="dakuan-popup">
				<view class="dakuan-title">
					打款信息
				</view>
				<view class="dakuan-box">
					<view class="box-item u-flex">
						<text>企业全称</text>
						<text>{{dakuan.company_full_name}}</text>
					</view>
					<view class="box-item u-flex">
						<text>开户行</text>
						<text>{{dakuan.bank_name}}</text>
					</view>
					<view class="box-item u-flex">
						<text>银行账号</text>
						<text>{{dakuan.account_no}}</text>
					</view>
				</view>
				<view class="dakuan-popup-btn" @click="showdakuan = false">
					我知道了
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		get_finance_config,
		order_detail
	} from "@/units/inquire.js"
	export default {
		data() {
			return {
				// stage 当前阶段: recommend=推荐阶段, interview=面试阶段, offer=offer阶段, entry=入职阶段, over_protected=过保阶段, failed=已淘汰
				// recommend_status 推荐阶段状态: pending=未查看, viewed=已查看, overdue=反馈逾期, passed=已通过, failed=淘汰, interviewed=发起面试, undetermined=简历待定
				jindulist: [{
					name: '推荐阶段',
					jindu: 0
				}, {
					name: '面试阶段',
					jindu: 1
				}, {
					name: 'offer阶段',
					jindu: 2
				}, {
					name: '入职阶段',
					jindu: 3
				}, {
					name: '过保阶段',
					jindu: 4
				}],
				// 0简历通过
				// 1一轮待面试，1.1一轮面试完毕，1.2面试通过，1.3面试未通过，1.4未来面试，
				// 2拟录用，2.1发offer，2.2接受offer，2.3拒绝offer
				// 3待入职
				// 4待过保，4.1已过保，4.2未过保

				// 0.6评估未通过, 1.4面试未通过, 1.5放弃面试, 2.3拒绝offer, 4.2未过保
				jindu: 0,
				showjinzhan: false,
				showdakuan: false,
				id: '',
				detail: {
					recommend_info: {}
				},
				logs: [],
				showjubao: false,
				jubao: '',
				mianshidetail: {},
				dakuan: {}
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getconfig()
		},
		onShow() {
			this.getdata()
		},
		methods: {
			getconfig() {
				get_finance_config().then(res => {
					this.dakuan = res.data
				})
			},
			// tojubao(){
			// 	if(!this.jubao){
			// 		this.$u.toast("请输入举报原因")
			// 		return
			// 	}
			// 	uni.showLoading({
			// 		mask:true,
			// 		title:"请稍后"
			// 	})
			// 	// this.$u.post('/api/hr.order/report',{
			// 	// 	order_id:this.id,
			// 	// 	content:this.jubao
			// 	// }).then(res => {
			// 	// 	this.$u.toast(res.msg)
			// 	// 	if(res.code == 1){
			// 	// 		this.jubao = ''
			// 	// 		this.showjubao = false
			// 	// 	}
			// 	// })
			// },
			gettime() {
				if (this.detail.createtime) {
					var createtime = new Date(this.detail.createtime.replace(/-/g, "/")).getTime()
					var nowTime = new Date().getTime()
					var jindutime = parseInt((nowTime - createtime) / 1000)
					var day = parseInt(jindutime / 86400)
					var hour = parseInt(jindutime % 86400 / 3600)
					return `${day}天${hour}小时`
				} else {
					return ''
				}
			},
			getdata() {
				order_detail({
					order_id: this.id
				}).then(res => {
					this.detail = res.data
					if (this.detail.stage == 'failed') {
						this.jindu = {
							un_refused: 0,
							assess_failed: 0,
							interview_failed: 1,
							give_up_interview: 1,
							reject_interview: 1,
							refuse_offer: 2,
							offer_failed: 2,
							entry_failed: 3,
							over_protected_failed: 4,
							no_over: 4,
						} [this.detail.failed_type]
					} else {
						// recommend=推荐阶段, interview=面试阶段, offer=offer阶段, entry=入职阶段, over_protected=过保阶段, 
						this.jindu = {
							recommend: 0,
							interview: 1,
							offer: 2,
							entry: 3,
							over_protected: 4,
							failed: 0
						} [this.detail.stage]
					}
					this.logs = this.detail.logs
					if (this.detail.interviews && this.detail.interviews.length > 0) {
						this.mianshidetail = this.detail.interviews[0]
					}
				})
			},
			tokaipiao() {
				var arr = []
				var title = []
				this.detail.hr_periods.forEach((val, key) => {
					if (val.status == 'paid') {
						arr.push(val)
						title.push(`第${key + 1}次付款`)
					}
				})
				if (title.length > 0) {
					uni.showActionSheet({
						itemList: title,
						success: (e) => {
							if (!arr[e.tapIndex].isInvoiceIng) {
								uni.navigateTo({
									url: "/pagesD/kaipiao?id=" + arr[e.tapIndex].id + "&price=" + arr[e
										.tapIndex].normal_price
								})
							} else {
								this.$u.toast("该订单已开票")
							}
						}
					})
				} else {
					this.$u.toast("暂无可开票订单")
				}

			},
			todakuan() {
				var periods_id = ''
				var paying_id = ''
				this.detail.hr_periods.forEach(val => {
					if ((val.status == 'unpaid') && !periods_id) {
						periods_id = val.id
					}
					if ((val.status == 'paying') && !paying_id) {
						paying_id = val.id
					}
				})
				console.log(paying_id);
				if (paying_id) {
					this.$u.toast("待后台审核成功后再发起支付")
					return
				}
				if (periods_id) {
					uni.navigateTo({
						url: "/pagesD/dakuan?id=" + periods_id
					})
				} else {
					this.$u.toast("暂无信息")
				}

			},
			totuikuan() {
				uni.navigateTo({
					url: "/pagesD/tuikuan?id=" + this.id
				})
			}
		}
	}
</script>

<style lang="scss">
	.order-info {

		.content {
			padding: 24rpx 20rpx;
			margin-top: 20rpx;
			background-color: #fff;
			border-radius: 16rpx;

			.bottom {
				border-top: 2rpx solid #F0F0F0;
				margin-top: 32rpx;
				padding-top: 20rpx;

				.tou {
					font-size: 20rpx;
					font-family: SFPro-Regular, SFPro;
					font-weight: 400;
					color: #666666;
				}

				.success {
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #F7B500;
				}
			}


			.font {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
				line-height: 44rpx;
				max-width: 326rpx;
				overflow: hidden; //超出隐藏
				white-space: nowrap; //不换行，同一行展示
				text-overflow: ellipsis; //设置超出部分以省略号展示
			}

			.back {
				width: 58rpx;
				height: 32rpx;
				background: #FF5335;
				border-radius: 6rpx;
				font-size: 22rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 32rpx;
				text-align: center;
				margin-left: 16rpx;
			}

			.money {
				font-size: 32rpx;
				font-family: JDZhengHT-Regular, JDZhengHT;
				font-weight: 400;
				color: #0C66C2;
			}

			.introduce {
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #555555;
				line-height: 40rpx;
				margin-right: 16rpx;
			}

			.tabs {
				background: #F3F3F3;
				border-radius: 4rpx;
				padding: 6rpx 14rpx;
				margin-right: 16rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #5F5F5F;
				height: 34rpx;
				line-height: 34rpx;
			}
		}


		.taotai-popup {
			width: 686rpx;
			height: 690rpx;
			padding: 0 40rpx;

			.fuli-btn {
				margin-top: 50rpx;

				text {
					width: 686rpx;
					line-height: 88rpx;
					background: #0C66C2;
					border-radius: 12rpx;
					text-align: center;
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}

			.taotai-textarea {
				background: #F4F4F4;
				border-radius: 16rpx;
				padding: 32rpx 24rpx 20rpx 24rpx;

				textarea {
					width: 100%;
					height: 280rpx;
					font-size: 28rpx;
				}

				text {
					font-size: 24rpx;
					font-family: SFPro-Regular, SFPro;
					font-weight: 400;
					color: #999999;
				}
			}

			.taotai-title {
				line-height: 122rpx;
				text-align: center;
				font-size: 36rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
			}

			.taotai-btn {
				margin-top: 52rpx;

				text:first-child {
					width: 280rpx;
					line-height: 92rpx;
					background: rgba(12, 102, 194, 0.1);
					border-radius: 12rpx;
					text-align: center;
					font-size: 36rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #0C66C2;
				}

				text:last-child {
					width: 280rpx;
					line-height: 92rpx;
					background: #0C66C2;
					border-radius: 12rpx;
					text-align: center;
					font-size: 36rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
		}

		.dakuan-popup {
			width: 686rpx;
			height: 536rpx;
			background: #FFFFFF;
			border-radius: 28rpx;
			padding: 0 40rpx;

			.dakuan-popup-btn {
				width: 270rpx;
				line-height: 80rpx;
				background: #0C66C2;
				border-radius: 12rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				margin: 0 auto;
			}

			.dakuan-box {
				padding: 16rpx 20rpx;
				background: #F4F4F4;
				border-radius: 16rpx;
				margin-bottom: 40rpx;

				.box-item {
					padding: 16rpx 0;

					text:first-child {
						width: 154rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #1A1C24;
					}

					text:last-child {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #1A1C24;
					}
				}
			}

			.dakuan-title {
				text-align: center;
				line-height: 118rpx;
				font-size: 36rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
			}
		}

		.jieshou-down {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			background-color: #fff;
			z-index: 999;
			box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(175, 175, 175, 0.5);

			.jieshou-btn {
				padding: 8rpx 24rpx;

				.text1 {
					flex: 1;
					position: relative;

					.text1-more {
						position: absolute;
						width: 200rpx;
						height: 100rpx;
						left: -20rpx;
						bottom: 48rpx;

						.more-box {
							width: 200rpx;
							height: 100rpx;
							position: relative;

							image {
								width: 200rpx;
								height: 100rpx;
								position: absolute;
								top: 0;
								left: 0;
								z-index: -1;
							}

							text {
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #222222;
								margin-bottom: 10rpx;
							}
						}
					}

					.text1-text {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #777777;
					}
				}

				.input {
					flex: 1;
					text-align: right;
					margin-right: 10rpx;
					font-size: 30rpx;
				}

				.text2 {

					line-height: 80rpx;
					border-radius: 12rpx;
					border: 1rpx solid #9F9F9F;
					text-align: center;
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #444444;
					margin-left: 24rpx;
					padding: 0 24rpx;
				}

				.text3 {
					line-height: 80rpx;
					background: #F2413A;
					border-radius: 12rpx;
					text-align: center;
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					margin-left: 24rpx;
					padding: 0 24rpx;
				}

				.text4 {
					line-height: 80rpx;
					background: #0C66C2;
					border-radius: 12rpx;
					text-align: center;
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					margin-left: 24rpx;
					padding: 0 24rpx;
				}
			}
		}

		.pay-box {
			width: 702rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 20rpx auto;
			padding: 0 20rpx;

			.pay-item {
				height: 70rpx;

				.xian1 {
					width: 18rpx;
					height: 18rpx;
					background: #FFFFFF;
					border: 2rpx solid #0C66C2;
					border-radius: 100rpx;
					margin-top: 8rpx;
				}

				.xian2 {
					width: 2rpx;
					height: 36rpx;
					background-color: #ECECEC;
					margin-top: 8rpx;
				}

				.text1 {
					font-size: 24rpx;
					font-family: SFPro-Regular, SFPro;
					font-weight: 400;
					color: #222222;
					width: 270rpx;
				}

				.text2 {

					flex: 1;

					.price {
						font-size: 28rpx;
						font-family: JDZhengHT-Regular, JDZhengHT;
						font-weight: 400;
						color: #1A1C24;
					}

					.price-status1 {
						width: 68rpx;
						line-height: 32rpx;
						background: #F3F3F3;
						border-radius: 6rpx;
						text-align: center;
						font-size: 20rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #76777C;
						margin-left: 8rpx;
					}

					.price-status2 {
						width: 68rpx;
						line-height: 32rpx;
						background: #FDECEB;
						border-radius: 6rpx;
						text-align: center;
						font-size: 20rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #F2413A;
						margin-left: 8rpx;
					}
				}
			}

			.pay-header {
				height: 88rpx;
				border-bottom: 2rpx solid #F4F4F4;
				margin-bottom: 24rpx;

				.text1 {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #1A1C24;
				}

				.text2 {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					margin-right: 10rpx;
				}
			}
		}

		.order-jindu-popup {
			padding: 0 20rpx;
			background: #F3F3F3;
			min-height: 900rpx;

			.order-jindu-body {
				width: 710rpx;
				background: #FFFFFF;
				border-radius: 32rpx 32rpx 0rpx 0rpx;
				margin: 0 auto;
				min-height: 700rpx;
				padding-top:48rpx ;

				.body-item {
					.item-right {
						text:first-child {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #1A1C24;
							margin-bottom: 12rpx;
						}

						text:last-child {
							font-size: 22rpx;
							font-family: SFPro-Light, SFPro;
							font-weight: 300;
							color: #1A1C24;
						}
					}

					.item-left {
						width: 64rpx;
						padding-top: 10rpx;

						.left-xian {
							width: 2rpx;
							height: 72rpx;
							opacity: 0.2;
							border: 2rpx solid #979797;
							margin: 10rpx 0;
						}

						.last-box {
							width: 16rpx;
							height: 16rpx;
							background: #D8D8D8;
							border-radius: 100rpx;
						}

						.first-box {
							width: 24rpx;
							height: 24rpx;
							background: rgba(12, 102, 194, 0.2);
							border-radius: 100rpx;

							text {
								width: 12rpx;
								height: 12rpx;
								background: #0C66C2;
								border-radius: 100rpx;
							}
						}
					}
				}

				.body-user {
					border-bottom: 2rpx solid #F3F3F3;
					height: 116rpx;
					padding: 0 20rpx;
					margin-bottom: 22rpx;

					.jubao-btn {
						font-size: 22rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #0C66C2;
					}

					.user-center {
						flex: 1;
						margin: 0 20rpx;

						.text1 {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #1A1C24;
						}

						.text2 {
							font-size: 20rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #1A1C24;
						}
					}

					.user-img {
						width: 64rpx;
						height: 64rpx;
						border-radius: 100rpx;
					}
				}
			}

			.order-jindu-header {
				height: 114rpx;

				text:first-child {
					font-size: 36rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #222222;
					margin-right: 20rpx;
				}

				text:last-child {
					font-size: 22rpx;
					font-family: SFPro-Regular, SFPro;
					font-weight: 400;
					color: #1A1C24;
				}
			}
		}

		.jieshao-box {
			width: 702rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 20rpx auto;
			// padding: 32rpx 20rpx 8rpx 20rpx;
			box-sizing: border-box;

			.tongguo-offter {
				height: 90rpx;
				border-top: 2rpx solid #F4F4F4;

				text:first-child {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #131415;
				}

				text:last-child {
					font-size: 36rpx;
					font-family: JDZhengHT-Regular, JDZhengHT;
					font-weight: 400;
					color: #F2413A;
				}
			}

			.item-other {
				margin-bottom: 16rpx;
				padding-left: 32rpx;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 12rpx;
				}

				text {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
				}
			}

			.jieshao-user {
				padding-left: 32rpx;
				position: relative;
				margin-bottom: 20rpx;

				.left {
					.user-name {
						font-size: 32rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #222222;
						margin-bottom: 16rpx;
					}

					.user-tips1 {
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
					}
				}

				.right {
					width: 96rpx;
					height: 96rpx;
					position: relative;

					.img1 {
						width: 96rpx;
						height: 96rpx;
						border-radius: 100rpx;
					}

					.sex {
						position: absolute;
						bottom: 0;
						right: 4rpx;
						width: 24rpx;
						height: 24rpx;
					}
				}
			}

			.jieshao-user1::after {
				position: absolute;
				content: " ";
				width: 12rpx;
				height: 12rpx;
				background: #131415;
				border-radius: 100rpx;
				top: 16rpx;
				left: 0;
			}

			.jieshao-user2::after {
				position: absolute;
				content: " ";
				width: 12rpx;
				height: 12rpx;
				background: #0C66C2;
				border-radius: 100rpx;
				top: 16rpx;
				left: 0;
			}
		}

		.yiguobao-box {
			width: 702rpx;
			height: 392rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 0 auto;

			image {
				width: 200rpx;
				height: 200rpx;
				margin-bottom: 32rpx;
			}

			text {
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}

		.mianshi-box {
			padding: 0 20rpx;
			width: 702rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 0 auto 20rpx auto;

			.mianshi-item {
				padding: 12rpx 0;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			.mianshi-header {
				border-bottom: 2rpx solid #F4F4F4;
				height: 84rpx;

				.mianshi-right {
					height: 44rpx;
					background: rgba(12, 102, 194, 0.08);
					border-radius: 6rpx;
					padding: 0 12rpx;

					text {
						font-size: 22rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #0C66C2;
						margin-left: 8rpx;
					}

					image {
						width: 24rpx;
						height: 24rpx;
					}
				}

				.text1 {
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #222222;
				}
			}
		}

		.tuijian-box {
			width: 702rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 20rpx auto;
			padding: 0 20rpx;
			box-sizing: border-box;

			.tuijian-user {
				margin-top: 8rpx;
				border-top: 2rpx solid #F4F4F4;
				height: 122rpx;

				.user-img {
					width: 80rpx;
					height: 80rpx;
					border-radius: 100rpx;
				}

				.chat-btn {
					width: 140rpx;
					line-height: 60rpx;
					background: #0C66C2;
					border-radius: 12rpx;
					text-align: center;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}

				.user-center {
					margin: 0 20rpx;

					text:first-child {
						font-size: 30rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #1A1C24;
						margin-bottom: 6rpx;
					}

					text:last-child {
						font-size: 22rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #888888;
					}
				}
			}

			.tuijian-item {
				padding: 12rpx 0;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			.tuijian-header {
				height: 84rpx;
				border-bottom: 2rpx solid #F4F4F4;
				margin-bottom: 6rpx;

				text:first-child {
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #222222;
				}

				text:last-child {
					font-size: 24rpx;
					font-family: SFPro-Regular, SFPro;
					font-weight: 400;
					color: #999999;
				}
			}
		}

		.jieshou-info-header {
			height: 284rpx;
			padding: 0 32rpx;

			.order-time {
				font-size: 24rpx;
				font-family: SFPro-Light, SFPro;
				font-weight: 300;
				color: #FFFFFF;
				margin-top: 12rpx;
			}

			.header-jindu {
				height: 76rpx;
				margin: 0 32rpx;
				position: relative;

				.jindu-item {
					width: 32rpx;
					height: 32rpx;
					background: rgba(255, 255, 255, 0);
					border-radius: 100rpx;

					text {
						width: 16rpx;
						height: 16rpx;
						background: #FFFFFF;
						border-radius: 100rpx;
					}
				}

				.jindu-item1 {
					background: rgba(255, 255, 255, 0.3);
				}

				.jindu-xian {
					position: absolute;
					top: 50%;
					left: 50%;
					width: calc(100% - 16rpx);
					height: 4rpx;
					background: rgba(256, 256, 256, 0.3);
					transform: translate(-50%, -50%);
				}
			}

			.jindu-text {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				width: 100%;

				text {
					opacity: 0.8;
				}

				.text {
					font-size: 24rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					opacity: 1;
				}
			}

			.header-title {
				position: relative;

				.dakuan-icon {
					position: absolute;
					right: -32rpx;
					top: 10rpx;
					width: 124rpx;
					line-height: 48rpx;
					background: rgba(255, 255, 255, 0.1);
					border-radius: 24rpx 0rpx 0rpx 24rpx;
					text-align: center;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #F7B500;
				}

				.text2 {
					width: 92rpx;
					line-height: 40rpx;
					border-radius: 4rpx;
					opacity: 0.6;
					border: 1rpx solid #FFFFFF;
					text-align: center;
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					margin-left: 20rpx;
				}

				.text1 {
					font-size: 48rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					margin-right: 12rpx;
				}

				.text1-right {
					height: 40rpx;
					background: #FFFFFF;
					border-radius: 8rpx;
					padding: 0 14rpx;
					margin-left: 12rpx;

					image {
						width: 21rpx;
						height: 21rpx;
						margin-right: 10rpx;
					}

					text {
						font-size: 20rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FF6B34;
					}
				}
			}

		}

		.jieshou-info-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 750rpx;
			height: 460rpx;
			background: linear-gradient(180deg, #0C66C2 0%, #0C66C2 50%, #F3F3F3 100%);
			z-index: -1;
		}
	}

	page {
		background-color: #F4F4F4;
	}
</style>

<style scoped>
	::v-deep .u-icon__icon{
		transform: rotate(90deg) !important;
	}
</style>