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.
471 lines
14 KiB
471 lines
14 KiB
<!doctype html> |
|
<html> |
|
|
|
<head> |
|
<meta charset="UTF-8"> |
|
<title>订单</title> |
|
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"> |
|
<link href="../../../lib/css/mui.min.css" rel="stylesheet" /> |
|
<!--引入公共样式--> |
|
<link rel="stylesheet" type="text/css" href="../../../lib/css/icons-extra2.css" /> |
|
<link href="../../../lib/css/mui.pullToRefresh.css" rel="stylesheet" /> |
|
<link href="../../../lib/css/basic.css" rel="stylesheet" /> |
|
<link href="../css/order.css" rel="stylesheet" /> |
|
<!--下拉刷新上拉加载css--> |
|
<script src="../../../lib/js/rem-layout.js"></script> |
|
<script src="../../../lib/js/mui.min.js"></script> |
|
<script src="../../../lib/js/vue.js"></script> |
|
<script src="../../../lib/js/app.js"></script> |
|
<!--下拉刷新上拉加载js--> |
|
<script src="../../../lib/js/mui.pullToRefresh.js"></script> |
|
<script src="../../../lib/js/mui.pullToRefresh.material.js"></script> |
|
<!--baseJs--> |
|
<script src="../js/ajax/coin_ajax.js"></script> |
|
<script src="../js/ajax/order_ajax.js"></script> |
|
<script src="../js/base/requestUrl.js"></script> |
|
</head> |
|
|
|
<style> |
|
.no-data-img { |
|
text-align: center; |
|
margin: 2rem 0 0 0; |
|
font-size: 0.25rem; |
|
color: rgb(51, 51, 51); |
|
} |
|
|
|
.no-data-img img { |
|
width: 2rem !important; |
|
} |
|
</style> |
|
|
|
<body> |
|
<div id='data-info'> |
|
<header class="mui-bar mui-bar-nav" id="header"> |
|
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="font-size: .34rem;">{{langue.title}}</a> |
|
</header> |
|
<div class="mui-content"> |
|
<div class="select-box"> |
|
<div class="select"> |
|
<select name="slct1" v-model="coin_index" @change="coinChange"> |
|
<option value="0">{{langue.allCoin}}</option> |
|
<option v-for="(item,index) in coins" :value="index + 1">{{item.coinName}}</option> |
|
</select> |
|
</div> |
|
<div class="select"> |
|
<select name="slct2" v-model="order_status" @change="statusChange"> |
|
<option value="">{{langue.allStatus}}</option> |
|
<option value="NEW">{{langue.newStatus}}</option> |
|
<option value="UNDERWAY">{{langue.underwayStatus}}</option> |
|
<option value="FINISH">{{langue.finishStatus}}</option> |
|
<option value="CANCEL">{{langue.cancelStatus}}</option> |
|
<option value="APPEAL">{{langue.appealStatus}}</option> |
|
</select> |
|
</div> |
|
<div class="select"> |
|
<select name="slct3" v-model="order_type" @change="typeChange"> |
|
<option value="">{{langue.allType}}</option> |
|
<option value="BUY">{{langue.buyType}}</option> |
|
<option value="SELL">{{langue.sellType}}</option> |
|
</select> |
|
</div> |
|
</div> |
|
<div class="order-info"> |
|
<div class="no-data-img" v-show="orders.length <= 0"> |
|
<img src="../img/no_data.png" /> |
|
<div>{{langue.notOrder}}</div> |
|
</div> |
|
<ul> |
|
<li class="item-list js-tap-order" v-for="item in orders" :data-orderId='item.id'> |
|
<div class="order-info-left sales" v-if="item.role == 'SELL'"> |
|
{{langue.sell}} |
|
</div> |
|
<div class="order-info-left buys" v-if="item.role == 'BUY'"> |
|
{{langue.buy}} |
|
</div> |
|
<div class="order-info-right"> |
|
<div class="order-info-top"> |
|
<span class="order-coin">{{item.coinName}}<label>{{item.modifyTime}}</label></span> |
|
<span class="order-status" :class="{'sure' : sureClass(item.orderStatus),'remove':removeClass(item.orderStatus),'appeal':appealClass(item.orderStatus)}"> |
|
<img src="../img/countdown.png" v-if="item.orderStatus == 'NEW' || item.orderStatus == 'UNDERWAY'" /> |
|
<img src="../img/sure.png" v-if="item.orderStatus == 'FINISH'" /> |
|
<img src="../img/shensu.png" v-if="item.orderStatus == 'APPEAL'" /> |
|
<img src="../img/remove.png" v-if="item.orderStatus == 'CANCEL'" /> |
|
{{item.orderStatus | orderStauts}} |
|
</span> |
|
</div> |
|
<div class="order-info-bottom"> |
|
<h4>{{langue.orderNumber}}：{{item.orderNumber}}</h4> |
|
<div class="order-info-txt"> |
|
<span>{{langue.orderNumber}}({{item.unitName}})</span> |
|
<span>{{langue.amount}}({{item.coinName}})</span> |
|
<span>{{langue.turnover}}({{item.unitName}})</span> |
|
</div> |
|
<div class="order-info-num"> |
|
<span>{{item.price | toFixNum(coin.unitDecimal)}}</span> |
|
<span>{{item.amount | toFixNum(coin.coinDecimal)}}</span> |
|
<span>{{item.turnover | toFixNum(coin.unitDecimal)}}</span> |
|
</div> |
|
</div> |
|
</div> |
|
</li> |
|
</ul> |
|
|
|
</div> |
|
</div> |
|
</div> |
|
</body> |
|
|
|
<script type="text/javascript"> |
|
//页码 |
|
var pageNum = 1; |
|
//上下拉刷新控件 |
|
var pullToRefreshObj = null; |
|
</script> |
|
|
|
<script type="text/javascript"> |
|
var langues = { |
|
zh_CN: { |
|
title: '订单管理', |
|
allCoin: '全部(币种)', |
|
allStatus: '全部(状态)', |
|
newStatus: '待处理', |
|
underwayStatus: '进行中', |
|
finishStatus: '已完成', |
|
cancelStatus: '已取消', |
|
appealStatus: '申诉中', |
|
allType: '全部(类型)', |
|
buyType: '购买', |
|
sellType: '出售', |
|
notOrder: '暂无订单', |
|
buy: '买', |
|
sell: '卖', |
|
orderNumber: '订单号', |
|
price: '单价', |
|
amount: '数量', |
|
turnover: '交易额', |
|
contentinit: '上拉显示更多...', |
|
contentdown: '上拉显示更多', |
|
contentrefresh: '正在加载...', |
|
contentnomore: "- End -", |
|
logInElse: '您的账号在别处登录！', |
|
|
|
}, |
|
zh_HK: { |
|
title: '訂單管理', |
|
allCoin: '全部(幣種)', |
|
allStatus: '全部(狀態)', |
|
newStatus: '待處理', |
|
underwayStatus: '進行中', |
|
finishStatus: '已完成', |
|
cancelStatus: '已取消', |
|
appealStatus: '申訴中', |
|
allType: '全部(類型)', |
|
buyType: '購買', |
|
sellType: '出售', |
|
notOrder: '暫無訂單', |
|
buy: '買', |
|
sell: '賣', |
|
orderNumber: '訂單號', |
|
price: '單價', |
|
amount: '數量', |
|
turnover: '交易額', |
|
contentinit: '上拉顯示更多...', |
|
contentdown: '上拉顯示更多', |
|
contentrefresh: '正在加載...', |
|
contentnomore: "- End -", |
|
logInElse: '您的帳號在別處登錄！', |
|
}, |
|
en_US: { |
|
title: 'Order Management', |
|
allCoin: 'All (coins)', |
|
allStatus: 'All (status)', |
|
newStatus: 'pending', |
|
underwayStatus: 'processing', |
|
finishStatus: 'completed', |
|
cancelStatus: 'Cancelled', |
|
appealStatus: 'Appeal', |
|
allType: 'All (type)', |
|
buyType: 'buy', |
|
sellType: 'sell', |
|
notOrder: 'No order', |
|
buy: 'buy', |
|
sell: 'sell', |
|
orderNumber: 'number', |
|
price: 'price', |
|
amount: 'amount', |
|
turnover: 'turnover', |
|
contentinit: 'Look up shows more...', |
|
contentdown: 'Look up shows more', |
|
contentrefresh: 'loading...', |
|
contentnomore: "- End -", |
|
logInElse: 'Your account is logged in elsewhere!', |
|
} |
|
}; |
|
//2、页面上所有需要国际化的文字，包括提示，都通过Vue去引用，例子： |
|
var langueKey = app.getLanguageLocalStorage(); //获取国际化语种 |
|
var langue = langues[langueKey]; // 获取国际化语种数据 |
|
//3、每个页面都需要加上以下的方法： |
|
window.addEventListener('switchLangueData', function(e) { |
|
//dataInfo为Vue对象的名称 |
|
dataInfo.langue = langues[e.detail]; |
|
}); |
|
</script> |
|
|
|
<script type="text/javascript"> |
|
/**vue**/ |
|
|
|
//全局过滤器-保留小数点 |
|
Vue.filter('toFixNum', function(value, fix_num) { |
|
return app.formatValueStr(value, fix_num); |
|
}); |
|
|
|
var dataInfo = new Vue({ |
|
el: '#data-info', |
|
data: { |
|
langue: langue, |
|
coins: [], //代币列表 |
|
coin_index: 0, //代币下拉控件索引 |
|
coin: { //当前选择的代币 |
|
coinName: '', //当前选择的代币 |
|
unitName: '', //当前代币的交易单位 |
|
coinDecimal: 6, //代币小数长度 |
|
unitDecimal: 2, //代币交易单位小数长度 |
|
}, |
|
|
|
orders: [], //订单列表 |
|
order_status: '', //订单状态 |
|
order_type: '', //订单类型 |
|
}, |
|
methods: { |
|
//币种切换时触发方法 |
|
coinChange: function(e) { |
|
//当前下拉框选择索引 |
|
var index = this.coin_index; |
|
//索引为0的时候，币种是选择全部 |
|
if (index == 0) { |
|
this.coin.coinName = ''; |
|
this.coin.unitName = ''; |
|
this.coin.coinDecimal = 6; |
|
this.coin.unitDecimal = 2; |
|
//查询用户订单 |
|
listUserOrders(); |
|
return; |
|
} |
|
//更换当前币种 |
|
this.coin = JSON.parse(JSON.stringify(this.coins[index - 1])); |
|
//查询用户订单 |
|
listUserOrders(); |
|
}, |
|
//查询订单状态改变 |
|
statusChange: function(e) { |
|
//查询用户订单 |
|
listUserOrders(); |
|
}, |
|
//查询订单类型改变 |
|
typeChange: function(e) { |
|
//查询用户订单 |
|
listUserOrders(); |
|
}, |
|
//是否显示 sure 样式 |
|
sureClass: function(status) { |
|
if (status == 'NEW' || status == 'UNDERWAY' || status == 'FINISH') { |
|
return true; |
|
} |
|
return false; |
|
}, |
|
//是否显示 remove 样式 |
|
removeClass: function(status) { |
|
if (status == 'CANCEL') { |
|
return true; |
|
} |
|
return false; |
|
}, |
|
//是否显示 appeal 样式 |
|
appealClass: function(status) { |
|
if (status == 'APPEAL') { |
|
return true; |
|
} |
|
return false; |
|
} |
|
}, |
|
filters: { |
|
//根据订单状态返回订单中文标识 |
|
orderStauts: function(val) { |
|
if (val == 'NEW') { |
|
return this.langue.newStatus; |
|
} |
|
if (val == 'UNDERWAY') { |
|
return this.langue.underwayStatus; |
|
} |
|
if (val == 'FINISH') { |
|
return this.langue.finishStatus; |
|
} |
|
if (val == 'CANCEL') { |
|
return this.langue.cancelStatus; |
|
} |
|
if (val == 'APPEAL') { |
|
return this.langue.appealStatus; |
|
} |
|
}, |
|
} |
|
}); |
|
</script> |
|
|
|
<script type="text/javascript"> |
|
/**mui.plusReady**/ |
|
mui.plusReady(function() { |
|
getCoins(); |
|
listUserOrders(); |
|
|
|
//下拉刷新 |
|
pullToRefreshObj = mui(".mui-content").pullToRefresh({ |
|
down: { |
|
callback: function() { |
|
var self = this; |
|
listUserOrders(); |
|
pageNum = 1; |
|
self.refresh(true); |
|
setTimeout(function() { |
|
self.endPullDownToRefresh(); |
|
}, 1000); |
|
} |
|
}, |
|
up: { |
|
callback: function() { |
|
var self = this; |
|
setTimeout(function() { |
|
pullUpFunction(self); |
|
}, 1000); |
|
}, |
|
contentinit: dataInfo.langue.contentinit, |
|
contentdown: dataInfo.langue.contentdown, |
|
contentrefresh: dataInfo.langue.contentrefresh, |
|
contentnomore: dataInfo.langue.contentnomore |
|
} |
|
}); |
|
}); |
|
</script> |
|
|
|
<script type="text/javascript"> |
|
/**事件绑定**/ |
|
|
|
//订单列表跳转订单详情页 |
|
mui('.order-info').on('tap', '.js-tap-order', function() { |
|
var orderId = this.getAttribute("data-orderId"); |
|
app.openWin('payment.html', 'payment.html', {}, { |
|
orderId: orderId |
|
}); |
|
}); |
|
</script> |
|
|
|
<script type="text/javascript"> |
|
/**function**/ |
|
|
|
//查询法币币种列表 |
|
function getCoins() { |
|
mui.ajax(coinAjax.GET_COINS.getUrl, { |
|
headers: { |
|
"X-Requested-Token": app.getTokenStorage(), // token头部 |
|
"locale": app.getLanguageLocalStorage() // 语种头部 |
|
}, |
|
data: {}, |
|
dataType: 'json', |
|
type: coinAjax.GET_COINS.getType, |
|
timeout: 10000, //超时时间设置为10秒 |
|
success: function(data) { |
|
if (data.code == 200) { |
|
//渲染数据 |
|
dataInfo.coins = data.data; |
|
} |
|
} |
|
}); |
|
} |
|
|
|
//查询用户订单 |
|
function listUserOrders() { |
|
mui.ajax(orderAjax.LIST_USER_ORDER.getUrl, { |
|
headers: { |
|
"X-Requested-Token": app.getTokenStorage(), // token头部 |
|
"locale": app.getLanguageLocalStorage() // 语种头部 |
|
}, |
|
data: { |
|
coinName: dataInfo.coin.coinName, |
|
unitName: dataInfo.coin.unitName, |
|
orderType: dataInfo.order_type, |
|
orderStatus: dataInfo.order_status, |
|
}, |
|
dataType: 'json', |
|
type: orderAjax.LIST_USER_ORDER.getType, |
|
timeout: 10000, //超时时间设置为10秒 |
|
success: function(data) { |
|
if (data.code == 200) { |
|
//渲染数据 |
|
dataInfo.orders = data.data; |
|
//数据小于10条，禁用上拉 |
|
if (data.data.length < 10) { |
|
pullToRefreshObj.endPullUpToRefresh(true); |
|
} else { |
|
pullToRefreshObj.refresh(true); |
|
} |
|
} else if (data.code == 201) { |
|
//未登录，跳转登录页面 |
|
app.openWin(requestUrl.LOGIN.getUrl, requestUrl.LOGIN.getId); |
|
} else if (data.code == 202) { |
|
mui.toast(dataInfo.langue.logInElse); |
|
//未登录，跳转登录页面 |
|
app.openWin(requestUrl.LOGIN.getUrl, requestUrl.LOGIN.getId); |
|
} |
|
} |
|
}); |
|
} |
|
|
|
/** |
|
* 上拉加载事件 |
|
*/ |
|
function pullUpFunction(_self) { |
|
mui.ajax(orderAjax.LIST_USER_ORDER.getUrl, { |
|
headers: { |
|
"X-Requested-Token": app.getTokenStorage(), // token头部 |
|
"locale": app.getLanguageLocalStorage() // 语种头部 |
|
}, |
|
data: { |
|
coinName: dataInfo.coin.coinName, |
|
unitName: dataInfo.coin.unitName, |
|
orderType: dataInfo.order_type, |
|
orderStatus: dataInfo.order_status, |
|
pageNum: pageNum + 1 |
|
}, |
|
dataType: 'json', //服务器返回json格式数据 |
|
type: orderAjax.LIST_USER_ORDER.getType, //HTTP请求类型 |
|
timeout: 10000, |
|
success: function(data) { |
|
if (data.code == "200") { |
|
if (data.data.length > 0) { |
|
//渲染数据 |
|
dataInfo.orders = dataInfo.orders.concat(data.data); |
|
//插入数据，渲染数据 |
|
pageNum += 1; |
|
} |
|
//如果数据小于10条 |
|
if (data.data.length < 10) { |
|
_self.endPullUpToRefresh(true); //关闭上拉，并禁用，显示没有更多数据了 |
|
} else { |
|
_self.endPullUpToRefresh(false); |
|
} |
|
} else if (data.code == 201) { |
|
//未登录，跳转登录页面 |
|
app.openWin(requestUrl.LOGIN.getUrl, requestUrl.LOGIN.getId); |
|
} else if (data.code == 202) { |
|
mui.toast(dataInfo.langue.logInElse); |
|
//未登录，跳转登录页面 |
|
app.openWin(requestUrl.LOGIN.getUrl, requestUrl.LOGIN.getId); |
|
} |
|
}, |
|
error: function(xhr, type, errorThrown) { |
|
_self.endPullUpToRefresh(false); |
|
} |
|
}); |
|
} |
|
</script> |
|
|
|
</html>
|
|
|