Skip to content

W
walk_daka_h5
Commit a7297aea by 穆启卓
Options

复活卡

parent 4034c167
Showing with 187 additions and 231 deletions
src/components/Reborn.vue
<template> <template>
<div class="Reborn"> <div>
<div class="content"> <div class="revive-card-container">
<img <img class="revive-card-btn" src="../images/SignUp/revive_card.png" @click="changeRebornShow()">
src="../assets/ic_close.png" <div class="revive-card-tip">参加并邀请好友可获得复活卡一张</div>
class="close_icon" <div class="revive-card-num">x0</div>
@click="closeModal"
>
<div
class="title_container"
v-if="!can_get"
>
<div class="title">邀请1位好友报名成功</div>
<div class="sub_title">可获得1次复活机会</div>
</div>
<div
class="title_container"
v-if="can_get"
>
<div class="title">已有好友帮你获得1次复活机会</div>
</div>
<img
src="../assets/pic_fh.png"
class="main_pic"
>
<div class="desc">已获得<span class="invite_num"> {{invite_num}} </span>张复活卡</div>
<div class="sub_desc">当日未完成打卡,可在24:00前使用复活卡复活</div>
<div class="btn_container">
<div class="share_btn">
<div
class="Reborn_button"
v-if="can_get"
@click="joinReborn"
>复活打卡
</div>
<div
class="Reborn_button"
v-if="!can_get"
@click="inviteFriend"
>邀请好友
</div> </div>
<div class="Reborn-component" v-if="showRebornModal">
<div class="content">
<div class="title1">邀请好友报名成功</div>
<div class="title2">可获得一次复活机会</div>
<img class="center-img" src="@/images/components/Reborn/center_img.png">
<div class="desc">每期比赛只能获得1次复活机会</div>
<div class="desc">未达标次日11:50后复活机会自动生效</div>
<div class="invite-btn" @click="inviteFriend">立即邀请好友参赛</div>
<img class="close-btn" src="@/images/common/pop_ic_close.png" @click="closeModal">
</div> </div>
<!--<div--> <ShareModal v-on:close="closeShareModal" v-if="showShareModal"></ShareModal>
<!--class="Reborn_button2"-->
<!--@click="showImg"-->
<!--&gt;获取邀请卡-->
<!--</div>-->
</div> </div>
</div> </div>
<ShareModal
v-on:close="closeShareModal"
v-if="showShareModal"
></ShareModal>
</div>
</template> </template>
<style>
div.Reborn {
text-align: center;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
border: 1px solid transparent;
}
div.Reborn .close_icon {
display: block;
position: absolute;
top: 0.2rem;
right: 0.2rem;
width: 0.3rem;
}
div.Reborn .content {
width: 6.4rem;
height: 7.25rem;
background: #ffffff;
border-radius: 0.06rem;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 1px solid transparent;
}
div.Reborn .title_container {
height: 1.6rem;
padding-top: 0;
border: 1px solid transparent;
}
div.Reborn .content .title {
font-size: 0.4rem;
color: #282828;
margin-top: 0.6rem;
font-weight: bold;
}
div.Reborn .content .sub_title {
margin-top: 0.18rem;
font-size: 0.4rem;
color: #282828;
}
div.Reborn .content img.main_pic {
width: 3.2rem;
margin-top: 0.2rem;
}
div.Reborn .content .desc {
margin-top: 0.24rem;
color: #5a5a5a;
font-size: 0.28rem;
}
div.Reborn .content .desc span {
font-size: 0.36rem;
color: #282828;
font-weight: bold;
}
div.Reborn .content .sub_desc {
margin-top: 0.3rem;
color: #5a5a5a;
font-size: 0.24rem;
}
div.Reborn .content .Reborn_button {
width: 5rem;
height: 0.88rem;
background: #6eb5f5;
border-radius: 0.44rem;
font-size: 0.38rem;
font-weight: bold;
color: #ffffff;
line-height: calc(0.88 / 0.38);
}
div.Reborn .content .Reborn_button2 {
width: 2.6rem;
height: 0.88rem;
margin-left: 0.3rem;
background: #ffbb34;
border-radius: 0.44rem;
font-size: 0.38rem;
font-weight: bold;
color: #ffffff;
line-height: calc(0.88 / 0.38);
}
</style>
<style scoped>
.btn_container {
display: flex;
justify-content: center;
margin-top: .4rem;
}
</style>
<script> <script>
import ShareModal from "@/components/ShareModal.vue"; import ShareModal from "@/components/ShareModal.vue";
import {shareContent, track} from "@/components/axios/api"; import {shareContent, track} from "@/components/axios/api";
export default { export default {
name: "Reborn", name: "Reborn",
components: {ShareModal}, components: { ShareModal },
data() { data() {
return { return {
showShareModal: false, showShareModal: false,
userData: null userData: null,
// can_get: false, showRebornModal: false
// invite_num: 4
}; };
}, },
props: [""],
computed: {
// invite_num() {
// return 456;
// }
},
mounted() {
if (window["userData"]) {
this.userData = window["userData"];
} else {
let localUserData = localStorage.getItem("walk_userData");
if (localUserData) {
window["userData"] = JSON.parse(localUserData);
this.userData = window["userData"];
}
}
},
methods: { methods: {
//打开分享图 changeRebornShow() {
showImg() { this.showRebornModal = !this.showRebornModal;
this.$emit("showShareImg", "code_rebirth")
}, },
// @rebirth="rebirthAction"
// rebirthAction() {
// daka(1)
// .then(res => {
// if (res.code == 1) {
// this.showModal("温馨提示", res.msg);
// return;
// }
// this.changeRebornShow();
// this.dakaSuccessHandle();
// })
// .catch(() => {});
// },
// 关闭弹窗 // 关闭弹窗
closeModal() { closeModal() {
shareContent("").then(res => { shareContent("").then(res => {
let result = res.data; let result = res.data;
let links = `${location.href.split("#")[0].split("?")[0]}`; let links = `${location.href.split("#")[0].split("?")[0]}`;
wx.updateAppMessageShareData({ wx.updateAppMessageShareData({
title: result.title, // 分享标题 title: result.title, // 分享标题
desc: result.desc, // 分享描述 desc: result.desc, // 分享描述
link: links, // 分享链接 link: links, // 分享链接
imgUrl: result.img_url, // 分享图标 imgUrl: result.img_url, // 分享图标
success: function () { success: function() {}
}
}); });
wx.onMenuShareAppMessage({ wx.onMenuShareAppMessage({
title: result.title, // 分享标题 title: result.title, // 分享标题
desc: result.desc, // 分享描述 desc: result.desc, // 分享描述
link: links, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 link: links, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: result.img_url, // 分享图标 imgUrl: result.img_url, // 分享图标
success: function () { success: function() {
// 用户点击了分享后执行的回调函数 // 用户点击了分享后执行的回调函数
} }
}); });
...@@ -216,8 +98,7 @@ ...@@ -216,8 +98,7 @@
// } // }
// }); // });
}); });
this.changeRebornShow();
this.$emit("close", true);
}, },
closeShareModal() { closeShareModal() {
this.showShareModal = false; this.showShareModal = false;
...@@ -228,9 +109,7 @@ ...@@ -228,9 +109,7 @@
let id = this.userData.id; let id = this.userData.id;
track("rebitrh_share"); track("rebitrh_share");
console.log("处理前连接", location.href); console.log("处理前连接", location.href);
let links = `${ let links = `${location.href.split("#")[0].split("?")[0]}?inviter=${id}&from_type=rebirth&`;
location.href.split("#")[0].split("?")[0]
}?inviter=${id}&from_type=rebirth&`;
console.log("处理后的连接", links); console.log("处理后的连接", links);
shareContent("rebirth").then(res => { shareContent("rebirth").then(res => {
let result = res.data; let result = res.data;
...@@ -239,15 +118,14 @@ ...@@ -239,15 +118,14 @@
desc: result.desc, // 分享描述 desc: result.desc, // 分享描述
link: links, // 分享链接 link: links, // 分享链接
imgUrl: result.img_url, // 分享图标 imgUrl: result.img_url, // 分享图标
success: function () { success: function() {}
}
}); });
wx.onMenuShareAppMessage({ wx.onMenuShareAppMessage({
title: result.title, // 分享标题 title: result.title, // 分享标题
desc: result.desc, // 分享描述 desc: result.desc, // 分享描述
link: links, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 link: links, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: result.img_url, // 分享图标 imgUrl: result.img_url, // 分享图标
success: function () { success: function() {
// 用户点击了分享后执行的回调函数 // 用户点击了分享后执行的回调函数
track("rebitrh_share_act"); track("rebitrh_share_act");
} }
...@@ -260,31 +138,120 @@ ...@@ -260,31 +138,120 @@
// } // }
// }); // });
}); });
},
// 立即报名
joinReborn() {
this.$emit("rebirth", true);
} }
},
mounted() {
if (window["userData"]) {
this.userData = window["userData"];
} else {
let localUserData = localStorage.getItem("walk_userData");
if (localUserData) {
window["userData"] = JSON.parse(localUserData);
this.userData = window["userData"];
} }
}
</script>
<style lang="less" scoped>
.revive-card-container {
position: absolute;
top: 0.74rem;
right: 0.28rem;
.revive-card-btn {
width: 0.8rem;
height: 0.89rem;
display: block;
}
.revive-card-tip {
white-space: nowrap;
font-size: 0.26rem;
line-height: 0.56rem;
color: #fff;
padding: 0 0.18rem;
border-radius: 0.02rem;
background: rgba(0, 0, 0, 0.3);
position: absolute;
top: 0.12rem;
right: 1.04rem;
&:after {
content: "";
width: 0;
height: 0;
border-left: 0.12rem solid rgba(0, 0, 0, 0.3);
border-right: 0.12rem solid transparent;
border-top: 0.09rem solid transparent;
border-bottom: 0.09rem solid transparent;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -0.24rem;
} }
},
props: ["v_data"],
computed: {
can_get() {
return this.v_data.can_get;
},
invite_num() {
return this.v_data.cnt;
} }
.revive-card-num {
font-size: 0.2rem;
line-height: 0.26rem;
color: #fff;
padding: 0 0.1rem;
background: #f55954;
border-radius: 0.26rem;
position: absolute;
top: -0.13rem;
right: -0.1rem;
} }
}; }
</script> .Reborn-component {
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
.content {
width: 6rem;
height: 7.1rem;
background: #fff;
border-radius: .2rem;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
.title1 {
font-size: .4rem;
line-height: 1;
color: #000;
font-weight: bold;
margin-top: .6rem;
}
.title2 {
font-size: .34rem;
line-height: 1;
color: #000;
margin-top: .2rem;
}
.center-img {
width: 2.75rem;
height: 1.85rem;
margin-top: .52rem;
margin-bottom: .62rem;
}
.desc {
font-size: .26rem;
line-height: .4rem;
color: #888;
}
.invite-btn {
width: 4.6rem;
height: .88rem;
background: #FFBB33;
border-radius: .88rem;
font-size: .34rem;
line-height: .88rem;
color: #fff;
text-align: center;
margin-top: .42rem;
}
.close-btn {
width: .58rem;
height: .58rem;
position: absolute;
top: -.88rem;
right: 0;
}
}
}
</style>
\ No newline at end of file
src/views/SignUp.vue
...@@ -2,6 +2,8 @@ ...@@ -2,6 +2,8 @@
<div class="sign-up-page"> <div class="sign-up-page">
<!-- 左上角查看步数按钮 --> <!-- 左上角查看步数按钮 -->
<!-- <img class="view-steps-btn" src="../images/SignUp/sy_bushu.png"> --> <!-- <img class="view-steps-btn" src="../images/SignUp/sy_bushu.png"> -->
<!-- 右上角复活卡 -->
<Reborn></Reborn>
<!-- 信息广播 --> <!-- 信息广播 -->
<NoticeBonus class="notice-broadcast"></NoticeBonus> <NoticeBonus class="notice-broadcast"></NoticeBonus>
<!-- 挑战赛卡片 --> <!-- 挑战赛卡片 -->
...@@ -33,7 +35,7 @@ ...@@ -33,7 +35,7 @@
<div class="statusnormal" v-if="item.status===2 || item.status===0 || item.status===3" @click="goWhereDetail(item)"> <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===2 || item.status===0)
? (item.status===0&&item.already_join===1) ? '立即打卡': '查看详情' : '已淘汰'}} ? (item.status===0&&item.already_join===1) ? '立即打卡': '查看详情' : '已淘汰'}}
<img src="../images/SignUp/detail_bg.png" alt=""> <img src="../images/SignUp/detail_bg.png">
</div> </div>
</div> </div>
<!-- 没有关注公众号弹窗 --> <!-- 没有关注公众号弹窗 -->
...@@ -51,6 +53,7 @@ import NoticeBonus from "@/components/NoticeBonus.vue"; ...@@ -51,6 +53,7 @@ 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 Reborn from "@/components/Reborn.vue";
import { import {
dakaPay, dakaPay,
track, track,
...@@ -66,6 +69,7 @@ export default { ...@@ -66,6 +69,7 @@ export default {
NoticeBonus, NoticeBonus,
Modal, Modal,
Free, Free,
Reborn,
PayFailModal PayFailModal
}, },
data() { data() {
...@@ -79,8 +83,7 @@ export default { ...@@ -79,8 +83,7 @@ export default {
isShowPayFail: false, isShowPayFail: false,
isFollow: false, isFollow: false,
gameList: [], gameList: [],
followInfo: { followInfo: {},
},
needFollow: false needFollow: false
}; };
}, },
...@@ -90,9 +93,9 @@ export default { ...@@ -90,9 +93,9 @@ export default {
}, },
methods: { methods: {
goOtherPage(pageName) { goOtherPage(pageName) {
if(!this.followInfo.follow){ if (!this.followInfo.follow) {
this.needFollow = true this.needFollow = true;
return return;
} }
console.log("pageName", pageName); console.log("pageName", pageName);
this.$router.push({ name: pageName }); this.$router.push({ name: pageName });
...@@ -128,8 +131,8 @@ export default { ...@@ -128,8 +131,8 @@ export default {
select_follow().then(res => { select_follow().then(res => {
console.log(res); console.log(res);
if (res.code == 0) { if (res.code == 0) {
this.followInfo = res.data this.followInfo = res.data;
sessionStorage.setItem('followInfo',JSON.stringify(res.data)) sessionStorage.setItem("followInfo", JSON.stringify(res.data));
} }
}); });
}, },
...@@ -261,7 +264,7 @@ export default { ...@@ -261,7 +264,7 @@ export default {
}, },
closePopup() { closePopup() {
this.needFollow = false; this.needFollow = false;
}, }
} }
}; };
</script> </script>
...@@ -281,7 +284,6 @@ export default { ...@@ -281,7 +284,6 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.view-steps-btn { .view-steps-btn {
flex-shrink: 0; flex-shrink: 0;
width: 1.11rem; width: 1.11rem;
...@@ -291,12 +293,10 @@ export default { ...@@ -291,12 +293,10 @@ export default {
left: 0; left: 0;
top: 1.22rem; top: 1.22rem;
} }
.notice-broadcast { .notice-broadcast {
flex-shrink: 0; flex-shrink: 0;
margin: 4.3rem 0 0.18rem; margin: 4.3rem 0 0.18rem;
} }
.challenge-card { .challenge-card {
flex-shrink: 0; flex-shrink: 0;
width: 6.9rem; width: 6.9rem;
...@@ -308,7 +308,6 @@ export default { ...@@ -308,7 +308,6 @@ export default {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
position: relative; position: relative;
.corner-marker { .corner-marker {
width: 1.39rem; width: 1.39rem;
height: 1.39rem; height: 1.39rem;
...@@ -316,14 +315,12 @@ export default { ...@@ -316,14 +315,12 @@ export default {
top: -0.02rem; top: -0.02rem;
right: -0.02rem; right: -0.02rem;
} }
.card-title { .card-title {
font-size: 0.34rem; font-size: 0.34rem;
line-height: 1; line-height: 1;
color: #fff; color: #fff;
margin-top: 0.28rem; margin-top: 0.28rem;
} }
.card-time { .card-time {
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
padding: 0 0.24rem; padding: 0 0.24rem;
...@@ -336,7 +333,6 @@ export default { ...@@ -336,7 +333,6 @@ export default {
color: #fff; color: #fff;
margin-top: 0.16rem; margin-top: 0.16rem;
} }
.card-info { .card-info {
width: 100%; width: 100%;
margin-top: 0.7rem; margin-top: 0.7rem;
...@@ -349,24 +345,20 @@ export default { ...@@ -349,24 +345,20 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
&:first-child { &:first-child {
border-left: none; border-left: none;
} }
.item-title { .item-title {
font-size: 0.28rem; font-size: 0.28rem;
line-height: 0.8; line-height: 0.8;
color: #fff; 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;
...@@ -375,7 +367,6 @@ export default { ...@@ -375,7 +367,6 @@ export default {
} }
} }
} }
.statusnormal { .statusnormal {
position: absolute; position: absolute;
bottom: 0.38rem; bottom: 0.38rem;
...@@ -394,7 +385,6 @@ export default { ...@@ -394,7 +385,6 @@ export default {
height: 15px; height: 15px;
} }
} }
.card-btn { .card-btn {
width: 4rem; width: 4rem;
height: 0.88rem; height: 0.88rem;
...@@ -414,13 +404,11 @@ export default { ...@@ -414,13 +404,11 @@ export default {
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: 0.34rem; font-size: 0.34rem;
font-weight: bold; font-weight: bold;
...@@ -455,8 +443,8 @@ export default { ...@@ -455,8 +443,8 @@ export default {
width: 0.58rem; width: 0.58rem;
height: 0.58rem; height: 0.58rem;
position: absolute; position: absolute;
top: -.88rem; top: -0.88rem;
right: 0 right: 0;
} }
} }
} }
......
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