<template>
|
<view class="mapJQtijiao">
|
<u-top-tips ref="uTips"></u-top-tips>
|
<!-- <view class="head">
|
<u-navbar :is-fixed="false" :border-bottom="false" :is-back="false" title=""
|
:background="{ background: '#0cd7e5' }">
|
<div>
|
处理结果
|
</div>
|
</u-navbar>
|
</view> -->
|
<view class="mapJQtijiaomain">
|
<view class="title" style="padding-top: 0.5rem;">请输入任务心得:</view>
|
<view class="f">
|
<view class="main" style="margin:0 1rem;">
|
<textarea rows="9" cols="27" placeholder="请输入任务心得。" v-model="content"></textarea>
|
</view>
|
</view>
|
<view class="title" style="padding-top: 0.5rem;">请输入任务意见:</view>
|
<view class="f">
|
<view class="main" style="margin:0 1rem;">
|
<textarea rows="9" cols="27" placeholder="请输入任务意见。" v-model="yj"></textarea>
|
</view>
|
</view>
|
<view class="title">照片上传:</view>
|
<view class="t">
|
<view class="main">
|
<image @tap="takePhoto" src="../../static/JQimg/xiangji.png" mode=""></image>
|
</view>
|
<view class="mains">
|
<seeImgs class="seeImgs" :imgs="imgs" :videos="[]" @del="delImg" :type="'imgs'"></seeImgs>
|
</view>
|
</view>
|
<view class="title">视频上传:</view>
|
<view class="s">
|
<view class="main">
|
<image @tap="takeVideo" src="../../leafletMapOur/xcxMapJQ/img/shiping.png" mode=""></image>
|
</view>
|
<view class="mains">
|
<seeImgs class="seeImgsVideo" :imgs="[]" :videos="videos" @del="delVideo" :type="'videos'">
|
</seeImgs>
|
</view>
|
</view>
|
<view class="butb">
|
<!-- custom-style -->
|
<u-button class="submits" type="primary" @click="upData">我反馈</u-button>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import seeImgs from '../../components/seeImges/seeImges.vue'
|
export default {
|
components: {
|
seeImgs
|
},
|
data() {
|
return {
|
content: '', //心得
|
yj: '', //意见
|
imgs: [],
|
videos: [],
|
data: {}
|
}
|
},
|
methods: {
|
onLoad: function(option) {
|
var b;
|
if (option.data == undefined) {
|
this.data = {
|
rname: '无数据',
|
content: '无数据',
|
district: '无数据',
|
place: '无数据',
|
time: '无数据',
|
num: "无数据",
|
ourNum: "无数据",
|
inNum: "无数据",
|
infor: "无数据"
|
}
|
return;
|
}
|
try {
|
b = JSON.parse(option.data);
|
} catch (e) {
|
//TODO handle the exception
|
}
|
// console.log(b);
|
this.data = b;
|
},
|
upData() {
|
// console.log('开始上传');
|
let video = "",
|
imgs = "",
|
that = this;
|
for (let k in this.imgs) {
|
imgs += this.imgs[k].src;
|
if (k != this.imgs.length - 1) {
|
imgs += ","
|
}
|
}
|
for (let y in this.videos) {
|
video += this.videos[y].src;
|
if (y != this.videos.length - 1) {
|
video += ","
|
}
|
}
|
var dataList = {
|
content: this.content,
|
yj: this.yj,
|
tpurl: imgs,
|
spurl: video,
|
hdid: this.data.id,
|
serid: uni.getStorageSync("ids") || that.$store.state.puserID
|
// result: this.content,
|
};
|
wx.showLoading({
|
title: "提交中...",
|
mask: true
|
})
|
// console.log(dataList);
|
wx.request({
|
url: this.$store.state.piAPI + 'taskfk/save', //仅为示例，并非真实接口地址。
|
data: dataList,
|
method: 'POST',
|
header: {
|
// "Content-Type": "application/x-www-form-urlencoded",
|
"content-type": "application/json"
|
},
|
success: (res) => {
|
// console.log(res)
|
if (res.data.code == 200) {
|
wx.showToast({
|
title: '提交成功！',
|
duration: 1000
|
});
|
var time = setTimeout(() => {
|
clearTimeout(time);
|
time = null;
|
uni.redirectTo({
|
url: './grabOrders?from="feedback"'
|
});
|
}, 1000)
|
}
|
wx.showToast({
|
title: 'over',
|
duration: 1000
|
});
|
}
|
});
|
let d = {
|
rid: this.data.id,
|
serid: this.data.serid,
|
type: "stop",
|
that: that
|
}
|
that.$store.commit('useWebScoketApi', d);
|
},
|
takePhoto() {
|
var that = this;
|
wx.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 {
|
wx.showLoading({
|
title: "上传中...",
|
mask: true
|
})
|
var that = this;
|
// 循环调用uni.uploadFile ，因微信小程序只支持单文件上传
|
for (var i = 0; i < tempFilePath.length; i++) {
|
wx.uploadFile({
|
// url: 'https://web.byisf.com/api/depl/put-depl', //仅为示例，非真实的接口地址
|
url: that.$store.state.piAPI + '/depl/put-depl',
|
filePath: tempFilePath[i],
|
name: 'file',
|
formData: {
|
'user': 'test' // 上传附带参数
|
},
|
success: (data) => {
|
wx.showToast({
|
title: '上传图片成功！',
|
duration: 1000
|
});
|
// 根据接口具体返回格式 赋值具体对应url
|
that.imgs.push({
|
id: i,
|
src: JSON.parse(data.data).data
|
})
|
}
|
});
|
}
|
}
|
});
|
},
|
delImg(index) {
|
this.imgs.splice(index, 1);
|
// console.log(this.imgs)
|
},
|
takeVideo() {
|
var that = this;
|
wx.chooseVideo({
|
sourceType: ['album', 'camera'],
|
maxDuration: 60,
|
camera: 'back',
|
success(res) {
|
var tempFilePath = res.tempFilePath;
|
// try {
|
wx.showLoading({
|
title: "上传中...",
|
mask: true
|
})
|
wx.uploadFile({
|
// url: 'https://web.byisf.com/api/depl/put-depl', //仅为示例，非真实的接口地址
|
url: that.$store.state.piAPI + '/depl/put-depl',
|
filePath: tempFilePath,
|
name: 'file',
|
formData: {
|
'user': 'test' // 上传附带参数
|
},
|
success: (data) => {
|
wx.showToast({
|
title: '上传视频成功！',
|
duration: 1000
|
});
|
// // 根据接口具体返回格式 赋值具体对应url
|
that.videos.push({
|
id: that.videos.length,
|
src: JSON.parse(data.data).data
|
})
|
// console.log(JSON.parse(data.data).data)
|
}
|
});
|
}
|
})
|
},
|
delVideo(index) {
|
this.videos.splice(index, 1);
|
// console.log(this.imgs)
|
},
|
beforeDestroy() {
|
this.$store.commit("changegotuGrabOrders");
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
page {
|
width: 100%;
|
height: 100%;
|
}
|
|
.mapJQtijiao {
|
width: 100%;
|
height: 100%;
|
margin: 0 auto;
|
|
// .head {
|
// position: relative;
|
// top: 0;
|
// left: 0;
|
// z-index: 1;
|
// font-size: 16px;
|
// font-weight: 600;
|
// text-align: center;
|
|
// div {
|
// width: 100%;
|
// border: 1px solid rgba($color: #000000, $alpha: 0);
|
// }
|
// }
|
|
.mapJQtijiaomain {
|
width: 100%;
|
height: 100%;
|
// border: 1px solid #000000;
|
box-sizing: border-box;
|
background-color: #F7F7F7;
|
|
.title {
|
margin-left: 1rem;
|
margin-bottom: 0.5rem;
|
}
|
}
|
|
.f {
|
background-color: #fff;
|
padding: 0.5rem 0 0.5rem 0;
|
margin-bottom: 0.5rem;
|
|
.main {
|
margin: 0.5rem;
|
border: 1px solid rgba($color: #000000, $alpha: 0.5);
|
height: 8rem;
|
}
|
}
|
|
.t,
|
.s {
|
background-color: #fff;
|
padding: 0.5rem 0 0.5rem 0;
|
// margin-bottom: 0.5rem;
|
display: flex;
|
align-items: center;
|
// border: 1px solid green;
|
height: 95px;
|
width: 100%;
|
|
.main {
|
// border: 1px solid red;
|
|
image {
|
width: 3rem;
|
height: 3rem;
|
margin-left: 1rem;
|
}
|
}
|
|
.mains {
|
// border: 1px solid red;
|
width: calc(100% - 3rem);
|
height: 75px;
|
}
|
}
|
|
.butb {
|
// margin: 1rem auto;
|
// width: 6rem;
|
height: 3rem;
|
// // border: 1px solid rgb(46, 118, 228);
|
// border-radius: 1rem;
|
// display: flex;
|
// font-size: 18px;
|
// align-items: cent1er;
|
// justify-con1tent: center;
|
// color: #fff;
|
// background-image: linear-gradient(to right, #4adeff, #55ffff);
|
}
|
}
|
|
// .seeImgs{
|
// width: 80%;
|
// position:absolute ;
|
// top: 13.3rem;
|
// right: 0;
|
// }
|
// .seeImgsVideo{
|
// width: 80%;
|
// position:absolute ;
|
// top: 19.8rem;
|
// right: 0;
|
// }
|
.custom-style {
|
background-image: linear-gradient(to right, #08EFF6, #0693FD);
|
border-radius: 20px;
|
}
|
|
.submits {
|
margin: 60rpx 90rpx 0;
|
border: none;
|
width: 572rpx;
|
height: 86rpx;
|
// line-height: 86rpx;
|
box-sizing: border-box;
|
border-radius: 15rpx;
|
background-color: #103289;
|
color: #ffffff;
|
|
&::after {
|
content: none;
|
}
|
|
&::before {
|
content: none;
|
}
|
|
&[disabled='true'] {
|
background: #e4e4e4;
|
font-size: 36rpx;
|
font-family: Source Han Sans CN;
|
font-weight: 500;
|
color: #ffffff;
|
}
|
}
|
</style>
|
