hjt_erdao_WeChatApplet/components/pop/money.vue

<template>
	<view>
		<view class="title">
			<u-icon name="close" @click="close()"></u-icon>
			<view class="font-thirty-two font-color3" style="margin: 0 auto;">
				消费金额
			</view>
		</view>
		<view class="border">
			<view class="font-twenty font-color3" style="margin: 20rpx 0 50rpx;">
				消费金额
			</view>
			<!-- <u-input v-model="value" :type="type" :border="border" /> -->
			<!-- <input type="number" v-model="value"  placeholder="请输入数字" /> -->
			<input v-model="value" placeholder="请输入数字" />
		</view>
		<button type="default" class="btn" @click="submit">确认</button>
		<u-toast ref="uToast" />
	</view>
	
</template>

<script>
	export default{
		data(){
			return{
				value:'',
				type: 'number',
				border: false
			}
		},
		methods:{
			close(){
				this.$emit('close')
			},
			submit(){
				const num = /^[0-9]*$/;
				if (num.test(this.value)) {
					this.$emit('add', this.value);
					this.close()
				}else{
					this.$refs.uToast.show({
						title: '必须是数字,请重新输入!',
						type: 'default',
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		display: flex;
		align-items: center;
		text-align: center;
		.close {
			width: 50rpx;
			height: 50rpx;
		}
	}
	
	.border {
		border: 2rpx #E0E0E0 solid;
		border-left: none;
		border-right: none;
		margin: 30rpx 0;
	
		.area {
			height: 250rpx;
		}
	}
	
	.btn {
		width: 560rpx;
		margin: 50rpx auto;
		color: #ffffff;
		background: #2E4F1C;
		border-radius: 48rpx;
	}
</style>