mirror of
https://gitee.com/ShopeX/OMS
synced 2026-03-30 13:05:34 +08:00
363 lines
14 KiB
HTML
363 lines
14 KiB
HTML
<!--
|
||
Copyright © ShopeX （http://www.shopex.cn）. All rights reserved.
|
||
See LICENSE file for license details.
|
||
-->
|
||
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Document</title>
|
||
<link rel="stylesheet" type="text/css" href="./common.css" />
|
||
<link rel="stylesheet" type="text/css" href="./delivery.css" />
|
||
<script src="./axios.min.js"></script>
|
||
<script src="./flexible.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="page flex-col">
|
||
<!-- heder -->
|
||
<div class="section_1">
|
||
<div class="text-wrapper_1 flex-row align-center justify-between">
|
||
<img src="./icon-back.png" class="icon-back">
|
||
<span class="text_1">验货退款</span>
|
||
<img src="./icon-refresh.png" class="icon-refresh">
|
||
</div>
|
||
</div>
|
||
<div class="main">
|
||
<div class="group_2 flex-col">
|
||
<div class="group_4 flex-row justify-between">
|
||
<span class="text_3">物流公司</span>
|
||
<div class="custom-select" data-name="express_company">
|
||
<div class="custom-select-trigger">
|
||
<span class="custom-select-value">圆通快递</span>
|
||
<img class="custom-select-arrow" referrerpolicy="no-referrer" src="./icon-arrow-down.png" />
|
||
</div>
|
||
<div class="custom-select-options">
|
||
<div class="custom-select-option" data-value="顺丰快递">顺丰快递</div>
|
||
<div class="custom-select-option selected" data-value="圆通快递">圆通快递</div>
|
||
<div class="custom-select-option" data-value="中通快递">中通快递</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="group_4 flex-row justify-between">
|
||
<span class="text_3">服务类型</span>
|
||
<div class="custom-select" data-name="express_type">
|
||
<div class="custom-select-trigger">
|
||
<span class="custom-select-value">标准快递2</span>
|
||
<img class="custom-select-arrow" referrerpolicy="no-referrer" src="./icon-arrow-down.png" />
|
||
</div>
|
||
<div class="custom-select-options">
|
||
<div class="custom-select-option" data-value="标准快递1">标准快递1</div>
|
||
<div class="custom-select-option selected" data-value="标准快递2">标准快递2</div>
|
||
<div class="custom-select-option" data-value="标准快递3">标准快递3</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="group_4 flex-row justify-between">
|
||
<span class="text_3">月结账号</span>
|
||
<div class="custom-select" data-name="express_account">
|
||
<div class="custom-select-trigger">
|
||
<span class="custom-select-value">465347547658</span>
|
||
<img class="custom-select-arrow" referrerpolicy="no-referrer" src="./icon-arrow-down.png" />
|
||
</div>
|
||
<div class="custom-select-options">
|
||
<div class="custom-select-option selected" data-value="465347547658">465347547658</div>
|
||
<div class="custom-select-option" data-value="1">1</div>
|
||
<div class="custom-select-option" data-value="2">2</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="group_4 flex-row justify-between">
|
||
<span class="text_3">取件时间</span>
|
||
<div class="custom-select" data-name="express_time" id="express_time">
|
||
<div class="custom-select-trigger">
|
||
<span class="custom-select-value">立即取件</span>
|
||
<img class="custom-select-arrow" referrerpolicy="no-referrer" src="./icon-arrow-down.png" />
|
||
</div>
|
||
<div class="custom-select-options">
|
||
<div class="custom-select-option selected" data-value="now">立即取件</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="group_4 flex-row justify-between">
|
||
<span class="text_3">是否打印</span>
|
||
<div class="custom-select" data-name="express_print">
|
||
<div class="custom-select-trigger">
|
||
<span class="custom-select-value">是</span>
|
||
<img class="custom-select-arrow" referrerpolicy="no-referrer" src="./icon-arrow-down.png" />
|
||
</div>
|
||
<div class="custom-select-options">
|
||
<div class="custom-select-option selected" data-value="1">是</div>
|
||
<div class="custom-select-option" data-value="0">否</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- goodsInfo -->
|
||
<div class="section_4 flex-col">
|
||
<div class="list-item">
|
||
<div class="section_6 flex-row">
|
||
<img class="image_2" referrerpolicy="no-referrer"
|
||
src="https://lanhu-oss.lanhuapp.com/SketchPng347d1d203f86e105cbef42b744b03da47241ba9d50ca664284da54791756c794" />
|
||
<div class="text-group_1 flex-col">
|
||
<div class="status-info"> <span class="text_28 flex-shrink-1">MAX MARA女士薄款全羊毛LOGO围巾 绿色</span>
|
||
<!-- <span class="status-returned">已退货</span> -->
|
||
</div>
|
||
<span class="text_29">商品货号：787876756454</span>
|
||
<span class="text_30">1件；颜色：绿色；尺寸：M</span>
|
||
<span class="text_31">￥1800.00</span>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="section_6 flex-row">
|
||
<img class="image_2" referrerpolicy="no-referrer"
|
||
src="https://lanhu-oss.lanhuapp.com/SketchPng347d1d203f86e105cbef42b744b03da47241ba9d50ca664284da54791756c794" />
|
||
<div class="text-group_1 flex-col">
|
||
<div class="status-info"> <span class="text_28 flex-shrink-1">MAX MARA女士薄款全羊毛LOGO围巾 绿色</span>
|
||
</div>
|
||
<span class="text_29">商品货号：787876756454</span>
|
||
<span class="text_30">1件；颜色：绿色；尺寸：M</span>
|
||
<span class="text_31">￥1800.00</span>
|
||
</div>
|
||
</div>
|
||
<div class="section_6 flex-row">
|
||
<img class="image_2" referrerpolicy="no-referrer"
|
||
src="https://lanhu-oss.lanhuapp.com/SketchPng347d1d203f86e105cbef42b744b03da47241ba9d50ca664284da54791756c794" />
|
||
<div class="text-group_1 flex-col">
|
||
<div class="status-info"> <span class="text_28 flex-shrink-1">MAX MARA女士薄款全羊毛LOGO围巾 绿色</span>
|
||
</div>
|
||
<span class="text_29">商品货号：787876756454</span>
|
||
<span class="text_30">1件；颜色：绿色；尺寸：M</span>
|
||
<span class="text_31">￥1800.00</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="delivery-footer justify-between">
|
||
<button class="delivery-footer-btn modal-confirm" onclick="submitDelivery()">发货</button>
|
||
</div>
|
||
</div>
|
||
<div class="mask" id="mask"></div>
|
||
<div class="toast" id="toast"></div>
|
||
<!-- 弹窗组件 -->
|
||
<!-- 弹窗组件模板 -->
|
||
<div class="modal" id="commonModal" style="display: none;">
|
||
<div class="modal-mask"></div>
|
||
<div class="modal-container">
|
||
<div class="modal-header">
|
||
<h3 class="modal-title"></h3>
|
||
<span class="modal-close">×</span>
|
||
</div>
|
||
<div class="modal-content">
|
||
<!-- 动态内容区域 -->
|
||
</div>
|
||
<div class="modal-footer justify-between">
|
||
<button class="modal-btn modal-cancle">取消</button>
|
||
<button class="modal-btn modal-confirm">确定</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 引入共用的js -->
|
||
<script src="./common.js"></script>
|
||
<script>
|
||
// 初始化弹窗实例
|
||
const modal = new Modal();
|
||
// API 方法封装
|
||
const api = {
|
||
// 发货
|
||
delivery(params) {
|
||
return request.post('/delivery', params);
|
||
},
|
||
// 打印
|
||
print(params) {
|
||
return request.post('/print', params);
|
||
}
|
||
};
|
||
// 生成取件时间选项
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
const selectBox = document.getElementById('express_time');
|
||
const optionsContainer = selectBox.querySelector('.custom-select-options');
|
||
const now = new Date();
|
||
const startHours = 9;
|
||
const endHours = 21;
|
||
|
||
for (let h = 0; h <= endHours; h++) {
|
||
const h_str = h.toString().padStart(2, '0');
|
||
// 判断是否需要禁用
|
||
const disabled_0 = h < startHours;
|
||
const disabled_30 = (h < startHours || h === endHours);
|
||
|
||
if (!disabled_0) {
|
||
const option = document.createElement('div');
|
||
option.className = 'custom-select-option';
|
||
option.setAttribute('data-value', `${h_str}:00`);
|
||
option.textContent = `${h_str}:00`;
|
||
optionsContainer.appendChild(option);
|
||
}
|
||
if (!disabled_30) {
|
||
const option = document.createElement('div');
|
||
option.className = 'custom-select-option';
|
||
option.setAttribute('data-value', `${h_str}:30`);
|
||
option.textContent = `${h_str}:30`;
|
||
optionsContainer.appendChild(option);
|
||
}
|
||
}
|
||
|
||
// 初始化自定义下拉组件
|
||
initCustomSelects();
|
||
})
|
||
|
||
// 初始化自定义下拉组件功能
|
||
function initCustomSelects() {
|
||
const customSelects = document.querySelectorAll('.custom-select');
|
||
|
||
customSelects.forEach(select => {
|
||
const trigger = select.querySelector('.custom-select-trigger');
|
||
const options = select.querySelector('.custom-select-options');
|
||
const valueSpan = select.querySelector('.custom-select-value');
|
||
const arrow = select.querySelector('.custom-select-arrow');
|
||
|
||
// 点击触发器切换下拉菜单
|
||
trigger.addEventListener('click', function(e) {
|
||
e.stopPropagation();
|
||
|
||
// 关闭其他已打开的下拉菜单
|
||
customSelects.forEach(otherSelect => {
|
||
if (otherSelect !== select) {
|
||
otherSelect.classList.remove('active');
|
||
}
|
||
});
|
||
|
||
// 切换当前下拉菜单
|
||
select.classList.toggle('active');
|
||
});
|
||
|
||
// 点击选项
|
||
const optionElements = select.querySelectorAll('.custom-select-option');
|
||
optionElements.forEach(option => {
|
||
option.addEventListener('click', function(e) {
|
||
e.stopPropagation();
|
||
|
||
// 移除其他选项的选中状态
|
||
optionElements.forEach(opt => opt.classList.remove('selected'));
|
||
|
||
// 设置当前选项为选中状态
|
||
option.classList.add('selected');
|
||
|
||
// 更新显示值
|
||
valueSpan.textContent = option.textContent;
|
||
|
||
// 关闭下拉菜单
|
||
select.classList.remove('active');
|
||
});
|
||
});
|
||
});
|
||
|
||
// 点击页面其他地方关闭所有下拉菜单
|
||
document.addEventListener('click', function() {
|
||
customSelects.forEach(select => {
|
||
select.classList.remove('active');
|
||
});
|
||
});
|
||
}
|
||
|
||
// 发货
|
||
async function submitDelivery() {
|
||
const formData = {};
|
||
const form = document.querySelector('.group_2');
|
||
const inputs = form.querySelectorAll('input');
|
||
const customSelects = form.querySelectorAll('.custom-select');
|
||
|
||
let isValid = true;
|
||
|
||
// 遍历所有输入框
|
||
inputs.forEach(input => {
|
||
const value = input.value.trim();
|
||
const name = input.getAttribute('name');
|
||
|
||
// 验证必填项
|
||
if (!value) {
|
||
showToast(`请填写${input.getAttribute('placeholder') || '必填项'}`);
|
||
isValid = false;
|
||
return;
|
||
}
|
||
|
||
formData[name] = value;
|
||
});
|
||
|
||
// 遍历所有自定义下拉框
|
||
customSelects.forEach(select => {
|
||
const name = select.getAttribute('data-name');
|
||
const selectedOption = select.querySelector('.custom-select-option.selected');
|
||
|
||
if (!selectedOption) {
|
||
showToast(`请选择${name}`);
|
||
isValid = false;
|
||
return;
|
||
}
|
||
|
||
formData[name] = selectedOption.getAttribute('data-value');
|
||
});
|
||
console.log("🚀🚀🚀 ~ file: new_delivery.html:567 ~ submitDelivery ~ formData:", formData)
|
||
|
||
if (!isValid) {
|
||
return;
|
||
}
|
||
|
||
if (formData.express_print === '1') {
|
||
// 发送打印请求
|
||
try {
|
||
const printRes = await api.print(formData);
|
||
} catch (error) {
|
||
console.error('打印失败:', error);
|
||
showToast('打印失败');
|
||
return;
|
||
}
|
||
showLoading('正在打印中...');
|
||
// 轮询检查打印状态
|
||
let printSuccess = false;
|
||
let retryCount = 0;
|
||
const maxRetries = 3; // 最多轮询30次
|
||
|
||
while (!printSuccess && retryCount < maxRetries) {
|
||
await new Promise(resolve => setTimeout(resolve, 1000)); // 等待1秒
|
||
try {
|
||
const checkRes = await api.print({ ...formData, check: true });
|
||
if (checkRes.status === 'success') {
|
||
printSuccess = true;
|
||
showToast('打印成功');
|
||
break;
|
||
}
|
||
} catch (err) {
|
||
console.error('检查打印状态失败:', err);
|
||
}
|
||
retryCount++;
|
||
}
|
||
|
||
if (!printSuccess) {
|
||
showToast('打印超时,请重试');
|
||
// throw new Error('打印超时,请重试'); // 如果打印不成功，不能发货，需要放开这个
|
||
}
|
||
hideLoading()
|
||
}
|
||
|
||
// 无论是否打印成功，都调用发货接口
|
||
try {
|
||
// 调用发货API
|
||
await api.delivery(formData);
|
||
showToast('发货成功');
|
||
// 关闭弹窗
|
||
modal.hide();
|
||
} catch (error) {
|
||
console.error('发货失败:', error);
|
||
showToast('发货失败');
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html> |