feiniao-youwei-uniapp/pages/tabBar/mine/subPages/order.vue

<template>
	<view class="sub-base-container">
		<view class="search-box">
			<v-search @searchCallback="searchCallback" @clearCallback="clearCallback"></v-search>
		</view>
		<view class="tabs">
			<view :class="['tab-item',{active:active === index}]" v-for="(item,index) in tabsList" :key="index"
				@click="handleTab(index)">{{item}}</view>
		</view>
		<view class="shop-list">
			<view class="shop-item" v-for="(item,index) in 3" :key="index">
				<view class="shop-head">
					<view class="shop-title">
						<text>从化荔博园店铺</text>
						<up-icon class="icon" name="arrow-right" size="12" color="rgba(137, 137, 137, 0.69)"></up-icon>
					</view>
					<text class="status">{{statusStr[active]}}</text>
				</view>
				<view class="shop-cont">
					<image class="shop-img" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
					</image>
					<view class="shop-info">
						<view class="shop-name flex">
							<text>海南妃子笑荔枝新鲜采摘</text>
							<text class="shop-price">¥25</text>
						</view>
						<view class="shop-text flex">
							<text>3斤装规格</text>
							<text>x1</text>
						</view>
						<up-text size="12" color="#AFAFAF" text="坏单包退 包邮"></up-text>
						<view class="total">
							<view v-if="active==3 || active==4">共优惠 <text class="num">¥10</text></view>
							<view v-if="active!=0 || active!=1">实付款 <text class="num">¥25</text></view>
						</view>
					</view>
				</view>
				<view class="shop-foot flex">
					<view class="more">更多</view>
					<view class="shop-button" v-if="active==0 || active==1">
						<view>取消订单</view>
						<view>付款</view>
					</view>
					<view class="shop-button" v-else-if="active==2">
						<view>删除订单</view>
						<view>提醒发货</view>
					</view>
					<view class="shop-button" v-else-if="active==3">
						<view>删除订单</view>
						<view>查看物流</view>
						<view class="confirm">确认收货</view>
					</view>
					<view class="shop-button" v-else="active==4">
						<view>申请售后</view>
						<view>去评价</view>
						<view class="confirm">再买一单</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"

	const searchCallback = (e) => {
		console.log('搜索', e)
	}
	const clearCallback = () => {
		console.log('clear')
	}

	const active = ref(0)
	const tabsList = ["全部", "待付款", "待发货", "待收货", "待评价", "退款/售后"]
	const handleTab = (index) => {
		active.value = index
	}
	
	const statusStr = {
		0:"待付款",
		1:"待付款",
		2:"待发货",
		3:"待收货",
		4:"交易成功",
		5:"退款/售后",
	}
	
	// const shopList = [
	// 	{
	// 		status:0,
	// 	}
	// ]
</script>

<style lang="scss" scoped>
	.sub-base-container {
		padding: 0;
		.search-box{
			padding: 16rpx 24rpx 20rpx;
			background: #fff;
		}
		.tabs {
			width: 100%;
			padding: 0 24rpx 16rpx;
			box-sizing: border-box;
			display: flex;
			overflow-x: auto;
			background: #fff;

			.tab-item {
				// flex: 1;
				width: 150px;
				text-align: center;
				color: #000;
				font-size: 28rpx;
				padding: 10rpx 0;
				white-space: nowrap;

				&.active {
					border-radius: 10rpx;
					background: rgba(243, 193, 29, 0.2);
				}
			}
		}

		.shop-list {
			font-size: 28rpx;
			.flex {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.shop-item {
				background: #fff;
				padding: 20rpx 24rpx;

				.shop-head {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.shop-title {
						font-weight: 500;
						display: flex;
						.icon{
							margin-left: 2rpx;
						}
					}

					.status {
						color: #F3C11D;
					}
				}

				.shop-cont {
					width: 100%;
					display: flex;
					margin: 20rpx 0;

					.shop-img {
						width: 182rpx;
						height: 182rpx;
						margin-right: 10rpx;
						border-radius: 10rpx;
					}

					.shop-info {
						width: calc(100% - 182rpx - 10rpx);

						.shop-name {
							font-size: 28rpx;
							font-weight: 500;

							.shop-price {
								font-weight: 400;
							}
						}

						.shop-text {
							color: #717070;
						}

						.total {
							margin-top: 20rpx;
							display: flex;
							justify-content: flex-end;
							.num{
								font-weight: 500;
								font-size: 34rpx;
							}
							view + view{
								margin-left: 20rpx;
							}
						}
					}
				}
				.shop-foot{
					.more{
						color: rgba(0, 0, 0, 0.5);
					}
					.shop-button{
						display: flex;
						align-items: center;
						view{
							width: 164rpx;
							padding: 10rpx 0;
							text-align: center;
							border-radius: 50rpx;
							border: 2rpx solid rgba(0, 0, 0, 0.3);
						}
						.confirm{
							background: #FFD95E;
							border: 2rpx solid transparent;
						}
						view + view{
							margin-left: 20rpx;
						}
					}
				}
			}
			.shop-item + .shop-item{
				margin-top: 10rpx;
			}
		}
	}
</style>