consume.html
4.79 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
{php define(MUI, true);}
{template 'common/header'}
<style>
ul,li {padding:0; margin:0; border:0;}
body{background:#d2e6e9; padding-bottom:63px;}
.btn-group-top-box{padding:10px 0; border-bottom:1px solid #a5d7de; font-family:Helvetica, Arial, sans-serif; text-align:center; width:100%;}
.btn-group-top{overflow:hidden;}
.btn-group-top .btn{ -webkit-box-shadow:none; box-shadow:none; border-color:#5ac5d4; color:#5ac5d4; background:#d1e5e9; padding:6px;}
.btn-group-top .btn:hover{color:#FFF; background:#addbe1;}
.btn-group-top .btn.active{color:#FFF; background:#5ac5d4;}
.btn.use{background:#56c6d6; color:#FFF; border:0; border-radius:4px;}
.card-container{width:100%;max-width:640px;margin:0px auto;border-bottom:1px solid #a5d7de;}
.card-list{width:100%;margin:10px 0;padding:0 13px}
.card-list .top{height:60px;line-height:60px;background:#a9d92d url(./resource/images/card_tpl.png) repeat-x 0 bottom;border-top-left-radius:5px;border-top-right-radius:5px;}
.card-list .top .img{float:left;padding:0 10px}
.card-list .top .img img{width:40px;height:40px;border-radius:35px;}
.card-list .top .title{float:left;color:#FFF;font-weight:bold;font-size:16px;letter-spacing:1px}
.card-list .bottom{color:#b7b7b7;height:30px;line-height:30px;background:#FFF;padding:0 6px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;}
.card-list .bottom .left-info{float:left;width:50%;overflow:hidden;}
.card-list .bottom .right-info{float:right;width:50%;overflow:hidden;text-align:right;}
.no-info{width:100%;padding:0 20px;text-align:center;height:40px;line-height:40px;color:#5ac5d4}
.page{width:100%;margin:0 auto;text-align:center;}
.page .pagination{padding:0;margin:0;}
.page .pagination a{color:#5ac5d4;background:#d2e6e9;border:1px solid #a5d7de;}
.page .pagination a:hover{color:#FFF;background:#addbe1;border:1px solid #a5d7de;}
.card-info .card-top{ position:relative; width:100%; color:#fff; background-color:#a9d92d; padding:21px 12px 12px;}
.card-top .logo img{width:38px; height:38px; border-radius:100%; margin-right:10px;}
.card-top .title{font-size:24px; margin-bottom:10px;}
.card-top .sub-title{margin-bottom:10px;}
.card-top .border-img{position: absolute; bottom: -1px; left: 0; width: 100%; height: 5px; background: url(./resource/images/card_tpl.png) repeat-x;}
.card-bottom{background:#fff; margin-bottom:15px; text-align:center; padding:15px 0;}
.card-bottom .bar-code img{width:100%; height:auto; margin-bottom:5px;}
.card-bottom .tips{margin:10px 0;}
.wx-card .operate{background:#fff; padding:15px 10px;}
.wx-card .operate input{margin-bottom:5px;}
</style>
<form action="" method="post" id="form1">
<input type="hidden" name="token" value="{$_W['token']}"/>
<input type="hidden" name="code" value="{$code['code']}"/>
<div class="wx-card">
<div class="card-info">
<div class="card-top" style="background: {$colors[$card['color']]}">
<div class="logo">
<img src="{$card['logo_url']}" alt="" class="img-circle">
<span>{$card['brand_name']}</span>
</div>
<div class="title mui-text-center">{$card['title']}</div>
<div class="sub-title mui-text-center">{$card['sub_title']}</div>
<div class="date mui-text-center">
{if $card['date_info']['time_type'] == 1}
有效期:{$card['date_info']['time_limit_start']}~{$card['date_info']['time_limit_end']}
{else}
有效期:领取后{$card['date_info']['deadline']}天后生效,{$card['date_info']['limit']}天有效
{/if}
</div>
<div class="border-img"></div>
</div>
<div class="card-bottom">
{if $error_code == 1}
<div class="text-muted">code码错误</div>
{else}
<div class="qrcode-block" data-url="{php echo murl('entry', array('m' => 'we7_coupon', 'do' => 'clerk', 'op' => 'cardconsume', 'code' => $code), true, true);}" style="margin-top:20px"></div>
<div class="text-muted">店员可使用微信扫描上面二维码进行核销</div>
<div class="text-muted">code码：{$code}</div>
{/if}
<div class="tips hide">{$card['notice']}</div>
</div>
</div>
<div class="operate">
{if $error_code == 1}
<a class="btn btn-danger btn-block" disabled>code码错误</a>
{else}
<input type="password" id="password" name="password" class="form-control" placeholder="请输入店员密码" style="margin-bottom:20px">
<input type="submit" class="btn btn-success btn-block" name="submit" value="确定核销"/>
{/if}
</div>
</div>
</form>
<script>
require(['jquery.qrcode'], function(){
var url = $('.qrcode-block').data('url');
$('.qrcode-block').html('').qrcode({
render: 'canvas',
width: 150,
height: 150,
text: url
});
});
require(['util'], function(u){
$('#form1').submit(function(){
if(!$.trim($('#password').val())) {
u.message('请输入店员密码');
return false;
}
return true;
});
});
</script>
{template 'common/footer'}