29 lines
896 B
Vue
29 lines
896 B
Vue
<template>
|
|
<div class="cart">
|
|
<h2>清单</h2>
|
|
<p v-show="!products.length"><i>请添加产品到购物车</i></p>
|
|
<ul>
|
|
<li
|
|
v-for="product in products"
|
|
:key="product.id">
|
|
{{ product.title }} - {{ product.price }} x {{ product.quantity }}
|
|
</li>
|
|
</ul>
|
|
<p>合计: {{ total }}</p>
|
|
<p><el-button type="primary" :disabled="!products.length" @click="checkout()">提交</el-button></p>
|
|
<p v-show="checkoutStatus">提交 {{ checkoutStatus }}.</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useCart } from '../store/cart'
|
|
import { ElButton } from 'element-plus'
|
|
|
|
const checkoutStatus = computed(() => useCart().checkoutStatus)
|
|
const products = computed(() => useCart().cartProducts)
|
|
const total = computed(() => useCart().cartTotalPrice)
|
|
const checkout = function () {
|
|
useCart().checkout()
|
|
}
|
|
</script> |