|
|
@@ -0,0 +1,1080 @@
|
|
|
+<template>
|
|
|
+ <!-- 图片前缀 https://img.shuimuai.com/ -->
|
|
|
+ <scroll-view id="index_container" @scroll="onListenScroll" scroll-y style="height: 100%;">
|
|
|
+ <!-- 死底部分-->
|
|
|
+ <div class="index_container">
|
|
|
+
|
|
|
+ <!-- 用户信息模块-->
|
|
|
+ <van-row>
|
|
|
+ <van-col :span="12">
|
|
|
+
|
|
|
+ <div class="userinfo " :class="{not_show:userinfo.user_id == false}">
|
|
|
+ <van-row>
|
|
|
+ <van-col :span="5">
|
|
|
+ <van-image :src="userinfo.portrait" width="32px" height="32px"></van-image>
|
|
|
+ </van-col>
|
|
|
+ <van-col :span="10">
|
|
|
+ <p>{{ userinfo.user_name }}</p>
|
|
|
+ <p>{{ userinfo.phone }}</p>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ </div>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ <!-- 用户信息模块 -->
|
|
|
+
|
|
|
+ <!-- 倒计时模块 -->
|
|
|
+ <van-row>
|
|
|
+ <div class="count_down_container">
|
|
|
+ <van-count-down :time="complete_time" use-slot @change="onTimeChange" format="DD:HH:mm:ss"
|
|
|
+ v-if="complete_time">
|
|
|
+ <span class="count_down_time">{{ timeData.days }}</span>
|
|
|
+ <span class="count_down_time">{{ timeData.hours }}</span>
|
|
|
+ <span class="count_down_time">{{ timeData.minutes }}</span>
|
|
|
+ <span class="count_down_time">{{ timeData.seconds }}</span>
|
|
|
+ </van-count-down>
|
|
|
+ <div class="none_count_down" v-else>
|
|
|
+ <span class="count_down_time">00</span>
|
|
|
+ <span class="count_down_time">00</span>
|
|
|
+ <span class="count_down_time">00</span>
|
|
|
+ <span class="count_down_time">00</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-row>
|
|
|
+ <!-- 倒计时模块 -->
|
|
|
+
|
|
|
+ <!-- 分享和参与比赛的按钮 -->
|
|
|
+ <van-row gutter="7" :class="{'complete_btns':is_fixed == false,'complete_btns_fixed':is_fixed}">
|
|
|
+ <van-col :span="11" :offset="1">
|
|
|
+ <!--分享按钮-->
|
|
|
+ <van-image src="https://img.shuimuai.com/share_btn@2x.png" @click="show_share_window"
|
|
|
+ width="160px" height="49px"
|
|
|
+ ></van-image>
|
|
|
+ </van-col>
|
|
|
+ <van-col :span="10" :offset="1">
|
|
|
+ <!--参与按钮-->
|
|
|
+ <van-image src="https://img.shuimuai.com/join_btn@2x.png"
|
|
|
+ @click="to_info"
|
|
|
+ width="160px" height="49px"
|
|
|
+ v-if="joined == false"
|
|
|
+ ></van-image>
|
|
|
+ <van-image src="https://img.shuimuai.com/rank@2x.png" alt="" @click="to_rank"
|
|
|
+ width="160px" height="49px"
|
|
|
+ v-else
|
|
|
+ ></van-image>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+
|
|
|
+
|
|
|
+ <van-overlay :show="share_show" class="share_info" :z-index="99">
|
|
|
+ <img src="https://img.shuimuai.com/share_arrow.png" alt="" class="share_arrow">
|
|
|
+ <img src="https://img.shuimuai.com/share_content.png" alt="" class="share_content">
|
|
|
+ <img src="https://img.shuimuai.com/know_btn.png" alt="" @click="close_share_window" class="know_btn">
|
|
|
+ </van-overlay>
|
|
|
+ <!-- 分享和参与比赛的按钮 -->
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div id="info"></div>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 自创模块-->
|
|
|
+ <div class="diy_container">
|
|
|
+ <!-- 排行榜模块 -->
|
|
|
+ <div class="rank_container" id="rank_container">
|
|
|
+ <div class="rank_title">
|
|
|
+ <img src="https://img.shuimuai.com/rank_title@2x.png" alt="" class="rank_title_img">
|
|
|
+ </div>
|
|
|
+ <div class="rank_main">
|
|
|
+ <!-- 排行榜tabs -->
|
|
|
+ <view class="rank_header">
|
|
|
+ <van-row>
|
|
|
+ <van-col span="8">
|
|
|
+ <img src="https://img.shuimuai.com/yu_sai_rank@2x.png" alt="" class="rank_card"
|
|
|
+ @click="changeRankAction(1)">
|
|
|
+ <img src="https://img.shuimuai.com/yu_sai_tg@2x.png" alt="" class="rank_arrow"
|
|
|
+ :class="{not_show:rank_action!=1}">
|
|
|
+ </van-col>
|
|
|
+ <van-col span="8">
|
|
|
+ <img src="https://img.shuimuai.com/raise_rank@2x.png" alt="" class="rank_card"
|
|
|
+ @click="changeRankAction(2)">
|
|
|
+ <img src="https://img.shuimuai.com/raise_tg@2x.png" alt="" class="rank_arrow"
|
|
|
+ :class="{not_show:rank_action!=2}">
|
|
|
+ </van-col>
|
|
|
+ <van-col span="8">
|
|
|
+ <img src="https://img.shuimuai.com/final_rank@2x.png" alt="" class="rank_card"
|
|
|
+ @click="changeRankAction(3)">
|
|
|
+ <img src="https://img.shuimuai.com/final_tg@2x.png" alt="" class="rank_arrow"
|
|
|
+ :class="{not_show:rank_action!=3}">
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <!-- 排行榜榜单 -->
|
|
|
+ <!-- 预选赛榜单 -->
|
|
|
+ <div class="rank_main_list" v-if="rank_action==1">
|
|
|
+ <!-- 我的成绩 -->
|
|
|
+ <div class="my_score" v-if="my_report.user_id">
|
|
|
+ <span class="right_title" @click="to_report">成绩报告详情</span>
|
|
|
+ <van-row class="rank_item">
|
|
|
+ <van-col span="4" offset="1">
|
|
|
+ <span class="rank_num">第{{ my_report.ranking }}名</span>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="2" offset="1">
|
|
|
+ <van-image :src="my_report.portrait" alt="" class="avatar" width="25px" height="25px"></van-image>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="5">
|
|
|
+ <span class="rank_username">{{ my_report.user_name }}</span>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="5">
|
|
|
+ <template v-if="icon_show">
|
|
|
+ <van-image src="https://img.shuimuai.com/rise@2x.png" alt="" class="" width="19px" height="10px"
|
|
|
+ v-if="my_report.promotion_status==1"></van-image>
|
|
|
+ <van-image src="https://img.shuimuai.com/luo_xuan@2x.png" alt="" class="" width="19px" height="10px"
|
|
|
+ v-if="my_report.promotion_status==2"></van-image>
|
|
|
+ <van-image src="https://img.shuimuai.com/qi_quan@2x.png" alt="" class="" width="19px" height="10px"
|
|
|
+ v-if="my_report.promotion_status==3"></van-image>
|
|
|
+ </template>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="5">
|
|
|
+ <span class="rank_score">{{ my_report.att_average }}分</span>
|
|
|
+ </van-col>
|
|
|
+
|
|
|
+ </van-row>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 排行榜列表 -->
|
|
|
+ <div class="rank_list">
|
|
|
+ <van-row>
|
|
|
+ <van-col span="4" offset="1">
|
|
|
+ <span class="rank_list_title">排名</span>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="2" offset="1">
|
|
|
+ <span class="rank_list_title">姓名</span>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="5" offset="10">
|
|
|
+ <span class="rank_list_title">得分</span>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ <div v-for="(item,index) in promotion_rank" :key="index">
|
|
|
+ <view class="rank_item">
|
|
|
+ <van-row>
|
|
|
+ <van-col span="4" offset="1" class=" ">
|
|
|
+ <span class="rank_num" v-if="index > 2">第{{ index + 1 }}名</span>
|
|
|
+ <van-image src="https://img.shuimuai.com/gold_award@2x.png" alt="" v-if="index == 0"
|
|
|
+ width="16px" height="24px"
|
|
|
+ ></van-image>
|
|
|
+ <van-image src="https://img.shuimuai.com/second_award@2x.png" alt="" v-if="index == 1"
|
|
|
+ width="16px" height="24px"
|
|
|
+ ></van-image>
|
|
|
+ <van-image src="https://img.shuimuai.com/third_btn@2x.png" alt="" v-if="index == 2"
|
|
|
+ width="16px" height="24px"
|
|
|
+ ></van-image>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="2" offset="1" class=" ">
|
|
|
+ <van-image :src="item.portrait" alt="" class="avatar" width="25px" height="25px"></van-image>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="5">
|
|
|
+ <span class="rank_username">{{ item.user_name }}</span>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="5">
|
|
|
+ <template v-if="icon_show">
|
|
|
+ <van-image src="https://img.shuimuai.com/rise@2x.png" alt="" class="" width="19px" height="10px"
|
|
|
+ v-if="item.promotion_status==1"></van-image>
|
|
|
+ <van-image src="https://img.shuimuai.com/luo_xuan@2x.png" alt="" class="" width="19px"
|
|
|
+ height="10px"
|
|
|
+ v-if="item.promotion_status==2"></van-image>
|
|
|
+ <van-image src="https://img.shuimuai.com/qi_quan@2x.png" alt="" class="" width="19px"
|
|
|
+ height="10px"
|
|
|
+ v-if="item.promotion_status==3"></van-image>
|
|
|
+ </template>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="5">
|
|
|
+ <span class="rank_score">{{ item.att_average }}分</span>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <div class="under_line"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 晋级赛榜单 -->
|
|
|
+ <div class="rank_main_list" v-if="rank_action==2">
|
|
|
+ <div class="my_score" v-if="my_report_2.user_id">
|
|
|
+ <span class="right_title" @click="to_report">成绩报告详情</span>
|
|
|
+ <view class="rank_item">
|
|
|
+ <van-row>
|
|
|
+ <van-col span="4" offset="1">
|
|
|
+ <span class="rank_num">第{{ my_report_2.ranking }}名</span>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="2" offset="1">
|
|
|
+ <van-image :src="my_report_2.portrait" alt="" class="avatar" width="25px" height="25px"></van-image>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="5">
|
|
|
+ <span class="rank_username">{{ my_report_2.user_name }}</span>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="5" class="not_show">
|
|
|
+ </van-col>
|
|
|
+ <van-col span="5">
|
|
|
+ <span class="rank_score">{{ my_report_2.att_average }}分</span>
|
|
|
+ </van-col>
|
|
|
+
|
|
|
+ </van-row>
|
|
|
+ </view>
|
|
|
+ </div>
|
|
|
+ <!-- 排行榜列表 -->
|
|
|
+ <div class="rank_list">
|
|
|
+ <van-row>
|
|
|
+ <van-col span="4" offset="1">
|
|
|
+ <span class="rank_list_title">排名</span>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="2" offset="1">
|
|
|
+ <span class="rank_list_title">姓名</span>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="5" offset="10">
|
|
|
+ <span class="rank_list_title">得分</span>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ <div v-for="(item,index) in final_rank" :key="index">
|
|
|
+ <view class="rank_item">
|
|
|
+
|
|
|
+ <van-row>
|
|
|
+ <van-col span="4" offset="1" class="">
|
|
|
+ <span class="rank_num" v-if="index > 2">第{{ item.ranking }}名</span>
|
|
|
+ <van-image src="https://img.shuimuai.com/gold_award@2x.png" alt="" v-if="index == 0"
|
|
|
+ width="16px" height="24px"
|
|
|
+ ></van-image>
|
|
|
+ <van-image src="https://img.shuimuai.com/second_award@2x.png" alt="" v-if="index == 1"
|
|
|
+ width="16px" height="24px"
|
|
|
+ ></van-image>
|
|
|
+ <van-image src="https://img.shuimuai.com/third_btn@2x.png" alt="" v-if="index == 2"
|
|
|
+ width="16px" height="24px"
|
|
|
+ ></van-image>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="2" offset="1" class="">
|
|
|
+ <van-image :src="item.portrait" alt="" class="avatar" width="25px" height="25px"></van-image>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="5">
|
|
|
+ <span class="rank_username">{{ item.user_name }}</span>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="5" class="not_show">
|
|
|
+ <van-image src="https://img.shuimuai.com/rise@2x.png" alt="" class="" width="19px" height="10px"
|
|
|
+ v-if="item.finals_status==1"></van-image>
|
|
|
+ <van-image src="https://img.shuimuai.com/luo_xuan@2x.png" alt="" class="" width="19px"
|
|
|
+ height="10px"
|
|
|
+ v-if="item.finals_status==2"></van-image>
|
|
|
+ <van-image src="https://img.shuimuai.com/qi_quan@2x.png" alt="" class="" width="19px"
|
|
|
+ height="10px"
|
|
|
+ v-if="item.finals_status==3"></van-image>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="5">
|
|
|
+ <span class="rank_score">{{ item.att_average }}分</span>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ </view>
|
|
|
+ <div class="under_line"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 决赛榜单 -->
|
|
|
+ <div class="rank_main_list" v-if="rank_action==3">
|
|
|
+ <!-- 排行榜列表 -->
|
|
|
+ <div class="rank_list_ext">
|
|
|
+
|
|
|
+ <div v-for="(item,index) in all_final_rank" :key="item">
|
|
|
+
|
|
|
+ <!-- 特等奖 -->
|
|
|
+ <view class="gold_award_container last_sort" v-if="item.prize==0">
|
|
|
+ <van-row >
|
|
|
+ <van-col span="2" offset="9" class="">
|
|
|
+ <van-image :src="item.portrait" alt="" class="avatar" width="25px" height="25px"></van-image>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="5">
|
|
|
+ <span class="rank_username">{{ item.user_name }}</span>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="4">
|
|
|
+ <span class="slogen">总决赛积分</span>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="2">
|
|
|
+ <span class="rank_score">{{ item.att_average }}</span>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ </view>
|
|
|
+ <!-- 一等奖 -->
|
|
|
+ <van-row class="first_award_container " v-if="item.prize == 1">
|
|
|
+ <div class="first_award_bg last_sort_ext">
|
|
|
+ <van-col>
|
|
|
+ <van-image src="https://img.shuimuai.com/h5/first.png" alt=""
|
|
|
+ width="87px" height="25px"
|
|
|
+ ></van-image>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="2" offset="1" class="">
|
|
|
+ <van-image :src="item.portrait" alt="" class="avatar" width="25px" height="25px"></van-image>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="5">
|
|
|
+ <span class="rank_username">{{ item.user_name }}</span>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="4">
|
|
|
+ <span class="slogen">总决赛积分</span>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="2">
|
|
|
+ <span class="rank_score">{{ item.att_average }}</span>
|
|
|
+ </van-col>
|
|
|
+ </div>
|
|
|
+ </van-row>
|
|
|
+ <!-- 二等奖 -->
|
|
|
+ <div class="second_award_container " v-if="item.prize == 2">
|
|
|
+ <div class="second_award_bg last_sort_ext">
|
|
|
+ <van-col>
|
|
|
+ <van-image src="https://img.shuimuai.com/h5/second.png" alt=""
|
|
|
+ width="87px" height="25px"
|
|
|
+ ></van-image>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="2" offset="1" class="">
|
|
|
+ <van-image :src="item.portrait" alt="" class="avatar" width="25px" height="25px"></van-image>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="5">
|
|
|
+ <span class="rank_username second_text">{{ item.user_name }}</span>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="4">
|
|
|
+ <span class="slogen second_text">晋级赛积分</span>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="2">
|
|
|
+ <span class="rank_score second_text">{{ item.att_average }}</span>
|
|
|
+ </van-col>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 精彩时刻模块 -->
|
|
|
+ <div class="wonderful_container">
|
|
|
+ <img src="https://img.shuimuai.com/jing_cai_shi_ke@2x.png" alt="" class="wonderful_container_img">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 扫码关注我们模块 -->
|
|
|
+ <div class="qrcode_container">
|
|
|
+ <img src="https://img.shuimuai.com/code@2x.png" alt="" class="qrcode_container_img">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <van-toast id="van-toast"/>
|
|
|
+ </scroll-view>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import store from "../../store/competition";
|
|
|
+import {cal_down_time} from "../../utils";
|
|
|
+import {
|
|
|
+ checkJoined,
|
|
|
+ doEnroll,
|
|
|
+ get_user_by_code,
|
|
|
+ getActivity, getAllFinalsRanking,
|
|
|
+ getFinalsRanking, getJsSDK,
|
|
|
+ getPromotionRanking
|
|
|
+} from "../../requests/competition";
|
|
|
+import Toast from '../../../static/vant/toast/toast';
|
|
|
+import {reload_userinfo} from "../../utils/user";
|
|
|
+
|
|
|
+var $this;
|
|
|
+var $now = Math.round(new Date() / 1000);
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "index",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ //活动id
|
|
|
+ activity_id: 0,
|
|
|
+ //分享显示
|
|
|
+ share_show: false,
|
|
|
+ //结束时间
|
|
|
+ complete_time: "",
|
|
|
+ //排行榜
|
|
|
+ rank_action: 1,
|
|
|
+ joined: false,
|
|
|
+ //预选赛排行
|
|
|
+ promotion_rank: [],
|
|
|
+ //晋级赛排行
|
|
|
+ final_rank: [],
|
|
|
+ //总决赛排行
|
|
|
+ all_final_rank: [],
|
|
|
+ //我的成绩
|
|
|
+ my_report: {},
|
|
|
+ my_report_2: {},
|
|
|
+ timeData: {},
|
|
|
+ //用户个人信息
|
|
|
+ userinfo: {
|
|
|
+ phone: 0,
|
|
|
+ portrait: "",
|
|
|
+ user_id: "",
|
|
|
+ user_name: ""
|
|
|
+ },
|
|
|
+ icon_show: false,
|
|
|
+ // 是否悬浮
|
|
|
+ is_fixed: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ rank_action($new, $old) {
|
|
|
+ if ($new == 2) {
|
|
|
+ if ($this.final_rank.length == 0) {
|
|
|
+ $this.rank_action = $old
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if ($new == 3) {
|
|
|
+ if ($this.all_final_rank.length == 0) {
|
|
|
+ $this.rank_action = $old
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ to_report() {
|
|
|
+ // $this.$router.push({name: "Report"})
|
|
|
+ },
|
|
|
+ get_init() {
|
|
|
+ },
|
|
|
+ //打开分享窗口
|
|
|
+ show_share_window() {
|
|
|
+ $this.share_show = true
|
|
|
+ },
|
|
|
+ //关闭分享窗口
|
|
|
+ close_share_window() {
|
|
|
+ $this.share_show = false
|
|
|
+ },
|
|
|
+ //跳转比赛信息位置
|
|
|
+ to_info() {
|
|
|
+ if (!$this.userinfo.user_id) {
|
|
|
+ Toast.fail({
|
|
|
+ message:'请登录水母智脑小程序后进行参与比赛',
|
|
|
+ onClose(){
|
|
|
+ wx.navigateTo({
|
|
|
+ url:"/pages/index/main"
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ //判断有用户id 就 参加比赛
|
|
|
+ if ($this.userinfo.user_id && $this.joined == false) {
|
|
|
+ doEnroll($this.activity_id, $this.userinfo.user_id).then((res) => {
|
|
|
+ let $res = res.data
|
|
|
+ if ($res.code == 0) {
|
|
|
+ Toast.success("参加成功");
|
|
|
+ $this.joined = true
|
|
|
+ } else {
|
|
|
+ Toast.fail($res.errmsg)
|
|
|
+ }
|
|
|
+ }).catch((e) => {
|
|
|
+ Toast.fail(e)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ if ($this.joined == true) {
|
|
|
+ //没有则跳转到地址
|
|
|
+ window.location.href = '#info'
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ //跳转比赛信息位置
|
|
|
+ to_rank() {
|
|
|
+ window.location.href = '#rank_container'
|
|
|
+ },
|
|
|
+ //时间产生变化时
|
|
|
+ onTimeChange($e) {
|
|
|
+ $this.timeData = $e.mp.detail
|
|
|
+ for (let $key in $e) {
|
|
|
+ if ($e[$key].toString().length == 1) {
|
|
|
+ $e[$key] = "0" + $e[$key]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //切换排行榜
|
|
|
+ changeRankAction($action) {
|
|
|
+ $this.rank_action = $action
|
|
|
+ },
|
|
|
+ // 获取互动
|
|
|
+ getActivity($activity_id) {
|
|
|
+ getActivity($activity_id).then((res) => {
|
|
|
+ let $res = res.data;
|
|
|
+ let $data = $res.data;
|
|
|
+
|
|
|
+ // 倒计时模块
|
|
|
+ if ($now > $data['promotion_start_time'] && $now < $data['promotion_end_time']) {
|
|
|
+ //预选塞时间范围内
|
|
|
+ $this.calDownTime($data['promotion_end_time'])
|
|
|
+ }
|
|
|
+
|
|
|
+ //晋级赛时间范围内
|
|
|
+ if ($now > $data['finals_start_time'] && $now < $data['finals_end_time']) {
|
|
|
+ $this.rank_action = 2
|
|
|
+ }
|
|
|
+
|
|
|
+ //总决赛时间范围内
|
|
|
+ if ($now > $data['all_finals_start_time'] && $now < $data['all_finals_end_time']) {
|
|
|
+ $this.rank_action = 3
|
|
|
+ }
|
|
|
+
|
|
|
+ //显示预选赛排行
|
|
|
+ if ($now > $data['promotion_start_time']) {
|
|
|
+ //获取预选赛排行榜
|
|
|
+ $this.getPromotionRanking($activity_id)
|
|
|
+ }
|
|
|
+ //显示晋级赛排行
|
|
|
+ if ($now > $data['finals_start_time']) {
|
|
|
+ //获取晋级赛排行榜
|
|
|
+ $this.getFinalsRanking($activity_id)
|
|
|
+ }
|
|
|
+ // 显示总决赛排行榜
|
|
|
+ if ($now > $data['all_finals_end_time']) {
|
|
|
+ $this.getAllFinalsRanking($activity_id)
|
|
|
+ }
|
|
|
+
|
|
|
+ if ($now > $data['promotion_end_time']) {
|
|
|
+ $this.icon_show = true
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //获取预选赛排行
|
|
|
+ getPromotionRanking($activity_id) {
|
|
|
+ getPromotionRanking($activity_id).then((res) => {
|
|
|
+ let $res = res.data;
|
|
|
+ let $data = $res.data;
|
|
|
+ $data.forEach(($val, $index) => {
|
|
|
+ if ($val['user_id'] == $this.userinfo.user_id) {
|
|
|
+ $this.my_report = $val
|
|
|
+ }
|
|
|
+ })
|
|
|
+ $this.promotion_rank = $data
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ //获取晋级赛排行
|
|
|
+ getFinalsRanking($activity_id) {
|
|
|
+ getFinalsRanking($activity_id).then((res) => {
|
|
|
+ let $res = res.data;
|
|
|
+ let $data = $res.data;
|
|
|
+ $data.forEach(($val, $index) => {
|
|
|
+ if ($val['user_id'] == $this.userinfo.user_id) {
|
|
|
+ $this.my_report_2 = $val
|
|
|
+ }
|
|
|
+ })
|
|
|
+ $this.final_rank = $res.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //获取总决赛排行
|
|
|
+ getAllFinalsRanking($activity_id) {
|
|
|
+ getAllFinalsRanking($activity_id).then((res) => {
|
|
|
+ let $res = res.data;
|
|
|
+ $this.all_final_rank = $res.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 计算结束时间差
|
|
|
+ calDownTime($time) {
|
|
|
+ //计算倒计时
|
|
|
+ // 获取比赛结束日
|
|
|
+ let $time_result = cal_down_time($time)
|
|
|
+ $this.complete_time = $time_result.differ
|
|
|
+ },
|
|
|
+ //监听滚动
|
|
|
+ onListenScroll(event) {
|
|
|
+ let $scrollTop = event.mp.detail.scrollTop
|
|
|
+ $this.is_fixed = $scrollTop > 400
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ $this = this;
|
|
|
+ //获取浏览器信息
|
|
|
+ reload_userinfo($this)
|
|
|
+ },
|
|
|
+ onLoad($options) {
|
|
|
+ $this.activity_id = $options.activity_id
|
|
|
+ $this.getActivity($this.activity_id)
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+
|
|
|
+page {
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style scoped>
|
|
|
+/*//死底模块*/
|
|
|
+#index_container {
|
|
|
+ background-color: #2b2760;
|
|
|
+}
|
|
|
+
|
|
|
+.index_container {
|
|
|
+ background: url("https://img.shuimuai.com/h5/background_1%402x.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-position: center;
|
|
|
+ height: 2487px;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.userinfo {
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.userinfo p {
|
|
|
+ font-size: 9px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.complete_btns {
|
|
|
+ position: absolute;
|
|
|
+ top: 580px;
|
|
|
+}
|
|
|
+
|
|
|
+.complete_btns_fixed {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0px;
|
|
|
+ z-index: 99;
|
|
|
+}
|
|
|
+
|
|
|
+.share_info {
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.share_info .share_arrow {
|
|
|
+ width: 84px;
|
|
|
+ height: 113px;
|
|
|
+ float: right;
|
|
|
+ margin-top: 18px;
|
|
|
+ margin-right: 33px;
|
|
|
+}
|
|
|
+
|
|
|
+.share_info .share_content {
|
|
|
+ width: 324px;
|
|
|
+ height: 116px;
|
|
|
+ margin: 0px auto;
|
|
|
+}
|
|
|
+
|
|
|
+.share_info .know_btn {
|
|
|
+ width: 189px;
|
|
|
+ height: 73px;
|
|
|
+ margin-top: 49px;
|
|
|
+}
|
|
|
+
|
|
|
+.count_down_container {
|
|
|
+ background-image: url("https://img.shuimuai.com/count_down_container@2x.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-position: center;
|
|
|
+ width: 294px;
|
|
|
+ height: 49px;
|
|
|
+ position: absolute;
|
|
|
+ top: 323px;
|
|
|
+ left: 41px;
|
|
|
+}
|
|
|
+
|
|
|
+.count_down_container .count_down_time {
|
|
|
+ font-size: 24px;
|
|
|
+ font-family: zihun59hao-chuangcuhei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.count_down_container .count_down_time:nth-child(1) {
|
|
|
+ left: 70px;
|
|
|
+ top: 15px;
|
|
|
+ bottom: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.count_down_container .count_down_time:nth-child(2) {
|
|
|
+ left: 90px;
|
|
|
+ top: 15px;
|
|
|
+ bottom: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.count_down_container .count_down_time:nth-child(3) {
|
|
|
+ left: 115px;
|
|
|
+ top: 15px;
|
|
|
+ bottom: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.count_down_container .count_down_time:nth-child(4) {
|
|
|
+ left: 135px;
|
|
|
+ top: 15px;
|
|
|
+ bottom: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.none_count_down .count_down_time {
|
|
|
+ top: 8px !important;
|
|
|
+}
|
|
|
+
|
|
|
+/*# sourceMappingURL=index.css.map */
|
|
|
+/*//diy模块*/
|
|
|
+.max_width_and_center {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.flex_center {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container {
|
|
|
+ margin-top: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_container .rank_title {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_container .rank_title_img {
|
|
|
+ width: 352px;
|
|
|
+ height: 32px;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_container .rank_main {
|
|
|
+ margin-top: 20px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_container .rank_main .rank_card {
|
|
|
+ width: 105px;
|
|
|
+ height: 50px;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_container .rank_main .rank_arrow {
|
|
|
+ width: 67px;
|
|
|
+ height: 55px;
|
|
|
+ position: relative;
|
|
|
+ top: -28px;
|
|
|
+ left: 0px;
|
|
|
+ z-index: 2;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_container .rank_main .rank_main_list {
|
|
|
+ width: 322px;
|
|
|
+ height: 486px;
|
|
|
+ background: #1B1746;
|
|
|
+ border: 2px solid #585399;
|
|
|
+ border-radius: 9px;
|
|
|
+ margin: 0px auto;
|
|
|
+ position: relative;
|
|
|
+ bottom: 60px;
|
|
|
+ z-index: 1;
|
|
|
+ overflow-y: scroll;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_container .rank_main .rank_main_list .my_score {
|
|
|
+ background-image: url("https://img.shuimuai.com/my_score_bg@2x.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-position: center;
|
|
|
+ width: 306px;
|
|
|
+ height: 48px;
|
|
|
+ margin: 10px auto;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_container .rank_main .rank_main_list .my_score .right_title {
|
|
|
+ width: 55px;
|
|
|
+ height: 10px;
|
|
|
+ font-size: 9px;
|
|
|
+ font-family: zihun59hao-chuangcuhei;
|
|
|
+ font-weight: 400;
|
|
|
+ text-decoration: underline;
|
|
|
+ color: #FFBA00;
|
|
|
+ line-height: 12px;
|
|
|
+ position: relative;
|
|
|
+ left: 110px;
|
|
|
+ bottom: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_container .rank_main .rank_main_list .my_score .rank_item {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_container .rank_main .rank_main_list .my_score .rank_item .rank_num {
|
|
|
+ font-size: 10px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFC600;
|
|
|
+ line-height: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_container .rank_main .rank_main_list .my_score .rank_item .rank_username {
|
|
|
+ font-size: 10px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #E2E0FF;
|
|
|
+ line-height: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_container .rank_main .rank_main_list .my_score .rank_item .avatar {
|
|
|
+ width: 24px;
|
|
|
+ height: 25px;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_container .rank_main .rank_main_list .my_score .rank_item .rank_score {
|
|
|
+ font-size: 10px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #E2E0FF;
|
|
|
+ line-height: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_list_title {
|
|
|
+ font-size: 10px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #8F8AC3;
|
|
|
+ line-height: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_list .avatar {
|
|
|
+ width: 24px;
|
|
|
+ height: 25px;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_list .rank_item {
|
|
|
+ /*display: flex;*/
|
|
|
+ height: 30px;
|
|
|
+ margin: 10px 0px;
|
|
|
+ /*align-items: center;*/
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_list .rank_item .rank_num {
|
|
|
+ font-size: 10px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_list .rank_item .yellow {
|
|
|
+ color: #FFC600;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_list .rank_item .avatar {
|
|
|
+ width: 24px;
|
|
|
+ height: 25px;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_list .rank_item .rank_username {
|
|
|
+ font-size: 10px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #E2E0FF;
|
|
|
+ line-height: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_list .rank_item .rank_score {
|
|
|
+ font-size: 10px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #E2E0FF;
|
|
|
+ line-height: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_list .under_line {
|
|
|
+ width: 281px;
|
|
|
+ height: 1px;
|
|
|
+ background: #474186;
|
|
|
+ margin: 0px auto;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_list .gold_award_container {
|
|
|
+ margin: 10px auto;
|
|
|
+ background-image: url("https://img.shuimuai.com/gold_award_bg.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-position: center;
|
|
|
+ width: 299px;
|
|
|
+ height: 44px;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_list .first_award_bg {
|
|
|
+ margin: auto;
|
|
|
+ background-image: url("https://img.shuimuai.com/first_award_bg.png");
|
|
|
+ background-size: 100%;
|
|
|
+ background-position: center;
|
|
|
+ width: 299px;
|
|
|
+ height: 44px;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_list .first_award_container {
|
|
|
+ margin: 10px auto;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_list .second_award_bg {
|
|
|
+ margin: auto;
|
|
|
+ background-image: url("https://img.shuimuai.com/second_award_bg.png");
|
|
|
+ background-size: 100%;
|
|
|
+ background-position: center;
|
|
|
+ width: 299px;
|
|
|
+ height: 44px;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_list .second_award_container {
|
|
|
+ margin: 10px auto;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_list_ext_title {
|
|
|
+ font-size: 10px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #8F8AC3;
|
|
|
+ line-height: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_list_ext .avatar {
|
|
|
+ width: 24px;
|
|
|
+ height: 25px;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_list_ext .rank_num {
|
|
|
+ font-size: 10px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_list_ext .yellow {
|
|
|
+ color: #FFC600;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_list_ext .avatar {
|
|
|
+ width: 24px;
|
|
|
+ height: 25px;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_list_ext .rank_username {
|
|
|
+ font-size: 10px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #392121;
|
|
|
+ line-height: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_list_ext .slogen {
|
|
|
+ font-size: 7px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #392121;
|
|
|
+ line-height: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_list_ext .rank_score {
|
|
|
+ font-size: 10px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #392121;
|
|
|
+ line-height: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_list_ext .under_line {
|
|
|
+ width: 281px;
|
|
|
+ height: 1px;
|
|
|
+ background: #474186;
|
|
|
+ margin: 0px auto;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_list_ext .gold_award_container {
|
|
|
+ margin: 10px auto;
|
|
|
+ background-image: url("https://img.shuimuai.com/h5/gold.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-position: center;
|
|
|
+ width: 299px;
|
|
|
+ height: 44px;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_list_ext .first_award_bg {
|
|
|
+ margin: auto;
|
|
|
+ background-image: url("https://img.shuimuai.com/first_award_bg.png");
|
|
|
+ background-size: 100%;
|
|
|
+ background-position: center;
|
|
|
+ width: 299px;
|
|
|
+ height: 44px;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_list_ext .first_award_container {
|
|
|
+ margin: 10px auto;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_list_ext .second_award_bg {
|
|
|
+ margin: auto;
|
|
|
+ background-image: url("https://img.shuimuai.com/second_award_bg.png");
|
|
|
+ background-size: 100%;
|
|
|
+ background-position: center;
|
|
|
+ width: 299px;
|
|
|
+ height: 44px;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_list_ext .second_award_container {
|
|
|
+ margin: 10px auto;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .rank_list_ext .second_text {
|
|
|
+ color: #C1A98E;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .wonderful_container {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .wonderful_container_img {
|
|
|
+ width: 366px;
|
|
|
+ height: 365px;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .qrcode_container {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 30px;
|
|
|
+ padding-bottom: 80px;
|
|
|
+}
|
|
|
+
|
|
|
+.diy_container .qrcode_container_img {
|
|
|
+ width: 352px;
|
|
|
+ height: 194px;
|
|
|
+}
|
|
|
+
|
|
|
+.not_show {
|
|
|
+ visibility: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+#info {
|
|
|
+ position: relative;
|
|
|
+ bottom: 155px;
|
|
|
+}
|
|
|
+
|
|
|
+.rank_header {
|
|
|
+ padding: 0px 25px;
|
|
|
+}
|
|
|
+.last_sort{
|
|
|
+ padding: 10px 0px;
|
|
|
+}
|
|
|
+
|
|
|
+.last_sort_ext{
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+/*# sourceMappingURL=diy.css.map */
|
|
|
+</style>
|
yerong