WindChat/openzaly-admin/src/main/resources/webapp/views/plugin/add.html

413 lines
14 KiB
HTML
Executable File

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>添加小程序</title>
</title>
<!-- 引入 WeUI -->
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.css"/>
<style>
body, html {
height: 100%;
background-color: #f4f4f4;
-webkit-tap-highlight-color: transparent;
}
.basic-color {
background-color: #1E88E5;
color: #FFFFFF;
}
.basic-weui-btn {
background-color: #1E88E5;
color: #FFFFFF;
}
.basic-weui-btn:hover {
background-color: #1E88E5;
color: #FFFFFF;
}
.basic-weui-btn:active {
background-color: #1E88E5 !important;
color: #FFFFFF;
}
footer {
text-align: center;
font-size: 14px;
padding: 20px;
}
.weui-loadmore_line .weui-loadmore__tips {
background-color: #f4f4f4;
}
footer a {
color: #999;
text-decoration: none;
}
</style>
</head>
<body ontouchstart="">
<div class="weui-cells__title weui-cell">
基本信息
</div>
<div class="weui-cells ">
<div class="weui-cell">
<div class="weui-cell__hd">
<label class="weui-label">名称</label>
</div>
<div class="weui-cell__bd">
<input class="weui-input plugin_name" type="text" placeholder="显示给用户看的名字" style="text-align: right;">
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd">
<label class="weui-label">ApiServer地址</label>
</div>
<div class="weui-cell__bd">
<input class="weui-input plugin_api_url" type="text" pattern="[a-z\/0-9]*"
placeholder="纯网页小程序可以不填" style="text-align: right;">
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd">
<label class="weui-label">落地页URL</label>
</div>
<div class="weui-cell__bd">
<input class="weui-input plugin_url_page" type="text" pattern="[a-z0-9]*" placeholder="纯网页小程序请填写页面完整URL" style="text-align: right;">
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__bd">
<div class="weui-uploader">
<div class="weui-uploader__hd">
<p class="weui-uploader__title">Logo</p>
<div class="weui-uploader__info">0/1</div>
</div>
<div class="weui-uploader__bd">
<ul class="weui-uploader__files" id="uploaderFiles">
</ul>
<div class="weui-uploader__input-box">
<input id="uploaderInput" class="weui-uploader__input uploaderInput" type="file"
accept="image/*" multiple="">
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="weui-cells__title weui-cell">
基本设置
</div>
<div class="weui-cells">
<div class="weui-cell">
<div class="weui-cell__hd">
<label class="weui-label">排序序号</label>
</div>
<div class="weui-cell__bd">
<input class="weui-input order" type="text" pattern="[0-9]*" placeholder="输入序号" style="text-align: right;">
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd">
<label class="weui-label">允许访问的IP</label>
</div>
<div class="weui-cell__bd">
<input class="weui-input allow_ip" type="text" pattern="(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)" placeholder="输入允许访问的IP地址, 用逗号隔开" style="text-align: right;">
</div>
</div>
<a class="weui-cell weui-cell_access position" href="javascript:;">
<div class="weui-cell__bd">
<p>小程序位置</p>
</div>
<div class="weui-cell__ft position-txt">
</div>
</a>
<a class="weui-cell weui-cell_access per_status" href="javascript:;">
<div class="weui-cell__bd">
<p>小程序状态</p>
</div>
<div class="weui-cell__ft per_status-txt">
</div>
</a>
<a class="weui-cell weui-cell_access display_mode" href="javascript:;">
<div class="weui-cell__bd">
<p>展现方式</p>
</div>
<div class="weui-cell__ft display_mode-txt">
</div>
</a>
</div>
<div class="weui-btn-area">
<a class="weui-btn basic-weui-btn weui-btn_primary basic-color addPluginButton" url-data="/plugin/addPlugin"
href="javascript:" id="addPluginButton">确定</a>
</div>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.1.3/weui.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.js"></script>
<script type="text/javascript">
function getOsType() {
var u = navigator.userAgent;
if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
return 'Android';
} else if (u.indexOf('iPhone') > -1) {
return 'IOS';
} else {
return 'PC';
}
}
function reqUrl(reqUri, params, callbackName) {
reqUri = "/akaxin" + reqUri;
var type = getOsType();
if (type == 'Android') {
Android.requestPost(reqUri, params, callbackName);
} else if (type == 'IOS') {
ios_requestPost(reqUri, params, callbackName);
} else {
$.toast('暂时不支持该设备');
}
}
function reqHtml(reqUri, params) {
reqUri = "/akaxin" + reqUri;
var type = getOsType();
if (type == 'Android') {
Android.requestPage(reqUri, params)
} else if (type == 'IOS') {
ios_requestPage(reqUri, params);
} else {
$.toast('暂时不支持该设备');
}
}
function reqImageUpload(callback) {
var type = getOsType();
if (type == 'Android') {
Android.imageUpload(callback);
} else if (type == 'IOS') {
ios_imageUpload(callback);
} else {
$.toast('暂时不支持该设备');
}
}
function reqImageDownload(imageid, callback) {
var type = getOsType();
if (type == 'Android') {
Android.imageDownload(imageid, callback);
} else if (type == 'IOS') {
ios_imageDownload(imageid, callback);
} else {
$.toast('暂时不支持该设备');
}
}
function toast(msg) {
var type = getOsType();
if (type == 'Android') {
Android.showToast(msg);
} else if (type == 'IOS') {
$.toast(msg);
} else {
console.log(msg);
}
}
function isDomain(siteAddress) {
siteAddress=siteAddress.replace(/\s/g,"");
if (siteAddress.indexOf("://") > -1) {
hostname = siteAddress.split('/')[2];
} else {
hostname = siteAddress.split('/')[0];
}
var domain = hostname.split(':')[0];
domain = domain.split('?')[0];
if (domain) {
if (/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(domain)) {
return true;
}
var re2 = /^(?=^.{3,255}$)[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/;
if (re2.test(domain)) {
return true;
}
}
return false;
}
$(document).on("click", '.position', function () {
$.actions({
title: "",
onClose: function () {
console.log("close");
},
actions: [{
text: "首页位置",
className: "color-primary weui-dialog__btn ",
onClick: function () {
$(".position-txt").html("首页位置");
$(".position").attr("data", "0");
}
},
{
text: "聊天界面",
className: "color-warning weui-dialog__btn",
onClick: function () {
$(".position-txt").html("聊天界面");
$(".position").attr("data", "1");
}
}
]
});
});
$(document).on("click", '.per_status', function () {
$.actions({
title: "",
onClose: function () {
console.log("close");
},
actions: [{
text: "仅管理员",
className: "color-primary weui-dialog__btn ",
onClick: function () {
$(".per_status-txt").html("仅管理员");
$(".per_status").attr("data", "0");
}
},
{
text: "全员展示",
className: "color-warning weui-dialog__btn",
onClick: function () {
$(".per_status-txt").html("全员展示");
$(".per_status").attr("data", "1");
}
}
]
});
});
$(document).on("click", '.display_mode', function () {
$.actions({
title: "",
onClose: function () {
console.log("close");
},
actions: [{
text: "新页面展示",
className: "color-primary weui-dialog__btn ",
onClick: function () {
$(".display_mode-txt").html("新页面展示");
$(".display_mode").attr("data", "0");
}
},
{
text: "浮屏(聊天界面专用)",
className: "color-warning weui-dialog__btn",
onClick: function () {
$(".display_mode-txt").html("浮屏(聊天界面专用)");
$(".display_mode").attr("data", "1");
}
}
]
});
});
$(document).on("click", ".addPluginButton", function () {
var reqUri = $(this).attr('url-data');
var apiUrl = $('.plugin_api_url').val();
var urlPage = $('.plugin_url_page').val();
var name = $('.plugin_name').val();
var pluginIcon = $('.plugin_icon').attr('plugin-icon');
var position = $(".position").attr("data");
var order = $(".order").val();
var allowIp = $(".allow_ip").val();
var perStatus = $(".per_status").attr("data");
var displayMode = $(".display_mode").attr("data");
if (name.length < 1) {
$.toptip('名称不能为空', 'error');
return false;
}
if (!position || position.length < 1) {
$.toptip('请选择小程序位置', 'error');
return false;
}
if (!perStatus || perStatus.length < 1) {
$.toptip('请选择状态', 'error');
return false;
}
var params = {
'api_url': apiUrl,
'url_page': urlPage,
'name': name,
'plugin_icon': pluginIcon,
'position': position,
'per_status': perStatus,
'order': order,
'allow_ip': allowIp,
'display_mode':displayMode
};
reqUrl(reqUri, JSON.stringify(params), 'addPlugin');
$('.addPluginButton').removeClass('weui-btn_primary');
$('.addPluginButton').removeClass('basic-color');
$('.addPluginButton').removeClass('basic-weui-btn');
$('.addPluginButton').addClass('weui-btn_disabled');
$('.addPluginButton').addClass('weui-btn_default');
$('.addPluginButton').prop('disabled', true);
});
function addPlugin(result) {
$('.addPluginButton').addClass('weui-btn_primary');
$('.addPluginButton').addClass('basic-color');
$('.addPluginButton').addClass('basic-weui-btn');
$('.addPluginButton').removeClass('weui-btn_disabled');
$('.addPluginButton').removeClass('weui-btn_default');
$('.addPluginButton').prop('disabled', false);
if (result == 'success') {
$('input').val('');
$('#uploaderFiles').html('');
$.toast('添加成功');
} else {
$.toast('添加失败', 'forbidden');
}
}
$(document).on("click", '.uploaderInput', function () {
reqImageUpload("jsimageUpload");
});
function jsimageUpload(result, imageId, imageLocalPath) {
var type = getOsType();
if (result == 1) {
if (type == 'Android') {
var img = '<li class="weui-uploader__file plugin_icon" plugin-icon="' + imageId + '"><img src="http://akaxin/img' + imageLocalPath + '" style="height:75px; width:75px;" /></li>';
} else {
var img = '<li class="weui-uploader__file plugin_icon" plugin-icon="' + imageId + '"><img src="' + imageLocalPath + '" style="height:75px; width:75px;" /></li>';
}
$('#uploaderFiles').html(img);
$('.weui-uploader__info').html('1/1');
} else {
$.toast('上传图片失败', 'forbidden');
}
}
</script>
</body>
</html>