public/themes/simpleboot3/portal/salesmangoods/salesman_goods_add.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>学考无忧-添加商品</title>
    <link rel="stylesheet" href="__TMPL__/public/assets/css//mui.min.css" />
    <link rel="stylesheet" href="__TMPL__/public/assets/css//mui.picker.min.css" />
    <link rel="stylesheet" href="__TMPL__/public/assets/css//reset.css" />
    <link rel="stylesheet" href="__TMPL__/public/assets/css//log.css" />
    <style>
        .log_six_add_photos{
            padding: 0.15rem 0.2rem;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .log_six_photo_ones{
            width: 1.6rem;
            height: 1.6rem;
        }
        .log_six_add_imgs{
            width: 100%;
            height:1.5rem;
        }
        .log_six_add_titles{
            display: none;
        }
        .log_six_pictyre_imgs{
            width: 1.6rem;
            height: 1.6rem;
        }
        .log_six_pictyre_titles{
            display: none;
        }
    </style>
</head>

<body>
<div class="tx_mask_tongyi">
    <div class="tx_maskCon_school">
        <div class="three_model_school">
            <div class="three_model_school_data" style="display: block;">
                <div class="three_model_school_name there_unActive">一年级</div>
                <div class="three_model_school_name">二年级</div>
                <div class="three_model_school_name">三年级</div>
                <div class="three_model_school_name">四年级</div>
                <div class="three_model_school_name">五年级</div>
                <div class="three_model_school_name">六年级</div>
                <div class="three_model_school_name">初一</div>
                <div class="three_model_school_name">初二</div>
                <div class="three_model_school_name">初三</div>
                <div class="three_model_school_name">高一</div>
                <div class="three_model_school_name">高二</div>
                <div class="three_model_school_name">高三</div>
            </div>
        </div>
    </div>
</div>
<div class="log_top_co">
    <!-- 顶部 -->
    <div class=" order_top log_top_co">
        <a href="javascript:history.back(-1)">
            <img src="__TMPL__/public/assets/images/left.png" alt="" />
        </a>
        <p>添加商品</p>
    </div>
</div>
<!-- 添加照片 -->
<div class="log_six_add_photo">
    <div class="log_six_photo_one">
        <div class="log_six_add_img">
            <img src="__TMPL__/public/assets/images/jiahao.png" id="show_img" alt="" />
        </div>
        <div class="log_six_add_title">
            添加照片
        </div>
        <div class="input_file">
            <input type="file" id="img1_file_img" name="avatar" />
        </div>
    </div>
    <div class="log_six_photo_one">
        <div class="log_six_add_img">
            <img src="__TMPL__/public/assets/images/jiahao.png" id="thumbnail" alt="" />
        </div>
        <div class="log_six_add_title">
            添加缩略图
        </div>
        <div class="input_file">
            <input type="file" id="img_file_suolue" name="avatar" />
        </div>
    </div>

</div>
<div class="log_six_wire"></div>
<!-- 输入框 -->
<div class="log_six_input">
    <div class="log_two_input">
        <div class="log_two_input_one ">
            <div class="log_two_input_title">
                书籍
            </div>
            <div class="log_two_input_contant">
                <input type="text" placeholder="请输入书籍名称" name="book_name" />
            </div>
        </div>
        <div class="log_two_input_one ">
            <div class="log_two_input_title">
                佣金
            </div>
            <div class="log_two_input_contant">
                <input type="text" placeholder="请输入下级推广佣金" name="money" />
            </div>
        </div>
        <div class="log_two_input_one">
            <div class="log_two_input_title">
                售价
            </div>
            <div class="log_two_input_contant">
                <input type="text" placeholder="输入售价" name="price" />
            </div>
        </div>
        <div class="log_two_input_one">
            <div class="log_two_input_title">
                定价
            </div>
            <div class="log_two_input_contant">
                <input type="text" placeholder="输入定价" name="pricing" />
            </div>
        </div>
        <div class="log_six_input_one">
            <div class="log_two_input_title" style="margin-top: 0.09rem;">
                商品说明
            </div>
            <div class="log_six_input_contant">
                <textarea cols="20" rows="3" placeholder="请输入商品说明" id="instr"></textarea>
            </div>
        </div>
        <div class="log_two_input_one">
            <div class="log_two_input_title">
                书号
            </div>
            <div class="log_two_input_contant">
                <input type="text" placeholder="请输入书号" name="book_number" />
            </div>
        </div>
        <div class="log_two_input_one">
            <div class="log_two_input_title">
                纸张
            </div>
            <div class="log_two_input_contant">
                <input type="text" placeholder="请输入纸张" name="paper" />
            </div>
        </div>
        <div class="log_two_input_one">
            <div class="log_two_input_title">
                装订
            </div>
            <div class="log_two_input_contant">
                <input type="text" placeholder="请输入装订" name="binding" />
            </div>
        </div>
        <div class="log_two_input_one">
            <div class="log_two_input_title">
                开本
            </div>
            <div class="log_two_input_contant">
                <input type="text" placeholder="请输入开本" name="book_size" />
            </div>
        </div>
        <div class="log_two_input_one">
            <div class="log_two_input_title">
                印刷
            </div>
            <div class="log_two_input_contant">
                <input type="text" placeholder="请输入印刷" name="printing" />
            </div>
        </div>
        <div class="log_two_input_one">
            <div class="log_two_input_title">
                作者
            </div>
            <div class="log_two_input_contant">
                <input type="text" placeholder="请输入作者名称" name="author" />
            </div>
        </div>
        <div class="log_two_input_one">
            <div class="log_two_input_title">
                出版社
            </div>
            <div class="log_two_input_contant">
                <input type="text" placeholder="请输入出版社名称" name="press" />
            </div>
        </div>
        <div class="log_two_input_one">
            <div class="log_two_input_title">
                出版时间
            </div>
            <div class="log_two_input_contant">
                <input type="text" placeholder="请输入作者名称" name="press_time" />
            </div>
        </div>
    </div>
</div>
<div class="log_six_wire"></div>
<!-- 套装 -->
<div class="log_six_select">
    <div class="log_six_select_contant">
        <div class="log_two_input_one">
            <div class="log_two_input_title">
                套装
            </div>
            <div class="log_two_input_contant">
                <input type="text" placeholder="请输入套装数量" name="suit" />
            </div>
        </div>
        <div class="log_six_select_top log_six_select_nianji">
            <div class="log_six_select_left">
                <div class="log_six_select_one" >
                    适合年级
                </div>
                <div class="log_six_select_two log_six_nianji_contant" id="grade" >
                    请选择
                </div>
            </div>
            <div class="log_six_select_three">
                <img src="__TMPL__/public/assets/images/29.png" alt="" />
            </div>
        </div>
    </div>
</div>
<div class="log_six_wire"></div>
<div class="log_two_picture">
    <div class="log_two_picture_title">
        商品详情
    </div>
    <div class="log_six_file_picture">
        <div class="log_six_picture">
            <div class="log_six_picture_one">
                <div class="log_six_pictyre_img">
                    <img src="__TMPL__/public/assets/images/jiahao.png" alt="" id="img0" />
                </div>
                <div class="log_six_pictyre_title">
                    添加图片
                </div>
                <div class="input_files">
                    <input type="file" id="img0_file" name="avatar" />
                </div>
            </div>
        </div>
        <div class="log_six_picture">
            <div class="log_six_picture_one">
                <div class="log_six_pictyre_img">
                    <img src="__TMPL__/public/assets/images/jiahao.png" alt="" id="img1" />
                </div>
                <div class="log_six_pictyre_title">
                    添加图片
                </div>
                <div class="input_files">
                    <input type="file" id="img1_file" name="avatar" />
                </div>
            </div>
        </div>
        <div class="log_six_picture">
            <div class="log_six_picture_one">
                <div class="log_six_pictyre_img" onclick="openCamera()">
                    <!--<img src="__TMPL__/public/assets/images/jiahao.png" alt="" id="img2" />-->
                </div>
                <div class="log_six_pictyre_title">
                    添加图片
                </div>
                <div class="input_files">
                    <!--<input type="file" id="img2_file" name="avatar" />-->
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 保存 -->
<div class="log_two_bottom_btn" onclick="Sure_add()">
    确定添加
</div>
<script src="__TMPL__/public/assets/js/jquery.js"></script>
<script src="__TMPL__/public/assets/js/base.js"></script>
<script src="__TMPL__/public/assets/js/mui.min.js"></script>
<script src="__TMPL__/public/assets/js/mui.picker.min.js"></script>
<script src="__TMPL__/public/assets/js/jquery-3.2.1.min.js"></script>
<script src="__TMPL__/public/assets/js/city.data-3.js"></script>
<script src="__TMPL__/public/assets/js/uploadfile.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>

    function openCamera(){
        wx.config({$jssdk});
       /* $.post("{:url('Salesmangoods/getSignPackage')}",{},function (data) {
            data = JSON.parse(data);
            wx.config({
                debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,测试完成后需要关闭。
                appId: data.appId, // 必填，公众号的唯一标识
                timestamp: data.timestamp, // 必填，生成签名的时间戳
                nonceStr: data.nonceStr, // 必填，生成签名的随机串
                signature: data.signature,// 必填，签名（加密后，下文有实现）
                jsApiList: ['chooseImage'] // 必填，需要使用的JS接口列表，开发文档上有所有接口名称，根据需要选用就好。
            });
        });*/
        
        wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['original'], // 指定是原图还是压缩图，默认都有
            sourceType: ['album', 'camera'], // 指定来源是相册还是相机，默认都有
            success: function (res) {
                var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                wx.uploadImage({
                    localId: localIds.toString(), // 需要上传的图片的ID，由chooseImage接口获得
                    isShowProgressTips: 1, // 进度提示
                    success: function (res) {
                        var mediaId = res.serverId; // 返回图片的服务器端ID，即mediaId
                        //将获取到的 mediaId 传入后台 方法savePicture
                        /*$.post(path+"/getImage/savePicture",{"mediaId":mediaId,"tmp":"填写证件的正反面参数"},function(res){
                            //填写你自己的业务逻辑
                        });*/
                        console.log(res);
                    },
                    fail: function (res) {
                        alertModal('图片上传失败，请重试');
                    }
                });
            }
        });
    }
</script>
<script>
    /**
     *确定添加
     */
    function Sure_add(){
        show_img = $('#show_img')[0].src;
        if(show_img == "http://www.xkeasy.com/themes/simpleboot3/public/assets/images/jiahao.png"){
            show_img = '';
        }
        thumbnail = $('#thumbnail')[0].src;
        if(thumbnail == "http://www.xkeasy.com/themes/simpleboot3/public/assets/images/jiahao.png"){
            thumbnail = '';
        }
        book_name = $("input[name='book_name']").val();
        money = $("input[name='money']").val();
        price = $("input[name='price']").val();
        pricing = $("input[name='pricing']").val();
        instr = $('#instr').val();
        book_number = $("input[name='book_number']").val();
        paper = $("input[name='paper']").val();
        book_size = $("input[name='book_size']").val();
        binding = $("input[name='binding']").val();
        author = $("input[name='author']").val();
        press = $("input[name='press']").val();
        press_time = $("input[name='press_time']").val();
        suit = $("input[name='suit']").val();
        printing = $("input[name='printing']").val();
        grade = $("#grade").text();
        img0 = $('#img0')[0].src;
        if(img0 == "http://www.xkeasy.com/themes/simpleboot3/public/assets/images/jiahao.png"){
            img0 = '';
        }
        img1 = $('#img1')[0].src;
        if(img1 == "http://www.xkeasy.com/themes/simpleboot3/public/assets/images/jiahao.png"){
            img1 = '';
        }
        img2 = $('#img2')[0].src;
        if(img2 == "http://www.xkeasy.com/themes/simpleboot3/public/assets/images/jiahao.png"){
            img2 = '';
        }

        $.post("{:url('Salesmangoods/Salesman_goods_add')}",{show_img:show_img,thumbnail:thumbnail,book_name:book_name,money:money,price:price,pricing:pricing,instr:instr,book_number:book_number,paper:paper,book_size:book_size,binding:binding,author:author,press:press,press_time:press_time,suit:suit,grade:grade,img0:img0,img1:img1,img2:img2,printing:printing},function(data){
                if(data){
                    window.location.href = "{:url('salesmangoods/salesman_goods')}";
                }else{
                    alert('添加失败');
                }
        });
    }


</script>
<script>

    //选择年级
    $(".log_six_select_nianji").click(function(){
        $(".tx_mask_tongyi").css({
            display: "block"
        });
    })
    $(".tx_mask_tongyi .three_model_school_name").click(function(){
        var index = $(this).index();
        $('.log_six_nianji_contant').text($(this).text()).css("color", "#333");
        $(".tx_mask_tongyi").hide();
    })
    //取消弹窗
    $(document).mouseup(function(e) {
        var _con = $('.tx_maskCon_school');
        if(!_con.is(e.target) && _con.has(e.target).length === 0) {
            $('.tx_mask_tongyi').hide()
        }
    })
    //上传图片

    $(function() {
        $("#img1_file_img").change(function() {
            var img_size = $(this).get(0).files[0].size;
            if(img_size > 1024000) {
                alert("上传图片过大，请上传小于1M的图片");
            } else {
                $.ajaxFileUpload({
                    url: '/portal/Personalcenter/image_one_up', //用于文件上传的服务器端请求地址
                    secureuri: false, //是否需要安全协议，一般设置为false
                    fileElementId: 'img1_file_img', //文件上传域的ID
                    dataType: 'json', //返回值类型 一般设置为json
                    success: function(data) { //服务器成功响应处理函数
                        $('#show_img').attr("src","/uploads/"+data.data);
                        $(".log_six_add_photo").addClass("log_six_add_photos");
                        $(".log_six_photo_one").addClass("log_six_photo_ones");
                        $(".log_six_add_img").addClass("log_six_add_imgs");
                        $(".log_six_add_title").addClass("log_six_add_titles");

                    }
                });
            }
        });
        $("#img_file_suolue").change(function() {
            var img_size = $(this).get(0).files[0].size;
            if(img_size > 1024000) {
                alert("上传图片过大，请上传小于1M的图片");
            } else {
                $.ajaxFileUpload({
                    url: '/portal/Personalcenter/image_one_up', //用于文件上传的服务器端请求地址
                    secureuri: false, //是否需要安全协议，一般设置为false
                    fileElementId: 'img_file_suolue', //文件上传域的ID
                    dataType: 'json', //返回值类型 一般设置为json
                    success: function(data) { //服务器成功响应处理函数
                        $('#thumbnail').attr("src","/uploads/"+data.data);
                        $(".log_two_pi_one").addClass("log_two_pi_ones");
                        $(".log_two_pi_one_p").addClass("log_two_pi_one_ps");
                        $(".log_two_pi_one_icon").addClass("log_two_pi_one_icons");
                    }
                });
            }
        });

        $("#img0_file").change(function() {
            var img_size = $(this).get(0).files[0].size;
            if(img_size > 1024000) {
                alert("上传图片过大，请上传小于1M的图片");
            } else {
                $.ajaxFileUpload({
                    url: '/portal/Personalcenter/image_one_up', //用于文件上传的服务器端请求地址
                    secureuri: false, //是否需要安全协议，一般设置为false
                    fileElementId: 'img0_file', //文件上传域的ID
                    dataType: 'json', //返回值类型 一般设置为json
                    success: function(data) { //服务器成功响应处理函数
                        $('#img0').attr("src","/uploads/"+data.data);
                        $(".log_six_pictyre_img").addClass("log_six_pictyre_imgs");
                        $(".log_six_pictyre_title").addClass("log_six_pictyre_titles");

                    }
                });
            }
        });

        $("#img1_file").change(function() {
            var img_size = $(this).get(0).files[0].size;
            if(img_size > 1024000) {
                alert("上传图片过大，请上传小于1M的图片");
            } else {
                $.ajaxFileUpload({
                    url: '/portal/Personalcenter/image_one_up', //用于文件上传的服务器端请求地址
                    secureuri: false, //是否需要安全协议，一般设置为false
                    fileElementId: 'img1_file', //文件上传域的ID
                    dataType: 'json', //返回值类型 一般设置为json
                    success: function(data) { //服务器成功响应处理函数
                        $('#img1').attr("src","/uploads/"+data.data);
                        $(".log_six_pictyre_img").addClass("log_six_pictyre_imgs");
                        $(".log_six_pictyre_title").addClass("log_six_pictyre_titles");
                    }
                });
            }
        });

        $("#img2_file").change(function() {
            var img_size = $(this).get(0).files[0].size;
            if(img_size > 1024000) {
                alert("上传图片过大，请上传小于1M的图片");
            } else {
                $.ajaxFileUpload({
                    url: '/portal/Personalcenter/image_one_up', //用于文件上传的服务器端请求地址
                    secureuri: false, //是否需要安全协议，一般设置为false
                    fileElementId: 'img2_file', //文件上传域的ID
                    dataType: 'json', //返回值类型 一般设置为json
                    success: function(data) { //服务器成功响应处理函数
                        $('#img2').attr("src","/uploads/"+data.data);
                        $(".log_six_pictyre_img").addClass("log_six_pictyre_imgs");
                        $(".log_six_pictyre_title").addClass("log_six_pictyre_titles");
                    }
                });
            }
        });

    });
</script>
</body>

</html>