一个基于weui的表单添加页

1、公众号页面跳转规则：

* 公众号页面进入规则：

* 1.先请求接口获得一个URL

* 2.跳转请求的URL，腾讯会重定向到本地的页面

* 3.解析重定向的页面，获取code

* 4.传递code，获取到openid

* 5.openid是微信的唯一标识，拿到之后就可以请求自己的后台了（获取绑定用户列表、解绑、绑定等）

* */

2、上传附件的时候，是先上传保存到服务器拿到附件的id、src、name，直接根据sec显示，这里是转为base64显示的

/**
 * 上传附件
 * 1、先使用base64显示
 * 2、提交上传
 * 3.保存表单
 * */
function uploadAnyfilesFun() {
    var uploadFiles = document.querySelector('#upload_file');

    uploadFiles.addEventListener('change', function () {
        var file = this.files[0];

        // 图片上传后台

        let formData = new FormData();
        formData.append('file', file);
        $.ajax({
            url: baseUrl+'/wechat/opinion/upload',
            type: 'POST',
            traditional: true,
            headers: {'token': Sessiontoken},
            data: formData,
            processData: false,  //tell jQuery not to process the data
            contentType: false,  //tell jQuery not to set contentType
            success: function (data) {
                if (data.code != 0) {
                    $.toast("上传附件失败", 'forbidden')
                    return
                }else{
                    fileList.push(data.data)

                    //实例化fileReader,
                    let  fd = new FileReader();
                    //获取当前选择文件的类型
                    let fileType = file.type;
                    //调它的readAsDataURL并把原生File对象传给它，
                    fd.readAsDataURL(file);//base64

                    // base64显示图片
                    fd.onload = function(){
                        if(/^image\/[jpeg|png|jpg|gif]/.test(fileType)){
                            let s =  Date.parse(new Date())
                            let h = '<span>' +
                                '<img onclick="imgsAction(this,\''+data.data.id+'\')" src="'+this.result+'" alt="">' +
                                '</span>'
                            $(".imgsDemo").append(h)
                        }
                    }
                }
            }
        });


    }, false);
}

3、一个小知识点：数组中，根据索引删除数组中的元素

Array.prototype.delete=function(delIndex){
    var temArray=[];
    for(var i=0;i<this.length;i++){
        if(i!=delIndex){
            temArray.push(this[i]);
        }
    }
    return temArray;
}

// 删除保存的文件
let d = fileList.findIndex((item,index)=>{
    return item.id === s
})
fileList = fileList.delete(d)

4、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>咨询建议</title>
</head>
<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">

<link rel="stylesheet" href="../../src/dist/css/page.css">

<body>
<div class="weui-cells user-binding">
    <div class="weui-cells__tips">咨询建议</div>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <i class="iconfont iconyonghuming"></i>
        </div>
        <div class="weui-cell__bd">
            <p>姓名</p>
        </div>

        <div class="weui-cell__bd">
            <input class="weui-input" type="text" placeholder="请输入姓名" id="username">
        </div>
        <div class="weui-cell__ft" style="position: absolute;right:10px;">
            <input type="checkbox" style="position: relative;top:2px;margin-right: 4px;" id="isAnonymity">匿名
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <i class="iconfont icondianhua"></i>
        </div>
        <div class="weui-cell__bd">
            <p>电话</p>
        </div>

        <div class="weui-cell__bd">
            <input class="weui-input" type="text" placeholder="请输入您的联系电话" id="phone">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <i class="iconfont icondizhi"></i>
        </div>
        <div class="weui-cell__bd">
            <p>地址</p>
        </div>

        <div class="weui-cell__bd">
            <input class="weui-input" type="text"  placeholder="请输入您的详细地址" id="address">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <i class="iconfont iconSpare"></i>
        </div>
        <div class="weui-cell__bd">
            <p>反映事项</p>
        </div>

        <div class="weui-cell__bd">
            <input class="weui-input" type="text"  placeholder="请选择反映事项" id="type">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <i class="iconfont iconleixing"></i>
        </div>
        <div class="weui-cell__bd">
            <p>事项详情</p>
        </div>
        <div class="weui-cell__bd">
            <textarea class="weui-textarea" placeholder="请输入事项详情" rows="3" id="eventdetail"></textarea>
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <i class="iconfont icontec"></i>
        </div>
        <div class="weui-cell__bd">
            <p>上传图片</p>
        </div>
        <div class="weui-cell__bd">
            <div class="weui-cell__ft add-cell" onclick="uploadAnyfiles.uploadFilesFun()">+ 上传</div>
        </div>
    </div>
    <div class="weui-cell">
        <div class="imgsDemo"></div>
    </div>

    <div class="button_sp_area">
        <a href="javascript:;" class="weui-btn weui-btn_primary" onclick="doAction()">提交</a>
    </div>
</div>
<div class="showImgDemo">
    <img src="https://pic4.zhimg.com/50/v2-f171216c639bef831d765b41c359af4c_hd.jpg" alt="" onclick="hideBigImg()">
</div>
<div class="select_file" style="display: none;">
    <input type="file" accept="image/*" id="upload_file" capture="camera">
</div>

<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>

<!-- Dist -->
<script src="../../src/dist/js/index.js"></script>
<script src="../../src/dist/js/utils.js"></script>
<script src="../../src/dist/js/request.js"></script>
<script src="../../src/dist/js/uploadAnyfiles.js"></script>
<script>
    var wcode = '',
        openid = '';
    var customid = '';
    var fileList = [];
    const typeOption = [
        {
            title: "咨询",
            value: "1",
        },
        {
            title: "投诉",
            value: "2",
        },
        {
            title: "表扬",
            value: "3",
        }
    ]

    $(function(){
        var paras = location.search;            //search获得地址中的参数，内容为'?itemId=12'
        var result = paras.match(/[^\?&]*=[^&]*/g);     //match是字符串中符合的字段一个一个取出来，result中的值为['login=xx','table=admin']
        paras = {};                    //让paras变成没有内容的json对象
        for (i in result) {
            var temp = result[i].split('=');    //split()将一个字符串分解成一个数组,两次遍历result中的值分别为['itemId','xx']
            paras[temp[0]] = temp[1];
        }
        let code = paras.code;     //根据参数名"itemId"，获取参数值

        console.log(code)

        loadCsConter()
        return
        if(code){
            wcode = code
            getOpenId()
        }else{
            getWeiXinURL()
        }

        loadCsConter()
    })

    function loadCsConter() {
        $("#type").select({
            title: "反映事项",
            items: typeOption
        });

        uploadAnyfilesFun()
    }

    /**
     * 上传附件
     * 1、先使用base64显示
     * 2、提交上传
     * 3.保存表单
     * */
    function uploadAnyfilesFun() {
        var uploadFiles = document.querySelector('#upload_file');

        uploadFiles.addEventListener('change', function () {
            var file = this.files[0];

            // 图片上传后台

            let formData = new FormData();
            formData.append('file', file);
            $.ajax({
                url: baseUrl+'/wechat/opinion/upload',
                type: 'POST',
                traditional: true,
                headers: {'token': Sessiontoken},
                data: formData,
                processData: false,  //tell jQuery not to process the data
                contentType: false,  //tell jQuery not to set contentType
                success: function (data) {
                    if (data.code != 0) {
                        $.toast("上传附件失败", 'forbidden')
                        return
                    }else{
                        fileList.push(data.data)

                        //实例化fileReader,
                        let  fd = new FileReader();
                        //获取当前选择文件的类型
                        let fileType = file.type;
                        //调它的readAsDataURL并把原生File对象传给它，
                        fd.readAsDataURL(file);//base64

                        // base64显示图片
                        fd.onload = function(){
                            if(/^image\/[jpeg|png|jpg|gif]/.test(fileType)){
                                let s =  Date.parse(new Date())
                                let h = '<span>' +
                                    '<img onclick="imgsAction(this,\''+data.data.id+'\')" src="'+this.result+'" alt="">' +
                                    '</span>'
                                $(".imgsDemo").append(h)
                            }
                        }
                    }
                }
            });


        }, false);
    }

    // 获取openid，之后才能进行添加操作
    function getOpenId() {
        get("/wechat/binding/toIdentityBinding?code="+wcode, {}, function (data) {
            if (data.code === 0) {
                openid = data.data

            } else {
                $.toast('获取openid失败!', 'forbidden');
            }
        }, false, true);
    }

    //获取URL
    function getWeiXinURL() {
        get("/wechat/binding/getAuthUrl", {}, function (data) {
            if (data.code === 0) {
                let url = data.data
                url='https://open.weixin.qq.com/connect/oauth2/authorize?redirect_uri=http://zbcsrq.com:33813/pages/ConsultationAdvice/add.html&appid=wx60c25e54627b700d&response_type=code&scope=snsapi_base&state=#wechat_redirect'
                location.replace(url)
            } else {
                $.toast('获取URL失败!', 'forbidden');
            }
        }, false, true);
    }

    function hideBigImg() {
        $(".showImgDemo").hide()
    }

    function isPoneAvailable(poneInput) {
        var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
        if (!myreg.test(poneInput)) {
            return false;
        } else {
            return true;
        }
    }
    // 点击图片操作“
    function imgsAction(obj,s) {
        $.actions({
            actions: [{
                text: "删除图片",
                onClick: function () {
                    //调用删除图片接口，删除上传到服务器的图片 ==== 待定
                    $(obj).parent().remove()
                    // 删除保存的文件
                    let d = fileList.findIndex((item,index)=>{
                        return item.id === s
                    })
                    fileList = fileList.delete(d)

                }
            },{
                text: "查看大图",
                onClick: function () {
                    //do something
                    let src = $(obj).attr("src")
                    $(".showImgDemo img").attr("src",src)
                    $(".showImgDemo").show()
                }
            }]
        });
    }
    Array.prototype.delete=function(delIndex){
        var temArray=[];
        for(var i=0;i<this.length;i++){
            if(i!=delIndex){
                temArray.push(this[i]);
            }
        }
        return temArray;
    }
    function doAction(){
        let username = $("#username").val()
        let phone = $("#phone").val()
        let type=$("#type").val()
        let address=$("#address").val()
        let content=$("#eventdetail").val()

        let isAnonymity = $("#isAnonymity").prop("checked")
        if(!isAnonymity && username===''){
            $.toast("非匿名时请填写姓名", "text")
            return
        }
        if(phone === ''){
            $.toast("请输入联系电话", "text")
            return
        }
        if(!isPoneAvailable(phone)){
            $.toast("联系电话格式不正确", "text")
            return
        }
        if(type === ''){
            $.toast("请选择反映事项", "text")
            return
        }
        let opiniontype = typeOption.find((i,v)=>{
            if(v.title = type)return v.value
        })

        let saveDataForm = {
            openid:openid,
            name:username,
            phone,
            address,
            content,
            opiniontype,
            fileList:fileList
        }


        post('/wechat/opinion', JSON.stringify(saveDataForm), function (data) {
            if (data.code != 0) {
                $.toast(data.msg, 'forbidden')
                return
            }else{
                $.toast("保存成功", 'text')
                setTimeout(function () {
                    location=location
                },1000*2)
            }
        }, false, true);

    }
    //上传附件
    function clickfile() {
        $("#file").click()
    }
</script>
</body>
</html>

完整代码

一个基于weui的表单添加页

猜你喜欢