<template>
|
<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>
|
|
<u-form-item label-width="20%" label="事件类型:" prop="type">
|
<u-input v-model="form.typeText" type="select" @click="showType = true" placeholder="请选择事件类型"/>
|
</u-form-item>
|
<u-action-sheet
|
v-model="showType"
|
:list="typeList"
|
title="请选择事件类型"
|
@click="typeSelect"
|
>
|
</u-action-sheet>
|
|
<!-- <u-form-item label-width="20%" label="事件状态:" prop="state">
|
<u-input v-model="form.stateText" type="select" @click="showState = true" placeholder="请选择事件状态"/>
|
</u-form-item>
|
<u-action-sheet
|
v-model="showState"
|
:list="stateList"
|
title="请选择事件状态"
|
@click="stateSelect"
|
>
|
</u-action-sheet> -->
|
|
<!-- <u-form-item label-width="20%" label="事件来源:">
|
<u-input :disabled="true" v-model="form.sourceText" type="select" @click="showSource = true" placeholder="请选择事件来源"/>
|
</u-form-item>
|
<u-action-sheet
|
v-model="showSource"
|
:list="sourceList"
|
title="请选择事件来源"
|
@click="sourceSelect"
|
>
|
</u-action-sheet> -->
|
|
<u-form-item label-position="top" label-width="25%" label="图片视频上传:">
|
<evan-upload ref="evanUpload"
|
:imgLimit="4"
|
:format="format"
|
:options="uploadOption"
|
@on-pre-video="onPreVideo"
|
@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>
|
</u-form>
|
|
<view class="submitBtn">
|
<u-button @click="submit">提交</u-button>
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
import {clientId,clientSecret} from '@/common/setting'
|
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:"116.4",
|
latitude:"39.9",
|
type:"",
|
typeText:"",
|
state:"",
|
stateText:"",
|
source:"APP",
|
sourceText:"APP",
|
picUrls:[],
|
remark:"",
|
taskinfoId:null,
|
},
|
rules:{
|
type:[{
|
required:true,
|
message:'请选择事件类型',
|
trigger:'blur'
|
}],
|
state:[{
|
required:true,
|
message:'请选择事件状态',
|
trigger:'blur'
|
}],
|
title:[{
|
required:true,
|
message:'请输入标题',
|
trigger:'blur'
|
}]
|
|
},
|
uploadOption:{
|
// 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,
|
stateList:[],
|
showSource:false,
|
sourceList:[
|
{
|
text: 'WEB',
|
value:'WEB'
|
},
|
{
|
text: 'APP',
|
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()
|
this.getState()
|
this.getHeader()
|
},
|
methods:{
|
//获取头部
|
getHeader(){
|
let accessToken = uni.getStorageSync('accessToken');
|
var myHeader = {}
|
if (accessToken) {
|
myHeader['Blade-Auth'] = 'bearer ' + accessToken;
|
}
|
// 客户端认证参数
|
myHeader['Authorization'] = 'Basic ' + Base64.encode(clientId + ':' + clientSecret);
|
this.header = myHeader
|
this.uploadOption.header = myHeader
|
},
|
getAddress(){
|
uni.getLocation({
|
type: 'wgs84',
|
isHighAccuracy:true,
|
accuracy:'best',
|
geocode:true,
|
success: res=> {
|
console.log(res)
|
console.log('当前位置的经度：' + res.longitude);
|
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
|
}
|
});
|
},
|
//获取数据字典
|
getType(){
|
getDicList("EVENT_TYPE").then(res=>{
|
if(res.code == 200){
|
res.data.forEach(e=>{
|
this.typeList.push({
|
text:e.dictValue,
|
key:e.dictKey
|
})
|
})
|
}
|
})
|
},
|
getState(){
|
getDicList("EVENT_STATE").then(res=>{
|
if(res.code == 200){
|
res.data.forEach(e=>{
|
this.stateList.push({
|
text:e.dictValue,
|
key:e.dictKey
|
})
|
})
|
this.form.state = this.stateList[0].key
|
}
|
})
|
},
|
//选择事件
|
typeSelect(index){
|
this.form.typeText = this.typeList[index].text
|
this.form.type = this.typeList[index].key
|
},
|
stateSelect(index){
|
this.form.stateText = this.stateList[index].text
|
this.form.state = this.stateList[index].key
|
},
|
sourceSelect(index){
|
this.form.sourceText = this.sourceList[index].text
|
this.form.source = this.sourceList[index].value
|
},
|
//表单提交
|
submit(){
|
this.$refs.uForm.validate(valid => {
|
if (valid) {
|
if(this.uploadList.length>0){
|
this.uploadList.forEach(e=>{
|
var res = JSON.parse(e.res)
|
this.form.picUrls.push({
|
label:res.data.name,
|
value:res.data.link
|
})
|
})
|
}else{
|
this.form.picUrls = null
|
}
|
add(this.form).then(res=>{
|
if(res.code ==200){
|
uni.redirectTo({
|
url:"/pages/taskinfo/list"
|
})
|
}
|
})
|
}
|
});
|
},
|
onUpload(res){
|
this.uploadList = res.data
|
},
|
//对返回的数据进行处理
|
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
|
}
|
},
|
}
|
};
|
</script>
|
|
<style scoped>
|
.container{
|
padding: 20px;
|
}
|
</style>
|
