引导添加到桌面添加到我的小程序

速搭科技

于 2024-01-31 19:15:02 发布

阅读量461

点赞数 2

文章标签：小程序前端

本文链接：https://blog.csdn.net/zd1007129657/article/details/135960459

版权

<template>
  <view class="add-applet" v-if="isShow" @click="close" :style="'top:'+topHeight+'px'">
    <view class="triangle"></view>
    <view class="content">点击"添加到我的小程序"方便您快速查看</view>
    <!-- <view class="content">点击"添加到桌面"无需打开微信快速访问</view> -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isShow: true,
        topHeight: 0,
      };
    },
    mounted() {
      let menuButton = uni.getMenuButtonBoundingClientRect();
      if (menuButton) {
        this.topHeight = menuButton.height + menuButton.top + 10;
      }
      this.show();
    },
    methods: {
      show() {
        let currentDate = new Date().setDate(new Date().getDate()-7);
        let addAppletDate = uni.getStorageSync('addAppletDate');
        if (!addAppletDate || currentDate >= addAppletDate) {
          this.isShow = true;
          setTimeout(res => {
            this.close();
          }, 10000)
        }
      },
      close() {
        this.isShow = false;
        uni.setStorageSync('addAppletDate', new Date().getTime());
      },
    },
  };
</script>

<style scoped lang="scss">
  .add-applet {
    border-radius: 10rpx;
    background: rgba(5, 5, 5, 0.5);
    padding: 16rpx 20rpx;
    position: fixed;
    z-index: 3;
    top: 180rpx;
    right: 100rpx;
    display: flex;
    align-items: center;
    .triangle{
      position: absolute;
      top: -15rpx;
      right: 30rpx;
      width: 0;
      height: 0;
      border-left: 15rpx solid transparent;
      border-right: 15rpx solid transparent;
      border-bottom: 15rpx solid rgba(5, 5, 5, 0.5);
    }
    .content{
      color: #ffffff;
      font-size: 22rpx;
    }
  }
</style>