<template>
<div class="billpart" style="background: white!important;">
<van-tabs sticky color="#ECBD50" :swipeable="true" @change="tabChange" animated>
<van-tab title="待审核">
<van-list v-model="loading" :finished="finished1" finished-text="没有内容了" @load="getMore1" >
<!-- <div class="wrapper7" v-for="item in listdata" :key="item">-->
<div class="wrapper7">
<div class="billitem" v-for="item in viewlist">
<div class="billtop">
<div class="topleft">订单号：{{item.order_sn}}</div>
<div class="topright">待审核</div>
</div>
<div class="billcon">
<div class="billimg"><img :src="item.goods_pic"> </div>
<div class="billdetail">
<h4>{{item.goods_name}}</h4>
<span class="bitttime">下单时间：{{item.created_at}}</span>
<div class="billcount">
<span style="text-align: left; color: #656565;">￥{{item.order_num}}*{{item.goods_price}}</span>
<span style="text-align: right;color: #282828;">合计：￥{{item.order_price}}</span>
</div>
</div>
</div>
</div>
</div>
</van-list>
<img style="display: block;margin:20px auto;width: 50%;" src="../assets/none.png" v-if="hasinfo1" />
</van-tab>
<van-tab title="待发货">
<van-list v-model="loading2" :finished="finished2" finished-text="没有内容了" @load="getMore2" >
<!-- <div class="wrapper7" v-for="item in listdata" :key="item">-->
<div class="wrapper7">
<div class="billitem" v-for="item in viewlist2">
<div class="billtop">
<div class="topleft">订单号：{{item.order_sn}}</div>
<div class="topright" v-if="item.status==1">审核不通过</div>
<div class="topright" v-if="item.status==2">审核通过</div>
<div class="topright" v-if="item.status==3">待确认收货</div>
</div>
<div class="billcon">
<div class="billimg"><img :src="item.goods_pic"> </div>
<div class="billdetail">
<h4>{{item.goods_name}}</h4>
<span class="bitttime">下单时间：{{item.created_at}}</span>
<div class="billcount">
<span style="text-align: left; color: #656565;">￥{{item.order_num}}*{{item.goods_price}}</span>
<span style="text-align: right;color: #282828;">合计：￥{{item.order_price}}</span>
</div>
</div>
</div>
<div class="billreserve">
<span @click="Receiving(item)" v-if="item.status==3">确认收货</span>
</div>
</div>
</div>
</van-list>
<img style="display: block;margin:20px auto; width: 50%;" src="../assets/none.png" v-if="hasinfo2" />
</van-tab>
<van-tab title="已完成">
<van-list v-model="loading3" :finished="finished3" finished-text="" @load="getMore3" >
<!-- <div class="wrapper7" v-for="item in listdata" :key="item">-->
<div class="wrapper7">
<div class="billitem" v-for="item in viewlist3">
<div class="billtop">
<div class="topleft">订单号：{{item.order_sn}}</div>
<div class="topright" v-if="item.status==4">已确认收货</div>
<div class="topright" v-if="item.status==5">退单/退款</div>
</div>
<div class="billcon">
<div class="billimg"><img :src="item.goods_pic"> </div>
<div class="billdetail">
<h4>{{item.goods_name}}</h4>
<span class="bitttime">下单时间：{{item.created_at}}</span>
<div class="billcount">
<span style="text-align: left; color: #656565;">￥{{item.order_num}}*{{item.goods_price}}</span>
<span style="text-align: right;color: #282828;">合计：￥{{item.order_price}}</span>
</div>
</div>
</div>
<!-- <div class="billreserve">
<span>确认收货</span>
</div> -->
</div>
</div>
</van-list>
<img style="display: block;margin:20px auto;width: 50%;" src="../assets/none.png" v-if="hasinfo3" />
<span v-if="hasinfo3" style="display: block;text-align: center;font-size: 12px; color: #969799;text-align: center;">没有内容</span>
</van-tab>
</van-tabs>
</div>
</template>
<script>
import * as weilink from "../utils/weixin.js";
import wx from 'weixin-js-sdk'
import operate from '@/minix/operate.js'
import {
pay
} from '@/api/jssdk.js'
export default {
name: 'recordmonery',
mixins: [operate],
data() {
return {
viewtype:"1",
tabIndex:0,
activeindex: 0,
tabname: [{
name: "团队信息",
id: 0
},
{
name: "收益信息",
id: 1
},
],
list: [],
listdata:[],
finished: false,
list1: [],
list2: [],
list3: [],
hasinfo1:false,
hasinfo2:false,
hasinfo3:false,
loading: false,
loading2: false,
loading3: false,
finished1: false,
finished2: false,
finished3: false,
newScrollTop1: 0,
newScrollTop2: 0,
newScrollTop3: 0,
viewlist:[],
viewpage:1,
viewsize:8,
viewlist2:[],
viewpage2:1,
viewsize2:8,
viewlist3:[],
viewpage3:1,
viewsize3:8,
}
},
methods: {
onLoad() {
},
getMore1() {
setTimeout(() => {
let that = this;
let postdata={
'page': that.viewpage,
'pagesize': that.viewsize,
'type': that.viewtype
}
const viewtoast = this.$toast.loading({
duration:0,
message: '加载中...',
forbidClick: true,
});
this.axios.post('/Api/Order/orderList', postdata).then(function(res){
if(res.status ==='1'){
viewtoast.clear();
if(res.data.length>0){
that.viewlist = that.viewlist.concat(res.data);
viewtoast.clear();
that.loading = false;
that.viewpage += 1;//页数+1
}else{
that.finished1 = true;
}
}
if(that.viewlist.length>0){
that.hasinfo1 = false
}else{
that.hasinfo1 = true
}
}, function(res){
viewtoast.clear();
console.log(res)
})
}, 500);
},
getMore2() {
setTimeout(() => {
let that = this;
let postdata={
'page': that.viewpage2,
'pagesize': that.viewsize2,
'type': "2"
}
const viewtoast = this.$toast.loading({
duration:0,
message: '加载中...',
forbidClick: true,
});
this.axios.post('/Api/Order/orderList', postdata).then(function(res){
if(res.status ==='1'){
viewtoast.clear();
if(res.data.length>0){
that.viewlist2 = that.viewlist2.concat(res.data);
viewtoast.clear();
that.loading2 = false;
that.viewpage2 += 1;//页数+1
}else{
that.finished2 = true;
}
}
if(that.viewlist2.length>0){
that.hasinfo2 = false
}else{
that.hasinfo2 = true
}
}, function(res){
viewtoast.clear();
console.log(res)
})
}, 500);
},
Receiving(val){
let that = this;
let postdata={
'order_id': val.id,
}
const viewtoast = this.$toast.loading({
duration:0,
message: '加载中...',
forbidClick: true,
});
this.axios.post('/Api/Order/confirm', postdata).then(function(res){
viewtoast.clear();
if(res.status ==='1'){
that.viewlist2=[];
that.viewpage2=1;
that.loading2 = false;
that.getMore2()
}
}, function(res){
viewtoast.clear();
console.log(res)
})
},
getMore3() {
setTimeout(() => {
let that = this;
let postdata={
'page': that.viewpage3,
'pagesize': that.viewsize3,
'type': "3"
}
const viewtoast = this.$toast.loading({
duration:0,
message: '加载中...',
forbidClick: true,
});
this.axios.post('/Api/Order/orderList', postdata).then(function(res){
if(res.status ==='1'){
viewtoast.clear();
if(res.data.length>0){
that.viewlist3 = that.viewlist3.concat(res.data);
console.log(that.viewlist3)
viewtoast.clear();
that.loading3 = false;
that.viewpage3 += 1;//页数+1
}else{
that.finished3 = true;
}
}
if(that.viewlist3.length>0){
that.hasinfo3 = false
}else{
that.hasinfo3 = true
}
}, function(res){
viewtoast.clear();
console.log(res)
})
}, 500);
},
tabChange(val) {
let scrollTop = document.documentElement.scrollTop ||document.body.scrollTop ||this.$el.querySelector(".wrapper7").scrollTop;
console.log("刚才的高度" + scrollTop);
console.log("刚才的tab" + this.tabIndex);
if (this.tabIndex === 0) {
this.newScrollTop1 = scrollTop;
} else if (this.tabIndex === 1) {
this.newScrollTop2 = scrollTop;
} else if (this.tabIndex === 2) {
this.newScrollTop3 = scrollTop;
}
this.tabIndex = val;
if (val === 0) {
this.viewtype="1",
this.$nextTick(() => {
document.documentElement.scrollTop = this.newScrollTop1;
});
} else if (val === 1) {
this.viewtype="2",
this.$nextTick(() => {
document.documentElement.scrollTop = this.newScrollTop2;
});
} else if (val === 2) {
this.viewtype="3",
this.$nextTick(() => {
document.documentElement.scrollTop = this.newScrollTop3;
});
}
},
getordertype(){
},
},
mounted(){
},
created() {
this.getordertype();
wx.ready(function(){
wx.hideOptionMenu();
wx.hideMenuItems({
menuList: []
});
})
},
}
</script>
<style>
.billpart .van-tab--active span{
color: #ECBD50!important;
}
</style>
<style scoped="scoped">
.billitem{
clear: both;
overflow: hidden;
width: 100%;
box-sizing: border-box;
margin:8px auto;
border-bottom: 1px solid #E6E6E6;
padding: 6px 15px 10px 15px;
font-size: 14px;
background: white;
}
.billitem .billtop{
display: flex;
justify-content: space-between;
padding: 4px 0px;
}
.billtop .topleft{
color: #656565;
}
.billtop .topright{
color: #FF0101;
}
.billitem .billcon{
display: flex;
justify-content: space-between;
}
.mineimg{
width: 50px;
}
.billdetail{
width: 90%;
margin-left:3%;
}
.billdetail h4{
padding: 0px;
margin: 0px;
font-size: 14px;
}
.billcon img{
display: block;
width: 52px;
height: 52px;
border-radius: 4px;
margin-top: 8px;
}
.bitttime{
display: block;
padding: 4px 0px;
color: #656565;
font-size: 12px;
}
.billcount{
display: block;
width: 100%;
}
.billcount span{
display: block;
width: 50%;
float: left;
}
.billreserve{
width: 100%;
clear: both;
overflow: hidden;
}
.billreserve span{
display: block;
width: 76px;
height: 28px;
text-align: center;
line-height: 28px;
float: right;
font-size: 12px;
background: saddlebrown;
border-radius: 4px;
margin-top: 6px;
color: white;
background: #ECBD50;
}
</style>
网友评论