GetDelivery
/
publishOngoing.php

<?php
?>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- meta使用viewport以确保页面可自由缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 引入 jQuery Mobile 样式 -->
    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
    <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
    <!-- 引入 jQuery Mobile 库 -->
    <script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>

    <title>发布的进行中任务</title>
    <link rel="stylesheet" href="css/global.css" />
    <style>
        #task-detail-table{
            font-size: 16px;
            width:100%;
            word-break:break-all;
            border-collapse:separate;
            border-spacing:0px 10px;
        }
    </style>
</head>
<body>

<div data-role="page" id="pageThree" >
    <div data-role="main" class="ui-content">
        <ul data-role="listview" id="publish-ongoing-list">

        </ul>
    </div>

</div>

<div data-role="page"  id="pageFour">
    <div data-role="main" class="ui-content">
        <table id="task-detail-table">
            <tbody>
            </tbody>
        </table>
        <a href="#cancelPopup" class="ui-btn ui-btn-inline ui-corner-all ui-btn-b " data-rel="popup" id="accept-task">取消任务</a>
        <a href="#pageThree" class="ui-btn ui-corner-all ui-btn-inline my-btn-right" >返回</a>
    </div>

    <div data-role="popup" id="cancelPopup" data-transition="pop" data-overlay-theme="b" data-position-to="window">
        <div data-role="header"><h1>确认取消任务</h1></div>
        <div data-role="main" class="ui-content">
            <p>确认取消您发布的任务吗？</p>
            <button class="ui-btn ui-btn-inline ui-corner-all ui-btn-b " id="confirm-accept-task">确认</button>
            <a href="#" class="ui-btn ui-corner-all ui-btn-inline my-btn-right" data-rel="back">取消</a>
        </div>
    </div>
</div>


</body>


<script type="text/javascript">

    //我发布的正在进行的任务列表
    var tasks =  [
        {
            "bonusReward": 867.192,
            "currentStage": 10,
            "deadline": 1490602216000,
            "description": "取快递取快递取快递取取快递取快递取快递取快递取快递取快递取快递",
            "id": 0,
            "progress": "10/3",
            "publishTime": 1490602216000,
            "status": -1,
            "templateId": 175,
            "title": "jtest_title_1490602216238"
        },
        {
            "bonusReward": 867.192,
            "currentStage": 10,
            "deadline": 1490602216000,
            "description": "取快递取快递取快递取快递取快递取快递取快递",
            "id": 1,
            "progress": "10/3",
            "publishTime": 1490602216000,
            "status": -1,
            "templateId": 175,
            "title": "jtest_title_1490602216238"
        }
    ];
    //单个任务详情
    var task_detail = {
        "id": 1,
        "templateId": 1,
        "requesterId": 1,
        "title": " Pick Up Delivery",
        "description": " Pick Up Delivery from AKang to 401, Pick Up Delivery from AKang to 401",
        "status": 0,
        "progress": "2/3",
        "currentStage": 2,
        "bonusReward": 20,
        "publishTime": "2017/3/15 12:30:45",
        "deadline": "2017/3/15 18:00:00",
        "stages": [{
            "stageId": 1,
            "name": "Stage1",
            "desc": "Move to AKang",
            "reward": 10.0,
            "ddl": "2017/3/17 18:00",
            "contractTime": "2017/4/13 15:30:00",
            "workerNum": 1,
            "workerNames": ["lab401"],
            "stageStatus": 0,
            "locations": [{
                "location": {
                    "type": 0,
                    "address": "worker位置起点",
                    "longitude": 192.5,
                    "latitude": 108.5
                },
                "inputs": [{
                    "type": "inputBox",
                    "desc": "pickCodepickCode",
                    "value": "336933693369336933693369336933693369"
                }],
                "outputs": [{
                    "id":1,
                    "actionId":1,
                    "type":1,
                    "desc":"This is description",
                    "value":"path/content",
                    "isActive":true,
                    "intervalValue":1,
                    "upBound":10,
                    "lowBound":2.0,
                    "entries":"Yes;No",
                    "aggregaMethod":1
                },]
            },
                {
                    "location": {
                        "type": 1,
                        "address": "阿康烧烤终点",
                        "longitude": 192.5,
                        "latitude": 108.5
                    },
                    "inputs":[{
                        "type": "inputBox",
                        "desc": "pickCode",
                        "value": "3369"
                    }],
                    "outputs": [{
                        "id":1,
                        "actionId":1,
                        "type":0,
                        "desc":"This is description",
                        "value":"path/content",
                        "isActive":true,
                        "intervalValue":1,
                        "upBound":10.0,
                        "lowBound":2.0,
                        "entries":"Yes;No",
                        "aggregaMethod":1
                    }]
                }
            ]
        }]
    }

    $(function() {
        var table = $('#publish-ongoing-list tbody');
        for(var i=0; i<tasks.length; i++){
            $('#publish-ongoing-list').append(createListItem(tasks[i], tasks[i]['id']));
        }
        //必须有这句刷新！！！！
        $('ul').listview('refresh');

    });

    ////////////////////////////////////创建列表项///////////////////////////////////////////////////////////
    function createListItem(task, id){
        return "<li><a onclick='showTaskDetail("+ id +")'><div><table><tbody>"+ createTable(task) +"</tbody></table></div></a></li>";
    }

    function createTable(task){
        return createListHeader(task['title']) + createListRow( "描述：", task['description'])
            + createListRow( "进度：", task['progress']) + createListRow( "发布：", task['publishTime']);
    }

    function createListRow(key, value){
        return "<tr> <td  style='white-space: nowrap'>"+ key +"</td> <td class='td2'>"+ value +"</td> </tr>";
    }

    function createListHeader(s){
        return "<tr> <td  colspan='2' ><h3>" + s + "</h3></td></tr>";
    }

////////////////////////////////创建任务详情//////////////////////////////////////////////////////////////////////
    var taskIdd=-1;

    function showTaskDetail(id){
        taskId = id;
        $.mobile.changePage("#pageFour", {transition: "slideup"});
    }

    $('#pageFour').on('pageshow', function(){
        alert(taskId);
        var table = $('#task-detail-table tbody');
        createTaskDetailPop2(table,task_detail);
    })

    //填充任务详情弹出框内容
    function createTaskDetailPop2(table, task){
        table.html('');
        table.append("<tr style='font-weight: bold'> <td colspan='2' style='text-align: center'>" + task_detail['title'] +"</td> </tr>");
        table.append(createTableRow("描述：", task_detail['description']));
        table.append(createTableRow("进度：", task_detail['progress']));
        table.append(createTableRow("奖励：", task_detail['bonusReward']));
        table.append(createTableRow("截止：", task_detail['deadline']));
        stages = task['stages'];
        for(var i=0; i<stages.length; i++){
            var stage = stages[i];
            table.append(createStageHeader(stage['name'],stage));
            table.append(createTableRow("描述：", stage['desc']));
            table.append(createTableRow("报酬：", stage['reward']));
            for(var j=0; j<stage['locations'].length; j++){
                var location  = stage['locations'][j]['location'];
                table.append(createLocationHeader(location['type']));
                table.append(createTableRow( "地址：", location['address'].replace("=","\n")));
                var inputs = stage['locations'][j]['inputs'];
                if(null != inputs && inputs.length > 0){
                    table.append("<tr style='font-weight: bold'> <td colspan='2' >额外信息</td> </tr>");
                    for(var k=0; k<inputs.length; k++){
                        table.append(createTableRow(inputs[k]['desc']+":&nbsp&nbsp", inputs[k]['value']));
                    }
                }
                var outputs = stage['locations'][j]['outputs'];
                if(null != outputs && outputs.length > 0){
                    table.append("<tr style='font-weight: bold'> <td colspan='2' >反馈</td> </tr>");
                    for(var k=0; k<outputs.length; k++){
                        var output = outputs[k];
                        if(output['type'] == 0){ //picture
                            table.append("<div style='text-align: center'><img src='" + output['value'] + "' style='width:50%;'/></div>");
                        } else { //text/num/enum
                            switch (output['type']) {
                                case 1:
                                    table.append(createTableRow(output['desc'], output['value']));
                                    break;
                                case 2:
                                    table.append(createTableRow(output['desc'], output['value']));
                                    break;
                                case 3:
                                    table.append(createTableRow(output['desc'], output['value']));
                                    break;
                            }
                        }
                    }
                }
            }
        }

    }

    function createLocationHeader(type){
        var h="";
        if(type == 0){
            h = "<tr style='font-weight: bold'> <td colspan='2' style='text-align: center'>起点</td> </tr>";
        } else if(type == 1){
            h = "<tr style='font-weight: bold'> <td colspan='2' style='text-align: center'>终点</td> </tr>";
        }
        return h;
    }

    function createStageHeader(name, stage){
        var header;
        switch(stage['stageStatus']){
            case 0:
                header = " <tr style='color:#419DE4;font-weight: bold'> <td colspan='2' style='text-align: center'>"+ name + "&nbsp&nbsp&nbsp"+
                    "<img src='img/my_task_ongoing.png' style='width:20px;height:20px'></img></td> </tr>";
                header +=  " <tr> <td class='td1'>接受：</td> <td class='td2'>"+stage['workerNames'].join(",")+"</td> </tr>";
                break;
            case 1:
                header = " <tr style='color:#419DE4;font-weight: bold'> <td colspan='2' style='text-align: center'>"+ name + "&nbsp&nbsp&nbsp"+
                    "<img src='img/task_finished.png' style='width:20px;height:20px'></img></td> </tr>";
                header +=  " <tr> <td class='td1'>接受：</td> <td class='td2'>"+stage['workerNames'].join()+"</td> </tr>";
                break;
            case 2:
                if(null != stage['contractTime'] && ""== stage['contractTime']){
                    header = " <tr style='color:#419DE4;font-weight: bold'> <td colspan='2' style='text-align: center'>"+ name + "&nbsp&nbsp&nbsp"+
                        "<img src='img/task_wanted.png' style='width:20px;height:20px'></img></td> </tr>";
                    header +=  " <tr> <td class='td1'>人数：</td> <td class='td2'>"+stage['workerNum']+"</td> </tr>";
                    header +=  " <tr style='color:red'> <td class='td1'>契约：</td> <td class='td2'>"+stage['contractTime']+"</td> </tr>";
                } else {
                    header = " <tr style='color:#419DE4;font-weight: bold'> <td colspan='2' style='text-align: center'>"+ name + "&nbsp&nbsp&nbsp"+
                        "<img src='img/task_waiting.png' style='width:20px;height:20px'></img></td> </tr>";
                    header +=  " <tr> <td class='td1'>人数：</td> <td class='td2'>"+stage['workerNum']+"</td> </tr>";
                    header +=  " <tr> <td class='td1'>截止：</td> <td class='td2'>"+stage['ddl']+"</td> </tr>";
                }
                break;
            case -1:
                header = " <tr style='color:#419DE4;font-weight: bold'> <td colspan='2' style='text-align: center'>"+ name + "&nbsp&nbsp&nbsp"+
                    "<img src='img/expired.png' style='width:20px;height:20px'></img></td> </tr>";
                break;
            default:alert("stageStatus error!");

        }
        return header;
    }

    function createTableRow(key, value){
        var row = " <tr> <td class='td1'>"+key+"</td> <td class='td2'>"+value+"</td> </tr>";
        return row;
    }

///////////////////////////////////////////////////////////////////////////////////////////


</script>


</html>