|
|
@@ -0,0 +1,462 @@
|
|
|
+<!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">
|
|
|
+ <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: #0671F1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-banner {
|
|
|
+ background: url("../static/offImg/bg.png") no-repeat;
|
|
|
+ width: 100%;
|
|
|
+ height: 11.6rem;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-banner .hongbao {
|
|
|
+ width: 1.46rem;
|
|
|
+ height: 1.42rem;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 1.4rem;
|
|
|
+ left: 0.7rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-btn {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ bottom: -0.12rem;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-btn .time-box {
|
|
|
+ width: 6.26rem;
|
|
|
+ height: 1.88rem;
|
|
|
+ background: url("../static/offImg/time.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .no-start {
|
|
|
+ width: 6.26rem !important;
|
|
|
+ height: 1.88rem !important;
|
|
|
+ background: url("../static/offImg/time-end.png") no-repeat !important;
|
|
|
+ background-size: 100% 100% !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list {
|
|
|
+ width: 100%;
|
|
|
+ height: 14.42rem;
|
|
|
+ background: #0671F1;
|
|
|
+ padding: 0 0.3rem;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-box,
|
|
|
+ .rule-box {
|
|
|
+ margin-top: 0.44rem;
|
|
|
+ width: 100%;
|
|
|
+ height: 5.7rem;
|
|
|
+ background: #C3E5FF;
|
|
|
+ border-radius: 0.2rem;
|
|
|
+ border: 0.02rem solid #F5FAFF;
|
|
|
+ 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: 0.48rem;
|
|
|
+ padding: 0.3rem 0.4rem;
|
|
|
+ overflow-y: scroll;
|
|
|
+ height: 5.1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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: #272624;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-nav .user .text p+p {
|
|
|
+ font-size: 0.24rem;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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: #FF8E00;
|
|
|
+ margin-right: 0.3rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-nav .btn {
|
|
|
+ width: 1.14rem;
|
|
|
+ height: 0.52rem;
|
|
|
+ line-height: 0.52rem;
|
|
|
+ background: #3B7FFF;
|
|
|
+ border-radius: 0.08rem;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 0.24rem;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rule-box {
|
|
|
+ margin-top: 0.62rem;
|
|
|
+ width: 100%;
|
|
|
+ height: 6.92rem;
|
|
|
+ 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: #E3E7EE !important;
|
|
|
+ color: #AAADB3 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .notice-swipe {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-notice {
|
|
|
+ width: 100%;
|
|
|
+ padding: 2rem 0.3rem 0 0.3rem;
|
|
|
+ height: 0.82rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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: 2.4rem;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div id="app" v-cloak class="app container">
|
|
|
+ <div class="top-banner">
|
|
|
+ <img src="../static//offImg/hongbao.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="">
|
|
|
+ <p>{{item.surfaceName}}</p>
|
|
|
+ <p>已领取分享奖励</p>
|
|
|
+ </van-swipe-item>
|
|
|
+
|
|
|
+ </van-swipe>
|
|
|
+ </van-notice-bar>
|
|
|
+ </div>
|
|
|
+ <div class="bottom-btn">
|
|
|
+ <div class="time-box" @click='goReward()' :class="{'no-start':actStatus==0}"></div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </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.createTime}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-nav">
|
|
|
+ <p>星动天卡</p>
|
|
|
+ <p class="btn" @click='goGetReward' 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，好友注册成功后，分享者即可获得1小时星动套餐时长。</p>
|
|
|
+ <p>2.用户通过该分享链接获取的激活码，只针对新注册用户有效领取并兑换一次。</p>
|
|
|
+ <p>3.分享者每日最多获得10位好友的注册奖励，且奖励为当日有效，奖励过期不补发。</p>
|
|
|
+ <p>4.分享者若没有云机，需要先创建星动云机才可继续领取奖励。</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,
|
|
|
+ id: GetRequest().id ? GetRequest().id : 404,
|
|
|
+ topic: {},
|
|
|
+ rewardList: [],
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 5
|
|
|
+ },
|
|
|
+ isDisable: false,
|
|
|
+ finished: false,
|
|
|
+ loading: false,
|
|
|
+ finishedText: '没有更多了',
|
|
|
+ offset: 100,
|
|
|
+ total: 0,
|
|
|
+ shareInfo: {},
|
|
|
+ defaultImg: 'this.src="' + "../static/offImg/tou.png" + '"',
|
|
|
+ actStatus: 0, //0活动状态 1开始
|
|
|
+ marqueeList: [],
|
|
|
+ token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyYW5kb20iOiIxNjc1OCIsImNsaWVudCI6IjAiLCJleHAiOjE2NDAyMTM3MDIsInVzZXJuYW1lIjoiYWRtaW4ifQ.3iGCT3FN0WByQHYebuiB4vSAnuuuU16znr8h0H-6jZE',
|
|
|
+
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getAwardPage(); //获取奖励列表
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getActDetail();
|
|
|
+ this.getMarquee(); //跑马灯
|
|
|
+
|
|
|
+ //this.getList();
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ goReward() {
|
|
|
+ if (this.actStatus != 1) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const {
|
|
|
+ title,
|
|
|
+ content,
|
|
|
+ gotoUrl,
|
|
|
+ shareImg
|
|
|
+ } = this.shareInfo;
|
|
|
+ if (isAndroid) {
|
|
|
+ window.native.share(title, content, gotoUrl, shareImg)
|
|
|
+ } else if (isIOS) {
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ standarImg(id) {
|
|
|
+ return `${fileCenterApi}/file-center/fileOperate/getImage?id=${id}`;
|
|
|
+ },
|
|
|
+ getActDetail() { //获取活动状态
|
|
|
+ this.$toast.loading({
|
|
|
+ duration: 0,
|
|
|
+ message: '加载中...',
|
|
|
+ forbidClick: true,
|
|
|
+ loadingType: 'spinner',
|
|
|
+ });
|
|
|
+ getActDetail(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;
|
|
|
+ if (infolist) {
|
|
|
+ this.rewardList = this.rewardList.concat(infolist);
|
|
|
+ if (infolist.length < this.queryParams.pageSize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
|
|
|
+ this.finished = true;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.finished = true;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$toast(res.msg);
|
|
|
+ this.loading = false
|
|
|
+ if (this.queryParams.pageNum > 1) {
|
|
|
+ this.queryParams.pageNum -= 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ //滚动加载时触发，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() {
|
|
|
+ if (isAndroid) {
|
|
|
+ window.native.activatePhone(1, 0)
|
|
|
+ } else if (isIOS) {
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ download() {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
ymm
