<template>
	<view>
		<!-- 物流信息弹框 start -->
		<view class="posAll bac5 disjcac" v-if="ifLogistics">
			<view class="bacf radius12 tips-box pad-zy30 animated" :class="ifAnimated?'bounceInDown':'bounceOutDown'">
				<view class="bbot pad-s30 pad-x20 tcenter fon28 bold col26">{{tipsTitle}}</view>
				<view class="fon22 col26 disjcac mar-sx30" v-if="showType==1">
					<view class="flexs" style="width: 120rpx;">
						<view class="">物流公司</view>
						<view class="mar-s20">物流单号</view>
					</view>
					<view class="">
						<view class="">{{logisticsObj.express_name}}</view>
						<view class="mar-s20 clips1">{{logisticsObj.express_number}}</view>
					</view>
				</view>
				<view class="fon22 col26 disjcac mar-sx40" v-if="showType==2 || showType==3 || showType==4">
					<image src="/static/public/icon-success.png" mode="" style="width: 56rpx;height: 50rpx;" lazy-load></image>
					<view class="mar-z20">{{['','','已确认收货','支付成功','签到成功'][showType]}}</view>
				</view>
				<view class="fon22 col26 disjcac mar-sx40" v-if="showType==5 || showType==6 || showType=='nick_name'">
					<input v-if="showType==5" class="tips-input fon22 radius4 width100 pad-zy20" type="text" maxlength="8" v-model="dynamicObj.content" placeholder="请输入真实姓名" placeholder-style="color:#aaaaaa;">
					<input v-else-if="showType==6" class="tips-input fon22 radius4 width100 pad-zy20" type="number" maxlength="11" v-model="dynamicObj.content" placeholder="请输入联系电话" placeholder-style="color:#aaaaaa;">
					<input v-else class="tips-input fon22 radius4 width100 pad-zy20" type="text" maxlength="8" v-model="dynamicObj.content" placeholder="请输入昵称" placeholder-style="color:#aaaaaa;">
				</view>
				<view class="disjcac" v-if="showType!=5 && showType!=6 && showType!='nick_name'">
					<view class="radius26 disjcac fon24 tips-btn" @tap="closePop">关闭</view>
				</view>
				<view class="disjcac" v-else>
					<view class="radius26 disjcac fon24 tips-btn" @tap="closePop">确定</view>
				</view>
			</view>
		</view>
		<!-- 物流信息弹框 end -->
	</view>
</template>

<script>
	export default {
		name:"dynamic-frame",
		props:{
			showType:{
				type:Number | String
			},
			tipsTitle:{
				type:String,
				default:'提示信息'
			}
		},
		data() {
			return {
				ifLogistics:false,//控制蒙层
				ifAnimated:false,//控制白色弹框内容
				dynamicObj:{
					content:''
				},
				tempText:'',
				logisticsObj:{
					express_name:'京东物流',
					express_number:'JD123456767899'
				}
			};
		},
		methods:{
			closePop(){
				if(this.showType==5 || this.showType ==6 || this.showType == 'nick_name'){
					if(this.dynamicObj.content){
						this.executeEv();
						this.$emit('returnEv',this.dynamicObj);
					} else {
						if(this.tempText){
							this.$toolAll.tools.showToast(this.showType==5?'请输入':'请输入')
						} else {
							this.executeEv();
						}
					}
				} else {
					this.executeEv();
				}
			},
			// 执行动画
			executeEv(){
				this.ifAnimated=false;
				setTimeout(()=>{
					this.ifLogistics = false;
					this.dynamicObj = {
						content:''
					}
				},600)
			}
		}
	}
</script>

<style>
.tips-input{
	border: 2rpx solid #dcdcdc;
	height: 54rpx;
}
</style>