Skip to content

W
walk_daka_h5
Commit a7297aea by 穆启卓
Options

复活卡

parent 4034c167
Showing with 257 additions and 301 deletions
src/components/Reborn.vue
<template>
<div class="Reborn">
<div class="content">
<img
src="../assets/ic_close.png"
class="close_icon"
@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_button2"-->
<!--@click="showImg"-->
<!--&gt;获取邀请卡-->
<!--</div>-->
<div>
<div class="revive-card-container">
<img class="revive-card-btn" src="../images/SignUp/revive_card.png" @click="changeRebornShow()">
<div class="revive-card-tip">参加并邀请好友可获得复活卡一张</div>
<div class="revive-card-num">x0</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>
<ShareModal v-on:close="closeShareModal" v-if="showShareModal"></ShareModal>
</div>
<ShareModal
v-on:close="closeShareModal"
v-if="showShareModal"
></ShareModal>
</div>
</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>
import ShareModal from "@/components/ShareModal.vue";
import {shareContent, track} from "@/components/axios/api";
import ShareModal from "@/components/ShareModal.vue";
import {shareContent, track} from "@/components/axios/api";
export default {
name: "Reborn",
components: {ShareModal},
data() {
return {
showShareModal: false,
userData: null
// can_get: false,
// invite_num: 4
};
export default {
name: "Reborn",
components: { ShareModal },
data() {
return {
showShareModal: false,
userData: null,
showRebornModal: false
};
},
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: {
changeRebornShow() {
this.showRebornModal = !this.showRebornModal;
},
methods: {
//打开分享图
showImg() {
this.$emit("showShareImg", "code_rebirth")
},
// 关闭弹窗
closeModal() {
shareContent("").then(res => {
let result = res.data;
// @rebirth="rebirthAction"
// rebirthAction() {
// daka(1)
// .then(res => {
// if (res.code == 1) {
// this.showModal("温馨提示", res.msg);
// return;
// }
// this.changeRebornShow();
// this.dakaSuccessHandle();
// })
// .catch(() => {});
// },
let links = `${location.href.split("#")[0].split("?")[0]}`;
wx.updateAppMessageShareData({
title: result.title, // 分享标题
desc: result.desc, // 分享描述
link: links, // 分享链接
imgUrl: result.img_url, // 分享图标
success: function () {
}
});
wx.onMenuShareAppMessage({
title: result.title, // 分享标题
desc: result.desc, // 分享描述
link: links, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: result.img_url, // 分享图标
success: function () {
// 用户点击了分享后执行的回调函数
}
});
// wx.onMenuShareTimeline({
// title: result.title, // 分享标题
// link: links, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
// imgUrl: result.img_url, // 分享图标
// success: function () {
// }
// });
// 关闭弹窗
closeModal() {
shareContent("").then(res => {
let result = res.data;
let links = `${location.href.split("#")[0].split("?")[0]}`;
wx.updateAppMessageShareData({
title: result.title, // 分享标题
desc: result.desc, // 分享描述
link: links, // 分享链接
imgUrl: result.img_url, // 分享图标
success: function() {}
});
this.$emit("close", true);
},
closeShareModal() {
this.showShareModal = false;
},
// 邀请好友
inviteFriend() {
this.showShareModal = true;
let id = this.userData.id;
track("rebitrh_share");
console.log("处理前连接", location.href);
let links = `${
location.href.split("#")[0].split("?")[0]
}?inviter=${id}&from_type=rebirth&`;
console.log("处理后的连接", links);
shareContent("rebirth").then(res => {
let result = res.data;
wx.updateAppMessageShareData({
title: result.title, // 分享标题
desc: result.desc, // 分享描述
link: links, // 分享链接
imgUrl: result.img_url, // 分享图标
success: function () {
}
});
wx.onMenuShareAppMessage({
title: result.title, // 分享标题
desc: result.desc, // 分享描述
link: links, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: result.img_url, // 分享图标
success: function () {
// 用户点击了分享后执行的回调函数
track("rebitrh_share_act");
}
});
// wx.onMenuShareTimeline({
// title: result.title, // 分享标题
// link: links, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
// imgUrl: result.img_url, // 分享图标
// success: function () {
// }
// });
wx.onMenuShareAppMessage({
title: result.title, // 分享标题
desc: result.desc, // 分享描述
link: links, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: result.img_url, // 分享图标
success: function() {
// 用户点击了分享后执行的回调函数
}
});
},
// 立即报名
joinReborn() {
this.$emit("rebirth", true);
}
// wx.onMenuShareTimeline({
// title: result.title, // 分享标题
// link: links, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
// imgUrl: result.img_url, // 分享图标
// success: function () {
// }
// });
});
this.changeRebornShow();
},
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"];
}
}
closeShareModal() {
this.showShareModal = false;
},
props: ["v_data"],
computed: {
can_get() {
return this.v_data.can_get;
},
invite_num() {
return this.v_data.cnt;
}
// 邀请好友
inviteFriend() {
this.showShareModal = true;
let id = this.userData.id;
track("rebitrh_share");
console.log("处理前连接", location.href);
let links = `${location.href.split("#")[0].split("?")[0]}?inviter=${id}&from_type=rebirth&`;
console.log("处理后的连接", links);
shareContent("rebirth").then(res => {
let result = res.data;
wx.updateAppMessageShareData({
title: result.title, // 分享标题
desc: result.desc, // 分享描述
link: links, // 分享链接
imgUrl: result.img_url, // 分享图标
success: function() {}
});
wx.onMenuShareAppMessage({
title: result.title, // 分享标题
desc: result.desc, // 分享描述
link: links, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: result.img_url, // 分享图标
success: function() {
// 用户点击了分享后执行的回调函数
track("rebitrh_share_act");
}
});
// wx.onMenuShareTimeline({
// title: result.title, // 分享标题
// link: links, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
// imgUrl: result.img_url, // 分享图标
// success: function () {
// }
// });
});
}
};
}
}
</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;
}
}
.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;
}
}
.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 @@
<div class="sign-up-page">
<!-- 左上角查看步数按钮 -->
<!-- <img class="view-steps-btn" src="../images/SignUp/sy_bushu.png"> -->
<!-- 右上角复活卡 -->
<Reborn></Reborn>
<!-- 信息广播 -->
<NoticeBonus class="notice-broadcast"></NoticeBonus>
<!-- 挑战赛卡片 -->
......@@ -33,7 +35,7 @@
<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="">
<img src="../images/SignUp/detail_bg.png">
</div>
</div>
<!-- 没有关注公众号弹窗 -->
......@@ -51,6 +53,7 @@ import NoticeBonus from "@/components/NoticeBonus.vue";
import Free from "@/components/Free.vue";
import Modal from "@/components/Modal.vue";
import PayFailModal from "@/components/PayFailModal.vue";
import Reborn from "@/components/Reborn.vue";
import {
dakaPay,
track,
......@@ -66,6 +69,7 @@ export default {
NoticeBonus,
Modal,
Free,
Reborn,
PayFailModal
},
data() {
......@@ -79,8 +83,7 @@ export default {
isShowPayFail: false,
isFollow: false,
gameList: [],
followInfo: {
},
followInfo: {},
needFollow: false
};
},
......@@ -90,10 +93,10 @@ export default {
},
methods: {
goOtherPage(pageName) {
if(!this.followInfo.follow){
this.needFollow = true
return
}
if (!this.followInfo.follow) {
this.needFollow = true;
return;
}
console.log("pageName", pageName);
this.$router.push({ name: pageName });
},
......@@ -128,8 +131,8 @@ export default {
select_follow().then(res => {
console.log(res);
if (res.code == 0) {
this.followInfo = res.data
sessionStorage.setItem('followInfo',JSON.stringify(res.data))
this.followInfo = res.data;
sessionStorage.setItem("followInfo", JSON.stringify(res.data));
}
});
},
......@@ -261,7 +264,7 @@ export default {
},
closePopup() {
this.needFollow = false;
},
}
}
};
</script>
......@@ -281,7 +284,6 @@ export default {
display: flex;
flex-direction: column;
align-items: center;
.view-steps-btn {
flex-shrink: 0;
width: 1.11rem;
......@@ -291,12 +293,10 @@ export default {
left: 0;
top: 1.22rem;
}
.notice-broadcast {
flex-shrink: 0;
margin: 4.3rem 0 0.18rem;
}
.challenge-card {
flex-shrink: 0;
width: 6.9rem;
......@@ -308,7 +308,6 @@ export default {
flex-direction: column;
align-items: center;
position: relative;
.corner-marker {
width: 1.39rem;
height: 1.39rem;
......@@ -316,14 +315,12 @@ export default {
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;
......@@ -336,7 +333,6 @@ export default {
color: #fff;
margin-top: 0.16rem;
}
.card-info {
width: 100%;
margin-top: 0.7rem;
......@@ -349,24 +345,20 @@ export default {
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 {
font-size: 0.48rem;
line-height: 0.8;
color: #fff;
margin-top: 0.12rem;
}
.item-money {
font-size: 0.48rem;
line-height: 0.8;
......@@ -375,7 +367,6 @@ export default {
}
}
}
.statusnormal {
position: absolute;
bottom: 0.38rem;
......@@ -394,7 +385,6 @@ export default {
height: 15px;
}
}
.card-btn {
width: 4rem;
height: 0.88rem;
......@@ -414,13 +404,11 @@ export default {
bottom: 0.38rem;
left: 50%;
transform: translateX(-50%);
.card-btn-tip {
font-size: 0.22rem;
margin-top: 0.06rem;
font-weight: normal;
}
.btn-title {
font-size: 0.34rem;
font-weight: bold;
......@@ -455,8 +443,8 @@ export default {
width: 0.58rem;
height: 0.58rem;
position: absolute;
top: -.88rem;
right: 0
top: -0.88rem;
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