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"></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="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-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;
		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>