Skip to content

H
hls-rljj-wx
Commit ba7e2f7b authored by liangliang.wang01's avatar liangliang.wang01 🤸🏽
Browse files
Options

修改招行支付标题以及一些其他问题

parent 29f139da
Hide whitespace changes
Inline Side-by-side
Showing with 119 additions and 110 deletions
src/pages/applications/cmbPolyPay/cmbPolyPay.vue
View file @ ba7e2f7b
<template>
<h-view title="招行扫码支付">
<div class="" style="padding: 20px; height: 100%">
<div class="title" style="height:5%; width:100%">
<div>合同信息</div>
</div>
<div class="search">
<div class="searchInput">
<input v-model="searchCondition.input" placeholder="请输入机号信息">
<button style="position:absolute;right:10px" @click="detectSearchCondition()">搜索</button>
</div>
</div>
<div v-if="ListNum != 0" class="billList">
<article v-for="(item, index) in massages" :key="item.id" class="article" style="margin-top:10px">
<img slot="left-icon" src="../../../assets\electronicContract\contract-icon.png" class="icon">
<div slot="name" class="text" style="width: 80%;font-size: 12px;">
<div class="cont-type" style="color: #000;font-size: 14px;font-weight:700">承租人：{{ item.customername }}
<h-view style="overflow:auto;" title="招行扫码支付">
<div class="page-box" style="padding: 20px; height: 100%">
<div style="height:12%; width:100%">
<div class="title" style="height:42%; width:100%">
<div>合同信息</div>
</div>
<div class="search" style="height:40%; width:100%">
<div class="searchInput">
<input v-model="searchCondition.input" placeholder="请输入机号信息" onfocus="this.placeholder=''" onblur="this.placeholder='请输入机号信息'">
<button style="position:absolute;right:10px" @click="detectSearchCondition()">搜索</button>
</div>
</div>
</div>
<div v-if="ListNum != 0" class="billList">
<article v-for="(item, index) in massages" :key="item.id" class="article" style="margin-top:10px">
<img slot="left-icon" src="../../../assets\electronicContract\contract-icon.png" class="icon">
<div slot="name" class="text" style="width: 80%;font-size: 12px;">
<div class="cont-type" style="color: #000;font-size: 14px;font-weight:700">承租人：{{ item.customername }}
</div>
<div class="cont-type" style="color: #5a5959;font-size: 14px">经销商：{{ item.dealername }}</div>
<div class="cont-type" style="color: #5a5959;font-size: 14px">产品名称：{{ item.modelname }}</div>
<div class="cont-type" style="color: #5a5959;font-size: 14px">合同号：{{ item.contractno }}</div>
<div class="cont-type" style="color: #5a5959;font-size: 14px">机号：{{ item.serialno }}</div>
<div class="cont-type" style="color: #5a5959;font-size: 14px">租金总额：{{ item.contractamt }}</div>
<div class="cont-type" style="color: #5a5959;font-size: 14px">租赁开始日：{{ item.leasebgndt }}</div>
<div class="cont-type" style="color: #5a5959;font-size: 14px">状态：<span style="font-weight: 700;
color: rgba(198, 0, 0, 0.5);">{{ item.status }}</span></div>
</div>
<router-link :to="{name:'CmbPolyPayDetail',query:{contractno:item.contractno}}" class="more">
<img src="../../../assets\image\right-arrow@2x.png" alt="">
</router-link>
<button @click="download(index)">账单下载</button>
</article>
</div>
<div v-else-if="ListNum == 0" class="billList">
<div style="
width: 200px;
height: 160px;
position: relative;
left: 50%;
top: 100px;
transform: translateX(-100px);
">
<img src="../../../assets\image\nobill.png" style="width: 200px; height: 160px" alt="">
<p style="text-align: center; color:#555;">暂无相关合同信息</p>
</div>
<div class="cont-type" style="color: #5a5959;font-size: 14px">经销商：{{ item.dealername }}</div>
<div class="cont-type" style="color: #5a5959;font-size: 14px">产品名称：{{ item.modelname }}</div>
<div class="cont-type" style="color: #5a5959;font-size: 14px">合同号：{{ item.contractno }}</div>
<div class="cont-type" style="color: #5a5959;font-size: 14px">机号：{{ item.serialno }}</div>
<div class="cont-type" style="color: #5a5959;font-size: 14px">租金总额：{{ item.contractamt }}</div>
<div class="cont-type" style="color: #5a5959;font-size: 14px">租赁开始日：{{ item.leasebgndt }}</div>
<div class="cont-type" style="color: #5a5959;font-size: 14px">状态：<span style="font-weight: 700;
color: rgba(198, 0, 0, 0.5);">{{ item.status }}</span></div>
</div>
<router-link :to="{name:'CmbPolyPayDetail',query:{contractno:item.contractno}}" class="more">
<img src="../../../assets\image\right-arrow@2x.png" alt="">
</router-link>
<button @click="download(index)">账单下载</button>
</article>
</div>
<div v-else-if="ListNum == 0" class="billList">
<div style="
width: 200px;
height: 160px;
position: relative;
left: 50%;
top: 100px;
transform: translateX(-100px);
">
<img src="../../../assets\image\nobill.png" style="width: 200px; height: 160px" alt="">
<p style="text-align: center; color:#555;">暂无相关合同信息</p>
</div>
</div>
</div>
</h-view>
</h-view>
</template>
<script>
......@@ -163,6 +165,8 @@ export default {
border-radius: 20px;
width: 15%;
height: 100%;
box-sizing: content-box;
padding: 0px;
}
}
// 账单卡片列表
......
src/pages/applications/cmbPolyPay/cmbPolyPayDetail.vue
View file @ ba7e2f7b
<template>
<h-view title="招行扫码支付">
<div>
<ul id="box" class="box">
<li v-for="(item, index) in Lists" :key="index" class="items">
<input v-model="checked[index]" class="" type="checkbox" @mouseup="onClickHander(index)">
<ul class="">
<li><span>期数：</span>{{ item.times }}</li>
<li><span>还款日期：</span>{{ item.recduedt_char }}</li>
<li><span>租金金额：</span>{{ item.recdueamt }}</li>
<li><span>违约金金额：</span>{{ item.ovducmpsamt }}</li>
<li><span>剩余应还金额：</span>{{ item.recdueamt_total_str }}</li>
<li><span>收款类别：</span>{{ item.characterid_n }}</li>
</ul>
</li>
</ul>
<!-- 总计还款金额 -->
<h-view style="overflow:auto;" title="还款明细">
<div class="page-box" style="width:100% height:100%" >
<ul id="box" style="margin-bottom: 150px;">
<li v-for="(item, index) in Lists" :key="index" class="items">
<input v-model="checked[index]" class="" type="checkbox" @mouseup="onClickHander(index)">
<ul class="">
<li><span>期数：</span>{{ item.times }}</li>
<li><span>还款日期：</span>{{ item.recduedt_char }}</li>
<li><span>租金金额：</span>{{ item.recdueamt }}</li>
<li><span>违约金金额：</span>{{ item.ovducmpsamt }}</li>
<li><span>剩余应还金额：</span>{{ item.recdueamt_total_str }}</li>
<li><span>收款类别：</span>{{ item.characterid_n }}</li>
</ul>
</li>
</ul>
</div>
<!-- 总计还款金额 -->
<div v-if="bottomType == 0" class="bottomBox">
<div class="total">
<div class="counter"><span>合计还款金额：{{ total }}</span></div>
<input id="payamount" type="number" placeholder="请输入支付金额" required oninvalid="setCustomValidity('请输入支付金额！');"
oninput="setCustomValidity('');">
</div>
<button @click="pay">支付</button>
<div class="total">
<div class="counter"><span>合计还款金额：{{ total }}</span></div>
<input id="payamount" type="number" placeholder="请输入支付金额" required oninvalid="setCustomValidity('请输入支付金额！');"
oninput="setCustomValidity('');" onfocus="this.placeholder=''" onblur="this.placeholder='请输入支付金额'">
</div>
<button @click="pay">支付</button>
</div>
<!-- 二维码遮罩 -->
<div v-if="bottomType == 1" class="ermPage">
<div class="topBlack" />
<div id="bottomErm" class="bottomErm">
<div class="ermTitle">
<button class="close" @click="close">
<p>x</p>
</button>
<p>扫码支付</p>
<div class="topBlack" />
<div id="bottomErm" class="bottomErm">
<div class="ermTitle">
<button class="close" @click="close">
<p>x</p>
</button>
<p>扫码支付</p>
</div>
<div id="qrcode"></div>
</div>
<div id="qrcode"></div>
</div>
</div>
</div>
</h-view>
</h-view>
</template>
<script>
......@@ -120,7 +119,7 @@ export default {
'amount': this.payamount,
}
vm.$post(url, params).then(function (res) {
if (res.result.return_status == 'S') {
if (res.result.return_status === 'S') {
var dataInfo = res.result
vm.recamt_id = dataInfo.recamt_id
// console.log('获取支付id', vm.recamt_id)
......@@ -130,13 +129,15 @@ export default {
vm.hlsPopup.showLongCenter(res.result.return_message)
}
})
} else if (this.total == 0) {
} else if (this.total === 0) {
$input.value = ''
$input.placeholder = '请选择要支付的款项'
} else if ($input.value > this.total) {
$input.value = ''
$input.placeholder = '您输入的支付款过多'
} else if ($input.value == '') {
$input.placeholder = '您输入的支付金额过多！'
} else if ($input.value === '') {
$input.placeholder = '请输入支付金额'
} else if ($input.value === 0) {
$input.placeholder = '请输入支付金额'
}
},
......@@ -228,6 +229,7 @@ export default {
// 点击关闭二维码页面;
this.bottomType = 0
this.getData();
this.total= 0;
},
//选择账单后把总计金额显示在底部
onClickHander (index) {
......@@ -267,9 +269,6 @@ export default {
}
</script>
<style lang="less" scoped>
.box {
margin-bottom: 50%;
}
.items {
margin-top: 10px;
display: flex;
......@@ -277,18 +276,14 @@ export default {
width: 100%;
justify-content: space-between;
font-size: 12px;
input {
// visibility: hidden;
position: relative;
top: 50%;
left: 3%;
transform: translateY(-5px);
}
//可选和不可选的项目样式可能要不一样
ul {
margin-right: 3%;
width: 87%;
border: 2px solid #afafaf;
border-radius: 8px;
background-color: #ffffff;
li {
padding-left: 8px;
padding-top: 15px;
......@@ -305,16 +300,21 @@ export default {
.check-ul{
background-color: #ffffff;
}
}
input[type="checkbox"] {
cursor: pointer;
position: relative;
width: 1rem;
height: 1rem;
font-size: 0.9rem;
visibility: hidden;
}
.check-box[type="checkbox"]:checked::after {
//复选框样式
input[type="checkbox"] {
cursor: pointer;
position: relative;
width: 1rem;
height: 1rem;
font-size: 0.9rem;
top: 50%;
left: 3%;
transform: translateY(-5px);
visibility: hidden;
}
//可选时选中和未选中两种状态
.check-box[type="checkbox"]:checked::after {
height: 18px;
line-height: 15px;
content: "✓";
......@@ -323,8 +323,8 @@ input[type="checkbox"] {
border: 2px solid #7aae3b;
font-size: 15px;
font-weight: bold;
}
.check-box[type="checkbox"]::after {
}
.check-box[type="checkbox"]::after {
position: absolute;
background-color: #ffffff;
border: 2px solid #dab2b2;
......@@ -335,8 +335,9 @@ input[type="checkbox"] {
text-align: center;
content: " ";
border-radius: 50%;
}
.uncheck-box[type="checkbox"]::after {
}
//不可选的样式
.uncheck-box[type="checkbox"]::after {
position: absolute;
background-color: #d9d9d9;
border: 2px solid #bfbfbf;
......@@ -347,6 +348,7 @@ input[type="checkbox"] {
text-align: center;
content: " ";
border-radius: 50%;
}
}
.bottomBox {
position: absolute;
......@@ -374,19 +376,22 @@ input[type="checkbox"] {
font-size: 12px;
position: relative;
right: 0px;
width: 36%;
width: 40%;
border: 1px solid #a69a9a;
border-radius: 5px;
padding-left: 5%;
padding-right: 3%;
text-align: center;
padding-left: 2%;
padding-right: 2%;
}
}
button {
button{
position: relative;
width: 20%;
height: 25%;
// top: -10px;
left: 50%;
transform: translateX(-50%);
font-size: 16px;
color: #ffffff;
border-radius: 8px;
border: 1px solid rgb(0, 200, 0);
......
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