baodeng_xcx/page_shanghu/cunqu/cun.vue

<template>
	<view class="page">
		<u-navbar title=" " :border-bottom="false" :background="bgc" back-icon-color="#fff" title-color='#fff'
			title-size='36' height='36' id="navbar">
		</u-navbar>
		<view class="tanchuang">
			<view class="name">
				<text>*</text>存酒位置
			</view>
			<view class="weizhi" @click="weizhiflag = true">
				{{xzname}} <image src="https://api.ccttiot.com/smartmeter/img/static/uRro7S5rvxSEiculRzsJ" mode=""></image>
			</view>
			<view class="name">
				<text>*</text>手机号
			</view>
			<view class="weizhi">
				<input type="text" v-model="phone" placeholder="请输入存酒人手机号" />
			</view>
			<view class="name">
				<text>*</text>存放天数
			</view>
			<view class="weizhi">
				<input type="text" v-model="day" placeholder="请输入存放天数" />
			</view>
			<view class="name">
				备注
			</view>
			<view class="weizhi">
				<input type="text" v-model="remark" placeholder="请输入备注" />
			</view>
		</view>
		<view class="list">
			<view class="item_list" v-for="(item,index) in selectedItems" :key="index">
				<view class="" style="display: flex;">
					<image :src="item.image" mode="aspectFill"></image>
					<view class="name">
						{{item.name == undefined ? '--' : item.name}}
					</view>
				</view>
				<view class="jiajian">
					x{{item.totalNum == undefined ? '--' : item.totalNum}}
				</view>
			</view>
		</view>
		
		<view class="jiulist" v-if="weizhiflag">
			<view class="box">
				<view class="" v-for="(item,index) in weizhilist" :key="index" @click="btnweizhi(item)">
					<text>{{item.name == undefined ? '--' : item.name}}</text> <text>已存：{{item.currentNum == undefined ? '--' : item.currentNum}}</text>
				</view>
			</view>
			<view class="btn">
				<view class="qx" @click="weizhiflag = false">
					取消
				</view>
			</view>
		</view>
		
        <view class="cun" @click="btncun">
        	存放
        </view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: " ",
				},
				selectedItems:[],
				weizhiflag:false,
				weizhilist:[],
				xzname:'请选择',
				day:'',
				phone:'',
				remark:'',
				xzid:''
			}
		},
		onLoad(option) {
           this.selectedItems = JSON.parse(option.arr)
		   this.getweizhi()
		},
		methods: {
            // 获取存酒位置
			getweizhi(){
				this.$u.get(`/bst/location/list?storeId=${this.$store.state.storeId}&pageNum=1&pageSize=999`).then(res => {
				    if (res.code == 200) {
						this.weizhilist = res.rows
				    }
				})
			},
			// 选择存放位置
			btnweizhi(item){
				this.xzname = item.name
				this.xzid = item.id
				this.weizhiflag = false
			},
			// 点击存放
			btncun(){
				let arr = this.selectedItems.map(item => ({ 
				     goodsId: item.id ,
					 totalNum:item.totalNum
				}))
				let data = {
					phone:this.phone,
					remark:this.remark,
					storageDays:this.day,
					locationId:this.xzid,
					storeId:this.$store.state.storeId,
					storage:arr
				}
				this.$u.put(`/bst/storage/storageWine`,data).then(res => {
				    if (res.code == 200) {
						uni.showToast({
							title: '存放成功',
							icon: 'success',
							duration:3000
						})
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
				    }else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration:3000
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #010000;
	}
	.btn{
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		view{
			width: 650rpx;
			height: 100rpx;
			text-align: center;
			border: 1px solid #3D3D3D;
			border-radius: 20rpx;
			color: #fff;
			line-height: 100rpx;
			font-size: 32rpx;
			font-weight: 600;
		}
		.qd{
			background-color: #FF8998;
			margin-left: 10rpx;
		}
	}
	.jiulist{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #010000;
		z-index: 99;
		
		.box{
			margin-top: 120rpx;
			padding: 50rpx;
			box-sizing: border-box;
			height: 83vh;
			overflow: scroll;
			view{
				border: 1px solid #3D3D3D;
				margin-right: 10rpx;
				color: #fff;
				border-radius: 10rpx;
				margin-top: 20rpx;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
			}
		}
	}
	.tanchuang{
		width: 750rpx;
		height: 710rpx;
		background: #0E0C0C;
		padding: 8rpx 54rpx;
		box-sizing: border-box;
		.anniu{
			width: 640rpx;
			height: 90rpx;
			background: #FF8998;
			font-weight: 600;
			font-size: 32rpx;
			color: #3D3D3D;
			text-align: center;
			line-height: 90rpx;
			margin-top: 78rpx;
			border-radius: 10rpx;
		}
		.name{
			color: #989898;
			font-size: 32rpx;
			margin-top: 40rpx;
			text{
				color: #FF8998;
				margin-right: 10rpx;
			}
		}
		.weizhi{
			font-size: 36rpx;
			color: #FFFFFF;
			margin-top: 18rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			input{
				border-bottom: 1px solid #3D3D3D;
				padding-bottom: 20rpx;
				box-sizing: border-box;
				width: 100%;
				height: 90rpx;
			}
			image{
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
	.cun{
		width: 674rpx;
		height: 90rpx;
		background: #FF8998;
		border-radius: 61rpx 61rpx 61rpx 61rpx;
		font-weight: 600;
		font-size: 32rpx;
		color: #3D3D3D;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 54rpx;
		text-align: center;
		line-height: 90rpx;
	}
	.list{
		width: 100%;
		margin-top: 50rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		height: 30vh;
		overflow: scroll;
		.wu{
			margin-left: 160rpx;
			margin-top: 100rpx;
			color: #eee;
			font-size: 28rpx;
		}
		.item_list{
			display: flex;
			justify-content: space-between;
			margin-bottom: 42rpx;
			.jiajian{
				display: flex;
				align-items: flex-end;
				justify-content: center;
				width: 172rpx;
				color: #999;
				image{
					width: 42rpx;
					height: 42rpx;
				}
				input{
					width: 60rpx;
					text-align: center;
				}
			}
			.name{
				font-size: 28rpx;
				color: #FFFFFF;
				margin-left: 22rpx;
			}
			image{
				width: 140rpx;
				height: 140rpx;
			}
		}
	}
</style>