Skip to content

W
walk_daka_h5
Commit 0bf7d45b by Caiyijun
Options

新增对应天数 卡片滚动

parent 06fe2041
Showing with 1092 additions and 986 deletions
src/components/NoticeBonus.vue
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
.msg_container { .msg_container {
flex: 1; flex: 1;
height: .34rem; height: .44rem;
transform-style: preserve-3d; transform-style: preserve-3d;
overflow: hidden; overflow: hidden;
} }
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
.notice_msg { .notice_msg {
font-size: .24rem; font-size: .24rem;
color: #fff; color: #fff;
line-height: .32rem; line-height: .44rem;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
} }
.msg1 { .msg1 {
transform: translate3d(0, 0.32rem, 0); transform: translate3d(0, 0.44rem, 0);
animation: rowUp 10s infinite; animation: rowUp 10s infinite;
/* transform: translateZ(35rpx); */ /* transform: translateZ(35rpx); */
} }
...@@ -76,8 +76,8 @@ ...@@ -76,8 +76,8 @@
@keyframes rowUp { @keyframes rowUp {
0% { 0% {
-webkit-transform: translate3d(0, 0.32rem, 0); -webkit-transform: translate3d(0, 0.44rem, 0);
transform: translate3d(0, 0.32rem, 0); transform: translate3d(0, 0.44rem, 0);
} }
10% { 10% {
-webkit-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
...@@ -88,12 +88,12 @@ ...@@ -88,12 +88,12 @@
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
50% { 50% {
-webkit-transform: translate3d(0, -0.32rem, 0); -webkit-transform: translate3d(0, -0.44rem, 0);
transform: translate3d(0, -0.32rem, 0); transform: translate3d(0, -0.44rem, 0);
} }
100% { 100% {
-webkit-transform: translate3d(0, -0.32rem, 0); -webkit-transform: translate3d(0, -0.44rem, 0);
transform: translate3d(0, -0.32rem, 0); transform: translate3d(0, -0.44rem, 0);
} }
} }
...@@ -107,12 +107,12 @@ ...@@ -107,12 +107,12 @@
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
60% { 60% {
-webkit-transform: translate3d(0, -0.32rem, 0); -webkit-transform: translate3d(0, -0.44rem, 0);
transform: translate3d(0, -0.32rem, 0); transform: translate3d(0, -0.44rem, 0);
} }
90% { 90% {
-webkit-transform: translate3d(0, -0.32rem, 0); -webkit-transform: translate3d(0, -0.32rem, 0);
transform: translate3d(0, -0.32rem, 0); transform: translate3d(0, -0.44rem, 0);
} }
100% { 100% {
-webkit-transform: translate3d(0, -0.96rem, 0); -webkit-transform: translate3d(0, -0.96rem, 0);
......
src/components/axios/fetch.js
...@@ -30,7 +30,7 @@ export function fetch(options) { ...@@ -30,7 +30,7 @@ export function fetch(options) {
resolve(response.data);//把请求到的数据发到引用请求的地方 resolve(response.data);//把请求到的数据发到引用请求的地方
}) })
.catch(error => { .catch(error => {
console.log('请求异常信息：', error); // console.log('请求异常信息：', error);
// console.log(error); // console.log(error);
// if (error.response.status == 401) { // if (error.response.status == 401) {
// localStorage.setItem('last_url', location.hash.slice(1)); // localStorage.setItem('last_url', location.hash.slice(1));
......
src/main.js
...@@ -5,8 +5,6 @@ import store from './store' ...@@ -5,8 +5,6 @@ import store from './store'
import axios from 'axios' import axios from 'axios'
import wx from 'weixin-js-sdk' import wx from 'weixin-js-sdk'
import api from "@/components/axios/api" import api from "@/components/axios/api"
// import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole // import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole
// let vConsole = new VConsole() // 初始化 // let vConsole = new VConsole() // 初始化
......
src/views/HaveJoinedGame.vue
<template> <template>
<div class="have-joined-game-page"> <div class="have-joined-game-page">
<Title <Title
class="page-title" class="page-title"
@goback="goback" @goback="goback"
show_back="true" show_back="true"
v-if="currentPage()==='HaveJoinedGame'" v-if="currentPage()==='HaveJoinedGame'"
></Title> ></Title>
<div class="game-bonus-container"> <div class="game-bonus-container">
<div class="bonus-title">本期累计奖励金（元）</div> <div class="bonus-title">本期累计奖励金（元）</div>
<div class="bonus-amount">{{bet_bonus|moneyFormatter}}</div> <div class="bonus-amount">{{bet_bonus|moneyFormatter}}</div>
</div>
<div class="game-title">{{target_steps}}步三日耐力赛</div>
<div class="game-time">开赛时间：{{period_start}} — {{period_end}}</div>
<div class="target-people-container">
<img class="target-img" src="../images/HaveJoinedGame/ic_shoes.png">
<div class="target-people-text">每日{{target_steps}}步达标</div>
<img class="people-img" src="../images/HaveJoinedGame/ic_people.png">
<div class="target-people-text">已有{{total_signup}}人参赛</div>
</div>
<div class="hr"></div>
<swiper :options="swiperOption" class="game-scroll-container" v-if="showSwiper">
<swiper-slide v-for="(item,index) in record_list" :key="index">
<div class="game-scroll-item">
<div class="item-title-status">
<div class="item-title">第{{item.days}}天</div>
<div
:class="item.status===0?'item-status0':item.status===1?'item-status1':item.status===2?'item-status2':'item-status2'"
>{{item.status===0?'未开始':item.status===1?'比赛中':item.status===2?'已结束':'已淘汰'}}</div>
</div>
<div class="item-income" :style="item.status===1?'':'visibility: hidden;'">
<div class="item-amount">{{item.money|moneyFormatter}}</div>
<div class="item-text">(元) 预计收益</div>
</div>
<div class="item-progress-num">
<div class="item-num" v-if="item.status===0">还有{{item.format_tsp || '0秒'}}开始</div>
<template v-else>
<div class="item-progress" :style="'width: '+item.rate/100*2.46+'rem;'"></div>
<div class="item-num">{{item.step_num}}/{{target_steps}}步</div>
</template>
</div>
</div> </div>
</swiper-slide> <div class="game-title">{{target_steps}}步三日耐力赛</div>
</swiper> <div class="game-time">开赛时间：{{period_start}} — {{period_end}}</div>
<div class="func-btn" @click="goOtherPage('GoXCX')">提交今日步数</div> <div class="target-people-container">
<div class="next-func-btn" v-if="next_signup" @click="joinNextGame()">报名下一期</div> <img class="target-img" src="../images/HaveJoinedGame/ic_shoes.png">
<!-- 报名成功弹框 --> <div class="target-people-text">每日{{target_steps}}步达标</div>
<div class="game-status-popup" v-if="false"> <img class="people-img" src="../images/HaveJoinedGame/ic_people.png">
<div class="game-status-container"> <div class="target-people-text">已有{{total_signup}}人参赛</div>
<img class="status-icon" src="../images/HaveJoinedGame/pop_bmcg_title.png">
<img class="join-success-banner" src="../images/HaveJoinedGame/pop_bmcg_img.png">
<div class="popup-text1">
<span>每日24点前</span>打开「运动打卡」小程序，手动提交今日步数，否则可能导致无法分钱哦！
</div> </div>
<div class="popup-text2">注：微信暂不支持小程序实时更新步数</div> <div class="hr"></div>
<div class="popup-btn1 green-btn">邀请好友来参赛</div> <!-- <div style="height: 2.68rem;">-->
<img class="close-btn" src="../images/common/pop_ic_close.png"> <swiper :options="swiperOption" ref="mySwiper" class="game-scroll-container" v-if="showSwiper">
</div> <swiper-slide v-for="(item,index) in record_list" :key="index">
</div> <div class="game-scroll-item">
<!-- 恭喜达标弹框 --> <div class="item-title-status">
<div class="game-status-popup" v-if="popupData.window && popupData.daka_done"> <div class="item-title">第{{item.days}}天</div>
<div class="game-status-container"> <div
<img class="status-icon" src="../images/HaveJoinedGame/pop_gxdb_title.png"> :class="item.status===0?'item-status0':item.status===1?'item-status1':item.status===2?'item-status2':'item-status2'"
<div class="status-date">第{{popupData.days}}日达标</div> >{{item.status===0?'未开始':item.status===1?'比赛中':item.status===2?'已结束':'已淘汰'}}
<div class="status-money"> </div>
<div class="popup-text3">返还契约金</div> </div>
<div class="popup-text4"> <div class="item-income" :style="item.status===1?'':'visibility: hidden;'">
{{popupData.money}} <div class="item-amount">{{item.money|moneyFormatter}}</div>
<span>元</span> <div class="item-text">(元) 预计收益</div>
</div> </div>
<div class="popup-text5">第{{popupData.week}}期{{popupData.target_steps}}步3日耐力赛</div> <div class="item-progress-num">
<div class="item-num" v-if="item.status===0">还有{{item.format_tsp || '0秒'}}开始</div>
<template v-else>
<div class="item-progress" :style="'width: '+item.rate/100*2.46+'rem;'"></div>
<div class="item-num">{{item.step_num}}/{{target_steps}}步</div>
</template>
</div>
</div>
</swiper-slide>
</swiper>
<!-- </div>-->
<div class="func-btn" @click="goOtherPage('GoXCX')">提交今日步数</div>
<div class="next-func-btn" v-if="next_signup" @click="joinNextGame()">报名下一期</div>
<!-- 报名成功弹框 -->
<div class="game-status-popup" v-if="false">
<div class="game-status-container">
<img class="status-icon" src="../images/HaveJoinedGame/pop_bmcg_title.png">
<img class="join-success-banner" src="../images/HaveJoinedGame/pop_bmcg_img.png">
<div class="popup-text1">
<span>每日24点前</span>打开「运动打卡」小程序，手动提交今日步数，否则可能导致无法分钱哦！
</div>
<div class="popup-text2">注：微信暂不支持小程序实时更新步数</div>
<div class="popup-btn1 green-btn">邀请好友来参赛</div>
<img class="close-btn" src="../images/common/pop_ic_close.png">
</div>
</div> </div>
<div class="popup-text6">{{popupData.target_steps}}步达标，今天走了{{popupData.step_num}}步</div> <!-- 恭喜达标弹框 -->
<div class="popup-btn1 green-btn">炫耀一下</div> <div class="game-status-popup" v-if="popupData.window && popupData.daka_done">
<img class="close-btn" src="../images/common/pop_ic_close.png" @click="closePopup()"> <div class="game-status-container">
</div> <img class="status-icon" src="../images/HaveJoinedGame/pop_gxdb_title.png">
</div> <div class="status-date">第{{popupData.days}}日达标</div>
<!-- 你已被淘汰弹框 --> <div class="status-money">
<div class="game-status-popup" v-else-if="popupData.window && !popupData.daka_done"> <div class="popup-text3">返还契约金</div>
<div class="game-status-container"> <div class="popup-text4">
<img class="status-icon" src="../images/HaveJoinedGame/pop_out_title.png"> {{popupData.money}}
<div class="status-date">第{{popupData.days}}日未达标</div> <span>元</span>
<div class="status-money"> </div>
<div class="popup-text3">扣除契约金</div> <div class="popup-text5">第{{popupData.week}}期{{popupData.target_steps}}步3日耐力赛</div>
<div class="popup-text4"> </div>
{{popupData.money}} <div class="popup-text6">{{popupData.target_steps}}步达标，今天走了{{popupData.step_num}}步</div>
<span>元</span> <div class="popup-btn1 green-btn">炫耀一下</div>
</div> <img class="close-btn" src="../images/common/pop_ic_close.png" @click="closePopup()">
<div class="popup-text5">第{{popupData.week}}期{{popupData.target_steps}}步3日耐力赛</div> </div>
</div>
<!-- 你已被淘汰弹框 -->
<div class="game-status-popup" v-else-if="popupData.window && !popupData.daka_done">
<div class="game-status-container">
<img class="status-icon" src="../images/HaveJoinedGame/pop_out_title.png">
<div class="status-date">第{{popupData.days}}日未达标</div>
<div class="status-money">
<div class="popup-text3">扣除契约金</div>
<div class="popup-text4">
{{popupData.money}}
<span>元</span>
</div>
<div class="popup-text5">第{{popupData.week}}期{{popupData.target_steps}}步3日耐力赛</div>
</div>
<div class="popup-text6">{{popupData.target_steps}}步达标，今天走了{{popupData.step_num}}步</div>
<div class="popup-text7">已达标{{popupData.days}}天，契约金已返还至你的钱包</div>
<div class="popup-btn1 yellow-btn" @click="joinNextGame()">报名下一期</div>
<img class="close-btn" src="../images/common/pop_ic_close.png" @click="closePopup()">
</div>
</div> </div>
<div class="popup-text6">{{popupData.target_steps}}步达标，今天走了{{popupData.step_num}}步</div>
<div class="popup-text7">已达标{{popupData.days}}天，契约金已返还至你的钱包</div>
<div class="popup-btn1 yellow-btn" @click="joinNextGame()">报名下一期</div>
<img class="close-btn" src="../images/common/pop_ic_close.png" @click="closePopup()">
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import Title from "@/components/Title.vue"; import Title from "@/components/Title.vue"
import { daka_status_detail, pop_up_windows } from "@/components/axios/api"; import {daka_status_detail, pop_up_windows} from "@/components/axios/api"
import "swiper/dist/css/swiper.css"; import {swiper, swiperSlide} from "vue-awesome-swiper"
import { swiper, swiperSlide } from "vue-awesome-swiper"; import "swiper/dist/css/swiper.css"
export default { export default {
name: "HaveJoinedGame", name: "HaveJoinedGame",
components: { components: {
Title, Title,
swiper, swiper,
swiperSlide swiperSlide
}, },
data() { data() {
return { return {
swiperOption: { swiperOption: {
slidesPerView: "auto", slidesPerView: "auto",
centeredSlides: true, centeredSlides: true,
spaceBetween: 10 spaceBetween: 10,
}, notNextTick: true
showSwiper: false, },
bet_bonus: "0.00", showSwiper: false,
next_signup: false, bet_bonus: "0.00",
period_end: "", next_signup: false,
period_start: "", period_end: "",
total_signup: 0, period_start: "",
target_steps: 0, total_signup: 0,
record_list: [], target_steps: 0,
popupData: {} record_list: [],
}; popupData: {},
}, current_day: 0
created() { }
this.getPageData(); },
this.isPopup(); created() {
}, this.getPageData()
methods: { this.isPopup()
joinNextGame() { },
this.$router.push({ computed: {
name: "PartakeChallenge", swiper() {
query: { // setTimeout(()=>{
nextGame: true return this.$refs.mySwiper.swiper
} // },800)
}); }
}, },
closePopup() { mounted() {
this.popupData.window = false; setTimeout(() => {
}, this.swiper.slideTo(this.current_day, 1200, false)
goback() { }, 800)
history.go(-1); },
}, methods: {
goOtherPage(pageName) { joinNextGame() {
this.$router.push({ name: pageName }); this.$router.push({
}, name: "PartakeChallenge",
currentPage() { query: {
return this.$router.history.current.name; nextGame: true
}, }
getPageData() { })
let grade = 2; },
if (sessionStorage.getItem("bushuType")) { closePopup() {
grade = sessionStorage.getItem("bushuType"); this.popupData.window = false
} },
daka_status_detail(this.$route.query.week, grade).then(res => { goback() {
if (res.code === 0) { history.go(-1)
const pageData = res.data; },
if (pageData.record_list && pageData.record_list.length) { goOtherPage(pageName) {
pageData.record_list.forEach((item, index) => { this.$router.push({name: pageName})
if (item.status === 0) { },
item.format_tsp = this.countDown('interval'+index, parseInt((item.tsp * 1000 - Date.now()) / 1000), index); currentPage() {
} return this.$router.history.current.name
}); },
} getPageData() {
this.bet_bonus = pageData.bet_bonus; let grade = 1
this.next_signup = pageData.next_signup; if (sessionStorage.getItem("bushuType")) {
this.period_end = pageData.period_end; grade = sessionStorage.getItem("bushuType")
this.period_start = pageData.period_start; }
this.total_signup = pageData.total_signup; daka_status_detail(this.$route.query.week, this.$route.query.week ? grade : '').then(res => {
this.target_steps = pageData.target_steps; if (res.code === 0) {
this.record_list = pageData.record_list; const pageData = res.data
setTimeout(()=>{ if (pageData.record_list && pageData.record_list.length) {
this.showSwiper = true pageData.record_list.forEach((item, index) => {
},500) if (item.status === 0) {
} item.format_tsp = this.countDown('interval' + index, parseInt((item.tsp * 1000 - Date.now()) / 1000), index)
}); }
}, })
isPopup() { }
pop_up_windows().then(res => { this.bet_bonus = pageData.bet_bonus
if (res.code === 0) { this.next_signup = pageData.next_signup
this.popupData = res.data; this.period_end = pageData.period_end
} this.period_start = pageData.period_start
}); this.total_signup = pageData.total_signup
}, this.target_steps = pageData.target_steps
//倒计时 this.record_list = pageData.record_list
countDown(intervalName, times, index) { this.current_day = pageData.current_day - 1
clearInterval(this[intervalName]); this.showSwiper = true
this[intervalName] = null; }
this[intervalName] = setInterval(() => { })
let day = 0, },
hour = 0, isPopup() {
minute = 0, pop_up_windows().then(res => {
second = 0; if (res.code === 0) {
if (times > 0) { this.popupData = res.data
day = Math.floor(times / (60 * 60 * 24)); }
hour = Math.floor(times / (60 * 60)) - day * 24; })
minute = Math.floor(times / 60) - day * 24 * 60 - hour * 60; },
second = Math.floor(times) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60; //倒计时
countDown(intervalName, times, index) {
if (day < 1) day = ""; clearInterval(this[intervalName])
else day = day + "天"; this[intervalName] = null
if (hour <= 9) hour = "0" + hour; this[intervalName] = setInterval(() => {
if (minute <= 9) minute = "0" + minute; let day = 0,
if (second <= 9) second = "0" + second; hour = 0,
this.record_list[index].format_tsp = day + hour + "时" + minute + "分" + second + "秒"; minute = 0,
} else { second = 0
this.getPageData(); if (times > 0) {
clearInterval(this[intervalName]); day = Math.floor(times / (60 * 60 * 24))
hour = Math.floor(times / (60 * 60)) - day * 24
minute = Math.floor(times / 60) - day * 24 * 60 - hour * 60
second = Math.floor(times) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60
if (day < 1) day = ""
else day = day + "天"
if (hour <= 9) hour = "0" + hour
if (minute <= 9) minute = "0" + minute
if (second <= 9) second = "0" + second
this.record_list[index].format_tsp = day + hour + "时" + minute + "分" + second + "秒"
} else {
this.getPageData()
clearInterval(this[intervalName])
}
times--
// console.log('gagagag',intervalName, day + hour + "时" + minute + "分" + second + "秒")
// console.log('gagagag',times)
// console.log('gagagag',this.format_tsp)
}, 1000)
}
},
filters: {
moneyFormatter(val) {
if (val && !isNaN(val)) {
return Number(val).toFixed(2)
} else {
return "0.00"
}
}
} }
times--;
// console.log('gagagag',intervalName, day + hour + "时" + minute + "分" + second + "秒")
// console.log('gagagag',times)
// console.log('gagagag',this.format_tsp)
}, 1000);
}
},
filters: {
moneyFormatter(val) {
if (val && !isNaN(val)) {
return Number(val).toFixed(2);
} else {
return "0.00";
}
} }
}
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.swiper-container { .swiper-container {
/*margin-left: 0 !important;*/ /*margin-left: 0 !important;*/
}
.swiper-slide {
width: 5.1rem;
height: 2.68rem;
}
.swiper-slide img {
width: 5.1rem;
height: 2.68rem;
}
.have-joined-game-page {
// width: 100%;
min-height: 100vh;
background-color: rgb(70, 88, 149);
background-image: url(../images/SignUp/sy_beijing.png);
background-repeat: no-repeat;
background-size: 100%;
background-position: center top;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
position: relative;
padding-bottom: 34px;
.page-title {
width: 100%;
position: fixed;
left: 0;
top: 0;
}
.game-bonus-container {
width: 6.4rem;
padding: 0.3rem 0;
box-sizing: border-box;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0),
#1a285a,
rgba(255, 255, 255, 0)
);
margin-top: 2.38rem;
.bonus-title {
font-size: 0.3rem;
line-height: 1;
color: #fff;
text-align: center;
} }
.bonus-amount {
font-size: 0.64rem; .swiper-slide {
line-height: 0.8; width: 5.1rem;
color: #ffe253; height: 2.68rem;
text-align: center;
margin-top: 0.26rem;
}
}
.game-title {
font-size: 0.36rem;
line-height: 1;
color: #fff;
font-weight: bold;
margin-top: 0.4rem;
}
.game-time {
font-size: 0.24rem;
line-height: 1;
color: #d6dfff;
padding: 0.12rem 0.38rem;
border-radius: 0.48rem;
background: #556cb6;
margin-top: 0.14rem;
}
.target-people-container {
display: flex;
margin-top: 0.34rem;
.target-img {
width: 0.3rem;
height: 0.26rem;
}
.people-img {
width: 0.28rem;
height: 0.24rem;
margin-left: 0.5rem;
}
.target-people-text {
font-size: 0.26rem;
line-height: 1;
color: #fff;
margin-left: 0.08rem;
} }
}
.hr { .swiper-slide img {
width: 3rem; width: 5.1rem;
height: 0.01rem; height: 2.68rem;
background: #6f82c3;
margin-top: 0.5rem;
}
.game-scroll-container {
width: 100%;
height: 2.68rem;
margin-top: 0.4rem;
padding: 0 0.3rem;
box-sizing: border-box;
overflow-x: scroll;
white-space: nowrap;
&::-webkit-scrollbar {
display: none;
} }
.game-scroll-item {
width: 5.1rem; .have-joined-game-page {
height: 2.68rem; // width: 100%;
background-image: url(../images/HaveJoinedGame/img_card.png); min-height: 100vh;
background-repeat: no-repeat; background-color: rgb(70, 88, 149);
background-size: 100% 100%; background-image: url(../images/SignUp/sy_beijing.png);
padding-top: 0.24rem; background-repeat: no-repeat;
box-sizing: border-box; background-size: 100%;
margin-left: 0.2rem; background-position: center top;
display: inline-block;
vertical-align: top;
&:first-child {
margin-left: 0;
}
.item-title-status {
width: 100%;
padding: 0 0.24rem 0 0.3rem;
box-sizing: border-box;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: space-between; overflow: hidden;
.item-title { position: relative;
font-size: 0.3rem; padding-bottom: 50px;
line-height: 1;
color: #fff; .page-title {
width: 100%;
position: fixed;
left: 0;
top: 0;
} }
.item-status0 {
padding: 0 0.16rem; .game-bonus-container {
box-sizing: border-box; width: 6.4rem;
background: rgba(255, 255, 255, 0.4); padding: 0.3rem 0;
font-size: 0.26rem; box-sizing: border-box;
line-height: 0.42rem; background: linear-gradient(
color: #fff; 90deg,
rgba(255, 255, 255, 0),
#1a285a,
rgba(255, 255, 255, 0)
);
margin-top: 2.38rem;
.bonus-title {
font-size: 0.3rem;
line-height: 1;
color: #fff;
text-align: center;
}
.bonus-amount {
font-size: 0.64rem;
line-height: 0.8;
color: #ffe253;
text-align: center;
margin-top: 0.26rem;
}
} }
.item-status1 {
padding: 0 0.16rem; .game-title {
box-sizing: border-box; font-size: 0.36rem;
background: #fcf776; line-height: 1;
font-size: 0.26rem; color: #fff;
line-height: 0.42rem; font-weight: bold;
color: #703e0b; margin-top: 0.4rem;
} }
.item-status2 {
padding: 0 0.16rem; .game-time {
box-sizing: border-box; font-size: 0.24rem;
background: #a5a5a5; line-height: 1;
font-size: 0.26rem; color: #d6dfff;
line-height: 0.42rem; padding: 0.12rem 0.38rem;
color: #fff; border-radius: 0.48rem;
background: #556cb6;
margin-top: 0.14rem;
} }
}
.item-income { .target-people-container {
width: 100%; display: flex;
padding-left: 0.3rem; margin-top: 0.34rem;
box-sizing: border-box;
margin-top: 0.4rem; .target-img {
display: flex; width: 0.3rem;
align-items: flex-end; height: 0.26rem;
.item-amount { }
font-size: 0.48rem;
line-height: 0.8; .people-img {
color: #fcf776; width: 0.28rem;
height: 0.24rem;
margin-left: 0.5rem;
}
.target-people-text {
font-size: 0.26rem;
line-height: 1;
color: #fff;
margin-left: 0.08rem;
}
} }
.item-text {
font-size: 0.26rem; .hr {
line-height: 1; width: 3rem;
color: #dbf3ff; height: 0.01rem;
margin-left: 0.1rem; background: #6f82c3;
margin-top: 0.5rem;
} }
}
.item-progress-num { .game-scroll-container {
width: 100%; width: 100%;
padding: 0 0.3rem; height: 2.68rem;
box-sizing: border-box; margin-top: 0.4rem;
margin-top: 0.58rem; padding: 0 0.3rem;
display: flex; box-sizing: border-box;
align-items: center; overflow-x: scroll;
justify-content: space-between; white-space: nowrap;
.item-progress {
height: 0.06rem; &::-webkit-scrollbar {
background: #fff; display: none;
position: relative; }
&:after {
content: ""; .game-scroll-item {
width: 2.46rem; width: 5.1rem;
height: 0.06rem; height: 2.68rem;
background: rgba(255, 255, 255, 0.5); background-image: url(../images/HaveJoinedGame/img_card.png);
position: absolute; background-repeat: no-repeat;
} background-size: 100% 100%;
padding-top: 0.24rem;
box-sizing: border-box;
margin-left: 0.2rem;
display: inline-block;
vertical-align: top;
&:first-child {
margin-left: 0;
}
.item-title-status {
width: 100%;
padding: 0 0.24rem 0 0.3rem;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
.item-title {
font-size: 0.3rem;
line-height: 1;
color: #fff;
}
.item-status0 {
padding: 0 0.16rem;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.4);
font-size: 0.26rem;
line-height: 0.42rem;
color: #fff;
}
.item-status1 {
padding: 0 0.16rem;
box-sizing: border-box;
background: #fcf776;
font-size: 0.26rem;
line-height: 0.42rem;
color: #703e0b;
}
.item-status2 {
padding: 0 0.16rem;
box-sizing: border-box;
background: #a5a5a5;
font-size: 0.26rem;
line-height: 0.42rem;
color: #fff;
}
}
.item-income {
width: 100%;
padding-left: 0.3rem;
box-sizing: border-box;
margin-top: 0.4rem;
display: flex;
align-items: flex-end;
.item-amount {
font-size: 0.48rem;
line-height: 0.8;
color: #fcf776;
}
.item-text {
font-size: 0.26rem;
line-height: 1;
color: #dbf3ff;
margin-left: 0.1rem;
}
}
.item-progress-num {
width: 100%;
padding: 0 0.3rem;
box-sizing: border-box;
margin-top: 0.58rem;
display: flex;
align-items: center;
justify-content: space-between;
.item-progress {
height: 0.06rem;
background: #fff;
position: relative;
&:after {
content: "";
width: 2.46rem;
height: 0.06rem;
background: rgba(255, 255, 255, 0.5);
position: absolute;
}
}
.item-num {
font-size: 0.26rem;
line-height: 1;
color: #fff;
}
}
}
} }
.item-num {
font-size: 0.26rem; .func-btn {
line-height: 1; width: 5.6rem;
color: #fff; border-radius: 0.92rem;
background: #fabd21;
font-size: 0.4rem;
line-height: 0.92rem;
color: #fff;
font-weight: bold;
text-align: center;
margin-top: 1.2rem;
} }
}
} .next-func-btn {
} width: 5.6rem;
.func-btn { border-radius: 0.92rem;
width: 5.6rem; background: #0ebfdf;
border-radius: 0.92rem; font-size: 0.4rem;
background: #fabd21; line-height: 0.92rem;
font-size: 0.4rem; color: #fff;
line-height: 0.92rem; font-weight: bold;
color: #fff; text-align: center;
font-weight: bold; margin-top: 0.3rem;
text-align: center;
margin-top: 1.2rem;
}
.next-func-btn {
width: 5.6rem;
border-radius: 0.92rem;
background: #0ebfdf;
font-size: 0.4rem;
line-height: 0.92rem;
color: #fff;
font-weight: bold;
text-align: center;
margin-top: 0.3rem;
}
}
.game-status-popup {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 998;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
.game-status-container {
width: 6rem;
background: #fff;
border-radius: 0.08rem;
padding-bottom: 0.4rem;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
.status-icon {
width: 5.08rem;
height: 2.58rem;
margin-top: -1.29rem;
}
.join-success-banner {
width: 5.44rem;
height: 3.18rem;
margin-top: 0.3rem;
}
.status-date {
font-size: 0.36rem;
line-height: 1;
color: #333;
font-weight: bold;
text-align: center;
margin-top: 0.4rem;
}
.status-money {
width: 5.04rem;
height: 2.84rem;
background-image: url(../images/HaveJoinedGame/pop_gxdb_board.png);
background-size: 100%;
margin-top: 0.42rem;
.popup-text3 {
font-size: 0.3rem;
line-height: 1;
color: #463a2c;
text-align: center;
margin-top: 0.42rem;
}
.popup-text4 {
font-size: 1.2rem;
line-height: 0.8;
color: #fabd21;
text-align: center;
margin-top: 0.24rem;
span {
font-size: 0.3rem;
line-height: 1;
vertical-align: bottom;
} }
}
.popup-text5 {
font-size: 0.24rem;
line-height: 1;
color: #b3aea2;
text-align: center;
margin-top: 0.42rem;
}
}
.popup-text1 {
width: 5.34rem;
font-size: 0.26rem;
line-height: 0.42rem;
color: #333;
text-align: center;
margin-top: 0.16rem;
span {
color: #fabd21;
}
}
.popup-text2 {
font-size: 0.24rem;
line-height: 1;
color: #a5a5a5;
text-align: center;
margin-top: 0.32rem;
}
.popup-text6 {
font-size: 0.26rem;
line-height: 1;
color: #bfbfbf;
text-align: center;
margin: 0.4rem 0 0.34rem;
}
.popup-text7 {
font-size: 0.26rem;
line-height: 1;
color: #8e5b29;
text-align: center;
} }
.popup-btn1 {
width: 4.6rem; .game-status-popup {
height: 0.8rem; position: fixed;
border-radius: 0.8rem; left: 0;
font-size: 0.36rem; top: 0;
line-height: 0.8rem; right: 0;
color: #fff; bottom: 0;
font-weight: bold; z-index: 998;
text-align: center; background: rgba(0, 0, 0, 0.5);
margin-top: 0.4rem; display: flex;
} align-items: center;
.green-btn { justify-content: center;
background: #1fdbb1;
} .game-status-container {
.yellow-btn { width: 6rem;
background: #fabd21; background: #fff;
} border-radius: 0.08rem;
.close-btn { padding-bottom: 0.4rem;
width: 0.58rem; display: flex;
height: 0.58rem; flex-direction: column;
position: absolute; align-items: center;
bottom: -1.08rem; position: relative;
left: 50%;
transform: translateX(-50%); .status-icon {
width: 5.08rem;
height: 2.58rem;
margin-top: -1.29rem;
}
.join-success-banner {
width: 5.44rem;
height: 3.18rem;
margin-top: 0.3rem;
}
.status-date {
font-size: 0.36rem;
line-height: 1;
color: #333;
font-weight: bold;
text-align: center;
margin-top: 0.4rem;
}
.status-money {
width: 5.04rem;
height: 2.84rem;
background-image: url(../images/HaveJoinedGame/pop_gxdb_board.png);
background-size: 100%;
margin-top: 0.42rem;
.popup-text3 {
font-size: 0.3rem;
line-height: 1;
color: #463a2c;
text-align: center;
margin-top: 0.42rem;
}
.popup-text4 {
font-size: 1.2rem;
line-height: 0.8;
color: #fabd21;
text-align: center;
margin-top: 0.24rem;
span {
font-size: 0.3rem;
line-height: 1;
vertical-align: bottom;
}
}
.popup-text5 {
font-size: 0.24rem;
line-height: 1;
color: #b3aea2;
text-align: center;
margin-top: 0.42rem;
}
}
.popup-text1 {
width: 5.34rem;
font-size: 0.26rem;
line-height: 0.42rem;
color: #333;
text-align: center;
margin-top: 0.16rem;
span {
color: #fabd21;
}
}
.popup-text2 {
font-size: 0.24rem;
line-height: 1;
color: #a5a5a5;
text-align: center;
margin-top: 0.32rem;
}
.popup-text6 {
font-size: 0.26rem;
line-height: 1;
color: #bfbfbf;
text-align: center;
margin: 0.4rem 0 0.34rem;
}
.popup-text7 {
font-size: 0.26rem;
line-height: 1;
color: #8e5b29;
text-align: center;
}
.popup-btn1 {
width: 4.6rem;
height: 0.8rem;
border-radius: 0.8rem;
font-size: 0.36rem;
line-height: 0.8rem;
color: #fff;
font-weight: bold;
text-align: center;
margin-top: 0.4rem;
}
.green-btn {
background: #1fdbb1;
}
.yellow-btn {
background: #fabd21;
}
.close-btn {
width: 0.58rem;
height: 0.58rem;
position: absolute;
bottom: -1.08rem;
left: 50%;
transform: translateX(-50%);
}
}
} }
}
}
</style> </style>
src/views/PartakeChallenge.vue
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
</div> </div>
<div class="text2" @click="goOtherPage('Rule')">《步数打卡的挑战规则协议》</div> <div class="text2" @click="goOtherPage('Rule')">《步数打卡的挑战规则协议》</div>
</div> </div>
<div class="partake-btn">立即报名</div> <div class="partake-btn" @click="payToSign()">立即报名</div>
</div> </div>
</div> </div>
<div class="footer-container" v-if="currentPage()==='PartakeChallenge'"> <div class="footer-container" v-if="currentPage()==='PartakeChallenge'">
...@@ -199,10 +199,13 @@ ...@@ -199,10 +199,13 @@
} }
console.log(grade) console.log(grade)
daka_info(grade).then(res=>{ daka_info(grade).then(res=>{
console.log('立即参与',res) console.log('daka_info',res)
console.log(typeof res.data.daka_info) if(res.code == 0){
this.daka_info = res.data.daka_info console.log('立即参与',res)
this.daka_faq = res.data.daka_faq console.log(typeof res.data.daka_info)
this.daka_info = res.data.daka_info
this.daka_faq = res.data.daka_faq
}
}) })
} }
}, },
......
src/views/SignUp.vue
<template> <template>
<div class="sign-up-page"> <div class="sign-up-page">
<!-- 顶部步数级别选择 --> <!-- 顶部步数级别选择 -->
<div class="top-nav-level"> <div class="top-nav-level">
<div :class="['level-item', choosedLevel===1?'active':'']" @click="chooseGameLevel(1)">3000步赛</div> <div :class="['level-item', choosedLevel===1?'active':'']" @click="chooseGameLevel(1)">3000步赛</div>
<div :class="['level-item', choosedLevel===2?'active':'']" @click="chooseGameLevel(2)">5000步赛</div> <div :class="['level-item', choosedLevel===2?'active':'']" @click="chooseGameLevel(2)">5000步赛</div>
<div :class="['level-item', choosedLevel===3?'active':'']" @click="chooseGameLevel(3)">8000步赛</div> <div :class="['level-item', choosedLevel===3?'active':'']" @click="chooseGameLevel(3)">8000步赛</div>
</div>
<!-- 左上角查看步数按钮 -->
<!-- <img class="view-steps-btn" src="../images/SignUp/sy_bushu.png"> -->
<!-- 信息广播 -->
<NoticeBonus class="notice-broadcast"></NoticeBonus>
<!-- 挑战赛卡片 -->
<div class="challenge-card" v-for="item in gameList">
<img class="corner-marker" src="../images/SignUp/home_tag_bsz.png" v-if="item.status===0">
<img class="corner-marker" src="../images/SignUp/home_tag_zmz.png" v-if="item.status===1">
<img class="corner-marker" src="../images/SignUp/home_tag_yjs.png" v-if="item.status===2">
<div class="card-title">{{item.target_step}}步3天耐力赛 第{{item.action}}期</div>
<div class="card-time">{{item.already_join===1?'已参赛':'未参赛'}} {{item.period_start}} - {{item.period_end}}</div>
<div class="card-info">
<div class="info-item" v-if="item.status===0||item.status===2">
<div class="item-title">达标人数</div>
<div class="item-content">{{item.people_cnt || 0}}</div>
</div>
<div class="info-item">
<div class="item-title">参与人数</div>
<div class="item-content">{{item.total_signup || 0}}</div>
</div> </div>
<div class="info-item"> <!-- 左上角查看步数按钮 -->
<div class="item-title">总奖励金</div> <!-- <img class="view-steps-btn" src="../images/SignUp/sy_bushu.png"> -->
<div class="item-money">{{item.total_money || '0.00'}}</div> <!-- 信息广播 -->
<NoticeBonus class="notice-broadcast"></NoticeBonus>
<!-- 挑战赛卡片 -->
<div class="challenge-card" v-for="item in gameList">
<img class="corner-marker" src="../images/SignUp/home_tag_bsz.png" v-if="item.status===0">
<img class="corner-marker" src="../images/SignUp/home_tag_zmz.png" v-if="item.status===1">
<img class="corner-marker" src="../images/SignUp/home_tag_yjs.png" v-if="item.status===2">
<div class="card-title">{{item.action}}期 - {{item.target_step}}步3天耐力赛</div>
<div class="card-time">{{item.already_join===1?'已参赛':'未参赛'}} {{item.period_start}} - {{item.period_end}}
</div>
<div class="card-info">
<div class="info-item" v-if="item.status===0||item.status===2">
<div class="item-title">达标人数</div>
<div class="item-content">{{item.people_cnt || 0}}</div>
</div>
<div class="info-item">
<div class="item-title">参与人数</div>
<div class="item-content">{{item.total_signup || 0}}</div>
</div>
<div class="info-item">
<div class="item-title">总奖励金</div>
<div class="item-money">{{item.total_money || '0.00'}}</div>
</div>
</div>
<!-- 0 比赛中 1 未开始 2 已结束-->
<div class="card-btn" v-if="item.status===1&&item.already_join===0" data-item="item"
@click="goOtherPage('PartakeChallenge')">
<div class="btn-title">参与挑战</div>
</div>
<div class="card-btn" v-if="item.status===1&&item.already_join===1" data-item="item"
@click="goWhereDetail(item)">已报名
</div>
<div class="statusnormal" v-if="item.status===2 || item.status===0 || item.status===3"
@click="goWhereDetail(item)">{{(item.status===2 || item.status===0)
? (item.status===0&&item.already_join===1) ? '立即打卡': '查看详情' : '已淘汰'}}
<img src="../images/SignUp/detail_bg.png" alt="">
</div>
</div> </div>
</div>
<div class="card-btn" v-if="item.status===1&&item.already_join===0" data-item="item"
@click="goOtherPage('PartakeChallenge')">
<div class="btn-title">参与挑战</div>
<!--<div class="card-btn-tip">（每日目标{{item.target_step}}步）</div>-->
</div>
<div class="card-btn" :style="item.status!==1?'background:#32A1F6;':''"
v-if="item.status===1&&item.already_join===1"
@click="goWhereDetail(item)">已报名</div>
<div class="card-btn statusnormal" v-if="item.status===2 || item.status===3 || item.status===0"
@click="goWhereDetail(item)">{{(item.status===2 || item.status===0)
?'查看详情': '已淘汰'}}</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import NoticeBonus from "@/components/NoticeBonus.vue"; import NoticeBonus from "@/components/NoticeBonus.vue"
import Free from "@/components/Free.vue"; import Free from "@/components/Free.vue"
import Modal from "@/components/Modal.vue"; import Modal from "@/components/Modal.vue"
import PayFailModal from "@/components/PayFailModal.vue"; import PayFailModal from "@/components/PayFailModal.vue"
import { dakaPay, track, userCards, daka_index } from "@/components/axios/api"; import {dakaPay, track, userCards, daka_index} from "@/components/axios/api"
export default { export default {
name: "SignUp", name: "SignUp",
components: { components: {
NoticeBonus, NoticeBonus,
Modal, Modal,
Free, Free,
PayFailModal PayFailModal
}, },
data() { data() {
return { return {
contract_data: {}, contract_data: {},
showFreeModal: false, showFreeModal: false,
modalTitle: "", modalTitle: "",
modalDesc: "", modalDesc: "",
modalShown: false, modalShown: false,
current_date: {}, current_date: {},
isShowPayFail: false, isShowPayFail: false,
isFollow: false, isFollow: false,
gameList: [], gameList: [],
choosedLevel: 1 choosedLevel: 2
};
},
created() {
this.getPageData();
},
mounted() {
//获取步数tab缓存
let LastLevel = Number(sessionStorage.getItem("bushuType"));
if (LastLevel) {
this.choosedLevel = LastLevel;
}else{
sessionStorage.setItem("bushuType", this.choosedLevel);
}
},
methods: {
chooseGameLevel(level) {
sessionStorage.setItem("bushuType", level);
this.choosedLevel = level;
this.getPageData(level);
},
goOtherPage(pageName) {
console.log('pageName',pageName)
this.$router.push({ name: pageName });
},
goWhereDetail(item) {
if (item.status===1&&item.already_join===1) { // 已报名
this.$router.push({
name: 'HaveJoinedGame',
query: {
week: item.week
} }
}); },
} else { // 比赛中或者已结束 created() {
if (item.already_join===1) { // 已报名 let grade = Number(sessionStorage.getItem("bushuType"))
this.$router.push({ if(grade){
name: 'HaveJoinedGame', // console.log('grade',grade)
query: { this.getPageData(grade)
week: item.week }else{
} // console.log('grade 0',grade)
}); this.getPageData()
} else { // 未报名 }
sessionStorage.setItem('ChallengeDetailData', JSON.stringify(item)); },
this.$router.push({name: 'ChallengeDetail'}); mounted() {
} //获取步数tab缓存
} let LastLevel = Number(sessionStorage.getItem("bushuType"))
}, if (LastLevel) {
getPageData(grade = 1) { this.choosedLevel = LastLevel
daka_index(grade).then(res => {
if (res.code === 0) {
res.data.forEach(item => {
item.action = item.week.substring(item.week.length - 4)
})
this.gameList = res.data;
console.log('gameList',this.gameList);
}
});
},
togglePayFail() {
this.isShowPayFail = !this.isShowPayFail;
},
showSuccess() {
this.showModal("温馨提示", "报名成功", {
scb: () => {
if (this.isFollow == 1) {
this.$router.push({ name: "Read" });
} else { } else {
this.$router.push({ name: "Success" }); sessionStorage.setItem("bushuType", this.choosedLevel)
} }
} },
}); methods: {
}, chooseGameLevel(level) {
confirmModal(scb) { sessionStorage.setItem("bushuType", level)
scb && scb(); this.choosedLevel = level
this.modalShown = false; this.getPageData(level)
}, },
showFree(e) { goOtherPage(pageName) {
e.stopPropagation(); console.log('pageName', pageName)
track("free_contract_show"); this.$router.push({name: pageName})
if (localStorage.getItem("first_show_free") == 1) { },
localStorage.setItem("first_show_free", 2); goWhereDetail(item) {
this.canShowFree = false; if (item.status === 1 && item.already_join === 1) { // 已报名
} else { this.$router.push({
this.canCheckShowFree = false; name: 'HaveJoinedGame',
this.canShowFree = false; query: {
} week: item.week
userCards().then(res => { }
console.log("获取免契约金数据", res); })
let data = { } else { // 比赛中或者已结束
card: res.data.contract_card, if (item.already_join === 1) { // 已报名
cnt: res.data.contract_cnt this.$router.push({
}; name: 'HaveJoinedGame',
this.current_date = new Date(res.date); query: {
// if ( week: item.week
// // 如果明天没报名，而且还有免契约金卡，则可以使用 }
// !this.date_status[1].user_status.daka_signup && })
// res.data.contract_card > 0 } else { // 未报名
// ) { sessionStorage.setItem('ChallengeDetailData', JSON.stringify(item))
// data.can_get = true; this.$router.push({name: 'ChallengeDetail'})
// // 其他情况，显示报名下期比赛
// } else {
// data.can_get = false;
// }
this.contract_data = JSON.parse(JSON.stringify(data));
this.showFreeModal = true;
});
},
closeFree() {
this.showFreeModal = false;
},
showModal(title, desc, option) {
this.modalTitle = title || "";
this.modalDesc = desc || "";
this.modalOption = option || {};
this.modalShown = true;
},
closeModal() {
this.modalShown = false;
},
payToSign() {
dakaPay().then(response => {
this.current_date = new Date(response.date);
if (response.code == 1) {
this.showModal("温馨提示", response.msg);
return;
}
let result = response.data;
console.log("请求打卡支付数据", result);
if (result) {
WeixinJSBridge.invoke(
"getBrandWCPayRequest",
{
appId: result.appId, //公众号名称，由商户传入
timeStamp: `${result.timeStamp}`, //时间戳，自1970年以来的秒数
nonceStr: result.nonceStr, //随机串
package: result.package,
signType: result.signType, //微信签名方式：
paySign: result.paySign //微信签名
},
// result,
res => {
console.log("支付调用结果", res);
if (res.err_msg == "get_brand_wcpay_request:ok") {
// 使用以上方式判断前端返回,微信团队郑重提示：
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
// 支付成功后的回调函数
console.log("支付成功");
this.showModal("温馨提示", "报名成功", {
scb: () => {
if (this.isFollow == 1) {
this.$router.push({ name: "Read" });
} else {
this.$router.push({ name: "Success" });
}
} }
});
// this.dateSelect(2);
// localStorage.setItem("is_every", 0)
// location.replace("#/Success");
} }
if (res.err_msg == "get_brand_wcpay_request:fail") { },
// this.showModal("温馨提示", "支付服务繁忙，请稍后重试"); getPageData(grade = 1) {
this.togglePayFail(); daka_index(grade).then(res => {
} if (res.code === 0) {
if (res.err_msg == "get_brand_wcpay_request:cancel") { res.data.forEach(item => {
// console.log("支付取消"); item.action = item.week.substring(item.week.length - 4)
this.togglePayFail(); })
this.gameList = res.data
console.log('gameList', this.gameList)
}
})
},
togglePayFail() {
this.isShowPayFail = !this.isShowPayFail
},
showSuccess() {
this.showModal("温馨提示", "报名成功", {
scb: () => {
if (this.isFollow == 1) {
this.$router.push({name: "Read"})
} else {
this.$router.push({name: "Success"})
}
}
})
},
confirmModal(scb) {
scb && scb()
this.modalShown = false
},
showFree(e) {
e.stopPropagation()
track("free_contract_show")
if (localStorage.getItem("first_show_free") == 1) {
localStorage.setItem("first_show_free", 2)
this.canShowFree = false
} else {
this.canCheckShowFree = false
this.canShowFree = false
} }
} userCards().then(res => {
); console.log("获取免契约金数据", res)
} let data = {
}); card: res.data.contract_card,
cnt: res.data.contract_cnt
}
this.current_date = new Date(res.date)
// if (
// // 如果明天没报名，而且还有免契约金卡，则可以使用
// !this.date_status[1].user_status.daka_signup &&
// res.data.contract_card > 0
// ) {
// data.can_get = true;
// // 其他情况，显示报名下期比赛
// } else {
// data.can_get = false;
// }
this.contract_data = JSON.parse(JSON.stringify(data))
this.showFreeModal = true
})
},
closeFree() {
this.showFreeModal = false
},
showModal(title, desc, option) {
this.modalTitle = title || ""
this.modalDesc = desc || ""
this.modalOption = option || {}
this.modalShown = true
},
closeModal() {
this.modalShown = false
},
payToSign() {
dakaPay().then(response => {
this.current_date = new Date(response.date)
if (response.code == 1) {
this.showModal("温馨提示", response.msg)
return
}
let result = response.data
console.log("请求打卡支付数据", result)
if (result) {
WeixinJSBridge.invoke(
"getBrandWCPayRequest",
{
appId: result.appId, //公众号名称，由商户传入
timeStamp: `${result.timeStamp}`, //时间戳，自1970年以来的秒数
nonceStr: result.nonceStr, //随机串
package: result.package,
signType: result.signType, //微信签名方式：
paySign: result.paySign //微信签名
},
// result,
res => {
console.log("支付调用结果", res)
if (res.err_msg == "get_brand_wcpay_request:ok") {
// 使用以上方式判断前端返回,微信团队郑重提示：
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
// 支付成功后的回调函数
console.log("支付成功")
this.showModal("温馨提示", "报名成功", {
scb: () => {
if (this.isFollow == 1) {
this.$router.push({name: "Read"})
} else {
this.$router.push({name: "Success"})
}
}
})
// this.dateSelect(2);
// localStorage.setItem("is_every", 0)
// location.replace("#/Success");
}
if (res.err_msg == "get_brand_wcpay_request:fail") {
// this.showModal("温馨提示", "支付服务繁忙，请稍后重试");
this.togglePayFail()
}
if (res.err_msg == "get_brand_wcpay_request:cancel") {
// console.log("支付取消");
this.togglePayFail()
}
}
)
}
})
}
}
} }
}
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.sign-up-page { .sign-up-page {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow-y: scroll; overflow-y: scroll;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
background-color: rgb(70, 88, 149); background-color: rgb(70, 88, 149);
background-image: url(../images/SignUp/sy_beijing.png); background-image: url(../images/SignUp/sy_beijing.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100%; background-size: 100%;
background-attachment: scroll; background-attachment: scroll;
position: relative; position: relative;
display: flex;
flex-direction: column;
align-items: center;
.top-nav-level {
flex-shrink: 0;
margin-top: 0.3rem;
border: 0.02rem solid #fff;
border-radius: 0.1rem;
overflow: hidden;
background: #fff;
box-sizing: border-box;
display: flex;
.level-item {
width: 1.76rem;
font-size: 0.3rem;
line-height: 0.54rem;
color: #465895;
text-align: center;
position: relative;
&:after {
content: "";
height: 0.26rem;
width: 0.02rem;
background: #465895;
position: absolute;
left: -0.02rem;
top: 50%;
transform: translateY(-50%);
}
&:first-child:after {
display: none;
}
&.active {
background: #465895;
color: #fff;
border-radius: 0.1rem;
font-weight: bold;
}
&.active:after {
display: none;
}
}
}
.view-steps-btn {
flex-shrink: 0;
width: 1.11rem;
height: 0.84rem;
display: block;
position: absolute;
left: 0;
top: 1.22rem;
}
.notice-broadcast {
flex-shrink: 0;
margin: 3.68rem 0 0.18rem;
}
.challenge-card {
flex-shrink: 0;
width: 6.9rem;
height: 4.4rem;
background-image: url(../images/SignUp/sy_dikuang.png);
background-size: 100% 100%;
margin-bottom: 0.4rem;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
.corner-marker {
width: 1.39rem;
height: 1.39rem;
position: absolute;
top: -0.02rem;
right: -0.02rem;
}
.card-title {
font-size: 0.34rem;
line-height: 1;
color: #fff;
margin-top: 0.28rem;
}
.card-time {
background: rgba(0,0,0,0.1);
padding:0 0.24rem;
border-radius: .24rem;
height: .46rem;
font-size: 0.26rem;
line-height: .46rem;
color: #fff;
margin-top: 0.16rem;
}
.card-info {
width: 100%;
margin-top: 0.7rem;
display: flex;
align-items: center;
justify-content: space-between;
.info-item {
flex: 1;
border-left: 0.02rem solid #fff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
&:first-child {
border-left: none; .top-nav-level {
flex-shrink: 0;
margin-top: 0.3rem;
border: 0.02rem solid #fff;
border-radius: 0.1rem;
overflow: hidden;
background: #fff;
box-sizing: border-box;
display: flex;
.level-item {
width: 1.76rem;
font-size: 0.3rem;
line-height: 0.54rem;
color: #465895;
text-align: center;
position: relative;
&:after {
content: "";
height: 0.26rem;
width: 0.02rem;
background: #465895;
position: absolute;
left: -0.02rem;
top: 50%;
transform: translateY(-50%);
}
&:first-child:after {
display: none;
}
&.active {
background: #465895;
color: #fff;
border-radius: 0.1rem;
font-weight: bold;
}
&.active:after {
display: none;
}
}
} }
.item-title {
font-size: 0.28rem; .view-steps-btn {
line-height: 0.8; flex-shrink: 0;
color: #fff; width: 1.11rem;
height: 0.84rem;
display: block;
position: absolute;
left: 0;
top: 1.22rem;
} }
.item-content {
font-size: 0.48rem; .notice-broadcast {
line-height: 0.8; flex-shrink: 0;
color: #fff; margin: 3.68rem 0 0.18rem;
margin-top: 0.12rem;
} }
.item-money {
font-size: 0.48rem; .challenge-card {
line-height: 0.8; flex-shrink: 0;
color: #fcf776; width: 6.9rem;
margin-top: 0.12rem; height: 4.4rem;
background-image: url(../images/SignUp/sy_dikuang.png);
background-size: 100% 100%;
margin-bottom: 0.4rem;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
.corner-marker {
width: 1.39rem;
height: 1.39rem;
position: absolute;
top: -0.02rem;
right: -0.02rem;
}
.card-title {
font-size: 0.34rem;
line-height: 1;
color: #fff;
margin-top: 0.28rem;
}
.card-time {
background: rgba(0, 0, 0, 0.1);
padding: 0 0.24rem;
border-radius: .24rem;
height: .46rem;
display: flex;
align-items: center;
font-size: 0.26rem;
font-family: Helvetica;
color: #fff;
margin-top: 0.16rem;
}
.card-info {
width: 100%;
margin-top: 0.7rem;
display: flex;
align-items: center;
justify-content: space-between;
.info-item {
flex: 1;
border-left: 0.02rem solid #fff;
display: flex;
flex-direction: column;
align-items: center;
&:first-child {
border-left: none;
}
.item-title {
font-size: 0.28rem;
line-height: 0.8;
color: #fff;
}
.item-content {
font-size: 0.48rem;
line-height: 0.8;
color: #fff;
margin-top: 0.12rem;
}
.item-money {
font-size: 0.48rem;
line-height: 0.8;
color: #fcf776;
margin-top: 0.12rem;
}
}
}
.statusnormal {
position:absolute;
bottom: 0.38rem;
display: flex;
justify-content: center;
align-content: center;
color: #fff;
font-size: 0.34rem;
font-weight: 600;
img {
display: flex;
margin-left: 4px;
width: 15px;
height: 15px;
}
}
.card-btn {
width: 4rem;
height: 0.88rem;
background: #fabd21;
border-radius: 0.74rem;
box-shadow: 0 0.02rem 0.04rem 0 rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 0.3rem;
font-weight: bold;
letter-spacing: 0.01rem;
line-height: 1;
color: #fff;
position: absolute;
bottom: 0.38rem;
left: 50%;
transform: translateX(-50%);
.card-btn-tip {
font-size: 0.22rem;
margin-top: 0.06rem;
font-weight: normal;
}
.btn-title {
font-size: .34rem;
font-weight: bold;
}
}
} }
}
}
.statusnormal{
background: transparent !important;
box-shadow: 0 0 0 0 !important;
background: url("../images/SignUp/detail_bg.png") no-repeat !important;
background-position: 130px !important;
background-size: 14px 14px !important;
}
.card-btn {
width: 4rem;
height: 0.88rem;
background: #fabd21;
border-radius: 0.74rem;
box-shadow: 0 0.02rem 0.04rem 0 rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 0.3rem;
font-weight: bold;
letter-spacing: 0.01rem;
line-height: 1;
color: #fff;
position: absolute;
bottom: 0.38rem;
left: 50%;
transform: translateX(-50%);
.card-btn-tip {
font-size: 0.22rem;
margin-top: 0.06rem;
font-weight: normal;
}
.btn-title{
font-size: .34rem;
font-weight: bold;
}
} }
}
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment