front-end/ghsApp/src/pagesPurchase/add.vue

<template>
<view class="app-content" style="background:white;">
	<view class="billing_box_bg">
		<view class="input-wrap">
			<view style="padding:0upx 0upx 0upx 0upx;margin-right:10upx;" >
				<button class="admin-button-com middle blue" @click="selectFlowerNumFn()">选分类</button>
			</view>
			<view class="search-bar">
				<app-search-module v-model="py" placeholder="输拼音首字母也可以搜" @input="searchFn"/>
			</view>
			<view style="padding:0 0upx 0 20upx;" >
				<button class="admin-button-com middle blue" @click="pageTo({ url: '/admin/ptItem/itemList' })">添花材</button>
			</view>
			<view style="padding:0 0upx 0 20upx;" >
				<button class="admin-button-com middle blue" @click="removeFromSave(option.ghsId)">清除采购</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>
			</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: 180upx" :id="`class_${classItem.classId}_${productItem.id}`" :key="productIndex">
							<CommodityPurchase v-if="classItem.isActive"
								:type="selectJobType"
								:key="productIndex"
								:info="productItem"
								@showAddModelFn="showAddModelFn"
								@replaceItemFn="replaceItemFn"
							></CommodityPurchase>
							</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.itemName" color="#333" :size="32" padding="30rpx 30rpx" :button="showButton" >
			<template slot="customContent">
				<view class="select-view">
					<view class="select-cmd_bx">
						<view class="num_bx">
							
							<!-- #ifdef APP-PLUS -->
							<input v-model="customData.bigCount" type="number" @focus="customData.bigCount = null" placeholder="扎数" />
							<!-- #endif -->
							<!-- #ifdef MP-WEIXIN -->							
							<input v-model="customData.bigCount" type="number" @focus="customData.bigCount = null" :focus="isAddInputFocus" placeholder="扎数" />
							<!-- #endif -->

							<input v-model="customData.userPrice" @focus="customData.userPrice = null" type="digit" placeholder="单价" />

							<text>¥{{customData.userPrice && customData.bigCount ? parseFloat((customData.userPrice*customData.bigCount).toFixed(2)):0}}</text>
						</view>
					</view>
				</view>
			</template>
		</modal-module>

		<FooterCart :price="cgAllPriceFun" :count="allCount" @confirm="confirmSaveItem"></FooterCart>

		<uni-popup ref="selectFlowerNumRef" background-color="#fff" type="center" :animation="false" class="class-popup-style">
			<view style="display:flex;padding:20upx;height:auto;justify-content: space-between;align-items:center;flex-wrap:wrap;max-height:100vh;overflow:auto;">

				<view v-for="(item, index) in globalClassItemList" :key="index" @tap.stop="changeClass(index)" style="margin-bottom:20upx;margin-left:3upx;">
				<image :src="item.classCover" style="width:120upx;height:120upx;border-radius:10upx;"></image>
				<view style="margin-top:5upx;overflow: hidden;white-space: nowrap;width:120upx;text-align:center;">{{item.className}}</view>
				</view>

			</view>
		</uni-popup>

		<image v-if="showClassRemind" @click="hideClassRemind" style="position:absolute;width:610upx;height:699upx;top:225upx;left:80upx;z-index:9999;" :src="`${constant.imgUrl}/class_remind.png`"></image>

	</view>
</view>
</template>

<script>
import AppSearchModule from "@/components/module/app-search";
import AppTabs from "@/components/plugin/tabs";
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import CommodityPurchase from "./components/CommodityPurchase";
import ModalModule from "@/components/plugin/modal";
import FooterCart from "@/components/module/app-footer-cart";
import productMins from "@/mixins/product";
import { mapGetters } from "vuex";
export default {
	name: "purchase",
	components: {
		AppTabs,
		AppSearchModule,
		AppWrapperEmpty,
		CommodityPurchase,
		ModalModule,
		FooterCart
	},
	mixins: [productMins],
	data() {
		return {
			selectJobType: "purchase",
			isAloneAllActive: false,
			isAloneAllFocus: false,
			isWeightActive: false,
			isWeightFocus: false,
			showSubmitModel: false,
			autoLoad: false,//不自动请求花材数据
			showButton:[{text: '取消',plain: true}, {text: '确定',plain: false}],
			checkStock:false,//不需要验证库存
			showClassRemind:false
		};
	},
	computed:{
		...mapGetters(["getMyShopInfo","getLoginInfo"]),
		cgAllPriceFun(){
			let price = 0;
			if (this.selectList) {
				for (const item of this.selectList) {
					price += Number(item.userPrice)*Number(item.bigCount)
				}
			}
			return Math.round(price * 100) / 100;
		},
	},
	onShow(){
		this.cgItemInit()
	},
	onUnload() {
	},
	onLoad() {
		if(!this.$util.isEmpty(this.option.ghsId)){
			this.selectJobId = this.option.ghsId
		}
	},
	methods: {
		changeClass(index){
			this.$refs.selectFlowerNumRef.close()
			this.swichClass(index)
		},
		selectFlowerNumFn(){
			this.$refs.selectFlowerNumRef.open('top')
		},
		hideClassRemind(){

		},
		cgItemInit(){
			this.shopId = this.getMyShopInfo.id;
			let type = '';
			this.initData({ type, shopId: this.shopId,status:0});
		},
		confirmSaveItem() {
			if (this.$util.isEmpty(this.selectList)) {
				this.$msg('请选择花材')
				return false
			}
			this.$util.pageTo({url:'/pagesPurchase/details?ghsId='+this.option.ghsId+'&ghsName='+this.option.ghsName,type:2})
		}
	}
};
</script>
<style>
	.change-input{
		width: 170upx !important;
	}
</style>
<style lang="scss" scoped>

.billing_box_bg {
	height: 100%;
	display: flex;
	background:white;
	flex-direction: column;
	.input-wrap {
		display: flex;
		padding: 22upx 20upx 22upx 13upx;
		.search-bar {
			flex: 1;
		}
	}
	.scroll-middle_bx {
		flex: 1;
		width: 100%;
		height: 100%;
		display: flex;
		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-view {
		margin-bottom: 30upx;
	}
	.select-cmd_bx {
		margin-top: 30upx;
		& .num_bx {
			display: flex;
			align-items: center;
			.kc {
				width: 80upx;
				font-size:32upx;
			}
			& > text{
				width:100upx;
				font-size:30upx;
			}
			& > input {
				flex: 1;
				height: 80upx;
				border: 1upx solid #dddddd;
				border-radius: 4upx;
				text-align: center;
				margin-right: 24upx;
				font-size: 32upx;
			}
		}
	}
}
.class-popup-style{
	z-index:999999;
}
</style>