<template> <h-view id="create-rent-info"> <h-header :proportion="[5,1,1]" class="bar-custom"> <div slot="left" class="h-header-btn"> <img src="@/assets/userBind/arrow.png" @click="routeGoCustomClick()"> <span>租赁信息</span> </div> </h-header> <h-content> <div v-if="!isReadOnly" class="top"> <div class="item"> <img src="@/assets/contractCreate/finished.png"> <p>基本信息</p> </div> <span class="line"/> <div class="item"> <span>2</span> <p style="color: #383F45;">租赁信息</p> </div> <span class="line"/> <div class="item"> <span>3</span> <p>附件信息</p> </div> </div> <div v-if="isReadOnly" class="top"> <div class="item"> <img src="@/assets/contractCreate/finished.png"> <p>基本信息</p> </div> <span class="line"/> <div class="item"> <img src="@/assets/contractCreate/finished.png"> <p style="color: #383F45;">租赁信息</p> </div> <span class="line"/> <div class="item"> <img src="@/assets/contractCreate/finished.png"> <p>附件信息</p> </div> </div> <div class="userInfo">租赁产品</div> <list-item :item-height="44"> <item v-if="!isReadOnly" :showArrow="true" @click.native="selectProductLine"> <div slot="name" class="required">产品线</div> <input slot="content" v-model="saveInfo.division_n" readonly placeholder="请选择"> </item> <item v-if="isReadOnly"> <div slot="name" class="required">产品线</div> <input slot="content" v-model="saveInfo.division_n" readonly> </item> <item v-if="!isReadOnly" :showArrow="true" @click.native="getProduct"> <div slot="name" class="required">产品型号</div> <input slot="content" v-model="saveInfo.product_id_n" readonly placeholder="请选择"> </item> <item v-if="isReadOnly"> <div slot="name" class="required">产品型号</div> <input slot="content" v-model="saveInfo.product_id_n" readonly> </item> <item> <div slot="name" class="required">产品数量</div> <input slot="content" v-model="saveInfo.product_num" :readonly="isReadOnly" placeholder="请输入产品数量"> </item> </list-item> <div class="userInfo">融资信息</div> <div class="hint-info"> <img src="@/assets/contractCreate/hint.png">提示 以下为单个设备商务政策 </div> <list-item :item-height="44"> <item v-if="!isReadOnly" :showArrow="true" @click.native="getBusinessPolicy();showModalBusiness=true"> <div slot="name" class="required">商务政策</div> <input slot="content" v-model="saveInfo.product_plan_name" readonly placeholder="请选择"> </item> <item v-if="isReadOnly"> <div slot="name" class="required">商务政策</div> <input slot="content" v-model="saveInfo.product_plan_name" readonly placeholder="请选择"> </item> <item> <div slot="name" class="required">设备单价</div> <CurrencyInput slot="content" v-model="saveInfo.equip_price" :readonly="isReadOnly" placeholder="请输入设备单价"/> </item> <item> <div slot="name" class="required">融资金额</div> <CurrencyInput slot="content" v-model="finance_amount" :readonly="isReadOnly" placeholder="请输入融资信息"/> </item> <item> <div slot="name" class="required">首付比例</div> <input slot="content" v-model="saveInfo.down_payment_ratio_n" :readonly="isReadOnly" placeholder="%"> </item> <item> <div slot="name" class="required">首付款</div> <CurrencyInput slot="content" v-model="saveInfo.down_payment" :readonly="isReadOnly" placeholder="请输入首付款" @input="changeRatio"/> </item> <item> <div slot="name" class="required">保证金比例</div> <input slot="content" v-model="saveInfo.deposit_ratio_n" :readonly="isReadOnly" placeholder="%"> </item> <item> <div slot="name" class="required">保证金</div> <CurrencyInput slot="content" v-model="saveInfo.deposit" :readonly="isReadOnly" placeholder="请输入保证金" @input="changeDeposit"/> </item> <item> <div slot="name" class="required">手续费比例</div> <input slot="content" v-model="saveInfo.lease_charge_ratio_n" :readonly="isReadOnly" placeholder="%"> </item> <item> <div slot="name" class="required">手续费</div> <CurrencyInput slot="content" v-model="saveInfo.lease_charge" :readonly="isReadOnly" placeholder="请输入手续费" @input="changeLeaseCharge"/> </item> <item> <div slot="name" class="required">GPS费用</div> <CurrencyInput slot="content" v-model="saveInfo.gps_fee" :readonly="isReadOnly" placeholder="请输入GPS费用"/> </item> <item> <div slot="name" class="required">保险押金</div> <CurrencyInput slot="content" v-model="saveInfo.insurance_fee" :readonly="isReadOnly" placeholder="请输入保险押金"/> </item> <item v-if="!isReadOnly" class="date-check" @click.native="showTime('YYYY-MM-DD')"> <div slot="name" class="required">预计付款日</div> <input slot="content" v-model="saveInfo.lease_start_date" readonly placeholder="请选择日期 "> </item> <item v-if="isReadOnly" class="date-check"> <div slot="name" class="required">预计付款日</div> <input slot="content" v-model="saveInfo.lease_start_date" readonly> </item> <item v-if="!isReadOnly" :showArrow="true" @click.native="periodPull"> <div slot="name" class="required">还款周期</div> <input slot="content" v-model="saveInfo.annual_pay_times_n" readonly placeholder="请选择"> </item> <item v-if="isReadOnly"> <div slot="name" class="required">还款周期</div> <input slot="content" v-model="saveInfo.annual_pay_times_n" readonly placeholder="请选择"> </item> <item> <div slot="name" class="required">租赁期数</div> <input slot="content" v-model="saveInfo.lease_times" :readonly="isReadOnly" placeholder="请输入租赁期数"> </item> <item> <div slot="name" class="required">年利率</div> <input slot="content" v-model="saveInfo.int_rate_n" readonly placeholder="%"> </item> <item v-if="!isReadOnly" :showArrow="true" @click.native="selectPayWay"> <div slot="name" class="required">支付方式</div> <input slot="content" v-model="saveInfo.pay_type_n" readonly placeholder="请选择"> </item> <item v-if="isReadOnly"> <div slot="name" class="required">支付方式</div> <input slot="content" v-model="saveInfo.pay_type_n" readonly placeholder="请选择"> </item> <item> <div slot="name" class="required">逾期日利率</div> <input slot="content" v-model="saveInfo.penalty_rate_n" readonly placeholder="%"> </item> <item> <div slot="name" class="required">留购价</div> <CurrencyInput slot="content" v-model="saveInfo.residual_value" :readonly="isReadOnly" placeholder="请输入留购价"/> </item> <item :showArrow="true" @click.native="goPlan"> <div slot="name">查看还款计划</div> <input slot="content" readonly> </item> </list-item> </h-content> <bottom-tab class="add-box"> <tab-button v-if="!isReadOnly && !calculeFlag" class="before" @click.native="save">计算</tab-button> <tab-button v-if="!isReadOnly && calculeFlag" class="before" @click.native="save">重新计算</tab-button> <tab-button v-if="isReadOnly" class="before" @click.native="$routeGo()">上一步</tab-button> <tab-button class="next" @click.native="next">下一步</tab-button> </bottom-tab> <h-modal ref="modal" v-model="showModalValue" class="flow" position="bottom"> <h-view id="product-list"> <h-header :proportion="[1,4,1]" class="bar-custom"> <span slot="center" style="color:#fff">选择产品</span> <span slot="right" style="color:#fff" @click="showModalValue=false">取消</span> </h-header> <h-content> <div class="search has-header"> <input v-model="keyWordProduct" placeholder="请输入产品名称"> </div> <div class="division-box"> <scroll ref="scroll" :updateData="[divisionLists]" :pullUp="true" @pullingUp="loadMoreProduct"> <list-item v-for="(item,index) in divisionLists" :key="index"> <item :proportion="[1,4]" @click.native="selectProduct(item)" > <div slot="name" class="item-pic"> <img :src="item.url"> </div> <div slot="content" class="item-content"> <div class="pro-name"> <p>{{ item.product_name }}</p> </div> <div class="centers"> <p class="firsts1">{{ item.bp_type_n }}</p> <p class="seconds1">{{ item.bp_name }}</p> </div> <div class="centers"> <p class="firsts1">设备识别号</p> <p class="seconds1">{{ item.product_code }}</p> </div> </div> </item> </list-item> </scroll> </div> </h-content> </h-view> </h-modal> <h-modal ref="modal" v-model="showModalBusiness " class="flow" position="bottom"> <h-view id="businuss-list"> <h-header :proportion="[1,4,1]" class="bar-custom"> <span slot="center" style="color:#fff">选择商务政策</span> <span slot="right" style="color:#fff" @click="showModalBusiness=false">取消</span> </h-header> <h-content> <div class="search has-header"> <input v-model="policyKeyWord" placeholder="请输入商务政策名称"> </div> <scroll ref="scroll" :updateData="[businessLists]" :pullUp="true" @pullingUp="loadMorePolicy"> <div class="division-box"> <section v-for="(item,index) in businessLists" :key="index" @click="selectBusinessPolicy(item)"> <div class="descript"> <img src="@/assets/trial/product.png" alt> <p class="produc">{{ item.product_plan_name }}</p> </div> <div class="tario"> <div class="wrap"> <p class="ratio"> <span>保证金比例</span> <span>{{ item.deposit_ratio_n }}</span> </p> <p> <span>手续费比例</span> <span>{{ item.lease_charge_ratio_n }}</span> </p> </div> <div class="wrap"> <p> <span>年利率</span> <span>{{ item.int_rate_n }}</span> </p> <p> <span>期 限</span> <span>{{ item.lease_times }}期</span> </p> </div> </div> </section> </div> </scroll> </h-content> </h-view> </h-modal> </h-view> </template> <script> import CurrencyInput from '../../components/currencyInput' export default { components: { CurrencyInput, }, data () { return { calculeFlag: false, salesEnter: '', // 页面进入标识,该字段作用:第一次创建时即从销售页面进入进本信息、租赁信息、附件信息。用于判断后面页面录入数据后未保存则点击上一步,再次进入该页面数据丢失问题 saveTed: false, // 本页面数据是否保存标识 showModalValue: false, showModalBusiness: false, isComputed: false, fromPage: window.localStorage.fromPage, keyWordProduct: '', policyKeyWord: '', isReadOnly: false, // 是否只读 fromPutted: false, isClick: false, // false:右滑返回;true:点击按钮返回 fromList: false, // 判断是否从列表过来 pagenum: 1, // 产品型号页码 pagenumSearch: 1, // 产品型号查询时的页码 pagenumPolicy: 1, // 商务政策没有查询时的页码 pagenumSearchPolicy: 1, // 商务政策查询时的页码 businessLists: [], // 商务政策 periodLists: [], // 还款周期 paywayLists: [], // 支付方式 divisionLists: [], productLine: [], // 产品线 /* productInfo: { project_id: window.localStorage.project_id, product_id: '', product_id_n: '', product_num: '', }, */ saveInfo: { project_id: window.localStorage.project_id, bp_name: '', product_id: '', product_id_n: '', product_num: '', product_plan_id: '', product_plan_name: '', equip_price: '', int_rate: '', int_rate_n: '', penalty_rate_n: '', annual_pay_times: '', annual_pay_times_n: '', lease_times: '', down_payment_ratio: '', down_payment_ratio_n: '', down_payment: '', deposit_ratio: '', deposit_ratio_n: '', deposit: '', lease_charge_ratio: '', lease_charge_ratio_n: '', lease_charge: '', lease_start_date: '', gps_fee: '', insurance_fee: '', pay_type: '', pay_type_n: '', residual_value: '', division_n: '', division: '', finance_amount: '', }, } }, computed: { 'finance_amount' () { // 融资金额 return parseFloat(this.saveInfo.equip_price - this.saveInfo.equip_price * this.saveInfo.down_payment_ratio_n.replace('%', '') / 100).toFixed(2) }, // isReadOnly () { // if (window.localStorage.contractReadonly === 'true' && this.fromPage === 'list') { // debugger // return true // } else { // debugger // return false // } // }, }, watch: { $route (to, from) { if (to.name === 'CreateBaseInfo' && from.name === 'CreateRentInfo') { if (!this.isClick && this.fromPage === 'sale') { this.routeGoCustom() } } }, policyKeyWord (newVal, oldVal) { this.searchBusinessPolicy() }, keyWordProduct (newVal, oldVal) { this.searchProduct() }, 'saveInfo.equip_price' () { this.saveInfo.down_payment = (this.saveInfo.equip_price * this.saveInfo.down_payment_ratio_n.replace('%', '') / 100).toFixed(2) this.saveInfo.deposit = (this.saveInfo.equip_price * this.saveInfo.deposit_ratio_n.replace('%', '') / 100).toFixed(2) this.saveInfo.lease_charge = parseFloat((this.saveInfo.equip_price - this.saveInfo.equip_price * this.saveInfo.down_payment_ratio_n.replace('%', '') / 100) * (this.saveInfo.lease_charge_ratio_n.replace('%', '') / 100)).toFixed(2) }, 'saveInfo.deposit_ratio_n' (newVal, oldVal) { this.saveInfo.deposit = (this.saveInfo.equip_price * newVal.replace('%', '') / 100).toFixed(2) }, 'saveInfo.down_payment_ratio_n' (newVal, oldVal) { this.saveInfo.down_payment = (this.saveInfo.equip_price * newVal.replace('%', '') / 100).toFixed(2) }, // 'saveInfo.down_payment' (newVal, oldVal) { // this.saveInfo.down_payment_ratio_n = `${(newVal / this.saveInfo.equip_price * 100).toFixed(2)}%` // }, 'saveInfo.lease_charge_ratio_n' (newVal, oldVal) { this.saveInfo.lease_charge = parseFloat((this.saveInfo.equip_price - this.saveInfo.equip_price * this.saveInfo.down_payment_ratio_n.replace('%', '') / 100) * (this.saveInfo.lease_charge_ratio_n.replace('%', '') / 100)).toFixed(2) }, }, beforeRouteEnter (to, from, next) { next(vm => { vm.showModalBusiness = false vm.showModalValue = false vm.pagenumSearch = 1 vm.pagenumSearchPolicy = 1 vm.policyKeyWord = '' vm.keyWordProduct = '' vm.businessLists = [] vm.divisionLists = [] vm.pagenum = 1 vm.pagenumPolicy = 1 vm.fromPage = window.localStorage.fromPage vm.saveInfo['project_id'] = window.localStorage.project_id // 重新赋值,防止缓存 // vm.productInfo['project_id'] = window.localStorage.project_id // 重新赋值,防止缓存 if (from.name === 'CreateBaseInfo') { vm.isComputed = false vm.calculeFlag = false vm.salesEnter = vm.$route.params.salesEnter vm.bp_agent_id = vm.$route.params.bp_agent_id vm.saveInfo.bp_name = window.localStorage.bp_name_tenant vm.saveTed = false vm.isClick = false if (vm.fromPage === 'sale') { vm.fromList = false vm.isReadOnly = false vm.rentInfoQuery() } else if (vm.fromPage === 'list') { if (window.localStorage.contractReadonly === 'true') { vm.isReadOnly = true } else { vm.isReadOnly = false } vm.fromList = true vm.rentInfoQuery() } Object.keys(vm.saveInfo).forEach(i => { // 置空saveInfo if (i !== 'project_id' && i !== 'bp_name') { vm.saveInfo[i] = '' } }) /* console.log('@@@@@@@@@@@@@@@@@@'+JSON.stringify(vm.saveInfo)) Object.keys(vm.productInfo).forEach(i => { // 置空productInfo if (i !== 'project_id') { vm.productInfo[i] = '' } }) */ setTimeout(() => { vm.getProductLine() // 产品线查询 vm.repayPeriod()// 还款周期查询 vm.getPayWay()// 支付方式查询 }, 0) } }) }, methods: { routeGoCustomClick () { if (this.fromPage === 'sale') { this.isClick = true this.routeGoCustom() } else { this.$routeGo() } }, // 自定义返回逻辑:第一次新建时返回判断是否保存数据,未保存提示保存 routeGoCustom () { let vm = this if (vm.fromPage === 'sale' && !vm.saveTed) { hlsPopup.showConfirm({ title: '提示', content: '当前页面数据未保存,返回会导致数据丢失,是否保存?', onConfirm: function (index) { if (index === 1) { vm.saveBack() } else { vm.$routeGo() } }, }) } else { vm.$routeGo() } }, changeRatio () { this.saveInfo.down_payment_ratio_n = `${(this.saveInfo.down_payment / this.saveInfo.equip_price).toFixed(2) * 100}%` }, changeDeposit () { this.saveInfo.deposit_ratio_n = `${(this.saveInfo.deposit / this.saveInfo.equip_price).toFixed(2) * 100}%` }, changeLeaseCharge () { this.saveInfo.lease_charge_ratio_n = `${(this.saveInfo.lease_charge / (this.saveInfo.equip_price - this.saveInfo.equip_price * this.saveInfo.down_payment_ratio_n.replace('%', '') / 100)).toFixed(2) * 100}%` }, rentInfoQuery () { // 租赁信息查询 let vm = this let url = process.env.basePath + 'prj_lease_query' let param = { project_id: window.localStorage.project_id, } hlsPopup.showLoading('请稍候') vm.$post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { Object.assign(vm.saveInfo, res.info) vm.saveInfo.product_plan_name = res.info.product_plan_id_n vm.saveInfo.division_n = res.info.product_name vm.saveInfo.down_payment = res.info.down_payment } else { hlsPopup.showLongCenter(res.message) } }) }, selectBusinessPolicy (e) { let vm = this vm.saveInfo.product_plan_id = e.product_plan_id vm.saveInfo.product_plan_name = e.product_plan_name vm.saveInfo.down_payment_ratio = e.down_payment_ratio vm.saveInfo.down_payment_ratio_n = e.down_payment_ratio_n vm.saveInfo.lease_charge_ratio = e.lease_charge_ratio vm.saveInfo.lease_charge_ratio_n = e.lease_charge_ratio_n vm.saveInfo.int_rate = e.int_rate vm.saveInfo.int_rate_n = e.int_rate_n vm.saveInfo.penalty_rate_n = e.penalty_rate_n vm.saveInfo.penalty_rate = e.penalty_rate vm.saveInfo.deposit_ratio = e.deposit_ratio vm.saveInfo.deposit_ratio_n = e.deposit_ratio_n vm.saveInfo.lease_times = e.lease_times setTimeout(() => { vm.showModalBusiness = false }, 100) }, calculateBack () { let vm = this let url = process.env.basePath + 'prj_lease_info_save' vm.saveInfo.down_payment_ratio = (vm.saveInfo.down_payment_ratio_n.replace('%', '') / 100).toFixed(2) vm.saveInfo.lease_charge_ratio = (vm.saveInfo.lease_charge_ratio_n.replace('%', '') / 100).toFixed(2) vm.saveInfo.deposit_ratio = (vm.saveInfo.deposit_ratio_n.replace('%', '') / 100).toFixed(2) vm.saveInfo.finance_amount = vm.finance_amount let param = { master: vm.saveInfo, } vm.$post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { // vm.isComputed = true } else { hlsPopup.showLongCenter(res.message) } }) }, save () { let vm = this if (!vm.saveInfo.division_n) { hlsPopup.showLongCenter('产品线不能为空!') } else if (!vm.saveInfo.product_id_n) { hlsPopup.showLongCenter('产品型号不能为空!') } else if (!vm.saveInfo.product_num) { hlsPopup.showLongCenter('产品数量不能为空!') } else if (!vm.saveInfo.product_plan_name) { hlsPopup.showLongCenter('商务政策不能为空!') } else if (!vm.saveInfo.equip_price) { hlsPopup.showLongCenter('设备单价不能为空!') } else if (!vm.saveInfo.down_payment_ratio_n) { hlsPopup.showLongCenter('首付比例不能为空!') } else if (!vm.saveInfo.down_payment) { hlsPopup.showLongCenter('首付款不能为空!') } else if (!vm.saveInfo.deposit_ratio_n) { hlsPopup.showLongCenter('保证金比例不能为空!') } else if (!vm.saveInfo.deposit) { hlsPopup.showLongCenter('保证金不能为空!') } else if (!vm.saveInfo.lease_charge_ratio_n) { hlsPopup.showLongCenter('手续费比例不能为空!') } else if (!vm.saveInfo.lease_charge) { hlsPopup.showLongCenter('手续费不能为空!') } else if (!vm.saveInfo.gps_fee) { hlsPopup.showLongCenter('GPS费用不能为空!') } else if (!vm.saveInfo.insurance_fee) { hlsPopup.showLongCenter('保险押金不能为空!') } else if (!vm.saveInfo.lease_start_date) { hlsPopup.showLongCenter('预计付款日不能为空!') } else if (!vm.saveInfo.annual_pay_times_n) { hlsPopup.showLongCenter('还款周期不能为空!') } else if (!vm.saveInfo.lease_times) { hlsPopup.showLongCenter('租赁期数不能为空!') } else if (!vm.saveInfo.pay_type_n) { hlsPopup.showLongCenter('支付方式不能为空!') } else if (!vm.saveInfo.residual_value) { hlsPopup.showLongCenter('留购价不能为空!') } else { let url = process.env.basePath + 'prj_lease_info_save' vm.saveInfo.down_payment_ratio = (vm.saveInfo.down_payment_ratio_n.replace('%', '') / 100).toFixed(2) vm.saveInfo.lease_charge_ratio = (vm.saveInfo.lease_charge_ratio_n.replace('%', '') / 100).toFixed(2) vm.saveInfo.deposit_ratio = (vm.saveInfo.deposit_ratio_n.replace('%', '') / 100).toFixed(2) vm.saveInfo.finance_amount = vm.finance_amount let param = { master: vm.saveInfo, } hlsPopup.showLoading('请稍候') vm.$post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.isComputed = true vm.calculeFlag = true vm.saveTed = true hlsPopup.showLongCenter('计算成功') vm.goPlan() } else { hlsPopup.showLongCenter(res.message) } }) } }, saveBack () { let vm = this if (!vm.saveInfo.division_n) { hlsPopup.showLongCenter('产品线不能为空!') } else if (!vm.saveInfo.product_id_n) { hlsPopup.showLongCenter('产品型号不能为空!') } else if (!vm.saveInfo.product_num) { hlsPopup.showLongCenter('产品数量不能为空!') } else if (!vm.saveInfo.product_plan_name) { hlsPopup.showLongCenter('商务政策不能为空!') } else if (!vm.saveInfo.equip_price) { hlsPopup.showLongCenter('设备单价不能为空!') } else if (!vm.saveInfo.down_payment_ratio_n) { hlsPopup.showLongCenter('首付比例不能为空!') } else if (!vm.saveInfo.down_payment) { hlsPopup.showLongCenter('首付款不能为空!') } else if (!vm.saveInfo.deposit_ratio_n) { hlsPopup.showLongCenter('保证金比例不能为空!') } else if (!vm.saveInfo.deposit) { hlsPopup.showLongCenter('保证金不能为空!') } else if (!vm.saveInfo.lease_charge_ratio_n) { hlsPopup.showLongCenter('手续费比例不能为空!') } else if (!vm.saveInfo.lease_charge) { hlsPopup.showLongCenter('手续费不能为空!') } else if (!vm.saveInfo.gps_fee) { hlsPopup.showLongCenter('GPS费用不能为空!') } else if (!vm.saveInfo.insurance_fee) { hlsPopup.showLongCenter('保险押金不能为空!') } else if (!vm.saveInfo.lease_start_date) { hlsPopup.showLongCenter('预计付款日不能为空!') } else if (!vm.saveInfo.annual_pay_times_n) { hlsPopup.showLongCenter('还款周期不能为空!') } else if (!vm.saveInfo.lease_times) { hlsPopup.showLongCenter('租赁期数不能为空!') } else if (!vm.saveInfo.pay_type_n) { hlsPopup.showLongCenter('支付方式不能为空!') } else if (!vm.saveInfo.residual_value) { hlsPopup.showLongCenter('留购价不能为空!') } else { let url = process.env.basePath + 'prj_lease_info_save' vm.saveInfo.down_payment_ratio = (vm.saveInfo.down_payment_ratio_n.replace('%', '') / 100).toFixed(2) vm.saveInfo.lease_charge_ratio = (vm.saveInfo.lease_charge_ratio_n.replace('%', '') / 100).toFixed(2) vm.saveInfo.deposit_ratio = (vm.saveInfo.deposit_ratio_n.replace('%', '') / 100).toFixed(2) vm.saveInfo.finance_amount = vm.finance_amount let param = { master: vm.saveInfo, } hlsPopup.showLoading('请稍候') vm.$post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { hlsPopup.showLongCenter('保存成功') vm.$routeGo() } else { hlsPopup.showLongCenter(res.message) } }) } }, async isComputedCheck () { let vm = this let url = process.env.basePath + 'prj_product_cal_status' let param = { project_id: vm.saveInfo.project_id, } // hlsPopup.showLoading('请稍候') let res = await vm.$post(url, param) if (res.result === 'S') { if (res.info.success_flag === 'Y') { return true } else { return false } } else { hlsPopup.showLongCenter(res.message) } }, async next () { let vm = this vm.isComputed = await vm.isComputedCheck() if (vm.isReadOnly) { vm.$router.push({ name: 'CreateEnclosureInfo', }) } else { if (vm.isComputed) { vm.$router.push({ name: 'CreateEnclosureInfo', }) } else { hlsPopup.showLongCenter('请先进行计算') } } }, // next () { // let vm = this // if (vm.isReadOnly) { // vm.$router.push({ // name: 'CreateEnclosureInfo', // // vm.$router.push({ // // name: 'CreateEnclosureInfo', // // }) // }) // } else { // if (vm.isComputed) { // let url = process.env.basePath + 'prj_product_info_save' // let param = { // master: { // division_n: vm.saveInfo.division_n, // bp_name: vm.$route.params.bp_name, // ...vm.productInfo, // }, // } // hlsPopup.showLoading('请稍候') // vm.$post(url, param).then(function (res) { // vm.hlsPopup.hideLoading() // if (res.result === 'S') { // vm.saveTed = true // vm.$router.push({ // name: 'CreateEnclosureInfo', // }) // } else { // hlsPopup.showLongCenter(res.message) // } // }) // } else { // hlsPopup.showLongCenter('请先进行计算') // } // } // }, /* next () { let vm = this if (vm.isReadOnly) { vm.$router.push({ name: 'CreateEnclosureInfo', // vm.$router.push({ // name: 'CreateEnclosureInfo', // }) }) } else { if (vm.isComputed) { let url = process.env.basePath + 'prj_product_info_save' let param = { master: { division_n: vm.saveInfo.division_n, bp_name: vm.$route.params.bp_name, ...vm.productInfo, }, } hlsPopup.showLoading('请稍候') vm.$post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.saveTed = true vm.$router.push({ name: 'CreateEnclosureInfo', }) } else { hlsPopup.showLongCenter(res.message) } }) } else { hlsPopup.showLongCenter('请先进行计算') } } }, */ showTime (format) { // 预计付款日 let vm = this hlsPopup.showTime({ nowDate: (new Date()).format('yyyy-MM-dd'), format: format, callback: (date) => { vm.saveInfo.lease_start_date = date }, }) }, getPayWay () { // 支付方式查询 let vm = this let url = $config.basePath + 'prj_pay_type_query' let param = {} vm.hlsPopup.showLoading('数据加载中') vm.hlsHttp.post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.paywayLists = res.lists.map(item => { return { code: item.pay_type, code_name: item.pay_type_n, } }) } else { hlsPopup.showLongCenter(res.message) } }) }, // 支付方式选择 selectPayWay () { let vm = this vm.hlsPopup.selectList({ list: vm.paywayLists, // 下拉列表 code: 'bp_type', object: {}, returnItem: function (index, obj) { vm.saveInfo.pay_type_n = obj.bp_type_n vm.saveInfo.pay_type = obj.bp_type }, }) }, repayPeriod () { // 还款周期查询 let vm = this let url = $config.basePath + 'annual_pay_times_query' let param = {} vm.hlsPopup.showLoading('数据加载中') vm.hlsHttp.post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.periodLists = res.lists.map(item => { return { code: item.annual_pay_times, code_name: item.annual_pay_times_n, } }) } else { hlsPopup.showLongCenter(res.message) } }) }, // 还款周期选择 periodPull () { let vm = this vm.hlsPopup.selectList({ list: vm.periodLists, // 下拉列表 code: 'bp_type', object: {}, returnItem: function (index, obj) { vm.saveInfo.annual_pay_times_n = obj.bp_type_n vm.saveInfo.annual_pay_times = obj.bp_type }, }) }, loadMorePolicy () { if (this.policyKeyWord) { this.searchBusinessPolicy() } else { this.getBusinessPolicy() } }, searchBusinessPolicy () { let vm = this vm.businessLists = [] vm.pagenumSearchPolicy = 1 let randomString = Math.floor(Math.random() * 21) let url = process.env.basePath + 'prj_product_plan_query' + '&index' + `'${randomString}'` let param = { bp_agent_id: vm.bp_agent_id, pagesize: 10, pagenum: vm.pagenumSearchPolicy, searchInput: vm.policyKeyWord, } hlsPopup.showLoading('请稍候') vm.$post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { let returnData = [] returnData = res.lists if (returnData.length === 0) { vm.businessLists = returnData vm.$refs.scroll.update(true) } else if (returnData.length > 0 && returnData.length < 10) { vm.businessLists = returnData vm.$refs.scroll.update(true) } else if (returnData.length === 10) { vum.forEach(returnData, function (data, index, array) { vm.businessLists.push(array[index]) }) vm.pagenumSearchPolicy++ vm.$refs.scroll.update(false) } } else { hlsPopup.showLongCenter(res.message) } }) }, getBusinessPolicy () { let vm = this vm.businessLists = [] vm.pagenumPolicy = 1 let randomString = Math.floor(Math.random() * 21) let url = process.env.basePath + 'prj_product_plan_query' + '&index' + `'${randomString}'` let param = { bp_agent_id: vm.bp_agent_id, pagesize: 10, pagenum: vm.pagenumPolicy, searchInput: vm.policyKeyWord, } hlsPopup.showLoading('请稍候') vm.$post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { let returnData = [] returnData = res.lists if (returnData.length === 0) { vm.$refs.scroll.update(true) } else if (returnData.length > 0 && returnData.length < 10) { vum.forEach(returnData, function (data, index, array) { vm.businessLists.push(array[index]) }) vm.pagenumPolicy++ vm.$refs.scroll.update(true) } else if (returnData.length === 10) { vum.forEach(returnData, function (data, index, array) { vm.businessLists.push(array[index]) }) vm.pagenumPolicy++ vm.$refs.scroll.update(false) } } else { hlsPopup.showLongCenter(res.message) } }) }, selectProduct (e) { let vm = this this.saveInfo.product_id_n = e.product_name this.saveInfo.product_id = e.product_id setTimeout(() => { vm.showModalValue = false }, 100) }, loadMoreProduct () { if (this.keyWordProduct) { this.searchProduct() } else { this.getProduct() } }, searchProduct () { let vm = this vm.divisionLists = [] vm.pagenumSearch = 1 let randomString = Math.floor(Math.random() * 21) let url = process.env.basePath + 'prd_product_list' + '&index' + `'${randomString}'` let param = { bp_agent_id: vm.bp_agent_id, division: vm.saveInfo.division, user_phone: window.localStorage.getItem('user_phone'), pagesize: 10, pagenum: vm.pagenumSearch, searchInput: vm.keyWordProduct, } hlsPopup.showLoading('请稍候') vm.$post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { let returnData = [] returnData = res.lists if (returnData.length === 0) { vm.divisionLists = returnData } else if (returnData.length > 0 && returnData.length < 10) { vm.divisionLists = returnData vm.$refs.scroll.update(true) } else if (returnData.length === 10) { vum.forEach(returnData, function (data, index, array) { vm.divisionLists.push(array[index]) }) vm.pagenumSearch++ vm.$refs.scroll.update(false) } vm.divisionLists.forEach(item => { item['url'] = process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token }) } else { hlsPopup.showLongCenter(res.message) } }) }, getProduct () { let vm = this vm.divisionLists = [] vm.pagenum = 1 vm.showModalValue = true let randomString = Math.floor(Math.random() * 21) let url = process.env.basePath + 'prj_product_list' + '&index' + `'${randomString}'` let param = { bp_agent_id: vm.bp_agent_id, division: vm.saveInfo.division, user_phone: window.localStorage.getItem('user_phone'), pagesize: 10, pagenum: vm.pagenum, searchInput: vm.keyWordProduct, } hlsPopup.showLoading('请稍候') vm.$post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { let returnData = [] returnData = res.lists if (returnData.length === 0) { vm.$refs.scroll.update(true) } else if (returnData.length > 0 && returnData.length < 10) { vum.forEach(returnData, function (data, index, array) { vm.divisionLists.push(array[index]) }) vm.pagenum++ vm.$refs.scroll.update(true) } else if (returnData.length === 10) { vum.forEach(returnData, function (data, index, array) { vm.divisionLists.push(array[index]) }) vm.pagenum++ vm.$refs.scroll.update(false) } vm.divisionLists.forEach(item => { item['url'] = process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token }) } else { hlsPopup.showLongCenter(res.message) } }) }, selectProductLine (e) { let vm = this vm.saveInfo.product_id = '' vm.saveInfo.product_id_n = '' vm.hlsPopup.selectList({ list: vm.productLine, code: 'bp_type', object: {}, returnItem: function (index, obj) { vm.saveInfo.division = obj.bp_type vm.saveInfo.division_n = obj.bp_type_n }, }) }, getProductLine () { let vm = this let url = process.env.basePath + 'prj_product_division' let param = { bp_agent_id: vm.bp_agent_id, } vm.hlsPopup.showLoading('请稍候') vm.hlsHttp.post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.productLine = res.lists.map(item => { return { code: item.division, code_name: item.division_n, } }) } }) }, goPlan () { this.$router.push({ name: 'ContractRepayPlan', params: { product_num: this.saveInfo.product_num, project_id: window.localStorage.project_id, }, }) }, goRent () { this.$router.push({ name: 'CreateEnclosureInfo', }) }, } , } </script> <style lang="less"> #create-rent-info { input { color: #333; } input::placeholder { color: #666; } .flow { z-index: 999; } .hls-list-item { margin-bottom: 0px !important; } .h-header-right { display: flex; align-items: center; } #businuss-list { .search { background-color: #fff; padding: 8px 12px; width: 100%; height: 1.02rem; z-index: 100; margin-bottom: 8px; input { background: url("../../assets/contractStart/search1.png") 320px no-repeat; background-size: 16px 16px; background-color: rgba(239, 239, 239, 0.55); padding-left: 12px; height: 36px; line-height: 36px; border-radius: 4px; width: 100%; font-family: PingFangSC-Regular; font-size: 14px; color: #888c8f; } input::placeholder { font-family: PingFangSC-Regular; font-size: 14px; color: #888c8f; letter-spacing: 0; } input:focus { background: url("../../assets/contractStart/search2.png") 320px no-repeat; background-size: 16px 16px; background-color: rgba(239, 239, 239, 0.55); border: 2px solid #bcc6ff; } } .descript { width: 100%; height: 44px; display: flex; flex-direction: row; background: #fff; img { width: 30px; height: 30px; margin-left: 10px; margin-top: 8px; // margin-right: 8px; } .linkPic { width: 16px; height: 16px; margin-top: 15px; margin-left: -7px; margin-right: 10px; } .produc { height: 44px; display: flex; flex: 1; font-size: 15px; color: #4b4a4b; line-height: 44px; font-weight: 500; letter-spacing: 0; margin-left: 10px; font-family: PingFangSC-Semibold; border-bottom: 1px solid #f3f3f7; } } .tario { width: 100%; height: 60px; position: relative; background: #fff; // margin-bottom: 8px; .wrap:nth-of-type(1) { height: 60px; position: absolute; left: 50px; } .wrap:nth-of-type(2) { height: 60px; position: absolute; right: 30px; } p { height: 30px; line-height: 30px; font-family: PingFangSC-Regular; font-size: 13px; color: rgba(56, 63, 69, 0.6); span:nth-of-type(2) { margin-left: 16px; color: rgb(56, 63, 69); } } } } #product-list { .hls-list-item { border-radius: 4px; } .item-pic { width: 100px; //height: 110px; img { width: 100%; height: 100%; } } .item-content { width: 100%; margin-left: 20px; .pro-name { height: 42px; width: 100%; position: relative; border-bottom: 1px solid #f3f3f7; .arrow { position: absolute; width: 16px; height: 16px; right: 0; top: 13px; } p { height: 42px; line-height: 42px; font-family: PingFangSC-Semibold; font-size: 15px; color: #4b4a4b; letter-spacing: 0; font-weight: 600; } } .centers { font-family: PingFangSC-Semibold; font-size: 13px; color: rgba(56, 63, 69, 0.6); letter-spacing: 0.5px; display: flex; flex-direction: row; margin-top: 8px; .firsts1 { width: 60px; height: 17px; font-family: PingFangSC-Regular; font-size: 13px; color: rgba(56, 63, 69, 0.6); } .seconds1 { width: 70%; margin-left: 16px; height: auto; font-family: PingFangSC-Regular; font-size: 13px; color: #4b4a4b; } } } .item { width: 359px; margin: 0 auto; } .search { background-color: #fff; padding: 8px 12px; width: 100%; height: 1.02rem; z-index: 100; margin-bottom: 8px; input { background: url("../../assets/contractStart/search1.png") 320px no-repeat; background-size: 16px 16px; background-color: rgba(239, 239, 239, 0.55); padding-left: 12px; height: 36px; line-height: 36px; border-radius: 4px; width: 100%; font-family: PingFangSC-Regular; font-size: 14px; color: #888c8f; } input::placeholder { font-family: PingFangSC-Regular; font-size: 14px; color: #888c8f; letter-spacing: 0; } input:focus { background: url("../../assets/contractStart/search2.png") 320px no-repeat; background-size: 16px 16px; background-color: rgba(239, 239, 239, 0.55); border: 2px solid #bcc6ff; } } } .date-check { background: url("../../assets/trial/date.png") 350px no-repeat; background-size: 16px 16px; padding-right: 15px; } .hint-info { width: 100%; height: 36px; font-family: PingFangSC-Regular; font-size: 14px; color: #fcc800; letter-spacing: 0.5px; background-color: #faf5e0; display: flex; align-items: center; img { width: 16px; height: 16px; margin-left: 17px; margin-right: 17px; } } .add-box { .before { border: 1px solid #fdb62f; border-radius: 4px; color: #fdb62f; } .next { background: #1d3fff; border-radius: 4px; color: #fff; } } .userInfo:first-of-type { margin-top: 10px; } .userInfo { height: 40px; line-height: 40px; color: @headerColor; // margin-top: -10px; font-size: 15px; margin-left: 16px; position: relative; } .userInfo::before { content: ""; display: block; width: 4px; height: 20px; background-color: @headerColor; position: absolute; left: -15px; top: 12px; } .top { width: 100%; height: 81px; background-color: #faf5e0; display: flex; justify-content: center; align-items: center; .line { display: inline-block; width: 78px; border-top: 1px solid #a4a4a4; margin-bottom: 18px; } .line:nth-of-type(1) { border-top: 1px solid #ffa000; } .item { display: flex; justify-content: center; align-items: center; flex-flow: column wrap; font-family: PingFangSC-Semibold; font-size: 12px; color: rgba(56, 63, 69, 0.5); letter-spacing: 0.43px; img { width: 18px; } span { display: block; text-align: center; line-height: 18px; border-radius: 50%; width: 18px; height: 18px; color: #fff; background: #a4a4a4; } p { margin-top: 10px; } } .item:not(:nth-of-type(3)) { font-family: PingFangSC-Semibold; font-size: 12px; color: rgba(56, 63, 69, 0.5); letter-spacing: 0.43px; span { background-color: #ffa000; } } } } </style>