guoshilong
2022-10-14 d8e0af2ce345f3b40581ad05c596f965ae729c01
pages/eventgm/eventsReported.vue
@@ -2,6 +2,10 @@
   <view class="container">
      <u-form :model="form" ref="uForm" :rules="rules">
         
         <u-form-item label="标题:" prop="title">
            <u-input v-model="form.title"/>
         </u-form-item>
         <u-form-item label="地址:">
            <u-input :disabled="true" v-model="form.address" placeholder="请输入地址" @click="getAddress"/>
         </u-form-item>
@@ -39,16 +43,17 @@
         >
         </u-action-sheet> -->
         
         <u-form-item label-position="top" label-width="25%" label="图片上传:">
         <u-form-item label-position="top" label-width="25%" label="图片视频上传:">
            <evan-upload ref="evanUpload" 
            :usePreview="true"
            :imgLimit="4" 
            :format="format"
            :options="uploadOption" 
            @on-upload="onUpload"
            @on-pre-video="onPreVideo"
         ></evan-upload>
            @on-upload="onUpload"
            ></evan-upload>
         </u-form-item>
         
         <video id="myVideo" v-show="videoShow" :src="videoUrl" @fullscreenchange="fullScreenChange"></video>
         <u-form-item label-position="top" label="备注:">
            <u-input v-model="form.remark" type="textarea" />
         </u-form-item>
@@ -67,14 +72,16 @@
import {add} from "@/api/eventgm/eventgm.js"
import {getDicList} from "@/api/dict/dict.js"
import evanUpload from "@/components/evan-upload/evan-upload.vue";
import {devUrl} from '@/common/setting'
export default {
   components: {'evan-upload' :evanUpload },
   data() {
      return {
         form: {
            title:"",
            address:"章贡区",
            longitude:"",
            latitude:"",
            longitude:"116.4",
            latitude:"39.9",
            type:"",
            typeText:"",
            state:"",
@@ -83,6 +90,7 @@
            sourceText:"APP",
            picUrls:[],
            remark:"",
            taskinfoId:null,
         },
         rules:{
            type:[{
@@ -95,14 +103,23 @@
               message:'请选择事件状态',
               trigger:'blur'
            }],
            title:[{
               required:true,
               message:'请输入标题',
               trigger:'blur'
            }]
            
         },
         //换用其他写法
         uploadOption:{
            url:"http://localhost/blade-resource/oss/endpoint/put-file-attach",
            // url:"http://localhost/blade-resource/oss/endpoint/put-file-attach",
            url:devUrl+"/blade-resource/oss/endpoint/put-file-attach",
            header:{},
         },
         fileSuffix: 'fileType',
         uploadList:[],
         videoUrl:"",
         videoShow:false,
         videoContext:null,
         showType:false,
         typeList:[],
         showState:false,
@@ -118,10 +135,17 @@
               value:'APP'
            },
         ],
      };
   },
   onReady() {
      this.$refs.uForm.setRules(this.rules);
      this.videoContext = uni.createVideoContext("myVideo",this)
   },
   onLoad(option) {
      if(option.id){
         this.form.taskinfoId = option.id
      }
   },
   created() {
      this.getType()
@@ -145,6 +169,7 @@
         uni.getLocation({
            type: 'wgs84',
            isHighAccuracy:true,
            accuracy:'best',
            geocode:true,
            success: res=> {
               console.log(res)
@@ -152,6 +177,18 @@
               console.log('当前位置的纬度:' + res.latitude);
               this.form.longitude = res.longitude
               this.form.latitude = res.latitude
               //#ifdef APP-PLUS
               //根据经纬度获取地址信息
               var point = new plus.maps.Point(res.longitude, res.latitude);
               plus.maps.Map.reverseGeocode(
                  point,
                  {},
                  (successRes)=>{
                     this.form.address = successRes.address
                  }
               )
               //#endif
            }
         });
      },
@@ -200,7 +237,7 @@
            if (valid) {
               if(this.uploadList.length>0){
                  this.uploadList.forEach(e=>{
                     var res = JSON.parse(e.url)
                     var res = JSON.parse(e.res)
                     this.form.picUrls.push({
                        label:res.data.name,
                        value:res.data.link
@@ -221,22 +258,34 @@
      },
      onUpload(res){
         this.uploadList = res.data
         if(this.$refs.evanUpload.imgArr.length>0){
            this.$refs.evanUpload.imgArr.forEach(e=>{
               var res = JSON.parse(e.url)
               e.thumbnail = res.data.link
            })
         }
         if(this.$refs.evanUpload.videoArr.length>0){
            this.$refs.evanUpload.videoArr.forEach(e=>{
               var res = JSON.parse(e.url)
               e.thumbnail = res.data.link
            })
      },
      //对返回的数据进行处理
      format(res){
         var myRes = JSON.parse(res.url)
         var fileType = myRes.data.originalName.split(".")[1]
         var thumbnail = myRes.data.link
         var url = res.url
         res = {}
         res.fileType = fileType
         res.thumbnail = thumbnail
         res.url = thumbnail
         res.res = url
         res.imgCoverKey = thumbnail
         return res
      },
      //视频预览
      onPreVideo(video){
         this.videoUrl = video.url
         this.videoShow = true
         this.videoContext.requestFullScreen({direction:0})
      },
      //退出全屏
      fullScreenChange(e){
         if(!e.detail.fullScreen){
            //隐藏视频
            this.videoShow = false
         }
      },
      onPreVideo(res){
      }
   }
};
</script>