卡组攻略和卡组资料

src/components/Profile.vue

@@ -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;
+			},
+
     },
   }