public-opinion/pagesA/opinion-submit/opinion-submit.vue

279 lines
9.0 KiB
Vue
Raw Normal View History

2022-07-30 08:05:50 +00:00
<template>
<view>
<view class="pad-zy20">
<view class="" v-if="!ifAnonymous">
2022-07-30 08:05:50 +00:00
<view class="disjbac bbot pad-sx20">
<view class="fon30 colb bold flexs">真实姓名</view>
2022-07-31 04:01:43 +00:00
<input class="fon30 col9 tright width100" v-model="form.name" type="text" maxlength="16" placeholder="请输入姓名">
2022-07-30 08:05:50 +00:00
</view>
<view class="disjbac bbot pad-sx20">
<view class="fon30 colb bold flexs">联系方式</view>
2022-07-31 04:01:43 +00:00
<input class="fon30 col9 tright width100" v-model="form.phone" type="number" maxlength="11" placeholder="请填写手机号码">
2022-07-30 08:05:50 +00:00
</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>
2022-07-30 08:05:50 +00:00
</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>
2022-07-30 08:05:50 +00:00
</view>
</picker>
2022-07-30 08:05:50 +00:00
<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"></image>
<view @tap="imgArr.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;">
2022-07-30 09:04:24 +00:00
<i class="icon icon-add03 fon72" style="color: #d9d9d9;"></i>
<view class="fon24 mar-s10">图片添加</view>
2022-07-30 08:05:50 +00:00
</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 @tap="vedioArr.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;">
2022-07-30 09:04:24 +00:00
<i class="icon icon-add03 fon72" style="color: #d9d9d9;"></i>
<view class="fon24 mar-s10">视频添加</view>
2022-07-30 08:05:50 +00:00
</view>
</view>
</view>
2022-07-31 04:01:43 +00:00
<view class="disjb bbot pad-sx20">
2022-07-30 08:05:50 +00:00
<view class="fon30 colb bold flexs">描述文案</view>
2022-07-31 04:01:43 +00:00
<!-- <input class="fon30 col9 tright" style="max-width: 90%;" v-model="form.content" type="text" placeholder="请输入描述文案"> -->
<textarea auto-height v-model="form.content" class="fon30 col9 tright" style="max-width: 70%;" placeholder="请输入描述文案"></textarea>
2022-07-30 08:05:50 +00:00
</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;">
2022-07-30 09:04:24 +00:00
<i class="icon icon-add03 fon72" style="color: #d9d9d9;"></i>
<view class="fon24 mar-s10">添加语音</view>
2022-07-30 08:05:50 +00:00
</view>
</view>
</view>
2022-07-31 04:01:43 +00:00
<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>
2022-07-30 08:05:50 +00:00
</view>
2022-07-31 04:01:43 +00:00
</picker>
2022-07-30 08:05:50 +00:00
</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';
2022-07-30 08:05:50 +00:00
const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
export default {
data() {
return {
2022-07-31 04:01:43 +00:00
form:{
name:'',//真实姓名
phone:'',//联系方式
content:''//描述方案
},
imgArr:[],//图片
vedioArr:[],//视频
audioText:'',//音频
communityList:[],//社区列表
communityIndex:0,//当前选中的社区
communityId:'',//社区id
communityText:'请选择社区',
villageList:[],//村列表
villageIndex:0,//当前选中的村
villageText:'请选择村',
villageId:'',//村id
2022-07-31 04:01:43 +00:00
typeList:[],//类别列表
typeIndex:0,//当前选中的类别
typeText:'请选择类别',
typeId:''//类别id
2022-07-30 08:05:50 +00:00
}
},
onLoad() {
// 调用查询社区列表事件
this.getCommunityList();
2022-07-31 04:01:43 +00:00
// 调用类别查询事件
this.$requst.get('administrator/reviewedList').then(res=>{
if(res.code==0){
}
})
},
computed: {
...mapState({
ifAnonymous: state => state.moduleA.ifAnonymous
})
2022-07-30 08:05:50 +00:00
},
methods: {
2022-07-31 04:01:43 +00:00
// 提交事件
submitEv(){
let params = {
...this.form,
a:this.communityId,//社区id
b:this.villageId,//村ID
c:this.imgArr.join(','),//图片
d:this.vedioArr.join(','),//视频
e:this.audioText,//语音
f:this.typeId,//类别
}
console.log(params,77777);
// this.$requst.post('',params).then(res=>{
// })
// uni.reLaunch({
// url:'/pagesA/my-opinion-list/my-opinion-list'
// })
},
// 选择社区
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;
}
}
})
},
2022-07-31 04:01:43 +00:00
// 选择类别
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/villageList').then(res=>{
if(res.code==0){
this.typeList = res.data.list;
}
2022-07-30 08:05:50 +00:00
})
},
// 图片选择
chooseImg(){
uni.chooseImage({
count:1,
success: (tempFile) => {
this.imgArr = [...this.imgArr,...tempFile.tempFilePaths]
}
})
},
// 选择视频
chooseVedio(){
uni.chooseVideo({
sourceType:['album','camera'],
success: (tempFile) => {
this.vedioArr.push(tempFile.tempFilePath);
}
})
},
audioEv(){
uni.showToast({
title:'长按进行录音',
icon:'none'
})
},
// 开始录音
startRecord() {
this.audioText = '';
uni.showToast({
title:'录音中...',
icon:'none',
duration:1000*120
})
recorderManager.start();
},
// 结束录音
endRecord() {
recorderManager.stop();
recorderManager.onStop((res)=> {
this.audioText = res.tempFilePath;
});
uni.hideToast();
},
// 播放录音
playVoice() {
if (this.audioText) {
innerAudioContext.src = this.audioText;
innerAudioContext.play();
}
},
// 删除录音
clearAudio(){
this.audioText = '';
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>