sailun-tbr-web/pages/me/agent-stock/agent-stock.vue

<template>
	<!-- 经销商库存页面 -->
	<scroll-view scroll-y @scrolltolower="scrollBottom" class="scroll-view-container">
		<view class="header">
			<view class="header-one">
				{{$t('agentStock.stockStatus')}}：<text>{{total | filterTotal}}</text>
			</view>
			<view class="content">
				<u-button :custom-style="buttonCustomStyle" :hair-line="false" hover-class="none" @click="changeTab(0)">{{ $t('agentStock.all') }}</u-button>
				<u-button :custom-style="buttonCustomStyle" :hair-line="false" hover-class="none" @click="changeTab(1)">{{ $t('agentStock.brand') }}</u-button>
				<u-button :custom-style="buttonCustomStyle" :hair-line="false" hover-class="none" @click="changeTab(2)">{{ $t('agentStock.pattern')}}</u-button>
				<u-select style=" color: #fff;" v-model="showBrand" :list="brandList" @confirm="confirmBrand"></u-select>
				<u-select style=" color: #fff;" v-model="showpattern" :list="patternList" @confirm="confirmPattern"></u-select>
				<!-- <u-calendar style=" color: #fff;" v-model="showDate" :mode="mode"></u-calendar> -->
				<u-search :show-action="true" v-model="currentSpec" :animation="true" @custom="searchSpec" @search="searchSpec"
				 :style="inputCustomStyle" @focus="inputFocus" @blur="inputBlur" :placeholder="$t('agentStock.placeholder')"></u-search>
			</view>

		</view>
		<view class="content-one">
			<template v-if="datalist&&datalist.length">
				<view class="content-two" v-for="(item,index) in datalist" :key="index" v-cloak>
					<view>
						{{ item.brand }}
					</view>
					<view>
						{{ item.maktx}}
					</view>
					<view>
						{{ item.stock | filterTotal }}
					</view>
				</view>
			</template>
			<u-empty v-else :text="$('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>
</template>

<script>
	import {
		request
	} from '@/common/request/request';
	require("promise.prototype.finally").shim();
	export default {
		data() {
			return {
				buttonCustomStyle: {
					border: "none",
					background: "#0094FE",
					color: "#ffffff"
				},
				total: 0, //总库存数
				datalist: null,
				// 品牌信息
				brandList: null,
				currenBrand: "", // 选中品牌
				showBrand: false,
				// 花纹信息
				patternList: null,
				currentPattern: "", // 选中花纹
				showpattern: false,
				// 规格信息
				currentSpec: "",
				inputCustomStyle: {},
				// 选中tab
				currentTab: 0,
				// showDate: false,
				// mode: 'date',
				// 分页信息
				first: 0,
				pageSize: 20, //每页条数
				currentPage: 1, //当前页码
				totalPage: 0, //总页码数
				loadStatus: "loadmore",
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有更多啦'
				}
			};
		},
		onLoad() {
			uni.showLoading({
				title: this.$t('unified.Loading')
			});
			this.handleGetFilterData();
			this.handleGetData();
		},
		created() {
			uni.setNavigationBarTitle({
			    title: this.$t('agentStock.title')
			});
		},
		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';
				}

			},
			changeTab(index) {
				this.currentTab = index;
				if (this.currentTab == 0) {
					this.currenBrand = "";
					this.currentPattern = "";
					this.currentSpec = "";
					this.first = 0;
					this.currentPage = 1;
					this.handleGetData();
				} else if (this.currentTab == 1) {
					this.showBrand = true
				} else if (this.currentTab == 2) {
					this.showpattern = true
				}
			},
			// 获取筛选条件
			handleGetFilterData: function() {
				var _this = this;
				request({
					url: '/app/appAgent/getStoreAgentCondition',
				}).then(res => {
					
					if (res.data.code == 0) {
						
						// 获取品牌列表
						_this.brandList = [];
						res.data.data.data.brands.forEach(function(val, index) {
							_this.brandList.push({
								value: index,
								label: val
							});
						});
						// 获取花纹列表
						_this.patternList = [];
						res.data.data.data.patterns.forEach(function(val, index) {
							_this.patternList.push({
								value: index,
								label: val
							});
						});
					} else {
						
						uni.showToast({
							title: res.data.msg,
							icon: "none",
							duration: _this.$store.state.showToastDuration
						});
					}
				}).catch(err => {
					
					this.currentPage -= 1;
				}).finally(() => {
					setTimeout(() => {
						uni.hideLoading();
						this.loading = false;
					}, 1000)
				});
			},
			// 获取数据
			handleGetData() {
				uni.showLoading({
					title: this.$t('unified.Loading')
				});
				var _this = this;
				request({
					url: '/app/appAgent/getStoreAgentStock',
					method: 'post',
					data: {
						storeId:_this.$store.state.storeInfo.storeId,
						pagesize: _this.pageSize,
						page: _this.currentPage,
						brand: _this.currenBrand,
						spec: _this.currentSpec,
						pattern: _this.currentPattern
					}
				}).then(res => {
					if (res.data.code == 0) {
						
						// 获取数据列表
						if (_this.first == 0) {
							_this.datalist = [];
							_this.datalist = _this.datalist.concat(res.data.data.stockInfo);
							_this.total = parseInt(res.data.data.count);
							_this.totalPage = Math.ceil(_this.total / _this.pageSize);
							
						} else {
							
							
							_this.datalist = _this.datalist.concat(res.data.data.stockInfo);
							
						};
						// 分页
						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 => {
					
					this.currentPage -= 1;
				}).finally(() => {
					setTimeout(() => {
						uni.hideLoading();
						this.loading = false;
					}, 1000)
				});
			},
			// 筛选品牌
			confirmBrand: function(v) {
				this.currenBrand = v[0].label;
				this.currentPage = 1;
				this.first = 0;
				this.handleGetData();
			},
			// 筛选花纹
			confirmPattern: function(v) {
				this.currentPattern = v[0].label;
				this.currentPage = 1;
				this.first = 0;
				this.handleGetData();
			},
			searchSpec: function() {
				if (this.currentSpec) {
					this.first = 0;
					this.currentPage = 1;
					this.handleGetData();
				}
				

			},
			inputFocus() {
				
				this.inputCustomStyle = {
					position: "absolute",
					zIndex: "100",
					width: "98%",
					margin: "6rpx 1%"
				};
			},
			inputBlur() {
				var _this = this;
				setTimeout(function() {
					_this.inputCustomStyle = {};
				}, 30)

			}
		},
		filters: {
			filterTotal: function(val) {
				var valText;
				if (val >= 10) {
					valText = this.$t('agentStock.status1')
				} else {
					valText = this.$t('agentStock.status2')
				};
				return valText;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-view-container {
		height: 100%;
	}

	.header {
		height: 400rpx;
		width: 100%;
		background: #0094FE;
		color: #fff;
		font-size: 28rpx;
	}

	.header-one {
		text-align: center;
		padding-top: 40rpx;
	}

	.header-one>text {
		font-size: 52rpx;
	}

	.content {
		display: flex;
		justify-content: space-between;
		width: 700rpx;
		margin-top: 80rpx;
	}

	.content-one {
		width: 690rpx;
		// height: 305rpx;
		background: #FFFFFF;
		color: #000;
		font-size: 24rpx;
		box-shadow: 0px 0px 24px 0px rgba(101, 176, 249, 0.41);
		border-radius: 20px;
		margin: -100rpx auto 20rpx auto;
		min-height: calc(100% - 400rpx);
	}

	.content-one-view {
		width: 6rpx;
		height: 30rpx;
		background: #0292FD;
		position: relative;
		top: 20rpx;
		left: 30rpx;
	}

	.content-one-text {
		position: relative;
		top: -8rpx;
		left: 60rpx;
		font-size: 24rpx;
		font-weight: bold;
		color: #000;
	}

	.content-one-time {
		position: relative;
		top: -40rpx;
		left: 530rpx;
		font-size: 13rpx;
		color: #626262;
	}

	.content-two {
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		color: #6A6A6A;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding-top: 25rpx;
		padding-bottom: 25rpx;
	}

	.wrap-flex {
		display: flex;
	}

	.nodata {
		padding: 48rpx;
	}
</style>