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

<template>
	<view>
		<block v-for="(item,index) in list" :key="index">
			<view class="my-order">
				<view class="top hflex acenter jbetween" @click="toDetail(item.order_no)">
					<view class="order_no">订单号：{{item.order_no}}</view>
					<view class="type" v-if="item.type == 0">未报价</view>
					<view class="type1" v-if="item.type == 1">已报价</view>
					<view class="type1" v-if="item.type == 2">已匹配</view>
				</view>
				<block v-if="order_type !== '5'">
					<block v-for="(item2,index2) in item.goods" :key="index">
						<view class="box"  @click="toDetail(item2.order_no)">
							<view class="text_style1">{{item2.name}}</view>
							<view class="box_norm hflex acenter" >
								<view class="text_style2">规格：{{item2.norm}}kg/桶</view>
								<view class="text_style2">采购数量：{{item2.num}}吨</view>
							</view>
							<view class="text" v-if="item2.text">{{item2.text}}</view>
						</view>
					</block>
					<view class="bottom hflex acenter jbetween">
						<view class="offer">订单报价：<span style="font-size: 32rpx;color: #222;">{{item.offer}}</span></view>
						<view class="btn" @click="toOffer(item.order_no)">查看详情</view>
					</view>
				</block>
				<block v-else>
					<view class="box">
						<view class="hflex fwrap" >
							<view class="urgent1" v-if="item.is_urgent == '1'">快修</view>
							<view class="urgent" v-else>普修</view>
							<view class="text_style1">{{item.name}}</view>
						</view>
						<view class="box_cell text_style2">维修时间：{{item.repair_date}}</view>
						<view class="box_cell text_style2">维修地点：{{item.address}}</view>
					</view>
					<view class="bottom1 hflex jend">
						<view class="btn1" v-if="active1 == '1' && item.type !== '2'" @click="toEdit(item.order_no)">编辑</view>
						<view class="btn1" @click="toDetail(item.order_no)">查看详情</view>
					</view>
				</block>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		name:"my-order",
		props: {
			list: {
				type: Array,
				value: []
			},
			order_type: {
				type: String,
				value: ''
			},
			active1: {
				type: String,
				value: ''
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			// 订单详情
			toDetail(order_no) {
				this.$emit('toDetail', order_no)
			},
			toOffer(order_no) {
				this.$emit('toOffer', order_no)
			},
			toEdit(order_no) {
				this.$emit('toEdit', order_no)
			}
		}
	}
</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%;
			.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;
			}
		}
		.box {
			width: 100%;
			padding-top: 14rpx;
			border-top: 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;
			}
			.urgent {
				width: 72rpx;
				height: 32rpx;
				background-color: #5571ff;
				border-radius: 4rpx;
				color: #fff;
				font-size: 24rpx;
				text-align: center;
				line-height: 32rpx;
			}
			.box_norm {
				width: auto;
				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;
		}
		.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>