jimei-hudong-h5/components/shortcut/index.vue

<template>
  <view class="shortcut" :style="{ '--right': `${rightPx}px`, '--bottom': `${bottomPx}px` }" style="bottom: 300rpx;">
 
    <!-- 显示隐藏开关 -->
    <view class="nav-item nav-item__switch shortcut_click_show" @click="onToggleShow()">
      <text class='iconfont icon-home'></text>
    </view>
  </view>
</template>

<script>
	import wx from "weixin-js-sdk";
  import { getTabBarLinks } from '@/core/app'

  export default {

    /**
     * 组件的属性列表
     * 用于组件自定义设置
     */
    props: {
      right: {
        type: Number,
        default: 20
      },
      bottom: {
        type: Number | String,
        default: 100
      }
    },

    data() {
      return {
        // 弹窗显示控制
        isShow: false,
        transparent: true
      }
    },

    computed: {
      rightPx() {
        return uni.upx2px(this.right)
      },
      bottomPx() {
        return uni.upx2px(this.bottom)
      }
    },

    methods: {




      /**
       * 导航菜单切换事件
       */
      onToggleShow() {
		  wx.miniProgram.getEnv((res) => {
		
		  	if (res.miniprogram) {
		  		// 小程序环境下逻辑，跳转到小程序的扫描页面地址（/pages/dx-scan-code/scan-code，自己定义的地址）,可以带上页面返回时需要的参数
		  		wx.miniProgram.reLaunch({
		  			url: '/pages/index/index'
		  		})
		  		
		  	
		  		
		  	} else {
		  		console.log(res, 'res')
		  		this.$toast('非微信环境逻辑')
		  	}
		  })
      
      },

      /**
       * 导航页面跳转
       */
      onTargetPage(index = 0) {
        const tabLinks = getTabBarLinks()
        this.$navTo(tabLinks[index])
      }

    }
  }
</script>

<style lang="scss" scoped>
  /* 快捷导航 */
  .shortcut {
    position: fixed;
    right: calc(var(--window-right) + var(--right));
    bottom: calc(var(--window-bottom) + var(--bottom));
    width: 76rpx;
    height: 76rpx;
    line-height: 1;
    z-index: 99999;
    border-radius: 50%;
  }

  /* 导航菜单元素 */
  .nav-item {
    position: absolute;
    bottom: 0;
    padding: 0;
    width: 76rpx;
    height: 76rpx;
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    transform: rotate(0deg);
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .nav-item .iconfont {
    font-size: 40rpx;
  }

  /* 导航开关 */

  .nav-item__switch {
    opacity: 1;
  }

  .shortcut_click_show {
    margin-bottom: 0;
    background: #4F1160;
  }

  /* 显示动画 */

  .show_80 {
    bottom: 384rpx;
    animation: show_80 0.3s forwards;
  }

  .show_60 {
    bottom: 288rpx;
    animation: show_60 0.3s forwards;
  }

  .show_40 {
    bottom: 192rpx;
    animation: show_40 0.3s forwards;
  }

  .show_20 {
    bottom: 96rpx;
    animation: show_20 0.3s forwards;
  }

  @keyframes show_20 {
    from {
      bottom: 0;
      transform: rotate(0deg);
      opacity: 0;
    }

    to {
      bottom: 96rpx;
      transform: rotate(360deg);
      opacity: 1;
    }
  }

  @keyframes show_40 {
    from {
      bottom: 0;
      transform: rotate(0deg);
      opacity: 0;
    }

    to {
      bottom: 192rpx;
      transform: rotate(360deg);
      opacity: 1;
    }
  }

  @keyframes show_60 {
    from {
      bottom: 0;
      transform: rotate(0deg);
      opacity: 0;
    }

    to {
      bottom: 288rpx;
      transform: rotate(360deg);
      opacity: 1;
    }
  }

  @keyframes show_80 {
    from {
      bottom: 0;
      transform: rotate(0deg);
      opacity: 0;
    }

    to {
      bottom: 384rpx;
      transform: rotate(360deg);
      opacity: 1;
    }
  }

  /* 隐藏动画 */

  .hide_80 {
    bottom: 0;
    animation: hide_80 0.3s;
    opacity: 0;
  }

  .hide_60 {
    bottom: 0;
    animation: hide_60 0.3s;
    opacity: 0;
  }

  .hide_40 {
    bottom: 0;
    animation: hide_40 0.3s;
    opacity: 0;
  }

  .hide_20 {
    bottom: 0;
    animation: hide_20 0.3s;
    opacity: 0;
  }

  @keyframes hide_20 {
    from {
      bottom: 96rpx;
      transform: rotate(360deg);
      opacity: 1;
    }

    to {
      bottom: 0;
      transform: rotate(0deg);
      opacity: 0;
    }
  }

  @keyframes hide_40 {
    from {
      bottom: 192rpx;
      transform: rotate(360deg);
      opacity: 1;
    }

    to {
      bottom: 0;
      transform: rotate(0deg);
      opacity: 0;
    }
  }

  @keyframes hide_60 {
    from {
      bottom: 288rpx;
      transform: rotate(360deg);
      opacity: 1;
    }

    to {
      bottom: 0;
      transform: rotate(0deg);
      opacity: 0;
    }
  }

  @keyframes hide_80 {
    from {
      bottom: 384rpx;
      transform: rotate(360deg);
      opacity: 1;
    }

    to {
      bottom: 0;
      transform: rotate(0deg);
      opacity: 0;
    }
  }
</style>