From 176067a7bffa89b63fcfdd93752d2fa700d0219e Mon Sep 17 00:00:00 2001
From: weipengfei <2187978347@qq.com>
Date: Tue, 2 Apr 2024 18:48:27 +0800
Subject: [PATCH] 1

---
 src/views/home/component/order.vue | 407 ++++++++++++++++-------------
 1 file changed, 221 insertions(+), 186 deletions(-)

diff --git a/src/views/home/component/order.vue b/src/views/home/component/order.vue
index 5cfd9a1..09c854d 100644
--- a/src/views/home/component/order.vue
+++ b/src/views/home/component/order.vue
@@ -1,219 +1,254 @@
 <script setup>
-import { ref } from 'vue';
+import { ref } from "vue";
 import { cartListApi, cartDeleteApi, cartChangeApi } from "@/api/store.js";
 
-const list = ref([])
-const allPrice = ref(0) //商品总价
+const list = ref([]);
+const allPrice = ref(0); //商品总价
 
-const clearAll = ()=>{
-    let cart_id = [];
-    list.value.map(item=>{
-        cart_id.push(item.cart_id);
-    })
-    if(cart_id.length==0) return;
-    deleteShop(cart_id);    
-}
+const clearAll = () => {
+  let cart_id = [];
+  list.value.map((item) => {
+    cart_id.push(item.cart_id);
+  });
+  if (cart_id.length == 0) return;
+  deleteShop(cart_id);
+};
 
-const deleteOne = (cart_id)=>{
-    list.value = list.value.filter(item=>item.cart_id!=cart_id);
-    deleteShop([cart_id]);
-}
+const deleteOne = (cart_id) => {
+  list.value = list.value.filter((item) => item.cart_id != cart_id);
+  deleteShop([cart_id]);
+};
 
-const deleteShop = (arr)=>{
-    cartDeleteApi({
-        cart_id: arr
-    }).then(res=>{
-        console.log(res);
-        getList();
-    })
-}
+const deleteShop = (arr) => {
+  cartDeleteApi({
+    cart_id: arr,
+  }).then((res) => {
+    console.log(res);
+    getList();
+  });
+};
 
-const getList = ()=>{
-    allPrice.value = 0;
-    cartListApi({
-        source: 300
-    }).then(res=>{
-        if(res.data?.list?.length>0) {
-            list.value = res.data.list[0].list;
-            list.value.forEach(item=>{
-                allPrice.value += item.productAttr.price * item.cart_num
-            })
-        }
-        else list.value = []
-    })
-}
+const getList = () => {
+  allPrice.value = 0;
+  cartListApi({
+    source: 300,
+  }).then((res) => {
+    if (res.data?.list?.length > 0) {
+      list.value = res.data.list[0].list;
+      list.value.forEach((item) => {
+        allPrice.value += item.productAttr.price * item.cart_num;
+      });
+    } else list.value = [];
+  });
+};
 getList();
 
-const emit = defineEmits(['goPay'])
+const emit = defineEmits(["goPay"]);
 
-const goPay = ()=>{
-    emit('goPay')
-}
+const goPay = () => {
+  emit("goPay");
+};
 
-const changeCartNum = (val)=>{
-    cartChangeApi(val.cart_id, {
-        cart_num: val.cart_num
-    }).then(res=>{
-
-    })
-}
+const changeCartNum = (val, old) => {
+  cartChangeApi(val.cart_id, {
+    cart_num: val.cart_num,
+  }).then((res) => {
+    allPrice.value = 0;
+    list.value.forEach((item) => {
+      allPrice.value += item.productAttr.price * item.cart_num;
+    });
+  });
+};
 
 defineExpose({
-    getList,
-    list
-})
-
+  getList,
+  list,
+});
 </script>
 
-
 <template>
-    <div class="my-order">
-        <div class="header-nav">
-            <div class="nav-item">已选购 <span>{{ list.length }}</span> 件</div>
-            <div class="nav-item-clear" @click="clearAll"><el-icon><Delete /></el-icon>清空</div>
-        </div>
-        <div class="order-list">
-            <el-empty v-if="list.length==0" description="请点击右侧添加商品" />
-            <div v-else class="order-item" v-for="(item, index) in list" :key="index">
-                <el-image class="order-item-img" :src="(item.productAttr && item.productAttr.image) || item.product.image"></el-image>
-                <div class="order-item-info">
-                    <div class="order-item-title">
-                        <div class="title">{{ item.spu.store_name }}</div>
-                        <div class="delete" @click="deleteOne(item.cart_id)">删除</div>
-                    </div>
-                    <div class="order-item-sku">设备规格</div>
-                    <div class="order-item-price">
-                        <div>¥<span>{{ item.productAttr.price }}</span></div>
-                        <div><el-input-number v-model="item.cart_num" step-strictly :min="1" :step="1" @change="changeCartNum(item)"/></div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="order-footer">
-            <div class="order-total">
-                <div class="price">
-                    <div class="total-item">实付: <span>¥<span style="font-size: 1.4rem;">{{ allPrice.toFixed(2) }}</span></span></div>
-                    <div class="total-item">优惠: <span>¥<span>{{ 0 }}</span></span></div>
-                </div>
-                <div class="update-price"><el-button class="btn" type="primary">改价</el-button></div>
-            </div>
-            <div class="order-btn">
-                <el-button class="btn" type="primary" @click="goPay">立即结账</el-button>
-            </div>
-        </div>
+  <div class="my-order">
+    <div class="header-nav">
+      <div class="nav-item">
+        已选购 <span>{{ list.length }}</span> 件
+      </div>
+      <div class="nav-item-clear" @click="clearAll">
+        <el-icon><Delete /></el-icon>清空
+      </div>
     </div>
+    <div class="order-list">
+      <el-empty v-if="list.length == 0" description="请点击右侧添加商品" />
+      <div v-else class="order-item" v-for="(item, index) in list" :key="index">
+        <el-image
+          class="order-item-img"
+          :src="
+            (item.productAttr && item.productAttr.image) || item.product.image
+          "
+        ></el-image>
+        <div class="order-item-info">
+          <div class="order-item-title">
+            <div class="title">{{ item.spu.store_name }}</div>
+            <div class="delete" @click="deleteOne(item.cart_id)">删除</div>
+          </div>
+          <div class="order-item-sku">设备规格</div>
+          <div class="order-item-price">
+            <div>
+              ¥<span>{{ item.productAttr.price }}</span>
+            </div>
+            <div>
+              <el-input-number
+                v-model="item.cart_num"
+                step-strictly
+                :min="1"
+                :step="1"
+                @change="changeCartNum(item)"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="order-footer">
+      <div class="order-total">
+        <div class="price">
+          <div class="total-item">
+            实付:
+            <span
+              >¥<span style="font-size: 1.4rem">{{
+                allPrice.toFixed(2)
+              }}</span></span
+            >
+          </div>
+          <div class="total-item">
+            优惠:
+            <span
+              >¥<span>{{ 0 }}</span></span
+            >
+          </div>
+        </div>
+        <div class="update-price">
+          <el-button class="btn" type="primary">改价</el-button>
+        </div>
+      </div>
+      <div class="order-btn">
+        <el-button class="btn" type="primary" @click="goPay"
+          >立即结账</el-button
+        >
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped lang="scss">
-.my-order{
-    border-radius: 1.2rem;
-    height: 100%;
-    background-color: #fff;
-    width: 30rem;
-    position: relative;
-    overflow: hidden;
+.my-order {
+  border-radius: 1.2rem;
+  height: 100%;
+  background-color: #fff;
+  width: 30rem;
+  position: relative;
+  overflow: hidden;
 
-    .header-nav{
+  .header-nav {
+    display: flex;
+    justify-content: space-between;
+    padding: 1rem;
+    height: 1.5rem;
+    border-bottom: 1px solid #eee;
+
+    span {
+      color: #ff4a00;
+    }
+    .nav-item-clear {
+      display: flex;
+      align-items: center;
+      font-size: 0.8rem;
+      cursor: pointer;
+    }
+  }
+  .order-list {
+    height: calc(100vh - 100px - 14rem);
+    overflow-y: auto;
+    .order-item {
+      display: flex;
+      padding: 1rem;
+      border-bottom: 1px solid #eee;
+
+      .order-item-img {
+        width: 5rem;
+        height: 5rem;
+        border-radius: 0.5rem;
+      }
+      .order-item-info {
+        flex: 1;
+        box-sizing: border-box;
+        padding-left: 12px;
         display: flex;
+        flex-direction: column;
         justify-content: space-between;
-        padding: 1rem;
-        height: 1.5rem;
-        border-bottom: 1px solid #eee;
-        
-        span{
-            color: #ff4a00;
+        & > div {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
         }
-        .nav-item-clear{
-            display: flex;
-            align-items: center;
-            font-size: 0.8rem;
+        .order-item-title {
+          .title {
+            width: 18rem;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+          .delete {
+            color: #1890ff;
             cursor: pointer;
+          }
         }
+        .order-item-sku {
+          font-size: 0.8rem;
+          color: #999;
+        }
+      }
     }
-    .order-list{
-        height: calc(100vh - 100px - 14rem);
-        overflow-y: auto;
-        .order-item{
-            display: flex;
-            padding: 1rem;
-            border-bottom: 1px solid #eee;
+  }
+  .order-footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    box-shadow: 0 -1px 10px #eee;
 
-            .order-item-img{
-                width: 5rem;
-                height: 5rem;
-                border-radius: 0.5rem;
-            }
-            .order-item-info{
-                flex: 1;
-                box-sizing: border-box;
-                padding-left: 12px;
-                display: flex;
-                flex-direction: column;
-                justify-content: space-between;
-                &>div{
-                    display: flex;
-                    align-items: center;
-                    justify-content: space-between;
-                }
-                .order-item-title{
-                    .title{
-                        width: 18rem;
-                        overflow: hidden;
-                        white-space: nowrap;
-                        text-overflow: ellipsis;
-                    }
-                    .delete{
-                        color: #1890ff;
-                        cursor: pointer;
-                    }
-                }
-                .order-item-sku{
-                    font-size: 0.8rem;
-                    color: #999;
-                }
-            }
+    .order-total {
+      height: 2.5rem;
+      padding: 1rem 2rem;
+      display: flex;
+      justify-content: space-between;
+      border-bottom: 1px solid #eee;
+      align-items: center;
+      .price {
+        display: flex;
+        align-items: center;
+        .total-item {
+          padding-right: 1.5rem;
+          span {
+            color: #f5222d;
+          }
         }
+      }
+      .update-price {
+        .btn {
+          border-radius: 3rem;
+        }
+      }
     }
-    .order-footer{
-        position: absolute;
-        bottom: 0;
-        left: 0;
+    .order-btn {
+      height: 3.2rem;
+      padding: 1rem 1.5rem;
+      .btn {
         width: 100%;
-        box-shadow: 0 -1px 10px #eee;
-
-        .order-total{
-            height: 2.5rem;
-            padding: 1rem 2rem;
-            display: flex;
-            justify-content: space-between;
-            border-bottom: 1px solid #eee;
-            align-items: center;
-            .price {
-                display: flex;
-                align-items: center;
-                .total-item{
-                    padding-right: 1.5rem;
-                    span{
-                        color: #f5222d;
-                    }
-                }
-            }
-            .update-price{
-                .btn{
-                    border-radius: 3rem;
-                }
-            }
-        }
-        .order-btn{
-            height: 3.2rem;
-            padding: 1rem 1.5rem;
-            .btn{
-                width: 100%;
-                height: 100%;
-                font-size: 1.2rem;
-                border-radius: 3rem;
-            }
-        }
+        height: 100%;
+        font-size: 1.2rem;
+        border-radius: 3rem;
+      }
     }
+  }
 }
-</style>
\ No newline at end of file
+</style>