Merge branch '2023_CR2' into 滲透

Tomas

2023-08-21 ccd7179b7f9f0c685e1dc51187a82d203922e928

 PAMapp/pages/index.vue

@@ -59,6 +59,7 @@
                  <p>性別：{{gender}}</p>
                  <p>年齡：{{appointmentDetail.age | toAgeLabel }}</p>
                  <p>職業：{{appointmentDetail.job}}</p>
                  <p>諮詢方式：{{appointmentDetail.consultationMethod | toConsultationMethod }}</p>
                  <p>需求：{{ appointmentDetail.requirement ? appointmentDetail.requirement.split(',').join('、') : '--'}}</p>
                  <p
                      v-for="(item, index) in hopeContactTime"
@@ -141,11 +142,26 @@
              </div>
          </div>
      </PopUpFrame>

    <div class="video-container"
         v-if="isShowFilmPlayer"
         style="position: fixed; bottom: 30px; right: 30px; z-index: 9999; display: flex; justify-content: flex-end;"
    >
      <iframe
        id="ytplayer" type="text/html" width="360" height="270"
        frameborder="0"
        allowfullscreen
        sandbox="allow-scripts allow-same-origin allow-popups allow-presentation fullscreen"
        :src="filmVideoSrc"
      ></iframe>
      <div class="close-btn" @click="closeVideo()">X</div>
    </div>

  </div>
</template>

<script lang="ts">
import {Action, Component, Mutation, namespace, State, Vue, Watch} from 'nuxt-property-decorator';
import {Action, Component, Getter, Mutation, namespace, State, Vue, Watch} from 'nuxt-property-decorator';

import appointmentService from '~/shared/services/appointment.service';
import utilService, {AccessFroms} from '~/shared/services/utils.service';
@@ -244,6 +260,7 @@
      phone             : '',
      requirement       : '',
      satisfactionScore : 0,
      consultationMethod    : ''
    };

    agentInfo: Consultant = {
@@ -260,6 +277,23 @@
      seniority          : '',
      appointments       : []
    };

    isCloseVideo = false;

    @Getter
    fromAccess!: AccessFroms;

    get filmVideoSrc() {
      if (!this.fromAccess) return '';
      return this.fromAccess === AccessFroms.FILM_1
        ? 'https://www.youtube.com/embed/zVBLW9hWD0g?autoplay=1&mute=1&loop=1&playlist=zVBLW9hWD0g'
        : 'https://www.youtube.com/embed/655JnwbuRGA?autoplay=1&mute=1&loop=1&playlist=655JnwbuRGA';
    }


    get isShowFilmPlayer() {
      return !!this.fromAccess && !this.isCloseVideo;
    }

    //////////////////////////////////////////////////////////////////////

@@ -421,6 +455,10 @@
        this.storageClearNotContactAppointmentIdFromMsg();
    }

    closeVideo(): void {
      this.isCloseVideo = true;
    }

    ///////////////////////////////////////////////////////////////////////////////

    get gender(): string {
@@ -535,4 +573,32 @@
      max-width: 335px;
    }
  }

  /* 確保 .video-container 有相對/絕對定位或固定寬度 */
  .video-container {
    position: relative;
    width: auto; /* 根據你的影片尺寸調整 */
  }

  /* 關閉按鈕樣式 */
  .close-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    cursor: pointer;
    font-size: 20px;
    color: #fff;
    background-color: #000;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    opacity: 0.7;
  }

  .close-btn:hover {
    opacity: 1;
  }

</style>