cbz/components/my-order/my-order.vue

<template>
	<view>
		<block v-for="(item,index) in list" :key="index">
			<view class="my-order"  @click="toDetail(item.id)">
				<view class="top hflex acenter jbetween">
					<view class="order_no">订单编号：{{item.order_no}}</view>
					<view class="type" v-if="item.status== 1">未报价</view>
					<view class="type1" v-if="item.status == 2">已报价</view>
					<view class="type2" v-if="item.status == 3">已匹配</view>
				</view>
				<view v-if="item.items.length<3">
					<block v-for="(item2,index2) in item.items" :key="index">
						<view class="box">
							<view class="text_style1">{{item2.name}}</view>
							<view class="box_norm hflex acenter" v-if="item.tab !== 4">
								<view class="text_style2">规格：{{item2.spec}}</view>
								<view class="text_style2">采购数量：{{item2.number}}</view>
							</view>
							<view class="box_norm hflex acenter" v-else>
								<view class="text_style2">数量/吨位：{{item2.weight}}</view>
							</view>
							<view class="text" v-if="item2.standard">质量标准：{{item2.standard}}</view>
						</view>
					</block>
				</view>
				<view v-else>
					<block v-for="(item2,index2) in item.items.slice(0,2)" :key="index">
						<view class="box">
							<view class="text_style1">{{item2.name}}</view>
							<view class="box_norm hflex acenter" v-if="item.tab !== 4">
								<view class="text_style2">规格：{{item2.spec}}</view>
								<view class="text_style2">采购数量：{{item2.number}}</view>
							</view>
							<view class="box_norm hflex acenter" v-else>
								<view class="text_style2">数量/吨位：{{item2.weight}}</view>
							</view>
							<view class="text" v-if="item2.standard">质量标准：{{item2.standard}}</view>
						</view>
					</block>
				</view>
				<view class="bottom hflex acenter jbetween" v-if="item.status != 1 && item.tab !== 1">
					<view class="offer">订单报价：<span style="font-size: 32rpx;color: #222;">{{item.user_order.amount}}</span></view>
					<view class="btn" @click.stop="toOffer(item.id)">查看详情</view>
				</view>
				<view class="hflex acenter jend" v-if="item.tab == 1">
					<view class="btn2 hflex acenter jcenter" @click.stop="toDetail(item.id)">查看详情</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		name:"my-order",
		props: {
			list: {
				type: Array,
				value: []
			},
		},
		data() {
			return {
				
			}
		},
		methods: {
			// 订单详情
			toDetail(id) {
				this.$emit('toDetail', id)
			},
			toOffer(id) {
				this.$emit('toOffer', id)
			},
			toEdit(data) {
				this.$emit('toEdit', data)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-order {
		width: 100%;
		box-sizing: border-box;
		padding: 26rpx 20rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		.top {
			padding-bottom: 24rpx;
			width: 100%;
			border-bottom: 1rpx solid #f4f4f4;
			.order_no {
				font-size: 24rpx;
				color: #444;
			}
			.type {
				width: 96rpx;
				height: 40rpx;
				background-color: #fff4e8;
				border-radius: 4rpx;
				font-size: 22rpx;
				color: #fba94e;
				text-align: center;
				line-height: 40rpx;
			}
			.type1 {
				width: 96rpx;
				height: 40rpx;
				background-color: #e7ebf7;
				border-radius: 4rpx;
				font-size: 22rpx;
				color: #506dff;
				text-align: center;
				line-height: 40rpx;
			}
			.type2 {
				width: 96rpx;
				height: 40rpx;
				background-color: #E6F7E8;
				border-radius: 4rpx;
				font-size: 22rpx;
				color: #4AB256;
				text-align: center;
				line-height: 40rpx;
			}
		}
		.box {
			width: 100%;
			padding-top: 14rpx;
			border-bottom: 1rpx solid #f4f4f4;
			.text_style1 {
				font-size: 28rpx;
				color: #222;
				line-height: 40rpx;
				display: inline-block;
			}
			.urgent1 {
				width: 72rpx;
				height: 32rpx;
				background-color: #ff762C;
				border-radius: 4rpx;
				color: #fff;
				font-size: 24rpx;
				text-align: center;
				line-height: 32rpx;
				display: inline-block;
				margin-right: 8rpx;
			}
			.urgent {
				width: 72rpx;
				height: 32rpx;
				background-color: #5571ff;
				border-radius: 4rpx;
				color: #fff;
				font-size: 24rpx;
				text-align: center;
				line-height: 32rpx;
				display: inline-block;
				margin-right: 8rpx;
			}
			.box_norm {
				width: max-content;
				background-color: #f4f4f4;
				border-radius: 8rpx;
				box-sizing: border-box;
				padding: 6rpx 20rpx;
				margin: 16rpx 0 24rpx;
			}
			.box_cell {
				margin: 16rpx 0 24rpx;
			}
			.text_style2 {
				font-size: 24rpx;
				color: #888;
				padding-right: 20rpx;
			}
			.text {
				width: 100%;
				padding-bottom: 20rpx;
				font-size: 26rpx;
				color: #888;
				line-height: 36rpx;
			}
		}
		.bottom {
			width: 100%;
			box-sizing: border-box;
			padding: 14rpx 20rpx;
			background-color: #eaf4ff;
			border-radius: 16rpx;
			.offer {
				font-size: 24rpx;
				color: #506dff;
				
			}
			.btn {
				width: 152rpx;
				height: 52rpx;
				background-color: #eaf4ff;
				border-radius: 28rpx;
				border: 1rpx solid #506dff;
				font-size: 26rpx;
				color: #506dff;
				text-align: center;
				line-height: 52rpx;
			}
			
		}
		.bottom1 {
			width: 100%;
			padding-top: 20rpx;
			border-top: 1rpx solid #f4f4f4;
		}
		.btn2 {
			width: 152rpx;
			height: 60rpx;
			border-radius: 32rpx;
			border: 1rpx solid #506DFF;
			font-size: 28rpx;
			font-weight: 400;
			color: #506DFF;
			line-height: 40rpx;
			margin: 20rpx 0 0;
		}
		.btn1 {
			width: 152rpx;
			height: 52rpx;
			// background-color: #eaf4ff;
			border-radius: 28rpx;
			border: 1rpx solid #e5e5e5;
			font-size: 26rpx;
			color: #2f2f2f;
			text-align: center;
			line-height: 52rpx;
			margin-left: 24rpx;
		}
	}
</style>