mall-applet1/pagesA/order-list/order-list.vue

225 lines
7.2 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<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>