employ-front/pages_subpack/pay/index.vue

<template>
	<view class="se-p-40 se-bgc-f5">
		<view class="se-flex se-flex-v-sa se-flex-ai-fs se-py-20 se-px-30 se-bs se-bgc-white se-br-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="detail.employJob && detail.employJob.image || detail.jobHeadImg || detail.workHeadImg || '@/static/image/user.png'" 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">{{ detail.title }}</view>
					<view class="se-fs-24 se-c-text-third se-display-ib">所属行业:{{ detail.categoryOne }}</view>
					<view class="se-fs-24 se-c-text-third se-display-ib">所属工种:{{ detail.categoryTwo }}</view>
					<!-- <view class="se-fs-24 se-c-text-third se-display-ib">工作时间:3h</view> -->
				</view>
			</view>
		</view>
		<view class="se-flex se-flex-h-fs se-mt-30 se-py-20 se-px-30 se-bs se-bgc-white se-br-20">
			<image class="se-a-30" src="@/static/image/46502.png" mode="" onerror="this.src='@/static/image/user.png'"></image>
			<text class="se-c-black se-fs-32 se-ml-20">{{ detail.employResume ? detail.employResume.name : detail.workUser }}</text>
			<text class="se-c-black se-fs-32 se-ml-20">{{ detail.employResume ? detail.employResume.phone : detail.workPhone }}</text>
		</view>
		<view class="se-mt-30 se-py-20 se-px-30 se-bs se-bgc-white se-br-20">
			<view class="se-flex se-flex-h-sb se-pb-20 se-b-b">
				<view class="se-flex se-flex-h-fs">
					<image class="se-w-30 se-h-40" src="@/static/image/47961.png" mode="" onerror="this.src='@/static/image/user.png'"></image>
					<text class="se-c-black se-fs-32 se-ml-20">{{ detail.employResume ? detail.employResume.name : detail.workUser }}</text>
				</view>
				<view>
					<text class="se-c-orange se-fs-32 se-ml-20">$ {{ detail.payMoney }}</text>
				</view>
			</view>
			<!-- 新增保险费明细，仅 type==1 时显示 -->
			<template v-if="detail.type == 1">
                <!-- <view  class="se-flex se-flex-h-sb se-pt-20">
                    <view class="se-flex se-flex-h-fs">
                        <u-checkbox v-model="insuranceChecked" @change="onInsuranceChange" activeColor="#ff7a31" shape="circle" size="16"></u-checkbox>
                        <image class="se-w-30 se-h-40 se-ml-10" src="@/static/image/46524.png" mode=""></image>
                        <text class="se-c-black se-fs-32 se-ml-20">保险费</text>
                    </view>
                    <view>
                        <text class="se-c-orange se-fs-32 se-ml-20">￥{{ insuranceChecked ? detail.premium : 0 }}</text>
                    </view>
                </view> -->
                <view class="se-flex se-flex-h-sb se-pt-20" 
                v-if="detail.employSeek">
                    <view class="se-flex se-flex-h-fs">
                        <image class="se-w-30 se-h-40" src="@/static/image/47961.png" mode="" onerror="this.src='@/static/image/user.png'"></image>
                        <text class="se-c-black se-fs-32 se-ml-20">师傅试工交通费用</text>
                    </view>
                    <view class="se-flex se-flex-ai-c">
                        <view class="se-bgc-orange se-display-ib se-br-10 se-py-5 se-px-20 se-c-white se-fs-20">
                            {{ detail.employSeek.selectGo }}
                        </view>
                        <text class="se-c-orange se-fs-32 se-ml-20">$ {{ fare }}</text>
                    </view>
                </view>
                <view class="se-c-black se-p-20 se-fs-24 se-flex se-flex-ai-c se-mt-20"
                    style="background-color:rgba(255,164,113,0.48);">
                    <view class="se-w-10 se-h-10 se-br-5 se-bgc-orange se-mr-10"></view>
                    <text>全程共</text>
                    <text class="se-c-orange se-px-5 se-fw-6">{{ distance }}</text>
                    <text>公里</text>
                </view>
                <view class="se-p-20 se-fs-24 se-flex se-flex-ai-c" style="background-color:rgba(255,164,113,0.18);">
                    从师傅出发地到用工目的地总全程为{{ distance }}公里，{{ distance }}公里x￥{{ farePerKm }}=￥{{ fare }}
                </view>
                <view class="se-fs-22 se-lh-50 se-flex se-flex-v se-mt-10">
                    <text>1.公交/地铁出行费用：每公里￥{{ trafficPrice.bus }}</text>
                    <text>2.出租车出行费用：每公里￥{{ trafficPrice.taxi }}</text>
                    <text>3.网约车出行费用：每公里￥{{ trafficPrice.online }}</text>
                </view>
            </template>
		</view>
		<view class="se-mt-30 se-py-30 se-px-30 se-bs se-bgc-white se-br-20">
			<u-radio-group size="18" v-model="payRadio" iconPlacement="right">
				<view class="se-flex-v-sb se-w-p-100" style="align-items: unset;">
					<u-radio name="2" activeColor="#ff7a31">
						<view class="se-flex se-flex-ai-c se-pt-20">
							<image class="se-w-35 se-h-30 se-mt-5" src="@/static/image/46662.png" mode="" onerror="this.src='@/static/image/wechat.png'"></image>
							<text class="se-c-black se-fs-30 se-ml-15">微信支付</text>
						</view>
					</u-radio>
					<u-radio name="1" activeColor="#ff7a31">
						<view class="se-flex se-flex-ai-c se-pb-20">
							<image class="se-w-30 se-h-25 se-mt-5" src="@/static/image/46518.png" mode="" onerror="this.src='@/static/image/user.png'"></image>
							<text class="se-c-black se-fs-30 se-ml-15">账户余额</text>
							<text class="se-c-text-third se-fs-28 se-ml-15">(余额：￥{{ amount }})</text>
						</view>
					</u-radio>
				</view>
			</u-radio-group>
		</view>
		<view class="se-mt-10 se-py-10 se-br-20 se-mb-160"
		style="display: flex;flex-direction: column;align-items: center;">
			<text class="se-c-66 se-fs-22">温馨提示，下单前请仔细查看下单需知</text>
			<view class="se-flex-h-fs se-br-40 se-mt-20 se-flex-ai-fs se-h-80 se-lh-80 se-ta-c se-fs-24 se-c-33"
				style="align-items: unset;">
				<u-checkbox :checked="checked" activeColor="#ff7a31" label-size="12" shape="circle"
					label="阅读并同意"></u-checkbox>
				<text class="se-c-orange" @click="show=true">《用户使用协议》</text>
			</view>
		</view>
		<view class="se-pos-fixed se-pos-lb se-bs-t se-flex se-flex-h-sb se-pb-60 se-pt-20 se-bgc-white se-w-vw-100">
			<view class="se-fs-32 se-c-black se-ml-30">
				<text class="se-fs-24">合计</text>
				<text class="se-c-orange">￥{{price}}元</text>
			</view>
			<view @click="payOrderCompany"
				class="se-mr-30 se-w-240 se-h-80 se-lh-80 se-ta-c se-c-white se-fs-32 se-br-40 se-bgc-orange">
				立即支付
			</view>
		</view>
		
		<!-- 免责声明组件 -->
		<disclaimer-modal ref="disclaimerModal" @cancel="onDisclaimerCancel" @confirm="onDisclaimerConfirm"></disclaimer-modal>
	</view>
</template>

<script>
	import {
		orderDetail,
		deleteOrder,
		confirmOrder,
		payOrderCompany,
		userInfo,
	} from "@/common/api.js"
    import position from "@/utils/position.js"
	import DisclaimerModal from "@/components/disclaimer/index.vue"
	export default {
		components: {
			DisclaimerModal
		},
		data() {
			return {
                amount: 0,
				payRadio: "2",
				orderId : 0,
				checked : 0,
				detail : {},
				insuranceChecked: true, // 保险选择框，默认选中

                // type 0企业发布招聘，企业不需要支付保险、交通费，由个人承担
                // type 1个人发布求职，企业承担保险费、交通费用

				// 出行价格定义
				trafficPrice: {
					bus: 2, // 公交/地铁单价
					taxi: 3, // 出租车每公里单价
					online: 2.5 // 网约车每公里单价
				},
                fare : 0,//出行费
                distance : 0,//距离
                farePerKm : 2,//每公里单价
			}
		},
		computed : {
			price(){
				// type 0企业发布招聘，企业不需要支付保险、交通费，由个人承担
				// type 1个人发布求职，企业承担保险费、交通费用
				let basePrice = Number(this.detail.payMoney) || 0;
				let premiumFee = this.insuranceChecked ? (Number(this.detail.premium) || 0) : 0;
				let trafficFee = Number(this.fare) || 0;
				
				if (this.detail.type == 1) {
					// 个人发布求职，企业承担保险费、交通费用
					return basePrice + trafficFee
				} else {
					// 企业发布招聘，企业不需要支付保险、交通费，由个人承担
					return basePrice;
				}
			},
		},
		onLoad(options) {
			this.orderId = options.orderId
		},
		onShow() {
			this.onOrderDetail()
			this.onUserInfo()
		},
		methods: {
			onUserInfo(){
				let params={}
				userInfo(params).then(response=>{
					this.amount=response.result.amount?response.result.amount:0
				}).catch(error=>{
					
				})
			},
			onOrderDetail() {
				let that = this
				let params = {
					orderId: that.orderId
				}
				orderDetail(params).then(response => {
					that.detail = response.result

                    that.calcDistance()
                    that.calcFare()

				}).catch(error => {
                    console.log(error)
				})
			},
            //计算距离
            calcDistance(){
                console.log('calcDistance-计算距离')
                let distance = 0;
                if (this.detail.type == 1) {
                    let seek = this.detail.employSeek
                    let company = this.detail.employAuthenticationCompany
                    distance = position.calculateDistance(seek.latitude, seek.longitude, company.latitude, company.longitude)
                }
                this.distance = distance;
            },
            //计算路费
            calcFare(){
                console.log('calcFare-计算费用')
                let fare = 0;
                if (this.detail.type == 1) {
                    // 个人发布求职，企业承担保险费、交通费用
                    let seek = this.detail.employSeek

                    if(!seek) return

                    // 如果交通方式为"无"或空，则不计算交通费
                    if (!seek.selectGo || seek.selectGo == '无' || seek.selectGo.trim() == '') {
                        this.fare = 0;
                        return;
                    }

                    // console.log(this.$store.state.data.configList);
                    
                    let configList = this.$store.state.data.configList

                    // if(seek.selectGo.includes('出租车')){
                    //     this.farePerKm = this.trafficPrice.taxi
                    // }else if(seek.selectGo.includes('网约车')){
                    //     this.farePerKm = this.trafficPrice.online
                    // }else if(seek.selectGo.includes('公交')){
                    //     this.farePerKm = this.trafficPrice.bus
                    // }

                    if(seek.selectGo.includes('出租车')){
                        this.farePerKm = configList.taxi_price
                    }else if(seek.selectGo.includes('网约车')){
                        this.farePerKm = configList.online_price
                    }else if(seek.selectGo.includes('公交')){
                        this.farePerKm = configList.bus_price
                    }

                    fare = this.farePerKm * this.distance;

                }
                this.fare = fare;
            },
			onDetail() {
				uni.navigateTo({
					url: "/pages_subpack/order-detail/index"
				})
			},
			onInsuranceChange(value) {
				if (!value) {
					// 取消选中保险时，先恢复选中状态，然后显示免责声明
					this.insuranceChecked = true;
					this.$nextTick(() => {
						this.$refs.disclaimerModal.open();
					});
				}
			},
			onDisclaimerCancel() {
				// 取消免责声明，重新选中保险
				this.insuranceChecked = true;
				// 强制更新视图
				this.$forceUpdate();
			},
			onDisclaimerConfirm() {
				// 确认免责声明，保持不选中保险
				this.insuranceChecked = false;
				// 强制更新视图
				this.$forceUpdate();
			},
			payOrderCompany() {
				
				let that = this
				
				if(that.checked.length==0){
					return uni.showToast({
						icon: "none",
						title: "请勾选隐私协议"
					})
				}

				let data = {
					orderId: this.orderId,
					payType: this.payRadio,
                    fare : this.fare || 0,//出行费
					buyInsurance: this.insuranceChecked // 新增参数，表示是否购买保险
				}

				payOrderCompany(data)
				.then(res => {
					if (res.code == 200) {
						if (data.payType == '2') {
							uni.requestPayment({
								provider: 'wxpay', // 服务提提供商
								timeStamp: res.result.timeStamp, // 时间戳
								nonceStr: res.result.nonceStr, // 随机字符串
								package: res.result.packageValue,
								signType: res.result.signType, // 签名算法
								paySign: res.result.paySign, // 签名
								success: function(res) {
									uni.navigateBack(-1)
								},
								fail: function(err) {
									uni.showToast({
										icon: 'none',
										title: "支付失败"
									})
								}
							});
						} else if (res.code == 200) {
							uni.navigateBack(-1)
						}
					}
				})
			},
		}
	}
</script>

<style>
</style>