【组件分享】 订单卡片组件

订单卡片组件

组件原型

<template>
  <view class="card">
    <view class="card-left">
      <image mode="aspectFill" :src="orderInfo.goodsPic" class="goods-img"></image>
      <view>
        <view class="goods-name">{{ orderInfo.goodsName }}</view>
        <view class="goods-sku">{{ orderInfo.goodsSpecifications }}</view>
        <view class="slot-wrapper">
          <slot name="tag"></slot>
        </view>
      </view>
    </view>
    <view class="card-right">
      <view>
        <view>
          <text class="price-unit">¥</text>
          <text class="price-number">{{ intPrice }}</text>
          <text class="price-decimal">{{ decimalPrice }}</text>
        </view>
        <view class="number-wrapper">
          <text class="goods-X">×</text>
          <text class="goods-number">{{ orderInfo.goodsNumber }}</text>
        </view>
      </view>
      <slot name="btn"></slot>
    </view>
  </view>
</template>
<script setup>
  import { ref } from "vue";

  const props = defineProps({
    // 卡片高度
    cardHeight: {
      type: String,
      default: "180rpx",
    },

    // 卡片信息
    orderInfo: {
      type: Object,
      required: true,
    },
  });
  const cardHeight = props.cardHeight;
  const intPrice = ref(null);
  const decimalPrice = ref(null);

  const getDecimalValue = (price) => {
    console.log(price, "priceprice");
    const splitArr = price.toString().split(".");
    intPrice.value = splitArr[0];
    if (splitArr.length === 2) {
      decimalPrice.value = "." + splitArr[1];
    }
  };
  getDecimalValue(props.orderInfo.goodsPrice);
</script>
<style lang="scss">
  @import '../base.scss';
  // 用于数字的特殊字体
  @font-face {
    font-family: "TCloudNumberRegular";
    src: url("./fonts/TCloudNumber-Regular.ttf") format("truetype"),
      url("./fonts/TCloudNumber-Regular.ttf") format("woff2");
  }
  .card {
    height: v-bind(cardHeight);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background: #fff;
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 16rpx;
    
    .card-left {
      display: flex;
      align-items: flex-start;
      height: 100%;
      flex: 1;
      
      .goods-img {
        width: 140rpx;
        height: 140rpx;
        margin-right: 20rpx;
        border-radius: 8rpx;
        flex-shrink: 0;
        object-fit: cover;
      }
      .goods-name {
        font-size: 30rpx;
        font-family: PingFang SC, sans-serif;
        font-weight: 500;
        color: #333333;
        line-height: 36rpx;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .goods-sku {
        font-size: 26rpx;
        font-family: PingFang SC, sans-serif;
        font-weight: 400;
        color: #999999;
        line-height: 32rpx;
        margin-top: 16rpx;
        text-align: left;
      }
      .slot-wrapper {
        margin-top: 16rpx;
      }
    }
    .card-right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-content: flex-start;
      height: 100%;
      text-align: right;
      .price-unit {
        font-size: 20rpx;
        font-family: "TCloudNumberRegular";
        font-weight: 400;
        color: #333333;
        line-height: 28rpx;
      }
      .price-number {
        font-size: 30rpx;
        font-family: "TCloudNumberRegular";
        font-weight: 400;
        color: #333333;
        line-height: 36rpx;
        margin-left: 4rpx;
      }
      .price-decimal {
        font-size: 24rpx;
        font-family: "TCloudNumberRegular";
        font-weight: 400;
        color: #333333;
        line-height: 28rpx;
      }
      .number-wrapper {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .goods-X {
          font-size: 24rpx;
          font-weight: 600;
          color: #999999;
          line-height: 32rpx;
          margin-right: 8rpx;
        }
        .goods-number {
          font-size: 26rpx;
          font-family: "TCloudNumberRegular";
          font-weight: 400;
          color: #999999;
          line-height: 32rpx;
        }
      }
    }
  }
</style>