Skip to content

Y
Ygopro Arena Web
Commit 949121cd authored by ganjingcun's avatar ganjingcun
Browse files
Options

重构

parent 55039792
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 79 additions and 119 deletions
build/dev-server.js
View file @ 949121cd
...@@ -60,8 +60,8 @@ app.use(hotMiddleware) ...@@ -60,8 +60,8 @@ app.use(hotMiddleware)
// serve pure static assets // serve pure static assets
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
// app.use(staticPath, express.static('./static')) app.use(staticPath, express.static('./static/assets'))
app.use(staticPath, express.static('./src/assets')) // app.use(staticPath, express.static('./src/assets'))
var uri = 'http://localhost:' + port var uri = 'http://localhost:' + port
......
index.html
View file @ 949121cd
...@@ -5,14 +5,16 @@ ...@@ -5,14 +5,16 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ygopro</title> <title>ygopro</title>
<link rel="stylesheet" href="./assets/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./assets/css/styles.css"> <link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="./assets/css/font-awesome.min.css"> <link rel="stylesheet" href="assets/css/font-awesome.min.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
src/App.vue
View file @ 949121cd
...@@ -12,17 +12,11 @@ ...@@ -12,17 +12,11 @@
import PageHeader from './components/PageHeader' import PageHeader from './components/PageHeader'
import PageFooter from './components/PageFooter' import PageFooter from './components/PageFooter'
//css
// import "./assets/bootstrap/css/bootstrap.min.css"
import "./assets/css/Projects-Clean.css" import "./assets/css/Projects-Clean.css"
import "./assets/css/Pretty-Search-Form.css" import "./assets/css/Pretty-Search-Form.css"
// import "./assets/css/styles.css"
// import "./assets/css/font-awesome.min.css"
//js //js
window.jQuery = window.$ = require('jquery'); window.jQuery = window.$ = require('jquery');
require('./assets/bootstrap/js/bootstrap.min.js')
export default { export default {
name: 'app', name: 'app',
......
src/components/Index.vue
View file @ 949121cd
<template> <template>
<div class="hello"> <div class="hello">
<div id="promo" v-if="!isLogin" v-bind:style="{ backgroundImage: 'url(' + image + ')' }"> <div id="promo" v-if="!user.isLogin" v-bind:style="{ backgroundImage: 'url(' + image + ')' }">
<div class="jumbotron"> <div class="jumbotron">
<h1>MyCard </h1> <h1>MyCard </h1>
<p>{{lang.index.p1}}</p> <p>{{lang.index.p1}}</p>
...@@ -8,15 +8,14 @@ ...@@ -8,15 +8,14 @@
</div> </div>
</div> </div>
<div class="projects-clean" v-bind:class="{ 'fix-top': isLogin }"> <div class="projects-clean" v-bind:class="{ 'fix-top': user.isLogin }">
<div class="container" id="project"> <div class="container" id="project">
<div class="intro"> <div class="intro">
<h2 class="text-center">{{lang.index.p2}} </h2> <h2 class="text-center">{{lang.index.p2}} </h2>
<p class="text-center">{{lang.index.p3}} </p> <p class="text-center">{{lang.index.p3}} </p>
</div> </div>
<div class="row projects"> <div class="row projects">
<div @ <div @click="gogo('#/ranking')" class="col-lg-4 col-sm-6 item" v-bind:class="{ 'fix-width': !isMobile , 'fix-width-m': isMobile }"><img class="img-responsive" src="../assets/img/image6.png">
="gogo('#/ranking')" class="col-lg-4 col-sm-6 item" v-bind:class="{ 'fix-width': !isMobile , 'fix-width-m': isMobile }"><img class="img-responsive" src="../assets/img/image6.png">
<h3 class="name"> <h3 class="name">
<span style="text-decoration: underline;">{{lang.index.h1}}</span> <span style="text-decoration: underline;">{{lang.index.h1}}</span>
</h3> </h3>
...@@ -47,36 +46,26 @@ ...@@ -47,36 +46,26 @@
</template> </template>
<script> <script>
import language from './lang';
import querystring from 'querystring'; import querystring from 'querystring';
import image from '../assets/img/banner.jpg' import image from '../assets/img/banner.jpg'
import { mapGetters } from 'vuex'
export default { export default {
data() { data() {
return { return {
isLogin: false,
isMobile: false, isMobile: false,
image:image, image: image,
lang: {},
} }
}, },
created: function () {
var lang = localStorage.getItem('lang') || 'cn';
this.init(lang)
var token = querystring.parse(location.search.slice(1)).sso; computed: {
if (token) { ...mapGetters({
localStorage.setItem('token', token); lang: 'getLang',
this.isLogin = true; user: 'getUser'
} else { }),
token = localStorage.getItem('token'); },
if (token) {
this.isLogin = true;
} else {
this.isLogin = false;
}
}
created: function () {
var clientWidth = document.body.clientWidth; var clientWidth = document.body.clientWidth;
if (clientWidth < 753) { if (clientWidth < 753) {
this.isMobile = true this.isMobile = true
...@@ -91,22 +80,13 @@ ...@@ -91,22 +80,13 @@
self.isMobile = false; self.isMobile = false;
} }
} }
}, },
methods: { methods: {
init: function (lang) {
this.lang = language[lang]
},
gogo: function (url) { gogo: function (url) {
// window.open(url) // window.open(url)
window.location.href = url window.location.href = url
} }
}, },
events: {
'lang-change': function (lang) {
this.init(lang)
}
},
} }
</script> </script>
...@@ -135,7 +115,7 @@ ...@@ -135,7 +115,7 @@
#promo { #promo {
text-align: center; text-align: center;
padding: 40px; padding: 40px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
margin-top: 50px; margin-top: 50px;
} }
......
src/components/PageHeader.vue
View file @ 949121cd
...@@ -17,8 +17,8 @@ ...@@ -17,8 +17,8 @@
<li role="presentation"><a href="https://rep.ygobbs.com">{{lang.battlelog}} </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="https://mycard.moe/ygopro/">{{lang.download}} </a></li>-->
<li role="presentation"><a href="#/download">{{lang.download}} </a></li> <li role="presentation"><a href="#/download">{{lang.download}} </a></li>
<li v-if="isLogin" class="dropdown"> <li v-if="user.isLogin" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#"><img v-bind:src="avatar_url" id="head-portrait">{{username}} <span class="caret"></span></a> <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#"><img v-bind:src="user.avatar_url" id="head-portrait">{{user.username}} <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li role="presentation"><a href="#/profile">{{lang.profile}} </a></li> <li role="presentation"><a href="#/profile">{{lang.profile}} </a></li>
<li class="divider" role="presentation"></li> <li class="divider" role="presentation"></li>
...@@ -53,9 +53,6 @@ ...@@ -53,9 +53,6 @@
export default { export default {
data() { data() {
return { return {
isLogin: false,
username: "",
avatar_url: "",
} }
}, },
created: function () { created: function () {
...@@ -64,6 +61,7 @@ ...@@ -64,6 +61,7 @@
computed: { computed: {
...mapGetters({ ...mapGetters({
lang: 'getLang', lang: 'getLang',
user: 'getUser'
}), }),
}, },
methods: { methods: {
...@@ -72,14 +70,10 @@ ...@@ -72,14 +70,10 @@
if (token) { if (token) {
localStorage.setItem('token', token); localStorage.setItem('token', token);
this.render(token); this.render(token);
this.isLogin = true;
} else { } else {
token = localStorage.getItem('token'); token = localStorage.getItem('token');
if (token) { if (token) {
this.render(token); this.render(token);
this.isLogin = true;
} else {
this.isLogin = false;
} }
} }
...@@ -92,11 +86,11 @@ ...@@ -92,11 +86,11 @@
}, },
render: function (token) { render: function (token) {
var user = querystring.parse(new Buffer(token, 'base64').toString()); var user = querystring.parse(new Buffer(token, 'base64').toString());
this.username = user.username; this.$store.dispatch('login', user);
this.avatar_url = user.avatar_url;
}, },
logout: function () { logout: function () {
localStorage.removeItem('token'); localStorage.removeItem('token');
this.$store.dispatch('logout',{});
// var redirectUrl = "http://localhost:8081/index.html"; // var redirectUrl = "http://localhost:8081/index.html";
var redirectUrl = "https://mycard.moe/ygopro/arena/index.html"; var redirectUrl = "https://mycard.moe/ygopro/arena/index.html";
...@@ -127,10 +121,10 @@ ...@@ -127,10 +121,10 @@
localStorage.setItem('lang', 'en'); localStorage.setItem('lang', 'en');
// this.lang = language['en']; // this.lang = language['en'];
// this.$dispatch('lang-change', 'en') // this.$dispatch('lang-change', 'en')
this.curLang = 'en' this.curLang = 'en'
this.$store.dispatch('getLang', this); this.$store.dispatch('getLang', this);
this.$emit('helloworld') this.$emit('helloworld')
} }
} }
} }
......
src/components/Profile.vue
View file @ 949121cd
...@@ -4,9 +4,9 @@ ...@@ -4,9 +4,9 @@
<div class="row"> <div class="row">
<div class="col-md-3" id="profile"> <div class="col-md-3" id="profile">
<div class="thumbnail"> <div class="thumbnail">
<img v-bind:src="avatar_url" style="height:200px;margin-top:13px;"> <img v-bind:src="user.avatar_url" style="height:200px;margin-top:13px;">
<div class="caption"> <div class="caption">
<h3> <i class="glyphicon glyphicon-user"></i> <strong>{{username}}</strong></h3> <h3> <i class="glyphicon glyphicon-user"></i> <strong>{{user.username}}</strong></h3>
<!--<p class="text-nowrap text-muted" style="font-size:20px;">有妞不泡，大逆不道;遇妞则泡，替天行道。 </p>--> <!--<p class="text-nowrap text-muted" style="font-size:20px;">有妞不泡，大逆不道;遇妞则泡，替天行道。 </p>-->
</div> </div>
</div> </div>
...@@ -94,15 +94,12 @@ ...@@ -94,15 +94,12 @@
<script> <script>
import querystring from 'querystring'; import querystring from 'querystring';
import language from './lang';
import API from '../api' import API from '../api'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
export default { export default {
data() { data() {
return { return {
username: "",
avatar_url: "",
user_info: { user_info: {
exp: 0, exp: 0,
pt: 500, pt: 500,
...@@ -124,57 +121,23 @@ ...@@ -124,57 +121,23 @@
computed: { computed: {
...mapGetters({ ...mapGetters({
lang: 'getLang', lang: 'getLang',
user: 'getUser'
}), }),
}, },
watch: {
lang: function (val) {
},
},
created: function () { created: function () {
this.init() let opt = {
var lang = localStorage.getItem('lang'); 'username': this.user.username
this.initLang(lang)
},
events: {
'lang-change': function (lang) {
this.initLang(lang)
} }
API.getUserInfo(opt).then((res) => {
this.user_info = res.data
});
}, },
methods: { methods: {
init: function () { init: function () {
var token = querystring.parse(location.search.slice(1)).sso;
if (token) {
this.render(token);
this.isLogin = true;
} else {
token = localStorage.getItem('token');
if (token) {
this.render(token);
this.isLogin = true;
} else {
this.isLogin = false;
}
}
}, },
initLang: function (lang) {
},
render: function (token) {
var user = querystring.parse(new Buffer(token, 'base64').toString());
this.username = user.username;
this.avatar_url = user.avatar_url;
let opt = {
'username': user.username
}
API.getUserInfo(opt).then((res) => {
this.user_info = res.data
});
}
}, },
} }
......
src/store/actions.js
View file @ 949121cd
...@@ -628,7 +628,14 @@ export const getInvoiceAmount = ({commit}, context) => { ...@@ -628,7 +628,14 @@ export const getInvoiceAmount = ({commit}, context) => {
} }
export const getLang = ({commit}, context) => { export const getLang = ({commit}, context) => {
commit(types.GET_LANG, {lang: context.curLang}) commit(types.GET_LANG, {lang: context.curLang})
} }
\ No newline at end of file
export const login = ({commit}, user) => {
commit(types.LOGIN, {user: user})
}
export const logout = ({commit}, context) => {
commit(types.LOGOUT, {})
}
src/store/getters.js
View file @ 949121cd
...@@ -19,4 +19,5 @@ export const getInvoiceAmount = state => state.invoice.amount ...@@ -19,4 +19,5 @@ export const getInvoiceAmount = state => state.invoice.amount
export const getUserInfo = state => state.account.userInfo export const getUserInfo = state => state.account.userInfo
export const getLang = state => state.invoice.lang export const getLang = state => state.invoice.lang
\ No newline at end of file export const getUser = state => state.invoice.user
\ No newline at end of file
src/store/modules/invoice.js
View file @ 949121cd
import * as types from '../mutation-types' import * as types from '../mutation-types'
import lg from '../../components/lang' import lg from '../../components/lang'
// initial state // initial state
// shape: [{ id, quantity }] // shape: [{ id, quantity }]
...@@ -10,7 +10,12 @@ const state = { ...@@ -10,7 +10,12 @@ const state = {
tax: {}, tax: {},
listData: [], listData: [],
pageTotal: 1, pageTotal: 1,
lang: lg['cn'] lang: lg['cn'],
user: {
isLogin: false,
username:"",
avatar_url:""
}
} }
// getters // getters
...@@ -21,25 +26,32 @@ const actions = {} ...@@ -21,25 +26,32 @@ const actions = {}
// mutations // mutations
const mutations = { const mutations = {
[types.GET_LANG] (state, {lang}) { [types.GET_LANG](state, {lang}) {
state.lang = lg[lang] state.lang = lg[lang]
}, },
[types.GET_INVOICE_ADDRESS] (state, {data}) { [types.LOGIN](state, {user}) {
user.isLogin = true
state.user = user
},
[types.LOGOUT](state, {}) {
state.user.isLogin = false
},
[types.GET_INVOICE_ADDRESS](state, {data}) {
state.address = data state.address = data
}, },
[types.GET_INVOICE_TAX] (state, {data}) { [types.GET_INVOICE_TAX](state, {data}) {
state.tax = data state.tax = data
}, },
[types.CREATE_INVOICE] (state, {id}) { [types.CREATE_INVOICE](state, {id}) {
state.tax.id = id state.tax.id = id
}, },
[types.CREATE_ADDRESS] (state, {id}) { [types.CREATE_ADDRESS](state, {id}) {
state.address.id = id state.address.id = id
}, },
[types.GET_INVOICE_AMOUNT] (state, {data}) { [types.GET_INVOICE_AMOUNT](state, {data}) {
state.amount = data.invoice_amount.toFixed(2) state.amount = data.invoice_amount.toFixed(2)
}, },
[types.CHANGE_INVOICE_STATUS] (state, {data}) { [types.CHANGE_INVOICE_STATUS](state, {data}) {
let index = data.index let index = data.index
state.listData[index].status = 2 state.listData[index].status = 2
state.listData[index].status_str = '已撤销' state.listData[index].status_str = '已撤销'
......
src/store/mutation-types.js
View file @ 949121cd
...@@ -23,4 +23,6 @@ export const GET_USER_INFO = 'GET_USER_INFO' ...@@ -23,4 +23,6 @@ export const GET_USER_INFO = 'GET_USER_INFO'
export const CHANGE_INVOICE_STATUS = 'CHANGE_INVOICE_STATUS' export const CHANGE_INVOICE_STATUS = 'CHANGE_INVOICE_STATUS'
export const GET_LANG = 'GET_LANG' export const GET_LANG = 'GET_LANG'
\ No newline at end of file export const LOGIN = 'LOGIN'
export const LOGOUT = 'LOGOUT'
\ No newline at end of file
static/assets/js/jquery.min.js 0 → 100644
View file @ 949121cd
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment