menduner/src/views/mall/components/s-goods-item/index.vue

<template>
  <div class="box">
    <div class="d-flex">
      <div style="width: 80px; height: 80px;" class="mr-3">
        <v-img :src="img" :aspect-ratio="1" style="border-radius: 8px;"></v-img>
      </div>
      <div
        class="d-flex justify-space-between align-center"
        style="flex: 1; font-size: 16px;"
      >
        <div v-if="title" class="title">{{ title }}</div>
        <div v-if="skuString" class="skuString" style="color: var(--v-primary-base);">{{ skuString }}</div>
        <div v-if="price && Number(price) > 0" class="price" :style="[{ color: priceColor }]"> ￥{{ fen2yuan(price) }} </div>
        <div v-if="num" class="buyNum ml-2"> x {{ num }}</div>
        <div v-if="price && Number(price) > 0" class="subtotal">￥{{ fen2yuan(num*price) }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { computed } from 'vue';
  import { fen2yuan } from '@/hooks/web/useGoods'
  /**
   * 订单卡片
   *
   * @property {String} img 											- 图片
   * @property {String} title 										- 标题
   * @property {Number} titleWidth = 0								- 标题宽度，默认0，单位
   * @property {String} skuText 										- 规格
   * @property {String | Number} price 								- 价格
   * @property {String} priceColor 									- 价格颜色
   * @property {Number | String} num									- 数量
   *
   */
  const props = defineProps({
    img: {
      type: String,
      default: 'https://img1.baidu.com/it/u=1601695551,235775011&fm=26&fmt=auto',
    },
    title: {
      type: String,
      default: '',
    },
    titleWidth: {
      type: Number,
      default: 0,
    },
    skuText: {
      type: [String, Array],
      default: '',
    },
    price: {
      type: [String, Number],
      default: '',
    },
    priceColor: {
      type: [String],
      default: '',
    },
    num: {
      type: [String, Number],
      default: 0,
    },
    point: {
      type: [String, Number],
      default: '',
    },
    radius: {
      type: [String],
      default: '',
    },
    marginTop: {
      type: [String],
      default: '',
    },
  });
  const skuString = computed(() => {
    if (!props.skuText) {
      return '';
    }
    if (typeof props.skuText === 'object') {
      return props.skuText.join(',');
    }
    return props.skuText;
  });
</script>

<style lang="scss" scoped>
.box {
  // background-color: var(--default-bgc);
  background-color: #e9e9e9;
  border-radius: 8px;
  padding: 12px;
  // border: 1px dashed #000000;
}
.title {
  font-size: 17px;
  font-family: 'MiSans-Bold';
  width: 30%;
}
.skuString {
  width: 25%;
}
.price {
  width: 15%;
}
.buyNum {
  width: 10%;
  color: #777;
}
.subtotal {
  width: 15%;
}
</style>