xiaokuaisong-shopapp/uniapp05/pages/orderManagement/orderManagement.vue

<script setup lang="ts">
import {apiImageUrl} from '../../API/api'
import { ref,onMounted,computed,onUnmounted } from 'vue'

    const currentIndex = ref(0);
    const tabs = ref([
      { name: '全部' },
      { name: '收入' },
      { name: '退款' }
    ]);

    const switchTab = (index) => {
      currentIndex.value = index;
    };
const orderList = ref([]);

const getOrder = () => {
  uni.request({
    url: apiImageUrl + '/api/orders/my/page',
    method: 'POST',
    data: {
      current: 1,
      endTime: "",
      id: "",
      pageSize: 100,
      pickupMethod: 0,
      sortField: "",
      sortOrder: "",
      startTime: "",
      state: 0
    },
    success(res) {
      console.log(res);
      orderList.value = res.data.data.records;
      console.log(orderList.value);
    },
    fail() {
      console.log('出错啦');
    }
  });
};

// 如果你需要在组件挂载时立即获取订单数据，可以使用 onMounted 钩子
onMounted(() => {
  getOrder();
});
</script>

<template>
<scroll-view scroll-y class="preview">
    <!-- 商品详情 -->
      <view class="tab-menu">
        <view class="tab-item"
              v-for="(tab, index) in tabs"
              :key="index"
              :class="{active: currentIndex === index}"
              @click="switchTab(index)">
          {{ tab.name }}
        </view>
      </view>
      <view class="content">
        <block v-if="currentIndex === 0">
			 <view class="container">
			 	<view class="orderItem" v-for="(order, index) in orderList" :key="index">
			 		<view class="orderImg">
			 			<image src="https://tse4-mm.cn.bing.net/th/id/OIP-C.cDfrXgI1DKvU7OklwmBfewHaHa?rs=1&pid=ImgDetMain" class="img"></image> 
			 		</view>
			 		<view class="orderMessage">
			 			<text class="money">+{{ order.totalPrice }}元</text>
			 			<br />
			 			<text class="time">下单时间:{{ order.createTime }}</text>
			 			<br />
			 			<text class="time">订单编号:{{ order.id }}</text>
			 		</view>
			 	</view>
			 </view>
        </block>
        <block v-if="currentIndex === 1">
          <view class="container">
          	<view class="orderItem" v-for="(order, index) in orderList" :key="index">
          		<view class="orderImg">
          			<image src="https://tse4-mm.cn.bing.net/th/id/OIP-C.cDfrXgI1DKvU7OklwmBfewHaHa?rs=1&pid=ImgDetMain" class="img"></image> 
          		</view>
          		<view class="orderMessage">
          			<text class="money">+{{ order.totalPrice }}元</text>
          			<br />
          			<text class="time">下单时间:{{ order.createTime }}</text>
          			<br />
          			<text class="time">订单编号:{{ order.id }}</text>
          		</view>
          	</view>
          </view>
		</block>
        <block v-if="currentIndex === 2">
     	<view class="container">
     		<view class="orderItem" v-for="(order, index) in orderList" :key="index">
     			<view class="orderImg">
     				<image src="https://tse4-mm.cn.bing.net/th/id/OIP-C.cDfrXgI1DKvU7OklwmBfewHaHa?rs=1&pid=ImgDetMain" class="img"></image> 
     			</view>
     			<view class="orderMessage">
     				<text class="money">+{{ order.totalPrice }}元</text>
     				<br />
     				<text class="time">下单时间:{{ order.createTime.substr(0, 29).replace('T', ' ') }}</text>
     				<br />
     				<text class="time">订单编号:{{ order.id }}</text>
     			</view>
     		</view>
     	</view>
        </block>
      </view>
  </scroll-view>
</template>
<style lang="scss">

	.tabs {
	  display: flex;
	  justify-content: space-around;
	  line-height: 60rpx;
	  margin: 0 10rpx;
	  background-color: #fff;
	  box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
	  position: relative;
	  z-index: 9;
	
	  .item {
	    flex: 1;
	    text-align: center;
	    padding: 20rpx;
	    font-size: 28rpx;
	    color: #262626;
	  }
	
	  .cursor {
	    position: absolute;
	    left: 0;
	    bottom: 0;
	    width: 18%;
	    height: 6rpx;
	    padding: 0 50rpx;
	    background-color: #4095e5;
	    /* 过渡效果 */
	    transition: all 0.4s;
	  }
	}
	.preview image {
		width: 100%;
	}
page {
  height: 100%;
  overflow: hidden;
  background-color: #f5f5f5;
}

.tab-menu {
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  background-color: #f5f5f5;
}
.tab-item {
  padding: 10px;
  cursor: pointer;
}
.tab-item.active {
  color: #4095e5;
  font-weight: bold;
}

.scroll-view {
	/* #ifndef APP-NVUE */
	width: 100%;
	height: 100%;
	/* #endif */
	flex:1
}
.orderItem {
	width: 100%;
	height: 80px;
	margin-bottom: 10px;
	background-color: #fff;
}
.orderImg {
	display: inline-block;
	width: 20%;
	height: 100%;
	margin: auto 0;
	
}
.img {
	width: 100%;
	height: 100%;
	border-radius: 15px;
}
.orderMessage {
	width: 75%;
	height: 80%;
	float: right;
	display: inline-block;
	margin-top: 10px;
}
.money {
	font-size: 30rpx;
	font-weight: 700;
}
.time {
	font-size: 25rpx;
}
.container {
	width: 90%;
	height: 100vh;
	margin: 0 auto;
}
</style>