<template> <div> <div class="floatBox"> <div class="top"><span>第{{stage}}阶段全勤星星打卡学习记录:</span><span class="count">{{starCount}}/{{starCountP}}</span></div> <div class="date">时间:{{stageTime.start_at}}-{{stageTime.over_at}}</div> </div> <scroll class="scroll" v-if="starNum!=0" :data="starList" :pullup="pullup" :bounce="false" @pullup="onReachBottom"> <div class="itemBox"> <div class="item" v-for="item in starList"> <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="star_inner" alt> </div> </div> <div v-if="finished" class="none">没有更多了~</div> </div> </scroll> </div> </template> <script> import rankBg from "../../assets/rankBg.png"; import star_inner from "../../assets/star_inner.png"; import { getUserIntegralApi, getUserIntegralListApi } from "../../service/api"; import { Toast } from "vant"; export default { name: "starDetail", data() { return { pullup: true, rankBg: rankBg, starNum: "", userDetail: {}, loading: true, finished: false, star_inner: star_inner, starList: [], page: 1, offset: 30, starCount:"", stage:"", starCountP:"", stageTime:{} }; }, components: {}, methods: { onReachBottom() { // console.log("bottom"); if (!this.finished&&this.loading) { this.loading = false Toast.loading({ mask: true, message: "" }); this.page++; let json = { page: this.page, limit: "50" }; 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() { this.userDetail = JSON.parse(localStorage.getItem("userDesc")); console.log(this.$route.query.starInfo) getUserIntegralApi().then(res => { this.starNum = res.last_value; }); let json = { page: this.page, limit: "50", source:0, start_at:this.$route.query.starInfo.start_at }; if(this.$route.query.starInfo.first_over_at){ json.over_at = this.$route.query.starInfo.first_over_at this.starCount = this.$route.query.starInfo.user_category_integral_last_ten this.stage = '一' this.starCountP = 20 }else{ json.over_at = this.$route.query.starInfo.second_over_at this.starCount = this.$route.query.starInfo.user_category_integral_last_twenty this.stage = '二' this.starCountP = 40 } this.stageTime = json // start_at getUserIntegralListApi(json).then(res => { this.starList = res.list; this.finished=res.total>50?false:true // console.log(this.finished) // console.log(res); }); } }, mounted() { 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; padding: 10 * @toVw 20 * @toVw ; margin-bottom: 8* @toVw; border-bottom: 1px solid #E2E2E2; .top{ display: flex; span{line-height: 28* @toVw ;margin: 0;} } .count{ font-size: 18 * @toVw; color: #f27321; font-weight: 800; } .date{ font-size: 12 * @toVw; color: #999999; } } .secTitle { text-align: center; color: #999999; font-size: 13 * @toVw; .line { display: inline-block; width: 120 * @toVw; border-bottom: 1px solid #e2e2e2; position: relative; top: -3 * @toVw; } } // .scrollP{position: relative;height: 100vh;width: 100%;transform:none;} .scroll { padding: 10 * @toVw 20 * @toVw 0; // margin-top: 180* @toVw; height: 100%; overflow: hidden; position: fixed; width: 100%; box-sizing: border-box; background: white; .itemBox { padding-top: 65 * @toVw; .none { height: 53 * @toVw; line-height: 40 * @toVw; text-align: center; color: #999999; font-size: 12px; } } .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>