From c014190d15b41704085d2e96b3fb51d39d8c2016 Mon Sep 17 00:00:00 2001
From: KKSU <15274802129@163.com>
Date: Wed, 12 Feb 2025 13:39:07 +0800
Subject: [PATCH] refactor(mall): 优化订单商品名称的显示格式
---
src/main/resources/templates/febs/views/modules/order/orderList.html | 320 +++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 270 insertions(+), 50 deletions(-)
diff --git a/src/main/resources/templates/febs/views/modules/order/orderList.html b/src/main/resources/templates/febs/views/modules/order/orderList.html
index 5731049..ee8d91e 100644
--- a/src/main/resources/templates/febs/views/modules/order/orderList.html
+++ b/src/main/resources/templates/febs/views/modules/order/orderList.html
@@ -7,9 +7,9 @@
<div class="layui-form-item">
<div class="layui-col-md10">
<div class="layui-inline">
- <label class="layui-form-label">用户名：</label>
+ <label class="layui-form-label">购买人：</label>
<div class="layui-input-inline">
- <input type="text" placeholder="用户名" name="name" autocomplete="off" class="layui-input">
+ <input type="text" placeholder="购买人" name="name" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
@@ -19,7 +19,7 @@
</div>
</div>
<div class="layui-inline">
- <label class="layui-form-label layui-form-label-sm">订单状态</label>
+ <label class="layui-form-label layui-form-label-sm">状态</label>
<div class="layui-input-inline">
<select name="status">
<option value="">请选择</option>
@@ -65,14 +65,14 @@
<label class="layui-form-label layui-form-label-sm">开始时间</label>
<div class="layui-input-inline">
<input type="text" name="startTime" id="febs-form-group-date-start" lay-verify="date"
- placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
+ placeholder="yyyy-MM-dd HH:mm:ss" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label layui-form-label-sm">结束时间</label>
<div class="layui-input-inline">
<input type="text" name="endTime" id="febs-form-group-date-end" lay-verify="date"
- placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
+ placeholder="yyyy-MM-dd HH:mm:ss" autocomplete="off" class="layui-input">
</div>
</div>
</div>
@@ -89,7 +89,7 @@
</form>
<table lay-filter="orderTable" lay-data="{id: 'orderTable'}"></table>
<style type="text/css">
- .layui-table-cell{
+ .layui-table cell{
text-align:center;
height: auto;
white-space: nowrap; /*文本不会换行，在同一行显示*/
@@ -98,6 +98,11 @@
}
.layui-table img{
max-width:100px
+ }
+
+ ::-webkit-scrollbar {
+ height: 20px !important;
+ background-color: #f4f4f4;
}
</style>
</div>
@@ -113,7 +118,7 @@
<a lay-event="edit" shiro:hasPermission="user:update"><i
class="layui-icon febs-edit-area febs-blue"></i></a>
</script>
-<script type="text/html" id="tableToolBar">
+<script type="text/html" id="tableToolBarOrder">
<div class="layui-btn-container">
<!-- <button class="layui-btn layui-btn-sm layui-btn-primary febs-button-blue-plain" lay-event="exportDeliverOne">导出待发货订单,系统自动发货</button>-->
<!-- <button class="layui-btn layui-btn-sm layui-btn-primary febs-button-blue-plain" lay-event="confirmOrder">确认到货</button>-->
@@ -138,18 +143,21 @@
$reset = $view.find('#reset'),
$searchForm = $view.find('form'),
$add = $view.find('#add'),
- sortObject = {field: 'phone', type: null},
+ sortObject = {field: 'orderTime', type: 'desc'},
formSelects = layui.formSelects,
laydate = layui.laydate,
tableIns;
+ let currPageOrder = 1;//首先默认值为1，防止出错
+ //获取当前页
+ currPageOrder = $view.find(".layui-laypage-em").next().html();
//日期范围
laydate.render({
- elem: '#febs-form-group-date-start'
+ elem: '#febs-form-group-date-start',type: 'datetime'
});
laydate.render({
- elem: '#febs-form-group-date-end'
+ elem: '#febs-form-group-date-end',type: 'datetime'
});
@@ -187,19 +195,24 @@
printSelect(checkStatus.data)
}
}
+ let statisticIds = 0;
if(event === 'goodsStatistics'){
var data = checkStatus.data;
let statistics = 0;
for(let i = 0;i < data.length;i++){
statistics = statistics+ "," + data[i].id;
}
+ console.log(statistics);
if(statistics == null || statistics == ""){
febs.alert.warn('请选择需要统计的订单');
return;
}
- febs.modal.open( '商品数量统计', 'modules/order/goodsStatistics/'+statistics, {
+ statisticIds = statistics;
+ console.log(statisticIds);
+ febs.modal.open( '商品数量统计', 'modules/order/goodsStatistics/'+statisticIds, {
maxmin: true,
});
+ statistics = 0;
// febs.get(ctx + 'admin/order/goodsStatistics?orderIds='+ids, null, function () {
// febs.alert.success('操作成功');
// $query.click();
@@ -300,6 +313,8 @@
,accept: 'file' //普通文件
,done: function(res){
console.log("123");
+ febs.alert.success('操作成功');
+ $query.click();
}
});
@@ -309,9 +324,22 @@
layEvent = obj.event;
if (layEvent === 'deliverGoods') {
febs.modal.open('发货', 'modules/order/deliverGoods/' + data.id, {
- btn: ['确认', '取消'],
+ btn: ['确认','取消'],
yes: function (index, layero) {
$('#deliver-update').find('#submit').trigger('click');
+ // $query.click();
+ },
+ btn2: function () {
+ layer.closeAll();
+ }
+ });
+ }
+ if (layEvent === 'updateDeliver') {
+ febs.modal.open('修改物流信息', 'modules/order/deliverGoods/' + data.id, {
+ btn: ['确认','取消'],
+ yes: function (index, layero) {
+ $('#deliver-update').find('#deliverInfoSubmit').trigger('click');
+ // $query.click();
},
btn2: function () {
layer.closeAll();
@@ -326,6 +354,16 @@
if (layEvent === 'cancelOrder') {
febs.modal.confirm('取消订单', '确认取消订单？', function () {
cancelOrder(data.id);
+ });
+ }
+ if (layEvent === 'deliverPdfGoods') {
+ febs.modal.confirm('一键发货', '确认一键发货？', function () {
+ deliverPdfGoods(data.id);
+ });
+ }
+ if (layEvent === 'cancelDeliver') {
+ febs.modal.confirm('取消发货', '确认取消发货？', function () {
+ cancelDeliver(data.id);
});
}
if (layEvent === 'seePayImage') {
@@ -345,6 +383,13 @@
}
});
+ function cancelDeliver(id) {
+ febs.get(ctx + 'admin/order/cancelDeliver/' + id, null, function (data) {
+ febs.alert.success(data.message);
+ $query.click();
+ });
+ }
+
function cancelOrder(id) {
febs.get(ctx + 'admin/order/cancelOrder/' + id, null, function () {
febs.alert.success('操作成功');
@@ -352,17 +397,193 @@
});
}
+ function deliverPdfGoods(id) {
+ febs.get(ctx + 'admin/order/deliverPdfGoods/' + id, null, function (e) {
+ if (e.code == 200) {
+ // 创建弹层容器
+ const content = `
+ <div style="position:relative;min-height:500px">
+ <div id="pdfContainer" style="margin:20px auto;max-width:800px"></div>
+ <div class="layui-form" style="text-align:center;margin-top:20px">
+ <button class="layui-btn layui-btn-normal" onclick="printPdf()">打印</button>
+ </div>
+ </div>
+ `;
+
+ // 显示弹层
+ const index = layer.open({
+ type: 1,
+ title: "电子面单",
+ content: content,
+ area: ['90%', '90%'],
+ success: function() {
+ // 渲染PDF
+ renderPdf(e.data.pdfStream);
+ }
+ });
+ // 存储当前PDF数据
+ window.currentPDF = e.data.pdfStream;
+ } else {
+ febs.alert.warn(e.message);
+ }
+ });
+ $query.click();
+ }
+
+ // PDF渲染函数
+ function renderPdf(base64Data) {
+ // 清理容器
+ const container = document.getElementById('pdfContainer');
+ container.innerHTML = '';
+
+ // Base64转Blob
+ const byteCharacters = atob(base64Data);
+ const byteNumbers = new Array(byteCharacters.length);
+ for (let i = 0; i < byteCharacters.length; i++) {
+ byteNumbers[i] = byteCharacters.charCodeAt(i);
+ }
+ const byteArray = new Uint8Array(byteNumbers);
+ const blob = new Blob([byteArray], {type: 'application/pdf'});
+
+ // 生成临时URL
+ const url = URL.createObjectURL(blob);
+
+ // 使用PDF.js渲染
+ pdfjsLib.getDocument(url).promise.then(pdf => {
+ // 循环渲染所有页面
+ for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
+ pdf.getPage(pageNum).then(page => {
+ const scale = 1.5;
+ const viewport = page.getViewport({scale: scale});
+ const canvas = document.createElement('canvas');
+ const context = canvas.getContext('2d');
+ canvas.height = viewport.height;
+ canvas.width = viewport.width;
+
+ // 创建页面容器
+ const pageDiv = document.createElement('div');
+ pageDiv.className = 'pdf-page';
+ pageDiv.style.margin = '10px 0';
+ container.appendChild(pageDiv);
+
+ // 渲染到Canvas
+ page.render({
+ canvasContext: context,
+ viewport: viewport
+ }).promise.then(() => {
+ pageDiv.appendChild(canvas);
+ });
+ });
+ }
+ });
+ }
+
+ // 打印函数
+ window.printPdf = function() {
+ let base64Image = window.currentPDF;
+ const printWindow = window.open('', '_blank');
+ printWindow.document.write(`
+ <html>
+ <head>
+ <title>电子面单打印</title>
+ <style>
+ body { margin: 0; padding: 20px }
+ canvas {
+ width: 100%!important;
+ height: auto!important;
+ page-break-after: always;
+ }
+ </style>
+ </head>
+ <body>
+ <iframe src="data:application/pdf;base64,`+base64Image+`" width="100%" height="100%"></iframe>
+ </body>
+ </html>
+ `);
+ printWindow.document.close();
+ printWindow.onload = function() {
+ printWindow.print();
+ printWindow.close();
+ }
+ }
+
+ // function deliverPdfGoods(id) {
+ // febs.get(ctx + 'admin/order/deliverPdfGoods/' + id, null, function (e) {
+ // if(e.code == 200){
+ // console.info(e.data);
+ // console.info(e.data.pdfStream);
+ // console.info(e.data.result);
+ // layer.open({
+ // type: 1,
+ // title: "电子面单",
+ // skin: 'layui-layer-rim', //加上边框
+ // area: ['100%', '100%'], //宽高
+ // shadeClose: true, //开启遮罩关闭
+ // end: function (index, layero) {
+ // return false;
+ // },
+ // content: '<div class="layui-card-body" id="pdfViewer"></div>'
+ // });
+ // if(e.data.pdfStream === null){
+ //
+ // renderPdf(e.data.pdfStreamList);
+ // }
+ // renderPdf(e.data.pdfStream);
+ // }else{
+ // febs.alert.warn(e.message);
+ // }
+ // $query.click();
+ // });
+ // }
+
+ // 渲染 PDF 到页面
+ // function renderPdf(base64Data) {
+ // // Base64 转 Blob
+ // const byteCharacters = atob(base64Data);
+ // const byteNumbers = new Array(byteCharacters.length);
+ // for (let i = 0; i < byteCharacters.length; i++) {
+ // byteNumbers[i] = byteCharacters.charCodeAt(i);
+ // }
+ // const byteArray = new Uint8Array(byteNumbers);
+ // const blob = new Blob([byteArray], {type: 'application/pdf'});
+ //
+ // // 生成临时 URL
+ // const url = URL.createObjectURL(blob);
+ //
+ // // 使用 PDF.js 渲染
+ // pdfjsLib.getDocument(url).promise.then(function(pdf) {
+ // pdf.getPage(1).then(function(page) {
+ // const scale = 1.5;
+ // const viewport = page.getViewport({scale: scale});
+ // const canvas = document.createElement('canvas');
+ // const context = canvas.getContext('2d');
+ // canvas.height = viewport.height;
+ // canvas.width = viewport.width;
+ //
+ // // 将 PDF 页面渲染到 Canvas
+ // page.render({
+ // canvasContext: context,
+ // viewport: viewport
+ // }).promise.then(function() {
+ // $('#pdfViewer').html(canvas);
+ // });
+ // });
+ // }).catch(function(error) {
+ // layer.msg('PDF渲染失败: ' + error.message, {icon: 2});
+ // });
+ // }
+
// 查询按钮
$query.on('click', function () {
var params = $.extend(getQueryParams(), {field: sortObject.field, order: sortObject.type});
- tableIns.reload({where: params, page: {curr: 1}});
+ tableIns.reload({where: params, page: {curr: currPageOrder}});
});
// 刷新按钮
$reset.on('click', function () {
$searchForm[0].reset();
sortObject.type = 'null';
- tableIns.reload({where: getQueryParams(), page: {curr: 1}, initSort: sortObject});
+ tableIns.reload({where: getQueryParams(), page: {curr: currPageOrder}, initSort: sortObject});
});
$add.on('click', function () {
@@ -374,28 +595,22 @@
elem: $view.find('table'),
id: 'orderTable',
url: ctx + 'admin/order/orderList?orderType=1',
- defaultToolbar: [],
- toolbar: '#tableToolBar',
+ // defaultToolbar: [],
+ //系统自带打印导出
+ totalRow : true,
+ toolbar: '#tableToolBarOrder',
cols: [[
{type: 'checkbox', fixed: 'left'},
- {field: 'orderNo', title: '订单编号', minWidth: 200,align:'left'},
+ {field: 'orderNo', title: '订单编号', minWidth: 200,align:'left' ,totalRowText:"合计"},
{field: 'memberName', title: '购买人', minWidth: 100,align:'left'},
{field: 'memberPhone', title: '联系方式', minWidth: 120,align:'left'},
- // {field: 'memberBindPhone', title: '联系方式', minWidth: 120,align:'left'},
+ {field: 'refererName', title: '推荐人', minWidth: 100,align:'left'},
{field: 'goodsName', title: '商品', minWidth: 160,align:'left'},
- {field: 'amount', title: '订单金额', minWidth: 160,align:'left'},
- // {field: 'leaderName', title: '团长', minWidth: 120,align:'left'},
+ {field: 'remark', title: '备注', minWidth: 160,align:'left'},
+ {field: 'goodsAmount', title: '价格', minWidth: 80,align:'left', totalRow:true},
+ {field: 'carriage', title: '邮费', minWidth: 80,align:'left', totalRow:true},
+ {field: 'amount', title: '总金额', minWidth: 100,align:'left', totalRow:true},
{field: 'orderTime', title: '下单时间', minWidth: 200,align:'left'},
- // {field: 'isHome', title: '配送方式',
- // templet: function (d) {
- // if (d.isHome === 2) {
- // return '<span style="color:dodgerblue;">自提</span>'
- // } else if (d.isHome === 1) {
- // return '<span style="color:forestgreen;">送货上门</span>'
- // }else{
- // return ''
- // }
- // }, minWidth: 100,align:'center'},
{field: 'status', title: '状态',
templet: function (d) {
if (d.status === 1) {
@@ -416,26 +631,31 @@
return ''
}
}, minWidth: 80,align:'center'},
- {field: 'deliveryState', title: '配送状态',
- templet: function (d) {
- if (d.deliveryState === 1) {
- return '<span style="color:dodgerblue;">待配送</span>'
- } else if (d.deliveryState === 2) {
- return '<span style="color:forestgreen;">配送中</span>'
- } else if (d.deliveryState === 3) {
- return '<span style="color:forestgreen;">已送达</span>'
- }else{
- return ''
- }
- }, minWidth: 80,align:'center'},
+ // {field: 'deliveryState', title: '配送状态',
+ // templet: function (d) {
+ // if (d.deliveryState === 1) {
+ // return '<span style="color:dodgerblue;">待配送</span>'
+ // } else if (d.deliveryState === 2) {
+ // return '<span style="color:forestgreen;">配送中</span>'
+ // } else if (d.deliveryState === 3) {
+ // return '<span style="color:forestgreen;">已送达</span>'
+ // }else{
+ // return ''
+ // }
+ // }, minWidth: 80,align:'center'},
{field: 'payMethod', title: '支付方式', minWidth: 100,align:'left'},
{field: 'payTime', title: '支付时间', minWidth: 120,align:'left'},
// {field: 'wxOrderNo', title: '支付订单号', minWidth: 120,align:'left'},
{title: '操作',
templet: function (d) {
if(d.status === 2){
+ return '<button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="deliverPdfGoods" shiro:hasPermission="user:update">一键发货</button>'
+ +'<button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="seeOrder" shiro:hasPermission="user:update">详情</button>'
+ // +'<button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="deliverGoods" shiro:hasPermission="user:update">发货</button>'
+ }else if(d.status === 3){
return '<button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="seeOrder" shiro:hasPermission="user:update">详情</button>'
- +'<button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="deliverGoods" shiro:hasPermission="user:update">发货</button>'
+ +'<button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="cancelDeliver" shiro:hasPermission="user:update">取消发货</button>'
+ // +'<button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="updateDeliver" shiro:hasPermission="user:update">修改物流信息</button>'
}else{
return '<button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="seeOrder" shiro:hasPermission="user:update">详情</button>'
}
@@ -512,7 +732,7 @@
//用于包含内容
var v = document.createElement("div");
//页面头部，导入css ，media="print"表示打印时使用该样式
- var f = ["<head>", "<style>", "div{font-size:8px;}", ".main{width:100%;height:20%}",
+ var f = ["<head>", "<style>", "div{font-size:8px;}", ".main{width:100%;}",
".main div{width:100%;display:inline-block;}", "</style>", "</head>"
].join("");
var contentHtml = "";
@@ -520,12 +740,12 @@
let data = allData[i]
var template =
"<div class='main'>" +
- // "<div style='text-align: center;font-size: 22px;font-weight: bold;margin-bottom: 30px'>订单详情</div>" +
- "<div>姓名：" + data.name + "</div><br><br>" +
- "<div>电话：" + data.phone + "</div><br><br>" +
- "<div>地址：" + data.address + "</div><br><br>" +
- "<div>编号：" + data.orderNo + "</div><br><br>" +
- "<div>商品：" + data.goodsName + "</div><br><br>" +
+ "<div style='text-align: center;font-size: 10px;font-weight: bold;margin-bottom: 10px'>订单编号：" + data.orderNo + "</div>" +
+ "<span style='font-size: 10px;font-weight: bold;'>收货人：</span><span>" + data.name + "，</span>" +
+ "<span style='font-size: 10px;font-weight: bold;'>电话：</span><span>" + data.phone + "，</span>" +
+ "<span style='font-size: 10px;font-weight: bold;'>地址：</span><span>" + data.address + "</span><br>" +
+ "<span style='font-size: 10px;font-weight: bold;'>商品：</span><span>" + data.goodsName + "</span><br>" +
+ "<span style='font-size: 10px;font-weight: bold;'>备注：</span><span>" + data.remark + "</span><br>" +
"</div>"
contentHtml += template;
--
Gitblit v1.9.1