wx-qhb/pageD/orderFormManage/orderFormManage.vue

<template>
	<view class="page">
		<view class="tab-1" slot="center">
			<u--input style="background-color: #f4f4f4;" placeholder="搜索订单号/手机号/商品/姓名" shape="circle"
				prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
			<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>
		</view>
		<view class="center">
			<view v-for="item in orderList" :key="item.status">
				<DetailCard  :itemInfo="item" />
			</view>

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

<script>
	import DetailCard from './component/detailCard.vue'
	export default {
		components: {
			DetailCard
		},
		data() {
			return {
				follow: 1,
				orderList: [{
						name: 'Trinity 自由比格',
						status: 0,
						headerImg: "https://ts3.cn.mm.bing.net/th?id=OIP-C.uMf5AX3a6yYpIhpEkyDxiQAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2",
						orderImg: "https://img12.360buyimg.com/jdcms/s460x460_jfs/t1/226637/16/19995/180517/66696f86Fa90c7d49/3bc094e1eb7aeb12.jpg.avif",
						orderDetail: 'OATLY噢麦力 咖啡大师…',
						orderPrice: '29.90',
						specifications: "咖啡大师燕麦奶250ml*6瓶",
						num: 1,
						payPrice: '141.00',
						remark: '买家急用，仓库尽早发货'
					},
					{
						name: 'Trinity 自由比格',
						status: 1,
						headerImg: "https://ts3.cn.mm.bing.net/th?id=OIP-C.uMf5AX3a6yYpIhpEkyDxiQAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2",
						orderImg: "https://img12.360buyimg.com/jdcms/s460x460_jfs/t1/226637/16/19995/180517/66696f86Fa90c7d49/3bc094e1eb7aeb12.jpg.avif",
						orderDetail: 'OATLY噢麦力 咖啡大师…',
						orderPrice: '29.90',
						specifications: "咖啡大师燕麦奶250ml*6瓶",
						num: 1,
						payPrice: '141.00',
						remark: '买家急用，仓库尽早发货'
					},
					{
						name: 'Trinity 自由比格',
						status: 2,
						headerImg: "https://ts3.cn.mm.bing.net/th?id=OIP-C.uMf5AX3a6yYpIhpEkyDxiQAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2",
						orderImg: "https://img12.360buyimg.com/jdcms/s460x460_jfs/t1/226637/16/19995/180517/66696f86Fa90c7d49/3bc094e1eb7aeb12.jpg.avif",
						orderDetail: 'OATLY噢麦力 咖啡大师…',
						orderPrice: '29.90',
						specifications: "咖啡大师燕麦奶250ml*6瓶",
						num: 1,
						payPrice: '141.00',
						remark: '买家急用，仓库尽早发货'
					},
					{
						name: 'Trinity 自由比格',
						status: 3,
						headerImg: "https://ts3.cn.mm.bing.net/th?id=OIP-C.uMf5AX3a6yYpIhpEkyDxiQAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2",
						orderImg: "https://img12.360buyimg.com/jdcms/s460x460_jfs/t1/226637/16/19995/180517/66696f86Fa90c7d49/3bc094e1eb7aeb12.jpg.avif",
						orderDetail: 'OATLY噢麦力 咖啡大师…',
						orderPrice: '29.90',
						specifications: "咖啡大师燕麦奶250ml*6瓶",
						num: 1,
						payPrice: '141.00',
						remark: '买家急用，仓库尽早发货'
					},
					{
						name: 'Trinity 自由比格',
						status: 4,
						headerImg: "https://ts3.cn.mm.bing.net/th?id=OIP-C.uMf5AX3a6yYpIhpEkyDxiQAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2",
						orderImg: "https://img12.360buyimg.com/jdcms/s460x460_jfs/t1/226637/16/19995/180517/66696f86Fa90c7d49/3bc094e1eb7aeb12.jpg.avif",
						orderDetail: 'OATLY噢麦力 咖啡大师…',
						orderPrice: '29.90',
						specifications: "咖啡大师燕麦奶250ml*6瓶",
						num: 1,
						payPrice: '141.00',
						remark: '买家急用，仓库尽早发货'
					},
				]
			}
		},
		methods: {
			tabSwitch(num) {
				this.follow = num
			},
		},
		computed: {
			i18n() {
				return this.$t("index")
			}
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: "订单管理"
			})
		}
	}
</script>

<style scoped lang="scss">
	.page {
		.tab-1 {
			padding: 0 24rpx;
			background-color: #fff;

			::v-deep .u-input {
				background-color: #f4f4f4;
			}

			.top-tab {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				overflow-y: auto;
				padding-bottom: 10rpx;
				// 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;
				}
			}
		}

		.center {
			padding: 20rpx 24rpx;
		}
	}
</style>