employ-front/pages_subpack/job-order-detail/index.vue

<template>
	<view class="u-page">
		<!-- 使用状态组件 -->
		<view class="se-px-20 se-pt-40" v-if="obj && Object.keys(obj).length > 0">
			<order-status :order-data="obj" page-type="job-order"></order-status>
		</view>
		
		<!-- 先支付后试用 payType=0 -->
		<view class="se-px-20" v-if="obj.payType == 0">
			
			<!-- 企业 -->
			<view class="se-px-220 se-pb-30 se-fs-20 se-flex se-flex-h-c"
			v-if="!type">
				<button
					open-type="contact"
					class="se-mx-10 se-w-200 se-br-40 se-flex-h-c se-h-50 se-lh-50 se-ta-c se-fs-24 se-c-white se-bgc-orange"
					style="background: #ff7a31; border: none; padding: 0; margin: 0; line-height: 50rpx;">
					<text>联系客服</text>
				</button>
				<template v-if="obj.status==0">
					<view @click="onCancel()"
						class="se-mx-10 se-w-200 se-b se-br-40 se-flex-h-c se-h-50 se-lh-50 se-ta-c se-fs-24 se-c-66 se-bgc-f5">
						<text>取消</text>
					</view>
				</template>
				
				<template v-if="obj.status == 3">
					<view @click="confirmOrderTryCompany()"
						class="se-mx-10 se-w-200 se-br-40 se-flex-h-c se-h-50 se-lh-50 se-ta-c se-fs-24 se-c-white se-bgc-orange">
						<text>企业确认</text>
					</view>
				</template>
				<template v-if="obj.status==1">
					<view @click="onPay()"
						class="se-mx-10 se-w-200 se-br-40 se-flex-h-c se-h-50 se-lh-50 se-ta-c se-fs-24 se-c-white se-bgc-orange">
						<text>去支付</text>
					</view>
				</template>
			</view>
			
			
			<!-- 求职者 -->
			<view class="se-px-220 se-pb-30 se-fs-20 se-flex se-flex-h-c"
			v-else>
				<button
					open-type="contact"
					class="se-mx-10 se-w-200 se-br-40 se-flex-h-c se-h-50 se-lh-50 se-ta-c se-fs-24 se-c-white se-bgc-orange"
					style="background: #ff7a31; border: none; padding: 0; margin: 0; line-height: 50rpx;">
					<text>联系客服</text>
				</button>
				<template v-if="obj.status==0">
					<view @click="confirmOrder()"
						class="se-mx-10 se-w-200 se-br-40 se-flex-h-c se-h-50 se-lh-50 se-ta-c se-fs-24 se-c-white se-bgc-orange">
						<text>接受工作</text>
					</view>
					<view @click="onCancel()"
						class="se-mx-10 se-w-200 se-b se-br-40 se-flex-h-c se-h-50 se-lh-50 se-ta-c se-fs-24 se-c-66 se-bgc-f5">
						<text>取消</text>
					</view>
				</template>
				<template v-if="obj.status==2">
					<view @click="confirmOrderTry()"
						class="se-mx-10 se-w-200 se-br-40 se-flex-h-c se-h-50 se-lh-50 se-ta-c se-fs-24 se-c-white se-bgc-orange">
						<text>确认试工完成</text>
					</view>
				</template>
			</view>
		</view>

		<!-- 先后支付 payType=1 -->
		<view class="se-px-20" v-else>
		    <!-- 企业 -->
			<view class="se-px-220 se-pb-30 se-fs-20 se-flex se-flex-h-c"
			v-if="!type">
				<button
					open-type="contact"
					class="se-mx-10 se-w-200 se-br-40 se-flex-h-c se-h-50 se-lh-50 se-ta-c se-fs-24 se-c-white se-bgc-orange"
					style="background: #ff7a31; border: none; padding: 0; margin: 0; line-height: 50rpx;">
					<text>联系客服</text>
				</button>
				<template v-if="obj.status==0">
					<view @click="onCancel()"
						class="se-mx-10 se-w-200 se-b se-br-40 se-flex-h-c se-h-50 se-lh-50 se-ta-c se-fs-24 se-c-66 se-bgc-f5">
						<text>取消</text>
					</view>
				</template>
				
				<template v-if="obj.status == 2">
					<view @click="confirmOrderTryCompany()"
						class="se-mx-10 se-w-200 se-br-40 se-flex-h-c se-h-50 se-lh-50 se-ta-c se-fs-24 se-c-white se-bgc-orange">
						<text>企业确认</text>
					</view>
				</template>
				<template v-if="obj.status==3">
					<view @click="onPay()"
						class="se-mx-10 se-w-200 se-br-40 se-flex-h-c se-h-50 se-lh-50 se-ta-c se-fs-24 se-c-white se-bgc-orange">
						<text>去支付</text>
					</view>
				</template>
			</view>
			
			
			<!-- 求职者 -->
			<view class="se-px-220 se-pb-30 se-fs-20 se-flex se-flex-h-c"
			v-else>
				<button
					open-type="contact"
					class="se-mx-10 se-w-200 se-br-40 se-flex-h-c se-h-50 se-lh-50 se-ta-c se-fs-24 se-c-white se-bgc-orange"
					style="background: #ff7a31; border: none; padding: 0; margin: 0; line-height: 50rpx;">
					<text>联系客服</text>
				</button>
				<template v-if="obj.status==0">
					<view @click="confirmOrder()"
						class="se-mx-10 se-w-200 se-br-40 se-flex-h-c se-h-50 se-lh-50 se-ta-c se-fs-24 se-c-white se-bgc-orange">
						<text>接受工作</text>
					</view>
					<view @click="onCancel()"
						class="se-mx-10 se-w-200 se-b se-br-40 se-flex-h-c se-h-50 se-lh-50 se-ta-c se-fs-24 se-c-66 se-bgc-f5">
						<text>取消</text>
					</view>
				</template>
				<template v-if="obj.status==1">
					<view @click="confirmOrderTry()"
						class="se-mx-10 se-w-200 se-br-40 se-flex-h-c se-h-50 se-lh-50 se-ta-c se-fs-24 se-c-white se-bgc-orange">
						<text>确认试工完成</text>
					</view>
				</template>
				<template v-if="obj.status==4">
					<view @click="confirmOrderTryCompanyOk()"
						class="se-mx-10 se-w-200 se-br-40 se-flex-h-c se-h-50 se-lh-50 se-ta-c se-fs-24 se-c-white se-bgc-orange">
						<text>确认到账</text>
					</view>
				</template>
			</view>
		</view>

		<!-- 企业信息展示部分 (师傅视角) -->
		<company-info 
			:company-data="obj" 
			v-if="!!type"
			:show-contact-button="!!type">
		</company-info>


		<view class="se-px-40 se-py-20" @click="toPayment">
			<view class="se-flex se-flex-ai-c se-pb-10">
				<view class="line-orange"></view>
				<view class="se-ml-10 se-fs-32 se-c-black se-fw-6">
					师傅求职详情
				</view>
			</view>
			<view class="se-flex se-flex-v-sa se-flex-ai-fs se-py-20">
				<view class="se-flex">
					<view class="se-w-160 se-h-160">
						<image class="se-w-160 se-h-160 se-br-10" :src="obj.employResume.headImage" mode=""></image>
					</view>
					<view class="se-ml-20 se-flex se-flex-v-sa se-flex-ai-fs">
						<view class="se-fw-6 se-c-black se-fs-30 se-display-ib">出发地址:{{obj.employSeek.address || '暂未'}}</view>
						<view class="se-fs-24 se-c-text-third se-display-ib">所属行业:{{obj.employSeek.categoryOne || '暂未'}}</view>
						<view class="se-fs-24 se-c-text-third se-display-ib">所属工种:{{obj.employSeek.categoryTwo || '暂未'}}</view>
					</view>
				</view>
				<view class="se-flex se-flex-h-sb se-w-p-100 se-pt-20">
					<view class="se-fs-24 se-display-ib">试工日资</view>
					<view class="se-c-orange se-fs-32 se-fw-6 se-display-ib" 
                    v-if="obj.employSeek && obj.employSeek.dayMoney">
                        {{obj.employSeek.dayMoney}}元/天
                    </view>
					<view class="se-fs-24 se-display-ib se-c-99" v-else>暂未</view>
				</view>
				<view class="se-flex se-flex-h-sb se-w-p-100 se-pt-20">
					<view class="se-fs-24 se-display-ib">月薪</view>
					<view class="se-c-orange se-fs-32 se-fw-6 se-display-ib" 
                    v-if="obj.employSeek && (obj.employSeek.salaryMax || obj.employSeek.salaryMin)">

                        <text v-if="obj.employSeek.salaryMin">{{obj.employSeek.salaryMin}}</text>
                        
                        <text v-if="obj.employSeek.salaryMax != obj.employSeek.salaryMin 
                        && obj.employSeek.salaryMax != 0 && obj.employSeek.salaryMin != 0">-</text>

                        <text 
                        v-if="obj.employSeek.salaryMax != obj.employSeek.salaryMin && obj.employSeek.salaryMax != 0">
                            {{obj.employSeek.salaryMax || 0}}
                        </text>

                        元/月
                    </view>
					<view class="se-fs-24 se-display-ib se-c-99" v-else>暂未</view>
				</view>
			</view>
			<u-line dashed></u-line>
			<view class="se-py-10 se-pb-30">
				<view class="se-mt-30">
					<text class="se-fs-28 se-c-black se-fw5">师傅姓名：{{obj.employResume.name || '暂未'}}</text>
                    <br>
					<text class="se-fs-28 se-c-black se-fw5">民族：{{obj.employResume.nation || '暂未'}}</text>
                    <br>
					<text class="se-fs-28 se-c-black se-fw5">性别：{{obj.employResume.sex == 1 ? '男' : obj.employResume.sex == 2 ? '女' : '暂未'}}</text>
                    <br>
					<text class="se-fs-28 se-c-black se-fw5">年龄：{{obj.employResume.age || '暂未'}}</text>
                    <br>
					<text class="se-fs-28 se-c-black se-fw5">地区：{{obj.employResume.address || '暂未'}}</text>
                    <br>
                    <text class="se-fs-28 se-c-black se-fw5">简介：{{obj.employResume.brief || '暂未'}}</text>
                    <br>
					<text class="se-fs-24 se-c-text-third">师傅电话：{{obj.employResume.phone || '暂未'}}</text>
					<view class="se-bgc-orange se-c-white se-fs-20 se-display-ib se-px-10 se-py-5 se-br-10 se-ml-10"
						@click="copyText(obj.employResume.phone)">
						复制
					</view>
				</view>
				<view class="se-mt-10">
					<text class="se-fs-24 se-c-33">简历地址：{{obj.workAddress || '暂未'}}</text>
					<view class="se-bgc-orange se-c-white se-fs-20 se-display-ib se-px-10 se-py-5 se-br-10 se-ml-10"
						@click="copyText(obj.workAddress)">
						复制
					</view>
				</view>
			</view>
			<u-line dashed></u-line>
			<view class="se-mt-20 se-pt-20 se-pb-30">
				<view class="se-fw-6 se-fs-32 se-c-black">
					师傅简历
				</view>
				<view class="se-flex se-pt-30 se-flex-h-sb">
					<view class="se-fs-24 se-display-ib">简介</view>
					<view class="se-fs-24 se-display-ib">{{obj.employResume.brief || '暂未'}}</view>
				</view>
				<view class="se-flex se-pt-30 se-flex-h-sb">
					<view class="se-fs-24 se-display-ib">出行方式</view>
					<view class="se-fs-24 se-display-ib">{{obj.employSeek.selectGo || '暂未'}}</view>
				</view>
				<view class="se-flex se-pt-30 se-flex-h-sb">
					<view class="se-fs-24 se-display-ib">支付方式</view>
					<view class="se-fs-24 se-display-ib" v-if="obj.employSeek.payType==0">先付后试用</view>
					<view class="se-fs-24 se-display-ib" v-else>先试用后支付</view>
					<view class="se-fs-24 se-display-ib se-c-99" v-if="obj.employSeek.payType==null || obj.employSeek.payType==undefined">暂未</view>
				</view>
				<!-- <view class="se-flex se-pt-30 se-flex-h-sb">
					<view class="se-fs-24 se-display-ib">工作时间</view>
					<view class="se-fs-24 se-display-ib">{{obj.workTime}}</view>
				</view> -->
			</view>
			<u-line dashed></u-line>
			<view class="se-mt-20 se-pt-20 se-pb-30">
				<view class="se-fw-6 se-fs-32 se-c-black">
					师傅技能
				</view>
				<view class="se-fs-24 se-pt-20 se-pb-20 se-lh-40">
					<u-parse :content="obj.employSeek.workDetail"></u-parse>
				</view>
			</view>
			<view class="se-px-220 se-pb-30 se-fs-20 se-flex se-flex-h-c" v-if="!type">
				<view
					@click="callMaster()"
					class="se-mx-10 se-w-200 se-br-40 se-flex-h-c se-h-50 se-lh-50 se-ta-c se-fs-24 se-c-white se-bgc-orange">
					<text>联系师傅</text>
				</view>
			</view>
		</view>

		<!-- 企业信息展示部分 (师傅视角) -->
		<company-info 
			:company-data="obj" 
			v-if="!type"
			:show-contact-button="!!type">
		</company-info>

	</view>
</template>

<script>
	import {
		orderDetail,
		deleteOrder,
		confirmOrder,
		confirmOrderTry,
		confirmOrderTryCompany,
		confirmOrderTryCompanyOk,
	} from "@/common/api.js"
	import OrderStatus from "@/components/order-status/index.vue"
	import CompanyInfo from "@/components/company-info/index.vue"
	export default {
		components: {
			OrderStatus,
			CompanyInfo
		},
		data() {
			return {
				detail: `<p>
						1、全日制大专以上学历，艺术设计类相关专业;<br/>
						2、两年以上平面、品牌、视觉设计等相关工作经验，能独立完成项目的设计工作，有 3C数码/个护健 康 类产品服务经验优先，有乙方工作经验佳;<br/>
						3、具备一定的设计提案能力，能完整的呈现设计思路与创意，能清晰的表达设计逻辑与思考;<br/>
						4、热爱设计，平面基本功扎实，拥有优良的审美与创意想法，对版式、色彩把控能力强;对工作富有责任心，具备团队沟通与协作能力;<br/>
						5、精通 PS、AI、CDR 等平面设计软件，能独立完成日常平面设计工作内容，熟练使用 PPT/Keynote，能完成提案内容的材料美化工作。<br/>
						</p>`,
				obj: {},
				type : '',
			}
		},
		onLoad(options) {
			this.orderId = options.orderId
			this.type = options.type || ''
		},
        onShow(){
			this.onOrderDetail()
        },
		methods: {
            checkStatus(){
				let that = this
                // 根据订单类型和用户视角判断跳转逻辑
                // type == 1: 个人发布求职企业进行招聘，企业接受后师傅跳转保险页面
                // type != 1: 企业招聘师傅，师傅接受后企业跳转保险页面
                if (that.obj && !that.obj.orderStatusSeek && that.obj.status > 0 && that.obj.status < 4) {
                    // 如果是个人发布求职(type == 0)，师傅视角(type存在)才跳转
                    if (that.obj.type == 1 && that.type) {
                        uni.navigateTo({
                            url: "/pages_subpack/payment/index?id=" + that.orderId
                        })
                    }
                    // 如果是企业招聘师傅(type != 0)，企业视角(!type)才跳转
                    else if (that.obj.type != 1 && !that.type) {
                        uni.navigateTo({
                            url: "/pages_subpack/payment/index?id=" + that.orderId
                        })
                    }
                }
            },
			toPayment(){
				uni.navigateTo({
				    url: "/pages_subpack/payment/index?id=" + this.orderId
				})
			},
			onOrderDetail() {
				let that = this
				let params = {
					orderId: that.orderId
				}
				orderDetail(params).then(response => {
					that.obj = response.result
                    this.checkStatus()
				}).catch(error => {

				})
			},
			copyText(event) {
				uni.setClipboardData({
					data: event,
					success: () => {
						uni.showToast({
							title: "复制成功",
							icon: "none",
						});
					},
					fail: (err) => {
						console.error("复制失败", err);
					},
				})
			},
			onCancel() {
				deleteOrder(this.orderId).then(res => {
					if (res.code == 200) {
						uni.navigateBack(-1)
					}
				})
			},

			// 订单信息-求职者确认订单
			confirmOrder() {
				confirmOrder(this.orderId)
				.then(res => {
					if(res.code == 200){
						uni.showToast({
							title: '确认成功',
							icon: 'none'
						})

						this.onOrderDetail()
					}
				})
			},
			// 订单信息-确认试工完成
			confirmOrderTry(){
				confirmOrderTry(this.orderId)
				.then(res => {
					if(res.code == 200){
						uni.showToast({
							title: '确认成功',
							icon: 'none'
						})
						this.onOrderDetail()
					}
				})
			},
			// 确认企业已结款
			confirmOrderTryCompanyOk(){
				confirmOrderTryCompanyOk({
					orderId : this.orderId
				})
				.then(res => {
					this.onOrderDetail()
				})
			},
			onPay() {
				uni.navigateTo({
					url: "/pages_subpack/pay/index?orderId=" + this.orderId
				})
			},
			
			
			
			
			/**
			 * 企业方法
			 */
			
			// 订单信息-企业确认试工完成
			confirmOrderTryCompany(){
				confirmOrderTryCompany(this.orderId)
				.then(res => {
					if(res.code == 200){
						uni.showToast({
							title: '确认成功',
							icon: 'none'
						})
						this.onOrderDetail()
					}
				})
				
			},
			// 订单信息-企业确认订单
			confirmOrder() {
				confirmOrder(this.orderId)
				.then(res => {
					if(res.code == 200){
						uni.showToast({
							title: '确认成功',
							icon: 'none'
						})
						this.onOrderDetail()
					}
				})
			},
			
			// 拨打师傅电话
			callMaster() {
				const phone = this.obj.employResume && this.obj.employResume.phone;
				if (phone) {
					uni.makePhoneCall({
						phoneNumber: phone,
						fail: (err) => {
							console.error('拨打电话失败', err);
							uni.showToast({
								title: '拨打电话失败',
								icon: 'none'
							});
						}
					});
				} else {
					uni.showToast({
						title: '师傅电话号码不存在',
						icon: 'none'
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.line-orange {
		width: 8rpx;
		height: 32rpx;
		background: #ff7a31;
		border-radius: 4rpx;
	}
</style>