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

5 years ago
<!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.walletFileUrl, //基础路
5 years ago
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>