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 :border-bottom="false">
				<u-search :placeholder="$t('stock.tips')" v-model="keyword" :action-text="$t('unified.search')" style="margin-right: 26rpx;color: #FFFFFF !important;" @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">{{$t('stock.specifications')}}</view>
					<view class="list-right">{{$t('stock.stock')}}</view>
				</view>
				<template v-if="datalist&&datalist.length">
					<view class="list-row u-flex u-skeleton" v-for="item in datalist" :key="item.matDescribe">
						<view class="list-left u-skeleton-rect">{{item.matDescribe}}</view>
						<view class="list-right u-skeleton-rect">{{item.stock}}</view>
					</view>
				</template>
				<u-empty v-else :text="$t('unified.nodata')" 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: this.$t('stock.tabs_a')
				}],
				// 分页信息
				first: 0,
				pageSize: 10, //每页条数
				currentPage: 1, //当前页码
				totalPage: 0, //总页码数
				loadStatus: "loadmore",
				loadText: {
					loadmore: this.$t('stock.loadmore'),
					loading: this.$t('stock.loading'),
					nomore: this.$t('stock.nomore')
				},
				// 数据信息
				datalist: []
			}
		},
		onLoad() {
			uni.showLoading({
				title: this.$t('unified.Loading')
			});
			this.handleGetFilterData();
			this.handleGetData();
		},
		methods: {
			scrollBottom(v) {
				
				if (this.loadStatus == "loadmore") {
					this.loadStatus = 'loading';
					uni.showLoading({
						title: this.$t('unified.Loading')
					});
					// 模拟数据加载
					this.first += 1;
					this.currentPage += 1;
					this.handleGetData();
					this.loadStatus = 'loadmore';
				}

			},

			handleSearch: function(v) {
				this.first = 0;
				this.currentPage = 1;
				
				this.handleGetData();
			},
			handleFilterBrand: function(v2) {
				this.first = 0;
				this.currentPage = 1;
				this.current = v2;
				this.currentBrand = this.brandlLst[this.current].brandCode;
				this.handleGetData();
				
				
			},
			handleGetFilterData: function() {
				var _this = this;
				request({
					url: '/baseReq/getBrandListByStoreId',
					method: 'Post',
					data: {
						storeId: this.$store.state.storeInfo.storeId,
						userId: this.$store.state.storeInfo.userId
					}
				}).then(res => {
					if (res.data.code == 0) {
						
						// 获取品牌列表
						_this.brandlLst = res.data.data;
						_this.brandlLst.unshift({
							brandName: _this.$t('stock.tabs_a'),
							brandCode: "all"
						});
					} else {
						
						uni.showToast({
							title: res.data.msg,
							icon: "none",
							duration: _this.$store.state.showToastDuration
						});
					}
				}).catch(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: this.$t('unified.Loading')
				});
				var _this = this;
				request({
					url: '/homepage/storeGetStock',
					method: 'post',
					data: {
						storeId: this.$store.state.storeInfo.storeId,
						userId: this.$store.state.storeInfo.userId,
						current: _this.currentPage,
						pageSize: _this.pageSize,
						brandCode: _this.currentBrand == "all" ? "" : _this.currentBrand,
						specKey: _this.keyword
					}
				}).then(res => {
					if (res.data.code == 0) {
						
						// 获取数据列表
						if (_this.first == 0) {
							_this.datalist = [];
							_this.datalist = _this.datalist.concat(res.data.data);
							_this.total = parseInt(res.data.count);
							_this.totalPage = Math.ceil(_this.total / _this.pageSize);
							
						} else {
							
							
							_this.datalist = _this.datalist.concat(res.data.data);
							
						};
						// 分页
						if (_this.currentPage < _this.totalPage) {
							_this.loadStatus = "loadmore"
						} else {
							
							_this.loadStatus = "nomore"
						}
					} else {
						
						uni.showToast({
							title: res.data.msg,
							icon: "none",
							duration: _this.$store.state.showToastDuration
						});
					}
				}).catch(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>