null/pages/order/order.vue

<template>
	<view class="page">
		<view class="tab-sec">
			<view class="tab-wrap align-center justify-around">
				<view class="tab" :class="{ active: tabCurrentIndex === idx }" v-for="(item, idx) in tabs" :key="idx">{{ item.name }}</view>
			</view>
		</view>
		<view class="content-sec">
			<view class="item-wrap flex-col" v-for="(item, idx) in 3">
				<view class="flex-row justify-between group_3">
					<text class="text_5">订单号：M1569878</text>
					<text class="text_7">进行中</text>
				</view>
				<pro />
				<!-- 进行中 
				  <view class="flex-row justify-end group_8">
				    <view class="flex-col items-center text-wrapper_1"><text class="text_21">申请退款</text></view>
				    <view class="flex-col items-center text-wrapper_2"><text class="text_23">确认取货</text></view>
				  </view>
				  -->
				<!-- 已完成 未评价-->
				<view class="flex-row justify-end group_8">
					<view class="flex-col items-center text-wrapper_1"><text class="text_21">申请退款</text></view>
					<view class="flex-col items-center text-wrapper_2"><text class="text_23">去评价</text></view>
				</view>
				<!-- 已完成 已评价-->
				<!-- 退款成功 -->
			</view>
		</view>
	</view>
</template>

<script>
import pro from './components/pro.vue'
export default {
	components:{
		pro
	},
	data() {
		return {
			tabs: [
				{ name: '全部', type: -1, loadingType: 'more', list: [], page: 1, loaded: false },
				{ name: '进行中', type: -1, loadingType: 'more', list: [], page: 1, loaded: false },
				{ name: '已完成', type: -1, loadingType: 'more', list: [], page: 1, loaded: false },
				{ name: '已取消', type: -1, loadingType: 'more', list: [], page: 1, loaded: false }
			],
			reqData: { type: '' },
			pageSize: 20,
			tabCurrentIndex: 0
		};
	}
};
</script>

<style lang="scss">
page {
	background-color: #f8f8f8;
}
.tab-sec {
	position: relative;
	height: 89rpx;
}

.tab-wrap {
	position: fixed;
	left: 0;
	top: calc(var(--window-top));
	z-index: 10;
	right: 0;
	height: 89rpx;
	background-color: #f8f8f8;
	.tab {
		height: 89rpx;
		line-height: 89rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		&.active {
			color: $base-color;
			&::after {
				content: '';
				left: 50%;
				transform: translateX(-50%);
				bottom: 24rpx;
				width: 27rpx;
				height: 3rpx;
				background: #92b99c;
			}
		}
	}
}
.content-sec {
	.item-wrap {
		width: 690rpx;
		margin: 0 auto 24rpx;
		padding-bottom: 24rpx;
		background-color: #ffffff;
		box-shadow: 0px 6rpx 10rpx #2a2a2a14;
		border-radius: 20rpx;
	}
	.item-wrap:not(:first-of-type) {
		margin-top: 24rpx;
	}
	.group_3 {
		padding: 24rpx 20rpx 24rpx 25rpx;
		border-bottom: solid 1rpx #0000000f;
	}
	.text_5 {
		margin-top: 9rpx;
		color: #333333;
		font-size: 30rpx;
		font-family: PingFang;
		line-height: 28rpx;
	}
	.text_7 {
		margin-bottom: 10rpx;
		color: #92b99c;
		font-size: 28rpx;
		font-family: PingFang;
		line-height: 27rpx;
	}

	.group_8 {
		margin-top: 32rpx;
		padding: 0 20rpx;
	}
	.text-wrapper_1 {
		margin-right: 23rpx;
		padding: 16rpx 0 19rpx;
		border-radius: 10rpx;
		width: 154rpx;
		height: 64rpx;
		border: solid 1rpx #92b99c;
	}
	.text_21 {
		color: #92b99c;
		font-size: 28rpx;
		font-family: PingFang;
	}
	.text-wrapper_2 {
		padding: 16rpx 0 19rpx;
		border-radius: 10rpx;
		width: 154rpx;
		height: 64rpx;
		border: solid 1rpx #92b99c;
	}
	.text_23 {
		color: #92b99c;
		font-size: 28rpx;
		font-family: PingFang;
	}
}
</style>