gmcbrand
/
brand-productInput-pic.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="Responsive Admin Dashboard Template">
		<meta name="keywords" content="admin,dashboard">
		<meta name="author" content="skcats">
		<!-- The above 6 meta tags *must* come first in the head; any other head content must come *after* these tags -->

		<!-- Title -->
		<title>商品主图</title>

		<script src="commonCSS.js"></script>
		<script src="commonJS.js"></script>

	</head>

	<body>
		<!-- Page Inner -->
		<div class="page-inner">
			<div class="page-title">
				<h3 class="breadcrumb-header">商品主图</h3>
			</div>
			<!--
			<div class="alert alert-default" role="alert">
			    Simple, clean and engaging charts for designers and developers.
			</div> -->
			<div id="main-wrapper">
				<div class="modal fade" id="picModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close btn-cancel" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
								<h4 class="modal-title" id="addModalLabel">品牌信息</h4>
							</div>
							<div class="modal-body">
								<form action="" role="form" id="add-row-form">
									<div class="form-group">
										<div class="panel panel-white">
											<span class="text-danger">(建议图片大小160*80的jpg/png格式)</span>
											<div class="panel-heading clearfix">
												<h3 class="panel-title">品牌图片&nbsp;Brand Logo</h3>
											</div>
											<div class="panel-body">
												<div class="form-group">
													<div class="col-md-4 col-xs-4">
														<a href="#" class="thumbnail"> <img width="150px" height="150px" class="img-responsive" alt="品牌图片" src=""
															 id="addproduct-img">
														</a>
													</div>
													<div class="input-group col-md-6 col-md-offset-6">
														<input id="photoCover" class="form-control" readonly type="text" placeholder="您尚未选择任何文件"> <label class="input-group-btn">
															<input id="file" type="file" name="file" accept=".jpg" style="left: -9999px; position: absolute;"><span
															 class="btn btn-default">图片上传</span>
														</label>
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="form-group">
										<input type="hidden" name="id" class="form-control">
									</div>
								</form>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">取消</button>
								<button type="submit" id="add-row" class="btn btn-success" onclick="modifyPic()">确认</button>
							</div>
						</div>
					</div>
				</div>

				<div class="modal fade" id="modifyModal" tabindex="-1" role="dialog" aria-labelledby="modifyModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close btn-cancel" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
								<h4 class="modal-title" id="modifyModalLabel">品牌信息</h4>
							</div>
							<div class="modal-body">
								<form action="" role="form" id="modify-row-form">
									<div class="form-group">
										<input type="text" name="title" class="form-control" placeholder="请填写商品新标题" required>
									</div>
									<div class="form-group">
										<label for="cate">商品分类：</label>
										<select class="form-control pro-cate" name="c_id" placeholder="请选择商品类别">
										</select>
									</div>
									<div class="form-group">
										<input type="hidden" name="user_id" class="form-control">
										<input type="hidden" name="sku" class="form-control">
										<input type="hidden" name="stock" class="form-control">
										<input type="hidden" name="price" class="form-control">
										<input type="hidden" name="description" class="form-control">
										<input type="hidden" name="id" class="form-control">
										<input type="hidden" name="s_id" class="form-control">
									</div>
								</form>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">取消</button>
								<button type="submit" id="modify-row" class="btn btn-primary" onclick="modification()">确认</button>
							</div>
						</div>
					</div>
				</div>

				<div class="row">
					<div class="col-md-12">
						<div class="panel panel-white">
							<div class="panel-body" id="form-list">
								<div class="table-responsive">
									<table id="example1" class="display table" style="width: 100%; cellspacing: 0;">
										<thead>
											<tr>
												<th>商品标题</th>
												<th>分类</th>
												<th>主图</th>
												<th>状态</th>
												<th>管理</th>
											</tr>
										</thead>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- Main Wrapper -->
			<div class="page-footer">
			</div>
		</div>
		<!-- /Page Inner -->
		<script src="js/loadimg.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function Product(id, user_id, sku, title, price, stock, description, s_id, c_id, image_name) {
				this.title = title;
				this.c_id = c_id;
				this.user_id = user_id;
				this.sku = sku;
				this.price = price;
				this.stock = stock;
				this.description = description;
				this.s_id = s_id;
				this.id = id;
				this.image_name = image_name;
			}
			var cate = [];
			var state = [];
			$.ajax({
				type: "get",
				url: "http://localhost:88/product/allstate",
				headers: {
					"GMC-ACCESS-TOKEN": localStorage.getItem('token')
				},
				async: true,
				success: function(msg) {
					console.log(msg.data);
					if (msg.code != 0) return;
					state = msg.data;
				},
				error: function(err) {
					console.log(err);
				}
			});
			var $table1 = $('#example1');
			$(window).resize(function() {
				$table1.bootstrapTable('resetView');
			});
			$(function() {
				selectInit(callbackCate);
				'use strict';
				$table1.bootstrapTable({
					method: 'get',
					url: "http://localhost:88/product/getProducts",
					ajaxOptions: {
						headers: {
							"GMC-ACCESS-TOKEN": localStorage.getItem('token')
						}
					},
					cache: false,
					striped: true,
					dataType: "json",
					dataField: "data",
					pagination: true,
					showPaginationSwitch: false,
					pageSize: 5,
					pageNumber: 1,
					sortable: true,
					sortOrder: "asc",
					pageList: [2, 5, 10],
					search: false,
					sidePagination: 'server',
					silent: true,
					uniqueId: 'id',
					idField: 'id',
					toolbarAlign: 'right',
					queryParamsType: 'limit',
					queryParams: queryParams,
					responseHandler: responseHandler,
					columns: [{
						field: 'title',
						align: 'center',
						valign: 'middle',
					}, {
						field: 'c_id',
						align: 'center',
						valign: 'middle',
						formatter: function(value, row, index) {
							var html = cate[value - 1].name;
							return html;
						}
					}, {
						field: 'image_name',
						align: 'center',
						valign: 'middle',
						formatter: function(value, row, index) {
							$img = $('<img src="" id="' + value + '" alt="商品主图">');
							$span = $('<span class="thumbnail"></span>');
							$img.attr("src", "http://39.108.126.105:8002/product/image?img_name=" + value);
							$span.attr("style",
								"width:64px;height:64px; background:url(http://www.86y.org/images/loading.gif) no-repeat center center;"
							);
							$span.append($img);
							//console.log($img.attr("id"));
							Imagess($img.attr("src"), $img.attr("id"), checkimg);
							$div = $('<div></div>');
							$div.append($span);
							/* var html = [
								'<span class="img-thumbnail"><img src="http://39.108.126.105:8002/product/image?img_name=' + value +
								'" style="width:64px;height:64px;"></img></span>'
							]; */
							var html = [
								$div.html()
							]
							return html.join('');
						}
					}, {
						field: 's_id',
						align: 'center',
						valign: 'middle',
						formatter: function(value, row, index) {
							var html;
							switch (value) {
								case 1:
									html = '<span class="label label-success">待入仓</span>';
									break;
								case 2:
									html = '<span class="label label-danger">入仓中</span>';
									break;
								case 3:
									html = '<span class="label label-warning">待上架</span>';
									break;
								case 4:
									html = '<span class="label label-warning">上架中</span>';
									break;
								default:
									html = '<span class="label label-default">已下架</span>';
									break;
							}
							return html;
						}
					}, {
						field: 'op',
						align: 'center',
						valign: 'middle',
						events: window.operateEvents,
						formatter: function(value, row, index) {
							//0待入仓 1入仓中 2待上架 3上架中
							var btn;
							switch (row.s_id) {
								case 1:
									btn =
										"<button type='button' class='op btn btn-success btn-xs btnOp'><i class='fa fa-product-hunt'></i>入仓</button>";
									break;
								case 2:
									btn =
										"<button type='button' class='op btn btn-success btn-xs btnOp'><i class='fa fa-product-hunt'></i>出货</button>";
									break;
								case 3:
									btn =
										"<button type='button' class='op btn btn-success btn-xs btnOp'><i class='fa fa-product-hunt'></i>上架</button>";
									break;
								case 4:
									btn =
										"<button type='button' class='op btn btn-success btn-xs btnOp'><i class='fa fa-product-hunt'></i>下架</button>";
									break;
								default:
									btn =
										"<button type='button' class='op btn btn-success btn-xs btnOp'><i class='fa fa-product-hunt'></i>重新上架</button>";
									break;
							}
							var html = [
								"<button type='button' style='margin-right: 5px;' class='op down btn btn-primary btn-xs btnEdit' data-toggle='modal' data-target='#picModal'><i class='fa fa-globe'></i>上传主图</button>",
								"<button type='button' style='margin-right: 5px;' class='op down btn btn-primary btn-xs btnEdit' data-toggle='modal' data-target='#modifyModal'><i class='fa fa-pencil'></i>修改</button>",
								"<button type='button' style='margin-right: 5px;' class='op delete btn btn-danger btn-xs btnDel'><i class='fa fa-trash-o'></i>删除</button>",
								btn
							];
							return html.join('');
						}
					}, {
						field: 'id',
						visible: false,
					}, {
						field: 'user_id',
						visible: false,
					}, {
						field: 'sku',
						visible: false,
					}, {
						field: 'price',
						visible: false,
					}, {
						field: 'stock',
						visible: false,
					}, {
						field: 'description',
						visible: false,
					}],
					onLoadSuccess: function(res) {

					},
					onLoadError: function(statusCode) {
						return "error"
					},
					formatLoadingMessage: function() {
						return "";
					},
					formatNoMatches: function() {
						return "";
					}
				});

			});
			window.operateEvents = {
				/**
				 * 注册操作按钮事件
				 */
				//编辑改行 为class属性为btnOp的所有元素注册click事件
				'click .btnOp': function(e, value, row, index) {
					stateSwitch(row);
				},

				//				'click .btnPic': function(e, value, row, index) {
				//					stateSwitch(row);
				//				},

				'click .btnEdit': function(e, value, row, index) {
					pushMessage(row);
					//document.forms['modify-row-form']['id'].value = row.id;
				},
				//删除改行
				'click .btnDel': function(e, value, row, index) {
					delData([row.id]); //传递数组
					//row代表改行对象,ID为该对象属性而已
				}
			};

			function pushMessage(row) {
				document.forms['modify-row-form']['id'].value = row.id;
				//alert(row.id);
				document.forms['modify-row-form']['user_id'].value = row.user_id;
				document.forms['modify-row-form']['sku'].value = row.sku;
				document.forms['modify-row-form']['price'].value = row.price;
				document.forms['modify-row-form']['stock'].value = row.stock;
				document.forms['modify-row-form']['description'].value = row.description;
				document.forms['modify-row-form']['s_id'].value = row.s_id;
			}

			$("#file").change(function(e) {
				var file = e.target.files[0] ||
					e.dataTransfer.files[0];
				$('#photoCover').val(document.getElementById("file").files[0].name);
				if (file) {
					var reader = new FileReader();
					reader.onload = function() {
						$("#addproduct-img").attr("src", this.result);
					}
					reader.readAsDataURL(file);
				}
			});

			function queryParams(params) {
				//console.log(params);
				var par = {
					page_num: params.offset / params.limit,
					page_size: params.limit,
					user_id: localStorage.getItem('user_id'),
				}
				console.log(par);
				return par;
			}

			function responseHandler(res) {
				console.log(res);
				var products = res.data.products;
				var arr = [];
				for (var i = 0; i < products.length; i++) {
					products[i].product['image_name'] = products[i].image_name;
					arr.push(products[i].product);
				}
				//console.log(arr);
				return {
					total: res.data.total,
					data: arr,
				}
			}

			function selectInit(callback) {
				// 执行一些动作...
				$.ajax({
					type: "get",
					url: "http://localhost:88/category/all",
					headers: {
						"GMC-ACCESS-TOKEN": localStorage.getItem('token')
					},
					async: true,
					success: function(CMD) {
						//console.log(msg);
						if (CMD.code != 0) return;
						var datas = CMD.data;
						var len = datas.length;
						cate = CMD.data;
						console.log(cate);
						var html = '';
						for (var i = 0; i < len; i++) {
							html += '<option value=' + datas[i].id + '>' + datas[i].name + '</option>';
						}
						callback(html);
					},
					error: function(err) {
						console.log(err);
					}
				});
			}

			function callbackCate(data) {
				$('#modifyModal').on('shown.bs.modal', function() {
					$('#modifyModal select').html(data);
				})
			}

			function modifyPic() {
				var file = document.getElementById("file").files[0];
				var id = document.forms['modify-row-form']['id'].value;
				//console.log('id');
				var formData = new FormData();
				formData.append('file', file);
				$.ajax({
					url: "http://localhost:88/product/imageUpload?pro_id=" + id,
					type: "post",
					headers: {
						"GMC-ACCESS-TOKEN": localStorage.getItem('token')
					},
					data: formData,
					contentType: false,
					processData: false,
					mimeType: "multipart/form-data",
					success: function(CMD) {
						CMD = JSON.parse(CMD);
						console.log(CMD);
						if (CMD.code != 0) {
							alert('添加失败！');
						} else {
							var product = new Product(CMD.data.id, CMD.data.user_id, CMD.data.sku, CMD.data.title, CMD.data.price, CMD.data
								.stock, CMD.data.description, CMD.data.s_id, CMD.data.c_id, CMD.data.image_name);
							console.log(product);
							$table1.bootstrapTable('updateByUniqueId', {
								id: CMD.data.id,
								row: product
							});
							$('#picModal').modal('hide');
							alert('修改成功！');
							refresh();
						}
					},
					error: function(data) {
						console.log(data);
					}
				});
			}

			function modification() {
				//var file = document.getElementById("file1").files[0];
				var title = document.forms['modify-row-form']['title'].value;
				var c_id = document.forms['modify-row-form']['c_id'].value;
				var id = document.forms['modify-row-form']['id'].value;
				var user_id = document.forms['modify-row-form']['user_id'].value;
				var sku = document.forms['modify-row-form']['sku'].value;
				var price = document.forms['modify-row-form']['price'].value;
				var stock = document.forms['modify-row-form']['stock'].value;
				var description = document.forms['modify-row-form']['description'].value;
				var s_id = document.forms['modify-row-form']['s_id'].value;
				//console('id');
				//var formData = new FormData();
				//formData.append('file', file);

				$.ajax({
					url: 'http://localhost:88/product/infoChange?id=' + id + '&c_id=' + c_id + '&price=' + price + '&description=' +
						description + '&s_id=' + s_id + '&stock=' + stock + '&title=' + title,
					type: "post",
					dataType: 'json',
					headers: {
						"GMC-ACCESS-TOKEN": localStorage.getItem('token')
					},
					contentType: false,
					processData: false,
					mimeType: "multipart/form-data",
					success: function(CMD) {
						console.log(CMD);
						if (CMD.code != 0) {
							alert('修改失败！');

						} else {
							var product = new Product(CMD.data.id, CMD.data.user_id, CMD.data.sku, CMD.data.title, CMD.data.price, CMD.data
								.stock, CMD.data.description, CMD.data.s_id, CMD.data.c_id, CMD.data.image_name);
							console.log(product);
							$table1.bootstrapTable('updateByUniqueId', {
								id: CMD.data.id,
								row: product
							});
							$('#modifyModal').modal('hide');
							alert('修改成功！');
							refresh();

						}
					},
					error: function(data) {
						console.log(data);
					}
				});
			}

			function stateSwitch(row) {
				console.log(row);

				row.s_id %= 5;
				row.s_id++;
				$.ajax({
					url: 'http://localhost:88/product/stateChange?id=' + row.id + '&s_name=' + state[row.s_id - 1].name,
					method: 'get',
					dataType: 'json',
					headers: {
						"GMC-ACCESS-TOKEN": localStorage.getItem('token')
					},
					async: true,
					success: function(data) {
						if (data.code != 0) {
							alert("信息有误！");
						} else {
							$table1.bootstrapTable('updateByUniqueId', {
								id: row.id,
								//								CMD.data.id, CMD.data.user_id, CMD.data.sku, CMD.data.title, CMD.data.price, CMD.data.stock, CMD.data.description, CMD.data.s_id, CMD.data.c_id,CMD.data.image_name
								row: new Product(row.id, row.user_id, row.sku, row.title, row.price, row.stock, row.description, row.s_id,
									row.c_id, row.image_name)
							});
							alert("修改成功！");
							refresh();
						}

					},
					error: function(err) {
						console.log(err);
					}
				});
			}

			//			function modifyPic(){
			//				//修改商品主图
			//			}

			function delData(strData) {
				//数据传输
				console.log(strData);
				if (confirm('确定要删除？')) {
					$.ajax({
						url: 'http://localhost:88/product/delete?id=' + strData[0],
						method: 'GET',
						headers: {
							"GMC-ACCESS-TOKEN": localStorage.getItem('token')
						},
						processData: false,
						success: function(msg) {
							console.log(msg);
							if (msg.code != 0) {
								alert('删除失败!');
							} else {
								$table1.bootstrapTable('remove', {
									field: 'id',
									values: [strData[0]]
								});
								alert('删除成功');
							}
						},
						error: function(err) {
							console.log(err);
						}
					});

				} else {
					console.log("Cancel");
					return false;
				}
			}

			function refresh() {
				$table1.bootstrapTable('refresh');
			}
			//			console.log(cate);
		</script>
	</body>

</html>