shop--10.商品--商品編輯（前端）及調試注意

productoperation.js

 

/**
 *  由於商品的添加和編輯複用同一個頁面，因此須要根據url中的商品Id來判斷
 */
$(function(){
    //經過url是否含有productId來判斷是添加商品仍是編輯
    var productId = getQueryString('productId');
    // 標示符  productId非空則爲true即編輯，不然爲添加商品
    var isEdit = productId ? true : false ;

    // 商品添加URL
    var addProductUrl = '/o2o/shopadmin/addproduct';
    // 商品編輯URL  
    var editProductUrl = '/o2o/shopadmin/modifyproduct';
    // 獲取商品初始化信息的URL  根據頁面原型只須要獲取productCategory便可，後臺調用以前寫好的路由方法便可
    var categoryUrl = '/o2o/shopadmin/getproductcategorylist';
    // 經過productId獲取商品信息的URL
    var infoUrl = '/o2o/shopadmin/getproductbyid?productId=' + productId;

    // 經過標示符，肯定調用的方法
    if(isEdit){
        // 爲true，則根據productId調用獲取product信息的方法  
        getInfo(productId);
    }else{
        // 爲false，則初始化新增product頁面
        getCategory();
    }

    /**
     * 始化新增product頁面
     * 
     * 根據頁面原型和數據模型，須要加載該shop對應的productCategory信息(shop信息從服務端session中獲取)
     */
    function getCategory(){
        $.getJSON(categoryUrl,
                function(data){
                    if(data.success){
                        // 設置product_category
                        var productCategoryTempHtml = '';
                        data.productCategoryList.map(function(item, index) {
//                          productCategoryTempHtml += '<option data-id="'
//                                  + item.productCategoryId + '">' + item.productCategoryName
//                                  + '</option>';
                            productCategoryTempHtml += '<option data-value="'
                                + item.productCategoryId + '">'
                                + item.productCategoryName + '</option>';
                        });
                        $('#product-category').html(productCategoryTempHtml);
                    }else{
                        $.toast(data.errMsg)
                    }
        });
    };

    /**
     * 點擊控件的最後一個且圖片數量小於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">');
        }
    });
//編輯
    function getInfo(productId){
        $.getJSON(
                infoUrl,
                function(data) {
                    if (data.success) {
                        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;
                        optionArr.map(function(item, index) {
                                    var isSelect = optionSelected === item.productCategoryId ? 'selected'
                                            : '';
                                    optionHtml += '<option data-value="'
                                            + item.productCategoryId
                                            + '"'
                                            + isSelect
                                            + '>'
                                            + item.productCategoryName
                                            + '</option>';
                                });
                        $('#product-category').html(optionHtml);
                    }
                });
    };
    /**
     * 提交按鈕的響應時間,分別對商品添加和商品編輯作不一樣的相應
     */
    $('#submit').click(
            function(){
                // 建立商品Json對象，並從表單對象中獲取對應的屬性值
                var product = {};

                // 若是是編輯操做,須要傳入productId
                if(isEdit){
                    product.productId = productId;
                }

                product.productName = $('#product-name').val();
                product.productDesc = $('#product-desc').val();

                // 獲取商品的特定目錄值
                product.productCategory = {
                        productCategoryId : $('#product-category').find('option').not(
                                function() {
                                    return !this.selected;
                                }).data('value')
                    };

                product.priority = $('#priority').val();
                product.normalPrice = $('#normal-price').val();
                product.promotionPrice = $('#promotion-price').val();

                // 生成表單對象用於接收參數並傳遞給後臺
                var formData = new FormData();

                // 縮略圖 （只有一張），獲取縮略圖的文件流
                var thumbnail = $('#small-img')[0].files[0];
                formData.append('thumbnail',thumbnail);

                // 圖片詳情
                $('.detail-img').map(
                        function(index, item) {
                            // 判斷該控件是否已經選擇了文件   
                            if ($('.detail-img')[index].files.length > 0) {
                                // 將第i個文件流賦值給key爲productImgi的表單鍵值對裏
                                formData.append('productImg' + index,
                                        $('.detail-img')[index].files[0]);
                            }
                        });
                // 將product 轉換爲json ,添加到forData
                formData.append('productStr', JSON.stringify(product));

                // 獲取表單中的驗證碼
                var verifyCodeActual = $('#j_captcha').val();
                if (!verifyCodeActual) {
                    $.toast('請輸入驗證碼！');
                    return;
                }
                formData.append("verifyCodeActual", verifyCodeActual);


                // 使用ajax異步提交
                $.ajax({
                    url: (isEdit ? editProductUrl : addProductUrl),
                    type: 'POST' ,
                    data : formData,
                    contentType : false,
                    processData : false,
                    cache : false,
                    success: function(){
                        console.log(data)
                        if (data.success) {
                            $.toast('提交成功！');
                            $('#captcha_img').click();
                        } else {
                            $.toast('提交失敗！');
                            $('#captcha_img').click();
                        }
                    },
                error:function(err){
                    console.log(err.status);
                    console.log('異常');
                  }
                });
            });
});

 

在調試的時候須要注意：要先給currentShop賦值！！！！