VAVABUY/pages/order/components/OrderList.vue

<template>
  <view class="content">
    <view style="padding: 0rpx 22rpx; padding-top: 18rpx">
      <view class="img_box">
        <up-lazy-load
          :image="item?.goods[0]?.pic_url"
          class="img"
          lazy-load
          mode="aspectFit"
        ></up-lazy-load>
      </view>
      <text class="title">{{ item?.goods[0]["goodTitle"] }}</text>
      <view class="_price">
        <text class="icon">{{ symbol.symbol }} </text>
        <rich-text
          class="texts"
          :nodes="Moneyhtml(item?.amount, true)"
        ></rich-text>
      </view>
      <view class="dashed"></view>
      <view class="state">
        <text class="title">{{ t("当前状态") }}:</text>
        <text class="completed">{{ item.bz }}</text>
        <text class="icon">/</text>
        <text class="sum">{{ item.bz_count }}</text>
      </view>
    </view>
    <view class="button" @click="onCheck(item.goods[0])">
      <trans _t="查看并确认" />
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits, computed } from "vue";
import { Moneyhtml } from "@/utils";
import { t } from "@/locale";
import { useSystemStore } from "@/store";

const useSystem = useSystemStore();
const symbol = computed(() => useSystem.getSymbol);
const props = defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(["onCheck"]);

const onCheck = (item) => {
  emit("onCheck", item);
};
</script>

<style lang="less" scoped>
@import url("@/style.less");

.content {
  overflow: hidden;
  border-radius: 20rpx;
  font-family: HarmonyOS Sans SC;

  .img_box {
    height: 160rpx;
    width: 160rpx;
    margin: 0 auto;

    .img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      aspect-ratio: 1 / 1;
      border-radius: 8rpx;
    }
  }

  .title {
    .size(24rpx);
    line-height: 32rpx;
    .ellipsis(1);

    margin-top: 8rpx;
  }

  ._price {
    .ver(flex-end);
    color: var(--text-02);
    .size(32rpx);
    font-weight: 500;
    margin-top: 8rpx;

    .icon {
      margin-right: 8rpx;
    }

    .texts {
      /deep/ div {
        .ver(baseline);

        .price {
        }

        .decimal {
          .size(24rpx);
        }
      }
    }
  }

  .state {
    display: flex;
    align-items: flex-end;
    .size(24rpx);

    .title {
      margin: 0;
      margin-right: 10rpx;
    }

    .completed {
      .size(28rpx);
      color: var(--red);
      font-weight: 700;
      line-height: 38rpx;
      // font-variation-settings: "opsz" auto;
    }

    .sum,
    .icon {
      color: var(--text);
      .size(24rpx);
      font-weight: 500;
    }
  }

  .button {
    text-align: center;
    background-color: var(--black);
    padding: 10rpx;
    color: var(--light);
    .size(24rpx);
    min-height: 62rpx;
    margin-top: 14rpx;
  }
}
</style>