vux add

shengmingzz · Feb 2, 2018 · e013d11 · e013d11
1 parent c325168
commit e013d11
Show file tree

Hide file tree

Showing 8 changed files with 108 additions and 34 deletions.
diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
@@ -3,6 +3,7 @@ const path = require('path')
 const utils = require('./utils')
 const config = require('../config')
 const vueLoaderConfig = require('./vue-loader.conf')
+const vuxLoader = require('vux-loader')
 
 function resolve (dir) {
   return path.join(__dirname, '..', dir)
@@ -19,7 +20,7 @@ const createLintingRule = () => ({
   }
 })
 
-module.exports = {
+let webpackConfig = {
   context: path.resolve(__dirname, '../'),
   entry: {
     app: './src/main.js'
@@ -90,3 +91,7 @@ module.exports = {
     child_process: 'empty'
   }
 }
+
+module.exports = vuxLoader.merge(webpackConfig, {
+  plugins: ['vux-ui', 'progress-bar', 'duplicate-style']
+})
diff --git a/package.json b/package.json
@@ -25,7 +25,8 @@
     "style-loader": "^0.19.0",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1",
-    "vuex": "^3.0.1"
+    "vuex": "^3.0.1",
+    "vux": "^2.7.8"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",
@@ -62,6 +63,8 @@
     "html-webpack-plugin": "^2.30.1",
     "jest": "^22.0.4",
     "jest-serializer-vue": "^0.3.0",
+    "less": "^2.7.3",
+    "less-loader": "^4.0.5",
     "nightwatch": "^0.9.12",
     "node-notifier": "^5.1.2",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
@@ -84,7 +87,9 @@
     "webpack": "^3.6.0",
     "webpack-bundle-analyzer": "^2.9.0",
     "webpack-dev-server": "^2.9.1",
-    "webpack-merge": "^4.1.0"
+    "webpack-merge": "^4.1.0",
+    "yaml-loader": "^0.5.0",
+    "vux-loader": "^1.0.56"
   },
   "engines": {
     "node": ">= 6.0.0",

diff --git a/src/page/data/pvpskill.js b/src/page/data/pvpskill.js
@@ -1,3 +1,38 @@
+export function getHeroSkill(hero) {
+  var skills = []
+  var q_item = null
+  var w_item = null
+  var e_item = null
+  var r_item = null
+  for (var i = 0; i < pvpskills.length; i++) {
+    var item = pvpskills[i]
+    if (parseInt(item.code) === parseInt(hero.q_skill)) {
+      q_item = item
+    }
+    if (parseInt(item.code) === parseInt(hero.w_skill)) {
+      w_item = item
+    }
+    if (parseInt(item.code) === parseInt(hero.e_skill)) {
+      e_item = item
+    }
+    if (parseInt(item.code) === parseInt(hero.r_skill)) {
+      r_item = item
+    }
+  }
+  if (q_item) {
+    skills.push(q_item)
+  }
+  if (w_item) {
+    skills.push(w_item)
+  }
+  if (e_item) {
+    skills.push(e_item)
+  }
+  if (r_item) {
+    skills.push(r_item)
+  }
+  return skills
+}
 export var pvpskills = [
   {
     "skill_CD" : "9",

diff --git a/src/page/game/pvphero.vue b/src/page/game/pvphero.vue
@@ -60,7 +60,7 @@ export default {
       if (agent.indexOf('hehbox') >= 0) {
         window.location.href = 'hzbox://com.nd.he.box/pvehero?code=' + item.code
       } else {
-        this.$router.push({path: '/herolocal', query: {'code': item.code}})
+        this.$router.push({path: '/pvphero/' + item.code})
       }
     }
   }

diff --git a/src/page/game/pvpheroitem.vue b/src/page/game/pvpheroitem.vue
@@ -38,45 +38,65 @@
       </div>
     </div>
 
-    <div class="menu">
-      <div class="menuitem" @click="clickMenu(0)" :style="menu==0?'color:#c88c46':'color:#999'">英雄技能</div>
-      <div class="menuitem" @click="clickMenu(1)" :style="menu==1?'color:#c88c46':'color:#999'">背景故事</div>
-    </div>
+    <!-- <div>
+       <tab :line-width=2 active-color='#fc378c' v-model="index">
+        <tab-item class="vux-center" :selected="demo2 === item" v-for="(item, index) in list2" @click="demo2 = item" :key="index">{{item}}</tab-item>
+      </tab>
+      <swiper v-model="index" height="100px" :show-dots="false">
+        <swiper-item v-for="(item, index) in list2" :key="index">
+          <div class="tab-swiper vux-center">{{item}} Container</div>
+        </swiper-item>
+      </swiper>
+    </div> -->
 
-    <div v-show="menu==0">
-      <div class="skill" v-for="(item,key) in skills" :key="key">
-        <img :src="item.icon" class="skillicon" :onerror="logo">
-        <div class="skillinfo">
-          <div class="skilltitle">{{item.name}}</div>
-          <div class="skilldesc">{{item.description1}}</div>
-          <pre class="skillother">{{item.description2}}</pre>
-        </div>
-      </div>
+    <div>
+       <tab :line-width=2 active-color='#fc378c' v-model="index">
+        <tab-item class="vux-center" :selected="index === 0" @click="index = 0" >英雄技能</tab-item>
+        <tab-item class="vux-center" :selected="index === 1" @click="index = 1" >背景故事</tab-item>
+      </tab>
+      <swiper v-model="index" :show-dots="false">
+        <swiper-item>
+          <div>
+            <div class="skill" v-for="(item,key) in skills" :key="key">
+              <img :src="item.icon" class="skillicon" :onerror="logo">
+              <div class="skillinfo">
+                <div class="skilltitle">{{item.name}}</div>
+                <div class="skilldesc"><span v-if="item.skill_CD">冷却: {{item.skill_CD}}秒</span><span v-if="item.expend_MP">  耗蓝: {{item.expend_MP}}</span><span v-if="item.distance">  射程: {{item.distance}}</span></div>
+                <div class="skilldesc">{{item.description}}</div>
+                <pre class="skillother">{{item.tip}}</pre>
+              </div>
+            </div>
+          </div>
+        </swiper-item>
+        <swiper-item>
+          <pre class="story">
+            {{hero.name}}
+          </pre>
+        </swiper-item>
+      </swiper>
     </div>
 
-    <pre class="story" v-show="menu==1">
-      {{hero.description}}
-    </pre>
   </div>
 </template>
 
 <script>
+import { Tab, TabItem, Swiper, SwiperItem } from 'vux'
 import {getPvpHero} from '../data/pvphero'
-import {getHeroSkill} from '../data/heroskill'
+import {getHeroSkill} from '../data/pvpskill'
 
 export default {
   data () {
     return {
       logo: 'this.src="' + require('../../img/default.png') + '"',
       hero: {},
       skills: [],
-      menu: 0
+      index: 0
     }
   },
-  components: {},
+  components: {Tab, TabItem, Swiper, SwiperItem},
   computed: {},
   created () {
-    this.code = this.$route.query.code
+    this.code = this.$route.params.id
   },
   mounted () {
     this.loadData()
@@ -85,11 +105,8 @@ export default {
     loadData () {
       this.hero = getPvpHero(this.code)
       if (this.hero !== null) {
-        this.skills = getHeroSkill(this.hero.skills)
+        this.skills = getHeroSkill(this.hero)
       }
-    },
-    clickMenu (code) {
-      this.menu = code
     }
   }
 }
@@ -203,4 +220,8 @@ export default {
   color: #333;
   line-height: 1.4rem;
 }
+.app {
+  display: flex;
+  flex-direction: column;
+}
 </style>
diff --git a/src/page/game/pveitemdetail.vue → src/page/game/pvpitemdetail.vue b/src/page/game/pveitemdetail.vue → src/page/game/pvpitemdetail.vue
diff --git a/src/page/home/home.vue b/src/page/home/home.vue
@@ -20,7 +20,10 @@ export default {
         {'title': '混沌遗迹', 'icon': require('../../img/thumb_hdyj@2x.png')},
         {'title': '英魂祭坛', 'icon': require('../../img/thumb_yhjt@2x.png')},
         {'title': '冒险之旅', 'icon': require('../../img/thumb_mxzl@2x.png')},
-        {'title': '竞技场', 'icon': require('../../img/thumb_jjc@2x.png')}
+        {'title': '竞技场', 'icon': require('../../img/thumb_jjc@2x.png')},
+
+        {'title': 'pvp-英雄', 'icon': require('../../img/raid_zzsl.jpg')},
+        {'title': 'pvp-物品', 'icon': require('../../img/thumb_yhjt@2x.png')}
       ]
     }
   },
@@ -33,7 +36,7 @@ export default {
     loadData () {
     },
     clickModule (index) {
-      if (index === 0) {
+      if (index === 0) { // pve
         this.$router.push({path: '/yxtjlocal'})
       } else if (index === 1) {
         this.$router.push({path: '/xzsllocal'})
@@ -45,6 +48,10 @@ export default {
         this.$router.push({path: '/mxzllocal'})
       } else if (index === 5) {
         this.$router.push({path: '/jjclocal'})
+      } else if (index === 6) { // pvp
+        this.$router.push({path: '/pvphero'})
+      } else if (index === 7) {
+        this.$router.push({path: '/pvpitem'})
       }
     }
   }

diff --git a/src/router/index.js b/src/router/index.js
@@ -39,8 +39,9 @@ const home = r => require.ensure([], () => r(require('@/page/home/home')), 'home
 
 // pvp local
 const pvphero = r => require.ensure([], () => r(require('@/page/game/pvphero')), 'pvphero')
+const pvpheroitem = r => require.ensure([], () => r(require('@/page/game/pvpheroitem')), 'pvpheroitem')
 const pvpitem = r => require.ensure([], () => r(require('@/page/game/pvpitem')), 'pvpitem')
-const itemdetail = r => require.ensure([], () => r(require('@/page/game/pveitemdetail')), 'itemdetail')
+const itemdetail = r => require.ensure([], () => r(require('@/page/game/pvpitemdetail')), 'itemdetail')
 
 const routes = [
   {
@@ -84,16 +85,16 @@ const routes = [
 
       // pvp
       {path: '/pvphero', component: pvphero, meta: { keepAlive: true, title: 'pvp英雄' }}, // pvphero
+      {path: '/pvphero/:id', component: pvpheroitem, meta: { title: 'pvp英雄详情' }},
       {path: '/pvpitem', component: pvpitem, meta: { keepAlive: true, title: 'pvp物品' }}, // pvpitem
-      // {path: '/itemdetail', component: itemdetail, meta: { title: '物品详情' }} // itemdetail
-      { path: '/pvpitem/:id', component: itemdetail }
+      {path: '/pvpitem/:id', component: itemdetail, meta: { title: 'pvp物品详情' }}
     ]
   }
 ]
 
 export default new Router({
   routes,
-  mode: 'history',
+  // mode: 'history',
   // base: '/static/pve/',
   strict: process.env.NODE_ENV !== 'production',
   scrollBehavior (to, from, savedPosition) {