63 lines
2.5 KiB
HTML
63 lines
2.5 KiB
HTML
<div class="uc-wrap">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">我的道具</div>
|
|
<div class="layui-card-body" pad15>
|
|
<div class="myprop-list" id="mypropList">
|
|
<div class="myprop-empty" id="mypropEmpty" style="display:none;color:#999;padding:20px 0;text-align:center;">你还没有领取任何道具，去任务中心看看吧</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
layui.use(['http', 'layer', 'jquery'], function () {
|
|
var http = layui.http, layer = layui.layer, $ = layui.jquery;
|
|
|
|
function render(list) {
|
|
var box = $('#mypropList'), html = '';
|
|
if (!list || !list.length) {
|
|
$('#mypropEmpty').show();
|
|
return;
|
|
}
|
|
$('#mypropEmpty').hide();
|
|
list.forEach(function (p) {
|
|
var icon = p.icon
|
|
? '<img src="' + p.icon + '" class="myprop-icon" alt="' + (p.title || '') + '">'
|
|
: '<span class="myprop-icon myprop-icon-default">道具</span>';
|
|
html += ''
|
|
+ '<div class="myprop-item">'
|
|
+ '<div class="myprop-icon-box">' + icon + '</div>'
|
|
+ '<div class="myprop-info">'
|
|
+ '<div class="myprop-title">' + (p.title || '道具#' + p.prop_id) + '</div>'
|
|
+ '<div class="myprop-time">获得于 ' + (p.create_at ? new Date(p.create_at * 1000).toLocaleString() : '-') + '</div>'
|
|
+ '</div>'
|
|
+ '<div class="myprop-num">x' + (p.num || 1) + '</div>'
|
|
+ '</div>';
|
|
});
|
|
box.html(html);
|
|
}
|
|
|
|
http.get('myPropList').then(function (res) {
|
|
if (res.code === 0) {
|
|
render(res.data || []);
|
|
} else {
|
|
layer.msg(res.message || '加载失败', { icon: 2 });
|
|
}
|
|
}).catch(function () {
|
|
layer.msg('加载失败', { icon: 2 });
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.myprop-item { display:flex; align-items:center; padding:12px 4px; border-bottom:1px solid #f0f0f0; }
|
|
.myprop-item:last-child { border-bottom:none; }
|
|
.myprop-icon-box { width:48px; height:48px; margin-right:14px; flex-shrink:0; }
|
|
.myprop-icon { width:48px; height:48px; border-radius:8px; object-fit:cover; display:block; }
|
|
.myprop-icon-default { width:48px; height:48px; line-height:48px; text-align:center; background:#f0f4ff; color:#1e6fff; border-radius:8px; font-size:12px; }
|
|
.myprop-info { flex:1; }
|
|
.myprop-title { font-size:15px; font-weight:600; color:#333; }
|
|
.myprop-time { font-size:12px; color:#999; margin-top:4px; }
|
|
.myprop-num { color:#ff8c00; font-weight:600; font-size:15px; }
|
|
</style>
|