VAVABUY/pages/dashboard/components/parcel_list.vue

<template>
  <view class="order_list">
    <view class="order_header">
      <view class="create_time">
        <trans _t="创建时间" />: {{ useGlobal().$format(item.indate) }}
      </view>
    </view>
    <view class="order_item">
      <view
        class="order_item_wrapper"
        v-for="(val, num) in item.goods || [item]"
        :key="num"
      >
        <view class="_item_wrapper">
          <view class="thumb_img">
            <up-lazy-load :image="val.pic_url" class="_img"></up-lazy-load>
          </view>
          <view class="goods_info">
            <view class="info_name">
              <view class="_name">{{ val.goodTitle }}</view>
              <view class="_price"
                >{{ symbol.symbol }}&nbsp;{{ Moneyhtml(val.price) }}</view
              >
            </view>
            <view class="spec_info">
              <view class="spec_desc">{{ val.sku_desc }}</view>
              <view class="spec_num">x{{ val.total }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="order_footer" v-if="item?.goods?.length">
        <view class="order_price all_price">
          <view class="price_text"> <trans _t="运费" />： </view>
          <text class="price-pay"
            >{{ symbol.symbol
            }}{{
              Moneyhtml(item.money - item.discount) < 0
                ? 0.01
                : Moneyhtml(item.money - item.discount)
            }}</text
          >
          <text class="price-original" v-if="item.discount > 0"
            >{{ symbol.symbol }}{{ Moneyhtml(item.money) }}</text
          >
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref, computed } from "vue";
import { t } from "@/locale";
import { useGlobal, Toast, Moneyhtml } from "@/utils";
import { useSystemStore } from "@/store";

const useSystem = useSystemStore();
const props = defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
});
const symbol = computed(() => useSystem.getSymbol);
</script>
<style lang="less" scoped>
@import url("@/style.less");

.order_list {
  margin-top: 24rpx;
  padding: 16rpx 24rpx;
  background-color: var(--light);
  border-radius: 16rpx;

  .order_header {
    .ver();
    margin-bottom: 16rpx;

    .create_time {
      .size(24rpx);
      color: var(--text);
      font-weight: 700;

      text {
        font-weight: 500;
      }
    }
  }

  .order_item {
    &_wrapper {
      margin-top: 16rpx;

      ._item_wrapper {
        .flex();

        .thumb_img {
          width: 140rpx;
          height: 140rpx;

          ._img {
            width: inherit;
            height: inherit;
            border-radius: 16rpx;
          }
        }

        .goods_info {
          margin-left: 16rpx;
          flex: 1;

          .info_name {
            color: var(--text);
            .size(24rpx);
            font-weight: 700;
            line-height: 44rpx;
            .ver();

            ._name {
              flex: 1;
              // .ellipsis();
              margin-right: 8rpx;
            }
          }

          .spec_info {
            .flex();
            flex: 1;
            margin-top: 8rpx;
            color: var(--text-01);
            .size(24rpx);
            line-height: 40rpx;

            .spec_desc {
              flex: 1;
              margin-right: 8rpx;
            }
          }
        }
      }

      .order_status {
        color: var(--primary);
        .size(24rpx);
        height: 40rpx;
        .flex_position(flex-end);
        margin-top: 16rpx;

        .icon-question2 {
          .size(36rpx);
        }
      }
    }

    .order_footer {
      margin-top: 16rpx;
      border-top: var(--bor);

      .order_price {
        .flex_position(flex-end);
        color: var(--text);
        .size(28rpx);
        height: 64rpx;
        line-height: 60rpx;

        &:first-child {
          padding-top: 16rpx;
        }
      }

      .all_price {
        font-weight: 700;
        color: var(--red);

        .price_text {
          color: var(--text);
        }
      }

      .price-pay {
        color: var(--red);
        font-weight: bold;
        margin-right: 16rpx;
      }

      .price-original {
        font-size: 24rpx;
        color: #999;
        text-decoration: line-through;
      }
    }
  }
}
</style>