182 lines
5.9 KiB
Vue
182 lines
5.9 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" 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>
|
||
|
|
<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 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 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-add04 fon72" style="color: #d9d9d9;"></i>
|
||
|
|
<view class="fon24">图片添加</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-add04 fon72" style="color: #d9d9d9;"></i>
|
||
|
|
<view class="fon24">视频添加</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-add04 fon72" style="color: #d9d9d9;"></i>
|
||
|
|
<view class="fon24">添加语音</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>
|
||
|
|
const recorderManager = uni.getRecorderManager();
|
||
|
|
const innerAudioContext = uni.createInnerAudioContext();
|
||
|
|
innerAudioContext.autoplay = true;
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
ifAnonymous:false,//是否是匿名提交
|
||
|
|
imgArr:[],
|
||
|
|
vedioArr:[],
|
||
|
|
audioText:''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad(op) {
|
||
|
|
this.ifAnonymous = op.flag;
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 提交事件
|
||
|
|
submitEv(){
|
||
|
|
uni.reLaunch({
|
||
|
|
url:'/pagesA/my-opinion-list/my-opinion-list'
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 图片选择
|
||
|
|
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>
|