aiot-app/pages/invoiceConfirm/invoiceCard.vue

<template>

	<view class="card_box" @click="handleDetail">
		<view class="item_box rx-sc">
			<view class="round" v-if='item.index'>{{item.index}}</view>
			<view class="orderId">{{item.docNo}}  </view>
		</view>
<view class="item_box rx-bc">
			<view class="item_one perce100 rx-sc">
				<view>订单编码：</view>
				<view>{{item.orderNo}}</view>
			</view>
		</view>
		<view class="item_box rx-bc">
			<view class="item_one perce100 rx-sc">
				<view>产品名称：</view>
				<view>{{item.productNames}}</view>
			</view>
		</view>
		
		<view class="item_box rx-bc">
			<view class="item_one perce100 rx-sc">
				<view class="lable">客户名称：</view>
				<view>{{item.contactName}}</view>
			</view>
		
		</view>


		<view class="item_box rx-bc">
			<view class="item_one perce50 rx-sc">
				<view class="lable">联系人：</view>
				<view>{{item.linkName}}</view>
			</view>
			<view class="item_one perce50 rx-sc">
				<view>手机号：</view>
				<view>{{item.linkPhone}}</view>
			</view>
		</view>


	

		




	</view>

</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default: () => ({})
			},
		},
		
		data() {
			return {
				statusList:{
					4:'待生产',
					5:'生产中',
					6:'已完成',
					7:'已延期',
					8:'待下达'
				}
			}
		},
		methods: {
			handleDetail() {
	
				this.$emit('handleDetail', this.item)
			}
		}

	}
</script>


<style lang="scss" scoped>
	.card_box {
		width: 750rpx;
		padding: 16rpx 32rpx;
		box-sizing: border-box;
		border-bottom: 2rpx solid #E1E1E1;


		.item_box {
			margin-top: 10rpx;

			.round {
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 50%;
				background: $theme-color;
				color: #fff;
				text-align: center;
				font-size: 20rpx;
			}

			.orderId {
				color: #000;
				font-family: PingFang HK;
				font-size: 28rpx;
				font-style: normal;
				font-weight: 600;
				margin-left: 16rpx;
			}

			.item_one {
				width: 100%;
				font-size: 26rpx;
				font-style: normal;
				font-weight: 400;
				line-height: 38rpx;
				word-wrap: break-word;
			}

			.gylx {
				color: $theme-color;
			}

			.perce50 {
				width: 50%;
			}
			.perce100 {
				width: 100%;
			}
		}
	}
</style>