fashion-ssr-vue3/pages/cart/index.vue

<script lang='ts' setup>
import { useCart } from './useCart'
import { numberToTwoDecimals } from '~/utils/number'
import { ConstKeys } from '~/enums/const-enums'

const { checkAll, isIndeterminate, submitLoading, selectedCount, handleChange, removeCart, submitOrder, checkedCart, cartList, orderTotal, getCartList, handleCheckAllChange, handleCheckedChange } = useCart()

const router = useRouter()
useHead({
  title: 'EJET Selection Retailer | Add to Cart',
  meta: [
    {
      name: 'description',
      content:
         `Review your selected wholesale products and proceed to submit your wish order. Manage your cart easily with EJET Selection and enjoy wholesale prices.`,
    },
    {
      property: 'og:title',
      content: 'EJET Selection Retailer | Add to Cart',
    },
    {
      property: 'og:description',
      content:
        `Review your selected wholesale products and proceed to submit your wish order. Manage your cart easily with EJET Selection and enjoy wholesale prices.`,
    },
    {
      property: 'og:type',
      content: 'website',
    },
    {
      property: 'twitter:title',
      content: 'EJET Selection Retailer | Add to Cart',
    },
    {
      property: 'twitter:description',
      content:
        `Review your selected wholesale products and proceed to submit your wish order. Manage your cart easily with EJET Selection and enjoy wholesale prices.`,
    },
    {
      property: 'twitter:card',
      content: 'summary_large_image',
    },
  ],
  link: [
    {
      rel: 'canonical',
      href: `${ConstKeys.DOMAINPRO}/cart`,
    },
  ],
})
function onClick(item: any) {
  router.push(`/brand/${item.brandId}`)
}
function onClickProduct(item: any) {
  router.push(`/product/${item.merchandiseId}`)
}
getCartList()
</script>

<template>
  <div>
    <div class="w-1400px mx-auto">
      <div class="pt-40px pb-20px flex items-center">
        <h2 class="mr-10px text-24px fw-500 text-#333333">
          Cart
        </h2>
        <div class="text-#666666">
          ({{ selectedCount }} products)
        </div>
      </div>
      <div v-if="cartList.length">
        <el-checkbox
          v-model="checkAll"
          :indeterminate="isIndeterminate"
          class="mb-20px !text-#333333 custom-checkbox"
          @change="handleCheckAllChange"
        >
          Select all
        </el-checkbox>
        <div>
          <div class="cart-header py-30px px-42px flex text-#C58C64 text-20px fw-500 b-b-solid b-b-1px b-b-#EBEEF5">
            <div class="w-500px">
              Product
            </div>
            <div class="w-400px">
              Brand
            </div>
            <!-- <div class="w-215px">
              Quantity
            </div>
            <div class="w-140px">
              Unit Price
            </div> -->
            <div class="w-270px">
              Total
            </div>
            <div class="flex-1" />
          </div>
          <div />
          <el-checkbox-group
            v-model="checkedCart"
            @change="handleCheckedChange"
          >
            <el-checkbox v-for="item in cartList" :key="item.merchandiseId" :label="item.merchandiseId" :value="item.merchandiseId" class="custom-table-item pr-40px b-b-solid b-b-1px b-b-#EBEEF5">
              <div class="flex ml-24px  py-20px items-center" @click.prevent>
                <div class="w-500px flex items-center">
                  <img :src="(item.masterImage.split(','))[0]" alt="" class="w-100px h-100px object-cover" srcset="">
                  <div class="ml-20px !w-300px !lh-20px">
                    <div class=" text-#666666 text-ellipsis overflow-hidden cursor-pointer hover:underline" @click="onClickProduct(item)">
                      {{ item.title }}
                    </div>
                  </div>
                </div>
                <div class="w-400px cursor-pointer" @click="onClick(item)">
                  {{ item.brandName || '-' }}
                </div>
                <div class="w-270px">
                  <el-input-number
                    v-model="item.quantity"
                    :disabled="item.disabled"
                    class="!w-120px"
                    :min="item.moq"
                    :max="100000"
                    controls-position="right"
                    size="large"
                    @change="handleChange($event, item)"
                  />
                </div>
                <!-- <div class="w-150px text-#C58C64">
                  $ {{ item.price && item.price.toFixed(2) || 0 }}
                </div>
                <div class="w-270px text-#C58C64">
                  $ {{ item.price * item.quantity ? numberToTwoDecimals(item.price * item.quantity) : 0 }}
                </div> -->
                <div class="flex-1" @click="removeCart(item)">
                  <svgo-delete class="!w-24px !h-24px !fill-#999999 cursor-pointer" :filled="true" />
                </div>
              </div>
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="flex justify-end text-18px items-center mt-40px mb-120px !fw-500">
          <!-- <div class="mr-30px flex text-#36363D">
            Order Total:
            <div class="text-#C58C64 ml-10px">
              $ {{ numberToTwoDecimals(orderTotal) || 0 }}
            </div>
          </div> -->
          <el-button :disabled="!checkedCart.length" :loading="submitLoading" class="!bg-#C58C64 !text-#fff !w-250px !h-40px  !b-rd-6px" @click="submitOrder">
            Submit Wish Order
          </el-button>
        </div>
      </div>
      <common-empty v-else class="my-200px" title="No goods found ~" />
    </div>
    <AppFooter />
  </div>
</template>

<style lang='less'>
.custom-checkbox,.custom-table-item{
    cursor: auto;
    .el-checkbox__input{
      &.is-checked,&.is-indeterminate{
          color: #000!important;
          .el-checkbox__inner {
            color: #000 !important;
            background-color: #000 !important;
            border: 1px solid #000 !important;
        }
      }
        .el-checkbox__inner{
            width: 16px !important;
            height: 16px !important;
            &:after{
              left: 5px!important;
              top: 2px!important;
            }

        }
    }
    .el-checkbox__label{
        font-size: 16px !important;
    }
    &.is-checked,&.is-indeterminate {
        .el-checkbox__label {
            color: #000 !important;
        }
    }

}
.custom-table-item{
    height: unset!important;
    width: 100%!important;
    margin-right: unset!important;
    .el-checkbox__label{
        display: block;
    }
      &.is-checked,&.is-indeterminate{
        .el-checkbox__label {
            color: unset!important;
        }
      }
}
</style>