interview-demo-code/spa/src/views/Cart.vue

<template>
  <div class="max-w-3xl mx-auto p-4 space-y-6 pb-30">
    <h2 class="text-2xl">
      Корзина
      <span v-if="cart.isLoading" class="loading loading-spinner loading-md"></span>
    </h2>

    <div v-if="cart.attention" role="alert" class="alert alert-warning">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
      </svg>
      <span>{{ cart.attention }}</span>
    </div>

    <div v-if="cart.error_warning" role="alert" class="alert alert-error">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <span>{{ cart.error_warning }}</span>
    </div>

    <div v-if="cart.items.length > 0">
      <div
          v-for="item in cart.items"
          :key="item.cart_id"
          class="card card-border bg-base-100 card-sm mb-3"
          :class="item.stock === false ? 'border-error' : ''"
      >
        <div class="card-body">
          <div class="avatar">
            <div class="w-16 rounded">
              <img :src="item.thumb"/>
            </div>
          </div>

          <h2 class="card-title">{{ item.name }} <span v-if="! item.stock" class="text-error font-bold">***</span></h2>
          <p class="text-sm font-bold">{{ item.total }}</p>
          <p>{{ item.price }}/ед</p>
          <div>
            <div v-for="option in item.option">
              <p><span class="font-bold">{{ option.name }}</span>: {{ option.value }}</p>
<!--              <component-->
<!--                  v-if="SUPPORTED_OPTION_TYPES.includes(option.type) && componentMap[option.type]"-->
<!--                  :is="componentMap[option.type]"-->
<!--                  :option="option"-->
<!--              />-->
<!--              <div v-else class="text-sm text-error">-->
<!--                Тип опции "{{ option.type }}" не поддерживается.-->
<!--              </div>-->
            </div>
          </div>
          <div class="card-actions justify-between">
            <Quantity
                :disabled="cart.isLoading"
                v-model="item.quantity"
                @update:modelValue="cart.setQuantity(item.cart_id, $event)"
            />
            <button class="btn btn-error" @click="removeItem(item.cart_id)" :disabled="cart.isLoading">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
              </svg>
            </button>
          </div>
        </div>
      </div>

      <div class="card card-border bg-base-100">
        <div class="card-body">
          <h2 class="card-title">Ваша корзина</h2>
          <div v-for="total in cart.totals">
            <div class="flex justify-between">
              <span class="text-xs text-base-content mr-2">{{ total.title }}:</span>
              <span v-if="cart.isLoading" class="loading loading-spinner loading-xs"></span>
              <span v-else class="text-xs font-bold">{{ total.text }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="fixed px-4 pb-10 pt-4 bottom-0 left-0 w-full bg-base-200 z-50 flex justify-between items-center gap-2 border-t-1 border-t-base-300">
        <div>
          <div v-if="lastTotal">
            <span class="text-xs text-base-content mr-2">{{ lastTotal.title }}:</span><br>
            <span v-if="cart.isLoading" class="loading loading-spinner loading-xs"></span>
            <span v-else class="text-accent font-bold">{{ lastTotal.text }}</span>
          </div>
        </div>

        <button
            class="btn btn-primary"
            :disabled="cart.canCheckout === false"
            @click="goToCheckout"
        >Перейти к оформлению</button>
      </div>
    </div>

    <div
        v-else
        class="text-center rounded-2xl"
    >
      <p class="text-lg mb-3">Ваша корзина пуста</p>
      <RouterLink class="btn btn-primary" to="/">Начать покупки.</RouterLink>
    </div>
  </div>
</template>

<script setup>
import { useCartStore } from '../stores/CartStore.js'
import Quantity from "@/components/Quantity.vue";
// import {SUPPORTED_OPTION_TYPES} from "@/constants/options.js";
import OptionRadio from "@/components/ProductOptions/Cart/OptionRadio.vue";
import OptionCheckbox from "@/components/ProductOptions/Cart/OptionCheckbox.vue";
import OptionText from "@/components/ProductOptions/Cart/OptionText.vue";
import {computed} from "vue";
import {useRouter} from "vue-router";

const cart = useCartStore();
const router = useRouter();

// const componentMap = {
//   radio: OptionRadio,
//   select: OptionRadio,
//   checkbox: OptionCheckbox,
//   text: OptionText,
//   textarea: OptionText,
// };

const lastTotal = computed(() => {
  return cart.totals.at(-1) ?? null;
});

function removeItem(cartId) {
  cart.removeItem(cartId);
  window.Telegram.WebApp.HapticFeedback.notificationOccurred('error');
}

function goToCheckout() {
  router.push({name: 'checkout'});
}
</script>