静态页面添加

wjt

2024-06-20 5470b3652246095d9d73d8aa03ce8830459af8c9

静态页面添加

 pages.json

@@ -46,7 +46,8 @@
                    "path" : "policyIndex/policyIndex",
                    "style" : 
                    {
                        "navigationBarTitleText" : "首页"
                        "navigationBarTitleText" : "首页",
                        "navigationStyle": "custom"
                    }
                },
                {
@@ -55,6 +56,13 @@
                    {
                        "navigationBarTitleText" : "执法申请"
                    }
                },
                {
                    "path" : "changePhone/changePhone",
                    "style" : 
                    {
                        "navigationBarTitleText" : ""
                    }
                }
            ]
        }

 policy/changePhone/changePhone.vue

New file
@@ -0,0 +1,22 @@
<template>
    <view>
		
    </view>
</template>

<script>
    export default {
        data() {
            return {
				
            }
        },
        methods: {
			
        }
    }
</script>

<style>

</style>

 policy/components/index.vue

New file
@@ -0,0 +1,117 @@
<template>
    <view class="page-content">
	
        <view class="banner">
            <image src="https://picsum.photos/200/200" mode=""></image>
        </view>
        <view class="main-page-box">
            <view class="second-box">
                <image src="/static/index.png" class="icon"></image>
                <view class="driver"></view>
                <view class="right-box">
                    <view>
                        <view class="u-line-1 margin-bottom">海关总署贸易持续发展2024年立法局...</view>
                        <view class="u-line-1">国家医疗保障局办公室关于发布管理... </view>
                    </view>
                    <view class="icon-box">
                        <u-icon name="arrow-right" size="14" color="#868C98FF"></u-icon>
                    </view>
                </view>
            </view>
            <view class="policy-list">
                <u-button @click="applyPulicy">执法申请</u-button>
                <u-button v-if="isJudge">执法审批</u-button>
                <u-button>执法结果上报</u-button>
                <u-button>记录查询</u-button>
                <u-button>数据看板</u-button>
            </view>
        </view>
    </view>
</template>

<script>
    import {  getInfo } from '@/api/auth.js'
    import tabsCom from '@/policy/components/tabs.vue'
    export default {
        components: {
            tabsCom
        },
        data() {
            return {
                isJudge: false
            }
        },
        onShow() {
            this.getInfo()
        },
        methods: {
            getInfo() {
                getInfo().then(val =>{
                    // console.log()
                    this.isJudge = val.data.roles.some(item => item.includes('check_enforce'))
                })
            },
            applyPulicy() {
                uni.navigateTo({
                    url: '/policy/policyApply/policyApply'
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .page-content{
        .banner{
            width: 100%;
            height: 400rpx;
            image{
                width: 100%;
                height: 100%;
            }
        }
        .main-page-box{
            position: relative;
            top: -60rpx;
        }
        .second-box{
            margin: 0 32rpx;
            background-color: white;
            border-radius: 20rpx;
            padding: 34rpx 24rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .icon{
                width: 76rpx;
                height: 76rpx;
				
            }
            .driver{
                height: 50rpx;
                width: 2rpx;
                background-color: #F1F1F1;
                margin: 0 24rpx;
            }
            .right-box{
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: calc(100% - 76rpx - 50rpx);
                font-size: 26rpx;
                color: #4A4E60FF;
                .icon-box{
                    background-color: #F1F1F1;
                    border-radius: 50%;
                    padding: 10rpx;
                }
                .margin-bottom{
                    margin-bottom: 10rpx;
                }
            }
        }
        .policy-list{
            margin: 22rpx 32rpx;
        }
    }
</style>

 policy/components/mine.vue

New file
@@ -0,0 +1,124 @@
<template>
    <view class="page-mine-box">
        <view class="top-box">
            <view class="user-news">
                <u-avatar :src="src"></u-avatar>
                <view class="user-info">
                    <view class="user-name">
                        <view class="inckname">刘小雅</view>
                        <view class="direc"></view>
                        <view class="dept-per">执法人员</view>
                    </view>
                    <view class="dept-name">
                        环保局--第一部门
                    </view>
                </view>
            </view>
        </view>
        <view class="main-box">
            <view class="show-phone-number">
                <text class="label">联系电话</text>
                <text>168****4164</text>
            </view>
            <view class="show-phone-number">
                <view class="set-flex">
                    <u-icon name="phone" size="22"></u-icon>
                    <text class="change">修改手机号</text>
                </view>
                <u-icon name="arrow-right"></u-icon>
            </view>
        </view>
        <view class="logout">
            退出登录
        </view>
    </view>
</template>

<script>
    export default {
        data(){
            return {
                src: ''
            }
        }
    }
</script>

<style lang="scss" scoped>
    .page-mine-box{
        .top-box{
            height: 380rpx;
            width: 100%;
            background-color: #1171E0FF;
            padding-top: 204rpx;
            box-sizing: border-box;
            .user-news{
                margin: 0 48rpx;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .user-info{
                    margin-left: 24rpx;
                    color: white;
                    .user-name{
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        .direc{
                            width: 2rpx ;
                            height: 20rpx;
                            background-color: white;
                            vertical-align: middle;
                            margin: 0 16rpx;
                        }
                    }
                    .dept-name{
                        font-size: 28rpx;
                        color: #FFFFFFB3;
                    }
                    .dept-per{
                        font-size: 24rpx;
                    }
                }
            }
        }
        .main-box{
            position: relative;
            top: -45rpx;
        }
        .show-phone-number{
            background-color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 40rpx;
            border-radius: 10rpx;
            padding: 28rpx 24rpx;
            font-size: 32rpx;
            color: #202D44FF;
            font-weight: normal;
            margin-bottom: 20rpx;
            .label{
                color: #7E8596FF;
            }
            .change{
                margin-left: 20rpx;
                color: #202D44FF;
            }
        }
        .logout{
            text-align: center;
            padding: 20rpx 0;
            justify-content: center;
            align-items: center;
            border-radius: 38rpx;
            background: #FFF;
            font-size: 32rpx;
            color: #4a4e60ff;
            width: calc(100% - 64rpx);
            left: 32rpx;
            position: fixed;
            bottom: 140rpx;
        }
    }
</style>

 policy/components/tabs.vue

New file
@@ -0,0 +1,57 @@
<template>
    <view class="fixed-down">
        <view  @click="activeClick(0)" :class="{ active: active == 0}">
            <view>工作台</view>
        </view>
        <view @click="scode">
            扫码
        </view>
        <view @click="activeClick(1)" :class="{ active: active == 1}">
            <view>我的</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                active: 0
            }
        },
        methods: {
            scode() {
                uni.scanCode({
                    success: val => {
                        if(val.errMsg === 'scanCode:ok'){
                            console.log(val.result)
                        }
                    }
                })
            },
            activeClick(number) {
                this.active = number
                this.$emit('update:activeNumber', number)
            }
        }
    }
</script>

<style scoped lang="scss">
    .fixed-down{
        position: fixed;
        bottom: 0;
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding-bottom: 29rpx;
        padding-top: 20rpx;
        background-color: white;
        font-size: 20rpx;
        color: #7E8596FF;
        .active{
            color: #1171E0FF;
        }
    }
</style>

 policy/policyApply/policyApply.vue

@@ -1,6 +1,85 @@
<template>
    <view class="page-box">
        <u-form label-position="top" label-width="120px">
        <view class="content-box">
            <view class="form">
                <view class="form-item">
                    <view class="form-label require">
                        执法主题
                    </view>
                    <input type="text" placeholder="请输入" v-model="form.enforceReason"/>
                </view>
                <view class="form-item">
                    <view class="form-label require">
                        执法对象
                    </view>
                    <view class="input">
                        <input type="text" placeholder="请输入" v-model="form.companyName"/>
                        <!-- <u-icon name="arrow-right"></u-icon> -->
                        <u-text text='搜索' type="primary"></u-text>
                    </view>
                </view>
                <view class="form-item">
                    <view class="form-label require">
                        执法时间
                    </view>
                    <view class="input">
                        <input type="text" placeholder="请输入"/>
                        <u-icon name="arrow-right"></u-icon>
                    </view>
                </view>
                <view class="form-item">
                    <view class="form-label require">
                        执法类型
                    </view>
                    <view class="input">
                        <input type="text" placeholder="请输入"/>
                        <u-icon name="arrow-right"></u-icon>
                    </view>
                </view>
                <view class="form-item last">
                    <view class="form-label require">
                        执法内容
                    </view>
                    <view class="back">
                        <u--textarea :height="120" v-model="form.regionReason" placeholder="请输入" count maxlength="500"></u--textarea>
                    </view>
                </view>
            </view>
        </view>
        <view class="content-box">
            <view class="form ">
                <view class="form-item">
                    <view class="form-label">
                        执法人员
                    </view>
                    <input type="text" placeholder="请输入"/>
                </view>
                <view class="form-item">
                    <view class="form-label">
                        执法部门
                    </view>
                    <input type="text" placeholder="请输入"/>
                </view>
                <view class="form-item">
                    <view class="form-label require">
                        随行人员数量
                    </view>
                    <input type="text" placeholder="请输入"/>
                </view>
                <view class="form-item down-2">
                    <view class="form-label">
                        是否通知企业
                    </view>
                    <u-switch v-model="form.isNoticeCompany" :activeValue="1" :inactiveValue="0"></u-switch>
                </view>
				
            </view>
        </view>
        <view class="down-options">
            <view class="button record" >申请记录</view>
            <view class="button submit" @click="submitApply">提交申请</view>
        </view>
        <!-- <u-form label-position="top" label-width="120px">
            <u-form-item label="执法主题">
                <u-input placeholder="请输入" v-model="form.enforceReason"></u-input>
            </u-form-item>
@@ -32,9 +111,9 @@
            <u-form-item label="是否通知企业">
                <u-switch v-model="form.isNoticeCompany" :activeValue="1" :inactiveValue="0"></u-switch>
            </u-form-item>
        </u-form>
        <u-button @click="submitApply">提交申请</u-button>
        <u-button @click="applyRecord">申请记录</u-button>
        </u-form> -->
<!--         <u-button @click="submitApply">提交申请</u-button>
        <u-button @click="applyRecord">申请记录</u-button> -->
        <u-picker :show="show" @close="show = false" @confirm="confirmSearch" @cancel="show = false" :columns="columns" keyName="companyName"></u-picker>
        <u-datetime-picker
                    :show="showTime"
@@ -65,7 +144,8 @@
                    applyName: '',
                    applyDeptName: '',
                    enforceType: 1,
                    isNoticeCompany: 0
                    isNoticeCompany: 0,
                    regionReason: ''
                },
                show: false,
                columns: [],
@@ -168,12 +248,107 @@
        }
    }
</script>

<style>
    page{
        background-color: #F4F4F4;
    }
</style>
<style scoped lang="scss">
.page-box{
    padding:0 30rpx;
    padding-bottom: 140rpx;
    .content-box{
        margin:20rpx 32rpx;
        background-color: white;
        padding: 24rpx;
        border-radius: 10rpx;
    }
    .form{
        .form-item{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            border-bottom: 2rpx solid #F1F1F1;
            padding-bottom: 26rpx;
            margin-bottom: 24rpx;
            .form-label{
                font-size: 30rpx;
                color: #4A4E60;
                width: 40%;
            }
            .input{
                width: 60%;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .require{
                &::after{
                    content: '*';
                    color: #FF7500;
                }
            }
		
        }
        .down-2{
            margin-bottom: 0;
            padding-bottom: 0;
            border: none;
        }
        .last{
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
            display: block;
            .form-label{
                margin-bottom: 16rpx;
				
            }
            .back{
                /deep/ .u-textarea{
                    background-color: #F4F4F4;
                    border: none;
                    .u-textarea__count{
                        background: none !important;
                    }
                }
            }
        }
		
    }
}
/deep/ .u-picker__view{
	
.down-options{
    background-color: white;
    position: fixed;
    bottom: 0;
    padding-bottom: 40rpx;
    width: 100%;
    padding: 22rpx 30rpx 40rpx;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    .record{
        box-sizing: border-box;
        border-radius: 20rpx;
        border: 2rpx solid #ABD2FF;
        background: #F0F8FF;
        color: #1171E0;
        font-size: 32rpx;
        padding: 20rpx 30rpx;
        width: 30%;
        text-align: center;
    }
    .submit{
        border-radius: 20rpx;
        border: 2rpx solid #1171E0;
        background-color: #1171E0;
        color: white;
        width: 65%;
        box-sizing: border-box;
        padding: 20rpx 30rpx;
        text-align: center;
    }
}

</style>

 policy/policyIndex/policyIndex.scss

 policy/policyIndex/policyIndex.vue

@@ -1,19 +1,26 @@
<template>
    <view>
        <u-button @click="applyPulicy">执法申请</u-button>
        <u-button v-if="isJudge">执法审批</u-button>
        <u-button>执法结果上报</u-button>
        <u-button>记录查询</u-button>
        <u-button>数据看板</u-button>
        <policyIndexVue v-if="activeNumber == 0"></policyIndexVue>
        <minePage v-if="activeNumber == 1"></minePage>
        <tabsCom :activeNumber.sync="activeNumber"></tabsCom>
    </view>
</template>

<script>
    import {  getInfo } from '@/api/auth.js'
    import tabsCom from '@/policy/components/tabs.vue'
    import policyIndexVue from '@/policy/components/index.vue'
    import minePage from '@/policy/components/mine.vue'
    export default {
        components: {
            tabsCom,
            policyIndexVue,
            minePage
        },
        data() {
            return {
                isJudge: false
                isJudge: false,
                activeNumber: 1
            }
        },
        onShow() {
@@ -34,7 +41,11 @@
        }
    }
</script>

<style>

    page{
        background-color: #F7F7F7;
    }
</style>
<style scoped lang="scss">
@import "./policyIndex.scss";
</style>