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

<template>
	<view>
		<view class="qun_type_view">
		  <view :class="['type_info',tag_type==1?'type_info_active':'']" @click="tagTypeEvent(1)">普通互赞群</view>
		  <view :class="['type_info',tag_type==2?'type_info_active':'']"  @click="tagTypeEvent(2)">垂直互赞群</view>
		</view>
		<!-- <image src="https://kx-bigdata.oss-cn-beijing.aliyuncs.com/Applet/wxVideo/invite_list_bg.jpg?v=2" mode="widthFix" class="topImgBg"></image> -->
		<view class="listView">
		  <image :src="tag_type==1?'https://kx-bigdata.oss-cn-beijing.aliyuncs.com/Applet/wxVideo/invite_list_title.jpg?v=2':'https://kx-bigdata.oss-cn-beijing.aliyuncs.com/Applet/wxVideo/invite_list_title_2.png'" mode="widthFix" class="list_title"></image>
		  <scroll-view scroll-y="true" style="height:calc(100vh - 300rpx)">
		    <view class="listItem" v-for="(item,index) in tag_type==1?list:czList" :key="index">
		      <view class="left">
		        <image :src="item.icon_url?item.icon_url:'https://kx-bigdata.oss-cn-beijing.aliyuncs.com/Applet/wxVideo/evm_bitmap.png'" mode="widthFix"></image>
		        <view class="qunInfo">
		          <view class="name">{{item.name}}</view>
		          <view class="tag">{{item.sign_desc}}</view>
		        </view>
		      </view>
		      <button @click="goQun" class="button">加入群聊</button>
		    </view>
		  </scroll-view>
		</view>
		<applet-mask v-if="appletMaskFlag" @closeMask='closeMask' url_scheme="weixin://dl/business/?t=D9GPIFp2mqp" wx_page='/pages/extension/list/index'></applet-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tag_type:1,
				appletMaskFlag:false,
				list:[
					{
						name:'问星数据互赞群1',
						sign_desc:'关注公众号进群',
					},
					{
						name:'问星数据互赞群2',
						sign_desc:'高质量完播互赞转发评论关注',
					},
					{
						name:'问星数据互赞群3',
						sign_desc:'高质量完播互赞转发评论关注',
					},{
						name:'问星数据互赞群4',
						sign_desc:'高质量完播互赞转发评论关注',
					},
					{
						name:'问星数据互赞群5',
						sign_desc:'高质量完播互赞转发评论关注',
					},
					{
						name:'问星数据互赞群6',
						sign_desc:'高质量完播互赞转发评论关注',
					},
					{
						name:'问星数据互赞群7',
						sign_desc:'高质量完播互赞转发评论关注',
					},
					{
						name:'问星数据互赞群8',
						sign_desc:'高质量完播互赞转发评论关注',
					},
					{
						name:'问星数据互赞群9',
						sign_desc:'组建中...',
					},
				],
				czList:[
					{
						name:'教育类互赞群',
						sign_desc:'垂直互赞获取更优资源',
						icon_url:'https://sph.wenxingshuju.com/wx_sph/upload/group_qrcode/icon4956eaefb5_20210714.png'
					},
					{
						name:'生活类互赞群',
						sign_desc:'垂直互赞获取更优资源',
						icon_url:'https://sph.wenxingshuju.com/wx_sph/upload/group_qrcode/icon870389a711_20210714.png'
					},
					{
						name:'职场类互赞群',
						sign_desc:'垂直互赞获取更优资源',
						icon_url:'https://sph.wenxingshuju.com/wx_sph/upload/group_qrcode/iconb43313239e_20210714.png'
					},
					{
						name:'影视娱乐类互赞群',
						sign_desc:'垂直互赞获取更优资源',
						icon_url:'https://sph.wenxingshuju.com/wx_sph/upload/group_qrcode/icon6299e921f0_20210714.png'
					},
					{
						name:'科技互联网类互赞群',
						sign_desc:'垂直互赞获取更优资源',
						icon_url:'https://sph.wenxingshuju.com/wx_sph/upload/group_qrcode/icon1a7a3c0838_20210714.png'
					},
					{
						name:'时尚艺术类互赞群',
						sign_desc:'垂直互赞获取更优资源',
						icon_url:'https://sph.wenxingshuju.com/wx_sph/upload/group_qrcode/iconf1c0058685_20210714.png'
					},
					{
						name:'情感类互赞群',
						sign_desc:'垂直互赞获取更优资源',
						icon_url:'https://sph.wenxingshuju.com/wx_sph/upload/group_qrcode/icon291ed65817_20210714.png'
					},
					{
						name:'美食类互赞群',
						sign_desc:'垂直互赞获取更优资源',
						icon_url:'https://sph.wenxingshuju.com/wx_sph/upload/group_qrcode/icon5af4519238_20210714.png'
					},
					{
						name:'音乐类互赞群',
						sign_desc:'垂直互赞获取更优资源',
						icon_url:'https://sph.wenxingshuju.com/wx_sph/upload/group_qrcode/icon5caf5abe5b_20210714.png'
					},
					{
						name:'健康类互赞群',
						sign_desc:'垂直互赞获取更优资源',
						icon_url:'https://sph.wenxingshuju.com/wx_sph/upload/group_qrcode/icon7ef8db4f58_20210714.png'
					},
					{
						name:'搞笑类互赞群',
						sign_desc:'垂直互赞获取更优资源',
						icon_url:'https://sph.wenxingshuju.com/wx_sph/upload/group_qrcode/icona6a93d731d_20210714.png'
					},
					{
						name:'财经类互赞群',
						sign_desc:'垂直互赞获取更优资源',
						icon_url:'https://sph.wenxingshuju.com/wx_sph/upload/group_qrcode/icon891b02b093_20210714.png'
					},
					{
						name:'旅行摄影类互赞群',
						sign_desc:'垂直互赞获取更优资源',
						icon_url:'https://sph.wenxingshuju.com/wx_sph/upload/group_qrcode/icon1a1ae167ef_20210714.png'
					},
					{
						name:'运动类互赞群',
						sign_desc:'垂直互赞获取更优资源',
						icon_url:'https://sph.wenxingshuju.com/wx_sph/upload/group_qrcode/icon5c10280e61_20210714.png'
					},
					{
						name:'母婴育儿类互赞群',
						sign_desc:'垂直互赞获取更优资源',
						icon_url:'https://sph.wenxingshuju.com/wx_sph/upload/group_qrcode/icon525fe7b12d_20210714.png'
					},
					{
						name:'汽车类互赞群',
						sign_desc:'垂直互赞获取更优资源',
						icon_url:'https://sph.wenxingshuju.com/wx_sph/upload/group_qrcode/icon3da287d40e_20210714.png'
					},
					{
						name:'科学科普类互赞群',
						sign_desc:'垂直互赞获取更优资源',
						icon_url:'https://sph.wenxingshuju.com/wx_sph/upload/group_qrcode/iconf025d37e66_20210714.png'
					},
					{
						name:'游戏动漫类互赞群',
						sign_desc:'垂直互赞获取更优资源',
						icon_url:'https://sph.wenxingshuju.com/wx_sph/upload/group_qrcode/icon1b82b0981b_20210714.png'
					},
					{
						name:'美妆类互赞群',
						sign_desc:'垂直互赞获取更优资源',
						icon_url:'https://sph.wenxingshuju.com/wx_sph/upload/group_qrcode/icon3f526b3f87_20210714.png'
					},
					{
						name:'萌宠类互赞群',
						sign_desc:'垂直互赞获取更优资源',
						icon_url:'https://sph.wenxingshuju.com/wx_sph/upload/group_qrcode/icon775d133f93_20210714.png'
					},
					{
						name:'民生类互赞群',
						sign_desc:'垂直互赞获取更优资源',
						icon_url:'https://sph.wenxingshuju.com/wx_sph/upload/group_qrcode/icon5797d19839_20210714.png'
					}
				]
			}
		},
		onLoad() {
		},
		methods: {
			tagTypeEvent(type){
				this.tag_type = type
			},
			closeMask(){
				this.appletMaskFlag = false
			},
			goQun(){
				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=D9GPIFp2mqp'
					}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>
	page{
	  background: #0674EA;
	}
	.topImgBg{
	  width: 100%;
	  height: 670rpx;
	}
	.listView{
	  position: relative;
	  margin: 0 20rpx 0;
	  padding-top: 60rpx;
	  background: #ffffff;
	  border-radius: 24rpx;
	  margin-top: 100rpx;
	}
	.listView .list_title{
	  width: 570rpx;
	  height: 100rpx;
	  position: absolute;
	  left: 0;
	  right: 0;
	  top: -50rpx;
	  margin: auto;
	}
	.listView .listItem{
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  background: #ffffff;
	  padding: 40rpx;
	  border-bottom: 2rpx solid #F5F6F8;
	}
	.listView .listItem .left{
	  display: flex;
	  align-items: center;
	}
	.listView .listItem .left image{
	  width: 108rpx;
	  height: 108rpx;
	  margin-right: 26rpx;
	}
	.listView .listItem .left .qunInfo .name{
	  color: #282828;
	  font-size: 32rpx;
	  line-height: 44rpx;
	  font-weight: bold;
	}
	.listView .listItem .left .qunInfo .tag{
	  color: #818181;
	  font-size: 24rpx;
	  line-height: 34rpx;
	  margin-top: 20rpx;
	}
	.listView .listItem .button{
	  width: 144rpx;
	  height: 54rpx;
	  line-height: 54rpx;
	  border-radius: 10rpx;
	  border: 2rpx solid #2762FF;
	  color: #2762FF;
	  font-size: 26rpx;
	  padding: 0;
	  margin: 0;
	  background: #ffffff;
	}
	.listView .listItem .button.active{
	  background-color: #DDE7FF;
	  border-color: #DDE7FF;
	}
	.listView .listItem .button.active2{
	  background-color: #2762FF;
	  border-color: #2762FF;
	  color: #ffffff;
	}
	.more {
	  background: #fff;
	  color: #89899C;
	  line-height: 34rpx;
	  font-size: 24rpx;
	  padding: 46rpx 0;
	  text-align: center;
	}
	.backImg{
	  position: fixed;
	  width: 30rpx;
	  height: 30rpx;
	  z-index: 9;
	  padding: 0 20rpx;
	}
	.mask{
	  width: 100%;
	  height: 100%;
	  position: fixed;
	  top: 0;
	  left: 0;
	  background: rgba(0, 0, 0, 0.7);
	}
	.share_content{
	  width: 636rpx;
	  height: 556rpx;
	  background: #FFFFFF;
	  border-radius: 28rpx;
	  position: absolute;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  margin: auto;
	}
	.share_content .share_title{
	  width: 568rpx;
	  height: 106rpx;
	  display: block;
	  margin: auto;
	  margin-top: -52rpx;
	  margin-bottom: 30rpx;
	}
	.share_content .shareHint{
	  color: #090909;
	  font-size: 36rpx;
	  line-height: 70rpx;
	  text-align: center;
	}
	.share_content .shareHint text{
	  color: #CD231D;
	  font-size: 60rpx;
	}
	.share_content .progressBox{
	  width: 460rpx;
	  height: 12rpx;
	  background: #CAEDFF;
	  border-radius: 6rpx;
	  position: relative;
	  margin: 82rpx auto 70rpx;
	}
	.share_content .progressBox .totalNum{
	  color: #989898;
	  font-size: 20rpx;
	  height: 28rpx;
	  line-height: 28rpx;
	  position: absolute;
	  right: -42rpx;
	  top: 0;
	  bottom: 0;
	  margin: auto;
	}
	.share_content .progressBox .progressBar{
	  width: 33.3%;
	  height: 8rpx;
	  position: absolute;
	  left: 4rpx;
	  top: 0;
	  bottom: 0;
	  margin: auto;
	  background: #2762FF;
	  border-radius: 6rpx;
	}
	.share_content .progressBox .progressBar .progressHead{
	  position: absolute;
	  width: 16rpx;
	  height: 16rpx;
	  background: #2762FF;
	  box-shadow: 4px 0px 8px 0px rgba(13, 111, 255, 0.5);
	  border-radius: 50%;
	  top: 0;
	  bottom: 0;
	  right: 0;
	  margin: auto;
	}
	.share_content .progressBox .progressBar .progressHead::after{
	  content: '';
	  display: block;
	  width: 8rpx;
	  height: 8rpx;
	  background: #00EDFF;
	  border-radius: 50%;
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  margin: auto;
	}
	.share_content .progressBox .progressBar .progressHead .oldNum{
	  color: #2762FF;
	  font-size: 20rpx;
	  line-height: 28rpx;
	  position: absolute;
	  width: 40rpx;
	  top:24rpx;
	  left: -10rpx;
	  text-align: center;
	}
	.share_content .inviteButton{
	  width: 486rpx;
	  height: 126rpx;
	  line-height: 95rpx;
	  color: #ffffff;
	  font-size: 28rpx;
	  font-weight: bold;
	}
	.share_content .close{
	  width: 60rpx;
	  height: 60rpx;
	  position: absolute;
	  bottom: -120rpx;
	  right: 0;
	  left: 0;
	  margin: auto;
	}
	.qun_type_view{
	  display: flex;
	  align-items: center;
	  color: #FFFFFF;
	  font-size: 32rpx;
	  line-height: 48rpx;
	  padding: 0 20rpx;
	  padding-top: 40rpx;
	}
	.qun_type_view .type_info{
	  margin: 0 44rpx;
	}
	.qun_type_view .type_info_active{
	  position: relative;
	  font-weight: bold;
	}
	.qun_type_view .type_info_active::after{
	  content: '';
	  display: block;
	  width: 40rpx;
	  height: 20rpx;
	  background: url('https://kx-bigdata.oss-cn-beijing.aliyuncs.com/Applet/wxVideo/extension_type_icon.png') no-repeat;
	  background-size:100% ;
	  position: absolute;
	  left: 0;
	  right: 0;
	  bottom: -14px;
	  margin: auto;
	}
</style>