目录结构
config.xml
<?xml version="1.0" encoding="UTF-8"?>
<config scope="client" clientversion="4" devicetype="all" theme="skin-cyan">
<appid>activity_manger</appid>
<appname>活动管理</appname>
<description></description>
<version>1.1.0</version>
<date>2018-07-03</date>
<homepage src="res:page/login.uixml"/>
<faultconfig src=""/>
<access network="true" gps="true" camera="true" certificate="true" land="false" orientation="port"/>
<vendor email="" url=""/>
<icon main="res:image/main.png" logo="res:image/logo.png"/>
</config>
login.uixml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.nj.fiberhome.com.cn/exmobi.dtd">
<html>
<head>
<title show="false"/>
<style type="text/css">
input[type=text]{
background-color:transparent;
border-size:0;
border-radius:4;
margin:3 0;
height:50;
padding:0 4;
color:#525252;
}
input[type=password]{
background-color:transparent;
border-size:0;
border-radius:4;
margin:3 0;
height:50;
padding:0 4;
color:#525252;
}
font{
color:#8f8f8f;
}
switch{
overlay:none;
border-radius: 16;
align:right;
}
input[type="button"]{
width:100%;
margin:4 0 4 0;
height:45;
font-size:20dp;
border-radius:4;
}
.card{
border-radius:4;border-size: 1;border-color: #d9d9d9;background-color: white;
}
</style>
<script type="text/javascript" src="res:script/exmobi_lite/core.js"></script>
<script type="text/javascript">
<![CDATA[
function init(){
//记住密码逻辑操作
var login_id = document.cache.getCache("ac_uid");
$("#login_id").val(login_id);
var login_pwd = document.cache.getCache("ac_pwd");
var rem_pwd = document.cache.getCache("ac_rem");
if(rem_pwd == "1"){
$("#rem_pwd").attr("checked",true);
$("#login_pwd").val(login_pwd);
}else{
$("#rem_pwd").attr("checked",false);
}
}
function dologin(){
var login_id = $("#login_id").val();
var login_pwd = $("#login_pwd").val();
if(login_id == ""){
$.showToast("请输入用户名");
return;
}
if(login_pwd == ""){
$.showToast("请输入密码");
return;
}
$.server({
url:'http://demo/checklogin',
type:'post',
dataType:'json',
data:'login_id='+login_id+'&login_pwd='+login_pwd,
success:function(data){
if(data.result == "success"){
var user_info =EncryptionUtil.base64Encode(ClientUtil.jsonToString(data.user_info));
document.cache.setCache("ac_uid",login_id);
if($("#rem_pwd").attr("checked")){
document.cache.setCache("ac_pwd",login_pwd);
document.cache.setCache("ac_rem","1");
}else{
document.cache.remove("ac_pwd");
document.cache.setCache("ac_rem","0");
}
window.setStringSession("user_info",user_info);
window.open("res:page/index.uixml");
}else{
$.showToast(data.msg);
}
},
error:function(data){
$.showToast("请求失败,请检测网络");
},
isBlock:true
});
}
]]>
</script>
</head>
<body style="background-color:#f4f4f4;padding:0 10;" onload="init();">
<br size="40"/>
<img src="res:image/login3/logo.png" href="script:close" style="width:40%;align:center;"/>
<br size="40"/>
<div class="card">
<input type="text" prompt="请输入用户名" id="login_id" licon="res:image/login3/user.png"/>
<hr/>
<input type="password" prompt="请输入密码" id="login_pwd" licon="res:image/login3/pwd.png"/>
</div>
<br size="5"/>
<font>记住密码</font>
<switch id="rem_pwd" ontext="" offtext="" value="1" checked="true"></switch>
<br size="5"/>
<input type="button" value="登录" onclick="dologin();"/>
</body>
</html>
index.uixml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.nj.fiberhome.com.cn/exmobi.dtd">
<html style="background-image:url(res:image/main13/bg.png)">
<head>
<title show="false"/>
<link rel="stylesheet" type="text/css" href="res:css/global.css" />
<style type="text/css">
.case{
width:250;height:150;font-size:24;color:white;text-align:center;text-valign:middle;
margin:10 0 10 0;
}
.icon{
width:60;
}
</style>
<script type="text/javascript" src="res:script/exmobi_lite/core.js"></script>
<script type="text/javascript">
<![CDATA[
]]>
</script>
</head>
<header>
<titlebar title="活动管理" iconhref="script:close" hidericon="true"/>
</header>
<body style="text-align:center;text-valign:middle;background-color:transparent;">
<div class="case" href="script:popmenu(usermenu);" style="background-image:url(res:image/main13/greencase.png);background-click-image:url(res:image/main13/greencase_click.png)">
<img src="res:image/main13/myfault.png" class="icon"/>
<font style="margin:0 24 0 12">用户管理</font>
</div>
<div class="case" href="script:popmenu(activitymenu);" style="background-image:url(res:image/main13/bluecase.png);background-click-image:url(res:image/main13/bluecase_click.png)">
<img src="res:image/main13/writefault.png" class="icon"/>
<font style="margin:0 24 0 12">活动管理</font>
</div>
<contextmenu id="usermenu" layout="vertical" showtype="normal" optiontype="text" title="用户管理" shownumber="4">
<option caption="个人信息" onclick="res:page/userdetail.uixml?type=modify"></option>
<option caption="新增用户" onclick="res:page/userdetail.uixml?type=add"></option>
</contextmenu>
<contextmenu id="activitymenu" layout="vertical" showtype="normal" optiontype="text" title="用户管理" shownumber="4">
<option caption="活动列表" onclick="res:page/activity_list.uixml"></option>
<option caption="新增活动" onclick="res:page/add_activity.uixml"></option>
</contextmenu>
</body>
</html>
userdetail.uixml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.nj.fiberhome.com.cn/exmobi.dtd">
<html>
<head>
<title show="false"/>
<link rel="stylesheet" type="text/css" href="res:css/global.css"/>
<link rel="stylesheet" type="text/css" href="res:css/control.css"/>
<script type="text/javascript" src="res:script/exmobi_lite/core.js"></script>
<style type="text/css">
.label-left{
color:#333333;
width:30%;
font-size:20;
}
.label-right{
width:70%;
border-size:0;
}
.necessary-border{
border-color:red;
}
</style>
<script type="text/javascript">
<![CDATA[
var opt = window.getParameter("type");
function formsuc(data){
var rspJson = ClientUtil.stringToJson(data.responseText);
if(opt == "modify"){//个人信息修改页面,提交成功后更新session中的用户信息
var user_info =EncryptionUtil.base64Encode(ClientUtil.jsonToString(rspJson.currentUser));
window.setStringSession("user_info",user_info);
close();
}else{//新增用户页面,提交成功后直接关闭当前页面
close();
}
$.showToast(rspJson.msg);
}
function formfail(data){
$.showToast("请求失败,请检测网络");
}
function dosubform(){
$("#subform")[0].submit();
}
//个人信息回填页面
function setUserInfo(user_info){
for(x in user_info){//循环用户信息并回填至页面
if( x != "sex"){
$("#"+x).val(user_info[x]);
}
}
if(user_info.sex == "1"){
$("#male").attr("checked",true);
$("#female").attr("checked",false);
}else{
$("#male").attr("checked",false);
$("#female").attr("checked",true);
}
$("#login_id").attr("readonly",true);
}
function init(){
if(opt == "modify"){//个人信息页面,从session中取出个人信息,并回填页面
$("#title").attr("title","个人信息");
var user_info =ClientUtil.stringToJson(EncryptionUtil.base64Decode(window.getStringSession("user_info")));
setUserInfo(user_info);//回填个人信息函数
}else{
$("#title").attr("title","新增用户");
}
}
//新增用户时,检测帐号是否
function ifreat(){
$.server({
url:'http://checkrepeatloginid',
type:'post',
dataType:'json',
data:'login_id='+$("#login_id").val(),
success:function(data){
if(data.repeat == "1"){
$.showToast("该账号已存在!");
}
},
error:function(data){
$.showToast("请求失败,请检测网络");
}
});
}
]]>
</script>
</head>
<header>
<titlebar title="人员详情" id="title" iconhref="script:close" riconhref="dosubform();" ricon="res:image/titlebar/ok.png" clickricon="res:image/titlebar/ok_click.png"/>
</header>
<body style="padding: 4 8" onload="init();">
<form id="subform" method="post" action="http://submituser" success="formsuc" fail="formfail">
<input type="hidden" id="user_uuid" value="" name="user_uuid"></input>
<font class="label-left" >登陆账号:</font>
<input class="label-right" onchange="ifreat();" type="text" id="login_id" name="login_id" validate="required" validatemsg="请输入登陆账号" prompt="必填"/>
<hr/>
<font class="label-left" >登陆密码:</font>
<input class="label-right" type="text" id="login_pwd" name="login_pwd" validate="required" validatemsg="请输入登陆密码" prompt="必填"/>
<hr/>
<font class="label-left">性别:</font>
<input type="radio" value="1" id="male" caption="男" name="sex" checked="true"/>
<input type="radio" value="2" id="female" caption="女" name="sex"/>
<hr/>
<font class="label-left">姓名:</font>
<input class="label-right" type="text" id="user_name" name="user_name" validate="required" validatemsg="请输入姓名" prompt="必填"/>
<hr/>
<font class="label-left">手机号:</font>
<input class="label-right" inputlimit="digit" siptype="num" type="text" id="tel_no" name="tel_no"/>
<hr/>
<font class="label-left">身份证号:</font>
<input class="label-right" inputlimit="digit" siptype="num" maxlength="18" type="text" id="identify_id" name="identify_id"/>
<hr/>
<textarea rows="3" prompt="备注信息" name="remark" id="remark"></textarea>
</form>
</body>
</html>
activity_list.uixml
<html id="actlist">
<head>
<meta content="charset=utf-8"/>
<title show="false">活动列表</title>
<script type="text/javascript" src="res:script/exmobi_lite/core.js"></script>
<script type="text/javascript" src="res:script/exmobi_lite/template-native-exmobi.js"></script>
<script>
<![CDATA[
function codeActJson(actJson){
return EncryptionUtil.base64Encode(ClientUtil.jsonToString(actJson));
}
function actInfoClick(actInfoStr){
window.setStringSession("actInfo",actInfoStr);
window.open("res:page/act_detail.uixml");
}
template.helper("codeActJson",codeActJson);
template.helper("actInfoClick",actInfoClick);
function getActList(){
$.server({
url:'http://activity_list.jsp',
type:'post',
dataType:'json',
data:'actTitle='+$("#actTitle").val+"&actStatus="+$("#actStatus").val(),
success:function(data){
if(data.acts.length >0){
$.renderReplace('#actarea', 'res:page/act_list.template', data, function(h, t, o){
//h:注入后生成的html代码,t:模板,o:data
});
}else{
$.showToast("未查询到活动");
}
},
error:function(data){
$.showToast("请求失败,请检测网络");
},
isBlock:true
});
}
]]>
</script>
<style type="text/css">
hr{
border-size:1apx;
border-color:#D0CDC8;
}
select{
border-size:0;
background-color:#F1F0EF;
}
.titlebar{
rcolor:white;
}
listitem{
iconwidth:60;
iconheight:45;
}
</style>
</head>
<header style="background-color: #F1F0EF">
<titlebar title="活动列表" class="titlebar" id="title" iconhref="script:close" rcaption="查询" riconhref="getActList();"/>
<input type="text" style="border-size:0;width:100%;background-color: #F1F0EF;prompt-color: black" id="actTitile" prompt="活动标题"></input>
<hr/>
<select id="actStatus">
<option>请选择活动状态</option>
<option value="1">报名中</option>
<option value="2">报名截止</option>
<option value="3">进行中</option>
<option value="4">已结束</option>
</select>
</header>
<body style="padding: 4 0" id="actarea" onload="getActList();">
</body>
</html>
act_detail.uixml
<html>
<head>
<meta content="charset=utf-8"/>
<title show="false">活动详情</title>
<script type="text/javascript" src="res:script/exmobi_lite/core.js"></script>
<script>
<![CDATA[
var actInfo;
function init(){
actInfo = ClientUtil.stringToJson(EncryptionUtil.base64Decode(window.getStringSession("actInfo")));
$("#act_uuid").val(actInfo.activity_uuid);
$("#actStatus").val(actInfo.actStatus);
window.beignPreferenceChange();/*开始批量刷新*/
$("#poster").attr("src","http://getimg.jsp?img_uuid="+actInfo.poster_img_uuid);
$("#poster").attr("href","http://getimg.jsp?img_uuid="+actInfo.poster_img_uuid);
$("#activity_title").html(actInfo.activity_title);
$("#activity_content").html(actInfo.activity_content);
if(actInfo.activity_imgs != ""){
var scrollObj = document.getElementById("scroll");
var imgIdArray = actInfo.activity_imgs.split(",");
var scrollData = new Array();
for(i=0;i<imgIdArray.length;i++){
var scrollJson = {};
scrollJson.src = "http://getimg.jsp?img_uuid="+imgIdArray[i];
scrollJson.href = "openfile:http://getimg.jsp?img_uuid="+imgIdArray[i];
scrollData.push(scrollJson);
}
scrollObj.loadData(scrollData);
$("#imgDiv").show();
}
$("#begin_time").html(actInfo.begin_time);
$("#end_time").html(actInfo.end_time);
$("#address").html(actInfo.address);
$("#deadline_time").html(actInfo.deadline_time);
$("#contact_tel").html(actInfo.contact_tel);
$("#contact_tel").attr("href","tel:"+actInfo.contact_tel);
var pl = actInfo.person_limit == "0"?"不限制":actInfo.person_limit;
$("#plimit").val(actInfo.person_limit);
$("#person_limit").html(pl);
$("#join_count").html(actInfo.join_count);
if(actInfo.necessary != ""){
var neceArray = actInfo.necessary.split(",");
var neceDict = {tel_no:"手机号",identify_id:"身份证","sex":"性别","remark":"备注"};
var innerBtn = '';
for(i=0;i<neceArray.length;i++){
var btnValue = "";
for(var x in neceDict){
if(x == neceArray[i]){
btnValue = neceDict[x];
break;
}
}
innerBtn += '<input type="button" value="button" value="'+btnValue+'" class="necessary-btn"></input>';
}
$("#needArea").html(innerBtn);
}
window.endPreferenceChange();/*结束批量刷新*/
}
function doSignup(){
var user_info =ClientUtil.stringToJson(EncryptionUtil.base64Decode(window.getStringSession("user_info")));
if($("#actStatus").val() != "报名中"){
$.showToast("活动"+$("#actStatus").val()+",不能报名");
return;
}
if($("#plimit").val() != "0"){
var limitCount = Number($("#plimit").val());
var joinCount = Number($("#join_count").html());
if(joinCount >= limitCount){
$.showToast("报名人数已满,不能报名");
return;
}
}
if(actInfo.necessary != ""){
var neceArray = actInfo.necessary.split(",");
for(i=0;i<neceArray.length;i++){
for(var x in user_info){
if(x == neceArray[i] && user_info[x] == ""){
$.confirm("您有用户报名必填项未填写,是否跳转至个人信息页面修改?",function(){window.open("res:page/userdetail.uixml?type=modify");},function(){return;});
return;
}
}
}
}
$.server({
url:'http://signup_act.jsp',
type:'post',
data:'act_uuid='+$("#act_uuid").val()+"&user_uuid="+user_info.user_uuid,
dataType:'json',
success:function(data){
$.showToast(data.msg);
if(data.result == "success"){
var listWin = PageUtil.getWindowById("actlist");
listWin.callFunction("getActList");
close();
}
},
error:function(data){
$.showToast("请求失败,请检测网络");
},
isBlock:true
});
}
]]>
</script>
<style type="text/css">
.cdiv{
background-color:white;
border-top-size:1apx;
border-bottom-size:1apx;
border-color:#D5D2CD;
margin:5 0;
}
.tipdiv{
padding: 10 2;
border-bottom-size:1apx;
border-color:#D5D2CD;
}
.blockicon{
width:20;
}
.textfont{
margin:10;
}
.lfont{
color:#323333;
width:30%;
margin:10 0 10 10;
}
.rlabel{
width:70%;
margin:10 0;
}
.necessary-btn{
border-radius:10;
width:20%;
}
</style>
</head>
<header>
<titlebar title="活动详情" style="rcolor: white" id="title" iconhref="script:close" riconhref="doSignup();" rcaption="报名"/>
</header>
<body style="padding: 4 0;background-color: #F1F0EF" onload="init();">
<input type="hidden" value="" id="act_uuid"></input>
<input type="hidden" value="" id="actStatus"></input>
<input type="hidden" value="" id="plimit"></input>
<div class="cdiv" style="padding: 4;height:100">
<img id="poster" style="width: 100%;" src="" href="" urltype="openfile" cached="true"></img>
</div>
<div class="cdiv">
<div class="tipdiv">
<img class="blockicon" src="res:image/block.png" ></img>
<efont class="tipcolor">活动标题<subfont style="color: red"> *</subfont></efont>
</div>
<font class="textfont" id="activity_title"></font>
</div>
<div class="cdiv">
<div class="tipdiv">
<img class="blockicon" src="res:image/block.png" ></img>
<efont class="tipcolor">活动详情<subfont style="color: red"> *</subfont></efont>
</div>
<font class="textfont" id="activity_content"></font>
<br/>
<div id="imgDiv" style="display: none;text-align: center">
<scrollpicture id="scroll" style="width:80%;height:145" interval="true"/>
</div>
</div>
<div class="cdiv">
<font class="lfont">开始时间</font>
<font id="begin_time" class="rlabel"></font>
<hr/>
<font class="lfont">结束时间</font>
<font id="end_time" class="rlabel"></font>
<hr/>
<font class="lfont">活动地址</font>
<font id="address" class="rlabel"></font>
<hr/>
</div>
<div class="cdiv">
<font class="lfont">报名截止</font>
<font id="deadline_time" class="rlabel"></font>
<hr/>
<font class="lfont">活动咨询</font>
<a id="contact_tel" class="rlabel"></a>
<hr/>
<font class="lfont">人数限制</font>
<font id="person_limit" class="rlabel"></font>
<hr/>
<font class="lfont">已报名人数</font>
<font id="join_count" class="rlabel"></font>
<hr/>
<efont class="lfont" style="width: 100%;margin: 15 0 0 10;">用户报名必填项</efont>
<br/>
<div style="padding: 10 0 10 10;" id="needArea">
</div>
</div>
</body>
</html>