From 0280168879babed5fe7c52dc7b548c65df153079 Mon Sep 17 00:00:00 2001
From: LiaoYijun <lyj@hainatravel.com>
Date: Fri, 8 Aug 2025 10:12:14 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E9=97=AE=E9=A2=98=EF=BC=8C?=
 =?UTF-8?q?=E9=87=8D=E6=96=B0=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../third_party/order/controllers/confirm.php |   1 +
 .../third_party/order/views/confirm_order.php | 331 +++++++++++++++++-
 .../order/views/test_confirm_order.php        |  38 +-
 3 files changed, 345 insertions(+), 25 deletions(-)
diff --git a/application/third_party/order/controllers/confirm.php b/application/third_party/order/controllers/confirm.php
index 1679355a..3fa580ae 100644
--- a/application/third_party/order/controllers/confirm.php
+++ b/application/third_party/order/controllers/confirm.php
@@ -48,6 +48,7 @@ class Confirm extends CI_Controller {
     }
 
     // https://www.chinahighlights.com/secureinfoconfirm/confirm/test/991733/20230314153025/82899713caf652fc5e4cbe76655bdd3f/ah
+    // https://www.chinahighlights.com/secureinfoconfirm/confirm/test/991733/20230314153025/82899713caf652fc5e4cbe76655bdd3f/
     public function test($COLI_SN = false, $visitor_link = false, $token = false,$site_code='') {
       $data = array();
       if (empty($COLI_SN)) {
diff --git a/application/third_party/order/views/confirm_order.php b/application/third_party/order/views/confirm_order.php
index b8d7f0de..af19ed55 100644
--- a/application/third_party/order/views/confirm_order.php
+++ b/application/third_party/order/views/confirm_order.php
@@ -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=202405161016" rel="stylesheet">
+  <link href="https://data.chinahighlights.com/css/min.php?f=/css/customer_center_data/bootstrap.min.css&v=202508071547" rel="stylesheet">
 	<style>
 		body {
 			margin: 0;
@@ -375,6 +375,8 @@ 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>
@@ -400,7 +402,7 @@ select.gender_pick {border: 1px solid #d1d1d1;
 
 		<div class="tm_form_content">
 
-			<form action="https://www.chinahighlights.com/secureinfoconfirm/confirm/save_confirm_info" id="form-confirm-info" method="POST">
+			<form id="form-confirm-info" method="POST">
 				<div id="inquiryBox">
 
 					<h1>
@@ -1059,6 +1061,320 @@ 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,
+                  });
+
+                }
+              });
+          };
+          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);
+            });
+
+          $('#uploadBtn').on('click', function(e) {
+            e.preventDefault();
+            const files = $('#fileInput')[0].files;
+
+            if (files.length === 0) {
+              e.preventDefault();
+              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; ?>">
@@ -1067,11 +1383,12 @@ select.gender_pick {border: 1px solid #d1d1d1;
           <input type="hidden" name="COLI_ID" value="<?php echo $userinfo[0]->COLI_ID; ?>">
           <input type="hidden" name="COLI_SN" value="<?php echo $userinfo[0]->COLI_SN; ?>">
           <input type="hidden" name="visitor_link" value="<?php echo $visitor_link; ?>">
-					<button id="tmsubmit" type="button" onclick="show_review_modal();">Check & Submit</button>
+					<button id="tmsubmit" type="button">Check & Submit</button>
 					<input id="passport_info" name="passport_info" type="hidden" value="" />
 					<input type="hidden" name="url" value="" />
 				</div>
 			</form>
+
 		</div>
 	</div>
   <!-- reviewModal -->
@@ -1093,7 +1410,6 @@ 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');
@@ -1158,6 +1474,13 @@ select.gender_pick {border: 1px solid #d1d1d1;
   }
 
   $(function() {
+
+    $('#tmsubmit').on('click', function(e) {
+      e.preventDefault();
+      show_review_modal();
+    });
+
+
     var $travelerTemplate = $(".traveler_info:first").clone();
     //添加客户
     $("#add_traveler_button").click(function () {addTraveler()});
diff --git a/application/third_party/order/views/test_confirm_order.php b/application/third_party/order/views/test_confirm_order.php
index a0a8e803..af19ed55 100644
--- a/application/third_party/order/views/test_confirm_order.php
+++ b/application/third_party/order/views/test_confirm_order.php
@@ -402,7 +402,7 @@ select.gender_pick {border: 1px solid #d1d1d1;
 
 		<div class="tm_form_content">
 
-			<form action="https://www.chinahighlights.com/secureinfoconfirm/confirm/save_confirm_info" id="form-confirm-info" method="POST">
+			<form id="form-confirm-info" method="POST">
 				<div id="inquiryBox">
 
 					<h1>
@@ -1062,7 +1062,7 @@ 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>
 
@@ -1135,15 +1135,7 @@ select.gender_pick {border: 1px solid #d1d1d1;
                     method,
                     headers: signed_headers,
                     body: file,
-                  })
-                    .then(response => {
-                      console.info('response: ', response);
-                        if (response.ok) {
-                          console.info('图片ok');
-                        } else {
-                          console.info('图片上传失败');
-                        }
-                    });
+                  });
 
                 }
               });
@@ -1171,18 +1163,14 @@ select.gender_pick {border: 1px solid #d1d1d1;
               // console.info('json: ', json);
             });
 
-          $('#fileInput').on('change', function(e) {
-            const files = e.target.files;
-            if (files.length > 0) {
-            }
-          });
-
-          $('#uploadBtn').on('click', function() {
+          $('#uploadBtn').on('click', function(e) {
+            e.preventDefault();
             const files = $('#fileInput')[0].files;
 
             if (files.length === 0) {
-                alert('Please select a file.');
-                return;
+              e.preventDefault();
+              alert('Please select a file.');
+              return;
             }
 
             $('#progressSection').show();
@@ -1395,11 +1383,12 @@ select.gender_pick {border: 1px solid #d1d1d1;
           <input type="hidden" name="COLI_ID" value="<?php echo $userinfo[0]->COLI_ID; ?>">
           <input type="hidden" name="COLI_SN" value="<?php echo $userinfo[0]->COLI_SN; ?>">
           <input type="hidden" name="visitor_link" value="<?php echo $visitor_link; ?>">
-					<button id="tmsubmit" type="button" onclick="show_review_modal();">Check & Submit</button>
+					<button id="tmsubmit" type="button">Check & Submit</button>
 					<input id="passport_info" name="passport_info" type="hidden" value="" />
 					<input type="hidden" name="url" value="" />
 				</div>
 			</form>
+
 		</div>
 	</div>
   <!-- reviewModal -->
@@ -1485,6 +1474,13 @@ select.gender_pick {border: 1px solid #d1d1d1;
   }
 
   $(function() {
+
+    $('#tmsubmit').on('click', function(e) {
+      e.preventDefault();
+      show_review_modal();
+    });
+
+
     var $travelerTemplate = $(".traveler_info:first").clone();
     //添加客户
     $("#add_traveler_button").click(function () {addTraveler()});
