Skip to content

W
walk_daka_h5
Commit 10c8792c by Caiyijun
Options

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

parents 50e56559 fcbc7169
Showing with 1291 additions and 1371 deletions
src/components/Free.vue
...@@ -307,7 +307,7 @@ ...@@ -307,7 +307,7 @@
}, },
// 立即报名 // 立即报名
joinFree() { joinFree() {
let days = this.days || 0 // let days = this.days || 0
// this.queryPayImage(); // this.queryPayImage();
// dakaPay(days, 1).then(response => { // dakaPay(days, 1).then(response => {
// console.log("报名状态", response); // console.log("报名状态", response);
......
src/components/axios/api.js
...@@ -151,7 +151,7 @@ export function ocFollow() { //lookOption是你要调用接口的名字，issuer ...@@ -151,7 +151,7 @@ export function ocFollow() { //lookOption是你要调用接口的名字，issuer
} }
// 报名支付 // 报名支付
export function dakaPay(grade,days,use_contract) { export function dakaPay(days,use_contract) {
let now = new Date(); let now = new Date();
let year = now.getFullYear(); let year = now.getFullYear();
let month = now.getMonth() + 1; let month = now.getMonth() + 1;
...@@ -173,8 +173,7 @@ export function dakaPay(grade,days,use_contract) { ...@@ -173,8 +173,7 @@ export function dakaPay(grade,days,use_contract) {
use_contract: use_contract || 0, use_contract: use_contract || 0,
inviter_id: inviter || '', inviter_id: inviter || '',
from_type: from_type || '', from_type: from_type || '',
days: days || 0, days: days || 0
grade: grade || 0
} }
}) })
} }
...@@ -382,12 +381,11 @@ export function withdraw_log(page) { ...@@ -382,12 +381,11 @@ export function withdraw_log(page) {
} }
// 首页数据 // 首页数据
export function daka_index(grade) { export function daka_index() {
return fetch({ return fetch({
url: api.daka_index, url: api.daka_index,
method: 'GET', method: 'GET',
params: { params: {
grade: grade
} }
}) })
} }
...@@ -403,13 +401,12 @@ export function select_user_signup() { ...@@ -403,13 +401,12 @@ export function select_user_signup() {
} }
// 比赛详情 // 比赛详情
export function daka_status_detail(week, grade) { export function daka_status_detail(week) {
return fetch({ return fetch({
url: api.daka_status_detail, url: api.daka_status_detail,
method: 'GET', method: 'GET',
params: { params: {
week: week, week: week
grade: grade
} }
}) })
} }
...@@ -425,12 +422,11 @@ export function pop_up_windows() { ...@@ -425,12 +422,11 @@ export function pop_up_windows() {
} }
//参与挑战 //参与挑战
export function daka_info(grade){ export function daka_info(){
return fetch({ return fetch({
url: api.daka_info, url: api.daka_info,
method: 'GET', method: 'GET',
params: { params: {
grade: grade
} }
}) })
} }
......
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-rule-container" @click="goOtherPage('Rule')"> <div class="game-rule-container" @click="goOtherPage('Rule')">
<img src="../images/ChallengeDetail/ic_que.png"> <img src="../images/ChallengeDetail/ic_que.png">
活动规则 活动规则
</div> </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>
</div> </div>
<div class="game-title">{{target_steps}}步3日耐力赛</div> <div class="game-title">{{target_steps}}步3日耐力赛</div>
<div class="game-time">开赛时间：{{period_start}} — {{period_end}}</div> <div class="game-time">开赛时间：{{period_start}} — {{period_end}}</div>
<div class="target-people-container"> <div class="target-people-container">
<img class="target-img" src="../images/HaveJoinedGame/ic_shoes.png"> <img class="target-img" src="../images/HaveJoinedGame/ic_shoes.png">
<div class="target-people-text">每日{{target_steps}}步达标</div> <div class="target-people-text">每日{{target_steps}}步达标</div>
<img class="people-img" src="../images/HaveJoinedGame/ic_people.png"> <img class="people-img" src="../images/HaveJoinedGame/ic_people.png">
<div class="target-people-text">已有{{total_signup}}人参赛</div> <div class="target-people-text">已有{{total_signup}}人参赛</div>
</div>
<div class="hr"></div>
<!-- <div style="height: 2.68rem;">v-if="showSwiper" -->
<swiper :options="swiperOption" ref="mySwiper" 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" v-if="item.status===2&&item.money>0">
<div class="item-amount">{{item.money|moneyFormatter}}</div>
<div class="item-text">(元) 收益</div>
</div>
<div class="item-income" v-else-if="item.status===1||item.status===2">
<div class="item-amount">{{item.money|moneyFormatter}}</div>
<div class="item-text">(元) 预计收益</div>
</div>
<div class="item-income" v-else-if="item.status===2">
<div class="item-amount">{{item.yj_money|moneyFormatter}}</div>
<div class="item-text">(元) 预计收益</div>
</div>
<div class="item-income" v-else style="visibility: hidden;">
<div class="item-amount">0.00</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;'"
v-if="index ==0 || (index > 0 && record_list[index-1].status != 3)"
></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>
</div>
</div> </div>
<div class="hr"></div> </swiper-slide>
<!-- <div style="height: 2.68rem;">v-if="showSwiper" --> <div class="swiper-pagination" slot="pagination" style="opacity: 0"></div>
<swiper :options="swiperOption" ref="mySwiper" class="game-scroll-container" v-if="showSwiper"> </swiper>
<swiper-slide v-for="(item,index) in record_list" :key="index"> <!-- </div>-->
<div class="game-scroll-item"> <div
<div class="item-title-status"> class="func-btn green-btn"
<div class="item-title">第{{item.days}}天</div> @click="inviteFriend"
<div :class="item.status===0?'item-status0':item.status===1?'item-status1':item.status===2?'item-status2':'item-status2'" v-if="record_list.length&&record_list[0].status === 0"
>{{item.status===0?'未开始':item.status===1?'比赛中':item.status===2?'已结束':'已淘汰'}} >邀请好友来参赛</div>
</div> <div class="func-btn" @click="goOtherPage('GoXCX')" v-else>提交今日步数</div>
</div> <div class="next-func-btn" v-if="next_signup" @click="joinNextGame()">报名下一期</div>
<div class="item-income" v-if="item.status===2&&item.money>0"> <!-- 报名成功弹框 -->
<div class="item-amount">{{item.money|moneyFormatter}}</div> <div class="game-status-popup" v-if="userHavePaidGame">
<div class="item-text">(元) 收益</div> <div class="game-status-container">
</div> <img class="status-icon" src="../images/HaveJoinedGame/pop_bmcg_title.png">
<div class="item-income" v-else-if="item.status===1||item.status===2"> <img class="join-success-banner" src="../images/HaveJoinedGame/pop_bmcg_img.png">
<div class="item-amount">{{item.money|moneyFormatter}}</div> <div class="popup-text1">
<div class="item-text">(元) 预计收益</div> <span>每日24点前</span>打开「步步运动赚」小程序，手动提交今日步数，否则可能导致无法分钱哦！
</div>
<div class="item-income" v-else-if="item.status===2">
<div class="item-amount">{{item.yj_money|moneyFormatter}}</div>
<div class="item-text">(元) 预计收益</div>
</div>
<div class="item-income" v-else style="visibility: hidden;">
<div class="item-amount">0.00</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;'" v-if="index ==0 || (index > 0 && record_list[index-1].status != 3)"></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>
</div>
</div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination" style="opacity: 0"></div>
</swiper>
<!-- </div>-->
<div class="func-btn green-btn" @click="inviteFriend" v-if="record_list.length&&record_list[0].status === 0">邀请好友来参赛</div>
<div class="func-btn" @click="goOtherPage('GoXCX')" v-else>提交今日步数</div>
<div class="next-func-btn" v-if="next_signup" @click="joinNextGame()">报名下一期</div>
<!-- 报名成功弹框 -->
<div class="game-status-popup" v-if="userHavePaidGame">
<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" @click="inviteFriend">邀请好友来参赛</div>
<img class="close-btn" src="../images/common/pop_ic_close.png" @click="closePayPopup()">
</div>
</div> </div>
<div class="popup-text2">注：微信暂不支持小程序实时更新步数</div>
<div class="popup-btn1 green-btn" @click="inviteFriend">邀请好友来参赛</div>
<!-- 恭喜达标弹框 --> <img class="close-btn" src="../images/common/pop_ic_close.png" @click="closePayPopup()">
<div class="game-status-popup" v-if="popupData.window && popupData.daka_done"> </div>
<div class="game-status-container"> </div>
<img class="status-icon" src="../images/HaveJoinedGame/pop_gxdb_title.png"> <!-- 恭喜达标弹框 -->
<div class="status-date">第{{popupData.days}}日达标</div> <div class="game-status-popup" v-if="popupData.window && popupData.daka_done">
<div class="status-money"> <div class="game-status-container">
<div class="popup-text3">{{popupData.days===3?'总奖励金':'返还契约金'}}</div> <img class="status-icon" src="../images/HaveJoinedGame/pop_gxdb_title.png">
<div class="popup-text4"> <div class="status-date">第{{popupData.days}}日达标</div>
{{popupData.money|moneyFormatter}} <div class="status-money">
<span>元</span> <div class="popup-text3">{{popupData.days===3?'总奖励金':'返还契约金'}}</div>
</div> <div class="popup-text4">
<div class="popup-text5">第{{String(popupData.week).substring(4,8)}}期{{popupData.target_steps}}步3日耐力赛</div> {{popupData.money|moneyFormatter}}
</div> <span>元</span>
<div class="popup-text6">{{popupData.target_steps}}步达标，今天走了{{popupData.step_num}}步</div> </div>
<div class="popup-text7">契约金将于12点后返还至钱包中</div> <div
<div class="popup-btn1 green-btn" @click="inviteFriend">邀请好友来打卡</div> class="popup-text5"
<img class="close-btn" src="../images/common/pop_ic_close.png" @click="closePopup()"> >第{{String(popupData.week).substring(4,8)}}期{{popupData.target_steps}}步3日耐力赛</div>
</div>
</div> </div>
<!-- 你已被淘汰弹框 --> <div class="popup-text6">{{popupData.target_steps}}步达标，今天走了{{popupData.step_num}}步</div>
<div class="game-status-popup" v-else-if="popupData.window && !popupData.daka_done"> <div class="popup-text7">契约金将于12点后返还至钱包中</div>
<div class="game-status-container"> <div class="popup-btn1 green-btn" @click="inviteFriend">邀请好友来打卡</div>
<img class="status-icon" src="../images/HaveJoinedGame/pop_out_title.png"> <img class="close-btn" src="../images/common/pop_ic_close.png" @click="closePopup()">
<div class="status-date">第{{popupData.days}}日未达标</div> </div>
<div class="status-money"> </div>
<div class="popup-text3">扣除契约金</div> <!-- 你已被淘汰弹框 -->
<div class="popup-text4"> <div class="game-status-popup" v-else-if="popupData.window && !popupData.daka_done">
{{popupData.money|moneyFormatter}} <div class="game-status-container">
<span>元</span> <img class="status-icon" src="../images/HaveJoinedGame/pop_out_title.png">
</div> <div class="status-date">第{{popupData.days}}日未达标</div>
<div class="popup-text5">第{{String(popupData.week).substring(4,8)}}期{{popupData.target_steps}}步3日耐力赛</div> <div class="status-money">
</div> <div class="popup-text3">扣除契约金</div>
<div class="popup-text6">{{popupData.target_steps}}步达标，今天走了{{popupData.step_num}}步</div> <div class="popup-text4">
<div class="popup-text7">已达标{{popupData.days}}天，契约金已返还至你的钱包</div> {{popupData.money|moneyFormatter}}
<div class="popup-btn1 yellow-btn" @click="joinNextGame()">报名下一期</div> <span>元</span>
<img class="close-btn" src="../images/common/pop_ic_close.png" @click="closePopup()"> </div>
</div> <div
class="popup-text5"
>第{{String(popupData.week).substring(4,8)}}期{{popupData.target_steps}}步3日耐力赛</div>
</div> </div>
<ShareModal <div class="popup-text6">{{popupData.target_steps}}步达标，今天走了{{popupData.step_num}}步</div>
v-on:close="closeShareModal" <div class="popup-text7">已达标{{popupData.days}}天，契约金已返还至你的钱包</div>
v-if="showShareModal" <div class="popup-btn1 yellow-btn" @click="joinNextGame()">报名下一期</div>
></ShareModal> <img class="close-btn" src="../images/common/pop_ic_close.png" @click="closePopup()">
</div>
</div> </div>
<ShareModal v-on:close="closeShareModal" v-if="showShareModal"></ShareModal>
</div>
</template> </template>
<script> <script>
import Title from "@/components/Title.vue" import Title from "@/components/Title.vue";
import {daka_status_detail, pop_up_windows, shareContent, track} from "@/components/axios/api" import {
import ShareModal from "@/components/ShareModal.vue" daka_status_detail,
import {swiper, swiperSlide} from "vue-awesome-swiper" pop_up_windows,
import "swiper/dist/css/swiper.css" shareContent,
track
export default { } from "@/components/axios/api";
name: "HaveJoinedGame", import ShareModal from "@/components/ShareModal.vue";
components: { import { swiper, swiperSlide } from "vue-awesome-swiper";
Title, import "swiper/dist/css/swiper.css";
swiper,
swiperSlide, export default {
ShareModal name: "HaveJoinedGame",
}, components: {
data() { Title,
return { swiper,
swiperOption: { swiperSlide,
slidesPerView: "auto", ShareModal
centeredSlides: true, },
spaceBetween: 10, data() {
notNextTick: true, return {
loop: false, swiperOption: {
autoplay: false, slidesPerView: "auto",
pagination: { centeredSlides: true,
el: '.swiper-pagination', spaceBetween: 10,
clickable: false notNextTick: true,
} loop: false,
}, autoplay: false,
showSwiper: false, pagination: {
bet_bonus: "0.00", el: ".swiper-pagination",
next_signup: false, clickable: false
period_end: "", }
period_start: "", },
total_signup: 0, showSwiper: false,
target_steps: 0, bet_bonus: "0.00",
record_list: [], next_signup: false,
popupData: {}, period_end: "",
current_day: 0, period_start: "",
userHavePaidGame: false, total_signup: 0,
showShareModal: false, target_steps: 0,
userData: null, record_list: [],
} popupData: {},
}, current_day: 0,
created() { userHavePaidGame: false,
this.getPageData() showShareModal: false,
this.isPopup() userData: null
if (sessionStorage.getItem("userHavePaidGame") === "true") { };
sessionStorage.setItem("userHavePaidGame", "false") },
this.userHavePaidGame = true created() {
} this.getPageData();
}, this.isPopup();
computed: { if (sessionStorage.getItem("userHavePaidGame") === "true") {
swiper() { sessionStorage.setItem("userHavePaidGame", "false");
return this.$refs.mySwiper.swiper this.userHavePaidGame = true;
} }
}, },
mounted() { computed: {
setTimeout(() => { swiper() {
this.swiper.slideTo(this.current_day, 1200, false) return this.$refs.mySwiper.swiper;
}, 800) }
}, },
methods: { mounted() {
joinNextGame() { setTimeout(() => {
this.$router.push({ this.swiper.slideTo(this.current_day, 1200, false);
name: "PartakeChallenge", }, 800);
query: { },
nextGame: true methods: {
} joinNextGame() {
}) this.$router.push({
}, name: "PartakeChallenge",
goOtherPage (pageName) { query: {
if(pageName == 'Rule'){ nextGame: true
// console.log('规则') }
let params = this.target_steps });
let p = 0 },
console.log(params) goOtherPage(pageName) {
if(params == 3000){ if (pageName == "Rule") {
p = 1 // console.log('规则')
}else if(params == 5000){ let params = this.target_steps;
p = 2 let p = 0;
}else if(params == 8000){ console.log(params);
p = 3 if (params == 3000) {
} p = 1;
this.$router.push({name: pageName,params: {level:p}}) } else if (params == 5000) {
}else{ p = 2;
// console.log('提交步数') } else if (params == 8000) {
this.$router.push({name: pageName}) p = 3;
} }
// let params = this.target_steps this.$router.push({ name: pageName, params: { level: p } });
// console.log('params',params) } else {
// this.$router.push({name: pageName}) // console.log('提交步数')
}, this.$router.push({ name: pageName });
closePayPopup() { }
this.userHavePaidGame = false // let params = this.target_steps
}, // console.log('params',params)
closePopup() { // this.$router.push({name: pageName})
this.popupData.window = false },
}, closePayPopup() {
goback() { this.userHavePaidGame = false;
history.go(-1) },
}, closePopup() {
// goOtherPage(pageName) { this.popupData.window = false;
// this.$router.push({name: pageName}) },
// }, goback() {
currentPage() { history.go(-1);
return this.$router.history.current.name },
}, // goOtherPage(pageName) {
getPageData() { // this.$router.push({name: pageName})
let grade = 1 // },
if (sessionStorage.getItem("bushuType")) { currentPage() {
grade = sessionStorage.getItem("bushuType") return this.$router.history.current.name;
} },
daka_status_detail( getPageData() {
this.$route.query.week, daka_status_detail(this.$route.query.week).then(res => {
this.$route.query.week ? grade : "" if (res.code === 0) {
).then(res => { const pageData = res.data;
if (res.code === 0) { if (pageData.record_list && pageData.record_list.length) {
const pageData = res.data pageData.record_list.forEach((item, index) => {
if (pageData.record_list && pageData.record_list.length) { if (item.status === 0) {
pageData.record_list.forEach((item, index) => { item.format_tsp = this.countDown(
if (item.status === 0) { "interval" + index,
item.format_tsp = this.countDown( parseInt((item.tsp * 1000 - Date.now()) / 1000),
"interval" + index, index
parseInt((item.tsp * 1000 - Date.now()) / 1000), );
index }
) // if(item.days < currentDay){
} // if(item.step_num < item.target_steps){
// if(item.days < currentDay){ // console.log('未达标')
// if(item.step_num < item.target_steps){ // }else{
// console.log('未达标') //
// }else{ // }
// // }
// } });
// } }
}) this.bet_bonus = pageData.bet_bonus;
} this.next_signup = pageData.next_signup;
this.bet_bonus = pageData.bet_bonus this.period_end = pageData.period_end;
this.next_signup = pageData.next_signup this.period_start = pageData.period_start;
this.period_end = pageData.period_end this.total_signup = pageData.total_signup;
this.period_start = pageData.period_start this.target_steps = pageData.target_steps;
this.total_signup = pageData.total_signup this.record_list = pageData.record_list;
this.target_steps = pageData.target_steps this.current_day = pageData.current_day - 1;
this.record_list = pageData.record_list this.showSwiper = true;
this.current_day = pageData.current_day - 1
this.showSwiper = true
}
})
},
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"
}
}
} }
});
},
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";
}
}
}
};
</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;
.game-rule-container {
display: flex;
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;
}
}
.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 {
font-size: 0.64rem;
line-height: 0.8;
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;
} }
.swiper-slide { .people-img {
width: 5.1rem; width: 0.28rem;
height: 2.68rem; height: 0.24rem;
margin-left: 0.5rem;
} }
.swiper-slide img { .target-people-text {
width: 5.1rem; font-size: 0.26rem;
height: 2.68rem; 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-overflow-scrolling: touch;
&::-webkit-scrollbar {
display: none;
} }
.have-joined-game-page { .game-scroll-item {
// width: 100%; width: 5.1rem;
min-height: 100vh; height: 2.68rem;
background-color: rgb(70, 88, 149); background-image: url(../images/HaveJoinedGame/img_card.png);
background-image: url(../images/SignUp/sy_beijing.png); background-repeat: no-repeat;
background-repeat: no-repeat; background-size: 100% 100%;
background-size: 100%; padding-top: 0.24rem;
background-position: center top; 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; display: flex;
flex-direction: column;
align-items: center; align-items: center;
overflow: hidden; justify-content: space-between;
position: relative;
padding-bottom: 50px;
.game-rule-container {
display: flex;
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;
}
}
.game-bonus-container { .item-title {
width: 6.4rem; font-size: 0.3rem;
padding: 0.3rem 0; line-height: 1;
box-sizing: border-box; color: #fff;
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 {
font-size: 0.64rem;
line-height: 0.8;
color: #ffe253;
text-align: center;
margin-top: 0.26rem;
}
} }
.game-title { .item-status0 {
font-size: 0.36rem; padding: 0 0.16rem;
line-height: 1; box-sizing: border-box;
color: #fff; background: rgba(255, 255, 255, 0.4);
font-weight: bold; font-size: 0.26rem;
margin-top: 0.4rem; line-height: 0.42rem;
color: #fff;
} }
.game-time { .item-status1 {
font-size: 0.24rem; padding: 0 0.16rem;
line-height: 1; box-sizing: border-box;
color: #d6dfff; background: #fcf776;
padding: 0.12rem 0.38rem; font-size: 0.26rem;
border-radius: 0.48rem; line-height: 0.42rem;
background: #556cb6; color: #703e0b;
margin-top: 0.14rem;
} }
.target-people-container { .item-status2 {
display: flex; padding: 0 0.16rem;
margin-top: 0.34rem; box-sizing: border-box;
background: #a5a5a5;
.target-img { font-size: 0.26rem;
width: 0.3rem; line-height: 0.42rem;
height: 0.26rem; color: #fff;
}
.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 { .item-income {
width: 3rem; width: 100%;
height: 0.01rem; padding-left: 0.3rem;
background: #6f82c3; box-sizing: border-box;
margin-top: 0.5rem; margin-top: 0.4rem;
} display: flex;
align-items: flex-end;
.game-scroll-container { .item-amount {
width: 100%; font-size: 0.48rem;
height: 2.68rem; line-height: 0.8;
margin-top: 0.4rem; color: #fcf776;
padding: 0 0.3rem;
box-sizing: border-box;
overflow-x: scroll;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
&::-webkit-scrollbar {
display: none;
}
.game-scroll-item {
width: 5.1rem;
height: 2.68rem;
background-image: url(../images/HaveJoinedGame/img_card.png);
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;
}
}
}
} }
.func-btn { .item-text {
width: 5.6rem; font-size: 0.26rem;
border-radius: 0.92rem; line-height: 1;
background: #fabd21; color: #dbf3ff;
font-size: 0.4rem; margin-left: 0.1rem;
line-height: 0.92rem;
color: #fff;
font-weight: bold;
text-align: center;
margin-top: 1.2rem;
} }
.green-btn { }
background: #1fdbb1;
.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;
}
} }
.next-func-btn { .item-num {
width: 5.6rem; font-size: 0.26rem;
border-radius: 0.92rem; line-height: 1;
background: #0ebfdf; color: #fff;
font-size: 0.4rem;
line-height: 0.92rem;
color: #fff;
font-weight: bold;
text-align: center;
margin-top: 0.3rem;
} }
}
}
}
.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;
}
.green-btn {
background: #1fdbb1;
}
.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;
} }
.game-status-popup { .join-success-banner {
position: fixed; width: 5.44rem;
left: 0; height: 3.18rem;
top: 0; margin-top: 0.3rem;
right: 0; }
bottom: 0;
z-index: 998; .status-date {
background: rgba(0, 0, 0, 0.5); font-size: 0.36rem;
display: flex; line-height: 1;
align-items: center; color: #333;
justify-content: center; font-weight: bold;
text-align: center;
.game-status-container { margin-top: 0.4rem;
width: 6rem; }
background: #fff;
border-radius: 0.08rem; .status-money {
padding-bottom: 0.4rem; width: 5.04rem;
display: flex; height: 2.84rem;
flex-direction: column; background-image: url(../images/HaveJoinedGame/pop_gxdb_board.png);
align-items: center; background-size: 100%;
position: relative; margin-top: 0.42rem;
.status-icon { .popup-text3 {
width: 5.08rem; font-size: 0.3rem;
height: 2.58rem; line-height: 1;
margin-top: -1.29rem; color: #463a2c;
} text-align: center;
margin-top: 0.42rem;
.join-success-banner { }
width: 5.44rem;
height: 3.18rem; .popup-text4 {
margin-top: 0.3rem; font-size: 1.2rem;
} line-height: 0.8;
color: #fabd21;
.status-date { text-align: center;
font-size: 0.36rem; margin-top: 0.24rem;
line-height: 1;
color: #333; span {
font-weight: bold; font-size: 0.3rem;
text-align: center; line-height: 1;
margin-top: 0.4rem; vertical-align: bottom;
}
.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%);
}
} }
}
.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
...@@ -120,7 +120,7 @@ ...@@ -120,7 +120,7 @@
if (this.$route.query.nextGame) { if (this.$route.query.nextGame) {
nextGame = 2 nextGame = 2
} }
dakaPay(sessionStorage.getItem("bushuType"), nextGame).then(response => { dakaPay(nextGame).then(response => {
if (response.code == 1) { if (response.code == 1) {
this.showModal("温馨提示", response.msg) this.showModal("温馨提示", response.msg)
return return
...@@ -196,12 +196,7 @@ ...@@ -196,12 +196,7 @@
this.argeement = !this.argeement this.argeement = !this.argeement
}, },
getPageData(){ getPageData(){
let grade = 1 daka_info().then(res=>{
if(sessionStorage.getItem('bushuType')){
grade = sessionStorage.getItem('bushuType')
}
console.log(grade)
daka_info(grade).then(res=>{
console.log('daka_info',res) console.log('daka_info',res)
if(res.code == 0){ if(res.code == 0){
console.log('立即参与',res) console.log('立即参与',res)
......
src/views/Record.vue
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
</div> </div>
</div> </div>
<div class="card-container-list" @scroll="onScroll"> <div class="card-container-list" @scroll="onScroll">
<div class="card-item" v-for="(item,index) in recordList.records" @click="goWhereDetail(item.week, item.grade)"> <div class="card-item" v-for="(item,index) in recordList.records" @click="goWhereDetail(item.week)">
<div class="card-title">{{item.week}}期-{{item.target_steps}}步{{item.total_days}}日耐力赛<template v-if="item.days">（第{{item.days}}天）</template></div> <div class="card-title">{{item.week}}期-{{item.target_steps}}步{{item.total_days}}日耐力赛<template v-if="item.days">（第{{item.days}}天）</template></div>
<div class="card-detail-container"> <div class="card-detail-container">
<div class="detail-item"> <div class="detail-item">
...@@ -85,8 +85,7 @@ ...@@ -85,8 +85,7 @@
sessionStorage.setItem("selectedRecord", JSON.stringify(item)); sessionStorage.setItem("selectedRecord", JSON.stringify(item));
this.$router.push({name: "RecordDetail"}) this.$router.push({name: "RecordDetail"})
}, },
goWhereDetail(week, grade) { goWhereDetail(week) {
sessionStorage.setItem('bushuType', grade);
this.$router.push({ this.$router.push({
name: 'HaveJoinedGame', name: 'HaveJoinedGame',
query: { query: {
......
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" arrowColor="black"></Title>
<div class="section-title">挑战玩法：</div> <div class="section-title">参赛须知：</div>
<img class="game-way-img" v-if="bushuType == 1" src="../images/Rule/img_rule_0.png"> <div class="content1-container">
<img class="game-way-img" v-if="bushuType == 2" src="../images/Rule/img_rule_1.png"> <div class="content1-item">• 为督促大家运动，每位用户报名均需提供契约金</div>
<img class="game-way-img" v-if="bushuType == 3" src="../images/Rule/img_rule_2.png"> <div class="content1-item">• 当期比赛结束后不达标的用户将被扣除契约金</div>
<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>
<div class="section2-title">参赛须知详情：</div>
<div class="content2-title">一、比赛规则</div>
<div class="content2-item">每期比赛于比赛日00:00:00正式开始统计，到比赛日23: 59:59正式结束；用户缴纳当期比赛契约金后即可成功报名；比赛结束后达标用户将收到运动奖励金；</div>
<div class="content2-item">运动达标奖励金将于比赛结束后24小时内发放到达标用户钱包中（多日耐力赛比赛期间，契约金按日返还结算，单个比赛日总当天0点开始至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正式结束；用户缴纳当期比赛契约金后即可成功报名；比赛结束后达标用户将收到运动奖励金；</div>
<div class="content2-item">运动达标奖励金将于比赛结束后24小时内发放到达标用户钱包中（多日耐力赛比赛期间，契约金按日返还结算，单个比赛日总当天0点开始至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 { export default {
name: "Rule", name: "Rule",
components: { components: {
Title, Title
}, },
data() { data() {
return { return {};
bushuType: 0 },
} mounted() {},
}, methods: {
mounted() { goback() {
if (this.$route.params.level) { history.go(-1);
this.bushuType = this.$route.params.level
} else {
let LastLevel = Number(sessionStorage.getItem('bushuType'))
if (LastLevel) {
this.bushuType = LastLevel
}
}
},
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: 0.96rem;
.page-title {
font-weight: bold;
width: 100%;
background: #fff;
position: fixed;
left: 0;
top: 0;
}
.section-title { .page-title {
width: 6.72rem; font-weight: bold;
font-size: .3rem; width: 100%;
line-height: 1; background: #fff;
color: #333; position: fixed;
font-weight: bold; left: 0;
text-align: left; top: 0;
margin-top: .44rem; }
}
.game-way-img { .section-title {
width: 6.15rem; width: 6.72rem;
height: 1.09rem; font-size: 0.3rem;
margin-top: .3rem; line-height: 1;
margin-bottom: .14rem; color: #333;
} font-weight: bold;
text-align: left;
margin-top: 0.44rem;
}
.content1-container { .content1-container {
width: 6.7rem; width: 6.7rem;
margin-top: .2rem; margin-top: 0.2rem;
.content1-item { .content1-item {
font-size: .26rem; font-size: 0.26rem;
line-height: .44rem; line-height: 0.44rem;
color: #5a5a5a; color: #5a5a5a;
} }
} }
.section2-title { .section2-title {
width: 6.72rem; width: 6.72rem;
font-size: .26rem; font-size: 0.26rem;
line-height: 1; line-height: 1;
color: #333; color: #333;
margin-top: .4rem; margin-top: 0.4rem;
} }
.content2-title { .content2-title {
width: 6.72rem; width: 6.72rem;
font-size: .26rem; font-size: 0.26rem;
line-height: .44rem; line-height: 0.44rem;
color: #333; color: #333;
margin-top: .2rem; margin-top: 0.2rem;
} }
.content2-item { .content2-item {
width: 6.72rem; width: 6.72rem;
font-size: .26rem; font-size: 0.26rem;
line-height: .44rem; line-height: 0.44rem;
color: #5a5a5a; color: #5a5a5a;
margin-top: .14rem; margin-top: 0.14rem;
} }
.ps { .ps {
width: 6.72rem; width: 6.72rem;
font-size: .26rem; font-size: 0.26rem;
line-height: 1; line-height: 1;
color: #A5A5A5; color: #a5a5a5;
margin: .4rem 0 .26rem; margin: 0.4rem 0 0.6rem;
} }
} }
</style> </style>
\ No newline at end of file
src/views/SignUp.vue
<template> <template>
<div class="sign-up-page"> <div class="sign-up-page">
<!-- 顶部步数级别选择 --> <!-- 左上角查看步数按钮 -->
<div class="top-nav-level"> <!-- <img class="view-steps-btn" src="../images/SignUp/sy_bushu.png"> -->
<div :class="['level-item', choosedLevel===1?'active':'']" @click="chooseGameLevel(1)">3000步赛</div> <!-- 信息广播 -->
<div :class="['level-item', choosedLevel===2?'active':'']" @click="chooseGameLevel(2)">5000步赛</div> <NoticeBonus class="notice-broadcast"></NoticeBonus>
<div :class="['level-item', choosedLevel===3?'active':'']" @click="chooseGameLevel(3)">8000步赛</div> <!-- 挑战赛卡片 -->
<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}}期 - 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>
<!-- 左上角查看步数按钮 --> <div class="info-item">
<!-- <img class="view-steps-btn" src="../images/SignUp/sy_bushu.png"> --> <div class="item-title">参与人数</div>
<!-- 信息广播 --> <div class="item-content">{{item.total_signup || 0}}</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 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>
</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: 2 };
} },
}, created() {
created() { this.getPageData();
let grade = Number(sessionStorage.getItem("bushuType")) },
if(grade){ methods: {
// console.log('grade',grade) goOtherPage(pageName) {
this.getPageData(grade) console.log("pageName", pageName);
}else{ this.$router.push({ name: pageName });
// console.log('grade 0',grade) },
this.getPageData(this.choosedLevel) goWhereDetail(item) {
if (item.status === 1 && item.already_join === 1) {
// 已报名
this.$router.push({
name: "HaveJoinedGame",
query: {
week: item.week
}
});
} else {
// 比赛中或者已结束
if (item.already_join === 1) {
// 已报名
this.$router.push({
name: "HaveJoinedGame",
query: {
week: item.week
} }
}, });
mounted() { } else {
//获取步数tab缓存 // 未报名
let LastLevel = Number(sessionStorage.getItem("bushuType")) sessionStorage.setItem("ChallengeDetailData", JSON.stringify(item));
if (LastLevel) { this.$router.push({ name: "ChallengeDetail" });
this.choosedLevel = LastLevel }
} else { }
sessionStorage.setItem("bushuType", this.choosedLevel) },
} getPageData() {
}, daka_index().then(res => {
methods: { if (res.code === 0) {
chooseGameLevel(level) { res.data.forEach(item => {
sessionStorage.setItem("bushuType", level) item.action = item.week.substring(item.week.length - 4);
this.choosedLevel = level });
this.getPageData(level) this.gameList = res.data;
}, console.log("gameList", this.gameList);
goOtherPage(pageName) { }
console.log('pageName', pageName) });
this.$router.push({name: pageName}) },
}, togglePayFail() {
goWhereDetail(item) { this.isShowPayFail = !this.isShowPayFail;
if (item.status === 1 && item.already_join === 1) { // 已报名 },
this.$router.push({ showSuccess() {
name: 'HaveJoinedGame', this.showModal("温馨提示", "报名成功", {
query: { scb: () => {
week: item.week if (this.isFollow == 1) {
} this.$router.push({ name: "Read" });
}) } else {
} else { // 比赛中或者已结束 this.$router.push({ name: "Success" });
if (item.already_join === 1) { // 已报名 }
this.$router.push({ }
name: 'HaveJoinedGame', });
query: { },
week: item.week confirmModal(scb) {
} scb && scb();
}) this.modalShown = false;
} else { // 未报名 },
sessionStorage.setItem('ChallengeDetailData', JSON.stringify(item)) showFree(e) {
this.$router.push({name: 'ChallengeDetail'}) e.stopPropagation();
} track("free_contract_show");
} if (localStorage.getItem("first_show_free") == 1) {
}, localStorage.setItem("first_show_free", 2);
getPageData(grade = 1) { this.canShowFree = false;
daka_index(grade).then(res => { } else {
if (res.code === 0) { this.canCheckShowFree = false;
res.data.forEach(item => { this.canShowFree = false;
item.action = item.week.substring(item.week.length - 4) }
}) userCards().then(res => {
this.gameList = res.data console.log("获取免契约金数据", res);
console.log('gameList', this.gameList) let data = {
} card: res.data.contract_card,
}) cnt: res.data.contract_cnt
}, };
togglePayFail() { this.current_date = new Date(res.date);
this.isShowPayFail = !this.isShowPayFail // 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 //微信签名
}, },
showSuccess() { // result,
res => {
console.log("支付调用结果", res);
if (res.err_msg == "get_brand_wcpay_request:ok") {
// 使用以上方式判断前端返回,微信团队郑重提示：
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
// 支付成功后的回调函数
console.log("支付成功");
this.showModal("温馨提示", "报名成功", { this.showModal("温馨提示", "报名成功", {
scb: () => { scb: () => {
if (this.isFollow == 1) { if (this.isFollow == 1) {
this.$router.push({name: "Read"}) this.$router.push({ name: "Read" });
} else { } else {
this.$router.push({name: "Success"}) this.$router.push({ name: "Success" });
}
} }
}) }
}, });
confirmModal(scb) { // this.dateSelect(2);
scb && scb() // localStorage.setItem("is_every", 0)
this.modalShown = false // location.replace("#/Success");
}, }
showFree(e) { if (res.err_msg == "get_brand_wcpay_request:fail") {
e.stopPropagation() // this.showModal("温馨提示", "支付服务繁忙，请稍后重试");
track("free_contract_show") this.togglePayFail();
if (localStorage.getItem("first_show_free") == 1) { }
localStorage.setItem("first_show_free", 2) if (res.err_msg == "get_brand_wcpay_request:cancel") {
this.canShowFree = false // console.log("支付取消");
} else { this.togglePayFail();
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; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.top-nav-level { .view-steps-btn {
flex-shrink: 0; flex-shrink: 0;
margin-top: 0.3rem; width: 1.11rem;
border: 0.02rem solid #fff; height: 0.84rem;
border-radius: 0.1rem; display: block;
overflow: hidden; position: absolute;
background: #fff; left: 0;
box-sizing: border-box; top: 1.22rem;
display: flex; }
.level-item { .notice-broadcast {
width: 1.76rem; flex-shrink: 0;
font-size: 0.3rem; margin: 4.3rem 0 0.18rem;
line-height: 0.54rem; }
color: #465895;
text-align: center;
position: relative;
&:after { .challenge-card {
content: ""; flex-shrink: 0;
height: 0.26rem; width: 6.9rem;
width: 0.02rem; height: 4.4rem;
background: #465895; background-image: url(../images/SignUp/sy_dikuang.png);
position: absolute; background-size: 100% 100%;
left: -0.02rem; margin-bottom: 0.4rem;
top: 50%; display: flex;
transform: translateY(-50%); flex-direction: column;
} align-items: center;
position: relative;
&:first-child:after { .corner-marker {
display: none; width: 1.39rem;
} height: 1.39rem;
position: absolute;
top: -0.02rem;
right: -0.02rem;
}
&.active { .card-title {
background: #465895; font-size: 0.34rem;
color: #fff; line-height: 1;
border-radius: 0.1rem; color: #fff;
font-weight: bold; margin-top: 0.28rem;
} }
&.active:after { .card-time {
display: none; background: rgba(0, 0, 0, 0.1);
} padding: 0 0.24rem;
} border-radius: 0.24rem;
} height: 0.46rem;
display: flex;
align-items: center;
font-size: 0.26rem;
font-family: Helvetica;
color: #fff;
margin-top: 0.16rem;
}
.view-steps-btn { .card-info {
flex-shrink: 0; width: 100%;
width: 1.11rem; margin-top: 0.7rem;
height: 0.84rem; display: flex;
display: block; align-items: center;
position: absolute; justify-content: space-between;
left: 0; .info-item {
top: 1.22rem; flex: 1;
} border-left: 0.02rem solid #fff;
display: flex;
flex-direction: column;
align-items: center;
.notice-broadcast { &:first-child {
flex-shrink: 0; border-left: none;
margin: 3.68rem 0 0.18rem;
} }
.challenge-card { .item-title {
flex-shrink: 0; font-size: 0.28rem;
width: 6.9rem; line-height: 0.8;
height: 4.4rem; color: #fff;
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 { .item-content {
font-size: 0.48rem; font-size: 0.48rem;
line-height: 0.8; line-height: 0.8;
color: #fff; color: #fff;
margin-top: 0.12rem; margin-top: 0.12rem;
} }
.item-money { .item-money {
font-size: 0.48rem; font-size: 0.48rem;
line-height: 0.8; line-height: 0.8;
color: #fcf776; color: #fcf776;
margin-top: 0.12rem; margin-top: 0.12rem;
} }
} }
} }
.statusnormal { .statusnormal {
position:absolute; position: absolute;
bottom: 0.38rem; bottom: 0.38rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-content: center; align-content: center;
color: #fff; color: #fff;
font-size: 0.34rem; font-size: 0.34rem;
font-weight: 600; font-weight: 600;
img { img {
display: flex; display: flex;
margin-left: 4px; margin-left: 4px;
width: 15px; width: 15px;
height: 15px; height: 15px;
} }
} }
.card-btn { .card-btn {
width: 4rem; width: 4rem;
height: 0.88rem; height: 0.88rem;
background: #fabd21; background: #fabd21;
border-radius: 0.74rem; border-radius: 0.74rem;
box-shadow: 0 0.02rem 0.04rem 0 rgba(0, 0, 0, 0.2); box-shadow: 0 0.02rem 0.04rem 0 rgba(0, 0, 0, 0.2);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 0.3rem; font-size: 0.3rem;
font-weight: bold; font-weight: bold;
letter-spacing: 0.01rem; letter-spacing: 0.01rem;
line-height: 1; line-height: 1;
color: #fff; color: #fff;
position: absolute; position: absolute;
bottom: 0.38rem; bottom: 0.38rem;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
.card-btn-tip { .card-btn-tip {
font-size: 0.22rem; font-size: 0.22rem;
margin-top: 0.06rem; margin-top: 0.06rem;
font-weight: normal; font-weight: normal;
} }
.btn-title { .btn-title {
font-size: .34rem; font-size: 0.34rem;
font-weight: bold; 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