新增任务详情页面

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

@@ -83,6 +83,15 @@
        "router" : {
            "mode" : "hash",
            "base" : "/rider/"
        },
        "sdkConfigs": {
            "maps": {
                "amap": {
                    "key": "7fa69abe1defd5888bb85bc736cda874",
                    "securityJsCode": "8ac9e5f522c62ed6e3a5800a87b0d140",
                    "serviceHost": ""
                }
            }
        }
    }
}

 pages.json

@@ -29,7 +29,17 @@
        },
        {
            "path" : "pages/home/home",
            "style" : {}
            "style": {
                "navigationBarTitleText": "主页",
                "enablePullDownRefresh": false
            }
        }, {
            "path": "pages/taskinfo/detail",
            "style": {
                "navigationBarTitleText": "任务详情",
                "enablePullDownRefresh": false
            }

        }
    ],
    "globalStyle" : {
@@ -43,8 +53,7 @@
        "selectedColor" : "#0BB9C8",
        "borderStyle" : "white",
        "backgroundColor" : "#ffffff",
        "list" : [
            {
        "list": [{
                "pagePath" : "pages/service/service",
                "iconPath" : "static/images/tabbar/home.png",
                "selectedIconPath" : "static/images/tabbar/home_selected.png",
@@ -67,12 +76,10 @@
    "condition" : {
        //模式配置，仅开发期间生效
        "current" : 0, //当前激活的模式(list 的索引项)
        "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