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.
V3D-nodejs/views/home.html

180 lines
7.5 KiB

6 years ago
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>3D MODELS SYSTEM - HOME</title>
6 years ago
<!-- jquery -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<!-- ZUI -->
6 years ago
<link rel="stylesheet" href="https://cdn.bootcss.com/zui/1.8.1/css/zui.min.css">
<script src="https://cdn.bootcss.com/zui/1.8.1/js/zui.min.js"></script>
<style>
html,
body {
height: 100%;
width: 100%;
}
6 years ago
#container {
position: absolute;
height: 100%;
width: 100%;
}
6 years ago
#output {
position: absolute;
6 years ago
width: 100%;
height: 100%;
}
</style>
6 years ago
</head>
6 years ago
<body background='/img/webbg.jpg'>
<div class="container">
<nav class="navbar navbar-inverse" role="navigation" style="margin-top:10px">
6 years ago
<div class="container-fluid">
<!-- 导航头部 -->
<a class="navbar-brand" href="">3D MODELS SYSTEM</a>
<!-- 导航项目 -->
<div class="collapse navbar-collapse navbar-collapse-example">
<!-- 右侧的导航项目 -->
<ul class="nav navbar-nav navbar-right">
<li><a href="/create"><i class="icon icon-plus"></i> 添加新方案</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown"><b id='name'>xxx</b>
<b class="caret"></b></a>
6 years ago
<ul class="dropdown-menu" role="menu">
6 years ago
<li><a href="#">用户信息管理</a></li>
6 years ago
<li class="divider"></li>
<li><a href="/logout">注销</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div id='schemeList'>
6 years ago
</div>
6 years ago
<!-- 模态框:方案分享 -->
<div class="modal fade" id="shareSchemeModal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
class="sr-only">关闭</span></button>
<h4 class="modal-title">分享</h4>
</div>
<div class="modal-body">
<label>访问密码:</label><input class="form-control" type="password" id="sharePassword" />
<div class="switch text-left">
<input type="checkbox" id="needPassword">
<label>密码访问</label>
</div>
<hr />
<label>开启链接:</label><input class="form-control" type="text" value="xxx" readonly="true" id="shareLink" />
<div class="switch text-left">
<input type="checkbox" id="isShared">
<label>开启分享</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="changeShareConfig">确定</button>
<button type="button" class="btn btn-default" data-dismiss="modal" style="margin-left: 10px">取消</button>
</div>
</div>
</div>
</div>
6 years ago
</div>
6 years ago
<script>
6 years ago
var data;
$().ready(function () {
initPage();
});
//初始化页面
function initPage() {
6 years ago
$.post('/home', function (replyData) {
data = replyData;
//console.info(data);
$('#name').text(data.user.name);
// <div class="col-md-4 col-sm-6 col-lg-3">
6 years ago
// <div class="card">
// <a href="###">
// <img src="" alt="xxx">
// <div class="card-heading"><strong>xxx</strong></div>
6 years ago
// </a>
// <div class="card-actions">
// <div class="pull-right"> <button type="button" class="btn btn-primary"><i class="icon-heart"></i>
// 分享</button></div>
// </div>
6 years ago
// </div >
// </div >
for (index in data.schemeList) {
var href = '/create/' + data.schemeList[index].id;
var name = data.schemeList[index].name;
var img = data.schemeList[index].img;
var id = data.schemeList[index].id;
6 years ago
$('#schemeList').append("<div class='col-md-4 col-sm-6 col-lg-3'><div class='card'><a href='" + href + "'><div class='media-wrapper'><img style='width:100%' src='" + img + "' alt='" + name + "'></div><div class='card-heading'><strong>" + name + "</strong></div></a><div class='card-actions'><div class='pull-right'> <button type='button' class='btn btn-primary' onclick='share(" + index + ")'><i class='icon-heart'></i> 分享</button></div></div></div></div>");
}
});
}
6 years ago
//分享
function share(index) {
$('#shareSchemeModal').modal('show');
$('#shareLink').val(data.shareLink + "/" + data.schemeList[index].id);
if (data.schemeList[index].share_password) {
$('#sharePassword').val(data.schemeList[index].share_password);
}
switch (data.schemeList[index].share_state) {
case 0:
//不共享
$('#needPassword').attr("checked", false);
$('#isShared').attr("checked", false);
break;
case 1:
//共享
$('#needPassword').attr("checked", false);
$('#isShared').attr("checked", true);
break;
case 2:
//需要密码
$('#needPassword').attr("checked", true);
$('#isShared').attr("checked", true);
break;
}
6 years ago
$('#changeShareConfig').click(function () {
var needPassword = $('#needPassword').is(":checked")
var isShared = $('#isShared').is(":checked")
var share_password = $('#sharePassword').val();
var share_state = 0;
if (isShared)
share_state = 1;
if (needPassword && share_state)
share_state = 2;
var sendData = {
id: data.schemeList[index].id,
share_password: share_password,
share_state: share_state
}
$.post('/changeShareConfig', sendData, function (reply) {
if (reply.affectedRows) {
data.schemeList[index].share_password = share_password;
data.schemeList[index].share_state = share_state;
$('#shareSchemeModal').modal('hide');
}
});
});
6 years ago
}
6 years ago
</script>
6 years ago
</body>
</html>