display.html
6.11 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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
{php load()->func('tpl')}
<style>
.wxcard{clear: both;margin-bottom: 20px; position: relative;}
.wxcard .panel-body .panel-wxcard {position:relative;}
.wxcard .panel-body .panel-wxcard .wxcard-content{width:100%; height:90px; border-radius:5px; border-bottom-left-radius:0; border-bottom-right-radius:0; border:1px solid #e7e7eb; border-bottom:0; position:relative; background-color:#A9D92C; color:#fff; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.wxcard .panel-body .panel-wxcard .wxcard-content img{width:60px; height:60px; position:absolute; top:15px; left:15px;}
.wxcard .panel-body .panel-wxcard .wxcard-content .title{position:absolute; left:90px; top:30px; font-size:19px}
.wxcard .panel-body .panel-wxcard .wxcard-footer{background-color:#fff; height:35px; line-height:35px; border:1px solid #e7e7eb; padding:0 10px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;}
.wxcard .panel-body .mask{position:absolute; width:100%; height:100%; line-height:104px; left:0; top:0; z-index:999; background-color:rgba(229, 229, 229, 0.85) !important; text-align:center; display:none;}
.wxcard .panel-body:hover .mask{display:block}
.wxcard .del,.panel .no{position: absolute; top:-10px; width:20px; height:20px; color:#fff; background:rgba(0,0,0,0.3); text-align:center; line-height:20px; cursor:pointer; border-radius:100%;}
.wxcard .del{right:-10px;}
.wxcard .no{left:-10px;background: #3071a9}
.wxcard .del:hover{background:rgba(0,0,0,0.7);}
.wxcard .panel:last-child{margin-bottom: 0;}
</style>
<div class="alert alert-info" style="margin-top:-20px">
<i class="fa fa-info-circle"></i> 您可以添加多个回复卡券，系统将随机选择一个卡券推送给粉丝<br>
<i class="fa fa-info-circle"></i> 设置为回复的卡券要保证是可用的卡券.卡券的库存应该足够大,使用期限应该有效<br>
</div>
<input type="hidden" name="replies" value="">
<div class="panel panel-default clearfix">
<div class="panel-heading">回复内容</div>
<div class="panel-body">
<div class="row clearfix">
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="panel panel-default">
<div class="panel-body">
<div class="form-group" style="margin:-15px">
<label class="col-xs-12 control-label" style="text-align:left; padding-bottom:7px">卡券发送成功提示语</label>
<div class="col-xs-12">
<textarea class="form-control" name="success">{$replies[0]['success']}</textarea>
</div>
</div>
<div class="form-group" style="margin:-15px">
<label class="col-xs-12 control-label" style="text-align:left; padding-bottom:7px">卡券发送失败提示语</label>
<div class="col-xs-12">
<textarea class="form-control" name="error">{$replies[0]['error']}</textarea>
</div>
</div>
</div>
</div>
<div class="panel panel-default wxcard" ng-repeat="item in context.items">
<div class="panel-body">
<div class="panel-wxcard">
<div class="wxcard-content" ng-style="{'background-color' : item.color}">
<img src="" ng-src="{{item.logo_url}}" class="img-circle">
<div class="title">{{item.title}}</div>
</div>
<div class="wxcard-footer clearfix">
<div class="pull-right text-muted hide">2015-12-5</div>
<div>{{item.brand_name}}</div>
</div>
<div class="mask">
<a href="javascript:;" ng-click="context.selectCoupon(item)"><i class="fa fa-book"></i> 选择微信卡券</a>
</div>
</div>
</div>
<div class="no">{{$index + 1}}</div>
<div class="del" ng-click="context.removeItem(item);"><i class="fa fa-times"></i></div>
</div>
<div class="btn btn-primary" ng-click="context.addItem()" style="margin-bottom:20px">添加一组回复</div>
</div>
</div>
</div>
</div>
<script>
window.initReplyController = function($scope, $http) {
$scope.context = {};
$scope.context.items = {php echo json_encode($replies)};
if(!$.isArray($scope.context.items)) {
$scope.context.items = [];
}
$scope.context.addItem = function(){
$scope.context.items.push(
{
id: '',
title: '',
logo_url: '',
color: '',
brand_name: ''
}
);
$scope.context.activeIndex = $scope.context.items.length - 1;
$scope.context.activeItem = $scope.context.items[$scope.context.activeIndex];
}
if($scope.context.items.length == 0) {
$scope.context.addItem();
}
$scope.context.activeIndex = 0;
$scope.context.activeItem = $scope.context.items[$scope.context.activeIndex];
$scope.context.removeItem = function(item){
if($scope.context.items.length == 1) {
util.message('至少有一组回复内容');
return false;
}
$scope.context.items = _.without($scope.context.items, item);
$scope.context.activeIndex = 0;
$scope.context.activeItem = $scope.context.items[$scope.context.activeIndex];
$scope.$digest();
}
$scope.context.selectCoupon = function(item) {
var index = $.inArray(item, $scope.context.items);
if(index == -1) return false;
$scope.context.activeIndex = index;
$scope.context.activeItem = $scope.context.items[$scope.context.activeIndex];
var option = {
'ignore' : {
'local' : true
},
'multiple' : false
};
util.coupon(function(coupon){
$scope.context.activeItem.card_id = coupon.card_id;
$scope.context.activeItem.cid = coupon.id;
$scope.context.activeItem.title = coupon.title;
$scope.context.activeItem.logo_url = coupon.logo_url;
$scope.context.activeItem.brand_name = coupon.brand_name;
$scope.$digest();
}, option);
};
};
window.validateReplyForm = function(form, $, _, util, $scope) {
if($scope.context.items.length == 0) {
util.message('没有回复内容', '', 'error');
return false;
}
var error = {empty: false, message: ''};
angular.forEach($scope.context.items, function(v, k){
if($.trim(v.cid) == '' || $.trim(v.card_id) == '') {
this.empty = true;
}
}, error);
if(error.empty) {
util.message('存在没有设置 "卡券" 的回复条目');
return false;
}
var val = angular.toJson($scope.context.items);
$(':hidden[name=replies]').val(val);
return true;
};
</script>