martial-arts/components/dynamic-frame.vue

99 lines
3.0 KiB
Vue
Raw Normal View History

2022-08-04 08:01:19 +00:00
<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>
2022-08-16 10:06:46 +00:00
<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>
2022-08-04 08:01:19 +00:00
</view>
2022-08-16 10:06:46 +00:00
<view class="">
<view class="">{{logisticsObj.express_name}}</view>
<view class="mar-s20 clips1">{{logisticsObj.express_number}}</view>
2022-08-04 08:01:19 +00:00
</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">
<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 class="tips-input fon22 radius4 width100 pad-zy20" type="number" maxlength="11" v-model="dynamicObj.content" placeholder="请输入联系电话" placeholder-style="color:#aaaaaa;">
</view>
<view class="disjcac" v-if="showType!=5 && showType!=6">
<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'
}
2022-08-04 08:01:19 +00:00
};
},
methods:{
closePop(){
if(this.showType==5 || this.showType ==6){
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>