|
|
|
|
@ -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');
|
|
|
|
|
|