front-end/mall/src/components/module/app-order-list.vue

<template>
	<div class="list-module">
		<block v-if="!$util.isEmpty(info)">
			<div class="list-left">
				<div class="image">
					<img :src="imgUrl | default_img" alt="商品图片" mode="aspectFill" style="width:80px;height:80px;" />
				</div>
				<div class="list-msg">
					<div class="title">{{ info.goodsName || info.title }}</div>
					<block v-if="(info.goodsStyle && info.goodsStyle != '0') || (info.goodsStyleName  && info.goodsStyleName != '0')">
						<div class="desc">{{ info.goodsStyle || info.goodsStyleName }}</div>
					</block>
				</div>
			</div>
			<div class="list-right">
				<div class="price">￥{{ info.price || info.unitPrice }}</div>
				<div class="num">*{{ info.buyNum || info.num }}</div>
			</div>
		</block>
	</div>
</template>

<script>
export default {
	name: 'list-module',
	props: {
		info: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {}
	},
	computed: {
		imgUrl() {
			if (this.$util.isEmpty(this.info)) return ''
			return this.info.smallCoverUrl ? this.info.smallCoverUrl : this.info.smallImgList[0]
		}
	},
	mounted() {
	},
	methods: {}
}
</script>

<style lang="scss" scoped>
	.list-module {
		@include disFlex(center, space-between);
		padding: 20px 0;
		border-bottom: 1px solid $borderColor;
		.list-left {
			@include disFlex(flex-start, space-between);
			.image {
				width: 140px;
			}
			.list-msg {
				margin-left: 28px;
				.title {
					font-size: 28px;
					color: $fontColor2;
					margin-bottom: 10px;
				}
				.desc {
					color: $fontColor3;
				}
			}
		}
		.list-right {
			text-align: right;
			color: $fontColor2;
			.price {
				margin-bottom: 70px;
				color: #333;
			}
		}
	}
</style>