noseCloud
/
Starboth-Cloud-H5


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633
							<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<meta name="description" content="活动">
	<title>免费领机</title>
	<link rel="icon" href="../static/img/favicon2.ico" type="img/x-ico">
	<link rel="stylesheet" href="../static/css/index.css?v=1.0.0.6">
	<link rel="stylesheet" href="../static/css/vant.css" />
	<script src="../static/js/vender/vue/vue.min.js"></script>
	<script src="../static/js/vender/vue/vant.min.js"></script>
	<script src="../static/js/vender/config.js"></script>

	<style>
		.container {
			background-color: #1F1A3A;
		}

		.top-banner {
			background: url("../static/offImg/bg.png") no-repeat;
			width: 100%;
			height: 13.1rem;
			background-size: 100% 100%;
			position: relative;

		}

		.top-banner .hongbao {
			width: 5.24rem;
			height: 1.55rem;
			position: absolute;
			top: 1rem;
			left: 50%;
			transform: translateX(-50%);
		}

		.bottom-btn {
			position: absolute;
			width: 100%;
			bottom: 0.32rem;
			display: flex;
			justify-content: center;
			left: 0;
		}

		.bottom-btn .time-box {
			width: 5.34rem;
			height: 1.44rem;
			background: url("../static/offImg/time.png") no-repeat;
			background-size: 100% 100%;
		}

		.no-start {
			width: 5.34rem !important;
			height: 1.44rem !important;
			background: url("../static/offImg/time-end.png") no-repeat !important;
			background-size: 100% 100% !important;
		}

		.list {
			width: 100%;
			height: 14.42rem;
			background-color: #1F1A3A;
			padding: 0 0.3rem;

		}

		.nav-box {
			margin-top: 0.44rem;
			width: 100%;
			height: 5.7rem;
			background: url("../static/offImg/share.png") no-repeat;
			background-size: 100% 100%;
			border-radius: 0.2rem;
			position: relative;
			padding-top: 0.01rem;

		}

		.rule-box {
			margin-top: 0.44rem;
			width: 100%;
			height: 5.7rem;
			background: url("../static/offImg/rule.png") no-repeat;
			background-size: 100% 100%;
			border-radius: 0.2rem;
			position: relative;

		}

		.rule-box .title-box,
		.nav-box .title-box {
			width: 100%;
			position: absolute;
			left: 0;
			top: -0.17rem;
			display: flex;
			justify-content: center;
			
		}

		/* .rule-box .title-box .img-box,
		.nav-box .title-box .img-box {
			background: url("../static/offImg/title-bg.png") no-repeat;
			background-size: 100% 100%;
			width: 3.96rem;
			height: 0.64rem;
			text-align: center;
			line-height: 0.64rem;
			font-size: 0.32rem;
			font-family: PingFangSC-Medium, PingFang SC;
			color: #FFFFFF;
		} */

		.outer-box {
			margin-top: 1rem;
			padding: 0.1rem 0.4rem;
			overflow-y: scroll;
			height: 4.4rem;
		}

		.list-nav {
			display: flex;
			margin-bottom: 0.2rem;
			justify-content: space-between;
		}

		.list-nav .user {
			display: flex;
		}

		.list-nav .user .tou {
			width: 0.6rem;
			height: 0.6rem;
			border-radius: 50%;
			margin-right: 0.12rem;
		}

		.list-nav .user .text p:first-of-type {
			font-size: 0.24rem;
			margin-bottom: 0.08rem;
			font-family: PingFangSC-Regular, PingFang SC;
			color: #ffffff;
			width: 2.6rem;
			display: block;
			overflow: hidden;
			word-break: keep-all;
			white-space: nowrap;
			text-overflow: ellipsis;

		}

		.list-nav .user .text p+p {
			font-size: 0.24rem;
			font-family: PingFangSC-Regular, PingFang SC;
			color: #CCCCCC;
		}

		.right-nav {
			display: flex;
			align-items: center;
		}

		.right-nav P:first-of-type {
			font-size: 0.24rem;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #F2AE45;
			margin-right: 0.3rem;
		}

		.right-nav .btn {
			width: 1.14rem;
			height: 0.44rem;
			line-height: 0.44rem;
			background: #F2AE45;
			border-radius: 0.22rem;
			text-align: center;
			font-size: 0.24rem;
			font-family: PingFangSC-Regular, PingFang SC;
			color: #FFFFFF;
		}

		.rule-box {
			margin-top: 0.62rem;
			width: 100%;
			height: 7.6rem;
			padding: 0.3rem 0.4rem;
		}

		.rule-box .rule {
			margin-top: 0.48rem;
			font-size: 0.28rem;
			font-family: PingFangSC-Regular, PingFang SC;
			color: #333333;
			line-height: 0.46rem;
			letter-spacing: 0.013rem;
		}

		.rule-box .rule p {
			margin-bottom: 0.12rem;
		}

		.isdisabled {
			background: #F2AE45 !important;
			color: #ffffff !important;
			opacity: 0.3;
		}

		.notice-swipe {
			height: 40px;
			line-height: 40px;
		}

		.top-notice {
			width: 100%;
			padding: 3rem 0.3rem 0 0.3rem;
			height: 0.82rem;
		}

		.select-content{
			position: absolute;
			bottom: 0.2rem;
			color: #FFFFFF;
			left: 50%;
			transform: translateX(-50%);
		}

		.van-notice-bar {
			width: 100%;
			height: 0.82rem;
			background: url("../static/offImg/lunbo.png") no-repeat;
			background-size: 100% 100%;
		}

		.van-swipe-item {
			display: flex;
			align-items: center;
		}

		.van-swipe-item p:first-of-type {
			font-size: 0.28rem;
			width: 1.8rem;
			color: #00FFFF;
			display: block;
			overflow: hidden;
			word-break: keep-all;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.van-swipe-item p+p {
			font-size: 0.28rem;
			color: #FFFFFF;
		}

		.van-swipe-item img {
			width: 0.6rem;
			margin-left: 0.4rem;
			margin-right: 0.1rem;
			border-radius: 50%;
			height: 0.6rem;
		}

		.no-user {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 0.3rem;
			font-family: PingFangSC-Regular, PingFang SC;
			color: #666666;
		}
		.select-list{
			display: flex;
			justify-content: center;
		}
		.select-title{
			margin-bottom: 0.2rem;
			text-align: center;
		}
		.icon{
			width: 1.66rem;
			height: 1.66rem;
			margin: 0 0.1rem;
		}
		.join-wrap{
			background-color: #1F1A3A;
			display: flex;
			justify-content: center;
		}
		.join{
			width: 6.8rem;
			height: 4.1rem;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak class="app container">
		<div class="top-banner">
			<!-- <img src="../static/offImg/hongbao.png" class="hongbao" alt=""> -->
			<img src="../static/offImg/title.png" class="hongbao" alt="">
			<div class="top-notice">
				<van-notice-bar :scrollable="false">
					<van-swipe vertical class="notice-swipe" :autoplay="2000" :show-indicators="false">
						<van-swipe-item v-for="(item,index) in marqueeList">
							<!-- <img :src="standarImg(item.headImgUrl)" :onerror="defaultImg" alt=""> -->
							<img src="" :onerror="defaultImg" alt="">
							<p>{{item.sharerSurfaceName}}</p>
							<p>已领取分享奖励</p>
						</van-swipe-item>
					</van-swipe>
				</van-notice-bar>
			</div>
			<div class="select-content">
				<div class="select-title">选择你要分享的内容</div>
				<div class="select-list">
					<div v-for="(item,index) in tagList" :key="index" @click="toDetail(item)">
						<img :src="fileCenterApi + `/file-center/fileOperate/getImage?id=${item.cover}`" class="icon" alt="">
					</div>
				</div>
			</div>
			<!-- <div class="bottom-btn">
				<div class="time-box" @click='goReward()' :class="{'no-start':actStatus==0}"></div>
			</div> -->
		</div>
		<div class="join-wrap">
			<img src="../static/offImg/join.png" class="join" alt="">
		</div>
		<div class="list">
			<div class="nav-box">
				<!-- <img src="../static/offImg/title-bg.png" alt=""></img> -->
				<!-- <div class="title-box">
					<div class="img-box">活动奖励</div>
				</div> -->
				<div class="outer-box" v-if='rewardList&&rewardList.length>0'>
					<van-list v-model="loading" :finished-text="finishedText" :finished="finished"
						:immediate-check=false @load="onLoad">
						<div class="list-nav" v-for="(item,index) in rewardList" :key="index">
							<div class="user">
								<img :src="standarImg(item.headImgUrl)" class="tou" :onerror="defaultImg" alt="">
								<div class="text">
									<p>{{item.surfaceName}}</p>
									<p>{{item.registerTime}}</p>
								</div>
							</div>
							<div class="right-nav">
								<p>{{item.phoneType === 'VIP'?'星动':item.phoneType === 'SVIP'?'星曜':'唔即'}}天卡</p>
								<p class="btn" @click='goGetReward(item.id, item.phoneType)' v-if='item.receiveStatus==0'>领取</p>
								<p class="btn isdisabled" v-if='item.receiveStatus==1'>已领取</p>

							</div>
						</div>
					</van-list>

				</div>
				<div class="no-user" v-if='rewardList.length==0'>
					<p>
						暂无用户注册
					</p>
				</div>
			</div>

			<div class="rule-box">
				<!-- <img src="../static/offImg/title-bg.png" alt=""></img> -->
				<!-- <div class="title-box">
					<div class="img-box">活动规则</div>
				</div> -->
				<!-- <div class="rule">
					<p>1.分享双子星攻略文章至微信好友/微信朋友圈/QQ，好友注册成功后，分享者即可获得3天{{phoneType === 'VIP'?'星动':phoneType === 'SVIP'?'星曜':'唔即'}}套餐时长，被分享者可获得{{phoneType === 'VIP'?'星动':phoneType === 'SVIP'?'星曜':'唔即'}}7天卡激活码。</p>
					<p>2.用户通过该分享链接获取的激活码，只针对新注册用户有效领取并兑换一次。</p>
					<p>3.分享者每日最多分享给10位好友领取激活码并获得注册奖励，且奖励为当日有效，奖励过期不补发。</p>
					<p>4.分享者若没有云机，需要先创建{{phoneType === 'VIP'?'星动':phoneType === 'SVIP'?'星曜':'唔即'}}云机才可继续领取奖励。</p>
					<p>5.新用户领取的激活码需在有效期内使用，若超过有效期则激活码失效。</p>
				</div> -->
			</div>

		</div>
	</div>
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
	<script src="../static/js/vender/vue/axios.min.js"></script>
	<script src="../static/js/vender/vue/config.js"></script>
	<script src="../static/js/vender/vue/api.js"></script>

	<script type="text/javascript">
		var u = navigator.userAgent,
			app = navigator.appVersion;
		var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
		var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
		new Vue({
			el: '#app',
			data: {
				isshow: false,
				rewardList: [],
				queryParams: {
					pageNum: 1,
					pageSize: 10
				},
				isDisable: false,
				finished: false,
				flag: true,
				loading: false,
				finishedText: '',
				offset: 100,
				total: 0,
				shareInfo: {},
				defaultImg: 'this.src="' + "../static/offImg/tou.png" + '"',
				actStatus: 0, //0活动状态 1开始
				phoneType: '',
				marqueeList: [],
				timer: null,
				tagList: []
			},
			created() {
				this.getAwardPage(); //获取奖励列表
				
			},
			mounted() {
				this.getActDetailList(); //获取活动上下架
				this.getMarquee(); //跑马灯
				this.goReward('look');
				this.getTagList();//获取标签列表
			},
			methods: {
				toDetail(item){
					location.href = `./actFissionList.html?id=${item.id}&title=${encodeURI(item.tagName)}&token=${GetRequest().token}`;
				},
				getTagList(){
					this.$toast.loading({
						duration: 0,
						message: '加载中...',
						forbidClick: true,
						loadingType: 'spinner',
					});
					// 获取标签列表
					getTagList(GetRequest().token).then(res => {
						this.$toast.clear();
						if (res.status === 0) {
							this.tagList = res.data;
						} else {
							this.$toast(res.msg);
						}
					})
				},
				goReward(type) {

					this.$toast.loading({
						duration: 0,
						message: '加载中...',
						forbidClick: true,
						loadingType: 'spinner',
					});
					getActDetailList(this.token).then(res => {
						this.$toast.clear();
						if (res.status === 0) {
							if(type === 'look'){
							    this.phoneType = res.data.phoneType;
								return
							}
							this.actStatus = res.data.actStatus;
							this.shareInfo = res.data;
							if (this.actStatus != 1) {
								this.$toast('活动已下架');
								return
							}
							// this.stopManyClick(() => {
							this.getShare();
							// })

						} else {
							this.$toast(res.msg);
						}
					})


				},
				standarImg(id) {
					return `${fileCenterApi}/file-center/fileOperate/getImage?id=${id}`;
				},
				getShare() {

					systemBuriedPoint({
						pointName: 'dt_裂变_h5_分享攻略'
					}).then(res => {

					})
					const {
						title,
						content,
						gotoUrl,
						shareImg
					} = this.shareInfo;
					console.log({
						title: title,
						content: content,
						gotoUrl: gotoUrl,
						shareImg: shareImg
					});
					if (isAndroid) {
						window.native.share(title, content, gotoUrl, shareImg)
					} else if (isIOS) {
						window.webkit.messageHandlers.share.postMessage({
							title: title,
							content: content,
							gotoUrl: gotoUrl,
							shareImg: shareImg
						});
					}
				},
				getActDetailList() { //获取活动状态
					this.$toast.loading({
						duration: 0,
						message: '加载中...',
						forbidClick: true,
						loadingType: 'spinner',
					});
					getActDetailList(this.token).then(res => {
						this.$toast.clear();
						if (res.status === 0) {
							this.actStatus = res.data.actStatus;
							this.shareInfo = res.data;
						} else {
							this.$toast(res.msg);
						}
					})
				},
				getAwardPage() { //获取活动列表
					getAwardPage(this.token, this.queryParams).then(res => {
						if (res.status == 0) {
							this.loading = false //取消正在加载状态
							let infolist = res.data.list;
							this.total = res.data.total;
							if (infolist) {
								this.rewardList = this.rewardList.concat(infolist);
								console.log(this.rewardList)
								if (this.rewardList.length >= this.queryParams.pageSize) {
									this.finishedText = '没有更多了'
								}
								if (this.rewardList.length >= this.total) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
									this.finished = true;
								}
							} else {
								this.finished = true;
							}
						} else {
							this.$toast(res.msg);
							this.loading = false
							if (this.queryParams.pageNum > 1) {
								this.queryParams.pageNum -= 1
							}
						}
					}).catch((error) => {
						console.log(error)
						this.$toast('网络异常');
					});

				},
				//滚动加载时触发，list组件定义的方法
				onLoad() {
					let times = setTimeout(() => {
						this.queryParams.pageNum += 1 //每请求一次，页面数+1
						this.getAwardPage();
						clearTimeout(times)
					}, 500)
				},
				getMarquee() {
					getMarquee().then(res => {
						if (res.status === 0) {
							this.marqueeList = res.data;
							
						} else {
							this.$toast(res.msg);
						}
					})
				},
				goGetReward(id, phoneType) {
					this.stopManyClick(() => {
						getCheck(this.token).then(res => {
							if (res.status === 0) {
								if (isAndroid) {
									window.native.activatePhones(1, id, phoneType)
								} else if (isIOS) {
									window.webkit.messageHandlers.receive.postMessage({
										"awardId": id,
										"phoneType": phoneType
									});
								}
							} else if (res.status == 1) {
								this.$toast(res.msg);
								return;

							} else {
								this.$toast(res.msg);
								return

							}
						}).catch((error) => {
							console.log(error)
							this.$toast('网络异常');
						});
					})

				},
				stopManyClick(fn) { //防抖
					if (this.flag) {
						fn();
					}
					this.flag = false;
					if (this.timer) {
						clearTimeout(this.timer);
					}
					this.timer = setTimeout(() => {
						this.flag = true
					}, 1500);
				},
				download() {

				},


			}
		})
	</script>
</body>

</html>