ydd_front/mer_uniapp/pages/order/index.vue

<template>
	<view>
		<!-- 状态栏高度 -->
		<view :style="{ height: `${statusBarHeight}px` }"></view>

		<!-- 导航栏 -->
		<view :style="{ height: `${navigationBarHeight}px`,lineHeight: `${navigationBarHeight}px`}" class="order-nav">订单
		</view>

		<!-- 进行中/历史订单 -->
		<view class="status-bar">
			<view>
				<text :class="isShow? 'status-true': 'status-false'" @click="statusClick">进行中</text>
				<text :class="!isShow? 'status-true': 'status-false'" @click="statusClick">历史订单</text>

			</view>
		</view>

		<view style="background-color: white;border-radius: 23rpx;margin: 10rpx 20rpx;padding-bottom: 40rpx;">

			<view class="container">
				<text class="left-text">韩式铁板蛋炒饭</text>
				<view class="right-group">
					<text style="color: #0FBA42;font-size: 23rpx;">制作中</text>
					<!-- <text style="color: #FF5500;font-size: 23rpx;">待取餐</text>
					<text style="color: #999999;font-size: 23rpx;">已完成</text>
					<text style="color: #999999;font-size: 23rpx;">已取消</text> -->
					<image src="/static/img/ic-yx.png" class="image" />
				</view>
			</view>

			<view class="scroll-container">
				<view class="item">
					<img src="/static/img/img8.png">
					<text>蛋炒饭x1</text>
				</view>
			</view>

			<view class="dashed-line"></view>

			<view style="text-align: right; font-size: 23rpx; color: #141414;padding-right: 20rpx;">
				共2件，实付 ¥16.00元
			</view>

			<view class="container2">
				<text class="left-text2">商家正在备餐中</text>
				<view class="right-group">
					<image src="/static/img/ic-iphone1.png" class="image2" />
					<text style="color: #141414;font-size: 21rpx;">联系商家</text>
					
					<view style="display: inline-block; width: 2rpx; height: 42rpx;border: 2rpx solid #D5D6DC;"></view>
					
					<image src="/static/img/ic-message1.png" class="image2" />
					<text style="color: #141414;font-size: 21rpx;">留言</text>
				</view>
			</view>




		</view>

	</view>
</template>

<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	let app = getApp();
	export default {
		data() {
			return {
				statusBarHeight: app.globalData.statusBarHeight,
				navigationBarHeight: 0,
				isShow: true,
			}
		},
		//下拉刷新
		onPullDownRefresh() {

		},
		onLoad(options) {
			let that = this;
			//首页数据加载
			// this.getIndexConfig();
			// #ifdef MP-WEIXIN
			// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
			const custom = wx.getMenuButtonBoundingClientRect()
			// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
			this.navigationBarHeight = custom.height + (custom.top - this.statusBarHeight) * 2
			// console.log("导航栏高度："+this.globalData.navigationBarHeight)
			// #endif

		},
		onShow() {

		},
		methods: {
			statusClick() {
				this.isShow = !this.isShow;
			},
		},
		mounted() {

		},
	}
</script>

<style scoped>
	.order-nav {
		font-weight: 500;
		font-size: 35rpx;
		color: #FFFFFF;
		background-color: #FF6702;
		text-align: center;
	}

	.status-bar {
		background-color: #FF6702;
		text-align: center;
		padding: 20px 0 16rpx 0;
	}

	.status-bar view {
		display: inline-block;
		width: 385rpx;
		background: #EB5E00;
		border-radius: 37rpx;
	}

	.status-true {
		display: inline-block;
		width: 192rpx;
		padding: 10rpx 0;
		background-color: white;
		color: #FF6600;
		border-radius: 37rpx;
	}

	.status-false {
		display: inline-block;
		width: 192rpx;
		padding: 10rpx 0;
		color: #FFCBA9;
		border-radius: 37rpx;
	}

	.container {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.left-text {
		font-weight: 600;
		font-size: 27rpx;
		color: #141414;
		margin-left: 40rpx;
	}

	.right-group {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.image {
		width: 42rpx;
		height: 70rpx;
		margin-right: 20rpx;
	}

	.container2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #F8F9FB;
		margin: 20rpx 20rpx 0 20rpx;
		padding: 20rpx 40rpx 20rpx 20rpx;
	}

	.left-text2 {
		font-weight: 600;
		color: #141414;
		font-size: 23rpx;
		margin-left: 0;
	}

	.image2 {
		width: 42rpx;
		height: 42rpx;
	}

	.scroll-container {
		display: flex;
		overflow-x: auto;
		/* 允许水平滚动 */
		white-space: nowrap;
		/* 防止项目换行 */
		padding: 8rpx 20rpx 20rpx 40rpx;
		/* 添加一些内边距 */
		-webkit-overflow-scrolling: touch;
		/* 在iOS上平滑滚动 */
	}

	.item {
		display: inline-flex;
		/* 或者使用 flex 但需要调整 */
		flex-direction: column;
		align-items: center;
		margin-right: 20rpx;
		/* 项目之间的间距 */
		flex: 0 0 auto;
		/* 防止项目伸缩 */
	}

	.item img {
		width: 115rpx;
		height: 115rpx;
		border-radius: 12rpx;
		/* 可选：圆形图片 */
		object-fit: cover;
		/* 保持图片比例 */
	}

	.item text {
		margin-top: 10rpx;
		/* 图片和文字之间的间距 */
		font-size: 21rpx;
		color: #141414;
		text-align: center;
		white-space: nowrap;
		/* 防止文字换行 */
	}

	.dashed-line {
		border-bottom: 2rpx dashed #D6D7DC;
		width: 90%;
		/* 确保宽度足够 */
		height: 2rpx;
		/* 控制线条高度 */
		margin: 0 40rpx 18rpx 40rpx;
	}
</style>