hjt_erdao_WeChatApplet/components/pop/pop.vue

<template>
	<view>
		<view class="title">
			<u-icon name="close" @click="close()"></u-icon>
			<view class="font-thirty-two font-color3" style="margin-left: 180rpx;">
				原因说明
			</view>
		</view>
		<view class="border">
			<view class="font-twenty font-color3" style="margin: 20rpx 0 10rpx;">
				原因
			</view>
			<textarea value="" placeholder="请输入原因" class="area" v-model="remark" />
		</view>
		<button type="default" class="btn" @click="submit">确认</button>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default{
		data(){
			return{
				remark:'',
				type: null
			}
		},
		methods:{
			show(type){
				this.type = type;
			},
			close(){
				this.remark = '';
				this.$emit('close')
			},
			submit(){
				if(this.type === '不通过'){
					if(this.remark === ''){
						this.$refs.uToast.show({
							title: '请输入原因!',
							type: 'default',
						})
						return
					}else{
						this.$emit('noPass', this.remark);
						this.$emit('close');
						this.remark = '';
					}
				}else{
					this.$emit('noPass', this.remark);
					this.$emit('close');
					this.remark = '';
				}
			}
		}
	}
</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: 200rpx;
		}
	}
	
	.btn {
		width: 560rpx;
		margin: 0 auto;
		color: #ffffff;
		background: #2E4F1C;
		border-radius: 48rpx;
	}
</style>