zhywpt-sp/subpackage/search/refund-info-run-water/apply.vue

<template>
	<view class="page-content">
		<view class="bg">
			<view class="title"> 基本信息 </view>
			
			<u-form label-width="230" :model="state.formData" ref="uForm" :label-style='labelStyle'>
				<u-form-item label="姓名" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
					<u-input v-model="state.userName" placeholder='请输入姓名' inputAlign="right" disabled/>
				</u-form-item>
				<u-form-item label="手机号" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
					<u-input placeholder='请填写手机号' v-model="state.userMobile" inputAlign="right" disabled/>
				</u-form-item>
				<u-form-item label="是否跨省" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
					<custom-select-data v-model="state.formData.multiProvince" :dataList="isMultiProvince" :disabled="onlyApplyIsInput"></custom-select-data>
				</u-form-item>
				<u-form-item label="ETC卡号" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
					<u-input placeholder='请填写ETC卡号' v-model="state.formData.cardId" inputAlign="right" :disabled="onlyApplyIsInput" />
				</u-form-item>
				<u-form-item label="车牌号" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
					<car-number-input @numberInputResult="carNumber" :defaultStr="state.formData.vehiclePlate" :isClick="!onlyApplyIsInput"></car-number-input>
				</u-form-item>
				<u-form-item label="车型" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
				<custom-select-dic v-model="state.formData.exVehClass" :disabled="onlyApplyIsInput" dicName="VEHICLE_TYPE" placeholder="请选择车型"></custom-select-dic>
				</u-form-item>
				<u-form-item label="车牌颜色" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
					<u-input v-model="state.vehiclePlateColorStr" :disabled="onlyApplyIsInput" input-align='right'  placeholder="请选择车牌颜色"/>
				</u-form-item>
				<u-form-item label="入站口" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
					<u-input v-model="state.formData.enTollStationName" :disabled="onlyApplyIsInput" input-align='right' placeholder="请输入入站口"/>
				</u-form-item>
				<u-form-item label="出站口" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
					<u-input v-model="state.formData.exTollStationName" :disabled="onlyApplyIsInput" input-align='right' placeholder="请输入出站口"/>
				</u-form-item>
				<u-form-item label="入口时间" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
					<uni-datetime-picker ref="filterDate" v-model="state.formData.enTime" :disabled="onlyApplyIsInput" type="datetime" />
				</u-form-item>
				<u-form-item label="出口时间" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
					<uni-datetime-picker ref="filterDate" v-model="state.formData.exTime" :disabled="onlyApplyIsInput" type="datetime" />
				</u-form-item>
				<u-form-item label="收费金额" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
					<view class="flex-input">
						<u-input v-model="state.formData.tollAmount" type="number" input-align='right' :disabled="onlyApplyIsInput" placeholder="请输入收费金额"/>
						<text class="unit">元</text>
					</view>
				</u-form-item>
				<u-form-item label="支付类型" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
					<custom-select-dic v-model="state.formData.unionPayTransFlag" :disabled="onlyApplyIsInput" dicName="PROVINCE_PAY_TYPE" placeholder="请选择支付类型"></custom-select-dic>
				</u-form-item>
				<u-form-item label="申请退费金额" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
					<view class="flex-input">
						<u-input v-model="state.formData.fee" type="number" input-align='right' placeholder="请输入申请退费金额"/>
						<text class="unit">元</text>
					</view>
				</u-form-item>
				<u-form-item label="退费原因" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
				</u-form-item>
				<u-input v-model="state.formData.refundReason" type="textarea" placeholder="请输入退费原因"/>
				<u-form-item label="退费信息" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
					<u-input v-model="state.chooseBankInfo" type="select" placeholder='请输入开户行' @click="chooseBank" inputAlign="right"/>
				</u-form-item>
			</u-form>
		</view>
		
		<view class="bg">
			<view class="title">支付凭证<text class="upload-num">({{state.formData.payVoucherUrls.length}}/6)</text></view>
			<view class="image-list">
				<view class="image-out" v-for="(item, index) in state.formData.payVoucherUrls">
					<image
						:key="index"
						class="icon"
						:src="getFullImageUrl(item)"
						:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"
						mode="aspectFill"
					></image>
					<view class="delete" @click="delectOption(index)"><u-icon name="close-circle-fill" color="#fa3534" size="30"></u-icon></view>
				</view>
				<view class="image-out" @click="uploadOtherFile">
					<image
						v-if="state.formData.payVoucherUrls.length < 6"
						class="icon"
						:src="`${$imgUrl}issuance/weituo.png`"
						:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}">
					</image>
				</view>
			</view>
		</view>
		
		<view class="action">
			<button type="default" class="ui-btn" @click="submit()">
				提交
			</button>
		</view>
	</view>
		
	<!-- 选择车牌颜色 -->
	<u-select v-model="show2" :list="state.refundInfoList" @confirm="changeRefundInfo"></u-select>
</template>

<script setup lang="ts">
	import { reactive, ref, computed } from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import { getItem, StorageKeys } from "@/utils/storage";
	import { checkStr, navTo, uploadFile, msg, getFullImageUrl, replaceBaseImageUrl, maskBankCard } from "@/utils/utils";
	import { requestNew } from "@/utils/network/request.js";
	import { submitEtcTransactionApply, getUserMsg, getRefundInfoPage } from "@/utils/network/api.js";
	import { useUserStore } from "@/stores/user";
	import { commonStore } from '@/stores/common.js'
	import { getCodeName } from '@/datas/queryKey.js'
	import carNumberInput from "@/components/car-number-input/car-number-input.vue";
	import { getVehiclePlateColorPai } from '@/datas/vehiclePlateColor'
	
	const commonStoreUse = commonStore()
	const { getSelectIndex, setIsRefresh } = commonStoreUse
	
	const refreshKey = 'runWaterRefundInfo'
	const show2 = ref(null)
	
	const isMultiProvince = [
		{name: '单省', id: 0},
		{name: '跨省', id: 1},
	]
	
	interface uploadFileParams{
		imageUrl: string
	}
	
	const labelStyle = {
		color: "#004576",
		fontSize: "28rpx",
	}
	
	const leftIcon = {
		height: '100%',
		width: '8rpx',
		display: 'flex',
		'align-items': 'center',
		'margin-right': '4rpx',
	}
	
	const state = reactive({
		onlyApply: false, // 是否是单独申请
		userName: '',
		userMobile: '',
		formData: {
			cardId: '',
			vehiclePlate: '',
			vehiclePlateColor: '',
			payVoucherUrls: [],
			applyType: '1', // 1：省中心流水申请 2：自主申请
			bankIdCode: '',
			bankName: '',
			bankBranchName: '',
			enTime: '', // 入口时间
			enTollStationName: '', // 入口站名
			exTime: '', // 出口时间
			exTollStationName: '', // 出口站名
			multiProvince: 0, // 跨省标识，单省/多省--------
			tollAmount: '',
			fee: '', // 申请退费金额
			unionPayTransFlag: '4', // 支付类型 1 现金 2 其他第三方账户支付 3 银联卡支付 4 ETC支付 6 支付宝 7 微信 0 ETC支付 -1 未知
			exVehClass: '', // 车型
			refundReason: '', // 退费原因
			
			ownerId: '',
			passId: '',
			ygzListNo: '',
			ownerName: '',
			roadName: '',
			road: '',
			manageName: '',
			manageUnit: '',
			hexCardId: '',
			isFind: ''
		},
		range: [],
		bankProvinceName: '',
		vehiclePlateColorStr: '',
		colorRange: [],
		chooseBankInfo: '',
		refundInfoList: []
	})
	
	// 单独申请是否可输入
	const onlyApplyIsInput = computed(() => {
		return state.formData.applyType !== '2'
	})
	
	onLoad(({jsonData, onlyApply}) => {
		if (jsonData) {
			let data = JSON.parse(jsonData)
			state.formData.vehiclePlate = data.exVehPlate
			state.formData.vehiclePlateColor = data.vehiclePlateColor
			state.vehiclePlateColorStr = getVehiclePlateColorPai(data.vehiclePlateColor)
			if (onlyApply && onlyApply === '1') {
				state.onlyApply = true
				state.formData.applyType = '2'
			} else {
				state.formData.cardId = data.cardId
				state.formData.enTime = data.enTime
				state.formData.enTollStationName = data.enTollStationName
				state.formData.exTime = data.exTime
				state.formData.exTollStationName = data.exTollStationName
				state.formData.tollAmount = data.tollAmount
				state.formData.multiProvince = data.multiProvince
				// state.formData.fee = ''
				state.formData.unionPayTransFlag = data.unionPayTransFlag
				state.formData.exVehClass = data.exVehClass
				
				state.formData.ownerId = data.ownerId
				state.formData.passId = data.passId
				state.formData.ygzListNo = data.ygzListNo
				state.formData.ownerName = data.ownerName
				state.formData.roadName = data.roadName
				state.formData.road = data.road
				state.formData.manageName = data.manageName
				state.formData.manageUnit = data.manageUnit
				state.formData.hexCardId = data.hexCardId
				state.formData.isFind = data.isFind
			}
			
		}
		getRefundInfoList()
		getColorList()
		getUserInfo()
	})
	
	onShow(() => {
	})
	
	// 获取当前用户信息详情
	const getUserInfo = () => {
		let option = {
			type: 2,
			data: {},
			method: "POST",
			showLoading: true,
		}
		requestNew(getUserMsg, option).then(res => {
			state.userName = res.userName
			state.userMobile = res.mobile
		})
	}
	
	// 获取退费信息列表
	const getRefundInfoList = () => {
		let option = {
			type: 2,
			data: {pageSize: 50, staffId: 'opId'},
			method: "POST",
			showLoading: true,
		}
		requestNew(getRefundInfoPage, option).then(res => {
			const data = res.result ? res.result.map(item => {
				item.bankNameStr = getCodeName('BANK_TYPE', item.bankName)
				return {
					...item,
					label: `${item.bankNameStr}(${maskBankCard(item.bankIdCode)})`,
					value: item.id
				}
			}) : [];
			state.refundInfoList = data
		})
	}
	
	const getColorList = () => {
		let getColor = getItem('key')['VEHICLE_COLOR_TYPE'];
		for (var k = 0; k < getColor.length; k++) {
			let obj = {};
			obj['value'] = getColor[k]['code']
			obj['label'] = getColor[k]['name']
			state.colorRange.push(obj)
		}
	}
	
	const submit = () => {
		if (!paramsVerify()) return;
		let params = JSON.parse(JSON.stringify(state.formData))
		params.tollAmount = params.tollAmount * 100
		params.fee = params.fee * 100
		
	 	const options = {
			type: 2,
			data: params,
			method: "POST",
			showLoading: true,
		}
		//调用方式
		requestNew(submitEtcTransactionApply, options).then(res => {
			uni.redirectTo({
				url: '/pages/common/submit-result?back=1&tipText=' + '预计1-3日完成资料审核'
			})
		})
	}
	
	// 选择退费银行卡信息
	const chooseBank = () => {
		show2.value = true
	}
	
	const selectProvince = () => {
		uni.navigateTo({
			url: '/pages/common/select-data-list'
		})
	}
	
	// 字段校验
	const paramsVerify = () => {
		let isVerify = true;
		if(!state.formData.cardId){
			msg('请输入ETC卡号');
			isVerify = false;
		} else if(!state.formData.vehiclePlate){
			msg('请输入车牌号');
			isVerify = false;
		} else if(!state.formData.exVehClass){
			msg('请选择车型');
			isVerify = false;
		} else if(!state.formData.vehiclePlateColor){
			msg('请选择车牌颜色');
			isVerify = false;
		} else if(!state.formData.enTollStationName){
			msg('请输入入站口');
			isVerify = false;
		} else if(!state.formData.exTollStationName){
			msg('请输入出站口');
			isVerify = false;
		} else if(!state.formData.enTime){
			msg('请输入入口时间');
			isVerify = false;
		} else if(!state.formData.exTime){
			msg('请输入出口时间');
			isVerify = false;
		} else if(!state.formData.tollAmount){
			msg('请输入收费金额');
			isVerify = false;
		} else if(!state.formData.unionPayTransFlag){
			msg('请选择支付类型');
			isVerify = false;
		} else if(!state.formData.fee){
			msg('请填写申请退费金额');
			isVerify = false;
		} else if (state.formData.fee > state.formData.tollAmount){
			msg('请填写申请退费金额');
			isVerify = false;
		} else if (!state.formData.refundReason) {
			msg('请填写退费原因');
			isVerify = false;
		} else if (!state.formData.bankIdCode || !state.formData.bankName || !state.formData.bankBranchName) {
			msg('请选择退费信息');
			isVerify = false;
		} else if (!state.formData.payVoucherUrls) {
			msg('请上传支付凭证');
			isVerify = false;
		}
		return isVerify;
	}
	
	
	// 授权证书上传
	const uploadOtherFile = () => {
		uni.chooseImage({
			count: 1, // 只能选取一张照片
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["camera", "album"], //从相册选择
			success: (res) => {
				uploadFile(res.tempFilePaths[0]).then((data: uploadFileParams) => {
					state.formData.payVoucherUrls.push(data.imageUrl)
				})
			},
		});
	}
	
	const delectOption = (index) => {
		state.formData.payVoucherUrls.splice(index, 1)
	}
	
	const changeColor = (item: any) => {
		state.formData.vehiclePlateColor = item[0].value
		state.vehiclePlateColorStr = item[0].label
	}
	
	const changeRefundInfo = (item: any) => {
		let chooseInfo = item[0]
		state.chooseBankInfo = chooseInfo.label
		let info = state.refundInfoList.find(obj => obj.value === chooseInfo.value)
		state.formData.bankIdCode = info.bankIdCode
		state.formData.bankName = info.bankName
		state.formData.bankBranchName = info.bankBranchName
	}
	
	//车牌号输入
	const carNumber = (val : any) => {
		state.formData.vehiclePlate = val.trim();
	};
</script>

<style lang="scss" scoped>
	.bg{
		background-color: white;
		margin:0 32rpx;
		margin-top: 20rpx;
		border-radius: 12rpx;
		border: 1px solid #FFFFFF;
		padding: 20rpx;
	}
	.card {
		display: flex;
		margin: 0 20rpx;
		align-items: center;
	}
	
	.picture-wrapper {
		margin-top: 30rpx;
	
		.bg {
			background: #F5F9FB;
			border-radius: 10rpx;
			padding: 40rpx 30rpx;
			display: flex;
			// align-items: center;
			justify-content: space-between;
			.title{
				color: #01243A;
			}
			.name {
				padding-top: 30rpx;
				font-size: 32rpx;
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 500;
				color: #111;
				line-height: 34rpx;
			}
	
			.value {
				margin-top: 20rpx;
				font-size: 22rpx;
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 400;
				color: #999999;
				line-height: 24rpx;
			}
	
			.tip {
				margin-top: 20rpx;
				text-align: center;
				width: 100rpx;
				height: 30rpx;
				border-radius: 6rpx;
				border: 1rpx solid #CCB375;
	
				.tip-value {
					font-size: 20rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #CCB375;
					line-height: 30rpx;
					opacity: 1;
				}
			}
		}
	
		.icon {
			width: 304rpx;
			height: 190rpx;
			background-image: var(--bgimg);
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}
	}
	.action {
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 20rpx;
		padding: 24rpx 0 calc(24rpx + env(safe-area-inset-bottom));
	}
	::deep.uni-select {
		font-size: 13px;
		height: 30px;
		line-height: 30px;
	}
	.choice-takePhoto-wrap {
		width: 100%;
		height: 100vh;
		background-color: rgba(127, 127, 127, 0.2);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 11111;
	}
	.choice-takePhoto {
		position: absolute;
		bottom: 0;
		background-color: white;
		width: 100%;
		border-radius: 20rpx 20rpx 0 0;
	}
	
	.choice-takePhoto>view:first-child {
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 1rpx solid rgba(127, 127, 127, 0.3);
		background-color: white;
	}
	
	.choice-takePhoto>view:last-child {
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		border-top: 6rpx solid rgba(127, 127, 127, 0.1);
		background-color: white;
	}
	
	.choice-takePhoto>view {
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		background-color: white;
	}
	
	.choice-takePhoto-wrap {
		width: 100%;
		height: 100vh;
		background-color: rgba(127, 127, 127, 0.2);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 11111;
	}
	.car-type{
		width: 400rpx;
		height: 68rpx;
		margin: 50rpx auto;
		border-radius: 68rpx;
		border: 1px #CCB375 solid;
		font-size: 28rpx;
		overflow: hidden;
		display: flex;
		.car-type-item{
			width: 50%;
			height: 100%;
			line-height: 68rpx;
			text-align: center;
			color: #CCB375;
			flex-shrink: 0;
			flex-grow: 0;
		}
		.active{
			color: #FFFFFF;
			background-color: #CCB375;
		}
	}
	.disabled-text{
		color: #999999;
	}
	.uni-list{
		width: 88%;
		margin: 24rpx auto;
		.left-owner-radio{
			margin-right: 12rpx;
		}
	}
	.page-content{
		position: relative;
		min-height: 100vh;
	}
	.flex-input{
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		.unit{
			color: #01243A;
			font-size: 26rpx;
			width: 60rpx;
			text-align: center;
		}
	}
	.image-list{
		display: flex;
		flex-wrap: wrap;
		margin-top: 24rpx;
		.icon{
			width: 180rpx;
			height: 180rpx;
			margin: 0 24rpx 24rpx 0;
		}
		.image-out{
			width: 180rpx;
			height: 180rpx;
			margin: 0 24rpx 24rpx 0;
			position: relative;
			.delete{
				position: absolute;
				right: 0;
				top: 0;
			}
		}
	}
	.upload-num{
		color: #999999;
		font-size: 26rpx;
		margin-left: 12rpx;
	}
</style>