Skip to content

H
h5_activity
Commit ed7087b7 by 胡畅
Options

fix dialog

parent 6d0a65ef
Showing with 159 additions and 175 deletions
showPhotos/css/dialog.css 0 → 100755
.dialog-wrap { position: fixed; left: 0; top: 0; z-index: 100001; width: 100%; height: 100%; }
.dialog-overlay { position: absolute; top: 0; left: 0; z-index: 100002; width: 100%; height: 100%; background: #000; opacity: 0; filter: alpha(opacity=0); -webkit-transition: all ease-in-out 0.15s; transition: all ease-in-out 0.15s; }
.dialog-content {
position: absolute; top: 50%; left: 50%; z-index: 100003; width: 85%; background-color: #FAFAFC; text-align: center; border-radius: 5px; opacity: 0; filter: alpha(opacity=0);
-webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); -webkit-transition: all ease-in-out 0.15s; transition:all ease-in-out 0.15s;
}
.dialog-content-animate { -webkit-transform: translate3d(-50%, -50%, 0) scale3d(0.9, 0.9, 0.9); transform: translate3d(-50%, -50%, 0) scale3d(0.9, 0.9, 0.9); }
.dialog-content-hd { padding: 15px 0 0; margin-bottom: -5px; }
.dialog-content-title { margin: 0; padding: 0; font-weight: 400; font-size: 17px; line-height: 1.2; }
.dialog-content-bd { padding: 0 15px 0; margin-top: 15px; font-size: 15px; color: #666; word-wrap: break-word; word-break: break-all; text-align: left; -webkit-overflow-scrolling: touch; }
.dialog-content-bd p { margin: 5px 0; }
.dialog-content-ft {
position: relative; margin-top: 15px; overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
}
.dialog-content-ft .dialog-btn {
margin: 0; padding: 0; text-decoration: none; outline: none; border: none; -webkit-appearance: none; background-color: transparent;
position: relative; display: block; color: #0079ff; line-height: 43px; font-size: 16px; font-weight: 400;
-webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none;
}
.dialog-content-ft .dialog-btn:hover, .dialog-content-ft .dialog-btn:active { background-color: #eee; }
.dialog-content-ft:after {
content: " "; position: absolute; left: 0; top: 0; width: 100%; height: 1px; border-top: 1px solid #D5D5D6; color: #D5D5D6;
-webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5);
}
.dialog-content-ft .dialog-btn:after {
content: " "; position: absolute; left: 0; top: 0; width: 1px; height: 100%; border-left: 1px solid #D5D5D6; color: #D5D5D6;
-webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleX(0.5); transform: scaleX(0.5);
}
.dialog-content-ft .dialog-btn:first-child { border-bottom-left-radius: 5px; }
.dialog-content-ft .dialog-btn:last-child { border-bottom-right-radius: 5px; }
.dialog-content-ft .dialog-btn:first-child:after { border-left: none; }
.dialog-content-ft .dialog-btn-cancel { color: #0079ff; }
.dialog-content-ft .dialog-btn-ok { color: #0079ff; }
.dialog-wrap-info .dialog-overlay { background-color: transparent; opacity: 0; filter: alpha(opacity=0); }
.dialog-content-info { width: auto; text-align: center; background-color: rgba(0, 0, 0, 0.8); border-radius: 10px; }
.dialog-content-info .dialog-content-bd { padding: 0; margin: 0; position: relative; width: 140px; height: 140px; color: #fff; text-align: center; }
.dialog-content-info .dialog-content-bd .info-icon { max-width: 48px; margin: 20% 0 0; }
.dialog-content-info .dialog-content-bd .info-text { position: absolute; width: 100%; left: 0; bottom: 20px; margin: 0; font-size: 16px; white-space:nowarp; }
.dialog-wrap-tips .dialog-overlay { background-color: transparent; opacity: 0; filter: alpha(opacity=0); }
.dialog-content-tips { width: auto; text-align: center; background-color: rgba(0, 0, 0, 0.9); border-radius: 5px; }
.dialog-content-tips .dialog-content-bd { padding: 10px 16px; margin: 0; position: relative; color: #fff; text-align: center; line-height: 1.2; font-size: 14px; }
.dialog-content-tips .dialog-content-bd .info-icon { max-width: 16px; margin-right: 7px; vertical-align: middle; }
.dialog-content-tips .dialog-content-bd .info-text { position: relative; top: 1px; white-space:nowarp; }
.dialog-wrap-show .dialog-overlay { opacity:0.6; filter:alpha(opacity=60); }
.dialog-wrap-show .dialog-content { opacity:1; filter:alpha(opacity=100); }
.dialog-wrap-show .dialog-content-animate { -webkit-transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1); transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1); }
@media screen and (min-width: 1024px) {
.dialog-content { max-width: 45%; }
}
\ No newline at end of file
showPhotos/css/toast.css deleted 100644 → 0
.cpt-toast {
position: fixed;
left: 50%;
top: 50%;
text-align: center;
animation-duration: 0.3s;
max-width: 300px;
line-height: 20px;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
transform: translate(-50%, -50%);
transform: translate3d(-50%, -50%, 0);
font-family: '微软雅黑','Microsoft Yahei';
-moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
word-wrap: break-word;
}
.global-block {
display: block;
}
.global-none {
display: none;
}
\ No newline at end of file
showPhotos/js/page/signup.js
......@@ -2,6 +2,7 @@
var pageNumber = "1";
var activityCode = rules.acActivity.code
var baseUrl = "https://space-api.check.icaremgt.com";
var manageUrl = "http://api-admin-manage.check.icaremgt.com"
// 微信鉴权
wxpermission();
......@@ -89,6 +90,7 @@ function btnBindClick() {
$('#html-template-8').addClass('global-none')
});
var uploadFile = ''
// 上传图片
$("#uploadImage").on('change', function () {
var formData = new FormData()
......@@ -96,16 +98,24 @@ function btnBindClick() {
selectFileImage(this)
$.ajax({
type: 'POST',
url: 'http://api-admin-manage.check.icaremgt.com/system/components/upload',
headers: { 'x-token': getToken() },
url: manageUrl + '/system/components/upload',
headers: { 'x-token': 'admin.725.eb96823d6eba412fbec37f3a259801b2' },
data: formData,
contentType: false,
processData: false,
success: function (data) {
$("#act31419345204861").removeClass('global-none')
var data = typeof data == 'string' ? JSON.parse(data) : data
if(data.code == 200){
uploadFile = data.records.fileUrl
$("#act31419345204861").removeClass('global-none')
}
},
error: function () {
showMessage('上传失败！', 3000, true);
$.dialog({
type : 'tips',
autoClose : 3000,
infoText : '上传失败！'
});
}
})
})
......@@ -116,7 +126,7 @@ function btnBindClick() {
var phonenum = $('#act11739141518360')
var introDuce = $('#act11739381874636')
var signInput = $('.sign-form .form-input-group input[c_validate="idcard"]')
var addInput = data.dataJson.addGroup
var addInput = JSON.parse(data.dataJson).addGroup
var uploadImg = $('#act31419345204861 img')
// 验证用户名
......@@ -124,10 +134,18 @@ function btnBindClick() {
var userNameVal = userName.val()
var userNameLen = userName.attr('c_len')
if (userNameVal == '') {
showMessage('请输入参与者姓名', 3000, true);
$.dialog({
type : 'tips',
autoClose : 3000,
infoText : '请输入参与者姓名'
});
return false
} else if (userNameVal.length > userNameLen) {
showMessage('参与者姓名不能超过' + userNameLen + '个字', 3000, true);
$.dialog({
type : 'tips',
autoClose : 3000,
infoText : '参与者姓名不能超过' + userNameLen + '个字'
});
return false
}
}
......@@ -137,13 +155,25 @@ function btnBindClick() {
var phonenumVal = phonenum.val()
var phonenumLen = phonenum.attr('c_len')
if (phonenumVal == '') {
showMessage('请输入参与者手机号码', 3000, true);
$.dialog({
type : 'tips',
autoClose : 3000,
infoText : '请输入参与者手机号码'
});
return false
} else if (phonenumVal.length > phonenumLen) {
showMessage('参与者手机号码不能超过' + phonenumLen + '个字', 3000, true);
$.dialog({
type : 'tips',
autoClose : 3000,
infoText : '参与者手机号码不能超过' + phonenumLen + '个字'
});
return false
} else if (!reg.test(phonenumVal)) {
showMessage('请输入正确的参与者手机号码', 3000, true);
$.dialog({
type : 'tips',
autoClose : 3000,
infoText : '请输入正确的参与者手机号码'
});
return false
}
}
......@@ -153,10 +183,18 @@ function btnBindClick() {
var introDuceLen = introDuce.attr('c_len')
var introDuceName = introDuce.attr('c_name')
if (introDuceVal == '') {
showMessage('请输入' + introDuceName, 3000, true);
$.dialog({
type : 'tips',
autoClose : 3000,
infoText : '请输入' + introDuceName
});
return false
} else if (introDuceVal.length > introDuceLen) {
showMessage(introDuceName + '不能超过' + introDuceLen + '个字', 3000, true);
$.dialog({
type : 'tips',
autoClose : 3000,
infoText : introDuceName + '不能超过' + introDuceLen + '个字'
});
return false
}
}
......@@ -166,26 +204,43 @@ function btnBindClick() {
var signInputName = signInput.attr('c_name')
var signInputLen = signInput.attr('c_len')
if (signInputVal == '') {
showMessage('请输入' + signInputName, 3000, true);
$.dialog({
type : 'tips',
autoClose : 3000,
infoText : '请输入' + signInputName
});
return false
} else if (signInputVal.length > signInputLen) {
showMessage(signInputName + '不能超过' + signInputLen + '个字', 3000, true);
$.dialog({
type : 'tips',
autoClose : 3000,
infoText : signInputName + '不能超过' + signInputLen + '个字'
});
return false
} else if (!validateIDNumber(signInputVal)) {
showMessage('请输入正确的' + signInputName, 3000, true);
$.dialog({
type : 'tips',
autoClose : 3000,
infoText : '请输入正确的' + signInputName
});
return false
}
}
// 验证上传图片
if (uploadImg.attr('src') == '') {
showMessage('请上传一张照片', 3000, true);
$.dialog({
type : 'tips',
autoClose : 3000,
infoText : '请上传一张照片'
});
return false
}
var signupId = getQueryString('id')
var orgId = orgIdFn(signupId).orgId
var params = {
kgAcActivityOrgId: getQueryString('orgId'), //模板变量中获取，机构id
kgAcActivityOrgId: orgId, //模板变量中获取，机构id
declaration: introDuce.val(), //参赛宣言
imageUrl: uploadImg.attr('src'), //上传图片地址
imageUrl: uploadFile, //上传图片地址
name: userName.val(), // 姓名
userPhone: phonenum.val(), //用户填写的手机号
}
......@@ -194,13 +249,20 @@ function btnBindClick() {
params['x'+ (i+1)] = $('#'+addInput[i].id).val()
}
}
var _token = getToken();
$.ajax({
type: 'POST',
headers: {'content-type': 'application/json'},
headers: {'content-type': 'application/json','x-token': _token},
url: baseUrl + '/ACTIVITY/sz/sign-up/' + activityCode,
data: JSON.stringify(params),
success: function (data) {
showMessage('提交成功',3000,true);
$.dialog({
showTitle : false,
contentHtml : '您的资料已成功提交审核中，请耐心等待审核结果',
onClickOk: function() {
transPage('1',activityCode,_token);
}
});
}
})
});
......@@ -219,7 +281,11 @@ function getOrgNameFn() {
}
},
error: function() {
showMessage('找不到此机构',3000,true);
$.dialog({
type : 'tips',
autoClose : 3000,
infoText : '找不到此机构'
});
}
})
}
......@@ -233,7 +299,11 @@ function selectFileImage(fileObj) {
console.log("正在上传,请稍后...");
var rFilter = /^(image\/jpeg|image\/png|image\/jpg|image\/gif)$/i; // 检查图片格式
if (!rFilter.test(file.type)) {
showMessage('请选择jpeg/jpg/gif/png格式的图片', 3000, true);
$.dialog({
type : 'tips',
autoClose : 3000,
infoText : '请选择jpeg/jpg/gif/png格式的图片'
});
return;
}
//获取照片方向角属性，用户旋转控制
......
showPhotos/js/toast.js deleted 100644 → 0
'use strict';
(function($,window){
//显示提示信息 toast
$.fn.toast = function(options){
var $this = $(this);
var _this = this;
return this.each(function(){
$(this).css({
position:'relative'
});
var top = ''; //bottom的位置
var translateInfo = ''; //居中和不居中时的tarnslate
var box = ''; //消息元素
var defaults = {
position: "absolute", //不是body的话就absolute
animateIn: "fadeIn", //进入的动画
animateOut: "fadeOut", //结束的动画
padding: "10px 20px", //padding
background: "rgba(7,17,27,0.66)", //背景色
borderRadius: "6px", //圆角
duration: 3000, //定时器时间
animateDuration: 500, //执行动画时间
fontSize: 14, //字体大小
content: "这是一个提示信息", //提示内容
color: "#fff", //文字颜色
top: "80%", //bottom底部的位置 具体的数值 或者center 垂直居中
zIndex: 1000001, //层级
isCenter: true, //是否垂直水平居中显示
closePrev: true, //在打开下一个toast的时候立即关闭上一个toast
}
var opt = $.extend(defaults,options||{});
var t = '';
// setTimeout(function(){
// box.addClass('show');
// },10);
top = opt.isCenter===true? '50%':opt.top;
defaults.isLowerIe9 = function(){
return (!window.FormData);
}
// translateY(-50%)
// translateInfo = opt.isCenter===true? 'translate3d(-50%,0,0)':'translate3d(-50%,-50%,0)';
defaults.createMessage = function(){
if(opt.closePrev){
$('.cpt-toast').remove();
}
box = $("<span class='animated "+opt.animateIn+" cpt-toast'></span>").css({
"position":opt.position,
"padding":opt.padding,
"background":opt.background,
"font-size":opt.fontSize,
"-webkit-border-radius":opt.borderRadius,
"-moz-border-radius":opt.borderRadius,
"border-radius":opt.borderRadius,
"color":opt.color,
"top":top,
"z-index":opt.zIndex,
"-webkit-transform":'translate3d(-50%,-50%,0)',
"-moz-transform":'translate3d(-50%,-50%,0)',
"transform":'translate3d(-50%,-50%,0)',
'-webkit-animation-duration':opt.animateDuration/1000+'s',
'-moz-animation-duration':opt.animateDuration/1000+'s',
'animation-duration':opt.animateDuration/1000+'s',
}).html(opt.content).appendTo($this);
defaults.colseMessage();
}
defaults.colseMessage = function(){
var isLowerIe9 = defaults.isLowerIe9();
if(!isLowerIe9){
t = setTimeout(function(){
box.removeClass(opt.animateIn).addClass(opt.animateOut).on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){
box.remove();
});
},opt.duration);
}else{
t = setTimeout(function(){
box.remove();
},opt.duration);
}
}
defaults.createMessage();
})
};
})(jQuery,window);
var showMessage = function(content,duration,isCenter,animateIn,animateOut){
var animateIn = animateIn || 'fadeIn';
var animateOut = animateOut || 'fadeOut';
var content = content || '这是一个提示信息';
var duration = duration || '3000';
var isCenter = isCenter || false;
$('body').toast({
position:'fixed',
animateIn:animateIn,
animateOut:animateOut,
content:content,
duration:duration,
isCenter:isCenter,
});
}
\ No newline at end of file
showPhotos/signup.html
......@@ -9,12 +9,14 @@
<link rel="stylesheet"
href="https://space-api.check.icaremgt.com/ACTIVITY/gitlab-static?url=http://gitlab.icaremgt.com/tanxinyu/h5_activity/raw/master/showPhotos/css/activity.css">
<link rel="stylesheet"
href="https://space-api.check.icaremgt.com/ACTIVITY/gitlab-static?url=http://gitlab.icaremgt.com/tanxinyu/h5_activity/raw/master/showPhotos/css/toast.css">
<link rel="stylesheet" href="https://space-api.check.icaremgt.com/ACTIVITY/gitlab-static?url=http://gitlab.icaremgt.com/tanxinyu/h5_activity/raw/master/showPhotos/css/animate.css">
href="css/dialog.css">
<link rel="stylesheet" href="https://space-api.check.icaremgt.com/ACTIVITY/gitlab-static?url=http://gitlab.icaremgt.com/tanxinyu/h5_activity/raw/master/showPhotos/css/toast.css">
<link rel="stylesheet" href="https://space-api.check.icaremgt.com/ACTIVITY/gitlab-static?url=http://gitlab.icaremgt.com/tanxinyu/h5_activity/raw/master/showPhotos/css/animate.css">
<script type="text/javascript"
src="https://space-api.check.icaremgt.com/ACTIVITY/gitlab-static?url=http://gitlab.icaremgt.com/tanxinyu/h5_activity/raw/master/showPhotos/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript"
src="https://space-api.check.icaremgt.com/ACTIVITY/gitlab-static?url=http://gitlab.icaremgt.com/tanxinyu/h5_activity/raw/master/showPhotos/js/toast.js"></script>
<script type="text/javascript" src="js/dialog.js"></script>
<script type="text/javascript" src="https://space-api.check.icaremgt.com/ACTIVITY/gitlab-static?url=http://gitlab.icaremgt.com/tanxinyu/h5_activity/raw/master/showPhotos/js/toast.js"></script>
<script type="text/javascript"
src="https://space-api.check.icaremgt.com/ACTIVITY/gitlab-static?url=http://gitlab.icaremgt.com/tanxinyu/h5_activity/raw/master/showPhotos/js/exif.js"></script>
<script type="text/javascript"
......@@ -53,8 +55,8 @@
<body>
</body>
<script type="text/javascript" src="https://space-api.check.icaremgt.com/ACTIVITY/gitlab-static?url=http://gitlab.icaremgt.com/tanxinyu/h5_activity/raw/master/showPhotos/js/page/common.js"></script>
<script type="text/javascript" src="https://space-api.check.icaremgt.com/ACTIVITY/gitlab-static?url=http://gitlab.icaremgt.com/tanxinyu/h5_activity/raw/master/showPhotos/js/page/signup.js"></script>
<!-- <script type="text/javascript" src="js/page/common.js"></script>
<script type="text/javascript" src="js/page/signup.js"></script> -->
<!-- <script type="text/javascript" src="https://space-api.check.icaremgt.com/ACTIVITY/gitlab-static?url=http://gitlab.icaremgt.com/tanxinyu/h5_activity/raw/master/showPhotos/js/page/common.js"></script>
<script type="text/javascript" src="https://space-api.check.icaremgt.com/ACTIVITY/gitlab-static?url=http://gitlab.icaremgt.com/tanxinyu/h5_activity/raw/master/showPhotos/js/page/signup.js"></script> -->
<script type="text/javascript" src="js/page/common.js"></script>
<script type="text/javascript" src="js/page/signup.js"></script>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment