Skip to content

H
hls-rljj-wx
Commit 4ba9755d authored by 5359's avatar 5359
Browse files
Options

dev测试环境跳转接口调整

parent dfad6bf5
Show whitespace changes
Inline Side-by-side
Showing with 234 additions and 180 deletions
src/pages/applications/cmbPolyPay/cmbPolyPay.vue
View file @ 4ba9755d
......@@ -23,9 +23,9 @@
</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: 82%;font-size: 12px;margin-top:15px">
<div class="cont-type" style="color: #5a5959;font-size: 14px;font-weight:bold">承租人：{{ item.customername }}
<img slot="left-icon" src="../../../assets\electronicContract\contract-list.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>
......@@ -33,24 +33,26 @@
<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>{{ item.status }}</span></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>
<button @click="download(index)">账单下载</button>
<router-link :to="{name:'CmbPolyPayDetail',query:{contractno:item.contractno}}"><span class="more">&gt;</span>
<router-link v-if="item.status == '还款中'" :to="{name:'CmbPolyPayDetail',query:{contractno:item.contractno}}">
<img src="../../../assets\image\right-arrow@2x.png" class="more" alt="">
</router-link>
</article>
</div>
<div v-else-if="ListNum == 0" class="billList">
<div style="
width: 160px;
height: 120px;
width: 200px;
height: 160px;
position: relative;
left: 50%;
top: 100px;
transform: translateX(-80px);
transform: translateX(-100px);
">
<img src="../../../assets\image\nobill.png" style="width: 160px; height: 120px" alt="">
<p style="text-align: center">暂无相关合同信息</p>
<img src="../../../assets\image\nobill.png" style="width: 200px; height: 160px" alt="">
<p style="text-align: center; color:#555;">暂无相关合同信息</p>
</div>
</div>
</div>
......@@ -79,22 +81,23 @@ export default {
let vm = this
let value = vm.searchCondition.input
let url = process.env.basePath + 'getCmbConList'
// http://sign.hitachics.com/core/r/api?sysName=HCL_UPLOAD_FILE&apiName=getCmbConList
// console.log('请求数据')
let params = {
// openId: "oBdoRwAgUiwsQvNGYhBYks6JJLPE",
openId: openId,
openId: 'oBdoRwAgUiwsQvNGYhBYks6JJLPE',
// openId: openId,
serialno: value,
}
// console.log("请求");
vm.hlsPopup.showLoading('请稍候')
vm.hlsHttp.post(url, params).then(function (res) {
vm.hlsPopup.hideLoading()
// console.log(res)
if (res.result.respCode === 'S') {
var dataInfo = JSON.parse(res.result.json)
// console.log('请求成功', dataInfo.lists)
vm.ListNum = dataInfo.lists.length
vm.massages = dataInfo.lists
} else {
vm.ListNum = 0
vm.hlsPopup.showLongCenter('查询合同列表失败' + res.result.respMsg)
}
})
......@@ -102,6 +105,9 @@ export default {
download (index) {
console.log('下载')
},
detectSearchCondition () {
this.searchBill(window.localStorage.openId)
},
},
}
</script>
......@@ -114,21 +120,19 @@ export default {
margin-top: 10px;
// margin-bottom: 10px;
position: relative;
border: 1px solid #cccccc;
border-radius: 20px;
.searchInput {
margin-left: 5%;
display: -webkit-flex;
border: 1px solid #cccccc;
/* margin: 0.14rem 0.2rem; */
width: 80%;
height: 0.56rem;
border-radius: 20px;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-align-items: center;
input {
text-align: center;
width: 90%;
......@@ -142,6 +146,14 @@ export default {
//padding-left: 11px;
}
}
button {
margin-right: -10px;
background-color: rgb(230, 230, 230);
border: 1px solid #cccccc;
border-radius: 20px;
width: 15%;
height: 100%;
}
}
// 账单卡片列表
.billList {
......@@ -152,16 +164,27 @@ export default {
border: 1px solid #d0d0d0;
border-radius: 8px;
margin: 0 auto 12px;
height: 170px;
height: 200px;
width: 98%;
.text {
margin-left: 50px;
margin-left: 45px;
position: relative;
top: 50%;
transform: translateY(-50%);
.cont-type {
padding-top: 2px;
width: 100%;
word-wrap: break-word;
}
:nth-child(1) {
width: 200px;
}
}
.icon {
//左侧图标
position: relative;
float: left;
width: 50px;
width: 40px;
padding-left: 5px;
top: 50%;
transform: translateY(-20px);
......@@ -176,17 +199,16 @@ export default {
}
button {
position: absolute;
top: 5px;
top: 12px;
right: 5px;
width: 75px;
height: 25px;
font-size: 14px;
background-color: #999999;
border: 2px solid #999999;
background-color: #d1d1d1;
border: 2px solid #dcd0d0;
border-radius: 5px;
}
.more {
font-size: 32px;
position: absolute;
right: 5px;
top: 50%;
......
src/pages/applications/cmbPolyPay/cmbPolyPayDetail.vue
View file @ 4ba9755d
......@@ -3,12 +3,12 @@
<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="billInfo">
<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 }}</li>
<li><span>剩余应还金额：</span>{{ item.recdueamt_total_str }}</li>
<li><span>现金流项目：</span>{{ item.characterid_n }}</li>
</ul>
</li>
......@@ -32,34 +32,15 @@
</button>
<p>扫码支付</p>
</div>
<img class="load" src="" alt="">
</div>
</div>
<!-- 支付账单遮罩 -->
<div v-show="payPage" class="payPage">
<div class="payPagebox">
<div class="payPage-title">
<p>×</p>
<p>支付</p>
<p>使用密码</p>
</div>
<div class="payPage-total">
<p>￥{{ showPayamount }}</p>
</div>
<div id="payPage-payCode" class="payPage-payCode">
<img src="" alt="">
<p>**银行卡（{{ tailNum }}）</p>
<span>›</span>
</div>
<div class="payPage-button">
<button>确认支付</button>
</div>
<div id="qrcode" />
</div>
</div>
</div>
</template>
<script>
import QRCode from 'qrcodejs2'
export default {
data () {
return {
......@@ -70,11 +51,10 @@ export default {
total: 0, // 总计金额
ListNum: 0, // 总共有多少项
Lists: [], // 原始数据
payamount: 0,
showPayamount: 0,
payamount: 0, // 支付金额
showPayamount: 0, // 后续支付结果页面显示
recamt_id: '', // 获得的账单二维码
payPage: false, // 支付确认页面
tailNum: '0000', // 银行卡尾部号码
counter: [10, 10, 1], // 前十次请求间隔,后十次请求间隔,间隔一/二
}
},
computed: {
......@@ -83,7 +63,7 @@ export default {
created () {
// 当数据拿到之后给checked初始值；
var name = this.$route.query.contractno
console.log('传值', name)
// console.log('传值', name)
// this.contractno = "L20RJ00313";
this.contractno = name
this.getData()
......@@ -92,6 +72,7 @@ export default {
},
methods: {
getData () {
// console.log('获取最新账单')
let vm = this
let url = process.env.basePath + 'getCmbConDetail'
let params = {
......@@ -104,7 +85,7 @@ export default {
var dataInfo = JSON.parse(res.result.json)
// console.log('请求成功', dataInfo.lists)
vm.ListNum = dataInfo.lists.length
// 给checked初始值
// 给checked和unchecked初始值
for (let i = 0; i < vm.ListNum; i++) {
// console.log('给checked初始值');
vm.checked[i] = false
......@@ -120,7 +101,7 @@ export default {
})
// console.log(vm.Lists);
},
// 点击支付
pay () {
let vm = this
let $input = document.getElementById('payamount')
......@@ -141,6 +122,10 @@ export default {
vm.recamt_id = dataInfo.recamt_id
// console.log('获取支付id', vm.recamt_id)
vm.bottomType = 1
$input.value = ''
$input.placeholder = '请输入支付金额'
vm.payamount = 0
vm.total = 0
vm.showRecamt()
} else {
vm.hlsPopup.showLongCenter(res.result.return_message)
......@@ -159,29 +144,151 @@ export default {
showRecamt () {
let vm = this
let url = 'http://sign.hitachics.com/core/r/api/cmb/poly/get/qrcode'
console.log('支付id', this.recamt_id)
// console.log('支付id', this.recamt_id)
let params = {
'recamt_id': this.recamt_id,
}
console.log('params', params)
// console.log('params', params)
vm.$post(url, params).then(function (res) {
// console.log(res)
document.getElementById('qrcode').innerHTML = ''
if (res.respCode == 'SUCCESS') {
let dataInfo = res.qrCode
console.log(res)
document.getElementById('bottomErm').children[1].src = dataInfo
let qrcode = new QRCode('qrcode',
{
text: dataInfo,
width: 128,
height: 128,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H, // 容错等级
}
)
// console.log(qrcode)
} else {
vm.hlsPopup.showLongCenter(res.respMsg)
}
}).then(function (res) {
vm.waitResult(params)
})
},
waitResult (params) {
var num = this.counter[0]// 记录请求次数
var frequency = this.counter[1]// 记录请求次数
clearInterval(this.timer)
clearInterval(this.timer2)
let vm = this
let url = process.env.rootPath + '/cmb/poly/query/order/status'
let urlp = process.env.rootPath + '/cmb/poly/close/order'
// this.timer = setInterval(() => {
// // console.log(num);
// num--
// if (num === 0) {
// num = number
// frequency++
// // 间隔x秒请求结果
// console.log(this.counter[2], frequency)
// vm.$post(url, params).then(function (res) {
// if (res.respCode == 'SUCCESS') {
// console.log('成功')
// // 接口文档上有状态，但实际没有;
// if (res.tradeState != 'P') {
// clearInterval(vm.timer)// 判断订单已支付暂停定时器
// };
// // 支付成功应该不需要前端主动关闭订单吧;
// // vm.closeBill(urlp, params);
// console.log(res.respMsg)
// } else {
// console.log(res.respMsg)
// }
// })
// };
// // 每15/30秒请求一次，每种间隔请求frequency次
// if (frequency === 10) {
// if (this.counter[2] === 1) {
// number = this.counter[1]
// frequency = 0
// this.counter[2] = 2
// } else {
// this.counter[2] = 1
// console.log('停止查询')
// clearInterval(this.timer)
// this.closeBill(urlp, params)// 关闭订单
// }
// }
// }, 1000)
// },
this.timer = setInterval(() => {
// console.log(num);
if (num !== 0) {
num--
// 间隔15秒请求结果
// console.log('查询1', num)
vm.$post(url, params).then(function (res) {
if (res.respCode == 'SUCCESS') {
// console.log('成功')
// 接口文档上有状态，但实际没有;
if (res.tradeState != 'P') {
clearInterval(vm.timer)// 判断订单已支付暂停定时器
if (res.tradeState == 'S') {
vm.hlsPopup.showLongCenter('支付完成')
}
};
// 支付成功应该不需要前端主动关闭订单吧;
// vm.closeBill(urlp, params);
// console.log(res.respMsg)
vm.hlsPopup.showLongCenter(res.respMsg)
} else {
// console.log(res.respMsg)
vm.hlsPopup.showLongCenter(res.respMsg)
}
})
} else {
// 运行10次关闭定时器
clearInterval(vm.timer)// 判断订单已支付暂停定时器
this.timer2 = setInterval(() => {
if (frequency !== 0) {
frequency--
// 间隔x秒请求结果
// console.log('查询2', frequency)
vm.$post(url, params).then(function (res) {
if (res.respCode == 'SUCCESS') {
// console.log('成功')
// 接口文档上有状态，但实际没有;
if (res.tradeState != 'P') {
clearInterval(vm.timer2)// 判断订单已支付暂停定时器
};
// console.log(res.respMsg)
vm.hlsPopup.showLongCenter(res.respMsg)
} else {
// console.log(res.respMsg)
vm.hlsPopup.showLongCenter(res.respMsg)
}
})
} else { clearInterval(vm.timer2) }
}, 30000)
}
}, 15000)
},
closeBill (urlp, params) {
let vm = this
vm.$post(urlp, params).then(function (res) {
// console.log(res, '订单关闭')
if (res.respCode == 'SUCCESS') {
// console.log(res.respMsg)
vm.hlsPopup.showLongCenter(res.respMsg)
}
})
},
showPaypage () {
},
close () {
// 点击关闭二维码页面
// 点击关闭二维码页面;
this.bottomType = 0
this.getData()
},
// 选择账单后把总计金额显示在底部
onClickHander (index) {
if (this.Lists[index].select_flag == 'N') {
return
......@@ -193,21 +300,22 @@ export default {
} else if (this.checked[index] == true) {
num -= this.Lists[index].recdueamt_total
}
// 保留两位
this.total = num
document.getElementById('payamount').value = num
console.log(index)
this.total = Math.floor(num * 100) / 100
document.getElementById('payamount').value = this.total
// console.log(index)
},
// 根据getData时 生成的 unchecked:[] 给checkbox添加样式，true为不可选
addClass () {
// console.log("add");
for (var i = 0; i < this.ListNum; i++) {
let $input = document.getElementById('box').children[i].children[0]
let $ul = document.getElementById('box').children[i].children[1]
// console.log($input.className);
if (this.unchecked[i] == true) {
$input.className = 'uncheckbox'
$input.className = 'uncheck-box'
$ul.className = 'uncheck-ul'
} else {
$input.className = 'checkbox'
$input.className = 'check-box'
$ul.className = 'check-ul'
}
}
},
......@@ -232,10 +340,10 @@ export default {
left: 3%;
transform: translateY(-5px);
}
.billInfo {
ul {
margin-right: 3%;
width: 87%;
border: 2px solid #fa9494;
border: 2px solid #b08f8f;
border-radius: 8px;
li {
padding-left: 8px;
......@@ -247,6 +355,12 @@ export default {
}
}
}
.uncheck-ul {
background-color: #d5d5d5;
}
.check-ul {
background-color: #ffffff;
}
}
input[type="checkbox"] {
cursor: pointer;
......@@ -256,7 +370,7 @@ input[type="checkbox"] {
font-size: 0.9rem;
visibility: hidden;
}
.checkbox[type="checkbox"]:checked::after {
.check-box[type="checkbox"]:checked::after {
height: 18px;
line-height: 15px;
content: "✓";
......@@ -266,7 +380,7 @@ input[type="checkbox"] {
font-size: 15px;
font-weight: bold;
}
.checkbox[type="checkbox"]::after {
.check-box[type="checkbox"]::after {
position: absolute;
background-color: #ffffff;
border: 2px solid #dab2b2;
......@@ -278,10 +392,10 @@ input[type="checkbox"] {
content: " ";
border-radius: 50%;
}
.uncheckbox[type="checkbox"]::after {
.uncheck-box[type="checkbox"]::after {
position: absolute;
background-color: #bbbbbb;
border: 2px solid #676767;
background-color: #d5d5d5;
border: 2px solid #8e8e8e;
width: 18px;
height: 18px;
display: inline-block;
......@@ -354,9 +468,9 @@ input[type="checkbox"] {
border-top-right-radius: 18px;
p {
font-weight: 700;
margin-top: 10px;
padding-right: 30px;
font-size: 14px;
margin-top: 15px;
padding-right: 20px;
font-size: 16px;
text-align: center;
}
.close {
......@@ -382,13 +496,14 @@ input[type="checkbox"] {
text-align: center;
}
}
img {
#qrcode {
position: absolute;
width: 40%;
height: 55%;
top: 20%;
width: 128px;
height: 128px;
top: 30%;
left: 50%;
transform: translateX(-50%);
// background-color:#72a03c ;
}
// .load{
// // ../../../assets\image
......@@ -399,97 +514,4 @@ input[type="checkbox"] {
// }
}
}
.payPage {
width: 100%;
height: 100%;
background-color: #989898;
}
.payPagebox {
position: absolute;
z-index: 9;
width: 80%;
height: 40%;
top: 25%;
left: 10%;
border: 1px solid green;
border-radius: 15px;
background-color: #ffffff;
.payPage-title {
margin-top: 5%;
width: 100%;
height: 14%;
display: flex;
justify-content: space-between;
border-bottom: 1px solid rgb(149, 149, 149);
:nth-child(1) {
padding-left: 16px;
font-size: 24px;
}
:nth-child(2) {
line-height: 100%;
padding-left: 30%;
font-size: 20px;
font-weight: 700;
}
:nth-child(3) {
padding-top: 2px;
padding-left: 15%;
padding-right: 5%;
font-size: 16px;
color: blue;
}
}
.payPage-total {
padding-top: 10%;
width: 100%;
height: 35%;
border-bottom: 1px solid rgb(149, 149, 149);
font-size: 32px;
font-weight: 700;
text-align: center;
}
.payPage-payCode {
display: flex;
justify-content: space-between;
padding-top: 3%;
width: 100%;
height: 15%;
border-bottom: 1px solid rgb(149, 149, 149);
font-size: 18px;
text-align: center;
:nth-child(1) {
padding-left: 10px;
width: 20px;
height: 20px;
}
:nth-child(2) {
width: 80%;
font-size: 18px;
padding-left: 10px;
text-align: left;
}
:nth-child(3) {
font-size: 32px;
margin-top: -9px;
padding-right: 4px;
color: #989898;
}
}
.payPage-button {
margin-top: 5%;
width: 100%;
height: 35%;
button {
position: relative;
left: 6%;
width: 88%;
height: 50%;
font-size: 20px;
color: #ffffff;
background-color: #72a03c;
border: 1px solid #8ac443;
border-radius: 8px;
}
}
}
</style>
src/pages/home.vue
View file @ 4ba9755d
......@@ -202,9 +202,8 @@ export default {
// },
// })
// } else {
debugger
window.localStorage.authFlag == 'Y' || data.functionState == 'UserRegister' || data.functionState == 'ChinaUnionPay' || data.functionState == 'cmbPolyPay' ? this.$router.push({ name: data.functionState }) : hlsPopup.showPopup({
window.localStorage.authFlag == 'Y' || data.functionState == 'UserRegister' || data.functionState == 'ChinaUnionPay' || data.functionState == 'CmbPolyPay' ? this.$router.push({ name: data.functionState }) : hlsPopup.showPopup({
title: '提示',
content: '当前用户未完成注册，请先注册!',
onConfirm: function () {
......
src/router/index.js
View file @ 4ba9755d
......@@ -42,8 +42,10 @@ import UploadImg from '@/pages/applications/userRegisters/uploadImg'
import UploadImage from '@/pages/applications/userRegisters/uploadImage'
// 银联电子签约
import ChinaUnionPay from '@/pages/applications/chinaUnionPay/chinaUnionPay'
// 银联电子签约
// 招行聚合支付
import CmbPolyPay from '@/pages/applications/cmbPolyPay/cmbPolyPay'
// 招行聚合支付明细
import CmbPolyPayDetail from '@/pages/applications/cmbPolyPay/cmbPolyPayDetail'
Vue.use(Router)
// 全局跳转路由方法
......@@ -224,6 +226,15 @@ export default new Router({
keepAlive: false,
},
},
// 招行聚合支付合同明细
{
path: '/CmbPolyPayDetail',
component: CmbPolyPayDetail,
name: 'CmbPolyPayDetail',
meta: {
keepAlive: false,
},
},
],
scrollBehavior (to, from, savedPosition) {
if (to.hash) {
......
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