sailun-tbr-web/pages/home/my-stock/my-stock.vue

<template>
	<view class="page">
		<!-- 我的库存 -->
		<view class="content-top">
			<u-navbar :background="background" back-icon-color="#ffffff" is-fixed>
				<u-search placeholder="请输入轮胎规格" v-model="keyword" style="margin-right: 26rpx;" @custom="handleSearch"></u-search>
			</u-navbar>
			<u-tabs ref="tabs" name="brandName" :list="brandlLst" bg-color="#0094FE" active-color="#ffffff" inactive-color="#ffffff"
			 font-size="30" :current="current" @change="handleFilterBrand"></u-tabs>
		</view>
		<scroll-view scroll-y @scrolltolower="scrollBottom" class="scroll-view-container">
			<view class="content-center">
				<view class="list-row u-flex list-title">
					<view class="list-left">轮胎规格</view>
					<view class="list-right">库存</view>
				</view>
				<template v-if="datalist&&datalist.length">
					<view class="list-row u-flex" v-for="item in datalist" :key="item.matDescribe">
						<view class="list-left">{{item.matDescribe}}</view>
						<view class="list-right">{{item.stock}}</view>
					</view>
				</template>
				<u-empty v-else text="暂无数据" mode="list"></u-empty>
			</view>
			<u-loadmore v-if="datalist&&datalist.length" :status="loadStatus" bgColor="#f2f2f2" :load-text="loadText"></u-loadmore>
		</scroll-view>
	</view>
</template>

<script>
	import {
		request
	} from '@/common/request/request';
	require("promise.prototype.finally").shim();
	export default {
		data() {
			return {
				background: {
					backgroundColor: "#0291FD",
				},
				current: 0,
				// 筛选条件
				keyword: "", //搜索规格
				currentBrand: "", //选中的品牌
				brandlLst: [{
					brandName: "全部"
				}],
				// 分页信息
				first: 0,
				pageSize: 20, //每页条数
				currentPage: 1, //当前页码
				totalPage: 0, //总页码数
				loadStatus: "loadmore",
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				// 数据信息
				datalist: []
			}
		},
		onLoad() {
			uni.showLoading({
				title: "加载中"
			});
			this.handleGetFilterData();
			this.handleGetData();
		},
		methods: {
			scrollBottom(v) {
				console.log(v);
				if (this.loadStatus == "loadmore") {
					this.loadStatus = 'loading';
					uni.showLoading({
						title: "加载中"
					});
					// 模拟数据加载
					this.first += 1;
					this.currentPage += 1;
					this.handleGetData();
					this.loadStatus = 'loadmore';
				}

			},

			handleSearch: function(v) {
				console.log(v)
				this.handleGetData();
			},
			handleFilterBrand: function(v2) {
				this.current = v2;
				this.currentBrand = this.brandlLst[this.current].brandName;
				this.handleGetData();
				console.log(arguments);
				console.log(this.brandlLst[this.current].brandName)
			},
			handleGetFilterData: function() {
				var _this = this;
				request({
					url: '/baseReq/getBrandListByStoreId',
					method: 'Post',
					data: {
						storeId: 1000,
						userId: "1"
					}
				}).then(res => {
					if (res.data.code == 0) {
						console.log(res)
						// 获取品牌列表
						_this.brandlLst = res.data.data;
						_this.brandlLst.unshift({
							brandName: "全部",
							brandCode: "all"
						});
					} else {
						console.log(res)
						uni.showToast({
							title: res.data.msg,
							icon: "none",
							duration: _this.$store.state.showToastDuration
						});
					}
				}).catch(err => {
					console.log(err)
					uni.showToast({
						title: _this.$store.state.showServerErrorMsg,
						icon: "none",
						duration: _this.$store.state.showToastDuration
					});
					this.currentPage -= 1;
				}).finally(() => {
					setTimeout(() => {
						uni.hideLoading();
						this.loading = false;
					}, 1000)
				});
			},
			// 获取数据
			handleGetData() {
				uni.showLoading({
					title: "加载中"
				});
				var _this = this;
				request({
					url: '/homepage/storeGetStock',
					method: 'post',
					data: {
						storeId: "990289",
						userId: "1",
						current: _this.currentPage,
						pageSize: _this.pageSize,
						brandCode: _this.currentBrand,
						specKey: _this.keyword
					}
				}).then(res => {
					if (res.data.code == 0) {
						console.log(res)
						// 获取数据列表
						if (_this.first == 0) {
							_this.datalist = res.data.data;
							_this.total = parseInt(res.data.data.count);
							_this.totalPage = Math.ceil(_this.total / _this.pageSize);
							console.log(_this.totalPage)
						} else {
							console.log(_this.currentPage);
							console.log(_this.totalPage)
							_this.datalist = _this.datalist.concat(res.data.data);
							console.log(_this.datalist.length)
						};
						// 分页
						if (_this.currentPage < _this.totalPage) {
							_this.loadStatus = "loadmore"
						} else {
							console.log("nomore")
							_this.loadStatus = "nomore"
						}
					} else {
						console.log(res)
						uni.showToast({
							title: res.data.msg,
							icon: "none",
							duration: _this.$store.state.showToastDuration
						});
					}
				}).catch(err => {
					console.log(err)
					uni.showToast({
						title: _this.$store.state.showServerErrorMsg,
						icon: "none",
						duration: _this.$store.state.showToastDuration
					});
					this.currentPage -= 1;
				}).finally(() => {
					setTimeout(() => {
						uni.hideLoading();
						this.loading = false;
					}, 1000)
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		width: 100%;
		height: 100%;
	}
	.content-top {
		background-color: #0094FE;
		padding-bottom: 119rpx;
	}

	.scroll-view-container {
		margin-top: -106rpx;
		height: calc(100% - 206rpx);
	}

	.content-center {
		width: 712rpx;
		margin: 0 auto 0 auto;
		border-radius: 20rpx;
		background-color: #FFFFFF;
	
		padding: 26rpx;

		.list-row {
			justify-content: space-between;
			border-bottom: 1px solid #E8E8E8;
			padding: 32rpx 0;

			.list-right {
				color: #149EE2;
				text-decoration: underline;
			}
		}

		.list-row.list-title {
			padding-top: 0;
			font-weight: 600;

			.list-right {
				color: #4D4D4D;
				font-weight: 400;
				text-decoration: none;
			}
		}

	}
</style>