VAVABUY/pages/index/components/OrderScroll.vue

<template>
  <view class="order-scroll-section">
    <!-- <SectionTitle :title="title" /> -->
    <swiper
      class="order-swiper"
      :autoplay="autoplay"
      circular
      horizontal
      :duration="duration"
      :interval="interval"
    >
      <swiper-item
        class="order-item"
        v-for="order in orderList"
        :key="order.id"
        @click="handleItemClick(order)"
      >
        <view class="order-info">
          <view
            class="_item_wrapper"
            v-for="(val, num) in order.goods"
            :key="num"
          >
            <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">
            <view class="order-price">
              <view class="price_text"> <trans _t="总价" />： </view>
              <text>{{ symbol.symbol }}{{ Moneyhtml(order.amount) }}</text>
            </view>
            <text>{{ order.status_txt }}</text>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

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

const useSystem = useSystemStore();
const symbol = computed(() => useSystem.getSymbol);
const props = defineProps({
  // 订单列表（必传）
  orderList: {
    type: Array,
    required: true,
  },
  // 轮播标题（默认“追踪订单”）
  title: {
    type: String,
    default: "追踪订单",
  },
  autoplay: {
    type: Boolean,
    default: true,
  },
  // 滚动动画时长（毫秒，默认500）
  duration: {
    type: Number,
    default: 500,
  },
  // 轮播间隔（毫秒，默认5000）
  interval: {
    type: Number,
    default: 5000,
  },
});

const emits = defineEmits(["itemClick"]);

const handleItemClick = (order) => {
  emits("itemClick", order);
};
</script>

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

.order-scroll-section {
  .order-swiper {
    width: 100%;
    padding: 16rpx;
    background-color: var(--bg);
    border-radius: 16rpx;
    // border: var(--bor1);

    box-sizing: border-box;
    .order-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24rpx;
      width: 100%;
      box-sizing: border-box;
      cursor: pointer;

      .order-info {
        width: 100%;
        ._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 {
          width: 100%;
          color: var(--primary);
          .size(24rpx);
          .hor(space-between);
          align-items: center;
          padding-left: 156rpx;
          .order-price {
            .flex_position(flex-end);
            color: var(--primary);
            color: var(--red);
            .size();
            font-weight: 700;

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