我的页面修改

Administrator

2021-07-01 34ad99da11a67ded026f3555c0d24cf962161cd3

我的页面修改

 package.json

@@ -2,6 +2,22 @@
  "dependencies": {
    "axios": "^0.21.1",
    "js-md5": "^0.7.3",
    "uni-read-pages": "^1.0.5"
  }
    "uni-read-pages": "^1.0.5",
    "uview-ui": "^1.8.4"
  },
  "name": "qfqk-android",
  "version": "1.0.0",
  "main": "main.js",
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "http://192.168.0.105:10010/r/qfqk-android.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

 pages.json

@@ -26,8 +26,8 @@
            "path": "pages/myself/myself",
            "name": "myself",
            "style": {
                "navigationBarTitleText": "用户中心",
                "navigationBarBackgroundColor": "#F56968"
                "navigationBarTitleText": "",
                "navigationBarBackgroundColor": "#25262E"
            }
        },
        {

 pages/alarm_list/alarm_list.vue

@@ -384,7 +384,7 @@
                width: 96%;
                margin: 0 auto;
                margin-top: 10rpx;
                border-radius: 2px;
                border-radius: 10px;
                flex-direction: column;
                
                .alarm-id-type-status{

 pages/myself/myself.vue

@@ -2,20 +2,29 @@
<template>
    <view class="myself">
        <view class="m-top">
            <view class="m-t-left">
            <view class="my-user-info">
                <view class="user-name-id">
                    <!-- <view>{{userName}}</view> -->
                    <view class="user-name">周刚</view>
                    <view class="user-id">ID: &nbsp;4120552252</view>
                </view>
                <view class="userImg">
                    <img class="img" :src="useimg" @click="ChooseImage">
                </view>
                <view class="usermsg">
                    <view>{{userName}}</view>
                    <view></view>
            </view>
            <view class="my-dept-info">
                <view class="dept-info">
                    <view class="dept-name">所属组织:&nbsp;**派出所--**警务站</view>
                </view>
            </view>
            <!-- <view class="m-t-right">
                二维码
            </view> -->
        </view>
        <view class="bomBut">
            <view class="attendance-btn" @click="goToAttendance()">
                <view class="attendance-info">
                    <image src="../../static/myself/attendance.png" class="attendance-image"/>
                    <view class="attendance-title">考勤打卡</view>
                </view>
            </view>
            <view class="onceBut" v-for="(item, index) in inSide" :key="index" @click="openThere(item.open)">
                <view class="buts">
                    <image :src="item.imgSrc" mode=""></image>
@@ -26,19 +35,6 @@
                <image src="../../static/workbench/bracket.png"></image>
            </view>
        </view>
        <!-- <view class="nav-logout">
            <navigator  @click="outIn" class="nav-logout-in">
                <view class="icon-img">
                    <image src="../../static/img/out.png"></image>
                </view>
                <view class="oneself-title">登出</view>
                <view class="icon-img-logout">
                    <image src="../../static/workbench/bracket.png"></image>
                </view>
            </navigator>
            <uniPopup :textmsg="textmsg" @cancel='operation(1)' @confirm='operation(2)' v-show="showTextmsg">
            </uniPopup>
        </view> -->
        <uniPopup :textmsg="textmsg" @cancel='operation(1)' @confirm='operation(2)' v-show="showTextmsg">
        </uniPopup>
    </view>
@@ -58,34 +54,40 @@
                    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'
                    },
                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/gaunyu.png',
                        imgSrc: '../../static/myself/us01.png',
                        open: 'aboutUs'
                    },
                    {
                        title: '隐私政策',
                        imgSrc: '../../static/myself/privacy.png',
                        open: 'genxin'
                    },
                    {
                        title: '设置',
                        imgSrc: '../../static/myself/system01.png',
                        open: 'shezhi'
                    },
                    {
                        title: '登出',
                        imgSrc: '../../static/myself/denghcu.png',
                        imgSrc: '../../static/myself/logout.png',
                        open: 'outIn',
                    },

@@ -113,6 +115,11 @@
            
        },
        methods: {
            goToAttendance(){
                uni.navigateTo({
                    url:'../clockSignIn/clockSignIn'
                })
            },
            openThere(fn) {
                this[fn]();
            },
@@ -261,12 +268,21 @@
        },
    }
</script>

<style>
    page{
        width: 100%;
        height: 100%;
        background-color: #F4F5FC;
    }
</style>
<style lang="scss" scoped>
    $imgSize: 30px;
    // page {
    //     background-image: linear-gradient(to right, #F2F6F9, #F2F6F9) //页面背景颜色
    // }
    $imgSize: 1.2rem;
	
    .m-top,
    .my-user-info,
    .user-name-id{
        display: flex;
    }

    .myself {
        width: 100%;
@@ -274,49 +290,107 @@

        .m-top {
            width: 100%;
            height: 250rpx;
            // border: 1px solid red;
            display: flex;
            align-items: center;
            justify-content: space-around;
            background-image: linear-gradient(to bottom, #F56968, #EB556E);
            height: 12rem;
            border-radius: 0px 0px 12px 12px;
            background-image: linear-gradient(to bottom, #25262E, #2F303B);
            color: #fff;
            flex-direction: column;

            .m-t-left {
                width: 100%;
                display: flex;
            .my-user-info {
                width: 88%;
                margin: 0 auto;
                height: 6rem;
                align-items: center;
                justify-content: space-around;
                // border: 1px solid #007AFF;

                .userImg {
                    // border: 1px solid #007AFF;

                    .img {
                        width: 100rpx;
                        height: 100rpx;
                        border-radius: 100rpx;
                        // border: 1px solid #007AFF;
				
				
                .user-name-id{
                    flex-direction: column;
                    justify-content: center;
					
                    .user-name{
                        font-size: 1.5rem;
                        letter-spacing: 1rpx;
                    }
					
                    .user-id{
                        font-size: 0.6rem;
                        color: #97979F;
                        margin-top: 0.3rem;
                    }
                }

                .usermsg {
                    width: 60%;
                    position: relative;
                    left: -6%;
                    // border: 1px solid #007AFF;
                .userImg {
                    flex: 1;
                    text-align: right;

                    .img {
                        width: 3.5rem;
                        height: 3.5rem;
                        border-radius: 100rpx;
                    }
                }

            }

            .m-t-right {
                width: 20%;
            .my-dept-info {
                width: 88%;
                margin: 0 auto;
                height: 2.4rem;
                background-image: linear-gradient(to right, #40404C, #595A62);
                box-shadow:0 0 0.1px 0.1px #595A62;
                // border: 1px solid #00ff00;
				
                .dept-info{
                    width: 92%;
                    height: 1.8rem;
                    line-height: 1.8rem;
                    margin-left: 0.6rem;
                    margin-top: 0.3rem;
                    background-image: linear-gradient(to right,#5C5C65,#5C5C65);
					
                    .dept-name {
                        margin-left: 0.3rem;
                    }
                }
            }
        }

        .bomBut {
            width: 100%;
            height: auto;
            width: 88%;
            margin: 0 auto;
            height: 19rem;
            z-index: 999;
            border-radius: 2px;
            margin-top: -2.5rem;
            background-color: #fff;
			
            .attendance-btn{
                width: 100%;
                height: 6.1rem;
                border-bottom: 2px solid rgba($color: #F7F7F7, $alpha:0.8);
				
                .attendance-info{
                    width: 7rem;
                    height: 100%;
                    // background-color: #007AFF;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
					
                    image{
                        width: 3.5rem;
                        height: 3.2rem;
                    }
					
                    .attendance-title{
                        margin-top: 0.3rem;
                        font-weight: 550;
                    }
                }
				
            }


            .onceBut {
@@ -327,7 +401,7 @@
                align-items: center;
                justify-content: space-between;
                // border-bottom: 1px solid rgba($color: #000000, $alpha: 0.05);
                border-bottom: 1px solid rgba($color: #F7F7F7, $alpha:0.8);
                border-bottom: 2px solid rgba($color: #F7F7F7, $alpha:0.8);

                &:hover {
                    background-color: rgba($color: #F7F7F7, $alpha:0.8);
@@ -341,6 +415,7 @@

                    .title {
                        padding-left: 1rem;
                        font-size: 0.9rem;
                    }
                }
            }

 pages/reported/reported.vue

@@ -2,7 +2,7 @@
    <view class="policeDetails">
        <!-- 自定义顶部导航栏 -->
        <!-- <navBarTop :title="'我要报'"></navBarTop> -->
        <uni-nav-bar  class="uni-nav-bar-info" :fixed="true"  :status-bar="true" >
        <uni-nav-bar class="uni-nav-bar-info" :fixed="true" :status-bar="true">
            <view class="title" slot="default">{{title}}</view>
            <view slot="left" class="uni-nav-bar-left" @click="goBack()">
                <image :src="backImage"></image>
@@ -11,17 +11,18 @@
                <view class="title-right">历史上报</view>
            </view>
        </uni-nav-bar>
        <view class="row address">
        <!-- <view class="row address">
            <view class="title">地址</view>
            <input v-model="place" placeholder="请输入地址"/>
        </view>
            <input v-model="place" placeholder="请输入地址" />
        </view> -->
        <view class="time">
            <view class="title">时间</view>
            <e-picker :showValue="date" fields="month" mode="dateTime" :style="{color:stimeColor}" class="select_time"  @change="stimeChange">{{stime||'请选择时间'}}</e-picker>
            <e-picker :showValue="date" fields="month" mode="dateTime" :style="{color:stimeColor}" class="select_time"
                @change="stimeChange">{{stime||'请选择时间'}}</e-picker>
        </view>
        <view class="desc">
            <view class="title">备注</view>
            <textarea placeholder="请输入备注" v-model="result"></textarea>
            <view class="title">描述</view>
            <textarea placeholder="请输入描述" v-model="result"></textarea>
        </view>
        <view class="photo">
            <view class="title">照片上传</view>
@@ -31,10 +32,14 @@
        </view>
        <seeImgs :imgs="imgs" :videos="[]" @del="delImg" :type="'imgs'"></seeImgs>
        <view class="video">
            <view class="title">视频上传:</view>
            <view class="title">视频上传</view>
            <view class="main">
                <image @tap="takeVideo" src="../../static/workbench/policeDerails/shiping11.png" mode=""></image>
            </view>
        </view>
        <view class="row address">
            <view class="title">地址</view>
            <input v-model="place" placeholder="请输入地址" />
        </view>
        <seeImgs :imgs="[]" :videos="videos" @del="delVideo" :type="'videos'"></seeImgs>
        <view class="form-btn">
@@ -46,40 +51,40 @@
<script>
    import seeImgs from '../../components/seeImges/seeImges.vue';
    import navBarTop from '../../components/nav-bar-top/nav-bar-top.vue';
    export default{
    export default {
        components: {
            navBarTop,seeImgs
            navBarTop,
            seeImgs
        },
        data() {
            return {
                datas: '',
                stime:'',
                date:'',
                stimeColor:"#808080",
                result:'',
                place:"",
                stime: '',
                date: '',
                stimeColor: "#808080",
                result: '',
                place: "",
                imgs: [],
                videos: [],
                title:'事件上报',
                backImage:'../../static/images/nav/back02.png'
                title: '事件上报',
                backImage: '../../static/images/nav/back02.png'
            }
        },
        methods: {
            //返回上一页
            goBack(){
                uni.navigateBack({
                })
            goBack() {
                uni.navigateBack({})
            },
			

            //日期选择
            stimeChange(e) {
                // this.stime = e.substr(0,e.length-3);
                this.showValue = e.substr(0,e.length-3),
                this.stime = e;
                // this.stime = e.substr(0,e.length-3);
                this.showValue = e.substr(0, e.length - 3),
                    this.stime = e;
                //修改颜色
                this.stimeColor = "#000000";
            },
			

            //上传
            upData() {
                console.log('开始上传');
@@ -87,12 +92,12 @@
                    sname: this.$store.state.puserName,
                    snumber: this.$store.state.puserID,
                    phone: this.$store.state.puserIphone,
                    stime:this.stime,
                    result:this.result,
                    place:this.place,
                    status:1,
                    tpaddress:"",
                    spaddress:""
                    stime: this.stime,
                    result: this.result,
                    place: this.place,
                    status: 1,
                    tpaddress: "",
                    spaddress: ""
                };
                if (this.imgs.length > 0) {
                    var i = this.imgs;
@@ -100,7 +105,7 @@
                        // console.log(i[k].src)
                        dataList.tpaddress += i[k].src + ','
                    }
                    dataList.tpaddress = dataList.tpaddress.substring(0,dataList.tpaddress.length-1);
                    dataList.tpaddress = dataList.tpaddress.substring(0, dataList.tpaddress.length - 1);
                }
                if (this.videos.length > 0) {
                    var i = this.videos;
@@ -108,7 +113,7 @@
                        // console.log(i[k].src)
                        dataList.spaddress += i[k].src + ','
                    }
                    dataList.spaddress = dataList.spaddress.substring(0,dataList.spaddress.length-1);
                    dataList.spaddress = dataList.spaddress.substring(0, dataList.spaddress.length - 1);
                }
                // console.log(dataList)
                uni.showLoading({
@@ -116,7 +121,7 @@
                    mask: true
                })
                uni.request({
                    url: this.$store.state.piAPI + 'feedback/feedback/saves', 
                    url: this.$store.state.piAPI + 'feedback/feedback/saves',
                    data: dataList,
                    method: 'POST',
                    header: {
@@ -132,7 +137,7 @@
                    }
                });
            },
			

            //图片上传
            takePhoto() {
                var that = this;
@@ -152,34 +157,34 @@
                        }
                        var tempFilePath = res.tempFilePaths;
                        // try {
                            uni.showLoading({
                                title: "上传中...",
                                mask: true
                            })
                            var that = this;
                            // 循环调用uni.uploadFile ，因微信小程序只支持单文件上传
                            for (var i = 0; i < tempFilePath.length; i++) {
                                uni.uploadFile({
                                    // url: 'https://web.byisf.com/api/blade-jfpts/depl/put-depl', //仅为示例，非真实的接口地址
                                    url: 'http://web.byisf.com:82/blade-jfpts/depl/put-depl',
                                    filePath: tempFilePath[i],
                                    name: 'file',
                                    formData: {
                                        'user': 'test' // 上传附带参数
                                    },
                                    success: (data) => {
                                        uni.showToast({
                                            title: '上传图片成功！',
                                            duration: 1000
                                        });
                                        // 根据接口具体返回格式   赋值具体对应url
                                        that.imgs.push({
                                            id: i,
                                            src: JSON.parse(data.data).data
                                        })
                                    }
                                });
                            }
                        uni.showLoading({
                            title: "上传中...",
                            mask: true
                        })
                        var that = this;
                        // 循环调用uni.uploadFile ，因微信小程序只支持单文件上传
                        for (var i = 0; i < tempFilePath.length; i++) {
                            uni.uploadFile({
                                // url: 'https://web.byisf.com/api/blade-jfpts/depl/put-depl', //仅为示例，非真实的接口地址
                                url: 'http://web.byisf.com:82/blade-jfpts/depl/put-depl',
                                filePath: tempFilePath[i],
                                name: 'file',
                                formData: {
                                    'user': 'test' // 上传附带参数
                                },
                                success: (data) => {
                                    uni.showToast({
                                        title: '上传图片成功！',
                                        duration: 1000
                                    });
                                    // 根据接口具体返回格式   赋值具体对应url
                                    that.imgs.push({
                                        id: i,
                                        src: JSON.parse(data.data).data
                                    })
                                }
                            });
                        }
                    }
                });
            },
@@ -197,30 +202,30 @@
                    success(res) {
                        var tempFilePath = res.tempFilePath;
                        // try {
                            uni.showLoading({
                                title: "上传中...",
                                mask: true
                            })
                            uni.uploadFile({
                                // url: 'https://web.byisf.com/api/blade-jfpts/depl/put-depl', 
                                url: 'http://web.byisf.com:82/blade-jfpts/depl/put-depl',
                                filePath: tempFilePath,
                                name: 'file',
                                formData: {
                                    'user': 'test' // 上传附带参数
                                },
                                success: (data) => {
                                    uni.showToast({
                                        title: '上传视频成功！',
                                        duration: 1000
                                    });
                                    // 根据接口具体返回格式   赋值具体对应url
                                    that.videos.push({
                                        id: that.videos.length,
                                        src: JSON.parse(data.data).data
                                    })
                                }
                            });
                        uni.showLoading({
                            title: "上传中...",
                            mask: true
                        })
                        uni.uploadFile({
                            // url: 'https://web.byisf.com/api/blade-jfpts/depl/put-depl', 
                            url: 'http://web.byisf.com:82/blade-jfpts/depl/put-depl',
                            filePath: tempFilePath,
                            name: 'file',
                            formData: {
                                'user': 'test' // 上传附带参数
                            },
                            success: (data) => {
                                uni.showToast({
                                    title: '上传视频成功！',
                                    duration: 1000
                                });
                                // 根据接口具体返回格式   赋值具体对应url
                                that.videos.push({
                                    id: that.videos.length,
                                    src: JSON.parse(data.data).data
                                })
                            }
                        });
                    }
                })
            },
@@ -228,27 +233,32 @@
            delVideo(index) {
                this.videos.splice(index, 1);
            },
        },
        mounted() {
            //去除组件自带的导航条下划线
            var dom = document.getElementsByClassName('uni-navbar--border');
            dom[0].style.borderBottomStyle = 'none';
        }
    }
</script>

<style lang="scss">
	

    .uni-nav-bar-info {
        // font-weight: 550;
		
        .title{

        .title {
            position: fixed;
            right: 42%;
            font-weight: 550;
            letter-spacing: 1px;
        }
		
        .uni-nav-bar-left{

        .uni-nav-bar-left {
            display: flex;
            justify-items: center;
			
            image{

            image {
                // background-color: #00BFFF;
                margin-left: 1rem;
                width: 1.6rem;
@@ -256,11 +266,11 @@
                border-radius: 100px;
            }
        }
		
        .right{

        .right {
            display: flex;
			
            .title-right{

            .title-right {
                position: relative;
                font-size: 0.7rem;
                color: #808080;
@@ -268,132 +278,135 @@
                top: 0.2rem;
            }
        }
		
		


    }
	
	


    .policeDetails {
        width: 92%;
        width: 88%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
		
        .address{

        .address {
            width: 100%;
            height: 100rpx;
            display: flex;
            align-items: center;
            border-bottom: 1px solid rgba($color: #f3f3f3, $alpha: 0.7);
            justify-content: center;
            flex-direction: column;
            // border-bottom: 1px solid rgba($color: #f3f3f3, $alpha: 0.7);
            // border-top: 1px solid rgba($color: #f3f3f3, $alpha: 0.7);
			
            .title{
                float: left;

            .title {
                font-size: 15px;
            }
			
            input{
                margin-left: 20px;

            input {
                flex: 1;
                font-size: 14px;
            }
        }
			
        .time{

        .time {
            width: 100%;
            height: 100rpx;
            display: flex;
            align-items: center;
            // border-bottom: 1px solid rgba($color: #f3f3f3, $alpha: 0.7);
			
            .title{

            .title {
                float: left;
                font-size: 15px;
            }
			
            .select_time{

            .select_time {
                margin-left: 20px;
                font-size: 14px;
            }
        }
			
        .desc{
            width: 100%;
            height: 200rpx;
            display: flex;
            border-bottom: 1px solid rgba($color: #f3f3f3, $alpha: 0.7);
			
            .title{
                height: 100rpx;
                line-height: 100rpx;
                float: left;
                font-size: 15px;
            }
			
            textarea{
                // background-color: #00BFFF;
                line-height: 1.5;
                height: 160rpx;
                font-size: 14px;
                position: relative;
                left: 20px;
                top: 28rpx;
            }
        }

        .photo{
        .desc {
            width: 100%;
            height: 120rpx;
            height: 15rem;
            display: flex;
            align-items: center;
			
            .title{
                font-size: 15px;
                float: left;
            }
			
            image{
                width: 60rpx;
                height: 60rpx;
                margin-left: 20px;
            }
        }
		
        .video{
            width: 100%;
            height: 120rpx;
            display: flex;
            align-items: center;
            flex-direction: column;
            border-bottom: 1px solid rgba($color: #f3f3f3, $alpha: 0.7);
			
            .title{

            .title {
                height: 100rpx;
                line-height: 100rpx;
                font-size: 15px;
            }

            textarea {
                // background-color: #00BFFF;
                width: 100%;
                border: 1px solid #808080;
                line-height: 1.5;
                font-size: 14px;
                flex: 1;
                padding-left: 0.2rem;
            }
        }

        .photo {
            width: 100%;
            height: 120rpx;
            display: flex;
            align-items: center;

            .title {
                font-size: 15px;
                float: left;
            }
			
            image{

            image {
                width: 60rpx;
                height: 60rpx;
                margin-left: 20px;
            }
        }
		
        .form-btn{

        .video {
            width: 100%;
            height: 120rpx;
            display: flex;
            align-items: center;
            // border-bottom: 1px solid rgba($color: #f3f3f3, $alpha: 0.7);

            .title {
                font-size: 15px;
                float: left;
            }

            image {
                width: 60rpx;
                height: 60rpx;
                margin-left: 20px;
            }
        }

        .form-btn {
            margin-top: 2rem;
            display: flex;
            justify-content: center;
			

            .butb {
                margin-bottom: 4.5rem;
                width: 5.2rem;
                height: 5.2rem;
                width: 100%;
                height:3rem;
                // border: 1px solid rgb(46, 118, 228);
                border-radius: 3rem;
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                background-image: linear-gradient(to bottom, #3CA7F4, #4D7CEE);
                font-weight: 600;
                font-size: 1.4rem;
                letter-spacing: 10px;
                background-image: linear-gradient(to bottom, #3CA7F4, #169BD5);
            }
        }
    }
</style>
</style>

 static/myself/attendance.png

 static/myself/logout.png

 static/myself/privacy.png

 static/myself/system.png

 static/myself/system01.png

 static/myself/us.png

 static/myself/us01.png