<template>
|
<view class="policeDetails">
|
<!-- 自定义顶部导航栏 -->
|
<u-navbar :is-back="true" title="事件上报" :background="background" back-icon-color="#FFF" title-color="#FFF">
|
<view class="navbar-right" slot="right">历史上报</view>
|
</u-navbar>
|
<!-- <view class="row address">
|
<view class="title">地址</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>
|
</view>
|
<view class="desc">
|
<view class="title">描述</view>
|
<textarea placeholder="请输入描述" v-model="result"></textarea>
|
</view>
|
<view class="photo">
|
<view class="title">照片上传</view>
|
<view class="main">
|
<image @tap="takePhoto" src="../../static/workbench/policeDerails/xiangji.png" mode=""></image>
|
</view>
|
</view>
|
<seeImgs :imgs="imgs" :videos="[]" @del="delImg" :type="'imgs'"></seeImgs>
|
<view class="video">
|
<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">
|
<view class="butb" @click="upData">提交</view>
|
</view> -->
|
<u-button class="butb" @click="upData">提交</u-button>
|
</view>
|
</template>
|
|
<script>
|
import seeImgs from '../../components/seeImges/seeImges.vue';
|
import navBarTop from '../../components/nav-bar-top/nav-bar-top.vue';
|
export default {
|
components: {
|
navBarTop,
|
seeImgs
|
},
|
data() {
|
return {
|
datas: '',
|
stime: '',
|
date: '',
|
stimeColor: "#808080",
|
result: '',
|
place: "",
|
imgs: [],
|
videos: [],
|
title: '事件上报',
|
backImage: '../../static/images/nav/back02.png',
|
background: {
|
backgroundColor: "#103289"
|
}
|
}
|
},
|
methods: {
|
//返回上一页
|
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.stimeColor = "#000000";
|
},
|
|
//上传
|
upData() {
|
console.log('开始上传');
|
var dataList = {
|
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: ""
|
};
|
if (this.imgs.length > 0) {
|
var i = this.imgs;
|
for (var k in i) {
|
// console.log(i[k].src)
|
dataList.tpaddress += i[k].src + ','
|
}
|
dataList.tpaddress = dataList.tpaddress.substring(0, dataList.tpaddress.length - 1);
|
}
|
if (this.videos.length > 0) {
|
var i = this.videos;
|
for (var k in i) {
|
// console.log(i[k].src)
|
dataList.spaddress += i[k].src + ','
|
}
|
dataList.spaddress = dataList.spaddress.substring(0, dataList.spaddress.length - 1);
|
}
|
// console.log(dataList)
|
uni.showLoading({
|
title: "提交中...",
|
mask: true
|
})
|
uni.request({
|
url: this.$store.state.piAPI + 'feedback/feedback/saves',
|
data: dataList,
|
method: 'POST',
|
header: {
|
"Content-Type": "application/x-www-form-urlencoded"
|
},
|
success: (res) => {
|
if (res.data.code == 200) {
|
uni.showToast({
|
title: '提交成功！',
|
duration: 2000
|
});
|
}
|
}
|
});
|
},
|
|
//图片上传
|
takePhoto() {
|
var that = this;
|
uni.chooseImage({
|
count: 4, //可选择数量，默认9
|
sizeType: ['compressed', 'original'], //上传压缩图,原图
|
sourceType: ['album', 'camera'], //从相册选择或从使用相机
|
success: async (res) => {
|
for (var i = 0; i < res.tempFiles.length; i++) {
|
if (res.tempFiles[i].size > 10 * 1024 * 1000) { //上传图片大小限制
|
uni.showToast({
|
title: "照片大小不能10MB",
|
icon: "none"
|
})
|
return
|
}
|
}
|
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: that.$store.state.piAPI + '/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
|
})
|
}
|
});
|
}
|
}
|
});
|
},
|
//图片删除
|
delImg(index) {
|
this.imgs.splice(index, 1);
|
},
|
//视频上传
|
takeVideo() {
|
var that = this;
|
wx.chooseVideo({
|
sourceType: ['album', 'camera'],
|
maxDuration: 60,
|
camera: 'back',
|
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: that.$store.state.piAPI + '/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
|
})
|
}
|
});
|
}
|
})
|
},
|
//视频删除
|
delVideo(index) {
|
this.videos.splice(index, 1);
|
},
|
},
|
mounted() {
|
//去除组件自带的导航条下划线
|
var dom = document.getElementsByClassName('uni-navbar--border');
|
dom[0].style.borderBottomStyle = 'none';
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.navbar-right {
|
color: #fff;
|
font-size: 0.7rem;
|
margin-right: 1.5rem;
|
margin-top: 0.2rem;
|
}
|
|
.uni-nav-bar-info {
|
// font-weight: 550;
|
|
.title {
|
position: fixed;
|
right: 42%;
|
font-weight: 550;
|
letter-spacing: 1px;
|
}
|
|
.uni-nav-bar-left {
|
display: flex;
|
justify-items: center;
|
|
image {
|
// background-color: #00BFFF;
|
margin-left: 1rem;
|
width: 1.6rem;
|
height: 1.6rem;
|
border-radius: 100px;
|
}
|
}
|
|
.right {
|
display: flex;
|
|
.title-right {
|
position: relative;
|
font-size: 0.7rem;
|
color: #808080;
|
right: 0.5rem;
|
top: 0.2rem;
|
}
|
}
|
|
|
}
|
|
|
.policeDetails {
|
width: 88%;
|
margin: 0 auto;
|
display: flex;
|
flex-direction: column;
|
|
.address {
|
width: 100%;
|
height: 100rpx;
|
display: flex;
|
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 {
|
font-size: 15px;
|
}
|
|
input {
|
flex: 1;
|
font-size: 14px;
|
}
|
}
|
|
.time {
|
width: 100%;
|
height: 100rpx;
|
display: flex;
|
align-items: center;
|
// border-bottom: 1px solid rgba($color: #f3f3f3, $alpha: 0.7);
|
|
.title {
|
float: left;
|
font-size: 15px;
|
}
|
|
.select_time {
|
margin-left: 20px;
|
font-size: 14px;
|
}
|
}
|
|
.desc {
|
width: 100%;
|
height: 15rem;
|
display: flex;
|
flex-direction: column;
|
// border-bottom: 1px solid rgba($color: #f3f3f3, $alpha: 0.7);
|
|
.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 {
|
width: 60rpx;
|
height: 60rpx;
|
margin-left: 20px;
|
}
|
}
|
|
.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;
|
}
|
}
|
|
|
.butb {
|
margin: 30rpx 50rpx 50rpx;
|
border: none;
|
width: 572rpx;
|
height: 86rpx;
|
line-height: 86rpx;
|
box-sizing: border-box;
|
border-radius: 15rpx;
|
background-color: #103289;
|
color: #ffffff;
|
}
|
}
|
</style>
|
