Skip to content

W
walk_daka_h5
Commit 47579fa5 by 穆启卓
Options

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

parents f0f1c50c 4315661f
Showing with 1056 additions and 721 deletions
package-lock.json
...@@ -1577,6 +1577,13 @@ ...@@ -1577,6 +1577,13 @@
"integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=", "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
"dev": true "dev": true
}, },
"asap": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
"integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
"dev": true,
"optional": true
},
"asn1": { "asn1": {
"version": "0.2.4", "version": "0.2.4",
"resolved": "http://registry.npm.taobao.org/asn1/download/asn1-0.2.4.tgz", "resolved": "http://registry.npm.taobao.org/asn1/download/asn1-0.2.4.tgz",
...@@ -3516,6 +3523,14 @@ ...@@ -3516,6 +3523,14 @@
"entities": "^1.1.1" "entities": "^1.1.1"
} }
}, },
"dom7": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.3.tgz",
"integrity": "sha512-QTxHHDox+M6ZFz1zHPAHZKI3JOHY5iY4i9BK2uctlggxKQwRhO3q3HHFq1BKsT25Bm/ySSj70K6Wk/G4bs9rMQ==",
"requires": {
"ssr-window": "^1.0.1"
}
},
"domain-browser": { "domain-browser": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "http://registry.npm.taobao.org/domain-browser/download/domain-browser-1.2.0.tgz", "resolved": "http://registry.npm.taobao.org/domain-browser/download/domain-browser-1.2.0.tgz",
...@@ -4332,14 +4347,12 @@ ...@@ -4332,14 +4347,12 @@
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
...@@ -4354,20 +4367,17 @@ ...@@ -4354,20 +4367,17 @@
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
...@@ -4484,8 +4494,7 @@ ...@@ -4484,8 +4494,7 @@
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
...@@ -4497,7 +4506,6 @@ ...@@ -4497,7 +4506,6 @@
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
...@@ -4512,7 +4520,6 @@ ...@@ -4512,7 +4520,6 @@
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
...@@ -4520,14 +4527,12 @@ ...@@ -4520,14 +4527,12 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.3.5", "version": "2.3.5",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
...@@ -4546,7 +4551,6 @@ ...@@ -4546,7 +4551,6 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
...@@ -4627,8 +4631,7 @@ ...@@ -4627,8 +4631,7 @@
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
...@@ -4640,7 +4643,6 @@ ...@@ -4640,7 +4643,6 @@
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
...@@ -4762,7 +4764,6 @@ ...@@ -4762,7 +4764,6 @@
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
...@@ -5372,6 +5373,13 @@ ...@@ -5372,6 +5373,13 @@
"integrity": "sha1-Cpf7h2mG6AgcYxFg+PnziRV/AEM=", "integrity": "sha1-Cpf7h2mG6AgcYxFg+PnziRV/AEM=",
"dev": true "dev": true
}, },
"image-size": {
"version": "0.5.5",
"resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
"integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=",
"dev": true,
"optional": true
},
"import-cwd": { "import-cwd": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "http://registry.npm.taobao.org/import-cwd/download/import-cwd-2.1.0.tgz", "resolved": "http://registry.npm.taobao.org/import-cwd/download/import-cwd-2.1.0.tgz",
...@@ -5969,6 +5977,64 @@ ...@@ -5969,6 +5977,64 @@
"invert-kv": "^2.0.0" "invert-kv": "^2.0.0"
} }
}, },
"less": {
"version": "3.9.0",
"resolved": "https://registry.npmjs.org/less/-/less-3.9.0.tgz",
"integrity": "sha512-31CmtPEZraNUtuUREYjSqRkeETFdyEHSEPAGq4erDlUXtda7pzNmctdljdIagSb589d/qXGWiiP31R5JVf+v0w==",
"dev": true,
"requires": {
"clone": "^2.1.2",
"errno": "^0.1.1",
"graceful-fs": "^4.1.2",
"image-size": "~0.5.0",
"mime": "^1.4.1",
"mkdirp": "^0.5.0",
"promise": "^7.1.1",
"request": "^2.83.0",
"source-map": "~0.6.0"
},
"dependencies": {
"clone": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
"integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
"dev": true
},
"mime": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
"integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
"dev": true,
"optional": true
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true,
"optional": true
}
}
},
"less-loader": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/less-loader/-/less-loader-4.1.0.tgz",
"integrity": "sha512-KNTsgCE9tMOM70+ddxp9yyt9iHqgmSs0yTZc5XH5Wo+g80RWRIYNqE58QJKm/yMud5wZEvz50ugRDuzVIkyahg==",
"dev": true,
"requires": {
"clone": "^2.1.1",
"loader-utils": "^1.1.0",
"pify": "^3.0.0"
},
"dependencies": {
"clone": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
"integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
"dev": true
}
}
},
"loader-runner": { "loader-runner": {
"version": "2.4.0", "version": "2.4.0",
"resolved": "http://registry.npm.taobao.org/loader-runner/download/loader-runner-2.4.0.tgz", "resolved": "http://registry.npm.taobao.org/loader-runner/download/loader-runner-2.4.0.tgz",
...@@ -6599,8 +6665,7 @@ ...@@ -6599,8 +6665,7 @@
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
"resolved": "http://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz", "resolved": "http://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz",
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
"dev": true
}, },
"object-copy": { "object-copy": {
"version": "0.1.0", "version": "0.1.0",
...@@ -7606,6 +7671,16 @@ ...@@ -7606,6 +7671,16 @@
"integrity": "sha1-o31zL0JxtKsa0HDTVQjoKQeI/6o=", "integrity": "sha1-o31zL0JxtKsa0HDTVQjoKQeI/6o=",
"dev": true "dev": true
}, },
"promise": {
"version": "7.3.1",
"resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
"integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
"dev": true,
"optional": true,
"requires": {
"asap": "~2.0.3"
}
},
"promise-inflight": { "promise-inflight": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "http://registry.npm.taobao.org/promise-inflight/download/promise-inflight-1.0.1.tgz", "resolved": "http://registry.npm.taobao.org/promise-inflight/download/promise-inflight-1.0.1.tgz",
...@@ -8692,6 +8767,11 @@ ...@@ -8692,6 +8767,11 @@
"tweetnacl": "~0.14.0" "tweetnacl": "~0.14.0"
} }
}, },
"ssr-window": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-1.0.1.tgz",
"integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
},
"ssri": { "ssri": {
"version": "6.0.1", "version": "6.0.1",
"resolved": "http://registry.npm.taobao.org/ssri/download/ssri-6.0.1.tgz", "resolved": "http://registry.npm.taobao.org/ssri/download/ssri-6.0.1.tgz",
...@@ -8981,6 +9061,15 @@ ...@@ -8981,6 +9061,15 @@
"util.promisify": "~1.0.0" "util.promisify": "~1.0.0"
} }
}, },
"swiper": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-4.5.0.tgz",
"integrity": "sha512-jRCd/CGet9kaHwthHdd/sL/YU8CI157PWLyItnIcn/o/jP4haVky3zTF6f9F3JDpmQIw7jdWihISiYx0/oTHsg==",
"requires": {
"dom7": "^2.1.3",
"ssr-window": "^1.0.1"
}
},
"tapable": { "tapable": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "http://registry.npm.taobao.org/tapable/download/tapable-1.1.1.tgz", "resolved": "http://registry.npm.taobao.org/tapable/download/tapable-1.1.1.tgz",
...@@ -9569,6 +9658,15 @@ ...@@ -9569,6 +9658,15 @@
"resolved": "http://registry.npm.taobao.org/vue/download/vue-2.6.8.tgz", "resolved": "http://registry.npm.taobao.org/vue/download/vue-2.6.8.tgz",
"integrity": "sha1-8hy8U2v8FPfR15KhN7sS9p5g6pE=" "integrity": "sha1-8hy8U2v8FPfR15KhN7sS9p5g6pE="
}, },
"vue-awesome-swiper": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-3.1.3.tgz",
"integrity": "sha512-E7suzkyApO8vNZbgdEnjSmnpsmQZyRvSVXJ7sey3XYwKPOkLhH3+GnHroBw+5PZIQXvWBwdCeQsPG1xQ1r1Rhg==",
"requires": {
"object-assign": "^4.1.1",
"swiper": "^4.0.7"
}
},
"vue-calendar-component": { "vue-calendar-component": {
"version": "2.8.2", "version": "2.8.2",
"resolved": "https://registry.npmjs.org/vue-calendar-component/-/vue-calendar-component-2.8.2.tgz", "resolved": "https://registry.npmjs.org/vue-calendar-component/-/vue-calendar-component-2.8.2.tgz",
......
package.json
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
"dependencies": { "dependencies": {
"axios": "^0.18.0", "axios": "^0.18.0",
"vue": "^2.6.6", "vue": "^2.6.6",
"vue-awesome-swiper": "^3.1.3",
"vue-calendar-component": "^2.8.2", "vue-calendar-component": "^2.8.2",
"vue-router": "^3.0.1", "vue-router": "^3.0.1",
"vuex": "^3.0.1", "vuex": "^3.0.1",
......
src/views/ChallengeDetail.vue
...@@ -34,159 +34,249 @@ ...@@ -34,159 +34,249 @@
</div> </div>
</div> </div>
</div> </div>
<div class="share-btn">邀请好友来参赛</div> <div class="share-btn" @click="inviteFriend">邀请好友来参赛</div>
<ShareModal
v-on:close="closeShareModal"
v-if="showShareModal"
></ShareModal>
</div> </div>
</template> </template>
<script> <script>
import Title from "@/components/Title.vue"; import Title from "@/components/Title.vue";
import ShareModal from "@/components/ShareModal.vue";
import {dakaPay, shareContent, track, liinShare} from "@/components/axios/api";
export default { export default {
name: "ChallengeDetail", name: "ChallengeDetail",
components: { components: {
Title Title,
ShareModal
}, },
data() { data() {
return { return {
pageData: JSON.parse(sessionStorage.getItem('ChallengeDetailData')) pageData: JSON.parse(sessionStorage.getItem('ChallengeDetailData')),
showShareModal: false,
userData: null
} }
}, },
created() { mounted() {
console.log("this.pageType", this.page_type);
if (window["userData"]) {
this.userData = window["userData"];
} else {
let localUserData = localStorage.getItem("bs_userData");
if (localUserData) {
window["userData"] = JSON.parse(localUserData);
this.userData = window["userData"];
}
}
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);
},
fail: err => {
console.log("option4error", err);
}
};
// wx.onMenuShareTimeline(option4);
console.log("option", option1, option2, option3, option4);
});
}, },
methods: { closeShareModal() {
goback() { this.showShareModal = false;
history.go(-1);
},
goOtherPage(pageName) {
this.$router.push({name: pageName});
},
} }
} }
};
</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;
flex-direction: column;
align-items: center;
overflow: hidden;
position: relative;
.page-title {
position: fixed;
left: 0;
top: 0;
}
.game-rule-container {
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
overflow: hidden; position: absolute;
position: relative; top: 0.3rem;
.page-title { right: 0.22rem;
position: fixed; font-size: 0.26rem;
left: 0; line-height: 1;
top: 0; color: #465895;
img {
width: 0.3rem;
height: 0.3rem;
margin-right: 0.1rem;
} }
.game-rule-container { }
display: flex; .game-bonus-container {
align-items: center; width: 6.4rem;
position: absolute; padding: 0.3rem 0;
top: .3rem; box-sizing: border-box;
right: .22rem; background: linear-gradient(
font-size: .26rem; 90deg,
line-height: 1; rgba(255, 255, 255, 0),
color: #465895; #1a285a,
img { rgba(255, 255, 255, 0)
width: .3rem; );
height: .3rem; margin-top: 2.38rem;
margin-right: .1rem; .bonus-title {
} font-size: 0.3rem;
}
.game-bonus-container {
width: 6.4rem;
padding: .3rem 0;
box-sizing: border-box;
background: linear-gradient(90deg, rgba(255, 255, 255, 0), #1A285A, rgba(255, 255, 255, 0));
margin-top: 2.38rem;
.bonus-title {
font-size: .3rem;
line-height: 1;
color: #fff;
text-align: center;
}
.bonus-amount {
font-size: .64rem;
line-height: .8;
color: #FFE253;
text-align: center;
margin-top: .26rem;
}
}
.game-title {
font-size: .36rem;
line-height: 1; line-height: 1;
color: #fff; color: #fff;
font-weight: bold; text-align: center;
margin-top: .4rem;
}
.game-time {
font-size: .24rem;
line-height: 1;
color: #D6DFFF;
padding: .12rem .38rem;
border-radius: .48rem;
background: #556CB6;
margin-top: .14rem;
} }
.hr { .bonus-amount {
width: 3rem; font-size: 0.64rem;
height: .01rem; line-height: 0.8;
background: #6F82C3; color: #ffe253;
margin-top: .5rem; text-align: center;
margin-top: 0.26rem;
} }
.game-info-container { }
width: 6rem; .game-title {
background: #3D4F8F; font-size: 0.36rem;
margin-top: .5rem; line-height: 1;
.game-info-section { color: #fff;
width: 100%; font-weight: bold;
height: 1.34rem; margin-top: 0.4rem;
display: flex; }
align-items: center; .game-time {
.section-item { font-size: 0.24rem;
flex: 1; line-height: 1;
position: relative; color: #d6dfff;
&:last-child:after { padding: 0.12rem 0.38rem;
content: ''; border-radius: 0.48rem;
width: .02rem; background: #556cb6;
height: .4rem; margin-top: 0.14rem;
background: #A2B4EE; }
position: absolute; .hr {
left: 0; width: 3rem;
top: 50%; height: 0.01rem;
transform: translateY(-50%); background: #6f82c3;
} margin-top: 0.5rem;
.item-value { }
font-size: .4rem; .game-info-container {
line-height: .8; width: 6rem;
color: #fff; background: #3d4f8f;
text-align: center; margin-top: 0.5rem;
} .game-info-section {
.item-key { width: 100%;
font-size: .26rem; height: 1.34rem;
line-height: 1; display: flex;
color: #fff; align-items: center;
text-align: center; .section-item {
margin-top: .18rem; 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 {
width: 5.6rem;
border-radius: .92rem;
background: #1FDBB1;
font-size: .4rem;
line-height: .92rem;
color: #fff;
font-weight: bold;
text-align: center;
margin-top: 2.24rem;
}
} }
.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-top: 2.24rem;
}
}
</style> </style>
src/views/HaveJoinedGame.vue
<template> <template>
<div class="have-joined-game-page"> <div class="have-joined-game-page">
<Title class="page-title" @goback="goback" show_back="true" v-if="currentPage()==='HaveJoinedGame'"></Title> <Title class="page-title" @goback="goback" show_back="true" v-if="currentPage()==='HaveJoinedGame'"></Title>
<div class="game-bonus-container"> <div class="game-bonus-container">
<div class="bonus-title">本期累计奖励金（元）</div> <div class="bonus-title">本期累计奖励金（元）</div>
<div class="bonus-amount">6.86</div> <div class="bonus-amount">6.86</div>
</div>
<div class="game-title">5000步七日耐力赛</div>
<div class="game-time">开赛时间：3月11日 00:00-3月17日24:00</div>
<div class="target-people-container">
<img class="target-img" src="../images/HaveJoinedGame/ic_shoes.png">
<div class="target-people-text">每日5000步达标</div>
<img class="people-img" src="../images/HaveJoinedGame/ic_people.png">
<div class="target-people-text">已有2468人参赛</div>
</div>
<div class="hr"></div>
<div class="game-scroll-container">
<div class="game-scroll-item">
<div class="item-title-status">
<div class="item-title">第一天</div>
<div class="item-status0">未开始</div>
</div>
<div class="item-income" style="visibility: hidden;">
<div class="item-amount">2.56</div>
<div class="item-text">(元) 预计收益</div>
</div>
<div class="item-progress-num">
<div class="item-num" v-if="true">还有01天03小时56秒开始</div>
<template v-else>
<div class="item-progress" :style="'width: '+rate/100*2.46+'rem;'"></div>
<div class="item-num">2635/5000步</div>
</template>
</div>
</div>
<div class="game-scroll-item">
<div class="item-title-status">
<div class="item-title">第一天</div>
<div class="item-status1">比赛中</div>
</div>
<div class="item-income">
<div class="item-amount">2.56</div>
<div class="item-text">(元) 预计收益</div>
</div> </div>
<div class="item-progress-num"> <div class="game-title">5000步七日耐力赛</div>
<div class="item-num" v-if="false">还有01天03小时56秒开始</div> <div class="game-time">开赛时间：3月11日 00:00-3月17日24:00</div>
<template v-else> <div class="target-people-container">
<div class="item-progress" :style="'width: '+rate/100*2.46+'rem;'"></div> <img class="target-img" src="../images/HaveJoinedGame/ic_shoes.png">
<div class="item-num">2635/5000步</div> <div class="target-people-text">每日5000步达标</div>
</template> <img class="people-img" src="../images/HaveJoinedGame/ic_people.png">
<div class="target-people-text">已有2468人参赛</div>
</div> </div>
</div> <div class="hr"></div>
<div class="game-scroll-item"> <swiper :options="swiperOption" class="game-scroll-container">
<div class="item-title-status"> <swiper-slide>
<div class="item-title">第一天</div> <div class="game-scroll-item">
<div class="item-status2">已淘汰</div> <div class="item-title-status">
</div> <div class="item-title">第一天</div>
<div class="item-income" style="visibility: hidden;"> <div class="item-status0">未开始</div>
<div class="item-amount">2.56</div> </div>
<div class="item-text">(元) 预计收益</div> <div class="item-income" style="visibility: hidden;">
</div> <div class="item-amount">2.56</div>
<div class="item-progress-num"> <div class="item-text">(元) 预计收益</div>
<div class="item-num" v-if="false">还有01天03小时56秒开始</div> </div>
<template v-else> <div class="item-progress-num">
<div class="item-progress" :style="'width: '+rate/100*2.46+'rem;'"></div> <div class="item-num" v-if="true">还有01天03小时56秒开始</div>
<div class="item-num">2635/5000步</div> <template v-else>
</template> <div class="item-progress" :style="'width: '+rate/100*2.46+'rem;'"></div>
</div> <div class="item-num">2635/5000步</div>
</div> </template>
</div>
</div>
</swiper-slide>
<swiper-slide>
<div class="game-scroll-item">
<div class="item-title-status">
<div class="item-title">第一天</div>
<div class="item-status1">比赛中</div>
</div>
<div class="item-income">
<div class="item-amount">2.56</div>
<div class="item-text">(元) 预计收益</div>
</div>
<div class="item-progress-num">
<div class="item-num" v-if="false">还有01天03小时56秒开始</div>
<template v-else>
<div class="item-progress" :style="'width: '+rate/100*2.46+'rem;'"></div>
<div class="item-num">2635/5000步</div>
</template>
</div>
</div>
</swiper-slide>
<swiper-slide>
<div class="game-scroll-item">
<div class="item-title-status">
<div class="item-title">第一天</div>
<div class="item-status2">已淘汰</div>
</div>
<div class="item-income" style="visibility: hidden;">
<div class="item-amount">2.56</div>
<div class="item-text">(元) 预计收益</div>
</div>
<div class="item-progress-num">
<div class="item-num" v-if="false">还有01天03小时56秒开始</div>
<template v-else>
<div class="item-progress" :style="'width: '+rate/100*2.46+'rem;'"></div>
<div class="item-num">2635/5000步</div>
</template>
</div>
</div>
</swiper-slide>
</swiper>
<div class="func-btn" @click="goOtherPage('GoXCX')">提交今日步数</div>
<!-- 报名成功弹框 -->
<!-- <div class="game-status-popup">
<div class="game-status-container">
<img class="status-icon" src="../images/HaveJoinedGame/pop_bmcg_title.png">
<img class="join-success-banner" src="../images/HaveJoinedGame/pop_bmcg_img.png">
<div class="popup-text1"><span>每日24点前</span>打开「运动打卡」小程序，手动提交今日步数，否则可能导致无法分钱哦！</div>
<div class="popup-text2">注：微信暂不支持小程序实时更新步数</div>
<div class="popup-btn1 green-btn">邀请好友来参赛</div>
<img class="close-btn" src="../images/common/pop_ic_close.png">
</div>
</div> -->
<!-- 恭喜达标弹框 -->
<!-- <div class="game-status-popup">
<div class="game-status-container">
<img class="status-icon" src="../images/HaveJoinedGame/pop_gxdb_title.png">
<div class="status-date">第2日达标</div>
<div class="status-money">
<div class="popup-text3">返还契约金</div>
<div class="popup-text4">1.00<span>元</span></div>
<div class="popup-text5">第0311期5000步7日耐力赛</div>
</div>
<div class="popup-text6">5000步达标，今天走了6823步</div>
<div class="popup-btn1 green-btn">炫耀一下</div>
<img class="close-btn" src="../images/common/pop_ic_close.png">
</div>
</div> -->
<!-- 你已被淘汰弹框 -->
<!-- <div class="game-status-popup">
<div class="game-status-container">
<img class="status-icon" src="../images/HaveJoinedGame/pop_out_title.png">
<div class="status-date">第3日未达标</div>
<div class="status-money">
<div class="popup-text3">扣除契约金</div>
<div class="popup-text4">1.00<span>元</span></div>
<div class="popup-text5">第0311期5000步7日耐力赛</div>
</div>
<div class="popup-text6">5000步达标，今天走了6823步</div>
<div class="popup-text7">已达标3天，契约金已返还至你的钱包</div>
<div class="popup-btn1 yellow-btn">报名下一期</div>
<img class="close-btn" src="../images/common/pop_ic_close.png">
</div>
</div> -->
</div> </div>
<div class="func-btn" @click="goOtherPage('GoXCX')">提交今日步数</div>
<!-- 报名成功弹框 -->
<!-- <div class="game-status-popup">
<div class="game-status-container">
<img class="status-icon" src="../images/HaveJoinedGame/pop_bmcg_title.png">
<img class="join-success-banner" src="../images/HaveJoinedGame/pop_bmcg_img.png">
<div class="popup-text1"><span>每日24点前</span>打开「运动打卡」小程序，手动提交今日步数，否则可能导致无法分钱哦！</div>
<div class="popup-text2">注：微信暂不支持小程序实时更新步数</div>
<div class="popup-btn1 green-btn">邀请好友来参赛</div>
<img class="close-btn" src="../images/common/pop_ic_close.png">
</div>
</div> -->
<!-- 恭喜达标弹框 -->
<!-- <div class="game-status-popup">
<div class="game-status-container">
<img class="status-icon" src="../images/HaveJoinedGame/pop_gxdb_title.png">
<div class="status-date">第2日达标</div>
<div class="status-money">
<div class="popup-text3">返还契约金</div>
<div class="popup-text4">1.00<span>元</span></div>
<div class="popup-text5">第0311期5000步7日耐力赛</div>
</div>
<div class="popup-text6">5000步达标，今天走了6823步</div>
<div class="popup-btn1 green-btn">炫耀一下</div>
<img class="close-btn" src="../images/common/pop_ic_close.png">
</div>
</div> -->
<!-- 你已被淘汰弹框 -->
<!-- <div class="game-status-popup">
<div class="game-status-container">
<img class="status-icon" src="../images/HaveJoinedGame/pop_out_title.png">
<div class="status-date">第3日未达标</div>
<div class="status-money">
<div class="popup-text3">扣除契约金</div>
<div class="popup-text4">1.00<span>元</span></div>
<div class="popup-text5">第0311期5000步7日耐力赛</div>
</div>
<div class="popup-text6">5000步达标，今天走了6823步</div>
<div class="popup-text7">已达标3天，契约金已返还至你的钱包</div>
<div class="popup-btn1 yellow-btn">报名下一期</div>
<img class="close-btn" src="../images/common/pop_ic_close.png">
</div>
</div> -->
</div>
</template> </template>
<script> <script>
import Title from "@/components/Title.vue"; import Title from "@/components/Title.vue";
import {daka_status_detail} from "@/components/axios/api"; import {daka_status_detail} from "@/components/axios/api";
import "swiper/dist/css/swiper.css";
import {swiper, swiperSlide} from "vue-awesome-swiper";
export default { export default {
name: "HaveJoinedGame", name: "HaveJoinedGame",
components: { components: {
Title Title,
swiper,
swiperSlide
}, },
data() { data() {
return { return {
rate: 50 rate: 50,
swiperOption: {
slidesPerView: "auto",
centeredSlides: true,
spaceBetween: 10
}
} }
}, },
created() { created() {
...@@ -146,341 +162,361 @@ ...@@ -146,341 +162,361 @@
} }
daka_status_detail(this.$route.query.week, grade).then(res => { daka_status_detail(this.$route.query.week, grade).then(res => {
console.log(res) console.log(res)
}); })
} }
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.have-joined-game-page { .swiper-container {
width: 100%; margin-left: 0 !important;
min-height: 100vh;
background-color: rgb(70, 88, 149);
background-image: url(../images/SignUp/sy_beijing.png);
background-repeat: no-repeat;
background-size: 100%;
background-position: center top;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
position: relative;
.page-title {
width: 100%;
position: fixed;
left: 0;
top: 0;
}
.game-bonus-container {
width: 6.4rem;
padding: .3rem 0;
box-sizing: border-box;
background: linear-gradient(90deg, rgba(255, 255, 255, 0), #1A285A, rgba(255, 255, 255, 0));
margin-top: 2.38rem;
.bonus-title {
font-size: .3rem;
line-height: 1;
color: #fff;
text-align: center;
}
.bonus-amount {
font-size: .64rem;
line-height: .8;
color: #FFE253;
text-align: center;
margin-top: .26rem;
}
}
.game-title {
font-size: .36rem;
line-height: 1;
color: #fff;
font-weight: bold;
margin-top: .4rem;
}
.game-time {
font-size: .24rem;
line-height: 1;
color: #D6DFFF;
padding: .12rem .38rem;
border-radius: .48rem;
background: #556CB6;
margin-top: .14rem;
}
.target-people-container {
display: flex;
margin-top: .34rem;
.target-img {
width: .3rem;
height: .26rem;
}
.people-img {
width: .28rem;
height: .24rem;
margin-left: .5rem;
}
.target-people-text {
font-size: .26rem;
line-height: 1;
color: #fff;
margin-left: .08rem;
}
} }
.hr {
width: 3rem; .swiper-slide {
height: .01rem; width: 5.1rem;
background: #6F82C3; height: 2.68rem;
margin-top: .5rem;
} }
.game-scroll-container {
width: 100%; .swiper-slide img {
height: 2.68rem;
margin-top: .4rem;
padding: 0 .3rem;
box-sizing: border-box;
overflow-x: scroll;
white-space: nowrap;
&::-webkit-scrollbar {
display: none;
}
.game-scroll-item {
width: 5.1rem; width: 5.1rem;
height: 2.68rem; height: 2.68rem;
background-image: url(../images/HaveJoinedGame/img_card.png); }
.have-joined-game-page {
// width: 100%;
min-height: 100vh;
background-color: rgb(70, 88, 149);
background-image: url(../images/SignUp/sy_beijing.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100%;
padding-top: .24rem; background-position: center top;
box-sizing: border-box; display: flex;
margin-left: .2rem; flex-direction: column;
display: inline-block; align-items: center;
vertical-align: top; overflow: hidden;
&:first-child { position: relative;
margin-left: 0; .page-title {
width: 100%;
position: fixed;
left: 0;
top: 0;
} }
.item-title-status { .game-bonus-container {
width: 100%; width: 6.4rem;
padding: 0 .24rem 0 .3rem; padding: 0.3rem 0;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
.item-title {
font-size: .3rem;
line-height: 1;
color: #fff;
}
.item-status0 {
padding: 0 .16rem;
box-sizing: border-box; box-sizing: border-box;
background: rgba(255, 255, 255, .4); background: linear-gradient(
font-size: .26rem; 90deg,
line-height: .42rem; rgba(255, 255, 255, 0),
color: #fff; #1a285a,
} rgba(255, 255, 255, 0)
.item-status1 { );
padding: 0 .16rem; margin-top: 2.38rem;
box-sizing: border-box; .bonus-title {
background: #FCF776; font-size: 0.3rem;
font-size: .26rem; line-height: 1;
line-height: .42rem; color: #fff;
color: #703E0B; text-align: center;
} }
.item-status2 { .bonus-amount {
padding: 0 .16rem; font-size: 0.64rem;
box-sizing: border-box; line-height: 0.8;
background: #A5A5A5; color: #ffe253;
font-size: .26rem; text-align: center;
line-height: .42rem; margin-top: 0.26rem;
}
}
.game-title {
font-size: 0.36rem;
line-height: 1;
color: #fff; color: #fff;
} font-weight: bold;
margin-top: 0.4rem;
} }
.item-income { .game-time {
width: 100%; font-size: 0.24rem;
padding-left: .3rem;
box-sizing: border-box;
margin-top: .4rem;
display: flex;
align-items: flex-end;
.item-amount {
font-size: .48rem;
line-height: .8;
color: #FCF776;
}
.item-text {
font-size: .26rem;
line-height: 1; line-height: 1;
color: #DBF3FF; color: #d6dfff;
margin-left: .1rem; padding: 0.12rem 0.38rem;
} border-radius: 0.48rem;
background: #556cb6;
margin-top: 0.14rem;
} }
.item-progress-num { .target-people-container {
width: 100%; display: flex;
padding: 0 .3rem; margin-top: 0.34rem;
box-sizing: border-box; .target-img {
margin-top: .58rem; width: 0.3rem;
display: flex; height: 0.26rem;
align-items: center; }
justify-content: space-between; .people-img {
.item-progress { width: 0.28rem;
height: .06rem; height: 0.24rem;
background: #fff; margin-left: 0.5rem;
position: relative; }
&:after { .target-people-text {
content: ''; font-size: 0.26rem;
width: 2.46rem; line-height: 1;
height: .06rem; color: #fff;
background: rgba(255, 255, 255, .5); margin-left: 0.08rem;
position: absolute;
} }
}
.item-num {
font-size: .26rem;
line-height: 1;
color: #fff;
}
} }
} .hr {
} width: 3rem;
.func-btn { height: 0.01rem;
width: 5.6rem; background: #6f82c3;
border-radius: .92rem; margin-top: 0.5rem;
background: #FABD21;
font-size: .4rem;
line-height: .92rem;
color: #fff;
font-weight: bold;
text-align: center;
margin-top: 1.2rem;
}
}
.game-status-popup {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 998;
background: rgba(0, 0, 0, .5);
display: flex;
align-items: center;
justify-content: center;
.game-status-container {
width: 6rem;
background: #fff;
border-radius: .08rem;
padding-bottom: .4rem;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
.status-icon {
width: 5.08rem;
height: 2.58rem;
margin-top: -1.29rem;
}
.join-success-banner {
width: 5.44rem;
height: 3.18rem;
margin-top: .3rem;
}
.status-date {
font-size: .36rem;
line-height: 1;
color: #333;
font-weight: bold;
text-align: center;
margin-top: .4rem;
}
.status-money {
width: 5.04rem;
height: 2.84rem;
background-image: url(../images/HaveJoinedGame/pop_gxdb_board.png);
background-size: 100%;
margin-top: .42rem;
.popup-text3 {
font-size: .3rem;
line-height: 1;
color: #463A2C;
text-align: center;
margin-top: .42rem;
} }
.popup-text4 { .game-scroll-container {
font-size: 1.2rem; width: 100%;
line-height: .8; height: 2.68rem;
color: #FABD21; margin-top: 0.4rem;
text-align: center; padding: 0 0.3rem;
margin-top: .24rem; box-sizing: border-box;
span { overflow-x: scroll;
font-size: .3rem; white-space: nowrap;
line-height: 1; &::-webkit-scrollbar {
vertical-align: bottom; display: none;
} }
.game-scroll-item {
width: 5.1rem;
height: 2.68rem;
background-image: url(../images/HaveJoinedGame/img_card.png);
background-repeat: no-repeat;
background-size: 100% 100%;
padding-top: 0.24rem;
box-sizing: border-box;
margin-left: 0.2rem;
display: inline-block;
vertical-align: top;
&:first-child {
margin-left: 0;
}
.item-title-status {
width: 100%;
padding: 0 0.24rem 0 0.3rem;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
.item-title {
font-size: 0.3rem;
line-height: 1;
color: #fff;
}
.item-status0 {
padding: 0 0.16rem;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.4);
font-size: 0.26rem;
line-height: 0.42rem;
color: #fff;
}
.item-status1 {
padding: 0 0.16rem;
box-sizing: border-box;
background: #fcf776;
font-size: 0.26rem;
line-height: 0.42rem;
color: #703e0b;
}
.item-status2 {
padding: 0 0.16rem;
box-sizing: border-box;
background: #a5a5a5;
font-size: 0.26rem;
line-height: 0.42rem;
color: #fff;
}
}
.item-income {
width: 100%;
padding-left: 0.3rem;
box-sizing: border-box;
margin-top: 0.4rem;
display: flex;
align-items: flex-end;
.item-amount {
font-size: 0.48rem;
line-height: 0.8;
color: #fcf776;
}
.item-text {
font-size: 0.26rem;
line-height: 1;
color: #dbf3ff;
margin-left: 0.1rem;
}
}
.item-progress-num {
width: 100%;
padding: 0 0.3rem;
box-sizing: border-box;
margin-top: 0.58rem;
display: flex;
align-items: center;
justify-content: space-between;
.item-progress {
height: 0.06rem;
background: #fff;
position: relative;
&:after {
content: "";
width: 2.46rem;
height: 0.06rem;
background: rgba(255, 255, 255, 0.5);
position: absolute;
}
}
.item-num {
font-size: 0.26rem;
line-height: 1;
color: #fff;
}
}
}
} }
.popup-text5 { .func-btn {
font-size: .24rem; width: 5.6rem;
line-height: 1; border-radius: 0.92rem;
color: #B3AEA2; background: #fabd21;
text-align: center; font-size: 0.4rem;
margin-top: .42rem; line-height: 0.92rem;
color: #fff;
font-weight: bold;
text-align: center;
margin-top: 1.2rem;
} }
} }
.popup-text1 {
width: 5.34rem; .game-status-popup {
font-size: .26rem; position: fixed;
line-height: .42rem; left: 0;
color: #333; top: 0;
text-align: center; right: 0;
margin-top: .16rem; bottom: 0;
span { z-index: 998;
color: #FABD21; background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
.game-status-container {
width: 6rem;
background: #fff;
border-radius: 0.08rem;
padding-bottom: 0.4rem;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
.status-icon {
width: 5.08rem;
height: 2.58rem;
margin-top: -1.29rem;
}
.join-success-banner {
width: 5.44rem;
height: 3.18rem;
margin-top: 0.3rem;
}
.status-date {
font-size: 0.36rem;
line-height: 1;
color: #333;
font-weight: bold;
text-align: center;
margin-top: 0.4rem;
}
.status-money {
width: 5.04rem;
height: 2.84rem;
background-image: url(../images/HaveJoinedGame/pop_gxdb_board.png);
background-size: 100%;
margin-top: 0.42rem;
.popup-text3 {
font-size: 0.3rem;
line-height: 1;
color: #463a2c;
text-align: center;
margin-top: 0.42rem;
}
.popup-text4 {
font-size: 1.2rem;
line-height: 0.8;
color: #fabd21;
text-align: center;
margin-top: 0.24rem;
span {
font-size: 0.3rem;
line-height: 1;
vertical-align: bottom;
}
}
.popup-text5 {
font-size: 0.24rem;
line-height: 1;
color: #b3aea2;
text-align: center;
margin-top: 0.42rem;
}
}
.popup-text1 {
width: 5.34rem;
font-size: 0.26rem;
line-height: 0.42rem;
color: #333;
text-align: center;
margin-top: 0.16rem;
span {
color: #fabd21;
}
}
.popup-text2 {
font-size: 0.24rem;
line-height: 1;
color: #a5a5a5;
text-align: center;
margin-top: 0.32rem;
}
.popup-text6 {
font-size: 0.26rem;
line-height: 1;
color: #bfbfbf;
text-align: center;
margin: 0.4rem 0 0.34rem;
}
.popup-text7 {
font-size: 0.26rem;
line-height: 1;
color: #8e5b29;
text-align: center;
}
.popup-btn1 {
width: 4.6rem;
height: 0.8rem;
border-radius: 0.8rem;
font-size: 0.36rem;
line-height: 0.8rem;
color: #fff;
font-weight: bold;
text-align: center;
margin-top: 0.4rem;
}
.green-btn {
background: #1fdbb1;
}
.yellow-btn {
background: #fabd21;
}
.close-btn {
width: 0.58rem;
height: 0.58rem;
position: absolute;
bottom: -1.08rem;
left: 50%;
transform: translateX(-50%);
}
} }
}
.popup-text2 {
font-size: .24rem;
line-height: 1;
color: #a5a5a5;
text-align: center;
margin-top: .32rem;
}
.popup-text6 {
font-size: .26rem;
line-height: 1;
color: #BFBFBF;
text-align: center;
margin: .4rem 0 .34rem;
}
.popup-text7 {
font-size: .26rem;
line-height: 1;
color: #8E5B29;
text-align: center;
}
.popup-btn1 {
width: 4.6rem;
height: .8rem;
border-radius: .8rem;
font-size: .36rem;
line-height: .8rem;
color: #fff;
font-weight: bold;
text-align: center;
margin-top: .4rem;
}
.green-btn {
background: #1FDBB1;
}
.yellow-btn {
background: #FABD21;
}
.close-btn {
width: .58rem;
height: .58rem;
position: absolute;
bottom: -1.08rem;
left: 50%;
transform: translateX(-50%);
}
} }
}
</style> </style>
src/views/Rule.vue
...@@ -2,7 +2,9 @@ ...@@ -2,7 +2,9 @@
<div class="rule-page"> <div class="rule-page">
<Title class="page-title" title="活动规则与协议" titleColor="#000" @goback="goback" show_back="true" arrowColor="black"></Title> <Title class="page-title" title="活动规则与协议" titleColor="#000" @goback="goback" show_back="true" arrowColor="black"></Title>
<div class="section-title">挑战玩法：</div> <div class="section-title">挑战玩法：</div>
<img class="game-way-img" src="../images/Rule/img_rule.png"> <img class="game-way-img" v-if="bushuType == 1" src="../images/Rule/img_rule_0.png">
<img class="game-way-img" v-if="bushuType == 2" src="../images/Rule/img_rule_1.png">
<img class="game-way-img" v-if="bushuType == 3" src="../images/Rule/img_rule_2.png">
<div class="section-title">参赛须知：</div> <div class="section-title">参赛须知：</div>
<div class="content1-container"> <div class="content1-container">
<div class="content1-item">• 为督促大家运动，每位用户报名均需提供契约金</div> <div class="content1-item">• 为督促大家运动，每位用户报名均需提供契约金</div>
...@@ -35,8 +37,15 @@ ...@@ -35,8 +37,15 @@
}, },
data() { data() {
return { return {
bushuType: 0
}; };
}, },
mounted(){
let LastLevel = Number(sessionStorage.getItem('bushuType'))
if(LastLevel){
this.bushuType = LastLevel
}
},
methods: { methods: {
goback() { goback() {
history.go(-1); history.go(-1);
......
src/views/SignUp.vue
...@@ -42,37 +42,54 @@ ...@@ -42,37 +42,54 @@
<script> <script>
import NoticeBonus from "@/components/NoticeBonus.vue"; import NoticeBonus from "@/components/NoticeBonus.vue";
import { import Free from "@/components/Free.vue";
track, import Modal from "@/components/Modal.vue";
userCards, import PayFailModal from "@/components/PayFailModal.vue";
daka_index import { dakaPay, track, userCards, daka_index } from "@/components/axios/api";
} from "@/components/axios/api";
export default { export default {
name: "SignUp", name: "SignUp",
components: { components: {
NoticeBonus NoticeBonus,
Modal,
Free,
PayFailModal
}, },
data() { data() {
return { return {
contract_data: {}, contract_data: {},
showFreeModal: false,
modalTitle: "",
modalDesc: "",
modalShown: false,
current_date: {}, current_date: {},
isShowPayFail: false,
isFollow: false, isFollow: false,
gameList: [], gameList: [],
choosedLevel: 2 choosedLevel: 1
} };
}, },
created() { created() {
this.getPageData(); this.getPageData();
}, },
mounted() {
//获取步数tab缓存
let LastLevel = Number(sessionStorage.getItem("bushuType"));
if (LastLevel) {
this.choosedLevel = LastLevel;
}else{
sessionStorage.setItem("bushuType", this.choosedLevel);
}
},
methods: { methods: {
chooseGameLevel(level) { chooseGameLevel(level) {
sessionStorage.setItem("bushuType", level);
this.choosedLevel = level; this.choosedLevel = level;
this.getPageData(level); this.getPageData(level);
}, },
goOtherPage(pageName) { goOtherPage(pageName) {
this.$router.push({name: pageName}); this.$router.push({ name: pageName });
}, },
goWhereDetail(item) { goWhereDetail(item) {
if (item.status===1&&item.already_join===1) { // 已报名 if (item.status===1&&item.already_join===1) { // 已报名
...@@ -100,8 +117,27 @@ ...@@ -100,8 +117,27 @@
daka_index(grade).then(res => { daka_index(grade).then(res => {
if (res.code === 0) { if (res.code === 0) {
this.gameList = res.data; this.gameList = res.data;
console.log(this.gameList);
} }
}) });
},
togglePayFail() {
this.isShowPayFail = !this.isShowPayFail;
},
showSuccess() {
this.showModal("温馨提示", "报名成功", {
scb: () => {
if (this.isFollow == 1) {
this.$router.push({ name: "Read" });
} else {
this.$router.push({ name: "Success" });
}
}
});
},
confirmModal(scb) {
scb && scb();
this.modalShown = false;
}, },
showFree(e) { showFree(e) {
e.stopPropagation(); e.stopPropagation();
...@@ -113,7 +149,6 @@ ...@@ -113,7 +149,6 @@
this.canCheckShowFree = false; this.canCheckShowFree = false;
this.canShowFree = false; this.canShowFree = false;
} }
userCards().then(res => { userCards().then(res => {
console.log("获取免契约金数据", res); console.log("获取免契约金数据", res);
let data = { let data = {
...@@ -135,163 +170,229 @@ ...@@ -135,163 +170,229 @@
this.showFreeModal = true; this.showFreeModal = true;
}); });
}, },
closeFree() {
this.showFreeModal = false;
},
showModal(title, desc, option) {
this.modalTitle = title || "";
this.modalDesc = desc || "";
this.modalOption = option || {};
this.modalShown = true;
},
closeModal() {
this.modalShown = false;
},
payToSign() {
dakaPay().then(response => {
this.current_date = new Date(response.date);
if (response.code == 1) {
this.showModal("温馨提示", response.msg);
return;
}
let result = response.data;
console.log("请求打卡支付数据", result);
if (result) {
WeixinJSBridge.invoke(
"getBrandWCPayRequest",
{
appId: result.appId, //公众号名称，由商户传入
timeStamp: `${result.timeStamp}`, //时间戳，自1970年以来的秒数
nonceStr: result.nonceStr, //随机串
package: result.package,
signType: result.signType, //微信签名方式：
paySign: result.paySign //微信签名
},
// result,
res => {
console.log("支付调用结果", res);
if (res.err_msg == "get_brand_wcpay_request:ok") {
// 使用以上方式判断前端返回,微信团队郑重提示：
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
// 支付成功后的回调函数
console.log("支付成功");
this.showModal("温馨提示", "报名成功", {
scb: () => {
if (this.isFollow == 1) {
this.$router.push({ name: "Read" });
} else {
this.$router.push({ name: "Success" });
}
}
});
// this.dateSelect(2);
// localStorage.setItem("is_every", 0)
// location.replace("#/Success");
}
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();
}
}
);
}
});
} }
} }
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.sign-up-page { .sign-up-page {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow-y: scroll; overflow-y: scroll;
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-attachment: scroll; background-attachment: scroll;
position: relative; position: relative;
display: flex;
flex-direction: column;
align-items: center;
.top-nav-level {
flex-shrink: 0;
margin-top: 0.3rem;
border: 0.02rem solid #fff;
border-radius: 0.1rem;
overflow: hidden;
background: #fff;
box-sizing: border-box;
display: flex;
.level-item {
width: 1.76rem;
font-size: 0.3rem;
line-height: 0.54rem;
color: #465895;
text-align: center;
position: relative;
&:after {
content: "";
height: 0.26rem;
width: 0.02rem;
background: #465895;
position: absolute;
left: -0.02rem;
top: 50%;
transform: translateY(-50%);
}
&:first-child:after {
display: none;
}
&.active {
background: #465895;
color: #fff;
border-radius: 0.1rem;
font-weight: bold;
}
&.active:after {
display: none;
}
}
}
.view-steps-btn {
flex-shrink: 0;
width: 1.11rem;
height: 0.84rem;
display: block;
position: absolute;
left: 0;
top: 1.22rem;
}
.notice-broadcast {
flex-shrink: 0;
margin: 3.68rem 0 0.18rem;
}
.challenge-card {
flex-shrink: 0;
width: 6.9rem;
height: 4.4rem;
background-image: url(../images/SignUp/sy_dikuang.png);
background-size: 100% 100%;
margin-bottom: 0.4rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.top-nav-level { position: relative;
flex-shrink: 0; .corner-marker {
margin-top: .3rem; width: 1.39rem;
border: .02rem solid #fff; height: 1.39rem;
border-radius: .1rem; position: absolute;
overflow: hidden; top: -0.02rem;
background: #fff; right: -0.02rem;
box-sizing: border-box; }
.card-title {
font-size: 0.36rem;
line-height: 1;
color: #fff;
margin-top: 0.28rem;
}
.card-time {
font-size: 0.22rem;
line-height: 1;
color: #fff;
margin-top: 0.16rem;
}
.card-info {
width: 100%;
margin-top: 0.56rem;
display: flex; display: flex;
.level-item { align-items: center;
width: 1.76rem; justify-content: space-between;
font-size: .3rem; .info-item {
line-height: .54rem; flex: 1;
color: #465895; border-left: 0.02rem solid #fff;
text-align: center; display: flex;
position: relative; flex-direction: column;
&:after { align-items: center;
content: ''; &:first-child {
height: .26rem; border-left: none;
width: .02rem;
background: #465895;
position: absolute;
left: -.02rem;
top: 50%;
transform: translateY(-50%);
} }
&:first-child:after { .item-title {
display: none; font-size: 0.28rem;
line-height: 0.8;
color: #fff;
} }
&.active { .item-content {
background: #465895; font-size: 0.48rem;
line-height: 0.8;
color: #fff; color: #fff;
border-radius: .1rem; margin-top: 0.12rem;
font-weight: bold;
} }
&.active:after { .item-money {
display: none; font-size: 0.48rem;
line-height: 0.8;
color: #fcf776;
margin-top: 0.12rem;
} }
} }
} }
.view-steps-btn { .card-btn {
flex-shrink: 0; width: 4rem;
width: 1.11rem; height: 0.8rem;
height: .84rem; background: #fabd21;
display: block; border-radius: 0.74rem;
position: absolute; box-shadow: 0 0.02rem 0.04rem 0 rgba(0, 0, 0, 0.2);
left: 0;
top: 1.22rem;
}
.notice-broadcast {
flex-shrink: 0;
margin: 3.68rem 0 .18rem;
}
.challenge-card {
flex-shrink: 0;
width: 6.9rem;
height: 4.4rem;
background-image: url(../images/SignUp/sy_dikuang.png);
background-size: 100% 100%;
margin-bottom: .4rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
position: relative; justify-content: center;
.corner-marker { font-size: 0.3rem;
width: 1.39rem; line-height: 1;
height: 1.39rem; color: #fff;
position: absolute; position: absolute;
top: -.02rem; bottom: 0.38rem;
right: -.02rem; left: 50%;
} transform: translateX(-50%);
.card-title { .card-btn-tip {
font-size: .36rem; font-size: 0.22rem;
line-height: 1; margin-top: 0.06rem;
color: #fff;
margin-top: .28rem;
}
.card-time {
font-size: .22rem;
line-height: 1;
color: #fff;
margin-top: .16rem;
}
.card-info {
width: 100%;
margin-top: .56rem;
display: flex;
align-items: center;
justify-content: space-between;
.info-item {
flex: 1;
border-left: .02rem solid #fff;
display: flex;
flex-direction: column;
align-items: center;
&:first-child {
border-left: none;
}
.item-title {
font-size: .28rem;
line-height: .8;
color: #fff;
}
.item-content {
font-size: .48rem;
line-height: .8;
color: #fff;
margin-top: .12rem;
}
.item-money {
font-size: .48rem;
line-height: .8;
color: #fcf776;
margin-top: .12rem;
}
}
}
.card-btn {
width: 4rem;
height: .8rem;
background: #fabd21;
border-radius: .74rem;
box-shadow: 0 .02rem .04rem 0 rgba(0, 0, 0, .2);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: .3rem;
line-height: 1;
color: #fff;
position: absolute;
bottom: .38rem;
left: 50%;
transform: translateX(-50%);
.card-btn-tip {
font-size: .22rem;
margin-top: .06rem;
}
} }
} }
} }
}
</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