guosen-ldt-client/pagesD/pages/take-order/take-order.vue

<template>
	<view class="page">
		<view class="card u-border-bottom">
			<text>{{vuex_orderInfo.store.shopName}}</text>
			<view class="">
				<view class="cuIcon cu-btn sm btn-icon">
					<u-icon name="phone-fill" color="#FF9447"></u-icon>
				</view>
				<view class="cuIcon cu-btn sm btn-icon margin-left-30">
					<u-icon name="map-fill" color="#FF9447"></u-icon>
				</view>
			</view>
		</view>
		<view class="card" style="flex-direction: column;">
			<view class="center text-bold margin-50" style="font-size: 66rpx;">
				<text>2874</text>
			</view>
			<view class="cu-steps steps-arrow ">
				<view class="cu-item" :class="index>0?'text-default':'text-base'" v-for="(item,index) in stepList" :key="index">
					<text style="font-size: 80rpx;margin-bottom: 20rpx;margin-right: 10rpx;" :class="'cuIcon-' + item.icon"></text>
					<text >{{item.name}}</text>
				</view>
			</view>
			<view class="center text-gray margin-50">
				<text>您前面还有4单待制作</text>
			</view>
			<u-read-more ref="uReadMore" close-text="展开更多" show-height="500" color="#999">
				<view v-for="(item,index) in vuex_orderInfo.cart" :key="index" class="cart">
					<view class="flex" style="width: 70%;">
						<image :src="item.image" mode=""></image>
						<view class="item-content " style="justify-content: flex-start;text-align: left;">
							<text class="text-cut-1">{{item.name}}</text>
							<text class="text-cut-1">{{item.propertyStr ? item.propertyStr : item.name}}</text>
						</view>
					</view>
					<view class="item-data">
						<view class="">
							<text class="text-sm">x</text>
							<text class="text-lg" style="margin-left: 6rpx;">{{item.number}}</text>
						</view>
						<text class="text-price text-lg">{{item.realPrice / 100}}</text>
					</view>
				</view>
			</u-read-more>
		</view>
		
		
		
	</view>
</template>

<script>
export default {
	name: '',
	data() {
		return {
			stepList:[{
				name:'待付款',
				icon:'recharge'
			},
			{
				name:'制作中',
				icon:'time'
			},
			{
				name:'已完成',
				icon:'roundcheck'
			}]
		};
	}
};
</script>

<style lang="scss" scoped>
	.page{
		margin: 20rpx;
	}
	
	.text-default{
		color: #ffbf91;
	}
	
	.btn-icon{
		background-color: rgba(255, 148, 71,.3);
		color: #FF9447;
	}
	
	
	.card {
		padding: 30rpx;
		background-color: #FFFFFF;
		border-bottom: 1rpx solid #f1f1f1;
		display: flex;
		justify-content: space-between;
	}
	
	.cart {
		border-bottom: 1rpx solid #f1f1f1;
		display: flex;
		background-color: #FFFFFF;
	
		image {
			width: 120rpx;
			height: 120rpx;
		}
	
		.item-content {
			background-color: #007AFF;
			width: calc(100% - 120rpx);
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			justify-content: flex-start;
			align-items: flex-start;
	
			text:first-child {
				font-size: 32rpx;
				padding-top: 10rpx;
			}
	
			text:last-child {
				font-size: 26rpx;
				color: #999;
				font-weight: 400;
				padding-bottom: 10rpx;
			}
		}
	
		.item-data {
			display: flex;
			align-items: center;
			width: 30%;
			justify-content: space-between;
			margin-right: 20rpx;
	
		}
	}
	
	.cart:last-child {
		border: none;
	}
</style>