luban-mall/pagesA/order/order.vue

<template>
	<view>
		<status-nav :ifReturn="true" navBarTitle="订单管理" :marginBottom="0"></status-nav>
		<!-- 订单导航 -->
		<view class="order-nav flex" :style="{top:newTop+'px'}">
			<view class="item" :class="activeIndex == index?'cur':''" v-for="(item,index) in orderNav" @tap="changeNav(index,item.tag)">{{item.title}}</view>
		</view>
		<!-- 订单列表 -->
		<view class="order-list">
			<view class="order-item" @tap.stop="toDetail(item.id)" v-for="(item,index) in orderList" :key="index" v-if="isLoading">
				<view class="order-code flex">
					<text>订单号：{{item.coding}}</text>
					<text class="status">{{item.status_text}}</text>
				</view>
				<view class="item-bg">
					<view class="item flex" v-for="(item1,index1) in item.skus" :key="index1">
						<view class="img"><image :src="item1.spu_cover" mode="widthFix"></image></view>
						<view class="txt">
							<view class="title">{{item1.spu_name}}</view>
							<view class="specs clips2">规格：{{item1.custom_title}}</view>
							<view class="price flex">
								<text>￥{{item1.price}}</text>
								<view><text>x</text>{{item1.num}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="total-price flex">
					<text>合计：￥{{item.original_price}}</text>
					<view class="btn" @tap.stop="cancleEv(item.coding)" v-if="item.status == 'ordered'">取消订单</view>
					<view class="btn cur" @tap.stop="buyAgain(index)" v-if="item.status == 'completed' || item.status == 'closed'">再次购买</view>
				</view>
			</view>
		</view>
		<!-- 到底啦 -->
		<view class="more-txt" style="padding-bottom: 40rpx;" v-if="total!==0 && totalAll == total">—— 到底啦 ——</view>
		
		<nothing-page v-if="total==0&&totalAll == total" content="还没有相关订单哟(*^▽^*)"></nothing-page>
	</view>
</template>

<script>
	import statusNav from '@/components/status-navs/status-nav';
	import {userInfoEv} from '@/jsFile/public-api.js';
	export default {
		components:{
			statusNav
		},
		data() {
			return {
				newTop:uni.getSystemInfoSync().statusBarHeight + 50,
				orderNav:[
					{title:'全部',tag:'all'},
					{title:'已下单',tag:'ordered'},
					{title:'已完成',tag:'completed'},
					{title:'已取消',tag:'closed'},
				],
				activeIndex:0,
				orderList:[],
				flag:true,
				ifLoading:false,
				total:0,
				totalAll:-1,
				page: 1,
				size: 10,
				tag: 'all',
				cacheBusinessId:-1, //商户id
				isLoading:false,
			}
		},
		onLoad(op) {
			if(op.tag !== ''){
				this.tag = op.tag;
			}
			if(op.index !== ''){
				this.activeIndex = op.index;
			}
			if(op.business_id){
				this.cacheBusinessId = op.business_id;
			}
		},
		onShow() {
			if(this.cacheBusinessId !== -1){
				this.$requst.post('/api/index/change-business',{business_id:this.cacheBusinessId}).then(res=>{
					if(res.code == 0){
						this.getOrderList();
						userInfoEv();
					}
				})
			}else{
				this.getOrderList();
				userInfoEv();
			}
		},
		onReachBottom(e) {
			if(this.orderList.length<this.total){
				this.page++;
				this.getOrderList();
			}
		},
		// 分享到微信
		onShareAppMessage() {
			let path = uni.getStorageSync('page-path-options')+'?business_id='+uni.getStorageSync('business_id');
			return {
				path:path
			}
		},
		// 分享到朋友圈
		onShareTimeline(res){
			let path = uni.getStorageSync('page-path-options')+'?business_id='+uni.getStorageSync('business_id');
			return {
				path:path
			}
		},
		methods: {
			// 导航切换
			changeNav(index,tag) {
				this.total=0;
				this.totalAll=-1;
				this.activeIndex = index;
				this.tag = tag;
				this.orderList=[];
				this.page = 1;
				this.getOrderList();
			},
			// 获取订单列表
			getOrderList(){
				uni.showLoading({
					title: '加载中'
				});
				this.isLoading =false;
				let params = {
					page: this.page,
					size: this.size,
					tag: this.tag
				}
				this.$requst.get('/api/user/order',params).then(res=>{
					console.log(res,'订单列表')
					if(res.data.length!=0){
						this.total = res.data.total;
						let newArr = [];
						res.data.list.forEach(item=>{
							let obj = {
								id: item.id, //id
								coding: item.coding, //订单号
								original_price: item.original_price, //总价
								status: item.status, //订单状态英文
								status_text: item.status_text, //订单状态中文
								skus: item.skus //订单详情
							}
							newArr.push(obj);
						})
						this.orderList =newArr;
						if(this.orderList.length == this.total){
							this.totalAll = this.total;
						}
					}
					uni.hideLoading();
					this.isLoading =true;
				})
			},
			// 去详情
			toDetail(id){
				uni.navigateTo({
					url:`/pagesA/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.orderList = [];
						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)
					}
				})
			},
			// 再次购买
			buyAgain(index){
				let buyList = [];
				let newArr = this.orderList[index];
				newArr.skus.forEach(item=>{
					let obj = {
						sku_coding: item.coding,
						num: item.num
					}
					buyList.push(obj);
				})
				uni.setStorageSync('buyList',buyList);
				uni.navigateTo({
					url:'/pagesA/cart/prepare'
				})
			}
		}
	}
</script>

<style scoped>
	
</style>