gami-web/app/components/popup/QrCode.vue

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { useQrCodePopup } from '~/composables/useQrCodePopup'
import QrcodeVue from 'qrcode.vue'
import { skillApi } from '~/api/skill'
import { useAuth } from '~/composables/useAuth'
import type { SkillSimpleDTO } from '~/types/api'
import { sleep, buildPng } from '~/utils/helpers'

const {
  state,
  formattedPrice,
  currencyAmount,
  isGeneralTab,
  isSpecificForm,
  switchTab,
  setSpecificQty,
  generateSpecificQr,
  close,
  handleCopyLink,
  updateQrcodeValue,
  updateCurrencyAmount,
  updateSkillInfo,
  resetSpecificStep,
} = useQrCodePopup()
const { open: openSelectListPopup, state: selectListState } = useSelectListPopup()
const { playmateInfo, userProfile } = useAuth()
const { t } = useI18n()

const skills = computed<SkillSimpleDTO[]>(() => playmateInfo.value?.skills ?? [])

const specificTotalPrice = computed(() => (state.price || 0) * (state.specificQty || 0))
const formattedSpecificTotalPrice = computed(() =>
  specificTotalPrice.value ? specificTotalPrice.value.toLocaleString() : '0',
)

const saveImagePopupVisible = ref(false)
const saveImageRef = ref<HTMLElement | null>(null)

const handleSpecificQtyChange = (value: number) => {
  setSpecificQty(value)
}

const initSkillFromPlaymate = () => {
  if (state.skillId) return

  const list = skills.value
  if (!list.length) return

  const first = list[0]
  if (!first) return

  updateSkillInfo({
    skillId: first.id,
    skillName: first.name,
    skillIcon: first.icon,
    price: first.price,
    unit: first.unit,
  })
}

const generateQrCode = async (type: 1 | 2) => {
  if (!state.skillId) return

  try {
    const payload = {
      skillId: state.skillId,
      type,
      purchaseQty: type === 2 ? state.specificQty : undefined,
    }
    const result = await skillApi.createOrderQrcode(payload)
    const origin = window.location.origin

    if (result?.qrCode) {
      const url = `${origin}/user/category?id=${state.skillId}&code=${result.qrCode}`
      updateQrcodeValue(url)
      if (typeof result.currencyAmount === 'number')
        updateCurrencyAmount(result.currencyAmount)
    }
    else {
      console.error('No QR Code returned', result)
    }
  }
  catch (e) {
    console.error('Failed to generate QR code:', e)
  }
}

const handleSaveImage = async () => {
  // 展示保存图片的预览卡片
  saveImagePopupVisible.value = true

  if (typeof window === 'undefined')
    return

  await sleep(1000)

  const node = saveImageRef.value
  if (!node)
    return

  try {
    const dataUrl = await buildPng(node as HTMLElement)

    const link = document.createElement('a')
    link.download = 'gami-qrcode.png'
    link.href = dataUrl
    link.click()
  }
  catch (error) {
    console.error('Failed to save QR image', error)
  }
  finally {
    saveImagePopupVisible.value = false
  }
}

watch(
  () => playmateInfo.value,
  () => {
    if (!state.visible) return
    initSkillFromPlaymate()
  },
  { deep: true },
)

watch(() => [state.visible, state.activeTab, state.skillId], ([visible, tab, skillId]) => {
  if (!visible) return

  initSkillFromPlaymate()

  if (tab === 'general' && skillId) {
    generateQrCode(1)
  }
  else if (tab === 'specific' && skillId) {
    resetSpecificStep()
  }
})

watch(() => state.specificStep, (step) => {
  if (step === 'preview' && state.activeTab === 'specific') {
    generateQrCode(2)
  }
})

const handleSkillSelect = () => {
  openSelectListPopup({
    options: skills.value.map(s => ({
      label: s.name,
      value: s.id,
      icon: s.icon,
    })),
    defaultValue: state.skillId,
    onSelect: (value, _option) => {
      const skill = skills.value.find(s => s.id === value)
      if (skill) {
        updateSkillInfo({
          skillId: skill.id,
          skillName: skill.name,
          skillIcon: skill.icon,
          price: skill.price,
          unit: skill.unit,
        })
      }
    },
  })
}

const handleUpdateShow = (value: boolean) => {
  if (!value) {
    close()
  }
}
</script>

<template>
  <van-popup
    :show="state.visible"
    round
    position="bottom"
    class="qr-popup"
    @update:show="handleUpdateShow"
  >
    <div class="qr-popup__container">
      <!-- Header: game info -->
      <div
        class="qr-popup__header"
        @click="handleSkillSelect"
      >
        <div class="qr-popup__header-left">
          <div class="qr-popup__skill-icon">
            <img
              v-if="state.skillIcon"
              :src="state.skillIcon"
              :alt="state.skillName"
              loading="lazy"
            >
          </div>
          <span class="qr-popup__title">
            {{ state.skillName }}
          </span>
          <van-icon
            name="arrow"
            class="qr-popup__header-arrow"
            :class="{ 'qr-popup__header-arrow--active': selectListState.visible }"
            size="14"
          />
        </div>
      </div>

      <!-- Tabs -->
      <div class="qr-popup__tabs">
        <button
          type="button"
          class="qr-popup__tab"
          :class="{ 'qr-popup__tab--active': isGeneralTab }"
          @click="switchTab('general')"
        >
          {{ t('qrCode.tabs.general') }}
        </button>
        <button
          type="button"
          class="qr-popup__tab"
          :class="{ 'qr-popup__tab--active': !isGeneralTab }"
          @click="switchTab('specific')"
        >
          {{ t('qrCode.tabs.specific') }}
        </button>
      </div>

      <!-- 特定码 Tab - 状态 1：输入金额 + 调整时间 -->
      <div
        v-if="isSpecificForm"
        class="qr-popup__specific"
      >
        <section class="qr-popup__specific-card">
          <div class="qr-popup__specific-amount-row">
            <span
              class="qr-popup__coin qr-popup__coin--small"
              aria-hidden="true"
            />
            <span class="qr-popup__specific-price-value">
              {{ formattedPrice }}
            </span>
            <span
              v-if="state.unit"
              class="qr-popup__unit"
            >
              /{{ state.unit }}
            </span>
          </div>

          <div class="qr-popup__specific-divider" />

          <div class="qr-popup__specific-time-row">
            <span class="qr-popup__time-label">
              Times ({{ state.unit }})
            </span>

            <CommonStepper
              :model-value="state.specificQty"
              @update:model-value="handleSpecificQtyChange"
            />
          </div>
        </section>

        <div class="qr-popup__specific-price">
          <span
            class="qr-popup__coin qr-popup__coin--small"
            aria-hidden="true"
          />
          <span
            v-if="specificTotalPrice"
            class="qr-popup__specific-price-value"
          >
            {{ formattedSpecificTotalPrice }}
          </span>
          <span
            v-else
            class="qr-popup__specific-price-value qr-popup__specific-price-value--disabled"
          >
            0
          </span>
          <span class="qr-popup__unit">
            /{{ state.specificQty }} {{ state.unit }}
          </span>
        </div>

        <button
          type="button"
          class="qr-popup__generate-btn"
          :disabled="!specificTotalPrice"
          @click="generateSpecificQr"
        >
          {{ t('qrCode.specific.generate') }}
        </button>
      </div>

      <!-- 通用码 Tab，或特定码 Tab 的状态 2（二维码预览，与通用码一致） -->
      <template v-else>
        <!-- QR container (placeholder) -->
        <div class="qr-popup__qr-wrapper">
          <div class="qr-popup__qr-card">
            <qrcode-vue
              :value="state.qrcodeValue"
              :size="145"
              :gradient="true"
              :gradient-start-color="`#4ED2FF`"
              :gradient-end-color="`#B1EF5D`"
              :image-settings="{ src: '/logo.png', height: 24, width: 24, excavate: true }"
              :level="`H`"
            />
          </div>
        </div>

        <!-- Price line -->
        <div
          v-if="isGeneralTab"
          class="qr-popup__price-row"
        >
          <span
            class="qr-popup__coin"
            aria-hidden="true"
          />
          <span class="qr-popup__price">
            {{ formattedPrice }}
          </span>
          <span
            v-if="state.unit"
            class="qr-popup__unit"
          >
            /{{ state.unit }}
          </span>
        </div>
        <div
          v-else
          class="qr-popup__price-row"
        >
          <span
            class="qr-popup__coin"
            aria-hidden="true"
          />
          <span class="qr-popup__price">
            {{ formattedSpecificTotalPrice }}
          </span>
          <span
            v-if="state.unit"
            class="qr-popup__unit"
          >
            /{{ state.specificQty }} {{ state.unit }}
          </span>
        </div>

        <!-- Actions -->
        <div class="qr-popup__actions">
          <button
            type="button"
            class="qr-popup__btn qr-popup__btn--secondary"
            @click="handleSaveImage"
          >
            {{ t('qrCode.actions.saveImage') }}
          </button>
          <button
            type="button"
            class="qr-popup__btn qr-popup__btn--primary"
            @click="handleCopyLink"
          >
            {{ t('qrCode.actions.copyLink') }}
          </button>
        </div>
      </template>
    </div>
  </van-popup>
  <van-popup
    :show="saveImagePopupVisible"
    position="center"
    class="save-image-popup"
    :close-on-click-overlay="false"
  >
    <div
      ref="saveImageRef"
      class="save-image-popup__container"
    >
      <div class="save-image-popup__avatar-wrapper">
        <div class="save-image-popup__avatar">
          <img
            :src="userProfile?.avatar ? userProfile?.avatar : '/avatar.png'"
            :alt="userProfile?.nickname || 'avatar'"
            loading="lazy"
          >
        </div>
      </div>

      <p class="save-image-popup__name">
        {{ userProfile?.nickname }}
      </p>

      <CommonStarRating
        class="save-image-popup__rating"
        :model-value="playmateInfo?.star || 0"
        :size="10"
        readonly
      />

      <div class="save-image-popup__qr-card">
        <qrcode-vue
          :value="state.qrcodeValue"
          :size="145"
          :gradient="true"
          :gradient-start-color="`#4ED2FF`"
          :gradient-end-color="`#B1EF5D`"
          :image-settings="{ src: '/logo.png', height: 24, width: 24, excavate: true }"
          :level="`H`"
        />
      </div>

      <div class="save-image-popup__price-row">
        <span
          class="save-image-popup__coin"
          aria-hidden="true"
        />
        <span class="save-image-popup__price">
          {{ isGeneralTab ? formattedPrice : formattedSpecificTotalPrice }}
        </span>
        <span class="save-image-popup__symbol">
          ≈
        </span>
        <span class="save-image-popup__currency">
          IDR {{ currencyAmount }}
        </span>
      </div>

      <button
        type="button"
        class="save-image-popup__cta"
      >
        {{ t('qrCode.saveImage.cta') }}
      </button>

      <div class="save-image-popup__footer">
        <div class="save-image-popup__footer-left">
          <div class="save-image-popup__game-avatar">
            <img
              v-if="state.skillIcon"
              :src="state.skillIcon"
              :alt="state.skillName"
              loading="lazy"
            >
          </div>
          <span class="save-image-popup__game-name">
            {{ state.skillName }}
          </span>
        </div>
        <span
          v-if="!isGeneralTab"
          class="save-image-popup__duration"
        >
          {{ state.specificQty }} {{ state.unit }}
        </span>
      </div>
    </div>
  </van-popup>
</template>

<style scoped lang="scss">
.qr-popup {
  background-color: transparent;

  &__container {
    padding: 16px 16px 24px;
    border-radius: 20px 20px 0 0;
    background-color: var(--color-bg-primary);
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &__header-left {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  &__skill-icon {
    @include size(20px);
    border-radius: 999px;
    overflow: hidden;
    background-color: #e5e6eb;

    img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }
  }

  &__title {
    font-family: var(--font-title);
    font-size: 12px;
    font-weight: 600;
    color: #1d2129;
  }

  &__header-arrow {
    transition: transform 0.2s ease;

    &--active {
      transform: rotate(90deg);
    }
  }

  &__tabs {
    height: 40px;
    padding: 4px;
    border-radius: 30px;
    background-color: #e5e6eb;
    display: flex;
    gap: 4px;
  }

  &__tab {
    flex: 1;
    border: none;
    border-radius: 30px;
    background-color: transparent;
    font-size: 14px;
    font-weight: 600;
    color: #4e5969;
    cursor: default;
  }

  &__tab--active {
    background-color: #ffffff;
    color: #1d2129;
  }

  &__tab--inactive {
    opacity: 0.9;
  }

  &__qr-wrapper {
    display: flex;
    justify-content: center;
  }

  &__qr-card {
    width: 168px;
    height: 168px;
    border-radius: 12px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__price-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }

  &__coin {
    @include bg('~/assets/images/common/coin.png');
    @include size(24px);

    &--small {
      @include size(18px);
    }
  }

  &__price {
    font-family: var(--font-title);
    font-size: 24px;
    font-weight: 600;
    color: #1d2129;
  }

  &__unit {
    font-size: 14px;
    color: #1d2129;
  }

  &__actions {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  &__btn {
    height: 47px;
    padding: 0 24px;
    border-radius: 999px;
    border: none;
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
  }

  &__btn--secondary {
    min-width: 144px;
    padding-inline: 20px;
    border: 1px solid #4e5969;
    color: #4e5969;
    font-weight: 400;
  }

  &__btn--primary {
    min-width: 189px;
    flex: 1;
    background-image: linear-gradient(90deg, #2f95ff 0%, #50ffd8 100%);
    color: #ffffff;
  }

  &__specific {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  &__specific-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  &__specific-amount-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  &__amount-input {
    flex: 1;
    border: none;
    outline: none;
    font-family: var(--font-title);
    font-size: 18px;
    font-weight: 600;
    color: #1d2129;

    &::placeholder {
      color: #c9cdd4;
    }
  }

  &__specific-divider {
    height: 1px;
    width: 100%;
    background-color: #f2f3f5;
  }

  &__specific-time-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &__time-label {
    font-size: 14px;
    color: #1d2129;
  }

  &__stepper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 32px;
  }

  &__stepper-btn {
    @include size(24px);
    border-radius: 26px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  &__stepper-btn--minus {
    background-color: #f2f3f5;
    color: #c9cdd4;
  }

  &__stepper-btn--plus {
    background-color: #f1f2f5;
    color: #4e5969;
  }

  &__stepper-value {
    min-width: 24px;
    text-align: center;
    font-size: 14px;
    color: #1f2024;
  }

  &__specific-price {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
  }

  &__specific-price-value {
    font-family: var(--font-title);
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);

    &--disabled {
      color: #86909C;
    }
  }

  &__generate-btn {
    margin-top: 4px;
    @include size(100%, 47px);
    border: none;
    border-radius: 999px;
    background-image: linear-gradient(90deg, #2f95ff 0%, #50ffd8 100%);
    color: #ffffff;
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    &:disabled {
      opacity: 0.4;
      cursor: default;
    }
  }
}

.save-image-popup {
  background: transparent;
  --van-padding-md: 0;

  &__container {
    @include size(375px, 500px);
    @include bg('~/assets/images/mine/bg-qrcode.png');
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 56px 24px;
    box-sizing: border-box;
  }

  &__avatar-wrapper {
    @include size(75px);
    border-radius: 999px;
    border: 2px solid #ffffff;
    background-color: #f2f3f5;
    overflow: hidden;
  }

  &__avatar {
    width: 100%;
    height: 100%;

    img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }
  }

  &__name {
    margin-top: 2px;
    font-family: var(--font-title);
    font-size: 18px;
    font-weight: 600;
    color: #1d2129;
    line-height: 22px;
  }

  &__rating {
    margin-top: 2px;
  }

  &__qr-card {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__price-row {
    margin-top: 6px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }

  &__coin {
    @include bg('~/assets/images/common/coin.png');
    @include size(20px);
  }

  &__price {
    font-family: var(--font-title);
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    color: #1d2129;
  }

  &__symbol, &__currency {
    font-size: 14px;
    color: #17171A;
  }

  &__cta {
    margin-top: 8px;
    height: 30px;
    padding: 0 25px;
    border-radius: 200px;
    border: none;
    background-image: linear-gradient(90deg, #4ed2ff 0%, #b1ef5d 137.08%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    -webkit-tap-highlight-color: transparent;
  }

  &__footer {
    margin-top: 16px;
    padding-top: 12px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &__footer-left {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  &__game-avatar {
    @include size(20px);
    border-radius: 999px;
    background-color: #e5e6eb;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }
  }

  &__game-name {
    font-size: 12px;
    font-weight: 600;
    color: #1d2129;
  }

  &__duration {
    font-size: 14px;
    color: #1d2129;
  }
}
</style>

<style lang="scss">
.van-popup.qr-popup {
  overflow-y: unset;
}
</style>