123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178 |
- <template>
- <view class="mask" @click="$emit('closeMask')">
- <template v-if="isWeixin">
- <wx-open-launch-weapp id="launch-btn" username="gh_7b8ac119fda1" :path="wx_page+'?source=h5_wx'" class="open_button">
- <script type="text/wxtag-template">
- <style>
- .btn{display: block;margin:auto;font-size:16px;line-height:49px;text-align:center;background:transparent;border:none;color:#ffffff;}
- </style>
- <button class="btn">打开小程序</button>
- </script>
- </wx-open-launch-weapp>
- </template>
- <view class="content" v-else>
- <image src="../../static/img/close.png" mode="widthFix" class="close" @click="closeMask"></image>
- <view class="title">
- 微信搜索<text style="color:#FF5A14">问星数据</text>小程序
- </view>
- <view class="title">免费查看更多视频号数据</view>
- <image src="https://kx-bigdata.oss-cn-beijing.aliyuncs.com/phone/h5_mask.png" mode="widthFix" class="image"></image>
- <button type="default" class="copyButton" @click="copyCon(1)">第一步:点击复制【问星数据】</button>
- <button type="default" class="copyButton" @click="copyCon(2)" style="margin-top:20rpx">第二步:打开微信</button>
- <view class="hint">如无法跳转,请手动打开微信APP</view>
- </view>
- </view>
- </template>
- <script>
-
- import { setClipboardData } from 'uni-clipboard'
- export default {
- props:{
- url_scheme:{
- type:String,
- default:'weixin://dl/business/?t=o3aIVwrmPmt'
- },
- wx_page:{
- type:String,
- default:'/pages/index/index'
- }
- },
- data() {
- return {
- isWeixin:false
- }
- },
- created() {
- if(navigator.userAgent.toLowerCase().match(/micromessenger/i)){
- this.isWeixin = true
- }
- },
- mounted() {
- // #ifdef H5
- if(navigator.userAgent.toLowerCase().match(/micromessenger/i)){
- this.$nextTick(function(){
- var btn = document.getElementById('launch-btn');
- btn.addEventListener('launch', function (e) {
- burialPoint({project_name:'移动端h5',button_name:'微信端点击按钮',key_value:parseQueryString('key')?parseQueryString('key'):'',page_name:'推广落地页',url_value:window.location.href,browser:userAgent()})
- _hmt?_hmt.push(['_trackEvent','移动端h5', '微信端点击按钮', parseQueryString('key')?parseQueryString('key'):'','']):'';
- });
- })
- }
- // #endif
- },
- methods: {
- copyCon(type){
- if(type==1){
- setClipboardData('问星数据').then((res)=>{
- this.$burialPoint({project_name:'小程序版h5',button_name:'复制成功',key_value:uni.getStorageSync('key')?uni.getStorageSync('key'):'',page_name:'弹框',url_value:window.location.href})
- _hmt?_hmt.push(['_trackEvent','小程序版h5', '复制成功', uni.getStorageSync('key'),'']):'';
- uni.showToast({
- title: '复制成功'
- })
- })
- }
- if(type==2){
- this.$burialPoint({project_name:'小程序版h5',button_name:'点击弹框打开微信',key_value:uni.getStorageSync('key')?uni.getStorageSync('key'):'',page_name:'弹框',url_value:window.location.href})
- _hmt?_hmt.push(['_trackEvent','小程序版h5', '点击弹框打开微信', uni.getStorageSync('key'),'']):'';
- var sUserAgent = navigator.userAgent.toLowerCase();
- if(sUserAgent.indexOf("baidu") > 0 || sUserAgent.indexOf("ucbrowser") > 0 ) {
- this.appletMaskFlag = true;
- }else{
- if (!navigator.userAgent.toLowerCase().match(/micromessenger/i)) {
- location.href = this.url_scheme
- }
- }
- }
- },
- closeMask(){
- this.$emit('closeMask')
- },
- getWxInfo(){
-
- }
- }
- }
- </script>
- <style>
- .open_button{
- width: 560rpx;
- height: 100rpx;
- background: linear-gradient(270deg, #FF8B4F 0%, #FF5227 100%);
- border-radius: 10rpx;
- position: fixed;
- display: block;
- top: 65vh;
- left: 0;
- right: 0;
- margin: auto;
- border: none;
- color: #FFFFFF;
- font-size: 16rpx;
- z-index: 99;
- text-align: center;
- line-height: 50rpx;
- }
- .mask{
- width: 100%;
- height: 100vh;
- background: rgba(0,0,0,0.5);
- position: fixed;
- top: 0;
- left: 0;
- z-index: 99;
- }
- .content{
- width: 622rpx;
- height: 700rpx;
- background: #FFFFFF;
- border-radius: 12rpx;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- margin: auto;
- padding-top: 84rpx;
- }
- .close{
- width: 40rpx;
- height: 40rpx;
- position: absolute;
- top: 20rpx;
- right: 20rpx;
- }
- .title{
- color: #000000;
- font-size: 40rpx;
- line-height: 44rpx;
- text-align: center;
- font-weight: bold;
- }
- .image{
- width: 468rpx;
- height: 234rpx;
- display: block;
- margin: auto;
- margin-top: 40rpx;
- }
- .copyButton{
- width: 540rpx;
- height: 80rpx;
- background: #2762FF;
- border-radius: 8rpx;
- color: #FFFFFF;
- font-size: 32rpx;
- line-height: 80rpx;
- text-align: center;
- margin-top: 40rpx;
- }
- .hint{
- text-align: center;
- line-height: 60rpx;
- color: #999;
- font-size: 22rpx;
- }
- </style>
|