|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="zh-CN">
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>供应商审核系统</title>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
background-color: #f5f5f5;
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.container {
|
|
|
|
|
max-width: 1200px;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
|
|
|
padding: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
h1 {
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #1890ff;
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.search-bar {
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 10px;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.search-bar input {
|
|
|
|
|
flex: 1;
|
|
|
|
|
min-width: 200px;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
border: 1px solid #d9d9d9;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.search-bar button {
|
|
|
|
|
padding: 10px 20px;
|
|
|
|
|
background: rgba(24, 144, 255, 0.9);
|
|
|
|
|
backdrop-filter: blur(5px);
|
|
|
|
|
-webkit-backdrop-filter: blur(5px);
|
|
|
|
|
color: white;
|
|
|
|
|
border: 1px solid rgba(255, 255, 255, 0.5);
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
|
|
|
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
|
|
|
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.search-bar button:hover {
|
|
|
|
|
background: rgba(24, 144, 255, 1);
|
|
|
|
|
transform: scale(1.05);
|
|
|
|
|
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.supply-item {
|
|
|
|
|
border: 1px solid #e8e8e8;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 联系人分配区域样式 */
|
|
|
|
|
.supply-contact {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin: 15px 0;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
background-color: #f9f9f9;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.contact-label {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.contact-select {
|
|
|
|
|
padding: 8px 12px;
|
|
|
|
|
border: 1px solid #ddd;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background-color: white;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.contact-select:hover {
|
|
|
|
|
border-color: #ccc;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.contact-select:focus {
|
|
|
|
|
outline: none;
|
|
|
|
|
border-color: #4CAF50;
|
|
|
|
|
box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 联系人信息展示样式 */
|
|
|
|
|
.contact-info {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
gap: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.contact-name {
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.contact-phone {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #666;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 图片展示区域样式 */
|
|
|
|
|
.supply-images {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
margin: 12px 0;
|
|
|
|
|
gap: 8px;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.supply-image-item {
|
|
|
|
|
width: 100px;
|
|
|
|
|
height: 100px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
background-color: #f5f5f5;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
position: relative;
|
|
|
|
|
transition: transform 0.3s ease;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.supply-image-item:hover {
|
|
|
|
|
transform: scale(1.1);
|
|
|
|
|
z-index: 10;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.supply-image-item img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
display: block;
|
|
|
|
|
transition: none;
|
|
|
|
|
transform: translateZ(0);
|
|
|
|
|
backface-visibility: hidden;
|
|
|
|
|
image-rendering: -webkit-optimize-contrast;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-skeleton {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
background: linear-gradient(90deg, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%);
|
|
|
|
|
background-size: 200% 100%;
|
|
|
|
|
animation: loading 1.5s infinite;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 图片查看器样式 */
|
|
|
|
|
.image-viewer {
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.9);
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
z-index: 1000;
|
|
|
|
|
opacity: 0;
|
|
|
|
|
visibility: hidden;
|
|
|
|
|
transition: opacity 0.3s ease, visibility 0.3s ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-viewer.active {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
visibility: visible;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-viewer-content {
|
|
|
|
|
max-width: 90%;
|
|
|
|
|
max-height: 90%;
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
touch-action: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-viewer img {
|
|
|
|
|
max-width: none;
|
|
|
|
|
max-height: none;
|
|
|
|
|
width: auto;
|
|
|
|
|
height: auto;
|
|
|
|
|
object-fit: contain;
|
|
|
|
|
transition: transform 0.1s ease;
|
|
|
|
|
cursor: grab;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-viewer img:active {
|
|
|
|
|
cursor: grabbing;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-viewer-close {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 20px;
|
|
|
|
|
right: 20px;
|
|
|
|
|
width: 40px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
|
|
|
border: none;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
color: white;
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
transition: background-color 0.3s ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-viewer-close:hover {
|
|
|
|
|
background-color: rgba(255, 255, 255, 0.4);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-viewer-prev,
|
|
|
|
|
.image-viewer-next,
|
|
|
|
|
.image-viewer-rotate {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
width: 40px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
|
|
|
border: none;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
color: white;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
transition: background-color 0.3s ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-viewer-rotate {
|
|
|
|
|
top: auto;
|
|
|
|
|
bottom: 20px;
|
|
|
|
|
right: 80px;
|
|
|
|
|
transform: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-viewer-rotate:hover {
|
|
|
|
|
background-color: rgba(255, 255, 255, 0.4);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-viewer-prev {
|
|
|
|
|
left: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-viewer-next {
|
|
|
|
|
right: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-viewer-prev:hover,
|
|
|
|
|
.image-viewer-next:hover {
|
|
|
|
|
background-color: rgba(255, 255, 255, 0.4);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-counter {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 20px;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
background-color: rgba(255, 255, 255, 0.9);
|
|
|
|
|
color: black;
|
|
|
|
|
padding: 5px 15px;
|
|
|
|
|
border-radius: 20px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes loading {
|
|
|
|
|
0% {
|
|
|
|
|
background-position: 200% 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
100% {
|
|
|
|
|
background-position: -200% 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.placeholder-tag,
|
|
|
|
|
.oss-tag {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 4px;
|
|
|
|
|
right: 4px;
|
|
|
|
|
padding: 2px 6px;
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
|
|
|
color: white;
|
|
|
|
|
font-size: 10px;
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image-error {
|
|
|
|
|
filter: grayscale(50%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.more-images {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
|
|
|
color: white;
|
|
|
|
|
padding: 4px 8px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.supply-item:hover {
|
|
|
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.supply-header {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.supply-title {
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.supply-status {
|
|
|
|
|
padding: 4px 12px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-pending {
|
|
|
|
|
background-color: #faad14;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-published {
|
|
|
|
|
background-color: #52c41a;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-rejected {
|
|
|
|
|
background-color: #ff4d4f;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-soldout {
|
|
|
|
|
background-color: #8c8c8c;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-hidden {
|
|
|
|
|
background-color: #d9d9d9;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 审核时间样式 */
|
|
|
|
|
.audit-time {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
padding: 8px 16px;
|
|
|
|
|
background-color: #1890ff;
|
|
|
|
|
color: white;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
text-align: center;
|
|
|
|
|
min-width: 200px;
|
|
|
|
|
margin-top: 24px; /* 向下平移2个字的距离 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.supply-info {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
|
|
|
gap: 15px;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.info-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.info-label {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #999;
|
|
|
|
|
margin-bottom: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.info-value {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.supply-images {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 10px;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
overflow-x: auto;
|
|
|
|
|
padding-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.supply-image {
|
|
|
|
|
width: 100px;
|
|
|
|
|
height: 100px;
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.supply-reject-reason {
|
|
|
|
|
margin-top: 15px;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
background-color: #fff2f0;
|
|
|
|
|
border: 1px solid #ffccc7;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.supply-reject-reason .label {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #ff4d4f;
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.supply-reject-reason .reason {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.action-buttons {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn {
|
|
|
|
|
padding: 8px 20px;
|
|
|
|
|
border: none;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-primary {
|
|
|
|
|
background: rgba(24, 144, 255, 0.8);
|
|
|
|
|
color: white;
|
|
|
|
|
backdrop-filter: blur(10px);
|
|
|
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
|
|
box-shadow: 0 4px 6px rgba(24, 144, 255, 0.3),
|
|
|
|
|
0 0 0 1px rgba(24, 144, 255, 0.1) inset;
|
|
|
|
|
position: relative;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-primary::before {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: -100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
|
|
|
|
transition: left 0.5s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-primary:hover {
|
|
|
|
|
background: rgba(24, 144, 255, 0.9);
|
|
|
|
|
transform: scale(1.05);
|
|
|
|
|
box-shadow: 0 6px 12px rgba(24, 144, 255, 0.4),
|
|
|
|
|
0 0 0 1px rgba(24, 144, 255, 0.2) inset;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-primary:hover::before {
|
|
|
|
|
left: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-danger {
|
|
|
|
|
background: rgba(255, 77, 79, 0.8);
|
|
|
|
|
color: white;
|
|
|
|
|
backdrop-filter: blur(10px);
|
|
|
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
|
|
box-shadow: 0 4px 6px rgba(255, 77, 79, 0.3),
|
|
|
|
|
0 0 0 1px rgba(255, 77, 79, 0.1) inset;
|
|
|
|
|
position: relative;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-danger::before {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: -100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
|
|
|
|
transition: left 0.5s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-danger:hover {
|
|
|
|
|
background: rgba(255, 77, 79, 0.9);
|
|
|
|
|
transform: scale(1.05);
|
|
|
|
|
box-shadow: 0 6px 12px rgba(255, 77, 79, 0.4),
|
|
|
|
|
0 0 0 1px rgba(255, 77, 79, 0.2) inset;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-danger:hover::before {
|
|
|
|
|
left: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn:disabled {
|
|
|
|
|
background-color: #d9d9d9;
|
|
|
|
|
cursor: not-allowed;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-default {
|
|
|
|
|
background: rgba(255, 255, 255, 0.8);
|
|
|
|
|
color: #666;
|
|
|
|
|
backdrop-filter: blur(10px);
|
|
|
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1),
|
|
|
|
|
0 0 0 1px rgba(255, 255, 255, 0.5) inset;
|
|
|
|
|
position: relative;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-default::before {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: -100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
|
|
|
|
transition: left 0.5s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-default:hover {
|
|
|
|
|
background: rgba(255, 255, 255, 0.9);
|
|
|
|
|
transform: scale(1.05);
|
|
|
|
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15),
|
|
|
|
|
0 0 0 1px rgba(255, 255, 255, 0.8) inset;
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-default:hover::before {
|
|
|
|
|
left: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-primary {
|
|
|
|
|
background: rgba(66, 153, 225, 0.8);
|
|
|
|
|
color: #fff;
|
|
|
|
|
backdrop-filter: blur(10px);
|
|
|
|
|
border: 1px solid rgba(66, 153, 225, 0.5);
|
|
|
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1),
|
|
|
|
|
0 0 0 1px rgba(255, 255, 255, 0.3) inset;
|
|
|
|
|
position: relative;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
transition: all 0.3s ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-primary::before {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: -100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
|
|
|
|
transition: left 0.5s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-primary:hover {
|
|
|
|
|
background: rgba(66, 153, 225, 0.9);
|
|
|
|
|
transform: scale(1.05);
|
|
|
|
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2),
|
|
|
|
|
0 0 0 1px rgba(255, 255, 255, 0.5) inset;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-primary:hover::before {
|
|
|
|
|
left: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.modal {
|
|
|
|
|
display: none;
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
|
|
|
z-index: 1000;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.modal-content {
|
|
|
|
|
background-color: white;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
padding: 30px;
|
|
|
|
|
width: 90%;
|
|
|
|
|
max-width: 500px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.modal-header {
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.modal-body {
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.modal-body textarea {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 120px;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
border: 1px solid #d9d9d9;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
resize: vertical;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.modal-footer {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
gap: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.modal-footer .btn {
|
|
|
|
|
min-width: 80px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.empty-state {
|
|
|
|
|
text-align: center;
|
|
|
|
|
padding: 60px 20px;
|
|
|
|
|
color: #666;
|
|
|
|
|
background-color: #fafafa;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
margin: 20px 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.empty-state img {
|
|
|
|
|
width: 120px;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.empty-icon {
|
|
|
|
|
font-size: 48px;
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.empty-state h3 {
|
|
|
|
|
margin: 0 0 8px 0;
|
|
|
|
|
color: #333;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.empty-state p {
|
|
|
|
|
margin: 8px 0;
|
|
|
|
|
line-height: 1.5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.error-details {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #999;
|
|
|
|
|
margin: 8px 0 16px 0;
|
|
|
|
|
max-width: 600px;
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
margin-right: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.empty-state .btn-primary {
|
|
|
|
|
margin-top: 16px;
|
|
|
|
|
padding: 8px 24px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.loading {
|
|
|
|
|
text-align: center;
|
|
|
|
|
padding: 40px;
|
|
|
|
|
color: #999;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.pagination {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
margin-top: 30px;
|
|
|
|
|
gap: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.pagination button {
|
|
|
|
|
padding: 5px 12px;
|
|
|
|
|
border: 1px solid #d9d9d9;
|
|
|
|
|
background-color: white;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.pagination button:hover:not(:disabled) {
|
|
|
|
|
border-color: #1890ff;
|
|
|
|
|
color: #1890ff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.pagination button:disabled {
|
|
|
|
|
cursor: not-allowed;
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.pagination button.active {
|
|
|
|
|
background-color: #1890ff;
|
|
|
|
|
color: white;
|
|
|
|
|
border-color: #1890ff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 状态导航栏样式 */
|
|
|
|
|
.status-nav {
|
|
|
|
|
display: flex;
|
|
|
|
|
margin: 20px 0;
|
|
|
|
|
background-color: white;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-btn {
|
|
|
|
|
flex: 1;
|
|
|
|
|
padding: 12px 20px;
|
|
|
|
|
border: 1px solid transparent;
|
|
|
|
|
background: rgba(255, 255, 255, 0.9);
|
|
|
|
|
backdrop-filter: blur(5px);
|
|
|
|
|
-webkit-backdrop-filter: blur(5px);
|
|
|
|
|
color: #666;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
transition: all 0.3s ease;
|
|
|
|
|
position: relative;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
margin: 0;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-btn::before {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: -100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
|
|
|
|
|
transition: left 0.5s ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-btn:hover {
|
|
|
|
|
color: #1890ff;
|
|
|
|
|
background: rgba(24, 144, 255, 0.1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-btn:hover::before {
|
|
|
|
|
left: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-btn.active {
|
|
|
|
|
color: #1890ff;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
background: rgba(24, 144, 255, 0.2);
|
|
|
|
|
border-color: rgba(24, 144, 255, 0.5);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-btn.active::after {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 2px;
|
|
|
|
|
background-color: #1890ff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 类型切换器样式 */
|
|
|
|
|
.type-nav {
|
|
|
|
|
display: flex;
|
|
|
|
|
margin: 20px 0;
|
|
|
|
|
background-color: white;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.type-btn {
|
|
|
|
|
flex: 1;
|
|
|
|
|
padding: 12px 20px;
|
|
|
|
|
border: 1px solid transparent;
|
|
|
|
|
background: rgba(255, 255, 255, 0.9);
|
|
|
|
|
color: #666;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
transition: all 0.3s ease;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.type-btn:hover {
|
|
|
|
|
color: #1890ff;
|
|
|
|
|
background: rgba(24, 144, 255, 0.1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.type-btn.active {
|
|
|
|
|
color: #1890ff;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
background: rgba(24, 144, 255, 0.2);
|
|
|
|
|
border-color: rgba(24, 144, 255, 0.5);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.type-btn.active::after {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 3px;
|
|
|
|
|
background-color: #1890ff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 供应商状态样式 */
|
|
|
|
|
.status-underreview {
|
|
|
|
|
background-color: #faad14;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-reviewfailed {
|
|
|
|
|
background-color: #ff4d4f;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-approved {
|
|
|
|
|
background-color: #52c41a;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-incooperation {
|
|
|
|
|
background-color: #1890ff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-notcooperative {
|
|
|
|
|
background-color: #d9d9d9;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 证明材料展示样式 */
|
|
|
|
|
.proof-materials {
|
|
|
|
|
margin-top: 15px;
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
|
|
|
gap: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.proof-item {
|
|
|
|
|
border: 1px solid #e8e8e8;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
padding: 12px;
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.proof-item:hover {
|
|
|
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.proof-title {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #666;
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.proof-link {
|
|
|
|
|
color: #1890ff;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
word-break: break-all;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.proof-link:hover {
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<div class="container">
|
|
|
|
|
<!-- 登录信息展示 -->
|
|
|
|
|
<div id="userInfo" style="text-align: right; margin-bottom: 20px; padding: 10px; background-color: #f0f8ff; border-radius: 4px;">
|
|
|
|
|
<span id="userName">未登录</span>
|
|
|
|
|
<button id="logoutBtn" style="margin-left: 15px; padding: 5px 12px; background-color: #f5222d; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px;">退出登录</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<h1>审核系统</h1>
|
|
|
|
|
|
|
|
|
|
<!-- 审核类型切换器 -->
|
|
|
|
|
<div class="type-nav" style="
|
|
|
|
|
display: flex;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
background-color: white;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
">
|
|
|
|
|
<button class="type-btn active">供应商审核</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="search-bar">
|
|
|
|
|
<input type="text" id="searchInput" placeholder="搜索供应商名称或ID...">
|
|
|
|
|
<input type="text" id="phoneInput" placeholder="按手机号筛选...">
|
|
|
|
|
<button id="searchBtn">搜索</button>
|
|
|
|
|
<button id="refreshBtn">刷新</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 状态导航栏 - 供应商 -->
|
|
|
|
|
<div class="status-nav supplier-status-nav">
|
|
|
|
|
<button class="status-btn active" data-status="underreview">审核中</button>
|
|
|
|
|
<button class="status-btn" data-status="reviewfailed">审核失败</button>
|
|
|
|
|
<button class="status-btn" data-status="approved">审核通过</button>
|
|
|
|
|
<button class="status-btn" data-status="incooperation">合作中</button>
|
|
|
|
|
<button class="status-btn" data-status="notcooperative">未合作</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 总数显示 -->
|
|
|
|
|
<div class="total-count" style="
|
|
|
|
|
padding: 10px 15px;
|
|
|
|
|
background-color: #f5f5f5;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #666;
|
|
|
|
|
">
|
|
|
|
|
总共 <span id="totalCount" style="color: #1890ff; font-weight: bold;">0</span> 个供应商
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="supplyList">
|
|
|
|
|
<div class="loading">加载中...</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="pagination" class="pagination">
|
|
|
|
|
<!-- 分页按钮将由JS动态生成 -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 拒绝理由弹窗 -->
|
|
|
|
|
<div id="rejectModal" class="modal">
|
|
|
|
|
<div class="modal-content">
|
|
|
|
|
<div class="modal-header">拒绝原因</div>
|
|
|
|
|
<div class="modal-body">
|
|
|
|
|
<textarea id="rejectReason" placeholder="请输入拒绝理由..." maxlength="500"></textarea>
|
|
|
|
|
<div style="text-align: right; margin-top: 5px; font-size: 12px; color: #999;">
|
|
|
|
|
<span id="charCount">0</span>/500
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-footer">
|
|
|
|
|
<button id="cancelRejectBtn" class="btn btn-default">取消</button>
|
|
|
|
|
<button id="confirmRejectBtn" class="btn btn-danger">确认拒绝</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 通过确认弹窗 -->
|
|
|
|
|
<div id="approveModal" class="modal">
|
|
|
|
|
<div class="modal-content">
|
|
|
|
|
<div class="modal-header">确认通过</div>
|
|
|
|
|
<div class="modal-body" style="text-align: center; padding: 20px 0;">
|
|
|
|
|
<p style="font-size: 16px; margin: 0;">确定要通过该供应商吗？</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-footer">
|
|
|
|
|
<button id="cancelApproveBtn" class="btn btn-default">取消</button>
|
|
|
|
|
<button id="confirmApproveBtn" class="btn btn-primary">确定</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 成功提示弹窗 -->
|
|
|
|
|
<div id="successModal" class="modal">
|
|
|
|
|
<div class="modal-content">
|
|
|
|
|
<div class="modal-header">操作成功</div>
|
|
|
|
|
<div class="modal-body" style="text-align: center; padding: 20px 0;">
|
|
|
|
|
<p id="successMessage" style="font-size: 16px; margin: 0;"></p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-footer">
|
|
|
|
|
<button id="successConfirmBtn" class="btn btn-primary">确定</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 终止合作弹窗 -->
|
|
|
|
|
<div id="terminateModal" class="modal">
|
|
|
|
|
<div class="modal-content">
|
|
|
|
|
<div class="modal-header">终止合作</div>
|
|
|
|
|
<div class="modal-body">
|
|
|
|
|
<textarea id="terminateReason" placeholder="请输入终止合作的理由..." maxlength="500"></textarea>
|
|
|
|
|
<div style="text-align: right; margin-top: 5px; font-size: 12px; color: #999;">
|
|
|
|
|
<span id="terminateCharCount">0</span>/500
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-footer">
|
|
|
|
|
<button id="cancelTerminateBtn" class="btn btn-default">取消</button>
|
|
|
|
|
<button id="confirmTerminateBtn" class="btn btn-danger">确认终止</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
// 登录检查
|
|
|
|
|
function checkLogin() {
|
|
|
|
|
const userInfo = localStorage.getItem('userInfo');
|
|
|
|
|
const token = localStorage.getItem('token');
|
|
|
|
|
|
|
|
|
|
if (!userInfo || !token) {
|
|
|
|
|
// 未登录，跳转到登录页面
|
|
|
|
|
window.location.href = 'login.html';
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 已登录，解析用户信息
|
|
|
|
|
const parsedUserInfo = JSON.parse(userInfo);
|
|
|
|
|
|
|
|
|
|
// 展示登录信息
|
|
|
|
|
const userNameEl = document.getElementById('userName');
|
|
|
|
|
userNameEl.textContent = `${parsedUserInfo.projectName} - ${parsedUserInfo.name} (${parsedUserInfo.phoneNumber})`;
|
|
|
|
|
|
|
|
|
|
// 绑定退出登录事件
|
|
|
|
|
const logoutBtn = document.getElementById('logoutBtn');
|
|
|
|
|
logoutBtn.addEventListener('click', () => {
|
|
|
|
|
// 清除登录信息
|
|
|
|
|
localStorage.removeItem('userInfo');
|
|
|
|
|
localStorage.removeItem('token');
|
|
|
|
|
// 跳转到登录页面
|
|
|
|
|
window.location.href = 'login.html';
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 当前页码和每页显示数量
|
|
|
|
|
let currentPage = 1;
|
|
|
|
|
const pageSize = 10;
|
|
|
|
|
// 当前选中的供应商ID
|
|
|
|
|
let currentSupplierId = null;
|
|
|
|
|
// 当前选中的状态
|
|
|
|
|
let currentStatus = 'underreview';
|
|
|
|
|
// 当前审核类型：默认供应商审核
|
|
|
|
|
let currentType = 'supplier';
|
|
|
|
|
// 联系人数据
|
|
|
|
|
let contacts = [];
|
|
|
|
|
|
|
|
|
|
// DOM元素
|
|
|
|
|
const supplyListEl = document.getElementById('supplyList');
|
|
|
|
|
const searchInputEl = document.getElementById('searchInput');
|
|
|
|
|
const phoneInputEl = document.getElementById('phoneInput');
|
|
|
|
|
const searchBtnEl = document.getElementById('searchBtn');
|
|
|
|
|
const refreshBtnEl = document.getElementById('refreshBtn');
|
|
|
|
|
const rejectModalEl = document.getElementById('rejectModal');
|
|
|
|
|
const rejectReasonEl = document.getElementById('rejectReason');
|
|
|
|
|
const cancelRejectBtnEl = document.getElementById('cancelRejectBtn');
|
|
|
|
|
const confirmRejectBtnEl = document.getElementById('confirmRejectBtn');
|
|
|
|
|
const approveModalEl = document.getElementById('approveModal');
|
|
|
|
|
const cancelApproveBtnEl = document.getElementById('cancelApproveBtn');
|
|
|
|
|
const confirmApproveBtnEl = document.getElementById('confirmApproveBtn');
|
|
|
|
|
const paginationEl = document.getElementById('pagination');
|
|
|
|
|
const charCountEl = document.getElementById('charCount');
|
|
|
|
|
const statusBtns = document.querySelectorAll('.status-btn');
|
|
|
|
|
|
|
|
|
|
// 初始化页面
|
|
|
|
|
window.onload = () => {
|
|
|
|
|
// 登录检查
|
|
|
|
|
if (!checkLogin()) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
initPage();
|
|
|
|
|
bindEvents();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 初始化页面函数
|
|
|
|
|
async function initPage() {
|
|
|
|
|
currentPage = 1;
|
|
|
|
|
currentStatus = 'underreview';
|
|
|
|
|
loadSuppliers();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 绑定事件
|
|
|
|
|
function bindEvents() {
|
|
|
|
|
// 搜索相关事件
|
|
|
|
|
searchBtnEl.addEventListener('click', () => {
|
|
|
|
|
currentPage = 1;
|
|
|
|
|
handleSearch();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
refreshBtnEl.addEventListener('click', () => {
|
|
|
|
|
searchInputEl.value = '';
|
|
|
|
|
currentPage = 1;
|
|
|
|
|
handleRefresh();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 状态导航栏点击事件
|
|
|
|
|
statusBtns.forEach(btn => {
|
|
|
|
|
btn.addEventListener('click', () => {
|
|
|
|
|
// 更新同类状态按钮的active状态
|
|
|
|
|
const sameGroupBtns = btn.closest('.status-nav') ?
|
|
|
|
|
btn.closest('.status-nav').querySelectorAll('button') :
|
|
|
|
|
[];
|
|
|
|
|
sameGroupBtns.forEach(b => b.classList.remove('active'));
|
|
|
|
|
btn.classList.add('active');
|
|
|
|
|
|
|
|
|
|
// 更新当前状态并重新加载数据
|
|
|
|
|
currentStatus = btn.getAttribute('data-status');
|
|
|
|
|
currentPage = 1;
|
|
|
|
|
loadSuppliers();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
searchInputEl.addEventListener('keypress', (e) => {
|
|
|
|
|
if (e.key === 'Enter') {
|
|
|
|
|
currentPage = 1;
|
|
|
|
|
handleSearch();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 拒绝模态框相关事件
|
|
|
|
|
confirmRejectBtnEl.addEventListener('click', function (e) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
confirmReject();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
cancelRejectBtnEl.addEventListener('click', function (e) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
closeRejectModal();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 通过模态框相关事件
|
|
|
|
|
confirmApproveBtnEl.addEventListener('click', function (e) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
confirmApprove();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
cancelApproveBtnEl.addEventListener('click', function (e) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
closeApproveModal();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
rejectReasonEl.addEventListener('input', () => {
|
|
|
|
|
const length = rejectReasonEl.value.length;
|
|
|
|
|
charCountEl.textContent = length;
|
|
|
|
|
charCountEl.style.color = length > 400 ? '#ff4d4f' : '#999';
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 点击模态框外部关闭模态框
|
|
|
|
|
rejectModalEl.addEventListener('click', (e) => {
|
|
|
|
|
if (e.target === rejectModalEl) {
|
|
|
|
|
closeRejectModal();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 为模态框添加键盘事件
|
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
|
|
|
if (rejectModalEl.style.display === 'flex') {
|
|
|
|
|
if (e.key === 'Escape') {
|
|
|
|
|
closeRejectModal();
|
|
|
|
|
} else if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
|
|
|
|
|
confirmReject();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 为操作按钮添加事件委托
|
|
|
|
|
document.addEventListener('click', (e) => {
|
|
|
|
|
// 首先检查点击是否在图片区域内，如果是则不执行按钮点击逻辑
|
|
|
|
|
if (e.target.tagName === 'IMG' || e.target.closest('.supply-images') ||
|
|
|
|
|
e.target.closest('.image-viewer') || e.target.id === 'viewerImage') {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 按钮事件处理 - 供应商审核操作
|
|
|
|
|
if (e.target.classList.contains('btn-primary') && e.target.closest('.action-buttons')) {
|
|
|
|
|
const id = e.target.getAttribute('data-id');
|
|
|
|
|
if (id) {
|
|
|
|
|
// 检查按钮文本或样式来区分操作类型
|
|
|
|
|
if (e.target.textContent.trim() === '开始合作') {
|
|
|
|
|
confirmSupplierToCooperation(id);
|
|
|
|
|
} else {
|
|
|
|
|
showSupplierApproveModal(id);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 拒绝/终止按钮
|
|
|
|
|
if (e.target.classList.contains('btn-danger') && e.target.closest('.action-buttons')) {
|
|
|
|
|
const id = e.target.getAttribute('data-id');
|
|
|
|
|
if (id) {
|
|
|
|
|
// 检查按钮文本或样式来区分操作类型
|
|
|
|
|
if (e.target.textContent.trim() === '终止合作') {
|
|
|
|
|
showTerminateModal(id);
|
|
|
|
|
} else {
|
|
|
|
|
showSupplierRejectModal(id);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 处理搜索
|
|
|
|
|
function handleSearch() {
|
|
|
|
|
loadSuppliers();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 处理刷新
|
|
|
|
|
function handleRefresh() {
|
|
|
|
|
loadSuppliers();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 显示拒绝理由弹窗
|
|
|
|
|
function showRejectModal(supplierId) {
|
|
|
|
|
currentSupplierId = supplierId;
|
|
|
|
|
rejectReasonEl.value = '';
|
|
|
|
|
charCountEl.textContent = '0';
|
|
|
|
|
charCountEl.style.color = '#999';
|
|
|
|
|
rejectModalEl.style.display = 'flex';
|
|
|
|
|
rejectReasonEl.focus();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 关闭拒绝理由弹窗
|
|
|
|
|
function closeRejectModal() {
|
|
|
|
|
rejectModalEl.style.display = 'none';
|
|
|
|
|
currentSupplierId = null;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 确认拒绝
|
|
|
|
|
async function confirmReject() {
|
|
|
|
|
const reason = rejectReasonEl.value.trim();
|
|
|
|
|
|
|
|
|
|
if (!reason) {
|
|
|
|
|
alert('请输入拒绝理由');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (reason.length > 500) {
|
|
|
|
|
alert('拒绝理由不能超过500个字符');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
let apiUrl = `/api/suppliers/${currentSupplierId}/reject?_t=${Date.now()}`;
|
|
|
|
|
|
|
|
|
|
const response = await fetch(apiUrl, {
|
|
|
|
|
method: 'POST',
|
|
|
|
|
headers: {
|
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
|
'Cache-Control': 'no-cache, no-store, must-revalidate',
|
|
|
|
|
'Pragma': 'no-cache',
|
|
|
|
|
'Expires': '0'
|
|
|
|
|
},
|
|
|
|
|
body: JSON.stringify({ rejectReason: reason })
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (!response.ok) {
|
|
|
|
|
throw new Error('服务器响应异常');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const data = await response.json();
|
|
|
|
|
|
|
|
|
|
if (data.success) {
|
|
|
|
|
closeRejectModal();
|
|
|
|
|
loadSuppliers();
|
|
|
|
|
showSuccessModal('拒绝成功');
|
|
|
|
|
} else {
|
|
|
|
|
alert(data.message || '拒绝失败');
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('拒绝供应商失败:', error);
|
|
|
|
|
alert('网络错误，请稍后重试');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 显示通过确认弹窗
|
|
|
|
|
function showApproveModal(supplierId) {
|
|
|
|
|
currentSupplierId = supplierId;
|
|
|
|
|
approveModalEl.style.display = 'flex';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 关闭通过确认弹窗
|
|
|
|
|
function closeApproveModal() {
|
|
|
|
|
approveModalEl.style.display = 'none';
|
|
|
|
|
currentSupplierId = null;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 显示成功提示弹窗
|
|
|
|
|
function showSuccessModal(message) {
|
|
|
|
|
const successModalEl = document.getElementById('successModal');
|
|
|
|
|
const successMessageEl = document.getElementById('successMessage');
|
|
|
|
|
successMessageEl.textContent = message;
|
|
|
|
|
successModalEl.style.display = 'flex';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 关闭成功提示弹窗
|
|
|
|
|
function closeSuccessModal() {
|
|
|
|
|
const successModalEl = document.getElementById('successModal');
|
|
|
|
|
successModalEl.style.display = 'none';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 确认通过
|
|
|
|
|
async function confirmApprove() {
|
|
|
|
|
try {
|
|
|
|
|
const apiUrl = `/api/suppliers/${currentSupplierId}/approve`;
|
|
|
|
|
const response = await fetch(apiUrl, {
|
|
|
|
|
method: 'POST',
|
|
|
|
|
headers: {
|
|
|
|
|
'Content-Type': 'application/json'
|
|
|
|
|
},
|
|
|
|
|
body: JSON.stringify({})
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (!response.ok) {
|
|
|
|
|
throw new Error('服务器响应异常');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const data = await response.json();
|
|
|
|
|
|
|
|
|
|
if (data.success) {
|
|
|
|
|
closeApproveModal();
|
|
|
|
|
loadSuppliers();
|
|
|
|
|
showSuccessModal('供应商通过成功');
|
|
|
|
|
} else {
|
|
|
|
|
alert(data.message || '通过失败');
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('批准供应商失败:', error);
|
|
|
|
|
alert('网络错误，请稍后重试');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 格式化时间
|
|
|
|
|
function formatTime(timeStr) {
|
|
|
|
|
if (!timeStr) return '未知';
|
|
|
|
|
|
|
|
|
|
const date = new Date(timeStr);
|
|
|
|
|
if (isNaN(date.getTime())) return '未知';
|
|
|
|
|
|
|
|
|
|
const year = date.getFullYear();
|
|
|
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
|
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|
|
|
|
const hours = String(date.getHours()).padStart(2, '0');
|
|
|
|
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
|
|
|
|
|
|
|
|
|
return `${year}/${month}/${day} ${hours}:${minutes}`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 处理图片加载错误
|
|
|
|
|
function handleImageError(imgElement, productId) {
|
|
|
|
|
// 防止重复触发错误处理
|
|
|
|
|
if (imgElement.dataset.errorHandled) return;
|
|
|
|
|
imgElement.dataset.errorHandled = 'true';
|
|
|
|
|
|
|
|
|
|
// 使用内联SVG数据URI作为备用占位图
|
|
|
|
|
const hue = (productId || 0) * 37 % 360;
|
|
|
|
|
const color = `hsl(${hue}, 60%, 70%)`;
|
|
|
|
|
const errorTextColor = '#ff4d4f';
|
|
|
|
|
imgElement.src = `data:image/svg+xml,${encodeURIComponent(`
|
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
|
|
|
|
|
<rect width="600" height="600" fill="${color}"/>
|
|
|
|
|
<text x="300" y="300" font-family="Arial" font-size="24" fill="${errorTextColor}" text-anchor="middle" dominant-baseline="middle">图片加载失败</text>
|
|
|
|
|
</svg>
|
|
|
|
|
`)}`;
|
|
|
|
|
|
|
|
|
|
// 确保错误图片可见
|
|
|
|
|
imgElement.style.display = 'block';
|
|
|
|
|
imgElement.style.opacity = '1';
|
|
|
|
|
imgElement.style.border = '2px solid red';
|
|
|
|
|
|
|
|
|
|
// 添加错误标记
|
|
|
|
|
imgElement.classList.add('image-error');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 隐藏图片骨架屏
|
|
|
|
|
function hideImageSkeleton(imgElement) {
|
|
|
|
|
const skeleton = imgElement.parentElement.querySelector('.image-skeleton');
|
|
|
|
|
if (skeleton) {
|
|
|
|
|
skeleton.style.display = 'none';
|
|
|
|
|
}
|
|
|
|
|
// 确保图片可见
|
|
|
|
|
imgElement.style.display = 'block';
|
|
|
|
|
imgElement.style.opacity = '1';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 供应商相关数据处理函数
|
|
|
|
|
|
|
|
|
|
// 加载供应商列表
|
|
|
|
|
async function loadSuppliers() {
|
|
|
|
|
supplyListEl.innerHTML = '<div class="loading">加载中...</div>';
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
const searchKeyword = searchInputEl.value.trim();
|
|
|
|
|
const phoneNumber = phoneInputEl.value.trim();
|
|
|
|
|
|
|
|
|
|
// 获取当前登录者信息
|
|
|
|
|
const userInfo = localStorage.getItem('userInfo');
|
|
|
|
|
const parsedUserInfo = JSON.parse(userInfo);
|
|
|
|
|
const currentUserName = parsedUserInfo.name;
|
|
|
|
|
const currentUserPhone = parsedUserInfo.phoneNumber;
|
|
|
|
|
const isAdmin = parsedUserInfo.projectName === '管理员';
|
|
|
|
|
|
|
|
|
|
// 构建查询参数，添加时间戳防止缓存
|
|
|
|
|
let queryParams = `page=${currentPage}&pageSize=${pageSize}&status=${currentStatus}&_t=${Date.now()}`;
|
|
|
|
|
if (searchKeyword) {
|
|
|
|
|
queryParams += `&keyword=${encodeURIComponent(searchKeyword)}`;
|
|
|
|
|
}
|
|
|
|
|
if (phoneNumber) {
|
|
|
|
|
queryParams += `&phoneNumber=${encodeURIComponent(phoneNumber)}`;
|
|
|
|
|
}
|
|
|
|
|
// 添加当前登录者信息，用于对接人匹配（非管理员才需要）
|
|
|
|
|
if (!isAdmin) {
|
|
|
|
|
queryParams += `¤tUserName=${encodeURIComponent(currentUserName)}`;
|
|
|
|
|
queryParams += `¤tUserPhone=${encodeURIComponent(currentUserPhone)}`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 使用相对路径，避免硬编码地址导致的跨电脑访问问题
|
|
|
|
|
const response = await fetch(`/api/suppliers?${queryParams}`);
|
|
|
|
|
|
|
|
|
|
if (!response.ok) {
|
|
|
|
|
throw new Error('服务器响应异常');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 直接使用Text格式先获取原始响应，确保正确解析
|
|
|
|
|
const responseText = await response.text();
|
|
|
|
|
console.log('原始响应文本:', responseText);
|
|
|
|
|
|
|
|
|
|
// 然后再解析为JSON
|
|
|
|
|
let data;
|
|
|
|
|
try {
|
|
|
|
|
data = JSON.parse(responseText);
|
|
|
|
|
console.log('成功解析JSON数据');
|
|
|
|
|
} catch (parseError) {
|
|
|
|
|
console.error('JSON解析失败:', parseError);
|
|
|
|
|
console.error('原始响应:', responseText);
|
|
|
|
|
throw new Error('返回数据格式错误');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 宽松处理，适应多种可能的数据格式
|
|
|
|
|
let suppliersList = [];
|
|
|
|
|
let totalCount = 0;
|
|
|
|
|
|
|
|
|
|
// 情况1: 标准格式 {success: true, data: {list: [], total: n}} - 后端实际返回格式
|
|
|
|
|
if (data.success === true && data.data && data.data.list && Array.isArray(data.data.list)) {
|
|
|
|
|
suppliersList = data.data.list;
|
|
|
|
|
totalCount = data.data.total || suppliersList.length;
|
|
|
|
|
console.log('情况1 - 后端实际返回格式: 从data.data.list中获取了', suppliersList.length, '条记录');
|
|
|
|
|
}
|
|
|
|
|
// 情况2: 标准格式 {success: true, data: {suppliers: [], total: n}}
|
|
|
|
|
else if (data.success === true && data.data && data.data.suppliers && Array.isArray(data.data.suppliers)) {
|
|
|
|
|
suppliersList = data.data.suppliers;
|
|
|
|
|
totalCount = data.data.total || suppliersList.length;
|
|
|
|
|
}
|
|
|
|
|
// 情况2: 简化格式 {data: []} 或 {suppliers: []}
|
|
|
|
|
else if (data.data && Array.isArray(data.data)) {
|
|
|
|
|
suppliersList = data.data;
|
|
|
|
|
totalCount = suppliersList.length;
|
|
|
|
|
}
|
|
|
|
|
else if (data.suppliers && Array.isArray(data.suppliers)) {
|
|
|
|
|
suppliersList = data.suppliers;
|
|
|
|
|
totalCount = data.total || suppliersList.length;
|
|
|
|
|
}
|
|
|
|
|
// 情况3: 直接返回数组
|
|
|
|
|
else if (Array.isArray(data)) {
|
|
|
|
|
suppliersList = data;
|
|
|
|
|
totalCount = suppliersList.length;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 更新总数显示
|
|
|
|
|
const totalCountEl = document.getElementById('totalCount');
|
|
|
|
|
if (totalCountEl) {
|
|
|
|
|
totalCountEl.textContent = totalCount;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 对供应商列表进行排序，按照创建时间倒序排列（最新的在前）
|
|
|
|
|
suppliersList.sort((a, b) => {
|
|
|
|
|
// 获取创建时间，支持多种可能的字段名称
|
|
|
|
|
const aCreatedAt = a.created_at || a.create_time || a.createdAt || new Date().toISOString();
|
|
|
|
|
const bCreatedAt = b.created_at || b.create_time || b.createdAt || new Date().toISOString();
|
|
|
|
|
|
|
|
|
|
// 转换为时间戳并比较，降序排列
|
|
|
|
|
return new Date(bCreatedAt).getTime() - new Date(aCreatedAt).getTime();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 渲染数据
|
|
|
|
|
renderSuppliers(suppliersList);
|
|
|
|
|
renderPagination(totalCount, currentPage, Math.ceil(totalCount / pageSize));
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('加载供应商失败:', error);
|
|
|
|
|
let errorMessage = '加载失败，请稍后重试';
|
|
|
|
|
if (error.message.includes('JSON解析失败')) {
|
|
|
|
|
errorMessage = '数据格式错误，可能是服务器响应异常';
|
|
|
|
|
} else if (error.message.includes('服务器响应异常')) {
|
|
|
|
|
errorMessage = '服务器连接失败，请检查网络';
|
|
|
|
|
}
|
|
|
|
|
supplyListEl.innerHTML = `<div class="empty-state">
|
|
|
|
|
<div class="empty-icon">⚠️</div>
|
|
|
|
|
<h3>加载失败</h3>
|
|
|
|
|
<p>${errorMessage}</p>
|
|
|
|
|
<p class="error-details">详细错误: ${error.message}</p>
|
|
|
|
|
<button class="btn-primary" onclick="loadSuppliers()">重新加载</button>
|
|
|
|
|
</div>`;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 渲染供应商列表
|
|
|
|
|
function renderSuppliers(suppliers) {
|
|
|
|
|
console.log('渲染供应商数据类型:', typeof suppliers, '数据是否为数组:', Array.isArray(suppliers));
|
|
|
|
|
console.log('渲染供应商数据详情:', JSON.stringify(suppliers, null, 2));
|
|
|
|
|
|
|
|
|
|
// 确保suppliers是数组
|
|
|
|
|
if (!suppliers || !Array.isArray(suppliers)) {
|
|
|
|
|
console.error('suppliers不是有效的数组:', suppliers);
|
|
|
|
|
supplyListEl.innerHTML = `<div class="empty-state">
|
|
|
|
|
<p>数据格式错误，请刷新页面重试</p>
|
|
|
|
|
</div>`;
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (suppliers.length === 0) {
|
|
|
|
|
console.log('没有供应商数据可渲染');
|
|
|
|
|
supplyListEl.innerHTML = `<div class="empty-state">
|
|
|
|
|
<div class="empty-icon">👥</div>
|
|
|
|
|
<h3>暂无供应商数据</h3>
|
|
|
|
|
<p>${searchInputEl.value.trim() || phoneInputEl.value.trim() ? '没有找到匹配的供应商' : '当前没有供应商数据'}</p>
|
|
|
|
|
<button class="btn-primary" onclick="loadSuppliers()">刷新列表</button>
|
|
|
|
|
</div>`;
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
supplyListEl.innerHTML = suppliers.map((supplier, index) => {
|
|
|
|
|
// 使用更灵活的字段映射
|
|
|
|
|
const id = supplier.userId || supplier.id || supplier.user_id || `unknown-${index}`;
|
|
|
|
|
const name = supplier.userName || supplier.name || supplier.company || '未命名供应商';
|
|
|
|
|
const phone = supplier.phoneNumber || supplier.phone || '未知电话';
|
|
|
|
|
const company = supplier.company || '未设置公司';
|
|
|
|
|
const collaborationId = supplier.collaborationid || '未知合作商ID';
|
|
|
|
|
const cooperation = supplier.cooperation || '未知合作模式';
|
|
|
|
|
const liaison = supplier.liaison || '未设置对接人';
|
|
|
|
|
|
|
|
|
|
// 地址信息
|
|
|
|
|
const province = supplier.province || '';
|
|
|
|
|
const city = supplier.city || '';
|
|
|
|
|
const district = supplier.district || '';
|
|
|
|
|
const detailedAddress = supplier.detailedaddress || '';
|
|
|
|
|
const fullAddress = generateAddress(province, city, district, detailedAddress);
|
|
|
|
|
|
|
|
|
|
// 证明材料
|
|
|
|
|
const businessLicenseUrl = supplier.businesslicenseurl || '';
|
|
|
|
|
const proofUrl = supplier.proofurl || '';
|
|
|
|
|
const brandUrl = supplier.brandurl || '';
|
|
|
|
|
|
|
|
|
|
// 状态
|
|
|
|
|
const status = supplier.partnerstatus || supplier.status || 'underreview';
|
|
|
|
|
const createdAt = supplier.created_at || supplier.create_time || new Date().toISOString();
|
|
|
|
|
const rejectReason = supplier.rejectReason || supplier.reject_reason || supplier.reason || '';
|
|
|
|
|
const auditTime = supplier.audit_time || createdAt;
|
|
|
|
|
|
|
|
|
|
// 状态处理
|
|
|
|
|
let statusClass = 'status-underreview';
|
|
|
|
|
let statusText = '审核中';
|
|
|
|
|
|
|
|
|
|
if (status === 'reviewfailed' || status === '已拒绝') {
|
|
|
|
|
statusClass = 'status-reviewfailed';
|
|
|
|
|
statusText = '审核失败';
|
|
|
|
|
} else if (status === 'approved' || status === '已通过') {
|
|
|
|
|
statusClass = 'status-approved';
|
|
|
|
|
statusText = '审核通过';
|
|
|
|
|
} else if (status === 'incooperation' || status === '合作中') {
|
|
|
|
|
statusClass = 'status-incooperation';
|
|
|
|
|
statusText = '合作中';
|
|
|
|
|
} else if (status === 'notcooperative' || status === '未合作') {
|
|
|
|
|
statusClass = 'status-notcooperative';
|
|
|
|
|
statusText = '未合作';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 审核按钮控制
|
|
|
|
|
const canReview = status === 'underreview';
|
|
|
|
|
const canTerminate = status === 'incooperation';
|
|
|
|
|
const canCooperate = status === 'approved';
|
|
|
|
|
|
|
|
|
|
return `
|
|
|
|
|
<div class="supply-item" data-id="${id}">
|
|
|
|
|
<div class="supply-header">
|
|
|
|
|
<div class="supply-title">${company}</div>
|
|
|
|
|
<div class="supply-status ${statusClass}">${statusText}</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 供应商基本信息 -->
|
|
|
|
|
<div class="supply-info">
|
|
|
|
|
<div class="info-item">
|
|
|
|
|
<div class="info-label">合作商ID</div>
|
|
|
|
|
<div class="info-value">${collaborationId}</div>
|
|
|
|
|
<br>
|
|
|
|
|
<div class="info-label">合作模式</div>
|
|
|
|
|
<div class="info-value">${cooperation}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="info-item">
|
|
|
|
|
<div class="info-label">联系人</div>
|
|
|
|
|
<div class="info-value">${name}</div>
|
|
|
|
|
<br>
|
|
|
|
|
<div class="info-label">电话</div>
|
|
|
|
|
<div class="info-value">${phone}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="info-item">
|
|
|
|
|
<div class="info-label">地址</div>
|
|
|
|
|
<div class="info-value">${fullAddress}</div>
|
|
|
|
|
<br>
|
|
|
|
|
<div class="info-label">对接人</div>
|
|
|
|
|
<div class="info-value">${liaison}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="info-item">
|
|
|
|
|
<div class="info-label">创建时间</div>
|
|
|
|
|
<div class="info-value">${formatTime(createdAt)}</div>
|
|
|
|
|
<br>
|
|
|
|
|
<div class="info-label">ID</div>
|
|
|
|
|
<div class="info-value">${id}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 证明材料展示 -->
|
|
|
|
|
${generateProofMaterialsHtml(businessLicenseUrl, proofUrl, brandUrl)}
|
|
|
|
|
|
|
|
|
|
<!-- 拒绝理由 -->
|
|
|
|
|
${rejectReason ? `
|
|
|
|
|
<div class="supply-reject-reason">
|
|
|
|
|
<div class="label">拒绝理由：</div>
|
|
|
|
|
<div class="reason">${rejectReason}</div>
|
|
|
|
|
</div>
|
|
|
|
|
` : ''}
|
|
|
|
|
|
|
|
|
|
<!-- 操作按钮 -->
|
|
|
|
|
<div class="action-buttons">
|
|
|
|
|
${canReview ? `
|
|
|
|
|
<button class="btn btn-primary" data-id="${id}" onclick="showSupplierApproveModal('${id}')">
|
|
|
|
|
通过
|
|
|
|
|
</button>
|
|
|
|
|
<button class="btn btn-danger" data-id="${id}" onclick="showSupplierRejectModal('${id}')">
|
|
|
|
|
拒绝
|
|
|
|
|
</button>
|
|
|
|
|
` : canTerminate ? `
|
|
|
|
|
<button class="btn btn-danger" data-id="${id}" onclick="showTerminateModal('${id}')">
|
|
|
|
|
终止合作
|
|
|
|
|
</button>
|
|
|
|
|
<div class="audit-time">
|
|
|
|
|
审核时间：${formatTime(auditTime)}
|
|
|
|
|
</div>
|
|
|
|
|
` : canCooperate ? `
|
|
|
|
|
<button class="btn btn-primary" data-id="${id}" onclick="confirmSupplierToCooperation('${id}')">
|
|
|
|
|
开始合作
|
|
|
|
|
</button>
|
|
|
|
|
<div class="audit-time">
|
|
|
|
|
审核时间：${formatTime(auditTime)}
|
|
|
|
|
</div>
|
|
|
|
|
` : `
|
|
|
|
|
<div class="audit-time">
|
|
|
|
|
审核时间：${formatTime(auditTime)}
|
|
|
|
|
</div>
|
|
|
|
|
`}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
`;
|
|
|
|
|
}).join('');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 生成地址信息
|
|
|
|
|
function generateAddress(province, city, district, detailedAddress) {
|
|
|
|
|
const addressParts = [province, city, district, detailedAddress].filter(Boolean);
|
|
|
|
|
return addressParts.length > 0 ? addressParts.join('') : '未设置地址';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 生成证明材料HTML
|
|
|
|
|
function generateProofMaterialsHtml(businessLicenseUrl, proofUrl, brandUrl) {
|
|
|
|
|
let materials = [];
|
|
|
|
|
|
|
|
|
|
// 检查是否为图片文件的函数
|
|
|
|
|
function isImageUrl(url) {
|
|
|
|
|
if (!url) return false;
|
|
|
|
|
const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp'];
|
|
|
|
|
const lowerUrl = url.toLowerCase();
|
|
|
|
|
return imageExtensions.some(ext => lowerUrl.includes(ext));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 处理单个URL的函数
|
|
|
|
|
function processUrl(url, title) {
|
|
|
|
|
if (!url) return '';
|
|
|
|
|
|
|
|
|
|
// 处理多个URL的情况（用逗号分隔）
|
|
|
|
|
const urls = url.split(',').map(u => u.trim()).filter(u => u);
|
|
|
|
|
|
|
|
|
|
if (urls.length === 0) return '';
|
|
|
|
|
|
|
|
|
|
let itemsHtml = '';
|
|
|
|
|
|
|
|
|
|
urls.forEach((singleUrl, index) => {
|
|
|
|
|
const displayIndex = urls.length > 1 ? ` (${index + 1})` : '';
|
|
|
|
|
|
|
|
|
|
if (isImageUrl(singleUrl)) {
|
|
|
|
|
// 图片类型，显示预览图
|
|
|
|
|
itemsHtml += `
|
|
|
|
|
<div class="proof-item">
|
|
|
|
|
<div class="proof-title">${title}${displayIndex}</div>
|
|
|
|
|
<div class="image-preview" style="margin: 10px 0; position: relative; display: inline-block;">
|
|
|
|
|
<!-- 添加data-product-image属性以支持缩放功能 -->
|
|
|
|
|
<img src="${singleUrl}" alt="${title}" onclick="openImageViewer(this)" class="preview-thumbnail" style="max-width: 200px; max-height: 200px; cursor: pointer; border: 1px solid #eee; border-radius: 4px;" data-product-image="true">
|
|
|
|
|
<div class="image-overlay" onclick="openImageViewer(this.previousElementSibling)" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; border-radius: 4px; box-sizing: border-box;">
|
|
|
|
|
<span style="color: white; font-size: 14px;">点击查看</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<a href="${singleUrl}" target="_blank" class="proof-link">下载原图</a>
|
|
|
|
|
</div>
|
|
|
|
|
`;
|
|
|
|
|
} else {
|
|
|
|
|
// 非图片类型，仅提供链接
|
|
|
|
|
itemsHtml += `
|
|
|
|
|
<div class="proof-item">
|
|
|
|
|
<div class="proof-title">${title}${displayIndex}</div>
|
|
|
|
|
<a href="${singleUrl}" target="_blank" class="proof-link">查看${title}</a>
|
|
|
|
|
</div>
|
|
|
|
|
`;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return itemsHtml;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
materials.push(processUrl(businessLicenseUrl, '营业执照'));
|
|
|
|
|
materials.push(processUrl(proofUrl, '证明材料'));
|
|
|
|
|
materials.push(processUrl(brandUrl, '品牌授权链'));
|
|
|
|
|
|
|
|
|
|
// 过滤空字符串
|
|
|
|
|
materials = materials.filter(m => m);
|
|
|
|
|
|
|
|
|
|
if (materials.length === 0) {
|
|
|
|
|
return '';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return `
|
|
|
|
|
<div class="proof-materials" style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee;">
|
|
|
|
|
${materials.join('')}
|
|
|
|
|
</div>
|
|
|
|
|
`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 供应商相关模态框函数
|
|
|
|
|
|
|
|
|
|
// 显示供应商通过确认弹窗
|
|
|
|
|
function showSupplierApproveModal(supplierId) {
|
|
|
|
|
currentSupplierId = supplierId;
|
|
|
|
|
approveModalEl.style.display = 'flex';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 显示供应商拒绝理由弹窗
|
|
|
|
|
function showSupplierRejectModal(supplierId) {
|
|
|
|
|
currentSupplierId = supplierId;
|
|
|
|
|
rejectReasonEl.value = '';
|
|
|
|
|
charCountEl.textContent = '0';
|
|
|
|
|
charCountEl.style.color = '#999';
|
|
|
|
|
rejectModalEl.style.display = 'flex';
|
|
|
|
|
rejectReasonEl.focus();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 显示终止合作弹窗
|
|
|
|
|
function showTerminateModal(supplierId) {
|
|
|
|
|
currentSupplierId = supplierId;
|
|
|
|
|
// 使用终止合作专用的文本框和字符计数
|
|
|
|
|
const terminateReasonEl = document.getElementById('terminateReason');
|
|
|
|
|
const terminateCharCountEl = document.getElementById('terminateCharCount');
|
|
|
|
|
|
|
|
|
|
if (terminateReasonEl) {
|
|
|
|
|
terminateReasonEl.value = '';
|
|
|
|
|
terminateReasonEl.focus();
|
|
|
|
|
}
|
|
|
|
|
if (terminateCharCountEl) {
|
|
|
|
|
terminateCharCountEl.textContent = '0';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const terminateModalEl = document.getElementById('terminateModal');
|
|
|
|
|
if (terminateModalEl) {
|
|
|
|
|
terminateModalEl.style.display = 'flex';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 确认终止合作
|
|
|
|
|
async function confirmTerminate() {
|
|
|
|
|
const terminateReasonEl = document.getElementById('terminateReason');
|
|
|
|
|
const terminateModalEl = document.getElementById('terminateModal');
|
|
|
|
|
const reason = terminateReasonEl ? terminateReasonEl.value.trim() : '';
|
|
|
|
|
|
|
|
|
|
if (!reason) {
|
|
|
|
|
alert('请输入终止合作理由');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
const response = await fetch(`/api/suppliers/${currentSupplierId}/terminate?_t=${Date.now()}`, {
|
|
|
|
|
method: 'POST',
|
|
|
|
|
headers: {
|
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
|
},
|
|
|
|
|
body: JSON.stringify({ reason })
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (!response.ok) {
|
|
|
|
|
throw new Error('服务器响应异常');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const data = await response.json();
|
|
|
|
|
|
|
|
|
|
if (data.success) {
|
|
|
|
|
if (terminateModalEl) {
|
|
|
|
|
terminateModalEl.style.display = 'none';
|
|
|
|
|
}
|
|
|
|
|
loadSuppliers();
|
|
|
|
|
showSuccessModal('终止合作成功');
|
|
|
|
|
} else {
|
|
|
|
|
alert(data.message || '终止合作失败');
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('终止合作失败:', error);
|
|
|
|
|
alert('网络错误，请稍后重试');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 确认供应商开始合作
|
|
|
|
|
async function confirmSupplierToCooperation(supplierId) {
|
|
|
|
|
try {
|
|
|
|
|
const response = await fetch(`/api/suppliers/${supplierId}/cooperate?_t=${Date.now()}`, {
|
|
|
|
|
method: 'POST',
|
|
|
|
|
headers: {
|
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (!response.ok) {
|
|
|
|
|
throw new Error('服务器响应异常');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const data = await response.json();
|
|
|
|
|
|
|
|
|
|
if (data.success) {
|
|
|
|
|
loadSuppliers();
|
|
|
|
|
showSuccessModal('开始合作成功');
|
|
|
|
|
} else {
|
|
|
|
|
alert(data.message || '开始合作失败');
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('开始合作失败:', error);
|
|
|
|
|
alert('网络错误，请稍后重试');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 为终止合作模态框添加事件监听
|
|
|
|
|
const terminateModalEl = document.getElementById('terminateModal');
|
|
|
|
|
if (terminateModalEl) {
|
|
|
|
|
const terminateReasonEl = document.getElementById('terminateReason');
|
|
|
|
|
const terminateCharCountEl = document.getElementById('terminateCharCount');
|
|
|
|
|
const cancelTerminateBtnEl = document.getElementById('cancelTerminateBtn');
|
|
|
|
|
const confirmTerminateBtnEl = document.getElementById('confirmTerminateBtn');
|
|
|
|
|
|
|
|
|
|
// 字符计数
|
|
|
|
|
if (terminateReasonEl && terminateCharCountEl) {
|
|
|
|
|
terminateReasonEl.addEventListener('input', () => {
|
|
|
|
|
const length = terminateReasonEl.value.length;
|
|
|
|
|
terminateCharCountEl.textContent = length;
|
|
|
|
|
terminateCharCountEl.style.color = length > 400 ? '#ff4d4f' : '#999';
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 取消按钮
|
|
|
|
|
if (cancelTerminateBtnEl) {
|
|
|
|
|
cancelTerminateBtnEl.addEventListener('click', function(e) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
terminateModalEl.style.display = 'none';
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 确认终止按钮
|
|
|
|
|
if (confirmTerminateBtnEl) {
|
|
|
|
|
confirmTerminateBtnEl.addEventListener('click', function(e) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
confirmTerminate();
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 点击模态框外部关闭
|
|
|
|
|
terminateModalEl.addEventListener('click', (e) => {
|
|
|
|
|
if (e.target === terminateModalEl) {
|
|
|
|
|
terminateModalEl.style.display = 'none';
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 绑定成功弹窗的确认按钮
|
|
|
|
|
document.getElementById('successConfirmBtn').addEventListener('click', closeSuccessModal);
|
|
|
|
|
|
|
|
|
|
// 渲染分页
|
|
|
|
|
function renderPagination(total, current, totalPages) {
|
|
|
|
|
let paginationHTML = '';
|
|
|
|
|
|
|
|
|
|
// 上一页
|
|
|
|
|
paginationHTML += `<button onclick="changePage(${current - 1})" ${current === 1 ? 'disabled' : ''}>
|
|
|
|
|
上一页
|
|
|
|
|
</button>`;
|
|
|
|
|
|
|
|
|
|
// 页码按钮
|
|
|
|
|
const startPage = Math.max(1, current - 2);
|
|
|
|
|
const endPage = Math.min(totalPages, startPage + 4);
|
|
|
|
|
|
|
|
|
|
for (let i = startPage; i <= endPage; i++) {
|
|
|
|
|
paginationHTML += `<button onclick="changePage(${i})" ${i === current ? 'class="active"' : ''}>
|
|
|
|
|
${i}
|
|
|
|
|
</button>`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 下一页
|
|
|
|
|
paginationHTML += `<button onclick="changePage(${current + 1})" ${current === totalPages ? 'disabled' : ''}>
|
|
|
|
|
下一页
|
|
|
|
|
</button>`;
|
|
|
|
|
|
|
|
|
|
paginationEl.innerHTML = paginationHTML;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 改变页码
|
|
|
|
|
function changePage(page) {
|
|
|
|
|
if (page < 1) return;
|
|
|
|
|
currentPage = page;
|
|
|
|
|
loadSuppliers();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 将函数暴露到全局
|
|
|
|
|
window.showApproveModal = showApproveModal;
|
|
|
|
|
window.closeApproveModal = closeApproveModal;
|
|
|
|
|
window.confirmApprove = confirmApprove;
|
|
|
|
|
window.showRejectModal = showRejectModal;
|
|
|
|
|
window.closeRejectModal = closeRejectModal;
|
|
|
|
|
window.confirmReject = confirmReject;
|
|
|
|
|
window.changePage = changePage;
|
|
|
|
|
window.showSupplierApproveModal = showSupplierApproveModal;
|
|
|
|
|
window.showSupplierRejectModal = showSupplierRejectModal;
|
|
|
|
|
window.showTerminateModal = showTerminateModal;
|
|
|
|
|
window.confirmTerminate = confirmTerminate;
|
|
|
|
|
window.confirmSupplierToCooperation = confirmSupplierToCooperation;
|
|
|
|
|
window.loadSuppliers = loadSuppliers;
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<!-- 图片查看器模态框 -->
|
|
|
|
|
<div class="image-viewer" id="imageViewer">
|
|
|
|
|
<button class="image-viewer-prev" onclick="showPrevImage(event)"><</button>
|
|
|
|
|
<div class="image-viewer-content">
|
|
|
|
|
<img id="viewerImage" src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22100%22 height=%22100%22%3E%3Crect width=%22100%22 height=%22100%22 fill=%22%23f5f5f5%22/%3E%3Ctext x=%2250%22 y=%2250%22 font-family=%22Arial%22 font-size=%2212%22 fill=%22%23999%22 text-anchor=%22middle%22 dominant-baseline=%22middle%22%3E暂无图片%3C/text%3E%3C/svg%3E" alt="大图查看">
|
|
|
|
|
<span class="image-counter" id="imageCounter"></span>
|
|
|
|
|
</div>
|
|
|
|
|
<button class="image-viewer-next" onclick="showNextImage(event)">></button>
|
|
|
|
|
<button class="image-viewer-close" onclick="closeImageViewer()">×</button>
|
|
|
|
|
<button class="image-viewer-rotate" onclick="rotateImage()">↻</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
// 图片查看器功能
|
|
|
|
|
let currentImageIndex = 0;
|
|
|
|
|
let currentImageUrls = [];
|
|
|
|
|
let currentImageUrl = '';
|
|
|
|
|
|
|
|
|
|
// 缩放和拖动相关变量
|
|
|
|
|
let scale = 1;
|
|
|
|
|
let rotation = 0; // 旋转角度变量
|
|
|
|
|
|
|
|
|
|
let lastScale = 1;
|
|
|
|
|
let panning = false;
|
|
|
|
|
let pointX = 0;
|
|
|
|
|
let pointY = 0;
|
|
|
|
|
let start = { x: 0, y: 0 };
|
|
|
|
|
let origin = { x: 0, y: 0 };
|
|
|
|
|
// 触摸相关变量
|
|
|
|
|
let initialDistance = null;
|
|
|
|
|
let initialScale = 1;
|
|
|
|
|
|
|
|
|
|
function openImageViewer(imgElement) {
|
|
|
|
|
const viewer = document.getElementById('imageViewer');
|
|
|
|
|
const viewerImage = document.getElementById('viewerImage');
|
|
|
|
|
const imageCounter = document.getElementById('imageCounter');
|
|
|
|
|
|
|
|
|
|
// 获取当前图片URL
|
|
|
|
|
currentImageUrl = imgElement.src.split('?')[0]; // 移除时间戳
|
|
|
|
|
|
|
|
|
|
// 获取当前产品的所有图片URLs
|
|
|
|
|
// 查找当前图片所属的产品项
|
|
|
|
|
const supplyItem = imgElement.closest('.supply-item');
|
|
|
|
|
|
|
|
|
|
if (supplyItem) {
|
|
|
|
|
// 获取该产品项中所有带有data-product-image属性的图片，包括证明材料
|
|
|
|
|
const allImages = supplyItem.querySelectorAll('img[data-product-image="true"]');
|
|
|
|
|
currentImageUrls = Array.from(allImages).map(img => img.src.split('?')[0]);
|
|
|
|
|
|
|
|
|
|
// 找到当前图片在数组中的索引
|
|
|
|
|
currentImageIndex = currentImageUrls.findIndex(url => url === currentImageUrl);
|
|
|
|
|
if (currentImageIndex === -1) currentImageIndex = 0;
|
|
|
|
|
} else {
|
|
|
|
|
// 其他情况，只显示当前图片
|
|
|
|
|
currentImageUrls = [currentImageUrl];
|
|
|
|
|
currentImageIndex = 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
viewerImage.src = currentImageUrls[currentImageIndex];
|
|
|
|
|
|
|
|
|
|
// 更新计数器
|
|
|
|
|
imageCounter.textContent = `${currentImageIndex + 1}/${currentImageUrls.length}`;
|
|
|
|
|
|
|
|
|
|
// 显示查看器
|
|
|
|
|
viewer.classList.add('active');
|
|
|
|
|
|
|
|
|
|
// 禁止页面滚动
|
|
|
|
|
document.body.style.overflow = 'hidden';
|
|
|
|
|
|
|
|
|
|
// 重置缩放和拖动状态
|
|
|
|
|
resetImageTransform();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 添加图片点击事件委托，只处理带有特定属性的图片
|
|
|
|
|
document.addEventListener('click', function(event) {
|
|
|
|
|
// 只处理带有data-product-image属性的图片点击
|
|
|
|
|
if (event.target.tagName === 'IMG' && event.target.hasAttribute('data-product-image')) {
|
|
|
|
|
openImageViewer(event.target);
|
|
|
|
|
event.stopPropagation(); // 阻止冒泡到document的其他监听器
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 为图片查看器添加点击事件，正确处理事件冒泡
|
|
|
|
|
document.getElementById('imageViewer').addEventListener('click', function(event) {
|
|
|
|
|
// 只有点击空白背景时才关闭
|
|
|
|
|
if (event.target === this) {
|
|
|
|
|
closeImageViewer();
|
|
|
|
|
} else {
|
|
|
|
|
// 阻止内部元素的点击事件冒泡，防止触发外部可能的全局事件
|
|
|
|
|
event.stopPropagation();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 为查看器内所有可点击元素添加阻止冒泡
|
|
|
|
|
['viewerImage', 'prevImageBtn', 'nextImageBtn', 'closeViewerBtn'].forEach(id => {
|
|
|
|
|
const element = document.getElementById(id);
|
|
|
|
|
if (element) {
|
|
|
|
|
element.addEventListener('click', function(event) {
|
|
|
|
|
event.stopPropagation();
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function closeImageViewer(event) {
|
|
|
|
|
if (event) event.stopPropagation(); // 阻止事件冒泡
|
|
|
|
|
const viewer = document.getElementById('imageViewer');
|
|
|
|
|
viewer.classList.remove('active');
|
|
|
|
|
|
|
|
|
|
// 恢复页面滚动
|
|
|
|
|
document.body.style.overflow = 'auto';
|
|
|
|
|
|
|
|
|
|
// 重置图片数据
|
|
|
|
|
currentImageUrls = [];
|
|
|
|
|
currentImageIndex = 0;
|
|
|
|
|
|
|
|
|
|
// 重置缩放和拖动状态
|
|
|
|
|
resetImageTransform();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function showPrevImage(event) {
|
|
|
|
|
event.stopPropagation();
|
|
|
|
|
if (currentImageUrls.length > 1) {
|
|
|
|
|
currentImageIndex = (currentImageIndex - 1 + currentImageUrls.length) % currentImageUrls.length;
|
|
|
|
|
document.getElementById('viewerImage').src = currentImageUrls[currentImageIndex];
|
|
|
|
|
document.getElementById('imageCounter').textContent = `${currentImageIndex + 1}/${currentImageUrls.length}`;
|
|
|
|
|
// 重置缩放、拖动和旋转状态
|
|
|
|
|
resetImageTransform();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function showNextImage(event) {
|
|
|
|
|
event.stopPropagation();
|
|
|
|
|
if (currentImageUrls.length > 1) {
|
|
|
|
|
currentImageIndex = (currentImageIndex + 1) % currentImageUrls.length;
|
|
|
|
|
document.getElementById('viewerImage').src = currentImageUrls[currentImageIndex];
|
|
|
|
|
document.getElementById('imageCounter').textContent = `${currentImageIndex + 1}/${currentImageUrls.length}`;
|
|
|
|
|
// 重置缩放、拖动和旋转状态
|
|
|
|
|
resetImageTransform();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 重置图片变换
|
|
|
|
|
function resetImageTransform() {
|
|
|
|
|
const viewerImage = document.getElementById('viewerImage');
|
|
|
|
|
scale = 1;
|
|
|
|
|
rotation = 0; // 重置旋转角度
|
|
|
|
|
lastScale = 1;
|
|
|
|
|
pointX = 0;
|
|
|
|
|
pointY = 0;
|
|
|
|
|
origin = { x: 0, y: 0 };
|
|
|
|
|
updateImageTransform();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 更新图片变换
|
|
|
|
|
function updateImageTransform() {
|
|
|
|
|
const viewerImage = document.getElementById('viewerImage');
|
|
|
|
|
viewerImage.style.transform = `translate(${pointX}px, ${pointY}px) scale(${scale}) rotate(${rotation}deg)`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 旋转图片
|
|
|
|
|
function rotateImage() {
|
|
|
|
|
rotation += 90;
|
|
|
|
|
if (rotation >= 360) rotation = 0;
|
|
|
|
|
updateImageTransform();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 鼠标滚轮缩放
|
|
|
|
|
document.getElementById('viewerImage').addEventListener('wheel', function(e) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
|
|
const viewerImage = document.getElementById('viewerImage');
|
|
|
|
|
const rect = viewerImage.getBoundingClientRect();
|
|
|
|
|
const centerX = rect.left + rect.width / 2;
|
|
|
|
|
const centerY = rect.top + rect.height / 2;
|
|
|
|
|
|
|
|
|
|
// 计算鼠标相对于图片中心的位置
|
|
|
|
|
const mouseX = e.clientX - centerX;
|
|
|
|
|
const mouseY = e.clientY - centerY;
|
|
|
|
|
|
|
|
|
|
// 计算缩放因子
|
|
|
|
|
const zoomIntensity = 0.1;
|
|
|
|
|
const zoom = Math.exp(e.deltaY * -zoomIntensity * 0.01);
|
|
|
|
|
|
|
|
|
|
// 计算新的缩放比例
|
|
|
|
|
const newScale = Math.max(0.1, Math.min(10, scale * zoom));
|
|
|
|
|
|
|
|
|
|
// 计算缩放后的偏移量，使鼠标位置保持相对不变
|
|
|
|
|
const scaleFactor = newScale / scale;
|
|
|
|
|
pointX = (mouseX + pointX) * scaleFactor - mouseX;
|
|
|
|
|
pointY = (mouseY + pointY) * scaleFactor - mouseY;
|
|
|
|
|
|
|
|
|
|
// 更新缩放比例
|
|
|
|
|
scale = newScale;
|
|
|
|
|
|
|
|
|
|
// 更新图片变换
|
|
|
|
|
updateImageTransform();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 触摸事件处理（缩放和拖动）
|
|
|
|
|
let touchStartDistance = 0;
|
|
|
|
|
let touchStartMidpoint = { x: 0, y: 0 };
|
|
|
|
|
let touchStartPointX = 0;
|
|
|
|
|
let touchStartPointY = 0;
|
|
|
|
|
|
|
|
|
|
document.getElementById('imageViewer').addEventListener('touchstart', function(e) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
|
|
if (e.touches.length === 1) {
|
|
|
|
|
// 单点触摸 - 拖动
|
|
|
|
|
touchStartPointX = pointX;
|
|
|
|
|
touchStartPointY = pointY;
|
|
|
|
|
start.x = e.touches[0].clientX;
|
|
|
|
|
start.y = e.touches[0].clientY;
|
|
|
|
|
panning = true;
|
|
|
|
|
} else if (e.touches.length === 2) {
|
|
|
|
|
// 双点触摸 - 缩放
|
|
|
|
|
const dx = e.touches[0].clientX - e.touches[1].clientX;
|
|
|
|
|
const dy = e.touches[0].clientY - e.touches[1].clientY;
|
|
|
|
|
touchStartDistance = Math.sqrt(dx * dx + dy * dy);
|
|
|
|
|
|
|
|
|
|
// 计算触摸中点
|
|
|
|
|
touchStartMidpoint.x = (e.touches[0].clientX + e.touches[1].clientX) / 2;
|
|
|
|
|
touchStartMidpoint.y = (e.touches[0].clientY + e.touches[1].clientY) / 2;
|
|
|
|
|
|
|
|
|
|
// 记录当前的偏移量
|
|
|
|
|
touchStartPointX = pointX;
|
|
|
|
|
touchStartPointY = pointY;
|
|
|
|
|
lastScale = scale;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
document.getElementById('imageViewer').addEventListener('touchmove', function(e) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
|
|
if (e.touches.length === 1 && panning) {
|
|
|
|
|
// 单点触摸 - 拖动
|
|
|
|
|
const dx = e.touches[0].clientX - start.x;
|
|
|
|
|
const dy = e.touches[0].clientY - start.y;
|
|
|
|
|
pointX = touchStartPointX + dx;
|
|
|
|
|
pointY = touchStartPointY + dy;
|
|
|
|
|
updateImageTransform();
|
|
|
|
|
} else if (e.touches.length === 2) {
|
|
|
|
|
// 双点触摸 - 缩放
|
|
|
|
|
const dx = e.touches[0].clientX - e.touches[1].clientX;
|
|
|
|
|
const dy = e.touches[0].clientY - e.touches[1].clientY;
|
|
|
|
|
const distance = Math.sqrt(dx * dx + dy * dy);
|
|
|
|
|
|
|
|
|
|
// 计算缩放比例
|
|
|
|
|
const scaleFactor = distance / touchStartDistance;
|
|
|
|
|
scale = Math.max(0.1, Math.min(10, lastScale * scaleFactor));
|
|
|
|
|
|
|
|
|
|
// 计算缩放后的偏移量，使触摸中点保持相对不变
|
|
|
|
|
const currentMidpoint = {
|
|
|
|
|
x: (e.touches[0].clientX + e.touches[1].clientX) / 2,
|
|
|
|
|
y: (e.touches[0].clientY + e.touches[1].clientY) / 2
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const deltaX = currentMidpoint.x - touchStartMidpoint.x;
|
|
|
|
|
const deltaY = currentMidpoint.y - touchStartMidpoint.y;
|
|
|
|
|
|
|
|
|
|
pointX = touchStartPointX + deltaX;
|
|
|
|
|
pointY = touchStartPointY + deltaY;
|
|
|
|
|
|
|
|
|
|
updateImageTransform();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
document.getElementById('imageViewer').addEventListener('touchend', function(e) {
|
|
|
|
|
panning = false;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 鼠标拖动功能
|
|
|
|
|
document.getElementById('viewerImage').addEventListener('mousedown', function(e) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
panning = true;
|
|
|
|
|
start.x = e.clientX - pointX;
|
|
|
|
|
start.y = e.clientY - pointY;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
document.addEventListener('mousemove', function(e) {
|
|
|
|
|
if (!panning) return;
|
|
|
|
|
pointX = e.clientX - start.x;
|
|
|
|
|
pointY = e.clientY - start.y;
|
|
|
|
|
updateImageTransform();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
document.addEventListener('mouseup', function() {
|
|
|
|
|
panning = false;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 点击重置按钮（可选）
|
|
|
|
|
function resetZoom() {
|
|
|
|
|
resetImageTransform();
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
