cashier-ipad-new/pagesCreateOrder/table-order/components/goods-list.vue

<template>
  <view class="table">
    <view class="header">
      <text>商品</text>
      <view class="u-flex" style="gap: 54rpx">
        <text>数量</text>
        <text>单价</text>
        <text>小计</text>
      </view>
    </view>
    <view class="list">
      <view
        v-for="(item, index) in cartStore.allCartList"
        :key="index"
        class="item transition"
        @click="itemClick(item)"
        :class="[isSelected(item) ? 'isSelected' : '']"
      >
        <view class="u-flex">
          <text>{{ item.productName }}</text>
          <view class="u-flex gap-10" style="margin-left: 40rpx">
            <text class="status gift" v-if="item.isGift">赠</text>
            <template v-if="item.subStatus">
              <text
                class="status"
                :class="[
                  returnSubStatusText(item) == '已超时' ? 'timeout' : '',
                  returnStatusClass(item),
                ]"
                >{{ returnSubStatusText(item) }}</text
              >
            </template>
          </view>
        </view>
        <view class="u-flex text-center" style="gap: 54rpx;min-width: 348rpx;">
          <text class="u-flex-1">{{ item.num }}</text>
          <view class="u-flex u-flex-1 u-relative">
            <text class="limit-price" v-if="showOldPrice(item)">
              {{ returnPrice(item) }}
            </text>

            <text
              class="origin-price"
              :class="[showOldPrice(item) ? 'old-price' : '']"
              >{{ item.price }}</text
            >
          </view>

          <text class="u-flex-1">{{
            BigNumber(item.num).times(returnPrice(item)).toFixed(2)
          }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed, inject, ref, watch } from "vue";
import dayjs from "dayjs";
import BigNumber from "bignumber.js";
const cartStore = inject("cartStore");
const yskUtils = inject("yskUtils");
function isSelected(item) {
  return selCart.value && item.id === selCart.value.id;
}

function showOldPrice(item) {
  return item.isTimeDiscount || item.isGift || item.discountSaleAmount * 1 > 0;
}

const nowTime = ref(new Date().getTime());

const timer = setInterval(() => {
  nowTime.value = new Date().getTime();
}, 1000);

//超时时间
const maxTime = 10 * 60 * 1000;

function returnStatusClass(item) {
  if (item.subStatus == "DELIVERED") {
    return "success";
  }
}
/**
 * 返回商品状态文本
 */
function returnSubStatusText(item) {
  let a = nowTime.value;
  if (item.subStatus == "PENDING_PREP") {
    return "待起菜";
  }
  if (item.subStatus == "READY_TO_SERVE") {
    if (item.startOrderTime) {
      const maxWaitTime = dayjs(item.startOrderTime).add(
        maxTime,
        "millisecond"
      );
      if (dayjs(nowTime.value).isAfter(maxWaitTime)) {
        return "已超时";
      }
    }
    return "待出菜";
  }
  if (item.subStatus == "SENT_OUT") {
    return "已出菜";
  }
  if (item.subStatus == "DELIVERED") {
    return "已上菜";
  }
  return "";
}
function returnPrice(data) {
  if (data.isTimeDiscount) {
    return returnLimitPrice(data);
  }
  if (data.discountSaleAmount * 1 > 0) {
    return data.discountSaleAmount;
  }
  if (data.isGift) {
    return 0;
  }
  return data.price;
}

function returnLimitPrice(data) {
  const price = yskUtils.limitUtils.returnPrice({
    goods: data,
    shopInfo: cartStore.shopInfo,
    limitTimeDiscountRes: cartStore.limitTimeDiscount,
    shopUserInfo: cartStore.shopUserInfo,
    idKey: "productId",
  });
  return price;
}

const selCart = defineModel("selCart", {
  default: null,
});
function itemClick(item) {
  if (selCart.value && item.id === selCart.value.id) {
    selCart.value = null;
    return;
  }
  selCart.value = item;
  console.log(item);
}
</script>

<style scoped lang="scss">
.list {
  .item {
    padding: 40rpx 102rpx;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    border: 1px solid transparent;
    border-top-color: #e5e5e5;
    font-size: 40rpx;
    &:last-child {
      border-top-color: transparent;
    }
    &.isSelected {
      border-color: $my-main-color;
    }
  }
}
.table {
  .header {
    background-color: #f8f8f8;
    padding: 40rpx 102rpx;
    display: flex;
    justify-content: space-between;
    font-size: 40rpx;
  }
}

.status {
  padding: 10rpx 14rpx;
  border-radius: 14rpx;
  border: 1px solid transparent;
  font-size: 28rpx;
  color: #999;
  border-color: #999;
  background-color: rgba(153, 153, 153, 0.25);
  &.default {
  }
  &.timeout {
    color: #ff383c;
    border-color: #ff383c;
    background-color: rgba(255, 56, 60, 0.21);
  }
  &.success {
    color: $my-main-color;
    border-color: $my-main-color;
    background-color: rgba(63, 158, 255, 0.25);
  }

  &.gift {
    $color: rgb(255, 159, 46);
    color: $color;
    background-color: rgb(255, 240, 223);
    border-color: $color;
  }
}
.old-price {
  text-decoration: line-through;
  color: #999;
  font-size: 28rpx;
  position: relative;
}
.limit-price,
.discount-price {
  position: absolute;
  bottom: 100%;
  text-align: center;
  left: 0;
  right: 0;
}
.gap-10 {
  gap: 10rpx;
}
</style>