web-app-v1/pages/stock/ruku.vue

<template>
	<view class="RuKuContainer">
		<view class="all">
			<!-- ：总共<text class="spec">{{ 0 }}</text>件 -->
			<view class="num">待入库</view>
			<view class="btn" @click="toUrlLink('stock/record?type=2')">入库记录</view>
		</view>
		<scroll-view class="orderList" scroll-y="true" @scrolltolower="getMore">
			<view
				v-for="item in list"
				:key="item.order_id"
				class="orderItem"
			>
				<view class="orderTop">
					<view class="orderNum">
						单号：{{ item.order_num }}
					</view>
					<view class="allNum">
						共{{ item.number }}箱
					</view>
				</view>
				<view class="orderBottom">
					<view class="time">
						{{ item.created_at | dateFormatter('yyyy/MM/dd') }}
					</view>
					<view class="infoBtn" @click.stop="toRuKu(item.order_id)">
						货物详情
					</view>
				</view>
			</view>
			<view v-if="!isMore" class="noTip">没有更多了</view>
		</scroll-view>
	</view>
</template>

<script>
	import { allDaiRuKu } from "@/apis/stock.js"
	export default {
		data() {
			return {
				page_index: 1,
				list: [],
				isMore: true
			}
		},
		onLoad() {
			this.getAllDaiRuKu()
		},
		methods: {
			toRuKu(id) {
				uni.removeStorageSync('rukuOpenId')
				this.toUrlLink(`stock/dai_ruku?order_id=${id}`)
			},
			getMore() {
				if(!this.isMore) return false
				this.page_index += 1
				this.getAllDaiRuKu()
			},
			getAllDaiRuKu() {
				const _this = this
				uni.showLoading()
				allDaiRuKu({ page_index: _this.page_index }).then(res => {
					uni.hideLoading()
					if(res.code === 200) {
						this.list = [...this.list, ...res.data.list]
						if(res.data.list.length < 20) {
							this.isMore = false
						}
					} else {
						uni.showModal({
							content: res.message || '获取入库详情失败',
							showCancel: false
						})
					}
				}).catch(() => {
					uni.hideLoading()
					uni.showModal({
						content: '获取入库详情失败',
						showCancel: false
					})
				})
			},
			toUrlLink(url) {
				if(!url) return false
				uni.navigateTo({
					url: `../${url}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		width: 100%;
		height: 100%;
	}
	.RuKuContainer {
		width: 100%;
		height: 100%;
		background-color: #F9F9FB;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.btn {
			width: 140rpx;
			height: 56rpx;
			border-radius: 8rpx;
			background-color: #EA4A41;
			color: #FFFFFF;
			font-size: 28rpx;
			line-height: 56rpx;
			text-align: center;
			text-align: center;
		}
		.all {
			width: 100%;
			height: 116rpx;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.num {
				color: #333333;
				font-size: 36rpx;
				line-height: 50rpx;
				font-weight: bold;
				.spec {
					color: #EA4A41 !important;
				}
			}
		}
		.orderList {
			width: 100%;
			flex: 1;
			overflow: hidden;
			.orderItem {
				width: calc(100% - 60rpx);
				margin: 0 auto 30rpx auto;
				background-color: #ffffff;
				padding: 30rpx;
				background-color: #ffffff;
				.orderTop, .orderBottom {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
				.orderTop {
					margin-bottom: 30rpx;
					.orderNum, .allNum {
						color: #333333;
						font-size: 32rpx;
						line-height: 44rpx;
					}
				}
				.orderBottom {
					.time {
						color: #999999;
						font-size: 28rpx;
						line-height: 40rpx;
					}
					.infoBtn{
						width: 176rpx;
						height: 68rpx;
						background: linear-gradient(to right, #F97C55 0%, #F44545 100%);
						color: #FFFFFF;
						font-size: 28rpx;
						line-height: 68rpx;
						text-align: center;
						border-radius: 68rpx;
					}
				}
			}
		}
		.noTip {
			text-align: center;
			padding: 20rpx 0;
			width: 100%;
		}
	}
</style>