junzitang/components/struggler-uniapp-add-tip/struggler-uniapp-add-tip.vue

<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="uni-add-tips-box" v-if="showTip">
			<view class="uni-add-tips-content" @tap="hideTip">
				<view class="clearfix" style="width: 100%;">
					点击
					<image src="https://onlineimg.qianniao.vip/wxdot.jpg" class="wxdot" mode="aspectFill"></image>
					添加到我的小程序，微信首页下拉即可快速访问
					<text class="ibonfont ibonguanbi close-icon" @click="hideTip"></text>
				</view>
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
const SHOW_TIP = 'SHOW_TIP';
export default {
	data() {
		return {
			showTip: false
		};
	},
	mounted() {
		this.showTip = !uni.getStorageInfoSync().keys.includes(SHOW_TIP);
		// setTimeout(()=>{
		// 	this.showTip = false
		// },this.duration*1000)
	},
	props: {
		tip: {
			type: String,
			default: '点击 ··· 添加到我到小程序，微信首页下拉即可快速访问'
		},
		duration: {
			type: Number,
			default: 10
		}
	},
	methods: {
		hideTip() {
			uni.setStorageSync(SHOW_TIP, true);
			this.showTip = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.wxdot {
	width: 60upx;
	height: 30upx;
	// transform: translateY(-20upx);
	margin-right: 8upx;
	display: inline-block;
}
.close-icon {
	font-size: 32upx;
	position: absolute;
	top: 22upx;
	right: 12upx;
}
$themeColor: #ffffff; //主题色
.uni-add-tips-box {
	position: fixed;
	top: 128upx;
	right: 0;
	z-index: 99999;
	opacity: 0.8;
	width: 600upx;
	animation: opacityC 1s linear infinite;
}
.uni-add-tips-content::before {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	top: -38upx;
	right: 80upx;
	border-width: 20upx;
	border-style: solid;
	display: block;
	border-color: transparent transparent $themeColor transparent;
}
.uni-add-tips-content {
	border-width: 0upx;
	margin-top: 20upx;
	position: relative;
	background-color: $themeColor;
	box-shadow: 0 10upx 20upx -10upx #ccc;
	border-radius: 12upx;
	padding: 18upx 26upx;
	margin-right: 40upx;
	color: #333;
	font-size: 28upx;
	font-weight: 400;
}
@keyframes opacityC {
	0% {
		opacity: 0.8;
	}
	50% {
		opacity: 1;
	}
}
</style>