Commit 091a3534 authored by 李晓兵's avatar 李晓兵

Merge branch 'develop' of https://hel.hand-china.com/xugong/hls-xcmg-vue-app into develop

parents 250832c5 f7cdf88f
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2019-10-31 09:49:57 * @Date: 2019-10-31 09:49:57
* @LastEditTime: 2019-11-08 15:16:00 * @LastEditTime: 2019-11-11 16:58:14
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: 合同查询--记录 * @Description: 合同查询--记录
* @FilePath: * @FilePath:
...@@ -29,18 +29,23 @@ ...@@ -29,18 +29,23 @@
</div> </div>
</div> </div>
<h-content v-if="data!==null" class="pay-content"> <!-- 全部合同记录 -->
<scroll ref="scroll" <scroll
:updateData="[lists]" v-if="selected === 'all'"
:pullUp="true" ref="scroll"
> :updateData="[lists]"
:pullUp="true"
>
<div class="pay-content">
<div v-for="(item,index) in lists" :key="index" class="contract-item"> <div v-for="(item,index) in lists" :key="index" class="contract-item">
<div class="header"> <div class="header">
<img src="@/assets/contractRepayment/contract.png" alt=""> <img src="@/assets/contractRepayment/contract.png" alt="">
<h2>{{ item.project_number }}</h2> <h2>{{ item.project_number }}</h2>
<!-- 状态用类名控制 待还款orange,待签约blue,还款中green,已结清black --> <!-- 状态用类名控制 待还款orange,待签约green,还款中blue,已结清black -->
<p class="green">待还款</p> <p v-if="item.contract_status_n === '待首付'" class="green">待签约</p>
<p v-if="item.contract_status_n === '首付还款中'" class="orange">代还款</p>
<p v-if="item.contract_status_n === '还款中'" class="blue">还款中</p>
<p v-if="item.contract_status_n === '已结清'" class="black">已结清</p>
</div> </div>
<div class="center"> <div class="center">
<div><span>承租人</span><p>{{ item.bp_name }}</p></div> <div><span>承租人</span><p>{{ item.bp_name }}</p></div>
...@@ -54,8 +59,125 @@ ...@@ -54,8 +59,125 @@
</section> </section>
</div> </div>
</div> </div>
</scroll> </div>
</h-content>
</scroll>
<!-- 待签约 -->
<scroll
v-if="selected === 'one'"
ref="scroll"
:updateData="[unSignedLists]"
:pullUp="true"
>
<div class="pay-content">
<div v-for="(item,index) in unSignedLists" :key="index" class="contract-item">
<div class="header">
<img src="@/assets/contractRepayment/contract.png" alt="">
<h2>{{ item.project_number }}</h2>
<p class="green">待签约</p>
</div>
<div class="center">
<div><span>承租人</span><p>{{ item.bp_name }}</p></div>
<div><span>年利率</span><p>{{ item.int_rate_n }}</p></div>
<div><span>期限</span><p>{{ item.lease_times }}</p></div>
<div><span>融资金额</span><p class="bold">{{ item.finance_amount | currency }}</p></div>
<span class="red">逾期一周</span>
<section @click="toRepayDetail(item.project_id)">
<img src="@/assets/contractRepayment/view.png" alt="">
<span>查看合同明细</span>
</section>
</div>
</div>
</div>
</scroll>
<!-- 待还款 -->
<scroll
v-if="selected === 'two'"
ref="scroll"
:updateData="[unRepayLists]"
:pullUp="true"
>
<div class="pay-content">
<div v-for="(item,index) in unRepayLists" :key="index" class="contract-item">
<div class="header">
<img src="@/assets/contractRepayment/contract.png" alt="">
<h2>{{ item.project_number }}</h2>
<p class="orange">待还款</p>
</div>
<div class="center">
<div><span>承租人</span><p>{{ item.bp_name }}</p></div>
<div><span>年利率</span><p>{{ item.int_rate_n }}</p></div>
<div><span>期限</span><p>{{ item.lease_times }}</p></div>
<div><span>融资金额</span><p class="bold">{{ item.finance_amount | currency }}</p></div>
<span class="red">逾期一周</span>
<section @click="toRepayDetail(item.project_id)">
<img src="@/assets/contractRepayment/view.png" alt="">
<span>查看合同明细</span>
</section>
</div>
</div>
</div>
</scroll>
<!-- 还款中 -->
<scroll
v-if="selected === 'three'"
ref="scroll"
:updateData="[repayingLists]"
:pullUp="true"
>
<div class="pay-content">
<div v-for="(item,index) in repayingLists" :key="index" class="contract-item">
<div class="header">
<img src="@/assets/contractRepayment/contract.png" alt="">
<h2>{{ item.project_number }}</h2>
<p class="blue">还款中</p>
</div>
<div class="center">
<div><span>承租人</span><p>{{ item.bp_name }}</p></div>
<div><span>年利率</span><p>{{ item.int_rate_n }}</p></div>
<div><span>期限</span><p>{{ item.lease_times }}</p></div>
<div><span>融资金额</span><p class="bold">{{ item.finance_amount | currency }}</p></div>
<span class="red">逾期一周</span>
<section @click="toRepayDetail(item.project_id)">
<img src="@/assets/contractRepayment/view.png" alt="">
<span>查看合同明细</span>
</section>
</div>
</div>
</div>
</scroll>
<!-- 已结清 -->
<scroll
v-if="selected === 'four'"
ref="scroll"
:updateData="[repayedLists]"
:pullUp="true"
>
<div class="pay-content">
<div v-for="(item,index) in repayedLists" :key="index" class="contract-item">
<div class="header">
<img src="@/assets/contractRepayment/contract.png" alt="">
<h2>{{ item.project_number }}</h2>
<p class="black">已结清</p>
</div>
<div class="center">
<div><span>承租人</span><p>{{ item.bp_name }}</p></div>
<div><span>年利率</span><p>{{ item.int_rate_n }}</p></div>
<div><span>期限</span><p>{{ item.lease_times }}</p></div>
<div><span>融资金额</span><p class="bold">{{ item.finance_amount | currency }}</p></div>
<span class="red">逾期一周</span>
<section @click="toRepayDetail(item.project_id)">
<img src="@/assets/contractRepayment/view.png" alt="">
<span>查看合同明细</span>
</section>
</div>
</div>
</div>
</scroll>
<h-content v-if="data===null" class="null"> <h-content v-if="data===null" class="null">
<div class="display"> <div class="display">
<img src="@/assets/contractRepayment/null.png" alt=""> <img src="@/assets/contractRepayment/null.png" alt="">
...@@ -76,8 +198,13 @@ export default { ...@@ -76,8 +198,13 @@ export default {
return { return {
// data: null, // 无记录时 // data: null, // 无记录时
data: 1, data: 1,
lists: [], lists: [], // 全部记录
selected: 'all', selected: 'all',
unSignedLists: [], // 待签约
unRepayLists: [], // 待还款
repayingLists: [], // 还款中
repayedLists: [], // 已结清
} }
}, },
computed: {}, computed: {},
...@@ -119,6 +246,10 @@ export default { ...@@ -119,6 +246,10 @@ export default {
vm.data = 1 vm.data = 1
} }
vm.lists = res.lists vm.lists = res.lists
vm.unSignedLists = res.lists.filter(item => item.contract_status_n === '待首付') // 待签约
vm.unRepayLists = res.lists.filter(item => item.contract_status_n === '首付还款中') // 待还款
vm.repayingLists = res.lists.filter(item => item.contract_status_n === '还款中') // 还款中
vm.repayedLists = res.lists.filter(item => item.contract_status_n === '已结清') // 已结清
if (res.lists.length > 0 && res.lists.length < 10) { if (res.lists.length > 0 && res.lists.length < 10) {
vm.$refs.scroll.update(true) vm.$refs.scroll.update(true)
} }
...@@ -210,6 +341,7 @@ export default { ...@@ -210,6 +341,7 @@ export default {
.pay-content { .pay-content {
padding: 8px 8px; padding: 8px 8px;
padding-bottom: 104px;
.contract-item { .contract-item {
height: 208px; height: 208px;
......
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
</item> </item>
<item> <item>
<div slot="name">商务政策</div> <div slot="name">商务政策</div>
<div slot="content">{{detailInfo.product_plan_id_n}}</div> <div slot="content">{{ detailInfo.product_plan_id_n }}</div>
</item> </item>
<item> <item>
<div slot="name">租赁物数量</div> <div slot="name">租赁物数量</div>
......
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<div class="total"> <div class="total">
<div class="sum"> <div class="sum">
<div>融资额</div> <div>融资额</div>
<p>{{info.total_rental_sum | currency}}</p> <p>{{ info.total_rental_sum | currency }}</p>
<img src="@/assets/contractInquire/num.png" alt=""> <img src="@/assets/contractInquire/num.png" alt="">
<h3><span>{{ info.lease_times }}</span></h3> <h3><span>{{ info.lease_times }}</span></h3>
</div> </div>
...@@ -148,7 +148,7 @@ export default { ...@@ -148,7 +148,7 @@ export default {
</script> </script>
<style lang='less'> <style lang='less'>
#repay-plans { #repay-plans {
.total { .total {
position: relative; position: relative;
background-color: #1D3FFF; background-color: #1D3FFF;
......
...@@ -107,6 +107,7 @@ export default { ...@@ -107,6 +107,7 @@ export default {
}, },
beforeRouteEnter (to, from, next) { beforeRouteEnter (to, from, next) {
next(vm => { next(vm => {
vm.show = false
vm.getRefund() vm.getRefund()
}) })
}, },
......
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
</item> </item>
<item> <item>
<div slot="name">合同金额</div> <div slot="name">合同金额</div>
<div slot="content">{{ detailInfo.total_price }}</div> <div slot="content">{{ detailInfo.total_price|currency }}</div>
</item> </item>
<item> <item>
<div slot="name">商务政策</div> <div slot="name">商务政策</div>
......
...@@ -27,7 +27,6 @@ ...@@ -27,7 +27,6 @@
</div> </div>
</div> </div>
</h-content> </h-content>
</h-view> </h-view>
</template> </template>
......
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2019-09-29 10:02:11 * @Date: 2019-09-29 10:02:11
* @LastEditTime: 2019-11-08 10:41:41 * @LastEditTime: 2019-11-11 13:58:43
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
--> -->
......
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2019-09-29 10:02:11 * @Date: 2019-09-29 10:02:11
* @LastEditTime: 2019-11-08 14:49:14 * @LastEditTime: 2019-11-11 14:52:00
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
--> -->
...@@ -19,62 +19,64 @@ ...@@ -19,62 +19,64 @@
</div> </div>
<div class="hinput"> <div class="hinput">
<div class="search-box"> <div class="search-box">
<input type="text" placeholder="请输入进件号/承租人名称"> <input type="text" placeholder="请输入合同号/承租人名称">
<img src="@/assets/constractSigning/search.png" alt="" style="width:18px"> <img src="@/assets/constractSigning/search.png" alt="" style="width:18px">
</div> </div>
</div> </div>
<h-content v-if="num === 1"> <!-- <h-content > -->
<scroll <scroll
ref="scroll" v-if="num === 1"
:updateData="[submitLists]" ref="scroll"
:pullUp="true" :updateData="[submitLists]"
> :pullUp="true"
<div class="wrap"> >
<div v-for="(item,index) in submitLists" :key="index" class="contract-lists" > <div class="wrap">
<div class="pro-code" @click="goDetails(item)"> <div v-for="(item,index) in submitLists" :key="index" class="contract-lists" >
<img src="@/assets/distributorSign/fileIcon.png" alt="" class="file-icon"> <div class="pro-code" @click="goDetails(item)">
<p> <img src="@/assets/distributorSign/fileIcon.png" alt="" class="file-icon">
<span>进件号</span> <p>
<span>{{ item.project_number }}</span> <span>合同号</span>
</p> <span>{{ item.project_number }}</span>
<img src="@/assets/distributorSign/goDetails.png" alt="" class="arrow"> </p>
</div> <img src="@/assets/distributorSign/goDetails.png" alt="" class="arrow">
<div class="box"> </div>
<div><p>承租人</p><p>{{ item.bp_name }}</p></div> <div class="box">
<div><p>合同租金</p><p class="money">{{ item.total_price|currency }}</p></div> <div><p>承租人</p><p>{{ item.bp_name }}</p></div>
<div><p>申请时间</p><p>{{ dateConverse(item.confirm_start_date) }}</p></div> <div><p>合同租金</p><p class="money">{{ item.total_price|currency }}</p></div>
</div> <div><p>申请时间</p><p>{{ dateConverse(item.confirm_start_date) }}</p></div>
</div> </div>
</div> </div>
</scroll> </div>
</h-content> </scroll>
<!-- </h-content> -->
<h-content v-if="num === 2"> <!-- <h-content > -->
<scroll <scroll
ref="scrollList" v-if="num === 2"
:updateData="[approvedLists]" ref="scrollList"
:pullUp="true" :updateData="[approvedLists]"
> :pullUp="true"
<div class="wrap"> >
<div v-for="(item,index) in approvedLists" :key="index" class="contract-lists" > <div class="wrap">
<div class="pro-code" @click="goDetails(item)"> <div v-for="(item,index) in approvedLists" :key="index" class="contract-lists" >
<img src="@/assets/distributorSign/fileIcon.png" alt="" class="file-icon"> <div class="pro-code" @click="goDetails(item)">
<p> <img src="@/assets/distributorSign/fileIcon.png" alt="" class="file-icon">
<span>进件号</span> <p>
<span>{{ item.project_number }}</span> <span>合同号</span>
</p> <span>{{ item.project_number }}</span>
<img src="@/assets/distributorSign/goDetails.png" alt="" class="arrow"> </p>
</div> <img src="@/assets/distributorSign/goDetails.png" alt="" class="arrow">
<div class="box"> </div>
<div><p>承租人</p><p>{{ item.bp_name }}</p></div> <div class="box">
<div><p>合同租金</p><p class="money">{{ item.total_price|currency }}</p></div> <div><p>承租人</p><p>{{ item.bp_name }}</p></div>
<div><p>申请时间</p><p>{{ dateConverse(item.confirm_start_date) }}</p></div> <div><p>合同租金</p><p class="money">{{ item.total_price|currency }}</p></div>
</div> <div><p>申请时间</p><p>{{ dateConverse(item.confirm_start_date) }}</p></div>
</div> </div>
</div> </div>
</scroll> </div>
</h-content> </scroll>
<!-- </h-content> -->
</h-view> </h-view>
</template> </template>
...@@ -105,9 +107,9 @@ export default { ...@@ -105,9 +107,9 @@ export default {
}, },
beforeRouteEnter (to, from, next) { beforeRouteEnter (to, from, next) {
next(vm => { next(vm => {
if (from.name === 'MyInfo') { if (from.name === 'MyInfo') {
vm.user_bp_type = vm.$route.params.user_bp_type vm.user_bp_type = vm.$route.params.user_bp_type
} }
vm.contractList() vm.contractList()
}) })
// next() // next()
...@@ -234,6 +236,9 @@ export default { ...@@ -234,6 +236,9 @@ export default {
} }
} }
} }
.scrollContent{
padding-bottom: 90px;
}
.wrap { .wrap {
width: 100%; width: 100%;
padding: 8px; padding: 8px;
......
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2019-09-29 10:02:11 * @Date: 2019-09-29 10:02:11
* @LastEditTime: 2019-11-08 10:49:33 * @LastEditTime: 2019-11-11 16:38:59
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
--> -->
...@@ -47,8 +47,14 @@ ...@@ -47,8 +47,14 @@
</item> </item>
<item> <item>
<div slot="name" >支行名称</div> <div slot="name" >支行名称</div>
<input v-if="user_bp_type !== 'GUTA' && confirm_status !== 'APPROVED'" slot="content" v-model="bank_lists[0].bank_branch_name" type="text" placeholder="请输入支行名称"> <input
<input v-if="user_bp_type === 'GUTA' || confirm_status === 'APPROVED'" slot="content" v-model="bank_lists[0].bank_branch_name" readonly type="text" placeholder="请输入支行名称"> v-if="user_bp_type !== 'GUTA' && confirm_status !== 'APPROVED'" slot="content" v-model="bank_lists[0].bank_branch_name" type="text"
placeholder="请输入支行名称"
>
<input
v-if="user_bp_type === 'GUTA' || confirm_status === 'APPROVED'" slot="content" v-model="bank_lists[0].bank_branch_name" readonly
type="text" placeholder="请输入支行名称"
>
</item> </item>
</list-item> </list-item>
...@@ -101,7 +107,7 @@ export default { ...@@ -101,7 +107,7 @@ export default {
computed: {}, computed: {},
watch: {}, watch: {},
activated () { activated () {
console.log('................',this.$route.params.user_bp_type) console.log('................', this.$route.params.user_bp_type)
this.user_bp_type = this.$route.params.user_bp_type this.user_bp_type = this.$route.params.user_bp_type
this.name = this.$route.params.name this.name = this.$route.params.name
this.confirm_status = this.$route.params.confirm_status this.confirm_status = this.$route.params.confirm_status
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
--> -->
<template> <template>
<h-view id="sign" class="public-style" title="经销商签约"> <h-view class="distribute-sign" title="经销商签约">
<h-header :proportion="[5,1,1]" class="bar-custom"> <h-header :proportion="[5,1,1]" class="bar-custom">
<div slot="left" class="h-header-btn"> <div slot="left" class="h-header-btn">
<img src="@/assets/userBind/arrow.png" @click="$routeGo()"> <img src="@/assets/userBind/arrow.png" @click="$routeGo()">
...@@ -15,12 +15,12 @@ ...@@ -15,12 +15,12 @@
<Tab @getTabNum="getTabNum"/> <Tab @getTabNum="getTabNum"/>
<div class="hinput"> <div class="hinput">
<div class="search-box"> <div class="search-box">
<input type="text" placeholder="请输入进件号/承租人名称"> <input type="text" placeholder="请输入合同号/承租人名称">
<img src="@/assets/distributorSign/search.png" alt=""> <img src="@/assets/distributorSign/search.png" alt="">
</div> </div>
</div> </div>
<h-content v-if="tabNum === 0">
<scroll <scroll
v-if="tabNum === 0"
ref="scroll" ref="scroll"
:updateData="[submitLists]" :updateData="[submitLists]"
:pullUp="true" :pullUp="true"
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
<div class="pro-code" @click="goDetails(item)"> <div class="pro-code" @click="goDetails(item)">
<img src="@/assets/distributorSign/fileIcon.png" alt="" class="file-icon"> <img src="@/assets/distributorSign/fileIcon.png" alt="" class="file-icon">
<p> <p>
<span>进件</span> <span>合同</span>
<span>{{ item.project_number }}</span> <span>{{ item.project_number }}</span>
</p> </p>
<img src="@/assets/distributorSign/goDetails.png" alt="" class="arrow"> <img src="@/assets/distributorSign/goDetails.png" alt="" class="arrow">
...@@ -43,10 +43,9 @@ ...@@ -43,10 +43,9 @@
</div> </div>
</div> </div>
</scroll> </scroll>
</h-content>
<h-content v-if="tabNum === 1">
<scroll <scroll
v-if="tabNum === 1"
ref="scrollList" ref="scrollList"
:updateData="[approvedLists]" :updateData="[approvedLists]"
:pullUp="true" :pullUp="true"
...@@ -56,7 +55,7 @@ ...@@ -56,7 +55,7 @@
<div class="pro-code" @click="goDetails(item)"> <div class="pro-code" @click="goDetails(item)">
<img src="@/assets/distributorSign/fileIcon.png" alt="" class="file-icon"> <img src="@/assets/distributorSign/fileIcon.png" alt="" class="file-icon">
<p> <p>
<span>进件</span> <span>合同</span>
<span>{{ item.project_number }}</span> <span>{{ item.project_number }}</span>
</p> </p>
<img src="@/assets/distributorSign/goDetails.png" alt="" class="arrow"> <img src="@/assets/distributorSign/goDetails.png" alt="" class="arrow">
...@@ -69,7 +68,6 @@ ...@@ -69,7 +68,6 @@
</div> </div>
</div> </div>
</scroll> </scroll>
</h-content>
</h-view> </h-view>
</template> </template>
...@@ -139,10 +137,48 @@ export default { ...@@ -139,10 +137,48 @@ export default {
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
#sign { .distribute-sign {
.wrap { .hinput {
width: 100%;
height: 68px;
border-bottom:1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
margin-top: 3px;
background: #fff;
.search-box {
position: relative;
z-index: 50;
width: 93.6%;
height: 36px;
font-size: 14px;
color: #B4B4B5;
letter-spacing: 0;
font-family: PingFangSC-Regular;
border: 1px solid rgba(56,63,69,0.60);
border-radius: 4px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
input {
width: 90%;height: 100%;
opacity: 0.4;
border: none;
line-height: 34px;
}
}
}
// .scrollContent{
// padding-bottom: 90px;
// }
.wrap {
width: 100%; width: 100%;
padding: 8px; padding: 8px;
padding-bottom: 104px;
.contract-lists { .contract-lists {
width: 100%; width: 100%;
background: #fff; background: #fff;
...@@ -211,45 +247,7 @@ export default { ...@@ -211,45 +247,7 @@ export default {
} }
} }
} }
}
.hinput {
position: relative;
z-index: 50;
width: 100%;
height: 68px;
border-bottom: 1px solid #cccccc70;
display: flex;
justify-content: center;
align-items: center;
margin-top: 3px;
background: #fff;
margin-bottom: 9px;
.search-box {
width: 93.6%;
height: 36px;
font-size: 14px;
color: #B4B4B5;
letter-spacing: 0;
font-family: PingFangSC-Regular;
border: 1px solid rgba(56, 63, 69, 0.60);
border-radius: 4px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
input {
width: 90%;
height: 100%;
opacity: 0.4;
border: none;
line-height: 34px;
}
}
}
} }
}
</style> </style>
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Description: 法人信息 * @Description: 法人信息
* @Author: your name * @Author: your name
* @Date: 2019-09-26 15:09:24 * @Date: 2019-09-26 15:09:24
* @LastEditTime: 2019-10-09 20:38:52 * @LastEditTime: 2019-11-11 14:00:00
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
--> -->
<template> <template>
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
<input slot="content" v-model="baseInfo.auth_flag" readonly> <input slot="content" v-model="baseInfo.auth_flag" readonly>
</item> </item>
</list-item> </list-item>
<div class="equipment-list">{{ baseInfo.auth_flag === '是' ? '法定授权人': '法定代表人' }}</div> <div class="equipment-list" v-if="baseInfo.auth_flag === '是'">{{ '法定授权人' }}</div>
<!-- 授权人 --> <!-- 授权人 -->
<list-item v-show="baseInfo.auth_flag === '是'" :item-height="44" class="second-part"> <list-item v-show="baseInfo.auth_flag === '是'" :item-height="44" class="second-part">
...@@ -56,6 +56,10 @@ ...@@ -56,6 +56,10 @@
<div slot="name" class="font-color">姓名</div> <div slot="name" class="font-color">姓名</div>
<input slot="content" v-model="baseInfo.auth_person_name" readonly> <input slot="content" v-model="baseInfo.auth_person_name" readonly>
</item> </item>
<item>
<div slot="name" class="font-color">手机号</div>
<input slot="content" v-model="baseInfo.auth_cell_phone" readonly>
</item>
<item> <item>
<div slot="name" class="font-color">证件号</div> <div slot="name" class="font-color">证件号</div>
<input slot="content" v-model="baseInfo.auth_person_id_card" readonly> <input slot="content" v-model="baseInfo.auth_person_id_card" readonly>
...@@ -71,7 +75,8 @@ ...@@ -71,7 +75,8 @@
</list-item> </list-item>
<!-- 法定代表人 --> <!-- 法定代表人 -->
<list-item v-show="baseInfo.auth_flag === '否'" :item-height="44" class="second-part"> <div class="equipment-list">法定代表人</div>
<list-item :item-height="44" class="second-part">
<item> <item>
<div slot="name" class="font-color">姓名</div> <div slot="name" class="font-color">姓名</div>
<input slot="content" v-model="baseInfo.legal_person" readonly> <input slot="content" v-model="baseInfo.legal_person" readonly>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Descrip""/>User Settings Edit * @Descrip""/>User Settings Edit
* @Author: your name * @Author: your name
* @Date: 2019-09-29 20:31:00 * @Date: 2019-09-29 20:31:00
* @LastEditTime: 2019-11-08 10:22:17 * @LastEditTime: 2019-11-11 11:30:04
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
--> -->
<template> <template>
...@@ -44,8 +44,9 @@ ...@@ -44,8 +44,9 @@
<item> <item>
<div slot="name" class="font-color">保证金</div> <div slot="name" class="font-color">保证金</div>
<span v-if="!equip_price" slot="content" class="autoColor">保证金额自动填充</span> <span v-if="!equip_price" slot="content" class="autoColor">保证金额自动填充</span>
<span v-if="equip_price" <span
slot="content">{{ equip_price*info.deposit_ratio_n.replace("%","")/100 | currency }}</span> v-if="equip_price"
slot="content">{{ equip_price*info.deposit_ratio_n.replace("%","")/100 | currency }}</span>
</item> </item>
<item> <item>
<div slot="name" class="font-color">手续费比例</div> <div slot="name" class="font-color">手续费比例</div>
...@@ -76,9 +77,9 @@ ...@@ -76,9 +77,9 @@
<div slot="content" class="autoColor">{{ price_date_to }}</div> <div slot="content" class="autoColor">{{ price_date_to }}</div>
<img src="@/assets/trial/date.png" alt="" class="date-pic" @click="showTime('YYYY-MM-DD')"> <img src="@/assets/trial/date.png" alt="" class="date-pic" @click="showTime('YYYY-MM-DD')">
</item> </item>
<item @click.native="periodPull" :show-arrow="true"> <item :show-arrow="true" @click.native="periodPull">
<div slot="name" class="font-color">还款周期</div> <div slot="name" class="font-color">还款周期</div>
<span slot="content">{{info.annual_pay_times_n}}</span> <span slot="content">{{ info.annual_pay_times_n }}</span>
<!-- <input slot="content" v-model="info.annual_pay_times_n" placeholder="月"> --> <!-- <input slot="content" v-model="info.annual_pay_times_n" placeholder="月"> -->
</item> </item>
<item> <item>
...@@ -103,7 +104,7 @@ ...@@ -103,7 +104,7 @@
<img src="@/assets/intoApproval/info.png"> <img src="@/assets/intoApproval/info.png">
<span class="info-word">提示</span> <span class="info-word">提示</span>
</div> </div>
<p class="top-info">具体请以实际进件发生情况为准,谢谢!</p> <p class="top-info">具体请以实际合同发生情况为准,谢谢!</p>
</div> </div>
</div> </div>
</h-content> </h-content>
...@@ -128,7 +129,7 @@ export default { ...@@ -128,7 +129,7 @@ export default {
equip_price: null, // 设备价格 equip_price: null, // 设备价格
periodLists: [], // 还款周期 periodLists: [], // 还款周期
product_num: '', // 产品数量 product_num: '', // 产品数量
price_date_to: '', // 预计还款日 price_date_to: '请选择时间', // 预计还款日
product_plan_id: '', // 产品id product_plan_id: '', // 产品id
annual_pay_times: '', annual_pay_times: '',
} }
...@@ -137,8 +138,8 @@ export default { ...@@ -137,8 +138,8 @@ export default {
watch: { watch: {
equip_price () { equip_price () {
},
}, },
},
beforeRouteEnter (to, from, next) { beforeRouteEnter (to, from, next) {
next(vm => { next(vm => {
if (from.name === 'FinancingTrial') { if (from.name === 'FinancingTrial') {
...@@ -149,7 +150,7 @@ export default { ...@@ -149,7 +150,7 @@ export default {
vm.trial_flag = false vm.trial_flag = false
vm.insurance_fee = '' vm.insurance_fee = ''
vm.gps_fee = '' vm.gps_fee = ''
vm.price_date_to = '' vm.price_date_to = '请选择时间'
} }
vm.detailsQuery() vm.detailsQuery()
vm.repayPeriod() vm.repayPeriod()
...@@ -158,130 +159,135 @@ export default { ...@@ -158,130 +159,135 @@ export default {
next() next()
}, },
created () {}, created () {},
methods: methods:
{ {
// 还款计划 // 还款计划
goRepay() { goRepay () {
if (this.trial_flag) { if (this.trial_flag) {
this.$router.push({ this.$router.push({
name: 'TrialRepayPlan', name: 'TrialRepayPlan',
params: { params: {
quotation_id: this.quotation_id, 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 { } else {
hlsPopup.showLongCenter('您还未通过试算') hlsPopup.showLongCenter(res.message)
} }
}, })
},
// 时间选择 // 还款周期选择
showTime (format) { periodPull () {
let vm = this let vm = this
hlsPopup.showTime({ vm.hlsPopup.selectList({
nowDate: (new Date()).format('yyyy-MM-dd'), list: vm.periodLists, // 下拉列表
format: format, code: 'bp_type',
callback: (date) => { object: {},
vm.price_date_to = date returnItem: function (index, obj) {
}, vm.info.annual_pay_times_n = obj.bp_type_n
}) vm.annual_pay_times = obj.bp_type
}, },
})
// 还款周期查询 },
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 () { detailsQuery () {
let vm = this let vm = this
let url = $config.basePath + 'finance_detial' let url = $config.basePath + 'finance_detial'
let param = { let param = {
product_plan_id: vm.product_plan_id, product_plan_id: vm.product_plan_id,
} }
vm.hlsPopup.showLoading('数据加载中') vm.hlsPopup.showLoading('数据加载中')
vm.hlsHttp.post(url, param).then(function (res) { vm.hlsHttp.post(url, param).then(function (res) {
vm.hlsPopup.hideLoading() vm.hlsPopup.hideLoading()
if (res.result === 'S') { if (res.result === 'S') {
vm.info = res.info vm.info = res.info
vm.annual_pay_times = res.info.annual_pay_times vm.annual_pay_times = res.info.annual_pay_times
} else { } else {
hlsPopup.showLongCenter(res.message) hlsPopup.showLongCenter(res.message)
} }
}) })
}, },
// 试算保存 // 试算保存
calculationSave () { calculationSave () {
if (!this.equip_price) { if (!this.equip_price) {
hlsPopup.showLongCenter('请输入设备总价') hlsPopup.showLongCenter('请输入设备总价')
} else if (!this.price_date_to) { } else if (!this.price_date_to) {
hlsPopup.showLongCenter('请选择时间') hlsPopup.showLongCenter('请选择时间')
} else if(!this.gps_fee){ } else if (!this.gps_fee) {
hlsPopup.showLongCenter('请输入GPS费用') hlsPopup.showLongCenter('请输入GPS费用')
} else if(!this.insurance_fee){ } else if (!this.insurance_fee) {
hlsPopup.showLongCenter('请输入保险押金费用') hlsPopup.showLongCenter('请输入保险押金费用')
} else { } else {
let vm = this let vm = this
let url = $config.basePath + 'prd_calculation_save' let url = $config.basePath + 'prd_calculation_save'
let param = { let param = {
'master': { 'master': {
'product_plan_id': vm.info.product_plan_id, 'product_plan_id': vm.info.product_plan_id,
'equip_price': vm.equip_price, 'equip_price': vm.equip_price,
'down_payment': vm.equip_price * (vm.info.down_payment_ratio_n.replace('%', '') / 100), 'down_payment': vm.equip_price * (vm.info.down_payment_ratio_n.replace('%', '') / 100),
'deposit': vm.equip_price * (vm.info.deposit_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), '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), 'due_date': (vm.price_date_to).substr(0, 10),
"lease_times": vm.info.lease_times, 'lease_times': vm.info.lease_times,
"insurance_fee": vm.insurance_fee, 'insurance_fee': vm.insurance_fee,
"gps_fee": vm.gps_fee, 'gps_fee': vm.gps_fee,
"annual_pay_times": vm.annual_pay_times, 'annual_pay_times': vm.annual_pay_times,
}, },
} }
vm.hlsPopup.showLoading('试算中,请稍后') vm.hlsPopup.showLoading('试算中,请稍后')
vm.hlsHttp.post(url, param).then(function (res) { vm.hlsHttp.post(url, param).then(function (res) {
vm.hlsPopup.hideLoading() vm.hlsPopup.hideLoading()
if (res.result === 'S') { if (res.result === 'S') {
hlsPopup.showLongCenter('试算成功') hlsPopup.showLongCenter('试算成功')
vm.quotation_id = res.quotation_id vm.$router.push({
vm.trial_flag = true name: 'TrialRepayPlan',
} else { params: {
hlsPopup.showLongCenter(res.message) quotation_id: res.quotation_id,
} },
}) })
} vm.quotation_id = res.quotation_id
}, vm.trial_flag = true
}, } else {
hlsPopup.showLongCenter(res.message)
}
})
}
},
},
} }
</script> </script>
<style lang='less' scoped> <style lang='less' scoped>
......
...@@ -19,42 +19,42 @@ ...@@ -19,42 +19,42 @@
<img src="@/assets/contractInquire/search.png" alt=""> <img src="@/assets/contractInquire/search.png" alt="">
<input type="text" placeholder="请输入产品名称"> <input type="text" placeholder="请输入产品名称">
</div> </div>
<scroll <scroll
ref="scroll" ref="scroll"
:updateData="[lists]" :updateData="[lists]"
:pullUp="true" :pullUp="true"
> >
<section v-for="(item,index) in lists" :key="index"> <section v-for="(item,index) in lists" :key="index">
<div class="descript" @click="goDetails(item.product_plan_id)"> <div class="descript" @click="goDetails(item.product_plan_id)">
<img src="@/assets/trial/product.png" alt=""> <img src="@/assets/trial/product.png" alt="">
<p class="produc">{{ item.product_plan_id_n }}</p> <p class="produc">{{ item.product_plan_id_n }}</p>
<img class="linkPic" src="@/assets/distributorSign/righticon.png" alt=""> <img class="linkPic" src="@/assets/distributorSign/righticon.png" alt="">
</div> </div>
<div class="tario"> <div class="tario">
<div class="wrap"> <div class="wrap">
<p class="ratio"> <p class="ratio">
<span>保证金比例</span> <span>保证金比例</span>
<span>{{ item.deposit_ratio_n }}</span> <span>{{ item.deposit_ratio_n }}</span>
</p> </p>
<p> <p>
<span>手续费比例</span> <span>手续费比例</span>
<span>{{ item.lease_charge_ratio_n }}</span> <span>{{ item.lease_charge_ratio_n }}</span>
</p> </p>
</div> </div>
<div class="wrap"> <div class="wrap">
<p> <p>
<span>年利率</span> <span>年利率</span>
<span>{{ item.int_rate_n }}</span> <span>{{ item.int_rate_n }}</span>
</p> </p>
<p> <p>
<span>&nbsp;&nbsp;&nbsp;</span> <span>&nbsp;&nbsp;&nbsp;</span>
<span>{{ item.lease_times }}</span> <span>{{ item.lease_times }}</span>
</p> </p>
</div>
</div> </div>
</section> </div>
</scroll> </section>
</scroll>
</h-view> </h-view>
</template> </template>
...@@ -116,8 +116,8 @@ export default { ...@@ -116,8 +116,8 @@ export default {
if (res.result === 'S') { if (res.result === 'S') {
vm.lists = res.lists vm.lists = res.lists
if (res.lists.length > 0 && res.lists.length < 10) { if (res.lists.length > 0 && res.lists.length < 10) {
vm.$refs.scroll.update(true) vm.$refs.scroll.update(true)
} }
} else { } else {
hlsPopup.showLongCenter(res.message) hlsPopup.showLongCenter(res.message)
} }
...@@ -131,8 +131,8 @@ export default { ...@@ -131,8 +131,8 @@ export default {
if (res.result === 'S') { if (res.result === 'S') {
vm.lists = res.lists vm.lists = res.lists
if (res.lists.length > 0 && res.lists.length < 10) { if (res.lists.length > 0 && res.lists.length < 10) {
vm.$refs.scroll.update(true) vm.$refs.scroll.update(true)
} }
} else { } else {
hlsPopup.showLongCenter(res.message) hlsPopup.showLongCenter(res.message)
} }
......
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<div class="total"> <div class="total">
<div class="sum"> <div class="sum">
<div>融资额</div> <div>融资额</div>
<p>{{info.finance_amount | currency}}</p> <p>{{ info.finance_amount | currency }}</p>
<img src="@/assets/contractInquire/num.png" alt=""> <img src="@/assets/contractInquire/num.png" alt="">
<h3><span>{{ info.lease_times }}</span></h3> <h3><span>{{ info.lease_times }}</span></h3>
</div> </div>
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
<img v-if="statu === 'green'" src="@/assets/contractInquire/green.png" alt="" class="left"> <img v-if="statu === 'green'" src="@/assets/contractInquire/green.png" alt="" class="left">
<div class="time"> <div class="time">
<p>{{ item.due_date.substr(0,4) }}</p> <p>{{ item.due_date.substr(0,4) }}</p>
<span>{{ dateConverse(item.due_date).substr(5,10) }}</span> <span>{{ dateConverse(item.due_date).substr(5,10) }}</span>
</div> </div>
<div class="name"> <div class="name">
<p>款项</p> <p>款项</p>
...@@ -137,7 +137,6 @@ export default { ...@@ -137,7 +137,6 @@ export default {
if (res.result === 'S') { if (res.result === 'S') {
vm.info = res.info vm.info = res.info
vm.repayLists = res.lists.sort(vm.arrSort('times')) // 根据还款期排序 vm.repayLists = res.lists.sort(vm.arrSort('times')) // 根据还款期排序
} else { } else {
hlsPopup.showLongCenter(res.message) hlsPopup.showLongCenter(res.message)
} }
......
...@@ -28,8 +28,8 @@ ...@@ -28,8 +28,8 @@
<list-item v-for="(item,index) in productList" :key="index"> <list-item v-for="(item,index) in productList" :key="index">
<item :proportion="[1,4]" @click.native="goDetailed(item.product_id,item.collect_status,item.bp_id)"> <item :proportion="[1,4]" @click.native="goDetailed(item.product_id,item.collect_status,item.bp_id)">
<div slot="name" class="item-pic"> <div slot="name" class="item-pic">
<img src="@/assets/homePage/WechatIMG2 Copy@2x.png" alt=""> <img :src="item.url" alt="">
</div> </div>
<div slot="content" class="item-content"> <div slot="content" class="item-content">
<div class="pro-name"> <div class="pro-name">
<p>{{ item.product_name }}</p> <p>{{ item.product_name }}</p>
...@@ -87,6 +87,9 @@ export default { ...@@ -87,6 +87,9 @@ export default {
hlsPopup.hideLoading() hlsPopup.hideLoading()
if (res.result === 'S') { if (res.result === 'S') {
vm.productList = res.lists vm.productList = res.lists
res.lists.forEach(item => {
item['url'] = process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token
})
if (res.lists.length > 0 && res.lists.length < 10) { if (res.lists.length > 0 && res.lists.length < 10) {
vm.$refs.scroll.update(true) vm.$refs.scroll.update(true)
} }
......
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
<p>本次还款</p> <p>本次还款</p>
</div> </div>
<div class="item-right"> <div class="item-right">
<p>{{ e.due_amount|currency }}</p> <p>{{ parseFloat(e.due_amount).toFixed(2)|currency }}</p>
<p>{{ e.received_amount|currency }}</p> <p>{{ e.received_amount|currency }}</p>
<input v-model="e.amount" type="text" placeholder="请输入还款金额" > <input v-model="e.amount" type="text" placeholder="请输入还款金额" >
</div> </div>
...@@ -102,7 +102,7 @@ export default { ...@@ -102,7 +102,7 @@ export default {
}, },
beforeRouteEnter (to, from, next) { beforeRouteEnter (to, from, next) {
next(vm => { next(vm => {
// vm.getDetail() vm.getDetail()
}) })
}, },
...@@ -312,7 +312,8 @@ export default { ...@@ -312,7 +312,8 @@ export default {
border: none; border: none;
border-bottom: 1px solid #1d3fff; border-bottom: 1px solid #1d3fff;
font-size: 13px; font-size: 13px;
text-align: center; text-align: right;
float: right;
} }
input::placeholder { input::placeholder {
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
......
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<div class="title">当前应付</div> <div class="title">当前应付</div>
<div class="data"> <div class="data">
<span></span> <span></span>
{{ money |currency }} {{ moneyToFix |currency }}
</div> </div>
</div> </div>
</div> </div>
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
</div> </div>
<div class="pay-input"> <div class="pay-input">
<span>应还首付款</span> <span>应还首付款</span>
<input v-model="money" type="text" placeholder="请输入支付金额" > <input v-model="moneyToFix" type="text" placeholder="请输入支付金额" >
<div @click="createOrder"> <div @click="createOrder">
<img src="@/assets/payment/into.png" > <img src="@/assets/payment/into.png" >
</div> </div>
...@@ -73,7 +73,11 @@ export default { ...@@ -73,7 +73,11 @@ export default {
} }
}) })
}, },
computed: {}, computed: {
moneyToFix () {
return parseFloat(this.money).toFixed(2)
},
},
watch: {}, watch: {},
methods: { methods: {
getDownPayment () { getDownPayment () {
......
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
v-for="(item,index) in nongBank" v-for="(item,index) in nongBank"
:proportion="[7,1,1]" :proportion="[7,1,1]"
:key="item.bank_account_num" :key="item.bank_account_num"
@click.native="isSelect(`nong${index}`)" @click.native="isSelect(`nong${index}`);ischeck(item)"
> >
<div slot="name" style="flex=3"> <div slot="name" style="flex=3">
<img :src="selectImg(item)" alt class="icon" > <img :src="selectImg(item)" alt class="icon" >
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
<img v-show="select !== `nong${index}`" src="@/assets/payment/unselect.png" alt > <img v-show="select !== `nong${index}`" src="@/assets/payment/unselect.png" alt >
</section> </section>
</item> </item>
<item :proportion="[7,1,1]" @click.native="isSelect('one')"> <item :proportion="[7,1,1]" @click.native="isSelect('one');ischeck('one')">
<div slot="name"> <div slot="name">
<img src="@/assets/payment/alipay.png" alt class="icon1" > 支付宝 <img src="@/assets/payment/alipay.png" alt class="icon1" > 支付宝
</div> </div>
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
<img v-show="select !== 'one'" src="@/assets/payment/unselect.png" alt > <img v-show="select !== 'one'" src="@/assets/payment/unselect.png" alt >
</section> </section>
</item> </item>
<item :proportion="[7,1,1]" @click.native="isSelect('two')"> <item :proportion="[7,1,1]" @click.native="isSelect('two');ischeck('two')">
<div slot="name"> <div slot="name">
<img src="@/assets/payment/wx.png" alt class="icon2" > 微信 <img src="@/assets/payment/wx.png" alt class="icon2" > 微信
</div> </div>
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
v-for="(item,index) in newList" v-for="(item,index) in newList"
:proportion="[7,1,1]" :proportion="[7,1,1]"
:key="index" :key="index"
@click.native="isSelect(`three${index}`)" @click.native="isSelect(`three${index}`);ischeck(item)"
> >
<div slot="name" style="flex=3"> <div slot="name" style="flex=3">
<img :src="selectImg(item)" alt class="icon" > <img :src="selectImg(item)" alt class="icon" >
...@@ -77,79 +77,86 @@ ...@@ -77,79 +77,86 @@
</item> </item>
</list-item> </list-item>
</div> </div>
</div></transition> </div>
</transition>
<transition name="trans"> <transition name="trans">
<div v-show="confirm" class="modal-show-bank"> <div v-show="confirm" class="modal-show-confirm">
<div class="down"> <div class="down">
<div class="top"> <div class="top">
<img src="@/assets/payment/back.png" @click="show=false" > <img src="@/assets/payment/back.png" @click="confirm=false" >
<span>确认付款</span> <span>确认付款</span>
</div> </div>
<div class="info"> <div class="info">
<div class="info-item"> <div class="info-item">
<span>还款金额</span> <span>还款金额</span>
<span>¥50600.00</span> <span>¥{{ money |currency }}</span>
</div> </div>
<div class="interest"> <div class="interest">
<span>本次交易收取0.03%服务费</span> <span>本次交易收取{{ rate }}%服务费</span>
</div> </div>
<div class="info-item"> <div class="info-item">
<span>服务费</span> <span>服务费</span>
<span>+¥15.00</span> <span>{{ serviceCharge |currency }}</span>
</div>
<div class="info-item">
<span>合同编号</span>
<span>EF12345678</span>
</div> </div>
<div class="info-item" @click="show=true"> <div class="info-item" @click="show=true">
<span>付款方式</span> <span>付款方式</span>
<span v-if="flag"><img src="@/assets/payment/ly.png"><span>农业银行</span><img class="arrow" src="@/assets/payment/go.png"></span> <span>
<span v-if="!flag"><img src="@/assets/payment/alipay.png"><span>支付宝</span><img class="arrow" src="@/assets/payment/go.png"></span> <img :src="checkType.img" >
<span>{{ checkType.bank_full_name }}</span>
<span v-if="sectctNong">({{ selectLast(checkType) }})</span>
<img class="arrow" src="@/assets/payment/go.png" >
</span>
</div> </div>
</div> </div>
<bottom-tab>
<tab-button class="foot" @click.native="pay">立即支付</tab-button>
</bottom-tab>
</div> </div>
</div></transition> </div>
</transition>
<h-header :proportion="[5,1,1]" class="bar-custom"> <h-header :proportion="[5,1,1]" class="bar-custom">
<div slot="left" class="h-header-btn"> <div slot="left" class="h-header-btn">
<img src="@/assets/userBind/arrow.png" @click="$routeGo()"> <img src="@/assets/userBind/arrow.png" @click="$routeGo()" >
<span>支付中心</span> <span>支付中心</span>
</div> </div>
</h-header> </h-header>
<h-content class="entry-content"> <h-content class="entry-content">
<div class="amount"> <div class="amount">
<p>{{ userName }}</p> <p>{{ userName }}</p>
<div>{{ money |currency }}</div> <div>{{ sumMoney |currency }}</div>
</div> </div>
<div class="info"> <div class="info">
<div class="info-item"> <div class="info-item">
<span>还款金额</span> <span>还款金额</span>
<span>¥50600.00</span> <span>¥{{ parseFloat(money).toFixed(2) |currency }}</span>
</div> </div>
<div class="interest"> <div class="interest">
<span>本次交易收取0.03%服务费</span> <span>本次交易收取{{ rate }}%服务费</span>
</div> </div>
<div class="info-item"> <div class="info-item">
<span>服务费</span> <span>服务费</span>
<span>+¥15.00</span> <span>{{ serviceCharge }}</span>
</div>
<div class="info-item">
<span>合同编号</span>
<span>EF12345678</span>
</div> </div>
<div class="info-item" @click="show=true"> <div class="info-item" @click="show=true">
<span>付款方式</span> <span>付款方式</span>
<span v-if="flag"><img src="@/assets/payment/ly.png"><span>农业银行</span><img class="arrow" src="@/assets/payment/go.png"></span> <span>
<span v-if="!flag"><img src="@/assets/payment/alipay.png"><span>支付宝</span><img class="arrow" src="@/assets/payment/go.png"></span> <img :src="checkType.img" >
<span>{{ checkType.bank_full_name }}</span>
<span v-if="sectctNong">({{ selectLast(checkType) }})</span>
<img class="arrow" src="@/assets/payment/go.png" >
</span>
</div> </div>
</div> </div>
</h-content> </h-content>
<bottom-tab> <bottom-tab>
<tab-button class="foot" @click.native="pay">确认支付</tab-button> <tab-button class="foot" @click.native="affirm">确认支付</tab-button>
</bottom-tab> </bottom-tab>
</h-view> </h-view>
</template> </template>
<script> <script>
import zfb from '@/assets/payment/alipay.png'
import wx from '@/assets/payment/wx.png'
import js from '@/assets/payment/js.png' import js from '@/assets/payment/js.png'
import ny from '@/assets/payment/ly.png' import ny from '@/assets/payment/ly.png'
import pf from '@/assets/payment/pf.png' import pf from '@/assets/payment/pf.png'
...@@ -171,9 +178,15 @@ export default { ...@@ -171,9 +178,15 @@ export default {
data () { data () {
return { return {
money: '', money: '',
rate: 0.03,
select: 'three0', select: 'three0',
name: '', name: '',
checkType: {}, sectctNong: false,
checkType: {
img: '',
bank_full_name: '',
bank_account_num: '',
},
confirm: false, confirm: false,
show: false, show: false,
downNum: false, downNum: false,
...@@ -185,6 +198,14 @@ export default { ...@@ -185,6 +198,14 @@ export default {
} }
}, },
computed: { computed: {
serviceCharge () {
return (this.money * (this.rate / 100)).toFixed(2)
},
sumMoney () {
return (parseFloat(this.serviceCharge) + parseFloat(this.money)).toFixed(
2
)
},
newList () { newList () {
let vm = this let vm = this
vm.nongBank = [] vm.nongBank = []
...@@ -199,19 +220,24 @@ export default { ...@@ -199,19 +220,24 @@ export default {
}) })
if (vm.flag) { if (vm.flag) {
vm.select = 'nong0' vm.select = 'nong0'
vm.checkType.bank_full_name = '农业银行'
vm.checkType.img = ny
vm.checkType.bank_account_num = this.nongBank[0].bank_account_num
vm.sectctNong = true
} else { } else {
vm.select = 'one' vm.select = 'one'
} vm.checkType.bank_full_name = '支付宝'
if (vm.nongBank.length !== 0) { vm.checkType.img = zfb
vm.checkType = {...vm.nongBank[0]} vm.sectctNong = false
} }
return notNong return notNong
}, },
}, },
watch: {},
beforeRouteEnter (to, from, next) { beforeRouteEnter (to, from, next) {
next(vm => { next(vm => {
vm.confirm = false
vm.show = false
vm.downNum = false
vm.name = from.name vm.name = from.name
vm.getType() vm.getType()
vm.nongBank = [] vm.nongBank = []
...@@ -263,6 +289,23 @@ export default { ...@@ -263,6 +289,23 @@ export default {
isSelect (way) { isSelect (way) {
this.select = way this.select = way
}, },
ischeck (way) {
if (way === 'one') {
this.checkType.bank_full_name = '支付宝'
this.checkType.img = zfb
this.sectctNong = false
} else if (way === 'two') {
this.checkType.bank_full_name = '微信'
this.checkType.img = wx
this.sectctNong = false
} else {
this.checkType.bank_full_name = way.bank_full_name
this.checkType.bank_account_num = way.bank_account_num
this.checkType.img = this.selectImg(way)
this.sectctNong = true
}
this.show = false
},
pay () { pay () {
let vm = this let vm = this
hlsPopup.showLoading('请稍候') hlsPopup.showLoading('请稍候')
...@@ -275,6 +318,9 @@ export default { ...@@ -275,6 +318,9 @@ export default {
} }
}, 2000) }, 2000)
}, },
affirm () {
this.confirm = true
},
changePage () { changePage () {
this.$router.push({ this.$router.push({
name: 'Success', name: 'Success',
...@@ -314,7 +360,7 @@ export default { ...@@ -314,7 +360,7 @@ export default {
.trans-leave-active { .trans-leave-active {
opacity: 0; opacity: 0;
} }
.modal-show-bank { .modal-show-confirm {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
...@@ -324,80 +370,123 @@ export default { ...@@ -324,80 +370,123 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.down { .down {
height:466px; height: 466px;
width: 100%; width: 100%;
position: absolute; position: absolute;
bottom: 0px; bottom: 0px;
background-color: #fff;
border-radius: 12px 12px 0 0;
overflow: scroll;
.top{
position: fixed;
left:24px;
width:330px;
height:54px;
display: flex;
z-index: 999;
align-items: center;
background-color: #fff; background-color: #fff;
img{ border-radius: 12px 12px 0 0;
width:20px; overflow: scroll;
.top {
position: fixed;
left: 24px;
width: 330px;
height: 54px;
display: flex;
z-index: 999;
align-items: center;
background-color: #fff;
img {
width: 20px;
}
span {
margin-left: 38%;
font-family: PingFangSC-Semibold;
font-size: 16px;
color: #656464;
letter-spacing: 0.49px;
text-align: center;
}
} }
span{ .info {
margin-left:38%; margin-top: 60px;
font-family: PingFangSC-Semibold;
font-size: 16px;
color: #656464;
letter-spacing: 0.49px;
text-align: center;
} }
} }
.pay-way { }
width:350px; .modal-show-bank {
margin:0 auto; width: 100%;
margin-top:54px; height: 100%;
background-color: #fff; position: absolute;
.hls-item { display: flex;
padding-left: 12px; z-index: 910;
.add-name { background-color: rgba(56, 63, 69, 0.3);
flex: 3; justify-content: center;
line-height: 56px; align-items: center;
font-family: PingFangSC-Regular; .down {
font-size: 14px; height: 466px;
width: 100%;
position: absolute;
bottom: 0px;
background-color: #fff;
border-radius: 12px 12px 0 0;
overflow: scroll;
.top {
position: fixed;
left: 24px;
width: 330px;
height: 54px;
display: flex;
z-index: 999;
align-items: center;
background-color: #fff;
img {
width: 20px;
}
span {
margin-left: 38%;
font-family: PingFangSC-Semibold;
font-size: 16px;
color: #656464; color: #656464;
letter-spacing: 0.49px;
text-align: center;
}
}
.pay-way {
width: 350px;
margin: 0 auto;
margin-top: 54px;
background-color: #fff;
.hls-item {
padding-left: 12px;
.add-name {
flex: 3;
line-height: 56px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #656464;
.icon1 { .icon1 {
width: 34px; width: 34px;
height: 34px; height: 34px;
display: block; display: block;
float: left; float: left;
margin-top: 10px; margin-top: 10px;
margin-right: 5px; margin-right: 5px;
}
.icon2 {
width: 32px;
display: block;
float: left;
margin-top: 12px;
margin-right: 8px;
}
.icon {
width: 30px;
display: block;
float: left;
position: relative;
margin: 12px 8px 0 3px;
}
} }
.icon2 {
width: 32px;
display: block;
float: left;
margin-top: 12px;
margin-right: 8px;
}
.icon {
width: 30px;
display: block;
float: left;
position: relative;
margin: 12px 8px 0 3px;
}
}
.add-content { .add-content {
img { img {
width: 21px; width: 21px;
}
} }
} }
} }
} }
}
} }
.info { .info {
width: 100%; width: 100%;
...@@ -411,12 +500,12 @@ text-align: center; ...@@ -411,12 +500,12 @@ text-align: center;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.arrow{ .arrow {
margin-right:-10px; margin-right: -10px;
} }
img{ img {
width:17px; width: 17px;
margin-right:10px; margin-right: 10px;
} }
span:first-child { span:first-child {
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
...@@ -435,31 +524,31 @@ text-align: center; ...@@ -435,31 +524,31 @@ text-align: center;
align-items: center; align-items: center;
} }
} }
.info-item:nth-of-type(1)::after{ .info-item:nth-of-type(1)::after {
content:""; content: "";
display:block; display: block;
position: absolute; position: absolute;
right:20px; right: 20px;
top:25px; top: 25px;
border: 10px solid #fff; border: 10px solid #fff;
border-left-color:transparent; border-left-color: transparent;
border-right-color:transparent; border-right-color: transparent;
border-top-color:transparent; border-top-color: transparent;
border-bottom-color:rgba(75,74,75,0.10); border-bottom-color: rgba(75, 74, 75, 0.1);
} }
.info-item:nth-of-type(1){ .info-item:nth-of-type(1) {
border-top: 1px solid #d9dbdf; border-top: 1px solid #d9dbdf;
} }
.interest{ .interest {
width:100%; width: 100%;
height:37px; height: 37px;
line-height: 37px; line-height: 37px;
font-family: PingFangSC-Medium; font-family: PingFangSC-Medium;
font-size: 11px; font-size: 11px;
color: #4B4A4B; color: #4b4a4b;
letter-spacing: 0; letter-spacing: 0;
text-indent:215px; text-indent: 215px;
background-color:rgba(75,74,75,0.10); background-color: rgba(75, 74, 75, 0.1);
} }
} }
.modal-show { .modal-show {
...@@ -467,7 +556,7 @@ text-indent:215px; ...@@ -467,7 +556,7 @@ text-indent:215px;
height: 100%; height: 100%;
position: absolute; position: absolute;
display: flex; display: flex;
z-index: 900; z-index: 999;
background-color: rgba(56, 63, 69, 0.3); background-color: rgba(56, 63, 69, 0.3);
justify-content: center; justify-content: center;
align-items: center; align-items: center;
...@@ -541,7 +630,6 @@ text-indent:215px; ...@@ -541,7 +630,6 @@ text-indent:215px;
margin-top: 10px; margin-top: 10px;
} }
} }
} }
.foot { .foot {
background-color: @headerColor; background-color: @headerColor;
......
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
<img src="@/assets/payment/first-pay.png" >逾期利息 <img src="@/assets/payment/first-pay.png" >逾期利息
</div> </div>
<div class="pay-input"> <div class="pay-input">
<span>应还利息</span> <span>逾期利息</span>
<input v-model="liquidated_damages" readonly type="text" placeholder="请输入支付金额" > <input v-model="liquidated_damages" readonly type="text" placeholder="请输入支付金额" >
</div> </div>
</div> </div>
...@@ -86,7 +86,7 @@ export default { ...@@ -86,7 +86,7 @@ export default {
}, },
computed: {}, computed: {},
watch: { watch: {
'pay_rent': { 'liquidated_damages': {
handler () { handler () {
this.money = parseFloat(parseFloat(this.pay_rent) + parseFloat(this.liquidated_damages)) this.money = parseFloat(parseFloat(this.pay_rent) + parseFloat(this.liquidated_damages))
}, },
......
...@@ -9,6 +9,112 @@ ...@@ -9,6 +9,112 @@
</div> </div>
</div> </div>
</transition> </transition>
<transition name="trans">
<div v-show="show" class="modal-show-bank">
<transition name="show">
<div class="down">
<div class="top">
<img src="@/assets/payment/back.png" @click="show=false" >
<span>支付方式</span>
</div>
<list-item :item-height="56" class="pay-way">
<item
v-for="(item,index) in nongBank"
:proportion="[7,1,1]"
:key="item.bank_account_num"
@click.native="isSelect(`nong${index}`);ischeck(item)"
>
<div slot="name" style="flex=3">
<img :src="selectImg(item)" alt class="icon" >
{{ item.bank_full_name }}({{ selectLast(item) }})
<img
v-show="item.recommand"
class="push"
src="@/assets/payment/push.png"
>
</div>
<section slot="content">
<img v-show="select === `nong${index}`" src="@/assets/payment/select.png" alt >
<img v-show="select !== `nong${index}`" src="@/assets/payment/unselect.png" alt >
</section>
</item>
<item :proportion="[7,1,1]" @click.native="isSelect('one');ischeck('one')">
<div slot="name">
<img src="@/assets/payment/alipay.png" alt class="icon1" > 支付宝
</div>
<section slot="content">
<img v-show="select === 'one'" src="@/assets/payment/select.png" alt >
<img v-show="select !== 'one'" src="@/assets/payment/unselect.png" alt >
</section>
</item>
<item :proportion="[7,1,1]" @click.native="isSelect('two');ischeck('two')">
<div slot="name">
<img src="@/assets/payment/wx.png" alt class="icon2" > 微信
</div>
<section slot="content">
<img v-show="select === 'two'" src="@/assets/payment/select.png" alt >
<img v-show="select !== 'two'" src="@/assets/payment/unselect.png" alt >
</section>
</item>
<item
v-for="(item,index) in newList"
:proportion="[7,1,1]"
:key="index"
@click.native="isSelect(`three${index}`);ischeck(item)"
>
<div slot="name" style="flex=3">
<img :src="selectImg(item)" alt class="icon" >
{{ item.bank_full_name }}({{ selectLast(item) }})
<img
v-show="item.recommand"
class="push"
src="@/assets/payment/push.png"
>
</div>
<section slot="content">
<img v-show="select === `three${index}`" src="@/assets/payment/select.png" alt >
<img v-show="select !== `three${index}`" src="@/assets/payment/unselect.png" alt >
</section>
</item>
</list-item>
</div>
</transition></div>
</transition>
<transition name="trans">
<div v-show="confirm" class="modal-show-confirm">
<div class="down">
<div class="top">
<img src="@/assets/payment/back.png" @click="confirm=false" >
<span>确认付款</span>
</div>
<div class="info">
<div class="info-item">
<span>还款金额</span>
<span>¥{{ money |currency }}</span>
</div>
<div class="interest">
<span>本次交易收取{{ rate }}%服务费</span>
</div>
<div class="info-item">
<span>服务费</span>
<span>{{ serviceCharge |currency }}</span>
</div>
<div class="info-item" @click="show=true">
<span>付款方式</span>
<span>
<img :src="checkType.img" >
<span>{{ checkType.bank_full_name }}</span>
<span v-if="sectctNong">({{ selectLast(checkType) }})</span>
<img class="arrow" src="@/assets/payment/go.png" >
</span>
</div>
</div>
<bottom-tab>
<tab-button class="footer" @click.native="pay">立即支付</tab-button>
</bottom-tab>
</div>
</div>
</transition>
<h-header :proportion="[5,1,1]" class="bar-custom"> <h-header :proportion="[5,1,1]" class="bar-custom">
<div slot="left" class="h-header-btn"> <div slot="left" class="h-header-btn">
<img src="@/assets/userBind/arrow.png" @click="changePage" > <img src="@/assets/userBind/arrow.png" @click="changePage" >
...@@ -18,70 +124,41 @@ ...@@ -18,70 +124,41 @@
<h-content class="entry-content"> <h-content class="entry-content">
<div class="amount"> <div class="amount">
<p>交易金额</p> <p>{{ userName }}</p>
<div>{{ money |currency }}</div> <div>{{ sumMoney |currency }}</div>
</div>
<div class="info">
<div class="info-item">
<span>还款金额</span>
<span>¥{{ parseFloat(money).toFixed(2) |currency }}</span>
</div>
<div class="interest">
<span>本次交易收取{{ rate }}%服务费</span>
</div>
<div class="info-item">
<span>服务费</span>
<span>{{ serviceCharge }}</span>
</div>
<div class="info-item" @click="show=true">
<span>付款方式</span>
<span>
<img :src="checkType.img" >
<span>{{ checkType.bank_full_name }}</span>
<span v-if="sectctNong">({{ selectLast(checkType) }})</span>
<img class="arrow" src="@/assets/payment/go.png" >
</span>
</div>
</div> </div>
<list-item :item-height="56" class="pay-way">
<item
v-for="(item,index) in nongBank"
:proportion="[7,1,1]"
:key="item.bank_account_num"
@click.native="isSelect(`nong${index}`)"
>
<div slot="name" style="flex=3">
<img :src="selectImg(item)" alt class="icon" >
{{ item.bank_full_name }}({{ selectLast(item) }})
<img v-show="item.recommand" class="push" src="@/assets/payment/push.png" >
</div>
<section slot="content">
<img v-show="select === `nong${index}`" src="@/assets/payment/select.png" alt >
<img v-show="select !== `nong${index}`" src="@/assets/payment/unselect.png" alt >
</section>
</item>
<item :proportion="[7,1,1]" @click.native="isSelect('one')">
<div slot="name">
<img src="@/assets/payment/alipay.png" alt class="icon1" > 支付宝
</div>
<section slot="content">
<img v-show="select === 'one'" src="@/assets/payment/select.png" alt >
<img v-show="select !== 'one'" src="@/assets/payment/unselect.png" alt >
</section>
</item>
<item :proportion="[7,1,1]" @click.native="isSelect('two')">
<div slot="name">
<img src="@/assets/payment/wx.png" alt class="icon2" > 微信
</div>
<section slot="content">
<img v-show="select === 'two'" src="@/assets/payment/select.png" alt >
<img v-show="select !== 'two'" src="@/assets/payment/unselect.png" alt >
</section>
</item>
<item
v-for="(item,index) in newList"
:proportion="[7,1,1]"
:key="index"
@click.native="isSelect(`three${index}`)"
>
<div slot="name" style="flex=3">
<img :src="selectImg(item)" alt class="icon" >
{{ item.bank_full_name }}({{ selectLast(item) }})
<img v-show="item.recommand" class="push" src="@/assets/payment/push.png" >
</div>
<section slot="content">
<img v-show="select === `three${index}`" src="@/assets/payment/select.png" alt >
<img v-show="select !== `three${index}`" src="@/assets/payment/unselect.png" alt >
</section>
</item>
</list-item>
</h-content> </h-content>
<bottom-tab> <bottom-tab>
<tab-button class="footer" @click.native="pay">立即付款</tab-button> <tab-button class="footer" @click.native="affirm">确认支付</tab-button>
</bottom-tab> </bottom-tab>
</h-view> </h-view>
</template> </template>
<script> <script>
import zfb from '@/assets/payment/alipay.png'
import wx from '@/assets/payment/wx.png'
import js from '@/assets/payment/js.png' import js from '@/assets/payment/js.png'
import ny from '@/assets/payment/ly.png' import ny from '@/assets/payment/ly.png'
import pf from '@/assets/payment/pf.png' import pf from '@/assets/payment/pf.png'
...@@ -103,13 +180,32 @@ export default { ...@@ -103,13 +180,32 @@ export default {
return { return {
money: '', money: '',
select: 'one', select: 'one',
rate: 0.03,
name: '',
sectctNong: false,
checkType: {
img: '',
bank_full_name: '',
bank_account_num: '',
},
confirm: false,
show: false,
downNum: false, downNum: false,
userName: window.sessionStorage.getItem('bp_name'),
nongBank: [], // 存农行卡 nongBank: [], // 存农行卡
flag: false, // 用于判断是否有农业银行卡 flag: false, // 用于判断是否有农业银行卡
lists: [], lists: [],
} }
}, },
computed: { computed: {
serviceCharge () {
return (this.money * (this.rate / 100)).toFixed(2)
},
sumMoney () {
return (parseFloat(this.serviceCharge) + parseFloat(this.money)).toFixed(
2
)
},
newList () { newList () {
let vm = this let vm = this
vm.nongBank = [] vm.nongBank = []
...@@ -120,12 +216,19 @@ export default { ...@@ -120,12 +216,19 @@ export default {
} }
}) })
let notNong = vm.lists.filter(i => { let notNong = vm.lists.filter(i => {
return (i.bank_full_name.indexOf('农业') === -1) return i.bank_full_name.indexOf('农业') === -1
}) })
if (vm.flag) { if (vm.flag) {
vm.select = 'nong0' vm.select = 'nong0'
vm.checkType.bank_full_name = '农业银行'
vm.checkType.img = ny
vm.checkType.bank_account_num = this.nongBank[0].bank_account_num
vm.sectctNong = true
} else { } else {
vm.select = 'one' vm.select = 'one'
vm.checkType.bank_full_name = '支付宝'
vm.checkType.img = zfb
vm.sectctNong = false
} }
return notNong return notNong
}, },
...@@ -133,6 +236,9 @@ export default { ...@@ -133,6 +236,9 @@ export default {
watch: {}, watch: {},
beforeRouteEnter (to, from, next) { beforeRouteEnter (to, from, next) {
next(vm => { next(vm => {
vm.confirm = false
vm.show = false
vm.downNum = false
if (from.name === 'NewList') { if (from.name === 'NewList') {
vm.money = vm.$route.params.money vm.money = vm.$route.params.money
} else if (from.name === 'PaymentContractRecord') { } else if (from.name === 'PaymentContractRecord') {
...@@ -143,6 +249,9 @@ export default { ...@@ -143,6 +249,9 @@ export default {
}) })
}, },
methods: { methods: {
affirm () {
this.confirm = true
},
pay () { pay () {
let vm = this let vm = this
hlsPopup.showLoading('请稍候') hlsPopup.showLoading('请稍候')
...@@ -155,6 +264,23 @@ export default { ...@@ -155,6 +264,23 @@ export default {
} }
}, 2000) }, 2000)
}, },
ischeck (way) {
if (way === 'one') {
this.checkType.bank_full_name = '支付宝'
this.checkType.img = zfb
this.sectctNong = false
} else if (way === 'two') {
this.checkType.bank_full_name = '微信'
this.checkType.img = wx
this.sectctNong = false
} else {
this.checkType.bank_full_name = way.bank_full_name
this.checkType.bank_account_num = way.bank_account_num
this.checkType.img = this.selectImg(way)
this.sectctNong = true
}
this.show = false
},
selectLast (item) { selectLast (item) {
let num = item.bank_account_num let num = item.bank_account_num
return num.substring(num.length - 4) return num.substring(num.length - 4)
...@@ -233,6 +359,205 @@ export default { ...@@ -233,6 +359,205 @@ export default {
</script> </script>
<style lang='less' > <style lang='less' >
#payment-pay-entry { #payment-pay-entry {
.trans-enter-active,
.trans-leave-active {
transition: opacity 0.5s;
}
.trans-enter,
.trans-leave-active {
opacity: 0;
}
.modal-show-confirm {
width: 100%;
height: 100%;
position: absolute;
display: flex;
z-index: 900;
background-color: rgba(56, 63, 69, 0.3);
justify-content: center;
align-items: center;
.down {
height: 466px;
width: 100%;
position: absolute;
bottom: 0px;
background-color: #fff;
border-radius: 12px 12px 0 0;
overflow: scroll;
.top {
position: fixed;
left: 24px;
width: 330px;
height: 54px;
display: flex;
z-index: 999;
align-items: center;
background-color: #fff;
img {
width: 20px;
}
span {
margin-left: 38%;
font-family: PingFangSC-Semibold;
font-size: 16px;
color: #656464;
letter-spacing: 0.49px;
text-align: center;
}
}
.info {
margin-top: 60px;
}
}
}
.modal-show-bank {
width: 100%;
height: 100%;
position: absolute;
display: flex;
z-index: 910;
background-color: rgba(56, 63, 69, 0.3);
justify-content: center;
align-items: center;
.down {
height: 466px;
width: 100%;
position: absolute;
bottom: 0px;
background-color: #fff;
border-radius: 12px 12px 0 0;
overflow: scroll;
.top {
position: fixed;
left: 24px;
width: 330px;
height: 54px;
display: flex;
z-index: 999;
align-items: center;
background-color: #fff;
img {
width: 20px;
}
span {
margin-left: 38%;
font-family: PingFangSC-Semibold;
font-size: 16px;
color: #656464;
letter-spacing: 0.49px;
text-align: center;
}
}
.pay-way {
width: 350px;
margin: 0 auto;
margin-top: 54px;
background-color: #fff;
.hls-item {
padding-left: 12px;
.add-name {
flex: 3;
line-height: 56px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #656464;
.icon1 {
width: 34px;
height: 34px;
display: block;
float: left;
margin-top: 10px;
margin-right: 5px;
}
.icon2 {
width: 32px;
display: block;
float: left;
margin-top: 12px;
margin-right: 8px;
}
.icon {
width: 30px;
display: block;
float: left;
position: relative;
margin: 12px 8px 0 3px;
}
}
.add-content {
img {
width: 21px;
}
}
}
}
}
}
.info {
width: 100%;
height: 226px;
background-color: #fff;
.info-item {
height: 46px;
width: 335px;
margin: 0 auto;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
.arrow {
margin-right: -10px;
}
img {
width: 17px;
margin-right: 10px;
}
span:first-child {
font-family: PingFangSC-Regular;
font-size: 14px;
color: rgba(56, 63, 69, 0.6);
letter-spacing: 0;
line-height: 18px;
}
span:last-child {
font-family: Verdana;
font-size: 14px;
color: #383f45;
letter-spacing: 0;
line-height: 18px;
display: flex;
align-items: center;
}
}
.info-item:nth-of-type(1)::after {
content: "";
display: block;
position: absolute;
right: 20px;
top: 25px;
border: 10px solid #fff;
border-left-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
border-bottom-color: rgba(75, 74, 75, 0.1);
}
.info-item:nth-of-type(1) {
border-top: 1px solid #d9dbdf;
}
.interest {
width: 100%;
height: 37px;
line-height: 37px;
font-family: PingFangSC-Medium;
font-size: 11px;
color: #4b4a4b;
letter-spacing: 0;
text-indent: 215px;
background-color: rgba(75, 74, 75, 0.1);
}
}
.icon { .icon {
width: 30px; width: 30px;
display: block; display: block;
......
...@@ -15,67 +15,67 @@ ...@@ -15,67 +15,67 @@
<span>产品明细</span> <span>产品明细</span>
</div> </div>
</h-header> </h-header>
<div class="tab-style" v-if="slide"> <div v-if="slide" class="tab-style">
<div :class="{'done':num === 0,'undone':num !== 0}" @click="tabCheck(0)"><img :src="num === 0?baseInfoImg:unBaseInfo"><span>基本信息</span></div> <div :class="{'done':num === 0,'undone':num !== 0}" @click="tabCheck(0)"><img :src="num === 0?baseInfoImg:unBaseInfo"><span>基本信息</span></div>
<div :class="{'done':num === 1,'undone':num !== 1}" @click="tabCheck(1)"><img :src="num === 1?detail:unDetail"><span>商品详情</span></div> <div :class="{'done':num === 1,'undone':num !== 1}" @click="tabCheck(1)"><img :src="num === 1?detail:unDetail"><span>商品详情</span></div>
<div :class="{'done':num === 2,'undone':num !== 2}" @click="tabCheck(2)"><img :src="num === 2?config:unConfig"><span>产品配置</span></div> <div :class="{'done':num === 2,'undone':num !== 2}" @click="tabCheck(2)"><img :src="num === 2?config:unConfig"><span>产品配置</span></div>
</div> </div>
<!-- 基本信息 --> <!-- 基本信息 -->
<h-content class="hcontent" v-swipeup="(e)=>vueTouch('上滑',e)" v-swipedown="(e)=>vueTouch('下滑',e)"> <h-content v-swipeup="(e)=>vueTouch('上滑',e)" v-swipedown="(e)=>vueTouch('下滑',e)" class="hcontent">
<scroll class="scrolls" ref="scrolls" :listenScroll="true" @scroll="startScroll"> <scroll ref="scrolls" :listenScroll="true" class="scrolls" @scroll="startScroll">
<!-- 基本信息 --> <!-- 基本信息 -->
<div id="baseInfo" class="base"> <div id="baseInfo" class="base">
<swipe :interval="5000" class="hls-swipe"> <swipe :interval="5000" class="hls-swipe">
<swipe-item v-for="(item,index) in picLists" :key="index" class="hls-swipe"> <swipe-item v-for="(item,index) in picLists" :key="index" class="hls-swipe">
<img :src="item.url" alt=""> <img :src="item.url" alt="">
</swipe-item> </swipe-item>
</swipe> </swipe>
<div class="base-content"> <div class="base-content">
<div class="top-code"> <div class="top-code">
<div>参数项 &nbsp;{{ baseInfo.product_code }}</div> <div>参数项 &nbsp;{{ baseInfo.product_code }}</div>
<div>{{ baseInfo.division_n }}</div> <div>{{ baseInfo.division_n }}</div>
</div>
<div class="pro-name">{{ baseInfo.product_name }}</div>
<div class="pro-price">
<p>参考价 <span class="prices">{{ baseInfo.plan_price | currency }}</span></p>
<p class="dates">价格有效期 &nbsp;{{ baseInfo.price_date_to | dateFormat }}</p>
</div>
<div class="agent">
<div class="items">
<img src="@/assets/productQuery/agent.png" alt="">
<p>{{ baseInfo.agent_bp_name }}</p>
</div> </div>
<div class="items"> <div class="pro-name">{{ baseInfo.product_name }}</div>
<img src="@/assets/productQuery/address.png" alt=""> <div class="pro-price">
<p>{{ baseInfo.business_address }} .{{ baseInfo.province_name }}</p> <p>参考价 <span class="prices">{{ baseInfo.plan_price | currency }}</span></p>
<p class="dates">价格有效期 &nbsp;{{ baseInfo.price_date_to | dateFormat }}</p>
</div> </div>
<div class="items"> <div class="agent">
<img src="@/assets/productQuery/call.png" alt=""> <div class="items">
<p>{{ baseInfo.phone }}</p> <img src="@/assets/productQuery/agent.png" alt="">
</div> <p>{{ baseInfo.agent_bp_name }}</p>
<div class="items"> </div>
<img src="@/assets/productQuery/house.png" alt=""> <div class="items">
<p>{{ baseInfo.factory_bp_name }}</p> <img src="@/assets/productQuery/address.png" alt="">
<p>{{ baseInfo.business_address }} .{{ baseInfo.province_name }}</p>
</div>
<div class="items">
<img src="@/assets/productQuery/call.png" alt="">
<p>{{ baseInfo.phone }}</p>
</div>
<div class="items">
<img src="@/assets/productQuery/house.png" alt="">
<p>{{ baseInfo.factory_bp_name }}</p>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- 商品详情 --> <!-- 商品详情 -->
<div id="prodetail" ref="detail" class="pro-details prodetail"> <div id="prodetail" ref="detail" class="pro-details prodetail">
<div class="equipment-list">商品详情</div> <div class="equipment-list">商品详情</div>
<div v-for="item in picLists" :key="item.product_attachment_id" class="proPic"> <div v-for="item in picLists" :key="item.product_attachment_id" class="proPic">
<img :src="item.url" alt=""> <img :src="item.url" alt="">
</div> </div>
</div> </div>
<!-- 产品配置 --> <!-- 产品配置 -->
<div id="procfg" class="pro-details procnf"> <div id="procfg" class="pro-details procnf">
<div class="equipment-list">产品配置</div> <div class="equipment-list">产品配置</div>
<div class="table-wrap" v-html="confgInfo.product_properties"/> <div class="table-wrap" v-html="confgInfo.product_properties"/>
</div> </div>
</scroll> </scroll>
</h-content> </h-content>
<bottom-tab class="footer-button"> <bottom-tab class="footer-button">
...@@ -163,23 +163,19 @@ export default { ...@@ -163,23 +163,19 @@ export default {
// tab切换 // tab切换
tabCheck (num) { tabCheck (num) {
let scrollContent = document.getElementsByClassName('scrollContent')[0] let scrollContent = document.getElementsByClassName('scrollContent')[0]
if(num === 0){ if (num === 0) {
this.num = 0 this.num = 0
this.$refs.scrolls.scrollToElement(document.getElementsByClassName('base')[0]) this.$refs.scrolls.scrollToElement(document.getElementsByClassName('base')[0])
} else if (num === 1) {
}else if(num === 1){
this.num = 1 this.num = 1
this.$refs.scrolls.scrollToElement(document.getElementsByClassName('prodetail')[0]) this.$refs.scrolls.scrollToElement(document.getElementsByClassName('prodetail')[0])
} else {
}else{
this.num = 2 this.num = 2
this.$refs.scrolls.scrollToElement(document.getElementsByClassName('procnf')[0]) this.$refs.scrolls.scrollToElement(document.getElementsByClassName('procnf')[0])
} }
}, },
vueTouch: function (s, e) { vueTouch: function (s, e) {
let clientHeight = document.body.clientHeight // 屏幕可视高度 let clientHeight = document.body.clientHeight // 屏幕可视高度
let procnfGather = document.getElementsByClassName('procnf')[0].getBoundingClientRect() // 配置信息元素集合 let procnfGather = document.getElementsByClassName('procnf')[0].getBoundingClientRect() // 配置信息元素集合
let detailGather = document.getElementsByClassName('prodetail')[0].getBoundingClientRect() // 详情信息元素集合 let detailGather = document.getElementsByClassName('prodetail')[0].getBoundingClientRect() // 详情信息元素集合
...@@ -188,7 +184,7 @@ export default { ...@@ -188,7 +184,7 @@ export default {
this.num = 2 this.num = 2
} else if (clientHeight - detailGather.top >= detailGather.height) { } else if (clientHeight - detailGather.top >= detailGather.height) {
this.num = 1 this.num = 1
} else if ( -(baseGather.top) <= baseGather.height/2) { } else if (-(baseGather.top) <= baseGather.height / 2) {
this.num = 0 this.num = 0
} }
}, },
...@@ -497,7 +493,7 @@ export default { ...@@ -497,7 +493,7 @@ export default {
.butt { .butt {
width: 48%; width: 48%;
margin-left: 3px; margin-left: 3px;
border-radius: 4px; border-radius: 4px;
} }
.butt:nth-of-type(2) { .butt:nth-of-type(2) {
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<h-header :proportion="[5,1,1]" class="bar-custom"> <h-header :proportion="[5,1,1]" class="bar-custom">
<div slot="left" class="h-header-btn"> <div slot="left" class="h-header-btn">
<img src="@/assets/userBind/arrow.png" @click="$routeGo()"> <img src="@/assets/userBind/arrow.png" @click="$routeGo()">
<span>产品信息</span> <span>产品列表</span>
</div> </div>
</h-header> </h-header>
<h-content> <h-content>
...@@ -18,36 +18,36 @@ ...@@ -18,36 +18,36 @@
<img src="@/assets/distributorSign/search.png" alt=""> <img src="@/assets/distributorSign/search.png" alt="">
</div> </div>
</div> </div>
<scroll <scroll
ref="scroll" ref="scroll"
:updateData="[lists]" :updateData="[lists]"
:pullUp="true" :pullUp="true"
> >
<div class="division-box">
<list-item v-for="(item,index) in lists" :key="index"> <div class="division-box">
<item :proportion="[1,4]" @click.native="goDetailed(item.product_id,item.collect_status,item.bp_id)">
<div slot="name" class="item-pic"> <list-item v-for="(item,index) in lists" :key="index">
<img :src="item.url" alt=""> <item :proportion="[1,4]" @click.native="goDetailed(item.product_id,item.collect_status,item.bp_id)">
</div> <div slot="name" class="item-pic">
<div slot="content" class="item-content"> <img :src="item.url" alt="">
<div class="pro-name">
<p>{{ item.product_name }}</p>
<img class="arrow" src="@/assets/productQuery/getIn.png" alt="" >
</div>
<div class="centers">
<p class="firsts1">{{ item.bp_type_n }}</p>
<p class="seconds1">{{ item.bp_name }}</p>
</div> </div>
<div class="centers"> <div slot="content" class="item-content">
<p class="firsts1">参数项</p> <div class="pro-name">
<p class="seconds1">{{ item.product_code }}</p> <p>{{ item.product_name }}</p>
<img class="arrow" src="@/assets/productQuery/getIn.png" alt="" >
</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> </div>
</div> </item>
</item> </list-item>
</list-item> </div>
</div>
</scroll> </scroll>
</h-content> </h-content>
</h-view> </h-view>
...@@ -82,13 +82,13 @@ export default { ...@@ -82,13 +82,13 @@ export default {
if (res.result === 'S') { if (res.result === 'S') {
vm.lists = res.lists vm.lists = res.lists
res.lists.forEach(item => { res.lists.forEach(item => {
item['url'] = process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token item['url'] = process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token
}) })
if (res.lists.length > 0 && res.lists.length < 10) { if (res.lists.length > 0 && res.lists.length < 10) {
vm.$refs.scroll.update(true) vm.$refs.scroll.update(true)
} }
// vm.picLists = res.lists // vm.picLists = res.lists
// console.log('........',vm.picLists) // console.log('........',vm.picLists)
} else { } else {
hlsPopup.showLongCenter(res.message) hlsPopup.showLongCenter(res.message)
} }
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<h-header :proportion="[5,1,1]" class="bar-custom"> <h-header :proportion="[5,1,1]" class="bar-custom">
<div slot="left" class="h-header-btn"> <div slot="left" class="h-header-btn">
<img src="@/assets/userBind/arrow.png" @click="$routeGo()"> <img src="@/assets/userBind/arrow.png" @click="$routeGo()">
<span>产品信息</span> <span>产品选择</span>
</div> </div>
</h-header> </h-header>
<h-content> <h-content>
......
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
</div> </div>
<div class="right"> <div class="right">
<div class="right-top"> <div class="right-top">
<span>进件</span> <span>合同</span>
<span>{{ item.project_number }}</span> <span>{{ item.project_number }}</span>
</div> </div>
<div class="right-bottom"> <div class="right-bottom">
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
<span>{{ item.bp_name }}</span> <span>{{ item.bp_name }}</span>
</li> </li>
<li> <li>
已还租金 产品线
<span>{{ item.division_n }}</span> <span>{{ item.division_n }}</span>
</li> </li>
<li> <li>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment