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">
				库存是否充足：<text>{{total | filterTotal}}</text>
			</view>
			<view class="content">
				<u-button :custom-style="buttonCustomStyle" :hair-line="false" hover-class="none" @click="changeTab(0)">全部</u-button>
				<u-button :custom-style="buttonCustomStyle" :hair-line="false" hover-class="none" @click="changeTab(1)">品牌</u-button>
				<u-button :custom-style="buttonCustomStyle" :hair-line="false" hover-class="none" @click="changeTab(2)">花纹</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="请输入规格"></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">
					<view>
						{{ item.brand }}
					</view>
					<view>
						{{ item.maktx}}
					</view>
					<view>
						{{ item.stock | filterTotal }}
					</view>
				</view>
			</template>
			<view class="nodata" v-else>暂无数据</view>
		</view>
		<u-loadmore v-if="datalist&&datalist.length" :status="loadStatus" bgColor="#f2f2f2"></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',
				// 分页信息
				pageSize: 10, //每页条数
				currentPage: 1, //当前页码
				totalPage: 0, //总页码数
				loadStatus: "loadmore"
			};
		},
		onLoad() {
			this.handleGetData();
		},
		methods: {
			scrollBottom(v) {
				console.log(v);
				this.loadStatus = 'loading';
				// 模拟数据加载
				setTimeout(() => {
					this.handleGetData();
					this.loadStatus = 'loadmore';
				}, 1000)
			},
			changeTab(index) {
				this.currentTab = index;
				if (this.currentTab == 0) {
					this.currenBrand = "";
					this.currentPattern = "";
					this.currentSpec = "";
					this.handleGetData();
				} else if (this.currentTab == 1) {
					this.showBrand = true
				} else if (this.currentTab == 2) {
					this.showpattern = true
				}
			},
			// 获取数据
			handleGetData() {
				uni.showLoading({
					title: "加载中"
				});
				var _this = this;
				request({
					url: '/app/appAgent/getStoreAgentStock',
					method: 'post',
					data: {
						storeId: "990289",
						pageSize: _this.pageSize,
						page: _this.currentPage,
						brand: _this.currenBrand,
						spec: _this.currentSpec,
						pattern: _this.currentPattern
					}
				}).then(res => {
					if (res.data.code == 0) {
						console.log(res)
						// 获取品牌列表
						_this.brandList = [];
						res.data.data.brandList.forEach(function(val, index) {
							_this.brandList.push({
								value: index,
								label: val
							});
						});
						// 获取花纹列表
						_this.patternList = [];
						res.data.data.patternList.forEach(function(val, index) {
							_this.patternList.push({
								value: index,
								label: val
							});
						});
						// 获取数据列表
						_this.datalist = res.data.data.list;
						_this.total = res.data.data.stock;
						_this.totalPage = res.data.data.totalPage;
						// 分页
						if(_this.currentPage<_this.totalPage){
							_this.loadStatus = "loadMore"
						}else{
							_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
					});
				}).finally(() => {
					setTimeout(() => {
						uni.hideLoading();
						this.loading = false;
					}, 1000)
				});
			},
			// 筛选品牌
			confirmBrand: function(v) {
				this.currenBrand = v[0].label;
				this.handleGetData();
			},
			// 筛选花纹
			confirmPattern: function(v) {
				this.currentPattern = v[0].label;
				this.handleGetData();
			},
			searchSpec: function() {
				if(this.currentSpec){
					this.handleGetData();
				}
				console.log(this.currentSpec)
				
			},
			inputFocus() {
				console.log(111);
				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 = "充足"
				} else {
					valText = "紧张"
				};
				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>