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 class='loadingicon flex-center' :hidden='!loading'>
				<text class='loading iconfont icon-jiazai' style="width: auto;"></text>加载更多
			</view>
			<view class="flex-center no-data-tip" v-if="loadTitle">{{loadTitle}}</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,
				loading: false,
				noDataTip: '',
				loadTitle: '',
				page: 1,
				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.list = []
				this.page = 1
				this.getOrderList() // 订单列表
			},
			// 订单列表
			getOrderList() {
				this.loading = true
				getOrderList({
					limit: 20, //条数
					page: this.page, //页码
					orderType: this.isShow, //类型订单类型:0-进行中,1-完成
				}).then(res => {
					console.log('订单列表', res)
					if (res.code == 200) {
						const list = res.data.list
						this.list = this.$util.SplitArray(list, this.list);
						if (this.list.length == 0) {
							this.loadTitle = ''
							this.noDataTip = ' 暂无外卖商家 ';
						} else {
							this.noDataTip = ''
							this.loadTitle = list.length < 20 ? "我也是有底线的~" : '';
						}
						this.loading = false
						this.page += 1
					}
				}).catch(err => {
					this.loading = false
				})
			}
		},
		mounted() {

		},
	}
</script>

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

	}

	.no-data-tip {
		color: #CCC;
	}

	.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>