VAVABUY/pages/dashboard/components/order_list.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">
        <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 class="no_return">
              <trans _t="不支退货换货" />
            </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">
        <view class="order_price">
          <view class="price_text">
            <trans _t="小计" />：
          </view>
          <text>{{ symbol.symbol }}{{ Moneyhtml(item.amount) }}</text>
        </view>
        <view class="order_price">
          <view class="price_text">
            <trans _t="国内货运" />：
          </view>
          <text>{{ symbol.symbol }}{{ '0.00' }}</text>
        </view>
        <view class="order_price">
          <view class="price_text">
            <trans _t="订单补充付款" />：
          </view>
          <text>{{ symbol.symbol }}{{ '0.00' }}</text>
        </view>
        <view class="order_price">
          <view class="price_text">
            <trans _t="涉及增值服务费" />：
          </view>
          <text>{{ symbol.symbol }}{{ '0.00' }}</text>
        </view>
        <view class="order_price all_price">
          <view class="price_text">
            <trans _t="总价" />：
          </view>
          <text>{{ symbol.symbol }}{{ Moneyhtml(item.amount) }}</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;

    .header_img {
      width: 48rpx;
      height: 48rpx;

      .img {
        width: inherit;
        height: inherit;
        border-radius: 8rpx;
      }
    }

    .create_time {
      margin-left: 16rpx;
      .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_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);
        }
      }
    }
  }
}
</style>