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([
      {
        imgUrl: 'https://img.zcool.cn/community/015ac85f110b9fa801206621387957.png@1280w_1l_2o_100sh.png',
        money:13,
		time:'2024-03-15 11:15:10',
		orderNumber:4568415846158841
      },
	  {
	    imgUrl: 'https://img.zcool.cn/community/015ac85f110b9fa801206621387957.png@1280w_1l_2o_100sh.png',
	    money:12,
	  	time:'2024-03-15 11:15:10',
	  	orderNumber:4568415846158841
	  },
	  {
	    imgUrl: 'https://img.zcool.cn/community/0105ec5b5ac3cba801206a35cf08a8.jpg@1280w_1l_2o_100sh.jpg',
	    money:123,
	  	time:'2024-03-15 11:15:10',
	  	orderNumber:4568415846158841
	  },
	  {
	    imgUrl: 'https://img.zcool.cn/community/015ac85f110b9fa801206621387957.png@1280w_1l_2o_100sh.png',
	    money:123,
	  	time:'2024-03-15 11:15:10',
	  	orderNumber:4568415846158841
	  }
])
</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="(item,index) in orderList" :key="index">
			 		<view class="orderImg">
			 			<image :src="item.imgUrl" class="img"></image>
			 		</view>
			 					<view class="orderMessage">
			 						<text class="money">+{{item.money}}元</text>
			 						<br />
			 						<text class="time">下单时间:{{item.time}}</text>
			 						<br />
			 						<text class="time">订单编号:{{item.orderNumber}}</text>
			 					</view>
			 	</view>
			 </view>
        </block>
        <block v-if="currentIndex === 1">
           <view class="container">
           	<view class="orderItem" v-for="(item,index) in orderList" :key="index">
           		<view class="orderImg">
           			<image :src="item.imgUrl" class="img"></image>
           		</view>
           					<view class="orderMessage">
           						<text class="money">+{{item.money}}元</text>
           						<br />
           						<text class="time">下单时间:{{item.time}}</text>
           						<br />
           						<text class="time">订单编号:{{item.orderNumber}}</text>
           					</view>
           	</view>
           </view>
		</block>
        <block v-if="currentIndex === 2">
     	<view class="container">
     		<view class="orderItem" v-for="(item,index) in orderList" :key="index">
     			<view class="orderImg">
     				<image :src="item.imgUrl" class="img"></image>
     			</view>
     						<view class="orderMessage">
     							<text class="money">+{{item.money}}元</text>
     							<br />
     							<text class="time">下单时间:{{item.time}}</text>
     							<br />
     							<text class="time">订单编号:{{item.orderNumber}}</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>