225 lines
7.2 KiB
Vue
225 lines
7.2 KiB
Vue
<template>
|
||
<view>
|
||
<status-container titlet="订单管理" :ifCustomer='false'>
|
||
<view slot="content" style="margin: -20rpx -20rpx 0 -20rpx;">
|
||
<view class="bacf posir">
|
||
<view class="posi-sticky pad-x20 pad-zy20" :style="{top: newTop +'px'}">
|
||
<!-- <scrollTextSlide @changeEv="tabTap" :list="tagList" :activeIndex="activeIndex"></scrollTextSlide> -->
|
||
<swiper-tab-jl :list="tagList" v-model="activeIndex" @changeEv="tabTap" itemColor="#FFFFFF"></swiper-tab-jl>
|
||
</view>
|
||
<swiper :style="{height: swiperHeight + 'px'}" class="fon30" style="background-color: #f4f4f4;" :current="activeIndex" @change="swiperChange">
|
||
<swiper-item v-for="(item,index) in dataList" :key="index" class="pad-sx30">
|
||
<scroll-view scroll-y @scrolltolower="scrollBottomEv" style="height: 100%;">
|
||
<!-- 列表数据 -->
|
||
<view class="radius20 bacf pad-zy30 mar-x25 mar-zy40" @tap="goDetail(item1.id)" v-for="(item1,index1) in dataList[index]" :key="index1">
|
||
<view class="disjbac bbot pad30" style="margin: 0 -30rpx;">
|
||
<view class="">订单号：{{item1.coding}}</view>
|
||
<view class="" :style="{color: ['#f83030','#f83030','#f83030','#a0a0a0','#a0a0a0'][0]}">{{item1.status_text}}</view>
|
||
</view>
|
||
<view class="disjb borbot pad-sx30" v-for="(item2,index2) in item1.skus" :key="index2">
|
||
<image class="mar-y30 flexs radius40" :src="item2.spu_cover" mode="" style="width: 210rpx;height: 210rpx;"></image>
|
||
<view class="width100 disjb fc" style="height: 210rpx;">
|
||
<view class="clips2 fon24">{{item2.spu_name}}</view>
|
||
<view class="">
|
||
<view class="fon24 mar-x30" style="color: #8c8c9b;">单位：{{item2.sku_unit}}</view>
|
||
<view class="disjbac ">
|
||
<view class="textc bold">￥{{item2.price}}</view>
|
||
<view class="fon24" style="color: #8c8c9b;">x{{item2.num}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="disjbac tbot pad30" style="margin: 0 -30rpx;">
|
||
<view class="bold" style="color: #f83030;">合计：￥{{item1.original_price}}</view>
|
||
<view class="btn" @tap.stop="cancleEv(item1.coding)" v-if="item1.status == 'order_placed'">取消订单</view>
|
||
<view class="btn csbtn" @tap.stop="buyEv(index1)" v-if="item1.status == 'completed' || item1.status == 'cancel'">再次购买</view>
|
||
<!-- <view class="btn csbtn" @tap.stop="affirmEv(item1.id)" v-if="item1.status == 'shipped' || item1.status == 'arrived'">确认收货</view> -->
|
||
</view>
|
||
</view>
|
||
<view class="pad-x40" v-if="total==totalAll"><pitera textStr="—— 到底啦 ——"></pitera></view>
|
||
</scroll-view>
|
||
</swiper-item>
|
||
</swiper>
|
||
<view class="loading-box" v-show="ifLoading" style="position: absolute;bottom: 20rpx; left: 50%;transform: translateX(-50%);">
|
||
<view class="loader-16"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</status-container>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// 底部组件
|
||
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
||
import swiperTabJl from '@/components/swiper-tab/swiper-tab-jl.vue';
|
||
import pitera from '@/components/nothing/pitera';
|
||
export default {
|
||
components:{
|
||
'foot-tab' :footTab,
|
||
swiperTabJl,
|
||
pitera
|
||
},
|
||
data() {
|
||
return {
|
||
tagList:[
|
||
{title:'全部',tag:'all'},
|
||
{title:'已下单',tag:'order_placed'},
|
||
{title:'制作中',tag:'makeing'},
|
||
{title:'已发货',tag:'shipped'},
|
||
{title:'已送达',tag:'arrived'},
|
||
{title:'已取消',tag:'cancel'},
|
||
],
|
||
activeIndex:0,
|
||
dataList:[[],[],[],[],[],[]],
|
||
flag:true,
|
||
swiperHeight:uni.getSystemInfoSync().windowHeight,
|
||
newTop:uni.getSystemInfoSync().statusBarHeight + 50,
|
||
ifLoading:false,
|
||
total:0,
|
||
totalAll:0,
|
||
page: 1,
|
||
size: 10,
|
||
tag: 'all'
|
||
}
|
||
},
|
||
onLoad(op) {
|
||
const query = wx.createSelectorQuery().in(this)
|
||
query.select('.posi-sticky').boundingClientRect((rect) => {
|
||
this.swiperHeight = this.swiperHeight - this.newTop - rect.height;
|
||
}).exec()
|
||
if(op.index) {
|
||
this.activeIndex = op.index;
|
||
}
|
||
this.getOrderList();
|
||
},
|
||
methods: {
|
||
tabTap(e) {
|
||
this.activeIndex = e;
|
||
this.page = 1;
|
||
this.dataList = [[],[],[],[],[],[]];
|
||
this.getOrderList();
|
||
},
|
||
swiperChange(e) {
|
||
this.activeIndex = e.detail.current;
|
||
},
|
||
scrollBottomEv(e) {
|
||
console.log('到底了...')
|
||
this.ifLoading = true;
|
||
let pageSize = Math.floor(this.totalAll/this.size)
|
||
if(this.page <= pageSize){
|
||
this.page++;
|
||
this.getOrderList();
|
||
}else{
|
||
this.ifLoading = false;
|
||
return false;
|
||
}
|
||
setTimeout(()=>{
|
||
this.ifLoading = false;
|
||
},2000)
|
||
},
|
||
// 获取订单列表
|
||
getOrderList(){
|
||
let params = {
|
||
page: this.page,
|
||
size: this.size,
|
||
tag: this.tagList[this.activeIndex].tag
|
||
}
|
||
this.$requst.get('/api/user/order',params).then(res=>{
|
||
if(res.data.length!=0){
|
||
this.totalAll = res.data.total;
|
||
res.data.list.forEach(item=>{
|
||
let dataObj = {
|
||
id: item.id, //id
|
||
coding: item.coding, //订单号
|
||
original_price: item.original_price, //总价
|
||
status: item.status, //订单状态英文
|
||
status_text: item.status_text, //订单状态中文
|
||
skus: item.skus //订单详情
|
||
}
|
||
this.dataList[this.activeIndex].push(dataObj)
|
||
})
|
||
console.log(this.dataList[this.activeIndex],'订单列表')
|
||
if(this.page == Math.floor(this.totalAll/this.size)+1){
|
||
this.total = this.totalAll;
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 去详情
|
||
goDetail(id){
|
||
uni.navigateTo({
|
||
url:'/pagesB/order-detail/order-detail?id='+id
|
||
})
|
||
},
|
||
// 取消订单
|
||
cancleEv(coding){
|
||
let params = {
|
||
order_coding: coding //订单号
|
||
}
|
||
this.$requst.post('/api/order/cancel',params).then(res=>{
|
||
if(res.code==0) {
|
||
this.$toolAll.tools.showToast('取消订单成功(*^▽^*)');
|
||
this.dataList = [[],[],[],[],[],[]];
|
||
this.page = 1;
|
||
this.getOrderList();
|
||
} else {
|
||
this.$toolAll.tools.showToast(res.msg)
|
||
}
|
||
})
|
||
},
|
||
// 确认收货
|
||
affirmEv(id){
|
||
let params = {
|
||
order_id: id //订单号
|
||
}
|
||
this.$requst.post('/api/order/accepted',params).then(res=>{
|
||
if(res.code==0) {
|
||
this.$toolAll.tools.showToast('确认收货成功(*^▽^*)');
|
||
this.dataList = [[],[],[],[],[],[]];
|
||
this.page = 1;
|
||
this.getOrderList();
|
||
} else {
|
||
this.$toolAll.tools.showToast(res.msg)
|
||
}
|
||
})
|
||
},
|
||
// 再次购买
|
||
buyEv(index){
|
||
let buyList = [];
|
||
let newArr = this.dataList[this.activeIndex][index];
|
||
newArr.skus.forEach(item=>{
|
||
let obj = {
|
||
sku_coding: item.coding,
|
||
num: item.num
|
||
}
|
||
buyList.push(obj);
|
||
})
|
||
uni.setStorageSync('buyList',buyList);
|
||
uni.navigateTo({
|
||
url:'/pagesB/settlement/settlement'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.btn{
|
||
width: 150rpx;
|
||
height: 64rpx;
|
||
line-height: 64rpx;
|
||
color: #8c8c9b;
|
||
border: 2rpx solid #d3d3d3;
|
||
border-radius: 20rpx;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
}
|
||
.csbtn{
|
||
border: none;
|
||
background: linear-gradient(to right,#ff3772 0%,#fd5549 100%);
|
||
color: #FFFFFF;
|
||
box-shadow: 0rpx 6rpx 10rpx rgba(255, 55, 114, .3);
|
||
}
|
||
</style>
|