码迷,mamicode.com
首页 > 其他好文 > 详细

校园商铺-8商品模块-5商品添加之前端实现

时间:2020-03-11 21:00:39      阅读:84      评论:0      收藏:0      [点我收藏+]

标签:style   his   ISE   控件   formdata   ctc   mat   元素   proc   

shop/shopoperation.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>商品编辑</title>
<meta name="description"
    content="MSUI: Build mobile apps with simple HTML, CSS, and JS components.">
<meta name="author" content="阿里巴巴国际UED前端">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">

<!-- Google Web Fonts -->

<link rel="stylesheet"
    href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<link rel="stylesheet"
    href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
<link rel="stylesheet" href="../resources/css/shop/productmanagement.css" >
</head>
<body>
    <header class="bar bar-nav">
        <h1 class="title">商品编辑</h1>
    </header>
    <div class="content">
        <div class="list-block">
            <ul>
                <li><!-- 一个li表示一行 -->
                    <div class="item-content">
                        <div class="item-media">
                            <i class="icon icon-form-name"></i>
                        </div>
                        <div class="item-inner">
                            <div class="item-title label">商品名称</div>
                            <div class="item-input">
                                <input type="text" id="product-name" placeholder="商品名称">
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-media">
                            <i class="icon icon-form-email"></i>
                        </div>
                        <div class="item-inner">
                            <div class="item-title label">目录</div>
                            <div class="item-input">
                                <select id="category">
                                
                                </select>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-media">
                            <i class="icon icon-form-email"></i>
                        </div>
                        <div class="item-inner">
                            <div class="item-title label">优先级</div>
                            <div class="item-input">
                                <input type="number" id="priority" placeholder="数字越大越排前">
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-media">
                            <i class="icon icon-form-email"></i>
                        </div>
                        <div class="item-inner">
                            <div class="item-title label">原价</div>
                            <div class="item-input">
                                <input type="number" id="normal-price" placeholder="可选">
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-media">
                            <i class="icon icon-form-email"></i>
                        </div>
                        <div class="item-inner">
                            <div class="item-title label">现价</div>
                            <div class="item-input">
                                <input type="number" id="promotion-price" placeholder="可选">
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-media">
                            <i class="icon icon-form-email"></i>
                        </div>
                        <div class="item-inner">
                            <div class="item-title label">积分</div>
                            <div class="item-input">
                                <input type="number" id="point" placeholder="可选">
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-media">
                            <i class="icon icon-form-email"></i>
                        </div>
                        <div class="item-inner">
                            <div class="item-title label">缩略图</div>
                            <div class="item-input">
                                <input type="file" id="small-img">
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-media">
                            <i class="icon icon-form-email"></i>
                        </div>
                        <div class="item-inner detail-img-div">
                            <div class="item-title label">详情图片</div>
                            <div class="item-input" id="detail-img">
                                <input type="file" class="detail-img" >
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-media">
                            <i class="icon icon-form-email"></i>
                        </div>
                        <div class="item-inner">
                            <div class="item-title label">商品描述</div>
                            <div class="item-input">
                                <textarea type="product-desc" placeholder="商品描述"></textarea>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-media">
                            <i class="icon icon-form-email"></i>
                        </div>
                        <div class="item-inner">
                            <label for="j_captcha" class="item-title label">验证码</label>
                            <input id="j_captcha" name="j_captcha" type="text" class="form-control in" placeholder="验证码" />
                            <div class="item-input">
                                <img id="captcha_img" alt="点击更换" title="点击更换"
                                    onclick="changeVerifyCode(this)" src="../Kaptcha" />
                                </div>
                            </div>
                        </div>
                </li>
            </ul>
            <div class="content-block">
                <div class="row">
                    <div class="col-50">
                        <!-- 点击返回,返回到店铺管理页 -->
                        <a href="/o2o/shopadmin/productmanage" class="button button-big button-fill button-danger">返回商品管理</a>
                    </div>
                    <div class="col-50">
                        <!--  -->
                        <a href="#" class="button button-big button-fill"
                            id="submit">提交</a>
                    </div>
                </div>
            </div>
            
        <script type='text/javascript'
            src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
        <script type='text/javascript'
            src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
        <script type='text/javascript'
            src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='../resources/js/common/common.js'
            charset="utf-8"></script>
        <script type='text/javascript'
            src='../resources/js/shop/productoperation.js' charset="utf-8"></script>
</body>
</html>

productoperation.js

/**
 * 
 */
$(function(){
    //从URL里获取productId参数的值
    var productId = getQueryString('productId');
    //通过productId获取商品信息的URL
    var infoUrl = '/o2o/shopadmin/getproductbyid?productId=' + productId;
    //获取当前店铺设定的商品类别列表的URL
    var categoryUrl = '/o2o/shopadmin/getproductcagtegorylist';
    //更新商品信息的URL
    var productPostUrl = '/o2o/shopadmin/modifyproduct';
    //由于商品添加和编辑使用的同一个页面,该标识符用来表明本次是添加还是编辑操作
    var isEdit = false;
    if(productId){
        //若有productId,则为编辑操作
        isEdit = true;
    }else{
        getCategory();
        productPostUrl = "/o2o/shopadmin/addproduct";
    }
    //获取需要编辑的商品的商品信息,并赋值给表单
    function getinfo(id){
        $.getJSON(infoUrl,function(data){
            if(data.success){
                //从返回的JSON当中获取product对象的信息,并赋值给表单
                var product = data.product;
                $('#product-name').val(product.productName);
                $('#product-desc').val(product.productDesc);
                $('#priority').val(product.priority);
                $('#normal-price').val(product.normalPrice);
                $('#promotion-price').val(product.promotionPrice);
                //获取原本的商品类别以及该店铺的所有商品列表
                var optionHtml = '';
                var optionArr = data.productCategoryList;
                var optionSelected = product.productCategory.productCategoryId;
                //生成前端的html商品类别列表,并默认选择商品类别
                optionArr.map(function(item,list){
                    var isSelect = optionSelected === item.productCategoryId? 'selected':'';
                    optionHtml += '<option data-value="' 
                        +item.productCategoryId +'"' + isSelect + '>'
                        +item.productCateogoryName+'</option>';
                });
                $('#category').html(optionHtml);
            }
        });
    }
    //为商品添加操作提供该店铺下的所有商品类别列表
    function getCatagory(){
        $.getJSON(categoryUrl, function(data){
            if(data.success){
                var productCategoryList = data.data;
                var optionHtml = '';
                productCategoryList.map(function(item,index){
                    optionHtml += '<option data-value="'
                        + item.productCategoryId +'">'
                        + item.productCategoryName +'</option>';
                });
                $('#category').html(optionHtml);
            }
        });
    }
    //针对商品详情图空间组,若该空间组的最后一个元素发生变化(即上传了图片)
    //且控件总数未超过6个,则生成新的文件上传控件
    $('#detail-img-div').on('change','.detail-img:last-child',function(){
        if($('.detail-img').length < 6){
            $('#detail-img').append('<input type="file" class="detail-img" >');
        }
    });
    //提交按钮的事件响应,分别对商品添加和编辑操作做不同响应
    $('#submit').click(function(){
        //创建商品json对象,并从表单里面获取对应的属性值
        var product={}
        product.productName = $('#product-name').val();
        product.productDesc = $('#product-desc').val();
        product.priority = $('prority').val();
        product.normalPrice = $('normal-price').val();
        product.promotionPrice = $('promotion-price').val();
        //获取选定的商品类别值
        product.productCagtegory = {
                productCateogryId:$('#category').find('option').not(function(){
                    return !this.selected;
                }).data('value')
        };
        product.productId = productId;
        //获取缩略图文件流
        var thumbnail = $('#small-img')[0].files[0];
        //生成表单对象,用于接收参数并传递给后台
        var formData = new FormData();
        formdata.append('thumbnail',thumbnail);
        //遍历商品详情图控件,获取里面的文件流
        $('.detail-img').map(function(idnex,item){
            //判断该控件是否已选择了控件
            if($('.detail-img')[index].file.length > 0){
                //将第i个文件流赋值给key为productImgi的表单键值对里
                formData.append('productImg'+index,$('.detail-img')['index'].files[0]);
            }
        });
        //从将product json对象转成字符流保存至表单对象key为productStr的键值对里
        formData.append('productStr',JSON.stringify(product));
        //获取表单里输入的验证码
        var verifyCodeActural = $('#j_captcha').val();
        if(!verifyCodeActural){
            $.toast('请输入验证码!');
            return;
        }
        formData.append('verifyCodeActural',verifyCodeActural);
        //将数据提交至后台处理相关操作
        $.ajax({
            url:productPostUrl,
            type:'POST',
            data:formdata,
            contentType:false,
            processdata:false,
            cache:false,
            success:function(data){
                if(data.sucess){
                    $.toast('提交成功!'),
                    $('#captcha_img').click();
                }else{
                    $.toast('提交失败'),
                    $('#captcha_img').click();
                }
            }
        });
    })
});

校园商铺-8商品模块-5商品添加之前端实现

标签:style   his   ISE   控件   formdata   ctc   mat   元素   proc   

原文地址:https://www.cnblogs.com/csj2018/p/12465264.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!