jsh_erp_app/components/scaned-pop/scaned-pop.vue

<template>
	<view>
		<u-popup :show="scanedShow" :closeOnClickOverlay="false" @close="closeClick" mode="center" :round="10">
			<view class="error-box">
				<view class="flex_box flex_row_center">
					<u-image src="@/static/image/error-img.png" width="112rpx" height="112rpx"></u-image>
				</view>
				<view class="tips-value">请确认该商品出库数量</view>
				<view class="num-box">
						<u-number-box v-model="numberVal">
							<view slot="minus" class="minus">
								<u-icon name="minus" color="#0256FF" size="12"></u-icon>
							</view>
							<text slot="input" class="input">{{numberVal}}</text>
							<view slot="plus" class="plus">
								<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
							</view>
						</u-number-box>
					</view>
				</good-item>
				<view class="btn-box">
					<u-button class="no-btn" type="primary" :plain="true" text="取消" @click="closeClick"></u-button>
					<u-button class="yes-btn" type="primary" text="确认" @click="confirmClick"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default{
		props:{
			value:{
				type:Boolean,
				default:false
			},
			scanNum:{
				type:[Number,String],
				default:1
			}
		},
		watch:{
			value: {
				handler(val) {
					this.scanedShow = val
				},
				immediate:true
			},
			scanNum: {
				handler(val) {
					console.log(val,'val')
					this.numberVal = val
				},
				immediate:true
			},
		},
		data() {
			return {
				scanedShow:false,
				numberVal:0
			}
		},
		methods:{
			closeClick() {
				this.$emit('close')
			},
			confirmClick() {
				this.$emit('confirm',this.numberVal)
			}
		}
	}
</script>

<style lang="scss" scoped>
.error-box {
	width: 580rpx;
	padding: 48rpx 36rpx 48rpx;
	.tips-value {
		color: #1D212A;
		font-family: "PingFang SC";
		font-size: 32rpx;
		font-style: normal;
		font-weight: bold;
		margin-top: 30rpx;
		text-align: center;
	}
	.btn-box {
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
		.no-btn {
			width: 244rpx;
			border-radius: 16rpx;
			border: 1px solid #BFC8DB;
			color: #86909C;
			font-size: 32rpx;
		}
		.yes-btn {
			width: 244rpx;
			border-radius: 16rpx;
			background: #0256FF;
			font-size: 32rpx;
		}
	}
	.num-box {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;
		.input {
			width: 112rpx;
			text-align: center;
			border-bottom: 1px solid #0256FF;
			margin: 0 8rpx;
		}
		.minus {
			width: 40rpx;
			height: 40rpx;
			border-radius: 8rpx;
			border: 1px solid #0256FF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.plus {
			width: 40rpx;
			height: 40rpx;
			border-radius: 8rpx;
			background-color: #0256FF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>