You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
361 lines
7.1 KiB
361 lines
7.1 KiB
<template>
|
|
<view class="page">
|
|
<!-- 订单tab -->
|
|
<view class="order-tab">
|
|
<view v-for="(item,index) in tabList" :key="index" class="tab" :class="{'action':item.status.join(',') === status.join(',')}" @click="onOrderTab(item.status)">
|
|
<text>{{item.name}}</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:[-2],
|
|
tableData:[],
|
|
total:0,
|
|
tool:'',
|
|
statusList:[
|
|
{id:0,name:'待付款'},
|
|
{id:1,name:'已付款'},
|
|
{id:2,name:'待转售'},
|
|
{id:3,name:'委卖中'},
|
|
{id:4,name:'提货中'},
|
|
{id:5,name:'已提货'},
|
|
{id:-1,name:'已取消'},
|
|
{id:6,name:'已完成'},
|
|
],
|
|
tabList:[
|
|
{name:'全部',status:[-2]},
|
|
{name:'待付款',status:[10]},
|
|
{name:'上架中',status:[11]},
|
|
{name:'已结束',status:[6]},
|
|
]
|
|
};
|
|
},
|
|
onLoad(params) {
|
|
let arr = params.type.split(',');
|
|
if(arr.length > 0){
|
|
arr.forEach((item,index) => {
|
|
arr[index] = Number(item)
|
|
});
|
|
}else{
|
|
arr = [-2]
|
|
}
|
|
console.log(arr, 'arr')
|
|
this.status = arr;
|
|
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==-2?'':this.status.join(',')
|
|
}
|
|
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(item){
|
|
// uni.navigateTo({
|
|
// url: '/pages/OrderDetails/OrderDetails?id='+item.id+'&tool=sell',
|
|
// })
|
|
},
|
|
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%;
|
|
// overflow-x: auto;
|
|
height: 90rpx;
|
|
background: rgb(35, 96, 48);
|
|
.tab{
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 20px;
|
|
width: 25%;
|
|
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>
|
|
|