front-end/ghsApp/src/admin/item/sendStock.vue

<template>
	<view class="app-content">
		<view class="billing_box_bg">
			<view class="input-wrap">
				<text style="margin-right:15upx;font-size:38upx;">库存:{{stock}}扎</text>
				<text style="margin-right:20upx;font-size:38upx;">批发价:￥{{ price }}</text>
				<button class="admin-button-com middle blue" @click="setSon()">新增子花材</button>
			</view>
			<view class="scroll-middle_bx">
				<block>
					<view class="item_list_bx"  style="width: 100%">
						<view v-for="(sonItem,xjIndex) in sonItemList" :key="xjIndex">
							<view>
								<view class="item-cmd_bx">
									<view class="img_bx" style="background:#eeeeee">
										<image :src="sonItem.cover"></image>
									</view>
									<view class="cmd-info_bx">
										<view class="tit">{{ sonItem.name || "" }}</view>
										<view class="kc">剩 {{sonItem.stock ? parseFloat(sonItem.stock) : 0}}</view>
										<view class="num-open_bx">
											<view class="open-bx">
<button class="admin-button-com mini-btn blue del-button" @click="delItem(sonItem)">删除</button>
<input class="hy-ok-price" placeholder-style="color:#CCCCCC" v-model="sonItem.sendHyPrice" type="number" placeholder="会员价" />
<input class="add-ok-stock" placeholder-style="color:#CCCCCC" @input="stockToggle(sonItem)" v-model="sonItem.sendSonStock" type="digit" placeholder="库存数量" />
<input class="ls-ok-price" placeholder-style="color:#CCCCCC" v-model="sonItem.sendLsPrice" type="digit" placeholder="零售价" />
<input class="pf-ok-price" placeholder-style="color:#CCCCCC" @input="linkChange(sonItem)" v-model="sonItem.sendPfPrice" type="digit" placeholder="批发价" />
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
	
			<div class="app-footer footer-button">
				<button class="admin-button-com big default" @click="goBack()" 
				style="margin-left:58upx;padding:30upx 55upx 30upx 55upx;">返回</button>
				<button class="admin-button-com big blue" @click="toSend()" 
				style="margin-left:58upx;padding:30upx 65upx; 30upx 65upx;" >分配</button>
			</div>
			<view v-if="remain>=0" style="width:200upx;position:fixed;bottom:40upx;left:15upx;z-index:99999;font-size:32upx;">
				还剩{{ remain }}
			</view>
		</view>
	</view>
	</template>
	<script>
	import AppWrapperEmpty from "@/components/app-wrapper-empty";
	import { mapGetters } from "vuex";
	import { getSonList,delMsItem,sendStockFn } from "@/api/item"
	export default {
		name: "sendStock",
		components: {
			AppWrapperEmpty,
		},
		mixins: [],
		data() {
			return {
				sonItemList:[],
				stock:0,
				price:0,
				remain:0
			};
		},
		onShow(){
			this.init()
		},
		onLoad(){
			this.price = this.option.price ? parseFloat(this.option.price) : 0
			this.stock = this.option.stock ? parseFloat(this.option.stock) : 0
			this.remain = this.stock
		},
		methods: {
			stockToggle(item){
				let totalNum = 0
				if (!this.$util.isEmpty(this.sonItemList)){
					this.sonItemList.forEach((item,idx,arr) => {
						if(Number(item.sendSonStock)>0){
							totalNum = totalNum + Number(item.sendSonStock)
						}
					})
				}
				let remain = Number(this.stock) - Number(totalNum)
				remain = parseFloat(remain.toFixed(2))
				this.remain = remain
			},
			linkChange(item){
				let skMore = item.skMore ? parseFloat(item.skMore) : 0
				let hjAddPrice = item.hjAddPrice ? parseFloat(item.hjAddPrice) : 0
				let addPrice = item.addPrice ? parseFloat(item.addPrice) : 0
				if(Number(item.sendPfPrice)>0){
					let lsDiff = Number(skMore) - Number(addPrice)
					let lsPrice = Number(item.sendPfPrice) + Number(lsDiff)
					lsPrice = parseFloat(lsPrice.toFixed(2))
					item.sendLsPrice = lsPrice
					let hyDiff = Number(addPrice) - Number(hjAddPrice)
					let hyPrice = Number(item.sendPfPrice) - Number(hyDiff)
					hyPrice = parseFloat(hyPrice.toFixed(2))
					item.sendHyPrice = hyPrice
				}else{
					item.sendLsPrice = ''
					item.sendHyPrice = ''
				}
			},
			delItem(item){
				let that = this
				let motherId = this.option.id ? this.option.id : 0
				this.$util.confirmModal({content:'确认删除？'},() => {
					delMsItem({motherId:motherId,id:item.id}).then(res=>{
						if(res.code == 1){
							that.init()
						}
					})
				})
			},
			setSon(){
				let productId = this.option.id ? this.option.id : 0
				this.$util.pageTo({url:'/admin/changePrice/setSon?id='+productId})
			},
			goBack(){
				uni.navigateBack({});
			},
			toSend(){
				let that = this
				if (this.$util.isEmpty(this.sonItemList)){
					this.$msg('没有花材')
					return false
				}
				let hasErr = false
				let errText = ''
				let productList = []
				for (const item of this.sonItemList) {
					if(Number(item.sendSonStock)>0){
						if(Number(item.sendHyPrice)<=0){
							hasErr = true
							errText = '请填写 '+item.name+' 会员价'
							break
						}
						if(Number(item.sendLsPrice)<=0){
							hasErr = true
							errText = '请填写 '+item.name+' 零售价'
							break
						}
						if(Number(item.sendPfPrice)<=0){
							hasErr = true
							errText = '请填写 '+item.name+' 批发价'
							break
						}
						let groupItem = {id:item.id,stock:item.sendSonStock,lsPrice:item.sendLsPrice,pfPrice:item.sendPfPrice,hyPrice:item.sendHyPrice}
						productList.push(groupItem)
					}else{
						if(Number(item.sendPfPrice)>0){
							hasErr = true
							errText = '请填写 '+item.name+' 数量'
							break
						}
					}
				}
				if(hasErr == true){
					that.$msg(errText)
					return false
				}
				if (this.$util.isEmpty(productList)){
					this.$msg('请填写数量和价格')
					return false
				}
				console.log(productList)
				console.log('---------')
				let jsonProduct = JSON.stringify(productList)
				let params = {product:jsonProduct}
				this.$util.confirmModal({content:'确认分配？'},() => {
					sendStockFn(params).then(res=>{
						if(res.code == 1){
							that.$msg('分配成功')
							setTimeout(function(){
								//that.goBack()
							},1200)
						}
					})
      			})
			},
			init(){
				let productId = this.option.id ? this.option.id : 0
				getSonList({motherId:productId}).then(res => {
					this.sonItemList = res.data.list
				})
			}
		}
	};
	</script>
	
	<style lang="scss" scoped>
	.billing_box_bg {
		height: 100%;
		display: flex;
		background: white;
		flex-direction: column;
		.input-wrap {
			font-size:30upx;
			display: flex;
			padding: 22upx 20upx 22upx 30upx;
			.search-bar {
				flex: 1;
			}
			.city-select {
				display: flex;
				flex-shrink: 0;
				align-items: center;
				margin-right: 15upx;
				margin-left: 45upx;
				background-color: #ffff;
				.iconfont {
					margin-left: 20upx;
					font-size: 30upx;
				}
			}
		}
		.scroll-middle_bx {
			margin-bottom:110upx;
		}
		.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: 10upx 40upx;
		}
		.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 {
					width: 212upx;
					height: 80upx;
					border: 1upx solid #dddddd;
					border-radius: 4upx;
					text-align: center;
					margin-right: 24upx;
				}
			}
		}
	}
	.item-cmd_bx {
		position: relative;
		margin-bottom: 20upx;
		height:190upx;
		.img_bx {
			height: 160upx;
			width: 160upx;
			position: absolute;
			left: 0upx;
			top: 0upx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.cmd-info_bx {
			position: relative;
			padding-left: 177upx;
			&.active{
				&:before{
					content: ' ';
					height: 22upx;
					width: 22upx;
					border-width: 2upx 2upx 0 0;
					border-color: #b2b2b2;
					border-style: solid;
					-webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
					transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
					position: absolute;
					top: 50%;
					margin-top: -12upx;
					right: 30upx;
				}
			}
	
			& .tit {
				font-size: 30upx;
				font-weight: 700;
				color: #333333;
			}
			& .kc {
				color: #999999;
				font-size: 26upx;
				padding: 13upx 0 13upx;
			}
			& .num-open_bx {
				display: flex;
				align-items: center;
				& .price {
					font-size: 28upx;
					color: #999999;
					flex: 1;
				}
				& .open-bx {
					color: #333333;
					position: relative;
					.del-button{
						position: absolute;
						left:20upx;
						top:15upx;
						width:100upx;
					}
					.hy-ok-price{
						width: 160upx;
						height: 60upx;
						line-height: 60upx;
						text-align: center;
						background: #ffffff;
						border: 1upx solid #b4b4b4;
						border-radius: 4upx;
						font-size: 30upx;
						color:#777777;
						position: absolute;
						left:180upx;
						top:15upx;
					}
					.add-ok-stock{
						width: 160upx;
						height: 60upx;
						line-height: 60upx;
						text-align: center;
						background: #ffffff;
						border: 1upx solid #3385FF;
						border-radius: 4upx;
						font-size: 30upx;
						color:#3385FF;
						position: absolute;
						left:180upx;
						top:-58upx;
					}
					.ls-ok-price{
						width: 160upx;
						height: 60upx;
						line-height: 60upx;
						text-align: center;
						background: #ffffff;
						border: 1upx solid #b4b4b4;
						border-radius: 4upx;
						font-size: 30upx;
						color:#777777;
						position: absolute;
						left:350upx;
						top:15upx;
					}
					.pf-ok-price{
						width: 160upx;
						height: 60upx;
						line-height: 60upx;
						text-align: center;
						background: #ffffff;
						border: 1upx solid #b4b4b4;
						border-radius: 4upx;
						font-size: 30upx;
						color:#777777;
						position: absolute;
						left:350upx;
						top:-58upx;
					}
				}
			}
		}
	}
	.footer-button{
		height:120upx;
	}
	</style>