employ-front/pages_subpack/payment/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="
                        items.employJob && 
                        items.employJob.image" mode="aspectFill"></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">{{items.title}}</view>
					<view class="se-fs-24 se-c-text-third se-display-ib">所属行业:{{items.categoryOne}}</view>
					<!-- <view class="se-fs-24 se-c-text-third se-display-ib">所属工种:中午搬运</view> -->
					<view class="se-fs-24 se-c-text-third se-display-ib">所属工种:{{items.categoryTwo}}</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">{{items.workName}}</text>
			<text class="se-c-black se-fs-32 se-ml-20">{{items.workPhone}}</text>
		</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">
			<text class="se-c-black se-fs-28">联系地址：{{items.workAddress}}</text>
		</view>
		<view class="se-py-20 se-mt-10">
			<view class="se-flex se-flex-ai-c se-pb-10">
				<view class="line-orange"></view>
				<view class="se-ml-10 se-fs-30 se-c-black se-fw-5">
					购买保险(必买)
				</view>
			</view>
		</view>
		<view class="se-mt-10 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">(余额：￥{{myMoney}})</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">
			<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-group @change="checkboxChange" v-model="checked">
					<u-checkbox name="true" activeColor="#ff7a31" label-size="12" shape="circle" label="阅读并同意"></u-checkbox>
				</u-checkbox-group>
				<!-- <u-checkbox v-model="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" @click="onDetail()">
				<text class="se-fs-24">合计</text>
				<text class="se-c-orange">￥{{items.premium}}元</text>
			</view>
			<view @click="onPay()" 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>
		<u-popup :show="show" :custom-style="{alignItems:'center'}" mode="center" bg-color="transparent">
			<view class="se-w-600  se-bgc-white se-br-40 se-p-40">
				<view class="se-flex se-flex-h-c se-fs-34 se-fw-6 se-c-black se-mt-0">
					用户使用协议
				</view>
				<view class="se-lh-40 se-mt-40 se-fs-24 se-c-99">
					<u-parse :content="getValueByName('yhsyxx')"></u-parse>
				</view>
				<view class="se-flex se-flex-h-sb se-mt-40">
					<view @click="show=false" class="se-br-20 se-flex-1 se-flex-h-c se-h-80 se-lh-80 se-ta-c se-fs-32 se-c-white se-bgc-orange">
						<text>确认</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getTaskById,orderTask,orderDetail,userInfo,payOrder
	} from "@/common/api.js"
	export default{
		data(){
			return{
				show:false,
				id:"",
				checked:[],
				myMoney:"",//账户余额
				items:{},
				amount:"9.9",
				payRadio:"1",
				sysList:[]
			}
		},
		onLoad(options) {
			// this.sysList = uni.getStorageSync('sysList')
			console.info(options)
			this.id = options.id
			this.getOrderDetail()
		},
		onShow() {
			this.onUserInfo()
		},
		methods:{
			getValueByName(name) {
				const item = this.sysList.find((item) => item.name == name);
				return item ? item.value : "";
			},
			onUserInfo(){
				let params={}
				userInfo(params).then(response=>{
					console.info("userInfo",response)
					this.myMoney=response.result.amount?response.result.amount:0
				}).catch(error=>{
					
				})
			},
			checkboxChange(n) {
				console.log('change', n);
			},
			getOrderDetail(){
				orderDetail({orderId:this.id}).then(response=>{
					console.info('orderDetail',response)
					this.items = response.result
				}).catch(error=>{
					
				})
			},
			onPay(){
				let that = this
				console.info(that.checked)
				if(that.checked.length==0){
					return uni.showToast({
						icon: "none",
						title: "请勾选隐私协议"
					})
				}
				
				let data = {
					orderId : that.id,
					payType : that.payRadio,
				}
				
				// if(that.payRadio==1){
					payOrder(data).then(res=>{
						
						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) {
									that.onDetail();
								},
								fail: function (err) {
									uni.showToast({
										icon:'none',
										title:"支付失败"
									})
								}
							});
						}else if(res.code == 200){
							that.onDetail();
						}
						
						
					}).catch(error=>{
						
					})
				// }else if(that.payRadio==2){
				// 	payOrder({orderId:that.id}).then(response=>{
				// 		console.info("payOrder",response)
				// 		uni.requestPayment({
				// 		    provider: "wxpay",
				// 			nonceStr: response.result.nonceStr,
				// 			package: response.result.package,
				// 			timeStamp: response.result.timeStamp,
				// 			signType: response.result.signType,
				// 			paySign: response.result.paySign,
				// 		    success(res) {
				// 				that.$u.toast("付款成功！")
				// 				that.onDetail();
				// 			},
				// 		    fail(err) {
				// 				console.info(err)
				// 				console.log('支付失败',err);
				// 				uni.showToast({
				// 					icon:'none',
				// 					title:"支付失败"
				// 				})
				// 			}
				// 		})
				// 	}).catch(error=>{
						
				// 	})
				// }
				
			},
			onDetail(){
				uni.redirectTo({
					url:"/pages_subpack/order-detail/index?orderId="+this.id
				})
			}
		}
	}
</script>

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