新增结算页面

src/api/product.js

@@ -130,4 +130,17 @@ export function getCartList(params) {
     });
 }
 
+/**
+ * 清空购物车
+ * @param {*} params 
+ * @returns 
+ */
+export function clearCart(data) {
+    return request({
+        method: "post",
+        url: "/order/clearCart",
+        data
+    });
+}
+
 

src/components/payCard.vue

@@ -0,0 +1,199 @@
+<template>
+    <div class="card">
+        <div class="header">
+            <div class="t1">
+                <span class="title">应收:￥</span>
+                <span class="num">5.03</span>
+            </div>
+            <div class="t2">
+                <span>已付:￥0.00</span>
+                <span>优惠:￥0.00</span>
+            </div>
+        </div>
+        <div class="number_wrap">
+            <div class="menus">
+                <div class="item" :class="{ active: active == 1 }">
+                    <div class="icon_wrap cz">
+                        <el-icon class="icon">
+                            <WalletFilled />
+                        </el-icon>
+                    </div>
+                    <span class="title">储值</span>
+                </div>
+                <div class="item" :class="{ active: active == 2 }">
+                    <div class="icon_wrap smzf">
+                        <el-icon class="icon">
+                            <FullScreen />
+                        </el-icon>
+                    </div>
+                    <span class="title">扫码支付</span>
+                </div>
+                <div class="item">
+                    <div class="icon_wrap yhk">
+                        <el-icon class="icon">
+                            <CreditCard />
+                        </el-icon>
+                    </div>
+                    <span class="title">银行卡</span>
+                </div>
+                <div class="item">
+                    <div class="icon_wrap xj">
+                        <span class="icon_t">￥</span>
+                    </div>
+                    <span class="title">现金</span>
+                </div>
+            </div>
+            <div class="input_wrap">
+                <div class="input" style="flex: 1;">储值:￥{{ props.amount }}</div>
+                <div class="input">待支付:￥{{ waitPayMoney }}</div>
+            </div>
+            <div class="blance">
+                可用余额：0.00
+            </div>
+            <div class="keybord_wrap">
+                <div class="left">
+                    <div class="item"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+    amount: {
+        type: Number,
+        default: 0
+    }
+})
+
+const active = ref(1)
+const waitPayMoney = ref(0)
+
+function amountInput(e) {
+    console.log(e)
+}
+
+</script>
+
+<style scoped lang="scss">
+.card {
+    padding: 20px;
+    height: 100%;
+}
+
+.header {
+    padding-bottom: 30px;
+    border-bottom: 1px solid #ececec;
+
+    .t1 {
+        display: flex;
+        color: var(--el-color-danger);
+        font-weight: bold;
+
+        .title {
+            font-size: 24px;
+            position: relative;
+            top: 14px;
+        }
+
+        .num {
+            font-size: 40px;
+        }
+    }
+
+    .t2 {
+        display: flex;
+        gap: 20px;
+        color: #999;
+        padding-top: 10px;
+    }
+}
+
+.number_wrap {
+    padding: 20px 0;
+
+    .menus {
+        display: flex;
+        gap: 20px;
+
+        .item {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            background-color: #efefef;
+            padding: 50px 0;
+            border-radius: 10px;
+
+            .icon_wrap {
+                $size: 60px;
+                width: $size;
+                height: $size;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border-radius: 8px;
+
+                .icon,
+                .icon_t {
+                    color: #fff;
+                }
+
+                .icon {
+                    font-size: 30px;
+                }
+
+                .icon_t {
+                    font-size: 24px;
+                }
+
+                &.cz {
+                    background-color: var(--primary-color);
+                }
+
+                &.smzf {
+                    background-color: var(--el-color-warning);
+                }
+
+                &.yhk {
+                    background-color: var(--el-color-danger);
+                }
+
+                &.xj {
+                    background-color: #e6d00f;
+                }
+            }
+
+            .title {
+                padding-top: 10px;
+            }
+        }
+    }
+
+    .input_wrap {
+        display: flex;
+        gap: 20px;
+        padding: 20px 0;
+
+        .input {
+            display: flex;
+            align-items: center;
+            height: 80px;
+            border-radius: 10px;
+            border: 1px solid var(--primary-color);
+            font-size: 26px;
+            font-weight: 400;
+            padding: 0 30px;
+        }
+    }
+
+    .blance {
+        color: var(--el-color-danger);
+        font-size: 26px;
+    }
+}
+</style>

src/components/settleAccount.vue

@@ -1,20 +0,0 @@
-<!-- 结算订单 -->
-<template>
-    <el-drawer size="100%" :with-header="false" direction="ttb" v-model="dialogVisible">
-        <div class="drawer_wrap">
-
-        </div>
-    </el-drawer>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-const dialogVisible = ref(false)
-</script>
-
-<style scoped lang="scss">
-.drawer_wrap {
-    width: 100%;
-    height: 100%;
-}
-</style>

src/views/home/components/cartOperation.vue

@@ -5,7 +5,7 @@
                 <SemiSelect />
             </el-icon>
         </div>
-        <div class="item number" @click="takeFoodCodeRef.show()">
+        <div class="item number" @click="props.item.id && takeFoodCodeRef.show()">
             <el-text class="num">{{ props.item.number || 1 }}</el-text>
         </div>
         <div class="item" @click="numberChange('add')">
@@ -13,7 +13,7 @@
                 <CloseBold />
             </el-icon>
         </div>
-        <div class="item" :class="{ disabled: !props.item.tbProductSpec }" @click="showSkuModal">
+        <div class="item" :class="{ disabled: (props.item.id && !props.item.tbProductSpec) }" @click="showSkuModal">
             <el-icon class="icon">
                 <Filter />
             </el-icon>
@@ -31,19 +31,19 @@
             </el-icon>
             <el-text class="t">打包</el-text>
         </div>
-        <div class="item" @click="emit('delete', props.item)">
+        <div class="item" @click="props.item.id && emit('delete', props.item)">
             <el-icon class="icon">
                 <Delete />
             </el-icon>
             <el-text class="t">删除</el-text>
         </div>
-        <div class="item" @click="emit('pending', props.item)">
+        <div class="item" @click="props.item.id && emit('pending', props.item)">
             <el-icon class="icon">
                 <Sell />
             </el-icon>
             <el-text class="t">挂单</el-text>
         </div>
-        <div class="item">
+        <div class="item" @click="props.item.id && emit('clearCart')">
             <el-icon class="icon">
                 <RefreshRight />
             </el-icon>
@@ -65,13 +65,14 @@ const props = defineProps({
         default: {}
     }
 })
-const emit = defineEmits(['confirm', 'delete', 'pending'])
+const emit = defineEmits(['confirm', 'delete', 'pending', 'clearCart'])
 
 const takeFoodCodeRef = ref(null)
 const skuModalRef = ref([])
 
 // 赠送打包操作
 function giftPackHandle(key) {
+    if (!props.item.id) return
     if (props.item[key] == 'true') {
         props.item[key] = false
     } else {
@@ -82,6 +83,7 @@ function giftPackHandle(key) {
 
 // 加减修改数量
 function numberChange(t) {
+    if (!props.item.id) return
     switch (t) {
         case 'sub':
             if (props.item.number <= 1) return
@@ -98,12 +100,14 @@ function numberChange(t) {
 
 // 输入修改数量
 function updateNumber(num) {
+    if (!props.item.id) return
     props.item.number = num
     emit('confirm', props.item)
 }
 
 // 显示规格
 function showSkuModal() {
+    if (!props.item.id) return
     if (props.item.tbProductSpec && props.item.tbProductSpec.specList) {
         skuModalRef.value.show(props.item, 'cart')
     }
@@ -111,7 +115,7 @@ function showSkuModal() {
 
 // 修改规格
 function skuConfirm(e) {
-    console.log(e)
+    if (!props.item.id) return
     emit('confirm', e)
 }
 </script>

src/views/home/components/goods.vue

@@ -172,7 +172,6 @@ async function queryCategoryAjax() {
 // 查询商品信息
 async function productqueryCommodityInfoAjax() {
     try {
-        console.log(props.masterId)
         const res = await productqueryCommodityInfo({
             shopId: store.userInfo.shopId,
             categoryId: categorys.value[categorysActive.value].id,

src/views/home/components/settleAccount.vue

@@ -0,0 +1,258 @@
+<!-- 结算订单 -->
+<template>
+    <el-drawer size="100%" :with-header="false" direction="btt" v-model="dialogVisible">
+        <div class="drawer_wrap">
+            <div class="cart_list" style="width: 500px;">
+                <div class="nav_wrap card">
+                    <div class="return" @click="dialogVisible = false">
+                        <el-icon class="icon">
+                            <ArrowLeftBold />
+                        </el-icon>
+                    </div>
+                    <div class="info">
+                        <div class="master_id">#16</div>
+                        <div class="btm">
+                            <span class="p">服务员：溜溜</span>
+                            <span class="t">03-01 09:05</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="list_wrap card" style="margin-top: 20px;">
+                    <div class="item" v-for="item in props.cart" :key="item.id">
+                        <div class="top">
+                            <span class="name">{{ item.name }}</span>
+                            <span class="n">x{{ item.number }}</span>
+                            <span class="p">￥{{ item.salePrice }}</span>
+                        </div>
+                        <div class="gift_wrap" v-if="item.isGift == 'true'">
+                            <span>[赠送]</span>
+                            <span>￥-{{ item.salePrice }}</span>
+                        </div>
+                        <div class="tag_wrap" v-if="item.skuName">
+                            <div class="tag" v-for="item in item.skuName.split(',')">{{ item }}</div>
+                        </div>
+                        <div class="packge_Wrap" v-if="item.isPack == 'true'">
+                            <div class="icon_item" v-if="item.isPack == 'true'" @click="giftPackHandle('isPack', item)">
+                                <el-icon class="icon" style="color: var(--primary-color);">
+                                    <Box />
+                                </el-icon>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="footer">
+                    <el-button icon="Edit"></el-button>
+                    <div class="button">
+                        <el-checkbox v-model="isPrint" border label="打印结算小票" style="width: 100%;" />
+                    </div>
+                    <div class="print">
+                        <el-button type="primary">打印预结单</el-button>
+                    </div>
+                </div>
+            </div>
+            <div class="pay_wrap">
+                <payCard />
+            </div>
+        </div>
+    </el-drawer>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import payCard from '@/components/payCard.vue'
+
+const dialogVisible = ref(false)
+const props = defineProps({
+    cart: {
+        type: Array,
+        default: []
+    },
+    amount: {
+        type: [Number, String],
+        default: 0
+    },
+    remark: {
+        type: String,
+        default: 0
+    }
+})
+
+const isPrint = ref(true)
+
+function show() {
+    dialogVisible.value = true
+}
+
+defineExpose({
+    show
+})
+</script>
+
+<style>
+.el-drawer {
+    background-color: #efefef !important;
+}
+</style>
+<style scoped lang="scss">
+.drawer_wrap {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    padding: 20px 0;
+
+    .cart_list {
+        .nav_wrap {
+            display: flex;
+            align-items: center;
+            padding: 0 20px;
+
+            .return {
+                width: 60px;
+                height: 60px;
+                border-radius: 50%;
+                border: 3px solid #333;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                .icon {
+                    color: #333;
+                    font-size: 26px;
+                }
+            }
+
+            .info {
+                flex: 1;
+                padding-left: 20px;
+
+                .master_id {
+                    font-size: calc(var(--el-font-size-base) + 10px);
+                    border-bottom: 1px solid #ececec;
+                    padding: 16px 0;
+                }
+
+                .btm {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    padding: 16px 0;
+
+
+                    .p {
+                        color: #999;
+                    }
+                }
+            }
+        }
+
+        .list_wrap {
+            padding: 20px;
+            height: calc(100vh - 260px);
+            overflow-y: auto;
+
+            .item {
+                padding-bottom: 20px;
+
+                .top {
+                    display: flex;
+                    padding-bottom: 6px;
+
+                    .name {
+                        flex: 1;
+                    }
+
+                    .n {
+                        margin-right: 50px;
+                        color: #555;
+                    }
+
+                    .p {
+                        color: #555;
+                    }
+                }
+
+                .gift_wrap {
+                    display: flex;
+                    justify-content: space-between;
+                    color: #999;
+                    font-size: 16px;
+                }
+
+                .tag_wrap {
+                    display: flex;
+                    padding-top: 10px;
+                    padding-bottom: 10px;
+
+                    .tag {
+                        padding: 4px 10px;
+                        background-color: var(--el-color-danger);
+                        color: #fff;
+                        margin-right: 10px;
+                    }
+                }
+
+                .packge_Wrap {
+                    display: flex;
+                    align-items: center;
+
+                    .icon_item {
+                        $size: 40px;
+                        width: $size;
+                        height: $size;
+                        background-color: #e2e2e2;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        margin-right: 10px;
+                    }
+                }
+            }
+        }
+
+        .footer {
+            display: flex;
+            padding-top: 20px;
+            gap: 20px;
+
+            .editor {
+                border: 1px solid #ececec;
+                border-radius: 6px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: #555;
+                font-size: 22px;
+            }
+
+            .button {
+                flex: 1;
+
+                :deep(.el-checkbox.el-checkbox--large) {
+                    height: 50px;
+                    background-color: #fff;
+                }
+
+                :deep(.el-checkbox__inner) {
+                    width: 20px;
+                    height: 20px;
+
+                    &::after {
+                        border-width: 2px;
+                        top: 3px;
+                        left: 7px;
+                    }
+                }
+
+                :deep(.el-checkbox__label) {
+                    font-size: var(--el-font-size-base) !important;
+                }
+            }
+        }
+    }
+
+    .pay_wrap {
+        flex: 1;
+        padding-left: 20px;
+    }
+}
+</style>

src/views/home/index.vue

@@ -22,9 +22,9 @@
         </div>
       </div>
       <div class="shop_operation">
-        <div class="shop_list" v-loading="cartLoading">
+        <div class="shop_list">
-          <div class="item" :class="{ active: item.active }" v-for="item in cartList" :key="item.id"
+          <div class="item" :class="{ active: cartListActive == index }" v-for="(item, index) in cartList" :key="item.id"
-            @click="selectCartItemHandle(item)">
+            @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"
+        <cartOperation :item="cartList[cartListActive]" @confirm="res => addCart(res, 'edit')" @delete="delCartHandle"
-          @pending="pendingCart" />
+          @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
+  const nItem = { ...item }
-  await pendingCart(item, false)
+  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 = !allSelected.value
-    allSelected.value = false
-    cartList.value.map(item => {
-      item.isPack = false
-    })
-  } else {
-    allSelected.value = true
-    cartList.value.map(item => {
-      item.isPack = true
-    })
-  }
   await packall({
     shopId: store.userInfo.shopId,
     status: allSelected.value,
@@ -204,20 +212,14 @@ function takeFoodCodeSuccess(code) {
   queryCartAjax()
 }
 
-const selectCartItem = ref({})
 // 从购物车选择商品
-function selectCartItemHandle(item) {
+function selectCartItemHandle(item, index) {
-  cartList.value.map(val => {
+  cartListActive.value = index
-    val.active = false
-  })
-  item.active = true
-  selectCartItem.value = item
 }
 
 // 选择完规格开始添加购物车
 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
-    cartList.value = res.list.map((item, index) => {
-      if (index == 0) {
-        item.active = true
-        selectCartItem.value = item
-      } else {
-        item.active = false
-      }
-      return item
-    })
     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)