|
|
@@ -3,31 +3,31 @@
|
|
|
<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 :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-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>
|
|
|
@@ -48,26 +48,30 @@
|
|
|
<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" >
|
|
|
+ <view class="right-group">
|
|
|
<image src="/static/img/ic-iphone1.png" class="image2" />
|
|
|
- <text @click="makePhoneCall(item)" style="color: #141414;font-size: 21rpx;">联系商家</text>
|
|
|
-
|
|
|
+ <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';
|
|
|
@@ -78,7 +82,11 @@
|
|
|
statusBarHeight: app.globalData.statusBarHeight,
|
|
|
navigationBarHeight: 0,
|
|
|
isShow: 0,
|
|
|
- list:[],//订单数据
|
|
|
+ loading: false,
|
|
|
+ noDataTip: '',
|
|
|
+ loadTitle: '',
|
|
|
+ page: 1,
|
|
|
+ list: [], //订单数据
|
|
|
}
|
|
|
},
|
|
|
//下拉刷新
|
|
|
@@ -96,7 +104,7 @@
|
|
|
this.navigationBarHeight = custom.height + (custom.top - this.statusBarHeight) * 2
|
|
|
// console.log("导航栏高度："+this.globalData.navigationBarHeight)
|
|
|
// #endif
|
|
|
- this.getOrderList()//订单列表
|
|
|
+ this.getOrderList() //订单列表
|
|
|
|
|
|
},
|
|
|
onShow() {
|
|
|
@@ -104,34 +112,49 @@
|
|
|
},
|
|
|
methods: {
|
|
|
// 拨打电话
|
|
|
- makePhoneCall(item) {
|
|
|
- const phoneNumber = item.merPhone; // 替换为商家的电话号码
|
|
|
- uni.makePhoneCall({
|
|
|
- phoneNumber: phoneNumber,
|
|
|
- success() {
|
|
|
- console.log('拨打电话成功');
|
|
|
- },
|
|
|
- fail() {
|
|
|
- console.log('拨打电话失败');
|
|
|
- }
|
|
|
- });
|
|
|
+ makePhoneCall(item) {
|
|
|
+ const phoneNumber = item.merPhone; // 替换为商家的电话号码
|
|
|
+ uni.makePhoneCall({
|
|
|
+ phoneNumber: phoneNumber,
|
|
|
+ success() {
|
|
|
+ console.log('拨打电话成功');
|
|
|
+ },
|
|
|
+ fail() {
|
|
|
+ console.log('拨打电话失败');
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
// 头部切换
|
|
|
statusClick(index) {
|
|
|
this.isShow = index;
|
|
|
- this.getOrderList() // 订单列表
|
|
|
+ this.list = []
|
|
|
+ this.page = 1
|
|
|
+ this.getOrderList() // 订单列表
|
|
|
},
|
|
|
// 订单列表
|
|
|
- getOrderList(){
|
|
|
+ getOrderList() {
|
|
|
+ this.loading = true
|
|
|
getOrderList({
|
|
|
- limit:9999,//条数
|
|
|
- page:1,//页码
|
|
|
- orderType:this.isShow, //类型订单类型:0-进行中,1-完成
|
|
|
- }).then(res=>{
|
|
|
- console.log('订单列表',res)
|
|
|
- if(res.code==200){
|
|
|
- this.list=res.data.list
|
|
|
+ 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
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
@@ -148,7 +171,11 @@
|
|
|
color: #FFFFFF;
|
|
|
background-color: #FF6702;
|
|
|
text-align: center;
|
|
|
-
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .no-data-tip {
|
|
|
+ color: #CCC;
|
|
|
}
|
|
|
|
|
|
.status-bar {
|
|
|
@@ -278,22 +305,24 @@
|
|
|
/* 控制线条高度 */
|
|
|
margin: 0 40rpx 18rpx 40rpx;
|
|
|
}
|
|
|
-
|
|
|
- .nbox-1{
|
|
|
+
|
|
|
+ .nbox-1 {
|
|
|
padding: 20rpx;
|
|
|
box-sizing: border-box;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 20rpx;
|
|
|
}
|
|
|
- .nbox-2{
|
|
|
+
|
|
|
+ .nbox-2 {
|
|
|
background: #FFF;
|
|
|
- padding:15rpx;
|
|
|
+ padding: 15rpx;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
- .top-1{
|
|
|
+
|
|
|
+ .top-1 {
|
|
|
background-color: #FF6702;
|
|
|
position: sticky;
|
|
|
top: 0;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
ZZ