99 lines
3.0 KiB
Vue
99 lines
3.0 KiB
Vue
<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">
|
|
<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'
|
|
}
|
|
};
|
|
},
|
|
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> |