369 lines
12 KiB
Vue
369 lines
12 KiB
Vue
<template>
|
|
<view>
|
|
<view class="pad-zy20">
|
|
<view class="" v-if="!ifAnonymous">
|
|
<view class="disjbac bbot pad-sx20">
|
|
<view class="fon30 colb bold flexs">真实姓名</view>
|
|
<input class="fon30 col9 tright width100" v-model="form.u_name" type="text" maxlength="16" placeholder="请输入姓名">
|
|
</view>
|
|
<view class="disjbac bbot pad-sx20">
|
|
<view class="fon30 colb bold flexs">联系方式</view>
|
|
<input class="fon30 col9 tright width100" v-model="form.u_phone" type="number" maxlength="11" placeholder="请填写手机号码">
|
|
</view>
|
|
</view>
|
|
<picker mode="selector" :range="communityList" :value="communityIndex" @change="changeCommunity" :range-key="'name'">
|
|
<view class="disjbac fon30 bbot pad-sx30">
|
|
<view class="colb bold flexs">社区</view>
|
|
<view class="disac col9 width100 fe">
|
|
<view class="mar-y10">{{communityText}}</view>
|
|
<i class="icon icon-next fon24" style="margin-top: 6rpx;"></i>
|
|
</view>
|
|
</view>
|
|
</picker>
|
|
<picker mode="selector" :range="villageList" :value="villageIndex" @change="changeVillage" :range-key="'name'">
|
|
<view class="disjbac fon30 bbot pad-sx30">
|
|
<view class="colb bold flexs">村</view>
|
|
<view class="disac col9 width100 fe">
|
|
<view class="mar-y10">{{villageText}}</view>
|
|
<i class="icon icon-next fon24" style="margin-top: 6rpx;"></i>
|
|
</view>
|
|
</view>
|
|
</picker>
|
|
<view class="dis fon30 bbot pad-sx30">
|
|
<view class="colb bold flexs">图片上传</view>
|
|
<view class="disac col9 width100 fe fw">
|
|
<view v-for="(item,index) in imgArr" :key="index" class="col9 radius30 disjcac fc posir mar-y20 item-box width155">
|
|
<image :src="item" mode="aspectFill" class="width155 radius30" @tap="preVedio(index,0)"></image>
|
|
<view @tap="imgArr.splice(index,1),tempImg.splice(index,1)" class="posia disjcac del-btn">
|
|
<i class="icon icon-del-white fon24 colf" style="transform: scale(.8);"></i>
|
|
</view>
|
|
</view>
|
|
<view v-if="imgArr.length!=3" @tap="chooseImg" class="col9 radius30 disjcac fc width155" style="border: 1px solid #d9d9d9;">
|
|
<i class="icon icon-add03 fon72" style="color: #d9d9d9;"></i>
|
|
<view class="fon24 mar-s10">图片添加</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="dis fon30 bbot pad-sx30">
|
|
<view class="colb bold flexs">视频上传</view>
|
|
<view class="disac col9 width100 fe">
|
|
<view v-for="(item,index) in vedioArr" :key="index" class="col9 radius30 disjcac fc posir mar-y20 item-box width155">
|
|
<!-- <image :src="item" mode="aspectFill" class="width155 radius30"></image> -->
|
|
<view class="width155 radius30" style="overflow: hidden;" @tap="preVedio(index,1)">
|
|
<video :src="item" :controls="false" class="width155 radius30"></video>
|
|
</view>
|
|
<view @tap="vedioArr.splice(index,1),tempVedio.splice(index,1)" class="posia disjcac del-btn">
|
|
<i class="icon icon-del-white fon24 colf" style="transform: scale(.8);"></i>
|
|
</view>
|
|
</view>
|
|
<view v-if="vedioArr.length!=3" @tap="chooseVedio" class="col9 radius30 disjcac fc width155" style="border: 1px solid #d9d9d9;">
|
|
<i class="icon icon-add03 fon72" style="color: #d9d9d9;"></i>
|
|
<view class="fon24 mar-s10">视频添加</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="disjb bbot pad-sx20">
|
|
<view class="fon30 colb bold flexs">描述文案</view>
|
|
<!-- <input class="fon30 col9 tright" style="max-width: 90%;" v-model="form.description" type="text" placeholder="请输入描述文案"> -->
|
|
<textarea auto-height v-model="form.description" class="fon30 col9 tright" style="max-width: 70%;" placeholder="请输入描述文案"></textarea>
|
|
</view>
|
|
<view class="dis fon30 bbot pad-sx30">
|
|
<view class="colb bold flexs">语音上传</view>
|
|
<view class="disac col9 width100 fe">
|
|
<view v-if="audioText" @tap="playVoice" class="col9 radius30 disjcac fc posir mar-y20 item-box width155" style="border: 1px solid #d9d9d9;">
|
|
<image src="/static/icon/icon-audio.png" mode="aspectFill" style="width: 74rpx;height: 85rpx;"></image>
|
|
<view @tap.stop="clearAudio" class="posia disjcac del-btn">
|
|
<i class="icon icon-del-white fon24 colf" style="transform: scale(.8);"></i>
|
|
</view>
|
|
</view>
|
|
<view @tap="audioEv" @longpress="startRecord" @touchend="endRecord" class="col9 radius30 disjcac fc width155" style="border: 1px solid #d9d9d9;">
|
|
<i class="icon icon-add03 fon72" style="color: #d9d9d9;"></i>
|
|
<view class="fon24 mar-s10">添加语音</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<picker mode="selector" :range="typeList" :value="typeIndex" @change="changeType" :range-key="'name'">
|
|
<view class="disjbac fon30 bbot pad-sx30">
|
|
<view class="colb bold flexs">类别</view>
|
|
<view class="disac col9 width100 fe">
|
|
<view class="mar-y10">{{typeText}}</view>
|
|
<i class="icon icon-next fon24" style="margin-top: 6rpx;"></i>
|
|
</view>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<view class="disjcac pad-sx50">
|
|
<view class="disjcac enter-btn" style="margin: 0;" @tap="submitEv">立即提交</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex';
|
|
import { uploadImg,uploadFile } from "@/jsFile/public-api.js"
|
|
const recorderManager = uni.getRecorderManager();
|
|
const innerAudioContext = uni.createInnerAudioContext();
|
|
innerAudioContext.autoplay = true;
|
|
export default {
|
|
data() {
|
|
return {
|
|
form:{
|
|
u_name:'',//真实姓名
|
|
u_phone:'',//联系方式
|
|
description:''//描述方案
|
|
},
|
|
imgArr:[],//图片
|
|
tempImg:[],
|
|
vedioArr:[],//视频
|
|
tempVedio:[],
|
|
audioText:'',//音频
|
|
tempAudio:'',
|
|
communityList:[],//社区列表
|
|
communityIndex:0,//当前选中的社区
|
|
communityId:'',//社区id
|
|
communityText:'请选择社区',
|
|
villageList:[],//村列表
|
|
villageIndex:0,//当前选中的村
|
|
villageText:'请选择村',
|
|
villageId:'',//村id
|
|
typeList:[],//类别列表
|
|
typeIndex:0,//当前选中的类别
|
|
typeText:'请选择类别',
|
|
typeId:'',//类别id
|
|
flag:true
|
|
}
|
|
},
|
|
onLoad() {
|
|
// 调用查询社区列表事件
|
|
this.getCommunityList();
|
|
// 调用类别查询事件
|
|
this.getTypeList();
|
|
this.$requst.get('administrator/reviewedList').then(res=>{
|
|
if(res.code==0){
|
|
|
|
}
|
|
})
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
ifAnonymous: state => state.moduleA.ifAnonymous
|
|
})
|
|
},
|
|
methods: {
|
|
// 预览视频
|
|
preVedio(index,num){
|
|
let arr = [];
|
|
let tempArr = [this.imgArr,this.vedioArr][num];
|
|
if(tempArr.length){
|
|
tempArr.forEach(item=>{
|
|
let obj = {
|
|
url:item,
|
|
type:['image','video'][num]
|
|
}
|
|
arr.push(obj);
|
|
})
|
|
}
|
|
uni.previewMedia({
|
|
current:index,
|
|
sources:arr
|
|
})
|
|
},
|
|
// 提交事件
|
|
submitEv(){
|
|
if(this.flag && this.checkEmpty()){
|
|
this.$toolAll.tools.showToast('正在提交...','none',10000);
|
|
this.flag = false;
|
|
let params = {
|
|
...this.form,
|
|
community_id:this.communityId,//社区id
|
|
village_id:this.villageId,//村ID
|
|
images:this.tempImg.join(','),//图片
|
|
videos:this.tempVedio.join(','),//视频
|
|
audios:this.tempAudio,//语音
|
|
opinion_type:this.typeId,//类别
|
|
is_anonymous:this.ifAnonymous?1:0
|
|
}
|
|
this.$requst.post('opinion/createOpinion',params).then(res=>{
|
|
if(res.code==0){
|
|
this.$toolAll.tools.showToast('提交成功');
|
|
setTimeout(()=>{
|
|
uni.reLaunch({
|
|
url:'/pagesA/my-opinion-list/my-opinion-list'
|
|
})
|
|
},500)
|
|
}
|
|
})
|
|
}
|
|
},
|
|
// 检查空值
|
|
checkEmpty(){
|
|
let ifempty = false;
|
|
if(!this.ifAnonymous){
|
|
if(!this.form.u_name){
|
|
this.$toolAll.tools.showToast('请填写真实姓名');
|
|
} else if(this.$toolAll.tools.isPhone(this.form.u_phone)){
|
|
this.$toolAll.tools.showToast('请正确输入手机号');
|
|
} else if(!this.communityId){
|
|
this.$toolAll.tools.showToast('请选择社区');
|
|
} else if(!this.villageId){
|
|
this.$toolAll.tools.showToast('请选择村');
|
|
} else if(!this.typeId){
|
|
this.$toolAll.tools.showToast('请选择类别');
|
|
} else {
|
|
ifempty = true;
|
|
}
|
|
} else {
|
|
if(!this.communityId){
|
|
this.$toolAll.tools.showToast('请选择社区');
|
|
} else if(!this.villageId){
|
|
this.$toolAll.tools.showToast('请选择村');
|
|
} else if(!this.typeId){
|
|
this.$toolAll.tools.showToast('请选择类别');
|
|
} else {
|
|
ifempty = true;
|
|
}
|
|
}
|
|
return ifempty;
|
|
},
|
|
// 选择社区
|
|
changeCommunity(e){
|
|
this.communityIndex = e.detail.value;
|
|
this.communityId = this.communityList[this.communityIndex].id;
|
|
this.communityText = this.communityList[this.communityIndex].name;
|
|
// 调用查询村列表事件
|
|
this.getVillageList(this.communityId);
|
|
},
|
|
// 社区查询
|
|
getCommunityList(){
|
|
this.$requst.get('common/communityList').then(res=>{
|
|
if(res.code==0){
|
|
this.communityList = res.data.list;
|
|
}
|
|
})
|
|
},
|
|
// 选择村
|
|
changeVillage(e){
|
|
this.villageIndex = e.detail.value;
|
|
this.villageId = this.villageList[this.villageIndex].id;
|
|
this.villageText = this.villageList[this.villageIndex].name;
|
|
},
|
|
// 村查询
|
|
getVillageList(id){
|
|
this.$requst.get('common/villageList',{community_id:id}).then(res=>{
|
|
if(res.code==0){
|
|
this.villageList = res.data.list;
|
|
if(this.villageList.length){
|
|
this.villageId = this.villageList[0].id;
|
|
this.villageText = this.villageList[0].name;
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 选择类别
|
|
changeType(e){
|
|
this.typeIndex = e.detail.value;
|
|
this.typeId = this.typeList[this.typeIndex].id;
|
|
this.typeText = this.typeList[this.typeIndex].name;
|
|
},
|
|
// 类别查询
|
|
getTypeList(){
|
|
this.$requst.get('common/opinionTypes').then(res=>{
|
|
if(res.code==0){
|
|
this.typeList = res.data;
|
|
}
|
|
})
|
|
},
|
|
// 图片选择
|
|
chooseImg(){
|
|
uni.chooseImage({
|
|
count:1,
|
|
success: (tempFile) => {
|
|
this.$toolAll.tools.showToast('正在上传图片...','none',100000);
|
|
uploadImg({path:tempFile.tempFilePaths[0]}).then(res=>{
|
|
this.imgArr.push(tempFile.tempFilePaths[0]);
|
|
this.tempImg.push(this.$imghost + res.data.src);
|
|
uni.hideToast();
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 选择视频
|
|
chooseVedio(){
|
|
uni.chooseVideo({
|
|
sourceType:['album','camera'],
|
|
success: (tempFile) => {
|
|
this.$toolAll.tools.showToast('正在上传视频...','none',100000);
|
|
uploadFile({path:tempFile.tempFilePath}).then(res=>{
|
|
this.vedioArr.push(tempFile.tempFilePath);
|
|
this.tempVedio.push(this.$imghost + res.data.src);
|
|
uni.hideToast();
|
|
})
|
|
}
|
|
})
|
|
},
|
|
audioEv(){
|
|
uni.showToast({
|
|
title:'长按进行录音',
|
|
icon:'none'
|
|
})
|
|
},
|
|
// 开始录音
|
|
startRecord() {
|
|
this.audioText = '';
|
|
uni.showToast({
|
|
title:'录音中...',
|
|
icon:'none',
|
|
duration:1000*120
|
|
})
|
|
const options = {
|
|
duration:600000,
|
|
sampleRate:44100,
|
|
numberOfChannels:1,
|
|
encodeBitRate:192000,
|
|
format:'mp3',
|
|
frameSize:50
|
|
}
|
|
recorderManager.start(options);
|
|
// recorderManager.start();
|
|
},
|
|
// 结束录音
|
|
endRecord() {
|
|
recorderManager.stop();
|
|
recorderManager.onStop((res)=> {
|
|
this.$toolAll.tools.showToast('正在上传录音...','none',100000);
|
|
this.audioText = res.tempFilePath;
|
|
uploadFile({path:this.audioText}).then(result=>{
|
|
this.tempAudio = this.$imghost + result.data.src;
|
|
uni.hideToast();
|
|
})
|
|
});
|
|
uni.hideToast();
|
|
},
|
|
// 播放录音
|
|
playVoice() {
|
|
if (this.audioText) {
|
|
innerAudioContext.src = this.audioText;
|
|
innerAudioContext.play();
|
|
}
|
|
},
|
|
// 删除录音
|
|
clearAudio(){
|
|
this.audioText = '';
|
|
this.tempAudio = '';
|
|
recorderManager.stop();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.del-btn{
|
|
background-color: #39d091;width: 45rpx;height: 45rpx;border-radius: 100%;top: -20rpx;right: -20rpx;
|
|
}
|
|
.width155{
|
|
width: 155rpx;
|
|
height: 150rpx;
|
|
}
|
|
.item-box{border: 1px solid #FFFFFF;}
|
|
</style>
|