Merge pull request #36 from udspj/testing

user page，collect count

src/router/index.js

@@ -42,6 +42,11 @@ export default new Router({
       path: '/collection',
       component: MyCollectionPage,
     },
+    {
+      name: 'Collection',
+      path: '/collection/:address',
+      component: MyCollectionPage,
+    },
     {
       name: 'RankingList',
       path: '/RankingList',

src/views/MyCollectionPage.vue

@@ -18,6 +18,9 @@
         v-for="item in itemIds" :key="item.id"
         @click="gotoCoinProfile(item.id)">
           <CardItem :item='item' :hasMouseOver='true'></CardItem>
+          <div class="haveCount">
+            <a :style="{ color: item.textcolor }">拥有{{ item.havecount }}张</a>
+          </div>
         </div>
       </div>
     </section>
@@ -49,24 +52,27 @@ export default {
   },
   async created() {
     const my = await getMe();
-    this.myaddress = my.address;
+    this.myaddress = this.$route.params.address || my.address;
 
     const tokens = await getMyCards();
-    this.types = Array.from(new Set(tokens));
-    // console.log(this.types);
+    var cardcodes = {}
+    await Promise.all(tokens.map(async (tokenId) => {
+      cardcodes[tokenId] ? cardcodes[tokenId]+=1 : cardcodes[tokenId]=1;
+    }));
+    // this.types = Array.from(new Set(tokens));
+    console.log("cardcodes:"+cardcodes);
 
+    const keys = Object.keys(cardcodes);
+    // var itemIds = [];
     this.$http.get('static/girl_cards.json').then((response) => {
-      // console.log(this.types)
       const allCards = response.body;
-      // for (const index in this.types) {
-      //   this.itemIds.push(allCards[this.types[index]]);
-      // }
       const thisself = this;
-      this.types.forEach((index) => {
-        console.log(index);
-        thisself.itemIds.push(allCards[index]);
+      keys.forEach((index) => {
+        var cardinfo = allCards[index];
+        console.log("cardcodes[index]:"+cardcodes[index])
+        cardinfo["havecount"] = cardcodes[index];
+        thisself.itemIds.push(cardinfo);
       });
-      // console.log(this.itemIds)
     });
   },
   methods: {
@@ -150,6 +156,15 @@ float:right;
 padding-right: 20px;
 }*/
 
+.cardItem {
+  position: relative;
+}
+.haveCount {
+  position:absolute;
+  bottom: 70px;
+  left: 30px;
+}
+
 @media (max-width: 800px) {
     .userContainer {
         background-size: cover;

src/views/RankingList.vue

@@ -19,7 +19,7 @@
     <div  v-for="( item, index ) in items" :key="item.id" class="ranking-ul">
       <ul>
         <li v-bind:id="'ranking'+index" class="rank"> <b>{{ index+1 }}</b></li>
-        <li class="key"> {{ item.address }}</li>
+        <li class="key" @click="gotoUser(item.address)"> {{ item.address }}</li>
         <li class="time"> {{ item.collecttime }}</li>
       </ul>
    </div>
@@ -39,6 +39,11 @@ export default {
       items: [],
     };
   },
+  methods: {
+    gotoUser(code) {
+      this.$router.push({ path: `/collection/${code}` });
+    }
+  },
   async created() {
     this.$http
       .get('http://35.200.102.240/getranklist.php')
@@ -145,6 +150,10 @@ li {
 .key1 {
     width: 500px;
 }
+.key {
+    cursor: pointer;
+    height: 30px;
+}
 .time,
 .time1 {
     width: 200px;