1

@@ -30,6 +30,7 @@
     "jszip": "^3.10.1",
     "katex": "^0.16.6",
     "lodash": "^4.17.21",
+    "md5js": "^1.0.7",
     "nprogress": "0.2.0",
     "pinia": "2.0.35",
     "qrcode": "^1.5.3",

@@ -65,6 +65,9 @@ importers:
       lodash:
         specifier: ^4.17.21
         version: 4.17.21
+      md5js:
+        specifier: ^1.0.7
+        version: 1.0.7
       nprogress:
         specifier: 0.2.0
         version: 0.2.0
@@ -2367,6 +2370,9 @@ packages:
     resolution: {integrity: sha512-4y7uGv8bd2WdM9vpQsiQNo41Ln1NvhvDRuVt0k2JZQ+ezN2uaQes7lZeZ+QQUHOLQAtDaBJ+7wCbi+ab/KFs+w==}
     engines: {node: '>=0.10.0'}
 
+  md5js@1.0.7:
+    resolution: {integrity: sha512-97fZ6+8JijezAk/n37Lnswo4aJ67utCeCXlIsDid3uZ/khIeof0hWpIYeSvf0kiyqB0i9XfQvOyZPuBSR7g2Ng==}
+
   mdn-data@2.0.14:
     resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
 
@@ -5828,6 +5834,8 @@ snapshots:
     dependencies:
       object-visit: 1.0.1
 
+  md5js@1.0.7: {}
+
   mdn-data@2.0.14: {}
 
   memoize-one@6.0.0: {}

@@ -511,7 +511,10 @@ export const constantRoutes = [
             path: 'detail',
             name: 'seat_detail',
             component: () => import('@/viewsPc/seat/ticket-detail'),
-            meta: { title: '购票详情' }
+            meta: { title: '购票详情' },
+            props: route => ({
+              activityId:route.query.id,
+            })
           },
           {
             path: 'seat_picker',

 <script setup>
 import { reactive } from "vue";
-import { cancelOrder, getOrderDetail } from "./api/index.js";
+import {
+  cancelOrder,
+  getOrderDetail,
+  immediatePay,
+  cancelPay,
+} from "./api/index.js";
 import qrCodeDialog from "./components/qrCodeDialog.vue";
 import { ElMessageBox, ElMessage } from "element-plus";
 
@@ -31,12 +36,102 @@ const status = reactive({
 });
 
 const detail = reactive({
+  showCodeDialog: false,
+  pay_loading: false,
+  qrInfo: {},
   data: null,
+  timer: null,
+
+  // 分钟
+  minutes: 0,
+  seconds: 0,
   fetchData() {
     getOrderDetail({ orderSn: route.query.orderSn }).then((res) => {
       detail.data = res.data;
+      detail.countDown(detail.data?.payEndTime);
     });
   },
+  // 倒计时
+  countDown(time) {
+    // 当前时间
+    let nowTime = new Date();
+    let endTime = new Date(time);
+    // 两个日期相差的时间戳，以毫秒为单位（1000ms = 1s）
+    let totalTime = endTime - nowTime;
+    // 结束时间大于现在的时间
+    if (totalTime > 0) {
+      detail.timer = setInterval(() => {
+        if (totalTime >= 0) {
+          //获取分钟数
+          let minutes = Math.floor(
+            (((totalTime % (3600 * 24 * 1000)) / 1000) % 3600) / 60
+          );
+          //获取秒数
+          let seconds = Math.floor(
+            (((totalTime % (3600 * 24 * 1000)) / 1000) % 3600) % 60
+          )
+            .toString()
+            .padStart(2, "0");
+
+          detail.minutes = minutes;
+          detail.seconds = seconds;
+
+          totalTime -= 1000;
+          // console.log(totalTime)
+        } else {
+          clearInterval(timer); // 停止调用函数
+        }
+      }, 1000);
+    }
+  },
+  payment() {
+    if (detail.pay_loading) return;
+    detail.pay_loading = true;
+    immediatePay({ orderSn: detail.data.orderSn, payType: 1 })
+      .then((res) => {
+        detail.qrInfo = res.data;
+        detail.showCodeDialog = true;
+      })
+      .finally(() => (detail.pay_loading = false));
+  },
+  // 取消支付
+  cancelPay() {
+    ElMessageBox.confirm("确定取消支付吗？", "提示", {
+      confirmButtonText: "确认",
+      cancelButtonText: "取消",
+      type: "warning",
+      draggable: true,
+    })
+      .then(() => {
+        cancelPay({ orderSn: detail.data.orderSn }).then(() => {
+          detail.fetchData();
+          ElMessage({
+            type: "success",
+            message: "操作成功",
+          });
+        });
+      })
+      .catch(() => {});
+  },
+  // 取消购票
+  cancelOrder() {
+    ElMessageBox.confirm("确定取消购票吗？", "提示", {
+      confirmButtonText: "确认",
+      cancelButtonText: "取消",
+      type: "warning",
+      draggable: true,
+    })
+      .then(() => {
+        cancelOrder({ orderSn: detail.data.orderSn }).then((res) => {
+          detail.fetchData();
+          ElMessage({
+            type: "success",
+            message: "操作成功",
+          });
+        });
+      })
+      .catch(() => {});
+  },
 });
 
 detail.fetchData();
@@ -124,13 +219,21 @@ detail.fetchData();
         </div>
         <!-- button -->
         <div v-if="detail.data?.state == 0" class="btn_box">
-          <div class="can_pay">取消支付</div>
-          <div class="pay">立即支付</div>
+          <div class="can_pay" @click="detail.cancelPay()">取消支付</div>
+          <div class="pay" @click="detail.payment()">立即支付</div>
         </div>
         <div v-else>
-          <div v-if="detail.data?.state == 1 && detail.data?.isRefund" class="btn_box">
-            <div class="can_pay">取消购票</div>
-            <div class="pay">再来一单</div>
+          <div
+            v-if="detail.data?.state == 1 && detail.data?.isRefund"
+            class="btn_box"
+          >
+            <div class="can_pay" @click="detail.cancelOrder()">取消购票</div>
+            <div
+              class="pay"
+              @click="$router.push({ path: '/seat/seat-picker' })"
+            >
+              再来一单
+            </div>
           </div>
 
           <div v-else class="btn_box">
@@ -139,9 +242,14 @@ detail.fetchData();
         </div>
       </div>
       <div v-if="detail.data?.state == 0" class="tip">
-        请尽快完成支付，还剩15分00秒
+        请尽快完成支付，还剩{{ detail.minutes }}分{{ detail.seconds }}秒
       </div>
     </div>
+
+    <qrCodeDialog
+      :showCodeDialog="detail.showCodeDialog"
+      :qrCode="detail.qrInfo?.scanCodeUrl"
+    />
   </div>
 </template>
 
@@ -283,10 +391,11 @@ detail.fetchData();
         padding-top: 20px;
         display: flex;
         gap: 20px;
+        user-select: none;
         .pay_dis {
           width: 360px;
           height: 40px;
-          background: #A09DFF;
+          background: #a09dff;
           border-radius: 20px;
           font-weight: 500;
           font-size: 16px;

@@ -52,8 +52,9 @@ const order = reactive({
       })
       .finally(() => (order.pay_loading = false));
   },
+  // 取消支付
   cancelPayment(it) {
-    ElMessageBox.confirm("确定取消支付吗？", "Warning", {
+    ElMessageBox.confirm("确定取消支付吗？", "提示", {
       confirmButtonText: "确认",
       cancelButtonText: "取消",
       type: "warning",
@@ -111,7 +112,7 @@ order.fetchData();
                 {{ status[it.state].txt }}
               </div>
               <div v-if="it.state == 0" class="tip">
-                请尽快完成支付，还剩15分00秒
+                请尽快完成支付，还剩{{ it.min }}分{{ it.sec }}秒
               </div>
             </div>
           </div>
@@ -159,6 +160,7 @@ order.fetchData();
     box-shadow: 0px 0px 46px 0px rgba(1, 16, 64, 0.08);
     border-radius: 8px;
     margin-bottom: 30px;
+    cursor: pointer;
     .info_box {
       display: flex;
       gap: 20px;

@@ -12,7 +12,7 @@ const audience = reactive({
   },
 
   deletePeople(id) {
-    ElMessageBox.confirm("确定删除该观看人吗？", "Warning", {
+    ElMessageBox.confirm("确定删除该观看人吗？", "提示", {
       confirmButtonText: "确认",
       cancelButtonText: "取消",
       type: "warning",

@@ -2,7 +2,7 @@
 import { ElMessage } from "element-plus";
 import { getPriceLevelInfo, getSiteConfig } from "./api/index.js";
 const route = useRoute();
-const router = useRouter()
+const router = useRouter();
 
 const iframeRef = ref();
 
@@ -33,7 +33,7 @@ const price = reactive({
 
 // 座位禁用时图标地址
 const disabledIconUrl =
-  "http://book.xiaojinyu.games/api/uploads/image/20240511/unselect_default.png";
+  "http://114.55.227.212:8083/images/20240511/unselect_default.png";
 
 const siteConfig = reactive({
   loading: false,

@@ -2,6 +2,8 @@
 import dayjs from "dayjs";
 import useUserStore from "@/store/modules/user";
 import { setToken, getToken } from "./utils/local-store.js";
+import { md5 } from "md5js";
+import { ElMessageBox, ElMessage } from "element-plus";
 import {
   loginFree,
   activityDetail,
@@ -9,24 +11,25 @@ import {
   getSitePlaceInfo,
   getPriceLevelInfo,
 } from "./api/index.js";
-import { ElMessage } from "element-plus";
-import { reactive } from "vue";
 
 const route = useRoute();
 const router = useRouter();
 const userStore = useUserStore();
-const actId = 1;
+
+const props = defineProps({
+  activityId: [String, Number],
+});
 
 // 用户免登录
-const login = () => {
-  return new Promise((resolve, reject) => {
-    return loginFree({
-      userId: 1,
-      sign: "e00363b5016dbb6ee6cf78626a149f9c",
-    }).then((res) => {
-      setToken(res.data.token);
-      resolve(res.data);
-    });
+const login = async (userId) => {
+  const sign = md5(`uid=${userId}lgo1acfkw51jfo`);
+  return loginFree({
+    userId: userId,
+    sign,
+  }).then((res) => {
+    setToken(res.data.token);
+    resolve(res.data);
+    console.log(33333, res);
   });
 };
 
@@ -106,7 +109,7 @@ const detail = reactive({
   data: null,
   fetchData() {
     this.loading = true;
-    activityDetail({ actId: route.query?.actId ?? actId })
+    activityDetail({ actId: props.activityId })
       .then((res) => {
         this.data = res.data;
       })
@@ -120,7 +123,7 @@ const timeVenue = reactive({
   data: [],
   fetchData() {
     this.loading = true;
-    sessionDetail({ actId: route.query?.actId ?? actId })
+    sessionDetail({ actId: props.activityId })
       .then((res) => {
         this.data = res.data;
       })
@@ -150,7 +153,7 @@ const price = reactive({
   data: [],
   fetchData() {
     getPriceLevelInfo({
-      actId: route.query?.actId ?? actId,
+      actId: props.activityId,
       sessionId: select_form.venueItem?.id,
       openType: select_form.session,
       sitePlace: select_form.place,
@@ -180,10 +183,38 @@ watchEffect(() => {
   }
 });
 
-login().then((res) => {
-  detail.fetchData();
-  timeVenue.fetchData();
-});
+// 主流程开始
+watch(
+  () => props.activityId,
+  async (activityId) => {
+    if (!activityId) {
+      // [TODO] dialog提示缺少活動ID讓然後返回
+      ElMessageBox.confirm("缺少活动id", "提示", {
+        confirmButtonText: "确认",
+        type: "warning",
+        draggable: true,
+      }).then((res) => {
+        router.push("/");
+      });
+      return;
+    }
+
+    // 检查登录
+    const ticketUserToken = getToken();
+    if (!ticketUserToken) {
+      const userId = 1; // [TODO] 从原项目中取已登录的用户ID
+      if (!userId) {
+        // 未登录，跳转登录 [TODO]
+        return;
+      }
+      await login(userId);
+    }
+
+    detail.fetchData();
+    timeVenue.fetchData();
+  },
+  { immediate: true }
+);
 </script>
 
 <template>