miniapp/pages/handlecase/component/payList.vue

<template>
	<view class="from">
		<uni-forms ref="form" :modelValue="formData" :rules="rules">
			<view class="box">
				<uni-forms-item label="案件编号：" name="caseNum" label-width="120px" required>
					<uni-easyinput :inputBorder="false" :disabled='true' v-model="formData.caseNum" placeholder="" />
				</uni-forms-item>
				<uni-forms-item label="申请人：" name="applicantName" label-width="120px" required>
					<uni-easyinput :inputBorder="false" :disabled='true' v-model="formData.affiliate.applicationName"
						placeholder="" />
				</uni-forms-item>
				<uni-forms-item label="被申请人：" name="respondentName" label-width="120px" required>
					<uni-easyinput :inputBorder="false" :disabled='true' v-model="formData.affiliate.respondentName"
						placeholder="" />
				</uni-forms-item>
				<uni-forms-item label="案件标的：" name="caseSubjectAmount" label-width="120px" required>
					<uni-easyinput :inputBorder="false" :disabled='true' v-model="formData.caseSubjectAmount"
						placeholder="" />
				</uni-forms-item>
				<uni-forms-item label="应缴费用：" name="feePayable" label-width="120px" required>
					<uni-easyinput :inputBorder="false" :disabled='true' v-model="formData.feePayable" placeholder="" />
				</uni-forms-item>
			</view>
		</uni-forms>
		<uni-forms-item label="缴费方式">
			<uni-data-checkbox v-model="payType" :localdata="payTypes" @change="changeType" />
		</uni-forms-item>
		<uni-forms-item label="缴费平台" v-if="payType == 0">
			<uni-data-checkbox v-model="payPlatform" :localdata="payPlatforms" @change="changePayType" />
		</uni-forms-item>
		<div class="payImg" v-if="payType == 0">
			<canvas canvas-id="qrcode" v-show="qrShow" style="width: 300rpx;margin: 0 auto;" />
		</div>
		<div class="payTitle" v-if="payType == 0">{{ payMain }}</div>
		<uni-forms-item label="上传证据" name="headImage">
			<uni-file-picker ref="files" :auto-upload="false" return-type='object' v-model="fileList"
				file-mediatype="all" @select="select" :limit='1' />
		</uni-forms-item>
		<button type="primary" @click="submitPay">确认提交</button>
	</view>
</template>

<script>
	import {
		selectById
	} from '../../../api/handlecase/index.js'
	import {
		casePay,
		confirmPayment
	} from '../../../api/pay/index.js'
	import moment from 'moment'
	import uQRCode from '../../common/uqrcode.js'
	import {
		getToken
	} from '@/utils/auth'
	import config from '@/config'
	const baseUrl = config.baseUrlTJ
	const app = getApp()
	export default {
		data() {
			return {
				formData: {},
				selectFlag: false,
				rules: {},
				payPlatforms: [{
					text: '微信',
					value: 0
				}, {
					text: '支付宝',
					value: 1
				}, ],
				payPlatform: null,
				payType: 1,
				payTypes: [{
					text: '线上缴费',
					value: 0
				}, {
					text: '线下缴费',
					value: 1
				}, ],
				payMain: '',
				qrShow: false,
				tempFilePaths: null,
				fileList: {},
				submitForm: {
					payType: 1,
					payOrderList: [],
					caseId: null
				}
			}
		},
		methods: {
			/**获取案件缴费信息*/
			getData(parms) {
				selectById(parms).then(res => {
					this.formData = res.data
				})
			},
			/**生成二维码*/
			qrcode(url) {
				this.qrShow = true
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: url,
					size: 150,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {}
				})
			},
			/**选择缴费方式*/
			changeType(val) {
				this.submitForm.payType = val.detail.value;
			},
			/**文件上传*/
			select(e) {
				this.tempFilePaths = e.tempFilePaths;
				// loading
				uni.showLoading({
					title: '上传中'
				});
				uni.uploadFile({
					url: baseUrl + '/common/upload',
					filePath: this.tempFilePaths[0],
					header: {
						Authorization: getToken() || '',
					},
					formData: {
						annexType: 4,
						id: this.formData.id
					},
					name: 'file',
					success: (res) => {
						let {
							data
						} = res
						data = JSON.parse(data);
						this.submitForm.payOrderList.push({
							annexId: data.annexId,
							annexName: data.fileName
						});
						// console.log(this.submitForm, "OOOOOOOOOOOOOOOOOOOOOOOOO");
						uni.showToast({
							title: '上传成功',
							icon: 'none',
							duration: 1000
						})
						uni.hideLoading();
					},
					fail: (err) => {
						uni.showToast({
							title: '上传失败',
							icon: 'none',
							duration: 1000
						})
						uni.hideLoading()
					}
				})
			},
			/**选择缴费平台*/
			changePayType(val) {
				if (this.formData.feePayable == 0 || !this.formData.feePayable) {
					uni.showToast({
						title: '此案件无需缴费',
						icon: 'none',
						duration: 1000
					})
					return;
				}
				let payType = "";
				if (val.detail.value == 0) {
					payType = "wxpay";
					this.payMain = "请使用微信扫二维码支付";
				} else if (val.detail.value == 1) {
					payType = "alipay";
					this.payMain = "请使用支付宝扫二维码支付";
				}
				casePay({
					totalFee: this.formData.feePayable * 100,
					caseId: this.formData.id,
					tradeType: "native",
					platform: payType,
				}).then((res) => {
					this.qrcode(res.data.code_url);
				});
			},
			confirmPaymentFn(data) {
				confirmPayment(data).then(res => {
					uni.showToast({
						title: '确认成功',
						icon: 'none',
						duration: 1000
					});
					uni.navigateBack({
						delta: 1
					})
				})
			},
			/**确认缴费*/
			submitPay() {
				this.submitForm.caseId = this.formData.id;
				this.submitForm.caseFlowId = this.formData.caseFlowId;
				this.confirmPaymentFn(this.submitForm);
			}
		},
		onLoad(data) {
			this.getData({
				id: data.id
			});
		},
	}
</script>

<style>
	.from {
		padding: 20rpx;
	}

	.payImg,
	.payTitle {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.select-picker {
		display: flex;
		box-sizing: border-box;
		flex-direction: row;
		align-items: center;
		border: 1px solid #DCDFE6;
		border-radius: 8rpx;
		width: 100%;
		height: 100%;
		padding: 0 24rpx;
		font-size: 28rpx;
	}
</style>