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.
404 lines
10 KiB
404 lines
10 KiB
<template>
|
|
<view>
|
|
<lf-nav title="订单管理" :showIcon="true" bgColor="#fff" @changeHeight="e => nav_height = e"></lf-nav>
|
|
<view class="head">
|
|
<u-tabs :list="tab_list" active-color="#0F31A3" inactive-color='#777777' :is-scroll="true" :current="tab_current" @change="tabChange"></u-tabs>
|
|
</view>
|
|
|
|
<swiper :style="{height: autoHeight}" :current="tab_current" @change="swiperChange">
|
|
<swiper-item v-for="(tab_item, tab_index) in tab_list" :key="tab_index">
|
|
<scroll-view :style="{height: autoHeight}"
|
|
:scroll-y="true"
|
|
@scrolltolower="scrolltolower"
|
|
:refresher-enabled="true"
|
|
:refresher-triggered="tab_item.isRefresher"
|
|
@refresherrefresh="refresherrefresh">
|
|
<view class="content">
|
|
<view class="card" v-for="(item, index) in tab_item.list" :key="index">
|
|
<view class="lf-flex">
|
|
<image class="goods-img" :src="item.items[0].item_meta.image"></image>
|
|
<view class="info">
|
|
<view class="lf-font-26 lf-color-333 lf-line-2">{{ item.items[0].item_name }}</view>
|
|
<view class="lf-row-between" style="line-height: 1;">
|
|
<text class="lf-font-24 lf-color-777">{{ item.payment.amount }}件；{{ item.items[0].item_meta.specs_text }}</text>
|
|
<text class="lf-font-32 lf-font-bold" style="color: #F63434;">¥{{ item.payment.amount_yuan }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="order-num">
|
|
<view class="deliver" v-if="item.status_text == '待发货'" @click="deliver(item.order_no)">发货</view>
|
|
<view v-else>{{ item.status_text }}</view>
|
|
<view style="color: #F63434;" @click="removeOrder(item.order_no, tab_index, index)">删除订单</view>
|
|
</view>
|
|
</view>
|
|
<lf-nocontent src="/static/images/empty.png" v-if="tab_item.list.length <= 0"></lf-nocontent>
|
|
</view>
|
|
</scroll-view>
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
<u-popup mode="bottom" v-model="show_deliver" :round="true" borderRadius="20">
|
|
<view class="popup-content">
|
|
<view class="title">选择物流商家</view>
|
|
<picker mode="selector" range-key="name" :range="columns" :value="select_index" @change="selectChange">
|
|
<view class="logistics">
|
|
<text>{{ (columns[select_index] && columns[select_index].name) || '请选择物流' }}</text>
|
|
<text class="lf-iconfont icon-jiazai load-a" v-if="logistics_load"></text>
|
|
<text class="lf-iconfont icon-xiangxia" v-else></text>
|
|
</view>
|
|
</picker>
|
|
<view class="title">快递单号</view>
|
|
<input class="input" placeholder="请输入快递单号" v-model="expressNum" />
|
|
<button class="btn" @click="confirm">确认发货</button>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data(){
|
|
let _public = {
|
|
page: 1,
|
|
isPage: true,
|
|
loadingClass: true,
|
|
loadingText: '正在加载中',
|
|
isRefresher: false
|
|
}
|
|
return {
|
|
tab_current: 0,
|
|
tab_list: [{
|
|
name: '全部',
|
|
list: [],
|
|
..._public
|
|
},{
|
|
name: '待付款',
|
|
list: [],
|
|
..._public
|
|
},{
|
|
name: '待发货',
|
|
list: [],
|
|
..._public
|
|
},{
|
|
name: '待提货',
|
|
list: [],
|
|
..._public
|
|
}],
|
|
scrollH: 0,
|
|
nav_height: 0,
|
|
show_deliver: false,
|
|
columns: [],
|
|
show_logistics: false,
|
|
select_index: null,
|
|
expressNum: '',
|
|
token: '',
|
|
logistics_load: true,
|
|
click_order_no: ''
|
|
}
|
|
},
|
|
computed: {
|
|
autoHeight(){
|
|
return `calc(${this.scrollH}px - ${this.nav_height}px - 86rpx)`;
|
|
}
|
|
},
|
|
onLoad(){
|
|
let info = uni.getSystemInfoSync();
|
|
this.scrollH = info.screenHeight;
|
|
this.token = this.$cookieStorage.get('store_token');
|
|
this.getOrderList();
|
|
},
|
|
methods: {
|
|
getOrderList(options = {}){
|
|
let tabItem = this.tab_list[this.tab_current];
|
|
this.$http.get({
|
|
api: 'api/supplier/order',
|
|
data: {
|
|
status: String(this.tab_current)
|
|
},
|
|
header: {
|
|
token: this.token
|
|
}
|
|
}).then(res => {
|
|
console.log("getOrderList", res);
|
|
|
|
tabItem.isPage = this.$isRight(res.data.next_page_url);
|
|
if(options.refresher){
|
|
tabItem.isRefresher = false;
|
|
this.$msg('刷新成功', {icon: 'success'});
|
|
}
|
|
if(!tabItem.isPage){
|
|
tabItem.loadingClass = false;
|
|
tabItem.loadingText = '已加载全部数据~'
|
|
}
|
|
if(tabItem.page == 1){
|
|
tabItem.list = res.data.data.data;
|
|
}else{
|
|
tabItem.list.push(...res.data.data.data);
|
|
}
|
|
console.log("this.tab_list", this.tab_list)
|
|
})
|
|
},
|
|
tabChange(event){
|
|
this.tab_current = event;
|
|
if(this.tab_list[this.tab_current].list.length <= 0){
|
|
this.getOrderList();
|
|
}
|
|
},
|
|
swiperChange(event){
|
|
this.tab_current = event.detail.current;
|
|
if(event.detail.source){
|
|
if(this.tab_list[this.tab_current].list.length <= 0){
|
|
this.getOrderList();
|
|
}
|
|
}
|
|
},
|
|
// 物流
|
|
getLogistics(){
|
|
this.logistics_load = true;
|
|
this.$http.get({
|
|
api: 'api/supplier/order/send_list',
|
|
data: {
|
|
order_no: this.click_order_no
|
|
},
|
|
header: {
|
|
token: this.token
|
|
}
|
|
}).then(res => {
|
|
if(res.data.code == 200){
|
|
this.logistics_load = false;
|
|
this.columns = res.data.data;
|
|
}
|
|
})
|
|
},
|
|
deliver(order_no){
|
|
console.log("1111111");
|
|
this.show_deliver = true;
|
|
this.click_order_no = order_no;
|
|
this.getLogistics();
|
|
},
|
|
selectChange(event){
|
|
this.select_index = event.detail.value;
|
|
console.log("event",event)
|
|
},
|
|
// 确认发货
|
|
confirm(){
|
|
if(this.columns[this.select_index] && this.expressNum){
|
|
uni.showLoading({
|
|
title: '正在提交'
|
|
})
|
|
let method_id = this.columns[this.select_index].id;
|
|
let express_no = this.expressNum;
|
|
let order_no = this.click_order_no;
|
|
this.$http.get({
|
|
api: 'api/supplier/order/send',
|
|
data: {
|
|
distribution_id: 0,
|
|
method_id: method_id,
|
|
express_no: express_no,
|
|
order_no: order_no
|
|
},
|
|
header: {
|
|
token: this.token
|
|
}
|
|
}).then(res => {
|
|
uni.hideLoading();
|
|
this.$msg('发货成功', {icon: 'success'});
|
|
this.show_deliver = false;
|
|
}).catch(err => uni.hideLoading());
|
|
}else{
|
|
this.$msg('请将信息补充完整')
|
|
}
|
|
},
|
|
// 删除订单
|
|
removeOrder(order_no, parentIndex, childIndex){
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '确定删除该订单吗？',
|
|
success: result => {
|
|
if(result.confirm){
|
|
this.$http.post({
|
|
api: 'api/supplier/order/delete',
|
|
data: {
|
|
order_no: order_no
|
|
},
|
|
header: {
|
|
token: this.token
|
|
}
|
|
}).then(res => {
|
|
if(res.data.code == 200){
|
|
this.$msg(res.data.data);
|
|
this.tab_list[parentIndex].list.splice(childIndex, 1);
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// scroll-view 滚到底
|
|
scrolltolower(){
|
|
let tabItem = this.tab_list[this.tab_current];
|
|
if(tabItem.isPage){
|
|
tabItem.page = tabItem.page+1;
|
|
this.getOrderList();
|
|
}else{
|
|
this.$msg('没有更多啦~')
|
|
}
|
|
},
|
|
// 自定义下拉刷新
|
|
refresherrefresh(){
|
|
let tabItem = this.tab_list[this.tab_current];
|
|
tabItem.isRefresher = true;
|
|
tabItem.page = 1;
|
|
tabItem.isPage = true;
|
|
tabItem.loadingClass = true;
|
|
tabItem.loadingText = '正在加载中';
|
|
this.getOrderList({refresher: true});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page{
|
|
background-color: #F8F8F8;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped="scoped">
|
|
.head{
|
|
background-color: #FFFFFF;
|
|
}
|
|
.content{
|
|
padding: 30rpx 32rpx;
|
|
.card{
|
|
width: 686rpx;
|
|
height: max-content;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
&:nth-child(n+2){
|
|
margin-top: 20rpx;
|
|
}
|
|
.shop-name{
|
|
font-size: 28rpx;
|
|
color: #222222;
|
|
font-weight: bold;
|
|
margin: 0 15rpx;
|
|
}
|
|
.goods-img{
|
|
width: 130rpx;
|
|
height: 130rpx;
|
|
border-radius: 5rpx;
|
|
margin-right: 15rpx;
|
|
background-color: #EEEEEE;
|
|
}
|
|
.info{
|
|
width: 480rpx;
|
|
height: 130rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
.order-num{
|
|
font-size: 24rpx;
|
|
color: #555555;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 28rpx;
|
|
.deliver{
|
|
width: 109rpx;
|
|
height: 35rpx;
|
|
background: #0E2F9E;
|
|
border-radius: 17rpx;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
line-height: 35rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.popup-content{
|
|
width: 750rpx;
|
|
height: max-content;
|
|
background-color: #FFFFFF;
|
|
box-sizing: border-box;
|
|
padding: 60rpx 32rpx;
|
|
.title{
|
|
color: #555555;
|
|
font-size: 28rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
.logistics{
|
|
width: 686rpx;
|
|
height: 80rpx;
|
|
background: rgba(14, 47, 158, 0.05);
|
|
border-radius: 5rpx;
|
|
border: 1rpx solid #0E2F9E;
|
|
color: #0E2F9E;
|
|
font-size: 28rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 30rpx;
|
|
box-sizing: border-box;
|
|
margin-bottom: 60rpx;
|
|
}
|
|
.input{
|
|
width: 686rpx;
|
|
height: 80rpx;
|
|
background: rgba(14, 47, 158, 0.05);
|
|
border-radius: 5rpx;
|
|
padding: 0 30rpx;
|
|
font-size: 28rpx;
|
|
margin-bottom: 100rpx;
|
|
}
|
|
.btn{
|
|
width: 550rpx;
|
|
height: 100rpx;
|
|
background: #0D2E9A;
|
|
border-radius: 50rpx;
|
|
line-height: 100rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
.load-a{
|
|
animation: my-load-a 2.5s infinite;
|
|
}
|
|
@keyframes my-load-a{
|
|
0%{transform: rotate(0deg);}
|
|
25%{transform: rotate(90deg);}
|
|
50%{transform: rotate(180deg);}
|
|
75%{transform: rotate(270deg);}
|
|
100%{transform: rotate(360deg);}
|
|
}
|
|
|
|
// tabs 样式修改
|
|
/deep/.u-scroll-box {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
/deep/.u-scroll-box .u-tab-bar {
|
|
background-color: #0F31A3!important;
|
|
width: 80rpx!important;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: -12rpx;
|
|
}
|
|
|
|
/deep/.special_tab .u-tabs .u-scroll-box .u-tab-bar {
|
|
background-color: #0F31A3!important;
|
|
width: 56rpx!important;
|
|
position: absolute;
|
|
height: 5rpx!important;
|
|
left: 8rpx;
|
|
bottom: -4rpx;
|
|
}
|
|
|
|
/deep/ .u-tab-item {
|
|
font-size: 28rpx!important;
|
|
}
|
|
|
|
</style>
|