front-end/ghsApp/src/admin/clear/customOrderItem.vue

<template>
	<view class="order-item-view" @click="clickItemEvent">
		<view class="item-header">
			<view class="title">
				<image class="icon" :src="info.customAvatar" alt="" />
				<text class="name">
					{{ info.customName }}
				</text>
			</view>
			<view class="status">已结账</view>
		</view>
		<view class="item-main" >
			<view class="item-info">
				<view class="info-row">
					<text class="info-label"> 日期：</text>
					<text class="info-value">{{ info.addTime }} </text>
				</view>
				<view class="info-row">
					<text class="info-label"> 单号：</text>
					<text class="info-value">{{ info.orderSn }} </text>
				</view>
				<view class="info-row">
					<text class="info-label"> 人员：</text>
					<text class="info-value">{{ info.operator }} </text>
				</view>
			</view>
			<view class="item-price"
				>¥{{ info.realPrice }} <text class="iconfont iconxiangyou"></text>
			</view>
		</view>
		
	</view>
</template>
<script>
import { PURCHASE_ORDER_STATUS } from "@/utils/declare";
export default {
	name: "orderItem",
	props: {
		info: {
			required: true
		}
	},
	data() {
		return {
			PURCHASE_ORDER_STATUS
		};
	},
	computed: {},
	methods: {
		clickItemEvent() {
			this.$emit("click", this.info);
		}
	}
};
</script>
<style lang="scss" scoped>
.order-item-view {
	padding: 30upx;
	margin-bottom: 20upx;
	width: 100%;
	background-color: #fff;
	.item-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20upx;
		.title {
			display: flex;
			align-items: center;
			flex: 1;

			.icon {
				margin-right: 20upx;
				width: 50upx;
				height: 50upx;
				border-radius: 25upx;
				border-radius: 50%;
			}
			.name {
				font-size: 32upx;
				font-weight: 600;
				color: #333333;
			}
		}
		.status {
			flex-shrink: 0;
			color: $mainColor;
		}
	}
	.item-main {
		display: flex;

		align-items: flex-end;
		.item-info {
			flex: 1;

			font-size: 26upx;
			.info-row {
				margin-top: 12upx;
				display: flex;
				align-items: center;
			}
			.info-label {
				font-weight: 400;
				color: #999999;
			}
			.info-value {
				font-weight: 400;
				color: #333333;
			}
		}
		.item-price {
			display: flex;
			align-items: center;
			flex-shrink: 0;

			font-size: 30upx;
			font-weight: 600;
			color: #333333;
			.iconfont {
				font-size: 28upx;
				color: #999999;
			}
		}
	}
}
</style>