demo.js

<template>
  <div class="table-pack spacing bottom">
    <div class="table-pack-head">
      <i class="icon icon-nav-cart"></i>
      <span class="spacing left sm middle">購物車明細</span>
      <span class="sub">共
        <b class="value">{{ cartDetail.length }}</b>項商品
      </span>
      <a class="btn-switch" data-toggle="collapse" href="#cart-list" aria-expanded="false">
        <i class="icon icon-minus"></i>
      </a>
    </div>
    <div class="table-pack-body collapse" id="cart-list">
      <div class="css-table white middle stackable">
        <div class="css-tr">
          <div class="css-th">商品名稱</div>
          <div class="css-th align center w-f4">規格</div>
          <div class="css-th align center w-f6">售價</div>
          <div class="css-th align center w-f8">數量</div>
          <div class="css-th align center w-f6">小計</div>
        </div>
        <div v-for="(item, index) in cartDetail" class="css-tr" :key="index">
          <div class="css-td">
            <a class="img-rind pull-left" :href="item.productRoute">
              <img class="thumbnail small" alt="商品圖" :src="item.productImage">
            </a>
            <div class="info">
              <h5 class="title">
                <a :href="item.productRoute">{{ item.productName }}</a>
              </h5>
              <div class="discount">
                <!-- 活動事件-->
                <div v-if="isShowEvent(item)" class="event">
                  <p>
                    <span class="tag tag-event-outline tag-mini">{{ getCartTagDesc(item) }}</span>
                    <span class="text">{{ item.eventDesc }}</span>
                  </p>
                </div>
                <!-- 優惠券 -->
                <div v-if="isShowCoupon(item)" class="coupon">
                  <p class="warning">{{ item.couponDesc }}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="css-td align center w-f4">{{ item.productSpec }}</div>
          <div class="css-td align center w-f6">{{ item.productPrice | dollar }}</div>
          <div class="css-td align center w-f8">{{ item.productQuantity }}
          </div>
          <div v-if="isShowDiscountPrice(item)" class="css-td align right w-f6">
            <del class="price">{{ item.productPrice | dollar }}</del>
            <p class="discount-price">
              <span class="label">折扣後金額</span>
              <b class="price">{{ finalPrice(item) | dollar }}</b>
            </p>
          </div>
          <div v-else class="css-td align right w-f6">
            <b class="price">{{ item.productPrice | dollar }}</b>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { compose, propEq, complement, prop, subtract, converge, pipe, flip, defaultTo } from 'ramda';
import { dollar } from '@/helpers/format/dollar';
import { getState } from '@/helpers/vuex';
import { cartTagLut } from './constant/cart-detail.constant';

/** 取得 cartTag 顯示文字 */
const getCartTagDesc = pipe(
  prop('cartTag'),
  flip(prop)(cartTagLut),
  defaultTo(''),
);

/** 計算折扣後金額 */
const finalPrice = converge(
  subtract,
  [prop('productPrice'), prop('discountPrice')],
);

/** 是否顯示活動事件 */
const isShowEvent = compose(
  complement,
  propEq('eventName', ''),
);

/** 是否顯示優惠券 */
const isShowCoupon = compose(
  complement,
  propEq('couponDesc', ''),
);

/** 是否顯示折扣前金額 */
const isShowDiscountPrice = compose(
  complement,
  propEq('discountPrice', 0),
);

export default {
  name: 'cart-detail',
  filters: {
    dollar,
  },
  computed: {
    /** 購物車明細 */
    cartDetail: getState('CartDetail', 'cartDetail'),
  },
  methods: {
    finalPrice,
    isShowEvent,
    isShowCoupon,
    isShowDiscountPrice,
    getCartTagDesc,
  },
};
</script>