-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcault.html
210 lines (199 loc) · 7.87 KB
/
cault.html
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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单序列、规则分离下的购物车表单计算</title>
<style>
.box {
width: 960px;
margin-left: auto;
margin-right: auto;
font-size: 12px;
}
.gtlt {
font-family: simsun;
letter-spacing: -.5em;
*zoom: 1;
}
.table_caption {
margin-top: .5em;
margin-bottom: .5em;
padding-left: 10px;
font-size: 14px;
font-family: '微软雅黑';
color: #666;
}
.table {
text-align: center;
}
.table th {
padding: 5px 20px;
border-bottom: 1px solid #ccc;
background-color: #eee;
}
.table td {
padding: 20px;
border-bottom: 1px solid #ddd;
}
.cho_desc,.cho_asc{display:inline-block; width:16px; height:17px; margin-bottom:-3px; background:url(../image/choose_bg.png) no-repeat;}
.cho_desc{background-position:0 -50px;}
.cho_desc:hover{background-position:0 -80px;}
.cho_desc_off{background-position:0 -110px;}
.cho_asc{background-position:0 -140px;}
.cho_asc:hover{background-position:0 -170px;}
.cho_asc_off{background-position:0 -200px;}
.cho_input{width:42px; height:15px; margin:0 5px; border:1px solid #beceeb; padding:3px 0 2px; text-align:center; vertical-align:middle;}
.cho_input:focus{border-color:#a3b0d6; box-shadow:inset 0 1px #eee;}
.total{color: #f30; font-size: 20px; }
</style>
</head>
<body>
<div id="main">
<h1>表单序列、规则分离下的购物车表单计算实例页面</h1>
<div id="body" class="light">
<div id="content" class="show">
<h3>展示</h3>
<div class="demo">
<div class="box">
<h4 class="table_caption"><strong class="gtlt mr10">>></strong>购物车</h4>
<form id="calForm" action="" method="post">
<table class="table" width="100%" cellpadding="0" cellspacing="0">
<tr class="f13 lh24">
<th width="33%" class="tl">礼品名称</th>
<th width="20%">单价</th>
<th width="15%">数量</th>
<th width="15%">操作</th>
<th>小计费用</th>
</tr>
<tr class="dn"><td colspan="5" class="g9">没有商品了！</td></tr>
<tr>
<td class="tl">
<img src="http://tp4.sinaimg.cn/1351468535/50/5651460935/1" width="50" height="50" class="mr20 l" />
<div class="cell pt10">歪脖子马里奥大叔</div>
</td>
<td>400元</td>
<td>
<a href="javascript:" title="减少一份" name="choOpt" class="cho_desc" data-id="1"></a>
<input id="choInput_1" class="cho_input" name="unitNumber_1" value="1" min="1" />
<a href="javascript:" title="增加一份" name="choOpt" class="cho_asc" data-id="1"></a>
</td>
<td><a href="javascript:" class="goodsDel" data-id="1">删除</a></td>
<td><span id="subTotal_1">400</span>元</td>
</tr>
<tr>
<td class="tl">
<img src="http://tp2.sinaimg.cn/1548510085/50/5648960724/1" width="50" height="50" class="mr20 l" />
<div class="cell pt10">萌版蜗牛</div>
</td>
<td>50元</td>
<td>
<a href="javascript:" title="减少一份" name="choOpt" class="cho_desc" data-id="2"></a>
<input id="choInput_2" class="cho_input" name="unitNumber_2" value="2" min="1" />
<a href="javascript:" title="增加一份" name="choOpt" class="cho_asc" data-id="2"></a>
</td>
<td><a href="javascript:" class="goodsDel" data-id="2">删除</a></td>
<td><span id="subTotal_2">100</span>元</td>
</tr>
</table>
<div class="p20 tr">
运费：<span id="transFare">6</span>元
<p><input type="checkbox" id="protect" name="protect" value="0.5"><label for="protect">保价(0.5元)</label>
<br><span class="g9">最高可获得200元的赔付金额</span>
</p>
<p>使用积分抵扣：<input type="number" size="4" name="storedScore" value="0" min="0" max="1164"><br>
<span class="g9">您当前积分1164，可以抵换<span id="trueValue" class="ml2 mr2 g6">0</span>元</span>
</p>
<p>总共需要支付：<strong id="allTotal" class="total">506</strong>元</p>
</div>
</form>
<h4 class="f14">一些规则：</h4>
<ol class="g6 lh22">
<li>运费起步价6元，当货物总数大于4个时候，每多1个商品，运费增加1元</li>
<li>当购物车没有商品时候，即使勾选"报价"，报价费用也不在总价中，总价为0</li>
<li>积分兑换比例为100:1, 也就是100积分可以抵实际的1元人民币</li>
</ol>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery1.91.min.js"></script>
<script src="js/asdui.js" type="text/javascript"></script>
<script>
(function() {
// 计算规则
var oRule = {
// 商品1小计价格
subTotal_1: function() {
return 400 * this.unitNumber_1;
},
// 商品2小计价格
subTotal_2: function() {
return 50 * this.unitNumber_2;
},
// 运费
transFare: function() {
var overflow = this.unitNumber_1 + this.unitNumber_2 - 4;
if (overflow <= 0) {
overflow = 0;
}
return 6 + overflow;
},
// 积分等同的价钱
trueValue: function() {
return this.storedScore / 100;
},
// 总价
allTotal: function() {
if (this.subTotal_1 + this.subTotal_2 === 0) return 0;
return this.subTotal_1 + this.subTotal_2 + this.protect + this.transFare - this.trueValue;
}
};
// 事件们
var eleForm = $("#calForm"), isInputSupport = typeof window.screenX + "" != "undefined";
eleForm.find("input").each(function() {
var type = this.type, eventType = isInputSupport? "input" : "keyup";
if (type === "checkbox") {
eventType = "click";
}
$(this).bind(eventType, function() {
if (eventType !== "click") {
var value = $(this).val(),
minVal = $(this).attr("min"),
maxVal = $(this).attr("max"),
intVal = parseInt(value) || minVal;
if (minVal && intVal < minVal) {
intVal = minVal;
} else if (maxVal && intVal > maxVal) {
intVal = maxVal;
}
if (intVal != value) {
$(this).val(intVal);
}
}
eleForm.calculate(oRule);
});
});
// 加加减减小按钮
$("a[name='choOpt']").bind("click", function() {
var targetInput = $("#choInput_" + $(this).attr("data-id"));
if (/desc/.test(this.className)) {
targetInput.val(targetInput.val() * 1 - 1);
} else {
targetInput.val(targetInput.val() * 1 + 1);
}
targetInput.trigger(isInputSupport? "input": "keyup");
});
// 删除
$(".goodsDel").bind("click", function() {
$(this).parents("tr").remove();
if ($("tr").size() === 2) {
$("tr.dn").show();
}
$("#protect").trigger("click");
return false;
});
})();
</script>
</body>
</html>