cool_store/service/js/index.js

var classNumber = 0,token = '',userImg = 'http://imgs.726p.com/tbk_onlive/default-img/kx-5ca5de6595506.jpeg',setLocalStorage = '';
$().ready(function(){
    document.body.addEventListener('focusout', function () {
        window.scrollTo(0,0);
        scrollToEnd();
    });
    //点击关闭图
    $("#dialog_large_image").click(function () {
        $("#dialog_large_image").fadeOut(200);
        $("#dialog_large_image").html('')
    })
    getToken();//获取token
    getLocalStorage();//获取本地信息存储的信息
    document.getElementsByClassName("problemButton")[0].addEventListener('touchstart', submitFeedback, false);
})
//获取token
function getToken () {
    var param = '{"js_callback" : "callBackMethodName"}';
    try{
        if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)){
                window.webkit.messageHandlers.app_h5_get_token.postMessage(param);
        }
        if(navigator.userAgent.match(/android/i)){
                obj4H5.app_h5_get_token(param);
        }
    }catch(e){
        //TODO handle the exception
        // token='51fb5c632983ff2c21f057d6759db61f29'
        // userinfo();
    }
    
}
function callBackMethodName (data) {//app token 回调
    var data = JSON.parse(data)
    token = data.token;
    // showMsg(token)
    userinfo();
}

//保存数据到本地
function appH5SaveMessage () {
    var param = '{"uploadData" : ' + setLocalStorage + '}';
    try{
        if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)){
                window.webkit.messageHandlers.app_h5_save_message.postMessage(param);
        }
    }catch(e){
        //TODO handle the exception
    }
}
//获取本地信息
function getLocalStorage () {
    var param = '{"js_callback" : "getLocalStorageIos"}';
    try {
        if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)){
            window.webkit.messageHandlers.app_h5_get_message.postMessage(param);
        }else{
            getLocalOperation('android',localStorage.getItem("last_feedback"));
        }
    } catch (error) {
        getLocalOperation('android',localStorage.getItem("last_feedback"));        
    }
}
function getLocalStorageIos (data) {
    getLocalOperation('ios',data);
}

function getLocalOperation (type,data){
    //获取到本地后的操作
    var localStorages = JSON.parse(data);
    if(type == 'ios'){ 
        localStorages = localStorages.uploadData; 
    }else{
        if(!localStorage.getItem("last_feedback")){
            return;
        }
    }

    if(localStorages.img){
        $(".serviceContent").append('<li class="userFeedback"><div class="serviceConDivUser"><img class="feedbackImg" src="' + localStorages.img + '"/></div><img class="headPortrait" id="headPortrait" src="' + userImg + '"/></li>')
    }else{
        $(".serviceContent").append(' <li class="userFeedback"><div class="serviceConDiv serviceConDivUser"><h3>这是我要反馈的问题</h3><p>' + localStorages.feedbackCon + '</p></div><img class="headPortrait" id="headPortrait" src="' + userImg + '"/></li>')
    }
    reply();    
    $(".serviceContent").append('<li class="coolStore"><div class="serviceHint">只显示最新一条反馈，其他反馈已在处理</div></li>')
    scrollToEnd();
    lookBigImg('null');//点击查看大图
}

function lookBigImg(html){
    //点击查看大图
    var $html = '';
    if(html != 'null'){
        $html = "#" + html + " .feedbackImg";
    }else{
        $html = ".feedbackImg"
    }
    $($html).click(function () {
        $("#dialog_large_image").fadeIn(200);
        $("#dialog_large_image").html('<img src="' + $(this).attr('src') + '"/>')
    })
}
function  changeImgID() {
     //获取读取我文件的File对象
     var selectedFile = '';
    selectedFile = document.getElementById('imgInput').files[0];
   
     var reader = new FileReader();
     reader.readAsDataURL(selectedFile);
     reader.onload = function () {
         //当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可
         console.log(this)
         //图片压缩
         canvasDataURL(this.result,{
            quality: 0.3
        },function (base64Codes) {
        //    console.log(base64Codes)
           classNumber += 1;
            $(".serviceContent").append('<li class="userFeedback" id="uploadLoading_' + classNumber + '"><div class="serviceConDivUser"><img class="uploadLoading"  src="../common/loading.gif"/><img class="feedbackImg" src="' + base64Codes + '"/></div><img class="headPortrait" src="' + userImg + '"/></li>')
            scrollToEnd();
            var json = {
                loadingId : 'uploadLoading_' + classNumber,
                img : base64Codes
            }
            uploadFeedbackEvent(JSON.stringify(json))
            lookBigImg('uploadLoading_' + classNumber);
        })
     }
}
function submitFeedback () {
    //点击提交反馈按钮
    var feedback_con = $("#problemInput").val().replace(/(^\s*)|(\s*$)/g, "");
    if(feedback_con == ''){
        showMsg('请输入您遇到的问题')
        return;
    }
    classNumber += 1;
    $(".serviceContent").append(' <li class="userFeedback" id="uploadLoading_' + classNumber + '"><div class="serviceConDiv serviceConDivUser"><img class="uploadLoading" src="../common/loading.gif"/><h3>这是我要反馈的问题</h3><p>' + feedback_con + '</p></div><img class="headPortrait" src="' + userImg + '"/></li>')
    $("#problemInput").val('')
    scrollToEnd();
    $(".serviceButtom #problemInput").blur(); 
    var json = {
        loadingId : 'uploadLoading_' + classNumber,
        feedbackCon : feedback_con
    }
    uploadFeedbackEvent(JSON.stringify(json))
}
function uploadFeedbackEvent(data){
    //提交反馈事件
    var uploadData = JSON.parse(data)
    // console.log(uploadData)
    var ajaxData = null;
    if(uploadData.img){//上传图片
        ajaxData = {
            'type':1,
            'content':'',
            'img':uploadData.img
        }
        upUserComplainH5(JSON.stringify(ajaxData),data)
    }else{//上传文案
        ajaxData = {
            'type':0,
            'content':uploadData.feedbackCon,
            'img':''
        }
        upUserComplainH5(JSON.stringify(ajaxData),data)
    }
    setTimeout(function () {
        
       
    },2000)
}
function upUserComplainH5 (dataes,uploadData) {
    //h5客服记录
    $.ajax({
        url:'/api/userComplain/upUserComplainH5',
        type:'post',
        dataType:'json',
        headers:{
            'token': token
        },
        data: JSON.parse(dataes),
        success:function (res){
            console.log(res)
            if(res.errno == 0){
                $("#" + JSON.parse(uploadData).loadingId + " .uploadLoading").hide();
                setLocalStorage = uploadData;
                localStorage.setItem("last_feedback",uploadData); //存入 
                appH5SaveMessage();//ios保存数据到本地
                reply();
            }else if(res.errno == 4002){
                showMsg(res.err)
                $("#" + JSON.parse(uploadData).loadingId + " .uploadLoading").attr('src','./img/gantanhao.png');
            }else{
                $("#" + JSON.parse(uploadData).loadingId + " .uploadLoading").attr('src','./img/gantanhao.png');
            }
        },
        error:function (err){
            $("#" + JSON.parse(uploadData).loadingId + " .uploadLoading").attr('src','./img/gantanhao.png');
        }
    })
}
function userinfo () {
    //获取用户信息
    $.ajax({
        url:'/api/users/userinfo',
        type:'post',
        dataType:'json',
        headers:{
            'token': token
        },
        success:function (res){
            console.log(res)
           if(res.errno == 0){
            userImg = res.rst.data.img;
            $("#headPortrait").attr('src',userImg)
           }else if(res.errno == 4002){
            showMsg(res.err)
           }
        },
        error:function (err){
            $("#" + JSON.parse(uploadData).loadingId + " .uploadLoading").attr('src','./img/gantanhao.png');
        }
    })
}
function scrollToEnd(){//滚动到底部
    $(document).scrollTop(0);
    $(".serviceContent").scrollTop($(".serviceContent")[0].scrollHeight + 105);
}
function reply () {
    //统一回复信息
    // $(".serviceContent").append('<li class="coolStore"><img class="headPortrait" src="./img/service.png"/><div class="serviceConDiv"><h3>您的反馈我们已经收到</h3><p>正在为您火速解决问题～<br/>您也可以添加客服微信咨询<br/>客服微信：wufazhucexiaohai<button  onclick="copyEvent()">复制微信号</button></p></div></li>')
    $(".serviceContent").append('<li class="coolStore"><img class="headPortrait" src="./img/service.png"/><div class="serviceConDiv"><h3>您的反馈我们已经收到</h3><p>正在为您火速解决问题～</p></div></li>')
    scrollToEnd();
}
function goDetailGuide (origin) {
    //去二级页面
    window.location.href = './detail_guide.html?origin=' + origin
}
//图片压缩
function canvasDataURL(path, obj, callback){
    var img = new Image();
    img.src = path;
    img.onload = function(){
        var that = this;
        // 默认按比例压缩
        var w = that.width,
            h = that.height,
            scale = w / h;
        w = obj.width || w;
        h = obj.height || (w / scale);
        var quality = 0.4;  // 默认图片质量为0.7
        //生成canvas
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        // 创建属性节点
        var anw = document.createAttribute("width");
        anw.nodeValue = w;
        var anh = document.createAttribute("height");
        anh.nodeValue = h;
        canvas.setAttributeNode(anw);
        canvas.setAttributeNode(anh);
        ctx.drawImage(that, 0, 0, w, h);
        // 图像质量
        if(obj.quality && obj.quality <= 1 && obj.quality > 0){
            quality = obj.quality;
        }
        // quality值越小，所绘制出的图像越模糊
        var base64 = canvas.toDataURL('image/jpeg', quality);
        // 回调函数返回base64的值
        callback(base64);
    }
 }
 function copyEvent () {
    // var data=$("#wechatNumber").html();
    var data = 'wufazhucexiaohai';
    copy_2.innerHTML = data;
    copy_1.value = data;
    if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
        //区分iPhone设备
        window.getSelection().removeAllRanges();//这段代码必须放在前面否则无效
        var Url2=document.getElementById("copy_2");//要复制文字的节点
        var range = document.createRange();
        // 选中需要复制的节点
        range.selectNode(Url2);
        // 执行选中元素
        window.getSelection().addRange(range);
        // 执行 copy 操作
        var successful = document.execCommand('copy');

        // 移除选中的元素
        window.getSelection().removeAllRanges();
    }else{
        var Url2=document.getElementById("copy_1");//要复制文字的节点
        Url2.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
    }
    showMsg('复制成功')
}
//提示弹框
function showMsg(msg) {
    var msgBox = document.getElementsByClassName('alert-info')[0];
    msgBox.children[0].innerText = msg;
    msgBox.style.display="block";

    setTimeout(function() {
        msgBox.style.display="none";
    }, 1500);
}