需求:

0.jpg

在这里增加一行
显示出这订单的收货人姓名 电话 和地址


思路

首先,要在HTML上找到要添加的位置,也就是找到对应的HTML模板以及在模板上的位置
接着,要找到对应模板的相关控制器,通过控制器传递数据到模板
找到控制器之后就是数据库了,要知道订单的收货人姓名 电话 和地址这些数据从数据库中怎么查找

因为人人商城也是按照基本的 MVC 架构的,所以模板、数据库、控制器不能少

URL

首先找到相关页面的URL
http://www.example.com/app/index.php?i=6&c=entry&m=ewei_shopv2&do=mobile&r=order
根据微擎的URL结构
m 表示具体哪个模块 这里m=ewei_shopv2表示人人商城模板
do 要执行的site类中的do*方法 这里do=mobile表示执行doMobileMobile方法
r 表示具体的控制器和视图 这里r=order表示执行order控制器

在人人商城中,控制器一般和模板命名相同,所以上面执行的是order控制器,加载的是order模板

模板

使用浏览器的F12工具
1.png

2.png

3.png

4.png

5.png

上面是需要添加的数据信息位置

6.png

只需要在订单详情了找到这个数据即可

收货地址数据

找到模板/ewei_shopv2/template/mobile/default/order/detail.html

7.png

控制器

找控制器/ewei_shopv2/core/mobile/order/index.php,函数public function detail()

8.png

这个就是订单信息包含了address信息,返回结果包含了addressidaddress

10.png

如果addressid不为空,那么

9.png

通过$address = iunserializer($order["address"]);获得地址array()

11.png

反序列化之前的地址是这样的:

address: "a:17:{s:2:"id";s:1:"1";s:7:"uniacid";s:1:"6";s:6:"openid";s:28:"xxxxxxxxxxxxpMPjI";s:8:"realname";s:9:"西施";s:6:"mobile";s:11:"13812345678";s:8:"province";s:9:"XX省";s:4:"city";s:9:"XX市";s:4:"area";s:9:"XX区";s:7:"address";s:16:"XX大道1号";s:9:"...

之后是这样的:

12.png

由此可知,要获得订单收货地址信息:

13.png

获取 order 需要这些参数,$orderid,$uniacid,$openid,其中 $orderid 需要自己找出来

回到index.phppublic function get_list(),在人人商城中,后端和前端的数据有时候是通过ajax传输的,show_json()函数就是其中之一

14.png

$list 列表中包含 $orderid

将其打印出来看下:

15.png

id 就是 $orderid

16.png

构造一个循环,将 $orderid 取出,然后到数据库中查询 $order 信息(包含收货地址信息)

其中,需要注意foreach($list as &$list)里的&$list

17.png

address信息添加到$list中,通过show_json()传递到ajax中

show_json()函数

show_json()函数位于functions.php文件中

if( !function_exists("show_json") ) 
{
    function show_json($status = 1, $return = NULL) 
    {
        $ret = array( "status" => $status, "result" => ($status == 1 ? array( "url" => referer() ) : array( )) );// PHP 三元运算, 如果表达式1为真,则执行表达式2并返回结果,否则执行表达式3并返回
        if( !is_array($return) ) 
        {
            if( $return ) 
            {
                $ret["result"]["message"] = $return;
            }
            exit( json_encode($ret) );
        }
        $ret["result"] = $return;
        if( isset($return["url"]) ) 
        {
            $ret["result"]["url"] = $return["url"];
        }
        else 
        {
            if( $status == 1 ) 
            {
                $ret["result"]["url"] = referer();
            }
        }
        exit( json_encode($ret) ); // 输出的结果又去哪里了呢? 返回了一个JSON数据
    }

因为其中包含exit()语句,所以执行完成后就会退出,导致我的debugg()函数未能生效,所以我将其单独提取出来,测试了一下

<?php
// php 服务器500错误解决
// 开启php.ini中的display_errors指令
ini_set('display_errors',1);
// 通过error_reporting()函数设置,输出所有级别的错误报告
error_reporting(E_ALL);

function show_json($status = 1 , $return = NULL)
{
    $ret = array( "status" => $status, "result" => ($status == 1 ? array( "url" => 'referer()' ) : array( )) );
    
    if( !is_array($return) ) 
    {
        if( $return ) 
        {
            $ret["result"]["message"] = $return;
        }
        exit( json_encode($ret) );
    }
    $ret["result"] = $return;
    if( isset($return["url"]) ) 
    {
        $ret["result"]["url"] = $return["url"];
    }
    else 
    {
        if( $status == 1 ) 
        {
            $ret["result"]["url"] = 'referer()';
        }
    }
    exit( json_encode($ret) );
};

$psize = 50;
$total = 2;
//模拟商品列表
$list = array(        
            array(
                'addressid' => '1',
                'id' => '26',
                'goods' => array(
                    'goodsid' => '2',
                    'price' => '4299.00',
                    'status' => '1',
                    'total' => '1'
                )
            ),
            array(
                'addressid' => '1',
                'id' => '25',
                'goods' => array(
                    'goodsid' => '2',
                    'price' => '4299.00',
                    'status' => '1',
                    'total' => '1'
                )
            )
        );


show_json(1, array( "list" => $list, "pagesize" => $psize, "total" => $total ));

返回输出

{"status":1,"result":{"list":[{"addressid":"1","id":"26","goods":{"goodsid":"2","price":"4299.00","status":"1","total":"1"}},{"addressid":"1","id":"25","goods":{"goodsid":"2","price":"4299.00","status":"1","total":"1"}}],"pagesize":50,"total":2,"url":"referer()"}}

js模板

在人人商城中html模板中使用js模板

html代码

 <div class="fui-list-group" id="qq"></div>

        <script type="text/html" id="tpl_list">
                <%each list as item%>
                <a class="fui-list" href="{php echo mobileUrl('qa/detail')}&id=<%item.id%>">
                    <div class="fui-list-inner">
                        <div class="title"><%item.title%></div>
                    </div>
                    <div class="fui-list-angle">
                        <div class="angle"></div>
                    </div>
                </a>
                <%/each%>
        </script>

模板加载

<script>
var result = {list: [
        {
            title: '<油价>调整周期缩至10个工作日 无4%幅度限制',
            url: 'http://finance.qq.com/zt2013/2013yj/index.htm'
        },
        {
            title: '明起汽油价格每吨下调310元 单价回归7元时代',
            url: 'http://finance.qq.com/a/20130326/007060.htm'
        },
        {
            title: '广东副县长疑因抛弃情妇遭6女子围殴 纪检调查',
            url: 'http://news.qq.com/a/20130326/001254.htm'
        },
        {
            title: '湖南27岁副县长回应质疑:父亲已不是领导',
            url: 'http://news.qq.com/a/20130326/000959.htm'
        },
        {
            title: '朝军进入战斗工作状态 称随时准备导弹攻击美国',
            url: 'http://news.qq.com/a/20130326/001307.htm'
        }
    ]};
core.tpl('#qq', 'tpl_list', result);//对应了上面html代码中的 div.id,script.id,和result,这里的result又和show_json()返回的result对应,完成控制器到模板的数据传输
</script>

在人人商城的代码中查找

18.png

有两个结果比较接近。

查看网页源码

19.png

相比较,list.js可能性比较大,打开list.js

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('13([\'m\',\'t\',\'S/A/i\'],7(m,t,i){u 6={b:1,8:\'\',g:0};6.j=7(r){6.8=r.8;6.g=r.g;i.j();u z=$.Q($(\'.h\').x());n(z==\'\'){6.b=1;6.l()}6.9();$(\'.q-p\').P(7(){$(\'.f-k-M a\').N(\'L\');6.c(5)});K.k({h:$(\'#k\'),J:{k:7(){6.c(\'\')},H:7(){6.c(0)},T:7(){6.c(1)},O:7(){6.c(2)},U:7(){6.c(3)},W:7(){6.c(4)}}})};6.c=7(8){n(8==5){$(\'.q-p\').v(\'w\',\'Y\')}E{$(\'.q-p\').v(\'w\',\'#Z\')}$(\'.f-d\').9(\'s\');6.9();$(\'.d-o\').F(),$(\'.h\').x(\'\'),$(\'.9-y\').D();6.b=1,6.8=8,6.l()};6.y=7(){6.b++};6.l=7(){m.10(\'A/12\',{b:6.b,8:6.8,g:6.g},7(B){u e=B.e;n(e.V<=0){$(\'.d-o\').D();$(\'.f-d\').9(\'s\')}E{$(\'.d-o\').F();$(\'.f-d\').9(\'j\');n(e.G.C<=0||e.G.C<e.X){$(\'.f-d\').9(\'s\')}}6.b++;m.t(\'.h\',\'I\',e,6.b>1);i.j()})};6.9=7(){$(\'.f-d\').9({R:7(){6.l()}})};11 6});',62,66,'||||||modal|function|status|infinite||page|changeTab|content|result|fui|merchid|container|op|init|tab|getList|core|if|empty|delete|icon|params|stop|tpl|var|css|color|html|loading|leng|order|ret|length|show|else|hide|list|tab0|tpl_order_index_list|handlers|FoxUI|active|danger|removeClass|tab2|click|trim|onLoading|biz|tab1|tab3|total|tab4|pagesize|red|999|json|return|get_list|define'.split('|'),0,{}))

使用了eval加密,通过在线工具解密一下

define(['core', 'tpl', 'biz/order/op'], function(core, tpl, op) {
    var modal = {
        page: 1,
        status: '',
        merchid: 0
    };
    modal.init = function(params) {
        modal.status = params.status;
        modal.merchid = params.merchid;
        op.init();
        var leng = $.trim($('.container').html());
        if (leng == '') {
            modal.page = 1;
            modal.getList()
        }
        modal.infinite();
        $('.icon-delete').click(function() {
            $('.fui-tab-danger a').removeClass('active');
            modal.changeTab(5)
        });
        FoxUI.tab({
            container: $('#tab'),
            handlers: {
                tab: function() {
                    modal.changeTab('')
                },
                tab0: function() {
                    modal.changeTab(0)
                },
                tab1: function() {
                    modal.changeTab(1)
                },
                tab2: function() {
                    modal.changeTab(2)
                },
                tab3: function() {
                    modal.changeTab(3)
                },
                tab4: function() {
                    modal.changeTab(4)
                }
            }
        })
    };
    modal.changeTab = function(status) {
        if (status == 5) {
            $('.icon-delete').css('color', 'red')
        } else {
            $('.icon-delete').css('color', '#999')
        }
        $('.fui-content').infinite('stop');
        modal.infinite();
        $('.content-empty').hide(), $('.container').html(''), $('.infinite-loading').show();
        modal.page = 1, modal.status = status, modal.getList()
    };
    modal.loading = function() {
        modal.page++
    };
    modal.getList = function() {
        core.json('order/get_list', {
            page: modal.page,
            status: modal.status,
            merchid: modal.merchid
        }, function(ret) {
            var result = ret.result;
            if (result.total <= 0) {
                $('.content-empty').show();
                $('.fui-content').infinite('stop')
            } else {
                $('.content-empty').hide();
                $('.fui-content').infinite('init');
                if (result.list.length <= 0 || result.list.length < result.pagesize) {
                    $('.fui-content').infinite('stop')
                }
            }
            modal.page++;
            core.tpl('.container', 'tpl_order_index_list', result, modal.page > 1);
            op.init()
        })
    };
    modal.infinite = function() {
        $('.fui-content').infinite({
            onLoading: function() {
                modal.getList()
            }
        })
    };
    return modal
});

正好对应 div class 名称 script id 名称 最后是 result。这些就是如何从控制器传递信息到前端模板的方法了

显示数据

修改模板,显示数据
6.png

查看订单详情页的模板
7.png

按照这个格式修改即可
20.png

但是修改完成后,样式有点问题,超出了。
21.png

最简单的办法就是修改高度了
22.png

改成2.5正好
23.png

找到CSS的位置
24.png

25.png


但是,到手机端查看,又出问题了
26.png

这个问题就另外再写一篇吧。毕竟算是前端样式问题了,有点复杂,而我也不太会
(。・∀・)ノ

标签: none

评论已关闭