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.
503 lines
11 KiB
503 lines
11 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>{{getstatusLabel(item.status)}}</text>
|
|
<!-- <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="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-if="item.status==0">
|
|
<view class="btn" style="margin:0;" @click.native.stop="cancelOrderHandle(item)">取消订单</view>
|
|
<view class="btnGroup">
|
|
<view class="btn" @click.native.stop="uploadPay(item,index)">上传凭证</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;" @click.native.stop="changeStatusHandle(item)">提取货物</view>
|
|
<view class="btnGroup">
|
|
<view class="btn" @click.native.stop="weituoHandle(item)">委托上架</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
<view class="status-btn" v-if="item.status==4">
|
|
<view class="btnGroup">
|
|
<view class="btn" @click.native.stop="tixingHandle(item)">提醒发货</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-modal :show="tiqushow" content="您确定要提取货物吗？提取后货物将无法上架!" :title="'提示'"
|
|
:showCancelButton="true" @confirm="tiquconfirmHandle" @cancel="tiqucancelHandle"
|
|
|
|
></u-modal>
|
|
<u-upload
|
|
:previewFullImage="false"
|
|
@afterRead="afterRead"
|
|
width="176" height="176"
|
|
style="display: none;"
|
|
ref="uploadPay"
|
|
name="1"
|
|
></u-upload>
|
|
<u-toast ref="uToast"></u-toast>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// 0待支付1待确认,2待委托,3已投诉，4待发货，5待收货-1已取消6已完成7已上架
|
|
import {getToken} from '@/common/auth.js'
|
|
import {getBuyerOrderList,cancelOrder,orderPay} from '@/common/api.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
page:1,
|
|
limit:10,
|
|
status:null,
|
|
tableData:[],
|
|
total:0,
|
|
content:'确定取消订单',
|
|
show:false,
|
|
tiqushow:false,
|
|
orderObj:{},
|
|
selectedIndex:-1,
|
|
tiquSelected:{},
|
|
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:{
|
|
tixingHandle(){
|
|
this.$refs.uToast.show({
|
|
message:'提醒发货成功'
|
|
})
|
|
},
|
|
getstatusLabel(val){
|
|
let arr = this.statusList.filter(item=>{
|
|
return item.id==val;
|
|
})
|
|
if(arr.length>0){
|
|
return arr[0].name
|
|
}else{
|
|
return '-'
|
|
}
|
|
},
|
|
goPay(item){
|
|
console.log(item)
|
|
uni.navigateTo({
|
|
url:"/pages/warehouse/pay?num="+item.order_amount+'&id='+item.id
|
|
})
|
|
},
|
|
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
|
|
}
|
|
})
|
|
},
|
|
uploadPay(item,index){
|
|
this.$refs.uploadPay.chooseFile();
|
|
this.selectedIndex = index;
|
|
},
|
|
// 新增图片
|
|
async afterRead(event) {
|
|
console.log(event)
|
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
|
let lists = [].concat(event.file)
|
|
|
|
for (let i = 0; i < lists.length; i++) {
|
|
const result = await this.uploadFilePromise(lists[i].url)
|
|
this.$refs.uToast.show({
|
|
message:'上传成功'
|
|
})
|
|
if(event.name==1){
|
|
this.tableData[this.selectedIndex].pay_voucher = JSON.parse(result).data.url;
|
|
}
|
|
}
|
|
|
|
},
|
|
//上传照片
|
|
uploadFilePromise(url) {
|
|
return new Promise((resolve, reject) => {
|
|
let a = uni.uploadFile({
|
|
url: this.baseUrl+'api/common/upload',
|
|
filePath: url,
|
|
name: 'file',
|
|
header:{
|
|
token:getToken()
|
|
},
|
|
formData: {
|
|
},
|
|
success: (res) => {
|
|
|
|
if(JSON.parse(res.data).code==1){
|
|
setTimeout(() => {
|
|
resolve(res.data)
|
|
}, 1000)
|
|
}else{
|
|
uni.$u.toast(JSON.parse(res.data).msg)
|
|
|
|
resolve(res.data)
|
|
}
|
|
},
|
|
fail: (res) => {
|
|
console.log(res,"rrr")
|
|
}
|
|
});
|
|
})
|
|
},
|
|
confirmPay(item){
|
|
if(!item.pay_voucher){
|
|
this.$refs.uToast.show({
|
|
message:'请上传支付凭证'
|
|
})
|
|
return;
|
|
}
|
|
let params={
|
|
pay_voucher:item.pay_voucher,
|
|
id:item.id,
|
|
status:1
|
|
}
|
|
orderPay(params).then(res=>{
|
|
this.getList()
|
|
})
|
|
},
|
|
changeStatusHandle(item){
|
|
this.tiqushow = true;
|
|
this.tiquSelected = item;
|
|
},
|
|
/**
|
|
* 订单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,
|
|
})
|
|
},
|
|
cancelOrderHandle(item){
|
|
this.orderObj = item;
|
|
this.show = true;
|
|
},
|
|
confirmHandle(){
|
|
cancelOrder({id:this.orderObj.id,status:-1}).then(res=>{
|
|
|
|
if(res.code==1){
|
|
this.$refs.uToast.show({
|
|
message:'取消订单成功'
|
|
})
|
|
this.show=false;
|
|
}
|
|
this.getList()
|
|
})
|
|
},
|
|
tiquconfirmHandle(){
|
|
console.log(this.tiquSelected)
|
|
let params={
|
|
pay_voucher:this.tiquSelected.pay_voucher,
|
|
id:this.tiquSelected.id,
|
|
status:4
|
|
}
|
|
orderPay(params).then(res=>{
|
|
this.getList()
|
|
this.tiqushow = false;
|
|
})
|
|
},
|
|
cancelHandle(){
|
|
this.show = false;
|
|
},
|
|
tiqucancelHandle(){
|
|
this.tiqushow = false;
|
|
},
|
|
weituoHandle(item){
|
|
uni.navigateTo({
|
|
url: '/pages/warehouse/weituo?id='+item.id,
|
|
})
|
|
}
|
|
},
|
|
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>
|
|
|