点餐台加优惠券逻辑

src/api/order.ts

@@ -47,3 +47,7 @@ export function orderCheckout(params?: any) {
 export function deskOrderedDishListAll(params?: any) {
     return request.get({ url: '/orders/orderDishes', params }) //已点商品
 }
+
+export function searchCoupons(params?: any) {
+    return request.get({ url: '/orders/queryUserCouponList', params }) //已点商品
+}

src/views/order/console.vue

@@ -43,20 +43,71 @@
                         type="textarea"
                     />
                     <el-divider />
+                    <div class="mb-4">
+                        <div class="flex items-center">
+                            <el-input
+                                v-model="data.phone"
+                                placeholder="请输入手机号查询优惠券"
+                                class="flex-1"
+                                maxlength="11"
+                            >
+                                <template #append>
+                                    <el-button :icon="Search" @click="searchUserCoupons" :loading="searchLoading"/>
+                                </template>
+                            </el-input>
+                        </div>
+
+                        <div class="mt-2 coupon-container" v-loading="searchLoading">
+                            <el-scrollbar height="200px">
+                                <el-empty v-if="!data.couponList.length" description="暂无可用优惠券" :image-size="60" />
+                                <div v-else class="coupon-list" style="padding: 7px;">
+                                    <div
+                                        v-for="coupon in data.couponList"
+                                        :key="coupon.id"
+                                        class="coupon-item"
+                                        :class="{
+                                            'is-selected': params.couponId === coupon.ticketRecordId,
+                                            'is-disabled': orderData.sumPriceSum < coupon.consumeScore / 100
+                                        }"
+                                        @click="handleCouponClick(coupon)" @dblclick="handleCouponDoubleClick(coupon)"
+                                    >
+                                        <div class="left-part">
+                                            <div class="amount-wrapper">
+                                                <div class="amount">{{ coupon.consumeScore / 100 }}</div>
+                                            </div>
+                                            <!-- <div class="condition">满{{ coupon.consumeScore / 100 }}可用</div> -->
+                                        </div>
+                                        <div class="right-part">
+                                            <div class="name">{{ coupon.productName }}</div>
+                                            <div class="date">券码:{{ coupon.ticketNo}}</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </el-scrollbar>
+                        </div>
+                    </div>
                     <el-alert :closable="false" style="padding: 8px 0px;">
                         <template #title>
                             <div class="justify-between flex w-full">
                                 <div class="text-xl" style="font-size: 14px;">
-                                    出单价格：<b
-                                        style="color: sandybrown"
-                                        v-text="orderData.priceSum.toFixed(2)"
-                                    ></b>
+                                    出单价格：<b style="color: sandybrown" v-text="orderData.priceSum.toFixed(2)"></b>
+                                </div>
+                                <div class="text-xl" style="font-size: 14px;">
+                                    总价格：<b style="color: sandybrown" v-text="orderData.sumPriceSum.toFixed(2)"></b>
+                                </div>
+                            </div>
+                            <div class="flex" style="justify-content: space-between;">
+                                <div class="text-xl" style="font-size: 14px;">
+                                    优惠抵扣：
+                                    <template v-if="params.couponAmount != '-'">
+                                        <b style="color: red" v-text="'-' + params.couponAmount"></b>
+                                    </template>
+                                    <template v-else>
+                                        <b style="color: red" v-text="'-'"></b>
+                                    </template>
                                 </div>
-                                <div class="text-xl">
-                                    总价格：<b
-                                        style="color: sandybrown"
-                                        v-text="orderData.sumPriceSum.toFixed(2)"
-                                    ></b>
+                                <div class="text-xl" style="font-size: 14px;">
+                                    需支付：<b style="color: #67c23a" v-text="orderData.payAmount"></b>
                                 </div>
                             </div>
                         </template>
@@ -65,12 +116,12 @@
                                 <div class="text-xl" style="font-size: 14px;">
                                     出单数量：<b v-text="orderData.numSum.toString()"></b>
                                 </div>
-                                <div class="text-xl">
+                                <div class="text-xl" style="font-size: 14px;">
                                     总数量：<b v-text="orderData.sumNumSum.toString()"></b>
                                 </div>
-                            </div> 
-                        </template
-                    ></el-alert>
+                            </div>
+                        </template>
+                    </el-alert>
                     <div class="pt-2 justify-between flex">
                         <el-button @click="toEmpty()">清空未出单菜品</el-button
                         ><span>
@@ -145,6 +196,34 @@
             </div>
         </el-drawer>
     </div>
+
+    <el-dialog
+        v-model="specDialogVisible"
+        title="选择规格"
+        width="30%"
+        :before-close="handleSpecDialogClose"
+    >
+        <div v-if="currentItem">
+        <div v-for="(specs, name) in groupSpecsByName(currentItem.specsList)" :key="name" class="mb-4">
+            <div class="font-bold mb-2">{{ name }}</div>
+            <el-radio-group v-model="selectedSpecs[name]">
+            <el-radio
+                v-for="spec in specs"
+                :key="spec.id"
+                :label="spec.id"
+            >
+                {{ spec.value }}
+            </el-radio>
+            </el-radio-group>
+        </div>
+        </div>
+        <template #footer>
+        <span class="dialog-footer">
+            <el-button @click="specDialogVisible = false">取消</el-button>
+            <el-button type="primary" @click="handleSpecConfirm">确认</el-button>
+        </span>
+        </template>
+    </el-dialog>
 </template>
 
 <script setup lang="ts">
@@ -160,7 +239,8 @@ import {
     dishListAll,
     toEmptyy,
     orderSubmit,
-    deskOrderedDishListAll
+    deskOrderedDishListAll,
+    searchCoupons
 } from '@/api/order'
 import feedback from '@/utils/feedback'
 // const route = useRoute()
@@ -168,7 +248,7 @@ const innerRef = ref<HTMLDivElement>()
 const dishCate = ref<any[]>([])
 const dishList = ref<any[]>([])
 let dishListall: any[] = []
-var orderLoading = ref(false)
+const orderLoading = ref(false);
 const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>()
 const search = ref('')
 const emit = defineEmits(['init'])
@@ -180,17 +260,23 @@ const data = reactive<any>({
     currentNum: 0,
     selectGoods: [],
     oldGoods: [],
+    phone: '', // 手机号
+    couponList: [], // 优惠券列表
 })
 const orderData = reactive<any>({
     priceSum: 0,
     sumPriceSum: 0,
     numSum: 0,
     sumNumSum: 0,
-    
+    payAmount: 0, // 新增支付金额
+
 })
 const params = reactive({
     remark: '', //订单备注
-    number: '' //订单id
+    number: '', //订单id
+    userId: '', //用户id
+    couponId: '', //优惠券id
+    couponAmount: '-'
 })
 const submit = () => {
     //出单
@@ -199,7 +285,11 @@ const submit = () => {
         return false;
     }
     feedback.loading('正在出单...')
-    orderSubmit(params).then(() => {
+    orderSubmit({
+        ...params,
+        userId: params.userId || null,
+        couponId: params.couponId || null
+    }).then(() => {
         // data.selectGoods.length = 0
         // orderData.priceSum = 0
         // orderData.numSum = 0
@@ -211,9 +301,30 @@ const submit = () => {
         feedback.closeLoading()
         feedback.notifySuccess('出单成功')
         showOrderConsole.value = false;
-        
+
     })
 }
+
+// 添加优惠券点击处理方法
+const handleCouponClick = (coupon: any) => {
+    if (orderData.sumPriceSum < coupon.consumeScore / 100) {
+        return
+    }
+    params.couponId = coupon.ticketRecordId
+    params.couponAmount = (coupon.consumeScore / 100).toFixed(2)
+    // 计算支付金额
+    orderData.payAmount = orderData.sumPriceSum - Number((coupon.consumeScore / 100).toFixed(2))
+}
+
+// 添加双击处理方法
+const handleCouponDoubleClick = (coupon: any) => {
+    if (params.couponId === coupon.ticketRecordId) {
+        params.couponId = ''
+        params.couponAmount = '-'
+        orderData.payAmount = orderData.sumPriceSum
+    }
+}
+
 const open = (item: any, num?: number, orderNumber?: any) => {
     showOrderConsole.value = true
     data.deskName = item.name
@@ -222,21 +333,40 @@ const open = (item: any, num?: number, orderNumber?: any) => {
     params.number = item.ordersId ? item.ordersId : orderNumber
     //查询当前订单下的所有菜品
     deskOrderedDishListAll({ id: params.number }).then((res) => {
+        res.forEach((good: { id:number, ordersDishId: number }) => {
+            good.ordersDishId = good.id
+        })
+        console.log("***deskOrderedDishListAll***",res)
         data.selectGoods = res
         data.oldGoods = JSON.parse(JSON.stringify(res));//记录下进入时当前餐桌已有的食物
         if (res.length > 0) {
+            data.phone = res[0].mobile;
             params.remark = res[0].remark;
+            params.userId = res[0].userId;
+            params.couponId = res[0].ticketId;
+            if (params.couponId && params.userId) {
+                searchUserCoupons();
+            }
+            params.couponAmount = res[0].ticketAmount? Number(res[0].ticketAmount / 100).toFixed(2) : '-'
+            orderData.payAmount = Number((res[0].payAmount / 100).toFixed(2));
             let _list = res.filter((it: { status: number })=>it.status!=1);//找到没有出单的餐品来计算价格
-            orderData.priceSum = _list.reduce((accumulator, currentValue) => accumulator + (currentValue.summary * currentValue.num), 0);
-            orderData.numSum = _list.reduce((accumulator, currentValue) => accumulator + currentValue.num, 0);
+            orderData.priceSum = _list.reduce((accumulator: number, currentValue: { summary: number; num: number }) => accumulator + (currentValue.summary * currentValue.num), 0);
+            orderData.numSum = _list.reduce((accumulator: number, currentValue: { summary: number; num: number }) => accumulator + currentValue.num, 0);
             //所有餐品的总价以及总数量
-            orderData.sumPriceSum = res.reduce((accumulator, currentValue) => accumulator + (currentValue.summary * currentValue.num), 0);
-            orderData.sumNumSum = res.reduce((accumulator, currentValue) => accumulator + currentValue.num, 0);
+            orderData.sumPriceSum = res.reduce((accumulator: number, currentValue: { summary: number; num: number }) => accumulator + (currentValue.summary * currentValue.num), 0);
+            orderData.sumNumSum = res.reduce((accumulator: number, currentValue: { summary: number; num: number }) => accumulator + currentValue.num, 0);
         }else{
             orderData.priceSum = 0
             orderData.numSum = 0
             orderData.sumPriceSum = 0
             orderData.sumNumSum = 0
+            data.phone = ''
+            params.remark = ''
+            params.userId = ''
+            params.couponId = ''
+            params.couponAmount = '-'
+            orderData.payAmount = 0
+            data.couponList = []
         }
     })
     dishList.value = dishListall;//显示所有菜品
@@ -276,11 +406,11 @@ const clickSortButton = (name: any) => {
 const toEmpty = () => {
     if (data.selectGoods.length != 0) {
         //清空未出单的餐品-保留出单餐品
-        data.selectGoods = data.selectGoods.filter((good) => {
+        data.selectGoods = data.selectGoods.filter((good: { status: number }) => {
             return good.status == 1
         })
-        orderData.sumPriceSum = data.selectGoods.reduce((accumulator, currentValue) => accumulator + (currentValue.summary * currentValue.num), 0);
-        orderData.sumNumSum = data.selectGoods.reduce((accumulator, currentValue) => accumulator + currentValue.num, 0);
+        orderData.sumPriceSum = data.selectGoods.reduce((accumulator: number, currentValue: { summary: number; num: number }) => accumulator + (currentValue.summary * currentValue.num), 0);
+        orderData.sumNumSum = data.selectGoods.reduce((accumulator: number, currentValue: { summary: number; num: number }) => accumulator + currentValue.num, 0);
         // data.selectGoods.length = 0
         orderData.priceSum = 0
         orderData.numSum = 0
@@ -333,67 +463,151 @@ const beforeClose = () => {
     emit('init')
 }
 const add = (item: any) => {
-    addGoods(item)
-}
-const addGoods = (item: any) => {
-    console.warn("***addGoods-添加的菜品信息***",item)
-    if(orderLoading.value){
-        return false;
-    }
-    orderLoading.value = true
-    //查找未出单的餐品列表
-    const list = data.selectGoods.filter((element: any) => {return element.status != 1})
-    var tempGoods: string | any[] = [];
-    if(item.artId){//说明操作的是历史已经添加过的餐品
-        tempGoods = [item];
-    }else{
-        //先从历史下单但是没有结单的餐品中找出要操作的餐品
-        tempGoods = list.filter((element: any) => {
-            return element.artId == item.id && element.artId
+    // addGoods(item)
+    dishInc({ id: item.id}).then(()=>{
+        data.selectGoods[data.selectGoods.indexOf(item)].num++
+        addHandle(item);
+    }).finally(()=>{
+        orderLoading.value = false;
+        nextTick(() => {
+            scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight)
         })
-        if(tempGoods.length==0){//历史没有，则从当次下单的餐品列表中找
-            tempGoods = list.filter((element: any) => {
-                return element.id == item.id && !element.artId
-            })
-        }
+    })
+}
+// 添加新的响应式变量
+const specDialogVisible = ref(false)
+const currentItem = ref<any>(null)
+const selectedSpecs = ref<any>({})
+
+// 添加新的方法
+const groupSpecsByName = (specsList: any[]) => {
+  const groups: any = {}
+  specsList?.forEach(spec => {
+    if (!groups[spec.name]) {
+      groups[spec.name] = []
     }
-    if (tempGoods.length == 0) {
-        item.num = 1
-        dishAdd({
-            orderId: params.number,
-            dishId: item.id
-        }).then((res) => {
-            //拿到orders_dish的id
-            item.ordersDishId = res
-            data.selectGoods.push(item)
-            feedback.msgSuccess('成功添加商品' + item.title)
-            addHandle(item)
-        }).finally(()=>{
-            orderLoading.value = false;
-            nextTick(() => {
-                scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight)
-            })
-        })
-    } else {
-        dishInc({ id: item.ordersDishId || tempGoods[0].id }).then(()=>{
-            data.selectGoods[data.selectGoods.indexOf(tempGoods[0])].num++
-            addHandle(item);
-        }).finally(()=>{
-            orderLoading.value = false;
-            nextTick(() => {
-                scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight)
-            })
-        })
+    groups[spec.name].push(spec)
+  })
+  return groups
+}
+
+const handleSpecDialogClose = () => {
+  specDialogVisible.value = false
+  currentItem.value = null
+  selectedSpecs.value = {}
+}
+
+const handleSpecConfirm = () => {
+  // 检查是否所有规格都已选择
+  const allSpecsSelected = Object.keys(groupSpecsByName(currentItem.value.specsList)).every(
+    name => selectedSpecs.value[name]
+  )
+
+  if (!allSpecsSelected) {
+    feedback.msgError('请选择所有规格')
+    return
+  }
+
+  // 将选中的规格ID添加到商品中
+  const item = { ...currentItem.value, selectedSpecIds: Object.values(selectedSpecs.value) }
+  handleAddGoods(item)
+  handleSpecDialogClose()
+}
+
+// 修改 addGoods 方法
+const addGoods = (item: any) => {
+    if (item.specsList?.length > 0) {
+        currentItem.value = item
+        selectedSpecs.value = {}
+        specDialogVisible.value = true
+        return
     }
-    
+    handleAddGoods(item)
+}
+
+// 将原来的 addGoods 逻辑移到这个新方法中
+const handleAddGoods = (item: any) => {
+  if(orderLoading.value){
+    return false
+  }
+  console.log('handleAddGoods', item)
+  orderLoading.value = true
+  //查找未出单的餐品列表
+  const list = data.selectGoods.filter((element: any) => {return element.status != 1})
+  console.log('list', list)
+  var tempGoods: string | any[] = [];
+  if(item.artId){//说明操作的是历史已经添加过的餐品
+      tempGoods = [item];
+  }else{
+      //先从历史下单但是没有结单的餐品中找出要操作的餐品
+      tempGoods = list.filter((element: any) => {
+          //如果有specsIds，说明是有规格的餐品
+          let specsIds: number[] = [];
+          element.specsList?.forEach((spec: any) => {
+            specsIds.push(spec.specsId)
+          })
+          return element.artId && element.artId == item.id && 
+            specsIds.sort((a: number, b: number) => a - b).join(',') == (item.selectedSpecIds || []).sort((a: number, b: number) => a - b).join(',')
+      })
+    //   if(tempGoods.length==0){//历史没有，则从当次下单的餐品列表中找
+    //       tempGoods = list.filter((element: any) => {
+    //             let specsIds: number[] = [];
+    //             element.specsList?.forEach((spec: any) => {
+    //                 specsIds.push(spec.specsId)
+    //             })
+    //             return element.id == item.id && !element.artId && 
+    //                 specsIds.sort((a, b) => a - b).join(',') == (item.selectedSpecIds || []).sort((a: number, b: number) => a - b).join(',')
+    //       })
+    //   }
+  }
+  console.log('tempGoods', tempGoods)
+  if (tempGoods.length == 0) {
+      item.num = 1
+      dishAdd({
+          orderId: params.number,
+          dishId: item.id,
+          specsIds: (item.selectedSpecIds || []).join(',') // 将数组转换为逗号分隔的字符串
+      }).then((res) => {
+          //拿到orders_dish的id
+          item.ordersDishId = res
+          item.specsList = item.selectedSpecIds?.map((specId: any) => {
+              const o = item.specsList.find((spec: any) => spec.id == specId)
+              o.specsId = specId
+              return o;
+          })
+          item.artId = item.id
+          data.selectGoods.push(item)
+          console.log("data.selectGoods",data.selectGoods)
+          feedback.msgSuccess('成功添加商品' + item.title)
+          addHandle(item)
+      }).finally(()=>{
+          orderLoading.value = false;
+          nextTick(() => {
+              scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight)
+          })
+      })
+  } else {
+      dishInc({ id: tempGoods[0].ordersDishId }).then(()=>{
+          data.selectGoods[data.selectGoods.indexOf(tempGoods[0])].num++
+          addHandle(item);
+      }).finally(()=>{
+          orderLoading.value = false;
+          nextTick(() => {
+              scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight)
+          })
+      })
+  }
+
 }
 //只有正常执行了接口才触发
 const addHandle = (item: { summary: any })=>{
     console.warn("***addGoods-dish***",item,data.selectGoods)
+    console.warn("***orderData***",orderData)
     orderData.numSum++
     orderData.sumNumSum++
     orderData.priceSum += Number(item.summary)
     orderData.sumPriceSum += Number(item.summary)
+    orderData.payAmount = Number((orderData.sumPriceSum - (params.couponAmount === '-' ? 0 : Number(params.couponAmount))).toFixed(2))
 }
 const reduce = (item: any) => {
     if(orderLoading.value){
@@ -441,6 +655,7 @@ const reduceHandle = (item: { summary: number })=>{
     orderData.sumNumSum--
     orderData.priceSum -= item.summary
     orderData.sumPriceSum -= item.summary
+    orderData.payAmount = Number((orderData.sumPriceSum - (params.couponAmount === '-' ? 0 : Number(params.couponAmount))).toFixed(2))
     if(orderData.priceSum <= 0){
         orderData.priceSum = 0;
     }
@@ -453,6 +668,31 @@ const reduceHandle = (item: { summary: number })=>{
     if(orderData.sumNumSum <= 0){
         orderData.sumNumSum = 0;
     }
+    if(orderData.payAmount <= 0){
+        orderData.payAmount = 0;
+    }
+}
+// 添加搜索用户优惠券的方法
+// ... 其他代码保持不变 ...
+
+// 添加 loading 变量
+const searchLoading = ref(false)
+
+// 修改搜索方法
+const searchUserCoupons = () => {
+    if (!data.phone) {
+        feedback.msgError('请输入手机号')
+        return
+    }
+    searchLoading.value = true
+    searchCoupons({ mobile: data.phone}).then((res: any) => {
+        if (res) {
+            data.couponList = res || []
+            params.userId = res[0].userId || null
+        }
+    }).finally(() => {
+        searchLoading.value = false
+    })
 }
 
 onMounted(() => {
@@ -473,6 +713,130 @@ defineExpose({
         width: 100%;
     }
     .scrollbar{
-        height:calc(100vh - 54px - 32px - 16px - 61px - 20px - 52px - 49px - 64px - 40px);
+        height:calc(100vh - 54px - 32px - 16px - 61px - 20px - 52px - 49px - 64px - 40px - 260px);
     }
 </style>
+<style>
+.coupon-card {
+    display: flex;
+    align-items: center;
+    padding: 8px;
+}
+
+.coupon-item {
+    display: flex;
+    margin-bottom: 12px;
+    cursor: pointer;
+    position: relative;
+    background: #fff;
+    border-radius: 4px;
+    transition: all 0.3s;
+    border: 1px solid #E8E8E8;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+
+    &.is-selected {
+        border-color: coral;
+        .left-part {
+            background: coral;
+        }
+    }
+
+    &.is-disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+
+        .left-part {
+            background: #999;
+        }
+    }
+}
+
+.left-part {
+    width: 90px;
+    background: coral;
+    color: #fff;
+    padding: 12px 8px;
+    text-align: center;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    .amount-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+    }
+
+    &::after {
+        content: '';
+        position: absolute;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        width: 4px;
+        background-image: radial-gradient(circle at 0 6px, transparent 3px, #fff 3px);
+        background-size: 4px 12px;
+        background-repeat: repeat-y;
+    }
+
+    .amount {
+        font-size: 24px;
+        font-weight: bold;
+        line-height: 1;
+    }
+
+    .unit {
+        font-size: 12px;
+        margin-top: 2px;
+    }
+
+    .condition {
+        font-size: 12px;
+        margin-top: 6px;
+        opacity: 0.9;
+    }
+}
+
+.right-part {
+    flex: 1;
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .name {
+        font-size: 14px;
+        color: #333;
+        font-weight: 500;
+    }
+
+    .date {
+        font-size: 12px;
+        color: #999;
+        margin-top: 4px;
+    }
+
+    .check {
+        position: absolute;
+        right: 12px;
+        top: 50%;
+        transform: translateY(-50%);
+        color: #CD8E5F;
+        font-size: 12px;
+    }
+}
+
+.coupon-container {
+    border: 1px solid #EBEEF5;
+    border-radius: 4px;
+
+    :deep(.el-scrollbar__wrap) {
+        padding: 8px;
+    }
+}
+</style>

src/views/order/goodsItem.vue

@@ -2,19 +2,30 @@
     <div class="goods-item">
         <el-card class="w-full" shadow="never" :body-style="{ padding: '10px' }">
             <p class="text-xl font-bold flex" style="justify-content: space-between;">{{ props.goodsItem.title }}
-            <span v-if="props.goodsItem.status==1" class="p-1 rounded ml-2" style="background-color: #e0eee0;font-size: 12px;color:red;height: 20px;padding: 2px;">已出单</span>
+                <span v-if="props.goodsItem.status==1" class="p-1 rounded ml-2" style="background-color: #e0eee0;font-size: 12px;color:red;height: 20px;padding: 2px;">已出单</span>
             </p>
+            <!-- 添加规格展示区域 -->
+            <div v-if="props.goodsItem.specsList && props.goodsItem.specsList.length > 0" class="mb-2">
+                <el-tag
+                    v-for="spec in props.goodsItem.specsList"
+                    :key="spec.id"
+                    size="small"
+                    class="mr-1 mb-1"
+                >
+                    {{ spec.name }}: {{ spec.value }}
+                </el-tag>
+            </div>
             <div>
-                <b style="color: coral">{{ props.goodsItem.summary }}</b
-                ><span class="p-1 rounded ml-2" style="background-color: #e0eee0">{{
+                <b style="color: coral">{{ props.goodsItem.summary }}</b>
+                <span class="p-1 rounded ml-2" style="background-color: #e0eee0">{{
                     '×' + props.goodsItem.num
                 }}</span>
                 <span class="float-right">
-                    <el-button-group size="small" >
+                    <el-button-group size="small">
                         <el-button @click="reduce()" :disabled="props.goodsItem.status==1"> - </el-button>
                         <el-button @click="add()" :disabled="props.goodsItem.status==1"> + </el-button>
-                    </el-button-group></span
-                >
+                    </el-button-group>
+                </span>
             </div>
         </el-card>
     </div>