public-opinion/pagesA/opinion-submit/opinion-submit.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(res=>{
						this.tempAudio = this.$imghost + res.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>