assess-app/page_task/apply/apply.vue

<template>
	<view class="total-page page-env-160 page-box task-bg">
		<Nav :title="title" :genre="4" is_fixed :opacity="scrollTop" :fixedHeight="fixedHeight"
			:navsHeight="fixedHeight" :bgHeight="fixedHeight">
			<!-- 步鄹条start -->
			<view class="task-tabs" :style="{top:`${$tools.topHeight()}px`}">
				<view class="row-justify-sb m-tb20 step-content">
					<view class="column-c" style="text-align: center;">
						<image class="wh-45 m-b16"
							:src="`https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/information/${step === 1?'double':'correct'}.png`"
							mode="aspectFill"></image>
						<text class="size-24"
							:class="step === 1?'color-0FB160 sys-weight-600':'sys-weight-400'">基本信息</text>
					</view>
					<view class="line"></view>
					<view class="column-c justify-center">
						<image class="wh-45 m-b16"
							:src="`https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/information/${stepTwo[step-1]}.png`"
							mode="aspectFill"></image>
						<text class="size-24"
							:class="step === 2?'color-0FB160 sys-weight-600':'sys-weight-400'">抵押信息</text>
					</view>
				</view>
			</view>
			<!-- 步鄹条end -->
		</Nav>
		<view class="" :style="[{top:`${$tools.topHeight() + fixedHeight}px`}]">
			<!-- 基本信息start -->
			<view class="m-t20 m-lr30 text-color-12" v-if="step === 1">
				<view class="sys-background-fff r-20 p-lr30 p-t30">
					<text class="size-30 sys-weight-600'">基本信息</text>
					<view class="m-t20">
						<en-input label="贷款额度" v-if="verifyKey('quota')" v-model="appliesInfo.quota" type="digit"
							placeholder="请输入贷款金额" rightText="万元"></en-input>
						<en-radio name="是否涉农" v-if="verifyKey('is_farming')" v-model="appliesInfo.is_farming"
							:list="farmingData"></en-radio>
						<en-select label="贷款形式" v-if="verifyKey('loan_form')" v-model="appliesInfo.loan_form"
							:local-data="loanFormArr" placeholder="请选择贷款形式"></en-select>
						<en-select label="贷款类别" v-if="verifyKey('loan_type')" v-model="appliesInfo.loan_type"
							:local-data="loanTypeArr" placeholder="请选择贷款类别"></en-select>
						<en-select :valueType="'2'" :map="{ text: 'name', value: 'id'}" label="投向行业"
							v-if="verifyKey('loan_industry')" v-model="appliesInfo.loan_industry"
							:local-data="loanIndustryArr" placeholder="请选择投向行业"></en-select>
						<en-select label="企业类型" v-if="verifyKey('enterprise_type')"
							v-model="appliesInfo.enterprise_type" :local-data="enterpriseTypeArr"
							placeholder="请选择企业类型"></en-select>
						<en-date label="预计用款时间" v-if="verifyKey('use_date')" v-model="appliesInfo.use_date"
							placeholder="选择预计用款时间"></en-date>
						<en-radio name="材料费" v-if="verifyKey('pay_status')" v-model="appliesInfo.pay_status"
							:list="payData" :no-box="true" :is_border="false"></en-radio>
					</view>
				</view>
			</view>
			<!-- 基本信息end -->
			<!-- 抵押信息start -->
			<view id="apply-info" class="m-t20 m-lr30 text-color-12" v-if="step === 2">
				<view :id="`info${index}`" class="sys-background-fff r-20 p-20 m-b20"
					v-for="(applyItem,index) in appliesInfo.apply_data" :key="index">
					<view class="sys-from-background-color p-20 r-20 size-26" v-if="editIndex!==index">
						<view class="">
							<view class="row-justify-sb center">
								<text class="size-28 sys-weight-600">抵押信息({{index+1}})</text>
								<view class="row-c sys-background-fff r-100 p-lr30 p-tb10">
									<image class="wh-30"
										src="https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/information/edit.png"
										mode="aspectFill" @click="onEditInfo(index)"></image>
									<view class="title-line m-lr20"></view>
									<image class="wh-30"
										src="https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/information/delete.png"
										mode="aspectFill" @click="onDeleteInfo(index)">
									</image>
								</view>
							</view>
							<view class="row-c p-tb30">
								<view class="text-color-666"><text></text>申请类型：</view>
								<text>{{applyItem.apply_type*1===1?'抵押':'买卖'}}</text>
							</view>
							<view class="" v-if="applyItem.apply_type*1===2">
								<view class="row-c p-tb30" v-if="verifyKey('transaction')">
									<view class="text-color-666"><text></text>成交价：</view>
									<text>{{applyItem.transaction}}万</text>
								</view>
								<view class="row-c " v-if="verifyKey('pricing')">
									<view class="text-color-666"><text></text>定金：</view>
									<text>{{applyItem.pricing}}</text>
								</view>
								<view class="row-c p-tb30" v-if="verifyKey('supervise')">
									<view class="text-color-666"><text></text>资金监管：</view>
									<text>{{applyItem.supervise}}</text>
								</view>
								<view class="row-c p-tb30" v-if="verifyKey('reply_type')">
									<view class="text-color-666"><text></text>批复类型：</view>
									<text>{{applyItem.reply_type}}</text>
								</view>
								<view class="row-c p-tb30" v-if="verifyKey('intermediary')">
									<view class="text-color-666"><text></text>成交中介：</view>
									<text>{{applyItem.intermediary}}</text>
								</view>
							</view>
						</view>
						<view class="">
							<text class="size-28 sys-weight-600">绑定资产信息</text>
							<view class="row-c p-tb30">
								<view class="text-color-666"><text></text>绑定资产：</view>
								<text>绑定资产</text>
							</view>
						</view>

						<view class="">
							<view v-for="(repaymentItem,repaymentIndex) in applyItem.repayment_data">
								<text
									class="size-28 sys-weight-600">{{applyItem.apply_type*1===1?'还款信息':'监管银行卡信息'}}</text>
								<view class="row-c p-tb30">
									<view class="text-color-666"><text></text>还款金额：</view>
									<text>{{repaymentItem.money}}万</text>
								</view>
								<view class="row-c ">
									<view class="text-color-666"><text></text>银行卡号：</view>
									<text>{{repaymentItem.bank_num}}</text>
								</view>
								<view class="row-c p-tb30">
									<view class="text-color-666"><text></text>所属银行：</view>
									<text>{{repaymentItem.bank_name}}</text>
								</view>
							</view>
						</view>
						<view class="">
							<view v-for="(loanItem,loanIndex) in applyItem.loan_data">
								<text class="size-28 sys-weight-600">放款账户信息</text>
								<view class="row-c p-tb30">
									<view class="text-color-666"><text></text>批复金额：</view>
									<text>{{loanItem.money}}万</text>
								</view>
								<view class="row-c ">
									<view class="text-color-666"><text></text>银行卡号：</view>
									<text>{{loanItem.bank_num}}</text>
								</view>
								<view class="row-c p-t30">
									<view class="text-color-666"><text></text>所属银行：</view>
									<text>{{loanItem.bank_name}}</text>
								</view>
							</view>
						</view>
					</view>
					<view v-else>
						<view class="">
							<text class="size-30 sys-weight-600'">抵押信息{{index+1}}</text>
							<en-radio name="申请类型" v-model="applyItem.apply_type" v-if="verifyKey('apply_type')"
								:list="applyData"></en-radio>
							<view v-if="applyItem.apply_type*1===2">
								<en-input label="成交价" v-model="applyItem.transaction" v-if="verifyKey('transaction')"
									type="digit" placeholder="请输入成交价" rightText="万元"></en-input>
								<en-input label="定金" v-model="applyItem.pricing" v-if="verifyKey('pricing')"
									type="digit" placeholder="请输入定金" rightText="万元"></en-input>
								<en-input label="资金监管" v-model="applyItem.supervise" v-if="verifyKey('supervise')"
									type="digit" placeholder="请输监管金额" rightText="万元"></en-input>
								<en-radio propertyData="批复类型" v-model="applyItem.reply_type"
									v-if="verifyKey('reply_type')" :list="replyData"></en-radio>
								<en-input label="成交中介" v-model="applyItem.intermediary" v-if="verifyKey('intermediary')"
									type="text" placeholder="请输入中介公司名称"></en-input>
							</view>
						</view>
						<view class="m-t30">
							<text class="size-30 sys-weight-600'">绑定资产信息</text>
							<property-select label="选择资产" v-model="applyItem.property_sns"
								:propertyList="propertyList"></property-select>
						</view>
						<view class="m-t30">
							<text class="size-30 sys-weight-600'">{{applyItem.apply_type*1===1?'还款信息':'监管银行卡信息'}}</text>
							<en-input label="还款金额" type="number" placeholder="请输入还款金额" rightText="万元"></en-input>
							<add-bank></add-bank>
						</view>
						<view class="m-t30" v-for="(repaymentItem,repaymentIndex) in applyItem.repayment_data">
							<text class="size-30 sys-weight-600'">{{applyItem.apply_type*1===1?'还款信息':'监管银行卡信息'}}</text>
							<en-input v-if="applyItem.apply_type*1===1" v-model="repaymentItem.money" label="还款金额"
								type="number" placeholder="请输入还款金额" rightText="万元"></en-input>
							<add-bank :bank-name.sync="repaymentItem.bank_name"
								:bank-num.sync="repaymentItem.bank_num"></add-bank>
						</view>
						<view class="row">
							<button class="size-26 r-10 button-color apply-button bank-button m-t30"
								hover-class="is-hover" @click="addApply">+添加监管银行信息</button>
							<view class="flex"></view>
						</view>

						<view class="m-t30" v-for="(loanItem,loanIndex) in applyItem.loan_data">
							<text class="size-30 sys-weight-600'">放款账户信息</text>
							<en-input label="批复金额" type="number" v-model="loanItem.money" placeholder="请输入批复金额"
								rightText="万元"></en-input>
							<add-bank :bank-name.sync="loanItem.bank_name"
								:bank-num.sync="loanItem.bank_num"></add-bank>
						</view>
						<view class="row">
							<button class="size-26 r-10 button-color apply-button bank-button m-t30"
								hover-class="is-hover" @click="addApply">+添加放款信息</button>
							<view class="flex"></view>
						</view>
						<!-- 						<view class="row-justify-sb">
							<view class="flex"></view>
							<view class="row-c m-tb20">
								<button class="size-26 r-10 apply-button-delete m-r20" hover-class="is-hover"
									@click="onDeleteInfo()">删除</button>
								<button class="size-26 r-10 button-color apply-button-save" hover-class="is-hover"
									@click="onSaveInfo()">保存</button>
							</view>
						</view> -->
					</view>
				</view>
				<button class="size-26 r-10 button-color apply-button m-t30" hover-class="is-hover"
					@click="addApply">+添加申请信息</button>
			</view>
			<!-- 抵押信息end -->
		</view>
		<EnButton is_both :leftText="'保存'" :rightText="step === 2?'提交':'下一步'" @onLeftSubmit="onLeftSubmit"
			@onSubmit="onStep">
		</EnButton>
	</view>
</template>
<!-- correct -->
<script>
	import TaskImgTab from "@/common/task/task_ima_tab.vue"
	import WhInput from "@/components/en-from/en-input/en-input.vue"
	import EnInput from "@/components/en-from/en-input/en-input.vue";
	import EnSelect from "@/components/en-from/en-select/en-select.vue";
	import EnDate from "@/components/en-from/en-date/en-date.vue";
	import PropertySelect from "@/page_task/apply/components/property-select.vue";
	import AddBank from "@/page_task/apply/components/add-bank.vue";
	import {
		getTaskOptions
	} from "@/api/task";
	import tools from "@/service/tools";

	export default {
		components: {
			AddBank,
			PropertySelect,
			EnDate,
			EnSelect,
			EnInput,
			TaskImgTab,
			WhInput
		},
		data() {
			return {
				editIndex: 0,
				title: '',
				step: 1,
				fixedHeight: 70,
				scrollTop: 0,
				stepOne: ['double', 'correct'],
				stepTwo: ['two', 'double', 'correct'],
				payData: [{
					'value': 1,
					'text': '已缴纳'
				}, {
					'value': 0,
					'text': '未缴纳'
				}],
				applyData: [{
					'value': 1,
					'text': '抵押'
				}, {
					'value': 2,
					'text': '买卖'
				}],
				replyData: [{
					'value': 1,
					'text': '商业'
				}, {
					'value': 2,
					'text': '组合'
				}],
				farmingData: [{
					'value': 1,
					'text': '是'
				}, {
					'value': 0,
					'text': '否'
				}],
				loanFormArr: [], //贷款形式
				loanTypeArr: [], //贷款类别
				loanIndustryArr: [{
					'id': 1,
					'name': 'no'
				}], //投向行业
				enterpriseTypeArr: [], //企业类型
				bank_name: '',
				bank_num: '',
				appliesInfo: {
					"is_farming": '1',
					"loan_form": '',
					"loan_type": '',
					"loan_industry": [],
					"enterprise_type": "",
					"use_date": "",
					"pay_status": '1',
					"quota": "",
					"apply_data": []
				},
				applyItem: {
					"apply_type": '1',
					"property_sns": [],
					"repayment_data": [],
					"loan_data": [],
					"transaction": "",
					"pricing": "",
					"supervise": "",
					"reply_type": '1',
					"intermediary": "",
					"is_edit": true,
				},
				showKeys: [],
				propertyList: [],
			}
		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop / 120
		},
		onLoad(options) {
			this.title = options.title
			let appliesInfo = uni.getStorageSync('appliesData')
			let appliesKey = uni.getStorageSync('appliesKey')
			let propertyList = uni.getStorageSync('propertyData')
			this.appliesInfo = appliesInfo
			this.showKeys = appliesKey
			this.propertyList = propertyList
			this.getTaskOptions()
		},
		methods: {
			showBankItem(applyType, bankType) {
				// applyType*=1
				// if(applyType===1){
				//   if(bankType===1){
				//     return this.showIds.indexOf(80)>=0;
				//   }else {
				//     return this.showIds.indexOf(81)>=0;
				//   }
				// }else {
				//   if(bankType===1){
				//     return this.showIds.indexOf(84)>=0;
				//   }else {
				//     return this.showIds.indexOf(85)>=0;
				//   }
				// }
			},

			delApplyItem(applyKey) {
				this.appliesInfo.apply_data.splice(applyKey, 1)
			},
			delBank(applyKey, itemKey, type) {
				if (type === 1) {
					this.appliesInfo.apply_data[applyKey].repayment_data.splice(itemKey, 1)
				} else {
					this.appliesInfo.apply_data[applyKey].loan_data.splice(itemKey, 1)
				}
			},
			addBank(applyKey, type) {
				if (type === 1) {
					this.appliesInfo.apply_data[applyKey].repayment_data.push({
						'money': '',
						'bank_name': '',
						'bank_num': ''
					})
				} else {
					this.appliesInfo.apply_data[applyKey].loan_data.push({
						'money': '',
						'bank_name': '',
						'bank_num': ''
					})
				}
			},
			addApply() {
				tools.success('aaaaaaaaaaaaa')
				if (!this.appliesInfo.apply_data) {
					this.appliesInfo.apply_data = []
				}
				this.appliesInfo.apply_data.push(this.applyItem)
			},
			verifyKey(field) {
				return this.showKeys.indexOf(field) >= 0
			},
			async getTaskOptions() {
				const res = await getTaskOptions()
				if (res.code === 1) {
					this.enterpriseTypeArr = res.data.enterpriseTypeArr
					this.enterpriseTypeArr.map((val) => {
						val.text = val.name;
					});
					this.loanFormArr = res.data.loanFormArr
					this.loanFormArr.map((val) => {
						val.text = val.name;
					});
					this.loanIndustryArr = res.data.loanIndustryArr
					this.loanIndustryArr.map((val) => {
						val.text = val.name;
					});
					this.loanTypeArr = res.data.loanTypeArr
					this.loanTypeArr.map((val) => {
						val.text = val.name;
					});
				}
			},
			//  身份认证
			onAuthentication(item) {
				uni.navigateTo({
					url: "/page_task/identity_upload/identity_upload"
				})
			},
			// 保存
			onLeftSubmit() {
				console.log(this.formData);
				console.log('保存');
				this.applyList.map(item => {
					item.is_edit = true
				})
				if (this.step === 1) return
				this.step--
			},
			// 下一步
			onStep() {
				if (this.step === 2) return
				this.step++
			},
			// 完成
			onSubmit() {
				this.step = 4
			},
			// 添加信息
			onAddInfo() {
				this.applyList.push({
					is_edit: false
				})
			},
			// 编辑单个信息
			onEditInfo(index) {
				this.editIndex = index
			},
			// 删除信息
			onDeleteInfo(index) {
				uni.showModal({
					title: '提示',
					content: '确定删除?',
					success: (res) => {
						if (res.confirm) {
							this.applyList.splice(index, 1)
						}
					}
				})

			},
			// 保存单个信息
			onSaveInfo(item) {
				item.is_edit = !item.is_edit
			},
			onSetFarming(value) {
				this.formData.is_farming = value
			},
			onSetMaterials(value) {
				this.formData.is_materials = value
			},
		}
	}
</script>

<style lang="scss" scoped>
	.apply-body {
		padding-bottom: 100rpx;
	}

	.step-content {
		padding: 0 200rpx;
	}

	.attestation_content {
		width: 100%;
		position: absolute;
	}

	.title-line {
		width: 2rpx;
		height: 30rpx;
		background: #9EABCA;
	}

	.line {
		width: 70rpx;
		height: 4rpx;
		background: #8EDBDA;
		margin-top: 22rpx;
	}

	button::after {
		border: none;
	}

	.radiu-item {
		width: 140rpx;
		padding: 6rpx 16rpx;
		border-radius: 100rpx;
		border: 1rpx solid #CCCCCC;
	}

	.active-radiu {
		color: #0FB160;
		border: 1rpx solid #0FB160;
	}

	.wh-input {
		width: 100%;
		text-align: right;
		direction: rtl;
	}

	.wh-text {
		width: 110rpx;
		text-align: justify;
		text-align-last: justify;
		vertical-align: top;
		height: 38rpx;
	}

	.wh-text:after {
		content: '';
		width: 110rpx;
		height: 0;
		display: inline-block;
		overflow: hidden;
	}

	.apply-button {
		height: 80rpx;
		line-height: 80rpx;
		background: #FFFFFF;
		border: 2rpx solid #0FB160;
	}

	.bank-button {
		width: 320rpx;
	}

	.apply-button-save {
		width: 140rpx;
		background: #FFFFFF;
		border: 2rpx solid #0FB160;
	}

	.apply-button-delete {
		color: #E83F37;
		width: 140rpx;
		background: #FFFFFF;
		border: 2rpx solid #E83F37;
	}
</style>