Skip to content

Instantly share code, notes, and snippets.

@lloydzhou

lloydzhou/order.html

Created December 28, 2015 05:00
Show Gist options
  • Save lloydzhou/aa294b78187f47d868c1 to your computer and use it in GitHub Desktop.
Save lloydzhou/aa294b78187f47d868c1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
order.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>订餐计算器</title>
<!-- Bootstrap -->
<link href="http://s.androidesk.com/libs/bootstrap/v3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="http://s.androidesk.com/libs/bootstrap/v3.2.0/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container" riot-tag="order">
<div class="page-header">
<h1>订餐计算器 <small>订餐计算器</small></h1>
</div>
<div class="row">
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control" placeholder="价格" aria-describedby="sizing-addon2">
<span class="input-group-addon" id="sizing-addon2">元</span>
</div>
</div>
</div>
</div> <!-- /container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://s.androidesk.com/libs/jquery-1.11.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://s.androidesk.com/libs/bootstrap/v3.2.0/js/bootstrap.min.js"></script>
<script src="http://s.androidesk.com/libs/riot/riot-compiler.min.js"></script>
<!--script src="order.tag" type="riot/tag"-->
<script type="riot/tag">
<order>
<div class="page-header">
<h1>订餐计算器 <small>订餐计算器</small></h1>
</div>
<div class="row">
<div class="col-md-offset-3 col-xs-12 col-md-6">
<div class="input-group">
<span class="input-group-addon" id="sizing-addon0">满</span>
<input oninput={change} name="er1" value={r1} type="text" class="form-control" placeholder="满" aria-describedby="sizing-addon1">
<span class="input-group-addon" id="sizing-addon1">减</span>
<input oninput={change} name="er2" value={r2} type="text" class="form-control" placeholder="减" aria-describedby="sizing-addon2">
<span class="input-group-addon" id="sizing-addon2">实际</span>
<input readonly=readonly name="er3" value={r3} type="text" class="form-control" placeholder="实际" aria-describedby="sizing-addon3">
<span class="input-group-addon" id="sizing-addon3">差额</span>
<input readonly=readonly name="er4" value={r4} type="text" class="form-control" placeholder="差额" aria-describedby="sizing-addon4">
<span class="input-group-addon" id="sizing-addon4">元</span>
</div>
</div>
<div class="col-md-offset-3 col-xs-12 col-md-6">
<form onsubmit={ addOrder }>
<div class="input-group">
<input name="neworder" type="text" class="form-control" placeholder="价格（包含餐盒）" aria-describedby="sizing-addon6">
<span class="input-group-addon" id="sizing-addon6">元</span>
<input name="ordername" type="text" class="form-control" placeholder="菜名（可不填）" aria-describedby="sizing-addon7">
<span class="input-group-btn" id="sizing-addon7">
<button type="submit" class="btn btn-default">添加</button>
</span>
</div>
</form>
</div>
<div class="col-md-offset-3 col-xs-12 col-md-6">
<ul class="list-group">
<li each={o, i in orderlist} order={o} index={i} riot-tag="orderitem" class="list-group-item list-group-item-{success: o.status==1, info: o.status != 1}"></li>
<li total={1} order={total} riot-tag="orderitem" class="list-group-item list-group-item-{success: o.status==1, info: o.status != 1}"></li>
</ul>
</div>
</div>
<style>
.col-md-6 {margin-top: 20px;}
</style>
addOrder(e){
var v = parseFloat(this.neworder.value)
if (v > 0) {
$('form div.input-group').removeClass('has-error')
orderlist.unshift({value: v, val: v, val1: v, status: 2, name: this.ordername.value})
//console.log(e, this, this.orderlist, orderlist)
this.neworder.value = ''
this.cal()
}else
$('form div.input-group').addClass('has-error')
return false
}
change(){this.cal(true)}
var self = this;
r1 = 50, r2 = 17, r3 = 0, r4 = 0, orderlist = [], total = {value: 0, val: 0, val1: 0}
self.getval = function(e, v){var pv = parseFloat(e.value); return pv ? pv : v;}
self.cal = function(focus){
!focus && this.neworder.focus()
r1 = self.getval(self.er1, r1)
r2 = self.getval(self.er2, r2)
r3 = self.getval(self.er3, r3)
r4 = self.getval(self.er4, r4)
for (var i=0, s=0; i<orderlist.length; s+=orderlist[i++].value);
r3 = s > r1 ? s - r2 : s, sa = ss = s, r = r3 / s;
if (r3 != s){
sa = ss = 0
for(var i = 0; i < orderlist.length;i++){
orderlist[i].val = orderlist[i].value * r
orderlist[i].val1 = Math.round(orderlist[i].val*2)/2
ss += orderlist[i].val
sa += orderlist[i].val1
}
r4 = sa - r3
if (sa != r3){ console.log(r3, sa, s) }
}
total = {value: s, val: ss, val1: sa}
}
self.on('removeorder', function(index){orderlist.splice(index, 1);self.cal()})
self.cal()
</order>
<orderitem>
<div if={opts.total}>总计：</div>
{opts.order.name || '实际价格'} :<span>{opts.order.value}</span>，打折后:<span>{opts.order.val}</span>，实际:<span>{opts.order.val1}</span>
<a if={!opts.total} class="pull-right btn" onclick={removeOrder}>删除<a>
<div if={opts.total}></div>
removeOrder(e){
this.parent.trigger('removeorder', parseInt(opts.index))
}
</orderitem>
</script>
<script>riot.mount('*')</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment