Skip to content

H
hls-xcmg-vue-app
Commit b70b9d5d authored by 李晓兵's avatar 李晓兵
Browse files
Options

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

parents 483724d4 1bf4df7f
Hide whitespace changes
Inline Side-by-side
Showing with 792 additions and 436 deletions
src/pages/contractInquire/contract-records.vue
View file @ b70b9d5d
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2019-10-31 09:49:57 * @Date: 2019-10-31 09:49:57
* @LastEditTime: 2019-10-31 16:58:23 * @LastEditTime: 2019-11-08 15:16:00
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: 合同查询--记录 * @Description: 合同查询--记录
* @FilePath: * @FilePath:
...@@ -30,7 +30,10 @@ ...@@ -30,7 +30,10 @@
</div> </div>
<h-content v-if="data!==null" class="pay-content"> <h-content v-if="data!==null" class="pay-content">
<scroll ref="scrollList"> <scroll ref="scroll"
:updateData="[lists]"
:pullUp="true"
>
<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">
...@@ -116,6 +119,9 @@ export default { ...@@ -116,6 +119,9 @@ export default {
vm.data = 1 vm.data = 1
} }
vm.lists = res.lists vm.lists = res.lists
if (res.lists.length > 0 && res.lists.length < 10) {
vm.$refs.scroll.update(true)
}
} else { } else {
hlsPopup.showLongCenter(res.message) hlsPopup.showLongCenter(res.message)
} }
......
src/pages/contractSigning/contract-signing.vue
View file @ b70b9d5d
<!-- <!--
* @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:42:48 * @LastEditTime: 2019-11-08 14:49:14
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
--> -->
...@@ -26,7 +26,9 @@ ...@@ -26,7 +26,9 @@
<h-content v-if="num === 1"> <h-content v-if="num === 1">
<scroll <scroll
ref="scrollList" ref="scroll"
:updateData="[submitLists]"
:pullUp="true"
> >
<div class="wrap"> <div class="wrap">
<div v-for="(item,index) in submitLists" :key="index" class="contract-lists" > <div v-for="(item,index) in submitLists" :key="index" class="contract-lists" >
...@@ -51,6 +53,8 @@ ...@@ -51,6 +53,8 @@
<h-content v-if="num === 2"> <h-content v-if="num === 2">
<scroll <scroll
ref="scrollList" ref="scrollList"
:updateData="[approvedLists]"
:pullUp="true"
> >
<div class="wrap"> <div class="wrap">
<div v-for="(item,index) in approvedLists" :key="index" class="contract-lists" > <div v-for="(item,index) in approvedLists" :key="index" class="contract-lists" >
...@@ -125,6 +129,12 @@ export default { ...@@ -125,6 +129,12 @@ export default {
if (res.result === 'S') { if (res.result === 'S') {
vm.submitLists = res.lists.filter(item => item.confirm_status === 'SUBMIT') vm.submitLists = res.lists.filter(item => item.confirm_status === 'SUBMIT')
vm.approvedLists = res.lists.filter(item => item.confirm_status === 'APPROVED') vm.approvedLists = res.lists.filter(item => item.confirm_status === 'APPROVED')
if (vm.submitLists.length > 0 && vm.submitLists.length < 10) {
vm.$refs.scroll.update(true)
}
if (vm.approvedLists.length > 0 && vm.approvedLists.length < 10) {
vm.$refs.scrollList.update(true)
}
} else { } else {
hlsPopup.showLongCenter(res.message) hlsPopup.showLongCenter(res.message)
} }
......
src/pages/distributorSign/contract-list.vue
View file @ b70b9d5d
...@@ -21,7 +21,9 @@ ...@@ -21,7 +21,9 @@
</div> </div>
<h-content v-if="tabNum === 0"> <h-content v-if="tabNum === 0">
<scroll <scroll
ref="scrollList" ref="scroll"
:updateData="[submitLists]"
:pullUp="true"
> >
<div class="wrap"> <div class="wrap">
<div v-for="(item,index) in submitLists" :key="index" class="contract-lists" > <div v-for="(item,index) in submitLists" :key="index" class="contract-lists" >
...@@ -46,6 +48,8 @@ ...@@ -46,6 +48,8 @@
<h-content v-if="tabNum === 1"> <h-content v-if="tabNum === 1">
<scroll <scroll
ref="scrollList" ref="scrollList"
:updateData="[approvedLists]"
:pullUp="true"
> >
<div class="wrap"> <div class="wrap">
<div v-for="(item,index) in approvedLists" :key="index" class="contract-lists" > <div v-for="(item,index) in approvedLists" :key="index" class="contract-lists" >
...@@ -86,22 +90,33 @@ export default { ...@@ -86,22 +90,33 @@ export default {
} }
}, },
created () { created () {
let vm = this this.getLists()
let url = $config.basePath + 'prj_confirm_list_query' },
let param = { methods: {
// 查询签约列表
getLists () {
let vm = this
let url = $config.basePath + 'prj_confirm_list_query'
let param = {
user_phone: window.localStorage.user_phone, user_phone: window.localStorage.user_phone,
} }
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.submitLists = res.lists.filter(item => item.confirm_status === 'SUBMIT') vm.submitLists = res.lists.filter(item => item.confirm_status === 'SUBMIT')
vm.approvedLists = res.lists.filter(item => item.confirm_status === 'APPROVED') vm.approvedLists = res.lists.filter(item => item.confirm_status === 'APPROVED')
// vm.lists = res.lists if (vm.submitLists.length > 0 && vm.submitLists.length < 10) {
vm.$refs.scroll.update(true)
}
if (vm.approvedLists.length > 0 && vm.approvedLists.length < 10) {
vm.$refs.scrollList.update(true)
}
}else {
hlsPopup.showLongCenter(res.message)
} }
}) })
}, },
methods: {
goDetails (item) { goDetails (item) {
window.sessionStorage.setItem('bp_class', item.bp_class) window.sessionStorage.setItem('bp_class', item.bp_class)
window.sessionStorage.setItem('project_id', item.project_id) window.sessionStorage.setItem('project_id', item.project_id)
......
src/pages/distributorSign/details-tab.vue
View file @ b70b9d5d
<!--
* @Description: 详情tab
* @Author: your name
* @Date: 2019-09-25 19:47:59
* @LastEditTime: 2019-09-27 13:33:08
* @LastEditors: Please set LastEditors
-->
<template> <template>
<div class="tab-style"> <div class="tab-style">
<span @click="tabNum = 0;sendTabNum()"><img :src="tabNum == 0?check1:uncheck1"></span> <div :class="{'tab-content-bg':tabNum == 0}" class="tab-content" @click="tabNum = 0;sendTabNum()"><img :src="tabNum == 0?base:unbase"><span
<span @click="tabNum = 1;sendTabNum()"><img :src="tabNum == 1?check2:uncheck2" ></span> :class="{'colored':tabNum == 0}">基本信息</span></div>
<span @click="tabNum = 2;sendTabNum()"><img :src="tabNum == 2?check3:uncheck3"></span> <div :class="{'tab-content-bg':tabNum == 1}" class="tab-content" @click="tabNum = 1;sendTabNum()"><img :src="tabNum == 1?trial:untrial"><span
:class="{'colored':tabNum == 1}">租赁信息</span></div>
<div :class="{'tab-content-bg':tabNum == 2}" class="tab-content" @click="tabNum = 2;sendTabNum()"><img :src="tabNum == 2?sign:unsigned"><span
:class="{'colored':tabNum == 2}">担保协议</span></div>
</div> </div>
</template> </template>
<script> <script>
import check1 from '@/assets/distributorSign/check1.png' import base from '@/assets/distributorSign/base.png'
import check2 from '@/assets/distributorSign/check2.png' import sign from '@/assets/distributorSign/sign.png'
import check3 from '@/assets/distributorSign/guaranteed.png' import trial from '@/assets/distributorSign/trial.png'
import uncheck1 from '@/assets/distributorSign/uncheck1.png' import unbase from '@/assets/distributorSign/unbase.png'
import uncheck2 from '@/assets/distributorSign/uncheck2.png' import unsigned from '@/assets/distributorSign/unsigned.png'
import uncheck3 from '@/assets/distributorSign/guarantee.png' import untrial from '@/assets/distributorSign/untrial.png'
export default { export default {
data () { data () {
return { return {
tabNum: 0, tabNum: 0,
check1: check1, base: base,
check2: check2, unbase: unbase,
check3: check3, sign: sign,
uncheck1: uncheck1, unsigned: unsigned,
uncheck2: uncheck2, trial: trial,
uncheck3: uncheck3, untrial: untrial,
} }
}, },
methods: { methods: {
...@@ -39,29 +35,56 @@ export default { ...@@ -39,29 +35,56 @@ export default {
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.tab-style{ .tab-style {
position: relative; position: relative;
z-index: 50; z-index: 50;
background-color: #fff; background-color: #fff;
display:flex; display: flex;
justify-content: center; justify-content: center;
padding-top:12px; padding-top: 12px;
padding-bottom: 8px; padding-bottom: 8px;
align-items: center; align-items: center;
box-shadow:0 2px 3px 0 rgba(220,220,221,0.50); box-shadow: 0 2px 3px 0 rgba(220, 220, 221, 0.50);
span{
display: block; .tab-content {
width:112px; display: block;
height: 32px; width: 45.9%;
border-radius:16px; height: 32px;
background: rgba(220, 220, 221, 0.26);
border-radius: 16px;
display: flex;
justify-content: center;
align-items: center;
span {
margin-left: 2%;
font-size: 14px;
color: #383F45;
font-weight: 600;
font-family: PingFangSC-Semibold;
}
.colored {
color: @headerColor
}
} }
img{ .tab-content-bg{
width:112px; background: rgba(0,70,156,0.10);
height: 32px;
margin-right:5.7px;
} }
span:nth-of-type(2){
margin:0 10px; img {
height: 16px;
// margin-right:5.7px;
} }
}
.tab-content:nth-of-type(2) {
margin: 0 8px;
}
.tab-content:nth-of-type(1) {
margin-left: 10px
}
.tab-content:nth-of-type(3) {
margin-right: 10px
}
}
</style> </style>
src/pages/distributorSign/financ-details.vue
View file @ b70b9d5d
<!-- <!--
* @Description: In User Settings Edit
* @Author: your name * @Author: your name
* @Date: 2019-09-27 18:07:12 * @Date: 2019-10-30 19:29:24
* @LastEditTime: 2019-11-08 09:10:43 * @LastEditTime: 2019-11-08 15:44:27
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
--> -->
<template> <template>
<h-view id="refund" class="public-style" title="还款计划"> <h-view id="repay-plan-agent" class="public-style">
<div class="top"> <h-header :proportion="[5,1,1]" class="bar-custom">
<h-header :proportion="[5,1,1]" class="header"> <div slot="left" class="h-header-btn">
<div slot="left" class="h-header-btn" @click="goBase"> <img src="@/assets/userBind/arrow.png" @click="$routeGo()">
<img src="@/assets/intoApproval/arrow.png" > <span>融资明细</span>
<span>还款计划</span> </div>
</div> </h-header>
</h-header> <div class="center">
<div class="top-content">
<span class="top-tittle">总租金</span> <div class="total">
<span class="num">{{ info.total_rental_sum|currency }}</span> <div class="sum">
<div class="top-detail"> <div>融资额</div>
<div class="left"> <p>{{info.total_rental_sum | currency}}</p>
<span class="line">保证金</span> <img src="@/assets/contractInquire/num.png" alt="">
<span>￥{{ info.deposit * product_num |currency }}</span> <h3><span>{{ info.lease_times }}期</span></h3>
</div>
<div class="right">
<span class="line">首付款</span>
<span>￥{{ info.down_payment * product_num |currency }}</span>
</div>
</div> </div>
<div class="clear" /> <div class="single">
<div class="top-detail"> <div><h4>保证金</h4><p>￥{{ parseFloat(info.deposit*product_num).toFixed(2) | currency }}</p></div>
<div class="left"> <div><h4>首付款</h4><p>￥{{ parseFloat(info.down_payment*product_num).toFixed(2) | currency }}</p></div>
<span class="line">手续费</span> <div><h4>手续费</h4><p>￥{{ parseFloat(info.lease_charge*product_num).toFixed(2) | currency }}</p></div>
<span>￥{{ parseFloat(info.lease_charge * product_num).toFixed(2) |currency }}</span>
</div>
<div class="right">
<span class="line">合同期数</span>
<span>{{ info.lease_times }}</span>
</div>
</div> </div>
</div> </div>
<div class="plan-name">
<div class="header">还款计划</div>
<img :class="{'rotate':show}" src="@/assets/contractInquire/top.png" alt="" @click="showDetails">
</div>
</div> </div>
<h-content> <h-content id="content" class="plan-content">
<table> <!-- 已结清 black , 逾期 orange , 还款中 blue , 未还款 green -->
<tr> <div v-for="(item,index) in repayLists" :key="index" :class="{'plan-list':true,'or':statu==='orange','bl':statu==='blue','gr':statu==='green'}">
<th /> <div :class="{'period':true,'orange':statu==='orange','blue':statu==='blue','green':statu==='green'}">{{ index + 1 }}期</div>
<th class="table-top">日期</th> <img v-if="statu === 'black'" src="@/assets/contractInquire/black.png" alt="" class="left">
<th class="table-top">现金流项目</th> <img v-if="statu === 'orange'" src="@/assets/contractInquire/orange.png" alt="" class="left">
<th class="table-top">应还金额</th> <img v-if="statu === 'blue'" src="@/assets/contractInquire/blue.png" alt="" class="left">
</tr> <img v-if="statu === 'green'" src="@/assets/contractInquire/green.png" alt="" class="left">
<tr v-for="(item,index) in lists" :key="index"> <div class="time">
<td>{{ index+1 }}</td> <p>{{ item.due_date.substr(0,4) }}</p>
<td>{{ dateConverse(item.due_date) }}</td> <span>{{ dateConverse(item.due_date).substr(5,10) }}</span>
<td>租金</td> </div>
<td>{{ item.rental * product_num |currency }}</td> <div class="name">
</tr> <p>款项</p>
</table> <p>应还金额</p>
</div>
<div class="number">
<p>租金</p>
<span :class="{'orang':statu==='orange','blu':statu==='blue','gree':statu==='green'}">{{ item.rental*product_num |currency }}</span>
</div>
<img v-if="statu === 'black'" src="@/assets/contractInquire/done.png" alt="" class="status">
<img v-if="statu === 'orange'" src="@/assets/contractInquire/prompt.png" alt="" class="status">
</div>
</h-content> </h-content>
</h-view> </h-view>
</template> </template>
<script> <script>
export default { export default {
name: 'FinancDetails', name: 'FinancDetails',
components: {
},
data () { data () {
return { return {
confirm_status: this.$route.params.confirm_status, // 已结清 black , 逾期 orange , 还款中 blue , 未还款 green
product_num: this.$route.params.product_num, statu: 'orange',
info: { info: {},
finance_amount: '', show: false,
lease_charge: '', height: 0,
down_payment: '', oldHeight: 0,
lease_times: '', newHeight: 0,
deposit: '', repayLists: [], // 每期还款
}, product_num: this.$route.params.product_num,
lists: [],
} }
}, },
created () { computed: {},
this.getInfo() watch: {},
beforeRouteEnter (to, from, next) {
next(vm => {
if (from.name === 'ContractDetails') {
vm.repayQuery()
}
})
next()
}, },
methods: { methods: {
getInfo () { dateConverse (date) {
return date.replace(/\//g, '-')
},
// 根据还款期排序
arrSort (property) {
return function (a, b) {
var value1 = a[property]
var value2 = b[property]
return value1 - value2
}
},
showDetails () {
if (!this.flag) {
this.flag = true
this.height = document.getElementsByClassName('total')[0].clientHeight
this.oldHeight = document.getElementById('content').clientHeight
this.newHeight = this.height + this.oldHeight
}
if (!this.show) {
this.show = !this.show
document.getElementById('content').style.height = this.newHeight + 'px'
document.getElementsByClassName('center')[0].style.transition = 'all .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
document.getElementsByClassName('center')[0].style.transform = 'translate(0px, -' + this.height + 'px) scale(1) translateZ(0px)'
document.getElementById('content').style.transition = 'all .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
document.getElementById('content').style.transform = 'translate(0px, -' + this.height + 'px) scale(1) translateZ(0px)'
} else {
this.show = !this.show
document.getElementById('content').style.height = this.oldHeight + 'px'
document.getElementsByClassName('center')[0].style.transition = 'all .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
document.getElementsByClassName('center')[0].style.transform = 'translate(0px, -' + 0 + 'px) scale(1) translateZ(0px)'
document.getElementById('content').style.transition = 'all .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
document.getElementById('content').style.transform = 'translate(0px, -' + 0 + 'px) scale(1) translateZ(0px)'
}
},
// 还款计划查询
repayQuery () {
let vm = this let vm = this
let url = process.env.basePath + 'prj_cashflow_query' let url = $config.basePath + 'prj_cashflow_query'
let param = { let param = {
project_id: this.$route.params.project_id, project_id: vm.$route.params.project_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.lists = res.lists vm.info = res.info
Object.assign(vm.info, res.info) vm.repayLists = res.lists.sort(vm.arrSort('times')) // 根据还款期排序
} else {
hlsPopup.showLongCenter(res.message)
} }
}) })
}, },
// 根据试算信息查询
getTrial () {
},
dateConverse (date) {
return date.replace(/\//g, '-')
},
goBase () {
let confirmStatus
if (this.confirm_status !== 'APPROVED') {
confirmStatus = true
} else {
confirmStatus = false
}
window.localStorage.setItem('hasButtom', confirmStatus)
this.$router.replace({
name: 'ContractDetails',
params: {
isConfirm: true,
hasButtom: confirmStatus,
confirm_status: this.confirm_status,
},
})
// this.$router.go(-1)
},
}, },
} }
</script> </script>
<style lang="less" scoped> <style lang='less'>
#refund { #repay-plan-agent {
.clear {
clear: both; .total {
} position: relative;
.header { background-color: #1D3FFF;
background-color: rgba(0, 0, 0, 0); height: 138px;
.h-header-btn { color: #fff;
background-image: url(../../assets/contractInquire/background.png);
background-size: cover;
.sum {
padding: 0 20px;
div {
font-family: PingFangSC-Semibold;
font-size: 14px;
padding-top: 12px;
padding-bottom: 10px;
}
p {
font-family: Verdana-BoldItalic;
font-size: 20px;
font-weight: 700;
font-style: italic;
margin-left: -4px;
}
img { img {
width: 16px; width: 75px;
height: 16px; position: absolute;
right: 20px;
top: 25px;
} }
span {
margin-left: 16px; h3 {
position: absolute;
font-weight: 700;
margin: 0;
right: 42px;
top: 32px;
color: #1D3FFF;
font-family: PingFangSC-Semibold; font-family: PingFangSC-Semibold;
font-size: 17px; font-size: 14px;
color: #ffffff;
letter-spacing: 0.61px; span {
font-style: italic;
margin-right: 5px;
}
} }
} }
}
.top { .single {
width: 100%; display: flex;
height: 260px; margin-top: 28px;
background: url("../../assets/intoApproval/backtop.png") no-repeat;
background-size: 100% 285px; div {
.top-detail { flex: auto;
margin-top: 12px; text-align: center;
width: 260px;
.line { h4 {
font-family: PingFangSC-Regular; opacity: 0.8;
font-size: 12px; margin: 0;
height: 12px; font-family: PingFangSC-Regular;
color: rgba(255, 255, 255, 0.6); font-size: 12px;
margin-right: 40px; color: #FFFFFF;
margin-bottom: 8px;
}
p {
font-family: Verdana;
font-size: 14px;
color: #FFFFFF;
font-weight: 700;
}
} }
.line::before { }
}
.plan-name {
position: relative;
background-color: #1D3FFF;
margin-top: -2px;
img {
position: absolute;
right: 30px;
top: 12px;
height: 20px;
transition: 0s;
}
.rotate {
transform: rotate(180deg);
}
.header {
position: relative;
height: 48px;
line-height: 48px;
background-color: #fff;
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #21254C;
font-weight: 700;
text-indent: 2em;
border-radius: 24px 0 0 0 ;
&:before {
content: ""; content: "";
display:inline-block; position: absolute;
width:2px; top: 16px;
height:12px; left: 15px;
background-color: #ffffff; width: 4px;
position: relative; height: 16px;
left: -5px; background: #1D3FFF;
top:2px;
} }
}
}
.plan-content {
background-color: #fff;
padding: 0px 11px;
.plan-list {
position:relative;
background-color: #f7f7f7;
height: 78px;
display: flex;
padding-right: 20px;
padding-left: 10px;
padding-top: 20px;
margin-bottom: 10px;
.left { .left {
float: left; height: 30px;
span:last-child { position: absolute;
display: block; left: -8px;
font-family: PingFangSC-Semibold; top: 24px;
font-size: 16px;
color: #ffffff;
letter-spacing: 0;
margin-top: 8px;
}
} }
.right {
float: right; .status {
span:last-child { position: absolute;
display: block; width:18px;
font-family: PingFangSC-Semibold; right: -3px;
font-size: 16px; top: -5px;
color: #ffffff; }
letter-spacing: 0;
.period {
position: absolute;
top: 0;
left: 0;
background: rgba(75,74,75,.5);
border-radius: 4px 0 4px 0;
// width: 30px;
padding: 1px 2px;
height: 20px;
color: #fff;
font-family: PingFangSC-Semibold;
font-size: 12px;
letter-spacing: 1.09px;
line-height: 20px;
text-align: center;
}
.orange {
background: rgba(253, 182, 47,.5);
}
.blue {
background-color: rgba(29, 63, 255,.5);
}
.green {
background-color: rgba(27, 162, 97,.5);
}
.time {
flex: 5;
p {
font-family: DIN-Regular;
font-size: 12px;
color: rgba(56,63,69,0.60);
margin-bottom: 4px;
margin-top: 8px; margin-top: 8px;
} }
span {
font-family: DIN-Bold;
font-weight: 700;
font-size: 14px;
color: #21254C;
}
} }
}
.top-content { .name {
width: 300px; flex: 9;
margin: 0 auto; opacity: 0.6;
.top-tittle {
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 12px; font-size: 13px;
color: rgba(255, 255, 255, 0.6); color: #4B4A4B;
letter-spacing: 0;
p {
margin-bottom: 17px;
}
} }
.num {
display: block; .number {
font-family: PingFangSC-Semibold; flex: 9;
font-size: 32px; text-align: right;
color: #ffffff; font-family: PingFangSC-Regular;
line-height: 44px; font-size: 13px;
height: 44px; color: #4B4A4B;
margin-bottom: 24px;
margin-top: 8px; p {
margin-bottom: 17px;
}
span.orang {
color: rgb(253, 182, 47);
font-weight: 700;
font-family: PingFangSC-Semibold;
}
span.blu {
color: #1D3FFF;
font-weight: 700;
font-family: PingFangSC-Semibold;
}
span.gree {
color: #1BA261;
}
} }
} }
}
table { .or {
width: 100%; background-color:rgba(253, 182, 47,.05);
text-align: center;
.table-top {
font-weight: bold
}
th {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #d9dbdf;
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #383f45;
letter-spacing: 0;
}
th:first-child {
width: 15%;
}
td:first-child {
font-family: PingFangSC-Semibold;
font-size: 20px;
color: #326aaf;
}
td:not(:first-child) {
border-bottom: 1px solid #d9dbdf;
}
td:last-child {
font-family: PingFangSC-Semibold;
font-size: 17px;
color: #336bb0;
letter-spacing: 0;
} }
td {
height: 40px; .bl,.gr {
line-height: 40px; background: #FFFFFF;
text-align: center; box-shadow: 0 1px 5px 0 rgba(219,219,219,0.69);
font-family: PingFangSC-Regular;
font-size: 14px;
color: #383f45;
letter-spacing: 0;
} }
} }
} }
</style> </style>
src/pages/financingTrial/financing-trial.vue
View file @ b70b9d5d
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Descrip 融资试算 * @Descrip 融资试算
* @Author: your name * @Author: your name
* @Date: 2019-09-29 17:09:49 * @Date: 2019-09-29 17:09:49
* @LastEditTime: 2019-11-07 17:02:01 * @LastEditTime: 2019-11-08 14:42:12
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
--> -->
<template> <template>
...@@ -20,9 +20,10 @@ ...@@ -20,9 +20,10 @@
<input type="text" placeholder="请输入产品名称"> <input type="text" placeholder="请输入产品名称">
</div> </div>
<scroll <scroll
ref="scrollList" ref="scroll"
:updateData="[lists]"
: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="">
...@@ -114,6 +115,9 @@ export default { ...@@ -114,6 +115,9 @@ export default {
vm.hlsPopup.hideLoading() vm.hlsPopup.hideLoading()
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) {
vm.$refs.scroll.update(true)
}
} else { } else {
hlsPopup.showLongCenter(res.message) hlsPopup.showLongCenter(res.message)
} }
...@@ -126,6 +130,9 @@ export default { ...@@ -126,6 +130,9 @@ export default {
vm.hlsPopup.hideLoading() vm.hlsPopup.hideLoading()
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) {
vm.$refs.scroll.update(true)
}
} else { } else {
hlsPopup.showLongCenter(res.message) hlsPopup.showLongCenter(res.message)
} }
......
src/pages/myProductCollection/my-product-list.Vue
View file @ b70b9d5d
<!--
* @Author: your name
* @Date: 2019-10-22 20:26:28
* @LastEditTime: 2019-10-29 10:08:31
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \hls-xcmg-vue-app\src\pages\myProductCollection\my-product-list.Vue
-->
/** /**
* @Author Sean * @Author Sean
...@@ -26,30 +18,36 @@ ...@@ -26,30 +18,36 @@
<img src="@/assets/distributorSign/search.png" alt=""> <img src="@/assets/distributorSign/search.png" alt="">
</div> </div>
</div> </div>
<list-item v-for="item in productList" :key="item.product_id"> <scroll
ref="scroll"
:updateData="[productList]"
:pullUp="true"
>
<div class="division-box">
<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="@/assets/homePage/WechatIMG2 Copy@2x.png" alt="">
</div> </div>
<div slot="content" class="item-content"> <div slot="content" class="item-content">
<div class="pro-name">
<p>{{ item.product_name }}</p>
<img class="arrow" src="@/assets/productQuery/getIn.png" alt="" >
</div>
<div class="centers"> <div class="centers">
<p class="firsts1">经销商</p> <p class="firsts1">{{ item.bp_type_n }}</p>
<p class="seconds1">{{ item.bp_name }}</p> <p class="seconds1">{{ item.bp_name }}</p>
</div> </div>
<div class="centers"> <div class="centers">
<p class="firsts1">参数项</p> <p class="firsts1">参数项</p>
<p class="seconds1">{{ item.product_code }}</p> <p class="seconds1">{{ item.product_code }}</p>
</div> </div>
<div class="centers">
<p class="firsts1">产品名称</p>
<p class="seconds1">{{ item.product_name }}</p>
</div>
</div>
<div slot="right-icon">
<img class="arrow" src="@/assets/productQuery/getIn.png" alt="" >
</div> </div>
</item> </item>
</list-item> </list-item>
</div>
</scroll>
</h-content> </h-content>
</h-view> </h-view>
</template> </template>
...@@ -89,6 +87,9 @@ export default { ...@@ -89,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
if (res.lists.length > 0 && res.lists.length < 10) {
vm.$refs.scroll.update(true)
}
} else { } else {
hlsPopup.showLongCenter(res.message) hlsPopup.showLongCenter(res.message)
} }
...@@ -144,58 +145,71 @@ export default { ...@@ -144,58 +145,71 @@ export default {
} }
} }
} }
.arrow { .division-box {
width: 16px; padding: 8px;
height: 16px;
// margin-left: 30px;
margin-top: 16px;
}
.item-pic {
width: 100px;
//height: 110px;
img {
width: 100%;
height: 100%;
}
}
.item-content {
// height: 102px;
width: 100%;
margin-left: 20px;
.centers:nth-of-type(1) {
margin-top: 16px;
} }
.centers:nth-of-type(2) { .hls-list-item {
margin-top: 6px; border-radius: 4px;
} }
.centers:nth-of-type(3) { .item-pic {
margin-top: 6px; width: 100px;
//height: 110px;
img {
width: 100%;
height: 100%;
}
} }
.centers { .item-content {
// margin-top: 6px; width: 100%;
// white-space: nowrap; margin-left: 20px;
// width: 100%; .pro-name {
font-family: PingFangSC-Semibold; height: 42px;
font-size: 13px; width: 100%;
color: rgba(56,63,69,0.60); position: relative;
letter-spacing: 0.5px; border-bottom: 1px solid #F3F3F7;
display: flex; .arrow {
flex-direction: row; position: absolute;
.firsts1 { width: 16px;
width: 60px; height: 16px;
height: 17px; right: 0;
font-family: PingFangSC-Regular; top: 13px;
font-size: 13px; }
color: rgba(56,63,69,0.60); p {
} height: 42px;
.seconds1 { line-height: 42px;
width: 70%; font-family: PingFangSC-Semibold;
margin-left: 16px; font-size: 15px;
height: auto; color: #4B4A4B;
font-family: PingFangSC-Regular; letter-spacing: 0;
font-size: 13px; font-weight: 600;
color: #383F45; }
} }
.centers {
font-family: PingFangSC-Semibold;
font-size: 13px;
color: rgba(56,63,69,0.60);
letter-spacing: 0.5px;
display: flex;
flex-direction: row;
margin-top: 8px;
.firsts1 {
width: 60px;
height: 17px;
font-family: PingFangSC-Regular;
font-size: 13px;
color: rgba(56,63,69,0.60);
}
.seconds1 {
width: 70%;
margin-left: 16px;
height: auto;
font-family: PingFangSC-Regular;
font-size: 13px;
color: #4B4A4B;
}
}
} }
}
</style> </style>
src/pages/pay/firstPay/pay-entry.vue
View file @ b70b9d5d
...@@ -9,9 +9,109 @@ ...@@ -9,9 +9,109 @@
</div> </div>
</div> </div>
</transition> </transition>
<transition name="trans">
<div v-show="show" class="modal-show-bank">
<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}`)"
>
<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>
</div>
</div></transition>
<transition name="trans">
<div v-show="confirm" class="modal-show-bank">
<div class="down">
<div class="top">
<img src="@/assets/payment/back.png" @click="show=false" >
<span>确认付款</span>
</div>
<div class="info">
<div class="info-item">
<span>还款金额</span>
<span>¥50600.00</span>
</div>
<div class="interest">
<span>本次交易收取0.03%服务费</span>
</div>
<div class="info-item">
<span>服务费</span>
<span>+¥15.00</span>
</div>
<div class="info-item">
<span>合同编号</span>
<span>EF12345678</span>
</div>
<div class="info-item" @click="show=true">
<span>付款方式</span>
<span v-if="flag"><img src="@/assets/payment/ly.png"><span>农业银行</span><img class="arrow" src="@/assets/payment/go.png"></span>
<span v-if="!flag"><img src="@/assets/payment/alipay.png"><span>支付宝</span><img class="arrow" src="@/assets/payment/go.png"></span>
</div>
</div>
</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="$routeGo()" > <img src="@/assets/userBind/arrow.png" @click="$routeGo()">
<span>支付中心</span> <span>支付中心</span>
</div> </div>
</h-header> </h-header>
...@@ -25,70 +125,26 @@ ...@@ -25,70 +125,26 @@
<span>还款金额</span> <span>还款金额</span>
<span>¥50600.00</span> <span>¥50600.00</span>
</div> </div>
<div class="interest">
<span>本次交易收取0.03%服务费</span>
</div>
<div class="info-item">
<span>服务费</span>
<span>+¥15.00</span>
</div>
<div class="info-item">
<span>合同编号</span>
<span>EF12345678</span>
</div>
<div class="info-item" @click="show=true">
<span>付款方式</span>
<span v-if="flag"><img src="@/assets/payment/ly.png"><span>农业银行</span><img class="arrow" src="@/assets/payment/go.png"></span>
<span v-if="!flag"><img src="@/assets/payment/alipay.png"><span>支付宝</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="foot" @click.native="pay">立即付款</tab-button> <tab-button class="foot" @click.native="pay">确认支付</tab-button>
</bottom-tab> </bottom-tab>
</h-view> </h-view>
</template> </template>
...@@ -117,6 +173,9 @@ export default { ...@@ -117,6 +173,9 @@ export default {
money: '', money: '',
select: 'three0', select: 'three0',
name: '', name: '',
checkType: {},
confirm: false,
show: false,
downNum: false, downNum: false,
recommand: false, recommand: false,
userName: window.sessionStorage.getItem('bp_name'), userName: window.sessionStorage.getItem('bp_name'),
...@@ -143,8 +202,12 @@ export default { ...@@ -143,8 +202,12 @@ export default {
} else { } else {
vm.select = 'one' vm.select = 'one'
} }
if (vm.nongBank.length !== 0) {
vm.checkType = {...vm.nongBank[0]}
}
return notNong return notNong
}, },
}, },
watch: {}, watch: {},
beforeRouteEnter (to, from, next) { beforeRouteEnter (to, from, next) {
...@@ -250,19 +313,111 @@ export default { ...@@ -250,19 +313,111 @@ export default {
.trans-enter, .trans-enter,
.trans-leave-active { .trans-leave-active {
opacity: 0; opacity: 0;
}
.modal-show-bank {
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;
}
}
.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 { .info {
width: 100%; width: 100%;
height: 226px; height: 226px;
background-color: #fff; background-color: #fff;
.info-item { .info-item {
border: 1px solid #d9dbdf;
height: 46px; height: 46px;
width: 335px; width: 335px;
margin: 0 auto; margin: 0 auto;
position: relative;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.arrow{
margin-right:-10px;
}
img{
width:17px;
margin-right:10px;
}
span:first-child { span:first-child {
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 14px; font-size: 14px;
...@@ -276,17 +431,35 @@ export default { ...@@ -276,17 +431,35 @@ export default {
color: #383f45; color: #383f45;
letter-spacing: 0; letter-spacing: 0;
line-height: 18px; line-height: 18px;
display: flex;
align-items: center;
} }
} }
.info-item:nth-of-type(1)::after{ .info-item:nth-of-type(1)::after{
content:""; content:"";
display:block; display:block;
width: 16px; position: absolute;
height: 16px; right:20px;
border: 16px solid #fff; top:25px;
border-left:transparent; border: 10px solid #fff;
border-right:transparent; border-left-color:transparent;
border-top:transparent; border-right-color:transparent;
border-top-color:transparent;
border-bottom-color:rgba(75,74,75,0.10);
}
.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.10);
} }
} }
.modal-show { .modal-show {
...@@ -369,47 +542,6 @@ export default { ...@@ -369,47 +542,6 @@ export default {
} }
} }
.pay-way {
.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;
}
}
}
}
} }
.foot { .foot {
background-color: @headerColor; background-color: @headerColor;
......
src/pages/productQuery/product-list.vue
View file @ b70b9d5d
...@@ -18,6 +18,12 @@ ...@@ -18,6 +18,12 @@
<img src="@/assets/distributorSign/search.png" alt=""> <img src="@/assets/distributorSign/search.png" alt="">
</div> </div>
</div> </div>
<scroll
ref="scroll"
:updateData="[lists]"
:pullUp="true"
>
<div class="division-box"> <div class="division-box">
<list-item v-for="(item,index) in lists" :key="index"> <list-item v-for="(item,index) in lists" :key="index">
...@@ -39,10 +45,10 @@ ...@@ -39,10 +45,10 @@
<p class="seconds1">{{ item.product_code }}</p> <p class="seconds1">{{ item.product_code }}</p>
</div> </div>
</div> </div>
<div slot="right-icon"/>
</item> </item>
</list-item> </list-item>
</div> </div>
</scroll>
</h-content> </h-content>
</h-view> </h-view>
</template> </template>
...@@ -78,6 +84,9 @@ export default { ...@@ -78,6 +84,9 @@ export default {
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) {
vm.$refs.scroll.update(true)
}
// vm.picLists = res.lists // vm.picLists = res.lists
// console.log('........',vm.picLists) // console.log('........',vm.picLists)
} else { } else {
...@@ -137,8 +146,7 @@ export default { ...@@ -137,8 +146,7 @@ export default {
.division-box { .division-box {
padding: 8px; padding: 8px;
} }
.hls-list-item .hls-list-item {
{
border-radius: 4px; border-radius: 4px;
} }
.item-pic { .item-pic {
......
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