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

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

<script>
	export default {
		name:"my-order",
		props: {
			order_no: {
				type: String,
				value: '' 
			},
			type: {
				type: String,
				value: ''
			},
			good: {
				type: Array,
				value: []
			},
			offer: {
				type: String,
				value: ''
			},
			order_type: {
				type: String,
				value: ''
			},
			is_urgent: {
				type: String,
				value: ''
			},
			name: {
				type: String,
				value: ''
			},
			repair_date: {
				type: String,
				value: ''
			},
			address: {
				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)
			}
		}
	}
</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>