用工小程序前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

295 lines
11 KiB

<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.image || detail.jobHeadImg" 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=""></image>
<text class="se-c-black se-fs-32 se-ml-20">{{ detail.workUser }}</text>
<text class="se-c-black se-fs-32 se-ml-20">{{ 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=""></image>
<text class="se-c-black se-fs-32 se-ml-20">{{ 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">
<image class="se-w-30 se-h-40" 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">¥{{ detail.premium }}</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=""></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);">
从师傅出发地到用工目的地总全程为5公里,{{ 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="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=""></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>
<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=""></image>
<text class="se-c-black se-fs-30 se-ml-15">微信支付</text>
</view>
</u-radio>
</view>
</u-radio-group>
</view>
<view class="se-mt-10 se-py-10 se-br-20"
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>
</view>
</template>
<script>
import {
orderDetail,
deleteOrder,
confirmOrder,
payOrderCompany,
userInfo,
} from "@/common/api.js"
import position from "@/utils/position.js"
export default {
data() {
return {
amount: 0,
payRadio: "1",
orderId : 0,
checked : 0,
detail : {},
// 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 = Number(this.detail.premium) || 0;
let trafficFee = Number(this.fare) || 0;
if (this.detail.type == 1) {
// 个人发布求职,企业承担保险费、交通费用
return basePrice + premiumFee + 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
// 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"
})
},
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,//出行费
}
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>