Auto Commit

src/App.vue

 <script setup>
 import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
+// import TheWelcome from './components/TheWelcome.vue'
 </script>
 
 <template>
   <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
+    <!-- <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" /> -->
 
     <div class="wrapper">
       <HelloWorld msg="You did it!" />

src/components/HelloWorld.vue

-<script setup>
-defineProps({
-  msg: {
-    type: String,
-    required: true
-  }
-})
-</script>
-
 <template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully created a project with
-      <a target="_blank" href="https://vitejs.dev/">Vite</a> +
-      <a target="_blank" href="https://vuejs.org/">Vue 3</a>.
-    </h3>
+  <div class="container">
+    <h1>添加商品</h1>
+    <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
+    <div class="add-product">
+      <input v-model="newProduct.name" placeholder="商品名称" />
+      <input
+        v-model.number="newProduct.price"
+        placeholder="单价"
+        type="number"
+        min="1"
+        step="1"
+      />
+      <input
+        v-model.number="newProduct.quantity"
+        placeholder="数量"
+        type="number"
+        min="1"
+        step="1"
+      />
+      <button @click="addProduct">添加商品</button>
+    </div>
+
+
+    <table class="product-table" v-if="products.length">
+      <thead>
+        <tr>
+          <th>商品名称</th>
+          <th>单价</th>
+          <th>数量</th>
+          <th>小计</th>
+          <th>操作</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(product, index) in products" :key="index">
+          <td>{{ product.name }}</td>
+          <td>{{ product.price.toFixed(2) }}</td>
+          <td>
+            <input
+              v-model.number="product.quantity"
+              type="number"
+              min="1"
+              step="1"
+              @change="checkQuantity(index)"
+            />
+          </td>
+          <td>{{ (product.price * product.quantity).toFixed(2) }}</td>
+          <td>
+            <button @click="removeProduct(index)">删除</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <div v-else class="empty-cart">当前购物车为空</div>
+
+    <div class="total">总计：{{ totalPrice.toFixed(2) }} 元</div>
   </div>
 </template>
 
+<script setup>
+import { ref, computed } from 'vue';
+
+const products = ref([]);
+
+const newProduct = ref({
+  name: '',
+  price: 1,
+  quantity: 1
+});
+
+
+const errorMessage = ref('');
+const addProduct = () => {
+  if (newProduct.value.name && newProduct.value.price >= 1 && newProduct.value.quantity >= 1) {
+    products.value.push({
+      name: newProduct.value.name,
+      price: newProduct.value.price,
+      quantity: newProduct.value.quantity
+    });
+    newProduct.value.name = '';
+    newProduct.value.price = 1;
+    newProduct.value.quantity = 1;
+  } else {
+    errorMessage.value = '请输入有效的商品名称、单价和数量(数量至少为1)!';
+    setTimeout(() => {
+      errorMessage.value = '';
+    }, 2000);
+  }
+      console.log(errorMessage.value);
+};
+
+const removeProduct = (index) => {
+  products.value.splice(index, 1);
+};
+
+const checkQuantity = (index) => {
+  if (products.value[index].quantity < 1) {
+    products.value[index].quantity = 1;
+  }
+};
+
+const totalPrice = computed(() => {
+  return products.value.reduce((total, product) => {
+    return total + product.price * product.quantity;
+  }, 0);
+});
+</script>
+
 <style scoped>
+
+.container {
+  max-width: 900px;
+  margin: 30px auto;
+  padding: 30px;
+  background: #ffffff;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
 h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
-  top: -10px;
+  text-align: center;
+  margin-bottom: 25px;
+  font-size: 2.2em;
+  color: #333;
+}
+
+
+.error-message {
+  background-color: #ffdddd;
+  border: 1px solid #ff5c5c;
+  color: #d8000c;
+  padding: 10px;
+  border-radius: 5px;
+  text-align: center;
+  margin-bottom: 20px;
 }
 
-h3 {
-  font-size: 1.2rem;
+
+.add-product {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  margin-bottom: 25px;
+  justify-content: center;
+}
+
+.add-product input {
+  padding: 8px 12px;
+  font-size: 1em;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  flex: 1 1 200px;
+}
+
+.add-product button {
+  padding: 8px 20px;
+  font-size: 1em;
+  border: none;
+  background-color: #42b983;
+  color: #fff;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.add-product button:hover {
+  background-color: #369870;
+}
+
+
+.product-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 25px;
 }
 
-.greetings h1,
-.greetings h3 {
+.product-table th,
+.product-table td {
+  border: 1px solid #ddd;
+  padding: 10px;
   text-align: center;
 }
 
-@media (min-width: 1024px) {
-  .greetings h1,
-  .greetings h3 {
-    text-align: left;
-  }
+.product-table th {
+  background-color: #f7f7f7;
+  font-weight: 600;
+}
+
+.product-table tbody tr:hover {
+  background-color: #f1f1f1;
+}
+
+.product-table input {
+  width: 60px;
+  text-align: center;
+  padding: 5px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+
+.empty-cart {
+  text-align: center;
+  font-size: 1.2em;
+  color: #999;
+  margin-bottom: 25px;
+}
+
+.total {
+  text-align: right;
+  font-size: 1.6em;
+  font-weight: bold;
+  padding: 15px;
+  background-color: #f7f7f7;
+  border-radius: 5px;
 }
 </style>