front-end/hdApp/src/admin/billing/index.vue

<!--姜枫 2021.04.11-->
<template>
	<view class="billing_box_bg">
		<app-tabs :tabs="tabs" :currentTab="tabIndex" @change="change" itemWidth="33.3%" />
		<view class="input-wrap" v-if="tabIndex == 1 || tabIndex == 0">
			<app-search-module v-model="py" placeholder="请输入关键词，支持拼音首字母搜索" @search="searchFn" />
		</view>
		<view class="scroll-middle_bx">

			<scroll-view scroll-y scroll-with-animation class="tab-view" :scroll-top="scrollTop" v-if="tabIndex == 0">
				<div v-for="(item, index) in suitFilterProductInfo" :key="index" class="tab-bar-item" :class="[suitClassIndex == index ? 'active' : '']" :data-current="index" @tap.stop="suitSwichClass">
					<text>{{ item.className || "" }}</text>
					<text class="tag" v-if=" getSuitSelectClassById(item.classId).bigCount > 0">
						<text v-if=" getSuitSelectClassById(item.classId).bigCount > 0 ">
							{{ `${getSuitSelectClassById(item.classId).bigCount}` }}
						</text>
					</text>
				</div>
			</scroll-view>
			<scroll-view scroll-y class="right-box" v-if="tabIndex == 0" :scroll-into-view="suitScrollClassId">
				<!--内容部分 start -->
				<block v-if="!$util.isEmpty(suitFilterProductInfo)">
					<view class="item_list_bx" v-for="(res,i) in suitFilterProductInfo" :key="i" :id="`class_${res.classId}`">
						<view class="item_list_title">{{ res.className }}</view>
						<template v-for="(data,j) in res.child">
							<view :id="`class_${res.classId}_${data.id}`" :key="j" >
								<GoodsCommondity
									:info="data"
									:bigCount="getSelectItemById(data.id, res.classId).bigCount"
									:smallCount="getSelectItemById(data.id, res.classId).smallCount"
									@addGoodsEvent="addGoodsEvent"
									@addGoods="addGoods"
									@del="delGoodsEvent"
								></GoodsCommondity>
							</view>
							<!-- <Commondity
							:type="COMMODITY_TYPE.CHANGE"
							@customNum="customNum"
						></Commondity> -->
						</template>
					</view>
				</block>
				<block v-else>
					<app-wrapper-empty
						title="暂无数据"
						:is-empty="$util.isEmpty(filterProductInfo)"
					/>
				</block>
				<!--内容部分 end -->
			</scroll-view>

			<scroll-view scroll-y scroll-with-animation class="tab-view" :scroll-top="scrollTop" v-if="tabIndex == 1">
				<div v-for="(item, index) in filterProductInfo" :key="index" class="tab-bar-item" :class="[classIndex == index ? 'active' : '']" :data-current="index" @tap.stop="swichClass">
					<text>{{ item.className || "" }}</text>
					<text class="tag" v-if=" getSelectClassById(item.classId).bigCount > 0 || getSelectClassById(item.classId).smallCount > 0">
						<text v-if=" getSelectClassById(item.classId).bigCount > 0 || getSelectClassById(item.classId).smallCount > 0 ">
							{{ `${getSelectClassById(item.classId).bigCount}` }}
						</text>
						<text v-if="getSelectClassById(item.classId).smallCount > 0"> / </text>
						<text v-if="getSelectClassById(item.classId).smallCount > 0">{{ getSelectClassById(item.classId).smallCount }}</text>
					</text>
				</div>
			</scroll-view>
			<scroll-view scroll-y class="right-box" v-if="tabIndex == 1" :scroll-into-view="scrollClassId">
				<!--内容部分 start -->
				<block v-if="!$util.isEmpty(filterProductInfo)">
					<view
						class="item_list_bx"
						v-for="(classItem, classIndex) in filterProductInfo"
						:key="classIndex"
						:id="`class_${classItem.classId}`"
					>
						<view class="item_list_title">
							{{ classItem.className }}
						</view>
						<template v-for="(productItem, productIndex) in classItem.child">
							<view
								:id="`class_${classItem.classId}_${productItem.id}`"
								:key="productIndex"
							>
								<Commondity
									:info="productItem"
									:bigCount="
										getSelectItemById(productItem.id, classItem.classId).bigCount
									"
									:smallCount="
										getSelectItemById(productItem.id, classItem.classId).smallCount
									"
									@customNum="customNum"
									@add="addEvent"
									@addOneEvent="addCustomNumEvent"
									@del="delEvent"
								></Commondity>
							</view>
							<!-- <Commondity
							:type="COMMODITY_TYPE.CHANGE"
							@customNum="customNum"
						></Commondity> -->
						</template>
					</view>
				</block>
				<block v-else>
					<app-wrapper-empty
						title="暂无数据"
						:is-empty="$util.isEmpty(filterProductInfo)"
					/>
				</block>
				<!--内容部分 end -->
			</scroll-view>

			<scroll-view scroll-y scroll-with-animation v-if="tabIndex == 2" class="PxClass-box">
				<PxClassCommondity  :info="pxClassInfo"></PxClassCommondity>
			</scroll-view>
		</view>
		<!-- :maskClosable="false" -->
		<modal-module :show="isModel" @cancel="modalCancel" @click="affirm" :title="customData.itemName" color="#333" :size="32" padding="30rpx 30rpx" >
			<template slot="customContent">
				<view class="select-cmd_bx" v-if="customData">
					<view class="kc"> 库存 {{ customData.stock }} </view>
					<view class="num_bx">
						<allMoreSelectInput
							:isActive="isActive" :isFocus="isFocus" :value="customData.bigCount"
							:isActiveOne="isActiveOne" :isFocusOne="isFocusOne" :valueOne="customData.smallCount"
							@deleteInputVal="deleteInputVal" @initAllInput="initAllInput" @moveAllInput="moveAllInput"
							@deleteInputValOne="deleteInputValOne" @initAllInputOne="initAllInputOne" @moveAllInputOne="moveAllInputOne">
						</allMoreSelectInput>
					</view>
				</view>
			</template>
		</modal-module>
		<modal-module
			:show="showSubmitModel"
			@cancel="cancelEvent"
			@click="submitEvent"
			:title="confirmContent"
			color="#333"
			:size="32"
			padding="30rpx 30rpx"
		>
		</modal-module>
		<!--<FooterCart :price="allGoodsPrice" :count="allGoodsCount" @confirm="confirmSelectGoodsEvent" v-if="tabIndex == 0"></FooterCart>-->
		<FooterCart :price="allGoodsPriceFun" :count="allGoodsCount" @confirm="confirmSelectGoodsEvent" v-if="tabIndex == 0"></FooterCart>
		<FooterCart :price="allPrice" :count="allCount" @confirm="confirmSelectEvent" v-if="tabIndex == 1"></FooterCart>
	</view>
</template>

<script>
import AppSearchModule from "@/components/module/app-search";
import AppTabs from "@/components/plugin/tabs";
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import Commondity from "@/components/module/app-commodity";
import GoodsCommondity from "@/components/module/app-goods-commodity";
import PxClassCommondity from "@/components/module/app-pxClass-commodity";
import FooterCart from "@/components/module/app-footer-cart";
import ModalModule from "@/components/plugin/modal";
import allMoreSelectInput from "@/components/module/allMoreSelectInput";
import allMoreSelectInputMins from "@/mixins/allMoreSelectInput";

import { COMMODITY_TYPE } from "@/utils/declare";
import productMins from "@/mixins/product";
export default {
	name: "Billing", // 开单
	components: {
		AppTabs,
		AppSearchModule,
		AppWrapperEmpty,
		Commondity,
		ModalModule,
		FooterCart,allMoreSelectInput,PxClassCommondity,GoodsCommondity
	},
	mixins: [productMins,allMoreSelectInputMins],
	data() {
		return {
			COMMODITY_TYPE,
			tabIndex: 0,
			tabs: [
				{	name: "成品"	},
				{	name: "组合"	},
				{	name: '课程'	},
			],
			isModel: false,
			customData: {
				bigCount: 0,
				smallCount: 0
			},
			showSubmitModel: false
		};
	},
	computed: {
		confirmContent() {
			let content = "确认下一步？";
			if (this.hasNoStock) {
				content = "有花材库存不足，确认下一步？";
			}
			return content;
		}
	},

	onUnload() {
		this.resetSelectInfoByType(this.pageType);
	},

	methods: {
		//自定义数量
		customNum(info) {
			this.isModel = true;
			this.customData = info;
			this.$nextTick(()=>{
				this.initAllInput();
			})
		},
		modalCancel() {
			this.isModel = false;
			this.customData = {};
		}, // 取消 确认
		affirm(val) {
			this.isFocus = false;
			this.isFocusOne = false;
			this.$nextTick(()=>{
				if(this.customData.bigCount==0 && this.customData.smallCount==0){
					this.delAllEvent(this.customData)}
				if (val.index === 0) {
					this.modalCancel();
				} else {
					const {
						bigCount,
						smallCount,
						bigNum,
						bigUnit,
						smallNum,
						smallUnit,
						ratio
					} = this.customData;
					const ratioNum = Number(ratio);
					//超过库存时 设置为库存最大值 1
					if (Number(bigCount) * ratioNum + Number(smallCount) > Number(bigNum) * ratioNum + Number(smallNum)) {
						uni.showToast({
							title: `库存只有${bigNum}${bigUnit}${smallNum}${smallUnit}`,
							icon: "none"
						});
						this.customData.bigCount = bigNum;
						this.customData.smallCount = smallNum;
					} else {
						this.updateItemEvent(this.customData);
						this.modalCancel();
					}
				}
			})

		},
		cancelEvent() {
			this.showSubmitModel = false;
		},
		submitEvent(val) {
			if (val.index === 0) {
				this.cancelEvent();
			} else {
				console.log(444, this.selectList);
				uni.navigateTo({
					url: "/admin/billing/affirm"
				});
				this.cancelEvent();
			}
		},
		confirmSelectGoodsEvent() {
			if (this.selectList.length > 0) {
				uni.navigateTo({
					url: "/admin/billing/affirmGoods"
				});
			} else {
				this.$msg("请选择花材");
			}
		},
		confirmSelectEvent() {
			if (this.selectList.length > 0) {
				uni.navigateTo({
					url: "/admin/billing/affirm"
				});
			} else {
				this.$msg("请选择花材");
			}
		},
		change(e) {
			this.resetSelectInfoByType(this.pageType);
			if (this.tabIndex == e.index) {
				return false;
			} else {
				this.tabIndex = e.index;
			}
		},
		scrollTop() {}
	}
};
</script>

<style lang="scss" scoped>
.billing_box_bg {
	height: 100%;
	display: flex;
	flex-direction: column;
	.input-wrap {
		padding: 22px 20px 22px 30px;
	}
	.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 20px;
				align-items: center;
				position: absolute;
				right: 0;
				top: 0;
				height: 32px;
				background: #ff2842;
				border-radius: 16px;
				color: #fff;
				font-size: 20px;
			}
      &:last-child{
        margin-bottom: 110upx;
      }
		}

		.active {
			position: relative;
			color: $mainColor;
			font-size: 26px;
			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: 40px 16px;
    &:last-child{
      margin-bottom: 70upx;
    }
	}
	.item_list_title {
		margin-bottom: 20px;
		font-size: 24px;
		font-weight: 600;
		color: #666666;
	}
	.select-cmd_bx {
		& .kc {
			color: #999999;
			font-size: 28px;
			font-weight: 400;
			margin-bottom: 60px;
			text-align: center;
			margin-top: 10px;
		}
		& .num_bx {
			display: flex;
			align-items: center;
			margin-bottom: 80px;
			& > input {
				width: 212px;
				height: 80px;
				border: 1px solid #dddddd;
				border-radius: 4px;
				text-align: center;
				margin-right: 24px;
				font-size: 40rpx;
			}
		}
	}
	.PxClass-box{
		width: 100%;
	}
}
</style>