初始上传

addon/supermember/shop/view/public/css/order_list.css

@@ -0,0 +1,80 @@
+.layui-table {margin-top: 15px;}
+.layui-table thead tr {background-color: #F8F6F9;}
+.layui-table th {border-width: 0; font-size: 14px!important;}
+.layui-table td {padding: 8px 15px;}
+.layui-table .header-row {border-top: 1px solid #e6e6e6;background:  #f7f7f7;}
+.layui-table .header-row:hover{background: #f7f7f7 !important;}
+.separation-row hr {margin: 0;}
+
+/* .layui-layout-admin .layui-body{min-width:1100px} */
+/*.date-picker-btn.selected{background-color:#0d73f9;color:#fff}*/
+.layui-table td,.layui-table th,.layui-table-fixed-r,.layui-table-header,.layui-table-page,.layui-table-tips-main,.layui-table-tool,.layui-table-view,.layui-table[lay-skin=line],.layui-table[lay-skin=row]{border-color:#f1f1f1 !important;}
+.layui-table thead th{border-bottom:none;padding-left:0;padding-right:0;}
+.order-list-table .separation-row td{padding:10px 20px;border: 0;}
+.order-list-table .separation-row:hover{background-color: #fff;}
+.order-list-table .header-row td{padding: 8px 15px!important;}
+.order-list-table .header-row td:nth-child(1){border-right: 0;}
+.order-list-table .header-row td:nth-child(2){text-align:center;border-left: 0;}
+.order-list-table .header-row span{vertical-align:middle}
+.order-list-table .header-row td .order-item-header{text-align:left;color:#333;}
+.order-list-table .header-row td .order-item-header.more{cursor: pointer;overflow: hidden;position: relative;}
+.order-list-table .header-row td  .more-operation{display: none;font-size: 14px;line-height: 20px;background-color: #fff;border-radius: 2px;box-shadow: 0 2px 8px 0 rgba(200,201,204,.5);position: absolute;z-index: 2000;padding: 10px;top: 28px;transform: translateX(10px);left: -12px;width: 200px;}
+.order-list-table .header-row td  .more-operation:before{left: 8px;top: -14px;border: solid transparent;content: "";height: 0;width: 0;position: absolute;pointer-events: none;border-color: transparent;border-bottom-color: #fff;border-width: 8px;}
+.order-list-table .header-row td  .more-operation span{color:#333;}
+
+.order-list-table .checkbox-all .layui-table-cell{padding:0;text-align:center;}
+.order-list-table .product-info .layui-table-cell{padding:0 5px}
+.order-list-table .content-row:hover{background-color:#fff !important;}
+.order-list-table .content-row .product-info{border-right: 0;}
+.order-list-table .content-row .product-info .img-block{width:60px;height:60px;float:left;border:1px solid #e2e2e2;display: flex;align-items: center;justify-content: center;}
+.order-list-table .content-row .product-info .img-block>img{max-width:100%;max-height:100%;}
+.order-list-table .content-row .product-info .info{margin-left:70px}
+.order-list-table .content-row .product-info .info p{color:#8e8c8c;font-size:12px}
+.order-list-table .content-row .order-price{border-left: 0;}
+.order-list-table .content-row .product-list{border-right-width:1px}
+.order-list-table .content-row .product-list p{font-size:12px}
+.order-list-table .content-row .transaction-status{line-height: 24px;}
+.order-list-table .content-row .buyers{line-height: 24px;}
+.order-list-table .operation a{font-size: 14px;}
+.order-list-table .text-tile{color:rgb(164,164,164);}
+.order-no-data-block ul{width:200px;margin:20px auto; padding-bottom: 20px;}
+.order-no-data-block ul li{text-align:center;color:#c2c2c2}
+.order-no-data-block ul li:first-child{height:70px;line-height:70px}
+.order-no-data-block ul li:first-child i{font-size:35px}
+.footer-row{border:1px solid #f2f2f2}
+.screen{margin-top: 0;}
+
+/*.order-money span {color: red;}*/
+#order_page {text-align: right;}
+
+.table-tab .layui-tab-content {padding-top: 0;}
+.line-hiding{ cursor : default; -webkit-line-clamp: 2 !important;}
+.address_box{width:87%; display: inline-block}
+.address_input{width: 1px;height: 0px;overflow: hidden;border: 0px}
+.screen .layui-colla-title .layui-colla-icon{color:var(--base-color) !important}
+.screen .layui-colla-title .text-color{position: absolute;right: 45px;font-size: 14px;padding: 5px;}
+.operation .operation-type{display: block;}
+.operation .operation-type .layui-btn{display: inline;text-align: left;line-height: 23px;padding: 0px;margin: 0px;padding-left:8px;}
+.layui-colla-title .put-open{position: absolute;right: 40px;padding: 5px;color: var(--base-color) ;}
+
+/*订单顶部的一行*/
+.order-list-top-line{justify-content:flex-end;}
+.order-list-top-line a{padding-right: 0px !important;}
+
+.order-list-table .order-goods{align-items: flex-start !important;}
+.order-list-table .order-goods .info{margin-top: 3px;}
+.order-list-table .order-goods , .order-list-table .order-goods-item{display: flex;align-items: center;}
+.order-list-table .order-goods .img-block{margin-right: 10px;width: 60px;height: 60px;flex-shrink: 0;border: 1px solid #e2e2e2;display: flex;align-items: center;justify-content: center;}
+.order-list-table .order-goods .img-block{width: 105px;height: 63px;}
+.order-list-table .order-goods .img-block img{max-width: 100%;max-height: 100%;}
+.order-list-table .order-goods-item{margin-top: 10px;}
+ .content-row .order-price {
+    border-left: 0;
+}
+ .content-row .card-info {
+    border-right: 0;
+}
+
+.layui-card-body .content{width: 50%;}
+.layui-layout-admin .screen{margin-bottom: 15px;}
+.layui-layout-admin .layui-form-item .layui-input-inline{background-color: #fff;}

addon/supermember/shop/view/public/css/supermember.css

@@ -0,0 +1,29 @@
+.nav{background: #fff;padding: 20px;}
+.nav-bottom{display: flex;justify-content: space-between;}
+.flex-box{width: 24%;height: 85px;margin-right: 20px;display: flex;flex-direction: column;justify-content: space-between;align-items: center;padding: 20px 0;border-radius: 2px;}
+.flex-box:nth-child(4){margin-right:0px;}
+.title{font-size: 18px;}
+.num{font-size: 30px;font-weight: 400;text-align: center;color: #333;}
+.section{display: flex;justify-content: space-between;}
+.section-left{width: 830px;height: 600px;background: #fff;margin: 16px 20px 0 0;position: relative;}
+.member-detail{margin: 0 30px;height: 510px;overflow-y: auto;}
+.member-detail-item{padding: 010px;line-height: 50px;border-bottom: 1px solid #f8f8f8;display: flex;justify-content: space-between;}
+.member-detail-item .base-data-name span{display: inline-block;margin-right: 15px;}
+.section-right{width: 830px;height: 600px;background: #fff;margin-top: 16px;}
+.membership{font-size: 16px;display: flex;flex-direction: row;justify-content: space-between;align-items: center;}
+.no-data{font-size: 16px;font-weight: 100;text-align: center;margin-top: 300px;}
+.bottom{display: flex;justify-content: space-between;border-top:1px rgb(247,247,247)solid ;position: relative;bottom: -180px;}
+.card-number{font-size: 16px;font-weight: 100;margin:20px 30px 10px 30px;justify-content: space-around;}
+.membership{font-size: 16px;padding: 15px 20px;border-bottom: 1px solid #f8f8f8;}
+.membership-percent{font-size: 16px;margin-top: 20px;margin-left: 30px;}
+.layui-layout-admin .layui-body .body-content{background-color: #f8f8f8 !important;}
+.nav-screen{display: flex;flex-direction: row;}
+.screen-tab{display: flex;flex-direction: row;align-items: center;margin-bottom: 20px;}
+.screen-time{margin-left: 20px;}
+.screen-tab .tab-item{border: 1px solid #e6e6e6;border-right: 0;width: 60px;height: 30px;line-height: 30px;text-align: center;}
+.screen-tab .tab-item:last-of-type{border-right: 1px solid #e6e6e6;}
+.tab-item:hover, .timecursor:hover, .member-detail-item{cursor:pointer}
+.tab-item{position: relative;}
+.bgcolorse{background: var(--base-color);color: #fff;}
+.activeTab:after{content: "";display: block;position: absolute;border: 1px solid var(--base-color);top: 0;left: 0;right: 0;bottom: 0;}
+.layui-layout-admin .layui-body .body-content{padding: 0px !important;background-color: transparent !important;}

addon/supermember/shop/view/public/js/order_list.js

@@ -0,0 +1,263 @@
+/**
+ * 渲染订单列表
+ */
+Order = function () {};
+
+/**
+ * 设置数据集
+ */
+Order.prototype.setData = function (data) {
+	Order.prototype.data = data;
+};
+
+/**
+ * 列名数据
+ */
+Order.prototype.cols = [
+	{
+		type: 'checkbox',
+		fixed: 'left',
+		width: '3%',
+		merge: true,
+		template: function (orderitem, order) {
+			var json = {}
+			json.order_id = order.order_id;
+			json.order_no = order.order_no;
+			var h = '<div class="sub-selected-checkbox" data-json='+ JSON.stringify(json) +' data-id='+ order.order_id +' >';
+			h += '<input type="checkbox" lay-skin="primary" lay-filter="subCheckbox" name="" >';
+			h += '</div>';
+			return h;
+		}
+	},
+	{
+		title: '<span>会员卡</span>',
+		width: "25%",
+		className: "card-info",
+		template: function (orderitem, order) {
+			var h = '';
+			h += '<div class="order-goods">';
+				h += '<div class="info">';
+					h += '<div>'+orderitem.level_name+'</div><br>';
+				h += '</div>';
+			h += '</div>';
+			
+			return h;
+		}
+	},
+	{
+		title: "购买时长",
+		width: "8%",
+		align: "right",
+		className: "order-price",
+		template: function (orderitem, order) {
+
+			var str = '';
+			switch (orderitem.period_unit) {
+				case 'week':
+					str = '一周';
+					break;
+				case 'month':
+					str = '一月';
+					break;
+				case 'quarter':
+					str = '一季';
+					break;
+				case 'year':
+					str = '一年';
+					break;
+			}
+
+			var h = '<div style="padding-right: 15px;">';
+			h += '<div>';
+			h += '<span>'+str+'</span>';
+			h += '</div>';
+			h += '</div>';
+			return h;
+		}
+	},
+	{
+		title: "订单类型",
+		width: "10%",
+		align: "center",
+		className: "give_gift",
+		template: function (orderitem, order) {
+
+			var h = '';
+			h += '<div>'+(orderitem.order_type == 1 ? '开卡' : '续费')+'</div>';
+			return h;
+		}
+	},
+	{
+		title: "订单金额(元)",
+		width: "8%",
+		align: "right",
+		className: "order-money",
+		merge: true,
+		template: function (orderitem, order) {
+			var h = '<div style="padding-right: 15px;">';
+			h += '<span>' + orderitem.order_money + '</span>';
+			h += '</div>';
+			return h;
+		}
+	},
+	{
+		title: "买家",
+		width: "10%",
+		align: "center",
+		className: "member",
+		template: function (orderitem, order) {
+			var h = '<div style="text-align: center;">';
+				h += '<a href="' + ns.href("shop/member/editmember", {member_id: orderitem.buyer_id}) + '" target="_blank" class="multi-line-hiding text-color-sub text-color">' +orderitem.nickname + '</a>';
+				h += '';
+			h += '</div>';
+			return h;
+		}
+	},
+
+	{
+		title: "支付状态",
+		width: "10%",
+		align: "center",
+		className: "transaction-status",
+		merge: true,
+		template: function (orderitem, order) {
+			var html = '<div>' + (order.order_status == 1 ? '已支付' : order.order_status == 0 ? '待支付' : '已关闭') + '</div>';
+			return html;
+		}
+	},
+	{
+	    title : "支付时间",
+	    width : "15%",
+	    align : "center",
+	    className : "create-time",
+	    merge : true,
+	    template : function(orderitem,order){
+	        return '<div>' + ns.time_to_date(order.pay_time) + '</div>';
+	    }
+	},
+	{
+		title: "操作",
+		align: "right",
+		className: "operation",
+		width:"11%",
+		merge: true,
+		template: function (orderitem, order) {
+			var html='';
+			html += '<div>';
+				html += '<a class="layui-btn  text-color" href="'+ns.href("supermember://shop/membercard/orderdetail", {order_id: orderitem.order_id}) +'">详情</a>';
+			html += '</div>';
+			return html;
+
+		}
+	}
+];
+/**
+ * 渲染表头
+ */
+Order.prototype.header = function (hasThead) {
+	var colgroup = '<colgroup>';
+	var thead = '';
+	if (hasThead) thead = '<thead><tr>';
+	
+	for (var i = 0; i < this.cols.length; i++) {
+		var align = this.cols[i].align ? "text-align:" + this.cols[i].align : "";
+		
+		colgroup += '<col width="' + this.cols[i].width + '">';
+		if (hasThead) {
+			thead += '<th style="' + align + '" class="' + (this.cols[i].className || "") + '">';
+			thead += '<div class="layui-table-cell">';
+			if(this.cols[i].type){
+				thead += '<div class="all-selected-checkbox">';
+				thead += '<input type="checkbox" lay-skin="primary" lay-filter="allCheckbox" name="">';
+				thead += '</div>';
+			}else{
+				thead +=  this.cols[i].title;
+			}
+			thead += '</div>';
+			thead += '</th>';
+		}
+	}
+	colgroup += '</colgroup>';
+	if (hasThead) thead += '</tr></thead>';
+	return colgroup + thead;
+};
+
+/**
+ * 渲染内容
+ */
+Order.prototype.tbody = function () {
+
+	var tbody = '<tbody>';
+	for (var i = 0; i < this.data.list.length; i++) {
+
+		var order = this.data.list[i];
+		if (i > 0) {
+			//分割行
+			tbody += '<tr class="separation-row">';
+			tbody += '<td colspan="' + this.cols.length + '"></td>';
+			tbody += '</tr>';
+		}
+
+		//订单项头部
+		tbody += '<tr class="header-row">';
+		tbody += '<td colspan="9">';
+		tbody += '<span class="order-item-header" style="margin-right:10px;">订单号：' + order.order_no + '</span>';
+		tbody += '<span class="order-item-header text-color more" style="margin-right:50px;" onclick="showMore(' + order.order_id + ')">更多';
+		tbody += '<div class="more-operation" data-order-id="' + order.order_id + '">';
+			tbody += '<span>支付流水号：' + order.out_trade_no + '</span>';
+		tbody += '</div></span>';
+
+		tbody += '<span class="order-item-header" style="margin-right:50px;">下单时间：' + ns.time_to_date(order.create_time) + '</span>';
+		tbody += '<span class="order-item-header" style="margin-right:50px;">支付方式：'+ order.pay_type_name +'</span>';
+
+		tbody += '</td>';
+		tbody += '</tr>';
+
+		var orderitemHtml = '';
+		loadImgMagnify();
+		orderitemHtml += '<tr class="content-row">';
+		for (var k = 0; k < this.cols.length; k++) {
+			orderitemHtml += '<td class="' + (this.cols[k].className || "") + '" align="' + (this.cols[k].align || "") + '" style="' + (this.cols[k].style || "") + '" rowspan="' + order.length + '">';
+			orderitemHtml += this.cols[k].template(order, order);
+			orderitemHtml += '</td>';
+		}
+		orderitemHtml += '</tr>';
+
+		tbody += orderitemHtml;
+
+	}
+
+	tbody += '</tbody>';
+	return tbody;
+};
+
+/**
+ * 渲染表格
+ */
+Order.prototype.fetch = function () {
+	if (this.data.list.length > 0) {
+		return '<table class="layui-table layui-form">' + this.header(true) + '</table><table class="layui-table order-list-table layui-form">' + this.header(false) + this.tbody() + '</table>';
+	} else {
+		return '<table class="layui-table order-list-table layui-form">' + this.header(true) + '</table>' + '<div class="order-no-data-block"><ul><li><i class="layui-icon layui-icon-tabs"></i> </li><li>暂无订单</li></ul></div>';
+	}
+};
+
+function showMore(order_id) {
+	$(".more-operation[data-order-id]").hide();
+	$(".more-operation[data-order-id='" + order_id + "']").show();
+	$("body").bind('click',function (e) {
+		if (!$(e.target).closest(".order-item-header.more").length) {
+			$(".more-operation[data-order-id='" + order_id + "']").hide();
+			$("body").unbind('click');
+		}
+	});
+}
+$(".layui-colla-title").on("click", function(){
+    if($(".layui-colla-title>i").hasClass("layui-icon-down") === false && $(".layui-colla-title>i").hasClass("layui-icon-up") === false){
+        $(".layui-colla-title .put-open").html("展开");
+    }else if($(".layui-colla-title>i").hasClass("layui-icon-down") === true){
+        $(".layui-colla-title .put-open").html("展开");
+    }else if($(".layui-colla-title>i").hasClass("layui-icon-up") === true){
+        $(".layui-colla-title .put-open").html("收起");
+    }
+})