yunshengtai-uniapp/pages/user/orderManage/index.vue

<template>
	<view class="goodsManage-page">
		<view class="nav acea-row row-around">
		  <view class="item" :class="{ on: type === 0 }" @click="changeType(0)">
		    <view>待付款</view>
		  </view>
		  <view class="item" :class="{ on: type == 1 }" @click="changeType(1)">
		    <view>待发货</view>
		  </view>
			<view class="item" :class="{ on: type == 2 }" @click="changeType(2)">
			  <view>已发货</view>
			</view>
			<view class="item" :class="{ on: type == 3 }" @click="changeType(3)">
			  <view>已完成</view>
			</view>
			<view class="item" :class="{ on: type == 4 }" @click="changeType(4)">
			  <view>退款&售后</view>
			</view>
		</view>
		<view class="goods-list-box">
			<view class="no-order" v-if="orderList.length == 0"><image src="https://download.cyjyyjy.com/no-order2.png"></image></view>
			<view class="goods-item" v-else v-for="item in orderList" :key="item">
				<view class="order-info acea-row row-between-wrapper">
					<view class="info-left acea-row">
						<view class="tips">
							<text v-if="type == 0">待付款</text>
							<text v-if="type == 1">待发货</text>
							<text v-if="type == 2">已发货</text>
							<text v-if="type == 3">已完成</text>
							<text v-if="type == 4">退款中</text>
						</view>
						<view class="order-num">{{item.orderId}}</view>
					</view>
					<view class="create-time">{{item.createTime}}</view>
				</view>
				<view class="item-top acea-row" v-for="(cart,cartInfoIndex) in item.cartInfo">
					<image class="goods-img" :src="cart.productInfo.image" mode="aspectFill"></image>
					<view class="info-box">
						<view class="title acea-row row-between-wrapper">
							<view class="line1 goods-name">{{ cart.productInfo.storeName }}</view>
						</view>
						<!-- <view class="colG">编码：1233</view> -->
						<view class="money">￥{{cart.productInfo.attrInfo.price}}</view>
						<view class="price-box acea-row row-between-wrapper">
							<view class="colG">{{cart.productInfo.attrInfo.sku}}</view>
							<view class="colG">X{{ cart.cartNum }}</view>
						</view>
					</view>
				</view>
				<view class="total-price-box acea-row row-right row-middle">
					<view class="colG">共{{item.cartInfo.length}}件(含快递费)</view>
					<view class="total-price">￥{{item.payPrice}}</view>
				</view>
				<!-- <view class="logistics-box" v-if="type == 2 || type == 3">
					<view class="name-box">
						<view class="label">收件人:</view>
						<view>张三</view>
					</view>
					<view class="name-box">
						<view class="label">收件电话:</view>
						<view>13688089909</view>
					</view>
					<view class="name-box">
						<view class="label">收件地址:</view>
						<view>武汉市 洪山区 卓刀泉南路南湖小区8栋1502号</view>
					</view>
				</view> -->
				<view class="btn-box acea-row row-right">
					<view class="close-btn" v-if="type == 0">关闭订单</view>
					<view class="tip-btn" v-if="type == 0">提醒付款</view>
					<view class="tip-btn" v-if="type == 1" @click="toSendGoods(item)">发货</view>
					<view class="tip-btn" v-if="type == 2" @click="toLogisics(item)">查看物流</view>
					<view class="close-btn" v-if="type == 4">联系客服</view>
					<view class="tip-btn" v-if="type == 4">同意退款</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getOrderData, getOrderList } from '@/api/order'
	export default{
		data(){
			return {
				type: 0,
				orderList: [],
				page: 1,
				limit: 20,
				loading: true,
				orderType: 'SELL'
			}
		},
		onShow() {
			console.log(this.$yroute.query.type)
			if(this.$yroute.query.type) {
				this.type = this.$yroute.query.type
			}
			this.getOrderList()
		},
		
		onReachBottom() {
		  this.getOrderList()
		},
		onPullDownRefresh() {
			this.goodsList = []
			this.page = 1
			this.loading = true
			this.getOrderList()
		},
		methods:{
			getOrderList() {
			  if (!this.loading) return
			  const { page, limit, type } = this
			  getOrderList({
			    page,
			    limit,
			    type,
					orderType: this.orderType
			  }).then(res => {
					if(this.page > 1) {
						this.orderList = this.orderList.concat(res.data)
					} else{
						this.orderList = res.data
					}
			    this.loading = res.data.length >= this.limit
					uni.stopPullDownRefresh()
			  })
			},
			changeType(idx){
				this.type = idx
				this.goodsList = []
				this.page = 1
				this.loading = true
				this.getOrderList()
			},
			//发货
			toSendGoods(item){
				this.$yrouter.push({
					path: '/pages/user/sendGoods/index',
					query:{
						orderId: item.orderId
					}
				})
			},
			//查看物流
			toLogisics(item){
				this.$yrouter.push({
					path: '/pages/order/Logistics/index',
					query:{
						id: item.orderId
					}
				})
			},
		}
	}
</script>

<style lang="less">
	.goodsManage-page{
		width: 100%;
		min-height: 100vh;
		background: #EEEEEE;
	}
	.nav{
		width: 100%;
		background-color: #fff;
		// padding: 12rpx 0;
		color: #707070;
		font-size: 28rpx;
		padding-top: 12rpx;
		position: fixed;
		top: 0;
		.item{
			padding-bottom: 12rpx;
		}
		.on{
			font-weight: 500;
			color: #000;
			border-bottom: 6rpx solid #000;
		}
	}
	.no-order{
		padding: 90rpx 0;
		width: 100%;
		text-align: center;
			image{
				width: 422rpx;
				height: 508rpx;
			}
	}
	.goods-list-box{
		width: 100%;
		padding: 90rpx 40rpx 32rpx;
		.goods-item{
			width: 100%;
			padding: 32rpx 22rpx 16rpx;
			border-radius: 12rpx;
			background: #fff;
			font-size: 28rpx;
			margin-bottom: 32rpx;
			.goods-img{
				width: 116rpx;
				height: 116rpx;
				border-radius: 12rpx;
				margin-right: 24rpx;
			}
			.order-info{
				font-size: 24rpx;
				color: #CECECE;
				margin-bottom: 30rpx;
				.tips{
					min-width: 60rpx;
					height: 30rpx;
					padding: 0 4rpx;
					background: #FFA47E;
					text-align: center;
					line-height: 30rpx;
					border-radius: 4rpx;
					color: #fff;
					font-size: 20rpx;
					margin-right: 12rpx;
				}
				.create-time{
					color: #000;
				}
			}
			.item-top{
				margin-bottom: 22rpx;
				border-bottom: 2rpx solid #ECECEC;
				padding-bottom: 24rpx;
			}
			.info-box{
				width: calc(100% - 140rpx);
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				
			}
			.title{
				line-height: 40rpx;
				color: #333333;
				.goods-name{
					width: 80%;
				}
			}
			.colG{
				font-size: 22rpx;
				color: #b7b7b7;
			}
			.money{
				color: #000;
				font-weight: 500;
				line-height: 40rpx;
			}
			.total-price-box{
				width: 100%;
				.total-price{
					color: #000;
					font-size: 32rpx;
					font-weight: 500;
					margin-left: 40rpx;
				}
			}
			.btn-box{
				border-top: 2rpx solid #ECECEC;
				width: 100%;
				padding: 16rpx 0 0;
				margin-top: 28rpx;
				font-size: 28rpx;
				image{
					width: 28rpx;
					height: 28rpx;
					margin-right: 6rpx;
				}
				view{
					width: 168rpx;
					height: 68rpx;
					border: 2rpx solid #D2D2D2;
					border-radius: 38rpx;
					text-align: center;
					line-height: 68rpx;
					color: #000;
					margin-left: 20rpx;
				}
				.close-btn{
					color: #000000;
					border-color: #D2D2D2;
				}
				.tip-btn{
					color: #000;
					border-color: #000;
				}
			}
			.logistics-box{
				width: 100%;
				background: #F5F5F5;
				padding: 20rpx;
				color: #1d1d1d;
				border-radius: 8px;
				margin-top: 22rpx;
				.name-box{
					width: 100%;
					display: flex;
					margin-bottom: 12rpx;
					.label{
						min-width: 140rpx;
						color: #BFBFBF;
					}
				}
			}
		}
	}
</style>