Skip to content

W
walk_daka_h5
Commit a1bd37d5 by Caiyijun
Options

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

parents ad573325 fcc08147
Showing with 317 additions and 227 deletions
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(days,use_contract) { export function dakaPay(paramStep, paramDay, paramMoney, nextGame, 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,7 +173,10 @@ export function dakaPay(days,use_contract) { ...@@ -173,7 +173,10 @@ export function dakaPay(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: nextGame || 0,
challenge_step: paramStep,
all_days: paramDay,
capital: paramMoney,
} }
}) })
} }
......
src/views/PartakeChallenge.vue
<template> <template>
<div class="partake-challenge-page"> <div class="partake-challenge-page">
<Title class="page-title" title="　" v-on:goback="goback" show_back="true" <Title class="page-title" title="　" v-on:goback="goback" show_back="true" v-if="currentPage()==='PartakeChallenge'"></Title>
v-if="currentPage()==='PartakeChallenge'"></Title> <!-- 每日运动打卡耐力赛 -->
<div class="game-title">{{daka_info.target_step}}步三日耐力赛</div> <div class="game-partake-container">
<div class="game-time">开赛时间：{{daka_info.start_format}}-{{daka_info.end_format}}</div> <div class="game-partake-title">每日运动打卡耐力赛</div>
<div class="game-cost">本期运动契约金：<span>{{daka_info.money|moneyFormatter}}元/人</span></div> <div class="game-choose-section">
<div class="game-introduce-container"> <div class="choose-title">每日达标</div>
<div class="game-introduce-title"> <div class="choose-content">
<img src="../images/PartakeChallenge/ic_3.png"> <div v-for="(item, index) in partakeStepList" :class="['choose-option', index===partakeStepIndex?'check':'']" @click="chooseAttribute('partakeStepIndex', index)">{{item.step}}</div>
步赚取运动奖励金
</div> </div>
<div class="game-introduce-section" v-for="(item,index) in daka_faq">
<img class="section-icon" :src="require(`../images/PartakeChallenge/q${index+1}.png`)">
<div class="section-content">
<div class="content-title">{{item[0]}}</div>
<div class="content-text">{{item[1]}}</div>
</div> </div>
<div class="game-choose-section">
<div class="choose-title">挑战天数</div>
<div class="choose-content">
<div v-for="(item, index) in partakeDayList" :class="['choose-option', index===partakeDayIndex?'check':'']" @click="chooseAttribute('partakeDayIndex', index)">{{item.days}}天</div>
</div>
</div>
<div class="game-choose-section">
<div class="choose-title">每日契约金</div>
<div class="choose-content">
<div v-for="(item, index) in partakeMoneyList" :class="['choose-option', index===partakeMoneyIndex?'check':'']" @click="chooseAttribute('partakeMoneyIndex', index)">{{item.money}}天</div>
</div> </div>
<div class="game-introduce-join-container" v-if="currentPage()!=='PartakeChallenge'">
<div class="auth-container" @click="bindArgeement()">
<div style="display: flex;">
<img class="auth-checked" src="../images/PartakeChallenge/ic_choose.png" v-if="argeement">
<div class="auth-uncheck" v-else></div>
<div class="text1">我同意</div>
</div> </div>
<div class="text2" @click="goOtherPage('Rule')">《步数打卡的挑战规则协议》</div> <div class="game-total-fee-container">
<div class="game-fee-section">
<div class="game-fee-title">需支付金额(元)</div>
<div class="game-fee-amount">{{payMoney|moneyFormatter}}</div>
</div> </div>
<div class="partake-btn" @click="payToSign()">立即报名</div> <div class="game-fee-section">
<div class="game-fee-title">预计收益(元)</div>
<div class="game-fee-amount">{{preMinMoney|moneyFormatter}}-{{preMaxMoney|moneyFormatter}}</div>
</div> </div>
</div> </div>
<div class="footer-container" v-if="currentPage()==='PartakeChallenge'"> <div class="game-partake-time">比赛时间：{{startTime}} 00:00 — {{endTime}} 24:00</div>
<div class="auth-container" @click="bindArgeement()"> <div class="game-partake-btn" @click="payToSign()">立即报名</div>
<div style="display: flex;"> <div class="game-auth-container" @click="bindArgeement()">
<img class="auth-checked" src="../images/PartakeChallenge/ic_choose.png" v-if="argeement"> <img class="auth-checked" src="../images/PartakeChallenge/ic_choose.png" v-if="argeement">
<div class="auth-uncheck" v-else></div> <div class="auth-uncheck" v-else></div>
<div class="text1">我同意</div> <div class="text1">我同意</div>
<div class="text2" @click.stop="goOtherPage('Rule')">《步数打卡的挑战规则协议》</div>
</div> </div>
<div class="text2" @click="goOtherPage('Rule')">《步数打卡的挑战规则协议》</div>
</div> </div>
<div class="partake-btn" @click="payToSign()">立即报名</div> <!-- 3步赚取运动奖励金 -->
<div class="game-introduce-container" :style="currentPage()!=='PartakeChallenge'?'margin-bottom: 1.4rem;':''">
<div class="game-introduce-title">
<img src="../images/PartakeChallenge/ic_3.png">
步赚取运动奖励金
</div>
<div class="game-introduce-section">
<img class="section-icon" src="../images/PartakeChallenge/q1.png">
<div class="section-content">
<div class="content-title">报名参赛</div>
<div class="content-text">支付{{payMoney|moneyFormatter}}元运动契约金，即可加入{{partakeStepList.length&&partakeStepList[partakeStepIndex].step}}步日耐力赛，契约金平均分配到每个比赛日，每日结算1次。</div>
</div>
</div>
<div class="game-introduce-section">
<img class="section-icon" src="../images/PartakeChallenge/q2.png">
<div class="section-content">
<div class="content-title">运动达标</div>
<div class="content-text">每日走满{{partakeStepList.length&&partakeStepList[partakeStepIndex].step}}步即可达标，获得当日奖励资格；</div>
<div class="content-text">未达标用户将失去后续比赛的参赛资格，其契约金将继续作为奖励金奖励达标用户。</div>
</div> </div>
</div>
<div class="game-introduce-section">
<img class="section-icon" src="../images/PartakeChallenge/q3.png">
<div class="section-content">
<div class="content-title">获得奖励</div>
<div class="content-text">次日结算前日比赛，达标者将获得对应奖励金；总奖励金为用户每日达标奖金之和。</div>
</div>
</div>
</div>
<!-- 弹框 -->
<PayFailModal v-if="isShowPayFail" @close="togglePayFail()"></PayFailModal> <PayFailModal v-if="isShowPayFail" @close="togglePayFail()"></PayFailModal>
<div class="modal" v-if="modalShown"> <div class="modal" v-if="modalShown">
<Modal v-on:close="closeModal" v-on:confirmModal="confirmModal" v-bind:title="modalTitle" <Modal v-on:close="closeModal" v-on:confirmModal="confirmModal" v-bind:title="modalTitle" v-bind:desc="modalDesc" :option="modalOption"></Modal>
v-bind:desc="modalDesc" :option="modalOption"></Modal>
</div> </div>
<div class="modal" v-if="showFreeModal"> <div class="modal" v-if="showFreeModal">
<Free <Free v-bind:page_type="1" v-on:close="closeFree" v-bind:v_data="contract_data" @showModal="showModal" @success="showSuccess" :days="0"></Free>
v-bind:page_type="1"
v-on:close="closeFree"
v-bind:v_data="contract_data"
@showModal="showModal"
@success="showSuccess"
:days="0"
></Free>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import Title from "@/components/Title.vue" import Title from "@/components/Title.vue";
import PayFailModal from "@/components/PayFailModal.vue" import PayFailModal from "@/components/PayFailModal.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 {daka_info} from "@/components/axios/api"; import { daka_info } from "@/components/axios/api";
import { import { dakaPay } from "@/components/axios/api";
dakaPay
} from "@/components/axios/api"
export default { export default {
name: "PartakeChallenge", name: "PartakeChallenge",
components: { components: {
Title, Title,
...@@ -76,7 +97,7 @@ ...@@ -76,7 +97,7 @@
Modal, Modal,
Free Free
}, },
data () { data() {
return { return {
isShowPayFail: false, isShowPayFail: false,
showFreeModal: false, showFreeModal: false,
...@@ -84,49 +105,93 @@ ...@@ -84,49 +105,93 @@
modalDesc: "", modalDesc: "",
modalShown: false, modalShown: false,
argeement: true, argeement: true,
daka_info: { startTime: '',
start_format: '', endTime: '',
end_format: '', partakeStepList: [],
money: 0, partakeStepIndex: 0,
target_step: 3000 partakeDayList: [],
partakeDayIndex: 0,
partakeMoneyList: [],
partakeMoneyIndex: 0,
payMoney: 0,
preMinMoney: 0,
preMaxMoney: 0,
startTimeStamp: 0,
};
}, },
daka_faq: { created() {
this.getPageData();
} },
methods: {
// 加载页面数据
getPageData() {
daka_info().then(res => {
const resData = res.data;
if (res.code === 0) {
this.startTimeStamp = resData.period;
this.partakeStepList = resData.config.step;
this.partakeDayList = resData.config.days;
this.partakeMoneyList = resData.config.money;
// 计算格式化开始日期
const startDate = new Date(this.startTimeStamp * 1000);
this.startTime = (startDate.getMonth() + 1) + '月' + startDate.getDate() + '日';
this.calcMoney();
this.calcDate();
}
});
},
// 选择参赛信息
chooseAttribute(type, index) {
this[type] = index;
this.calcMoney();
if (type === 'partakeDayIndex') {
this.calcDate();
} }
}, },
created () { // 计算金额和收益
this.getPageData() calcMoney() {
this.payMoney = this.partakeDayList[this.partakeDayIndex].days * this.partakeMoneyList[this.partakeMoneyIndex].money;
this.preMinMoney = (this.partakeStepList[this.partakeStepIndex].rate1 + this.partakeDayList[this.partakeDayIndex].rate1 + this.partakeMoneyList[this.partakeMoneyIndex].rate1) / 100 * this.payMoney + this.payMoney;
this.preMaxMoney = (this.partakeStepList[this.partakeStepIndex].rate2 + this.partakeDayList[this.partakeDayIndex].rate2 + this.partakeMoneyList[this.partakeMoneyIndex].rate2) / 100 * this.payMoney + this.payMoney;
}, },
methods: { // 计算格式化结束日期
goback () { calcDate() {
history.go(-1) const endDate = new Date(this.startTimeStamp * 1000 + (86400000 * this.partakeDayList[this.partakeDayIndex].days));
this.endTime = (endDate.getMonth() + 1) + '月' + endDate.getDate() + '日';
},
// 返回上一页
goback() {
history.go(-1);
}, },
goOtherPage (pageName) { // 页面跳转
this.$router.push({name: pageName}) goOtherPage(pageName) {
this.$router.push({ name: pageName });
}, },
currentPage () { // 当前页面是否是tabbar页
return this.$router.history.current.name currentPage() {
return this.$router.history.current.name;
}, },
togglePayFail () { // 弹框
this.isShowPayFail = !this.isShowPayFail togglePayFail() {
this.isShowPayFail = !this.isShowPayFail;
}, },
payToSign () { // 立即报名
if(!this.argeement){ payToSign() {
this.showModal("温馨提示", '请先同意协议') if (!this.argeement) {
return return this.showModal("温馨提示", "请先同意协议");
} }
let nextGame = 0 let nextGame = 0;
if (this.$route.query.nextGame) { if (this.$route.query.nextGame) {
nextGame = 2 nextGame = 2;
} }
dakaPay(nextGame).then(response => { const paramStep = this.partakeStepList[this.partakeStepIndex].step;
const paramDay = this.partakeDayList[this.partakeDayIndex].days;
const paramMoney = this.partakeMoneyList[this.partakeMoneyIndex].money;
dakaPay(paramStep, paramDay, paramMoney, nextGame).then(response => {
if (response.code == 1) { if (response.code == 1) {
this.showModal("温馨提示", response.msg) return this.showModal("温馨提示", response.msg);
return
} }
let result = response.data const result = response.data;
console.log("请求打卡支付数据", result)
if (result) { if (result) {
WeixinJSBridge.invoke( WeixinJSBridge.invoke(
"getBrandWCPayRequest", "getBrandWCPayRequest",
...@@ -138,42 +203,35 @@ ...@@ -138,42 +203,35 @@
signType: result.signType, //微信签名方式： signType: result.signType, //微信签名方式：
paySign: result.paySign //微信签名 paySign: result.paySign //微信签名
}, },
// result,
res => { res => {
console.log("支付调用结果", res) console.log("支付调用结果", res);
if (res.err_msg == "get_brand_wcpay_request:ok") { if (res.err_msg === "get_brand_wcpay_request:ok") {
// 使用以上方式判断前端返回,微信团队郑重提示： // 使用以上方式判断前端返回,微信团队郑重提示：
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。 // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
// 支付成功后的回调函数 // 支付成功后的回调函数
console.log("支付成功") console.log("支付成功");
this.showSuccess() this.showSuccess();
// this.dateSelect(2); } else if (res.err_msg === "get_brand_wcpay_request:fail" || res.err_msg === "get_brand_wcpay_request:cancel") {
// localStorage.setItem("is_every", 0) // 支付服务繁忙，请稍后重试 || 支付取消
// location.replace("#/Success"); this.togglePayFail();
} }
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()
} }
} });
)
}
})
}, },
showModal (title, desc, option) { // 弹窗
this.modalTitle = title || "" showModal(title, desc, option) {
this.modalDesc = desc || "" this.modalTitle = title || "";
this.modalOption = option || {} this.modalDesc = desc || "";
this.modalShown = true this.modalOption = option || {};
this.modalShown = true;
}, },
showSuccess () { // 弹窗
sessionStorage.setItem('userHaveJoinGame', 'true') showSuccess() {
sessionStorage.setItem('userHavePaidGame', 'true'); sessionStorage.setItem("userHaveJoinGame", "true");
this.$router.push({name: "HaveJoinedGame"}) sessionStorage.setItem("userHavePaidGame", "true");
this.$router.push({ name: "HaveJoinedGame" });
// this.showModal("温馨提示", "报名成功", { // this.showModal("温馨提示", "报名成功", {
// scb: () => { // scb: () => {
// sessionStorage.setItem('userHaveJoinGame', 'true') // sessionStorage.setItem('userHaveJoinGame', 'true')
...@@ -181,30 +239,22 @@ ...@@ -181,30 +239,22 @@
// } // }
// }) // })
}, },
closeFree () { // 弹窗
this.showFreeModal = false closeFree() {
this.showFreeModal = false;
}, },
closeModal () { // 弹窗
this.modalShown = false closeModal() {
this.modalShown = false;
}, },
confirmModal (scb) { // 弹窗
scb && scb() confirmModal(scb) {
this.modalShown = false scb && scb();
this.modalShown = false;
}, },
bindArgeement () { // 同意规则协议
console.log('我同意') bindArgeement() {
this.argeement = !this.argeement this.argeement = !this.argeement;
},
getPageData(){
daka_info().then(res=>{
console.log('daka_info',res)
if(res.code == 0){
console.log('立即参与',res)
console.log(typeof res.data.daka_info)
this.daka_info = res.data.daka_info
this.daka_faq = res.data.daka_faq
}
})
} }
}, },
filters: { filters: {
...@@ -216,11 +266,11 @@ ...@@ -216,11 +266,11 @@
} }
} }
} }
} };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.partake-challenge-page { .partake-challenge-page {
min-height: 100vh; min-height: 100vh;
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);
...@@ -230,65 +280,165 @@ ...@@ -230,65 +280,165 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
/*align-content: center;*/
.page-title { .page-title {
position: fixed; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
} }
.game-title { .game-partake-container {
width: 7.1rem;
border-radius: 0.08rem;
padding: 0.3rem 0 0.4rem;
box-sizing: border-box;
background: #fff;
margin-top: 1.96rem;
display: flex;
flex-direction: column;
align-items: center;
.game-partake-title {
font-size: .36rem; font-size: .36rem;
line-height: 1; line-height: 1;
color: #fff; color: #333;
font-weight: bold; font-weight: bold;
margin-top: 4.4rem; margin-bottom: .1rem;
} }
.game-time { .game-choose-section {
font-size: .24rem; width: 6.3rem;
padding: .3rem 0;
box-sizing: border-box;
border-top: .01rem solid #ccc;
display: flex;
align-items: center;
&:nth-child(2) {
border-top: none;
}
.choose-title {
font-size: .3rem;
line-height: 1; line-height: 1;
color: #D6DFFF; color: #333;
padding: .12rem .38rem; flex: 1;
border-radius: .48rem;
background: #556CB6;
margin-top: .14rem;
} }
.game-cost { .choose-content {
width: 4.6rem;
flex-shrink: 0;
display: flex;
.choose-option {
flex: 1;
height: .54rem;
font-size: .3rem;
line-height: .54rem;
color: #888;
text-align: center;
border: .01rem solid #888;
box-sizing: border-box;
margin-left: .2rem;
&:first-child {
margin-left: 0;
}
&.check {
background: #07C9D1;
border-color: #07C9D1;
color: #fff;
}
}
}
}
.game-total-fee-container {
background: rgba(250, 189, 33,.04);
border: .01rem solid #FFCE51;
margin-top: .1rem;
display: flex;
.game-fee-section {
width: 3rem;
padding: .4rem 0;
box-sizing: border-box;
text-align: center;
.game-fee-title {
font-size: .26rem; font-size: .26rem;
line-height: 1; line-height: 1;
color: #A5A5A5;
}
.game-fee-amount {
font-size: .42rem;
line-height: .8;
color: #FABD21;
margin-top: .2rem;
}
}
}
.game-partake-time {
font-size: .24rem;
line-height: 1;
color: #5A5A5A;
margin-top: .4rem;
}
.game-partake-btn {
width: 5.6rem;
height: 0.88rem;
border-radius: 0.88rem;
background: #fabd21;
font-size: 0.36rem;
line-height: 0.88rem;
color: #fff; color: #fff;
margin-top: .34rem; font-weight: bold;
span { text-align: center;
color: #FFE253; margin-top: .2rem;
}
.game-auth-container {
margin-top: 0.2rem;
display: flex;
align-items: center;
.auth-checked {
width: 0.24rem;
height: 0.24rem;
}
.auth-uncheck {
width: 0.24rem;
height: 0.24rem;
border: 0.01rem solid #bfbfbf;
box-sizing: border-box;
border-radius: 50%;
}
.text1 {
font-size: 0.24rem;
line-height: 1;
color: #999;
margin-left: .1rem;
}
.text2 {
font-size: 0.24rem;
line-height: 1;
color: #576b95;
}
} }
} }
.game-introduce-container { .game-introduce-container {
width: 7.1rem; width: 7.1rem;
border-radius: .08rem; border-radius: 0.08rem;
padding: .36rem .28rem .3rem; padding: 0.36rem 0.28rem 0.3rem;
box-sizing: border-box; box-sizing: border-box;
background: #fff; background: #fff;
margin-top: .34rem; margin: .2rem 0 .4rem;
margin-bottom: 1.6rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.game-introduce-title { .game-introduce-title {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
font-size: .3rem; font-size: 0.3rem;
line-height: 1; line-height: 1;
color: #333; color: #333;
margin-bottom: .24rem; margin-bottom: 0.24rem;
flex-shrink: 0; flex-shrink: 0;
img { img {
width: .26rem; width: 0.26rem;
height: .35rem; height: 0.35rem;
margin-right: .08rem; margin-right: 0.08rem;
} }
} }
.game-introduce-section { .game-introduce-section {
width: 100%; width: 100%;
margin-top: .34rem; margin-top: 0.34rem;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
flex-shrink: 0; flex-shrink: 0;
...@@ -296,90 +446,27 @@ ...@@ -296,90 +446,27 @@
border-bottom: none; border-bottom: none;
} }
.section-icon { .section-icon {
width: .8rem; width: 0.8rem;
height: .8rem; height: 0.8rem;
flex-shrink: 0; flex-shrink: 0;
margin-right: .3rem; margin-right: 0.3rem;
} }
.section-content { .section-content {
flex: 1; flex: 1;
border-bottom: .01rem solid #e5e5e5; border-bottom: 0.01rem solid #e5e5e5;
.content-title { .content-title {
font-size: .3rem; font-size: 0.3rem;
line-height: 1; line-height: 1;
color: #333; color: #333;
} }
.content-text { .content-text {
font-size: .24rem; font-size: 0.24rem;
line-height: .36rem; line-height: 0.36rem;
color: #999;
margin: .16rem 0 .14rem;
}
}
}
.game-introduce-join-container {
flex-shrink: 0;
.auth-container {
background: transparent;
margin-top: .26rem;
}
.partake-btn {
width: 5.6rem;
height: .92rem;
border-radius: .92rem;
background: #FABD21;
font-size: .4rem;
line-height: .92rem;
color: #fff;
font-weight: bold;
text-align: center;
}
}
}
.footer-container {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
.partake-btn {
width: 100%;
background: #FABD21;
font-size: .36rem;
line-height: .88rem;
color: #fff;
font-weight: bold;
text-align: center;
}
}
.auth-container {
width: 100%;
height: .52rem;
background: #F2F2F2;
display: flex;
align-items: center;
justify-content: center;
.auth-checked {
width: .24rem;
height: .24rem;
}
.auth-uncheck {
width: .24rem;
height: .24rem;
border: .01rem solid #BFBFBF;
box-sizing: border-box;
border-radius: 50%;
}
.text1 {
font-size: .24rem;
line-height: 1;
color: #999; color: #999;
margin: 0 .1rem; margin: 0.16rem 0 0.14rem;
} }
.text2 {
font-size: .24rem;
line-height: 1;
color: #576B95;
} }
} }
} }
}
</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