报事静态页面

guoshilong

2023-10-27 b5eb99f9d8937b87f3b3ecb9f96166b54e602125

报事静态页面

 components/boxTitle/index.vue

@@ -36,7 +36,7 @@
        align-items: center;
        position: relative;
        height: 60rpx;
		

        .title {
            position: absolute;
            z-index: 1;
@@ -48,7 +48,7 @@
            left: 10rpx;
            bottom: 0;
            width: 96rpx;
            background: linear-gradient(to right, #407BE999, #73A2F900);
            background: linear-gradient(to right, #2991faff, #73A2F900);
            z-index: 0;
        }
    }

 mixin/uploadMixin.js

New file
@@ -0,0 +1,97 @@
import {
    devUrl,
    clientId,
    clientSecret
} from '@/common/setting'

export default {
    data() {
        return {
            form: {
                images: []
            },

            uploadConfig: {
                acceptImg: "image",
                acceptVideo: 'video',
                capture: ['album', 'camera'],
                multiple: true,
                maxCount: "5",
                previewFullImage: true,
                uploadText: "上传中",
                url: devUrl + "/blade-resource/oss/endpoint/put-file-attach",
                header: {},
            },
        }
    },

    methods: {
        //获取头部
        getHeader() {
            let accessToken = uni.getStorageSync('accessToken');
            let myHeader = {}
            if (accessToken) {
                myHeader['Blade-Auth'] = 'bearer ' + accessToken;
            }
            // 客户端认证参数
            myHeader['Authorization'] = 'Basic ' + Base64.encode(clientId + ':' + clientSecret);
            this.uploadConfig.header = myHeader
        },

        //上传方法
        uploadFilePromise(url) {
            return new Promise((resolve, reject) => {
                let a = uni.uploadFile({
                    url: this.uploadConfig.url, //接口地址
                    filePath: url,
                    name: 'file',
                    header: this.uploadConfig.header,
                    success: (res) => {
                        let data = JSON.parse(res.data)
                        setTimeout(() => {
                            resolve(data)
                        }, 1000)
                    }
                });
            })
        },

        //上传成功后对返回数据进行处理
        async afterReadImg(event) {
            this.showLoading()

            // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
            let lists = [].concat(event.file)
            let fileListLen = this.form.images.length
            lists.map((item) => {
                this.form.images.push({
                    ...item,
                    status: 'uploading',
                    message: '上传中'
                })
            })
            for (let i = 0; i < lists.length; i++) {
                const result = await this.uploadFilePromise(lists[i].url)
                this.form.images.splice(fileListLen, 1, Object.assign({}, {
                    url: result.data.link
                }))
                fileListLen++
            }
            this.loadingClose()
        },

        //删除图片
        deletePic(event) {
            this.form.images.splice(event.index, 1)
        },
        showLoading() {
            uni.showLoading({
                mask: true,
                title: '上传中'
            })
        },
        loadingClose() {
            uni.hideLoading()
        },
    }
}

 pages.json

@@ -368,7 +368,40 @@
                    }
                }
            ]
        },

        //报事
        {
            "root": "subPackage/bs",
            "pages": [{
                    "path": "views/index",
                    "style": {
                        "navigationBarTitleText": "报事",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "views/bsReport",
                    "style": {
                        "navigationBarTitleText": "报事",
                        "navigationBarBackgroundColor": "#4586fe",
                        "navigationBarTextStyle": "white",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "views/zhsb",
                    "style": {
                        "navigationBarTitleText": "出租管理",
                        "navigationBarBackgroundColor": "#4586fe",
                        "navigationBarTextStyle": "white",
                        "enablePullDownRefresh": false
                    }
                }

            ]
        }

    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",

 subPackage/bs/components/rentList/index.vue

New file
@@ -0,0 +1,88 @@
<template>
    <view class="list-container">

        <view class="item" v-for="(item, index) in list" :key="index">
            <view class="line">
                <view class="l">租客：{{item.name}} {{`(共${item.num}人)`}}</view>
                <view class="r">
                    <u-icon name="trash-fill" color="#ff0000" size="18"></u-icon>
                </view>
            </view>

            <view class="line">
                <view class="l">{{item.startTime}} - {{item.endTime}}</view>
                <view class="r status">
                    {{item.status}}
                </view>
            </view>

            <view class="btn">
                <u-button :customStyle="btnCustomStyle" color="#cdf3df" type="primary" text="修改"></u-button>
            </view>

        </view>

        <u-divider text="已经到底了"></u-divider>
    </view>
</template>

<script>
    export default {
        props: {
            list: {
                type: Array,
                default: () => []
            }
        },
        data() {
            return {
                btnCustomStyle: {
                    color: "#6dc160",
                    fontWeight: "700"
                }
            }
        },
        created() {

        },
        mounted() {

        },
        onLoad(option) {

        },
        onShow() {

        },
        methods: {

        }
    }
</script>

<style scoped lang="scss">
    .list-container {

        .item {
            background-color: #ffffff;
            margin: 20rpx 0;

            .line {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 14rpx;

                .status {
                    color: #6dc160
                }

            }

            .btn {
                padding: 24rpx;
            }
        }

    }
</style>

 subPackage/bs/views/bsReport.vue

New file
@@ -0,0 +1,138 @@
<template>
    <view class="container">

        <u-form labelWidth="70" :model="form" :rules="rules" ref="form">
            <view class="box-title">
                <box-title title="基础信息"></box-title>
            </view>
            <view class="event-info">
                <u-form-item class="form-item" labelWidth="100" label="当前位置:" required prop="location">
                    <u--input border="none" v-model="form.location" placeholder="请输入当前位置">
                    </u--input>
                </u-form-item>

                <u-form-item class="form-item" labelWidth="100" label="事件标题:" required prop="title">
                    <u--input border="none" v-model="form.title" placeholder="请输入事件标题">
                    </u--input>
                </u-form-item>

                <u-form-item @click="typeShow = true" class="form-item" labelWidth="100" label="事件类型:" required
                    prop="type">
                    <u--input border="none" v-model="typeName" disabled disabledColor="#ffffff" placeholder="请选择事件类型">
                    </u--input>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                </u-form-item>

                <u-form-item class="form-item" labelWidth="100" label="事件描述:" required prop="description">
                    <u--input border="none" v-model="form.description" placeholder="请输入事件描述">
                    </u--input>
                </u-form-item>
            </view>

            <view class="box-title">
                <box-title title="事件照片"></box-title>
            </view>

            <view class="event-pic">

                <u-upload :fileList="form.images" :previewFullImage="uploadConfig.previewFullImage"
                    :accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple" :maxCount="uploadConfig.maxCount"
                    :capture="uploadConfig.capture" @afterRead="afterReadImg" @delete="deletePic">
                </u-upload>
            </view>
        </u-form>


        <!-- 事件类型下拉框 -->
        <my-select v-if="typeShow" :show="typeShow" v-model="form.type" type="radio" popupTitle="请选择事件类型"
            :dataLists="typeList" @cancel="typeShow = false" @submit="typeSelect">
        </my-select>

    </view>
</template>

<script>
    import mySelect from "@/components/my-components/my-select.vue"
    import uploadMixin from "@/mixin/uploadMixin";
    export default {
        components: {
            mySelect
        },
        mixins: [uploadMixin],
        data() {
            return {
                typeName: "",
                form: {
                    location: "",
                    title: "",
                    type: "",
                    description: "",
                },
                rules: {},

                typeShow: false,
                typeList: [{
                        value: "1",
                        name: "物业保修",
                    },
                    {
                        value: "2",
                        name: "矛盾纠纷",
                    }
                ],
            }
        },
        created() {
            this.getHeader()
        },
        mounted() {

        },
        onLoad(option) {

        },
        onShow() {

        },
        methods: {
            //类型选择确认
            typeSelect(item) {
                this.typeName = item.name
                this.form.type = item.value
                this.typeShow = !this.typeShow
            },
        }
    }
</script>

<style scoped lang="scss">
    .container {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background: #F9F9FA;

        .box-title {
            padding: 10px 0;
        }

        .event-info {

            .form-item {
                background-color: #ffffff;
                padding: 5px 10px;
                border-bottom: 1px solid #eff1f3;
            }

        }

        .event-pic {
            background-color: #ffffff;
            padding: 40rpx 30rpx;
        }


    }
</style>

 subPackage/bs/views/index.vue

New file
@@ -0,0 +1,163 @@
<template>
    <view class="container">

        <view class="main">

            <view class="main-select">
                <u-icon name="map" color="#6288fe"></u-icon>
                <view class="address">
                    江西省上饶市信州区西市街道
                </view>
            </view>

            <view class="main-statistics">
                <view v-for="(item,index) in statisticsList" :key="index" class="item">
                    <view class="value">{{item.num}}</view>
                    <view class="label">{{item.label}}</view>
                </view>
            </view>

            <view class="box-title">
                <box-title title="报事"></box-title>
            </view>

            <view class="main-service">
                <view v-for="(item,index) in serviceList" :key="index" @click="navigator(item.url)" class="item">
                    <view class="value">
                        <u-icon :name="item.icon" :color="item.color" size="32"></u-icon>
                    </view>
                    <view class="label">{{item.label}}</view>
                </view>
            </view>


        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                statisticsList: [{
                        num: "4",
                        label: "总数"
                    },
                    {
                        num: "2",
                        label: "已处理"
                    }
                ],

                serviceList: [{
                        icon: "bell",
                        color: "#6db665",
                        label: "报事",
                        url: "/subPackage/bs/views/bsReport"
                    },
                    {
                        icon: "home",
                        color: "#2979ff",
                        label: "租户上报",
                        url: "/subPackage/bs/views/zhsb",
                    }
                ],


            }
        },
        created() {

        },
        mounted() {

        },
        onLoad(option) {


        },
        onShow() {

        },
        methods: {
            navigator(url) {
                this.$u.func.globalNavigator(url)
            }
        }
    }
</script>

<style scoped lang="scss">
    .container {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background: #F9F9FA;

        .main-select {
            display: flex;
            padding: 52rpx 10rpx;

            color: #4586fe;
        }

        .main-statistics {
            display: flex;

            .item {
                display: flex;
                width: 50%;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background-color: #ffffff;
                height: 130rpx;

                .value {
                    color: #4586fe;
                    font-weight: 700;
                }
            }

            .item:nth-child(2n+1) {
                border-right: 1px solid #eff1f3;
            }

        }

        .main-service {
            display: flex;

            .item {
                display: flex;
                width: 50%;
                /* height: 97px; */
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background-color: #ffffff;
                height: 90px;

                .value {
                    color: #4586fe;
                    font-weight: 700;
                }
            }

            .item:nth-child(2n+1) {
                border-right: 1px solid #eff1f3;
            }

        }
    }

    .box-title {
        padding: 40rpx 0;
    }

    view {
        font-size: 32rpx;
    }
</style>

 subPackage/bs/views/zhsb.vue

New file
@@ -0,0 +1,124 @@
<template>
    <view class="container">
        <view class="info">
            <view class="item location">
                <u-icon name="map" color="#000000" size="16"></u-icon>
                <view class="location">
                    {{location}}
                </view>
            </view>

            <view class="item statistics">
                <view class="room">{{room}}</view>
                <view class="num">{{`(共${num}人)`}}</view>
            </view>
        </view>


        <view class="box-title">
            <box-title title="出租管理"></box-title>
        </view>

        <view class="list">
            <rentList :list="rentList"></rentList>
        </view>


        <view class="btn">
            <u-button type="primary" :plain="true" text="添加租赁信息"></u-button>
        </view>


    </view>
</template>

<script>
    import rentList from "@/subPackage/bs/components/rentList/index.vue"
    export default {
        components: {
            rentList
        },
        data() {
            return {
                location: "万达晶座：11栋楼",
                room: "一单元303室",
                num: "1",

                //出租列表
                rentList: [{
                        name: "张三",
                        num: "1",
                        startTime: "2022-01-01",
                        endTime: "2023-12-23",
                        status: "未到期"
                    },
                    {
                        name: "测试",
                        num: "2",
                        startTime: "2022-01-01",
                        endTime: "2023-12-23",
                        status: "未到期"
                    },
                    {
                        name: "张三",
                        num: "1",
                        startTime: "2022-01-01",
                        endTime: "2023-12-23",
                        status: "未到期"
                    }
                ]
            }
        },
        created() {

        },
        mounted() {

        },
        onLoad(option) {

        },
        onShow() {

        },
        methods: {

        }
    }
</script>

<style scoped lang="scss">
    .container {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background: #F9F9FA;

        .item {
            display: flex;
            padding: 30rpx 20rpx;
            background-color: #ffffff;
            border-bottom: 1px solid #eff1f3;
        }

        .location {
            font-weight: 700;
        }

        .room {
            font-weight: 700;
        }

        .btn {}
    }

    .box-title {
        padding: 40rpx 0;
    }

    view {
        font-size: 32rpx;
    }
</style>