300 行
9.3 KiB
HTML
可执行文件
300 行
9.3 KiB
HTML
可执行文件
<!DOCTYPE html>
|
|
<html>
|
|
<!--[1.1.1]-->
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
|
<title>快速付款</title>
|
|
<link rel="stylesheet" type="text/css" href="__PUBLIC__/vip/css/reset.css"/>
|
|
<style>
|
|
html, body {
|
|
background-color: #6FA1FB;
|
|
color: #333;
|
|
}
|
|
|
|
.content {
|
|
width: 90vw;
|
|
padding: 10vw 0 12vw;
|
|
background-color: white;
|
|
border-radius: 2vw;
|
|
box-sizing: border-box;
|
|
margin: 10vw auto;
|
|
}
|
|
|
|
.title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.title > span {
|
|
margin: 0 6px;
|
|
}
|
|
|
|
.list {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
justify-content: space-between;
|
|
margin: 10vw 0;
|
|
}
|
|
|
|
.list-con {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
font-size: 16px;
|
|
line-height: 16px;
|
|
position: relative;
|
|
}
|
|
|
|
.list-con:nth-child(1):after, .list-con:nth-child(2):after {
|
|
position: absolute;
|
|
content: '';
|
|
width: 1px;
|
|
height: 25px;
|
|
background-color: #e1e1e1;
|
|
right: 0;
|
|
top: 6px;
|
|
}
|
|
|
|
.list-con > span:nth-child(1) {
|
|
color: #6FA1FB;
|
|
font-weight: bold;
|
|
padding-bottom: 10px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.list-con > span:nth-child(2) {
|
|
font-size: 15px;
|
|
color: #999;
|
|
}
|
|
|
|
.code-con {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0 5vw 6vw;
|
|
}
|
|
|
|
.code-num {
|
|
text-align: center;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
height: 20px;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.code-num > span {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.code-1 {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.code-2 {
|
|
line-height: 24px;
|
|
font-size: 18px;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.bottom {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #999;
|
|
font-size: 13px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.bottom > img {
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-right: 5px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.animation {
|
|
position: relative;
|
|
animation: ani 1s infinite forwards linear;
|
|
transform: rotateZ(0deg);
|
|
}
|
|
|
|
@-webkit-keyframes ani {
|
|
0% {
|
|
transform: rotateZ(60deg);
|
|
}
|
|
33% {
|
|
transform: rotateZ(150deg);
|
|
}
|
|
50% {
|
|
transform: rotateZ(220deg);
|
|
}
|
|
80% {
|
|
transform: rotateZ(300deg);
|
|
}
|
|
100% {
|
|
transform: rotateZ(360deg);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="content" id="app">
|
|
<div class="title">
|
|
<span>{$vip['card_name']}:</span>
|
|
<span>{$vip['phone']}</span>
|
|
</div>
|
|
<div class="list">
|
|
<div class="list-con" @click="toIntegral">
|
|
<span>{$vip['integral']}</span>
|
|
<span>积分</span>
|
|
</div>
|
|
<div class="list-con" @click="toCoupon">
|
|
<span>{$vip['coupon_num']}</span>
|
|
<span>优惠券</span>
|
|
</div>
|
|
<div class="list-con" @click="toRecharge">
|
|
<span>{$vip['balance']}</span>
|
|
<span>钱包·充值</span>
|
|
</div>
|
|
</div>
|
|
<div class="code-con">
|
|
<div class="code-num" @click="doShowCode">
|
|
<template v-if="!showCode">
|
|
<span class="code-1" v-text="show_code"></span>
|
|
<span class="code-2" v-text="hide_code"></span>
|
|
<span>查看数字</span>
|
|
</template>
|
|
<span class="code-1" v-else v-text="code"></span>
|
|
</div>
|
|
<canvas id="code"></canvas>
|
|
<div style="margin: 0 auto" v-qrcode="{'value':oldCode}"></div>
|
|
</div>
|
|
<div class="bottom">
|
|
<img src="__PUBLIC__/vip/images/refresh.png" :class="isRefresh?'animation':''" @click="refresh">
|
|
<span>会员码每60秒自动更新，请在店内消费时使用</span>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script type="text/javascript" src="__PUBLIC__/vip/js/jquery.min.js" charset="utf-8"></script>
|
|
<script type="text/javascript" src="__PUBLIC__/vip/js/window-reload.js"></script>
|
|
<script type="text/javascript" src="__PUBLIC__/js/tips.js"></script>
|
|
<script type="text/javascript" src="__PUBLIC__/vue/js/vue2.5.16.js"></script>
|
|
<script type="text/javascript" src="__PUBLIC__/receipt/Qrcode.js"></script>
|
|
<script type="text/javascript" src="__PUBLIC__/receipt/JsBarcode.js"></script>
|
|
<script type="text/javascript">
|
|
Vue.directive('qrcode',
|
|
function (el, binding) {
|
|
el.innerHTML = "";
|
|
var text = binding.value.value;
|
|
if (text) {
|
|
new QRCode(el, {
|
|
text: text,
|
|
width: 120,
|
|
height: 120,
|
|
colorDark: "#000000",
|
|
colorLight: "#ffffff",
|
|
correctLevel: QRCode.CorrectLevel.H
|
|
});
|
|
}
|
|
})
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data: function () {
|
|
return {
|
|
show_code: '',
|
|
hide_code: ' **** **** **** **',
|
|
showCode: false,
|
|
code: '',
|
|
isRefresh: false,
|
|
timeOut: 0,
|
|
timer: null,
|
|
canClick: true,
|
|
oldCode:''
|
|
}
|
|
},
|
|
methods: {
|
|
doShowCode: function () {
|
|
this.showCode = !this.showCode;
|
|
},
|
|
refresh: function () {
|
|
this.isRefresh = true;
|
|
this.getCode(function () {
|
|
this.isRefresh = false;
|
|
}.bind(this))
|
|
},
|
|
toIntegral: function () {
|
|
location.href = "{:U('Integral/index')}";
|
|
},
|
|
toCoupon: function () {
|
|
location.href = "{:U('Coupon/index')}";
|
|
},
|
|
toRecharge: function () {
|
|
location.href = "/index.php/Vip/Onlinepay/index";
|
|
},
|
|
getCode: function (fn) {
|
|
if(this.canClick){
|
|
var that = this;
|
|
this.canClick = false;
|
|
$.post("{:U('getCode')}", {
|
|
isRefresh: that.isRefresh ? 1 : 0
|
|
}, function (res) {
|
|
if (res.status == 1) {
|
|
that.oldCode = res.code;
|
|
that.code = res.code.substr(0, 4) + ' ' + res.code.substr(4, 4) + ' ' + res.code.substr(8, 4) + ' ' + res.code.substr(12, 4) + ' ' + res.code.substr(16, 2);
|
|
that.show_code = res.code.substr(0, 4);
|
|
that.timeOut = res.time;
|
|
$("#code").JsBarcode(res.code, {
|
|
format: "CODE128",
|
|
displayValue: false,
|
|
height: 80,
|
|
background: '#fff',
|
|
lineColor: '#111'
|
|
});
|
|
that.$nextTick(function () {
|
|
that.canClick = true;
|
|
that.timerFn();
|
|
})
|
|
if (typeof fn == "function") {
|
|
fn();
|
|
}
|
|
} else {
|
|
if (typeof fn == "function") {
|
|
fn();
|
|
}
|
|
alertMsg(data.msg, 1000);
|
|
}
|
|
})
|
|
}
|
|
|
|
},
|
|
timerFn: function () {
|
|
clearInterval(this.timer)
|
|
if (this.timeOut > 0) {
|
|
setTimeout(function () {
|
|
this.timer = setInterval(function () {
|
|
this.getCode();
|
|
}.bind(this), 60000)
|
|
}.bind(this), this.timeOut)
|
|
} else {
|
|
this.timer = setInterval(function () {
|
|
this.getCode();
|
|
}.bind(this), 60000)
|
|
}
|
|
},
|
|
},
|
|
created: function () {
|
|
this.getCode();
|
|
}
|
|
})
|
|
</script>
|
|
</html>
|