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