supervise/supervise-uniapp/pages/index/UserPrompt.vue

<template>
  <view>
	  <!-- 自定义导航栏 -->
	  <view class="navBarBox">
	  	<!-- 状态栏占位 -->
	  	<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
	  	<!-- 真正的导航栏内容 -->
	  	<view class="navBar">
	  		<view>用户须知</view>
	  	</view>
	  </view>
	  
    <view class="subscribe">
      <template type="text/wxtag-template">
        <view class="subscribe-icon">
          <image class="subscribe-icon-one" src="/static/static/img/finger_00.png"></image>
          <image class="subscribe-icon-two" src="/static/static/img/finger_01.png"></image>
        </view>
        <view class="subscribe-cont">
          <wx-open-subscribe :template="templateIds[0]" id="subscribe-btn" ref="subscribeBtn">
            <script type="text/wxtag-template" slot="style">
              <style>
               .subscribe-txt{
                 color: #89663f;
                 font-weight: bold;
                -webkit-animation: subscribeCont 1s linear infinite;
                  animation: subscribeCont 1s linear infinite;
                  display: inline-block;
                  height: 40px;
                  width: 160px;
                  text-align: center;
                  line-height: 40px;
                }
                @keyframes subscribeCont {
                  25% {
                    transform: scale(.98);
                  }
                
                  50%,
                  100% {
                    transform: scale(1);
                  }
                
                  75% {
                    transform: scale(1.05);
                  }
                }
              </style>
            </script>
            <script type="text/wxtag-template">
              <view class="subscribe-txt">点击消息提醒</view>
            </script>
          </wx-open-subscribe>
        </view>
      </template>
    </view>
  </view>
</template>

<script>
  // const jweixin = require('jweixin-module');
  export default {
    data() {
      return {
		  // 状态栏高度
		  statusBarHeight: 0,
        templateIds: ['R9LbtDjg9sC-o3xUS2kDcSQ9MS4I67LnacAS8Fsmxp0']
      }
    },
	//第一次加载时调用
	created() {
		//获取手机状态栏高度
		this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
	},
    onReady() {
      this.getInfo()
    },
    methods: {
      getInfo() {
      // 这里是后去config得基本信息（跟后端要接口 wx.$api.index.wpaySubscribeH5Info  别看不懂，这是封装的请求接口而已换成你自己的就行了）
        wx.$api.index.wpaySubscribeH5Info(location.href.split('#')[0], ['chooseWXPay', ]).then(res1 => {
          let w_pay = JSON.parse(res1.data)
          this.$jweixin.config({
            debug: false,
            appId: w_pay.appId,
            timestamp: w_pay.timestamp,
            nonceStr: w_pay.nonceStr,
            signature: w_pay.signature,
            jsApiList: ['wx-open-subscribe', 'wx-open-launch-app', 'launchAppLication'],
            openTagList: ['wx-open-subscribe', 'wx-open-launch-app', 'wx-open-subscribe-dialog']
          })
          // config 准备好了那么就开始操作了，
          jweixin.ready(() => {
          // wx-open-subscribe 原生绑定点击事件
            this.$nextTick(() => {
              const btn = this.$refs.subscribeBtn;
              btn.addEventListener('success', ({
                detail
              }) => {
                this.content2 = JSON.parse(detail.subscribeDetails)
                for (var i in this.content2) {
                  if (i === this.templateIds[0] || i ===
                    'EZcWzqrLdU-2Ax6KILdv9uSf6ANbHka7CbYG2KGahPk') {
                    let status = JSON.parse(this.content2[i]).status
                    console.log(status)
                    console.log(this.content2)
                    if (status === 'accept') {
                    // 这里跟后端要个接口，绑定；
                      wx.$api.index.subscribeH5(1).then(res => {
                        wx.showLoading({
                          title: res.data,
                          icon: 'none',
                        })
                        // 获取卡权益
                        // this.indexInfo();
                        setTimeout(function() {
                          wx.hideLoading();
                        }, 1000)
                      })
                    } else if (status === 'reject') {
                      alert('拒绝授权')
                    }
                  }
                }
              });
              btn.addEventListener('error', (e) => {
                alert('授权失败了，请重试')
              });
            })
          })
        }).catch(err => {
          wx.showToast({
            title: err.message,
            icon: 'none'
          })
        })
      }

    }
  }
</script>

<style>
	
	.navBarBox {
		background: #007AFF;
	}
	
	.navBarBox .statusBar {}
	
	.navBarBox .navBar {
		padding-top: 15px;
		padding-bottom: 13px;
		display: flex;
		font-size: 13px;
		flex-direction: row;
		color: #ffffff;
		justify-content: center;
		align-items: center;
	}
	
	
  /* 订阅消息 */
  .subscribe {
    color: #89663f;
    width: 100%;
    padding: 0 100rpx;
    display: inline-block;
    box-sizing: border-box;
    margin-top: 50rpx;
    display: flex;
    /* -webkit-animation: Tada 3s both infinite;
              -moz-animation: Tada 3s both infinite;
              -ms-animation: Tada 3s both infinite;
              animation: Tada 3s both infinite; */
  }

  .subscribe-icon,
  .subscribe-cont {
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    position: relative;
  }

  .subscribe-icon {
    width: 150rpx;
    padding-left: 30rpx;
    box-sizing: border-box;
    background: linear-gradient(to right, #f3c988, #f9e0b8);
    border-radius: 40rpx 0 0 40rpx;
  }

  .subscribe-icon::after {
    position: absolute;
    content: '';
    right: -50rpx;
    top: 0;
    width: 0;
    height: 0;
    border-bottom: 80rpx solid #f9e0b8;
    border-right: 50rpx solid transparent;
    z-index: 9;
  }

  .subscribe-cont {
    width: calc(100% - 150rpx);
    background: linear-gradient(to right, #f3c988, #f9e0b8);
    border-radius: 0 40rpx 40rpx 0;
    font-weight: 600;
  }

  .subscribe-cont text {
    display: inline-block;
    -webkit-animation: subscribeCont 1s linear infinite;
    animation: subscribeCont 1s linear infinite;
  }

  @keyframes subscribeCont {
    25% {
      transform: scale(.98);
    }

    50%,
    100% {
      transform: scale(1);
    }

    75% {
      transform: scale(1.05);
    }
  }

  .subscribe-icon image {
    width: 54rpx;
    height: 54rpx;
    margin-top: 14rpx;
  }

  @keyframes Tada {
    0% {
      transform: scale(1);
      transform: scale(1)
    }

    70%,
    73% {
      transform: scale(1) rotate(-3deg);
      transform: scale(1) rotate(-3deg)
    }

    77%,
    83%,
    90%,
    97% {
      transform: scale(1) rotate(3deg);
      transform: scale(1) rotate(3deg)
    }

    80%,
    87%,
    93% {
      transform: scale(1) rotate(-3deg);
      transform: scale(1) rotate(-3deg)
    }

    100% {
      transform: scale(1) rotate(0);
      transform: scale(1) rotate(0)
    }
  }

  .subscribe-icon-one {
    -webkit-animation: bounce-right 1s linear infinite;
    animation: bounce-right 1s linear infinite;
  }

  @keyframes bounce-right {
    25% {
      transform: translateX(-3px);
    }

    50%,
    100% {
      transform: translateX(0);
    }

    75% {
      transform: translateX(3px);
    }
  }

  .subscribe-icon-two {
    -webkit-animation: bounce-two 1s linear infinite;
    animation: bounce-two 1s linear infinite;
  }

  @keyframes bounce-two {
    25% {
      opacity: 0;
      transform: translateX(-3px);
    }

    75% {
      opacity: 1;
      transform: translateX(3px);
    }
  }

  subscribe-btn {
    width: 100%;
    height: 200rpx;
    text-align: center;
    line-height: 150rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: #ffffff;
    background-color: green;
    position: relative;
    overflow: hidden;
  }
</style>