parts_shop_ui_LT/pages/views/stock/index.vue

<template>
	<view class="bg-set" :class="mask ? 'tl-show': ''">
		<u-navbar :autoBack="true" :placeholder="true" leftIconColor="#fff" bgColor="#FD4B09">
			<view slot="center" style="width: 88%;margin-left: 80rpx;">
				<u-search v-model="form.goods" :animation="true"
					:actionStyle="{color:'#fff'}" @custom="custom" @search="custom"></u-search>
			</view>
		</u-navbar>
		<view class="topBackground" :style="{top: revenueTop+44+'px'}" style="overflow:hidden">
			<u-tabs :list="list" @click="click" :activeStyle="{ color: '#fff' }" :inactiveStyle="{ color: '#ffffff80' }"
				lineColor="#fff">
				<view slot="right" style="font-size: 15px;color: #fff;">
					<text style="margin-left: 10rpx;">|<text style="margin:0rpx 15rpx"
							@click="show = true,mask = true">筛选</text></text>
				</view>
			</u-tabs>
		</view>
		<view class="statistics_h" style="font-size: 44rpx;">
			<view class="statistics">
				<view style="display: flex;margin: 5rpx auto;">
					<view style="width: 60%;text-align: center;">价格</view>
					<view style="width: 40%;text-align: center;">数量</view>
				</view>
				<view style="display: flex;margin: 5rpx auto;">
					<view style="width: 60%;">库存总价:￥{{priceForm.totalPrice}}</view>
					<view style="width: 40%;text-align: center;">
						{{priceForm.totalNumber?priceForm.totalNumber.slice(0,priceForm.totalNumber.length-3):priceForm.totalNumber}}
					</view>
				</view>
				<view style="display: flex;margin: 5rpx auto;">
					<view style="width: 60%;">当期入库:￥{{priceForm.RKPrice}}</view>
					<view style="width: 40%;text-align: center;">
						{{priceForm.RKNumber?priceForm.RKNumber.slice(0,priceForm.RKNumber.length-3):priceForm.RKNumber}}
					</view>
				</view>
				<view style="display: flex;margin: 5rpx auto;">
					<view style="width: 60%;">当期出库:￥{{priceForm.CKPrice}}</view>
					<view style="width: 40%;text-align: center;">
						{{priceForm.CKNumber?priceForm.CKNumber.slice(0,priceForm.CKNumber.length-3):priceForm.CKNumber}}
					</view>
				</view>
			</view>
		</view>
		<view style="margin: 0rpx auto;width: 96%;" class="content">
			<view v-for="(item,index) in dataList" :key="item.id"
				style="width: 100%;margin: 10rpx auto;background-color: #fff;padding: 0rpx 0;border-radius: 10rpx;">
				<view style="width: 100%;margin: 0 auto;">
					<view style="display: flex;height: 140rpx;">
						<view style="width: 140rpx;height: 140rpx;">
							<image style="width: 100%;height: 100%;" :src="item.url?item.url:'../../../static/images/404.png'"></image>
						</view>
						<view style="font-size: 24rpx;width: calc(100% - 150rpx);margin-left: 10rpx;">
							<view style="font-size: 26rpx;font-weight: bold;">{{item.goods}}</view>
							<view style="display: flex;margin: 10rpx 0;">
								<view style="width: 50%;">均价:{{item.stockPrice}}</view>
								<view style="width: 50%;">售价:{{item.salesPrice}}</view>
							</view>
							<view style="display: flex">
								<view style="width: 50%;">仓库:{{item.storage}}</view>
								<view style="width: 50%;">
									库存:{{item.balance?item.balance.slice(0,item.balance.length-3):item.balance}}
								</view>
							</view>
							<!-- <view style="display: flex">
								<view style="width: 50%;">
									库存下限:{{item.lowerLimit?item.lowerLimit.slice(0,item.lowerLimit.length-3):item.lowerLimit}}
								</view>
								<view style="width: 50%;">
									产品分类:{{item.goodsType}}
								</view>
							</view> -->
						</view>
					</view>
				</view>
			</view>
			<u-empty v-if="total == 0" style="position: absolute;top: 45%;left: 50%;transform:translate(-50%,-50%)"
				mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
			<u-loadmore v-if="total !== 0 && dataList.length != 0" :status="status" />
		</view>
		<u-popup :show="show" @close="show = false,mask = false" closeable :closeOnClickOverlay="false" zIndex="10070">
			<view style="mawidth: 100%;margin: auto 30rpx;margin-top: 20rpx;padding-bottom: 20rpx;">
				<text>筛选条件</text>
				<u--form labelPosition="left" :model="formTwo" labelWidth="150rpx">
					<u-form-item label="产品分类" borderBottom @click="filterAll(['goodsTypeName','goodsTypeId'])">
						<u-input v-model="formTwo.goodsTypeName" border="none" placeholder="请选择" suffixIcon="arrow-right"
							disabled disabledColor="#ffffff" />
					</u-form-item>
				</u--form>
				<text style="font-size: 30rpx;">库存筛选</text>
				<view style="display: flex;justify-content: space-between;">
					<u-button :type="formTwo.inventoryBalance == 0?'primary':''" text="库存数量＞0" @click="stock(0)">
					</u-button>
					<u-button :type="formTwo.inventoryBalance == 1?'primary':''" text="库存数量≤0" @click="stock(1)">
					</u-button>
				</view>
				<text style="font-size: 30rpx;">标签筛选</text>
				<view>
					<u-checkbox-group v-model="formTwo.labels" placement="column">
						<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxList"
							:key="index" :label="item.dictValue" :name="item.dictKey">
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<view style="display: flex;justify-content: space-between;padding-top: 20rpx;">
					<view style="width: 45%;">
						<u-button text="全部清空" type="warning" @click="confirmEmptying"></u-button>
					</view>
					<view style="width: 45%;">
						<u-button text="确认搜索" type="primary" @click="confirmSearch"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<u-picker :show="dropDown" :columns="columns" :keyName="keyName" @cancel="dropDown = false" @confirm="confirm">
		</u-picker>
	</view>
</template>

<script>
	import {
		queryBrand,
		queryStock,
		appStatistics,
		listAll
	} from '@/api/views/stock/index.js'
	export default {
		data() {
			return {
				list: [{
					name: '全部',
					value: ''
				}],
				show: false,
				mask: false,
				dropDown: false,
				columns: [],
				checkboxList: [],
				status: 'loadmore',
				revenueTop: 0,
				keyName: '',
				total: 0,
				dataList: [],
				screen: [],
				priceForm: {},
				form: {
					size: 20,
					current: 1
				},
				formTwo: {
					size: 20,
					current: 1
				}
			}
		},
		onLoad() {
			this.$u.api.getWorkDicts('goods_lable').then(res => {
				this.checkboxList = res.data
				this.keyName = "dictValue"
			})
			listAll().then(res => {
				res.data.forEach(item => this.list.push({
					name: item.cname,
					value: item.id
				}))
				this.query()
			})
			uni.getSystemInfo({
				success: (e) => {
					this.revenueTop = e.statusBarHeight
				}
			})
		},
		onReachBottom() {
			this.status = 'loading'
			if (this.dataList.length < this.total) {
				this.form.current++
				this.query()
			} else {
				this.status = 'nomore'
			}
		},
		methods: {
			confirmEmptying() {
				this.formTwo = {
					size: 20,
					current: 1
				}
				this.form = {
					size: 20,
					current: 1
				}
				this.dataList = []
				this.show = false
				this.mask = false
				this.query()
			},
			confirmSearch() {
				let form = {
					...JSON.parse(JSON.stringify(this.formTwo)),
					labels: this.formTwo.labels ? this.formTwo.labels.join(',') : '',
					size: 20,
					current: 1
				}
				this.form = form
				this.dataList = []
				this.show = false
				this.mask = false
				this.query()
			},
			stock(val) {
				this.$set(this.formTwo, "inventoryBalance", val)
			},
			//集合筛选条件
			filterAll(screen) {
				this.screen = screen
				switch (screen[1]) {
					case "goodsTypeId":
						uni.showLoading({
							title: '加载中',
							mask: true
						});
						listAll().then(res => {
							this.columns = [res.data]
							this.keyName = "cname"
							this.dropDown = true
							uni.hideLoading()
						})
						break;
				}
			},
			//选择确认
			confirm(e) {
				this.formTwo[this.screen[0]] = e.value[0].cname
				this.formTwo[this.screen[1]] = e.value[0].id
				this.dropDown = false
			},
			query() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				appStatistics(this.form).then(res => {
					this.priceForm = res.data
				})
				queryStock(this.form).then(res => {
					this.total = res.data.total || 0
					if (res.data.records) {
						this.dataList = this.dataList.concat(res.data.records)
					}
					uni.hideLoading();
					if (this.total < 10) {
						this.status = 'nomore'
					}
				})
			},
			custom(e) {
				this.dataList = []
				this.form = {
					goods: e,
					size: 20,
					current: 1,
				}
				this.query()
			},
			click(item) {
				this.dataList = []
				this.form = {
					goodsTypeId: item.value,
					size: 20,
					current: 1,
				}
				this.query()
			}
		}
	}
</script>

<style scoped>
	.tl-show {
		overflow: hidden;
		position: fixed;
		height: 100%;
		width: 100%;
	}

	.topBackground {
		position: fixed;
		top: 0;
		z-index: 1;
		width: 100%;
		background-color: #FF6F3B;
	}

	.statistics_h {
		position: fixed;
		top: calc(88px + var(--status-bar-height));
		z-index: 1;
		width: 100%;
		background-color: #fff;
		padding-top: 10rpx;
	}

	.content {
		margin-top: 355rpx !important;
	}

	.statistics {
		width: calc(96% - 20rpx);
		margin: 0 auto;
		background: url("../../../static/images/bg.png") no-repeat;
		background-size: 100% 100%;
		border-radius: 20rpx;
		color: #fff;
		/* padding: 10rpx; */
		padding: 10rpx 0rpx 10rpx 10rpx;
		font-size: 38rpx;
	}

	/* ::v-deep .u-line {
		border-bottom: 4rpx dashed #B6B6B6 !important;
	} */

	::v-deep .u-divider {
		margin: 10rpx;
	}

	::v-deep .u-album__row__wrapper>uni-image {
		border-radius: 10rpx;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}

	::v-deep .u-navbar__content {
		background-image: linear-gradient(to bottom, #FD4B09, #FF6F3B);
	}
</style>