<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" />
<meta name="author" content="siweiyong 2602812659@qq.com"/>
<title>收银台</title>
<link rel="stylesheet" href="scripts/miniui/themes/default/miniui.css">
<link rel="stylesheet" href="layui/css/layui.css" />
<link rel="stylesheet" href="css/common.css">
</head>
<body style="background: #F6F7F9;">
<div class="main">
<div class="layui-row">
<div class="main_left layui-col-xs12 layui-col-md3">
<div class="layui-row">
<div class="top">
<i class="layui-icon layui-icon-app"></i>商品列表
</div>
<div class="left_main">
<input id="key" class="mini-textbox" placeholder="请输入商品名称" onenter="onKeyEnter"/>
<a class="mini-button" onclick="search()">查询</a>
<ul id="tree1" class="mini-tree" url="data/tree.json" showTreeIcon="true" textField="name" idField="id" expandOnLoad="true" onNodeClick="onNodeClick">
</ul>
</div>
</div>
</div>
<div class="main_right layui-col-xs12 layui-col-md9">
<div class="layui-row">
<div class="top">
<label>商品编码：</label>
<div class="layui-input-inline">
<input type="text" name="title" required lay-verify="required" placeholder="扫码或手动输入商品编码" autocomplete="off" class="layui-input">
</div>
<div class="layui-input-inline">
<button class="layui-btn layui-btn-primary" style="vertical-align: middle;margin-bottom: 2px;">添加</button>
</div>
</div>
<div class="goods_list">
<table class="layui-table">
<thead>
<tr>
<th lay-data="{field:'id'}">商品编码</th>
<th lay-data="{field:'name'}">商品名称</th>
<th lay-data="{field:'price', edit: 'text'}">零售价（元）</th>
<th lay-data="{field:'number', edit: 'text'}">数量</th>
<th lay-data="{field:'integral'}">积分</th>
<!--<th lay-data="{field:'staff', edit: 'text'}">提成员工</th>-->
<th lay-data="{field:'remarks', edit: 'text'}">备注</th>
<th lay-data="{field:'operation'}">操作</th>
</tr>
</thead>
<tbody id="myTbody">
</tbody>
</table>
</div>
<div class="total ft16">
合计：【<span> 消费总金额：<i class="totalMoney">0.00</i> </span>】【<span> 消费总数量：<i class="totalQuantity">0</i> </span>】【 <span> 总积分：<i class="totalIntegral">0</i> </span>】
</div>
<table class="reading layui-table" lay-even="">
<tbody>
<tr>
<td>会员查找</td>
<td colspan="3">
<div class="layui-input-inline">
<input type="text" class="layui-input" placeholder="扫描或者手动输入会员卡号" />
</div>
<button class="card_reading layui-btn">读卡</button>
<a href="#" class="registration layui-btn layui-btn-primary">会员登记</a>
</td>
</tr>
<tr>
<td>会员卡号：</td>
<td></td>
<td>会员姓名：</td>
<td></td>
</tr>
<tr>
<td>会员级别：</td>
<td></td>
<td>有效期：</td>
<td></td>
</tr>
<tr>
<td>可用积分：</td>
<td></td>
<td>可用储值：</td>
<td></td>
</tr>
</tbody>
</table>
<div class="towbtn">
<input type="submit" id="settlement" value="结算">
<input type="reset" value="清空" />
</div>
</div>
</div>
</div>
</div>
<div class="mask_box">
<div class="mask"></div>
<div class="box">
<div class="box_top">结算</div>
<div class="box_block box_block1">
<div class="block_left"><label for="">应付金额：</label></div>
<div class="block_right"><input type="text" class="layui-input" value="23131" readonly style="border: none;" /></div>
</div>
<div class="box_block box_block2">
<div class="block_left"><input type="checkbox" name="" />优惠券：</div>
<div class="block_right">
<select class="layui-select" name="" id="">
<option value="0">请选择</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div class="block_left">还需支付：</div>
<div class="block_right"><input type="text" class="layui-input" value="32432" readonly style="border: none;" /></div>
</div>
<div class="box_block box_block3">
<div class="block_left"><input type="radio" name="payment" /><label for="use_coupon">现金支付：</label></div>
<div class="block_right">
<input type="text" class="layui-input" />
</div>
<br style="clear: both;">
<div class="block_left"><input type="radio" name="payment" /><label for="use_coupon">移动支付：</label></div>
<div class="block_right">
<input type="text" class="layui-input" />
</div>
<br style="clear: both;">
<div class="block_left"><input type="radio" name="payment" /><label for="use_coupon">其他支付：</label></div>
<div class="block_right">
<input type="text" class="layui-input" />
</div>
</div>
<div class="remark_mess">
<div class="block_left">
备注：
</div>
<div class="block_right">
<textarea class="layui-textarea" name="" rows="" cols="" maxlength="200" placeholder="最多输入200字符"></textarea>
</div>
<br style="clear: both;">
<div class="block_left">
交易时间：
</div>
<div class="block_right">
<input type="text" value="2018-11-23 08:23:43" class="layui-input" readonly style="border: none;" />
</div>
</div>
<div class="bot">
<input type="submit" value="提交">
<input type="text" value="取消">
</div>
</div>
</div>
<script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
<script src="scripts/miniui/miniui.js"></script>
<script src="layui/layui.js"></script>
<script>
$(function() {
$("#settlement").click(function(){
$(".mask_box").show();
})
$(".bot input:nth-child(2)").click(function(){
$(".mask_box").hide();
})
})
/*miniui - tree 插件 - 开始*/
mini.parse();
var tree = mini.get("tree1");
function search() {
var key = mini.get("key").getValue();
if (key == "") {
tree.clearFilter();
} else {
key = key.toLowerCase();
tree.filter(function (node) {
var name = node.name ? node.name.toLowerCase() : "";
if (name.indexOf(key) != -1) {
return true;
}
});
}
}
function onKeyEnter(e) {
search();
}
var totalQuantity = 0; //总数量
var totalMoney = 0; //总金额
var totalIntegral = 0; //总积分
function onNodeClick(){
//获取选中节点的值
var flag = false;
var tree=mini.get("tree1");
node=tree.getSelectedNode();
if(node.end){
/*树结构选中商品，table列表变化 - 开始*/
totalQuantity++;
$('.totalQuantity').html(totalQuantity);
this_price = node.price; //获取单价
this_price = parseFloat(this_price);
totalMoney += this_price;
$('.totalMoney').html(totalMoney.toFixed(2));
this_integral = node.integral; //获取积分
this_integral = parseFloat(this_integral);
totalIntegral += this_integral;
$('.totalIntegral').html(totalIntegral.toFixed(0));
/*树结构选中商品，table列表变化 - 结束*/
if($("#myTbody tr").length <= 0){
var addtr = '<tr class="mytr">';
addtr += '<td>'+node.id+'</td>';
addtr += '<td>'+node.name+'</td>' ;
addtr += '<t
收银台购物车结算后台页面模板.rar
125 浏览量
2024-05-07
20:34:25
上传
评论
收藏 1.15MB RAR 举报
收银台购物车结算后台页面模板.rar （816个子文件） 
miniui.css 94KB layui.css 59KB skin.css 18KB skin.css 16KB layer.css 14KB skin.css 14KB skin.css 13KB skin.css 13KB skin.css 13KB skin.css 13KB flatstyle.css 13KB skin.css 12KB skin.css 12KB layui.mobile.css 10KB large-mode.css 10KB medium-mode.css 9KB laydate.css 7KB common.css 7KB skin.css 6KB skin.css 6KB skin.css 6KB skin.css 6KB skin.css 6KB skin.css 6KB icons.css 3KB code.css 1KB Thumbs.db 17KB Thumbs.db 7KB Thumbs.db 6KB Thumbs.db 5KB iconfont.eot 39KB
59.gif 10KB 22.gif 10KB 24.gif 8KB 13.gif 7KB 16.gif 7KB 39.gif 6KB 64.gif 6KB 63.gif 6KB 50.gif 6KB loading-0.gif 6KB 4.gif 6KB 1.gif 5KB 42.gif 5KB 71.gif 5KB 21.gif 5KB 20.gif 5KB 29.gif 5KB 70.gif 4KB 5.gif 4KB 17.gif 4KB 27.gif 4KB 9.gif 4KB 44.gif 4KB 11.gif 4KB 8.gif 4KB 3.gif 4KB 23.gif 4KB 34.gif 4KB 41.gif 4KB 38.gif 4KB 65.gif 3KB 32.gif 3KB 45.gif 3KB 7.gif 3KB 12.gif 3KB 26.gif 3KB 60.gif 3KB 2.gif 3KB 40.gif 3KB 25.gif 3KB 19.gif 3KB 66.gif 3KB 18.gif 3KB 46.gif 3KB 10.gif 3KB 28.gif 3KB 51.gif 3KB 57.gif 3KB 67.gif 3KB 0.gif 3KB 48.gif 3KB 43.gif 3KB 30.gif 2KB 61.gif 2KB 33.gif 2KB 69.gif 2KB 14.gif 2KB 47.gif 2KB 36.gif 2KB 49.gif 2KB 58.gif 2KB 6.gif 2KB 54.gif 2KB 53.gif 2KB checkbox.gif 2KB 56.gif 2KB 62.gif 2KB 31.gif 2KB 55.gif 2KB共 816 条
- 1
- 2
- 3
- 4
- 5
- 6
- 9
资源评论
