<!-- * @Descrip""/>User Settings Edit * @Author: your name * @Date: 2019-09-29 20:31:00 * @LastEditTime: 2019-12-09 13:57:18 * @LastEditors: Please set LastEditors --> <template> <h-view id="details1" class="public-style"> <h-header :proportion="[5,1,1]" class="bar-custom"> <div slot="left" class="h-header-btn"> <img src="@/assets/userBind/arrow.png" @click="$routeGo()"> <span>融资明细</span> </div> </h-header> <h-content> <list-item :item-height="44" class="second-part"> <item> <div slot="name" class="font-color">商务政策</div> <span slot="content">{{ info.product_plan_name }}</span> </item> <item> <div slot="name" class="font-color">设备总价</div> <CurrencyInput slot="content" v-model="equip_price" placeholder="请输入设备总价" /> </item> <item> <div slot="name" class="font-color">融资金额</div> <span v-if="!equip_price" slot="content" class="autoColor">融资金额自动填充</span> <span v-if="equip_price" slot="content">¥{{ parseFloat(equip_price - equip_price*info.down_payment_ratio_n.replace("%","")/100).toFixed(2) | currency }}</span> </item> <item> <div slot="name" class="font-color">首付款比例</div> <input slot="content" v-model="info.down_payment_ratio_n" placeholder="请输入首付款比例"> </item> <item> <div slot="name" class="font-color">首付款</div> <span v-if="!equip_price" slot="content" class="autoColor">首付款金额自动填充</span> <span v-if="equip_price" slot="content">¥{{ equip_price*info.down_payment_ratio_n.replace("%","")/100 | currency }}</span> </item> <item> <div slot="name" class="font-color">保证金比例</div> <input slot="content" v-model="info.deposit_ratio_n" placeholder="请输入保证金比例"> </item> <item> <div slot="name" class="font-color">保证金</div> <span v-if="!equip_price" slot="content" class="autoColor">保证金额自动填充</span> <span v-if="equip_price" slot="content">¥{{ equip_price*info.deposit_ratio_n.replace("%","")/100 | currency }}</span> </item> <item> <div slot="name" class="font-color">手续费比例</div> <input slot="content" v-model="info.lease_charge_ratio_n" placeholder="请输入手续费比例"> </item> <item> <div slot="name" class="font-color">手续费</div> <span v-if="!equip_price" slot="content" class="autoColor">手续费金额自动填充</span> <span v-if="equip_price" slot="content">¥{{ parseFloat((equip_price - equip_price*info.down_payment_ratio_n.replace("%","")/100)*(info.lease_charge_ratio_n.replace("%","")/100)).toFixed(2) | currency }}</span> </item> <item> <div slot="name" class="font-color">保险押金</div> <CurrencyInput slot="content" v-model="insurance_fee" placeholder="请输入保险押金"/></item> <item> <div slot="name" class="font-color">GPS费用</div> <CurrencyInput slot="content" v-model="gps_fee" placeholder="请输入GPS费用"/></item> <item> <div slot="name" class="font-color">首次付款合计</div> <span v-if="!equip_price" slot="content" class="autoColor">首次付款合计金额自动填充</span> <!-- 合计 = 首付款+保证金+手续费+GPS费用+保险押金 --> <span v-if="equip_price" slot="content">¥{{ parseFloat(equip_price*info.down_payment_ratio_n.replace("%","")/100 + equip_price*info.deposit_ratio_n.replace("%","")/100 + (equip_price - equip_price*info.down_payment_ratio_n.replace("%","")/100)*(info.lease_charge_ratio_n.replace("%","")/100) + Number(gps_fee) + Number(insurance_fee)).toFixed(2) | currency }}</span> </item> <item @click.native="showTime('YYYY-MM-DD')"> <div slot="name" class="fo nt-color">预计付款日</div> <div slot="content" class="autoColor">{{ price_date_to }}</div> <img src="@/assets/trial/date.png" alt="" class="date-pic"> </item> <item :show-arrow="true" @click.native="periodPull"> <div slot="name" class="font-color">还款周期</div> <span slot="content">{{ info.annual_pay_times_n }}</span> <!-- <input slot="content" v-model="info.annual_pay_times_n" placeholder="月"> --> </item> <item> <div slot="name" class="font-color">租赁期数</div> <input slot="content" v-model="info.lease_times" placeholder="请输入租赁期数"> </item> <item> <div slot="name" class="font-color">年利率</div> <span slot="content">{{ info.int_rate_n }}</span> </item> <!-- <item> <div slot="name" class="font-color">产品数量</div> <input slot="content" v-model="product_num" placeholder="请输入产品数量" > </item> --> <item :showArrow="true" @click.native="goRepay"> <div slot="name" class="font-color">查看还款计划</div> </item> </list-item> <div class="alert"> <div class="alert-content"> <div class="title"> <img src="@/assets/intoApproval/info.png"> <span class="info-word">提示</span> </div> <p class="top-info">具体请以实际合同发生情况为准,谢谢!</p> </div> </div> </h-content> <bottom-tab class="footer-button"> <tab-button class="approve" @click.native="calculationSave"> 试算 </tab-button> </bottom-tab> </h-view> </template> <script> import CurrencyInput from '@/components/currencyInput' export default { name: 'FinancingDetails', components: { CurrencyInput, }, data () { return { info: {}, gps_fee: '', // gps费用 insurance_fee: '', // 保险押金 quotation_id: '', // 试算成功返回id trial_flag: false, // 检测是否通过试算 equip_price: '', // 设备价格 periodLists: [], // 还款周期 product_num: '', // 产品数量 price_date_to: '请选择时间', // 预计还款日 product_plan_id: '', // 产品id annual_pay_times: '', } }, computed: {}, watch: { equip_price () { }, }, beforeRouteEnter (to, from, next) { next(vm => { if (from.name === 'FinancingTrial') { console.log('ssssss', vm.$route.params.plan_price) vm.$route.params.plan_price ? vm.equip_price = Number(vm.$route.params.plan_price) : vm.equip_price = '' // 重置产品id、试算返回id、试算状态、保险押金、gps费用、预计还款日 vm.product_plan_id = vm.$route.params.product_plan_id vm.quotation_id = '' vm.trial_flag = false vm.insurance_fee = '' vm.gps_fee = '' vm.price_date_to = '请选择时间' vm.detailsQuery() vm.repayPeriod() } }) next() }, created () {}, methods: { getVal (val) { this.equip_price = val }, // 还款计划 goRepay () { if (this.trial_flag) { this.$router.push({ name: 'TrialRepayPlan', params: { quotation_id: this.quotation_id, }, }) } else { hlsPopup.showLongCenter('您还未通过试算') } }, // 时间选择 showTime (format) { let vm = this hlsPopup.showTime({ nowDate: (new Date()).format('yyyy-MM-dd'), format: format, callback: (date) => { vm.price_date_to = date }, }) }, // 还款周期查询 repayPeriod () { let vm = this let url = $config.basePath + 'annual_pay_times_query' let param = { product_plan_id: vm.product_plan_id, } 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.info.annual_pay_times_n = obj.bp_type_n vm.annual_pay_times = obj.bp_type }, }) }, // 试算明细查询 detailsQuery () { let vm = this let url = $config.basePath + 'finance_detial' let param = { product_plan_id: vm.product_plan_id, } vm.hlsPopup.showLoading('数据加载中') vm.hlsHttp.post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.info = res.info vm.annual_pay_times = res.info.annual_pay_times } else { hlsPopup.showLongCenter(res.message) } }) }, // 试算保存 calculationSave () { if (!this.equip_price) { hlsPopup.showLongCenter('请输入设备总价') } else if (!this.price_date_to) { hlsPopup.showLongCenter('请选择时间') } else if (!this.gps_fee) { hlsPopup.showLongCenter('请输入GPS费用') } else if (!this.insurance_fee) { hlsPopup.showLongCenter('请输入保险押金费用') } else { let vm = this let url = $config.basePath + 'prd_calculation_save' let param = { 'master': { 'product_plan_id': vm.info.product_plan_id, 'equip_price': vm.equip_price, 'down_payment': vm.equip_price * (vm.info.down_payment_ratio_n.replace('%', '') / 100), 'deposit': vm.equip_price * (vm.info.deposit_ratio_n.replace('%', '') / 100), 'lease_charge': (vm.equip_price - vm.equip_price * vm.info.down_payment_ratio_n.replace('%', '') / 100) * (vm.info.lease_charge_ratio_n.replace('%', '') / 100), 'due_date': (vm.price_date_to).substr(0, 10), 'lease_times': vm.info.lease_times, 'insurance_fee': vm.insurance_fee, 'gps_fee': vm.gps_fee, 'annual_pay_times': vm.annual_pay_times, }, } vm.hlsPopup.showLoading('试算中,请稍后') vm.hlsHttp.post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { hlsPopup.showLongCenter('试算成功') vm.$router.push({ name: 'TrialRepayPlan', params: { quotation_id: res.quotation_id, }, }) vm.quotation_id = res.quotation_id vm.trial_flag = true } else { hlsPopup.showLongCenter(res.message) } }) } }, }, } </script> <style lang='less' scoped> #details1 { .date-pic { height: 17px; width: 17px; margin-top: 15px; margin-left: 6px; } .h-header-btn { img { width: 16px; height: 16px; margin-left: 4px; } span { font-family: PingFangSC-Semibold; margin-left: 16px; font-size: 17px; letter-spacing: 0.61px; line-height: 24px; } } .alert { margin-top: -10px; padding-bottom: 20px; width: 100%; //margin-top: -10px; background: #FbF2d2; } .alert-content { width: 334px; margin: 0 auto; padding-top: 16px; } .info-word { font-family: PingFangSC-Semibold; font-size: 14px; color: #fcc800; letter-spacing: 0.5px; margin-left: 8px; } .title { display: flex; align-items: center; } .top-word { p { font-family: PingFangSC-Regular; font-size: 12px; color: #656464; letter-spacing: 0.37px; margin-top: 7px; line-height: 15px; text-indent: 16px; position: relative; } p::before { content: ""; display: block; position: absolute; top: 5px; left: 0px; width: 4px; height: 4px; border-radius: 20px; background-color: #fcc800; } } .top-info { font-family: PingFangSC-Regular; font-size: 12px; color: #656464; letter-spacing: 0.37px; margin-top: 7px; line-height: 15px; span { color: #fcc800; } } .alert img { width: 18px; height: 18px; } .font-color { font-family: PingFangSC-Regular; font-size: 14px; color: #656464; letter-spacing: 0; } .autoColor { font-family: PingFangSC-Regular; //font-size: 14px; color: #B4B4B5; letter-spacing: 0; // text-align: right; // line-height: 18px; } .footer-button { .approve { width: 96%; height: 44px; background: @headerColor; border-radius: 4px; color: #fff; font-family: PingFangSC-Semibold; font-size: 15px; line-height: 20px; letter-spacing: 10px; margin: 0 auto; } } } </style>