<!--
|
* @Author: 小明丶
|
* @Date: 2019-08-22 16:55:53
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2019-08-27 13:50:17
|
* @Description:
|
-->
|
<template>
|
<div class="facepay">
|
|
<v-navbar title="扫码收款" @right-click="$router.push('/order/dmf')" fixed>
|
<div slot="right" style="color: #896EDB">明细</div>
|
</v-navbar>
|
|
|
<div class="input-box">
|
<p class="tag">￥</p>
|
<input v-model="price" autofocus readonly type="text" class="input-money" placeholder="输入收款金额" >
|
</div>
|
<p class="icon-box">
|
<span>支持方式：</span>
|
|
<svg class="icon" aria-hidden="true">
|
<use xlink:href="#iconshoujifenqi"></use>
|
</svg>
|
|
</p>
|
<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"></li>
|
<li class="number-item" @click="numberClick(0)">0</li>
|
<li class="number-item" @click="numberClick('.')">.</li>
|
</ul>
|
<div class="handler-box">
|
<div class="icon-delete" @click="deleteNumber">
|
<svg class="icon" aria-hidden="true">
|
<use xlink:href="#iconcha"></use>
|
</svg>
|
</div>
|
<div class="icon-submit" @click="submit">
|
收款
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import {Notify} from 'vant';
|
export default {
|
name: "facepay",
|
data() {
|
return {
|
price: ''
|
}
|
},
|
methods: {
|
|
// 删除price最后一位
|
deleteNumber() {
|
this.price = this.price.slice(0, this.price.length - 1)
|
},
|
//提交生成二维码
|
submit() {
|
if(this.price=='0' || this.price=='0.'){
|
Notify({
|
message: '收款金额不能为0！',
|
});
|
return
|
}
|
if (!this.price.length) {
|
Notify({
|
message: '请输入收款金额！',
|
});
|
return
|
}else{
|
|
|
// 点击收款逻辑
|
this.$router.push('/product/facepay-qrcode');
|
|
|
// this.$api.facepay_create({payAmt:+this.price,term:0}).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.$tool.toast('最多输入两位小数!')
|
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>
|
.facepay{
|
padding-top: 44px;
|
background-color: @c-f5;
|
min-height: calc(100vh - 44px);
|
|
|
.input-box {
|
color: @c-default;
|
padding: 30px 25px;
|
position: relative;
|
margin-top: 15px;
|
|
.tag {
|
position: absolute;
|
left: 40px;
|
top: 50%;
|
transform: translateY(-50%);
|
font-size: 24px;
|
}
|
}
|
|
.icon-box {
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
padding-left: 30px;
|
color: @c-default;
|
.icon{
|
width: 35px;
|
height: 35px;
|
}
|
}
|
|
.input-money {
|
color: @c-default;
|
height: 55px;
|
line-height: 55px;
|
width: 100%;
|
text-align: right;
|
padding-right: 15px;
|
box-sizing: border-box;
|
border: 2px solid @c-default;
|
outline: none;
|
font-size: 18px;
|
}
|
|
.calc {
|
position: fixed;
|
bottom:0;
|
width: 100%;
|
font-size: 24px;
|
text-align: center;
|
background-color: #fff;
|
.icon-delete {
|
height: 70px;
|
.flex(center,center);
|
.icon{
|
width: 40px;
|
height: 40px;
|
}
|
}
|
|
.icon-submit {
|
height: 210px;
|
line-height: 210px;
|
color: #fff;
|
background-color: @c-default;
|
}
|
|
&::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;
|
}
|
}
|
|
|
}
|
</style>
|
