新增任务详情页面

xiebin

2022-09-29 604621b9c51ecfe8843bd7ddc564ea0161e93b44

新增任务详情页面

 api/taskinfo/taskinfo.js

New file
@@ -0,0 +1,23 @@
import http from '@/http/api.js'

export const getList = (current, size, params) => {
    return http.request({
        url: '/taskInfo/taskinfo/page',
        method: 'get',
        params: {
            ...params,
            current,
            size,
        }
    })
}

export const getDetail = (id) => {
    return http.request({
        url: '/taskInfo/taskinfo/detail',
        method: 'get',
        params: {
            id
        }
    })
}

 manifest.json

@@ -1,88 +1,97 @@
{
    "name" : "Rider",
    "appid" : "__UNI__C29A206",
    "description" : "",
    "versionName" : "1.0.0",
    "versionCode" : "100",
    "transformPx" : false,
    /* 5+App特有相关 */
    "app-plus" : {
        "safearea" : {
            "bottom" : {
                "offset" : "none"
            }
        },
        "usingComponents" : true,
        "nvueCompiler" : "uni-app",
        "compilerVersion" : 3,
        "splashscreen" : {
            "alwaysShowBeforeRender" : true,
            "waiting" : true,
            "autoclose" : true,
            "delay" : 0
        },
        /* 模块配置 */
        "modules" : {},
        /* 应用发布信息 */
        "distribute" : {
            /* android打包配置 */
            "android" : {
                "permissions" : [
                    "<uses-feature android:name=\"android.hardware.camera\"/>",
                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
                    "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
                    "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
                ]
            },
            /* ios打包配置 */
            "ios" : {},
            /* SDK配置 */
            "sdkConfigs" : {
                "ad" : {}
            }
        }
    },
    /* 快应用特有相关 */
    "quickapp" : {},
    /* 小程序特有相关 */
    "mp-weixin" : {
        "appid" : "wxc256e348c4032ebd",
        "setting" : {
            "urlCheck" : false
        },
        "usingComponents" : true
    },
    "mp-alipay" : {
        "usingComponents" : true
    },
    "mp-baidu" : {
        "usingComponents" : true
    },
    "mp-toutiao" : {
        "usingComponents" : true
    },
    "h5" : {
        "template" : "template.h5.html",
        "router" : {
            "mode" : "hash",
            "base" : "/rider/"
        }
    }
    "name": "Rider",
    "appid": "__UNI__C29A206",
    "description": "",
    "versionName": "1.0.0",
    "versionCode": "100",
    "transformPx": false,
    /* 5+App特有相关 */
    "app-plus": {
        "safearea": {
            "bottom": {
                "offset": "none"
            }
        },
        "usingComponents": true,
        "nvueCompiler": "uni-app",
        "compilerVersion": 3,
        "splashscreen": {
            "alwaysShowBeforeRender": true,
            "waiting": true,
            "autoclose": true,
            "delay": 0
        },
        /* 模块配置 */
        "modules": {},
        /* 应用发布信息 */
        "distribute": {
            /* android打包配置 */
            "android": {
                "permissions": [
                    "<uses-feature android:name=\"android.hardware.camera\"/>",
                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
                    "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
                    "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
                ]
            },
            /* ios打包配置 */
            "ios": {},
            /* SDK配置 */
            "sdkConfigs": {
                "ad": {}
            }
        }
    },
    /* 快应用特有相关 */
    "quickapp": {},
    /* 小程序特有相关 */
    "mp-weixin": {
        "appid": "wxc256e348c4032ebd",
        "setting": {
            "urlCheck": false
        },
        "usingComponents": true
    },
    "mp-alipay": {
        "usingComponents": true
    },
    "mp-baidu": {
        "usingComponents": true
    },
    "mp-toutiao": {
        "usingComponents": true
    },
    "h5": {
        "template": "template.h5.html",
        "router": {
            "mode": "hash",
            "base": "/rider/"
        },
        "sdkConfigs": {
            "maps": {
                "amap": {
                    "key": "7fa69abe1defd5888bb85bc736cda874",
                    "securityJsCode": "8ac9e5f522c62ed6e3a5800a87b0d140",
                    "serviceHost": ""
                }
            }
        }
    }
}

 pages.json

@@ -1,78 +1,85 @@
{
    "easycom" : {
        "^u-(.*)" : "@/uview-ui/components/u-$1/u-$1.vue"
    },
    "pages" : [
        //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path" : "pages/login/login-account",
            "style" : {
                "navigationBarTitleText" : "登录",
                "enablePullDownRefresh" : false,
                "navigationStyle" : "custom"
            }
        },
        {
            "path" : "pages/service/service",
            "style" : {
                "navigationBarTitleText" : "首页",
                "enablePullDownRefresh" : false,
                "navigationStyle" : "custom"
            }
        },
        {
            "path" : "pages/taskinfo/list",
            "style" : {
                "navigationBarTitleText" : "任务列表",
                "enablePullDownRefresh" : false
            }
        },
        {
            "path" : "pages/home/home",
            "style" : {}
        }
    ],
    "globalStyle" : {
        "navigationBarTextStyle" : "black",
        "navigationBarTitleText" : "",
        "navigationBarBackgroundColor" : "#fff",
        "backgroundColor" : "#F7F7F7"
    },
    "tabBar" : {
        "color" : "#A6ABB5",
        "selectedColor" : "#0BB9C8",
        "borderStyle" : "white",
        "backgroundColor" : "#ffffff",
        "list" : [
            {
                "pagePath" : "pages/service/service",
                "iconPath" : "static/images/tabbar/home.png",
                "selectedIconPath" : "static/images/tabbar/home_selected.png",
                "text" : "首页"
            },
            {
                "pagePath" : "pages/demo/demo",
                "iconPath" : "static/images/tabbar/demo.png",
                "selectedIconPath" : "static/images/tabbar/demo_selected.png",
                "text" : "示例"
            },
            {
                "pagePath" : "pages/user/center",
                "iconPath" : "static/images/tabbar/user.png",
                "selectedIconPath" : "static/images/tabbar/user_selected.png",
                "text" : "我的"
            }
        ]
    },
    "condition" : {
        //模式配置，仅开发期间生效
        "current" : 0, //当前激活的模式(list 的索引项)
        "list" : [
            {
                "name" : "", //模式名称
                "path" : "", //启动页面，必选
                "query" : "" //启动参数，在页面的onLoad函数里面得到
            }
        ]
    }
    "easycom": {
        "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
    },
    "pages": [
        //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/login/login-account",
            "style": {
                "navigationBarTitleText": "登录",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }
        },
        {
            "path": "pages/service/service",
            "style": {
                "navigationBarTitleText": "首页",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }
        },
        {
            "path": "pages/taskinfo/list",
            "style": {
                "navigationBarTitleText": "任务列表",
                "enablePullDownRefresh": false
            }
        },
        {
            "path": "pages/home/home",
            "style": {
                "navigationBarTitleText": "主页",
                "enablePullDownRefresh": false
            }
        }, {
            "path": "pages/taskinfo/detail",
            "style": {
                "navigationBarTitleText": "任务详情",
                "enablePullDownRefresh": false
            }

        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "",
        "navigationBarBackgroundColor": "#fff",
        "backgroundColor": "#F7F7F7"
    },
    "tabBar": {
        "color": "#A6ABB5",
        "selectedColor": "#0BB9C8",
        "borderStyle": "white",
        "backgroundColor": "#ffffff",
        "list": [{
                "pagePath": "pages/service/service",
                "iconPath": "static/images/tabbar/home.png",
                "selectedIconPath": "static/images/tabbar/home_selected.png",
                "text": "首页"
            },
            {
                "pagePath": "pages/demo/demo",
                "iconPath": "static/images/tabbar/demo.png",
                "selectedIconPath": "static/images/tabbar/demo_selected.png",
                "text": "示例"
            },
            {
                "pagePath": "pages/user/center",
                "iconPath": "static/images/tabbar/user.png",
                "selectedIconPath": "static/images/tabbar/user_selected.png",
                "text": "我的"
            }
        ]
    },
    "condition": {
        //模式配置，仅开发期间生效
        "current": 0, //当前激活的模式(list 的索引项)
        "list": [{
            "name": "", //模式名称
            "path": "", //启动页面，必选
            "query": "" //启动参数，在页面的onLoad函数里面得到
        }]
    }
}

 pages/taskinfo/detail.vue

New file
@@ -0,0 +1,343 @@
<template>
    <view class="content">
        <u-top-tips ref="uTips"></u-top-tips>
        <map style="width: 100%; height: 30vh;" scale="14" :latitude="latitude" :longitude="longitude"
            :polyline="polyline" show-location="true">
            <cover-view class="dingwBut" @click="getSelfLocation">

                <cover-image src="../../static/images/taskinfo/map/img/dingwei.png" @click="getSelfLocation">
                </cover-image>
            </cover-view>
        </map>
        <view id="Umain" style="height: 71%;z-index: 9999;">
            <view class="once-b">
                巡查详情
            </view>
            <view class="once">
                <span class="once-left">
                    巡查标题
                </span>
                <span class="once-right">
                    {{data.title}}
                </span>
            </view>
            <view class="once">
                <span class="once-left">
                    巡查内容
                </span>
                <span class="once-right">
                    {{data.content}}
                </span>
            </view>
            <view class="once">
                <span class="once-left">
                    开始时间
                </span>
                <span class="once-right">
                    {{data.startTime}}
                </span>
            </view>
            <view class="once">
                <span class="once-left">
                    预计结束
                </span>
                <span class="once-right">
                    {{data.endTime}}
                </span>
            </view>
            <view class="once">
                <span class="once-left">
                    状态
                </span>
                <span class="once-right">
                    {{data.state == 0?'待开始':data.state == 1?'正在进行':'已完成'}}
                </span>
            </view>
            <view class="once-c">
                <u-button type="success">开始任务</u-button>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        getDetail
    } from "@/api/taskinfo/taskinfo";
    export default {
        data() {
            return {
                id: 0,
                data: {},
                latitude: 28.6741777439167,
                longitude: 115.91024735502,
                polyline: [{
                    // LINESTRING(115.91024735502 28.6783047633229, 115.916073731654 28.6741777439167, 
                    // 115.908426611165 28.6739956695312)
                    points: [{
                            latitude: 28.6783047633229,
                            longitude: 115.91024735502
                        },
                        {
                            latitude: 28.6741777439167,
                            longitude: 115.916073731654
                        },
                        {
                            latitude: 28.6739956695312,
                            longitude: 115.908426611165
                        }
                    ],
                    color: "#10a4ff", //线的颜色
                    width: 10, //线的宽度
                    dottedLine: false, //是否虚线
                    arrowLine: false, //带箭头的线 开发者工具暂不支持该属性
                }]
            }
        },
        methods: {
            getSelfLocation() {
                // var that = this;
                // uni.getLocation({
                //     type: 'gcj02',
                //     isHighAccuracy: true,
                //     success(res) {
                //         that.latitude = res.latitude
                //         that.longitude = res.longitude
                //     }
                // })
            },
            getDetail() {
                getDetail(this.id).then(res => {
                    this.data = res.data;
                })
            }
        },
        onLoad: function(options) {
            if (options.id) {
                this.id = options.id
                this.getDetail()
            }
        }
    }
</script>

<style lang="scss">
    .content {
        // flex: 1;
        // height: 100%;
        overflow: hidden;
        // position: relative;
    }

    #Umain {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        overflow: hidden;
    }

    .once {
        width: 100%;
        min-height: 40px;
        background-color: #fff;
        display: flex;
        align-items: center;
        /* margin-bottom: 10px; */
        border-bottom: 1px solid #e8e8e8;
        padding: 0 10px;
    }

    .once-left {
        width: 25%;
        text-align: justify;
        text-align-last: justify;
        padding-right: 20px;
        box-sizing: border-box;
    }

    .once-left::after {
        content: "：";
        position: absolute;
    }

    .once-right {
        width: calc(75% - 20px);
        height: auto;
        /* border: 1px solid red; */
        box-sizing: border-box;
        word-break: break-all;
    }

    .once-right span {
        display: inline-block;
        padding: 0px 5px 1px;
        margin: 0 5px;
        background-color: #ECF5FF;
        border: 0.5px solid #e4f1ff;
        color: #429FFF;
        border-radius: 8px;
    }

    .once-c {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 0;
        background-color: #fff;
        position: absolute;
        bottom: 0;
    }

    .once-b {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        border-bottom: 1px solid #e8e8e8;
        /* margin-bottom: 10px; */
    }

    .submits {
        margin: 60rpx 90rpx 0;
        border: none;
        width: 572rpx;
        height: 86rpx;
        // line-height: 86rpx;
        box-sizing: border-box;
        border-radius: 15rpx;
        background-color: #103289;
        color: #ffffff;

        &::after {
            content: none;
        }

        &::before {
            content: none;
        }

        &[disabled='true'] {
            background: #e4e4e4;
            font-size: 36rpx;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #ffffff;
        }
    }


    .Info2 {
        width: 100%;
        // height: 100px;
        padding: 0 10px;

        .Info3 {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 50px;
        }

        .Info4 {
            width: 100%;
            line-height: 50px;
            font-size: 18px;
            text-align: center;
            height: 50px;
        }

        .Info5 {
            margin-bottom: 10px !important;
            width: 70%;
        }
    }

    .notOpens {
        &::after {
            content: "";
            display: block;
            width: 20px;
            height: 4px;
            background-color: rgba(202, 202, 202, 1);
            position: absolute;
            top: 10px;
            left: calc(50% - 10px);
            border-radius: 5px;
            transition: all 0.1s;
        }
    }

    .activeTip {
        background-color: #fff;
    }

    .isOpens {
        &::after {
            content: "";
            display: block;
            width: 13px;
            height: 4px;
            background-color: rgba(202, 202, 202, 1);
            position: absolute;
            top: 10px;
            left: calc(50% - 12px);
            border-radius: 5px;
            transform: rotate(30deg);
            transition: all 0.1s;
        }

        &::before {
            content: "";
            display: block;
            width: 13px;
            height: 4px;
            background-color: rgba(202, 202, 202, 1);
            position: absolute;
            top: 10px;
            left: calc(50% - 4px);
            border-radius: 5px;
            transform: rotate(-30deg);
            transition: all 0.1s;
        }
    }

    .dingwBut {
        width: 80upx;
        height: 80upx;
        background-color: #fff;
        border-radius: 20upx;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 40upx;
        right: 40upx;
    }

    .oncePotion {
        animation: mymove 0.5s infinite;
        animation-timing-function: linear;
    }

    .dingwButtip {
        bottom: 120 upx;
        background-color: transparent;
        color: #000000;
    }

    @keyframes mymove {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(1turn);
        }
    }
</style>

 pages/taskinfo/list.vue

@@ -10,7 +10,7 @@
            <scroll-view scroll-y :style="{ height: useHeight, width: '100%' }" @scrolltolower="scrolltolower">
                <view class="onveMain">
                    <view class="once" v-for="(item, index) in taskinfoList" :key="index">
                        <view class="onve-left">
                        <view class="onve-left" @click="goToDetail(item.id)">
                            <!-- <view class="o-l-img">
                                <image src="" mode=""></image>
                            </view> -->
@@ -47,7 +47,7 @@
<script>
    import {
        getList
    } from "@/api/taskinfo/list.js";
    } from "@/api/taskinfo/taskinfo";
    export default {
        data() {
            return {
@@ -103,6 +103,12 @@
                    this.page.total = data.total;
                    this.taskinfoList = this.taskinfoList.concat(data.records)
                })
            },
            // 跳转详情页
            goToDetail(id) {
                uni.navigateTo({
                    url: '/pages/taskinfo/detail?id=' + id
                })
            }
        }
    }

 static/images/taskinfo/map/img/dingwei.png

 static/images/taskinfo/map/img/dinw/dinw1.png

 static/images/taskinfo/map/img/dinw/dinw2.png

 static/images/taskinfo/map/img/dinw/dinw3.png

 static/images/taskinfo/map/img/dinw/dinw4.png

 static/images/taskinfo/map/img/dinw/dinw5.png

 static/images/taskinfo/map/img/dinw/dinw6.png

 static/images/taskinfo/map/img/dinw/location.png