场所维护、审核静态页面搭建

GULIMMO

2023-11-08 d62e78573e7d25ec163a03e4ef59befd9aab8749

场所维护、审核静态页面搭建

 pages.json

@@ -186,6 +186,25 @@
                        "navigationBarBackgroundColor": "#fff",
                        "navigationBarTextStyle": "black"
                    }
                },
                {
                    "path": "views/cshw",
                    "style": {
                        "onReachBottomDistance": 10,
                        "navigationBarTitleText": "网格任务审核",
                        "enablePullDownRefresh": false,
                        "navigationBarBackgroundColor": "#fff",
                        "navigationBarTextStyle": "black"
                    }
                },
                {
                    "path": "views/examine",
                    "style": {
                        "navigationBarTitleText": "审核",
                        "enablePullDownRefresh": false,
                        "navigationBarBackgroundColor": "#fff",
                        "navigationBarTextStyle": "black"
                    }
                }
            ]
        },

 pages/home/index.vue

@@ -248,7 +248,7 @@
                        style: {

                            background: 'linear-gradient(133deg, #F9FAFE 0%, rgba(249,250,254,0) 100%)',

                        },

                        path:"/subPackage/workbench/views/cscj"

                        path:"/subPackage/workbench/views/cshw"

                    },

                    {

                        icon: "/static/icon/menu-06.png",


 subPackage/workbench/views/audit.vue

@@ -1,96 +1,95 @@
<template>
    <view>
        <view class="tab">
            <u-tabs :list="tabList"  :current="tabIndex"  @click="changeTab"  :inactiveStyle="{color:'#999999'}"  :activeStyle="{color:'#017BFC'}"></u-tabs>
        </view>
        <view class="list">
            <view class="list-item bgc-ff mb-20"  v-for="i in 3">
                <view class="item-title flex a-i-c j-c-s-b mb-20">
                    <text class="f-32 fw">名称</text>
                    <!-- <u-tag text="待审批" type="warning" plain plainFill></u-tag> -->
                    <u-tag text="审核通过" type="success" plain plainFill></u-tag>
                    <!-- <u-tag text="审核拒绝" type="error" plain plainFill></u-tag> -->
                </view>
                <view class="item-row flex a-i-c j-c-s-b">
                    <text class="f-28">事件类型</text>
                    <text class="f-28 c-66">一次性任务</text>
                </view>
                <view class="item-row flex a-i-c j-c-s-b">
                    <text class="f-28">标签</text>
                    <text class="f-28 c-66">打金店</text>
                </view>
                <view class="item-row flex a-i-c j-c-s-b">
                    <text class="f-28">地址</text>
                    <text class="address f-28 c-66">西市街道万达社区居民委员会滨江西路66号万达晶座11栋303室</text>
                </view>
            </view>
        </view>
		 
    </view>
</template>

<script>
    export default {
        data(){
            return {
                tabList:[
                    {
                    name:"待审核",
                    status:1
                },
                {
                    name:"审核通过",
                    status:2
                },
                {
                    name:"已拒绝",
                    status:3
                },
                ],
                tabIndex:0
            }
        },
        methods:{
            changeTab(e){
                this.tabIndex = e.index;
            }
        }
    }
</script>

<style lang="scss">
    page{
        background-color:#F5F5F5;
    }
    .tab{
        width:100%;
        height:88rpx;
        position:fixed;
        top:0;
        left:0;
        background-color:#fff;
        padding:0 30rpx;
        box-sizing: border-box;
		
    }
    .tab /deep/.u-tabs__wrapper__nav__item{
        flex:1;
    }
    .list{
        margin:118rpx 30rpx 0;
    }
    .list-item{
        padding:0 30rpx 20rpx;
        border-radius: 8rpx;
        .item-title{
            padding:30rpx 0;
            border-bottom:1px solid #F5F5F5;
        }
        .item-row{
            padding:10rpx 0;
            .address{
                width:65%;
            }
        }
    }
<template>

    <view>

        <u-sticky>

            <view class="tab">

                <view class="tab">
                    <u-tabs :list="tabList" :scrollable="false" :current="tabIndex" @click="changeTab"
                        :inactiveStyle="{color:'#999999'}" :activeStyle="{color:'#017BFC'}"></u-tabs>
                </view>

            </view>

        </u-sticky>

        <view class="list">

            <view class="list-item bgc-ff mb-20" v-for="i in 3">

                <view class="item-title flex a-i-c j-c-s-b mb-20">

                    <text class="f-32 fw">名称</text>

                    <!-- <u-tag text="待审批" type="warning" plain plainFill></u-tag> -->

                    <u-tag text="审核通过" type="success" plain plainFill></u-tag>

                    <!-- <u-tag text="审核拒绝" type="error" plain plainFill></u-tag> -->

                </view>

                <view class="item-row flex a-i-c j-c-s-b">

                    <text class="f-28">场所名称</text>

                    <text class="f-28 c-66">xxxxx</text>

                </view>

                <view class="item-row flex a-i-c j-c-s-b">

                    <text class="f-28">标签</text>

                    <text class="f-28 c-66">打金店</text>

                </view>

                <view class="item-row flex a-i-c j-c-s-b">

                    <text class="f-28">地址</text>

                    <text class="address f-28 c-66">西市街道万达社区居民委员会滨江西路66号万达晶座11栋303室</text>

                </view>

            </view>

        </view>



    </view>

</template>



<script>

    export default {

        data() {

            return {

                tabList: [{

                        name: "待审核",

                        status: 1

                    },

                    {

                        name: "审核通过",

                        status: 2

                    },

                    {

                        name: "已拒绝",

                        status: 3

                    },

                ],

                tabIndex: 0,

            }

        },

        methods: {

            changeTab(e) {

                this.tabIndex = e.index;

            },

        }

    }

</script>



<style lang="scss">

    page {

        background-color: #F5F5F5;

    }



    .tab {

        background-color: #fff;

    }



    .list {

        margin: 20rpx 30rpx 0;

    }



    .list-item {

        padding: 0 30rpx 20rpx;

        border-radius: 8rpx;



        .item-title {

            padding: 30rpx 0;

            border-bottom: 1px solid #F5F5F5;

        }



        .item-row {

            padding: 10rpx 0;



            .address {

                width: 65%;

            }

        }

    }

</style>

 subPackage/workbench/views/cshw.vue

New file
@@ -0,0 +1,115 @@
<template>

    <view>

        <u-sticky>

            <view class="tab">

                <view class="tab">

                    <u-tabs :list="tabList" :scrollable="false" :current="tabIndex" @click="changeTab"

                        :inactiveStyle="{color:'#999999'}" :activeStyle="{color:'#017BFC'}"></u-tabs>

                    <view class="search">

                        <u-search placeholder="请输入场所名称" v-model="keyWord" :clearabled="true" :showAction="true"

                            :animation="true" @search="searchConfirm" @clear="clearConfirm"></u-search>

                    </view>

                </view>

            </view>

        </u-sticky>

        <view class="list">

            <view class="list-item bgc-ff mb-20" v-for="i in 3" @click="pushPage">

                <view class="item-title flex a-i-c j-c-s-b mb-20">

                    <text class="f-32 fw">名称</text>

                    <!-- <u-tag text="待审批" type="warning" plain plainFill></u-tag> -->

                    <u-tag class="u_tag" size="mini" text="审核通过" type="success" plain plainFill></u-tag>

                    <!-- <u-tag text="审核拒绝" type="error" plain plainFill></u-tag> -->

                </view>

                <view class="item-row flex a-i-c j-c-s-b">

                    <text class="f-28">场所名称</text>

                    <text class="f-28 c-66">xxxxx</text>

                </view>

                <view class="item-row flex a-i-c j-c-s-b">

                    <text class="f-28">标签</text>

                    <text class="f-28 c-66">打金店</text>

                </view>

                <view class="item-row flex a-i-c j-c-s-b">

                    <text class="f-28">地址</text>

                    <text class="address f-28 c-66">西市街道万达社区居民委员会滨江西路66号万达晶座11栋303室</text>

                </view>

            </view>

        </view>

        <u-loadmore :status="loadingStatus" loadmoreText="开始加载" loadingText="数据加载中" nomoreText="没有更多了" line />

    </view>

</template>



<script>

    export default {

        data() {

            return {

                tabList: [{

                        name: "待审核",

                        status: 1

                    },

                    {

                        name: "审核通过",

                        status: 2

                    },

                    {

                        name: "已拒绝",

                        status: 3

                    },

                ],

                tabIndex: 0,

                keyWord: '',
                loadingStatus: 'nomore'

            }

        },
        onReachBottom() {
            console.log('没有了');
        },

        methods: {

            changeTab(e) {

                this.tabIndex = e.index;

            },

            searchConfirm() {},

            clearConfirm() {

                this.keyWord = ''

            },

            pushPage() {

                this.$u.func.globalNavigator('/subPackage/workbench/views/examine')

            }

        }

    }

</script>



<style lang="scss">

    page {

        background-color: #F5F5F5;

    }



    .tab {

        background-color: #fff;



        .search {

            padding: 20rpx 70rpx;

        }

    }



    .list {

        margin: 20rpx 30rpx 0;

    }



    .list-item {

        padding: 0 30rpx 20rpx;

        border-radius: 8rpx;



        .item-title {

            padding: 30rpx 0;

            border-bottom: 1px solid #F5F5F5;

        }



        .item-row {

            padding: 10rpx 0;



            .address {

                width: 65%;

            }

        }

    }

</style>

 subPackage/workbench/views/csjl.vue

@@ -1,14 +1,16 @@
<template>

    <view class="container">

        <view class="tabsAndSearch">

            <view class="tabs">

                <u-tabs :list="tabsList" @click="tabClick" :scrollable="false"></u-tabs>

        <u-sticky>

            <view class="tabsAndSearch">

                <view class="tabs">

                    <u-tabs :list="tabsList" @click="tabClick" :scrollable="false"></u-tabs>

                </view>

                <view class="search">

                    <u-search placeholder="请输入场所名称" v-model="iptContext" :clearabled="true" :showAction="true"

                        :animation="true" @search="searchConfirm" @clear="clearConfirm"></u-search>

                </view>

            </view>

            <view class="search">

                <u-search placeholder="请输入场所名称" v-model="iptContext" :clearabled="true" :showAction="true" :animation="true"

                    @search="searchConfirm" @clear="clearConfirm"></u-search>

            </view>

        </view>

        </u-sticky>

        <view class="info-box">

            <view class="records-card" v-for="(records, index) in recordsData" :key="records.id"

                @click="pushPage(records)">

@@ -28,7 +30,7 @@
                </view>

            </view>

        </view>

        <u-loadmore :status="status" loadmoreText="开始加载" loadingText="数据加载中" nomoreText="数据加载完成" line />

        <u-loadmore :status="status" loadmoreText="开始加载" loadingText="数据加载中" nomoreText="没有更多了" line />

    </view>

</template>



@@ -110,10 +112,10 @@
                    size: 10

                }

                this.getrRecordList(this.iptContext, this.tabsType)

            },
            clearConfirm() {
                this.iptContext = ''
                this.searchConfirm()
            },

            clearConfirm() {

                this.iptContext = ''

                this.searchConfirm()

            },

            pushPage({

                houseCode

@@ -132,70 +134,67 @@
    }

</script>



<style lang="scss" scoped>
    page {
        background-color: #f6f6f6;
    }

    .container {

<style lang="scss" scoped>

    page {

        background-color: #f6f6f6;

    }



        .tabsAndSearch {

    .tabsAndSearch {

        background-color: #fff;



        .tabs {}



        .search {

            padding: 20rpx 70rpx;



            .search-ipt {

                border: 0;

                border-radius: 9999rpx;

                background-color: #f6f6f6;

            }

        }



    }



    .info-box {

        .records-card {

            margin: 20rpx 30rpx 0 30rpx;

            background-color: #fff;

            padding: 30rpx;

            border-radius: 10rpx;



            .tabs {}

            .title {

                line-height: 70rpx;

                display: flex;

                font-size: 35rpx;

                display: flex;

                justify-content: space-between;

                border-bottom: 1rpx solid #f6f6f6;



            .search {

                padding: 20rpx 70rpx;

                text {

                    &:nth-child(1) {

                        font-weight: 700;

                    }



                .search-ipt {

                    border: 0;

                    border-radius: 9999rpx;

                    background-color: #f6f6f6;

                    &:nth-child(2) {

                        font-size: 27rpx;

                        color: #999999;

                    }

                }

            }



        }

            .charge-man,

            .phone {

                display: flex;

                justify-content: space-between;

                font-weight: 30rpx;

                color: #717171;

                margin-top: 25rpx;

                font-size: 30rpx;

            }



        .info-box {

            .records-card {

                margin: 20rpx 30rpx 0 30rpx;

                background-color: #fff;

                padding: 30rpx;

                border-radius: 10rpx;



                .title {

                    line-height: 70rpx;

                    display: flex;

                    font-size: 35rpx;

                    display: flex;

                    justify-content: space-between;

                    border-bottom: 1rpx solid #f6f6f6;



                    text {

                        &:nth-child(1) {

                            font-weight: 700;

                        }



                        &:nth-child(2) {

                            font-size: 27rpx;

                            color: #999999;

                        }

                    }

                }



                .charge-man,

                .phone {

                    display: flex;

                    justify-content: space-between;

                    font-weight: 30rpx;

                    color: #717171;

                    margin-top: 25rpx;

                    font-size: 30rpx;

                }



                &:last-child {

                    margin-bottom: 20rpx;

                }

            &:last-child {

                margin-bottom: 20rpx;

            }

        }

    }


 subPackage/workbench/views/examine.vue

New file
@@ -0,0 +1,188 @@
<template>

    <view class="container">

        <view class="basic">

            <box-title title="基本信息" class="box-title"></box-title>

            <view class="info">

                <lineItem :dataInfo="basicData"></lineItem>

            </view>

        </view>

        <view class="licence">

            <box-title title="营业执照" class="box-title"></box-title>

            <view class="info">

                <view class="images-box"></view>

            </view>

        </view>

        <view class="planegraph">

            <box-title title="场所平面图" class="box-title"></box-title>

            <view class="info">

                <view class="images-box"></view>

            </view>

        </view>

        <view class="personnel">

            <box-title title="从业人员" class="box-title"></box-title>

            <view class="info">

                <view class="person-box" v-for="(item, index) in personnelData" :key="index">

                    <view class="title">人员信息-#{{ index + 1 }}</view>

                    <line-item :data-info="item"></line-item>

                </view>

            </view>

        </view>

        <view class="examine">

            <box-title title="审核信息" class="box-title"></box-title>

            <view class="info">

                <u-form labelWidth="70" :model="form" ref="form" class="form">

                    <u-form-item label="审核状态" @click="isPickerShow = true" class="form-item">

                        <u-input v-model="form.status" disabled disabledColor="#ffffff" placeholder="请选择审核状态"

                            border="none"></u-input>

                        <u-icon slot="right" name="arrow-right"></u-icon>

                    </u-form-item>

                    <u-form-item label="备注" class="form-item">

                        <u-input v-model="form.remark" border="none"></u-input>

                    </u-form-item>

                </u-form>

            </view>

        </view>

        <view class="bottom-btn">

            <u-button type="primary" @click="submit">提交审核</u-button>

        </view>

        <u-picker :closeOnClickOverlay="true" @close="isPickerShow = false" :show="isPickerShow" ref="uPicker"

            :columns="columns" keyName="name" @cancel="isPickerShow = false" @confirm="handleConfirm"></u-picker>

    </view>

</template>



<script>

    import boxTitle from '@/components/boxTitle/index.vue'

    import lineItem from '../components/lineItem.vue'

    export default {

        components: {

            boxTitle,

            lineItem

        },

        data() {

            return {

                basicData: [{

                        label: '场所名称',

                        value: '未完善'

                    },

                    {

                        label: '法人信息',

                        value: '未完善'

                    },

                    {

                        label: '法人电话',

                        value: '未完善'

                    },

                    {

                        label: '场所位置',

                        value: '未完善'

                    },

                ],

                personnelData: [

                    [{

                            label: '姓名',

                            value: '未完善',

                        },

                        {

                            label: '电话号码',

                            value: '未完善',

                        },

                        {

                            label: '暂住地',

                            value: '未完善',

                        }

                    ],

                    [{

                            label: '姓名',

                            value: '未完善',

                        },

                        {

                            label: '电话号码',

                            value: '未完善',

                        },

                        {

                            label: '暂住地',

                            value: '未完善',

                        }

                    ]

                ],

                form: {

                    status: '未审批',

                    remark: ''

                },

                isPickerShow: false,

                columns: [

                    [{

                        name: '通过',

                        type: 1

                    }, {

                        name: '不通过',

                        type: 2

                    }]

                ]

            }

        },

        methods: {

            handleConfirm(e) {

                this.form.status = e.value[0].name

                this.isPickerShow = false

            },

            submit() {



            }

        }

    }

</script>



<style lang="scss" scoped>

    page {

        background-color: #f6f6f6;

    }



    .container {

        padding-bottom: 130rpx;



        .box-title {

            margin-bottom: 15rpx;

        }



        .info {

			


            .title {

                font-size: 30rpx;
                padding-left: 10rpx;

            }



            .images-box {

                padding: 20rpx;

                min-height: 100rpx;

                background-color: #fff;

            }

        }



        .form {
            background-color: #fff;

            .form-item {

                padding: 0 20rpx;



                &:first-child {

                    border: 1rpx solid #f6f6ff;

                }

            }

        }



        .bottom-btn {

            position: fixed;

            left: 0;

            bottom: 0;

            padding: 20rpx;

            width: calc(100% - 40rpx);

            background-color: #fff;

        }

    }



    /deep/ .u-form-item__body__left__content__label,

    /deep/ .uni-input-input {

        font-size: 30rpx;

    }

</style>