500 lines
12 KiB
Vue
500 lines
12 KiB
Vue
<template>
|
||
<view class="mallShipments">
|
||
<!-- 订单分类 -->
|
||
<view class="nav">
|
||
<view :class="['nav-item' ,selectTypeId === item.id?'nav-item-selected':'']"
|
||
v-for="(item,index) in typeList" :key="index" @click="selectType(item.id,index)">
|
||
{{item.name}}
|
||
{{item.id ==='signed' && count.signed >0 ? '('+count.signed + ')':''}}
|
||
{{item.id ==='completed' && count.completed >0 ?'('+count.completed + ')':''}}
|
||
{{item.id ==='init' && count.init >0 ?'('+count.init + ')':''}}
|
||
{{item.id ==='delivered' && count.delivered >0 ?'('+count.delivered + ')':''}}
|
||
</view>
|
||
</view>
|
||
<!-- 快递点 自提单显示 -->
|
||
<scroll-view class="nav1" v-if='selectTypeIndex === 0 || selectTypeIndex === 1' scroll-x="true" scroll-with-animation="true">
|
||
<view :class="['nav-item' ,state === it.id?'nav-item-selected':'']" v-for="(it,idx) in typeList[selectTypeIndex].categrery"
|
||
:key="idx" @click="selectNav(it.id)">
|
||
{{it.name}}
|
||
{{it.id ==='signed' && count.signed >0 ? '('+count.signed + ')':''}}
|
||
{{it.id ==='completed' && count.completed >0 ?'('+count.completed + ')':''}}
|
||
{{it.id ==='init' && count.init >0 ?'('+count.init + ')':''}}
|
||
{{it.id ==='delivered' && count.delivered >0 ?'('+count.delivered + ')':''}}
|
||
</view>
|
||
</scroll-view>
|
||
<!--退货单 -->
|
||
<scroll-view class="nav1" v-else scroll-x="true" scroll-with-animation="true">
|
||
<view :class="['nav-item' ,state === it.id?'nav-item-selected':'']" v-for="(it,idx) in typeList[selectTypeIndex].categrery"
|
||
:key="idx" @click="selectNav(it.id)">
|
||
{{it.name}}
|
||
{{it.id ==='apply' && count.apply >0 ? '('+count.apply + ')':''}}
|
||
{{it.id ==='deliver' && count.deliver >0 ?'('+count.deliver + ')':''}}
|
||
{{it.id ==='delivered' && count.delivered >0 ?'('+count.delivered + ')':''}}
|
||
{{it.id ==='signed' && count.signed >0 ?'('+count.signed + ')':''}}
|
||
{{it.id ==='process' && count.process >0 ?'('+count.process + ')':''}}
|
||
{{it.id ==='completed' && count.completed >0 ?'('+count.completed + ')':''}}
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 有订单列表 -->
|
||
<block v-if="lists.length > 0">
|
||
<!-- 订单列表 -->
|
||
<view class="order-list" v-for="(item,index) in lists" :key="index" v-if='selectTypeIndex === 0 || selectTypeIndex === 1'>
|
||
<MallShipmentsTemplate :item="item" />
|
||
<view class="actions">
|
||
<view class="nowPay" @click="goDetail(item.shipment_no)">查看详情</view>
|
||
<view v-if="item.can.cancel" @click="nowCancel(index,item.shipment_no)" class="nowPay">取消订单</view>
|
||
<view v-if="item.can.sign" @click="nowSign(index,item.shipment_no)" class="nowPay">确认签收</view>
|
||
<view v-if="item.can.refund" @click="nowRefund(item.shipment_no)" class="nowPay">申请退货</view>
|
||
<view v-if="item.can.logistic" @click="nowLogistics(item.shipment_no)" class="nowPay">查看物流</view>
|
||
</view>
|
||
</view>
|
||
<!-- 有订单列表 -->
|
||
<view class="" v-if="selectTypeIndex === 2">
|
||
<!-- 订单列表 -->
|
||
<view class="order-list" v-for="(item,index) in lists" :key="index">
|
||
<MallRefundsTemplate :item="item" />
|
||
<view class="actions">
|
||
<view @click="goDetail1(item.refund_id)" class="nowPay">查看详情</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
|
||
<!-- 没有订单列表 -->
|
||
<no-list v-if="lists.length === 0" name='no-order' txt="暂无数据~" />
|
||
|
||
<!-- <u-toast ref="uToast" /> -->
|
||
<u-toast ref="uToast" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import MallShipmentsTemplate from '@/components/mall-shipments-template/mall-shipments-template'
|
||
import MallRefundsTemplate from '@/components/mall-refunds-template/mall-refunds-template'
|
||
import {
|
||
mallShipmentsPostShop,
|
||
mallShipmentsSign,
|
||
mallShipmentsCancel
|
||
} from '@/apis/interfaces/numberWeight'
|
||
export default {
|
||
components: {
|
||
MallShipmentsTemplate,MallRefundsTemplate
|
||
},
|
||
data() {
|
||
return {
|
||
lists: [],
|
||
page: 1,
|
||
total: 0,
|
||
navList: [],
|
||
count: {}, // 订单数量
|
||
typeList: [{
|
||
name: '快递单',
|
||
id: 'post',
|
||
categrery: [{
|
||
name: '待发货',
|
||
id: 'init'
|
||
},
|
||
{
|
||
name: '已发货',
|
||
id: 'delivered'
|
||
},
|
||
{
|
||
name: '已签收',
|
||
id: 'signed'
|
||
},
|
||
{
|
||
name: '已完成',
|
||
id: 'completed'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
name: '自提单',
|
||
id: 'take',
|
||
categrery: [{
|
||
name: '已提货',
|
||
id: 'signed'
|
||
},
|
||
{
|
||
name: '已完成',
|
||
id: 'completed'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
name: '退货单',
|
||
id: 'refund',
|
||
categrery: [{
|
||
name: '待审核',
|
||
id: 'apply'
|
||
}, {
|
||
name: '待返货',
|
||
id: 'deliver'
|
||
}, {
|
||
name: '待签收',
|
||
id: 'delivered'
|
||
}, {
|
||
name: '已签收',
|
||
id: 'signed'
|
||
},
|
||
{
|
||
name: '待确认退货',
|
||
id: 'process'
|
||
},
|
||
{
|
||
name: '完成退货',
|
||
id: 'completed'
|
||
}
|
||
]
|
||
},
|
||
],
|
||
selectTypeId: 'post',
|
||
state: 'init',
|
||
selectTypeIndex: 0
|
||
};
|
||
},
|
||
onLoad(e) {
|
||
this.getList()
|
||
},
|
||
onShow() {
|
||
console.log(uni.getStorageSync('refresh'), 'getStorageSync')
|
||
if (uni.getStorageSync('refresh')) {
|
||
this.reset()
|
||
}
|
||
},
|
||
onUnload() {
|
||
uni.setStorageSync('refresh', false)
|
||
},
|
||
onReachBottom() {
|
||
if (this.total > this.lists.length) {
|
||
this.page = this.page + 1
|
||
this.getList()
|
||
} else {
|
||
this.$refs.uToast.show({
|
||
title: '吼吼吼~我是有底的~',
|
||
type: 'error',
|
||
icon: false,
|
||
duration: 3000
|
||
})
|
||
}
|
||
},
|
||
methods: {
|
||
reset() {
|
||
this.page = 1
|
||
this.total = 0
|
||
this.lists = []
|
||
this.getList()
|
||
uni.setStorageSync('refresh', false)
|
||
},
|
||
// 选择状态
|
||
selectNav(id) {
|
||
if (this.state !== id) {
|
||
this.state = id
|
||
this.reset()
|
||
}
|
||
},
|
||
// 快递单post 提货单 take 退货单refund
|
||
selectType(id,index) {
|
||
console.log('id：' + id)
|
||
if (this.selectTypeId !== id) {
|
||
this.state = this.typeList[index].categrery[0].id
|
||
this.selectTypeId = id
|
||
this.selectTypeIndex = index
|
||
this.reset()
|
||
}
|
||
},
|
||
// 获取订单列表
|
||
getList() {
|
||
let data = {
|
||
pageSize: 4,
|
||
page: this.page,
|
||
state: this.state
|
||
}
|
||
let apiUrl = ''
|
||
if (this.selectTypeId === 'post') {
|
||
apiUrl = 'mall/shipments/post'
|
||
} else if(this.selectTypeId === 'take') {
|
||
apiUrl = 'mall/shipments/shop'
|
||
data.channel = 'app'
|
||
} else if(this.selectTypeId === 'refund') {
|
||
apiUrl = 'mall/refunds'
|
||
}
|
||
mallShipmentsPostShop(apiUrl, data).then(res => {
|
||
console.log(res.count)
|
||
this.count = res.count
|
||
this.lists = this.lists.concat(res.lists.data)
|
||
this.total = res.lists.page.total
|
||
}).catch(err => {
|
||
this.$refs.uToast.show({
|
||
title: err.message,
|
||
type: 'error',
|
||
icon: false,
|
||
duration: 3000
|
||
})
|
||
})
|
||
},
|
||
// 取消提货单
|
||
nowCancel(index, no) {
|
||
console.log(index, no)
|
||
uni.showModal({
|
||
title: '哎呦，提醒你',
|
||
content: '是否确认要取消订单啊，取消后请去我的权证中查看',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
mallShipmentsCancel(no).then(res => {
|
||
console.log(res)
|
||
this.$refs.uToast.show({
|
||
title: res,
|
||
type: 'error',
|
||
icon: false,
|
||
duration: 3000
|
||
})
|
||
this.lists.splice(index, 1)
|
||
this.total = this.total - 1
|
||
}).catch(err => {
|
||
this.$refs.uToast.show({
|
||
title: err.message,
|
||
type: 'error',
|
||
icon: false,
|
||
duration: 3000
|
||
})
|
||
})
|
||
} else if (res.cancel) {
|
||
this.$refs.uToast.show({
|
||
title: '放弃了~',
|
||
type: 'error',
|
||
icon: false,
|
||
duration: 3000
|
||
})
|
||
}
|
||
}
|
||
});
|
||
|
||
},
|
||
// 签收提货单
|
||
nowSign(index, no) {
|
||
console.log(index, no)
|
||
uni.showModal({
|
||
title: '哎呦，提醒你',
|
||
content: '是否确认已经收到商品了呀',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
console.log(no)
|
||
mallShipmentsSign(no).then(res => {
|
||
console.log(res)
|
||
this.$refs.uToast.show({
|
||
title: res,
|
||
type: 'error',
|
||
icon: false,
|
||
duration: 3000
|
||
})
|
||
this.lists.splice(index, 1)
|
||
this.total = this.total - 1
|
||
}).catch(err => {
|
||
this.$refs.uToast.show({
|
||
title: err.message,
|
||
type: 'error',
|
||
icon: false,
|
||
duration: 3000
|
||
})
|
||
})
|
||
|
||
} else if (res.cancel) {
|
||
this.$refs.uToast.show({
|
||
title: '放弃了~',
|
||
type: 'error',
|
||
icon: false,
|
||
duration: 3000
|
||
})
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
// 申请退货
|
||
nowRefund(no) {
|
||
// this.$Router.push({
|
||
// name: 'MallShipmentsRefund',
|
||
// params: {
|
||
// no: no
|
||
// }
|
||
// })
|
||
uni.navigateTo({
|
||
url:'/pages/user/order/mallShipmentsRefund?no='+no
|
||
})
|
||
},
|
||
// 查看物流
|
||
nowLogistics(no) {
|
||
// this.$Router.push({
|
||
// name: 'Orderlogistics',
|
||
// params: {
|
||
// no: no
|
||
// }
|
||
// })
|
||
uni.navigateTo({
|
||
url:'/pages/user/order/logistics?no='+no
|
||
})
|
||
},
|
||
// 查看详情
|
||
goDetail(no) {
|
||
// this.$Router.push({
|
||
// name: 'MallShipmentsInfo',
|
||
// query:{
|
||
// no:no
|
||
// }
|
||
// })
|
||
uni.navigateTo({
|
||
url:'/pages/user/order/mallShipmentsInfo?no='+no
|
||
})
|
||
},
|
||
// 查看退货单详情
|
||
// 查看详情
|
||
goDetail1(no){
|
||
// this.$Router.push({
|
||
// name: 'MallRefundsInfo',
|
||
// params:{
|
||
// no:no
|
||
// }
|
||
// })
|
||
uni.navigateTo({
|
||
url:'/pages/user/order/mallRefundsInfo?no='+no
|
||
})
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.mallShipments {
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
box-sizing: border-box;
|
||
background-color: #F7F7F7;
|
||
|
||
// 订单nav
|
||
.nav {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
box-sizing: border-box;
|
||
font-size: $title-size*0.95;
|
||
padding: 0 30rpx;
|
||
background-color: #fff;
|
||
color: #666;
|
||
border-top: solid 20rpx #f7f7f7;
|
||
position: sticky;
|
||
top: 0rpx;
|
||
z-index: 10000;
|
||
|
||
.nav-item {
|
||
border-bottom: solid 4rpx #fff;
|
||
padding: 30rpx 10rpx;
|
||
}
|
||
|
||
.nav-item-selected {
|
||
border-bottom: solid 4rpx $main-color;
|
||
color: $main-color;
|
||
}
|
||
}
|
||
|
||
.nav1 {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
box-sizing: border-box;
|
||
white-space: nowrap;
|
||
font-size: $title-size*0.95;
|
||
padding:30rpx 30rpx 20rpx 30rpx;
|
||
color: #666;
|
||
position: sticky;
|
||
top: 120rpx;
|
||
z-index: 10000;
|
||
background-color: #f7f7f7;
|
||
|
||
.nav-item {
|
||
display: inline-block;
|
||
padding-right: 30rpx;
|
||
}
|
||
|
||
.nav-item-selected {
|
||
color: $main-color;
|
||
}
|
||
}
|
||
|
||
// 订单列表
|
||
.order-list {
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
min-height: 300rpx;
|
||
margin: 30rpx 20rpx 0 20rpx;
|
||
padding: 30rpx 30rpx 20rpx 30rpx;
|
||
// border-top: solid 4rpx #cacaca;
|
||
|
||
// 操作信息
|
||
.actions {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
box-sizing: border-box;
|
||
flex-wrap: wrap;
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
color: #fff;
|
||
border-top: solid 1rpx #EFF4F2;
|
||
|
||
.nowPay {
|
||
padding: 4rpx 20rpx;
|
||
border-radius: 40rpx;
|
||
margin-left: 20rpx;
|
||
margin-top: 20rpx;
|
||
// background-color: $main-color;
|
||
color: #999;
|
||
border: solid 1rpx #cacaca;
|
||
}
|
||
|
||
.cancelOrder {
|
||
padding: 10rpx 30rpx;
|
||
border-radius: 40rpx;
|
||
margin-left: 20rpx;
|
||
margin-top: 20rpx;
|
||
background-color: #DD524D;
|
||
}
|
||
|
||
.logistics {
|
||
background-color: $main-color;
|
||
padding: 10rpx 30rpx;
|
||
border-radius: 40rpx;
|
||
margin-left: 20rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.sign {
|
||
background-color: #DD524D;
|
||
padding: 10rpx 30rpx;
|
||
border-radius: 40rpx;
|
||
margin-left: 20rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.evaluate {
|
||
background-color: $main-color;
|
||
padding: 10rpx 30rpx;
|
||
border-radius: 40rpx;
|
||
margin-left: 20rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|