Skip to content

Commit

Permalink
一些页面调整
Browse files Browse the repository at this point in the history
  • Loading branch information
@halloffamezwx
halloffamezwx committed Apr 27, 2018
1 parent 8717cc0 commit 1f6b863
Show file tree
Hide file tree
Showing 5 changed files with 167 additions and 63 deletions.
114 changes: 112 additions & 2 deletions html_template/js/app/register.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ requirejs.config({
"baseUrl": "js/lib"
});

requirejs(["jquery"], function($){
requirejs(["jquery", "weui.min"], function($, weui){

$(function(){
var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>',
/* var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>',
$gallery = $("#gallery"), $galleryImg = $("#galleryImg"),
$uploaderInput = $("#uploaderInput"),
$uploaderFiles = $("#uploaderFiles")
Expand All @@ -32,7 +32,117 @@ requirejs(["jquery"], function($){
});
$gallery.on("click", function(){
$gallery.fadeOut(100);
}); */

$("#headDiv").on("click", function(){
$("#headFile").click();
});

var uploadCount = 0,
uploadList = [];
var uploadCountDom = document.getElementById("uploadCount");
weui.uploader('#uploader', {
url: 'http://localhost:8081',
auto: false,
type: 'file',
fileVal: 'fileVal',
compress: {
width: 1600,
height: 1600,
quality: .8
},
onBeforeQueued: function(files) {
// `this` 是轮询到的文件, `files` 是所有文件

if(["image/jpg", "image/jpeg", "image/png", "image/gif"].indexOf(this.type) < 0){
weui.alert('请上传图片');
return false; // 阻止文件添加
}
if(this.size > 10 * 1024 * 1024){
weui.alert('请上传不超过10M的图片');
return false;
}
if (files.length > 5) { // 防止一下子选择过多文件
weui.alert('最多只能上传5张图片，请重新选择');
return false;
}
if (uploadCount + 1 > 5) {
weui.alert('最多只能上传5张图片');
return false;
}

++uploadCount;

// return true; // 阻止默认行为，不插入预览图的框架
},
onQueued: function(){
console.log(this);

// console.log(this.status); // 文件的状态：'ready', 'progress', 'success', 'fail'
// console.log(this.base64); // 如果是base64上传，file.base64可以获得文件的base64

// this.upload(); // 如果是手动上传，这里可以通过调用upload来实现；也可以用它来实现重传。
// this.stop(); // 中断上传

// return true; // 阻止默认行为，不显示预览图的图像
},
onBeforeSend: function(data, headers){
console.log(this, data, headers);
// $.extend(data, { test: 1 }); // 可以扩展此对象来控制上传参数
// $.extend(headers, { Origin: 'http://127.0.0.1' }); // 可以扩展此对象来控制上传头部

// return false; // 阻止文件上传
},
onProgress: function(procent){
console.log(this, procent);
// return true; // 阻止默认行为，不使用默认的进度显示
},
onSuccess: function (ret) {
console.log(this, ret);
// return true; // 阻止默认行为，不使用默认的成功态
},
onError: function(err){
console.log(this, err);
// return true; // 阻止默认行为，不使用默认的失败态
}
});

// 缩略图预览
document.querySelector('#uploaderFiles').addEventListener('click', function (e) {
var target = e.target;

while (!target.classList.contains('weui-uploader__file') && target) {
target = target.parentNode;
}
if (!target) return;

var url = target.getAttribute('style') || '';
var id = target.getAttribute('data-id');

if (url) {
url = url.match(/url\((.*?)\)/)[1].replace(/"/g, '');
}
var gallery = weui.gallery(url, {
className: 'zindex-9999',
onDelete: function onDelete() {
weui.confirm('确定删除该图片？', function () {
--uploadCount;
uploadCountDom.innerHTML = uploadCount;

for (var i = 0, len = uploadList.length; i < len; ++i) {
var file = uploadList[i];
if (file.id == id) {
file.stop();
break;
}
}
target.remove();
gallery.hide();
});
}
});
});

});

})
2 changes: 1 addition & 1 deletion html_template/js/app/settlement.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ requirejs(["jquery", "weui.min", "city"], function($, weui, city){
weui.picker(city.cityData, {
className: 'addressPicClass',
container: '#addressPicContainer',
defaultValue: [0, 1, 1],
defaultValue: ['440000', '440100', '440106'],
onChange: function (result) {
console.log(result)
},
Expand Down
54 changes: 4 additions & 50 deletions html_template/js/lib/city.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion html_template/login.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
</head>

<body style="background-color: #ffffff;">
<div class="weui-toptips weui-toptips_warn" id="errorTip" style="z-index:99999;font-size: 12px;">错误提示</div>
<div class="weui-toptips weui-toptips_warn" id="errorTip" style="z-index:99999;font-size: 14px;">错误提示</div>
<header class="wy-header">
<div class="wy-header-icon-back"><a href="javascript:window.history.back();"></a></div>
<div class="wy-header-title">登录商城</div>
Expand Down
58 changes: 49 additions & 9 deletions html_template/register.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,31 @@
.weui-cells:after {
border-bottom: 0px solid #e5e5e5;
}
.zindex-9999{
z-index:9999;
}
.weui-mask{
z-index:9999;
}
.weui-dialog {
z-index:9999;
}
.weui-dialog__btn {
font-size: 14px;
}
.weui-dialog__bd {
font-size: 14px;
}
.weui-skin_android .weui-dialog__bd {
font-size: 14px;
}

.weui_avatar {
width: 52px;
height: 52px;
border-radius: 4px;
vertical-align: middle;
}
</style>
</head>

Expand All @@ -23,18 +48,24 @@

<form action="index.html" method="post" enctype="multipart/form-data">
<div class="weui-cells weui-cells_form" style="padding-top: 44px;margin-top: 0px;">
<div class="weui-cell" style="font-size: 14px;">
<div class="weui-cell " style="font-size: 14px;">
<div class="weui-cell__hd" ><label class="weui-label">手机号码</label></div>
<div class="weui-cell__bd">
<input class="weui-input" type="number" placeholder="请输入手机号" id="mobile" name="mobile"/>
<input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入手机号" id="mobile" name="mobile"/>
</div>
<div class="weui-cell__ft">
<i class="weui-icon-warn" style="font-size: 20px;"></i>
</div>
</div>

<div class="weui-cell" style="font-size: 14px;">
<div class="weui-cell weui-cell_warn" style="font-size: 14px;">
<div class="weui-cell__hd" ><label class="weui-label">密<span style="margin-left: 28px;">码</span></label></div>
<div class="weui-cell__bd">
<input class="weui-input" type="password" placeholder="请您输入密码" id="password" name="password"/>
</div>
<div class="weui-cell__ft">
<i class="weui-icon-warn" style="font-size: 20px;"></i>
</div>
</div>
<div class="weui-cell" style="font-size: 14px;">
<div class="weui-cell__hd" ><label class="weui-label">确认密码</label></div>
Expand All @@ -45,7 +76,7 @@

<div class="weui-cell weui-cell_vcode" >
<div class="weui-cell__bd" >
<input class="weui-input" type="text" placeholder="短信验证码" style="font-size: 14px; ">
<input class="weui-input" type="text" placeholder="短信验证" style="font-size: 14px; ">
</div>
<div class="weui-cell__ft">
<a href="javascript:;" class="weui-vcode-btn" style="font-size: 14px;/*width: 83px;*/text-align:center;height: 41px;">获取验证码</a>
Expand All @@ -61,12 +92,20 @@
</div>
</div>

<div class="weui-cell">
<input style="display:none;" id="headFile" name="headFile" type="file" accept="image/*"/>
<div class="weui-cell weui-cell_access" style="font-size: 14px;" id="headDiv">
<div class="weui-cell__hd" ><label class="weui-label">头像上传</label></div>
<div class="weui_cell_ft " >
<img class="weui_avatar" src="./images/bear.jpg" alt="">
</div>
</div>

<div class="weui-cell" id="uploader">
<div class="weui-cell__bd">
<div class="weui-uploader">
<div class="weui-uploader__hd" style="font-size: 14px;">
<p class="weui-uploader__title">头像上传</p>
<div class="weui-uploader__info">0/2</div>
<p class="weui-uploader__title">图片上传</p>
<div class="weui-uploader__info"><span id="uploadCount">3</span>/5</div>
</div>
<div class="weui-uploader__bd">
<ul class="weui-uploader__files" id="uploaderFiles">
Expand All @@ -83,7 +122,8 @@
</li>
</ul>
<div class="weui-uploader__input-box">
<input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="">
<!-- <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" capture="camera" multiple=""/> -->
<input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple=""/>
</div>
</div>
</div>
Expand All @@ -93,7 +133,7 @@
<div class="weui-cell weui-cell_vcode">
</div>

<div class="weui-btn-area" >
<div class="weui-btn-area" style="margin-bottom: 140px;">
<!-- input class="weui-btn weui-btn_primary" type="submit" id="confirmBtn" style="font-size: 14px;height:39px;" value="确 定"/> -->
<a class="weui-btn weui-btn_primary" href="javascript:" id="confirmBtn" style="font-size: 14px;height:39px;"><i id="confirmLoading"></i>确 定</a>
</div>
Expand Down

0 comments on commit 1f6b863

Please sign in to comment.