新增结算页面

src/views/home/index.vue

@@ -22,9 +22,9 @@
         </div>
       </div>
       <div class="shop_operation">
-        <div class="shop_list" v-loading="cartLoading">
-          <div class="item" :class="{ active: item.active }" v-for="item in cartList" :key="item.id"
-            @click="selectCartItemHandle(item)">
+        <div class="shop_list">
+          <div class="item" :class="{ active: cartListActive == index }" v-for="(item, index) in cartList" :key="item.id"
+            @click="selectCartItemHandle(item, index)">
             <div class="name_wrap">
               <span>{{ item.name }}</span>
               <span>￥{{ item.salePrice }}</span>
@@ -53,8 +53,8 @@
           </div>
         </div>
         <!-- 购物车操作栏 -->
-        <cartOperation :item="selectCartItem" @confirm="res => addCart(res, 'edit')" @delete="delCartHandle"
-          @pending="pendingCart" />
+        <cartOperation :item="cartList[cartListActive]" @confirm="res => addCart(res, 'edit')" @delete="delCartHandle"
+          @pending="pendingCart" @clearCart="clearCartHandle" />
       </div>
       <div class="footer">
         <div class="top">
@@ -74,7 +74,7 @@
         <div class="btm">
           <el-button icon="Edit" @click="remarkRef.show()"></el-button>
           <div class="button">
-            <el-button type="primary" style="width: 100%;">
+            <el-button type="primary" style="width: 100%;" @click="settleAccountRef.show()">
               <div class="js">
                 <el-text class="t">￥{{ cartInfo.totalAmount }}</el-text>
                 <el-text class="t" style="margin-left: 250px;">结算</el-text>
@@ -98,7 +98,7 @@
   </el-drawer>
   <takeFoodCode ref="takeFoodCodeRef" title="修改取餐号" placeholder="请输入取餐号" @success="takeFoodCodeSuccess" />
   <!-- 结算订单 -->
-  <settleAccount />
+  <settleAccount ref="settleAccountRef" :cart="cartList" :amount="cartInfo.totalAmount" :remark="remark" />
   <!-- 挂起订单 -->
   <pendingCartModal ref="pendingCartModalRef" @select="pendingCartHandle" />
 </template>
@@ -109,10 +109,10 @@ import { useUser } from "@/store/user.js"
 import remarkModal from '@/components/remarkModal.vue'
 import takeFoodCode from '@/components/takeFoodCode.vue'
 import cartOperation from '@/views/home/components/cartOperation.vue'
-import settleAccount from '@/components/settleAccount.vue'
+import settleAccount from '@/views/home/components/settleAccount.vue'
 import pendingCartModal from '@/views/home/components/pendingCartModal.vue'
 
-import { createCart, queryCart, createCode, packall, delCart, cartStatus } from '@/api/product'
+import { createCart, queryCart, createCode, packall, delCart, cartStatus, clearCart } from '@/api/product'
 
 // 商品列表
 import goods from '@/views/home/components/goods.vue'
@@ -123,10 +123,12 @@ const remarkRef = ref(null)
 const takeFoodCodeRef = ref(null)
 const goodsRef = ref(null)
 const pendingCartModalRef = ref(null)
+const settleAccountRef = ref(null)
 
 const allSelected = ref(false)
 
-const cartLoading = ref(false)
+const remark = ref('')
+const cartListActive = ref(0)
 const cartList = ref([])
 const cartInfo = ref({})
 
@@ -135,23 +137,40 @@ const masterId = ref('')
 // 挂单量
 const pendingCartNum = ref(0)
 
+// 清空购物车
+async function clearCartHandle() {
+  try {
+    await clearCart({
+      shopId: store.userInfo.shopId,
+      masterId: masterId.value
+    })
+    queryCartAjax()
+  } catch (error) {
+    console.log(error)
+  }
+}
+
 // 恢复挂单
 async function pendingCartHandle(item) {
-  masterId.value = item.masterId
-  await pendingCart(item, false)
+  const nItem = { ...item }
+  if (cartList.value.length) {
+    // 当购物车有数据时，先挂起当前购物车
+    await pendingCart({ masterId: masterId.value })
+  }
+  masterId.value = nItem.masterId
+  await pendingCart(nItem, false)
   await queryCartAjax()
 }
 
 // 挂单
 async function pendingCart(params, status = true) {
   try {
-    cartLoading.value = true
     await cartStatus({
       shopId: store.userInfo.shopId,
       masterId: params.masterId,
       status: status
     })
-    if (status) createCodeAjax()
+    if (status && !cartList.value.length) createCodeAjax()
   } catch (error) {
     console.log(error)
   }
@@ -160,7 +179,6 @@ async function pendingCart(params, status = true) {
 // 删除购物车
 async function delCartHandle(params) {
   try {
-    cartLoading.value = true
     await delCart({
       masterId: params.masterId,
       cartId: params.id
@@ -179,17 +197,7 @@ function giftPackHandle(key, item) {
 
 // 打包全选
 const allSelectedHandle = async () => {
-  if (allSelected.value) {
-    allSelected.value = false
-    cartList.value.map(item => {
-      item.isPack = false
-    })
-  } else {
-    allSelected.value = true
-    cartList.value.map(item => {
-      item.isPack = true
-    })
-  }
+  allSelected.value = !allSelected.value
   await packall({
     shopId: store.userInfo.shopId,
     status: allSelected.value,
@@ -204,20 +212,14 @@ function takeFoodCodeSuccess(code) {
   queryCartAjax()
 }
 
-const selectCartItem = ref({})
 // 从购物车选择商品
-function selectCartItemHandle(item) {
-  cartList.value.map(val => {
-    val.active = false
-  })
-  item.active = true
-  selectCartItem.value = item
+function selectCartItemHandle(item, index) {
+  cartListActive.value = index
 }
 
 // 选择完规格开始添加购物车
 async function addCart(params, type = 'add') {
   try {
-    cartLoading.value = true
     const res = await createCart({
       productId: params.productId,
       masterId: masterId.value,
@@ -239,27 +241,14 @@ async function addCart(params, type = 'add') {
 // 获取购物车商品
 async function queryCartAjax() {
   try {
-    cartLoading.value = true
     const res = await queryCart({
       masterId: masterId.value,
       shopId: store.userInfo.shopId
     })
-    selectCartItem.value = {}
-    cartList.value = res.list.map((item, index) => {
-      if (index == 0) {
-        item.active = true
-        selectCartItem.value = item
-      } else {
-        item.active = false
-      }
-      return item
-    })
+    cartList.value = res.list
     cartInfo.value = res.amount
     pendingCartNum.value = res.num
     goodsRef.value.updateData()
-    setTimeout(() => {
-      cartLoading.value = false
-    }, 100)
   } catch (error) {
     console.log('获取购物车商品', error)
   }
@@ -269,7 +258,8 @@ async function queryCartAjax() {
 async function createCodeAjax() {
   try {
     const res = await createCode({ shopId: store.userInfo.shopId })
-    masterId.value = res.code
+    // masterId.value = res.code
+    masterId.value = '#51'
     queryCartAjax()
   } catch (error) {
     console.log(error)