用户中心样式，添加子栏目

liuyg

2021-05-28 a5435a165019945367d8b109037545d8fe2c053c

用户中心样式，添加子栏目

 pages.json

@@ -20,6 +20,46 @@
            }
        },
        {
            "path": "pages/myself/childen/aboutUs",
            "name": "aboutUs",
            "style": {
                "navigationBarTitleText": "关于我们",
                "navigationBarBackgroundColor": "#F56968"
            }
        },
        {
            "path": "pages/myself/childen/shezhi",
            "name": "shezhi",
            "style": {
                "navigationBarTitleText": "系统设置",
                "navigationBarBackgroundColor": "#F56968"
            }
        },
        {
            "path": "pages/myself/childen/yijian",
            "name": "yijian",
            "style": {
                "navigationBarTitleText": "意见反馈",
                "navigationBarBackgroundColor": "#F56968"
            }
        },
        {
            "path": "pages/myself/childen/genxin",
            "name": "genxin",
            "style": {
                "navigationBarTitleText": "版本更新",
                "navigationBarBackgroundColor": "#F56968"
            }
        },
        {
            "path": "pages/myself/childen/xinxi",
            "name": "xinxi",
            "style": {
                "navigationBarTitleText": "账户信息",
                "navigationBarBackgroundColor": "#F56968"
            }
        },
        {
            "path": "pages/business/business",
            "name": "business",
            "style": {

 pages/loging/loging.vue

@@ -3,7 +3,7 @@
        <!-- <span style="position: absolute;top: 0;">user: {{$store.state.message.useName}}</span> -->
        <view class="main">
            <view class="topImg">
                <image class="Timg" src="../../static/用户.png" mode=""></image>
                <image class="Timg" src="../../static/users.png" mode=""></image>
            </view>
            <view class="titie">
                <span>物联网安保云服务平台</span>

 pages/myself/childen/aboutUs.vue

New file
@@ -0,0 +1,65 @@
<template>
    <view class="aboutUs">
        <view class="up">
            <image src="../../../static/users.png" mode=""></image>
            <view class="a">
                6.4.1
            </view>
            <view class="b">
                2020.02.29
            </view>
            <view class="jianjie">
                公司成立于1993年，注册资金1260万，公司在北京、深圳设有研发实体、在九江、赣州、上饶、修水等地设有分公司，主要从事通信系统建设、计算机网络系统集成、弱电及楼宇智能化建设、安防系统工程建设等方面的项目设计、工程实施与维护、技术咨询与服务的高新技术企业。涉及安防领域项目建设，包括金融系统联网报警、公安指挥三台合一、视频监控、门禁、监听、对讲、周界防范、电子巡更、室内屏蔽等系统。公司客户范围涉及政法（公安、监狱、看守所、拘留所）、电力、交通、金融、文教、电信、移动、联通、广电等系统单位。公司具有良好的发展平台及广阔的发展空间，热诚欢迎行业精英加入。
            </view>

        </view>
        <view class="down">
            安防管理系统 Copyright © 江西北邮信息通信技术有限公司
        </view>

    </view>
</template>

<script>
</script>

<style lang="scss" scoped>
    .aboutUs {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .up {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            image {
                width: 4rem;
                height: 4rem;
            }

            .jianjie {
                padding: 1rem 1rem 0 1rem;
                text-indent:2em;
                line-height: 1.54rem;
                // letter-spacing: 0.08rem;
            }

            .a {
                padding-top: 1rem;
            }
        }

        .down {
            position: fixed;
            bottom: 1rem;

            font-size: 0.1rem;
        }
    }
</style>

 pages/myself/childen/genxin.vue

New file
@@ -0,0 +1,87 @@
<template>
    <view class="aboutUs">
        <image src="../../../static/users.png" mode=""></image>
        <view class="a">
            6.4.1
        </view>
        <view class="b">
            2020.02.29
        </view>
        <view class="genxinBut">
            <button class="custom-btn btn-3" @click="upMain"><span>点击更新</span></button>
        </view>
    </view>
</template>

<script>
    export default {
        methods: {
            upMain() {
                uni.showLoading({
                    title: "正在检查更新...",
                    mask: true
                })
                var time = setTimeout(() => {
                    wx.showToast({
                        title: '您当前是最新版！',
                        icon: "success",
                        duration: 1000
                    })
                    time = null
                }, 1000)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .aboutUs {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        image {
            width: 4rem;
            height: 4rem;
        }

        .a {
            padding-top: 1rem;
        }

        .genxinBut {
            .custom-btn {
                width: 130px;
                height: 40px;
                color: #fff;
                border-radius: 5px;
                padding: 10px 25px;
                font-family: 'Lato', sans-serif;
                font-weight: 500;
                background: transparent;
                cursor: pointer;
                transition: all 0.3s ease;
                position: relative;
                display: inline-block;
                box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
                    7px 7px 20px 0px rgba(0, 0, 0, .1),
                    4px 4px 5px 0px rgba(0, 0, 0, .1);
                outline: none;
            }

            .btn-3 {
                background: rgb(0, 172, 238);
                background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%);
                width: 130px;
                height: 40px;
                line-height: 42px;
                padding: 0;
                border: none;

            }
        }
    }
</style>

 pages/myself/childen/shezhi.vue

New file
@@ -0,0 +1,19 @@
<template>
    <view class="shezhi">
        更多功能即将上线······
    </view>
</template>

<script>
</script>

<style lang="scss" scoped>
.shezhi{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
</style>

 pages/myself/childen/xinxi.vue

New file
@@ -0,0 +1,72 @@
<template>
    <view class="xinxi">
        <view class="once">
            <view class="title">
                姓名：
            </view>
            <view class="msg">
                {{name}}
            </view>
        </view>
        <view class="once">
            <view class="title">
                电话：
            </view>
            <view class="msg">
                {{phon}}
            </view>
        </view>
        <view class="once">
            <view class="title">
                编号：
            </view>
            <view class="msg">
                {{id}}
            </view>
        </view>
    </view>
</template>

<script>
export default{
    data(){
        return{
			
        }
    },
    computed:{
        name(){
            return this.$store.state.puserName
        },
        id(){
            return this.$store.state.puserID
        },
        phon(){
            return this.$store.state.puserIphone
        },
    }
}
</script>

<style lang="scss" scoped>
.xinxi{
    width: 100%;
    height: 90%;
    box-sizing: border-box;
    .once{
        &:first-child{
            margin-top: 1rem;
            box-sizing: border-box;
        }
        box-sizing: border-box;
        margin: 0 auto;
        width: 95%;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);
        margin-bottom: 0.5rem;
    }
}
</style>

 pages/myself/childen/yijian.vue

New file
@@ -0,0 +1,68 @@
<template>
    <view class="yijian">
        <view class="title">

            请输入改善意见，我们将会第一时间处理！：）
        </view>
        <textarea class="longInput" cols="4" rows="8" placeholder="请输入"></textarea>
        <view class="butUps" @click="upMain">
            提交
        </view>
    </view>
</template>

<script>
    export default {
        methods: {
            upMain() {
                uni.showLoading({
                    title: "正在提交...",
                    mask: true
                })
                var time = setTimeout(() => {
                    wx.showToast({
                        title: '提交成功！',
                        icon: "success",
                        duration: 1000
                    })
                    time = null
                }, 1000)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .yijian {
        width: 100%;
        height: 80%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .title {
            // border: 1px solid rgba($color: #000000, $alpha: 1.0);
            padding-bottom: 1rem;
            // padding-top: 15rem;
            box-sizing: border-box;
        }

        .longInput {
            border: 1px solid rgba($color: #000000, $alpha: 1.0);
        }

        .butUps {
            margin: 2rem auto;
            width: 6rem;
            height: 6rem;
            border: 1px solid rgb(46, 118, 228);
            border-radius: 3rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            background-image: linear-gradient(to bottom, #3CA7F4, #4D7CEE);
        }
    }
</style>

 pages/myself/myself.vue

@@ -15,62 +15,18 @@
                二维码
            </view>
        </view>
        <view class="nav-user">
            <navigator url="" class="nav-user-in">
                <view class="icon-img">
                    <image src="../../static/workbench/user01.png"></image>
        <view class="bomBut">
            <view class="onceBut" v-for="(item, index) in inSide" :key="index" @click="openThere(item.open)">
                <view class="buts">
                    <image :src="item.imgSrc" mode=""></image>
                    <view class="title">
                        {{item.title}}
                    </view>
                </view>
                <view class="oneself-title">账户信息</view>
                <view class="icon-img-right">
                    <image src="../../static/workbench/bracket.png"></image>
                </view>
            </navigator>
                <image src="../../static/workbench/bracket.png"></image>
            </view>
        </view>
        <view class="nav">
            <navigator url="" class="nav-child">
                <view class="icon-img">
                    <image src="../../static/workbench/update.png"></image>
                </view>
                <view class="oneself-title">版本更新</view>
                <view class="icon-img-right">
                    <image src="../../static/workbench/bracket.png"></image>
                </view>
            </navigator>
        </view>
        <view class="nav">
            <navigator url="" class="nav-child">
                <view class="icon-img">
                    <image src="../../static/workbench/feedback01.png"></image>
                </view>
                <view class="oneself-title">意见反馈</view>
                <view class="icon-img-right">
                    <image src="../../static/workbench/bracket.png"></image>
                </view>
            </navigator>
        </view>
        <view class="nav">
            <navigator url="" class="nav-child">
                <view class="icon-img">
                    <image src="../../static/workbench/system.png"></image>
                </view>
                <view class="oneself-title">系统设置</view>
                <view class="icon-img-right">
                    <image src="../../static/workbench/bracket.png"></image>
                </view>
            </navigator>
        </view>
        <view class="nav-us">
            <navigator url="" class="nav-child">
                <view class="icon-img">
                    <image src="../../static/workbench/myself.png"></image>
                </view>
                <view class="oneself-title">关于我们</view>
                <view class="icon-img-right">
                    <image src="../../static/workbench/bracket.png"></image>
                </view>
            </navigator>
        </view>
        <view class="nav-logout">
        <!-- <view class="nav-logout">
            <navigator  @click="outIn" class="nav-logout-in">
                <view class="icon-img">
                    <image src="../../static/img/out.png"></image>
@@ -82,7 +38,9 @@
            </navigator>
            <uniPopup :textmsg="textmsg" @cancel='operation(1)' @confirm='operation(2)' v-show="showTextmsg">
            </uniPopup>
        </view>
        </view> -->
        <uniPopup :textmsg="textmsg" @cancel='operation(1)' @confirm='operation(2)' v-show="showTextmsg">
        </uniPopup>
    </view>
</template>

@@ -99,7 +57,39 @@
                    contentTwo: '',
                    cancel: '取消',
                    confirm: '登出'
                }
                },
                inSide: [{
                        title: '账户信息',
                        imgSrc: '../../static/myself/zhanhu.png',
                        open: 'xinxi'
                    },
                    {
                        title: '版本更新',
                        imgSrc: '../../static/myself/gengxin.png',
                        open: 'genxin'
                    },
                    {
                        title: '意见反馈',
                        imgSrc: '../../static/myself/yijian.png',
                        open: 'yijian'
                    },
                    {
                        title: '系统设置',
                        imgSrc: '../../static/myself/shezhi.png',
                        open: 'shezhi'
                    },
                    {
                        title: '关于我们',
                        imgSrc: '../../static/myself/gaunyu.png',
                        open: 'aboutUs'
                    },
                    {
                        title: '登出',
                        imgSrc: '../../static/myself/denghcu.png',
                        open: 'outIn',
                    },

                ]
            }
        },
        components: {
@@ -109,20 +99,49 @@
            userName() {
                return this.$store.state.puserName;
            },
            butTitle(){
                return this.$store.state.loging == true? '登出': '登入'
            butTitle() {
                return this.$store.state.loging == true ? '登出' : '登入'
            }

        },
        onLoad() {
			

        },
        methods: {
            openThere(fn) {
                this[fn]();
            },
            aboutUs() {
                // console.log('aboutus')
                wx.navigateTo({
                    url: './childen/aboutUs',
                })
            },
            shezhi() {
                wx.navigateTo({
                    url: './childen/shezhi',
                })
            },
            yijian() {
                wx.navigateTo({
                    url: './childen/yijian',
                })
            },
            genxin() {
                wx.navigateTo({
                    url: './childen/genxin',
                })
            },
            xinxi() {
                wx.navigateTo({
                    url: './childen/xinxi',
                })
            },
            outIn() {
                if (this.$store.state.loging == true) {
                    this.showTextmsg = true;
                }else{
                this.goToLoging();
                } else {
                    this.goToLoging();
                }
            },
            goToLoging() {
@@ -146,16 +165,17 @@
                    that.showTextmsg = false;
                }
            },
            geton(){
                wx.navigateTo({
                    url:'../poput/workbench/policeDetails/policeDetails?id=111'
                })
            }
            // geton() {
            //     wx.navigateTo({
            //         url: '../poput/workbench/policeDetails/policeDetails?id=111'
            //     })
            // }
        },
    }
</script>

<style lang="scss" scoped>
    $imgSize: 30px;
    // page {
    //     background-image: linear-gradient(to right, #F2F6F9, #F2F6F9) //页面背景颜色
    // }
@@ -204,123 +224,40 @@
            }
        }

        .m-body {
        .bomBut {
            width: 100%;
            height: auto;

            .m-b-top {
                background-color: #FFFFFF;

            .onceBut {
                width: 100%;
                height: 160rpx;
                border-radius: 0 0 30rpx 30rpx;
                height: 3rem;

                display: flex;
                align-items: center;
                justify-content: space-around;
                justify-content: space-between;
                border-bottom: 1px solid rgba($color: #000000, $alpha: 0.05);

                .m-b-t-once {
                    width: 115rpx;
                    height: 60px;
                    border-radius: 10rpx;
                    box-shadow: 1rpx 1rpx 5rpx rgba($color: #000000, $alpha: 0.4);
                &:hover {
                    background-color: rgba($color: #000000, $alpha: 0.05);
                }

                .buts {
                    padding-left: 1rem;
                    height: 2.5rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    color: rgba($color: #000000, $alpha: 0.8);

                    image {
                        width: 70rpx;
                        height: 60rpx;
                    }

                    span {
                        font-size: 26rpx;
                        display: block;
                    .title {
                        padding-left: 1rem;
                    }
                }
            }
        }
    }
	
    .nav {
        width: 90%;
        height: 100rpx;
        border-bottom: 1rpx solid #999999;
        position: relative;
        left: 30rpx;
    }
	
    .nav-child{
        width: 100%;
        height:100rpx;
    }
	
    .nav-user {
        width: 100%;
        height: 100rpx;
        border-bottom: 1rpx solid #999999;
    }
	
    .nav-user-in {
        position: relative;
        left: 30rpx;
        height: 100rpx;
		
    }
	
    .nav-us {
        width: 100%;
        height: 100rpx;
        position: relative;
        left: 30rpx;
    }
	
    .icon-img image{
        width: 50rpx;
        height: 50rpx;
        float: left;
        position: relative;
        top:25rpx;
    }
	
    .oneself-title{
        line-height: 100rpx;
        float: left;
        position: relative;
        left: 20rpx;
        font-weight: 550;
        font-size: 28rpx;
    }
	
    .icon-img-right image {
        line-height: 100rpx;
        width: 50rpx;
        height: 50rpx;
        position: relative;
        left: 460rpx;
        top: 25rpx;
    }
	
	
    .nav-logout {
        width: 100%;
        height: 100rpx;
        border-bottom: 1rpx solid #999999;
        border-top: 1rpx solid #999999;
        position: relative;
    }
	
    .nav-logout-in {
        position: relative;
        left: 30rpx;
        height: 100rpx;
    }
	
    .icon-img-logout image {
        line-height: 100rpx;
        width: 50rpx;
        height: 50rpx;
        position: relative;
        left: 515rpx;
        top: 25rpx;

    image {
        width: $imgSize;
        height: $imgSize;
    }
</style>

 pages/workbench/workbench.vue

@@ -105,6 +105,7 @@
                        securityId: id
                    } : '',
                    that = this;
                    console.log(this.$store.state.puserID)
                wx.request({
                    url: url,
                    data: data,
@@ -113,8 +114,10 @@
                    },
                    method: 'POST',
                    success(res) {
                        that.dataListP = res.data.data
                        // console.log(that.dataListP)
                        if (res.statusCode == 200) {
                            that.dataListP = res.data.data
                            console.log(that.dataListP)
                        }
                    }
                })
            },

 static/myself/denghcu.png

 static/myself/gaunyu.png

 static/myself/gengxin.png

 static/myself/shezhi.png

 static/myself/yijian.png

 static/myself/zhanhu.png

 static/users.png

 store/actions.js

@@ -43,11 +43,13 @@
            method: "post",
            //     // dataType: 'JSON',
            success: (res) => {
                data.isit = true;
                data.userName = res.data.real_name;//警袁姓名
                data.userID = res.data.user_id;//警袁id
                // data.userPhon = res.user_id;
                store.commit('login', data);
                if (res.statusCode == 200) {
                    data.isit = true;
                    data.userName = res.data.real_name; //警袁姓名
                    data.userID = res.data.user_id; //警袁id
                    // data.userPhon = res.user_id;
                    store.commit('login', data);
                }
                // console.log(res)
            },
            fail: (res) => {

 store/mutations.js

@@ -2,7 +2,7 @@

const mutations = {
    login(state, data) {
        console.log(data);
        // console.log(data);
        state.loging = data.isit; //登入状态
        if (data.isit) { //写入用户数据
            state.message.useName = data.userName;