wx-qhb/pageC/orderForm/orderForm.vue

<template>
	<view>
		<u-navbar @leftClick="rightClick" bgColor="#f4f4f4" :autoBack="true">
			<view class="tab" slot="center">
				<view style="width: 600rpx;">
					<input type="text" placeholder="搜索我的订单" class="inp" />
				</view>
			</view>
		</u-navbar>
		<view class="content">
			<view class="top-tab">
				<view :class="{commodity:follow==1}" class="tab" @click="tabSwitch(1)">
					全部
				</view>
				<view :class="{commodity:follow==2}" class="tab" @click="tabSwitch(2)">
					待付款
				</view>
				<view :class="{commodity:follow==3}" class="tab" @click="tabSwitch(3)">
					拼团中
				</view>
				<view :class="{commodity:follow==4}" class="tab" @click="tabSwitch(4)">
					代发货
				</view>
				<view :class="{commodity:follow==5}" class="tab" @click="tabSwitch(5)">
					待收货
				</view>
				<view :class="{commodity:follow==6}" class="tab" @click="tabSwitch(6)">
					已完成
				</view>
				<view :class="{commodity:follow==7}" class="tab" @click="tabSwitch(7)">
					退款/售后
				</view>
			</view>
			<view v-for="item in orderList" :key="item.status">
				<view v-if="follow!=7">
					<OrderInofrmation :itemInfo="item" @toDetail="toDetail" />
				</view>
				<view v-else>
					<RefundCard :itemInfo="item" :refundDetail="refundDetail" @toRefundDetail="toRefundDetail" />
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import OrderInofrmation from './component/orderInofrmation.vue'
	import RefundCard from './component/refundCard.vue'
	export default {
		components: {
			OrderInofrmation,
			RefundCard

		},
		data() {
			return {
				orderList:[
					{
						status:1,
					},
					{
						status:2,
					},
					{
						status:3,
					},
					{
						status:4,
					},
					{
						status:5,
					},
					{
						status:6,
					},
					{
						status:7,
					},
					{
						status:8,
					},
					
				],
				follow: 1,
				refundDetail: {
					status: 1
				}
			}
		},
		computed: {
			i18n() {
				return this.$t("index")
			}
		},
		methods: {
			rightClick() {
				console.log(111)
			},
			tabSwitch(num) {
				this.follow = num
			},
			toDetail(value) {
				uni.navigateTo({
					url: `/pageC/orderFormDetail/orderFormDetail?orderId=${value.status}`
				})
			},
			toRefundDetail() {
				uni.navigateTo({
					url: "/pageC/refundDetail/refundDetail"
				})
			}
		},
		mounted() {


		}
	}
</script>

<style lang="scss" scoped>
	.inp {
		background-color: #fff;
		border-radius: 40rpx;
		width: 402rpx;
		padding: 0 20rpx;
		height: 68rpx;
	}

	.content {
		padding: 0 24rpx 50rpx;
	}

	.top-tab {
		margin-top: 180rpx;
		display: flex;
		justify-content: space-between;
		overflow-y: auto;
		// flex-shrink: 1;
		width: 100vw;

		.tab {
			margin-right: 40rpx;
			font-size: 26rpx;
			color: rgba(34, 34, 34, .8);
			flex-shrink: 0;
			height: 44rpx;
			display: flex;
			align-items: flex-end;
		}

		.commodity {
			position: relative;
			font-weight: 600;
			font-size: 32rpx;
		}

		.commodity::before {
			content: '';
			display: block;
			height: 8rpx;
			width: 100%;
			background: linear-gradient(to right, #f83224, #fff);
			position: absolute;
			bottom: 5rpx;
			opacity: 0.8;
		}
	}
</style>