Skip to content

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

卡组攻略和卡组资料

parent b7768e2e
Hide whitespace changes
Inline Side-by-side
Showing with 447 additions and 190 deletions
src/components/Deck.vue
View file @ 725dd9b4
...@@ -20,121 +20,48 @@ ...@@ -20,121 +20,48 @@
<h4 style="text-align: center">{{title}}</h4> <h4 style="text-align: center">{{title}}</h4>
<hr> <hr>
<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="dialogFormVisible = true">编辑</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>
<div class="row"> <div class="row">
<div class="col-md-4" id="profile"> <div class="col-md-4" id="profile">
<div class="thumbnail"> <div class="thumbnail">
<img v-bind:src="avatar_url" style="height:300px;margin-top:13px;"> <img v-bind:src="avatar_url" style="height:300px;margin-top:2px;margin-top:3px">
<div class="caption"> <div class="caption">
<h3> <h3>
<!--<i class="glyphicon glyphicon-user"></i> --> <!--<i class="glyphicon glyphicon-user"></i> -->
<strong>{{username}}</strong></h3> <strong>{{username}}</strong></h3>
<p class="text-muted" style="font-size:20px;">{{form.desc}}</p> <!--<p class="text-muted" style="font-size:20px;">{{form.desc}}</p>-->
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-8"> <div class="col-md-8">
<div v-if="user.isLogin"> <div class="caption">
<div class="alert alert-success alert-dismissible" role="alert"> <!--<h3>-->
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button> <!--<i class="glyphicon glyphicon-user"></i> -->
<span v-if="!isNew">您可以参与编辑此页面。</span> <!--<strong>{{username}}</strong></h3>-->
<span v-if="isNew">还没有人为这个卡组添上攻略哦! 点我编辑页面。</span> <p style="font-size:20px;"><pre>{{form.desc}}</pre></p>
<i class="el-icon-edit hand" @click.prevent="dialogFormVisible = true">编辑</i> <!--作者：{{author}}-->
</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>
<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> </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>
</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>
<el-dialog :title="username" size="large" v-model="dialogFormVisible"> <el-dialog :title="username" size="large" v-model="dialogFormVisible">
<el-form :model="form"> <el-form :model="form">
<el-form-item label="标题" :label-width="formLabelWidth"> <el-form-item label="标题" :label-width="formLabelWidth">
...@@ -142,6 +69,7 @@ ...@@ -142,6 +69,7 @@
</el-form-item> </el-form-item>
<el-form-item label="图片URL" :label-width="formLabelWidth"> <el-form-item label="图片URL" :label-width="formLabelWidth">
<el-input v-model="avatar_url_new" placeholder="请输入您希望展示的图片的地址" auto-complete="off"></el-input> <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>
<!--<el-form-item label="类型" :label-width="formLabelWidth"> <!--<el-form-item label="类型" :label-width="formLabelWidth">
<el-select v-model="form.region" placeholder="请选择类型"> <el-select v-model="form.region" placeholder="请选择类型">
...@@ -155,6 +83,16 @@ ...@@ -155,6 +83,16 @@
</el-input> </el-input>
</el-form-item> </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> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
...@@ -164,14 +102,27 @@ ...@@ -164,14 +102,27 @@
</el-dialog> </el-dialog>
<!--上传卡组范例--> <!--上传卡组范例-->
<el-dialog title="上传卡组范例" size="large" v-model="dialogFormVisible2"> <el-dialog title="上传卡组范例" size="large" v-model="dialogFormVisible2">
<el-form :model="form"> <el-form :model="form">
<el-form-item label="标题" :label-width="formLabelWidth"> <el-form-item label="标题" :label-width="formLabelWidth">
<el-input v-model="demo_title" placeholder="请输入标题" auto-complete="off"></el-input> <el-input v-model="demo_title" placeholder="请输入标题" auto-complete="off"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="图片URL" :label-width="formLabelWidth"> <el-form-item label="图片URL" :label-width="formLabelWidth">
<el-input v-model="demo_url" placeholder="请输入您希望展示的图片的地址" auto-complete="off"></el-input> <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-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-form-item label="类型" :label-width="formLabelWidth">
<el-select v-model="form.region" placeholder="请选择类型"> <el-select v-model="form.region" placeholder="请选择类型">
<el-option label="一" value="shanghai"></el-option> <el-option label="一" value="shanghai"></el-option>
...@@ -186,7 +137,7 @@ ...@@ -186,7 +137,7 @@
<el-form-item label="文件" :label-width="formLabelWidth"> <el-form-item label="文件" :label-width="formLabelWidth">
<!--<el-upload <!--<el-upload
class="avatar-uploader" class="avatar-uploader"
:action="uploadUrl" :action="uploadUrl"
:show-file-list="false" :show-file-list="false"
...@@ -197,22 +148,17 @@ ...@@ -197,22 +148,17 @@
<div class="el-upload__tip" slot="tip">上传卡组文件，大小不能超过500kb</div> <div class="el-upload__tip" slot="tip">上传卡组文件，大小不能超过500kb</div>
</el-upload>--> </el-upload>-->
<el-upload <el-upload class="upload-demo" :action="uploadUrl" :on-change="handleChange" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
class="upload-demo" :file-list="fileList3">
:action="uploadUrl" <el-button size="small" type="primary">点击上传</el-button>
:on-change="handleChange" <div slot="tip" class="el-upload__tip">上传卡组文件，大小不能超过3KB</div>
: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>
</el-upload> </el-upload>
</el-form-item> </el-form-item>
<!--<button v-if="downloadPath" @click.prevent="download" >下载</button>-->
<!--<button v-if="downloadPath" @click.prevent="download" >下载</button>-->
</el-form> </el-form>
...@@ -224,6 +170,106 @@ ...@@ -224,6 +170,106 @@
</div> </div>
</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>
</div> </div>
...@@ -245,7 +291,8 @@ ...@@ -245,7 +291,8 @@
data() { data() {
return { return {
currentDate: new Date(), currentDate: new Date(),
fileList3: [], author: "",
fileList3: [],
isMobile: false, isMobile: false,
searchText: "", searchText: "",
hasError: false, hasError: false,
...@@ -267,17 +314,20 @@ ...@@ -267,17 +314,20 @@
resource: '', resource: '',
desc: '', desc: '',
desc_new: '', desc_new: '',
strategy:'-',
strategy_new:'',
reference:'-',
reference_new:''
}, },
formLabelWidth: '40px', formLabelWidth: '40px',
isNew: true, isNew: true,
isClick: false, isClick: false,
todayCount: 0, todayCount: 0,
uploadUrl: API.uploadUrl, uploadUrl: API.uploadUrl,
imageUrl:"", imageUrl: "",
downloadPath:"", downloadPath: "",
demo_title: "", demo_title: "",
demo_url:"", demo_url: "",
demo1: [], demo1: [],
demo2: [] demo2: []
} }
...@@ -325,8 +375,16 @@ ...@@ -325,8 +375,16 @@
this.avatar_url_new = dataPbj.url this.avatar_url_new = dataPbj.url
this.form.desc = dataPbj.desc this.form.desc = dataPbj.desc
this.form.desc_new = 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) { if (rankTable) {
rankTable.destroy(); rankTable.destroy();
...@@ -360,29 +418,32 @@ ...@@ -360,29 +418,32 @@
this.fileList3 = fileList.slice(-1); this.fileList3 = fileList.slice(-1);
}, },
handleAvatarSuccess(res, file) { handleAvatarSuccess(res, file) {
this.downloadPath = file.response.path this.downloadPath = file.response.path
this.imageUrl = URL.createObjectURL(file.raw); this.imageUrl = URL.createObjectURL(file.raw);
}, },
beforeAvatarUpload(file) { beforeAvatarUpload(file) {
// const isJPG = file.type === 'image/jpeg'; var type =/\.[^\.]+/.exec(file.name);
const isLt2M = file.size / 1024 / 1024 < 2; const isJPG = type[0] === '.ydk';
const isLt2M = file.size / 1024 < 3;
// if (!isJPG) { if (!isJPG) {
// this.$message.error('上传头像图片只能是 JPG 格式!'); this.$message.error('上传文件只能是 ydk 格式!');
// } return false
}
if (!isLt2M) { 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) window.location.href = API.getDownloadUrl(this.downloadPath)
}, },
downloadFile: function(path){ downloadFile: function (path) {
window.location.href = API.getDownloadUrl(path) window.location.href = API.getDownloadUrl(path)
}, },
onSubmit: function () { onSubmit: function () {
...@@ -411,6 +472,13 @@ ...@@ -411,6 +472,13 @@
this.form.desc = dataPbj.desc this.form.desc = dataPbj.desc
this.form.desc_new = 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) { if (rankTable) {
rankTable.destroy(); rankTable.destroy();
} }
...@@ -434,60 +502,60 @@ ...@@ -434,60 +502,60 @@
location.href = "https://ygobbs.com/session/sso_provider?" + request; location.href = "https://ygobbs.com/session/sso_provider?" + request;
}, },
showDialog2: function(){ showDialog2: function () {
this.dialogFormVisible2 = true this.dialogFormVisible2 = true
setTimeout(function(){ setTimeout(function () {
console.log($(".el-upload__input")) console.log($(".el-upload__input"))
$(".el-upload__input").hide() $(".el-upload__input").hide()
},100) }, 100)
}, },
cancelModify: function () { cancelModify: function () {
this.dialogFormVisible = false this.dialogFormVisible = false
}, },
cancelModify2: function () { cancelModify2: function () {
this.dialogFormVisible2 = false this.dialogFormVisible2 = false
}, },
submitModify2: function () { submitModify2: function () {
this.dialogFormVisible2 = false this.dialogFormVisible2 = false
if (this.isClick) { if (this.isClick) {
this.$notify({
title: '警告',
message: '您操作得太快了!',
type: 'error'
})
} else {
this.isClick = true;
var param = {
user: this.user.username,
name: this.username,
title: this.demo_title,
url: this.demo_url,
file: this.downloadPath
}
var _this = this;
API.saveDeckDemo(param).then((res) => {
this.dialogFormVisible2 = false
this.$notify({ this.$notify({
title: '警告', title: '操作成功',
message: '您操作得太快了!', message: '感谢您的提交!',
type: 'error' type: 'success'
}) })
} else { setTimeout(function () {
this.isClick = true; _this.isClick = false;
var param = { }, 3000)
user: this.user.username, }, (res) => {
name: this.username, setTimeout(function () {
title: this.demo_title, _this.isClick = false;
url: this.demo_url, }, 3000)
file: this.downloadPath this.hasError = true
} console.log(res)
var _this = this; });
API.saveDeckDemo(param).then((res) => { }
this.dialogFormVisible2 = false
this.$notify({
title: '操作成功',
message: '感谢您的提交!',
type: 'success'
})
setTimeout(function () {
_this.isClick = false;
}, 3000)
}, (res) => {
setTimeout(function () {
_this.isClick = false;
}, 3000)
this.hasError = true
console.log(res)
});
}
}, },
submitModify: function () { submitModify: function () {
if (!this.title_new || !this.title_new.trim()) { if (!this.title_new || !this.title_new.trim()) {
...@@ -538,6 +606,8 @@ ...@@ -538,6 +606,8 @@
name: this.username, name: this.username,
title: this.title_new, title: this.title_new,
desc: this.form.desc_new, desc: this.form.desc_new,
strategy: this.form.strategy_new,
reference: this.form.reference_new,
url: this.avatar_url_new, url: this.avatar_url_new,
isNew: this.isNew isNew: this.isNew
} }
...@@ -546,6 +616,9 @@ ...@@ -546,6 +616,9 @@
this.dialogFormVisible = false this.dialogFormVisible = false
this.isNew = false this.isNew = false
this.form.desc = this.form.desc_new 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.avatar_url = this.avatar_url_new
this.title = this.title_new this.title = this.title_new
this.$notify({ this.$notify({
...@@ -633,24 +706,23 @@ ...@@ -633,24 +706,23 @@
margin-bottom: 20px; margin-bottom: 20px;
margin-top: -30px; margin-top: -30px;
} }
.el-upload__input { .el-upload__input {}
} .el-upload__tip {}
.el-upload__tip{
} .avatar-uploader .el-upload {
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9; border: 1px dashed #d9d9d9;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.avatar-uploader .el-upload:hover { .avatar-uploader .el-upload:hover {
border-color: #20a0ff; border-color: #20a0ff;
} }
.avatar-uploader-icon { .avatar-uploader-icon {
font-size: 28px; font-size: 28px;
color: #8c939d; color: #8c939d;
...@@ -659,12 +731,13 @@ ...@@ -659,12 +731,13 @@
line-height: 178px; line-height: 178px;
text-align: center; text-align: center;
} }
.avatar { .avatar {
width: 178px; width: 178px;
height: 178px; height: 178px;
display: block; display: block;
} }
.time { .time {
font-size: 13px; font-size: 13px;
color: #999; color: #999;
...@@ -674,25 +747,32 @@ ...@@ -674,25 +747,32 @@
margin-top: 13px; margin-top: 13px;
line-height: 12px; line-height: 12px;
} }
.button { .button {
padding: 0; padding: 0;
float: right; float: right;
} }
.image { .image {
width: 100%; width: 100%;
display: block; display: block;
} }
.clearfix:before, .clearfix:before,
.clearfix:after { .clearfix:after {
display: table; display: table;
content: ""; content: "";
} }
.clearfix:after { .clearfix:after {
clear: both clear: both
} }
</style> 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 @@ ...@@ -86,6 +86,50 @@
</table> </table>
</div> </div>
</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> </div>
</div> </div>
...@@ -97,9 +141,15 @@ ...@@ -97,9 +141,15 @@
import API from '../api' import API from '../api'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
var rankTable;
var rankTable2;
import moment from 'moment'
import tb_language from './tb_lang.js'
export default { export default {
data() { data() {
return { return {
isMobile: false,
user_info: { user_info: {
exp: 0, exp: 0,
pt: 500, pt: 500,
...@@ -125,7 +175,34 @@ ...@@ -125,7 +175,34 @@
}), }),
}, },
mounted: function () {
var _this = this
$("#search").click(function () {
_this.renderPage();
})
// this.init()
// window.onhashchange = this.init;
this.renderPage();
},
created: function () { 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 = { let opt = {
'username': this.user.username 'username': this.user.username
} }
...@@ -138,6 +215,106 @@ ...@@ -138,6 +215,106 @@
methods: { methods: {
init: function () { 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