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 451 additions and 361 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 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-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 class="text2" @click="goOtherPage('Rule')">《步数打卡的挑战规则协议》</div>
</div>
<div class="partake-btn" @click="payToSign()">立即报名</div>
</div>
</div> </div>
<div class="footer-container" v-if="currentPage()==='PartakeChallenge'"> </div>
<div class="auth-container" @click="bindArgeement()"> <div class="game-choose-section">
<div style="display: flex;"> <div class="choose-title">挑战天数</div>
<img class="auth-checked" src="../images/PartakeChallenge/ic_choose.png" v-if="argeement"> <div class="choose-content">
<div class="auth-uncheck" v-else></div> <div v-for="(item, index) in partakeDayList" :class="['choose-option', index===partakeDayIndex?'check':'']" @click="chooseAttribute('partakeDayIndex', index)">{{item.days}}天</div>
<div class="text1">我同意</div>
</div>
<div class="text2" @click="goOtherPage('Rule')">《步数打卡的挑战规则协议》</div>
</div>
<div class="partake-btn" @click="payToSign()">立即报名</div>
</div> </div>
<PayFailModal v-if="isShowPayFail" @close="togglePayFail()"></PayFailModal> </div>
<div class="modal" v-if="modalShown"> <div class="game-choose-section">
<Modal v-on:close="closeModal" v-on:confirmModal="confirmModal" v-bind:title="modalTitle" <div class="choose-title">每日契约金</div>
v-bind:desc="modalDesc" :option="modalOption"></Modal> <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="modal" v-if="showFreeModal"> </div>
<Free <div class="game-total-fee-container">
v-bind:page_type="1" <div class="game-fee-section">
v-on:close="closeFree" <div class="game-fee-title">需支付金额(元)</div>
v-bind:v_data="contract_data" <div class="game-fee-amount">{{payMoney|moneyFormatter}}</div>
@showModal="showModal"
@success="showSuccess"
:days="0"
></Free>
</div> </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 class="game-partake-time">比赛时间：{{startTime}} 00:00 — {{endTime}} 24:00</div>
<div class="game-partake-btn" @click="payToSign()">立即报名</div>
<div class="game-auth-container" @click="bindArgeement()">
<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 class="text2" @click.stop="goOtherPage('Rule')">《步数打卡的挑战规则协议》</div>
</div>
</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 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>
<div class="modal" v-if="modalShown">
<Modal v-on:close="closeModal" v-on:confirmModal="confirmModal" v-bind:title="modalTitle" v-bind:desc="modalDesc" :option="modalOption"></Modal>
</div> </div>
<div class="modal" v-if="showFreeModal">
<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>
</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 {
name: "PartakeChallenge",
components: {
Title,
PayFailModal,
Modal,
Free
},
data () {
return {
isShowPayFail: false,
showFreeModal: false,
modalTitle: "",
modalDesc: "",
modalShown: false,
argeement: true,
daka_info: {
start_format: '',
end_format: '',
money: 0,
target_step: 3000
},
daka_faq: {
} export default {
} name: "PartakeChallenge",
}, components: {
created () { Title,
this.getPageData() PayFailModal,
}, Modal,
methods: { Free
goback () { },
history.go(-1) data() {
}, return {
goOtherPage (pageName) { isShowPayFail: false,
this.$router.push({name: pageName}) showFreeModal: false,
}, modalTitle: "",
currentPage () { modalDesc: "",
return this.$router.history.current.name modalShown: false,
}, argeement: true,
togglePayFail () { startTime: '',
this.isShowPayFail = !this.isShowPayFail endTime: '',
}, partakeStepList: [],
payToSign () { partakeStepIndex: 0,
if(!this.argeement){ partakeDayList: [],
this.showModal("温馨提示", '请先同意协议') partakeDayIndex: 0,
return partakeMoneyList: [],
} partakeMoneyIndex: 0,
let nextGame = 0 payMoney: 0,
if (this.$route.query.nextGame) { preMinMoney: 0,
nextGame = 2 preMaxMoney: 0,
} startTimeStamp: 0,
dakaPay(nextGame).then(response => { };
if (response.code == 1) { },
this.showModal("温馨提示", response.msg) created() {
return this.getPageData();
} },
let result = response.data methods: {
console.log("请求打卡支付数据", result) // 加载页面数据
if (result) { getPageData() {
WeixinJSBridge.invoke( daka_info().then(res => {
"getBrandWCPayRequest", const resData = res.data;
{ if (res.code === 0) {
appId: result.appId, //公众号名称，由商户传入 this.startTimeStamp = resData.period;
timeStamp: result.timeStamp, //时间戳，自1970年以来的秒数 this.partakeStepList = resData.config.step;
nonceStr: result.nonceStr, //随机串 this.partakeDayList = resData.config.days;
package: result.package, this.partakeMoneyList = resData.config.money;
signType: result.signType, //微信签名方式： // 计算格式化开始日期
paySign: result.paySign //微信签名 const startDate = new Date(this.startTimeStamp * 1000);
}, this.startTime = (startDate.getMonth() + 1) + '月' + startDate.getDate() + '日';
// result, this.calcMoney();
res => { this.calcDate();
console.log("支付调用结果", res) }
if (res.err_msg == "get_brand_wcpay_request:ok") { });
// 使用以上方式判断前端返回,微信团队郑重提示： },
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。 // 选择参赛信息
// 支付成功后的回调函数 chooseAttribute(type, index) {
console.log("支付成功") this[type] = index;
this.showSuccess() this.calcMoney();
// this.dateSelect(2); if (type === 'partakeDayIndex') {
// localStorage.setItem("is_every", 0) this.calcDate();
// location.replace("#/Success"); }
} },
if (res.err_msg == "get_brand_wcpay_request:fail") { // 计算金额和收益
// this.showModal("温馨提示", "支付服务繁忙，请稍后重试"); calcMoney() {
this.togglePayFail() 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;
if (res.err_msg == "get_brand_wcpay_request:cancel") { this.preMaxMoney = (this.partakeStepList[this.partakeStepIndex].rate2 + this.partakeDayList[this.partakeDayIndex].rate2 + this.partakeMoneyList[this.partakeMoneyIndex].rate2) / 100 * this.payMoney + this.payMoney;
// console.log("支付取消"); },
this.togglePayFail() // 计算格式化结束日期
} calcDate() {
} const endDate = new Date(this.startTimeStamp * 1000 + (86400000 * this.partakeDayList[this.partakeDayIndex].days));
) this.endTime = (endDate.getMonth() + 1) + '月' + endDate.getDate() + '日';
} },
}) // 返回上一页
}, goback() {
showModal (title, desc, option) { history.go(-1);
this.modalTitle = title || "" },
this.modalDesc = desc || "" // 页面跳转
this.modalOption = option || {} goOtherPage(pageName) {
this.modalShown = true this.$router.push({ name: pageName });
}, },
showSuccess () { // 当前页面是否是tabbar页
sessionStorage.setItem('userHaveJoinGame', 'true') currentPage() {
sessionStorage.setItem('userHavePaidGame', 'true'); return this.$router.history.current.name;
this.$router.push({name: "HaveJoinedGame"}) },
// this.showModal("温馨提示", "报名成功", { // 弹框
// scb: () => { togglePayFail() {
// sessionStorage.setItem('userHaveJoinGame', 'true') this.isShowPayFail = !this.isShowPayFail;
// sessionStorage.setItem('userHavePaidGame', 'true'); },
// } // 立即报名
// }) payToSign() {
}, if (!this.argeement) {
closeFree () { return this.showModal("温馨提示", "请先同意协议");
this.showFreeModal = false }
}, let nextGame = 0;
closeModal () { if (this.$route.query.nextGame) {
this.modalShown = false nextGame = 2;
}, }
confirmModal (scb) { const paramStep = this.partakeStepList[this.partakeStepIndex].step;
scb && scb() const paramDay = this.partakeDayList[this.partakeDayIndex].days;
this.modalShown = false const paramMoney = this.partakeMoneyList[this.partakeMoneyIndex].money;
}, dakaPay(paramStep, paramDay, paramMoney, nextGame).then(response => {
bindArgeement () { if (response.code == 1) {
console.log('我同意') return this.showModal("温馨提示", response.msg);
this.argeement = !this.argeement }
const result = response.data;
if (result) {
WeixinJSBridge.invoke(
"getBrandWCPayRequest",
{
appId: result.appId, //公众号名称，由商户传入
timeStamp: result.timeStamp, //时间戳，自1970年以来的秒数
nonceStr: result.nonceStr, //随机串
package: result.package,
signType: result.signType, //微信签名方式：
paySign: result.paySign //微信签名
}, },
getPageData(){ res => {
daka_info().then(res=>{ console.log("支付调用结果", res);
console.log('daka_info',res) if (res.err_msg === "get_brand_wcpay_request:ok") {
if(res.code == 0){ // 使用以上方式判断前端返回,微信团队郑重提示：
console.log('立即参与',res) // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
console.log(typeof res.data.daka_info) // 支付成功后的回调函数
this.daka_info = res.data.daka_info console.log("支付成功");
this.daka_faq = res.data.daka_faq this.showSuccess();
} } else if (res.err_msg === "get_brand_wcpay_request:fail" || res.err_msg === "get_brand_wcpay_request:cancel") {
}) // 支付服务繁忙，请稍后重试 || 支付取消
} this.togglePayFail();
}, }
filters: {
moneyFormatter(val) {
if (val && !isNaN(val)) {
return Number(val).toFixed(2);
} else {
return "0.00";
}
} }
);
} }
});
},
// 弹窗
showModal(title, desc, option) {
this.modalTitle = title || "";
this.modalDesc = desc || "";
this.modalOption = option || {};
this.modalShown = true;
},
// 弹窗
showSuccess() {
sessionStorage.setItem("userHaveJoinGame", "true");
sessionStorage.setItem("userHavePaidGame", "true");
this.$router.push({ name: "HaveJoinedGame" });
// this.showModal("温馨提示", "报名成功", {
// scb: () => {
// sessionStorage.setItem('userHaveJoinGame', 'true')
// sessionStorage.setItem('userHavePaidGame', 'true');
// }
// })
},
// 弹窗
closeFree() {
this.showFreeModal = false;
},
// 弹窗
closeModal() {
this.modalShown = false;
},
// 弹窗
confirmModal(scb) {
scb && scb();
this.modalShown = false;
},
// 同意规则协议
bindArgeement() {
this.argeement = !this.argeement;
}
},
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>
.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);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100%; background-size: 100%;
background-position: center top; background-position: center top;
display: flex;
flex-direction: column;
align-items: center;
.page-title {
position: fixed;
left: 0;
top: 0;
}
.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;
line-height: 1;
color: #333;
font-weight: bold;
margin-bottom: .1rem;
}
.game-choose-section {
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;
color: #333;
flex: 1;
}
.choose-content {
width: 4.6rem;
flex-shrink: 0;
display: flex; display: flex;
flex-direction: column; .choose-option {
align-items: center; flex: 1;
/*align-content: center;*/ height: .54rem;
.page-title { font-size: .3rem;
position: fixed; line-height: .54rem;
left: 0; color: #888;
top: 0; text-align: center;
} border: .01rem solid #888;
.game-title { box-sizing: border-box;
font-size: .36rem; margin-left: .2rem;
line-height: 1; &:first-child {
margin-left: 0;
}
&.check {
background: #07C9D1;
border-color: #07C9D1;
color: #fff; color: #fff;
font-weight: bold; }
margin-top: 4.4rem;
}
.game-time {
font-size: .24rem;
line-height: 1;
color: #D6DFFF;
padding: .12rem .38rem;
border-radius: .48rem;
background: #556CB6;
margin-top: .14rem;
} }
.game-cost { }
font-size: .26rem; }
line-height: 1; .game-total-fee-container {
color: #fff; background: rgba(250, 189, 33,.04);
margin-top: .34rem; border: .01rem solid #FFCE51;
span { margin-top: .1rem;
color: #FFE253; display: flex;
} .game-fee-section {
width: 3rem;
padding: .4rem 0;
box-sizing: border-box;
text-align: center;
.game-fee-title {
font-size: .26rem;
line-height: 1;
color: #A5A5A5;
} }
.game-introduce-container { .game-fee-amount {
width: 7.1rem; font-size: .42rem;
border-radius: .08rem; line-height: .8;
padding: .36rem .28rem .3rem; color: #FABD21;
box-sizing: border-box; margin-top: .2rem;
background: #fff;
margin-top: .34rem;
margin-bottom: 1.6rem;
display: flex;
flex-direction: column;
align-items: center;
.game-introduce-title {
display: flex;
align-items: flex-end;
font-size: .3rem;
line-height: 1;
color: #333;
margin-bottom: .24rem;
flex-shrink: 0;
img {
width: .26rem;
height: .35rem;
margin-right: .08rem;
}
}
.game-introduce-section {
width: 100%;
margin-top: .34rem;
display: flex;
align-items: flex-start;
flex-shrink: 0;
&:last-of-type .section-content {
border-bottom: none;
}
.section-icon {
width: .8rem;
height: .8rem;
flex-shrink: 0;
margin-right: .3rem;
}
.section-content {
flex: 1;
border-bottom: .01rem solid #e5e5e5;
.content-title {
font-size: .3rem;
line-height: 1;
color: #333;
}
.content-text {
font-size: .24rem;
line-height: .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; .game-partake-time {
left: 0; font-size: .24rem;
bottom: 0; line-height: 1;
.partake-btn { color: #5A5A5A;
width: 100%; margin-top: .4rem;
background: #FABD21; }
font-size: .36rem; .game-partake-btn {
line-height: .88rem; width: 5.6rem;
color: #fff; height: 0.88rem;
font-weight: bold; border-radius: 0.88rem;
text-align: center; background: #fabd21;
} font-size: 0.36rem;
line-height: 0.88rem;
color: #fff;
font-weight: bold;
text-align: center;
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 {
width: 7.1rem;
border-radius: 0.08rem;
padding: 0.36rem 0.28rem 0.3rem;
box-sizing: border-box;
background: #fff;
margin: .2rem 0 .4rem;
display: flex;
flex-direction: column;
align-items: center;
.game-introduce-title {
display: flex;
align-items: flex-end;
font-size: 0.3rem;
line-height: 1;
color: #333;
margin-bottom: 0.24rem;
flex-shrink: 0;
img {
width: 0.26rem;
height: 0.35rem;
margin-right: 0.08rem;
}
}
.game-introduce-section {
width: 100%;
margin-top: 0.34rem;
display: flex;
align-items: flex-start;
flex-shrink: 0;
&:last-of-type .section-content {
border-bottom: none;
}
.section-icon {
width: 0.8rem;
height: 0.8rem;
flex-shrink: 0;
margin-right: 0.3rem;
}
.section-content {
flex: 1;
border-bottom: 0.01rem solid #e5e5e5;
.content-title {
font-size: 0.3rem;
line-height: 1;
color: #333;
} }
.auth-container { .content-text {
width: 100%; font-size: 0.24rem;
height: .52rem; line-height: 0.36rem;
background: #F2F2F2; color: #999;
display: flex; margin: 0.16rem 0 0.14rem;
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;
margin: 0 .1rem;
}
.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