guosen-ldt-shop/pages/order/detail.vue

<template>
	<view class="page safe-area-inset-bottom">

		<view class="card section" style="flex-direction: column;">
			<view class="center text-bold margin-50" style="font-size: 66rpx;">
				<text>{{order.verifyNum}}</text>
			</view>
			<view class="cu-steps steps-arrow margin-bottom-50">
				<view class="cu-item" :class="index>stepIndex?'text-default':'text-base'" v-for="(item,index) in stepList" :key="index">
					<text style="font-size: 70rpx;margin-bottom: 20rpx;margin-right: 10rpx;" :class="'cuIcon-' + item.icon"></text>
					<text >{{item.name}}</text>
				</view>
			</view>
			<view class="center padding-30" style="color: #999;">
				<text>备注：{{order.extraInfo}}</text>
			</view>
		</view>
		<view class="section"></view>
		
		<view class="padding-10 bg-white">
			<u-read-more ref="uReadMore" close-text="展开更多" show-height="300" color="#999">
				<view v-for="(item,index) in cart" :key="index" class="cart">
					<view class="flex" style="width: 70%;">
						<image :src="item.image" mode=""></image>
						<view class="item-content " >
							<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-lg">{{item.realPrice / 100}}</text>
					</view>
				</view>
			</u-read-more>
		</view>
		
		<!-- 订单金额 -->
		<view class="">
			<view class="card text-df" v-if="$isNotEmpty(order.packingPrice)&&order.packingPrice != -1">
				<text class="text-gray">包装费</text>
				<text class="text-price">{{order.packingPrice / 100}}</text>
			</view>
			<view class="card text-df" v-if="$isNotEmpty(order.sendingPrice)&&order.sendingPrice != -1">
				<text class="text-gray">配送费</text>
				<text class="text-price">{{order.sendingPrice / 100}}</text>
			</view>
			<view class="card text-df ">
				<text class="text-gray">金额总计</text>
				<view class="">
					<text class="text-price">{{order.totalPrice / 100}}</text>
				</view>
			</view>
		</view>
		
		<view class="section"></view>
		
		<view class="">
			<view class="card text-df" >
				<text class="text-gray">取单号</text>
				<text class="">{{order.verifyNum}}</text>
			</view>
			<view class="card text-df" v-if="$isNotEmpty(order.seatNum) && order.seatNum !=-1">
				<text class="text-gray">座位号</text>
				<text class="">{{order.seatNum}}</text>
			</view>
			<view class="card text-df" >
				<text class="text-gray">下单时间</text>
				<text class="">{{order.createTime}}</text>
			</view>
			<view class="card text-df" >
				<text class="text-gray">下单门店</text>
				<text class="">{{shop.name}}</text>
			</view>
			<view class="card text-df" >
				<text class="text-gray">付款状态</text>
				<text class="">{{order.payStatus}}</text>
			</view>
			<view class="card text-df" >
				<text class="text-gray">订单状态</text>
				<text class="">{{order.orderStatus}}</text>
			</view>
			<view class="card text-df" >
				<text class="text-gray">订单号</text>
				<text class="">{{order.id}}</text>
			</view>
		</view>
		
		<view class="">
			<view class="card text-df" >
				<text class="text-gray">下单手机号</text>
				<text class="">{{order.userPhone}}</text>
			</view>
			<view class="card text-df" >
				<text class="text-gray">取餐方式</text>
				<text class="">{{order.takeType}}</text>
			</view>
			<view class="card text-df">
				<text class="text-gray">取餐时间</text>
				<text class="">{{order.takeTime || '立即就餐'}}</text>
			</view>
		
		</view>
		
		
		
	</view>
</template>

<script>
export default {
	name: '',
	data() {
		return {
			id:'',
			order:{},
			shop:{},
			cart:[],
			//订单流程
			stepList:[{
				name:'待付款',
				icon:'rechargefill'
			},
			{
				name:'已付款',
				icon:'roundcheckfill'
			},
			{
				name:'制作中',
				icon:'timefill'
			},
			{
				name:'已完成',
				icon:'goodsfill'
			}],
		};
	},
	onLoad(options) {
		this.id=options.id
		this.fetchDetail()
	},
	computed:{
		stepIndex:{
			get(){
				if (this.order.orderStatus == '待付款') {
					return 0
				}else{
					return 2
				}
			}
		}
	},
	methods:{
		fetchDetail(){
			let params={
				id:this.id
			}
			this.$api.goodsbills.detail(params).then(res=>{
				this.order=res.data || {}
				this.shop=this.order.shop || {}
				this.cart=JSON.parse(this.order.goodsPreview)
			})
		}
	}
};
</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;
		padding: 15rpx 0;
	
		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 8rpx;
		}
	
		.item-content {
			width: calc(100% - 100rpx);
			margin-left: -40rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
	
			text:first-child {
				font-size: 30rpx;
			}
	
			text:last-child {
				font-size: 24rpx;
				color: #999;
				font-weight: 400;
			}
		}
	
		.item-data {
			display: flex;
			align-items: center;
			width: 30%;
			justify-content: space-between;
			margin-right: 20rpx;
	
		}
	}
	
	.cart:last-child {
		border: none;
	}
</style>