front-end/hdApp/src/pagesPurchase/addCg.vue

<!--姜枫 2021.04.11-->
<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" :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"
									:offVerifyRepertory = 'true'
									:info="productItem"
									:checkStock="true"
									: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>
		</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">
						<text class="unit_price">库存 {{ parseFloat(customData.stock) }}</text>
						<text>{{customData.ratio}}{{customData.smallUnit}}/{{customData.bigUnit}}</text>
					</view>
					<view class="num_bx">
						<!-- #ifdef APP-PLUS -->
						<input style="width: 280upx" v-model="customData.bigCount" v-if="globalUnitType == 0" type="number" />
						<text style="font-size:35upx;font-weight:bold;color:#666666;" v-if="globalUnitType == 0">{{customData.bigUnit}}</text>
						<input style="width: 280upx" v-model="customData.smallCount" v-if="globalUnitType == 1" type="number" />
						<text style="font-size:35upx;font-weight:bold;color:#666666;" v-if="globalUnitType == 1">{{customData.smallUnit}}</text>
						<!-- #endif -->

						<!-- #ifdef MP-WEIXIN -->
						<input style="width: 280upx" 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">{{customData.bigUnit}}</text>
						<input style="width: 280upx" 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">{{customData.smallUnit}}</text>
						<!-- #endif -->

						<image @click="switchGlobalUnitType" :src="`${constant.imgUrl}/icon/switch/switch128.png`" 
						style="width:86upx;height:86upx;position:relative;top:60upx;right:0upx;" mode="widthFix"></image>

					</view>
					<view class="num_bx">
						<input style="width: 280upx" v-model="customData.userPrice" @focus="customData.userPrice = null" 
						:disabled="false" type="digit" placeholder="单价" />
						<text style="font-size:35upx;font-weight:bold;color:#666666;">元</text>
					</view>
                    <view style="text-align:center;margin-bottom:30upx;font-size:33upx;">¥{{calcPrice}}</view>
				</view>
			</template>
		</modal-module>

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

   		<sel-popup :show="popupShow" :info="infoData" @close="hidePopup" />

	</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-cg-commodity";
import FooterCart from "@/components/module/app-footer-cart";
import ModalModule from "@/components/plugin/modal";
import SelPopup from "@/components/sel-popup.vue";
import { COMMODITY_TYPE } from "@/utils/declare";
import productMins from "@/mixins/product";
export default {
	name: "addCg",
	components: {
		AppTabs,
		AppSearchModule,
		AppWrapperEmpty,
		Commondity,
		ModalModule,
		FooterCart,
		SelPopup
	},
	mixins: [productMins],
	data() {
		return {
			COMMODITY_TYPE,
			isSmallCount:false,
			isFocus: false,
			offVerifyRepertory: true,
			customData: {
				bigCount: 0,
				smallCount: 0
			},
			showSubmitModel: false,
			popupShow:false,
			infoData:{},
            selectJobType:'cgItem',
            checkStock:false
		};
	},
	computed: {
        calcPrice() {
			if(Number(this.customData.userPrice)>0 && (Number(this.customData.bigCount)>0 || Number(this.customData.smallCount)>0)){
                let num = Number(this.customData.bigCount)>0 ? this.customData.bigCount : this.customData.smallCount
                return parseFloat((this.customData.userPrice*num).toFixed(2))
            }
			return 0
		}
	},
	onLoad(){
        if(this.option.ghsId){
            this.selectJobId = this.option.ghsId
        }
		this.initData()
	},
	methods: {
	    showPopup() {
	        this.popupShow = true;
	    },
	    hidePopup() {
	      this.popupShow = false;
	    },
		modalCancel() {
			this.isAddModel = false;
			this.customData = {};
		},
		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.$util.isEmpty(this.selectList)){
				this.$msg('请选择花材')
				return false
			}
			//因历史遗留原因，打开花材页马上点花材出现数量0或null的情况，需要过滤 shish 20210716
			let selectList = this.selectList;
			let list = [];
			for (let i=0;i<selectList.length;i++){
				if(/(^[1-9]\d*$)/.test(selectList[i].bigCount) == false && /(^[1-9]\d*$)/.test(selectList[i].smallCount) == false){
					continue
				}
				list.push(selectList[i])
			}
			if(list.length <= 0){
				this.$msg("请选择花材")
				return
			}
			let ghsName = this.option.ghsName ? this.option.ghsName : '';
			let ghsId = this.option.ghsId ? this.option.ghsId : 0
			this.$util.pageTo({ url: '/pagesPurchase/addCgConfirm?ghsId='+ghsId+'&ghsName='+ghsName,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: calc(100vh - 140upx);
		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: calc(100vh - 140upx);
		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: 40upx;
			text-align: center;
			margin-top: 30upx;
			.unit_price{
				padding-right:25upx;
			}
		}
		& .num_bx {
			display: flex;
			align-items: center;
			margin-bottom:30upx;
			padding-left:110upx;
			& > input {
				width: 212upx;
				height: 80upx;
				border: 1upx solid #dddddd;
				border-radius: 4upx;
				text-align: center;
				margin-right: 24upx;
				font-size: 40upx;
			}
		}
	}
	.PxClass-box{
		width: 100%;
	}
}
</style>