epmet-work-uni/pages/work2/work2.vue

<template>
    <view>
        <!-- pages/work2/work2.wxml -->
        <view class="page">
            <view class="header">
                <view class="navigation" :style="'height: ' + navigationHeight + 'px; top: ' + statusHeight + 'px;'">
                    <image src="/images/work2/Header.png " class="back"></image>
                    <text lines="1" class="text_1" :style="' top: ' + statusHeight + 'px;width: 50rpx;height: 50rpx;'">{{ agencyName }}</text>
                </view>
            </view>
            <view class="box_2">
                <view class="section_5">
                    <view class="list_1">
                        <view class="section_1-0">
                            <view class="text-wrapper_7-0">
                                <text lines="1" class="text_2-0">居民信息</text>
                            </view>
                            <view class="content_1">
                                <view>
                                    <image src="/static/images/work2/add_resident.png" class="image_12-0" @tap="onAddResident"></image>
                                    <text lines="1" class="text_3-0" @tap="onAddResident">新增居民信息</text>
                                </view>
                                <view>
                                    <image src="/static/images/work2/add_record.png" class="image_13-0" @tap="onFollowUpList"></image>
                                    <text lines="1" class="text_4-0">新增记录</text>
                                </view>
                            </view>
                        </view>
                        <view class="section_1-0">
                            <view class="text-wrapper_7-0">
                                <text lines="1" class="text_2-0">房屋信息</text>
                            </view>
                            <view class="content_1">
                                <view>
                                    <image src="/static/images/work2/add_houses.png" class="image_12-1" @tap="onAddHouseLL"></image>
                                    <text lines="1" class="text_3-0">新增房屋信息</text>
                                </view>
                                <view>
                                    <image src="/static/images/work2/add_record.png" class="image_13-1" @tap="onFollowUpLi"></image>
                                    <text lines="1" class="text_4-0">新增记录</text>
                                </view>
                            </view>
                        </view>
                        <view class="section_1-0">
                            <view class="text-wrapper_7-0">
                                <text lines="1" class="text_2-0">为民服务</text>
                            </view>
                            <view class="content_1">
                                <view>
                                    <image src="/static/images/work2/reporting.png" class="image_12-2" @tap="onDemandCheck"></image>
                                    <text lines="1" class="text_3-0">诉求上报</text>
                                </view>
                                <view>
                                    <image src="/static/images/work2/rep_record.png" class="image_13-2" @tap="onMyTroubleshootDemand"></image>
                                    <text lines="1" class="text_4-0">诉求办理</text>
                                </view>
                                <view>
                                    <image src="/static/images/work2/satisfaction.png" class="image_13-2" @tap="onHistoryQuery"></image>
                                    <text lines="1" class="text_5-0">满意度调查</text>
                                </view>
                            </view>
                        </view>
                        <!-- <view class="section_1-0">
        <view class="text-wrapper_7-0">
        <text lines="1" class="text_2-0">安检管理</text>
        </view>
        <view class="content_1" bind:tap="onData">
        <view>
        <image src="/images/work2/slices.png" class="image_15">
        </image>
        <text lines="1" class="text_13" >安检巡查</text>
        </view>
        </view>
        
      </view> -->
                        <view class="section_1-0">
                            <view class="text-wrapper_7-0">
                                <text lines="1" class="text_2-0">基层治理</text>
                            </view>
                            <view class="content_1">
                                <view>
                                    <image src="/static/images/work2/slices.png" class="image_12-0" @tap="onData"></image>
                                    <text lines="1" class="text_3-0" @tap="onData">安检巡查</text>
                                </view>
                                <view style="display: flex; justify-items: center">
                                    <image src="/static/images/work2/12345.png" class="image_13-21" style="margin-left: 25px" @tap="onHotlineCompletion"></image>
                                    <text lines="1" class="text_4-0">热线接办</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <custom-tab-bar></custom-tab-bar>
    </view>
</template>

<script>
import customTabBar from '../../components/custom-tab-bar/index.vue';
// pages/work2/work2.js
const app = getApp();
export default {
    components: {
        customTabBar
    },
    data() {
        return {
            statusHeight: '',
            navigationHeight: '',
            agencyName: ''
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.setData({
            statusHeight: app.globalData.deviceInfo.statusHeight,
            navigationHeight: app.globalData.deviceInfo.navigationHeight,
            agencyName: app.globalData.user.agencyName
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        onAddResident() {
            uni.navigateTo({
                url: '../../subpages/addResi/pages/addResi/addResi'
            });
        },

        onAddHouseLL() {
            uni.navigateTo({
                url: '../../subpages/addhouse/pages/addhouse/addhouse'
            });
        },

        onBusinessRecord() {
            uni.navigateTo({
                url: '../../subpages/businessRecord/businessRecord'
            });
        },

        onHistoryQuery() {
            uni.navigateTo({
                url: '../../subpages/communitySelfInsp/pages/historyQuery/historyQuery'
            });
        },

        onFollowUpList() {
            uni.navigateTo({
                url: '../../subpages/communitySelfInsp/pages/followUpList/followUpList?key1=resi'
            });
        },

        onFollowUpLi() {
            uni.navigateTo({
                url: '../../subpages/communitySelfInsp/pages/followUpList/followUpList?key1=house'
            });
        },

        onMyTroubleshootDemand() {
            uni.navigateTo({
                url: '../../subpages/myTroubleshootDemand/pages/index/index'
            });
        },

        onDemandCheck() {
            uni.navigateTo({
                url: '../../subpages/demandCheck/pages/dissatisfied/demandCheck/demandCheck'
            });
        },

        onAddHouse() {
            uni.navigateTo({
                url: '../../subpages/communitySelfInsp/pages/followUpList/followUpList'
            });
        },

        onData() {
            // wx.switchTab({
            uni.navigateTo({
                url: '/subpages/securityCheck/pages/securityCheck'
            });
        },

        // onAddHouse(){
        //     wx.navigateTo({
        //       url: '../../subpages/addhouse/pages/addhouse/addhouse',
        //     })
        // },
        onHotlineCompletion() {
            let token = uni.getStorageSync('token');
            console.log(token, 'jhgjgjjhbj');
            console.log('https://epmet-preview.elinkservice.cn/epmet-work-h5/#/Hotline?worktoken=' + token);
            uni.navigateTo({
                url: '/pages/webView/webView?worktoken=' + token
            });
        }
    }
};
</script>
<style>
/* pages/work2/work2.wxss */
.page {
    /*定位方式为相对定位 */
    position: relative;
    width: 750rpx;
    height: 1400rpx;
    /* 超过页面显示滑轮 */
    overflow: hidden;
    display: flex;
    /* 按照行排序 */
    flex-direction: column;
}
.navigation {
    width: 100%;
    display: flex;
    color: #333333;
    font-size: 32rpx;
    position: relative;
    z-index: 100;
}
.back {
    width: 30rpx;
    height: 30rpx;
    margin-left: 20rpx;
    margin-top: 20rpx;
    border-radius: 0rpx;
    z-index: 101;
}
.header {
    display: flex;
    background: #1974ec;
    width: 100%;
    height: 400rpx;
    flex-direction: column;
    /* margin: 100rpx 0 0 31rpx; */
    height: 500rpx;
}

.image_1 {
    width: 34rpx;
    height: 31rpx;
}
.text_1 {
    margin-left: 20rpx;
    margin-top: 12rpx;
    /* width: 157rpx;
    height: 30rpx; */
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 32rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 42rpx;
    margin-left: 15rpx;
}
.box_2 {
    background-color: rgba(247, 247, 247, 1);
    border-radius: 20rpx;
    /* 相对于父级进行定位 */
    position: absolute;
    left: 0rpx;
    top: 181rpx;
    width: 750rpx;
    height: 1365rpx;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.section_5 {
    width: 750rpx;
    height: 1395rpx;
    display: flex;
    flex-direction: column;
}
.content_1 {
    display: flex;
    /* flex-direction: row; */
    justify-self: center;
    margin: 40rpx 0 0 10rpx;
}
.content_1 > view {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 230rpx;
    height: 210rpx;
}
.data {
    display: flex;
    flex-direction: column;
    margin: 40rpx 0 0 10rpx;
}
.data > view {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 303rpx;
    height: 200rpx;
}

.house {
    display: flex;
    justify-content: start;
    margin: 40rpx 0 0 10rpx;
}
.house > view {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 303rpx;
    height: 200rpx;
}

.image_2 {
    width: 158rpx;
    height: 56rpx;
    margin-left: 332rpx;
}
.list_1 {
    width: 710rpx;
    height: 603rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 43rpx 0 0 20rpx;
}
.section_1-0 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 20rpx;
    height: 292rpx;
    margin-bottom: 19rpx;
    width: 710rpx;
    display: flex;
    flex-direction: column;
}
.image-wrapper_9-1 {
    width: 404rpx;
    height: 100rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 40rpx 0 0 59rpx;
}
.text-wrapper_7-0 {
    width: 134rpx;
    height: 33rpx;
    display: flex;
    /* row水平排列 */
    flex-direction: row;
    margin: 29rpx 0 0 29rpx;
}
.text_2-0 {
    width: 134rpx;
    height: 33rpx;
    /* 文本换行 */
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 34rpx;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 42rpx;
}
.image-wrapper_9-0 {
    width: 303rpx;
    height: 100rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 40rpx 0 0 59rpx;
}
.image_12-0 {
    width: 100rpx;
    height: 100rpx;
}
.image_13-0 {
    width: 100rpx;
    height: 100rpx;
}
.image_13-21 {
    width: 140rpx;
    height: 100rpx;
}
.text-wrapper_8-0 {
    width: 336rpx;
    height: 27rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 23rpx 0 40rpx 31rpx;
}
.text_3-0 {
    height: 27rpx;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 28rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 28rpx;
    margin-top: 15rpx;
}
.text_4-0 {
    /* width: 109rpx; */
    height: 27rpx;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 28rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 28rpx;
    margin-top: 15rpx;
}
.text_5-0 {
    /* width: 109rpx; */
    height: 27rpx;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 28rpx;
    text-align: right;
    white-space: nowrap;
    line-height: 28rpx;
    margin-top: 15rpx;
}
.text-wrapper_8-1 {
    width: 500rpx;
    height: 27rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 23rpx 0 40rpx 31rpx;
}
.image-wrapper_9-1 {
    width: 500rpx;
    height: 100rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 40rpx 0 0 59rpx;
}
.image_12-1 {
    width: 100rpx;
    height: 100rpx;
}
.image_13-1 {
    width: 100rpx;
    height: 100rpx;
}
.image_12-2 {
    width: 100rpx;
    height: 100rpx;
}
.image_13-2 {
    width: 100rpx;
    height: 100rpx;
}
.image_14-1 {
    width: 100rpx;
    height: 100rpx;
    margin-left: 5rpx;
}

.image_14-2 {
    width: 100rpx;
    height: 100rpx;
    margin-left: 5rpx;
}

.text_12 {
    width: 66rpx;
    height: 32rpx;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 34rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 42rpx;
    margin: 30rpx 0 0 29rpx;
}
.image_15 {
    width: 100rpx;
    height: 100rpx;
}
.text_13 {
    height: 26rpx;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 28rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 28rpx;
    margin-top: 15rpx;
}
</style>