Commit 0dfde824 authored by 786817560's avatar 786817560

Merge branch 'ren' into develop

parents 20db385d 6adf2d95
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2019-09-29 10:02:11 * @Date: 2019-09-29 10:02:11
* @LastEditTime: 2019-10-30 14:28:29 * @LastEditTime: 2019-11-04 18:34:35
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
--> -->
...@@ -23,102 +23,81 @@ ...@@ -23,102 +23,81 @@
</div> </div>
</h-header> </h-header>
<div class="tab-style"> <div class="tab-style">
<div :class="{'done':num === 0,'undone':num !== 0}" @click="num = 0;"><img :src="num === 0?check1:uncheck1">商务条件</div> <div :class="{'done':num === 0,'undone':num !== 0}" @click="num = 0;"><img :src="num === 0?check1:uncheck1">基本信息</div>
<div :class="{'done':num === 1,'undone':num !== 1}" @click="num = 1;"><img :src="num === 1?check2:uncheck2" >合同文本</div> <div :class="{'done':num === 1,'undone':num !== 1}" @click="num = 1;"><img :src="num === 1?check3:uncheck3" >租赁信息</div>
<div :class="{'done':num === 2,'undone':num !== 2}" @click="num = 2;"><img :src="num === 2?check2:uncheck2" >合同文本</div>
</div> </div>
<h-content v-if="num === 0" class="business-condition"> <h-content v-if="num === 0" class="business-condition">
<list-item :item-height="44" class="second-part"> <!-- 法人信息 -->
<item> <LegalPerson v-if="bp_flag" :baseInfo="baseInfo"/>
<div slot="name" >商务政策</div>
<section slot="content">{{ conditionInfo.product_plan_id_n }}</section> <!-- 个人信息(自然人) -->
</item> <Personal v-if="!bp_flag" :baseInfo="baseInfo"/>
<item>
<div slot="name" >设备总价</div> <div class="equipment-list">担保人信息<span v-if="guarantorInfo.length === 0">(无)</span></div>
<section slot="content">{{ conditionInfo.equip_price * conditionInfo.product_num | currency }}</section> <list-item v-if="guarantorInfo.length && guarantorInfo[0].bp_class === 'NP'" :item-height="76">
</item> <item v-for="(item,index) in guarantorInfo" :key="index">
<item> <div slot="name">
<div slot="name" >融资金额</div> <span class="name-box">{{ index+1 }}</span>
<section slot="content">{{ Math.round(conditionInfo.finance_amount) * conditionInfo.product_num | currency }}</section> <span class="name">担保人{{ index+1 }}姓名</span>
</item> <span class="card-num">证件号</span>
<item> </div>
<div slot="name" >首付款</div> <div slot="content" class="right">
<section slot="content">{{ Math.round(conditionInfo.down_payment) * conditionInfo.product_num | currency }}</section> <img src="@/assets/intoApproval/introduce.png" >
</item> <span :title="item.bp_name">{{ item.bp_name }}</span>
<item> <br >
<div slot="name" >保证金比例</div> <span>{{ item.id_card_no }}</span>
<section slot="content">{{ conditionInfo.deposit_ratio_n }}</section> </div>
</item>
<item>
<div slot="name" >保证金</div>
<section slot="content">{{ Math.round(conditionInfo.deposit) * conditionInfo.product_num | currency }}</section>
</item>
<item>
<div slot="name" >手续费比例</div>
<section slot="content">{{ conditionInfo.lease_charge_ratio_n }}</section>
</item>
<item>
<div slot="name" >手续费</div>
<section slot="content">{{ Math.round(conditionInfo.lease_charge) * conditionInfo.product_num | currency }}</section>
</item>
<item>
<div slot="name" >gps费用</div>
<section slot="content">{{ conditionInfo.gps_fee * conditionInfo.product_num | currency }}</section>
</item>
<item>
<div slot="name" >保险押金</div>
<section slot="content">{{ conditionInfo.insurance_fee * conditionInfo.product_num | currency }}</section>
</item>
<item>
<div slot="name" >预计付款日</div>
<section slot="content">{{ conditionInfo.lease_start_date }}</section>
</item>
<item>
<div slot="name" >还款周期</div>
<section slot="content">{{ conditionInfo.annual_pay_times_n }}</section>
</item>
<item>
<div slot="name" >租赁期数</div>
<section slot="content">{{ conditionInfo.lease_times }}</section>
</item>
<item>
<div slot="name" >年利率</div>
<section slot="content">{{ conditionInfo.int_rate_n }}</section>
</item> </item>
</list-item> </list-item>
<div class="repay-plan">
<p @click="repayPlan">查看还款计划</p> <list-item v-if="guarantorInfo.length && guarantorInfo[0].bp_class === 'ORG'" :item-height="76">
</div> <item v-for="(item,index) in guarantorInfo" :key="index">
<div class="equipment-list">设备清单</div> <div slot="name">
<list-item :item-height="44" class="second-part"> <span class="name-box">{{ index+1 }}</span>
<item> <span class="name">担保人{{ index+1 }}姓名</span>
<div slot="name" >参数项</div> <span class="card-num">证件号</span>
<section slot="content">{{ conditionInfo.product_code }}</section> </div>
</item> <div slot="content" class="right">
<item> <img src="@/assets/intoApproval/introduce.png" >
<div slot="name" >产品线</div> <span :title="item.bp_name">{{ item.bp_name }}</span>
<section slot="content">{{ conditionInfo.product_name }}</section> <br >
</item> <span>{{ item.organization_code }}</span>
<item> </div>
<div slot="name" >产品数量</div>
<section slot="content">{{ conditionInfo.product_num }}</section>
</item> </item>
</list-item> </list-item>
<div class="bottom-call"> <!-- 联系人 -->
<div class="left"> <!-- <div class="bottom-call-wrap">
<img src="@/assets/constractSigning/work.png" alt="" style="width:32px"> <div class="bottom-call">
</div> <div class="left">
<div class="center"> <img src="@/assets/distributorSign/call.png" alt="">
<p>业务经办:{{ conditionInfo.bp_user_id_n }}</p> </div>
<p>联系电话:{{ conditionInfo.agent_phone }}</p> <div class="center">
<p>业务经办:{{ baseInfo.bp_user_id_n }}</p>
<p>联系电话:{{ baseInfo.agent_phone }}</p>
</div>
<div class="right1" @click="callUp(baseInfo.agent_phone)">
<img src="@/assets/distributorSign/calls.png" alt="">
</div>
</div> </div>
<div class="right"> </div> -->
<img src="@/assets/constractSigning/phone.png" alt="" style="width:30px"> <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">绑定成功后,您即可使用APP中合同查询、还款查询等功能。</p>
<div class="top-word">
<p>本人保证所提供信息的真实性、完整性及准确性。</p>
<p>本人在此授权徐工融资租赁有限公司通过中国人民银行个人信用信息基础数据库及其他征信机构、金融机构查询本人的个人信息、信用记录和工作情况。</p>
<p>本人同意接收来自于徐工融资租赁有限公司或第三方发出的提醒付款、确认付款、催款等短信(不含广告),同意接收来自于徐工融资租赁有限公司的录音电话,并积极配合。</p>
</div>
</div> </div>
</div> </div>
</h-content> </h-content>
<h-content v-if="num === 1"> <h-content v-if="num === 2">
<list-item :item-height="56" class="contract-text" style="background-color:rgb(250,250,250);"> <list-item :item-height="56" class="contract-text" style="background-color:rgb(250,250,250);">
<item :proportion="[4,1]"> <item :proportion="[4,1]">
<div slot="name" class="aguremrnt-list"> <div slot="name" class="aguremrnt-list">
...@@ -157,6 +136,114 @@ ...@@ -157,6 +136,114 @@
</item> </item>
</list-item> </list-item>
</h-content> </h-content>
<h-content v-if="num === 1">
<list-item :item-height="44" class="second-part">
<item>
<div slot="name" class="font-color">商务政策</div>
<input slot="content" v-model="info.product_plan_id_n" readonly>
</item>
<item>
<div slot="name" class="font-color">设备总价</div>
<span slot="content">{{ info.equip_price * info.product_num | currency }}</span>
</item>
<item>
<div slot="name" class="font-color">融资金额</div>
<span slot="content">{{ info.finance_amount * info.product_num | currency }}</span>
</item>
<item>
<div slot="name" class="font-color">首付款</div>
<span slot="content">{{ info.down_payment * info.product_num | currency }}</span>
</item>
<item>
<div slot="name" class="font-color">保证金比例</div>
<span slot="content">{{ info.deposit_ratio_n }}</span>
</item>
<item>
<div slot="name" class="font-color">保证金</div>
<span slot="content">{{ info.deposit * info.product_num | currency }}</span>
</item>
<item>
<div slot="name" class="font-color">手续费比例</div>
<input slot="content" v-model="info.lease_charge_ratio_n" readonly>
</item>
<item>
<div slot="name" class="font-color">手续费</div>
<span slot="content">{{ parseFloat(info.lease_charge * info.product_num).toFixed(2) | currency }}</span>
</item>
<item>
<div slot="name" class="font-color">保险押金</div>
<span slot="content">{{ info.insurance_fee * info.product_num | currency }}</span>
</item>
<item>
<div slot="name" class="font-color">GPS费用</div>
<span slot="content">{{ info.gps_fee * info.product_num | currency }}</span>
</item>
<item>
<div slot="name">首次付款合计</div>
<span slot="content">{{ parseFloat(info.first_pay).toFixed(2) | currency }}</span>
</item>
<item>
<div slot="name" class="font-color">预计付款日</div>
<span slot="content">{{ dateConverse(info.lease_start_date) }}</span>
</item>
<item>
<div slot="name" class="font-color">还款周期</div>
<input slot="content" v-model="info.annual_pay_times_n" readonly>
</item>
<item>
<div slot="name" class="font-color">租赁期数</div>
<input slot="content" v-model="info.lease_times" readonly>
</item>
<item>
<div slot="name" class="font-color">年利率</div>
<input slot="content" v-model="info.int_rate_n" readonly>
</item>
</list-item>
<div class="repay-plan">
<p @click="repayPlan">查看还款计划</p>
</div>
<div class="equipment-list-fund">
<span/>
<p>设备清单</p></div>
<list-item :item-height="44" class="second-part">
<item>
<div slot="name" class="font-color">参数项</div>
<input slot="content" v-model="info.product_code" readonly>
</item>
<item>
<div slot="name" class="font-color">产品线</div>
<input slot="content" v-model="info.product_name" readonly>
</item>
<item>
<div slot="name" class="font-color">产品数量</div>
<input slot="content" v-model="info.product_num" readonly>
</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">绑定成功后,您即可使用APP中合同查询、还款查询等功能。
<span>为了确保您的权益,请查看全部</span></p>
</div>
</div>
<!-- <div class="bottom-call-wrap">
<div class="bottom-call">
<div class="left">
<img src="@/assets/distributorSign/call.png" alt="">
</div>
<div class="center">
<p>业务经办:{{ baseInfo.bp_user_id_n }}</p>
<p>联系电话:{{ baseInfo.agent_phone }}</p>
</div>
<div class="right1" @click="callUp(baseInfo.agent_phone)">
<img src="@/assets/distributorSign/calls.png" alt="">
</div>
</div>
</div> -->
</h-content>
<bottom-tab v-show="num === 1 && confirm_status === 'SUBMIT'"> <bottom-tab v-show="num === 1 && confirm_status === 'SUBMIT'">
<tab-button class="footer" @click.native="inSure"> <tab-button class="footer" @click.native="inSure">
确认签约 确认签约
...@@ -168,42 +255,71 @@ ...@@ -168,42 +255,71 @@
<script> <script>
import Check1 from '@/assets/constractSigning/business.png' import Check1 from '@/assets/constractSigning/business.png'
import Check2 from '@/assets/constractSigning/constract.png' import Check2 from '@/assets/constractSigning/constract.png'
import Check3 from '@/assets/constractSigning/lease.png'
import unCheck1 from '@/assets/constractSigning/unbusiness.png' import unCheck1 from '@/assets/constractSigning/unbusiness.png'
import unCheck2 from '@/assets/constractSigning/unconstract.png' import unCheck2 from '@/assets/constractSigning/unconstract.png'
import unCheck3 from '@/assets/constractSigning/unLease.png'
import LegalPerson from '@/pages/distributorSign/legal-person'
import Personal from '@/pages/distributorSign/personal'
export default { export default {
name: 'ContractDetail', name: 'ContractDetail',
components: { components: {
Personal,
LegalPerson,
}, },
data () { data () {
return { return {
isshow: false, // 提示框的显示与隐藏 isshow: false, // 提示框的显示与隐藏
bp_flag: false, // 判断自然人和法人
num: 0, num: 0,
bp_name: '', bp_name: '',
guarantorInfo: [], // 担保人信息
bp_class: this.$route.params.item.bp_class, // 承租人性质(自然人,企业)
info: {}, // 租赁信息
baseInfo: {}, // 基本信息
project_id: '', project_id: '',
bank_flag: false, bank_flag: false,
confirm_id: '', confirm_id: '',
conditionInfo: {}, conditionInfo: {},
check1: Check1, check1: Check1,
check2: Check2, check2: Check2,
check3: Check3,
uncheck1: unCheck1, uncheck1: unCheck1,
uncheck2: unCheck2, uncheck2: unCheck2,
uncheck3: unCheck3,
confirm_status: '', confirm_status: '',
entry_info_flag: false, entry_info_flag: false,
} }
}, },
computed: {}, computed: {},
watch: {}, watch: {
bp_class () {
if (this.bp_class === 'NP') {
this.bp_flag = false
// this.getBseMsg()
} else {
this.bp_flag = true
}
},
},
beforeRouteEnter (to, from, next) { beforeRouteEnter (to, from, next) {
next(vm => { next(vm => {
if (from.name === 'ContractSigning') { if (from.name === 'ContractSigning') {
vm.bank_flag = false vm.bank_flag = false
vm.bp_name = vm.$route.params.bp_name vm.bp_name = vm.$route.params.item.bp_name
vm.project_id = vm.$route.params.project_id vm.project_id = vm.$route.params.item.project_id
vm.confirm_id = vm.$route.params.confirm_id vm.confirm_id = vm.$route.params.item.confirm_id
vm.confirm_status = vm.$route.params.confirm_status vm.confirm_status = vm.$route.params.item.confirm_status
if (vm.$route.params.item.bp_class === 'NP') {
vm.bp_flag = false
} else {
vm.bp_flag = true
}
vm.conditionQuery() vm.conditionQuery()
vm.bankCardQuery() vm.bankCardQuery()
vm.getBseMsg()
vm.getLease()
vm.getGuarantor()
} else if (from.name === 'EntryInfo') { } else if (from.name === 'EntryInfo') {
vm.bankCardQuery() vm.bankCardQuery()
} }
...@@ -213,12 +329,66 @@ export default { ...@@ -213,12 +329,66 @@ export default {
// this.bankCardQuery() // this.bankCardQuery()
}, },
methods: { methods: {
// 担保人
getGuarantor () {
let vm = this
let url = $config.basePath + 'prj_guarantor_list_query'
let param = {
project_id: vm.project_id,
}
vm.hlsPopup.showLoading('数据加载中')
vm.hlsHttp.post(url, param).then(function (res) {
vm.hlsPopup.hideLoading()
if (res.result === 'S') {
vm.guarantorInfo = res.lists
}
})
},
dateConverse (date) {
return date.replace(/\//g, '-')
},
getLease () {
let vm = this
let url = $config.basePath + 'prj_lease_query'
let param = {
project_id: vm.project_id,
}
// 租赁信息
vm.hlsPopup.showLoading('数据加载中')
vm.hlsHttp.post(url, param).then(function (res) {
vm.hlsPopup.hideLoading()
if (res.result === 'S') {
vm.info = res.info
}
})
},
getBseMsg () {
let vm = this
let url = ''
let url1 = $config.basePath + 'prj_np_info_query'
let url2 = $config.basePath + 'prj_org_info_query'
vm.$route.params.item.bp_class === 'NP' ? url = url1 : url = url2
let param = {
project_id: vm.project_id,
}
vm.hlsPopup.showLoading('数据加载中')
vm.hlsHttp.post(url, param).then(function (res) {
vm.hlsPopup.hideLoading()
if (res.result === 'S') {
// vm.lists = res.lists
vm.baseInfo = res.info
if (res.info.auth_flag) {
window.sessionStorage.setItem('auth_flag', res.info.auth_flag)
}
}
})
},
// 合同商务条件查询 // 合同商务条件查询
conditionQuery () { conditionQuery () {
let vm = this let vm = this
let url = $config.basePath + 'con_business_query' let url = $config.basePath + 'con_business_query'
let param = { let param = {
project_id: this.$route.params.project_id, project_id: this.$route.params.item.project_id,
} }
vm.hlsPopup.showLoading('数据加载中') vm.hlsPopup.showLoading('数据加载中')
vm.hlsHttp.post(url, param).then(function (res) { vm.hlsHttp.post(url, param).then(function (res) {
...@@ -314,6 +484,222 @@ export default { ...@@ -314,6 +484,222 @@ export default {
</script> </script>
<style lang='less' type="text/less"> <style lang='less' type="text/less">
#contract-details { #contract-details {
.name-box {
display: inline-block;
text-align: center;
line-height: 16px;
color: #00469c;
width: 16px;
height: 16px;
background: #cddbec;
border-radius: 4px;
}
.name {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #383f45;
letter-spacing: 0;
margin-left: 10px;
}
.card-num {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #383f45;
letter-spacing: 0;
display: block;
margin-left: 31px;
margin-top: 7px;
}
.right {
position: relative;
}
.right span {
float: right;
margin-right: 48px;
display: block;
font-family: PingFangSC-Regular;
font-size: 14px;
color: rgba(56, 63, 69, 0.6);
letter-spacing: 0;
line-height: 18px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 150px;
margin-top: -10px;
text-align: right
}
.right span:last-child {
margin-top: 7px;
}
.right img {
position: absolute;
top: 30%;
left: 88%;
width: 14px;
height: 16px;
}
.alert {
//height: 100px;
padding-bottom: 10px;
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;
}
.repay-plan {
height: 44px;
width: 100%;
margin-top: -10px;
// background: rgba(0,70,156,0.03);
background: #F2F2F2;
p {
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #00469C;
letter-spacing: 0;
height: 44px;
width: 84px;
line-height: 44px;
font-weight: bold;
text-decoration: underline;
margin-left: 16px;
}
}
.equipment-list-fund{
height: 40px;
line-height: 40px;
background-color: #fafafa;
display: flex;
align-items: center;
color: #00469c;
font-size: 15px;
//margin-left: 16px;
position: relative;
//margin-top: -10px;
span{
width: 4px;
height: 20px;
background: #00469c;
}
p{
padding-left: 10px;
}
}
.bottom-call-wrap{
width: 100%;
height: 100px;
display: flex;
justify-content: center;
align-items: flex-start;
background: #ffffff;
margin-top: -10px;
.bottom-call {
width: 100%;
height: 58%;
display: flex;
justify-content: center;
align-items: center;
.left {
width: 16%;
height: 60px;
// background: rgba(0,70,156,0.03);
background: #F2F2F2;
display: flex;
justify-content: center;
align-items: center
}
.center {
height: 100%;
width: 66%;
margin-left: 2px;
// background: rgba(0,70,156,0.03);
background: #F2F2F2;
p {
height: 30px;
line-height: 30px;
margin-left: 10px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #656464;
letter-spacing: 0.43px;
}
}
.right1 {
height: 100%;
width: 16%;
//background: rgba(0,70,156,0.20);
background: #CCCCCC;
display: flex;
justify-content: center;
align-items: center
}
}
}
.all{ .all{
position: absolute; position: absolute;
background-color: transparent; background-color: transparent;
...@@ -423,10 +809,10 @@ export default { ...@@ -423,10 +809,10 @@ export default {
} }
img{ img{
width: 20px; width: 16px;
display: block; display: block;
float: left; float: left;
margin: 6px 5px 0 43px; margin: 8px 5px 0 20px;
} }
span:nth-of-type(2){ span:nth-of-type(2){
......
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2019-09-29 10:02:11 * @Date: 2019-09-29 10:02:11
* @LastEditTime: 2019-10-30 09:34:22 * @LastEditTime: 2019-11-03 17:35:19
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
--> -->
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
<p class="incoming-num">进件号</p> <p class="incoming-num">进件号</p>
<p class="code">{{ item.project_number }}</p> <p class="code">{{ item.project_number }}</p>
</div> </div>
<div class="details" @click="goDetails(item.project_id,item.con_confirm_status,item.confirm_id,item.bp_name)"> <div class="details" @click="goDetails(item)">
<div class="option"> <div class="option">
<p class="name">承租人</p> <p class="name">承租人</p>
<p class="full-name normal">{{ item.bp_name }}</p> <p class="full-name normal">{{ item.bp_name }}</p>
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
<p class="incoming-num">进件号</p> <p class="incoming-num">进件号</p>
<p class="code">{{ item.project_number }}</p> <p class="code">{{ item.project_number }}</p>
</div> </div>
<div class="details" @click="goDetails(item.project_id,item.con_confirm_status,item.confirm_id,item.bp_name)"> <div class="details" @click="goDetails(item)">
<div class="option"> <div class="option">
<p class="name">承租人</p> <p class="name">承租人</p>
<p class="full-name normal">{{ item.bp_name }}</p> <p class="full-name normal">{{ item.bp_name }}</p>
...@@ -109,6 +109,7 @@ export default { ...@@ -109,6 +109,7 @@ export default {
// next() // next()
}, },
methods: { methods: {
// 合同查询
contractList () { contractList () {
let vm = this let vm = this
let url = $config.basePath + 'con_confirm_list_query' let url = $config.basePath + 'con_confirm_list_query'
...@@ -127,14 +128,11 @@ export default { ...@@ -127,14 +128,11 @@ export default {
}) })
}, },
// val: project_id, status: confirm_status, bpName: 承租人 // val: project_id, status: confirm_status, bpName: 承租人
goDetails (val, status, id, bpName) { goDetails (item) {
this.$router.push({ this.$router.push({
name: 'ContractDetail', name: 'ContractDetail',
params: { params: {
project_id: val, item: item,
confirm_id: id,
bp_name: bpName,
confirm_status: status,
}, },
}) })
}, },
......
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2019-09-29 10:02:11 * @Date: 2019-09-29 10:02:11
* @LastEditTime: 2019-10-30 14:29:27 * @LastEditTime: 2019-11-02 19:54:08
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
--> -->
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
<div slot="name" >银行卡卡号</div> <div slot="name" >银行卡卡号</div>
<input <input
slot="content" v-model="bank_lists[0].bank_account_num" type="text" slot="content" v-model="bank_lists[0].bank_account_num" type="text"
placeholder="上传银行卡自动填充" readonly placeholder="上传银行卡自动填充"
> >
</item> </item>
<item> <item>
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
<div slot="name" >银行名称</div> <div slot="name" >银行名称</div>
<input <input
slot="content" v-model="bank_lists[0].bank_full_name" type="text" slot="content" v-model="bank_lists[0].bank_full_name" type="text"
placeholder="请输入银行名称" readonly> placeholder="请输入银行名称">
</item> </item>
<item> <item>
<div slot="name" >支行名称</div> <div slot="name" >支行名称</div>
......
...@@ -2,53 +2,58 @@ ...@@ -2,53 +2,58 @@
* @Descrip: 产品明细 * @Descrip: 产品明细
* @Author: your name * @Author: your name
* @Date: 2019-10-15 14:30:00 * @Date: 2019-10-15 14:30:00
* @LastEditTime: 2019-11-01 16:32:46 * @LastEditTime: 2019-11-04 19:00:24
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
--> -->
<template> <template>
<h-view id="detailed" class="public-style" title="产品查询"> <h-view
v-swipeup="(e)=>vueTouch('上滑',e)" v-swipedown="(e)=>vueTouch('下滑',e)" id="detailed" class="public-style"
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="returnGo()">
<span>产品明细</span> <span>产品明细</span>
</div> </div>
</h-header> </h-header>
<!-- <Tab :tabNums="tabNum" @getTabNum="getTabNum"/> --> <Tab v-if="slide" :tabNums="tabNum" @getTabNum="getTabNum"/>
<!-- 基本信息 --> <!-- 基本信息 -->
<h-content @touchmove="moves" @mousemove="mousemove"> <h-content class="hcontent">
<img :src="picLists[0].url" alt="" class="detail-pic"> <div id="baseInfo" class="base">
<div class="base-content">
<div class="top-code"> <img :src="picLists[0].url" alt="" class="detail-pic">
<div>参数项 &nbsp;{{ baseInfo.product_code }}</div> <div class="base-content">
<div>{{ baseInfo.division_n }}</div> <div class="top-code">
</div> <div>参数项 &nbsp;{{ baseInfo.product_code }}</div>
<div class="pro-name">{{ baseInfo.product_name }}</div> <div>{{ baseInfo.division_n }}</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 class="items">
<img src="@/assets/productQuery/address.png" alt="">
<p>{{ baseInfo.business_address }} .{{ baseInfo.province_name }}</p>
</div> </div>
<div class="items"> <div class="pro-name">{{ baseInfo.product_name }}</div>
<img src="@/assets/productQuery/call.png" alt=""> <div class="pro-price">
<p>{{ baseInfo.phone }}</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/house.png" alt=""> <div class="items">
<p>{{ baseInfo.factory_bp_name }}</p> <img src="@/assets/productQuery/agent.png" alt="">
<p>{{ baseInfo.agent_bp_name }}</p>
</div>
<div class="items">
<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 class="pro-details"> <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">
...@@ -57,7 +62,7 @@ ...@@ -57,7 +62,7 @@
</div> </div>
<!-- 产品配置 --> <!-- 产品配置 -->
<div class="pro-details"> <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>
...@@ -89,17 +94,20 @@ export default { ...@@ -89,17 +94,20 @@ export default {
return { return {
text: '', text: '',
tabNum: 0, tabNum: 0,
picLists: [], picLists: [], // 图片列表
baseInfo: {}, baseInfo: {}, // 基本信息
show_text: '', show_text: '',
confgInfo: {}, confgInfo: {}, // 配置信息
detailInfo: {}, detailInfo: {}, // 详情
bgc_flag: true, bgc_flag: true, // 背景图切换
collect_flag: false, collect_flag: false,
slide: false,
} }
}, },
computed: {}, computed: {},
watch: {}, watch: {
},
beforeRouteEnter (to, from, next) { beforeRouteEnter (to, from, next) {
if (from.name === 'ProductList' || from.name === 'MyProductList') { if (from.name === 'ProductList' || from.name === 'MyProductList') {
next(vm => { next(vm => {
...@@ -127,11 +135,27 @@ export default { ...@@ -127,11 +135,27 @@ export default {
}, },
methods: methods:
{ {
moves () { returnGo () {
console.log('moves') // this.$router.replace({
// name: 'ProductList',
// })
this.$router.go(-1)
}, },
mousemove () { vueTouch: function (s, e) {
console.log('mousemove') console.log(s, e)
this.slide = true
// console.log(this.$refs.detail.style)
let clientHeight = document.body.clientHeight // 屏幕可视高度
let procnfGather = document.getElementsByClassName('procnf')[0].getBoundingClientRect() // 配置信息元素集合
let detailGather = document.getElementsByClassName('prodetail')[0].getBoundingClientRect() // 详情信息元素集合
let baseGather = document.getElementsByClassName('base')[0].getBoundingClientRect() // 基本信息元素集合
if (clientHeight - procnfGather.top >= procnfGather.height) {
this.tabNum = 2
} else if (clientHeight - detailGather.top >= detailGather.height) {
this.tabNum = 1
} else if (clientHeight - baseGather.top >= baseGather.height) {
this.tabNum = 0
}
}, },
getTabNum (i) { getTabNum (i) {
console.log(i) console.log(i)
...@@ -262,6 +286,18 @@ export default { ...@@ -262,6 +286,18 @@ export default {
</script> </script>
<style lang='less'> <style lang='less'>
#detailed { #detailed {
// .hcontent {
// .base {
// position: relative;
// }
// .prodetail {
// position: absolute;
// top: 500px;
// }
// .procnf {
// margin-bottom: 70px
// }
// }
.detail-pic { .detail-pic {
width: 100%; width: 100%;
} }
...@@ -290,7 +326,8 @@ export default { ...@@ -290,7 +326,8 @@ export default {
} }
div:nth-of-type(2) { div:nth-of-type(2) {
margin-left: 16px; margin-left: 16px;
width: 73px; // width: 73px;
padding: 0 4px;
} }
} }
.pro-name { .pro-name {
...@@ -378,6 +415,9 @@ export default { ...@@ -378,6 +415,9 @@ export default {
top: 10px; top: 10px;
} }
} }
.procnf {
margin-bottom: 70px
}
.footer-button { .footer-button {
.butt { .butt {
width: 48%; width: 48%;
......
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
</div> </div>
<div class="division-box"> <div class="division-box">
<list-item v-for="item in lists" :key="item.product_id"> <list-item v-for="(item,index) in lists" :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="@/assets/homePage/WechatIMG2 Copy@2x.png" alt="">
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Descrip: 查询首页 * @Descrip: 查询首页
* @Author: your name * @Author: your name
* @Date: 2019-10-15 14:30:00 * @Date: 2019-10-15 14:30:00
* @LastEditTime: 2019-11-01 10:21:19 * @LastEditTime: 2019-11-04 11:15:13
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
--> -->
<template> <template>
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
<p class="product">{{ item.factory_bp_name }}</p> <p class="product">{{ item.factory_bp_name }}</p>
</div> </div>
<div class="second"> <div class="second">
<p class="product-class">产品线</p> <p class="product-class">产品名称</p>
<div class="product"> <div class="product">
<p>{{ item.division_n }}</p> <p>{{ item.division_n }}</p>
</div> </div>
......
...@@ -2,17 +2,17 @@ ...@@ -2,17 +2,17 @@
* @Description: 详情tab * @Description: 详情tab
* @Author: your name * @Author: your name
* @Date: 2019-09-25 19:47:59 * @Date: 2019-09-25 19:47:59
* @LastEditTime: 2019-10-22 14:38:34 * @LastEditTime: 2019-11-04 14:34:16
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
--> -->
<template> <template>
<div class="tab-style"> <div class="tab-style">
<div :class="{'tab-content-bg':tabNum == 0}" class="tab-content" @click="tabNum = 0;sendTabNum()"><img :src="tabNum == 0?baseInfo:unBaseInfo"><span <a :class="{'tab-content-bg':tabNum == 0}" class="tab-content" href="#baseInfo" @click="tabNum = 0;sendTabNum()"><img :src="tabNum == 0?baseInfo:unBaseInfo"><span
:class="{'colored':tabNum == 0}">基本信息</span></div> :class="{'colored':tabNum == 0}">基本信息</span></a>
<div :class="{'tab-content-bg':tabNum == 1}" class="tab-content" @click="tabNum = 1;sendTabNum()"><img :src="tabNum == 1?detail:unDetail"><span <a :class="{'tab-content-bg':tabNum == 1}" class="tab-content" href="#prodetail" @click="tabNum = 1;sendTabNum()"><img :src="tabNum == 1?detail:unDetail"><span
:class="{'colored':tabNum == 1}">商品详情</span></div> :class="{'colored':tabNum == 1}">商品详情</span></a>
<div :class="{'tab-content-bg':tabNum == 2}" class="tab-content" @click="tabNum = 2;sendTabNum()"><img :src="tabNum == 2?config:unConfig"><span <a :class="{'tab-content-bg':tabNum == 2}" class="tab-content" href="#procfg" @click="tabNum = 2;sendTabNum()"><img :src="tabNum == 2?config:unConfig"><span
:class="{'colored':tabNum == 2}">产品配置</span></div> :class="{'colored':tabNum == 2}">产品配置</span></a>
</div> </div>
</template> </template>
<script> <script>
......
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