<!--
|
* @Author: 小明丶
|
* @Date: 2019-08-30 15:34:12
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-04-07 17:26:01
|
* @Description:
|
-->
|
<template>
|
<!-- 商户收款：生成二维码页面 -->
|
<div class="calcmoney-box h-100-g">
|
<van-nav-bar title="商户收款" left-text="返回" left-arrow @click-left="onClickLeft" style="line-height: 43px;">
|
<i class="iconfont iconzuojiantou" slot="left" style="font-size: 25px;"></i>
|
<div slot="right" class="slot-right font-style" @click="goList">明细</div>
|
</van-nav-bar>
|
<div class="pay-box">
|
<p>收款金额</p>
|
<span class="tag">￥</span>
|
<input v-model="price" autofocus readonly type="text" class="input-money" placeholder="请输入收款金额" >
|
<p class="icon-box">
|
<span>支持方式：</span>
|
<i class="icon iconfont scene_Staging-zhifubao" style="font-size:25px;color:#06b4fd;"></i>
|
</p>
|
</div>
|
<div class="calc">
|
<ul class="number-box">
|
<li class="number-item" v-for="(item, index) in 9" :key="index" @click="numberClick(item)">{{item}}</li>
|
<li class="number-item" @click="numberClick('.')">.</li>
|
<li class="number-item" @click="numberClick(0)">0</li>
|
<li class="number-item"></li>
|
</ul>
|
<div class="handler-box">
|
<div class="icon-delete" @click="deleteNumber">
|
<i class="icon iconfont scene_Staging-shanchu" style="font-size:35px;"></i>
|
</div>
|
<div class="icon-submit" @click="submit">
|
收款
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'facepay_calc',
|
data() {
|
return {
|
price: ''
|
}
|
},
|
methods: {
|
onClickLeft() {
|
this.$router.go(-1);
|
},
|
goList(){
|
let {typeId,prodId} = this.$route.query;
|
this.$router.push(`/order/dmf?typeId=${typeId}&prodId=${prodId}`)
|
},
|
// 删除price最后一位
|
deleteNumber() {
|
this.price = this.price.slice(0, this.price.length - 1)
|
},
|
//提交生成二维码
|
submit() {
|
if(this.price=='0' || this.price=='0.'){
|
this.$notify_success('收款金额不能为0！')
|
return
|
}
|
if (!this.price.length) {
|
this.$notify_success('请输入收款金额!')
|
return
|
}else{
|
this.$api.facepay_create({payAmt:+this.price,term:0,zfbVersion:this.$route.query.zfbVersion}).then(res=>{
|
let url = res.body.payQrCodeUrl;
|
let id = res.body.orderId;
|
this.$router.push(`/facepay/code?url=${url}&id=${id}`)
|
})
|
}
|
},
|
//数字的逻辑输入判断
|
numberClick(v) {
|
let index = this.price.indexOf('.');
|
if (v !== '.') {
|
if (this.price.length === 8) {
|
return
|
}
|
if (index > -1 && this.price.slice(index + 1, this.price.length).length == 2) {
|
// 最多输入两位小数
|
this.$notify_success('最多输入两位小数!')
|
return
|
}
|
if(this.price.length===1 && this.price ==='0'){
|
return
|
}
|
} else {
|
if (!this.price.length) {
|
return
|
}
|
// if (this.price.slice(0, 1) !== '0') {
|
// return
|
// }
|
if (index > -1) {
|
return
|
}
|
}
|
this.price += v;
|
}
|
}
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
|
.calcmoney-box{
|
//padding-top: 45px;
|
background-color: #f1f1f1;
|
.font-style{
|
color: #333;
|
font-size:16px;
|
}
|
.pay-box{
|
&{
|
background-color: #fff;
|
width: 96%;
|
height: 210px;
|
margin: auto;
|
margin-top: 15px;
|
box-sizing: border-box;
|
padding: 30px 15px;
|
position: relative;
|
border-radius: 5px;
|
}
|
p:nth-of-type(1){
|
font-size: 14px;
|
color: #333;
|
font-weight: 550;
|
}
|
.tag {
|
position: absolute;
|
left: 4%;
|
top: 66px;
|
font-size: 27px;
|
}
|
}
|
input::-webkit-input-placeholder { /* WebKit browsers 适配谷歌 */
|
font-size: 20px;
|
color:#AFAFAF;
|
}
|
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 适配火狐 */
|
font-size: 20px;
|
color:#AFAFAF;
|
}
|
input::-moz-placeholder { /* Mozilla Firefox 19+ 适配火狐 */
|
font-size: 20px;
|
color:#AFAFAF;
|
}
|
}
|
|
.input-box {
|
padding: 0 15px;
|
color: #bb8b52;
|
padding: 30px 25px;
|
position: relative;
|
|
.tag {
|
position: absolute;
|
left: 40px;
|
top: 50%;
|
transform: translateY(-50%);
|
font-size: 24px;
|
}
|
}
|
|
.icon-box {
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
color: #AFAFAF;
|
margin-top:20px;
|
}
|
|
.input-money {
|
//color: #bfa073;
|
height: 55px;
|
line-height: 55px;
|
width: 100%;
|
text-align: left;
|
padding-left: 35px;
|
padding-top:14px;
|
box-sizing: border-box;
|
border: 0;
|
border-bottom: 1px solid #f1f1f1;
|
outline: none;
|
font-size: 22px;
|
}
|
|
.calc {
|
position: fixed;
|
bottom:0;
|
width: 100%;
|
font-size: 24px;
|
text-align: center;
|
background-color: #fff;
|
.icon-delete {
|
height: 140px;
|
line-height: 140px;
|
}
|
|
.icon-submit {
|
height: 140px;
|
line-height: 140px;
|
color: #fff;
|
font-size: 16px;
|
font-weight: 500;
|
background-color: #896FDA;
|
}
|
|
&::after {
|
content: "";
|
clear: both;
|
display: block;
|
}
|
}
|
|
.handler-box {
|
width: 25%;
|
float: left;
|
}
|
|
.number-box {
|
width: 75%;
|
float: left;
|
|
.number-item {
|
width: 33.3333%;
|
float: left;
|
height: 70px;
|
line-height: 70px;
|
box-sizing: border-box;
|
border:1px solid #f1f1f1;
|
}
|
}
|
|
</style>
|
