InventoryOrderingxcx/pages/my/myOrder/myOrder.vue

<template>
	<view class="my__order">
		<view class="my__order-tabs">
			<u-tabs :list="list1" @change='changeTab' :scrollable="false" lineWidth="63"
				:activeStyle="{ color: '#4C96FF',}" :inactiveStyle="{color: '#626066',}"
				itemStyle=" height: 44px;"></u-tabs>
		</view>
		<view class="my__order-content">
			<view class="order_item" v-for="(item,index) in data" :key="index" @click="handleOrder(item.id)">
				<view class="item-top">
					<view class="time">下单时间：{{item.createTime}}</view>
					<view class="status" :style="{color:formatStatus(item.orderStatus).color}">
						{{formatStatus(item.orderStatus).name}}
					</view>
				</view>
				<view class="item-cnetent">
					<image class="order__ok-img" :src="item.productImages[0]"></image>
					<view class="order_info">
						<view>
							<view class="info-1">{{item.productName}}</view>
							<view class="info-2">{{item.productDesc}}</view>
						</view>
						<view class="num">
							<u-icon name="close" color="#606266" size="14"></u-icon>
							<text>{{item.tradeCount}}</text>
						</view>
						<view class="img-jiaoluo">
							<image src="../../../static/jiaoluo.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="line" style="margin-top: 30px;">
			<u-loadmore loadmoreText="没有更多了" line />
		</view>
		<view class="footer">
		</view>
	</view>
</template>

<script>
	import {
		getOrderList,
	} from '@/api/goods.js'
	export default {
		onLoad() {
			if (this.type != 2) {
				this.fetchData()
			}
			// this.fetchData()
		},
		onShow() {
			const app = getApp();
			let type = JSON.parse(JSON.stringify(app.globalData.type));
			app.globalData.type = null
			this.type = type
			if (this.type == 2) {
				this.searchData.pageNum = 1
				this.data = []
				this.fetchData()
			}
		},
		onReachBottom() {
			const {
				total,
				searchData: {
					pageNum,
					pageSize
				}
			} = this
			if (total <= (pageNum - 1) * pageSize) {
				return uni.$u.toast('没有更多了')
			}
			if (this.isLoading) return
			this.fetchData()
		},
		data() {
			return {
				type: '', //判断是否是取消返回
				isLoading: false,
				searchData: {
					data: {},
					pageNum: 1, // 页码
					pageSize: 10 // 每页条数
				},
				total: 0,
				data: [],
				list1: [{
					name: '全部',
					// orderStatus: 4
				}, {
					name: '待处理',
					orderStatus: 0,
					color: '#FFA133',
				}, {
					name: '已接单',
					orderStatus: 1,
					color: '#24C8DE;',
				}, {
					name: '已发货',
					orderStatus: 2,
					color: '#3E8DFF',
				}, {
					name: '已取消',
					orderStatus: 3,
					color: '#7F8696',
				}]
			};
		},
		methods: {
			formatStatus(type) {
				const value = this.list1.find(item => item.orderStatus == type)
				return {
					name: value.name,
					color: value.color
				}
			},
			// 获取列表
			async fetchData() {
				uni.showLoading({
					title: '加载中...',
					icon: 'loading',
					mask: true
				})
				this.isLoading = true
				try {
					const res = await getOrderList(this.searchData)
					uni.hideLoading()
					// console.log(res, 8787);
					if (res.data.list && res.data.list.length > 0) {
						this.data = [...this.data, ...res.data.list]
					}
					this.total = res.data.total
					this.searchData.pageNum++
				} finally {
					this.isLoading = false
					uni.hideLoading()
				}
			},
			changeTab(item) {
				// console.log(item)
				// this.data = this.list.filter(v => {
				// 	return item.orderStatus != 4 ? v.orderStatus == item.orderStatus : v
				// })
				// this.total = 0
				this.searchData.pageNum = 1
				this.searchData.data.orderStatus = item.orderStatus
				this.data = []
				this.fetchData()
			},
			handleOrder(id) {
				uni.navigateTo({
					url: `/pages/my/myOrderDetail/myOrderDetail?id=${id}`,

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my__order-tabs {
		background-color: #fff;
		position: sticky;
		top: 0;
		z-index: 99;
	}

	.my__order-content {
		padding: 0 12px;

		.order_item {
			background: #fff;
			padding: 12px 8px;
			margin-top: 14px;

			&:last-child {
				margin-bottom: 40px;
			}

			.item-top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 7.5px;

				.time {
					color: #495B7D;
					font-size: 13px;
					font-weight: 500;
				}

				.status {
					padding: 0 6px;
					border-radius: 4px;
					background: #F0F8FF;
					height: 20px;
					line-height: 20px;
					font-size: 13px;
				}
			}

			.item-cnetent {
				display: flex;

				.order__ok-img {
					width: 90px;
					height: 90px;
					border-radius: 8px;
				}

				.order_info {
					margin-left: 12px;
					width: calc(100% - 102px);
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					position: relative;

					.ellipsis {
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						margin-top: 4px;
					}

					.info-1 {
						color: #333;
						font-size: 17px;
						font-weight: 700;
						@extend .ellipsis
					}

					.info-2 {
						color: #606266;
						font-size: 13px;
						font-weight: 400;
						@extend .ellipsis
					}

					.num {
						color: #606266;
						font-size: 14px;
						font-weight: 500;
						display: flex;
						align-items: center;
					}

					.img-jiaoluo {
						width: 75px;
						height: 75px;
						position: absolute;
						right: -8px;
						bottom: -12px;

						image {
							width: 100%;
							height: 100%;
							object-fit: cover;
						}
					}
				}
			}
		}
	}

	.footer {
		height: 40px;
	}
</style>
</view>