效果:
<template>
<view
class="box"
v-if="isShowTip && userInfo.appUserType == 1"
:style="[{ top: `${navBarInfo.customBarHeight}px` }]"
>
<view class="arrow"></view>
<view class="body">
<view class="textContent">{{ text }}</view>
<view class="cancle_btn fr_c fj_c" @click="hideTip">
<img class="delete-icon" src="@img/delete.png" />
</view>
</view>
</view>
</template>
<script>
import { mapState } from "vuex";
import dayjs from "dayjs";
export default {
name: "NavTip",
props: {
// 提示文字
text: {
type: String,
value: "点击添加至我的小程序,方便下次使用"
},
//持续时间
durTime: {
type: Number,
value: 30
}
},
computed: {
...mapState("user", {
userInfo: s => s
}),
...mapState("navBar", {
navBarInfo: s => s
})
},
data() {
return {
isShowTip: false,
STORAGE_KEY_ONE: "Tip-One"
};
},
mounted() {
this.initTips();
this.timeOutHide();
},
methods: {
initTips() {
//缓存
let key = this.STORAGE_KEY_ONE;
let isStoreTip = wx.getStorageSync(key);
//当前时间
let YMDTime = dayjs(new Date()).format("YYYY-MM-DD");
let YMDTimeArr = YMDTime.split("-");
let yTime = Number(YMDTimeArr[0]);
let mTime = Number(YMDTimeArr[1]);
let dTime = Number(YMDTimeArr[2]);
if (isStoreTip) {
//缓存的时间
let storeYMDTime = isStoreTip.split("-");
let storeyTime = Number(storeYMDTime[0]);
let storemTime = Number(storeYMDTime[1]);
let storedTime = Number(storeYMDTime[2]);
//如果是下一天就把前一天缓存清空
if (storeyTime < yTime || storemTime < mTime || storedTime < dTime) {
wx.removeStorage(key);
wx.setStorage({
key,
data: YMDTime
});
this.isShowTip = true;
}
return;
}
//没缓存-存一下
wx.setStorage({
key,
data: YMDTime
});
// 没显示过,则进行展示
this.isShowTip = true;
},
hideTip() {
this.isShowTip = false;
},
//定时30秒后关闭
timeOutHide() {
setTimeout(() => {
this.isShowTip = false;
}, this.durTime * 1000);
}
}
};
</script>
<style lang="scss" scoped>
.box {
position: fixed;
top: 0;
/* left: 0; */
right: 0;
z-index: 10000;
display: flex;
justify-content: flex-end;
align-items: flex-end;
flex-direction: column;
width: 600rpx;
}
.arrow {
width: 0;
height: 0;
margin-right: 120rpx;
border-width: 10rpx;
border-style: solid;
border-color: transparent transparent rgba(0, 0, 0, 0.7) transparent;
}
.body {
background-color: rgba(0, 0, 0, 0.7);
/* box-shadow: 0 10rpx 20rpx -10rpx #34b5e2; */
border-radius: rpx(5);
display: flex;
align-items: center;
justify-content: center;
height: rpx(35);
padding: 0 18rpx 0 30rpx;
margin-right: 60rpx;
}
.textContent {
font-size: rpx(13);
font-weight: 500;
color: #ffffff;
line-height: rpx(18.5);
padding: rpx(12) 0;
}
.cancle_btn {
margin-left: rpx(10);
.delete-icon {
width: rpx(10);
height: rpx(10);
}
}
</style>