From 6dece8bccc4dc84d02d605dba9ec9509c8f6791d Mon Sep 17 00:00:00 2001
From: "WORK\\cirry" <cirry6@aliyun.com>
Date: Thu, 28 Apr 2022 11:57:53 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20=E8=B4=AD=E7=89=A9=E8=BD=A6=E5=AE=8C?=
 =?UTF-8?q?=E6=95=B4demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/product.json            |  0
 src/App.vue                    | 22 +++++--------
 src/api/shop.ts                | 35 +++++++++++++++++++++
 src/components/HelloWorld.vue  |  2 +-
 src/components/ProductPage.vue | 35 +++++++++++++++++++++
 src/store/cart.ts              | 57 ++++++++++++++++++++++++++++++++++
 src/store/product.ts           | 20 ++++++++++++
 7 files changed, 155 insertions(+), 16 deletions(-)
 create mode 100644 public/product.json
 create mode 100644 src/api/shop.ts
 create mode 100644 src/components/ProductPage.vue
 create mode 100644 src/store/cart.ts
 create mode 100644 src/store/product.ts

diff --git a/public/product.json b/public/product.json
new file mode 100644
index 0000000..e69de29
diff --git a/src/App.vue b/src/App.vue
index d74c13c..64429bf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,26 +1,18 @@
 <template>
-  <HelloWorld/>
+    <product-page></product-page>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import HelloWorld from './components/HelloWorld.vue';
+import { defineComponent } from "vue";
+import ProductPage from './components/ProductPage.vue'
 
 export default defineComponent({
-  name: 'App',
-  components: {
-    HelloWorld
-  }
+    name: 'App',
+    components: {
+        ProductPage
+    }
 });
 </script>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
 </style>
diff --git a/src/api/shop.ts b/src/api/shop.ts
new file mode 100644
index 0000000..6ef9b52
--- /dev/null
+++ b/src/api/shop.ts
@@ -0,0 +1,35 @@
+export interface IProduct {
+  id: string
+  name: string
+  price: number
+  inventory: number
+}
+
+const _products: IProduct[] = [
+  {
+    "id": "0",
+    "name": "IPad Pro",
+    "price": 5999,
+    "inventory": 2
+  },
+  {
+    "id": "1",
+    "name": "IPhone 13 Pro",
+    "price": 7999,
+    "inventory": 3
+  }
+]
+
+export const getProducts = async () => {
+  await wait(1000)
+  return _products
+}
+
+export const buyProducts = async () => {
+  await wait(1000)
+  return Math.random() > 0.5
+}
+
+async function wait( delay: number ) {
+  return new Promise(( resolve ) => setTimeout(resolve, delay))
+}
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 4c1cd5b..60b57b4 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -9,7 +9,7 @@
 </template>
 <script lang="ts" setup>
 import { userMainStore } from "@/store";
-import { storeToRefs } from "pinia";
+import { storeToRefs } from 'pinia';
 
 const mainStore = userMainStore()
 console.log(mainStore.count)
diff --git a/src/components/ProductPage.vue b/src/components/ProductPage.vue
new file mode 100644
index 0000000..8767cf9
--- /dev/null
+++ b/src/components/ProductPage.vue
@@ -0,0 +1,35 @@
+<template>
+    <h2>Pinia —— 购物车示例</h2>
+    <hr>
+    <h3>商品列表</h3>
+    <ul>
+        <li v-for="item in productStore.all" :key="item.id">
+            <p>{{ item.name }} -- {{ item.price }} -- 库存：{{ item.inventory }}</p>
+            <button :disabled="item.inventory===0" @click="cartStore.addProductToCart(item)">添加到购物车</button>
+        </li>
+    </ul>
+    <hr>
+    <h3>你的购物车</h3>
+    <ul>
+        <li v-for="item in cartStore.cartProducts" :key="item.id">
+            <p>{{ item.name }} -- 价格 {{ item.price }} x {{ item.quantity }}</p>
+        </li>
+    </ul>
+    <p>商品总价：{{ cartStore.totalPrice }}</p>
+    <button @click="cartStore.checkout()">结算</button>
+    <p>{{ cartStore.checkStatus }}</p>
+</template>
+
+<script setup lang="ts">
+import { useProductStore } from "@/store/product";
+import { useCartStore } from "@/store/cart";
+
+const productStore = useProductStore()
+const cartStore = useCartStore()
+
+productStore.loadAllProducts()
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/store/cart.ts b/src/store/cart.ts
new file mode 100644
index 0000000..c1d35e6
--- /dev/null
+++ b/src/store/cart.ts
@@ -0,0 +1,57 @@
+import { defineStore } from "pinia";
+import { buyProducts, IProduct } from "@/api/shop";
+import { useProductStore } from "@/store/product";
+
+type CartProduct = {
+  quantity: number
+} & IProduct
+
+enum checkoutStatus {
+  PENDING = "未结算",
+  SUCCESS = "结算成功",
+  FALSE = "结算失败"
+}
+
+export const useCartStore = defineStore('cart', {
+  state: () => ( {
+    cartProducts: [] as CartProduct[],
+    checkStatus: checkoutStatus.PENDING
+  } ),
+  getters: {
+    totalPrice( state ) {
+      return state.cartProducts.reduce(( pre, cur ) => {
+        return pre + cur.price * cur.quantity
+      }, 0)
+    }
+  },
+  actions: {
+    addProductToCart( product: IProduct ) {
+      if ( product.inventory < 1 ) {
+        return
+      }
+      const cartItem: CartProduct | undefined = this.cartProducts.find(item => item.id === product.id)
+      if ( cartItem ) {
+        cartItem.quantity++
+      } else {
+        this.cartProducts.push({
+          id: product.id,
+          name: product.name,
+          inventory: product.inventory,
+          price: product.price,
+          quantity: 1
+        })
+      }
+      const productStore = useProductStore()
+      productStore.decrementProductInventory(product)
+    },
+    async checkout() {
+      const result = await buyProducts()
+      if ( result ) {
+        this.checkStatus = checkoutStatus.SUCCESS
+        this.cartProducts = []
+      } else {
+        this.checkStatus = checkoutStatus.FALSE
+      }
+    }
+  }
+})
diff --git a/src/store/product.ts b/src/store/product.ts
new file mode 100644
index 0000000..f6068f3
--- /dev/null
+++ b/src/store/product.ts
@@ -0,0 +1,20 @@
+import { defineStore } from "pinia";
+import { getProducts, IProduct } from "@/api/shop";
+
+export const useProductStore = defineStore('product', {
+  state: () => ( {
+    all: [] as IProduct[]
+  } ),
+  getters: {},
+  actions: {
+    async loadAllProducts() {
+      this.all = await getProducts()
+    },
+    decrementProductInventory( product: IProduct ) {
+      const productItem = this.all.find(item => item.id === product.id)
+      if ( productItem ) {
+        productItem.inventory--
+      }
+    }
+  }
+})