jiangchengfeiyi-xiaochengxu/pages/mine/mineorders/mineorders.vue

<template>
  <view class="container">
    <view class="order-tabs">
      <view
        class="tab-item"
        :class="{ active: orderStatus === '全部', selected: isSelected('全部') }"
        @click="changeTab('全部')"
      >
        全部
      </view>
      <view
        class="tab-item"
        :class="{ active: orderStatus === '待支付', selected: isSelected('待支付') }"
        @click="changeTab('待支付')"
      >
        待支付
      </view>
      <view
        class="tab-item"
        :class="{ active: orderStatus === '待发货', selected: isSelected('待发货') }"
        @click="changeTab('待发货')"
      >
        待发货
      </view>
      <view
        class="tab-item"
        :class="{ active: orderStatus === '已发货', selected: isSelected('已发货') }"
        @click="changeTab('已发货')"
      >
        已发货
      </view>
      <view
        class="tab-item"
        :class="{ active: orderStatus === '售后', selected: isSelected('售后') }"
        @click="changeTab('售后')"
      >
        售后
      </view>
    </view>
    <view class="order-list">
      <view v-for="order in Status.displayedOrders" :key="order.id" class="order-item">
		  {{order.orderStatus}}
		  <view v-for="item in order.orderItemList" :key="item.id">
		    <image :src="item.goodSnapshot.goodImg" style="height: 50px;width: 50px;"></image>
		  </view>
        <view v-for="item in order.orderItemList" :key="item.id">
          {{ item.goodSnapshot.name }}
        </view>
        <view v-for="item in order.orderItemList" :key="item.id">
          {{ item.goodSnapshot.type }}
        </view>
        <view v-for="item in order.orderItemList" :key="item.id">
          {{ item.goodSnapshot.price }}
        </view>
		<view v-if="order.orderStatus==='待支付'" >去支付</view>
		<view v-if="order.orderStatus==='待发货'" >取消订单</view>
		<view v-if="order.orderStatus==='已发货'" >确认收货</view>
		<view v-if="order.orderStatus==='售后'" >售后详情</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, toRaw } from 'vue';
import { baseUrl, testUrl, suiUrl } from '@/api/request';
const currentColor = ref(0);
onMounted(async () => {
  await Getorder();
  Status.displayedOrders = Status.orders;
});
const userInfo = ref({
  userInfo: uni.getStorageSync('userInfo'),
});
const Getorder = async () => {
  const res = await uni.request({
    url: baseUrl + '/order/list',
    method: 'POST',
    data: {
      // id:userInfo.value.userInfo.id,
      id: 215,
    },
  });
  if (res.data.code === 1) {
    Status.value.orders = res.data.data;
  } else {
    console.log('没拿到用户数据');
  }
};
const Status = ref({
  orderStatus: '全部',
  orders: [],
  displayedOrders: [],
});
const changeTab = (tab) => {
  if (tab === '全部') {
    Status.value.displayedOrders = Status.value.orders;
    Status.value.orderStatus = '全部';
  } else {
    Status.value.displayedOrders = Status.value.orders.filter((order) => {
      switch (tab) {
        case '待支付':
          return order.orderStatus === '待支付';
        case '待发货':
          return order.orderStatus === '待发货';
        case '已发货':
          return order.orderStatus === '已发货';
        case '售后':
          return order.orderStatus === '售后';
        default:
          return false;
      }
    });
    Status.value.orderStatus = tab;
  }
};
const isSelected = (tab) => Status.value.orderStatus === tab;
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: 20px;
}

.order-tabs {
  display: flex;
  justify-content: space-around;
  background-color: #f5f5f5;
  padding: 10px 0;
}

.tab-item {
  cursor: pointer;
  padding: 5px 10px;
}

.tab-item.active {
  color: blue;
}

.tab-item.selected {
  background-color: brown;
  color: white;
}

.order-list {
 margin: 10px 10px 0 10px;
}

.order-item {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}
@import url(../../../common/css/global.css);
</style>