新增在线打卡、公共维修页面

Lou

2023-11-06 a176b490598a3bc096535ebf2ca720b528631c9e

新增在线打卡、公共维修页面

 pages.json

@@ -54,6 +54,15 @@
                        "navigationBarBackgroundColor": "#fff",
                        "navigationBarTextStyle": "black"
                    }
                },
                {
                    "path": "clockIn/index",
                    "style": {
                        "navigationBarTitleText": "在线打卡",
                        "enablePullDownRefresh": false,
                        "navigationBarBackgroundColor": "#fff",
                        "navigationBarTextStyle": "black"
                    }
                }
            ]
        },
@@ -79,11 +88,8 @@
                        "navigationBarTextStyle": "black"
                    }
                }


            ]
        },

        //报事
        {
            "root": "subPackage/bs",
@@ -139,11 +145,18 @@
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom"
                    }
                },
                {
                    "path":"views/addRepair",
                    "style": {
                        "navigationBarTitleText": "公共维修",
                        "enablePullDownRefresh": false,
                        "navigationBarBackgroundColor": "#fff",
                        "navigationBarTextStyle": "black"
                    }
                }
            ]
        },


        // 楼栋管理
        {
            "root": "subPackage/house",

 pages/home/index.vue

@@ -51,7 +51,7 @@
                    </view>

                </view>



                <view class="block-item">

                <view class="block-item"   @click="navigatorPage('/subPackage/user/clockIn/index')">

                    <image class="block-item-bg" src="/static/icon/nav-bg-05.png" mode="aspectFill" />

                    <view class="block-item-box flex a-i-c">

                        <u-icon name="/static/icon/nav-06.png" width="90rpx" height="90rpx"></u-icon>


 static/icon/upload.png

 subPackage/bs/views/addRepair.vue

New file
@@ -0,0 +1,129 @@
<template>
    <view class="">
        <view class="site-box bgc-ff flex">
            <view class="flex a-i-c">
                <u-icon name="map-fill" color="#AAAAAA"></u-icon>
                <text class="f-28 c-aa ml-20">当前小区：</text>
            </view>

            <text class="address f-28">万达华府26栋1903室 万达华府26栋1903室</text>
        </view>
        <view class="content bgc-ff">
            <u-form labelPosition="left" :model="info" :rules="rules" ref="uForm" labelWidth="90"
                :labelStyle="{fontSize:'28rpx'}">
                <u-form-item label="姓名" prop="info.name" borderBottom ref="item1">
                    <u-input v-model="info.title" border="none" placeholder="请输入" placeholderClass="f-28 c-99"
                        inputAlign="right"></u-input>
                </u-form-item>
                <u-form-item label="手机" prop="info.phone" :borderBottom="false" ref="item1">
                    <u-input v-model="info.phone" border="none" placeholder="请输入" placeholderClass="f-28 c-99"
                        inputAlign="right"></u-input>
                </u-form-item>
            </u-form>
        </view>

        <view class="upload bgc-ff">
            <view class="f-28 mb-20">描述</view>
            <u-textarea v-model="desc" placeholder="请输入内容" border="none" placeholderClass="c-99 f-26"></u-textarea>
            <view class="mt-20">
                <u-upload :fileList="images" :previewFullImage="uploadConfig.previewFullImage"
                    :accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple" :maxCount="uploadConfig.maxCount"
                    :capture="uploadConfig.capture" @afterRead="afterReadImg" @delete="deletePic">
                    <view class="upload-item upload-icon flex_base">
                        <u-icon name="/static/icon/upload.png" width="60rpx" height="60rpx"></u-icon>
                    </view>
                </u-upload>
            </view>
        </view>


        <button class="submit-btn" @click="sumitInfo">提交</button>

    </view>
</template>

<script>
    import uploadMixin from "@/mixin/uploadMixin";
    export default {
        mixins: [uploadMixin],
        data() {
            return {
                info: {
                    title: "",
                    content: ""
                },
                rules: {
                    'title': {
                        type: 'string',
                        required: true,
                        message: '请输入姓名',
                        trigger: ['blur', 'change']
                    },
                    'content': {
                        type: 'string',
                        required: true,
                        message: '请输入手机号',
                        trigger: ['blur', 'change']
                    },
                },
                desc: "",
                images: []
            }
        },
        methods: {
            sumitInfo() {

            }
        }
    }
</script>

<style lang="less">
    page {
        background-color: #F5F5F5;
    }

    .content {
        margin: 20rpx 30rpx;
        padding: 0 30rpx;
    }

    .site-box {
        padding: 30rpx;
        margin: 20rpx 30rpx;
        border-radius: 4rpx;

        .c-aa {
            color: #aaa;
        }

        .address {
            width: 60%;
            margin-left: 25rpx;
        }
    }

    .upload-item {
        width: 140rpx;
        height: 140rpx;
        border: 1px solid #EEEEEE;
    }

    .upload {
        margin: 0 30rpx;
        padding: 30rpx;

		
    }

    .submit-btn {
        width: 690rpx;
        height: 78rpx;
        line-height: 78rpx;
        background: linear-gradient(163deg, #01BDFC 0%, #017BFC 100%);
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        font-size: 32rpx;
        color: #fff;
        margin-top: 50rpx;
    }
</style>

 subPackage/bs/views/repair.vue

@@ -1,6 +1,6 @@
<template>
    <view class="">
        <u-navbar height="48"  safeAreaInsetTop placeholder  bgColor="transparent"  leftIconColor="#fff">
        <u-navbar height="48" :autoBack="true"  safeAreaInsetTop placeholder  bgColor="transparent"  leftIconColor="#fff">
        </u-navbar>
        <view class="top">
            <image class="top-img" src="/static/img/repair-bg.png" mode="aspectFill"></image>
@@ -42,11 +42,11 @@
            
            <view class="nav flex flex-wrap j-c-s-b">
                
                <view class="nav-item"  v-for="(i,k) in navList"  :key="k">
                <view class="nav-item"  v-for="(i,k) in navList"  :key="k"   @click="navTo(i.path)">
                    <image class="nav-item-bg" :src="i.bgImg" mode="aspectFill"></image>
                    <view class="nav-item-inner flex f-d-c">
                        <text class="f-32 mb-30">{{i.title}}</text>
                        <button class="item-btn"   :style="{backgroundColor:i.background}"  @click="navTo(i.path)">立即上报</button>
                        <button class="item-btn"   :style="{backgroundColor:i.background}"  >立即上报</button>
                    </view>
                </view>
                
@@ -66,7 +66,7 @@
                    {
                        title:"公共维修",
                        bgImg:"/static/icon/nav-bg-06.png",
                        path:"",
                        path:"addRepair",
                        background:"#63C875"
                    },
                    {

 subPackage/user/clockIn/index.vue

New file
@@ -0,0 +1,126 @@
<template>
    <view>
        <view class="content bgc-ff">
            <u-form labelPosition="left" :model="info" :rules="rules" ref="uForm" labelWidth="90"
                :labelStyle="{fontSize:'28rpx'}">
                <u-form-item label="工作主题" prop="info.title" borderBottom ref="item1">
                    <u-input v-model="info.title" border="none" placeholder="请输入工作内容" placeholderClass="f-28 c-99"
                        inputAlign="right"></u-input>
                </u-form-item>
                <u-form-item label="当前位置" borderBottom ref="item1">
                    <u-input v-model="info.address" border="none" :disabled="true" placeholderClass="f-28 c-99"
                        inputAlign="right">
                        <template slot="suffix">
                            <button class="location-btn c-main f-24">获取地址</button>
                        </template>
                    </u-input>
                </u-form-item>
                <u-form-item label="工作内容" prop="info.content" :borderBottom="false" ref="item1">
                    <u-input v-model="info.content" border="none" placeholder="请输入工作内容" placeholderClass="f-28 c-99"
                        inputAlign="right"></u-input>
                </u-form-item>
            </u-form>
        </view>
        <view class="upload bgc-ff">
            <view class="f-28">场所图片</view>
            <view class="mt-20">
                <u-upload :fileList="images" :previewFullImage="uploadConfig.previewFullImage"
                    :accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple" :maxCount="uploadConfig.maxCount"
                    :capture="uploadConfig.capture" @afterRead="afterReadImg" @delete="deletePic">
                    <view class="upload-item upload-icon flex_base">
                        <u-icon name="/static/icon/upload.png" width="60rpx" height="60rpx"></u-icon>
                    </view>
                </u-upload>
            </view>
        </view>

        <view class="footer">
            <button class="footer-btn">提交</button>
        </view>

    </view>

</template>

<script>
    import uploadMixin from "@/mixin/uploadMixin";
    export default {
        mixins: [uploadMixin],
        data() {
            return {
                info: {
                    title: "",
                    content: ""
                },
                rules: {
                    'title': {
                        type: 'string',
                        required: true,
                        message: '请输入工作主题',
                        trigger: ['blur', 'change']
                    },
                    'content': {
                        type: 'string',
                        required: true,
                        message: '请输入工作内容',
                        trigger: ['blur', 'change']
                    },
                },

                images: [

                ]
            }
        }
    }
</script>

<style lang="less">
    page {
        background-color: #F5F5F5;
    }

    .content {
        margin: 20rpx 30rpx;
        padding: 0 30rpx;
    }
    .location-btn{
        width:116rpx;
        height:46rpx;
        line-height: 46rpx;
        border-radius: 4rpx;
        border:1px solid currentColor;
        background-color:#fff;
        padding:0;
    }

    .upload {
        margin: 0 30rpx;
        padding: 30rpx;
        .upload-item {
            width: 140rpx;
            height: 140rpx;
            border: 1px solid #EEEEEE;
        }
    }

    .footer {
        width: 100%;
        padding: 30rpx;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 10;
        box-sizing: border-box;

        .footer-btn {
            width: 100%;
            height: 78rpx;
            line-height: 78rpx;
            background: linear-gradient(163deg, #01BDFC 0%, #017BFC 100%);
            border-radius: 8rpx;
            color: #fff;
            font-size: 32rpx;
        }
    }
</style>