提交有误先还原

master
LiaoYijun 8 months ago
parent 58cd429aab
commit 9aefa87d30

@ -7,7 +7,7 @@
Passport Information for All the Group Members
</title>
<meta content="width=device-width,minimum-scale=1,initial-scale=1" name="viewport">
<link href="https://data.chinahighlights.com/css/min.php?f=/css/customer_center_data/bootstrap.min.css&v=202508071547" rel="stylesheet">
<link href="https://data.chinahighlights.com/css/min.php?f=/css/customer_center_data/bootstrap.min.css&v=202405161016" rel="stylesheet">
<style>
body {
margin: 0;
@ -375,8 +375,6 @@ select.gender_pick {border: 1px solid #d1d1d1;
padding: 0 15px;
width: auto;}
</style>
<script src="https://data.chinahighlights.com/js/min.php?f=/js/customer_center_data/jquery.min.js,/js/customer_center_data/bootstrap.min.js,/js/customer_center_data/jquery-ui.min.js&v=202405161016"></script>
</head>
<body>
@ -1061,332 +1059,6 @@ select.gender_pick {border: 1px solid #d1d1d1;
<textarea id="special_request" name="special_request" style="resize:none;"></textarea>
</div>
<!-- 🔜上传护照图片 -->
<div id="inquiryBox">
<h2>Please upload your passport photo (ID page)</h2>
<div class="upload-section">
<input type="file" id="fileInput" accept="image/*" multiple>
<button id="uploadBtn">Upload</button>
</div>
<div class="progress-section" id="progressSection" style="display: none;">
<p>uploading...</p>
<div class="progress-bar">
<div class="progress-fill" id="progressFill"></div>
</div>
</div>
<div class="uploaded-images" id="uploadedImages">
<h2>Uploaded image</h2>
<div class="image-grid" id="imageGrid">
<!-- 上传的图片将显示在这里 -->
</div>
</div>
</div>
<script>
const HT3_HOST = 'https://hub.globalhighlights.com/ht3.0'
function checkStatus(response) {
if (response.status >= 200 && response.status < 300) {
return response
} else {
const message =
'Fetch error: ' + response.url + ' ' + response.status + ' (' +
response.statusText + ')'
const error = new Error(message)
error.response = response
throw error
}
}
function fetchJSON(url, data = {}) {
const params = new URLSearchParams(data).toString();
const ifp = url.includes('?') ? '&' : '?';
const fUrl = params !== '' ? `${url}${ifp}${params}` : url;
return fetch(fUrl, {
method: 'GET',
}).then(checkStatus)
.then(response => response.json())
.catch(error => {
throw error;
});
}
const simple_encrypt = text => {
const key = "TPDa*UU8h5%!zS";
let encrypted = [];
let keyIndex = 0;
for (let i = 0; i < text.length; i++) {
const charCode = text.charCodeAt(i);
const keyCharCode = key.charCodeAt(keyIndex);
const encryptedChar = charCode ^ keyCharCode;
encrypted.push(encryptedChar);
keyIndex = (keyIndex + 1) % key.length;
}
return encrypted.map(byte => byte.toString(16).padStart(2, "0")).join("");
};
const uploadOSS = (file, key) => {
fetchJSON(`${HT3_HOST}/oss/signature_unique_key?key=${key}&filename=${file.name}`)
.then(json => {
if (json.errcode === 0) {
const { method, host, signed_headers } = json.result;
fetch(host, {
method,
headers: signed_headers,
body: file,
})
.then(response => {
console.info('response: ', response);
if (response.ok) {
console.info('图片ok');
} else {
console.info('图片上传失败');
}
});
}
});
};
const deleteImage = async key => {
try {
const { errcode } = await fetchJSON(`${HT3_HOST}/oss/delete_unique_key?key=${key}`, {
method: "GET",
});
return errcode === 0;
} catch (error) {
console.error("删除图片失败", error);
return false;
}
};
$(document).ready(function() {
let uploadedFiles = [];
const GRI_SN = <?php echo $group['GRI_SN']; ?>;
const GRI_No = "<?php echo $group['GRI_No']; ?>";
const ossKey = `ghh/${GRI_SN}-${GRI_No}/passport_image`
const encryptKey = simple_encrypt(ossKey);
fetchJSON(`${HT3_HOST}/oss/list_unique_key?key=${encryptKey}`)
.then(json => {
// console.info('json: ', json);
});
$('#fileInput').on('change', function(e) {
const files = e.target.files;
if (files.length > 0) {
}
});
$('#uploadBtn').on('click', function() {
const files = $('#fileInput')[0].files;
if (files.length === 0) {
alert('Please select a file.');
return;
}
$('#progressSection').show();
$('#uploadBtn').prop('disabled', true);
startUpload(files, function() {
$('#progressSection').hide();
$('#uploadBtn').prop('disabled', false);
$('#fileInput').val('');
});
});
function startUpload(files, callback) {
for (let i = 0; i < files.length; i++) {
const file = files[i];
const progress = ((i + 1) / files.length) * 100;
uploadOSS(file, encryptKey);
const reader = new FileReader();
reader.onload = function(e) {
const imageData = {
id: Date.now() + i,
name: file.name,
url: e.target.result
};
uploadedFiles.push(imageData);
addImageToGrid(imageData);
};
reader.readAsDataURL(file);
$('#progressFill').css('width', progress + '%');
}
callback();
}
function addImageToGrid(imageData) {
const imageItem = `
<div class="image-item" data-id="${imageData.id}">
<img src="${imageData.url}" alt="${imageData.name}">
<div class="image-info">
<h3>${imageData.name}</h3>
<button class="delete-btn" data-id="${imageData.id}">Remove</button>
</div>
</div>
`;
$('#imageGrid').append(imageItem);
}
$(document).on('click', '.delete-btn', function() {
const id = $(this).data('id');
// const imageKey = $(this).data('key');
$(`.image-item[data-id="${id}"]`).remove();
uploadedFiles = uploadedFiles.filter(file => file.id !== id);
// deleteImage(imageKey);
});
});
</script>
<style>
.upload-section {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
text-align: center;
}
.upload-area {
border: 2px dashed #3498db;
border-radius: 8px;
padding: 40px 20px;
cursor: pointer;
transition: all 0.3s ease;
margin-bottom: 20px;
position: relative;
}
.upload-area:hover {
background-color: #f8f9fa;
border-color: #2980b9;
}
.upload-area p {
font-size: 18px;
color: #7f8c8d;
}
#fileInput {
width: 100%;
height: 100%;
cursor: pointer;
}
#uploadBtn {
background-color: #3498db;
color: white;
border: none;
padding: 12px 30px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
#uploadBtn:hover {
background-color: #2980b9;
}
#uploadBtn:disabled {
background-color: #bdc3c7;
cursor: not-allowed;
}
.progress-section {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
text-align: center;
}
.progress-bar {
width: 100%;
height: 20px;
background-color: #ecf0f1;
border-radius: 10px;
overflow: hidden;
margin-top: 10px;
}
.progress-fill {
height: 100%;
background-color: #2ecc71;
width: 0%;
transition: width 0.3s ease;
}
.uploaded-images {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.image-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 10px;
}
.image-item {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.image-item:hover {
transform: translateY(-5px);
}
.image-item img {
width: 100%;
height: 120px;
object-fit: cover;
display: block;
}
.image-info {
padding: 15px;
}
.image-info h3 {
font-size: 16px;
margin-bottom: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.image-info p {
font-size: 14px;
color: #7f8c8d;
}
.delete-btn {
background-color: #e74c3c;
color: white;
border: none;
padding: 5px 10px;
border-radius: 3px;
cursor: pointer;
font-size: 12px;
float: right;
}
.delete-btn:hover {
background-color: #c0392b;
}
</style>
<!-- 上传护照图片🔚 -->
<div class="inquiryBtn">
<input type="hidden" name="toname" value="<?php echo $userinfo[0]->OPI_FirstName; ?>">
<input type="hidden" name="tomail" value="<?php echo $userinfo[0]->OPI_Email; ?>">
@ -1421,6 +1093,7 @@ select.gender_pick {border: 1px solid #d1d1d1;
</div>
</div>
<!-- reviewModal end-->
<script src="https://data.chinahighlights.com/js/min.php?f=/js/customer_center_data/jquery.min.js,/js/customer_center_data/bootstrap.min.js,/js/customer_center_data/jquery-ui.min.js&v=202405161016"></script>
<script>
function submit_info_form () {
var $btn = $("#btn-add-userinfo").button('loading');

Loading…
Cancel
Save