Skip to content

Y
Ygopro Arena Web
Commit 725dd9b4 authored by ganjingcun's avatar ganjingcun
Browse files
Options

卡组攻略和卡组资料

parent b7768e2e
Show whitespace changes
Inline Side-by-side
Showing with 447 additions and 190 deletions
src/components/Deck.vue
View file @ 725dd9b4
......@@ -20,20 +20,6 @@
<h4 style="text-align: center">{{title}}</h4>
<hr>
<div class="row">
<div class="col-md-4" id="profile">
<div class="thumbnail">
<img v-bind:src="avatar_url" style="height:300px;margin-top:13px;">
<div class="caption">
<h3>
<!--<i class="glyphicon glyphicon-user"></i> -->
<strong>{{username}}</strong></h3>
<p class="text-muted" style="font-size:20px;">{{form.desc}}</p>
</div>
</div>
</div>
<div class="col-md-8">
<div v-if="user.isLogin">
<div class="alert alert-success alert-dismissible" role="alert">
......@@ -52,87 +38,28 @@
</div>
<h4 class="color-blue"><i class="glyphicon glyphicon-list-alt"></i> 编辑历史 </h4>
<!--<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">编辑历史 </h3>
</div>-->
<!--<div class="panel-body">-->
<!--<div style="width:100%;overflow-x:auto;overflow-y:hidden;">
<table id="rank" class="table table-striped table-bordered table-hover example" ></table>
</div>-->
<!--<div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
<table id="athletic_rank" class="table table-striped table-bordered table-hover example" :class="{ scroll: isMobile }"></table>
</div>-->
<!--</div>-->
<!--<div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
<table id="rank" class="table table-striped table-bordered table-hover example" :class="{ scroll: isMobile }" ></table>
</div>-->
<!--</div>-->
<div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
<table id="athletic_rank" class="table table-striped table-bordered table-hover example" :class="{ scroll: isMobile }"></table>
</div>
<h4 class="color-blue"><i class="glyphicon glyphicon-list-alt"></i> 卡组范例&下载 </h4>
<div v-if="user.isLogin">
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<span v-if="!isNew">您可以上传卡组范例。</span>
<span v-if="isNew">还没有卡组范例。</span>
<i class="el-icon-edit hand" @click.prevent="showDialog2">我要上传</i>
</div>
</div>
<div v-else>
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<span>登录后才可上传卡组范例。</span>
<a class="hand" @click.prevent="login" href="#">登录</a>
</div>
</div>
<el-row>
<el-col :span="7" v-for="(o, index) in demo1" :key="o" :offset="index > 0 ? 1 : 0">
<el-card :body-style="{ padding: '0px' }">
<img :src="o.url" class="image">
<div style="padding: 6px;">
<span style="font-size: 10px">标题: {{o.title}}</span>
<br>
<span style="font-size: 10px">上传者: {{o.author}}</span>
<div class="bottom clearfix">
<time class="time">{{o.create_time}}</time>
<el-button v-if="o.file" type="text" class="button" @click="downloadFile(o.file)">下载</el-button>
</div>
<div class="row">
<div class="col-md-4" id="profile">
<div class="thumbnail">
<img v-bind:src="avatar_url" style="height:300px;margin-top:2px;margin-top:3px">
<div class="caption">
<h3>
<!--<i class="glyphicon glyphicon-user"></i> -->
<strong>{{username}}</strong></h3>
<!--<p class="text-muted" style="font-size:20px;">{{form.desc}}</p>-->
</div>
</el-card>
</el-col>
</el-row>
<br>
<el-row>
<el-col :span="7" v-for="(o, index) in demo2" :key="o" :offset="index > 0 ? 1 : 0">
<el-card :body-style="{ padding: '0px' }">
<img :src="o.url" class="image">
<div style="padding: 6px;">
<span style="font-size: 10px">标题: {{o.title}}</span>
<br>
<span style="font-size: 10px">上传者: {{o.author}}</span>
<div class="bottom clearfix">
<time class="time">{{o.create_time}}</time>
<el-button v-if="o.file" type="text" class="button" @click="downloadFile(o.file)">下载</el-button>
</div>
</div>
</el-card>
</el-col>
</el-row>
<br>
<div class="col-md-8">
<div class="caption">
<!--<h3>-->
<!--<i class="glyphicon glyphicon-user"></i> -->
<!--<strong>{{username}}</strong></h3>-->
<p style="font-size:20px;"><pre>{{form.desc}}</pre></p>
<!--作者：{{author}}-->
</div>
<el-dialog :title="username" size="large" v-model="dialogFormVisible">
......@@ -142,6 +69,7 @@
</el-form-item>
<el-form-item label="图片URL" :label-width="formLabelWidth">
<el-input v-model="avatar_url_new" placeholder="请输入您希望展示的图片的地址" auto-complete="off"></el-input>
<a href="https://ygobbs.com/" target="_blank" class="el-icon-upload2"> 图片上传地址</a>
</el-form-item>
<!--<el-form-item label="类型" :label-width="formLabelWidth">
<el-select v-model="form.region" placeholder="请选择类型">
......@@ -155,6 +83,16 @@
</el-input>
</el-form-item>
<el-form-item label="卡组攻略" :label-width="formLabelWidth">
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6}" placeholder="请输入卡组攻略" v-model="form.strategy_new">
</el-input>
</el-form-item>
<el-form-item label="参考资料" :label-width="formLabelWidth">
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6}" placeholder="请输入参考资料" v-model="form.reference_new">
</el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
......@@ -171,7 +109,20 @@
</el-form-item>
<el-form-item label="图片URL" :label-width="formLabelWidth">
<el-input v-model="demo_url" placeholder="请输入您希望展示的图片的地址" auto-complete="off"></el-input>
<a href="https://ygobbs.com/" target="_blank" class="el-icon-upload2"> 图片上传地址</a>
</el-form-item>
<!--<el-popover
ref="popover1"
placement="top-start"
title="标题"
width="200"
trigger="hover"
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
</el-popover>
<el-button v-popover:popover1>hover 激活</el-button>-->
<!--<el-form-item label="类型" :label-width="formLabelWidth">
<el-select v-model="form.region" placeholder="请选择类型">
<el-option label="一" value="shanghai"></el-option>
......@@ -197,15 +148,10 @@
<div class="el-upload__tip" slot="tip">上传卡组文件，大小不能超过500kb</div>
</el-upload>-->
<el-upload
class="upload-demo"
:action="uploadUrl"
:on-change="handleChange"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
<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">上传卡组文件，大小不能超过2M</div>
<div slot="tip" class="el-upload__tip">上传卡组文件，大小不能超过3KB</div>
</el-upload>
</el-form-item>
......@@ -224,6 +170,106 @@
</div>
</div>
<div class="container">
<div class="row">
<h4 class="color-blue"> <i class="glyphicon glyphicon-list-alt"></i> 卡组攻略 </h4>
<pre>{{form.strategy}}</pre>
<br>
<h4 class="color-blue"> <i class="glyphicon glyphicon-list-alt"></i> 卡组范例&下载 </h4>
<div v-if="user.isLogin">
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<span v-if="!isNew">您可以上传卡组范例。</span>
<span v-if="isNew">还没有卡组范例。</span>
<i class="el-icon-edit hand" @click.prevent="showDialog2">我要上传</i>
</div>
</div>
<div v-else>
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<span>登录后才可上传卡组范例。</span>
<a class="hand" @click.prevent="login" href="#">登录</a>
</div>
</div>
<el-row>
<el-col :span="7" v-for="(o, index) in demo1" :key="o" :offset="index > 0 ? 1 : 0">
<el-card :body-style="{ padding: '0px' }">
<img :src="o.url" class="image">
<div style="padding: 6px;">
<span style="font-size: 14px">标题: {{o.title}}</span>
<br>
<span style="font-size: 14px">上传者: {{o.author}}</span>
<div class="bottom clearfix">
<time class="time">{{o.create_time}}</time>
<el-button v-if="o.file" type="text" class="button" @click="downloadFile(o.file)">下载</el-button>
</div>
</div>
</el-card>
</el-col>
</el-row>
<br>
<el-row>
<el-col :span="7" v-for="(o, index) in demo2" :key="o" :offset="index > 0 ? 1 : 0">
<el-card :body-style="{ padding: '0px' }">
<img :src="o.url" class="image">
<div style="padding: 6px;">
<span style="font-size: 14px">标题: {{o.title}}</span>
<br>
<span style="font-size: 14px">上传者: {{o.author}}</span>
<div class="bottom clearfix">
<time class="time">{{o.create_time}}</time>
<el-button v-if="o.file" type="text" class="button" @click="downloadFile(o.file)">下载</el-button>
</div>
</div>
</el-card>
</el-col>
</el-row>
<br>
<h4 class="color-blue"> <i class="glyphicon glyphicon-list-alt"></i> 参考资料 </h4>
<pre v-html="form.reference">{{form.reference}}</pre>
<br>
<h4 class="color-blue"> <i class="glyphicon glyphicon-list-alt"></i> 编辑历史 </h4>
<!--<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">编辑历史 </h3>
</div>-->
<!--<div class="panel-body">-->
<!--<div style="width:100%;overflow-x:auto;overflow-y:hidden;">
<table id="rank" class="table table-striped table-bordered table-hover example" ></table>
</div>-->
<!--<div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
<table id="athletic_rank" class="table table-striped table-bordered table-hover example" :class="{ scroll: isMobile }"></table>
</div>-->
<!--</div>-->
<!--<div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
<table id="rank" class="table table-striped table-bordered table-hover example" :class="{ scroll: isMobile }" ></table>
</div>-->
<!--</div>-->
<div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
<table id="athletic_rank" class="table table-striped table-bordered table-hover example" :class="{ scroll: isMobile }"></table>
</div>
<br>
</div>
</div>
</div>
</div>
......@@ -245,6 +291,7 @@
data() {
return {
currentDate: new Date(),
author: "",
fileList3: [],
isMobile: false,
searchText: "",
......@@ -267,17 +314,20 @@
resource: '',
desc: '',
desc_new: '',
strategy:'-',
strategy_new:'',
reference:'-',
reference_new:''
},
formLabelWidth: '40px',
isNew: true,
isClick: false,
todayCount: 0,
uploadUrl: API.uploadUrl,
imageUrl:"",
downloadPath:"",
imageUrl: "",
downloadPath: "",
demo_title: "",
demo_url:"",
demo_url: "",
demo1: [],
demo2: []
}
......@@ -325,8 +375,16 @@
this.avatar_url_new = dataPbj.url
this.form.desc = dataPbj.desc
this.form.desc_new = dataPbj.desc
this.demo1 = res.data.demo.slice(0,3)
this.demo2 = res.data.demo.slice(3,6)
this.form.reference = dataPbj.reference || '-'
this.form.reference_new = dataPbj.reference
this.form.strategy = dataPbj.strategy || '-'
this.form.strategy_new = dataPbj.strategy
this.demo1 = res.data.demo.slice(0, 3)
this.demo2 = res.data.demo.slice(3, 6)
this.author = dataPbj.author
if (rankTable) {
rankTable.destroy();
......@@ -365,23 +423,26 @@
this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
// const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
var type =/\.[^\.]+/.exec(file.name);
const isJPG = type[0] === '.ydk';
const isLt2M = file.size / 1024 < 3;
// if (!isJPG) {
// this.$message.error('上传头像图片只能是 JPG 格式!');
// }
if (!isJPG) {
this.$message.error('上传文件只能是 ydk 格式!');
return false
}
if (!isLt2M) {
this.$message.error('上传文件大小不能超过 2MB!');
this.$message.error('上传文件大小不能超过 3KB!');
return false
}
return isLt2M;
return true;
},
download: function(){
download: function () {
window.location.href = API.getDownloadUrl(this.downloadPath)
},
downloadFile: function(path){
downloadFile: function (path) {
window.location.href = API.getDownloadUrl(path)
},
......@@ -411,6 +472,13 @@
this.form.desc = dataPbj.desc
this.form.desc_new = dataPbj.desc
this.form.reference = dataPbj.reference || '-'
this.form.reference_new = dataPbj.reference
this.form.strategy = dataPbj.strategy || '-'
this.form.strategy_new = dataPbj.strategy
this.author = dataPbj.author
if (rankTable) {
rankTable.destroy();
}
......@@ -434,12 +502,12 @@
location.href = "https://ygobbs.com/session/sso_provider?" + request;
},
showDialog2: function(){
showDialog2: function () {
this.dialogFormVisible2 = true
setTimeout(function(){
setTimeout(function () {
console.log($(".el-upload__input"))
$(".el-upload__input").hide()
},100)
}, 100)
},
cancelModify: function () {
......@@ -538,6 +606,8 @@
name: this.username,
title: this.title_new,
desc: this.form.desc_new,
strategy: this.form.strategy_new,
reference: this.form.reference_new,
url: this.avatar_url_new,
isNew: this.isNew
}
......@@ -546,6 +616,9 @@
this.dialogFormVisible = false
this.isNew = false
this.form.desc = this.form.desc_new
this.form.strategy = this.form.strategy_new
this.form.reference = this.form.reference_new
this.avatar_url = this.avatar_url_new
this.title = this.title_new
this.$notify({
......@@ -634,23 +707,22 @@
margin-top: -30px;
}
.el-upload__input {
}
.el-upload__tip{
}
.el-upload__input {}
.el-upload__tip {}
.avatar-uploader .el-upload {
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #20a0ff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
......@@ -659,6 +731,7 @@
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
......@@ -695,4 +768,11 @@
clear: both
}
pre{
white-space:pre-wrap;
white-space:-moz-pre-wrap;
white-space:-pre-wrap;
white-space:-o-pre-wrap;
word-wrap:break-word;
}
</style>
\ No newline at end of file
src/components/Profile.vue
View file @ 725dd9b4
......@@ -86,6 +86,50 @@
</table>
</div>
</div>
<div class="alert alert-info alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button> {{lang.tagInfo}}
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{{lang.athleticDueHistory}} </h3>
</div>
<!--<div class="panel-body">-->
<!--<div style="width:100%;overflow-x:auto;overflow-y:hidden;">
<table id="rank" class="table table-striped table-bordered table-hover example" ></table>
</div>-->
<div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
<table id="athletic_rank" class="table table-striped table-bordered table-hover example" :class="{ scroll: isMobile }"></table>
</div>
<!--</div>-->
<!--<div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
<table id="rank" class="table table-striped table-bordered table-hover example" :class="{ scroll: isMobile }" ></table>
</div>-->
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{{lang.entertainDueHistory}} </h3>
</div>
<!--<div class="panel-body">-->
<!--<div style="width:100%;overflow-x:auto;overflow-y:hidden;">
<table id="rank" class="table table-striped table-bordered table-hover example" ></table>
</div>-->
<div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
<table id="entertain_rank" class="table table-striped table-bordered table-hover example" :class="{ scroll: isMobile }"></table>
</div>
<!--</div>-->
<!--<div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
<table id="rank" class="table table-striped table-bordered table-hover example" :class="{ scroll: isMobile }" ></table>
</div>-->
</div>
</div>
</div>
</div>
......@@ -97,9 +141,15 @@
import API from '../api'
import { mapGetters } from 'vuex'
var rankTable;
var rankTable2;
import moment from 'moment'
import tb_language from './tb_lang.js'
export default {
data() {
return {
isMobile: false,
user_info: {
exp: 0,
pt: 500,
......@@ -125,7 +175,34 @@
}),
},
mounted: function () {
var _this = this
$("#search").click(function () {
_this.renderPage();
})
// this.init()
// window.onhashchange = this.init;
this.renderPage();
},
created: function () {
var regex_match = /(nokia|iphone|android|motorola|^mot-|softbank|foma|docomo|kddi|up.browser|up.link|htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|blackberry|alcatel|amoi|ktouch|nexian|samsung|^sam-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|maui|symbian|smartphone|midp|wap|phone|windows ce|iemobile|^spice|^bird|^zte-|longcos|pantech|gionee|^sie-|portalmmm|jigs browser|hiptop|^benq|haier|^lct|operas*mobi|opera*mini|320x320|240x320|176x220)/i;
var u = navigator.userAgent;
if (null == u) {
return true;
}
var result = regex_match.exec(u);
if (null == result) {
this.isMobile = false;
} else {
this.isMobile = true;
}
let opt = {
'username': this.user.username
}
......@@ -138,6 +215,106 @@
methods: {
init: function () {
},
renderPage: function () {
if (rankTable) {
rankTable.destroy();
}
if (rankTable2) {
rankTable2.destroy();
}
var username = this.user.username
var type = 1;
rankTable = this.renderRankTable("#athletic_rank");
rankTable2 = this.renderRankTable("#entertain_rank");
if (!username) return;
API.getUserDueHistory({ username: username, type: "1", page_num: 100 }).then((res) => {
if (rankTable) {
rankTable.destroy();
}
rankTable = this.renderRankTable("#athletic_rank", res.data.data)
}, (res) => {
console.log(res)
});
API.getUserDueHistory({ username: username, type: "2", page_num: 100 }).then((res) => {
if (rankTable2) {
rankTable2.destroy();
}
rankTable2 = this.renderRankTable("#entertain_rank", res.data.data)
}, (res) => {
console.log(res)
});
},
renderRankTable: function (id, tableData) {
tableData = tableData || [];
var lang = localStorage.getItem('lang') || 'cn';
var rank = 1;
var processData = tableData.map(function (d) {
return [d.usernamea, d.usernameb, moment(d.start_time).format('YYYY-MM-DD HH:mm'), moment(d.end_time).format('YYYY-MM-DD HH:mm'), d.userscorea, d.userscoreb];
});
var table = $(id).DataTable({
paging: true,
searching: false,
ordering: false,
lengthChange: false,
info: false,
data: processData,
columns: [
{ title: tb_language[lang].playerA },
{ title: tb_language[lang].playerB },
{ title: tb_language[lang].startTime },
{ title: tb_language[lang].endTime },
],
"columnDefs": [
{
"render": function (data, type, row) {
var userscorea = row[4];
var userscoreb = row[5];
if (userscorea < 0) {
return "<a href='#/userinfo?username=" + data + "'><span class='label label-danger'>" + data + "</span></a>";
}
if (userscorea > userscoreb) {
return "<a href='#/userinfo?username=" + data + "'><span class='label label-success'>" + data + "</span></a>";
}
return "<a href='#/userinfo?username=" + data + "'><span class='label label-info'>" + data + "</span></a>";
},
"targets": 0
},
{
"render": function (data, type, row) {
var userscorea = row[4];
var userscoreb = row[5];
if (userscoreb < 0) {
return "<a href='#/userinfo?username=" + data + "'><span class='label label-danger'>" + data + "</span></a>";
}
if (userscorea < userscoreb) {
return "<a href='#/userinfo?username=" + data + "'><span class='label label-success'>" + data + "</span></a>";
}
return "<a href='#/userinfo?username=" + data + "'><span class='label label-info'>" + data + "</span></a>";
},
"targets": 1
},
],
"language": lang === 'en' ? tb_language.en : tb_language.cn
});
return table;
},
},
}
......
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