1

app/admin/view/store_product/buy.html

@@ -1,5 +1,6 @@
 {extend name="common/base"/}
 {block name="style"}
+<link rel="stylesheet" href="/static/assets/libs/layui/css/layui.css" />
 <style type="text/css">
 	.editormd-code-toolbar select {
 		display: inline-block
@@ -8,58 +9,109 @@
 	.editormd li {
 		list-style: inherit;
 	}
+
 </style>
 {/block}
 <!-- 主体 -->
 {block name="body"}
 <form class="layui-form p-4">
-	<h3 class="pb-3">购买商品</h3>
-	<table class="layui-table layui-table-form">
-		<tr>
-			<td class="layui-td-gray">商品名称</td>
-			<td colspan="7"><input type="text" name="store_name" lay-verify="required" lay-reqText="请输入商品名称"
-								   autocomplete="off" placeholder="请输入商品名称" class="layui-input" value="{$detail.store_name}" readonly></td>
-		</tr>
+	<div class="layui-card">
+		<table class="layui-table layui-table-form">
 
-		<tr>
-			<td class="layui-td-gray" style="vertical-align:top;">商品封面图</td>
-			<td>
-				<div class="layui-upload">
-					<!--					<button type="button" class="layui-btn layui-btn-sm" id="upload_btn_thumb">-->
-					<!--						上传缩略图(尺寸:428x270)-->
-					<!--					</button>-->
-					<div class="layui-upload-list" id="upload_box_thumb"
-						 style="overflow: hidden;">
-						<img src="{$detail.image}"
-							 onerror="javascript:this.src='{__GOUGU__}/gougu/images/nonepic600x360.jpg';this.onerror=null;"
-							 width="100" style="max-width: 100%; height:66px;"/>
-						<input type="hidden" name="image" value="{$detail.image}">
+				<div class="layui-card-header"><h3>商品名称</h3></div>
+				<div class="layui-card-body layui-row layui-col-space12">
+					<div class="layui-col-md12">
+						<input type="text" name="store_name" lay-verify="required" lay-reqText="请输入商品名称"
+							   autocomplete="off" placeholder="请输入商品名称" class="layui-input" value="{$detail.store_name}" readonly style="background-color:#f7f7f7">
 					</div>
 				</div>
-			</td>
-		</tr>
 
-		<tr>
-			<td class="layui-td-gray">购买数量<font>*</font></td>
-			<td colspan="7"><input type="text" name="number" lay-verify="required|integer" lay-reqText="请输入购买数量"
-								   autocomplete="off" placeholder="请输入购买数量" class="layui-input" value=""></td>
-		</tr>
+				<div class="layui-card-header"><h3>商品封面图</h3></div>
+				<div class="layui-card-body layui-row layui-col-space12">
+					<div class="layui-col-md12">
+						<div class="layui-upload">
+							<!--					<button type="button" class="layui-btn layui-btn-sm" id="upload_btn_thumb">-->
+							<!--						上传缩略图(尺寸:428x270)-->
+							<!--					</button>-->
+							<div class="layui-upload-list" id="upload_box_thumb"
+								 style="overflow: hidden;">
+								<img src="{$detail.image}"
+									 onerror="javascript:this.src='{__GOUGU__}/gougu/images/nonepic600x360.jpg';this.onerror=null;"
+									 width="100" style="max-width: 100%; height:66px;"/>
+								<input type="hidden" name="image" value="{$detail.image}">
+							</div>
+						</div>
+					</div>
+				</div>
 
-	</table>
+				<div class="layui-card-header"><h3>购买数量</h3></div>
+				<div class="layui-card-body layui-row layui-col-space12">
+					<div class="layui-col-md12">
+						<input type="text" name="number" lay-verify="required|integer" lay-reqText="请输入购买数量"
+							   autocomplete="off" placeholder="请输入购买数量" class="layui-input" value="" id="sorts">
+					</div>
+				</div>
 
 
-	<div class="pt-3">
-		<input type="hidden" name="product_id" value="{$detail.product_id}"/>
-		<button class="layui-btn layui-btn-normal preservation" lay-submit="" lay-filter="webform" >立即提交</button>
-		<button type="reset" class="layui-btn layui-btn-primary">重置</button>
+
+	<!--		<tr>-->
+	<!--			<td class="layui-td-gray">商品名称</td>-->
+	<!--			<td colspan="7"><input type="text" name="store_name" lay-verify="required" lay-reqText="请输入商品名称"-->
+	<!--								   autocomplete="off" placeholder="请输入商品名称" class="layui-input" value="{$detail.store_name}" readonly></td>-->
+	<!--		</tr>-->
+
+	<!--		<tr>-->
+	<!--			<td class="layui-td-gray" style="vertical-align:top;">商品封面图</td>-->
+	<!--			<td>-->
+	<!--				<div class="layui-upload">-->
+	<!--					&lt;!&ndash;					<button type="button" class="layui-btn layui-btn-sm" id="upload_btn_thumb">&ndash;&gt;-->
+	<!--					&lt;!&ndash;						上传缩略图(尺寸:428x270)&ndash;&gt;-->
+	<!--					&lt;!&ndash;					</button>&ndash;&gt;-->
+	<!--					<div class="layui-upload-list" id="upload_box_thumb"-->
+	<!--						 style="overflow: hidden;">-->
+	<!--						<img src="{$detail.image}"-->
+	<!--							 onerror="javascript:this.src='{__GOUGU__}/gougu/images/nonepic600x360.jpg';this.onerror=null;"-->
+	<!--							 width="100" style="max-width: 100%; height:66px;"/>-->
+	<!--						<input type="hidden" name="image" value="{$detail.image}">-->
+	<!--					</div>-->
+	<!--				</div>-->
+	<!--			</td>-->
+	<!--		</tr>-->
+
+	<!--		<tr>-->
+	<!--			<td class="layui-td-gray">购买数量<font>*</font></td>-->
+	<!--			<td colspan="7"><input type="text" name="number" lay-verify="required|integer" lay-reqText="请输入购买数量"-->
+	<!--								   autocomplete="off" placeholder="请输入购买数量" class="layui-input" value=""></td>-->
+	<!--		</tr>-->
+
+		</table>
+
+
+		<div class="pt-3" style="right: 0;position: absolute;padding-right: 30px;z-index: 999">
+			<input type="hidden" name="product_id" value="{$detail.product_id}"/>
+			<button type="reset" class="layui-btn layui-btn-primary preservation" >重置</button>
+			<button class="layui-btn layui-btn-normal preservation" lay-submit="" lay-filter="webform" >立即提交</button>
+		</div>
+
+		<div class="layui-card-header" style="margin-top:25px;"></div>
+		<div class="layui-card-body layui-row layui-col-space12 " style="margin-top:10px;">
+			<div class="layui-col-md12">
+				<img id="codes" src="" alt="" style="width: 200px;margin:0 auto;position: relative;
+    left: 39%;">
+			</div>
+			<div id="wenzi" style="width: 200px;margin:0 auto;color: #05c2fb;font-size: 20px;"></div>
+		</div>
+
 	</div>
 </form>
+
 {/block}
 <!-- /主体 -->
 
 <!-- 脚本 -->
 {block name="script"}
 <script src="/static/assets/js/xm-select.js"></script>
+<script src="/static/assets/libs/layui/layui.js"></script>
 <script>
 	var  moduleInit = ['tool', 'tagpicker', 'tinymce'];
 	var group_access = "{:session('gougu_admin')['group_access']}";
@@ -79,13 +131,123 @@
 		return ;
 	}
 	function gouguInit() {
-		var form = layui.form, tool = layui.tool, tagpicker = layui.tagpicker;
+
+		layui.config({
+					base: "/static/assets/libs/layui_exts/",
+				})
+				.extend({
+					numberInput: "numberInput/js/index",
+				});
+		layui.use(["numberInput", "layer"], function () {
+			var numberInput = layui.numberInput;
+			var layer = layui.layer;
+
+			numberInput.render("#sorts", {
+				// 2.0.3.20220623 新增，默认 input
+				handleEvent: "blur",
+				// 最小值
+				min: 1,
+				// 最大值
+				max: 10000,
+				// 步数
+				step: 1,
+				// 所有的事件都需要写到 event 下面
+				// event: {
+				// 	beforeCreated() {
+				// 		console.log("生命周期: beforeCreated", "插件开始工作啦!");
+				// 	},
+				// 	created($tree) {
+				// 		console.log("生命周期: created", "插件已经创建好DOM了! 但是还没塞到页面上, 可以理解成现在是虚拟的DOM", $tree);
+				// 	},
+				// 	mounted($tree) {
+				// 		console.log("生命周期: mounted", "创建的DOM已经替换掉原始的DOM了, 撸起袖子就是干", $tree);
+				// 	},
+				// 	change(event, $input, value, $tree) {
+				// 		console.log("事件: change", "数据改变", {
+				// 			event,
+				// 			$input,
+				// 			value,
+				// 			$tree,
+				// 		});
+				// 	},
+				// 	input(event, $input, value, $tree) {
+				// 		console.log("事件: input", "数据输入", {
+				// 			event,
+				// 			$input,
+				// 			value,
+				// 			$tree,
+				// 		});
+				// 	},
+				// 	blur(event, $input, value, $tree) {
+				// 		console.log("事件: blur", "失去焦点", {
+				// 			event,
+				// 			$input,
+				// 			value,
+				// 			$tree,
+				// 		});
+				// 	},
+				// 	toMin(event, $subtract, value, $tree) {
+				// 		console.log("事件: toMin", "到达最小值", {
+				// 			event,
+				// 			$subtract,
+				// 			value,
+				// 			$tree,
+				// 		});
+				// 	},
+				// 	toMax(event, $add, value, $tree) {
+				// 		console.log("事件: toMax", "到达最大值", {
+				// 			event,
+				// 			$add,
+				// 			value,
+				// 			$tree,
+				// 		});
+				// 	},
+				// 	focus(event, $input, value, $tree) {
+				// 		console.log("事件: focus", "获得焦点", {
+				// 			event,
+				// 			$input,
+				// 			value,
+				// 			$tree,
+				// 		});
+				// 	},
+				// 	select(event, $input, value, $tree) {
+				// 		console.log("事件: select", "当全选的时候", {
+				// 			event,
+				// 			$input,
+				// 			value,
+				// 			$tree,
+				// 		});
+				// 	},
+				// 	keypress(event, $input, value, $tree) {
+				// 		console.log("事件: keypress", "当按下某个键的时候", {
+				// 			event,
+				// 			$input,
+				// 			value,
+				// 			$tree,
+				// 		});
+				// 	},
+				// 	mousewheel(event, $input, value, $tree) {
+				// 		console.log("事件: mousewheel", "当鼠标滚轮滚动的时候", {
+				// 			event,
+				// 			$input,
+				// 			value,
+				// 			$tree,
+				// 		});
+				// 	},
+				// },
+			});
+
+		});
+		var form = layui.form, tool = layui.tool, tagpicker = layui.tagpicker,numberInput =layui.numberInput;
 		form.verify({
 			integer: [
 				/^[1-9]\d*$/
 				, '只能输入正整数'
 			]
 		});
+
+
+
 		//上传缩略图
 		var upload_thumb = layui.upload.render({
 			elem: '#upload_btn_thumb',
@@ -136,6 +298,10 @@
 		});
 		//监听提交
 		form.on('submit(webform)', function (data) {
+			if (data.field.number == '0') {
+				layer.msg('请先选择购买数量');
+				return false;
+			}
 			// 单击之后提交按钮不可选,防止重复提交
 			var DISABLED = 'layui-btn-disabled';
 			// 增加样式
@@ -148,24 +314,28 @@
 					/** 把生成的二维码放到页面上 */
 					var url = e.data.html;
 					/** 弹出二维码 **/
-					layer.open({
-						//type:1 表示页面层
-						type: 1,
-						title: '扫码支付',
-						//是否点击遮罩关闭
-						shadeClose: false,
-						//样式类名，可以自定义弹窗样式
-						skin:'demo_share',
-						// 去掉关闭按钮
-						closeBtn :'',
-						//弹层外区域
-						shade: 0.3,
-						maxmin: false, //开启最大化最小化按钮
-						//宽高
-						area: ['200px','220px'],
-						//内容
-						content: "<img src='"+url+"' alt='' style='margin-left: 20px;'>",
-					});
+					// layer.open({
+					// 	//type:1 表示页面层
+					// 	type: 1,
+					// 	title: '扫码支付',
+					// 	//是否点击遮罩关闭
+					// 	shadeClose: false,
+					// 	//样式类名，可以自定义弹窗样式
+					// 	skin:'demo_share',
+					// 	// 去掉关闭按钮
+					// 	closeBtn :'',
+					// 	//弹层外区域
+					// 	shade: 0.3,
+					// 	maxmin: false, //开启最大化最小化按钮
+					// 	//宽高
+					// 	area: ['200px','220px'],
+					// 	//内容
+					// 	content: "<img src='"+url+"' alt='' style='margin-left: 20px;'>",
+					// });
+
+					$('#codes').attr('src',url);
+					$('#wenzi').html('请扫描上面二维码付款');
+
 					/** 设置定时器, 即一弹出二维码就开始不断请求查看支付状态, 直到收到支付成功的返回, 再终止定时器 **/
 					var timer = setInterval(function () {
 						/** 在这里请求微信支付状态的接口 **/
@@ -181,12 +351,24 @@
 
 						let callback = function(res) {
 							if (res.code == 200) {
+
+								// layer.open({
+								// 	type: 1,
+								// 	title: '付款成功提示',
+								// 	shadeClose: true,
+								// 	shade: false,
+								// 	maxmin: false, //开启最大化最小化按钮
+								// 	area: ['1000px', '200px'],
+								// 	content: '<div style="width: 300px;margin:0 auto;font-size: 16px;margin-top:50px;">付款成功，请前往购买列表查看</div>'
+								// });
+								// parent.layer.closeAll();//关闭弹出层
 								layer.msg('支付成功',{time:2000,icon:6});
+								parent.layer.closeAll();
 								/** 如果支付成功, 就取消定时器, 并重新加载页面 */
 								window.clearInterval(timer);
+
 								// 关闭所有层
-								tool.sideClose(2000);
-								// window.location.reload();
+								// tool.sideClose(2000);
 							}
 						}
 						tool.ajax(options, callback);

app/admin/view/store_product/index.html

@@ -163,7 +163,16 @@
 		table.on('tool(store_product)', function(obj) {
 			var data = obj.data;
 			if (obj.event === 'read') {
-				tool.side('/admin/store_product/buy?product_id='+obj.data.product_id);
+				// tool.side('/admin/store_product/buy?product_id='+obj.data.product_id);
+				var index = layer.open({
+					type: 2,
+					title: '购买商品',
+					shadeClose: true,
+					shade: false,
+					maxmin: false, //开启最大化最小化按钮
+					area: ['1000px', '800px'],
+					content: '/admin/store_product/buy?product_id='+obj.data.product_id
+				});
 			}
 			else if (obj.event === 'edit') {
 				tool.side('/admin/store_product/edit?product_id='+obj.data.product_id);

public/static/assets/libs/layui/css/modules/code.css

@@ -0,0 +1 @@
+html #layuicss-skincodecss{display:none;position:absolute;width:1989px}.layui-code-h3,.layui-code-view{position:relative;font-size:12px}.layui-code-view{display:block;margin:10px 0;padding:0;border:1px solid #eee;border-left-width:6px;background-color:#FAFAFA;color:#333;font-family:Courier New}.layui-code-h3{padding:0 10px;height:40px;line-height:40px;border-bottom:1px solid #eee}.layui-code-h3 a{position:absolute;right:10px;top:0;color:#999}.layui-code-view .layui-code-ol{position:relative;overflow:auto}.layui-code-view .layui-code-ol li{position:relative;margin-left:45px;line-height:20px;padding:0 10px;border-left:1px solid #e2e2e2;list-style-type:decimal-leading-zero;*list-style-type:decimal;background-color:#fff}.layui-code-view .layui-code-ol li:first-child{padding-top:10px}.layui-code-view .layui-code-ol li:last-child{padding-bottom:10px}.layui-code-view pre{margin:0}.layui-code-notepad{border:1px solid #0C0C0C;border-left-color:#3F3F3F;background-color:#0C0C0C;color:#C2BE9E}.layui-code-notepad .layui-code-h3{border-bottom:none}.layui-code-notepad .layui-code-ol li{background-color:#3F3F3F;border-left:none}.layui-code-demo .layui-code{visibility:visible!important;margin:-15px;border-top:none;border-right:none;border-bottom:none}.layui-code-demo .layui-tab-content{padding:15px;border-top:none}

public/static/assets/libs/layui_exts/numberInput/css/theme.css

@@ -0,0 +1,66 @@
+.number-input-container {
+  overflow: hidden;
+  display: inline-block;
+}
+.number-input-container .number-input-subtract,
+.number-input-container .number-input-add,
+.number-input-container .layui-input {
+  position: relative;
+  z-index: 0;
+  float: left;
+  user-select: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  background-color: #ffffff;
+}
+.number-input-container .number-input-subtract,
+.number-input-container .number-input-add {
+  cursor: pointer;
+  height: 36px;
+  line-height: 38px;
+  width: 38px;
+  border-radius: 2px;
+  text-align: center;
+  border: 1px solid #eee;
+  transition: 0.2s;
+  background-color: #f6f6f6;
+}
+.number-input-container .number-input-subtract:hover,
+.number-input-container .number-input-add:hover {
+  background-color: #f2f2f2;
+}
+.number-input-container .number-input-subtract {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+.number-input-container .number-input-add {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+  margin-left: -1px;
+}
+.number-input-container .layui-input {
+  z-index: 1;
+  float: left;
+  border-radius: 0px;
+  padding-left: 0;
+  text-align: center;
+  margin-left: -1px;
+}
+.number-input-container .layui-input::-webkit-inner-spin-button,
+.number-input-container .layui-input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+}
+@media screen and (max-width: 678px) {
+  .media-screen-container .media-screen-subtract,
+  .media-screen-container .media-screen-add {
+    height: 30px;
+    line-height: 30px;
+  }
+  .media-screen-container .media-screen-input {
+    height: 32px;
+    line-height: 32px;
+    width: 60px !important;
+  }
+}
+/*# sourceMappingURL=theme.css.map */

public/static/assets/libs/layui_exts/numberInput/css/theme.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["theme.less"],"names":[],"mappings":"AAAA;EACE,gBAAA;EACA,qBAAA;;AAFF,uBAIE;AAJF,uBAI0B;AAJ1B,uBAI6C;EACzC,kBAAA;EACA,UAAA;EACA,WAAA;EACA,iBAAA;EACA,qBAAA;EACA,sBAAA;EACA,yBAAA;EACA,yBAAA;;AAZJ,uBAeE;AAfF,uBAe0B;EACtB,eAAA;EACA,YAAA;EACA,iBAAA;EACA,WAAA;EACA,kBAAA;EACA,kBAAA;EACA,sBAAA;EACA,gBAAA;EACA,yBAAA;;AAxBJ,uBA2BE,uBAAsB;AA3BxB,uBA2BgC,kBAAiB;EAC7C,yBAAA;;AA5BJ,uBA+BE;EACE,4BAAA;EACA,+BAAA;;AAjCJ,uBAoCE;EACE,2BAAA;EACA,8BAAA;EACA,iBAAA;;AAvCJ,uBA0CE;EACE,UAAA;EACA,WAAA;EACA,kBAAA;EACA,eAAA;EACA,kBAAA;EACA,iBAAA;;AAhDJ,uBAmDE,aAAY;AAnDd,uBAoDE,aAAY;EACV,wBAAA;;AAIJ,mBAAqC;EACnC,uBACE;EADF,uBAC0B;IACtB,YAAA;IACA,iBAAA;;EAHJ,uBAME;IACE,YAAA;IACA,iBAAA;IACA,sBAAA","file":"theme.css"}

public/static/assets/libs/layui_exts/numberInput/css/theme.less

@@ -0,0 +1,71 @@
+.number-input-container {
+  overflow: hidden;
+  display: inline-block;
+
+  .number-input-subtract, .number-input-add, .layui-input {
+    position: relative;
+    z-index: 0;
+    float: left;
+    user-select: none;
+    -ms-user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    background-color: #ffffff;
+  }
+
+  .number-input-subtract, .number-input-add {
+    cursor: pointer;
+    height: 36px;
+    line-height: 38px;
+    width: 38px;
+    border-radius: 2px;
+    text-align: center;
+    border: 1px solid #eee;
+    transition: .2s;
+    background-color: #f6f6f6;
+  }
+
+  .number-input-subtract:hover, .number-input-add:hover {
+    background-color: #f2f2f2;
+  }
+
+  .number-input-subtract {
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+  }
+
+  .number-input-add {
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+    margin-left: -1px;
+  }
+
+  .layui-input {
+    z-index: 1;
+    float: left;
+    border-radius: 0px;
+    padding-left: 0;
+    text-align: center;
+    margin-left: -1px;
+  }
+
+  .layui-input::-webkit-inner-spin-button,
+  .layui-input::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+  }
+}
+
+@media screen and (max-width: 678px) {
+  .media-screen-container {
+    .media-screen-subtract, .media-screen-add {
+      height: 30px;
+      line-height: 30px;
+    }
+
+    .media-screen-input {
+      height: 30px + 2px;
+      line-height: 30px + 2px;
+      width: 60px !important;
+    }
+  }
+}

public/static/assets/libs/layui_exts/numberInput/js/index.js

@@ -0,0 +1,293 @@
+/**
+ * @name numberInput
+ * @author HuangJunjie
+ * @description layui 数值输入框扩展
+ * @version 2.0.3.20220623
+ */
+layui.define(["jquery"], function (exports) {
+    var $ = layui.jquery;
+    var prefix = "number-input";
+
+    /**
+     * 链接外部样式文件
+     * 由 码云 @hulangfy 同学建议
+     */
+    layui.link(layui.cache.base + 'numberInput/css/theme.css');
+
+    /**
+     * 创建样式列表
+     * @param names
+     * @returns {string}
+     */
+    function createClassList(flag, names) {
+        if (typeof names == "string") names = [names];
+
+        var classList = [];
+
+        names.forEach(function (name) {
+            classList.push([prefix, flag].join("-"));
+            classList.push([name, flag].join("-"));
+        });
+
+        return classList.join(" ");
+    }
+
+    /**
+     * 精度数字
+     * @param value
+     * @param precision
+     */
+    function ratioNumber(value, precision) {
+        if (precision === undefined) precision = 0;
+        var floatVal = parseFloat(value) || 0;
+        var ratio = Math.pow(10, precision);
+
+        return ((floatVal * ratio) / ratio).toFixed(precision);
+    }
+
+    /**
+     * 检查是否包含特定属性
+     * @param {*} $el
+     * @param {*} attr
+     * @returns
+     */
+    function hasAttr($el, attr) {
+        var attrs = $el[0].attributes;
+
+        for (var i = 0; i < attrs.length; i++) {
+            if (attrs[i].name === attr) {
+                return attrs[i].value !== "false";
+            }
+        }
+
+        return false;
+    }
+
+    /**
+     * 初始化操作
+     * @param id
+     * @param opts
+     */
+    function render(id, opts) {
+        if (!opts) opts = {};
+
+        // 绑定Dom
+        $(id).each(function () {
+            (function ($input) {
+                var $target = $input.parent();
+                // 取出配置
+                var max = parseFloat(opts.max || $input.data("max")) || 999999999;
+                var min = parseFloat(opts.min || $input.data("min")) || 0;
+                var precision = parseInt(opts.precision || $input.data("precision")) || 0;
+                var ratio = Math.pow(10, precision);
+                var step = opts.step ? parseFloat(opts.step || $input.date("step")) : ((parseFloat(opts.step) || 1) / ratio);
+                var skin = opts.skin || "auto";
+                var iconAdd = opts.iconAdd || $input.data("icon-add") || "layui-icon layui-icon-addition";
+                var iconSubtract = opts.iconSubtract || $input.data("icon-subtract") || "layui-icon layui-icon-subtraction";
+                var width = opts.width || $input.data("width") || 100;
+                var allowEmpty = opts.allowEmpty || hasAttr($input, "data-allow-empty") || false;
+                var autoSelect = opts.autoSelect || hasAttr($input, "data-auto-select") || false;
+                var setDefaultValue = opts.defaultValue || $input.val() || (hasAttr($input, "data-default-value") ? $input.attr("data-default-value") : "");
+                var defaultEmptyValue = opts.defaultEmptyValue || false;
+                var defaultValue = ratioNumber(parseFloat(setDefaultValue) || 0, precision);
+                if (defaultEmptyValue && setDefaultValue.length === 0) defaultValue = "";
+                var readonly = opts.readonly || $input.attr("readonly") || false;
+                var disabled = opts.disabled || $input.attr("disabled") || false;
+                var handleEvent = opts.handleEvent || "input";
+
+                // 激活指定事件
+                function activeEvent(name, event, dom, value, tree) {
+                    if (opts.event && typeof opts.event[name] == "function") {
+                        return opts.event[name](event, dom, value, tree);
+                    } else {
+                        return false;
+                    }
+                }
+
+                // 开始组装DOM
+                activeEvent("beforeCreated");
+
+                // 绑定元素
+                var $container = $('<div class="' + createClassList("container", skin) + '"></div>');
+                var $subtract = $('<div class="' + createClassList("subtract", skin) + '"></div>').append($('<i class="' + iconSubtract + '"></i>'));
+                var $add = $('<div class="' + createClassList("add", skin) + '"></div>').append($('<i class="' + iconAdd + '"></i>'));
+                $input.addClass(createClassList("input", skin));
+
+                // DOM集合
+                var $dom = {
+                    input: $input,
+                    subtract: $subtract,
+                    add: $add,
+                    container: $container,
+                };
+
+                // 自动全选
+                $input.on("focus", function (event) {
+                    activeEvent("focus", event, $input, $input.val(), $dom);
+                    if (autoSelect) $input.select()
+                });
+                $input.on("select", function (event) {
+                    activeEvent("select", event, $input, $input.val(), $dom);
+                });
+
+                // 处理逻辑
+                $input
+                    .val(defaultValue)
+                    .css({
+                        width: width,
+                    })
+                    .attr({
+                        readonly: readonly,
+                        disabled: disabled
+                    })
+                    .on(handleEvent, function (event) {
+                        var val = $(this).val();
+                        var newVal = val;
+
+                        // 如果精度大于0
+                        if (precision > 0) {
+                            newVal = val.replace(/[^\d\-\.]/g, "");
+                            newVal = newVal.replace(/^\./, "");
+                            newVal = newVal.replace(/\.{2,}$/g, ".");
+                            newVal = newVal.replace(/\-\./, "-");
+                            newVal = newVal.replace(new RegExp("\\.(\\d{" + precision + "})\\d+", "g"), ".$1");
+                        } else {
+                            newVal = newVal.replace(/[^\d\-]/g, "");
+                            if (min >= 0) {
+                                newVal = newVal.replace(/^0([0-9])/, "$1");
+                            } else {
+                                newVal = newVal.replace(/\-0{2}/, "-0");
+                                newVal = newVal.replace(/\-0([0-9])/, "-$1");
+                            }
+                        }
+
+                        // 不允许输入以0开头的整数
+                        newVal = newVal.replace(/^0+/g, "0");
+                        $(this).val(newVal);
+
+                        // 如果最小值小于零则不允许输入负数
+                        if (min >= 0) {
+                            newVal = newVal.replace(/\-/g, "");
+                        }
+
+                        // 只允许头部出现负号
+                        var values = newVal.split("");
+                        values.forEach(function (val, i) {
+                            if (val === "-" && i !== 0) {
+                                values.splice(i, 1);
+                            }
+                        });
+
+                        newVal = values.join("");
+
+                        if (newVal) {
+                            var floatVal = parseFloat(newVal);
+
+                            if (floatVal > max) {
+                                var maxVal = ratioNumber(max, precision);
+                                $(this).val(maxVal);
+                                activeEvent("change", event, $input, maxVal, $dom);
+                                activeEvent("input", event, $input, maxVal, $dom);
+                                return;
+                            }
+                            if (floatVal < min) {
+                                var minVal = ratioNumber(min, precision);
+                                $(this).val(minVal);
+                                activeEvent("change", event, $input, minVal, $dom);
+                                activeEvent("input", event, $input, minVal, $dom);
+                                return;
+                            }
+                        }
+
+                        $(this).val(newVal);
+                        activeEvent("change", event, $input, val, $dom);
+                        activeEvent("input", event, $input, val, $dom);
+                    })
+                    .on("blur", function (event) {
+                        var val = $(this).val();
+                        var newVal = 0;
+                        if (val.length === 0) {
+                            if (allowEmpty) {
+                                activeEvent("change", event, $input, val, $dom);
+                                activeEvent("blur", event, $input, val, $dom);
+                            } else {
+                                newVal = ratioNumber(defaultValue, precision);
+                                $(this).val(newVal);
+                                activeEvent("change", event, $input, newVal, $dom);
+                                activeEvent("blur", event, $input, newVal, $dom);
+                            }
+                        } else {
+                            newVal = ratioNumber(val, precision);
+                            $(this).val(newVal);
+                            activeEvent("change", event, $input, newVal, $dom);
+                            activeEvent("blur", event, $input, newVal, $dom);
+                        }
+                    })
+                    .on("keypress", function (event) {
+                        activeEvent("keypress", event, $input, $input.val(), $dom);
+                    }).on("mousewheel", function (event) {
+                    activeEvent("mousewheel", event, $input, $input.val(), $dom);
+                });
+
+                $subtract.on("click", function (event) {
+                    if (readonly || disabled) return;
+
+                    var val = $input.val();
+                    var floatVal = parseFloat(val);
+                    var newVal = 0;
+
+                    if (floatVal - step >= min) {
+                        newVal = ratioNumber(floatVal - step, precision);
+                        $input.val(newVal);
+                        if (floatVal !== min) {
+                            activeEvent("change", event, $subtract, newVal, $dom);
+                        } else {
+                            activeEvent("toMin", event, $subtract, newVal, $dom);
+                        }
+                    } else {
+                        newVal = ratioNumber(min, precision);
+                        $input.val(newVal);
+                        if (floatVal === min) {
+                            activeEvent("toMin", event, $subtract, newVal, $dom);
+                        } else {
+                            activeEvent("change", event, $subtract, newVal, $dom);
+                        }
+                    }
+                });
+
+                $add.on("click", function (event) {
+
+                    if (readonly || disabled) return;
+
+                    var val = $input.val();
+                    var floatVal = parseFloat(val);
+                    var newVal = 0;
+
+                    if (floatVal + step <= max) {
+                        newVal = ratioNumber(floatVal + step, precision);
+                        $input.val(newVal);
+                        activeEvent("change", event, $add, newVal, $dom);
+                    } else {
+                        newVal = ratioNumber(max, precision);
+                        $input.val(newVal);
+                        if (floatVal === max) {
+                            activeEvent("toMax", event, $add, newVal, $dom);
+                        } else {
+                            activeEvent("change", event, $add, newVal, $dom);
+                        }
+                    }
+                });
+
+                $container.append($subtract).append($input).append($add);
+
+                activeEvent("created", $dom);
+                $target.empty().append($container);
+                activeEvent("mounted", $dom);
+            })($(this))
+        })
+    }
+
+    exports("numberInput", {
+        render: render
+    });
+});