Skip to content

W
walk_daka_h5
Commit 39102f26 by 穆启卓
Options

按钮边距

parent 19d3c513
Showing with 274 additions and 271 deletions
src/views/ChallengeDetail.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> <Title class="page-title" title="　" v-on:goback="goback" show_back="true"></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 class="game-bonus-container">
<div class="bonus-title" v-if="pageData.status !== 2">预计达标奖励金（元）</div>
<div class="bonus-title" v-else>达标奖励金（元）</div>
<div class="bonus-amount">{{pageData.bet_bonus}}</div>
</div>
<div class="game-title">{{pageData.action}}期耐力赛</div>
<div class="game-time">开赛时间：{{pageData.start_format}} — {{pageData.end_format}}</div>
<div class="hr"></div>
<div class="game-info-container">
<div class="game-info-section">
<div class="section-item">
<div class="item-value">{{pageData.total_money}}</div>
<div class="item-key">总奖励金（元）</div>
</div> </div>
<div class="game-bonus-container"> <div class="section-item">
<div class="bonus-title" v-if="pageData.status !== 2">预计达标奖励金（元）</div> <div class="item-value">{{pageData.bet_rate}}</div>
<div class="bonus-title" v-else>达标奖励金（元）</div> <div class="item-key">收益率</div>
<div class="bonus-amount">{{pageData.bet_bonus}}</div>
</div> </div>
<div class="game-title">{{pageData.action}}期耐力赛</div> </div>
<div class="game-time">开赛时间：{{pageData.start_format}} — {{pageData.end_format}}</div> <div class="game-info-section">
<div class="hr"></div> <div class="section-item">
<div class="game-info-container"> <div class="item-value">{{pageData.people_cnt}}</div>
<div class="game-info-section"> <div class="item-key">达标人数</div>
<div class="section-item">
<div class="item-value">{{pageData.total_money}}</div>
<div class="item-key">总奖励金（元）</div>
</div>
<div class="section-item">
<div class="item-value">{{pageData.bet_rate}}</div>
<div class="item-key">收益率</div>
</div>
</div>
<div class="game-info-section">
<div class="section-item">
<div class="item-value">{{pageData.people_cnt}}</div>
<div class="item-key">达标人数</div>
</div>
<div class="section-item">
<div class="item-value">{{pageData.total_signup}}</div>
<div class="item-key">参赛人数</div>
</div>
</div>
</div> </div>
<div class="share-btn" @click="inviteFriend">邀请好友来参赛</div> <div class="section-item">
<ShareModal <div class="item-value">{{pageData.total_signup}}</div>
v-on:close="closeShareModal" <div class="item-key">参赛人数</div>
v-if="showShareModal" </div>
></ShareModal> </div>
</div> </div>
<div class="share-btn" @click="inviteFriend">邀请好友来参赛</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 ShareModal from "@/components/ShareModal.vue" import ShareModal from "@/components/ShareModal.vue";
import {dakaPay, shareContent, track, liinShare} from "@/components/axios/api" import {
let grabStartTimer = null dakaPay,
export default { shareContent,
name: "ChallengeDetail", track,
components: { liinShare
Title, } from "@/components/axios/api";
ShareModal let grabStartTimer = null;
}, export default {
data () { name: "ChallengeDetail",
return { components: {
pageData: JSON.parse(sessionStorage.getItem('ChallengeDetailData')), Title,
showShareModal: false, ShareModal
userData: null, },
grabTimer: '--时--分--秒' data() {
} return {
}, pageData: JSON.parse(sessionStorage.getItem("ChallengeDetailData")),
mounted () { showShareModal: false,
console.log("this.pageType", this.pageData) userData: null,
if (window["userData"]) { grabTimer: "--时--分--秒"
this.userData = window["userData"] };
} else { },
let localUserData = localStorage.getItem("walk_userData") mounted() {
if (localUserData) { console.log("this.pageType", this.pageData);
window["userData"] = JSON.parse(localUserData) if (window["userData"]) {
this.userData = window["userData"] this.userData = window["userData"];
} } else {
} let localUserData = localStorage.getItem("walk_userData");
console.log("userData", this.userData) if (localUserData) {
}, window["userData"] = JSON.parse(localUserData);
methods: { this.userData = window["userData"];
goback () { }
history.go(-1)
},
goOtherPage (pageName) {
this.$router.push({name: pageName})
},
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)
this.showShareModal = false
},
fail: err => {
console.log("option4error", err)
this.showShareModal = false
}
}
// wx.onMenuShareTimeline(option4);
console.log("option", option1, option2, option3, option4)
})
},
closeShareModal () {
this.showShareModal = false
},
}
} }
console.log("userData", this.userData);
},
methods: {
goback() {
history.go(-1);
},
goOtherPage(pageName) {
this.$router.push({ name: pageName });
},
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);
this.showShareModal = false;
},
fail: err => {
console.log("option4error", err);
this.showShareModal = false;
}
};
// wx.onMenuShareTimeline(option4);
console.log("option", option1, option2, option3, option4);
});
},
closeShareModal() {
this.showShareModal = false;
}
}
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.partake-challenge-page { .partake-challenge-page {
width: 100%; width: 100%;
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; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
position: relative;
.page-title {
position: fixed;
left: 0;
top: 0;
}
.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;
}
}
.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;
}
.hr {
width: 3rem;
height: 0.01rem;
background: #6f82c3;
margin-top: 0.5rem;
}
.game-info-container {
width: 6rem;
background: #3d4f8f;
margin-top: 0.5rem;
.game-info-section {
width: 100%;
height: 1.34rem;
display: flex;
align-items: center;
.section-item {
flex: 1;
position: relative; position: relative;
.page-title { &:last-child:after {
position: fixed; content: "";
left: 0; width: 0.02rem;
top: 0; height: 0.4rem;
} background: #a2b4ee;
.game-rule-container { position: absolute;
display: flex; left: 0;
align-items: center; top: 50%;
position: absolute; transform: translateY(-50%);
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;
}
}
.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;
}
.hr {
width: 3rem;
height: 0.01rem;
background: #6f82c3;
margin-top: 0.5rem;
} }
.game-info-container { .item-value {
width: 6rem; font-size: 0.4rem;
background: #3d4f8f; line-height: 0.8;
margin-top: 0.5rem; color: #fff;
.game-info-section { text-align: center;
width: 100%;
height: 1.34rem;
display: flex;
align-items: center;
.section-item {
flex: 1;
position: relative;
&:last-child:after {
content: "";
width: 0.02rem;
height: 0.4rem;
background: #a2b4ee;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.item-value {
font-size: 0.4rem;
line-height: 0.8;
color: #fff;
text-align: center;
}
.item-key {
font-size: 0.26rem;
line-height: 1;
color: #fff;
text-align: center;
margin-top: 0.18rem;
}
}
}
} }
.share-btn { .item-key {
width: 5.6rem; font-size: 0.26rem;
border-radius: 0.92rem; line-height: 1;
background: #1fdbb1; color: #fff;
font-size: 0.4rem; text-align: center;
line-height: 0.92rem; margin-top: 0.18rem;
color: #fff;
font-weight: bold;
text-align: center;
margin-top: 1.1rem;
} }
}
} }
}
.share-btn {
width: 5.6rem;
border-radius: 0.92rem;
background: #1fdbb1;
font-size: 0.4rem;
line-height: 0.92rem;
color: #fff;
font-weight: bold;
text-align: center;
margin: 1.1rem 0 .6rem;
}
}
</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