<!DOCTYPE html>
<html class="bg-white">
<head>
<meta charset="utf-8">
<!--此行代码为禁止苹果手机自动识别电话号码-->
<meta name="format-detection" content="telephone=no">
<meta name="viewport"
content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>{{$shop_info['shop_name']}}支付</title>
<link rel="stylesheet" type="text/css" href="{{asset('wap/css/weui.min.css')}}"/>
<link rel="stylesheet" type="text/css" href="{{asset('wap/css/common.css')}}"/>
<link rel="stylesheet" type="text/css" href="{{asset('wap/css/pay-page.css')}}"/>
<script src="{{asset('wap/js/jquery-2.1.4.js')}}"></script>
<script src="{{asset('wap/js/vue.js')}}?a=1"></script>
<script src="{{asset('wap/js/common.js')}}?a=1"></script>
</head>
<body>
<div id="app">
<!-- 导航栏 -->
<div class="nav-bar" v-if="false">
<div>
<img src="{{asset('wap/images/49@2x.png')}}" class="nav-img">
</div>
<div class="nav-title">{{$shop_info['shop_name']}}</div>
<div>
<img src="{{asset('wap/images/117@2x.png')}}" class="nav-img">
</div>
</div>
<!-- 支付详情 -->
<div class="pay-detail">
<div class="pay-layout">
<div class="spend-total">消费总额</div>
<div class="input-money">
<span>￥</span>
<form id="zfb_pay" method="post" action="{{route('pay.zfb_pay')}}">
<input type="number" v-model="pay_money" name="pay_money" autofocus="autofocus" mix="0.01">
<input type="hidden" name="shop_id" value="{{$shop_info['id']}}"></input>
</form>
</div>
<div class="prompt">可询问工作人员应缴费用总额</div>
</div>
</div>
<!-- button -->
<div class="button-layout" @click="creatZfbPay">
<div class="button">
<span>支付</span>
</div>
</div>
<!--BEGIN toast-->
<div id="toast" style="display: none;">
<div class="weui-mask_transparent"></div>
<div class="weui-toast">
<i class="weui-icon-success-no-circle weui-icon_toast"></i>
<p class="weui-toast__content">@{{success_msg}}</p>
</div>
</div>
<!--BEGIN toast-->
<div id="textMoreToast" v-show="error_show">
<div class="weui-mask_transparent"></div>
<div class="weui-toast weui-toast_text-more">
<i class="weui-icon-warn weui-icon_toast"></i>
<p class="weui-toast__content">@{{error_msg}}</p>
</div>
</div>
</div>
<script>
$(function () {
var vm = new Vue({
el: '#app',
data: {
pay_money: '',
success_msg: '',
error_msg: '',
error_show: false,
success_show: false,
is_pay: false,
is_ajax: false,
},
methods: {
'errorMgs': function (error_msg) {
this.error_msg = error_msg;
this.error_show = true;
setTimeout(function () {
vm.error_show = false;
}, 2000)
},
'successMsg': function (success_msg) {
this.success_msg = success_msg;
this.success_show = true;
setTimeout(function () {
vm.success_show = false;
}, 2000)
},
'creatZfbPay': function () {
console.log('---------------------')
if (this.is_ajax) {
return false;
}
this.is_ajax = true;
$('#zfb_pay').submit();
}
},
watch: {
'pay_money': function () {
if (this.pay_money * 1 == 0) {
this.is_pay = false;
return false;
}
if (this.pay_money != '') {
if (isNaN(this.pay_money) || this.pay_money * 1 < 0) {
this.is_pay = false;
this.pay_money = '';
this.errorMgs('支付金额不合法');
return false;
}
if (this.pay_money * 1 < 0.01) {
this.is_pay = false;
this.errorMgs('最低支付金额0.01元');
return false;
}
}
this.is_pay = true;
}
},
created: function () {
console.log('------------------')
}
});
})
</script>
</body>
</html>