uniapp/pagesHome/order/info.vue

<template>
	<view class="content">
		<view class="info">
			<view class="one">
				下单成功 | {{shopInfo.type=='1'?'打包带走':'店内就餐'}}
			</view>
			<view class="two">
				<view class="two_1">
					<view class="left">桌号：{{shopInfo.table_name}}</view>
					<view class="right">人数：{{shopInfo.num}}人</view>
				</view>
				<view class="two_2">
					<view class="two_2_1">消费明细</view>
					<view class="two_2_2">
						<scroll-view scroll-y="true" class="scroll-view">
							<view class="list-scroll-view">
								<view class="list" v-for="(item,index) in list" :key="index">
									<view class="img">
										<image class="image" :src="item.file&&item.file.length>0?item.file[0].url:''"
											mode="">
										</image>
									</view>
									<view class="infoList">
										<view class="name textOver">
											<text>{{item.name}}</text>
										</view>
										<view class="spec" v-if="item.spec">
											<text>{{item.spec}}</text>
										</view>
									</view>
									<view class="money">
										<text>¥{{item.price}}</text>
										<text>×{{item.num}}</text>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="two_2_3">
						<view class="two_2_3_1">
							<view class="left">
								餐位费
								<text>×{{shopInfo.num}}</text>
							</view>
							<view class="right">￥{{shopInfo.money_num}}</view>
						</view>
						<view class="two_2_3_2">
							共{{list.length}}件商品，合计：<text>￥</text><text>{{shopInfo.money}}</text>
						</view>
					</view>
				</view>
				<view class="two_3">
					<view class="two_3_1">
						<view class="left">下单时间</view>
						<view class="right">{{shopInfo.time}}</view>
					</view>
					<view class="two_3_1">
						<view class="left">备注</view>
						<view class="right">{{shopInfo.remark}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="foot">
			<view class="foot_1">
				<button class="button" @tap.stop="toAdd">加菜</button>
			</view>
			<view class="foot_2">
				<button class="button" @tap.stop="toBuy">结账</button>
			</view>
		</view>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog title="提示" content="请您前往前台付款!" :duration="2000" @close="close" @confirm="close">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				shopInfo: {},
				list: [],
			}
		},
		onLoad: async function(e) {
			const that = this;
			that.$set(that, `id`, e.id);
			that.search();
		},
		onShow() {
			const that = this;
		},
		methods: {
			async search(e) {
				const that = this;
				if (that.id) {
					let res = await that.$api(`order/${that.id}`, 'GET', {});
					if (res.errcode == '0') {
						that.$set(that, `list`, res.data.list)
						that.$set(that, `shopInfo`, res.data)
						let table = await that.$api(`table/${res.data.table}`, `GET`)
						that.$set(that.shopInfo, `table_name`, table.data.name)
					}
				}
			},
			// 加菜
			toAdd() {
				const that = this;
				uni.navigateTo({
					url: `/pagesHome/home/index?id=${that.shopInfo.cart}&order=${that.id}`
				})
			},
			// 结账
			toBuy() {
				const that = this;
				that.$refs.popup.open()
			},
			close() {
				const that = this;
				that.$refs.popup.close()
			},
		}
	}
</script>

<style lang="scss">
	.content {
		font-family: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;

		.info {
			display: flex;
			flex-direction: column;
			position: relative;
			flex-grow: 1;
			background-color: #f1f1f1;

			.one {
				height: 10vh;
				background-color: #FF7800;
				color: #ffffff;
				padding: 4vw 2vw;
				font-size: 18px;
			}

			.two {
				width: 92vw;
				padding: 0 4vw;
				position: absolute;
				top: 16vw;

				.two_1 {
					display: flex;
					justify-content: space-between;
					align-items: center;
					background-color: #ffffff;
					border-radius: 3vw;
					padding: 4vw 2vw;

					.left {
						font-size: 16px;
						font-weight: 600;
					}

					.right {
						font-size: 14px;
					}
				}

				.two_2 {
					margin: 2vw 0;
					padding: 2vw;
					background-color: #ffffff;
					border-radius: 4vw;

					.two_2_1 {
						padding: 2vw 0;
						font-size: 16px;
						font-weight: 600;
					}

					.two_2_2 {
						position: relative;
						display: flex;
						flex-direction: column;
						height: 32vh;

						.list {
							display: flex;
							width: 84vw;
							margin: 0 0 2vw 0;
							padding: 2vw;
							box-shadow: 0 0 5px #f1f1f1;
							border-radius: 5px;

							.img {
								width: 25vw;

								.image {
									width: 25vw;
									height: 20vw;
									border-radius: 5px;
								}
							}

							.infoList {
								width: 35vw;
								padding: 0 0 0 2vw;

								.name {
									font-size: 16px;
								}

								.spec {
									font-size: 12px;
									color: #858585;
								}
							}

							.money {
								display: flex;
								flex-direction: column;
								align-items: flex-end;
								width: 20vw;
								font-size: 14px;

								text:first-child {
									color: #FF8C00;
								}
							}
						}
					}

					.two_2_3 {

						.two_2_3_1 {
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-size: 14px;
							padding: 2vw 3vw;

							.left {
								text {
									color: #858585;
									font-size: 12px;
									margin: 0 2vw;
								}
							}

							.right {
								color: #FF7800;
							}
						}

						.two_2_3_2 {
							padding: 3vw;
							text-align: right;
							font-size: 14px;
							color: #858585;
							border-top: 1px solid #f1f1f1;

							text:first-child {
								color: #FF7800;
							}

							text:last-child {
								color: #FF7800;
								font-size: 18px;
							}
						}
					}
				}

				.two_3 {
					margin: 2vw 0;
					padding: 2vw;
					background-color: #ffffff;
					border-radius: 4vw;

					.two_3_1 {
						display: flex;
						justify-content: space-between;
						padding: 2vw;
						font-size: 14px;
						border-bottom: 1px solid #f1f1f1;
					}
				}
			}
		}

		.foot {
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 2vw 3vw;
			background-color: #ffffff;
			border-top: 1px solid #f1f1f1;

			.foot_1 {
				.button {
					background-color: #ffffff;
					color: #FF8C00;
					border: 1px solid #FF8C00;
					border-radius: 5vw;
					padding: 0 15vw;
					font-size: 16px;
				}
			}

			.foot_2 {
				.button {
					background-color: #FF8C00;
					color: #ffffff;
					border-radius: 5vw;
					padding: 0 15vw;
					font-size: 16px;
				}
			}
		}
	}

	.scroll-view {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		.list-scroll-view {
			display: flex;
			flex-direction: column;
		}
	}
</style>