Skip to content

W
walk_daka_h5
Commit 8d780488 by 穆启卓
Options

Merge remote-tracking branch 'remotes/origin/dev_yijun' into mutou

parents 9680b380 d826183e
Showing with 841 additions and 682 deletions
src/components/axios/api.js
...@@ -235,7 +235,7 @@ export function track(key) { ...@@ -235,7 +235,7 @@ export function track(key) {
method: 'GET', method: 'GET',
params: { params: {
//传过去的参数 //传过去的参数
p: `study`, p: `bsdk`,
k: `${key}`, k: `${key}`,
u: window['userData'] ? window['userData'].id : '' u: window['userData'] ? window['userData'].id : ''
} }
......
src/components/axios/fetch.js
...@@ -30,16 +30,16 @@ export function fetch(options) { ...@@ -30,16 +30,16 @@ 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));
localStorage.setItem('walk_userData', ''); // localStorage.setItem('walk_userData', '');
location.replace('#/Author'); // location.replace('#/Author');
// this.$router.push({name:"Author"}) // // this.$router.push({name:"Author"})
} else { // } else {
reject(error); // reject(error);
} // }
}); });
}); });
......
src/views/ChallengeDetail.vue
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<div class="bonus-title" v-else>达标奖励金（元）</div> <div class="bonus-title" v-else>达标奖励金（元）</div>
<div class="bonus-amount">{{pageData.bet_bonus}}</div> <div class="bonus-amount">{{pageData.bet_bonus}}</div>
</div> </div>
<div class="game-title">{{pageData.target_step}}步三日耐力赛</div> <div class="game-title">{{pageData.target_step}}步3日耐力赛</div>
<div class="game-time">开赛时间：{{pageData.start_format}} — {{pageData.end_format}}</div> <div class="game-time">开赛时间：{{pageData.start_format}} — {{pageData.end_format}}</div>
<div class="hr"></div> <div class="hr"></div>
<div class="game-info-container"> <div class="game-info-container">
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
if (window["userData"]) { if (window["userData"]) {
this.userData = window["userData"] this.userData = window["userData"]
} else { } else {
let localUserData = localStorage.getItem("bs_userData") let localUserData = localStorage.getItem("walk_userData")
if (localUserData) { if (localUserData) {
window["userData"] = JSON.parse(localUserData) window["userData"] = JSON.parse(localUserData)
this.userData = window["userData"] this.userData = window["userData"]
...@@ -135,9 +135,11 @@ ...@@ -135,9 +135,11 @@
imgUrl: result.img_url, // 分享图标 imgUrl: result.img_url, // 分享图标
success: function (res) { success: function (res) {
console.log("option4Success", res) console.log("option4Success", res)
this.showShareModal = false
}, },
fail: err => { fail: err => {
console.log("option4error", err) console.log("option4error", err)
this.showShareModal = false
} }
} }
// wx.onMenuShareTimeline(option4); // wx.onMenuShareTimeline(option4);
......
src/views/GoXCX.vue
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
</div> </div>
</div> </div>
<div class="tip-title">如何完成打卡？</div> <div class="tip-title">如何完成打卡？</div>
<div class="tip-content">1、识别上方二维码，打开「运动打卡」小程序</div> <div class="tip-content">1、识别上方二维码，打开「步步运动赚」小程序</div>
<div class="tip-content">2、在小程序中授权获取每日微信运动步数</div> <div class="tip-content">2、在小程序中授权获取每日微信运动步数</div>
<div class="tip-content">3、退出小程序中，返回打卡页面</div> <div class="tip-content">3、退出小程序中，返回打卡页面</div>
<div class="tip-content">4、成功获取每日微信运动步数，打卡成功</div> <div class="tip-content">4、成功获取每日微信运动步数，打卡成功</div>
......
src/views/HaveJoinedGame.vue
...@@ -6,6 +6,10 @@ ...@@ -6,6 +6,10 @@
show_back="true" show_back="true"
v-if="currentPage()==='HaveJoinedGame'" v-if="currentPage()==='HaveJoinedGame'"
></Title> ></Title>
<div class="game-rule-container" @click="goOtherPage('Rule')">
<img src="../images/ChallengeDetail/ic_que.png">
活动规则
</div>
<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>
...@@ -25,8 +29,7 @@ ...@@ -25,8 +29,7 @@
<div class="game-scroll-item"> <div class="game-scroll-item">
<div class="item-title-status"> <div class="item-title-status">
<div class="item-title">第{{item.days}}天</div> <div class="item-title">第{{item.days}}天</div>
<div <div :class="item.status===0?'item-status0':item.status===1?'item-status1':item.status===2?'item-status2':'item-status2'"
: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?'已结束':'已淘汰'}} >{{item.status===0?'未开始':item.status===1?'比赛中':item.status===2?'已结束':'已淘汰'}}
</div> </div>
</div> </div>
...@@ -37,12 +40,22 @@ ...@@ -37,12 +40,22 @@
<div class="item-progress-num"> <div class="item-progress-num">
<div class="item-num" v-if="item.status===0">还有{{item.format_tsp || '0秒'}}开始</div> <div class="item-num" v-if="item.status===0">还有{{item.format_tsp || '0秒'}}开始</div>
<template v-else> <template v-else>
<div class="item-progress" :style="'width: '+item.rate/100*2.46+'rem;'"></div> <div class="item-progress" :style="'width: '+item.rate/100*2.46+'rem;'" v-if="index ==0 || (index > 0 && record_list[index-1].status != 3)"></div>
<div class="item-num">{{item.step_num}}/{{target_steps}}步</div> <div class="item-num">
<!-- //已淘汰 1-->
<!-- 0: 未开始 1:比赛中 2:已结束 3:已淘汰-->
<span v-if="item.is_complete == 2">未达标({{item.step_num}}步)</span>
<span v-else-if="item.status == 3 && item.is_complete != 2">已失去比赛资格</span>
<span v-else-if="item.is_complete == 1 && item.status == 2">已达标({{item.step_num}}步)</span>
<span v-else-if="item.status == 1 && item.is_complete == 1">今天达标了</span>
<!-- 今天进行中-->
<span v-else-if="item.is_complete == 0 && item.status == 1"> ({{item.step_num}}/{{target_steps}}步)</span>
</div>
</template> </template>
</div> </div>
</div> </div>
</swiper-slide> </swiper-slide>
<div class="swiper-pagination" slot="pagination" style="opacity: 0"></div>
</swiper> </swiper>
<!-- </div>--> <!-- </div>-->
<div class="func-btn" @click="goOtherPage('GoXCX')">提交今日步数</div> <div class="func-btn" @click="goOtherPage('GoXCX')">提交今日步数</div>
...@@ -54,10 +67,10 @@ ...@@ -54,10 +67,10 @@
<img class="status-icon" src="../images/HaveJoinedGame/pop_bmcg_title.png"> <img class="status-icon" src="../images/HaveJoinedGame/pop_bmcg_title.png">
<img class="join-success-banner" src="../images/HaveJoinedGame/pop_bmcg_img.png"> <img class="join-success-banner" src="../images/HaveJoinedGame/pop_bmcg_img.png">
<div class="popup-text1"> <div class="popup-text1">
<span>每日24点前</span>打开「步步运动赚」小程序，手动提交今日步数，否则可能导致无法分钱哦！ <span>每日24点前</span>打开「步步运动赚」小程序，手动提交今日步数，否则可能导致无法分钱哦！
</div> </div>
<div class="popup-text2">注：微信暂不支持小程序实时更新步数</div> <div class="popup-text2">注：微信暂不支持小程序实时更新步数</div>
<div class="popup-btn1 green-btn">邀请好友来参赛</div> <div class="popup-btn1 green-btn" @click="inviteFriend">邀请好友来参赛</div>
<img class="close-btn" src="../images/common/pop_ic_close.png" @click="closePayPopup()"> <img class="close-btn" src="../images/common/pop_ic_close.png" @click="closePayPopup()">
</div> </div>
</div> </div>
...@@ -78,7 +91,7 @@ ...@@ -78,7 +91,7 @@
</div> </div>
<div class="popup-text6">{{popupData.target_steps}}步达标，今天走了{{popupData.step_num}}步</div> <div class="popup-text6">{{popupData.target_steps}}步达标，今天走了{{popupData.step_num}}步</div>
<div class="popup-text7">契约金已返还至你的钱包</div> <div class="popup-text7">契约金已返还至你的钱包</div>
<div class="popup-btn1 green-btn">邀请好友来打卡</div> <div class="popup-btn1 green-btn" @click="inviteFriend">邀请好友来打卡</div>
<img class="close-btn" src="../images/common/pop_ic_close.png" @click="closePopup()"> <img class="close-btn" src="../images/common/pop_ic_close.png" @click="closePopup()">
</div> </div>
</div> </div>
...@@ -101,587 +114,709 @@ ...@@ -101,587 +114,709 @@
<img class="close-btn" src="../images/common/pop_ic_close.png" @click="closePopup()"> <img class="close-btn" src="../images/common/pop_ic_close.png" @click="closePopup()">
</div> </div>
</div> </div>
<ShareModal
v-on:close="closeShareModal"
v-if="showShareModal"
></ShareModal>
</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, shareContent, track} from "@/components/axios/api"
import { swiper, swiperSlide } from "vue-awesome-swiper"; import ShareModal from "@/components/ShareModal.vue"
import "swiper/dist/css/swiper.css"; import {swiper, swiperSlide} from "vue-awesome-swiper"
import "swiper/dist/css/swiper.css"
export default {
name: "HaveJoinedGame", export default {
components: { name: "HaveJoinedGame",
Title, components: {
swiper, Title,
swiperSlide swiper,
}, swiperSlide,
data() { ShareModal
return { },
swiperOption: { data() {
slidesPerView: "auto", return {
centeredSlides: true, swiperOption: {
spaceBetween: 10, slidesPerView: "auto",
notNextTick: true, centeredSlides: true,
loop: false, spaceBetween: 10,
autoplay: false notNextTick: true,
}, loop: false,
showSwiper: false, autoplay: false,
bet_bonus: "0.00", pagination: {
next_signup: false, el: '.swiper-pagination',
period_end: "", clickable: false
period_start: "", }
total_signup: 0, },
target_steps: 0, showSwiper: false,
record_list: [], bet_bonus: "0.00",
popupData: {}, next_signup: false,
current_day: 0, period_end: "",
userHavePaidGame: false period_start: "",
}; total_signup: 0,
}, target_steps: 0,
created() { record_list: [],
this.getPageData(); popupData: {},
this.isPopup(); current_day: 0,
if (sessionStorage.getItem("userHavePaidGame") === "true") { userHavePaidGame: false,
sessionStorage.setItem("userHavePaidGame", "false"); showShareModal: false,
this.userHavePaidGame = true; userData: null,
} }
}, },
computed: { created() {
swiper() { this.getPageData()
return this.$refs.mySwiper.swiper; this.isPopup()
} if (sessionStorage.getItem("userHavePaidGame") === "true") {
}, sessionStorage.setItem("userHavePaidGame", "false")
mounted() { this.userHavePaidGame = true
setTimeout(() => { }
this.swiper.slideTo(this.current_day, 1200, false); },
}, 800); computed: {
}, swiper() {
methods: { return this.$refs.mySwiper.swiper
joinNextGame() { }
this.$router.push({ },
name: "PartakeChallenge", mounted() {
query: { setTimeout(() => {
nextGame: true this.swiper.slideTo(this.current_day, 1200, false)
} }, 800)
}); },
}, methods: {
closePayPopup() { joinNextGame() {
this.userHavePaidGame = false; this.$router.push({
}, name: "PartakeChallenge",
closePopup() { query: {
this.popupData.window = false; nextGame: true
}, }
goback() { })
history.go(-1); },
}, goOtherPage (pageName) {
goOtherPage(pageName) { if(pageName == 'Rule'){
this.$router.push({ name: pageName }); // console.log('规则')
}, let params = this.target_steps
currentPage() { let p = 0
return this.$router.history.current.name; console.log(params)
}, if(params == 3000){
getPageData() { p = 1
let grade = 1; }else if(params == 5000){
if (sessionStorage.getItem("bushuType")) { p = 2
grade = sessionStorage.getItem("bushuType"); }else if(params == 8000){
} p = 3
daka_status_detail( }
this.$route.query.week, this.$router.push({name: pageName,params: {level:p}})
this.$route.query.week ? grade : "" }else{
).then(res => { // console.log('提交步数')
if (res.code === 0) { this.$router.push({name: pageName})
const pageData = res.data; }
if (pageData.record_list && pageData.record_list.length) { // let params = this.target_steps
pageData.record_list.forEach((item, index) => { // console.log('params',params)
if (item.status === 0) { // this.$router.push({name: pageName})
item.format_tsp = this.countDown( },
"interval" + index, closePayPopup() {
parseInt((item.tsp * 1000 - Date.now()) / 1000), this.userHavePaidGame = false
index },
); closePopup() {
} this.popupData.window = false
}); },
} goback() {
this.bet_bonus = pageData.bet_bonus; history.go(-1)
this.next_signup = pageData.next_signup; },
this.period_end = pageData.period_end; // goOtherPage(pageName) {
this.period_start = pageData.period_start; // this.$router.push({name: pageName})
this.total_signup = pageData.total_signup; // },
this.target_steps = pageData.target_steps; currentPage() {
this.record_list = pageData.record_list; return this.$router.history.current.name
this.current_day = pageData.current_day - 1; },
this.showSwiper = true; getPageData() {
} let grade = 1
}); if (sessionStorage.getItem("bushuType")) {
}, grade = sessionStorage.getItem("bushuType")
isPopup() { }
pop_up_windows().then(res => { daka_status_detail(
if (res.code === 0) { this.$route.query.week,
this.popupData = res.data; this.$route.query.week ? grade : ""
} ).then(res => {
}); if (res.code === 0) {
}, const pageData = res.data
//倒计时 if (pageData.record_list && pageData.record_list.length) {
countDown(intervalName, times, index) { pageData.record_list.forEach((item, index) => {
clearInterval(this[intervalName]); if (item.status === 0) {
this[intervalName] = null; item.format_tsp = this.countDown(
this[intervalName] = setInterval(() => { "interval" + index,
let day = 0, parseInt((item.tsp * 1000 - Date.now()) / 1000),
hour = 0, index
minute = 0, )
second = 0; }
if (times > 0) { // if(item.days < currentDay){
day = Math.floor(times / (60 * 60 * 24)); // if(item.step_num < item.target_steps){
hour = Math.floor(times / (60 * 60)) - day * 24; // console.log('未达标')
minute = Math.floor(times / 60) - day * 24 * 60 - hour * 60; // }else{
second = //
Math.floor(times) - // }
day * 24 * 60 * 60 - // }
hour * 60 * 60 - })
minute * 60; }
this.bet_bonus = pageData.bet_bonus
if (day < 1) day = ""; this.next_signup = pageData.next_signup
else day = day + "天"; this.period_end = pageData.period_end
if (hour <= 9) hour = "0" + hour; this.period_start = pageData.period_start
if (minute <= 9) minute = "0" + minute; this.total_signup = pageData.total_signup
if (second <= 9) second = "0" + second; this.target_steps = pageData.target_steps
this.record_list[index].format_tsp = this.record_list = pageData.record_list
day + hour + "时" + minute + "分" + second + "秒"; this.current_day = pageData.current_day - 1
} else { this.showSwiper = true
this.getPageData(); }
clearInterval(this[intervalName]); })
},
isPopup() {
pop_up_windows().then(res => {
if (res.code === 0) {
this.popupData = res.data
}
})
},
inviteFriend() {
console.log("inviteFriend")
this.showShareModal = true
let id = this.userData.id
// let id = 'yijun';
track("free_contract_share")
let links = `${
location.href.split("#")[0].split("?")[0]}?inviter=${id}&from_type=free_contract&`
shareContent("free_contract").then(res => {
let result = res.data
console.log("分享内容", result, links)
let option1 = {
title: result.title, // 分享标题
desc: result.desc, // 分享描述
link: links, // 分享链接
imgUrl: result.img_url, // 分享图标
success: function (res) {
track("free_contract_share_act")
console.log("option1Success", res)
}
}
wx.updateAppMessageShareData(option1)
//微信分享菜单测试
let option2 = {
title: result.title, // 分享标题
desc: result.desc, // 分享描述
link: links, // 分享链接
imgUrl: result.img_url, // 分享图标
success: function (res) {
console.log("option2Success", res)
}
}
let option3 = {
title: result.title, // 分享标题
desc: result.desc, // 分享描述
link: links, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: result.img_url, // 分享图标
success: function (res) {
// 用户点击了分享后执行的回调函数
track("free_contract_share_act")
console.log("option3Success", res)
},
fail: err => {
console.log("option3error", err)
}
}
wx.onMenuShareAppMessage(option3)
let option4 = {
title: result.title, // 分享标题
link: links, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: result.img_url, // 分享图标
success: function (res) {
console.log("option4Success", res)
},
fail: err => {
console.log("option4error", err)
}
}
// wx.onMenuShareTimeline(option4);
console.log("option", option1, option2, option3, option4)
})
},
closeShareModal() {
this.showShareModal = false
},
//倒计时
countDown(intervalName, times, index) {
clearInterval(this[intervalName])
this[intervalName] = null
this[intervalName] = setInterval(() => {
let day = 0,
hour = 0,
minute = 0,
second = 0
if (times > 0) {
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: 50px;
.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: url("../images/SignUp/shadow-bg.png") no-repeat center center;
background-size: contain;
/*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 { .swiper-slide {
font-size: 0.64rem; width: 5.1rem;
line-height: 0.8; height: 2.68rem;
color: #ffe253;
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 { .swiper-slide img {
width: 0.28rem; width: 5.1rem;
height: 0.24rem; height: 2.68rem;
margin-left: 0.5rem;
}
.target-people-text {
font-size: 0.26rem;
line-height: 1;
color: #fff;
margin-left: 0.08rem;
}
}
.hr {
width: 3rem;
height: 0.01rem;
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 { .have-joined-game-page {
width: 5.1rem; // width: 100%;
height: 2.68rem; min-height: 100vh;
background-image: url(../images/HaveJoinedGame/img_card.png); background-color: rgb(70, 88, 149);
background-repeat: no-repeat; background-image: url(../images/SignUp/sy_beijing.png);
background-size: 100% 100%; background-repeat: no-repeat;
padding-top: 0.24rem; background-size: 100%;
box-sizing: border-box; background-position: center top;
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; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: space-between; overflow: hidden;
position: relative;
.item-title { padding-bottom: 50px;
font-size: 0.3rem; .game-rule-container {
line-height: 1; display: flex;
color: #fff; align-items: center;
position: absolute;
top: 0.3rem;
right: 0.22rem;
font-size: 0.26rem;
line-height: 1;
color: #465895;
img {
width: 0.3rem;
height: 0.3rem;
margin-right: 0.1rem;
}
.page-title {
width: 100%;
position: fixed;
left: 0;
top: 0;
}
} }
.item-status0 { .game-bonus-container {
padding: 0 0.16rem; width: 6.4rem;
box-sizing: border-box; padding: 0.3rem 0;
background: rgba(255, 255, 255, 0.4); box-sizing: border-box;
font-size: 0.26rem; background: url("../images/SignUp/shadow-bg.png") no-repeat center center;
line-height: 0.42rem; background-size: contain;
color: #fff; /*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;
line-height: 0.8;
color: #ffe253;
text-align: center;
margin-top: 0.26rem;
}
} }
.item-status1 { .game-title {
padding: 0 0.16rem; font-size: 0.36rem;
box-sizing: border-box; line-height: 1;
background: #fcf776; color: #fff;
font-size: 0.26rem; font-weight: bold;
line-height: 0.42rem; margin-top: 0.4rem;
color: #703e0b;
} }
.item-status2 { .game-time {
padding: 0 0.16rem; font-size: 0.24rem;
box-sizing: border-box; line-height: 1;
background: #a5a5a5; color: #d6dfff;
font-size: 0.26rem; padding: 0.12rem 0.38rem;
line-height: 0.42rem; border-radius: 0.48rem;
color: #fff; 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; .people-img {
line-height: 0.8; width: 0.28rem;
color: #fcf776; 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 { .hr {
font-size: 0.26rem; width: 3rem;
line-height: 1; height: 0.01rem;
color: #dbf3ff; background: #6f82c3;
margin-left: 0.1rem; 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;
-webkit-overflow-scrolling: touch;
.item-progress { &::-webkit-scrollbar {
height: 0.06rem; display: none;
background: #fff; }
position: relative;
.game-scroll-item {
&:after { width: 5.1rem;
content: ""; height: 2.68rem;
width: 2.46rem; background-image: url(../images/HaveJoinedGame/img_card.png);
height: 0.06rem; background-repeat: no-repeat;
background: rgba(255, 255, 255, 0.5); background-size: 100% 100%;
position: absolute; 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 { .func-btn {
font-size: 0.26rem; width: 5.6rem;
line-height: 1; border-radius: 0.92rem;
color: #fff; background: #fabd21;
font-size: 0.4rem;
line-height: 0.92rem;
color: #fff;
font-weight: bold;
text-align: center;
margin-top: 1.2rem;
} }
}
}
}
.func-btn {
width: 5.6rem;
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;
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 { .next-func-btn {
width: 5.44rem; width: 5.6rem;
height: 3.18rem; border-radius: 0.92rem;
margin-top: 0.3rem; background: #0ebfdf;
} font-size: 0.4rem;
line-height: 0.92rem;
.status-date { color: #fff;
font-size: 0.36rem; font-weight: bold;
line-height: 1; text-align: center;
color: #333; margin-top: 0.3rem;
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 { .game-status-popup {
background: #fabd21; position: fixed;
} left: 0;
top: 0;
.close-btn { right: 0;
width: 0.58rem; bottom: 0;
height: 0.58rem; z-index: 998;
position: absolute; background: rgba(0, 0, 0, 0.5);
bottom: -1.08rem; display: flex;
left: 50%; align-items: center;
transform: translateX(-50%); 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;
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/Rule.vue
<template> <template>
<div class="rule-page"> <div class="rule-page">
<Title class="page-title" title="活动规则与协议" titleColor="#000" @goback="goback" show_back="true" arrowColor="black"></Title> <Title class="page-title" title="活动规则与协议" titleColor="#000" @goback="goback" show_back="true"
<div class="section-title">挑战玩法：</div> arrowColor="black"></Title>
<img class="game-way-img" v-if="bushuType == 1" src="../images/Rule/img_rule_0.png"> <div class="section-title">挑战玩法：</div>
<img class="game-way-img" v-if="bushuType == 2" src="../images/Rule/img_rule_1.png"> <img class="game-way-img" v-if="bushuType == 1" src="../images/Rule/img_rule_0.png">
<img class="game-way-img" v-if="bushuType == 3" src="../images/Rule/img_rule_2.png"> <img class="game-way-img" v-if="bushuType == 2" src="../images/Rule/img_rule_1.png">
<div class="section-title">参赛须知：</div> <img class="game-way-img" v-if="bushuType == 3" src="../images/Rule/img_rule_2.png">
<div class="content1-container"> <div class="section-title">参赛须知：</div>
<div class="content1-item">• 为督促大家运动，每位用户报名均需提供契约金</div> <div class="content1-container">
<div class="content1-item">• 当期比赛结束后不达标的用户将被扣除契约金，作为达标奖金</div> <div class="content1-item">• 为督促大家运动，每位用户报名均需提供契约金</div>
<div class="content1-item">• 当期比赛结束后达标用户将平分达标奖金，作为激励</div> <div class="content1-item">• 当期比赛结束后不达标的用户将被扣除契约金，作为达标奖金</div>
<div class="content1-item">• 奖金赛中每个账号只能接受一台设备上报的步数</div> <div class="content1-item">• 当期比赛结束后达标用户将平分达标奖金，作为激励</div>
<div class="content1-item">• 由于微信对网页暂不支持时时步数同步，所以最终结算步数为用户在小程序页面中“提交今日步数”为准。</div> <div class="content1-item">• 奖金赛中每个账号只能接受一台设备上报的步数</div>
<div class="content1-item">• 由于微信对网页暂不支持时时步数同步，所以最终结算步数为用户在小程序页面中“提交今日步数”为准。</div>
</div>
<div class="section2-title">参赛须知详情：</div>
<div class="content2-title">一、比赛规则</div>
<div class="content2-item">每期比赛于比赛日00:00:00正式开始统计，到比赛日23:59:59正式结束；用户缴纳当期比赛契约金后即可成功报名；比赛结束后达标用户将收到运动奖励金（奖励金等于达标用户本人运动契约金，加上均分未达标用户契约金的30%）；
</div>
<div class="content2-item">运动达标奖励金将于比赛结束后24小时内发放到达标用户账户中；</div>
<div class="content2-title">二、用户确认报名即认可平台判定结果，不再对该结果进行任何形式抗辩</div>
<div class="content2-item">
每场比赛的判定结果，由平台根据比赛结束时(当期比赛最后一日的23:59:59)的服务器后台获取的用户步数来判定，该步数会显示在当期比赛结束后的比赛详情页；用户报名成功即表示对平台
的判定结果表示认可，不再对该结果进行任何形式抗辩；
</div>
<div class="content2-title">三、用户应保证设备的可靠性，以保证运动数据准确性</div>
<div class="content2-item">报名赛事的用户应保证自己设备的可靠性，例如保证电源电量充足，保证计步服务在设备系统的运行白名单内，网络链接正常
等；为了更好的保证运动数据的可靠性，比赛期间请保证一定频次的手机微信登录；由于用户个人设备缺乏可靠性导致的投诉，平台不予处理；
</div>
<div class="content2-title">四、其他说明</div>
<div class="content2-item">奖金派发时仅派发到小数点后两位，由此可能造成的奖金结余将在合并至本组下期比赛奖金中一并派发；</div>
<div class="content2-item">由于不可抗力因素导致当期比赛因故无法进行的，平台有权取消当期比赛’并将在指定时间内将运动契约金原路退还给报名成功用户；</div>
<div class="ps">注：Apple不是本赛事赞助者</div>
<br>
</div> </div>
<div class="section2-title">参赛须知详情：</div>
<div class="content2-title">一、比赛规则</div>
<div class="content2-item">每期比赛于比赛日00:00:00正式开始统计，到比赛日23: 59:59正式结束；用户缴纳当期比赛契约金后即可成功报名；比赛结束后达标用户将收到运动奖励金（奖励金等于达标用户本人运动契约金，加上均分未达标用户契约金的30%）；</div>
<div class="content2-item">运动达标奖励金将于比赛结束后24小时内发放到达标用户账户中；</div>
<div class="content2-title">二、用户确认报名即认可平台判定结果，不再对该结果进行任何 形式抗辩</div>
<div class="content2-item">每场比赛的判定结果，由平台根据比赛结束时(当期比赛最后一曰的23:59:59)的服务器后台获取的用户步数来判定，该步数会显示在当期比赛结束后的比赛详情页；用户报名成功即表示对平台 的判定结果表示认可，不再对该结果进行任何形式抗辩；</div>
<div class="content2-title">三、用户应保证设备的可靠性，以保证运动数据准确性</div>
<div class="content2-item">报名赛事的用户应保证自己设备的可靠性，例如保证电源电量充 足，保证计步服务在设备系统的运行白名单内，网络链接正常 等；为了更好的保证运动数据的可靠性，比赛期间请保证一定频次的手机微信登录；由于用户个人设备缺乏可靠性导致的投诉，平台不予处理；</div>
<div class="content2-title">四、其他说明</div>
<div class="content2-item">奖金派发时’仅派发到小数点后两位，由此可能造成的奖金结余 将在合并至本组下期比赛奖金中一并派发；</div>
<div class="content2-item">由于不可抗力因素导致当期比赛因故无法进行的，平台有权取消 当期比赛’并将在指定时间内将运动契约金原路退还给报名成功 用户；</div>
<div class="ps">注：Apple不是本赛事赞助者</div>
</div>
</template> </template>
<script> <script>
import Title from "@/components/Title.vue"; import Title from "@/components/Title.vue"
export default {
name: "Rule", export default {
components: { name: "Rule",
Title, components: {
}, Title,
data() { },
return { data() {
bushuType: 0 return {
}; bushuType: 0
}, }
mounted(){ },
let LastLevel = Number(sessionStorage.getItem('bushuType')) mounted() {
if(LastLevel){ if (this.$route.params.level) {
this.bushuType = LastLevel this.bushuType = this.$route.params.level
} else {
let LastLevel = Number(sessionStorage.getItem('bushuType'))
if (LastLevel) {
this.bushuType = LastLevel
}
}
},
methods: {
goback() {
history.go(-1)
},
} }
},
methods: {
goback() {
history.go(-1);
},
} }
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.rule-page { .rule-page {
width: 100%; width: 100%;
background: #fff; background: #fff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding-top: .96rem; padding-top: .96rem;
.page-title {
font-weight: bold; .page-title {
width: 100%; font-weight: bold;
background: #fff; width: 100%;
position: fixed; background: #fff;
left: 0; position: fixed;
top: 0; left: 0;
} top: 0;
.section-title { }
width: 6.72rem;
font-size: .3rem; .section-title {
line-height: 1; width: 6.72rem;
color: #333; font-size: .3rem;
font-weight: bold; line-height: 1;
text-align: left; color: #333;
margin-top: .44rem; font-weight: bold;
} text-align: left;
.game-way-img { margin-top: .44rem;
width: 6.15rem; }
height: 1.09rem;
margin-top: .3rem; .game-way-img {
margin-bottom: .14rem; width: 6.15rem;
} height: 1.09rem;
.content1-container { margin-top: .3rem;
width: 6.7rem; margin-bottom: .14rem;
margin-top: .2rem; }
.content1-item {
font-size: .26rem; .content1-container {
line-height: .44rem; width: 6.7rem;
color: #5a5a5a; margin-top: .2rem;
}
} .content1-item {
.section2-title { font-size: .26rem;
width: 6.72rem; line-height: .44rem;
font-size: .26rem; color: #5a5a5a;
line-height: 1; }
color: #333; }
margin-top: .4rem;
} .section2-title {
.content2-title { width: 6.72rem;
width: 6.72rem; font-size: .26rem;
font-size: .26rem; line-height: 1;
line-height: .44rem; color: #333;
color: #333; margin-top: .4rem;
margin-top: .2rem; }
}
.content2-item { .content2-title {
width: 6.72rem; width: 6.72rem;
font-size: .26rem; font-size: .26rem;
line-height: .44rem; line-height: .44rem;
color: #5a5a5a; color: #333;
margin-top: .14rem; margin-top: .2rem;
} }
.ps {
width: 6.72rem; .content2-item {
font-size: .26rem; width: 6.72rem;
line-height: 1; font-size: .26rem;
color: #A5A5A5; line-height: .44rem;
margin: .4rem 0 .26rem; color: #5a5a5a;
margin-top: .14rem;
}
.ps {
width: 6.72rem;
font-size: .26rem;
line-height: 1;
color: #A5A5A5;
margin: .4rem 0 .26rem;
}
} }
}
</style> </style>
\ No newline at end of file
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