VAVABUY/pages/store/components/order_item.vue

<template>
  <view class="order_list">
    <view class="order_header">
      <!-- <view class="header_img">
        <image
          :src="`../../static/shop/icon_${item.channel}.png`"
          class="img"
        ></image>
      </view> -->
      <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"
        :key="num"
        @click="handleClick"
      >
        <view class="_item_wrapper">
          <view class="thumb_img">
            <image :src="val.pic_url" class="_img"></image>
          </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 class="order_status">
          <text>{{ item.status_txt }}&nbsp;</text>
          <!-- <i class="icon-font icon-question2"></i> -->
        </view>
      </view>
      <view class="order_footer" v-if="item.status == 300">
        <view class="order_price">
          <view class="price_text"> <trans _t="运费" />： </view>
          <text>{{ symbol.symbol }}{{ Moneyhtml(item.money) }}</text>
        </view>
        <view class="order_btns">
          <view class="btn pay_btn" @click.stop="handleAction">
            <trans _t="支付" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

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

const useSystem = useSystemStore();
const symbol = computed(() => useSystem.getSymbol);

const props = defineProps({
  item: {
    type: Object,
    required: true,
  },
});

const emit = defineEmits(["click", "action"]);

const handleClick = () => {
  emit("click", props.item);
};

const handleAction = () => {
  emit("action", props.item);
};
</script>

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

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

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

    .header_img {
      width: 48rpx;
      height: 48rpx;
      margin-right: 16rpx;
      .img {
        width: inherit;
        height: inherit;
        border-radius: 8rpx;
      }
    }

    .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;
            }
          }

          .no_return {
            border: var(--danger-bor);
            border-radius: 40rpx;
            color: var(--danger);
            cursor: pointer;
            .size(24rpx);
            line-height: 40rpx;
            margin-top: 16rpx;
            padding: 0 24rpx;
            width: max-content;
          }
        }
      }

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

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

      .order-cancel {
        margin-top: 16rpx;
        color: var(--text-01);
        .size(24rpx);
        line-height: 40rpx;

        .time {
          color: var(--danger);
          font-weight: 700;
        }

        .content {
          margin-top: 8rpx;
          color: var(--text);
          font-weight: 500;
        }
      }
    }

    .order_footer {
      margin-top: 16rpx;
      border-top: 1px solid #f5f6f7;

      .order_price {
        padding-top: 16rpx;
        .flex_position(flex-end);
        color: var(--primary);
        color: var(--red);
        .size();
        font-weight: 700;
        height: 48rpx;
        line-height: 1;

        .price_text {
          color: var(--text);
          .size(24rpx);
          font-weight: 400;
        }

        .icon-question2 {
          font-weight: 400;
          color: var(--text-01);
          margin-left: 8rpx;
        }
      }

      .end_time {
        .flex_position(flex-end);
        margin-top: 16rpx;
        color: #e62e2e;
        font-weight: 700;
        .size(24rpx);

        text {
          font-weight: 400;
        }
      }

      .order_btns {
        .flex_position(flex-end);
        margin-top: 16rpx;
        gap: 16rpx;

        .btn {
          .flex_center();
          border-radius: 16rpx;
          padding: 0 30rpx;
          .size(24rpx);
          height: 48rpx;
          border: 1px solid var(--black);
          background-color: var(--light);
          color: var(--black);
        }

        .pay_btn {
          color: var(--light);
          background-color: var(--black);
        }
      }
    }
  }
}
</style>