+
+
+ The event has ended
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
Token Rewards
-
Yoyo Event
+
+
Token Rewards
+
Yoyo Event
+
+
Connect and check
-
Gacha Quest
@@ -256,13 +370,21 @@ import { useRouter, useRoute } from "vue-router";
import Vue3autocounter from "vue3-autocounter";
import NavBar from "../layout/navber.vue";
import { useCopyToClipboard } from "../../hooks/useCopyToClipboard";
-import { getLeaderboard, UserInfo, UserStatus, getJoin } from "@/api/User";
+import {
+ getLeaderboard,
+ UserInfo,
+ UserStatus,
+ getJoin,
+ getBasic,
+} from "@/api/User";
import { useChainStore } from "@/store/chain";
import { useAppStore } from "@/store/app";
+import { hasMetamask } from "@/utils/chain.util";
import { ref, reactive, watchEffect, onMounted, watch, computed } from "vue";
import { message } from "ant-design-vue";
const chain = useChainStore();
const AppModule = useAppStore();
+const loginLoading = ref(false);
const router = useRouter();
const route = useRoute();
const invited = ref(0);
@@ -274,6 +396,28 @@ const counter = ref(null);
const isStatus = ref(false);
const data = reactive([]);
const userInfo = reactive({});
+const cecRankShow = ref(0);
+const totalScore = ref(1518320);
+const rankScore = ref(82673);
+
+const remainingReward = ref(500000);
+
+const userPercentage = computed(
+ () => (userInfo.point / totalScore.value) * 100
+);
+const cuount = computed(() => (userInfo.rank / rankScore.value) * 100);
+const reward = computed(() => {
+ if (cuount.value > 0.5) {
+ return 0;
+ } else if (cuount.value <= 0.1) {
+ return remainingReward.value * 0.4 * (userPercentage.value * 0.1);
+ } else if (cuount.value > 0.1 && cuount.value <= 0.3) {
+ return remainingReward.value * 0.4 * (userPercentage.value * 0.2);
+ } else if (cuount.value > 0.3 && cuount.value <= 0.5) {
+ return remainingReward.value * 0.2 * (userPercentage.value * 0.2);
+ }
+});
+
const formattedData = computed(() => {
return data
.map((item) => ({
@@ -292,16 +436,36 @@ const formattedData = computed(() => {
const typesInRegular = computed(() =>
userInfo.regular.map((item) => item.type).join("
")
);
-
-const assign = (source, target)=>{
+async function login(event) {
+ var next = window.location.href;
+ if (!hasMetamask()) {
+ var url = `https://metamask.app.link/dapp/${next}`;
+ location.href = url;
+ } else {
+ if (!chain.logined) {
+ // 没有登录情况下执行登录
+ loginLoading.value = true;
+ try {
+ await chain.chainManager.login();
+ chain.logined = chain.chainManager.isLogined;
+ currentTask.value = 2;
+ loginLoading.value = false;
+ } catch (err) {
+ loginLoading.value = false;
+ }
+ // console.log("logined:", chain.chainManager.isLogined);
+ }
+ }
+}
+const assign = (source, target) => {
if (target === undefined || target === null) {
- throw new TypeError('Cannot convert undefined or null to object')
+ throw new TypeError("Cannot convert undefined or null to object");
}
for (let key in target) {
- source[key] = target[key]
+ source[key] = target[key];
}
-}
+};
const totalRegularPoints = computed(() =>
userInfo.regular.reduce((total, item) => total + item.point, 0)
);
@@ -316,9 +480,9 @@ const handTaskHome = () => {
const handTaskOne = () => {
const code = route.query.code;
if (code) {
- router.push({ path: "/undertest", query: { code: code } });
+ router.push({ path: "/taskTwo", query: { code: code } });
} else {
- router.push("/undertest");
+ router.push("/taskTwo");
}
console.log(router, "-=-=-");
};
@@ -342,7 +506,7 @@ const handleCopy = () => {
watch(
() => chain.logined,
async (newValue, oldValue) => {
- // console.log("logined changed from", oldValue, "to", newValue);
+ // console.log("logined changed from", oldValue, "to", newValue);
const res = await getLeaderboard({ offset: 0, limit: 100 });
console.log(res);
if (res) {
@@ -356,8 +520,15 @@ watch(
console.log(data.value, "ff");
}
const userStatus = await UserStatus({ account: AppModule.accountId });
-
- if ( userStatus && userStatus.claim && Number(userStatus.claim) !== 0 && userStatus.status.every((status) => status == 1)) {
+ const basic = await getBasic(AppModule.accountId.toLowerCase());
+ cecRankShow.value = basic.data.cecRankShow;
+
+ if (
+ userStatus &&
+ userStatus.claim &&
+ Number(userStatus.claim) !== 0 &&
+ userStatus.status.every((status) => status == 1)
+ ) {
isStatus.value = true;
const resjoin = await getJoin({
account: AppModule.accountId,
@@ -380,6 +551,7 @@ watch(
onMounted(async () => {
const res = await getLeaderboard({ offset: 0, limit: 100 });
console.log(res);
+ console.log(userPercentage, "userPercentage.value");
if (res) {
data.value = res.data;
@@ -391,7 +563,14 @@ onMounted(async () => {
console.log(data.value, "ff");
}
const resStatus = await UserStatus({ account: AppModule.accountId });
- if ( resStatus && resStatus.claim && Number(resStatus.claim) !== 0 && resStatus.status.every((status) => status == 1)) {
+ const basic = await getBasic(AppModule.accountId.toLowerCase());
+ cecRankShow.value = basic.data.cecRankShow;
+ if (
+ resStatus &&
+ resStatus.claim &&
+ Number(resStatus.claim) !== 0 &&
+ resStatus.status.every((status) => status == 1)
+ ) {
isStatus.value = true;
}
const resq = await UserInfo({ account: AppModule.accountId });
@@ -412,10 +591,17 @@ onMounted(async () => {
.task-two-header {
// height: 65px;
}
+.the-event {
+ padding-left: 100px;
+ padding-right: 100px;
+ color: #fff;
+ font-size: 28px;
+}
.task-two {
position: relative;
width: 100%;
height: 100%;
+
// height: calc(100vh - 65px);
// padding-bottom: 100px;
.bg {
@@ -455,10 +641,19 @@ onMounted(async () => {
.complete {
// width: 48%;
- font-size: 18px;
- font-family: "MEurostile";
- font-weight: 400;
- color: #959595;
+ // font-size: 18px;
+ // font-family: "MEurostile";
+ // font-weight: 400;
+ // color: #959595;
+ }
+
+ .connect-btn {
+ width: 242px;
+ height: 46px;
+ text-align: center;
+ line-height: 46px;
+ cursor: pointer;
+ background: #ffde29;
}
.return {
font-size: 50px;
@@ -492,10 +687,216 @@ onMounted(async () => {
.content-right {
// padding-top: 51px;
- border-left: 1px solid #5d5548;
+ // border-left: 1px solid #5d5548;
padding-left: 66px;
// width: 100%;
position: relative;
+ .gacha-star {
+ // position: absolute;
+ // bottom: -50px;
+ // // right: 0px;
+ // left: 50%;
+ font-size: 12px;
+ width: 580px;
+ display: flex;
+ margin-top: 20px;
+ justify-content: center;
+ align-items: center;
+ font-family: "Poppins";
+ font-weight: 300;
+ color: #fefefe;
+ .gacha-star-item {
+ display: flex;
+ width: 480px;
+ .icon-star {
+ margin-right: 10px;
+ }
+ }
+ }
+ .boders {
+ margin-top: 10px;
+ }
+ .rewards-card {
+ padding-top: 29px;
+ padding-right: 42px;
+ width: 583px;
+ margin-bottom: 33px;
+ justify-content: space-between;
+ display: flex;
+ .base-rewards {
+ display: flex;
+ width: 210px;
+ justify-content: space-between;
+ }
+ }
+ .total-boders {
+ margin-top: 58px;
+ }
+ .cec-top {
+ }
+ .cec-title {
+ font-size: 19px;
+ font-family: "Poppins";
+ font-weight: 300;
+ position: relative;
+ color: #ffffff;
+ }
+ .cec-title::before {
+ content: "";
+ position: absolute;
+ top: 5px;
+ right: -9px;
+ width: 6px;
+ height: 6px;
+ background-color: red;
+ border-radius: 50%;
+ }
+ .cec-content {
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+ .cec-lable {
+ font-size: 19px;
+ font-family: "Poppins";
+ font-weight: 300;
+ color: #d79b30;
+ }
+ .cec-number {
+ font-size: 19px;
+ font-family: "Poppins";
+ font-weight: 400;
+ color: #fff000;
+ }
+ }
+ .connect-centent {
+ display: flex;
+ width: 783px;
+ justify-content: flex-end;
+ }
+
+ .points-btn {
+ width: 265px;
+ height: 52px;
+ padding-left: 32px;
+ display: flex;
+ padding-right: 32px;
+ align-items: center;
+ background: rgba(44, 34, 16, 0.5);
+ border: 1px solid #5c4e35;
+ }
+ .got {
+ font-size: 40px;
+ font-family: "GemunuExtraBold";
+ font-weight: 400;
+ // position: absolute;
+
+ color: #ffffff;
+ // margin-top: 72px;
+ margin-bottom: 15px;
+ }
+ .points-item-number {
+ font-size: 19px;
+ font-family: "Poppins-Regular";
+ font-weight: 400;
+ color: #52ff00;
+ }
+ .got-btn {
+ display: flex;
+ width: 583px;
+ justify-content: space-between;
+ }
+ .total-rewards {
+ width: 583px;
+ height: 66px;
+ background: rgba(44, 34, 16, 0.5);
+ border: 1px solid #5c4e35;
+ margin-top: 10px;
+ display: flex;
+ padding-left: 17px;
+ padding-right: 42px;
+ align-items: center;
+ justify-content: space-between;
+ .total-lable {
+ display: flex;
+ align-items: center;
+ .total-cec {
+ padding-left: 15px;
+ padding-right: 15px;
+ font-size: 19px;
+ font-family: "Poppins";
+ font-weight: 300;
+ color: #fefefe;
+ }
+ .triangle-icon-right {
+ transform: rotate(180deg);
+ }
+ }
+
+ .total-number {
+ font-size: 19px;
+ font-family: "Poppins";
+ font-weight: 400;
+ color: #fff000;
+ }
+ }
+ .claim-btn {
+ width: 153px;
+ height: 39px;
+ margin: 0 auto;
+ margin-top: 30px;
+ text-align: center;
+ line-height: 39px;
+ // cursor: pointer;
+ background: #757575;
+ }
+ .yoyo-content {
+ width: 100%;
+ justify-content: space-between;
+ display: flex;
+ padding-top: 20px;
+ align-items: center;
+ padding-right: 93px;
+ .your-yoyo-lable {
+ display: flex;
+ justify-content: space-between;
+ flex-direction: column;
+ .your-yoyo-text {
+ font-size: 28px;
+ font-family: "GemunuExtraBold";
+ font-weight: 400;
+ color: #ffffff;
+ }
+ .your-yoyo-number {
+ font-size: 28px;
+ font-family: "GemunuExtraBold";
+ font-weight: 400;
+ color: #62fe00;
+ }
+ }
+ .yoyo-coming-soon {
+ font-size: 18px;
+ font-family: "Poppins-Regular";
+ font-weight: 300;
+ color: #ffffff;
+ }
+ }
+ .yoyo-img {
+ width: 87px;
+ height: 60px;
+ img {
+ width: 87px;
+ // height: 60px;
+ }
+ }
+ .claim-text {
+ width: 38%;
+ font-size: 16px;
+ font-family: "Poppins-Regular";
+ font-weight: 300;
+ color: #fefefe;
+ margin: 0 auto;
+ margin-top: 18px;
+ }
.boder-left {
position: absolute;
top: 50px;
@@ -842,7 +1243,7 @@ onMounted(async () => {
.my-tooltip {
&.ant-tooltip {
//sass写法
- max-width: 600px;
+ max-width: 380px;
}
}
diff --git a/src/router/index.js b/src/router/index.js
index f667796..c4f5695 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -46,7 +46,7 @@ const routes = [
import(/* webpackChunkName "TaskOne" */ "@/components/task/TaskOne.vue"),
},
{
- path: "/taskTwo",
+ path: "/view",
name: "TaskTwo",
meta: {
title: "Gacha TaskTwo",
diff --git a/src/utils/requests.ts b/src/utils/requests.ts
new file mode 100644
index 0000000..2b8ff03
--- /dev/null
+++ b/src/utils/requests.ts
@@ -0,0 +1,65 @@
+import axios from 'axios'
+import { message } from 'ant-design-vue'
+
+import glodata from '@/store/user_global';
+
+// console.log(import.meta.env);
+
+const service = axios.create({
+ baseURL: import.meta.env.VUE_APP_GPAL_API3,
+ timeout: 10000
+})
+
+// Request interceptors
+service.interceptors.request.use(
+ (config) => {
+ // Add X-Access-Token header to every request, you can add other custom headers here
+ if (glodata.token) {
+ if (config.url) {
+ if (config.url.indexOf('?') > 0) {
+ config.url += `&token=${glodata.token}`
+ } else {
+ config.url += `?token=${glodata.token}`
+ }
+ if (config.url.indexOf('account=') < 0 && glodata.accountId) {
+ config.url += `&account=${glodata.accountId}`
+ }
+ if (config.url.indexOf('net_id=') < 0 && glodata.chainId) {
+ config.url += `&net_id=${glodata.chainId}`
+ }
+ }
+ }
+ config.headers['Content-Type'] = 'application/json'
+ return config
+ },
+ (error) => {
+ Promise.reject(error)
+ }
+)
+
+// Response interceptors
+service.interceptors.response.use(
+ (response) => {
+ // Some example codes here:
+ // code == 0: success
+ // code == 10: username or password is incorrect
+ // You can change this part for your own usage.
+ const res = response.data
+ if (res.errcode) {
+ // Message({
+ // message: res.errmsg || 'Error',
+ // type: 'error',
+ // duration: 5 * 1000
+ // })
+ // return Promise.reject(new Error(res.errmsg || 'Error'))
+ } else {
+ return response.data
+ }
+ },
+ (error) => {
+ message.error(error.message, 5);
+ return Promise.reject(error)
+ }
+)
+
+export default service
\ No newline at end of file
diff --git a/src/views/TaskView.vue b/src/views/TaskView.vue
index 9304be1..1924d46 100644
--- a/src/views/TaskView.vue
+++ b/src/views/TaskView.vue
@@ -3,6 +3,22 @@
+
+
+
+
+
+
+
gacha
+
+
+
+
+
+
+
badge
+
+
@@ -12,37 +28,72 @@
+
-
+
+
+
EVENT DURATION:
+
JUNE 26- JULY 31 AT 22:00(SGT)
+
+
+
+
+
-
-
+
@@ -81,6 +132,7 @@ const router = useRouter();
const AppModule = useAppStore();
const route = useRoute();
let code = ref(null);
+const isTab = ref(false);
const handTaskOne = () => {
const code = route.query.code;
if (code) {
@@ -94,12 +146,21 @@ const handTaskTwo = () => {
/// router.push("/taskTwo");
const code = route.query.code;
if (code) {
- router.push({ path: "/taskTwo", query: { code: code } });
+ router.push({ path: "/view", query: { code: code } });
} else {
- router.push("/taskTwo");
+ router.push("/view");
}
console.log(router, "-=-=-");
};
+const handTab=(selectIndex)=>{
+ if(selectIndex ==0){
+ isTab.value =!isTab.value
+ }else{
+ isTab.value =!isTab.value
+ window.location.href='https://badge.counterfire.games/'
+
+ }
+}
watch(
() => route.query,
@@ -170,14 +231,84 @@ onMounted(() => {
.the-title {
color: #fff;
font-family: "Arial";
+ margin-bottom: 30px;
font-size: 18px;
}
+ .game-left {
+ height: 100%;
+ position: relative;
+ //left: -160px;
+ left: 0;
+ margin-top: 20px;
+ display: flex;
+ width: 860px;
+ // justify-content: space-between;
+ // flex-direction: column;
+ // justify-content: flex-end;
+ .download-game {
+ }
+ .game-img {
+ width: 171px;
+ height: 62px;
+ img {
+ width: 100%;
+ }
+ // position: absolute;
+ // left: 0;
+ // top: -80px;
+ }
+ }
}
.center {
display: flex;
- height: 80%;
+ height: 90%;
width: 100%;
flex-direction: column;
+ position: relative;
+ .tab-activities {
+ position: absolute;
+ left: -300px;
+ top: 10px;
+ .item-btn {
+ width: 288px;
+ height: 132px;
+ display: flex;
+ font-size: 30px;
+ font-family: "Big John";
+ font-weight: 400;
+ cursor: pointer;
+ color: #000000;
+ line-height: 30px;
+
+ align-items: center;
+ justify-content: center;
+ background: url("../assets/img/task/event_tagBtn02.png") no-repeat;
+ background-size: 100% 100%;
+ .btn-icon{
+ width: 100px;
+ height: 100px;
+ }
+ }
+ .item-btn-active {
+ width: 288px;
+ height: 132px;
+ display: flex;
+ font-size: 30px;
+ font-family: "Big John";
+ font-weight: 400;
+ cursor: pointer;
+ .btn-icon{
+ width: 100px;
+ height: 100px;
+ }
+ color: #4f4e57;
+ line-height: 30px;
+ align-items: center;
+ justify-content: center;
+ background: url("../assets/img/task/event_tagBtn01.png") no-repeat;
+ background-size: 100% 100%;
+ }
+ }
}
// padding-top: 119px;
@@ -192,6 +323,14 @@ onMounted(() => {
.step-btn {
display: flex;
+ flex-direction: column;
+ .event-text {
+ color: #fff;
+ font-family: "Arial";
+ margin-top: 10px;
+ font-size: 20px;
+ // margin-bottom: 10px;
+ }
.step1 {
display: inline-block;
width: 240px;
@@ -240,8 +379,8 @@ onMounted(() => {
.step2 {
display: inline-block;
- width: 240px;
- height: 70px;
+ // width: 240px;
+ // height: 70px;
cursor: pointer;
line-height: 70px;
font-size: 18px;
@@ -250,31 +389,31 @@ onMounted(() => {
color: #ffffff;
text-align: center;
// border: 2px solid rgb(190, 186, 186);
- background: url("@/assets/img/task/task-btn.png") no-repeat;
- background-size: contain;
+ // background: url("@/assets/img/task/task-btn.png") no-repeat;
+ // background-size: contain;
}
.step2-item {
position: relative;
}
- .step2-item::after {
- content: "";
- display: inline-block;
- position: absolute;
- top: 50%;
- left: 84%; /* 将图标放在文字的右侧 */
- transform: translateY(-50%); /* 垂直居中对齐 */
- width: 10px; /* 设置图标宽度 */
- height: 10px; /* 设置图标高度 */
- background-image: url("@/assets/img/task/triangle-black.png");
- background-size: contain;
- background-repeat: no-repeat;
- margin-left: 0px; /* 与文字之间的间距 */
- transition: margin-left 0.3s, background-image 0.3s; /* 添加过渡动画 */
- }
- .step2:hover .step2-item::after {
- background-image: url("@/assets/img/task/triangle-black-active.png");
- margin-left: 10px; /* 在 hover 时向前移动 4px */
- }
+ // .step2-item::after {
+ // content: "";
+ // display: inline-block;
+ // position: absolute;
+ // top: 50%;
+ // left: 84%; /* 将图标放在文字的右侧 */
+ // transform: translateY(-50%); /* 垂直居中对齐 */
+ // width: 10px; /* 设置图标宽度 */
+ // height: 10px; /* 设置图标高度 */
+ // background-image: url("@/assets/img/task/triangle-black.png");
+ // background-size: contain;
+ // background-repeat: no-repeat;
+ // margin-left: 0px; /* 与文字之间的间距 */
+ // transition: margin-left 0.3s, background-image 0.3s; /* 添加过渡动画 */
+ // }
+ // .step2:hover .step2-item::after {
+ // background-image: url("@/assets/img/task/triangle-black-active.png");
+ // margin-left: 10px; /* 在 hover 时向前移动 4px */
+ // }
.step2:hover {
background: url("@/assets/img/task/task-btn-active.png") no-repeat;
@@ -287,6 +426,7 @@ onMounted(() => {
font-family: "MEurostile";
font-weight: 400;
color: #fff;
+ cursor: pointer;
position: relative;
text-transform: uppercase;
//text-decoration: underline;
@@ -332,10 +472,10 @@ onMounted(() => {
.task-bottom {
display: flex;
// padding-top: 38px;
- justify-content: space-between;
- align-items: flex-start;
+ // justify-content: space-between;
+ // align-items: flex-start;
}
-.download-item-andriod{
+.download-item-andriod {
width: 173px;
height: 52px;
margin-top: 18px;
@@ -378,25 +518,6 @@ onMounted(() => {
width: 100%;
}
}
-.game {
- height: 100%;
- position: relative;
- display: flex;
- flex-direction: column;
- justify-content: flex-end;
- .download-game {
- }
- .game-img {
- width: 171px;
- height: 62px;
- img {
- width: 100%;
- }
- // position: absolute;
- // left: 0;
- // top: -80px;
- }
-}
.task-bottom {
display: flex;
@@ -416,6 +537,7 @@ onMounted(() => {
position: relative;
display: flex;
flex-direction: column;
+ opacity: 0;
justify-content: flex-end;
}
+ 
+ 
+ 
+ 
+