h5-dm-orderFront/src/views/order/console.vue

<template>
    <div class="order-console">
        <el-drawer
            v-model="showOrderConsole"
            title="开始点餐"
            direction="rtl"
            size="80%"
            :before-close="beforeClose"
        >
            <div class="p-2 md:w-1/4 w-full md:h-full h-auto float-left">
                <el-card shadow="never" :body-style="{ padding: '10px' }">
                    <template #header>
                        <div
                            class="justify-between items-center flex text-xl font-semibold font-mono"
                        >
                            <span>{{ '桌台：' + data.deskName }}</span>
                            <span>{{ data.currentNum + '/' + data.deskCap }}</span>
                        </div>
                    </template>
                    <el-scrollbar ref="scrollbarRef" class="scrollbar">
                        <div ref="innerRef">
                            <el-empty
                                v-if="data.selectGoods.length == 0 ? true : false"
                                description="啥也没有，快点击商品添加吧"
                            />
                            <!-- 已选商品 -->
                            <goods-item
                                v-for="item in data.selectGoods"
                                :key="item"
                                class="scrollbar-demo-item"
                                :goods-item="item"
                                @add="add"
                                @reduce="reduce"
                            >
                            </goods-item>
                        </div>
                    </el-scrollbar>
                    <el-input
                        v-model="params.remark"
                        maxlength="100"
                        placeholder="订单备注"
                        show-word-limit
                        type="textarea"
                    />
                    <div class="flex justify-between items-center mt-2">
                        <div
                            class="flex-1 h-12 border rounded-md flex items-center justify-center cursor-pointer relative mr-2"
                            :class="{'border-primary text-primary bg-[#EDEFFF]': params.diningMethods === 1}"
                            @click="params.diningMethods = 1"
                        >
                            <span>店内就餐</span>
                            <el-icon v-if="params.diningMethods === 1" class="absolute right-0 bottom-0 text-primary" style="font-size: 16px;">
                                <Check />
                            </el-icon>
                        </div>
                        <div
                            class="flex-1 h-12 border rounded-md flex items-center justify-center cursor-pointer relative ml-2"
                            :class="{'border-primary text-primary bg-[#EDEFFF]': params.diningMethods === 2}"
                            @click="params.diningMethods = 2"
                        >
                            <span>打包外带</span>
                            <el-icon v-if="params.diningMethods === 2" class="absolute right-0 bottom-0 text-primary" style="font-size: 16px;">
                                <Check />
                            </el-icon>
                        </div>
                    </div>
                    <div class="mb-4" style="margin-top: 5px;">
                        <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>
                                </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" style="font-size: 14px;">
                                    需支付：<b style="color: #67c23a" v-text="orderData.payAmount"></b>
                                </div>
                            </div>
                        </template>
                        <template #default>
                            <div class="flex" style="justify-content: space-between;">
                                <div class="text-xl" style="font-size: 14px;">
                                    出单数量：<b v-text="orderData.numSum.toString()"></b>
                                </div>
                                <div class="text-xl" style="font-size: 14px;">
                                    总数量：<b v-text="orderData.sumNumSum.toString()"></b>
                                </div>
                            </div>
                        </template>
                    </el-alert>
                    <div class="pt-2 justify-between flex">
                        <el-button @click="toEmpty()">清空未出单菜品</el-button
                        ><span>
                            <!-- <el-button type="primary">打折</el-button> -->
                            <el-button type="primary" @click="submit()">出单</el-button></span
                        >
                    </div>
                </el-card>
            </div>
            <div
                class="p-2 md:w-3/4 w-full md:h-full h-auto float-left flex-wrap"
                v-loading="orderLoading"
            >
                <div class="w-full h-auto">
                    <el-scrollbar
                        ><div class="flex">
                            <el-button
                                size="large"
                                :type="buttonType == 'all' ? 'primary' : ''"
                                @click="clickSortButton('all')"
                                text
                                bg
                                >全部商品</el-button
                            >
                            <el-button
                                v-for="button in dishCate"
                                :key="button.name"
                                size="large"
                                :type="buttonType == button.name ? 'primary' : ''"
                                @click="clickSortButton(button.name)"
                                text
                                bg
                                >{{ button.name }}</el-button
                            >
                        </div></el-scrollbar
                    >
                    <div class="justify-end flex">
                        <el-input
                            v-model="search"
                            class="md:w-40 w-1/2 m-2"
                            placeholder="搜索菜品名字"
                            :suffix-icon="Search"
                        />
                    </div>
                </div>
                <div class="w-full md:h-5/6 h-auto inline-block">
                    <!-- 菜单内容 -->
                    <el-scrollbar height="100%">
                        <div
                            v-for="item in dishList"
                            :key="item.id"
                            class="float-left md:w-40 w-1/2 md:h-38 h-auto p-1"
                        >
                            <a href="javascript:void(0);" @click="addGoods(item)"
                                ><el-card shadow="never" :body-style="{ padding: '0px' }">
                                    <el-image
                                        style="width: 100%; height: 100px"
                                        :src="item.image"
                                        fit="cover"
                                    />
                                    <div class="text-2xs font-semibold p-1">
                                        <p>{{ item.title }}</p>
                                        <p style="color: coral">
                                            {{ item.summary + '元/份' }}
                                        </p>
                                    </div>
                                </el-card></a
                            >
                        </div>
                    </el-scrollbar>
                </div>
            </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">
import { ElScrollbar } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import goodsItem from './goodsItem.vue'
import {
    dishAdd,
    dishCateAll,
    dishDec,
    dishDel,
    dishInc,
    dishListAll,
    toEmptyy,
    orderSubmit,
    deskOrderedDishListAll,
    searchCoupons
} from '@/api/order'
import feedback from '@/utils/feedback'
// const route = useRoute()
const innerRef = ref<HTMLDivElement>()
const dishCate = ref<any[]>([])
const dishList = ref<any[]>([])
let dishListall: any[] = []
const orderLoading = ref(false);
const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>()
const search = ref('')
const emit = defineEmits(['init'])
const buttonType = ref('all')
const showOrderConsole = ref(false)
const data = reactive<any>({
    deskName: '',
    deskCap: 0,
    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
    userId: '', //用户id
    couponId: '', //优惠券id
    couponAmount: '-',
    diningMethods: 1, // 就餐方式：1店内就餐 2打包外带
})
const submit = () => {
    //出单
    if (data.selectGoods.length == 0) {
        feedback.alert('未点菜品！')
        return false;
    }
    if (orderData.payAmount <=0) {
      feedback.alert('支付金额需大于0！')
        return false;
    }
    feedback.loading('正在出单...')
    orderSubmit({
        ...params,
        userId: params.userId || null,
        couponId: params.couponId || null
    }).then(() => {
        // data.selectGoods.length = 0
        // orderData.priceSum = 0
        // orderData.numSum = 0
        //把所有餐品的状态修改为出单
        data.selectGoods.forEach((good: { status: number }) => {
            good.status = 1
        })
        emit('init')
        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 = (Number(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) => {
    data.couponList = []
    showOrderConsole.value = true
    data.deskName = item.name
    data.deskCap = item.num
    data.currentNum = item.userNum ? item.userNum : num
    params.number = item.ordersId ? item.ordersId : orderNumber
    params.userId = null;
    params.couponId = null;
    //查询当前订单下的所有菜品
    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 || null;
            params.couponId = res[0].ticketId || null;
            if (params.couponId && params.userId) {
                searchUserCoupons();
            }
            params.couponAmount = res[0].ticketAmount? Number(res[0].ticketAmount / 100).toFixed(2) : '-'
            let _list = res.filter((it: { status: number })=>it.status!=1);//找到没有出单的餐品来计算价格
            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: 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);
            orderData.payAmount = res[0].payAmount ? Number((res[0].payAmount / 100).toFixed(2)) : Number(orderData.sumPriceSum).toFixed(2);
        }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;//显示所有菜品
}
watch(search, (value) => {
    if (!value) {
        if(buttonType.value == "all"){
            dishList.value = dishListall
        }else{
            dishList.value = dishListall.filter((ele) => {
                return ele.category == buttonType.value
            })
        }
        console.warn("***watch***",value,buttonType.value,dishList.value)
    }else{
        dishList.value = dishList.value.filter((ele) => {
            return ele.title.includes(value)
        })
    }
})
const clickSortButton = (name: any) => {
    //重复点击不处理
    if(buttonType.value == name){
        return false;
    }
    search.value = "";
    buttonType.value = name
    if (name == 'all') {
        dishList.value = dishListall
    } else {
        dishList.value = dishListall.filter((ele) => {
            return ele.category == name
        })
    }
}
//清空订单下的菜品
const toEmpty = () => {
    if (data.selectGoods.length != 0) {
        //清空未出单的餐品-保留出单餐品
        data.selectGoods = data.selectGoods.filter((good: { status: number }) => {
            return good.status == 1
        })
        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
        // orderData.sumPriceSum = 0
        // orderData.sumNumSum = 0
        toEmptyy({ id: params.number })
    }
}
const isEqual = (obj1: { [x: string]: any } | null, obj2: { [x: string]: any } | null)=> {
  // 如果两个对象是同一个引用，直接返回 true
  if (obj1 === obj2) return true;

  // 如果其中一个为 null 或者不是对象，返回 false
  if (obj1 === null || typeof obj1 !== 'object' || obj2 === null || typeof obj2 !== 'object') {
    return false;
  }

  // 获取两个对象的键
  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);

  // 如果键的数量不同，返回 false
  if (keys1.length !== keys2.length) return false;

  // 遍历所有键，递归比较每个键的值
  for (let key of keys1) {
    if (!keys2.includes(key) || !isEqual(obj1[key], obj2[key])) {
      return false;
    }
  }

  // 如果所有键的值都相等，返回 true
  return true;
}
const beforeClose = () => {
    //data.oldGoods
    // if(isEqual(data.selectGoods,data.oldGoods)){
    //     showOrderConsole.value = false;
    //     emit('init')
    //     return false;
    // }
    // if (data.selectGoods && data.selectGoods.length > 0) {
    //     feedback.confirm('所点菜品信息将不被保存，确认关闭？').then(() => {
    //         toEmpty()
    //     })
    // }
    showOrderConsole.value = false
    search.value = "";
    buttonType.value = "all"
    emit('init')
}
const add = (item: any) => {
    // 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)
        })
    })
}
// 添加新的响应式变量
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] = []
    }
    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[] = [];
  //先从历史下单但是没有结单的餐品中找出要操作的餐品
  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(',')
  })
  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){
        return false;
    }
    orderLoading.value = true
    //查找未出单的餐品列表
    const list = data.selectGoods.filter((element: any) => {return element.status != 1})
    let tempGoods: string | any[] = []
    //先从历史下单但是没有结单的餐品中找出要操作的餐品
    tempGoods = list.filter((element: any) => {
      const specsIds: number[] = [];
      element.specsList?.forEach((spec: any) => {
        specsIds.push(spec.specsId)
      })
      return element.artId && element.artId == item.artId &&
          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) => {
    //         return element.id == item.id && !element.artId
    //     })
    // }

    console.log('tempGoods', tempGoods)
    console.log('data.selectGoods', data.selectGoods)
    const t = data.selectGoods.indexOf(tempGoods[0])
    const n = data.selectGoods[t].num
    console.log('reduce', n, tempGoods)
    if (n > 1) {
        dishDec({ id: item.ordersDishId || tempGoods[0].id}).then(() => {
            data.selectGoods[t].num--
            reduceHandle(item)
        }).finally(()=>{
            orderLoading.value = false;
        })
    } else {//餐品数量为0，要删减该餐品
        dishDel({ id: item.ordersDishId || tempGoods[0].id}).then(() => {
            data.selectGoods.splice(t, 1)
            reduceHandle(item)
        }).finally(()=>{
            orderLoading.value = false;
        })
    }
}
//只有正常执行了接口才触发
const reduceHandle = (item: { summary: number })=>{
    console.warn("***reduce-dish***",item,data.selectGoods)
    orderData.numSum--
    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;
    }
    if(orderData.numSum <= 0){
        orderData.numSum = 0;
    }
    if(orderData.sumPriceSum <= 0){
        orderData.sumPriceSum = 0;
    }
    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 ? res.couponList || [] : []
            params.userId = res ? res.userId || null : null
        }
    }).finally(() => {
        searchLoading.value = false
    })
}

onMounted(() => {
    dishCateAll().then((res) => {
        dishCate.value = res
    })
    dishListAll().then((res) => {
        dishList.value = res
        dishListall = res
    })
})
defineExpose({
    open
})
</script>
<style lang="scss">
    .el-alert__content{
        width: 100%;
    }
    .scrollbar{
        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>