<template> <view class="page"> <!-- 订单tab --> <view class="order-tab"> <view class="tab" :class="{'action':status==-1}" @click="onOrderTab(-1)"> <text>我的仓库</text> <text class="line"></text> </view> <view class="tab" :class="{'action':status==0}" @click="onOrderTab(0)"> <text>付款确认</text> <text class="line"></text> </view> <view class="tab" :class="{'action':status==1}" @click="onOrderTab(1)"> <text>收款确认</text> <text class="line"></text> </view> <view class="tab" :class="{'action':status==3}" @click="onOrderTab(3)"> <text>投诉订单</text> <text class="line"></text> </view> <view class="tab" :class="{'action':status==4}" @click="onOrderTab(4)"> <text>发货状态</text> <text class="line"></text> </view> </view> <!-- 订单列表 --> <view class="order-list"> <view v-if="tableData.length>0"> <view class="list" v-for="(item,index) in tableData" @click="onOrderList(item)" :key="index"> <view class="title-status"> <view class="title"> <text>订单号:{{item.order_sn}}</text> </view> <view class="status"> <text>{{getstatusLabel(item.status)}}</text> </view> </view> <view class="goods-list"> <view class="cangku"> 所属仓库:{{item.warehouse.length>0?item.warehouse[0].title:'-'}} </view> <view class="goods"> <view class="thumb"> <image :src="item.order_goods[0]?item.order_goods[0].goods_image:''" mode="aspectFill"></image> </view> <view class="item"> <view class="goods-name"> <text class="two-omit">{{item.order_goods[0]?item.order_goods[0].goods_name:''}}</text> </view> <view class="goods-price"> <text class="min">¥{{item.order_goods[0]?item.order_goods[0].goods_price:''}}</text> </view> </view> </view> </view> <view class="status-btn" v-show="item.status==1"> <view class="btnGroup"> <view class="btn" @click.native.stop="confirmPay(item,3)">投诉</view> <view class="btn" @click.native.stop="confirmPay(item,2)">确认收款</view> </view> </view> <view class="status-btn" v-show="item.status==3"> <view class="btnGroup"> <view class="btn" @click.native.stop="confirmPay(item,2)">取消投诉</view> </view> </view> </view> </view> <view class="empty" v-else> <image src="../../static/image/empty.png" mode="widthFix"></image> <view class="emptyText"> 暂无数据 </view> </view> </view> </view> </template> <script> import {getSellerOrderList,orderPay} from '@/common/api.js' export default { data() { return { page:1, limit:10, status:null, tableData:[], total:0, statusList:[ {id:0,name:'待支付'}, {id:1,name:'待确认'}, {id:2,name:'待委托'}, {id:3,name:'已投诉'}, {id:4,name:'待发货'}, {id:5,name:'待收货'}, {id:-1,name:'已取消'}, {id:7,name:'已上架'}, ] }; }, onLoad(params) { this.status = params.type; this.getList() }, methods:{ getstatusLabel(val){ let arr = this.statusList.filter(item=>{ return item.id==val; }) if(arr.length>0){ return arr[0].name }else{ return '-' } }, getList(val){ let params={ page:this.page, limit:this.limit, status:this.status==-1?'':this.status } getSellerOrderList({...params,custom: { auth: true }}).then(res=>{ if(val){ this.tableData.push(...res.data.data) }else{ this.tableData = res.data.data; this.total = res.data.total } }) }, /** * 订单tab点击 */ onOrderTab(type){ if(type==4){ this.status="4,5" }else{ this.status = type; } this.getList() }, /** * 订单列表点击 */ onOrderList(){ uni.navigateTo({ url: '/pages/OrderDetails/OrderDetails?id='+item.id, }) }, confirmPay(item,status){ let params={ status:status, id:item.id } orderPay(params).then(res=>{ this.getList() }) }, }, onReachBottom() { if(this.tableData.length<this.total){ this.page++; this.getList('over') } }, } </script> <style scoped lang="scss"> .page{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #f6f6f6; } /* 订单tab */ .order-tab{ position: fixed; left: 0; top: 88rpx; /* #ifdef APP-PLUS */ top: calc(50rpx + var(--status-bar-height)); /* #endif */ z-index: 10; display: flex; align-items: center; width: 100%; height: 90rpx; background: rgb(35, 96, 48); .tab{ position: relative; display: flex; align-items: center; justify-content: center; width: 20%; height: 80%; text{ font-size: 26rpx; color: #4D9A5E; } } .action{ text{ color: #fff; font-weight: bold; } .line{ position: absolute; left: 50%; bottom: 0; width: 60rpx; height: 6rpx; background: #fff; border-radius:3px; transform: translate(-50%,0); } } } /* 订单列表 */ .order-list{ margin:0 24rpx; margin-top:110rpx; /* #ifdef APP-PLUS */ margin-top: calc(170rpx + var(--status-bar-height)); /* #endif */ .list{ padding: 0 4%; min-height: 390rpx; background-color: #FFFFFF; border-radius: 20rpx; margin-bottom: 20rpx; .title-status{ display: flex; align-items: center; justify-content: space-between; width: 100%; height: 80rpx; border-bottom: 1px solid #eaeaee; .title{ display: flex; align-items: center; text{ font-size: 26rpx; color: gray; } } .status{ display: flex; align-items: center; text{ font-size: 26rpx; color: $base; } } } .goods-list{ width: 100%; .cangku{ text-align: left; color:gray; padding:10rpx 0 0 0; } .goods{ display: flex; align-items: center; width: 100%; height: 180rpx; .thumb{ display: flex; align-items: center; width: 30%; height: 100%; image{ width: 160rpx; height: 160rpx; border-radius: 10rpx; } } .item{ display: flex; flex-direction: column; justify-content: space-around; margin-left:20rpx; width: 100%; height: 100%; .goods-name{ text{ font-size: 26rpx; color: #555555; } } .goods-price{ display: flex; align-items: center; text{ color: $base; } .min{ font-size: 26rpx; } .max{ font-size: 34rpx; } } } } } } } .status-btn{ display: flex; align-items: center; justify-content: space-between; width: 100%; .btnGroup{ display: flex; align-items: center; justify-content: flex-end; width:100%; } .btn{ background-color: $base; padding: 10rpx 10rpx; border-radius: 10rpx; font-size: 24rpx; color: #ffffff; text-align: center; margin-left:10rpx; } } .empty{ text-align: center; margin-top:30%; image{ width:40%; height:auto; } .emptyText{ text-align: center; font-size: 26rpx; color:gray; } } </style>