我的页面修改

Administrator

2021-07-01 34ad99da11a67ded026f3555c0d24cf962161cd3

 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>