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="`/static/img/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="`/static/img/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">
						<view class="row-justify-sb center p-tb30 bor-bottom-1 size-28">
							<view class="wh-text"><text></text>贷款额度</view>
							<view class="row-c flex">
								<input class="wh-input sys-size-28 text-color-12 m-lr20 flex"
									placeholder-class="sys-size-28 text-color-999 sys-weight-400" placeholder="请输入"
									v-model="inputValue"></input>
							</view>
							<text>万元</text>
						</view>

						<view class="row-justify-sb center p-tb30 bor-bottom-1 size-28">
							<view class="wh-text"><text></text>是否涉农</view>
							<view class="row-c">
								<view class="row-c radiu-item m-l20"
									:class="{'active-radiu':formData.is_farming === item.value}"
									v-for="(item,index) in farming" :key="index" @click="onSetFarming(item.value)">
									<image class="wh-30 m-r20"
										:src="formData.is_farming == item.value?'/static/img/information/correct.png':'/static/img/information/error.png'"
										mode="aspectFill"></image>
									<text>{{item.text}}</text>
								</view>
							</view>
						</view>
						<WhInput :name="'贷款形式'" disabled is_select></WhInput>
						<WhInput :name="'贷款类别'" disabled is_select></WhInput>
						<WhInput :name="'投向行业'" disabled is_select></WhInput>
						<WhInput :name="'企业类似'" disabled is_select></WhInput>
						<view class="row-justify-sb center p-tb30 size-28">
							<view class="wh-text"><text></text>材料费</view>
							<view class="row-c">
								<view class="row-c radiu-item m-l20"
									:class="{'active-radiu':formData.is_materials === item.value}"
									v-for="(item,index) in materials" :key="index" @click="onSetMaterials(item.value)">
									<image class="wh-30 m-r20"
										:src="formData.is_materials === item.value?'/static/img/information/correct.png':'/static/img/information/error.png'"
										mode="aspectFill"></image>
									<text>{{item.text}}</text>
								</view>
							</view>
						</view>
					</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="(item,index) in applyList"
					:key="index">
					<view class="sys-from-background-color p-20 r-20 size-26" v-if="item.is_edit">
						<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="/static/img/information/edit.png" mode="aspectFill"
										@click="onEditInfo(item)"></image>
									<view class="title-line m-lr20"></view>
									<image class="wh-30" src="/static/img/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>抵押</text>
							</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="">
							<text class="size-28 sys-weight-600">还款账户信息</text>
							<view class="row-c p-tb30">
								<view class="text-color-666"><text></text>还款金额：</view>
								<text>100万</text>
							</view>
							<view class="row-c ">
								<view class="text-color-666"><text></text>银行卡号：</view>
								<text>4576476465498790878</text>
							</view>
							<view class="row-c p-tb30">
								<view class="text-color-666"><text></text>所属银行：</view>
								<text>中国银行</text>
							</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>100万</text>
							</view>
							<view class="row-c ">
								<view class="text-color-666"><text></text>银行卡号：</view>
								<text>4576476465498790878</text>
							</view>
							<view class="row-c p-t30">
								<view class="text-color-666"><text></text>所属银行：</view>
								<text>中国银行</text>
							</view>
						</view>
					</view>
					<view v-else>
						<view class="">
							<text class="size-30 sys-weight-600'">抵押信息{{index+1}}</text>
							<view class="row-justify-sb center p-tb30 bor-bottom-1 size-28">
								<view class="wh-text"><text></text>申请类型</view>
								<view class="row-c">
									<view class="row-c radiu-item m-l20"
										:class="{'active-radiu':formData.is_materials === item.value}"
										v-for="(item,index) in impawn" :key="index" @click="onSetMaterials(item.value)">
										<image class="wh-30 m-r20"
											:src="formData.is_materials === item.value?'/static/img/information/correct.png':'/static/img/information/error.png'"
											mode="aspectFill"></image>
										<text>{{item.text}}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="m-t30">
							<text class="size-30 sys-weight-600'">绑定资产信息</text>
							<WhInput :name="'绑定资产'" disabled is_select></WhInput>
						</view>
						<view class="m-t30">
							<text class="size-30 sys-weight-600'">还款账户信息</text>
							<view class="row-justify-sb center p-tb30 bor-bottom-1 size-28">
								<view class="wh-text"><text></text>还款金额</view>
								<view class="row-c flex">
									<input class="wh-input sys-size-28 text-color-12 m-lr20 flex"
										placeholder-class="sys-size-28 text-color-999 sys-weight-400" placeholder="请输入"
										v-model="inputValue"></input>
								</view>
								<text>万元</text>
							</view>
							<view class="row-justify-sb center p-tb30 bor-bottom-1 size-28">
								<view class="wh-text"><text></text>银行卡</view>
								<view class="row-c flex">
									<input class="wh-input sys-size-28 text-color-12 m-lr20 flex"
										placeholder-class="sys-size-28 text-color-999 sys-weight-400"
										placeholder="请输入银行账号" v-model="inputValue"></input>
								</view>
								<uni-icons type="camera" size="30"></uni-icons>
							</view>
							<WhInput :is_border="false" :name="'所属银行'" disabled is_select></WhInput>
						</view>
						<view class="m-t30">
							<text class="size-30 sys-weight-600'">放款账户信息</text>
							<view class="row-justify-sb center p-tb30 bor-bottom-1 size-28">
								<view class="wh-text"><text></text>还款金额</view>
								<view class="row-c flex">
									<input class="wh-input sys-size-28 text-color-12 m-lr20 flex"
										placeholder-class="sys-size-28 text-color-999 sys-weight-400" placeholder="请输入"
										v-model="inputValue"></input>
								</view>
								<text>万元</text>
							</view>
							<view class="row-justify-sb center p-tb30 bor-bottom-1 size-28">
								<view class="wh-text"><text></text>银行卡</view>
								<view class="row-c flex">
									<input class="wh-input sys-size-28 text-color-12 m-lr20 flex"
										placeholder-class="sys-size-28 text-color-999 sys-weight-400"
										placeholder="请输入银行账号" v-model="inputValue"></input>
								</view>
								<uni-icons type="camera" size="30"></uni-icons>
							</view>
							<WhInput :is_border="false" :name="'所属银行'" disabled is_select></WhInput>
						</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(index)">删除</button>
								<button class="size-26 r-10 button-color apply-button-save" hover-class="is-hover"
									@click="onSaveInfo(item)">保存</button>
							</view>
						</view>
					</view>
				</view>
				<button class="size-26 r-10 button-color apply-button m-t30" hover-class="is-hover"
					@click="onAddInfo">+添加抵押信息</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 "@/page_task/module/wh-input.vue"

	export default {
		components: {
			TaskImgTab,
			WhInput
		},
		data() {
			return {
				title: '',
				step: 1,
				fixedHeight: 70,
				scrollTop: 0,
				stepOne: ['double', 'correct'],
				stepTwo: ['two', 'double', 'correct'],
				value: '',
				formData: {
					is_farming: null,
					is_materials: null
				},
				farming: [{
					text: '是',
					value: 1
				}, {
					text: '否',
					value: 0
				}],
				materials: [{
					text: '已缴纳',
					value: 1
				}, {
					text: '未缴纳',
					value: 0
				}],
				impawn: [{
					text: '抵押',
					value: 1
				}, {
					text: '买卖',
					value: 0
				}],
				applyList: [{
					is_edit: true,
					data: {}
				}, {
					is_edit: false,
					data: {}
				}]
			}
		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop / 120
		},
		onLoad(options) {
			this.title = options.title
		},
		methods: {
			//  身份认证
			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(item) {
				item.is_edit = !item.is_edit
			},
			// 删除信息
			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;
		margin-bottom: 100rpx;
	}

	.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>