update

2019专题/云顶之弈模拟器/src/API/index.js

@@ -100,4 +100,26 @@ export const getUserInfo = () => {
   })
 }
 
+export const deleteTeam = id => {
+  if(!id) {return}
+  return new Promise((resolve,reject) => {
+    $.ajax({
+      url: baseURL + '/build/delete',
+      dataType: 'jsonp',
+      data: {id},
+      success: resolve,
+      fail: reject
+    })
+  })
+}
 
+export const getTopBuilds = () => {
+  return new Promise((resolve,reject) => {
+    $.ajax({
+      url: baseURL + '/build/topcache',
+      dataType: 'jsonp',
+      success: resolve,
+      fail: reject
+    })
+  })
+}

2019专题/云顶之弈模拟器/src/components/index.vue

@@ -288,7 +288,7 @@
         </div>
       </div>
 
-      <a href="http://lol.duowan.com/1908/m_429098908198.html" target="_blank" class="more">更多阵容 >></a>
+      <a href="http://lol.duowan.com/1908/m_429098908198.html" target="_blank" class="more">更多玩家分享阵容</a>
     </div>
   </div>
 </template>
@@ -297,7 +297,7 @@
 import hero from '../components/hero'
 import { findFromTail, genRandomInteger, uuid } from '../utils/helper'
 import shareItem from './shareItem'
-import {getTeamList, shareTeam, getSimulatorData, getUserInfo} from '../API/index'
+import {shareTeam, getSimulatorData, getUserInfo, getTopBuilds} from '../API/index'
 import penguin from '../components/penguin'
 
 const HERO_MAX_EUIPMENT = 3 // 英雄最大装备上限
@@ -569,7 +569,13 @@ export default {
         })
       } else {
         dwUDBProxy.multiLogin(() => {
-          alert('登录成功!')
+          this.isLogin = true
+          if(!localStorage.getItem(LOCALSTORAGE_KEY)) {
+            getUserInfo().then(res => {
+              localStorage.setItem(LOCALSTORAGE_KEY, JSON.stringify(res.data))
+              this.nickname = res.data.nickname
+            })
+          }
         })
       }
     },
@@ -734,12 +740,10 @@ export default {
     }
   },
   mounted(){
-    // 只取前四个
-    getTeamList('like_count|desc').then(res => {
-      this.powerfulTeamList = res.data.rows.slice(0, 4)
-    })
-    getTeamList('star_count|desc').then(res => {
-      this.popularTeamList = res.data.rows.slice(0, 4)
+
+    getTopBuilds().then(res => {
+      this.popularTeamList = res.data.top_like_builds.slice(0, 4)
+      this.powerfulTeamList = res.data.top_star_builds.slice(0, 4)
     })
 
     // 获取模拟器数据

2019专题/云顶之弈模拟器/src/components/m-shareDetail.vue

@@ -50,24 +50,17 @@
         </ul>
       </div>
     </div>
-    <pre class="desc">
+    <p class="team-desc">
       {{desc}}
-    </pre>
+    </p>
     <div class="btn-group">
-      <div :class="['btn-item', is_star ? 'operated' : '']" @click="operateTeam('star')">
-        <div class="circle">
-          <i class="iconfont icon-heart"></i>
-        </div>
-        <span>这个好玩</span>
-        <span>{{star_count}}</span>
-      </div>
-      <div :class="['btn-item', is_like ? 'operated' : '']" @click="operateTeam('like')">
-        <div class="circle">
-          <i class="iconfont icon-zan"></i>
+        <div :class="['btn-item', is_like ? 'operated' : '']" @click="operateTeam('like')">
+          <div class="circle">
+            <i class="iconfont icon-zan"></i>
+          </div>
+          <span>有点厉害</span>
+          <span>{{like_count}}</span>
         </div>
-        <span>有点厉害</span>
-        <span>{{like_count}}</span>
-      </div>
       <div :class="['btn-item', is_dislike ? 'operated' : '']" @click="operateTeam('dislike')">
         <div class="circle">
           <i class="iconfont icon-cai"></i>
@@ -229,9 +222,17 @@ $theme-color: #c49a2a;
     margin-bottom: px2rem(30);
   }
   .desc{
+    font-size: px2rem(26);
+    color: #fff;
+    margin-bottom: px2rem(15);
+  }
+  .team-desc{
     font-size: px2rem(30);
     color: #fff;
     margin-bottom: px2rem(15);
+    box-sizing: border-box;
+    padding:  0 px2rem(20);
+    line-height: 1.5;
   }
   .hero-list {
     display: flex;

2019专题/云顶之弈模拟器/src/components/m-shareList.vue

@@ -37,7 +37,7 @@
 
 <script>
 import shareItem from './shareItem'
-import { getTeamList, getUserInfo} from '../API/index'
+import { getTeamList, getUserInfo, getTopBuilds} from '../API/index'
 const LOCALSTORAGE_KEY = '__ydzySimulatorUserInfo'
 let UID = '' 
 let currentPage = 1
@@ -56,11 +56,9 @@ export default {
     shareItem
   },
   mounted() {
-    getTeamList('like_count|desc').then(res => {
-      this.powerfulTeamList = res.data.rows.slice(0, 2)
-    })
-    getTeamList('star_count|desc').then(res => {
-      this.popularTeamList = res.data.rows.slice(0, 2)
+    getTopBuilds().then(res => {
+      this.popularTeamList = res.data.top_like_builds.slice(0, 2)
+      this.powerfulTeamList = res.data.top_star_builds.slice(0, 2)
     })
     getTeamList('id|desc', currentPage).then(res => {
       this.defaultTeamList = res.data.rows.slice(0)
@@ -128,7 +126,7 @@ $theme-color: #c49a2a;
   height: 100%;
   background-attachment: fixed;
   box-sizing: border-box;
-  background: url("../assets/images/m-bg.png") no-repeat center;
+  background: url("../assets/images/m-bg.png")  center;
   padding-top: px2rem(53);
   padding-bottom: px2rem(90);
   .title{

2019专题/云顶之弈模拟器/src/components/myShareList.vue

@@ -9,17 +9,20 @@
       </div>
       <ul class="share-list">
         <li v-for="team in defaultTeamList" :key="team.id">
+          <span class="delete" @click="deleteTeam(team, index)">
+            <i class="iconfont icon-close"></i>
+          </span>
           <shareItem :team="team" />
         </li>
       </ul>
-      <div class="more" @click="loadMore" v-if="hasMore">加载更多</div>
+      <div class="more" @click="loadMore" v-if="hasMore && defaultTeamList.length !== 0">加载更多</div>
     </div>
   </div>
 </template>
 
 <script>
 import shareItem from './shareItem'
-import { getMyTeamList } from '../API/index'
+import { getMyTeamList, deleteTeam } from '../API/index'
 
 let currentPage = 1
 
@@ -45,10 +48,21 @@ export default {
         }
         this.defaultTeamList.push(...res.data.rows)
       })
+    },
+    deleteTeam(team, index){
+      const action = confirm('确认删除 ' + team.title + ' 吗?')
+      if(action === true) {
+        deleteTeam(team.id).then(res => {
+          alert(res.message)
+          this.defaultTeamList.splice(index, 1)
+        }).catch(() => {
+          alert('删除失败')
+        })
+      }
     }
   },
   mounted() {
-    if (!dwUDBProxy.isLogin()) {
+    if (!DEV && !dwUDBProxy.isLogin()) {
       dwUDBProxy.multiLogin(() => {
         getMyTeamList(currentPage).then(res => {
           this.defaultTeamList = res.data.rows
@@ -65,6 +79,7 @@ export default {
 
 
 <style lang="scss" scoped>
+@import '../scss/utils.scss';
 .app {
   width: 100%;
   min-height: 1000px;
@@ -100,6 +115,28 @@ export default {
       flex-wrap: wrap;
       li {
         margin-right: 20px;
+        position: relative;
+        &:hover{
+          span.delete{
+            display: block;
+          }
+        }
+        span.delete{
+          display: none;
+          color: #fff;
+          position: absolute;
+          z-index: 1;
+          cursor: pointer;
+          i{
+            font-size: 40px;
+            &:hover{
+              color: red;
+            }
+          }
+          left: 50%;
+          top: 40%;
+          transform: translate3d(-50%, -50%, 0)
+        }
         &:nth-child(5n) {
           margin-right: 0;
         }

2019专题/云顶之弈模拟器/src/components/shareDetail.vue

@@ -51,13 +51,6 @@
       </div>
       <pre class="desc">{{desc}}</pre>
       <div class="btn-group">
-        <div :class="['btn-item', is_star ? 'operated' : '']" @click="operateTeam('star')">
-          <div class="circle">
-            <i class="iconfont icon-heart"></i>
-          </div>
-          <span>这个好玩</span>
-          <span>{{star_count}}</span>
-        </div>
         <div :class="['btn-item', is_like ? 'operated' : '']" @click="operateTeam('like')">
           <div class="circle">
             <i class="iconfont icon-zan"></i>

2019专题/云顶之弈模拟器/src/components/shareList.vue

@@ -23,6 +23,7 @@
           <shareItem :team="team" />
         </li>
       </ul>
+      <div class="split"></div>
       <ul class="share-list" style="margin-bottom: 0px">
         <li v-for="team in defaultTeamList" :key="team.id">
           <shareItem :team="team" />
@@ -36,7 +37,7 @@
 <script>
 import shareItem from './shareItem'
 import penguin from '../components/penguin'
-import { getTeamList } from '../API/index'
+import { getTeamList, getTopBuilds } from '../API/index'
 
 let currentPage = 1
 
@@ -54,12 +55,12 @@ export default {
     penguin
   },
   mounted() {
-    getTeamList('like_count|desc').then(res => {
-      this.powerfulTeamList = res.data.rows.slice(0, 5)
-    })
-    getTeamList('star_count|desc').then(res => {
-      this.popularTeamList = res.data.rows.slice(0, 5)
+    
+    getTopBuilds().then(res => {
+      this.popularTeamList = res.data.top_like_builds.slice(0, 5)
+      this.powerfulTeamList = res.data.top_star_builds.slice(0, 5)
     })
+
     getTeamList('id|desc', currentPage).then(res => {
       this.defaultTeamList = res.data.rows.slice(0)
     })
@@ -132,6 +133,13 @@ export default {
       }
     }
   }
+  .split{
+    background-color: #ffca57;
+    width: 64%;
+    opacity: 0.4;
+    height: 1px;
+    margin: 0 auto 75px auto;
+  }
   .guide {
     width: 500px;
     margin: 0 auto 30px auto;