139 lines
3.1 KiB
Vue
139 lines
3.1 KiB
Vue
|
<template>
|
||
|
|
<view class="_showToast" v-show="show">
|
||
|
|
<view class="_shade"></view>
|
||
|
|
<view class="_ToastBox">
|
||
|
|
<view class="Toast-box">
|
||
|
|
<!-- <view style="height: 10px;"></view> -->
|
||
|
|
<i class="iconfont icon-chenggong1" style="font-size: 60px;color: #6bc839;" v-if="icon=='success'"></i>
|
||
|
|
<text v-if="icon=='success'" class="Toast-title-success">{{title}}</text>
|
||
|
|
<i class="iconfont icon-cancel" style="font-size: 60px;color: #e94c4b;" v-if="icon=='fail'"></i>
|
||
|
|
<text v-if="icon=='fail'" class="Toast-title-fail">{{title}}</text>
|
||
|
|
<i class="iconfont icon-wen" style="font-size: 60px;color: #faad14;" v-if="icon=='issue'"></i>
|
||
|
|
<text v-if="icon=='issue'" class="Toast-title-fail">{{title}}</text>
|
||
|
|
<i class="iconfont icon-tishi" style="font-size: 60px;color: #ff9000;" v-if="icon=='warn'"></i>
|
||
|
|
<text v-if="icon=='warn'" class="Toast-title-fail">{{title}}</text>
|
||
|
|
<text class="Toast-subtitle">{{content}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name:"show-toast",
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
show(){
|
||
|
|
return this.$toastStore.state.show;
|
||
|
|
},
|
||
|
|
title(){
|
||
|
|
return this.$toastStore.state.title;
|
||
|
|
},
|
||
|
|
content(){
|
||
|
|
return this.$toastStore.state.content;
|
||
|
|
},
|
||
|
|
icon(){
|
||
|
|
return this.$toastStore.state.icon;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
setTimeout(()=>{
|
||
|
|
this.$toastStore.commit('hideToast')
|
||
|
|
this.$toastStore.commit('success',"confirm")
|
||
|
|
},3000)
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
closeToast(){
|
||
|
|
this.$toastStore.commit('hideToast')
|
||
|
|
},
|
||
|
|
clickBtn(res){
|
||
|
|
this.$toastStore.commit('hideToast')
|
||
|
|
this.$toastStore.commit('success',res)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
beforeDestroy(){
|
||
|
|
this.$toastStore.commit('hideToast')
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
._showToast{
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left:0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
z-index:10000;
|
||
|
|
._shade{
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
background: #000;
|
||
|
|
opacity: .6;
|
||
|
|
z-index:11000;
|
||
|
|
}
|
||
|
|
._ToastBox{
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
z-index:12000;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
.Toast-box{
|
||
|
|
position: absolute;
|
||
|
|
width: 238.5px;
|
||
|
|
min-height: 100px;
|
||
|
|
top:50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%,-50%);
|
||
|
|
background: #FFFFFF;
|
||
|
|
box-shadow: 0px 10px 20px 0px rgba(28, 23, 47, 0.2);
|
||
|
|
border-radius: 20px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
padding: 20px 0px 0px 0px;
|
||
|
|
.Toast-icon{
|
||
|
|
width: 71px;
|
||
|
|
height: 71px;
|
||
|
|
display: block;
|
||
|
|
margin-top:17px;
|
||
|
|
}
|
||
|
|
.Toast-title-fail{
|
||
|
|
font-size: 16px;
|
||
|
|
// font-family: Source Han Sans CN;
|
||
|
|
// font-weight: bold;
|
||
|
|
// color: #EC4E4E;
|
||
|
|
margin-top: 10px;
|
||
|
|
}
|
||
|
|
.Toast-title-success{
|
||
|
|
font-size: 16px;
|
||
|
|
// font-family: Source Han Sans CN;
|
||
|
|
// font-weight: bold;
|
||
|
|
// color: #26B156;
|
||
|
|
margin-top: 10px;
|
||
|
|
}
|
||
|
|
.Toast-subtitle{
|
||
|
|
font-size: 14px;
|
||
|
|
font-family: Source Han Sans CN;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #666666;
|
||
|
|
margin-top: 6px;
|
||
|
|
padding: 0 12px 12px 12px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|