nft 合作功能完成

src/components/errorDialog/index.js

@@ -28,6 +28,20 @@ let errmsg = err
     errmsg = 'Event starting soon. Please check back later'
   } else if(errmsg.indexOf('waiting for chain confirm') > -1) {
     errmsg = 'waiting for chain confirm'
+  } else if(errmsg.indexOf('voucher not found') > -1) {
+    errmsg = 'voucher not found'
+  } else if(errmsg.indexOf('Can not be empty') > -1) {
+    errmsg = 'Can not be empty'
+  } else if(errmsg.indexOf('need connect discord first') > -1) {
+    errmsg = 'need connect discord first'
+  } else if(errmsg.indexOf('Invalid Voucher Code' > -1)) {
+    errmsg = 'Invalid Voucher Code'
+  } else if(errmsg.indexOf('already claimed') > -1) {
+    errmsg = 'already claimed'
+  } else if(errmsg.indexOf('had no role')) {
+    errmsg = 'had no role'
+  } else if(errmsg.indexOf('have not join guild')) {
+    errmsg = 'have not join guild'
   }
 
   const _confirm = new iErrorMessage({

src/views/home/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="zillionaire">
-    <div class="content" v-show="navIndex == 0 || navIndex == 1">
+    <div class="content" v-show="navIndex == 0 || navIndex == 1|| navIndex == 3">
       <div class="left">
         <div class="left-top">
           <div class="left-top-logo">
@@ -60,7 +60,7 @@
           </div>
         </div>
         <div class="left-title">
-          <div class="left-title-left" v-if="navIndex == 0">
+          <div class="left-title-left" v-if="navIndex == 0 || navIndex == 3">
             <div>Complete <img src="./../../assets/home/Icon_star.png" alt="">Social Quests</div>
           </div>
           <div class="left-title-left1" v-if="navIndex == 1">
@@ -95,7 +95,7 @@
               class="desc"
             >Complete Social Quests, Embark on Explorations, Open/Boost Chests to earn Airdrop Points, which will eventually be converted to $CEC.<br /><p @click="openLink">Read here for more details.</p></div>
           </div>
-          <div class="explore-desc-map" v-if="navIndex == 1">
+          <div class="explore-desc-map" v-if="navIndex == 1 || navIndex == 3">
             <li>
               <h2>EXPLORE</h2>
               <div class="logo">
@@ -463,72 +463,10 @@
             </div>
           </div>
         </div>
-        <div class="content-right" v-if="navIndex == 2">
-          <div class="title">
-            <div class="title-left">
-              <div>Partner</div>  <el-button @click="generate">激活码</el-button>
-            </div>
-          </div>
-          <div class="check-code">
-            <div class="check-code-icon">
-              <img src="@/assets/common/Enter.png" alt />
-            </div>
-            <div class="check-code-input">
-              <el-input v-model="checkCodeInput" placeholder="Enter Chest Redemption Code" />
-            </div>
-            <div class="check-code-btn" @click="submitCode">
-              <div>Confirm</div>
-            </div>
-          </div>
-          <div class="quest">
-            <div class="partner-list">
-              <!-- <div>
-                coming soon
-              </div>-->
-              <div class="partner">
-                <div>Partner</div>
-                <div>Chain</div>
-                <div>Rewards</div>
-              </div>
-              <div class="nft-list">
-                <li v-for="(item, index) in nftsList" :key="index">
-                  <div class="quest-item">
-                    <div class="content-rewards-left">
-                      <div class="img-logo">
-                        <img src="./../../assets/home/twitter.png" alt />
-                      </div>
-                      <div class="desc">
-                        <h3>{{ item.collection }}</h3>
-                        <p>{{ item.projectName }}</p>
-                      </div>
-                    </div>
-                    <div class="chain">
-                      <!-- <img src="@/assets/box/box01.png" alt=""> -->
-                      <div>1</div>
-                    </div>
-                    <div class="Rewards">
-                      <div class="box-img">
-                        <img src="@/assets/box/box01.png" alt="">
-                      </div>
-                      <div v-if="token != null" class="btn">
-                        <div class="is-btn">
-                          <div v-if="item.status == 0" @click="chickNftClaim(item.contract)">Chick</div>
-                          <div v-else-if="item.status == 1" class="check-yes">
-                            <img src="@/assets/home/check-yes.png" alt="">
-                          </div>
-                        </div>
-                      </div>
-                      <div class='light-btn' v-else @click="onWalletLogin">Check</div>
-                    </div>
-                  </div>
-                </li>
-              </div>
-            </div>
-          </div>
-        </div>
+        <NftPartner v-if="navIndex == 3" @awardDialog="exploreAwardDialog" @onWalletLogin="onWalletLogin" />
       </div>
     </div>
-    <div class="content-box" v-show="navIndex == 2 || navIndex == 3">
+    <div class="content-box" v-show="navIndex == 2 || navIndex == 4">
       <div class="box">
         <div class="box-top">
           <div class="left">
@@ -641,7 +579,7 @@
         <div class="box-btm" v-show="navIndex == 2">
           <BoxBtm ref="boxList" @toExplore="toExplore" @awardDialog="activityDialog" />
         </div>
-        <div class="box-btm" v-show="navIndex == 3">
+        <div class="box-btm" v-show="navIndex == 4">
           <Ranking :activityName="activityData.name" ref="rankingData" />
         </div>
       </div>
@@ -700,6 +638,7 @@ import HelpDialog from "./helpDialog.vue";
 import LogDialog from "./logDialog.vue";
 import Loading from "@/components/loading.vue";
 import RuleDialog from "./ruleDialog.vue";
+import NftPartner from './nftPartner.vue'
 import { getToken } from "@/utils/cookies.js";
 // import { getWalletAddress, isWalletConnected, linkWallet } from "@/wallet/index.js";
 import {
@@ -736,7 +675,8 @@ export default {
     HelpDialog,
     LogDialog,
     Loading,
-    RuleDialog
+    RuleDialog,
+    NftPartner
   },
   data() {
     return {
@@ -777,12 +717,12 @@ export default {
           imgSrc: require("./../../assets/common/P3-up.png"),
           imgSrc1: require("./../../assets/common/P3.png")
         },
-        // {
-        //   id: 3,
-        //   name: 3,
-        //   imgSrc: require("./../../assets/common/P5-up.png"),
-        //   imgSrc1: require("./../../assets/common/P5.png"),
-        // },
+        {
+          id: 3,
+          name: 3,
+          imgSrc: require("./../../assets/common/P5-up.png"),
+          imgSrc1: require("./../../assets/common/P5.png"),
+        },
         {
           id: 5,
           name: 5,
@@ -790,7 +730,7 @@ export default {
           imgSrc1: require("./../../assets/common/P4.png")
         }
       ],
-      navIndex: 2,
+      navIndex: 0,
       walletDialogVisible: false,
       gameStateData: {},
       activityName: "",
@@ -856,7 +796,6 @@ export default {
   created() {
     this.userData = JSON.parse(localStorage.getItem("userData"));
     this.token = getToken();
-    this.getNftList();
   },
   mounted() {
     this.initData();
@@ -871,7 +810,6 @@ export default {
   methods: {
     async initData() {
       await this.getActivity();
-      // this.getNftList()
       this.$store.dispatch('wallet/restore')
       this.$store.dispatch('user/restore')
       if (this.token) {
@@ -1371,57 +1309,7 @@ export default {
       this.nftsList = res.data.data;
     },
 
-    async generate() {
-      let res = await this.$axios.post(process.env.VUE_APP_API_URL + "/api/voucher/generate",
-        {num: 5},
-        { headers: { Authorization: `Bearer ${this.token}` } })
-      console.log(res.data.data)
-    },
 
-    // 提交nft合作邀请码
-    submitCode() {
-//       "testoVC6BT0f"
-// 1
-// : 
-// "testZ5bxiJNF"
-// 2
-// : 
-// "testCFLg58et"
-// 3
-// : 
-// "testjVmKtkEN"
-// 4
-// : 
-// "testZuX1lyLj"
-      if (this.token) {
-        console.log(this.checkCodeInput);
-        if (this.checkCodeInput) {
-          
-        } else {
-          alert("不能为空");
-        }
-      } else {
-        this.walletDialogVisible = true;
-      }
-    },
-
-    // 领取NFT holder 奖励
-    async chickNftClaim(contract) {
-      try {
-        let { errcode, errmsg, data } = await apiClaimNft(contract);
-        if (!errcode) {
-          this.exploreAwardDialog(data)
-          localStorage.removeItem(storeageKey);
-          clearInterval(serTimeId);
-        } else if (errcode !== 14) {
-          // 状态不是等待链上确认的, 都提示错误
-          this.$showErr(errmsg)
-          clearInterval(serTimeId);
-        }
-      } catch (err) {
-        this.$message.error(`claim partner reward error: ${err}`);
-      }
-    },
 
     formatDateGMT(time) {
       let date = new Date(time).toGMTString()
@@ -2992,11 +2880,11 @@ export default {
   }
   .wallet-dialog {
     position: relative;
-    z-index: 9;
+    z-index: 99;
   }
   .help-dialog {
     position: relative;
-    z-index: 1;
+    z-index: 9;
   }
   .light-btn {
     background: #ffc35b;

src/views/home/nftPartner.vue

@@ -0,0 +1,421 @@
+<template>
+  <div class="content-right">
+    <div class="title">
+      <div class="title-left">
+        <div>Partner</div>
+      </div>
+    </div>
+    <div class="check-code">
+      <div class="check-code-icon">
+        <img src="@/assets/common/Enter.png" alt />
+      </div>
+      <div class="check-code-input">
+        <el-input v-model="checkCodeInput" placeholder="Enter Chest Redemption Code" />
+      </div>
+      <div class="check-code-btn" @click="submitCode">
+        Confirm
+      </div>
+    </div>
+    <div class="quest">
+      <div class="partner-list">
+        <!-- <div>
+                coming soon
+        </div>-->
+        <div class="partner">
+          <div>Partner</div>
+          <div>Chain</div>
+          <div>Rewards</div>
+        </div>
+        <div class="nft-list">
+          <li v-for="(item, index) in nftsList" :key="index">
+            <div class="quest-item">
+              <div class="content-rewards-left">
+                <div class="img-logo">
+                  <a :href="item.link" target="_blank">
+                    <img src="./../../assets/home/twitter.png" alt />
+                  </a>
+                </div>
+                <div class="desc">
+                  <h3>{{ item.collection }}</h3>
+                  <p>{{ item.projectName }}</p>
+                </div>
+              </div>
+              <div class="chain">
+                <a :href="`https://etherscan.io/address/${item.contract}`" target="_blank">
+                  <img src="@/assets/common/logo-etherscan.png" alt="">
+                </a>
+              </div>
+              <div class="Rewards">
+                <div class="box-img">
+                  <img src="@/assets/box/box01.png" alt />
+                </div>
+                <div v-if="token != null" class="btn">
+                  <div class="is-btn">
+                    <div v-if="item.status == 0"  class="check-no" @click.stop="chickNftClaim(item.contract)">Chick</div>
+                    <div v-else-if="item.status == 1" class="check-yes">
+                      <img src="@/assets/home/check-yes.png" alt />
+                    </div>
+                  </div>
+                </div>
+                <div class="light-btn" v-else @click="onWalletLogin">Connect Wallet</div>
+              </div>
+            </div>
+          </li>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getToken } from "@/utils/cookies.js";
+import { apiVoucherClaim, apiClaimNft } from '@/utils/webapi.js'
+ const BASE52_ALPHABET = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
+const isValidVoucherCode = (str) => {
+  let reg = new RegExp(`^[${BASE52_ALPHABET}]{12}$`)
+  return reg.test(str)
+}
+export default {
+  data() {
+    return {
+      checkCodeInput: '',
+      nftsList: [],
+      token: '',
+      time: 10,
+      timeLeft: 0,
+    }
+  },
+  created() {
+    this.token = getToken();
+    this.getNftList()
+  },
+  methods() {
+  },
+  methods: {
+    onWalletLogin() {
+      this.$emit('onWalletLogin')
+    },
+    async getNftList() {
+      let res = await this.$axios.get(
+        process.env.VUE_APP_API_URL + "/api/partner/nfts"
+      );
+      this.nftsList = res.data.data;
+    },
+
+    async generate() {
+      let res = await this.$axios.post(process.env.VUE_APP_API_URL + "/api/voucher/generate",
+        {num: 10},
+        { headers: { Authorization: `Bearer ${this.token}` } })
+      console.log(res.data.data)
+    },
+    // 0
+// : 
+// "testT9uo9gbl"
+// 1
+// : 
+// "testOPXqIEx2"
+// 2
+// : 
+// "testf29qGaFy"
+// 3
+// : 
+// "testUG6ZQoTD"
+// 4
+// : 
+// "testeralYA9o"
+// 5
+// : 
+// "test4WjfY8lB"
+// 6
+// : 
+// "testkfhwdWVc"
+// 7
+// : 
+// "testrpQlku6M"
+// 8
+// : 
+// "testIySydB0z"
+// 9
+// : 
+// "testR2JBM2T9"
+
+    // 提交nft合作邀请码
+    async submitCode() {
+      if (this.token) {
+        if (this.checkCodeInput) {
+          if(!isValidVoucherCode(this.checkCodeInput)) {
+            this.$showErr('Invalid Voucher Code')
+          }
+          let { errcode, errmsg, data } = await apiVoucherClaim(this.checkCodeInput)
+          if(!errcode) {
+            this.$emit('awardDialog',data)
+          } else if(errcode == 11) {
+            this.$showErr(errmsg)
+          } else if(errcode == 10) {}
+        } else {
+          this.$showErr(`Can not be empty`)
+        }
+      } else {
+        this.onWalletLogin()
+      }
+    },
+
+    // 领取NFT holder 奖励
+    async chickNftClaim(contract) {
+      let discordId = JSON.parse(localStorage.getItem("userData")).discordId
+      if(discordId) {
+        try {
+          let { errcode, errmsg, data } = await apiClaimNft(contract);
+          if (!errcode) {
+            this.getNftList()
+            this.$emit('awardDialog',data)
+          } else if(errcode == 10 || errcode == 20) {
+            this.$showErr(errmsg)
+          } else if(errcode == 13) {
+            this.$showErr(errmsg)
+          } else if(errcode == 14) {
+            this.$showErr(errmsg)
+          } else if(errcode == 21) {
+            this.$showErr(errmsg)
+          }
+        } catch (err) {
+          this.$message.error(`claim partner reward error: ${err}`);
+        }
+      } else {
+        this.$showErr('need connect discord first')
+      }
+    },
+    beginCountdown() {
+      this.timeLeft = parseInt(this.time);
+      let timer = setInterval(() => {
+        this.timeLeft--;
+        if (this.timeLeft <= 0) {
+          clearInterval(timer);
+        }
+      }, 1000);
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.content-right {
+  width: 100%;
+  z-index: 999;
+  padding: 10px;
+  box-sizing: border-box;
+  background: #2d2738;
+  background: url("./../../assets/home/quest log bg.png") no-repeat;
+  background-size: 100% 100%;
+  border-radius: 20px;
+  .title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 20px;
+    .title-left {
+      color: #fff;
+      font-size: 20px;
+      font-family: "Poppins-SemiBold";
+      font-weight: 700;
+      margin-bottom: 10px;
+    }
+  }
+  .check-code {
+    width: 100%;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: url("@/assets/common/check-input.png") no-repeat;
+    background-size: 100% 100%;
+    margin-bottom: 10px;
+    display: flex;
+    // align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+    box-sizing: border-box;
+    .check-code-icon {
+      width: 30px;
+      height: 25px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .check-code-input {
+      width: 240px;
+      ::v-deep .el-input {
+        .el-input__inner {
+          border: 0px;
+          background: #1e1b26;
+          color: #fff;
+        }
+        input::-webkit-input-placeholder {
+          color: #4e475b;
+        }
+      }
+    }
+    .check-code-btn {
+      width: 90px;
+      height: 25px;
+      font-size: 12px;
+      background: #fec25d;
+      color: #000;
+      border-radius: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+    }
+  }
+  .quest {
+    background: #1e1b26;
+    padding: 10px;
+    width: 100%;
+    box-sizing: border-box;
+    border-radius: 20px;
+    .partner-list {
+      height: 380px;
+      .partner {
+        display: flex;
+        align-items: center;
+        height: 30px;
+        font-size: 14px;
+        // justify-content: space-between;
+        padding: 0 10px;
+        div {
+          width: 160px;
+          height: 100%;
+          line-height: 30px;
+        }
+        div:nth-child(2) {
+          width: 60px;
+        }
+      }
+      .nft-list {
+        height: 350px;
+        overflow-y: scroll;
+        li .quest-item {
+          display: flex;
+          align-items: center;
+          min-height: 60px;
+          padding: 10px;
+          border-radius: 10px;
+          font-size: 14px;
+          margin: 10px 0;
+          box-sizing: border-box;
+          color: #fff;
+          .content-rewards-left {
+            display: flex;
+            width: 160px;
+            .img-logo {
+              width: 40px;
+              height: 40px;
+              margin-right: 10px;
+              img {
+                width: 100%;
+                height: 100%;
+                border-radius: 50%;
+              }
+            }
+            .desc {
+              max-width: 240px;
+              h3 {
+                text-align: left;
+                font-size: 14px;
+                font-family: "Poppins-SemiBold";
+              }
+              p {
+                font-family: "Poppins-Light";
+                font-size: 12px;
+                text-align: left;
+              }
+            }
+          }
+          .chain {
+            width: 60px;
+            height: 40px;
+            a {
+              display: inline-block;
+              width: 30px;
+              height: 30px;
+              border-radius: 50%;
+              margin: 0 auto;
+              img {
+                width: 100%;
+                height: 100%;
+              }
+            }
+            
+          }
+          .Rewards {
+            width: 160px;
+            padding: 0 10px;
+            box-sizing: border-box;
+            display: flex;
+            justify-content: space-between;
+            justify-content: center;
+            align-items: center;
+            .box-img {
+              width: 50px;
+              height: 40px;
+              img {
+                width: 100%;
+                height: 100%;
+              }
+            }
+            .btn {
+              margin-left: 20px;
+              .check-no {
+                background: #ffc35b;
+                color: #000;
+                padding: 5px 10px;
+                font-weight: 400;
+                border-radius: 20px;
+                font-size: 12px;
+                cursor: pointer;
+              }
+              .check-yes {
+                width: 30px;
+                height: 30px;
+                img {
+                  width: 100%;
+                  height: 100%;
+                }
+              }
+            }
+          }
+        }
+        &::-webkit-scrollbar {
+          width: 5px;
+        }
+        &::-webkit-scrollbar-track {
+          background: #171220;
+          border-radius: 2px;
+        }
+        &::-webkit-scrollbar-corner {
+          display: block;
+        }
+        &::-webkit-scrollbar-thumb {
+          height: 15px;
+          background: #9950fd;
+          border-radius: 10px;
+        }
+      }
+    }
+  }
+  .tips {
+    margin-top: 10px;
+    font-size: 14px;
+    color: #fff;
+  }
+  .light-btn {
+    background: #fec25d;
+    color: #000;
+    font-size: 12px;
+    padding: 5px 4px;
+    border-radius: 15px;
+  }
+}
+</style>>