applet/uni-app/问星数据.../pages/mine/mine.vue

<template>
	<view>
		<view class="mine">
		  <view class="userInfo">
		    <view class="headImg">
				<image src="/static/img/userHeader.png" mode="widthFix"></image>
		    </view>
		  </view>
		  <view class="business">
		    <view class="business_item" @click="openWxApplet">
		      <image src="/static/img/mine_renling.png" mode="widthFix"></image>
		      <text>我的视频号</text>
		    </view>
		    <view class="business_item"  @click="openWxApplet">
		      <image src="/static/img/guanzhu@2x.png" mode="widthFix"></image>
		      <text>收藏的视频号</text>
		    </view>
		    <view class="business_item" @click="openWxApplet">
		      <image src="/static/img/news.png" mode="widthFix"></image>
		      <text>消息订阅</text>
		    </view>
		  </view>
		  <view class="list">
		    <view class="item" @click="openWxApplet">
		      <image mode="widthFix" class="icon" src="/static/img/followVideo2.png"></image>
		      <view class="right">
		        <text>收藏的视频</text>
		        <image class="back" mode="widthFix" src="/static/img/jt_right.png"></image>
		      </view>
		    </view>
		    <view class="item" @click="openPage">
		      <image mode="widthFix" class="icon" src="/static/img/invite_iocn.png"></image>
		      <view class="right">
		        <text>视频号冷启动</text>
		        <image class="back" mode="widthFix" src="/static/img/jt_right.png"></image>
		      </view>
		    </view>
		    <view class="item" @click="interchangeFlag=true">
		      <image mode="widthFix" class="icon" src="/static/img/mine_qun2.png"></image>
		      <view class="right">
		        <text>官方交流群</text>
		        <image class="back" mode="widthFix" src="/static/img/jt_right.png"></image>
		      </view>
		    </view>
		    <view class="item" @click="wxSubscriptionFlag=true">
		      <image mode="widthFix" class="icon" src="/static/img/mine_gzh2.png"></image>
		      <view class="right">
		        <text>关注公众号</text>
		        <image class="back" mode="widthFix" src="/static/img/jt_right.png"></image>
		      </view>
		    </view>
		  </view>
		</view>
		<image src="/static/img/mine_bg_pc.png" mode="widthFix" class="mine_bg_pc"></image>
		<view class="pc_hint">PC端体验更佳</view>
		<view class="pc_http">
		  sph.wenxingshuju.com
		</view>
		<view class="copyButton" @click="copyCon">复制网址</view>
		<tab-bar :current='4'></tab-bar>
		<interchange v-if="interchangeFlag" @closeMask="interchangeFlag=false"></interchange>
		<applet-mask v-if="appletMaskFlag" @closeMask='appletMaskFlag=false'></applet-mask>
		<wxSubscription v-if="wxSubscriptionFlag" @closeMask='wxSubscriptionFlag=false'></wxSubscription>
	</view>
</template>

<script>
	import { setClipboardData } from 'uni-clipboard'
	export default {
		data() {
			return {
				interchangeFlag:false,
				appletMaskFlag:false,
				wxSubscriptionFlag:false
			}
		},
		methods: {
			copyCon(){
				// var sUserAgent = navigator.userAgent.toLowerCase();
				// if(sUserAgent.indexOf("baidu") > 0 || sUserAgent.indexOf("ucbrowser") > 0 ) {
					setClipboardData('https://sph.wenxingshuju.com').then((res)=>{
						uni.showToast({
							title: '复制成功'
						})
					})
				// }else{
				// 	location.href = 'weixin://dl/business/?t=o3aIVwrmPmt'
				// }
			},
			openPage(){
				uni.navigateTo({
					url:'/pages/extension/extension'
				})
			},
			openWxApplet(){
			   var sUserAgent = navigator.userAgent.toLowerCase();
			   if(sUserAgent.indexOf("baidu") > 0 || sUserAgent.indexOf("ucbrowser") > 0 ) {
				   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'),'']):'';
			   	this.appletMaskFlag = true;
			   }else{
			   	if (!navigator.userAgent.toLowerCase().match(/micromessenger/i)) {
					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'),'']):'';
			   	   location.href = 'weixin://dl/business/?t=p79W84aUqrm'
			   	}else{
					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'),'']):'';
					this.appletMaskFlag = true;
				}
			   }
			}
		}
	}
</script>

<style>
/* pages/mine/mine.wxss */
page {
  background: #F3F3F3;
  padding-bottom: 80rpx;
}
.mine {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.userInfo {
  padding:50rpx 0;
  padding-left: 16rpx;
  padding-bottom: 50rpx;
  border-bottom: 2rpx solid rgba(137,137,156,.5);
  background: #2562FF;
}
.headImg {
  display: block;
  width: 135rpx;
  height: 135rpx;
  border-radius: 50%;
  overflow: hidden;
  margin: auto;
  background: #fff;
}
.headImg image{
	width: 100%;
	height: 100%;
}
.head {
  display: block;
  width: 135rpx!important;
  height: 135rpx!important;
  margin: auto;
}
.name {
  display: block;
  color: #fff;
  margin: 14rpx auto;
  font-size: 28rpx;
  font-weight: bold;
  line-height: 40rpx;
  text-align: center;
  width: 300rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item {
  padding: 30rpx 40rpx;
  margin: 20rpx 0 ;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #101426;
  font-size: 30rpx;
  padding-left: 32rpx;
}
.icon {
  width: 46rpx;
  height: auto;
}
.back {
  width: 14rpx;
  height: auto;
}
.mine_bg_pc{
  width: 222rpx;
  height: 178rpx;
  margin: auto;
  display: block;
}
.pc_http{
  width: 420rpx;
  height: 52rpx;
  background: #EAEDFA;
  border-radius: 6rpx;
  color: #101426;
  font-size: 24rpx;
  line-height: 52rpx;
  margin: auto;
  overflow: hidden;
  margin-top: 26rpx;
  text-align: center;
}
.pc_http .copy{
  width: 118rpx;
  height: 52rpx;
  background: #2662FF;
  color: #ffffff;
  font-size: 24rpx;
  line-height: 52rpx;
  text-align: center;
}
.pc_hint{
  color: #4A4A5F;
  font-size: 24rpx;
  line-height: 34rpx;
  text-align: center;
}
.authorizeContent .title{
  text-align: center;
  font-size: 34rpx;
  line-height: 40rpx;
  padding-top: 43rpx;
}
.authorizeContent .evmCantiner{
  margin-top: 40rpx;
}
.authorizeContent .evmCantiner .evm{
  width: 400rpx;
    height: 400rpx;
    display: block;
    margin: auto;
}
.authorizeContent .claimEvmHint{
  font-size: 26rpx;
  color: #666;
  text-align: center;
}
.buttons{
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 40rpx;
}
.buttons .button{
  color: #2662FF;
  border: 1px solid #2662FF;
  font-size: 24rpx;
  border-radius: 60rpx;
  line-height: 60rpx;
  width: 200rpx;
  text-align: center;
}
.buttons  .buttonyes{
  color: #ffffff;
  background: #2662FF;
}

.business{
  background: #FFFFFF;
  width: 100%;
  border-radius: 40rpx;
  margin-top: -30rpx;
  display: flex;
  align-items: center;
  padding: 48rpx;
  box-sizing: border-box;
}
.business .business_item{
  width: 33.3%;
  text-align: center;
  background: transparent;
  padding: 0;
  line-height: initial;
}
.business .business_item image{
  width: 60rpx;
  height: 60rpx;
  display: block;
  margin: auto;
  margin-bottom: 26rpx;
}
.business .business_item  text{
  color: #101426;
  font-size: 28rpx;
  line-height: 40rpx;
}
.copyButton{
  color: #ffffff;
  background: #2662FF;
  font-size: 24rpx;
  border-radius: 60rpx;
  line-height: 60rpx;
  width: 200rpx;
  text-align: center;
  margin: auto;
  margin-top: 30rpx;
  margin-bottom: 130rpx;
}
</style>