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" 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" type="text" 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"></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;">
						<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 @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;">
						<i class="icon icon-add03 fon72" style="color: #d9d9d9;"></i>
						<view class="fon24 mar-s10">视频添加</view>
					</view>
				</view>
			</view>
			<view class="disjbac bbot pad-sx20">
				<view class="fon30 colb bold flexs">描述文案</view>
				<input class="fon30 col9 tright width100" type="text" placeholder="请输入描述文案">
			</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>
			<view class="disjbac fon30 bbot pad-sx30">
				<view class="colb bold flexs">类别</view>
				<view class="disac col9 width100 fe">
					<view class="mar-y10">请选择类别</view>
					<i class="icon icon-next fon24" style="margin-top: 6rpx;"></i>
				</view>
			</view>
		</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';
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
	export default {
		data() {
			return {
				imgArr:[],
				vedioArr:[],
				audioText:'',
				communityList:[],//社区列表
				communityIndex:0,//当前选中的社区
				communityId:'',//社区id
				communityText:'请选择社区',
				villageList:[],//村列表
				villageIndex:0,//当前选中的村
				villageText:'请选择村',
				villageId:'',//村id
			}
		},
		onLoad() {
			// 调用查询社区列表事件
			this.getCommunityList();
		},
		computed: {
			...mapState({
				ifAnonymous: state => state.moduleA.ifAnonymous
			})
		},
		methods: {
			// 选择社区
			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;
						}
					}
				})
			},
			// 提交事件
			submitEv(){
				uni.reLaunch({
					url:'/pagesA/passageway/passageway'
				})
			},
			// 图片选择
			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>