ydd_front/mer_uniapp/pages/order/index.vue

<template>
	<view>
		<view class="top-1">
			<!-- 状态栏高度 -->
			<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==0? 'status-true': 'status-false'" @click="statusClick(0)">进行中</text>
						<text :class="isShow==1? 'status-true': 'status-false'" @click="statusClick(1)">历史订单</text>

					</view>
				</view>
			</view>
		
		<!-- 列表数据 -->
		<view class="nbox-1">	
			<view class="nbox-2" v-for="(item,index) in list" :key="index">
				<view class="container">
					<text class="left-text">{{item.merName}}</text>
					<view class="right-group">
						<text v-if="item.status==1||item.status==2||item.status==3" style="color: #0FBA42;font-size: 23rpx;">制作中</text>
						<text v-if="item.status==4" style="color: #FF5500;font-size: 23rpx;">待取餐</text>
				
						<image src="/static/img/ic-yx.png" class="image" />
					</view>
				</view>

				<view class="scroll-container" v-for='(ottm,indexs) in item.orderInfoList' :key="indexs">
					<view class="item">
						<img :src='ottm.image'>
						<text>{{ottm.productName}} x{{ottm.payNum}}</text>
					</view>
				</view>

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

				<view style="text-align: right; font-size: 23rpx; color: #141414;padding-right: 20rpx;">
					共{{item.orderInfoList.length}}件，实付 ¥{{ item.payPrice}}元
				</view>

				<view class="container2">
					<text v-if="item.status==1||item.status==2||item.status==3" class="left-text2">商家正在备餐中</text>
					<text v-if="item.status==4" class="left-text2">商家备餐完成</text>
					<view class="right-group" >
						<image src="/static/img/ic-iphone1.png" class="image2" />
						<text  @click="makePhoneCall(item)" 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>
	</view>
</template>

<script>
	import {
	
		getOrderList
	} from '@/api/order.js';
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	let app = getApp();
	export default {
		data() {
			return {
				statusBarHeight: app.globalData.statusBarHeight,
				navigationBarHeight: 0,
				isShow: 0,
				list:[],//订单数据
			}
		},
		//下拉刷新
		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
			this.getOrderList()//订单列表

		},
		onShow() {

		},
		methods: {
			// 拨打电话
			 makePhoneCall(item) {
			      const phoneNumber = item.merPhone; // 替换为商家的电话号码
			      uni.makePhoneCall({
			        phoneNumber: phoneNumber,
			        success() {
			          console.log('拨打电话成功');
			        },
			        fail() {
			          console.log('拨打电话失败');
			        }
			      });
			},
			// 头部切换
			statusClick(index) {
				this.isShow = index;
				this.getOrderList()	// 订单列表
			},
			// 订单列表
			getOrderList(){
				getOrderList({
					limit:9999,//条数
					page:1,//页码
					orderType:this.isShow,  //类型订单类型:0-进行中,1-完成
				}).then(res=>{
					console.log('订单列表',res)
					if(res.code==200){
						this.list=res.data.list
					}
				})
			}
		},
		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: 20rpx;
		box-sizing: border-box;
	}

	.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;
	}
	
	.nbox-1{
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
	.nbox-2{
		background: #FFF;
		padding:15rpx;
		box-sizing: border-box;
	}
	.top-1{
		background-color: #FF6702;
		position: sticky;
		top: 0;
	}
</style>