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 == '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="12"></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="12"></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'">待反馈</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="12"></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="12"></u-icon>
				<text class="dakuan-icon"
					v-if="detail.is_pay_for_job == 1 && detail.candidate_commission_amount && detail.candidate_pay_status != 'paid'">未支付</text>
			</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="12"></u-icon>
				<text class="text2" v-if="detail.over_protected_status == 'failed'">已淘汰</text>
				<text class="dakuan-icon"
					v-if="detail.is_pay_for_job == 1 && detail.candidate_commission_amount && detail.candidate_pay_status != 'paid'">未支付</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="back" style="border: 2rpx solid rgba(0,0,0,0);">
			<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/images/yiguobao.png" mode=""></image>
				<text>恭喜！您已过保</text>
			</view>
			<view class="mianshi-box" style="margin-left: 20rpx;margin-bottom: 20rpx;"
				v-if="['issued','accepted','rejected'].includes(detail.offer_status) || detail.offer">
				<view class="mianshi-header u-flex u-row-between">
					<text class="text1" style="font-weight: 700;">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 ">
					<text style="width:112rpx">入职时间</text>
					<text style="margin-left:40rpx">{{detail.offer.entry_time}}</text>
				</view>
				<view class="mianshi-item ">
					<text style="width:112rpx">入职岗位</text>
					<text style="margin-left:40rpx">{{detail.job.job_name}}</text>
				</view>
				<view class="mianshi-item ">
					<text style="width:112rpx">入职薪资</text>
					<text
						style="margin-left:40rpx">{{detail.offer.salary}}K·{{detail.offer.salary_type == 'year' ? '年薪' : '月薪'}}</text>
				</view>
				<view class="mianshi-item u-flex">
					<view class="" style="width:112rpx;">试用期</view>
					<text style="margin-left:40rpx">{{detail.offer.entry_address}}</text>
				</view>
				<view class="mianshi-item ">
					<text style="width:112rpx">福利待遇</text>
					<text style="margin-left:40rpx">{{detail.offer.benefits}}</text>
				</view>
			</view>
			<swiper v-if="detail.interviews && detail.interviews.length > 0 && jindu == 1"
				@change="(e) => {mianshidetail = detail.interviews[e.detail.current]}"
				style="height: 250px;width: 702rpx;margin: 0 auto 20rpx auto;background-color: #fff;border-radius: 20rpx;border: 2rpx solid rgba(0,0,0,0);"
				:indicator-dots="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in detail.interviews" :key="index"
					style="border: 2rpx solid rgba(0,0,0,0);">
					<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.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">
							<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 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 style="white-space: nowrap;">面试链接</text>
							<text class="text_hide" style="max-width: 450rpx;word-wrap: break-word;">{{item.url}}</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="jieshao-box">
				<view class="content" style="position: relative;">
					<image v-if="detail.is_pay_for_job==1" src="static/images/fufei.png"
						style="width: 112rpx; height: 38rpx;position: absolute;top: 0;left: -10rpx;" mode=""></image>
					<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.hr.avatar" mode=""
								style="width: 50rpx;height: 50rpx;border-radius: 50%;">
							</image>
							<view class="" style="margin-left: 16rpx;font-size: 24rpx;">
								<text>{{detail.hr.name}}</text>·
								<text>{{detail.hr.job}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="tongguo-offter u-flex u-row-right" v-if="detail.candidate_commission_amount">
					<text style="margin-right: 10rpx;">付费金额:</text>
					<text>¥{{detail.candidate_commission_amount}}</text>
				</view>
			</view>
			<view class="tuijian-box">
				<view class="tuijian-item u-flex">
					<text>订单编号:</text>
					<text>{{detail.order_no || ''}}</text>
				</view>
				<view class="tuijian-item u-flex">
					<text>订单时间:</text>
					<text>{{detail.createtime || ''}}</text>
				</view>
			</view>
		</view>
		<view class="" style="height: 100rpx;background: #F3F3F3;"></view>
		<view class="jieshou-down">
			<view v-if="detail.stage == 'over_protected' ||detail.stage == 'entry' ">
				<view class="jieshou-btn u-flex u-row-right">
					<view
						v-if="detail.is_pay_for_job == 1 && detail.candidate_commission_amount && detail.candidate_pay_status != 'paid' "
						class="text4" @click="todakuan(detail.candidate_commission_amount )">立即支付
					</view>
				</view>
			</view>
			<view class="safe-area-inset-bottom"></view>
		</view>
		<view class="flexa" v-if="detail.interview_status == 'uninterviewed' && detail.stage == 'interview'">
			<view class="u-flex u-row-between" style="width: 100%;">
				<view class="btn1" @click="accept">接受面试</view>
				<view class="btn2" @click="refuse">拒绝面试</view>
			</view>
		</view>
		<view class="flexa" v-if="detail.offer_status == 'issued'&&detail.stage == 'offer'">
			<view class="u-flex u-row-between" style="width: 100%;">
				<view class="btn1" @click="accept1">接受offer</view>
				<view class="btn2" @click="refuse1">拒绝offer</view>
			</view>
		</view>
		<view class="safe-area-inset-bottom"></view>
		<u-popup :show="showjinzhan" mode="bottom" border-radius="32" height="450" :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">
					<scroll-view style="height: 770rpx;" scroll-y="true">
						<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 class="" style="height: 40rpx;"></view>
					</scroll-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,
		interview_accept,
		interview_refuse,
		offer_pass,
		offer_refuse
	} 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: {
			accept() {
				interview_accept({
					order_id: this.id
				}).then(res => {
					this.$u.toast(res.msg)
					this.getdata()
				})
			},
			refuse() {
				interview_refuse({
					order_id: this.id
				}).then(res => {
					this.$u.toast(res.msg)
					this.getdata()
				})
			},
			//接收offer
			accept1() {
				offer_pass({
					order_id: this.id
				}).then(res => {
					this.$u.toast(res.msg)
					this.getdata()
				})
			},
			//拒绝offer
			refuse1() {
				offer_refuse({
					order_id: this.id
				}).then(res => {
					this.$u.toast(res.msg)
					this.getdata()
				})
			},
			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(money) {
				// 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/pay?id=" + this.id + '&&money=' + money
				})
				// } else {
				// 	this.$u.toast("暂无信息")
				// }
			},
			// totuikuan() {
			// 	uni.navigateTo({
			// 		url: "/pagesD/tuikuan?id=" + this.id
			// 	})
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.text_hide {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.flexa {
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 16rpx 32rpx 0;
		height: 110rpx;
		font-size: 32rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		background-color: #fff;
		width: 750rpx;
		box-sizing: border-box;

		.btn1 {
			text-align: center;
			line-height: 84rpx;
			width: 328rpx;
			height: 84rpx;
			background: #0C66C2;
			border-radius: 12rpx;
			color: #FFFFFF;
		}

		.btn2 {
			text-align: center;
			line-height: 84rpx;
			width: 328rpx;
			height: 84rpx;
			background: #E8E8E8;
			border-radius: 12rpx;
			color: #666666;
		}
	}

	.back {
		background: #F3F3F3;
		min-height: 76vh;
	}

	.order-info {


		.content {
			padding: 35rpx 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;
					width: 100%;
				}
			}
		}

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

			.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;
			max-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;
				padding: 0 20rpx;

				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;
			box-sizing: border-box;

			.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: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #1A1C24;
				}
			}
		}

		.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%) !important;
			z-index: -1;
		}
	}

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

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

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