Skip to content

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

uat修改

parent 9fb3af1b
Show whitespace changes
Inline Side-by-side
Showing with 661 additions and 387 deletions
src/pages/applications/cmbPolyPay/cmbPolyPay.vue
View file @ dfad6bf5
<template> <template>
<h-view class="public-style personalRegister" title="银联电子签约"> <div class="" style="padding: 20px; height: 100%">
<h-content> <div class="title" style="height:5%; width:100%">
<list-item class="personalInf" style="padding:20px;height:100%"> <div style="
<div style="height:40px;border-bottom:1px solid #d0d0d0"> width: 100%;
<div class="personalInf-text" style=" width: 150px;line-height: 30px;text-align: center; height:100%;
text-align: center;
border-radius: 5px; border-radius: 5px;
background-color: #ddd;font-size:16px;font-weight:700;color:#11111187">签约信息 padding-top: 7px;
</div> background-color: #ddd;
</div> font-size: 16px;
<item style="border-bottom:1px solid #d0d0d0;font-size:14px"> font-weight: 700;
<section slot="name" style="font-size:14px"> color: #11111187;
<img src="../../../assets/userRegister/bankIcon@2x.png" ">
style="float:left;width:20px;height:20px;margin: 2px 5px 0 0;">银行卡号: 合同信息
</section>
<input slot="content" v-model="bankCardNumber" style="text-align: left;font-size:14px" placeholder="请输入银行卡号">
</item>
<item style="border-bottom:1px solid #d0d0d0">
<section slot="name" style="font-size:14px">
<img src="../../../assets/userRegister/people-name.png"
style="float:left;width:20px;height:20px;margin: 2px 5px 0 0;">账户名称:
</section>
<input slot="content" v-model="bankAccName" style="text-align: left;font-size:14px" placeholder="请输入账户名称">
</item>
<item style="border-bottom:1px solid #d0d0d0">
<section slot="name" style="font-size:14px">
<img src="../../../assets/userRegister/idCard.png"
style="float:left;width:20px;height:20px;margin: 2px 5px 0 0;">证件号码:
</section>
<input slot="content" v-model="certNo" style="text-align: left;font-size:14px" placeholder="请输入证件号码"
@blur="goTop()">
</item>
<item style="border-bottom:1px solid #d0d0d0">
<section slot="name" style="font-size:14px">
<img src="../../../assets/userRegister/phone.png"
style="float:left;width:20px;height:20px;margin: 2px 5px 0 0;">预留手机:
</section>
<input slot="content" v-model="phoneNumber" style="text-align: left;font-size:14px" placeholder="请输入电话号码"
@blur="goTop()">
</item>
<item style="border-bottom:1px solid #d0d0d0">
<section slot="name" style="font-size:14px">
<img src="../../../assets/userRegister/indentifyCode.png"
style="float:left;width:20px;height:20px;margin: 2px 5px 0 0;">验证码:
</section>
<input slot="content" v-model="authCode" style="text-align: left;font-size:14px;margin-left: 0.13rem"
placeholder="请输入验证码" @blur="goTop()">
<div>
<button v-if="!showTimer"
style="width:1.7rem;height:30px;border-radius:15px;background-color:#09bb07;color:#FFFFFF;margin:8px 0 0 -60px;position:relative;left:30%"
@click="getSignCode()">
<div style="font-size: 11px">获取验证码</div>
</button>
<button v-if="showTimer"
style="width:1.7rem;height:30px;border-radius:15px;background-color:#888c8f;color:#FFFFFF;margin:8px 0 0 -60px;position:relative;left:30%">
<div style="font-size: 11px">{{ timerCount }}{{ text }}</div>
</button>
</div> </div>
</item>
<div>
<div style="width:50%;float: left;">
<div style="margin: 40px 0 0 14px;color:#333333;font-size:14px">
<div>请上传银行卡照片</div>
</div> </div>
<div style="height:100px;margin-top:30px"> <div class="search">
<div <div class="searchInput">
style="border:1px solid #b2b2b2;width:70%;height:100%;margin:0 auto;border-radius:5px;position:relative;"> <input v-model="searchCondition.input" placeholder="请输入机号信息">
<img :src="cardUp" alt class="pic" @click="addCardImage(0)"> <button style="position:absolute;right:10px" @click="detectSearchCondition()">搜索</button>
</div> </div>
</div> </div>
<p style="margin-top:10px;text-align:center;font-size:14px"> <div v-if="ListNum != 0" class="billList">
银行卡正面 <article v-for="(item, index) in massages" :key="item.id" class="article" style="margin-top:10px">
</p> <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 }}
</div> </div>
<div style="width:50%;float: left;"> <div class="cont-type" style="color: #5a5959;font-size: 14px">经销商：{{ item.dealername }}</div>
<div style="margin: 40px 0 0 14px;color:#333333;font-size:14px"> <div class="cont-type" style="color: #5a5959;font-size: 14px">产品名称：{{ item.modelname }}</div>
<p>请上传身份证照片</p> <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>{{ item.status }}</span></div>
</div> </div>
<div style="height:100px;margin-top:30px"> <button @click="download(index)">账单下载</button>
<div <router-link :to="{name:'CmbPolyPayDetail',query:{contractno:item.contractno}}"><span class="more">&gt;</span>
style="border:1px solid #b2b2b2;width:70%;height:100%;margin:0 auto;border-radius:5px;position:relative;"> </router-link>
<img :src="cardUp1" alt class="pic" @click="addCardImage(1)"> </article>
</div> </div>
<div v-else-if="ListNum == 0" class="billList">
<div style="
width: 160px;
height: 120px;
position: relative;
left: 50%;
top: 100px;
transform: translateX(-80px);
">
<img src="../../../assets\image\nobill.png" style="width: 160px; height: 120px" alt="">
<p style="text-align: center">暂无相关合同信息</p>
</div> </div>
<p style="margin-top:10px;text-align:center;font-size:14px">
身份证正面
</p>
</div> </div>
</div> </div>
<button
style="width:120px;height:30px;border-radius:15px;background-color:#09bb07;color:#FFFFFF;margin:70px 0 0 -60px;position:relative;left:50%;"
@click="next_step()">签约
</button>
<p />
</list-item>
</h-content>
</h-view>
</template> </template>
<script> <script>
import { getUrlParam } from '@/scripts/utils' import { getUrlParam } from '@/scripts/utils'
export default { export default {
components: {},
data () { data () {
return { return {
cardUp: require('../../../assets/userRegister/camear.png'), // 身份证正面url1 ListNum: 0,
bankCardNumber: '', massages: [],
bankAccName: '', searchCondition: {
certNo: '', input: null,
phoneNumber: '',
authCode: '',
phoneNumberFlag: false,
showTimer: false,
timerCount: 60,
timer: 60000,
captchaKey: '',
signId: '',
signStatus: 0,
text: '秒后失效',
cardUp1: require('../../../assets/userRegister/camear.png'), // 身份证正面url
preview_url: '', // 图片预览地址
attchmentId: '', // 附件预览id
attchmentId1: '', // 附件预览id
}
},
activated: function () {
// this.getUserInfo();
},
updated: function () {
},
created () {
this.wxConfig()
// wx.hideOptionMenu();
// var data = this.$route.params.userInfo;
// this.getUserInfo();
}, },
methods: {
// 调用微信接口的基础配置
wxConfig () {
let clientUrl = ''
let u = navigator.userAgent
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 // g
let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
if (isAndroid) {
// 这个是安卓操作系统
console.log('机型：android')
clientUrl = location.href
}
if (isIOS) {
// 这个是ios操作系统
console.log('机型：ios')
clientUrl = location.href.split('#')[0]
}
// let clientUrl = encodeURIComponent(location.href)
// let url = $config.rootPath + '/js/sdk/getWxConfig?wxCode=' + $config.wxCode + '&clientUrl=' + clientUrl
let url = process.env.basePathRl + 'getSignature'
let param = {
apiKey: 'handexinxi',
url: clientUrl,
}
hlsHttp.post(url, param).then(function (res) {
wx.config({
beta: true,
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: res.result.appId, // 必填，公众号的唯一标识
timestamp: res.result.timestamp, // 必填，生成签名的时间戳
nonceStr: res.result.nonceStr, // 必填，生成签名的随机串
signature: res.result.signature, // 必填，签名，见附录1
jsApiList: [
'chooseImage',
'previewImage',
'downloadImage',
'getLocalImgData',
'uploadImage',
'hideOptionMenu',
], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
})
wx.ready(function () {
wx.hideOptionMenu()
})
})
},
addCardImage: function (cardType) {
let self = this
// if(!self.cardUp){
wx.chooseImage({
count: 1, // 张数， 默认9
sizeType: ['compressed'], // 建议压缩图
sourceType: ['album', 'camera'], // 来源是相册、相机
success: function (res) {
if (cardType == 0) {
self.cardUp = res.localIds[0]
} else {
self.cardUp1 = res.localIds[0]
} }
self.uploadToWeixinServer(res.localIds[0], cardType)
}, },
}) created () {
// }else{ if (window.localStorage.openId) {
// if(self.attchmentId){ this.searchBill(window.localStorage.openId)
// this.previewImage();
// }
// }
},
// 预览图片
previewImage () {
hlsPopup.showBigPicture({
imgUrl: vm.cardUp,
imgUrl1: vm.cardUp1,
})
},
uploadToWeixinServer (localId, cardType) {
let self = this
wx.uploadImage({
localId: localId,
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
// res.serverId 返回图片的微信服务器端ID
console.log('上传图片后返回的信息', res)
self.serverId = res.serverId
self.uploadToserver(res.serverId, cardType)
},
})
},
uploadToserver (serverId, cardType) {
let vm = this
let url = process.env.rootPath + '/auth/upload/image/hls/from/wx'
let sourceType = ''
if (cardType == 0) {
sourceType = 'app_file_id_bank'
} else {
sourceType = 'app_file_id_card'
}
let param = {
openId: window.localStorage.openId,
mediaId: serverId,
sourceType: sourceType,
fileName: new Date().getTime() + '.jpg',
}
vm.hlsPopup.showLoading('请稍等')
vm.$post(url, param).then(function (res) {
vm.hlsPopup.hideLoading()
vm.attchmentId = res['attchmentId']
if (cardType == 0) {
vm.bankCardNumber = res['bank_card_number']
vm.cardUp =
process.env.rootPath +
'/app/fileViewSvc?attachment_id=' +
vm.attchmentId +
'&apiName=download&sysName=HCL_UPLOAD_FILE&access_token=' +
window.localStorage.access_token_rl
} else {
vm.bankAccName = res['姓名']
vm.certNo = res['公民身份号码']
vm.cardUp1 =
process.env.rootPath +
'/app/fileViewSvc?attachment_id=' +
vm.attchmentId +
'&apiName=download&sysName=HCL_UPLOAD_FILE&access_token=' +
window.localStorage.access_token_rl
}
})
},
// 下一步
next_step () {
let vm = this
if (
!vm.bankCardNumber ||
!vm.bankAccName ||
!vm.phoneNumber ||
!vm.certNo ||
!vm.authCode
) {
vm.hlsPopup.showLongCenter('必输字端不能为空！')
} else if (vm.hlsUtil.isCardID(vm.certNo)) {
vm.hlsPopup.showLongCenter('身份证号有误')
} else if (!vm.hlsUtil.phoneNumber(vm.phoneNumber)) {
vm.hlsPopup.showLongCenter('手机号码有误!')
} else {
// alert("验证通过");
let url = process.env.rootPath + '/china/pay/send/sign'
let param = {
signId: vm.signId,
auth_code: vm.authCode,
}
vm.hlsPopup.showLoading('请稍等')
vm.$post(url, param).then(function (res) {
vm.hlsPopup.hideLoading()
if (res.respCode == '0000') {
vm.hlsPopup.showSuccess(res.respMsg)
} else {
vm.hlsPopup.showLongCenter(res.respMsg)
}
})
}
},
// 键盘消失，页面回到顶部
goTop () {
setTimeout(function () {
var scrollHeight =
document.documentElement.scrollTop || document.body.scrollTop || 0
console.log(scrollHeight)
window.scrollTo(0, Math.max(scrollHeight, 0))
}, 100)
},
// 获取验证码
getSignCode () {
let vm = this
if (!vm.bankCardNumber) {
vm.hlsPopup.showLongCenter('请输入银行卡号！')
return
}
if (!vm.bankAccName) {
vm.hlsPopup.showLongCenter('请输入账户名称！')
return
}
if (!vm.certNo) {
vm.hlsPopup.showLongCenter('请输入证件号码！')
return
}
if (!vm.phoneNumber) {
vm.hlsPopup.showLongCenter('请输入手机号！')
return
}
if (!vm.showTimer) {
if (
hlsUtil.phoneNumber(vm.phoneNumber) ||
hlsUtil.phoneNumber86(vm.phoneNumber)
) {
vm.phoneNumberFlag = true
vm.getVerifiedCode()
} else {
hlsPopup.showLongCenter('手机号不存在，请重新输入！')
vm.phoneNumber = ''
}
} }
}, },
// 前端生成验证码发送请求到后端进行判断 mounted () { },
getVerifiedCode () { methods: {
searchBill (openId) {
let vm = this let vm = this
let url = process.env.rootPath + '/china/pay/send/sign/message' let value = vm.searchCondition.input
let param = { let url = process.env.basePath + 'getCmbConList'
card_no: vm.bankCardNumber, // http://sign.hitachics.com/core/r/api?sysName=HCL_UPLOAD_FILE&apiName=getCmbConList
acc_name: vm.bankAccName, let params = {
cert_no: vm.certNo, // openId: "oBdoRwAgUiwsQvNGYhBYks6JJLPE",
mobile_no: vm.phoneNumber, openId: openId,
} serialno: value,
}
// console.log("请求");
vm.hlsPopup.showLoading('请稍候') vm.hlsPopup.showLoading('请稍候')
vm.hlsHttp.post(url, param).then(function (res) { vm.hlsHttp.post(url, params).then(function (res) {
vm.signId = ''
vm.signStatus = 0
vm.hlsPopup.hideLoading() vm.hlsPopup.hideLoading()
if (res.respCode === '0000') { if (res.result.respCode === 'S') {
vm.signId = res.signId var dataInfo = JSON.parse(res.result.json)
vm.signStatus = 1 // console.log('请求成功', dataInfo.lists)
vm.hlsPopup.showSuccess('验证码已发送') vm.ListNum = dataInfo.lists.length
vm.showTimer = true vm.massages = dataInfo.lists
vm.text = '秒后失效'
let counter = setInterval(function () {
if (vm.timerCount > 0) {
vm.timerCount = vm.timerCount - 1
}
}, 1000)
setTimeout(function () {
vm.text = '获取验证码'
vm.showTimer = false
clearInterval(counter)
vm.showTimer = false
vm.timerCount = vm.timer / 1000
}, vm.timer)
} else { } else {
vm.hlsPopup.showLongCenter('验证码发送失败！' + res.respMsg) vm.hlsPopup.showLongCenter('查询合同列表失败' + res.result.respMsg)
} }
}) })
}, },
download (index) {
console.log('下载')
},
}, },
} }
</script> </script>
<style lang="less" type="text/less" scoped> <style lang="less" type="text/less" scoped>
@import "../../../styles/vue-1px.less"; .search {
display: flex;
//height: 50px;
background-color: #fff;
margin-top: 10px;
// margin-bottom: 10px;
position: relative;
.personalRegister { .searchInput {
font-size: 12px !important; margin-left: 5%;
.personalInfo { display: -webkit-flex;
width: 100%; border: 1px solid #cccccc;
height: 100% !important; /* 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%;
margin-left: 5%;
font-size: 13px;
height: 17px;
line-height: 17px;
border: none;
margin-top: 3px;
margin-bottom: 4px;
//padding-left: 11px;
} }
.uppic {
height: 100%;
width: 100%;
margin: 0 auto;
opacity: 0;
z-index: 1000;
position: absolute;
} }
.pic { }
// 账单卡片列表
.billList {
//账单卡片
width: 100%; width: 100%;
height: 100%; .article {
position: relative;
border: 1px solid #d0d0d0;
border-radius: 8px;
margin: 0 auto 12px;
height: 170px;
width: 98%;
.text {
margin-left: 50px;
}
.icon {
//左侧图标
position: relative;
float: left;
width: 50px;
padding-left: 5px;
top: 50%;
transform: translateY(-20px);
img {
width: 40px;
height: 40px;
}
}
.left-icon {
width: 40px;
margin-right: 0;
}
button {
position: absolute; position: absolute;
top: 5px;
right: 5px;
width: 75px;
height: 25px;
font-size: 14px;
background-color: #999999;
border: 2px solid #999999;
border-radius: 5px;
} }
} .more {
font-size: 32px;
// iPhoneX适配 position: absolute;
@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) { right: 5px;
.platform-ios { top: 50%;
#home { transform: translateY(-16px);
}
}
}
// iPhoneX Max适配
@media (device-width: 414px) and (device-height: 896px) {
.platform-ios {
.platform-ios {
#home {
} }
box-shadow: 3px 3px 3px 3px #b6b6b6;
} }
padding-bottom: 30px;
.text {
margin-left: 15px;
line-height: 16px;
} }
} }
</style> </style>
src/pages/applications/cmbPolyPay/cmbPolyPayDetail.vue 0 → 100644
View file @ dfad6bf5
<template>
<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="billInfo">
<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.characterid_n }}</li>
</ul>
</li>
</ul>
<!-- 总计还款金额 -->
<div v-if="bottomType == 0" class="bottomBox">
<div class="total">
<span>合计还款金额：{{ total }}</span>
<input id="payamount" type="number" placeholder="请输入支付金额" required oninvalid="setCustomValidity('请输入支付金额！');"
oninput="setCustomValidity('');">
</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>
<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>
</div>
</div>
</template>
<script>
export default {
data () {
return {
contractno: '', // 接受参数
bottomType: 0, // 控制显示哪个页面
checked: [], // 多选绑定数组
unchecked: [], // 记录每一个选项是否可选
total: 0, // 总计金额
ListNum: 0, // 总共有多少项
Lists: [], // 原始数据
payamount: 0,
showPayamount: 0,
recamt_id: '', // 获得的账单二维码
payPage: false, // 支付确认页面
tailNum: '0000', // 银行卡尾部号码
}
},
computed: {
},
created () {
// 当数据拿到之后给checked初始值；
var name = this.$route.query.contractno
console.log('传值', name)
// this.contractno = "L20RJ00313";
this.contractno = name
this.getData()
},
beforeMount () {
},
methods: {
getData () {
let vm = this
let url = process.env.basePath + 'getCmbConDetail'
let params = {
// L20RJ00313
'contractno': this.contractno,
}
// console.log("请求");
vm.$post(url, params).then(function (res) {
if (res.success == true) {
var dataInfo = JSON.parse(res.result.json)
// console.log('请求成功', dataInfo.lists)
vm.ListNum = dataInfo.lists.length
// 给checked初始值
for (let i = 0; i < vm.ListNum; i++) {
// console.log('给checked初始值');
vm.checked[i] = false
vm.unchecked[i] = dataInfo.lists[i].select_flag == 'N'
}
vm.Lists = dataInfo.lists
} else {
vm.hlsPopup.showLongCenter('获取合同还款计划失败，请联系管理员')
}
}).then(function () {
// 添加样式，区分不可选和可选的选项
vm.addClass()
})
// console.log(vm.Lists);
},
pay () {
let vm = this
let $input = document.getElementById('payamount')
// 点击支付之后显示二维码页面遮罩
if ($input.value <= this.total && $input.value != 0) {
// console.log($input.value);
this.payamount = $input.value
// 请求支付
let vm = this
let url = process.env.basePath + 'createLd037'
let params = {
'contractno': this.contractno,
'amount': this.payamount,
}
vm.$post(url, params).then(function (res) {
if (res.result.return_status == 'S') {
var dataInfo = res.result
vm.recamt_id = dataInfo.recamt_id
// console.log('获取支付id', vm.recamt_id)
vm.bottomType = 1
vm.showRecamt()
} else {
vm.hlsPopup.showLongCenter(res.result.return_message)
}
})
} 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 = '请输入支付金额'
}
},
showRecamt () {
let vm = this
let url = 'http://sign.hitachics.com/core/r/api/cmb/poly/get/qrcode'
console.log('支付id', this.recamt_id)
let params = {
'recamt_id': this.recamt_id,
}
console.log('params', params)
vm.$post(url, params).then(function (res) {
if (res.respCode == 'SUCCESS') {
let dataInfo = res.qrCode
console.log(res)
document.getElementById('bottomErm').children[1].src = dataInfo
} else {
vm.hlsPopup.showLongCenter(res.respMsg)
}
})
},
showPaypage () {
},
close () {
// 点击关闭二维码页面
this.bottomType = 0
},
onClickHander (index) {
if (this.Lists[index].select_flag == 'N') {
return
}
var num = this.total
// 计算
if (this.checked[index] == false) {
num += this.Lists[index].recdueamt_total
} else if (this.checked[index] == true) {
num -= this.Lists[index].recdueamt_total
}
// 保留两位
this.total = num
document.getElementById('payamount').value = num
console.log(index)
},
addClass () {
// console.log("add");
for (var i = 0; i < this.ListNum; i++) {
let $input = document.getElementById('box').children[i].children[0]
// console.log($input.className);
if (this.unchecked[i] == true) {
$input.className = 'uncheckbox'
} else {
$input.className = 'checkbox'
}
}
},
},
}
</script>
<style lang="less" scoped>
.box {
margin-bottom: 50%;
}
.items {
margin-top: 10px;
display: flex;
height: 100px;
width: 100%;
justify-content: space-between;
font-size: 12px;
input {
// visibility: hidden;
position: relative;
top: 50%;
left: 3%;
transform: translateY(-5px);
}
.billInfo {
margin-right: 3%;
width: 87%;
border: 2px solid #fa9494;
border-radius: 8px;
li {
padding-left: 8px;
padding-top: 15px;
float: left;
width: 50%;
span {
font-weight: 700;
}
}
}
}
input[type="checkbox"] {
cursor: pointer;
position: relative;
width: 1rem;
height: 1rem;
font-size: 0.9rem;
visibility: hidden;
}
.checkbox[type="checkbox"]:checked::after {
height: 18px;
line-height: 15px;
content: "✓";
color: rgb(255, 255, 255);
background-color: #7aae3b;
border: 2px solid #7aae3b;
font-size: 15px;
font-weight: bold;
}
.checkbox[type="checkbox"]::after {
position: absolute;
background-color: #ffffff;
border: 2px solid #dab2b2;
width: 18px;
height: 18px;
display: inline-block;
visibility: visible;
text-align: center;
content: " ";
border-radius: 50%;
}
.uncheckbox[type="checkbox"]::after {
position: absolute;
background-color: #bbbbbb;
border: 2px solid #676767;
width: 18px;
height: 18px;
display: inline-block;
visibility: visible;
text-align: center;
content: " ";
border-radius: 50%;
}
.bottomBox {
position: absolute;
bottom: 0px;
width: 100%;
height: 18%;
background-color: #fffffe;
border-top: 2px solid #7aae3b;
.total {
font-size: 12px;
color: rgb(180, 0, 0);
width: 80%;
height: 20%;
margin: 20px auto;
display: flex;
justify-content: space-between;
span {
height: 25px;
line-height: 25px;
text-align: center;
}
input {
position: relative;
right: 0px;
width: 50%;
border: 1px solid #dab2b2;
border-radius: 5px;
padding-left: 6%;
}
}
button {
position: relative;
width: 20%;
height: 25%;
left: 50%;
transform: translateX(-50%);
color: #ffffff;
border-radius: 5px;
border: 1px solid #dab2b2;
background-color: rgb(0, 200, 0);
}
}
.ermPage {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
.topBlack {
width: 100%;
height: 70%;
background-color: rgb(140, 140, 140);
opacity: 0.7;
}
.bottomErm {
position: absolute;
bottom: 0px;
width: 100%;
height: 40%;
background-color: #ffffff;
border: 1px solid #dab2b2;
border-top-left-radius: 18px;
border-top-right-radius: 18px;
p {
font-weight: 700;
margin-top: 10px;
padding-right: 30px;
font-size: 14px;
text-align: center;
}
.close {
position: relative;
float: left;
left: 90%;
padding: 0px;
color: #fa9494;
width: 24px;
height: 24px;
border-radius: 50%;
border: 3px solid #dab2b2;
font-size: 14px;
p {
position: relative;
top: 0px;
left: 0px;
width: 18px;
height: 18px;
margin-top: -3px;
padding: 0px;
line-height: 18px;
text-align: center;
}
}
img {
position: absolute;
width: 40%;
height: 55%;
top: 20%;
left: 50%;
transform: translateX(-50%);
}
// .load{
// // ../../../assets\image
// background-image: url(../../../assets\image);
// }
// .erm {
// background-image: none;
// }
}
}
.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>
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