const aceProUpload = { data: { API_ROUTER_ENDPOINT: 'https://levinapi-cn.oneplus.com/v2/api/router', CLIENT_ID: $('#client_id_levin').val() || 'be541ab06ce34ea5b3166c5a910ced3e', METHOD_SIGNUP_SUBMIT: 'levin.signup.submitSignup', activityCode: $('#ys_activity_code').val() || "CA220801811815000869", uploadData:{}, submitFlag: false, //是否点击了提交按钮 submitSuccessFlag: false, //提交成功标识 isMobile: window.innerWidth <= 650, uploadSwiper: null }, initUpload: function () { const _this = this _this.initUploadEvent() if(_this.data.isMobile){ $('.ace-pro .upload-img-box.pc').remove(); $('.ace-pro .item-box').show(); _this.initUploadSwiper() } else { $('.ace-pro .upload-img-box.mob').remove(); } if(window.innerWidth > 650 && window.innerWidth <=768 ){ $('.ace-pro .default-img').each(function(){ $(this).attr({ 'data-src-xs-1x':$(this).attr("data-src-1x"), 'data-src-xs-2x':$(this).attr("data-src-1x") }) }) } }, initUploadEvent: function () { const _this = this $('.ace-pro #upload-btn').on('click', function() { //展示上传部分 if(_this.data.isMobile) { setTimeout(function(){ _this.data.uploadSwiper.slideTo(0, 0, false); },100) } if(_this.data.submitSuccessFlag){ if(!_this.data.isMobile) { $('.ace-pro .upload-img-box.pc').find(".add-btn").show().siblings().hide() } $('.ace-pro .card-container-upload .success-box').hide().siblings(":not(.close-dialog)").show() }; acePro.openDialog($(this).attr("id")); }) $('.ace-pro .card-container-upload .add-btn').on('click', function() { $(this).hide().siblings().show() }) $('.ace-pro .card-container-upload .default-img').on('click', function() { //清空input type=file的值 $(this).siblings('.file-input').click() }) $('.ace-pro .card-container-upload .refresh-btn').on('click', function() { $(this).parent().siblings('.file-input').click() }) $('.ace-pro .card-container-upload .delete-btn').on('click', function() { var fileId = $(this).parent().siblings('.file-input').attr("id"); delete _this.data.uploadData[fileId]; _this.setUploadNum(); $(this).parent().hide().siblings('.default-img').show() }) $('.ace-pro .card-container-upload input[type=file]').on("click", function(e) { $(this).val(""); }); $('.ace-pro .card-container-upload input[type=file]').on('change', function() { if(!_this.fileSizeValidate($(this)[0].files[0])){ _this.uploadImg($(this)) } }) $(".ace-pro .card-container-upload .case-desc").on('input', function() { if ($(this).val().length > 200) { $(this).val($(this).val().substring(0, 200)); } $(this).siblings(".desc-num").find("span").text($(this).val().length) if($(this).val().trim().length > 0){ _this.data.uploadData[$(this).attr("id")] = $(this).val(); } else { delete _this.data.uploadData[$(this).attr("id")]; } }) $('.ace-pro .card-container-upload .submit-btn').on('click', function() { if(_this.data.submitFlag) return _this.data.submitFlag = true if(!_this.checkSubmit()) { _this.uploadSubmit(); } else { _this.data.submitFlag = false } }) $(".ace-pro #phone-num").on('input', function() { if ($(this).val().length > 11) { $(this).val($(this).val().substring(0, 11)); } }) _this.inputValidate() }, initUploadSwiper: function () { const _this = this _this.data.uploadSwiper = new Swiper('.ace-pro .upload-swiper-container', { direction: 'horizontal', initialSlide :0, slidesPerView: 'auto', passiveListeners: false, observer: true, observeParents: true, loop: false, freeMode: false, uniqueNavElements :false, prevButton: $('.ace-pro .upload-swiper-container').find('.swiper-button-prev'), nextButton: $('.ace-pro .upload-swiper-container').find('.swiper-button-next'), onInit: function (swiper) { } }) }, uploadImg: function($file) { var _this = this; var fileName = $file[0].files[0].name; var activityCode = _this.data.activityCode; console.log("开始获取签名") $.ajax({ url:'https://opsiteapi-cn.oppo.com/ocs/generatePreSignedUrl', method: 'POST', data:{"fileName":fileName,"activityCode": activityCode}, beforeSend: function(){ _this.showLoading() }, success: function(res){ var theFormFile = $file[0].files[0]; if(res.ret == 1) { var uploadUrl = res.data.url; $.ajax({ type: 'PUT', url: uploadUrl, contentType: 'binary/octet-stream', processData: false, data: theFormFile, success: function(data){ //回显图片 var fileUrl = uploadUrl.substring(0,uploadUrl.indexOf("?")); _this.data.uploadData[$file.attr("id")] = fileUrl; _this.createImgURL($file); _this.setUploadNum(); }, complete: function(){ _this.hideLoading() }, error: function(error){ window.OVERSEAS_BASE.methods.toast('上传失败',3000) console.log("上传接口失败") } }) } else { _this.hideLoading() window.OVERSEAS_BASE.methods.toast('上传失败',3000) console.log("获取签名接口返回错误") } }, error: function(error){ _this.hideLoading() window.OVERSEAS_BASE.methods.toast('上传失败',3000) console.log("获取签名接口失败") } }); }, createImgURL: function($file) { var _URL = window.URL || window.webkitURL; var img; if ($file[0]) { img = new Image(); img.src = _URL.createObjectURL($file[0].files[0]); img.onload = function() { $file.siblings(".upload-success-img-box").find(".success-file-img").attr("src",this.src) $file.siblings(".default-img").hide().siblings(".upload-success-img-box").show(); }; } }, setUploadNum: function(ifReturn) { var _this = this; var fileNum = 0; $('.ace-pro .card-container-upload input[type=file]').each(function(){ if(_this.data.uploadData[$(this).attr("id")]) { fileNum ++; } }) if(ifReturn){ return fileNum; } else { $(".ace-pro .card-container-upload .upload-num").text(fileNum) } }, fileSizeValidate: function(file){ var errorText = ''; if(!/.(jpg|jpeg|png)$/.test(file.type)){ errorText = "上传的图片格式仅支持jpg,jpeg,png格式" // 仅支持jpg, png格式 }else if(((file.size).toFixed(2))>(10*1024*1024)){ errorText = "图片文件最大上传10M"; // 图片文件最大上传10M } if(errorText) { window.OVERSEAS_BASE.methods.toast(errorText,3000) } return errorText; }, phoneNumValidate: function() { var _this = this; var errorText = ''; var $num = $('.ace-pro #phone-num'); if(!$num.val().trim() || $num.val().trim().length !== 11) { $('.ace-pro .phone-box').removeClass('phone-error').addClass("phone-warning"); $('.ace-pro .error-text').addClass("phone-warning").text("请输入完整手机号").show(); errorText = '请输入完整手机号' }else if (!/^\d+$/.test($num.val().trim()) || ($num.val().trim().length === 11 && !_this.checkPhone($num.val().trim()))){ $('.ace-pro .phone-box').removeClass('phone-warning').addClass("phone-error"); $('.ace-pro .error-text').removeClass("phone-warning").text("手机号码格式错误").show(); errorText = '手机号码格式错误' }else { $('.ace-pro .phone-box').removeClass("phone-error phone-warning"); $('.ace-pro .error-text').removeClass("phone-warning").text("").hide(); } return errorText; }, inputValidate: function() { var _this = this; var num = document.getElementById('phone-num'); var timer = null; num.oninput = function(){ clearTimeout(timer) if(num.value===''){ return } timer = setTimeout(()=>{ _this.phoneNumValidate() },1000) } }, checkPhone: function(phone){ var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/; return reg_tel.test(phone) }, checkSubmit: function(){ var _this = this; var errorText = ''; if(_this.setUploadNum(true) == 0){ errorText = '请上传图片' window.OVERSEAS_BASE.methods.toast(errorText,3000) }else if(_this.phoneNumValidate()){ errorText = _this.phoneNumValidate() }else if(!$('.card-container-upload input[type=checkbox]').is(':checked')){ errorText = '请阅读相关法律条款' window.OVERSEAS_BASE.methods.toast(errorText,3000) } return errorText; }, routerHttpPost: function(method, biz_content, callback) { var _this = this $.ajaxSetup({ type: 'POST', beforeSend: function(){ _this.showLoading() }, crossDomain: true, xhrFields: { withCredentials: true }, complete: function(){ _this.hideLoading() _this.data.submitFlag = false }, error: function(){ _this.data.submitSuccessFlag = false }, }) var data = { client_id: this.data.CLIENT_ID, method: method, biz_content: JSON.stringify(biz_content) } $.post(this.data.API_ROUTER_ENDPOINT, data, callback) }, showLoading: function(){ $(".ace-pro .loading-container").show() }, hideLoading: function(){ $(".ace-pro .loading-container").hide() }, uploadSubmit: function(){ var _this = this; _this.data.uploadData.userphone = window.OVERSEAS_BASE.methods.encrypt.AES.encrypt($('.ace-pro #phone-num').val().trim()); var biz_content = { activityCode: this.data.activityCode, activityDetailCode: null, formContext: this.data.uploadData } _this.routerHttpPost(this.data.METHOD_SIGNUP_SUBMIT, biz_content, function(result){ if (result.ret == '1') { $('.ace-pro .card-container-upload .success-box').show().siblings(":not(.close-dialog)").hide() //清空上传数据 _this.data.uploadData = {}; $('.ace-pro .success-file-img').attr("src",""); $('.ace-pro .upload-success-img-box').hide().siblings(".default-img").show(); $('.ace-pro .upload-num').text(0) $('.ace-pro .case-desc').val("") $('.ace-pro #phone-num').val("") $('.ace-pro .desc-num span').text(0) $('.ace-pro input[type=checkbox]').prop("checked",false); _this.data.submitSuccessFlag = true; } else { window.OVERSEAS_BASE.methods.toast(result.errMsg, 3000) _this.data.submitSuccessFlag = false; } }) } } $(function () { aceProUpload.initUpload() })