You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
383 lines
11 KiB
383 lines
11 KiB
<!DOCTYPE html> |
|
<html> |
|
|
|
<head> |
|
<meta charset="utf-8"> |
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> |
|
<title>项目中心</title> |
|
<link rel="stylesheet" href="../../../lib/css/mui.min.css"> |
|
<link rel="stylesheet" type="text/css" href="../../../lib/css/basic.css" /> |
|
<link rel="stylesheet" href="../../css/project_white_paper.css"> |
|
<link href="../../../lib/css/mui.pullToRefresh.css" rel="stylesheet" /> |
|
<script src="../../../lib/js/mui.min.js"></script> |
|
<script src="../../../lib/js/cropper.js"></script> |
|
<script src="../../../lib/js/vue.js"></script> |
|
<script src="../../../lib/js/app.js"></script> |
|
<script src="../../js/base/rem-layout.js"></script> |
|
<script type="text/javascript" src="../../js/my/my_ajax.js"></script> |
|
<!--下拉刷新上拉加载js--> |
|
<script src="../../../lib/js/mui.pullToRefresh.js"></script> |
|
<script src="../../../lib/js/mui.pullToRefresh.material.js"></script> |
|
</head> |
|
<style> |
|
|
|
</style> |
|
|
|
<body> |
|
<div id="white-paper"> |
|
<header class="mui-bar mui-bar-nav app-header app-header-darkly"> |
|
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> |
|
<h1 class="mui-title">{{langue.title}}</h1> |
|
<!--<a id="search" @click="search" v-if="search_status" class="mui-icon mui-icon-search mui-pull-right mui-icon-right-nav" style="color: #000000;"></a>--> |
|
</header> |
|
<div class="mui-content"> |
|
<div class="mui-input-row mui-search"> |
|
<input type="search" class="mui-input-clear" placeholder="" v-model="search_value"> |
|
<label @click="Tosearch">{{langue.search}}</label> |
|
</div> |
|
<div class="mui-table-view-cell mui-collapse" id="optional"> |
|
<a href="#" class="all-select">{{selectTitle}}</a> |
|
<div class="mui-collapse-content"> |
|
<ul class="item-ul"> |
|
<li class="item-list mui-active" data-unit='全部' data-id=''>{{langue.all}}</li> |
|
<li class="item-list" v-for="(item,index) in currentList" :data-unit='item.name' :data-id='item.id'>{{item.name}}</li> |
|
</ul> |
|
</div> |
|
</div> |
|
<ul class="mui-table-view txt-media"> |
|
<li class="mui-table-view-cell mui-media" v-for="(item,index) in currentInfo"> |
|
<a href="javascript:;" :id="item.id" @click="Toinfo(item,index)"> |
|
<img class="mui-media-object mui-pull-left" :src='base_file_url + item.coinUrl' /> |
|
<div class="mui-media-body"> |
|
<span class="product-title"> |
|
{{item.currencyName}} |
|
</span> |
|
<div class="product-txt"> |
|
{{item.descr}} |
|
</div> |
|
<div class="product-situation"> |
|
<span class="price">{{item.classifyName}}</span> |
|
</div> |
|
</div> |
|
</a> |
|
<span class="weight" @click="thumb(item.id)" :id="item.id"><img :src="changThumb(item.star)"/>{{item.starNum}}</span> |
|
</li> |
|
<!--<li class="mui-table-view-cell mui-media"> |
|
<a href="javascript:;"> |
|
<img class="mui-media-object mui-pull-left" src="../../img/yanhuo_logo.jpg" /> |
|
<div class="mui-media-body"> |
|
<span class="product-title"> |
|
焰火网 |
|
</span> |
|
<div class="product-txt"> |
|
焰火网是一个全球科sadsadsadsadsadsddsadsdsd技创新数字货币融资 交易平台 |
|
</div> |
|
<div class="product-situation"> |
|
<span class="price">区块链技术</span> |
|
|
|
</div> |
|
</div> |
|
</a> |
|
<span class="weight"><img src="../../img/thumb-active.png"/>10</span> |
|
</li>--> |
|
</ul> |
|
|
|
</div> |
|
<div class="nothing" v-show="currentInfo.length <= 0"> |
|
{{langue.nothing}} |
|
</div> |
|
</div> |
|
</body> |
|
|
|
</html> |
|
|
|
<script> |
|
// 国际化 |
|
var langues = { |
|
zh_CN: { |
|
title: "项目中心", |
|
search: "搜索", |
|
all: '全部', |
|
nothing: '暂无数据', |
|
contentdown: '上拉显示更多', |
|
contentrefresh: '正在加载...', |
|
|
|
}, |
|
zh_HK: { |
|
title: "項目中心", |
|
search: "搜索", |
|
all: '全部', |
|
nothing: '暫無數據', |
|
contentdown: '上拉顯示更多', |
|
contentrefresh: '正在加載...', |
|
}, |
|
en_US: { |
|
title: "Project center", |
|
search: "Search", |
|
all: 'All', |
|
nothing: 'No data', |
|
contentdown: 'Pull up to show more', |
|
contentrefresh: 'Loading...', |
|
} |
|
}; |
|
//2、页面上所有需要国际化的文字，包括提示，都通过Vue去引用，例子： |
|
var langueKey = app.getLanguageLocalStorage(); //获取国际化语种 |
|
var langue = langues[langueKey]; // 获取国际化语种数据 |
|
//3、每个页面都需要加上以下的方法： |
|
window.addEventListener('switchLangueData', function(e) { |
|
//dataInfo为Vue对象的名称 |
|
dataInfo.langue = langues[e.detail]; |
|
}); |
|
var dataInfo = new Vue({ |
|
el: "#white-paper", |
|
data: { |
|
langue: langue, |
|
selectTitle: langue.all, //选择列表的标题 |
|
currentList: [], //白皮书列表 |
|
currentInfo: [], //白皮书主体内容 |
|
currentID: '', //列表ID |
|
thumbs: '0', //判断用户是否点赞过 |
|
projectID: '', //项目id |
|
userLocalStorage: app.getUserLocalStorage(), |
|
base_file_url: app.paperUrl, //基础路 |
|
search_value: '', //搜索框值 |
|
}, |
|
methods: { |
|
//点赞点击事件 |
|
thumb: function(_id) { |
|
if(!this.loginType) { |
|
app.openWin("../wallet_login.html", "mine/html/wallet_login.html"); |
|
} else { |
|
this.projectID = _id; |
|
getThumb(); |
|
} |
|
}, |
|
//改变点赞图片 |
|
changThumb: function(star) { |
|
if(star == '1') { |
|
return '../../img/thumb.png' |
|
} else { |
|
return '../../img/thumb-active.png' |
|
} |
|
}, |
|
Toinfo: function(obj, index) { |
|
//跳转详情页 |
|
openInfo(obj, index); |
|
}, |
|
//搜索 |
|
Tosearch: function() { |
|
getWhitePaperInfo() |
|
}, |
|
}, |
|
computed: { |
|
loginType: function() { |
|
if(JSON.stringify(this.userLocalStorage) != '{}') { |
|
return true; |
|
} else { |
|
return false; |
|
} |
|
}, |
|
|
|
} |
|
|
|
}) |
|
</script> |
|
<script type="text/javascript"> |
|
//页码 |
|
var pageNum = 1; |
|
//上下拉刷新控件 |
|
var pullToRefreshObj = null; |
|
mui.plusReady(function() { |
|
getWhitePaperList(); |
|
getWhitePaperInfo(); |
|
//下拉刷新 |
|
pullToRefreshObj = mui(".mui-content").pullToRefresh({ |
|
down: { |
|
callback: function() { |
|
var self = this; |
|
pageNum = 1; |
|
getWhitePaperInfo(); |
|
setTimeout(function() { |
|
self.endPullDownToRefresh(); |
|
}, 1000); |
|
} |
|
}, |
|
up: { |
|
callback: function() { |
|
var self = this; |
|
setTimeout(function() { |
|
pullUpFunction(self); |
|
}, 1000); |
|
}, |
|
contentdown: dataInfo.langue.contentdown, |
|
contentrefresh: dataInfo.langue.contentrefresh, |
|
contentnomore: "- End -" |
|
} |
|
}); |
|
}); |
|
</script> |
|
<script> |
|
//搜索点击事件 |
|
// document.getElementById('search').addEventListener('tap', function() { |
|
// dataInfo.search_status = false; |
|
// }); |
|
// 分类列表选择事件 |
|
mui(".item-ul").on("tap", ".item-list", function() { |
|
mui(".item-ul .item-list").each(function(index, item) { |
|
item.classList.remove("mui-active"); |
|
}); |
|
this.classList.add('mui-active'); |
|
var unitName = this.getAttribute("data-unit"); |
|
var unitId = this.getAttribute("data-id"); |
|
dataInfo.selectTitle = unitName; |
|
dataInfo.currentID = unitId; |
|
//查询 |
|
getWhitePaperInfo(); |
|
console.log(unitId); |
|
setTimeout(function() { |
|
document.getElementById('optional').classList.remove('mui-active'); |
|
}, 200) |
|
}); |
|
</script> |
|
<script> |
|
//分类列表查询 |
|
function getWhitePaperList() { |
|
mui.ajax(myAjaxJs.AJAX_WHITE_PAPER_SELECT.getUrl, { |
|
headers: { |
|
"locale": app.getLanguageLocalStorage() // 语种头部 |
|
}, |
|
type: myAjaxJs.AJAX_WHITE_PAPER_SELECT.getType, //HTTP请求类型 |
|
dataType: 'json', //服务器返回json格式数据 |
|
timeout: 10000, //超时时间设置为10秒； |
|
success: function(data) { |
|
if(data.code == 200) { |
|
dataInfo.currentList = data.data.rows; |
|
} else { |
|
mui.toast(data.msg); |
|
} |
|
} |
|
}) |
|
} |
|
|
|
//列表查询内容 |
|
function getWhitePaperInfo() { |
|
plus.nativeUI.showWaiting(dataInfo.langue.contentrefresh); |
|
mui.ajax(myAjaxJs.AJAX_WHITE_PAPER_INFO.getUrl, { |
|
headers: { |
|
"locale": app.getLanguageLocalStorage(), // 语种头部 |
|
"X-Requested-Token": app.getTokenStorage() // token头部 |
|
}, |
|
type: myAjaxJs.AJAX_WHITE_PAPER_INFO.getType, //HTTP请求类型 |
|
data: { |
|
classifyId: dataInfo.currentID, |
|
descr: dataInfo.search_value |
|
}, |
|
dataType: 'json', //服务器返回json格式数据 |
|
timeout: 10000, //超时时间设置为10秒； |
|
success: function(data) { |
|
if(data.code == 200) { |
|
plus.nativeUI.closeWaiting(); |
|
//渲染数据 |
|
console.log(JSON.stringify(data.data)) |
|
dataInfo.currentInfo = data.data.rows; |
|
console.log(JSON.stringify(dataInfo.currentInfo)); |
|
console.log(JSON.stringify(dataInfo.currentInfo.length)) |
|
|
|
dataInfo.search_value = ''; |
|
//数据小于10条，禁用上拉 |
|
if(data.data.rows.length < 10) { |
|
pullToRefreshObj.endPullUpToRefresh(true); |
|
} else { |
|
pullToRefreshObj.refresh(true); |
|
} |
|
} else { |
|
plus.nativeUI.closeWaiting(); |
|
mui.toast(data.msg); |
|
} |
|
}, |
|
error: function(xhr, type, errorThrown) { |
|
plus.nativeUI.closeWaiting(); |
|
} |
|
}) |
|
} |
|
|
|
//点赞查询内容 |
|
function getThumb() { |
|
console.log(dataInfo.userLocalStorage.id) |
|
mui.ajax(myAjaxJs.AJAX_WHITE_PAPER_THUMB.getUrl, { |
|
headers: { |
|
"locale": app.getLanguageLocalStorage() // 语种头部 |
|
}, |
|
type: myAjaxJs.AJAX_WHITE_PAPER_THUMB.getType, //HTTP请求类型 |
|
data: { |
|
projectId: dataInfo.projectID, |
|
userId: dataInfo.userLocalStorage.id |
|
}, |
|
dataType: 'json', //服务器返回json格式数据 |
|
timeout: 10000, //超时时间设置为10秒； |
|
success: function(data) { |
|
if(data.code == 200) { |
|
//渲染数据 |
|
getWhitePaperInfo(); |
|
} else { |
|
mui.toast(data.msg); |
|
} |
|
} |
|
}) |
|
} |
|
|
|
/** |
|
* 跳转详情页 |
|
*/ |
|
function openInfo(obj, index) { |
|
var chang_Obj = { |
|
'changeObj': obj |
|
}; |
|
app.openWin("project_white_paper_info.html", "project_white_paper_info.html", {}, chang_Obj); |
|
} |
|
|
|
/** |
|
* 上拉加载事件 |
|
*/ |
|
function pullUpFunction(_self) { |
|
mui.ajax(myAjaxJs.AJAX_WHITE_PAPER_INFO.getUrl, { |
|
headers: { |
|
"locale": app.getLanguageLocalStorage(),// 语种头部 |
|
"X-Requested-Token": app.getTokenStorage() // token头部 |
|
}, |
|
data: { |
|
classifyId: dataInfo.currentID, |
|
pageNum: pageNum + 1 |
|
}, |
|
dataType: 'json', //服务器返回json格式数据 |
|
type: myAjaxJs.AJAX_WHITE_PAPER_INFO.getType, //HTTP请求类型 |
|
timeout: 10000, |
|
success: function(data) { |
|
if(data.code == "200") { |
|
console.log(JSON.stringify(data.data)) |
|
if(data.data.rows.length > 0) { |
|
//渲染数据 |
|
dataInfo.currentInfo = dataInfo.currentInfo.concat(data.data.rows); |
|
//插入数据，渲染数据 |
|
pageNum += 1; |
|
} |
|
//如果数据小于10条 |
|
if(data.data.rows.length < 10) { |
|
_self.endPullUpToRefresh(true); //关闭上拉，并禁用，显示没有更多数据了 |
|
} else { |
|
_self.endPullUpToRefresh(false); |
|
} |
|
} else { |
|
mui.toast(data.msg); |
|
} |
|
}, |
|
error: function(xhr, type, errorThrown) { |
|
_self.endPullUpToRefresh(false); |
|
} |
|
}); |
|
} |
|
//监听上一页面返回的事件 |
|
window.addEventListener('refresh', function(e) { //执行刷新 |
|
getWhitePaperInfo(); |
|
}); |
|
</script> |