front-end/hdApp/src/pagesStorehouse/inventory/select.vue

<template>
	<view class="billing_box_bg">


		<view class="input-wrap" >
			<view class="search-bar">
				<app-search-module v-model="py" placeholder="输入拼音首字母搜索" @input="searchFn" />
			</view>
			<view style="float:right">
				<button class="admin-button-com middle blue" @click="removeFromSave(0)">清除花材</button>
			</view>
		</view>

		<view class="scroll-middle_bx">
			<scroll-view scroll-y scroll-with-animation class="tab-view">
				<div v-for="(item, index) in globalClassItemList" :key="index" class="tab-bar-item" :class="[classIndex == index ? 'active' : '']" :data-current="index" @tap.stop="swichClass(index)">
					<text>{{ item.className || "" }}</text>
				</div>
				<view style="height: 120upx"></view>
			</scroll-view>
			<scroll-view scroll-y class="right-box" v-if="tabIndex == 0" :scroll-into-view="scroll_into_view" scroll-with-animation="true"
																@scroll="scroll_detail"
																lower-threshold="100"
																@scrolltolower="scroll_bottom">
			<block v-if="!$util.isEmpty(globalClassItemList)">
				<view class="item_list_bx selectAll" v-for="(classItem, classIndex) in globalClassItemList" :key="classIndex" :id="`class_${classIndex}`">
					<view class="item_list_title">
						{{ classItem.className }}
					</view>
					<template v-for="(productItem, productIndex) in classItem.child">
						<view style="height: 160upx" :id="`class_${classItem.classId}_${productItem.id}`" :key="productIndex">
						<Commondity v-if="classItem.isActive"
							:key="productIndex"
							:info="productItem"
							:selectJobType="selectJobType"
							@showAddModelFn="showAddModelFn"
							@replaceItemFn="replaceItemFn"
						></Commondity>
						</view>
					</template>
				</view>
			</block>
			<block v-else>
				<app-wrapper-empty title="暂无花材" :is-empty="$util.isEmpty(globalClassItemList)" />
			</block>
			</scroll-view>
			<block v-else>
				<view style="width:100%">
					<AppWrapperEmpty title="敬请期待" :is-empty="true" />
				</view>
			</block>
		</view>

		<modal-module :show="isAddModel" @cancel="addItemModelHidden" @click="confirmAddItemModel" :title="customData.name" color="#333" :size="32" padding="30rpx 30rpx" >
			<template slot="customContent">
				<view class="select-cmd_bx" v-if="customData">
					<view class="kc"> 库存{{ customData.stock?parseFloat(customData.stock):0 }} </view>
					<view class="num_bx">
						<!-- #ifdef APP-PLUS -->
						<input style="width: 430upx" v-model="customData.bigCount" v-if="globalUnitType == 0" type="number" />
						<text style="font-size:35upx;font-weight:bold;color:#666666;" v-if="globalUnitType == 0">扎</text>
						<input style="width: 430upx" v-model="customData.smallCount" v-if="globalUnitType == 1" type="number" />
						<text style="font-size:35upx;font-weight:bold;color:#666666;" v-if="globalUnitType == 1">支</text>
						<!-- #endif -->

						<!-- #ifdef MP-WEIXIN -->
						<input style="width: 430upx" v-model="customData.bigCount" v-if="globalUnitType == 0" :focus="isAddInputFocus" type="number" />
						<text style="font-size:35upx;font-weight:bold;color:#666666;" v-if="globalUnitType == 0">扎</text>
						<input style="width: 430upx" v-model="customData.smallCount" v-if="globalUnitType == 1" :focus="isAddInputFocus" type="number" />
						<text style="font-size:35upx;font-weight:bold;color:#666666;" v-if="globalUnitType == 1">支</text>
						<!-- #endif -->

						<button v-if="selectJobType == 'inventory'" style="position:absolute;top:276upx;left:230upx;" @click="customData.bigCount=99999" class="admin-button-com middle blue">盘点为零</button>

					</view>
				</view>
			</template>
		</modal-module>

		<FooterCart :offPrice="true" :price="allPrice" :count="allCount" @confirm="confirmSelectEvent"></FooterCart>

	</view>
</template>
<script>
import AppSearchModule from "@/components/module/app-search";
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import Commondity from "@/components/module/app-commodity";
import FooterCart from "@/components/module/app-footer-cart";
import ModalModule from "@/components/plugin/modal";
import productMins from "@/mixins/product";
export default {
	name: "select",
	components: {
		AppSearchModule,
		AppWrapperEmpty,
		Commondity,
		ModalModule,
		FooterCart
	},
	mixins: [productMins],
	data() {
		return {
			selectJobType: "inventory",
			isLimit: false,
			isSmallCount: false,
			tabIndex: 0,
			isModel: false,
			customData: {
				bigCount: 0,
				smallCount: 0
			},
			showSubmitModel: false,
			checkStock: false
		};
	},
	methods: {
		confirmSelectEvent() {
			this.$util.pageTo({url: "/pagesStorehouse/inventory/update",type:2})
		}
	}
};
</script>
<style lang="scss" scoped>
.billing_box_bg {
	height: 100%;
	display: flex;
	flex-direction: column;
	.input-wrap {
		padding: 22upx 20upx 22upx 30upx;
		.search-bar {
			display:inline-block;
			width:530upx;
		}
	}
	.scroll-middle_bx {
		flex: 1;
		display: flex;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.tab-view {
		height: 100%;
		width: 170upx;
		flex-shrink: 0;
		background-color: #f0f2f6;
		.tab-bar-item {
			position: relative;
			width: 170upx;
			height: 90upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26upx;
			color: #444;
			font-weight: 400;
			.tag {
				display: flex;
				padding: 0 20upx;
				align-items: center;
				position: absolute;
				right: 0;
				top: 0;
				height: 32upx;
				background: #ff2842;
				border-radius: 16upx;
				color: #fff;
				font-size: 20upx;
			}
      &:last-child{
        margin-bottom: 110upx;
      }
		}

		.active {
			position: relative;
			color: $mainColor;
			font-size: 26upx;
			background: #fff;
		}

		.active::before {
			content: "";
			position: absolute;
			border-left: 8upx solid $mainColor;
			height: 100%;
			left: 0;
		}
	}
	.right-box {
		height: 100%;
		flex: 1;
		box-sizing: border-box;
	}
	.item_list_bx {
		padding: 40upx 16upx;
    &:last-child{
      margin-bottom: 70upx;
    }
	}
	.item_list_title {
		margin-bottom: 20upx;
		font-size: 24upx;
		font-weight: 600;
		color: #666666;
	}
	.select-cmd_bx {
		& .kc {
			color: #999999;
			font-size: 28upx;
			font-weight: 400;
			margin-bottom: 60upx;
			text-align: center;
			margin-top: 10upx;
		}
		& .num_bx {
			display: flex;
			align-items: center;
			margin-bottom:80upx;
			& > input {
				font-size:30upx;
				width: 212upx;
				height: 80upx;
				border: 1px solid #dddddd;
				border-radius: 4upx;
				text-align: center;
				margin-right: 24upx;
				margin-left:30upx;
			}
		}
	}
}
</style>