<template> <div> <div class="floatBox" ref="floatBox"> <div class="head"> <img class="bg" :src="rankBg" alt> <div class="content"> <div class="avatar"> <img class="header-icon" :src="userDetail.avatar"> <span class="name">{{userDetail.nickname}}</span> </div> <div class="text"> <div class="count">{{starNum}}</div> <div>星星总数</div> </div> </div> </div> <div class="secTitle anActivity" v-if="starNum==0"> <span class="line"></span> 还没有星星记录哦~ <span class="line"></span> </div> <div class="secTitle" v-if="starNum!=0&&starInfo.code!=500"> <div :class="{item:true}" @click="tabChange(1)"> <span v-if="tabIndex==1" class="activity"> <img :src="starPage.star_img_title" alt> 星星活动 </span> <span v-if="tabIndex==2">星星活动</span> </div> <div :class="{item:true}" @click="tabChange(2)"> <span v-if="tabIndex==2" class="activity"> <img :src="starPage.star_img_title" alt>星星记录 </span> <span v-if="tabIndex==1">星星记录</span> </div> </div> <div class="secTitle anActivity" v-if="starNum!=0&&starInfo.code==500"> <span class="line"></span> 星星记录 <span class="line"></span> </div> </div> <swiper class="scroll" :options="swiperOption" ref="mySwiper"> <swiperSlide v-if="starNum!=0&&starInfo.code!=500"> <scroll ref="scrollItem" class="scrollItem" :data="starList" :bounce="false" > <div class="container"> <div class="stageBox" v-if="starInfo.code!=2001"> <div class="result" v-if="starInfo.code!=2003&&starInfo.code!=2004&&starInfo.activity_result&&starInfo.activity_result.result!=15&&starInfo.activity_result.result!=16" > <div class="float">结果公示</div> <div v-if="starInfo.activity_result.result==11"> <h2>恭喜两个阶段全勤挑战成功</h2> <p>赠送 猜猜我是谁系列双语洞洞书(4册)</p> <p>培生预备级英语启蒙绘本(35册)</p> <div class="imgbox"> <img :src="starPage.star_prize1" alt> <img :src="starPage.star_prize2" alt> </div> </div> <div v-if="starInfo.activity_result.result==12||starInfo.activity_result.result==13" > <h2>恭喜第一阶段全勤挑战成功</h2> <p>赠送 猜猜我是谁系列双语洞洞书(4册)</p> <div class="imgbox"> <img :src="starPage.star_prize1" alt> </div> </div> <div v-if="starInfo.activity_result.result==14"> <h2>恭喜第二阶段全勤挑战成功</h2> <p>赠送 培生预备级英语启蒙绘本(35册)</p> <div class="imgbox"> <img :src="starPage.star_prize2" alt> </div> </div> <div class="addr" @click="goAddr()" v-if="!addressObj"> 点击这里,快去填写收货地址吧 <i class="iconfont icon-youjiantou"></i> </div> <div class="addr" @click="goAddr" v-if="addressObj"> <span> {{addressObj.receive_name}} {{addressObj.receive_mobile}} {{addressObj.province_name}}{{addressObj.city}}{{addressObj.area}}{{addressObj.address}} </span> <i class="iconfont icon-youjiantou"></i> </div> <div class="tip" >注意:请于{{starInfo.start_twenty_five}}之前填写完您的收货地址,否则无法寄送礼品,过期不填视为放弃领取机会</div> </div> <div v-if="starInfo.code!=2003&&starInfo.activity_result&&(starInfo.activity_result.result==15||starInfo.activity_result.result==16)" class="result fal" > <div class="float">结果公示</div> <div v-if="starInfo.activity_result.result==15"> <div class="fal_title">很抱歉第一阶段全勤挑战失败</div> <div class="fal_tip">还有机会,第二阶段加油哦!</div> </div> <div v-if="starInfo.activity_result.result==16"> <div class="fal_title">很抱歉两个阶段全勤挑战失败</div> <div class="fal_tip">学习没有终点,任何时候都是一个起点</div> </div> </div> <div class="stageitem"> <img class="left" :src="starPage.star_img_xingxing" alt> <div class="right"> <div class="title">第一阶段全勤星星</div> <div class="date">{{starInfo.start_at}}~{{starInfo.first_over_at}}</div> <div class="count"> <span class="add">{{starInfo.user_category_integral_last_ten}}/20</span> <img :src="starPage.star_inner" alt> </div> <div class="tip" v-on:click="goDetail(1,$event)"> 查看明细 <i class="iconfont icon-youjiantou"></i> </div> </div> </div> <div class="stageitem"> <img class="left" :src="starPage.star_img_xingxing" alt> <div class="right"> <div class="title">第二阶段全勤星星</div> <div class="date">{{starInfo.start_at}}~{{starInfo.second_over_at}}</div> <div class="count"> <span class="add">{{starInfo.user_category_integral_last_twenty}}/40</span> <img :src="starPage.star_inner" alt> </div> <div class="tip" @click="goDetail(2,$event)"> 查看明细 <i class="iconfont icon-youjiantou"></i> </div> </div> </div> <div class="rule"> <p>活动说明:</p> <p>1.活动期限为您开课的第1天至第20天;</p> <p>2.阶段全勤星星达到目标即可活动小礼品一份;</p> <p>3.活动仅统计“学习奖励”星星,由分享学习成绩获得“分享奖励”星星不记做统计;</p> <p>4.开课日起第11天至25天为奖励公示期,此页面将开放阶段任务是否达成,已达成任务的可填写奖品邮寄地址,逾期未填写地址视为自愿放弃活动奖励;</p> <p>5.开课日起第26天至第30天开始奖励邮寄,已经寄出的奖励可在收货地址页面找到快递单号信息。</p> </div> <div class="showRs" v-if="starInfo.code==2003" @click="goResult"> 查看活动结果 <i class="iconfont icon-youjiantou"></i> </div> </div> <div class="unStart" ref="unStart" v-if="starInfo.code==2001"> <img :src="starPage.star_img_0" alt> <p>活动时间{{starInfo.start_at}}~{{starInfo.over_at}}</p> </div> </div> </scroll> </swiperSlide> <swiperSlide> <scroll v-if="starNum!=0" ref="scrollItem" class="scrollItem" :data="starList" :pullup="pullup" :bounce="false" @pullup="onReachBottom" > <div class="itemBox"> <div class="item" v-for="(item,index) in starList" :key="index"> <div class="left"> <p>{{item.desc}}</p> <p class="date">{{item.created_at}}</p> </div> <div class="right"> <span v-if="item.is_add==1" class="add">+{{item.value}}</span> <span v-if="item.is_add==0" class="reduce">-{{item.value}}</span> <img :src="starPage.star_inner" alt> </div> </div> <div v-if="finished" class="none">没有更多了~</div> </div> </scroll> </swiperSlide> </swiper> </div> </template> <script> import "swiper/dist/css/swiper.css"; import { swiper, swiperSlide } from "vue-awesome-swiper"; import rankBg from "../../assets/rankBg.png"; import { starPage } from "../../util/imgUrl"; import { getUserIntegralApi, getUserIntegralListApi, getStarInfoApi, getActivityAddressApi } from "../../service/api"; import { Toast } from "vant"; export default { name: "starRank", data() { let that = this; return { height: 0, pullup: true, rankBg: rankBg, starNum: "", userDetail: {}, loading: true, finished: false, starPage: starPage, starList: [], page: 1, offset: 30, tabIndex: 2, addressObj: false, starInfo: { code: "" }, swiperOption: { on: { slideChangeTransitionEnd: function() { console.log(this.activeIndex); that.tabIndex = this.activeIndex + 1; } } } }; }, components: { swiper, swiperSlide }, computed: { swiper() { return this.$refs.mySwiper.swiper; } }, methods: { goResult() { this.starInfo.addressObj = this.addressObj this.$router.push({ name: "starResult", query: { starInfo: encodeURIComponent(JSON.stringify(this.starInfo)) } }); }, goAddr(e) { if (this.addressObj) { this.$router.push({ name: "activityAddr" }); } else { this.$router.push({ name: "addressEdit" }); } }, goDetail(index) { let obj = {}; obj.index = index; if (index == 1) { obj.periods_id = this.starInfo.periods_id; obj.start_at = this.starInfo.start_at; obj.first_over_at = this.starInfo.first_over_at; obj.user_category_integral_last_ten = this.starInfo.user_category_integral_last_ten; } else { obj.periods_id = this.starInfo.periods_id; obj.start_at = this.starInfo.start_at; obj.second_over_at = this.starInfo.second_over_at; obj.user_category_integral_last_twenty = this.starInfo.user_category_integral_last_twenty; } this.$router.push({ name: "starDetail", query: { starInfo: encodeURIComponent(JSON.stringify(obj)) } }); }, onReachBottom() { if (!this.finished && this.loading) { this.loading = false; Toast.loading({ mask: true, message: "" }); this.page++; let json = { page: this.page, limit: "20" }; getUserIntegralListApi(json).then(res => { this.loading = true; if (res.list.length > 0) { res.list.forEach(element => { this.starList.push(element); }); if (res.total == this.starList.length) { this.finished = true; } // this.loading = false; } Toast.clear(); }); } }, initPage() { Toast.loading({ mask: true, message: "" }); this.userDetail = JSON.parse(localStorage.getItem("userDesc")); getUserIntegralApi().then(res => { this.starNum = res.last_value; }); let json = { page: this.page, limit: "20" }; getUserIntegralListApi(json).then(res => { this.starList = res.list; this.finished = res.total > 20 ? false : true; }); getStarInfoApi().then(res => { this.starInfo = res; if (this.starInfo.code !== 500) { this.tabIndex = 1; } Toast.clear(); setTimeout(() => { console.log( Number( getComputedStyle(this.$refs.floatBox).height.replace("px", "") ) ); let top = (document.documentElement.clientHeight - Number( getComputedStyle(this.$refs.floatBox).height.replace("px", ""))) / 2; if (this.$refs.unStar) { this.$refs.unStart.style.top = Number( getComputedStyle(this.$refs.floatBox).height.replace("px", "") ) + top + "px"; } }, 200); // if(this.$refs.unStart){ // floatBox // console.log(getComputedStyle('.floatBox').height) // } }); getActivityAddressApi().then(res => { if (res.receive_name) { this.addressObj = res; } }); }, tabChange(index) { this.tabIndex = index; if (index == 1) { this.swiper.slidePrev(); } else if (index == 2) { this.swiper.slideNext(); } console.log(document.querySelector(".scrollItem")); // if(index==1){ // console.log(11) // setTimeout(() => { // this.$refs.scrollItem._initScroll() // }, 100); // }else{ // this.$refs.scrollItem.scrollTo(0,0,200) // } // this.$refs.scroll.refresh() } }, mounted() { this.height = screen.height - Number(getComputedStyle(this.$refs.floatBox).height.replace("px", "")); this.initPage(); } }; </script> <style scoped lang="less"> @import "../../util/public"; .star-activity-page { border-top: 1px solid transparent; } .floatBox { position: fixed; top: 0; left: 0; width: 100%; background: white; z-index: 100; // padding-bottom: 10 * @toVw; } .scrollItem { height: 100vh; } .head { height: 147 * @toVw; .bg { width: 100%; position: absolute; } .content { position: relative; z-index: 1; .text { text-align: center; color: #f27321; padding-top: 52 * @toVw; .count { font-size: 41 * @toVw; line-height: 42 * @toVw; margin-bottom: 10 * @toVw; } } .avatar { position: absolute; top: 20 * @toVw; left: 22 * @toVw; display: flex; height: 42 * @toVw; // vertical-align: top; img { width: 40 * @toVw; border-radius: 40 * @toVw; border: 2px solid white; } span { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 98 * @toVw; display: inline-block; margin-left: 8 * @toVw; font-size: 14 * @toVw; color: #999999; } } } } .secTitle { text-align: center; color: #999999; font-size: 13 * @toVw; display: flex; .line { display: inline-block; width: 120 * @toVw; border-bottom: 1px solid #e2e2e2; position: relative; top: -3 * @toVw; } .item { flex: 1; height: 64 * @toVw; line-height: 74 * @toVw; .activity { display: inline-block; width: 86 * @toVw; height: 35 * @toVw; line-height: 35 * @toVw; position: relative; text-shadow: 0px 1px 1px rgba(187, 82, 0, 1); color: white; font-size: 15 * @toVw; animation: slideOut 1s linear; img { width: 86 * @toVw; position: absolute; top: 0; left: 0; z-index: -1; } } } } @keyframes slideOut { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes slideIn { 0% { opacity: 1; } 100% { opacity: 0; } } .anActivity { margin-top: 24 * @toVw; } // .scrollP{position: relative;height: 100vh;width: 100%;transform:none;} .scroll { padding: 0; // margin-top: 180* @toVw; height: 100%; overflow: hidden; position: fixed; width: 100%; box-sizing: border-box; background: white; .itemBox { padding-top: 210 * @toVw; width: 86%; margin: 0 auto; .none { height: 53 * @toVw; line-height: 40 * @toVw; text-align: center; color: #999999; font-size: 12px; } } .container { padding-top: 210 * @toVw; .unStart { text-align: center; color: #f27321; font-size: 13 * @toVw; top: 50%; transform: translateY(-10%); position: absolute; width: 96%; text-align: center; p { margin-top: 10 * @toVw; } img { width: 110 * @toVw; } } .stageBox { width: 92%; margin: 0 auto; margin-top: 6 * @toVw; padding-bottom: 20 * @toVw; .stageitem { display: flex; box-shadow: 0px 1px 8px 0px rgba(175, 175, 175, 0.53); height: 114 * @toVw; margin-bottom: 10 * @toVw; border-radius: 8 * @toVw; .left { width: 103 * @toVw; margin-bottom: 0; margin-right: 20 * @toVw; } .right { flex: 1; position: relative; margin-top: 0; .title { font-size: 15 * @toVw; font-weight: bold; margin: 15 * @toVw 0 10 * @toVw; } .date { color: #999999; font-size: 13 * @toVw; } .count { color: #f27321; font-size: 18 * @toVw; font-weight: 800; margin-top: 20 * @toVw; img { width: 20 * @toVw; position: relative; top: 2 * @toVw; } } .tip { position: absolute; top: 0; right: 0; width: 80 * @toVw; height: 27 * @toVw; line-height: 27 * @toVw; text-align: center; background: linear-gradient( 270deg, rgba(255, 227, 126, 1) 0%, rgba(255, 165, 114, 1) 100% ); border-radius: 0px 8 * @toVw 0px 8 * @toVw; color: white; font-size: 13 * @toVw; } } } .rule { color: #999999; font-size: 13 * @toVw; line-height: 20 * @toVw; } .result { position: relative; text-align: center; background: url("https://cdn.singsingenglish.com/new-sing/number_img_bg_win@2x.png"); background-size: 100% 100%; padding: 39 * @toVw 13 * @toVw 12 * @toVw; box-shadow: 0px 1 * @toVw 8 * @toVw 0 * @toVw rgba(175, 175, 175, 0.53); border-radius: 8 * @toVw; margin-bottom: 10 * @toVw; background-color: #fff9f2; .float { width: 74 * @toVw; height: 27 * @toVw; background: linear-gradient( 270deg, rgba(255, 227, 126, 1) 0%, rgba(255, 167, 114, 1) 100% ); border-radius: 0 8 * @toVw 0 8 * @toVw; color: white; line-height: 27 * @toVw; position: absolute; top: 0; right: 0; font-size: 13 * @toVw; } .imgbox { margin-top: 8 * @toVw; img { width: 111 * @toVw; margin: 0 12 * @toVw; } } .addr { background: linear-gradient( 270deg, rgba(252, 171, 69, 1) 0%, rgba(247, 115, 33, 1) 100% ); border-radius: 12 * @toVw; height: 24 * @toVw; line-height: 24 * @toVw; text-indent: 10 * @toVw; color: white; font-size: 13 * @toVw; margin: 15 * @toVw 0; text-align: left; display: flex; span { max-width: 296 * @toVw; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } i { margin-left: -6 * @toVw; width: 20 * @toVw; font-size: 12 * @toVw; } } .tip { color: #937148; font-size: 12 * @toVw; text-align: left; } h2 { color: #d33500; margin: 0 0 8 * @toVw; } p { color: #f65c28; font-size: 13 * @toVw; } } .fal { padding: 39 * @toVw 0 12 * @toVw; height: 189 * @toVw; background: url("https://cdn.singsingenglish.com/new-sing/number_img_bg_lose@2x.png"); background-size: 100% 100%; box-sizing: border-box; .fal_title { color: #2a455a; font-size: 24 * @toVw; font-weight: bold; } .fal_tip { color: #f65c28; font-size: 13 * @toVw; margin-top: 10 * @toVw; } } .showRs { width: 134 * @toVw; height: 36 * @toVw; background: linear-gradient( 270deg, rgba(255, 228, 127, 1) 0%, rgba(255, 166, 115, 1) 100% ); box-shadow: 0px 1px 8px 0px rgba(255, 203, 157, 0.58); border-radius: 18 * @toVw; color: white; text-align: center; line-height: 36 * @toVw; margin-top: 20 * @toVw; } } } .item { display: -webkit-flex; justify-content: space-between; border-bottom: 1px solid #e2e2e2; padding: 9 * @toVw 2 * @toVw; div { flex: 1; } .left { font-size: 15 * @toVw; // font-family: Regular; .date { color: #999999; font-size: 13 * @toVw; margin-top: 4 * @toVw; } } .right { text-align: right; font-size: 18 * @toVw; color: #f27321; font-weight: 800; // font-family: Arial-Black; img { width: 20 * @toVw; position: relative; top: 3 * @toVw; margin-left: 3 * @toVw; } span { } .add { } .reduce { color: #9bc912; } } } } @media screen and (orientation: landscape) { // .child-view{height: 300vh;} .floatBox { // height: 300vh; position: relative; top: 0; left: 0; width: 100%; background: white; z-index: 100; padding-bottom: 10 * @toVw; } // .child-view{height: 200vh;} .scroll { position: relative; height: 50vh; .itemBox { padding-top: 0 * @toVw; padding-bottom: 10vh; } } } </style> <style> </style>