123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234 |
- /*!
- * ======================================================
- * FeedBack Template For MUI (http://dev.dcloud.net.cn/mui)
- * =======================================================
- * @version:1.0.0
- * @author:cuihongbao@dcloud.io
- */
- (function() {
- var index = 1;
- var size = null;
- var imageIndexIdNum = 0;
- var starIndex = 0;
- var feedback = {
- question: document.getElementById('question'),
- contact: document.getElementById('contact'),
- imageList: document.getElementById('image-list'),
- submitBtn: document.getElementById('submit')
- };
- var url = 'https://service.dcloud.net.cn/feedback';
- feedback.files = [];
- feedback.uploader = null;
- feedback.deviceInfo = null;
- mui.plusReady(function() {
- //设备信息,无需修改
- feedback.deviceInfo = {
- appid: plus.runtime.appid,
- imei: plus.device.imei, //设备标识
- images: feedback.files, //图片文件
- p: mui.os.android ? 'a' : 'i', //平台类型,i表示iOS平台,a表示Android平台。
- md: plus.device.model, //设备型号
- app_version: plus.runtime.version,
- plus_version: plus.runtime.innerVersion, //基座版本号
- os: mui.os.version,
- net: ''+plus.networkinfo.getCurrentType()
- }
- });
- /**
- *提交成功之后,恢复表单项
- */
- feedback.clearForm = function() {
- feedback.question.value = '';
- feedback.contact.value = '';
- feedback.imageList.innerHTML = '';
- feedback.newPlaceholder();
- feedback.files = [];
- index = 0;
- size = 0;
- imageIndexIdNum = 0;
- starIndex = 0;
- //清除所有星标
- mui('.icons i').each(function (index,element) {
- if (element.classList.contains('mui-icon-star-filled')) {
- element.classList.add('mui-icon-star')
- element.classList.remove('mui-icon-star-filled')
- }
- })
- };
- feedback.getFileInputArray = function() {
- return [].slice.call(feedback.imageList.querySelectorAll('.file'));
- };
- feedback.addFile = function(path) {
- feedback.files.push({name:"images"+index,path:path,id:"img-"+index});
- index++;
- };
- /**
- * 初始化图片域占位
- */
- feedback.newPlaceholder = function() {
- var fileInputArray = feedback.getFileInputArray();
- if (fileInputArray &&
- fileInputArray.length > 0 &&
- fileInputArray[fileInputArray.length - 1].parentNode.classList.contains('space')) {
- return;
- };
- imageIndexIdNum++;
- var placeholder = document.createElement('div');
- placeholder.setAttribute('class', 'image-item space');
- var up = document.createElement("div");
- up.setAttribute('class','image-up')
- //删除图片
- var closeButton = document.createElement('div');
- closeButton.setAttribute('class', 'image-close');
- closeButton.innerHTML = 'X';
- closeButton.id = "img-"+index;
- //小X的点击事件
- closeButton.addEventListener('tap', function(event) {
- setTimeout(function() {
- for(var temp=0;temp<feedback.files.length;temp++){
- if(feedback.files[temp].id==closeButton.id){
- feedback.files.splice(temp,1);
- }
- }
- feedback.imageList.removeChild(placeholder);
- }, 0);
- return false;
- }, false);
-
- //
- var fileInput = document.createElement('div');
- fileInput.setAttribute('class', 'file');
- fileInput.setAttribute('id', 'image-' + imageIndexIdNum);
- fileInput.addEventListener('tap', function(event) {
- var self = this;
- var index = (this.id).substr(-1);
-
- plus.gallery.pick(function(e) {
- // console.log("event:"+e);
- var name = e.substr(e.lastIndexOf('/') + 1);
- console.log("name:"+name);
-
- plus.zip.compressImage({
- src: e,
- dst: '_doc/' + name,
- overwrite: true,
- quality: 50
- }, function(zip) {
- size += zip.size
- console.log("filesize:"+zip.size+",totalsize:"+size);
- if (size > (10*1024*1024)) {
- return mui.toast('文件超大,请重新选择~');
- }
- if (!self.parentNode.classList.contains('space')) { //已有图片
- feedback.files.splice(index-1,1,{name:"images"+index,path:e});
- } else { //加号
- placeholder.classList.remove('space');
- feedback.addFile(zip.target);
- feedback.newPlaceholder();
- }
- up.classList.remove('image-up');
- placeholder.style.backgroundImage = 'url(' + zip.target + ')';
- }, function(zipe) {
- mui.toast('压缩失败!')
- });
-
-
- }, function(e) {
- mui.toast(e.message);
- },{});
- }, false);
- placeholder.appendChild(closeButton);
- placeholder.appendChild(up);
- placeholder.appendChild(fileInput);
- feedback.imageList.appendChild(placeholder);
- };
- feedback.newPlaceholder();
- feedback.submitBtn.addEventListener('tap', function(event) {
- if (feedback.question.value == '' ||
- (feedback.contact.value != '' &&
- feedback.contact.value.search(/^(\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+)|([1-9]\d{4,9})$/) != 0)) {
- return mui.toast('信息填写不符合规范');
- }
- if (feedback.question.value.length > 200 || feedback.contact.value.length > 200) {
- return mui.toast('信息超长,请重新填写~')
- }
- //判断网络连接
- if(plus.networkinfo.getCurrentType()==plus.networkinfo.CONNECTION_NONE){
- return mui.toast("连接网络失败,请稍后再试");
- }
- feedback.send(mui.extend({}, feedback.deviceInfo, {
- content: feedback.question.value,
- contact: feedback.contact.value,
- images: feedback.files,
- score:''+starIndex
- }))
- }, false)
- feedback.send = function(content) {
- feedback.uploader = plus.uploader.createUpload(url, {
- method: 'POST'
- }, function(upload, status) {
- // plus.nativeUI.closeWaiting()
- console.log("upload cb:"+upload.responseText);
- if(status==200){
- var data = JSON.parse(upload.responseText);
- //上传成功,重置表单
- if (data.ret === 0 && data.desc === 'Success') {
- // mui.toast('反馈成功~')
- console.log("upload success");
- // feedback.clearForm();
- }
- }else{
- console.log("upload fail");
- }
-
- });
- //添加上传数据
- mui.each(content, function(index, element) {
- if (index !== 'images') {
- console.log("addData:"+index+","+element);
- // console.log(index);
- feedback.uploader.addData(index, element)
- }
- });
- //添加上传文件
- mui.each(feedback.files, function(index, element) {
- var f = feedback.files[index];
- console.log("addFile:"+JSON.stringify(f));
- feedback.uploader.addFile(f.path, {
- key: f.name
- });
- });
- //开始上传任务
- feedback.uploader.start();
- mui.alert("感谢反馈,点击确定关闭","问题反馈","确定",function () {
- feedback.clearForm();
- mui.back();
- });
- // plus.nativeUI.showWaiting();
- };
-
- //应用评分
- mui('.icons').on('tap','i',function(){
- var index = parseInt(this.getAttribute("data-index"));
- var parent = this.parentNode;
- var children = parent.children;
- if(this.classList.contains("mui-icon-star")){
- for(var i=0;i<index;i++){
- children[i].classList.remove('mui-icon-star');
- children[i].classList.add('mui-icon-star-filled');
- }
- }else{
- for (var i = index; i < 5; i++) {
- children[i].classList.add('mui-icon-star')
- children[i].classList.remove('mui-icon-star-filled')
- }
- }
- starIndex = index;
- });
- //选择快捷输入
- mui('.mui-popover').on('tap','li',function(e){
- document.getElementById("question").value = document.getElementById("question").value + this.children[0].innerHTML;
- mui('.mui-popover').popover('toggle')
- })
- })();
|