deck print

src/App.vue

 <template>
 
-  <div id="app">
-    <page-header></page-header>
+  <div>
     <router-view></router-view>
-    <page-footer></page-footer>
   </div>
 
 </template>

src/components/Deckprint.vue

+<template>
+    <div class="content">
+        <div class="container">
+            <template>
+                <el-alert title="上传ydk文件和填写必要的信息之后,卡组表格即可自动生成" type="success">
+                </el-alert>
+            </template>
+            <hr>
+            <el-form ref="form" :model="form" label-width="80px">
+                <el-form-item label="姓名" :label-width="formLabelWidth">
+                    <el-input v-model="form.name" placeholder="请输入标题姓名" auto-complete="off" width="10px"></el-input>
+                </el-form-item>
+
+                 <el-form-item label="Event" :label-width="formLabelWidth">
+                    <el-input v-model="form.event" placeholder="请输入Event" auto-complete="off" width="10px"></el-input>
+                </el-form-item>
+                <el-form-item label="ydk文件" :label-width="formLabelWidth">
+                    <el-upload class="upload-demo" :action="uploadUrl" :on-change="handleChange" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
+                        :file-list="fileList3">
+                        <el-button size="small" type="primary">点击上传</el-button>
+                        <div slot="tip" class="el-upload__tip">上传卡组文件，大小不能超过3KB</div>
+                        </el-upload>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" @click="onSubmit">确认</el-button>
+                </el-form-item>
+            </el-form>
+        </div>
+    </div>
+
+</template>
+
+<script>
+    import querystring from 'querystring';
+    import crypto from 'crypto';
+    import API from '../api'
+    import { mapGetters } from 'vuex'
+    import moment from 'moment'
+    import tb_language from './tb_lang.js'
+
+    export default {
+        data() {
+            return {
+                fileList3: [],
+
+                form: {
+                    name: '',
+                    event: '',
+                },
+                formLabelWidth: '80px',
+                isNew: true,
+                isClick: false,
+                todayCount: 0,
+                uploadUrl: API.uploadUrl,
+                imageUrl: "",
+                downloadPath: "",
+                demo_title: "",
+                demo_url: "",
+                demo1: [],
+                demo2: []
+            }
+        },
+
+        created: function () {
+            setTimeout(function () {
+                $(".el-upload__input").hide()
+            }, 100)
+        },
+
+        computed: {
+      		...mapGetters({
+                lang: 'getLang',
+                user: 'getUser'
+            }),
+        },
+
+        methods: {
+            handleChange(file, fileList) {
+                this.fileList3 = fileList.slice(-1);
+            },
+
+            handleAvatarSuccess(res, file) {
+                this.downloadPath = file.response.path
+                this.imageUrl = URL.createObjectURL(file.raw);
+            },
+            beforeAvatarUpload(file) {
+                var type = /\.[^\.]+/.exec(file.name);
+                const isJPG = type[0] === '.ydk';
+                const isLt2M = file.size / 1024 < 3;
+
+                if (!isJPG) {
+                    this.$message.error('上传文件只能是 ydk 格式!');
+                    return false
+                }
+                if (!isLt2M) {
+                    this.$message.error('上传文件大小不能超过 3KB!');
+                    return false
+                }
+                return true;
+            },
+
+            download: function () {
+                window.location.href = API.getDownloadUrl(this.downloadPath)
+            },
+
+            onSubmit: function () {
+                if (!this.form.name || !this.form.name.trim()) {
+                    this.$notify({
+                        title: '警告',
+                        message: '请输入姓名!',
+                        type: 'error'
+                    })
+                    return;
+                }
+
+                if (!this.form.event || !this.form.event.trim()) {
+                    this.$notify({
+                        title: '警告',
+                        message: '请输入event!',
+                        type: 'error'
+                    })
+                    return;
+                }
+
+                if (!this.downloadPath || !this.downloadPath.trim()) {
+                    this.$notify({
+                        title: '警告',
+                        message: '请上传ydk文件!',
+                        type: 'error'
+                    })
+                    return;
+                }
+                var  opt = {
+                    name: this.form.name,
+                    event: this.form.event,
+                    id: this.downloadPath.slice(7)
+                }
+                var request = querystring.stringify(opt);
+                // var baseUrl = "http://localhost:̃8081"
+                var baseUrl = "https://mycard.moe/ygopro/arena"
+                var url = `${baseUrl}/konami.html?${request}`;
+
+                window.open(url, "_blank");
+            },
+
+        },
+    }
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/components/Home.vue

+<template>
+
+  <div id="app">
+    <page-header></page-header>
+    <router-view></router-view>
+    <page-footer></page-footer>
+  </div>
+
+</template>
+
+<script>
+  import PageHeader from './PageHeader'
+  import PageFooter from './PageFooter'
+
+  // import "./assets/css/Projects-Clean.css"
+  // import "./assets/css/Pretty-Search-Form.css"
+
+  //js
+  // window.jQuery = window.$ = require('jquery');
+
+  export default {
+    name: 'app',
+    components: {
+      PageHeader,
+      PageFooter
+    }
+  }
+
+</script>
+
+<style scoped>
+  #app {
+    /*font-family: 'Avenir', Helvetica, Arial, sans-serif;*/
+    /*-webkit-font-smoothing: antialiased;*/
+    /*-moz-osx-font-smoothing: grayscale;*/
+    /*color: #2c3e50;*/
+    /*margin-top: 60px;*/
+  }
+</style>
\ No newline at end of file

src/components/PageHeader.vue

@@ -14,6 +14,7 @@
               <li role="presentation"><a href="https://ygobbs.com/" target="_blank">{{lang.forum}} </a></li>
               <li role="presentation"><a href="#/ranking">{{lang.rank}} </a></li>
               <li role="presentation"><a href="#/cards">{{lang.card_rank}} </a></li>
+              <li role="presentation"><a href="#/deckprint">{{lang.deckprint}} </a></li>
               <li role="presentation"><a href="https://rep.ygobbs.com">{{lang.battlelog}} </a></li>
               <!--<li role="presentation"><a href="https://mycard.moe/ygopro/">{{lang.download}} </a></li>-->
               <li role="presentation"><a href="#/download">{{lang.download}} </a></li>

src/components/lang.js

@@ -10,6 +10,7 @@ module.exports = {
     download: '下载',
     profile: '个人信息',
     account: '用户中心',
+    deckprint: '卡组打印',
     signout: '退出',
     signin: '登录 | 注册',
     qc: '查询条件',
@@ -117,6 +118,7 @@ module.exports = {
     download: 'Download',
     profile: 'Profile',
     account: 'Account',
+    deckprint: "Deck Print",
     signout: 'Sign out',
     signin: 'Sign in | Sign up',
     qc: 'Query conditions',

src/router/index.js

 import Vue from 'vue'
 import Router from 'vue-router'
+import Home from '@/components/Home'
 import Index from '@/components/Index'
 import Cards from '@/components/Cards'
 import Ranking from '@/components/Ranking'
@@ -12,6 +13,8 @@ import Deck from '@/components/Deck'
 import Report from '@/components/Report'
 import Vote from '@/components/Vote'
 import Ads from '@/components/Ads'
+import Deckprint from '@/components/Deckprint'
+// import konami from '@/components/konami'
 
 Vue.use(Router)
 
@@ -19,63 +22,89 @@ export default new Router({
   routes: [
     {
       path: '/',
-      name: 'Index',
-      component: Index
-    },
-    {
-      path: '/cards',
-      name: 'Cards',
-      component: Cards
-    },
-    {
-      path: '/ranking',
-      name: 'Ranking',
-      component: Ranking
-    },
-    {
-      path: '/download',
-      name: 'Download',
-      component: Download
-    },
-    {
-      path: '/profile',
-      name: 'Profile',
-      component: Profile
-    },
-    {
-      path: '/userinfo',
-      name: 'Userinfo',
-      component: Userinfo
-    },
-    {
-      path: '/cardinfo',
-      name: 'Cardinfo',
-      component: Cardinfo
-    },
-    {
-      path: '/history',
-      name: 'History',
-      component: History
-    },
-    {
-      path: '/deck',
-      name: 'Deck',
-      component: Deck
-    },
-    {
-      path: '/report',
-      name: 'Report',
-      component: Report
-    },
-    {
-      path: '/vote',
-      name: 'Vote',
-      component: Vote
+      name: 'Home',
+      component: Home,
+      children: [
+        {
+          path: '/',
+          component: Index
+        }
+      ]
     },
+
     {
-      path: '/ads',
-      name: 'Ads',
-      component: Ads
+      path: '/home',
+      name: 'home',
+      component: Home,
+      children: [
+        {
+          path: '/cards',
+          name: 'Cards',
+          component: Cards
+        },
+        {
+          path: '/ranking',
+          name: 'Ranking',
+          component: Ranking
+        },
+        {
+          path: '/download',
+          name: 'Download',
+          component: Download
+        },
+        {
+          path: '/profile',
+          name: 'Profile',
+          component: Profile
+        },
+        {
+          path: '/userinfo',
+          name: 'Userinfo',
+          component: Userinfo
+        },
+        {
+          path: '/cardinfo',
+          name: 'Cardinfo',
+          component: Cardinfo
+        },
+        {
+          path: '/deckprint',
+          name: 'Deckprint',
+          component: Deckprint
+        },
+        {
+          path: '/history',
+          name: 'History',
+          component: History
+        },
+        {
+          path: '/deck',
+          name: 'Deck',
+          component: Deck
+        },
+        {
+          path: '/report',
+          name: 'Report',
+          component: Report
+        },
+        {
+          path: '/vote',
+          name: 'Vote',
+          component: Vote
+        },
+        {
+          path: '/ads',
+          name: 'Ads',
+          component: Ads
+        },
+      ]
     },
+
+    // {
+    //   path: '/konami',
+    //   name: 'konami',
+    //   component: konami
+    // },
+
   ]
 })