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.
368 lines
7.7 KiB
368 lines
7.7 KiB
<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>{{item.status==0?'待支付':item.status==1?'待确认':item.status==2?'待委托':item.status==3?'已投诉':item.status==4?'待发货':item.status==5?'待收货':item.status==-1?'已取消':''}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="goods-list">
|
|
<view class="cangku">
|
|
所属仓库：{{item.warehouse?item.warehouse.title:'-'}}
|
|
</view>
|
|
<view class="goods">
|
|
<view class="thumb">
|
|
<image :src="item.order_goods[0]?item.order_goods[0].goods_image:''" mode=""></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-if="item.status==0">
|
|
<view class="btn" style="margin:0;" @click.native.stop="cancelOrderHandle(item)">取消订单</view>
|
|
<view class="btnGroup">
|
|
<view class="btn">上传凭证</view>
|
|
<view class="btn" @click.native.stop="goPay(item)">去支付</view>
|
|
<view class="btn" @click.native.stop="confirmPay(item)">支付确认</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="status-btn" v-if="item.status==2">
|
|
<view class="btn" style="margin:0;">提取货物</view>
|
|
<view class="btnGroup">
|
|
<view class="btn">委托上架</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
<view class="status-btn" v-if="item.status==1">
|
|
|
|
<view class="btnGroup">
|
|
<view class="btn" style="margin:0;">上传凭证</view>
|
|
<view class="btn">去支付</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>
|
|
<u-modal :show="show" :content='content' :title="'提示'"
|
|
:showCancelButton="true" @confirm="confirmHandle" @cancel="cancelHandle"
|
|
|
|
></u-modal>
|
|
<u-toast ref="uToast"></u-toast>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {getBuyerOrderList,cancelOrder,orderPay} from '@/common/api.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
page:1,
|
|
limit:10,
|
|
status:null,
|
|
tableData:[],
|
|
total:0,
|
|
content:'确定取消订单',
|
|
show:false,
|
|
orderObj:{},
|
|
};
|
|
},
|
|
onLoad(params) {
|
|
this.status = params.type;
|
|
this.getList()
|
|
},
|
|
methods:{
|
|
goPay(item){
|
|
uni.navigateTo({
|
|
url:'/pages/warehouse/pay'
|
|
})
|
|
},
|
|
getList(val){
|
|
let params={
|
|
page:this.page,
|
|
limit:this.limit,
|
|
status:this.status==-1?'':this.status
|
|
}
|
|
getBuyerOrderList({...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
|
|
}
|
|
})
|
|
},
|
|
confirmPay(item){
|
|
|
|
},
|
|
/**
|
|
* 订单tab点击
|
|
*/
|
|
onOrderTab(type){
|
|
this.status = type
|
|
this.getList()
|
|
},
|
|
/**
|
|
* 订单列表点击
|
|
*/
|
|
onOrderList(item){
|
|
uni.navigateTo({
|
|
url: '/pages/OrderDetails/OrderDetails?id='+item.id,
|
|
})
|
|
},
|
|
cancelOrderHandle(item){
|
|
this.orderObj = item;
|
|
this.show = true;
|
|
},
|
|
confirmHandle(){
|
|
cancelOrder({id:this.orderObj.id}).then(res=>{
|
|
|
|
if(res.code==1){
|
|
this.$refs.uToast.show({
|
|
message:'取消订单成功'
|
|
})
|
|
this.show=false;
|
|
}
|
|
this.getList()
|
|
})
|
|
},
|
|
cancelHandle(){
|
|
this.show = false;
|
|
}
|
|
},
|
|
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: space-between;
|
|
}
|
|
.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>
|
|
|