产品详情页配送送信息联动的实现逻辑

以你之姓@ 2022-08-19 11:17 133阅读 0赞

#### 功能图如下： ####

![Center][]

需要实现选择运送国家时，相应的运送方式随着改变，同时运送价格也改变

#### 后台返回的部分数据如下： ####

{
        "jsonrpc":"2.0",
        "id":null,
        "result":{
            "delivery_info":{
                "1":[//对应的country   id
                    {  //  country支持的运送方式
                        "delivery_price":44.5,
                        "delivery_name":"邮政挂号小包"
                    }
                ],
          
                "235":[
                    {
                        "delivery_price":18.1,
                        "delivery_name":"邮政挂号小包"
                    },
                    {
                        "delivery_price":31,
                        "delivery_name":"线上e邮宝"
                    },
                    {
                        "delivery_price":31,
                        "delivery_name":"线下e 邮宝"
                    }
                ],
                
            },
            "countries":[
                [
                    235,//country id
                    "美国" // country 名
                ],
                [
                    233,
                    "英国"
                ],
                [
                    3,
                    "Afghanistan, Islamic State of"
                ],
                [
                    6,
                    "Albania"
                ],
                
            ]
        }
    }

#### 国家下拉列表的实现： ####

将countries字段循环绑定到下拉列表上，xml对应的如下：

<div t-attf-class="form-group col-lg-6 col-md-6 product_shipping"  id="product_shipping" >
         <label class="control-label" for="shipping_country_id">运至</label>
         <button type="button" name="product_shipping_country_id" class="btn btn-default dropdown-toggle country_ul" id="dropdownMenu2"
                 data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"  value="United States" ng-click="search()">
            <span class="cty-name" id="s_cty-name">United Status</span>
                                             
            <span class="caret" id="s_caret"></span>
         </button>
         <div class="btn_search btn-default dropdown-toggle search_country">
              <input type="text" id="s_country" style="border:none;" placeholder="搜索(国家名)" ng-model="product_query.value"/>
         </div>
    //国家下拉列表
        <ul class="dropdown-menu dp-menu-ul" aria-labelledby="dropdownMenu2" >
             <li ng-repeat="country in countries | filter:product_query.value">
                 <a href="javascript:;" value="{
       {country[0]}}"   data-index= "{
       {$index}}" data-delivery-fee="{
       {delivery_info[country[0]]}}" 
                    ng-bind="country[1]"></a>
             </li>
        </ul>
    </div>

效果图如下：

![Center 1][]

为了要显示所选择的国家对应的运送方式，可以从后台返回的数据delivery\_info中找到当前国家的id对应的运送信息和价格。

$scope.transportInfo = $scope.delivery_info[$scope.countries[$scope.curSelectedIndexTop][0]];

$scope.curSelectedIndexTop记录当前选中的是countries中的第几个国家，之所以需要该字段来记录，是因为在后面改变商品数量，重新获得运送信息和价格时，仍然需要保证是上次所选中的国家。

运送方式对应的xml文件内容如下：

<div class="product_shipping_fee col-lg-6 col-md-6 product_shipping" id="deli-mf">
    	   <label class="control-label label-txt" for="">运送方式</label>
    	   <div class="shipping_fee_type">
    	           <button type="button" class="btn btn-default dropdown-toggle transport_ul"
    	                id="dropdownMenu-ship" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" ng-click="delivultoggle()">
    	               <span class="cty-name" id="s_deliv-name">The Poste</span>
    	                <span class="caret" id="s_deliv-caret"></span>
    	            </button>
    	            <ul class="dp-menu-ul dp-ship-ls" aria-labelledby="dropdownMenu-ship" ng-show="showdelivul">
    	                <li ng-repeat="delivery in transportInfo">
    	                    <a href="javascript:;" ng-bind="delivery.delivery_name" data-price="{
       {delivery.delivery_price}}" data-index="{
       {$index}}"></a>
    	                </li>
    	            </ul>
    	    </div>

</div>

同样需要一个字段来记录当前选中的配送方式,从而获得对应的运送价格

$scope.shipMethodIndex
    $scope.ship_price = $scope.transportInfo[$scope.shipMethodIndex].delivery_price;

运送价格对应的xml文件内容如下：

那么当选择不同的国家时，对应的运送信息和价格如何随着改变呢？

我在每个国家对应的a标签中设置了data-index,记录它是第几个国家，同时，将该国家的运送信息绑定到data-delivery-fee上。这样当点击选择不同的国家时，改变transportInfo和curSelectedIndexTop。

<a href="javascript:;" value="{
       {country[0]}}"   data-index= "{
       {$index}}" data-delivery-fee="{
       {delivery_info[country[0]]}}"     ng-bind="country[1]"></a>
    scope.transportInfo = $(this).data('delivery-fee');
    scope.curSelectedIndexTop = parseInt($(this).data('index'));//记录当前选中的是哪个国家

此外，改变运送国家时，将当前的运输方式默认设置为默认第一个：

$('#s_deliv-name').text(scope.transportInfo[0].delivery_name);
    scope.ship_price = scope.transportInfo[0].delivery_price;

当改变运输方式时，让运输价格随着改变，实现逻辑和改变运送国家让运输信息随着改变一样

以上便是大致的联动逻辑。那么当改变商品数量时如何使得对应的价格随着更新呢？

触发商品数量改变的点击事件时，重新向后台发送请求取得数据。

$scope.delivery_info = data.delivery_info;
    $scope.transportInfo = $scope.delivery_info[$scope.countries[$scope.curSelectedIndexTop][0]];
    if($scope.transportInfo.length) {
         $('#s_deliv-name').text($scope.transportInfo[$scope.shipMethodIndex].delivery_name);
         $scope.ship_price = $scope.transportInfo[$scope.shipMethodIndex].delivery_price;
    }

这里会利用记录的$scope.curSelectedIndexTop，$scope.shipMethodIndex仍然显示之前选中的国家。

因为在页面中有两个地方需要展示运输信息，所以逻辑相比于单个来说会麻烦一些，之前碰到的问题是，改变其中一个总是时不时的影响另一个，所以需要不同的变量来保存格式的国家和运送信息，  
我这里的定义变量如下：

* $scope.delivery_info = data.delivery_info; 商品详情部分 所有国家的运送信息
        * $scope.delivery_info_ship; 运送信息部分 所有国家的运送信息
        * $scope.transportInfo; 商品详情部分 当前所选国家对应运送信息
        * $scope.deliveryDetail; 运送信息部分 当前所选国家对应运送信息
        * $scope.curSelectedIndexTop; 商品详情部分 记录当前选中的country
        * $scope.curSelectedIndex；运送信息部分 记录当前选中的country
        * $scope.shipMethodIndex; 商品详情部分 记录当前选中的运输方式

此外，我利用了index来区分当前到底在改变商品详情部分还是运送信息部分的数量。

//数量改变时的请求处理
    //产品详情部分数量改变
    if(parseInt($elem.data('index')) === 0) {
    $scope.delivery_info = data.delivery_info;
    $scope.transportInfo = $scope.delivery_info[$scope.countries[$scope.curSelectedIndexTop][0]];
    if($scope.transportInfo.length) {
         $('#s_deliv-name').text($scope.transportInfo[$scope.shipMethodIndex].delivery_name);
         $scope.ship_price = $scope.transportInfo[$scope.shipMethodIndex].delivery_price;
    }
    }//配送信息部分数量改变
    else if(parseInt($elem.data('index')) === 1) {
    $scope.delivery_info_ship = data.delivery_info;
    $scope.deliveryDetail = $scope.delivery_info_ship[$scope.countries[$scope.curSelectedIndex][0]];
    }

完整的js代码如下：

//angular.module('product.description');
    /**
        * $scope.delivery_info = data.delivery_info; 商品详情部分 所有国家的运送信息
        * $scope.delivery_info_ship; 运送信息部分 所有国家的运送信息
        * $scope.transportInfo; 商品详情部分 当前所选国家对应运送信息
        * $scope.deliveryDetail; 运送信息部分 当前所选国家对应运送信息
        * $scope.curSelectedIndexTop; 商品详情部分 记录当前选中的country
        * $scope.curSelectedIndex；运送信息部分 记录当前选中的country
        * $scope.shipMethodIndex; 商品详情部分 记录当前选中的运输方式
    
        页面初始化和每次商品数量改变时发送请求，得到新的数据，将每个国家对应的运输信息绑定到对应的a标签中，
        改变国家时取出对应的信息，然后改变显示的运输方式和价格。
        注意区分 [商品详情部分] 的运送信息  和   [运送信息部分] 的运送信息，改变其中一个的数量时不能影响另一个的运送信息
    */
    
    var app= angular.module('product.description', ["ui.bootstrap", "ngSanitize","highcharts-ng"]);
    app.controller('desController', function ($scope, $sce, $log, $http, $location) {
    
        $scope.product_template_id = parseInt($('#product_comments_li').data('id'), 10);
        $scope.product_description_images = [];
        $scope.curSelectedIndexTop = 0;
        $scope.curSelectedIndex = 0;
        $scope.shipMethodIndex = 0;
        $scope.init = true;
        $scope.description_html ='';
        $scope.extractCountry = function($elem){
            var jsonp = {
                jsonrpc: "2.0",
                method: "call",
                params: {
                    quantity: parseInt($elem.val())
                }
            };
            if(jsonp.params.quantity <= 0) {
                jsonp.params.quantity = 1;
                $elem.val(1);
            }
            $http.post('/shop/product/country/'+ $scope.product_template_id ,jsonp)
                .success(function(data){
                    data = data.result;
                    $scope.countries = data.countries;
                    
                    //页面初始化
                    if($scope.init) {
                        //产品详情部分的delivery_info，包含所有国家的运送信息
                        $scope.delivery_info = data.delivery_info;
                        //配送信息部分的delivery_info，包含所有国家的运送信息
                        $scope.delivery_info_ship = data.delivery_info;
    
                        //当前所选国家对应的运输信息
                        $scope.transportInfo = $scope.delivery_info[$scope.countries[$scope.curSelectedIndexTop][0]];
                        $scope.deliveryDetail = $scope.delivery_info_ship[$scope.countries[$scope.curSelectedIndex][0]];
                        //初始化选中的国家,运输方式，价格
                        $('#s_deliv-name').text($scope.transportInfo[$scope.shipMethodIndex].delivery_name);
                        $('#s_cty-name_btm').text($scope.countries[$scope.curSelectedIndex][1]);
                        $('#s_cty-name').text($scope.countries[$scope.curSelectedIndexTop][1]);
                        $scope.ship_price = $scope.transportInfo[$scope.shipMethodIndex].delivery_price;
                        $scope.init = false;
                    }else {
                        //数量改变时的请求处理
                        //产品详情部分数量改变
                        if(parseInt($elem.data('index')) === 0) {
                            $scope.delivery_info = data.delivery_info;
                            $scope.transportInfo = $scope.delivery_info[$scope.countries[$scope.curSelectedIndexTop][0]];
                            if($scope.transportInfo.length) {
                                 $('#s_deliv-name').text($scope.transportInfo[$scope.shipMethodIndex].delivery_name);
                                 $scope.ship_price = $scope.transportInfo[$scope.shipMethodIndex].delivery_price;
                            }
                        }//配送信息部分数量改变
                        else if(parseInt($elem.data('index')) === 1) {
                            $scope.delivery_info_ship = data.delivery_info;
                            $scope.deliveryDetail = $scope.delivery_info_ship[$scope.countries[$scope.curSelectedIndex][0]];
                        }
                    }
    
                })
        };
        if($scope.product_template_id && $scope.product_template_id > 0) {
            // $('.search_country').css('display','block');
            // $('.dropdown-menu').css('display','block');
            $('.dp-ship-ls').css('display','block');
            $scope.extractCountry($('#product_quantity'));
        }
    
        $scope.extractDescription = function(){
            var $description = $('#product_full_description'),
                url;
            if($description.data('add-need-desc')){
                url = $description.data('url');
                $http.post("/desc/", {
                    'url' : url
                }).success(function (data) {
                    if(data.status == 200){
                        $description.html('<div class="description_table">'+data.table+'</div>');
                        $description.append(data.desc);
                    }
                });
            }
        };
        
        
        $scope.zip_dataPackage = function(){
            var uuid=$('#epic-buy').data('uuid');
            //console.log(uuid);
            var form2 = document.createElement("form"),
                input = document.createElement("input");
            form2.id = "data_package_form";
            form2.name = "data_package_form";
    
            // 添加到 body 中
            document.body.appendChild(form2);
    
            // 创建一个输入
    
            // 设置相应参数
            input.type = "text";
            input.name = "uuid";
            input.value = uuid;
    
            // 将该输入框插入到 form 中
            form2.appendChild(input);
    
    
    
            // form 的提交方式
            form2.method = "GET";
            // form 提交路径
            form2.action = "/tornado/get/packet";
            //event.preventDefault()
            // 对该 form 执行提交
            form2.submit();
            // 删除该 form
            document.body.removeChild(form2);
        };
        $scope.comments = [];
        $scope.comments_count = 0;
        $scope.currentPage = 2;
        $scope.totalItems = 100;
        $scope.itemsPerPage = 5;
        $scope.showProductDetail=true;
        $scope.showComments=false;
        $scope.showShippingInfo=false;
        $scope.showTrend=false;
        $scope.text = "";
        $scope.currentPage = 1;
        $scope.items_per_page = 5;
        $scope.extractDescription();
        $scope.get_comments();
        //$scope.zip_images();
    
        $scope.toProductDetail = function() {
            $scope.showProductDetail=true;
            $scope.showComments=false;
            $scope.showShippingInfo=false;
            $scope.showTrend=false;
        };
        $scope.toComments = function() {
            $scope.showProductDetail=false;
            $scope.showComments=true;
            $scope.showShippingInfo=false;
            $scope.showTrend=false;
        };
        $scope.toShippingInfo = function() {
            $('.shipping_info').css('display','block');
            $scope.showProductDetail=false;
            $scope.showComments=false;
            $scope.showShippingInfo=true;
            $scope.showTrend=false;
        };
        $scope.toTrend = function() {
            $scope.showProductDetail=false;
            $scope.showComments=false;
            $scope.showShippingInfo=false;
            $scope.showTrend=true;
        };
       
        $scope.get_trend = function () {
            if(document.getElementById('product_trend_li'))
            {
                trend = JSON.parse(document.getElementById('product_trend_li').dataset['trend']);
                var sales_trend = trend;
                $scope.chartConfig.series[0].data = sales_trend.measures.sales_quantity;
                $scope.chartConfig.xAxis[0].categories = sales_trend.dimension;
                $scope.chartConfig.title.text = trend.name;
                $scope.chartConfig.subtitle.text = "该产品过去三个月的销量趋势(wish平台目前只能抓取评价数目趋势)" ;
            }
    
        };
        $scope.get_trend();
        $scope.product_query = {
            value : ''
        };
        $scope.showCtyMenu = false;
        $scope.search = function(){
            var state = $('.product_shipping .search_country').css('display');
            if(state == "none")
            {
                $('.product_shipping .search_country').css('display', 'block');
                $('.product_shipping .dropdown-menu').show();
            }
            else
            {
                $('.product_shipping .search_country').css('display', 'none');
                $('.product_shipping .dropdown-menu').hide();
            }
            $scope.product_query.value = "";//每次点击下拉时重置query的值
        };
    
        $scope.visible = false;
        $scope.showdelivul = false;
        $scope.showtoggle = function() {
            $scope.visible = !$scope.visible;
            $scope.product_query.value = "";
        };
        $scope.delivultoggle = function() {
            $scope.showdelivul  = !$scope.showdelivul;
        };
    
       
    });
    app.directive('wrapDirective',function() {
        return {
            restrict: 'AE',
            scope: false,
            link: function(scope,elements) {
                $(elements[0]).on('click',function(ev) {
                    if(ev.toElement !=$('#dropdownMenu2')[0]&&ev.toElement !=$('#s_country')[0]
                        &&ev.toElement !=$('#s_cty-name')[0]&&ev.toElement !=$('#s_caret')[0]){
                        $('.product_shipping .search_country').css('display', 'none');
                        $('.product_shipping .dropdown-menu').hide();
                         scope.$apply();
                        
                    }
                    if(ev.toElement !== $('#dropdownMenu3')[0] && ev.toElement !== $('#s_country_btm')[0] 
                        && ev.toElement !== $('#s_cty-name_btm')[0]&&ev.toElement !== $('#s_caret_btm')[0]){
                        scope.visible = false;
                        scope.$apply();
                    }
    
                    if(ev.toElement !== $('#dropdownMenu-ship')[0] && ev.toElement !== $('#s_deliv-name')[0]
                        &&ev.toElement !== $('#s_deliv-caret')[0]) {
                        scope.showdelivul = false;
                        scope.$apply();
                     }
                })
                //商品详情部分  监听商品数量变化
                .on('change','#product_quantity', function() {
                    if(scope.product_template_id && scope.product_template_id > 0) {
                        scope.extractCountry($(this));
                    }
                }) 
                // 商品详情部分  监听改变商品数量的按钮点击事件
                .on('click', 'span.change_product_number', function (ev) {
                    ev.preventDefault();
                    var $link = $(ev.currentTarget);
                    var $input = $link.parent().find("input");
                    var min = parseFloat($input.data("min") || 1);
                    var max = parseFloat($input.data("max") || Infinity);
                    var quantity = ($link.has(".fa-minus").length ? -1 : 1) + parseFloat($input.val(),10);
                    $input.val(quantity > min ? (quantity < max ? quantity : max) : min);
                    $('input[name="'+$input.attr("name")+'"]').val(quantity > min ? (quantity < max ? quantity : max) : min);
                    if(scope.product_template_id && scope.product_template_id > 0) {
                        scope.extractCountry($('#product_quantity'));
                    }
                    return false;
                })
            }
        }
    })
    .directive('shippingCountry', function() {
        return {
            restrict: 'AE',
            scope: false,
            link: function(scope,elements) { //运送信息部分 国家选择事件
                $(elements[0]).on('click','.dp-menu-wp li a',function() {
                    var ctyname = $.trim($(this).text());
                    scope.curSelectedIndex = parseInt($(this).data('index'));
                    $('#s_cty-name_btm').text(ctyname);
                    scope.visible = false;
                    scope.deliveryDetail = $(this).data('delivery-fee');
                     //检查数据有没有更新
                    scope.$apply();
                })
            }
    
        }
    })
    .directive('numChange',function() {
        return {
            restrict: 'AE',
            scope: false,
            link: function(scope,elements) { //运送信息部分，商品数量改变事件
                $(elements[0]).on('change', function() {
                    if(scope.product_template_id && scope.product_template_id > 0) {
                        scope.extractCountry($(this));
                        
                        //若在这里执行更新，每次获得的是上一次请求的数据
                        //scope.deliveryDetail = scope.delivery_info[scope.countries[scope.curSelectedIndex][0]];
                        //scope.$apply();
                    }
                })
            }
        }
    })
    
    .directive('prodetailDir',function() {
        return {
            restrict: 'AE',
            scope: false,
            link: function(scope,elements) { //商品详情部分  选择国家事件
                $(elements[0]).on('click','.dropdown-menu li a', function() {
                    $('.dp-ship-ls').css('display','block');
                    scope.transportInfo = $(this).data('delivery-fee');
                    scope.curSelectedIndexTop = parseInt($(this).data('index'));
                    //改变运送国家时，将当前的运输方式设置为默认第一个
                    if(scope.transportInfo.length) {
                        $('#s_deliv-name').text(scope.transportInfo[0].delivery_name);
                        scope.ship_price = scope.transportInfo[0].delivery_price;
                    } else {
                        $('#s_deliv-name').text('暂不支持运送');
                        $('.dp-ship-ls').css('display','none');
                        scope.ship_price = 0.00;
                    }
                    
                    scope.shipMethodIndex = 0;
    
                    $('#dropdownMenu2').find('.cty-name').text($.trim($(this).text()));
    
    
                    if($(this).attr('delivery-fee')){
                        $('#dropdownMenu2').attr('delivery-fee', parseFloat($(this).attr('delivery-fee')));
    
                    } else {
                        $('#dropdownMenu2').attr('delivery-fee', 0);
    
                    }
    
                    $('#dropdownMenu2').val($.trim($(this).text())).change();
                    $('.product_shipping .search_country').css('display', 'none');
                    $('.product_shipping .dropdown-menu').hide();
    
    
                    if($(this).attr('delivery-fee')){
                        $('#dropdownMenu2').attr('delivery-fee', parseFloat($(this).attr('delivery-fee')));
                    } else {
                        $('#dropdownMenu2').attr('delivery-fee', 0);
                    }
                    $('#dropdownMenu2').val($.trim($(this).text())).change();
                    // $('.product_shipping .search_country').css('display', 'none');
                    // $('.product_shipping .dropdown-menu').hide();
                    // $scope.showCtyMenu = false;
                    scope.$apply();
                })
                //商品详情部分  选择运输方式事件
                .on('click','.dp-ship-ls li a', function() {
                    scope.visible = false;
                    var shipname = $.trim($(this).text());
                    scope.shipMethodIndex = parseInt($(this).data('index'));
                    $('#s_deliv-name').text(shipname);
                    scope.ship_price = $(this).data('price');
                })
    
            }
        }
    });

[Center]: /images/20220731/390bd348c558451592df8f792fcd2375.png
[Center 1]: /images/20220731/e9e57d2251024ae3bd8cc8caae99f2df.png