guosen-ldt-shop/pagesGoods/pages/order/comps/card.vue

<template>
	<view class="">
		<view class="page-box">
			<view @click="jumpDetail(res)" class="order" v-for="(res, index) in list" :key="res.id">
				<view class="top center">
					<view class="left ">
						<text class="">{{res.takeType}}</text>
						<text v-if="res.takeType=='店内堂食'" class="text-bold text-lg" style="margin: 0rpx 10rpx;">#{{res.seatNum || 0}}</text>
						<text v-else class="text-bold text-lg" style="margin: 0rpx 10rpx;">#{{res.verifyNum}}</text>
					</view>
					<view class="right">{{res.orderStatus}}</view>
				</view>
				<view v-if="index<=1" class="item" style="width: 100%;" v-for="(item, index) in cart(res.goodsPreview)" :key="index">
					<view style="display: flex;">
						<view class="left">
							<image :src="item.image" mode="aspectFill"></image>
						</view>
						<view class="content">
							<view class="title u-line-2">{{ item.name }}</view>
							<view class="type">{{ item.description }}</view>
						</view>
					</view>
					<view class="right flex" >
						<view class="price center">
							￥{{item.realPrice / 100}}
						</view>
						<view class="number center ">x{{ item.number }}</view>
					</view>
				</view>
				<view class="center text-gray" v-if="cart(res.goodsPreview).length>2">
					<text class="cuIcon-more" style="font-size: 36rpx;"></text>
				</view>
				
				<view class="total">
					共{{res.goodsTotalNum}}件商品 合计:
					<text class="total-price">
						￥{{ res.totalPrice / 100}}
					</text>
				</view>
				<view  class="bottom" v-if="res.orderStatus == '制作中'">
					<view @click="confirm(res.id)" class="evaluate btn">确认订单</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			list:Array
		},
		data() {
			return {
				
			};
		},
		computed:{
			cart(){
				return data=>{
					return JSON.parse(data)
				}
			}
		},
		methods:{
			confirm(id){
				this.$emit('confirm',id)
			},
			jumpDetail(res){
				uni.navigateTo({
					url:"/pagesGoods/pages/order/detail?id="+res.id,
					fail(error) {
						console.log(error);
					}
				})
				
			}
		}
	};
</script>

<style lang="scss" scoped>
	.order {
		width: 720rpx;
		background-color: #ffffff;
		margin: 15rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;

		.top {
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				.store {
					margin: 0 10rpx;
					font-size: 32rpx;
					font-weight: bold;
				}
			}

			.right {
				color: $u-type-warning-dark;
			}
		}

		.item {
			display: flex;
			justify-content: space-between;
			margin: 20rpx 0 0;

			.left {
				margin-right: 20rpx;

				image {
					width: 90rpx;
					height: 90rpx;
					border-radius: 10rpx;
				}
			}

			.content {
				.title {
					font-size: 28rpx;
					line-height: 50rpx;
				}

				.type {
					margin: 10rpx 0;
					font-size: 24rpx;
					color: $u-tips-color;
				}

				.delivery-time {
					color: #e5d001;
					font-size: 24rpx;
				}
			}

			.right {
				margin-right: 20rpx;
				margin-left: 10rpx;
				padding-top: 20rpx;
				text-align: right;

				.decimal {
					font-size: 24rpx;
					margin-top: 4rpx;
				}

				.number {
					color: $u-tips-color;
					font-size: 24rpx;
					margin-left: 15rpx;
				}
			}
		}

		.total {
			margin-top: 20rpx;
			text-align: right;
			font-size: 24rpx;

			.total-price {
				font-size: 32rpx;
			}
		}

		.bottom {
			display: flex;
			margin-top: 40rpx;
			justify-content: flex-end;
			align-items: center;

			.btn {
				line-height: 48rpx;
				width: 140rpx;
				border-radius: 26rpx;
				border: 2rpx solid $u-border-color;
				font-size: 24rpx;
				text-align: center;
				color: $u-type-info-dark;
			}

			.evaluate {
				background-color: $u-type-warning-dark;
				color: #FFFFFF;
				border-color: $u-type-warning-dark;
			}
		}
	}
</style>