这里需要注意的是坑一touchEnd不会触发 因为touchEnd里面不能有v-if
第二个是@touchcancel事件
第三个就是删除文件 知道文件目录删除文件的知识点
第四个坑 就是提前获取权限 否则录制再获取导致页面取消不了 在handleClick处

<template>
	<view>
		<navBar
		  title="电子围栏"
		  :showPageTop="false"
		  org="pages/Electronicfence/index"
		  project="pages/Electronicfence/project/index"
		  :navTitle="'地区筛选'"
		/>
		<view class="tab-wrapper">
			<u-tabs
			  :current="tabCurrent"
			  class="tabs_box"
			  :list="tabs"
			  @change="tabChange"
			  :activeStyle="{
			    color: '#4A8DF0',
			    fontSize: '26rpx',
			  }"
			  :inactiveStyle="{
			    color: '#33333380',
			    fontSize: '26rpx',
			  }"
			  itemStyle="width:33%;height:65rpx"
			></u-tabs>
		</view>
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" height="700rpx" >
			  <view v-if="listData.length >0">
				<view class="list_container_1">
					<div
					  class="item"
					  style="margin-left: 20rpx;margin-right: 20rpx;"
					  v-for="(item, index) in listData"
					  :key="index"
					>
					  <div class="header">
					    <div class="title">
					      <text> {{ item.deviceName }}</text><text class="line-style"> {{ item.statusName }}</text>
					    </div>
					  </div>
					  <div class="container">
						<view class="device-style"><text>设备ID:</text><text class="line-style"> {{ item.deviceId }}</text></view>
						<view class="btn-style" v-if="item.statusName == '在线'"><u-button type="primary" text="广播喊话" @click="handleClick(item)"></u-button></view>
						<view class="btn-diszbled-style" v-else><u-button type="primary" :disabled="true" text="广播喊话"></u-button></view>
					  </div>
					</div>
				</view>
			  </view>
			  <view v-else class="container defaultText">暂无数据</view>
			</mescroll-body>
		<u-popup :show="show" mode="center">
				<view class="text-wrapper">
					<text>{{textValue}}</text>
				</view>
				<view class="popup-wrap">
					<view class="sound-style"  @touchstart="handleTouchStart" @touchcancel="handleTouchEnd" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
						<image src="../../../static/img/sound-on.png" mode="" v-show="soundOn"></image>
						<image src="../../../static/img/sound-off.png" mode="" v-show="soundOff"></image>
						<image src="../../../static/img/suspend.png" mode="" v-show="suspend"></image>
						<image src="../../../static/img/voiceplayback.png" mode="" v-show="voiceplayback"></image>
					</view>
					
				</view>
				<view class="btn-group">
					<u-button type="primary" text="取消" @click="handleCancel"></u-button>
					<u-button type="primary" text="试听" @click="handleListen"></u-button>
					<u-button type="primary" text="发送" @click="handleSend"></u-button>
				</view>
		</u-popup>
	</view>
</template>

<script>
	import Electronicfence from "../components/Electronicfence.vue";
	import navBar from "@/components/nav-bar-new/nav-bar-new.vue";
	import {listElectronicfence,noticeElectronicfence} from '@/api/electronicfence.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import pageMixin from '@/mixins/pageMixin.js';
	import { mapState, mapMutations } from "vuex";
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				deviceId:'',
				status:'',
				projectId:'',
				show:false,
				tempFilePath:'',
				soundOff:true,
				soundOn:false,
				suspend:false,
				voiceplayback:false,
				textValue:'请按住说话',
				tabCurrent: 0,
				listData:[77],
				tabs: [
				  {
				    name: `全部(0)`,
				  },
				  {
				    name: "在线(0)",
				  },
				  {
				    name: "离线(0)",
				  },
				],
			}
		},
		mixins: [pageMixin,MescrollMixin],
		onLoad(val,params) {
			this.projectId = val.projectId
			// this.tabs[0].name = `全部(${val.total})`;
			// this.tabs[1].name = `在线(${val.online})`;
			// this.tabs[2].name = `离线(${val.offline})`;
		},
		mounted(){
			this.getPageData()
		},
		computed: {
		  ...mapState(["areaCode", "areaType", "treeName", "userInfo"]),
		},
		methods: {
			getPageData() {
				// 调用列表方法
				this.resetUpdate();
			},
			// 获取列表数据
			getListData(page, sback, eback) {
				console.log(this.status)
				let { tenantId } = this.userInfo || {};
				listElectronicfence({
					"tenantId": tenantId,
				    "projectId": this.projectId || this.option.id,
					"deviceName": "",
					status:this.status,
					pageNo: page.num,
					pageSize: page.size
				}).then((res) => {
					if(res.data.data) {
						this.tabs[0].name = `全部(${res.data.data.onlineCount + res.data.data.offlineCount})`;
						this.tabs[1].name = `在线(${res.data.data.onlineCount})`;
						this.tabs[2].name = `离线(${res.data.data.offlineCount})`;
						const arr = res.data.data.page.list || [];
						let projectNum = res.data.data.page.total*1;
						sback(arr, projectNum);
					}
				}).catch(() => {
					eback()
				})
			},
			tabChange(params) {
			  let status = {
			    0: "-1",
			    1: "1",
			    2: "2",
			  };
			  if(params.index==0){
			  	  this.status = "";
			  }
			  if(params.index==1){
				  this.status = "1";
			  }
			  if(params.index==2){
			  	this.status = "2";
			  }
			  this.listData = []
			  this.resetUpdate();
			},
			handleCancel(){
				let url = this.tempFilePath
				let self = this
				// #ifdef APP-PLUS
				innerAudioContext.stop();
				if(url){
					//删除存储在app里的文件  考虑发送成功是否删除
					plus.io.resolveLocalFileSystemURL(url, function( entry ) {
						entry.remove( function ( e ) {
							console.log( "删除成功" );
							// uni.showToast({
							//     icon: 'none',
							//     title: '删除成功!'
							// });
							self.show = false
						}, function ( e ) {
							console.log(e);
							console.log( "删除失败" );
							// uni.showToast({
							//     icon: 'none',
							//     title: '删除失败!'
							// });
							self.show = false
						});
					});
				} else {
					self.show = false
				}
				// #endif
				// #ifdef  H5
				self.show = false
				// #endif
			},
			handleSend(){
				const message = {
					voice:this.tempFilePath,
					// length:this.length
				};
				if(this.tempFilePath){
					this.inputSubmit(message,2);
				} else {
					uni.showToast({
					    icon: 'none',
					    title: '请先录制内容!'
					});
				}
			},
			handleListen(){
				//item.isFirstPlay = false;
				if(this.tempFilePath){
					this.soundOn = false
					this.soundOff = false
					this.suspend = false
					this.voiceplayback = true
					innerAudioContext.src = this.tempFilePath;
					innerAudioContext.play()
					innerAudioContext.onEnded(() => {
						this.soundOn = false
						this.soundOff = false
						this.suspend = true
						this.voiceplayback = false
					})
					innerAudioContext.onStop(() => {
						console.log('暂停')
					})
				} else {
					uni.showToast({
					    icon: 'none',
					    title: '请先录制内容!'
					});
				}
			},
			async handleClick(val){
				let self = this
				let result = 0
				this.deviceId = val.deviceId
				this.tempFilePath = ''
				this.soundOff = true,
				this.soundOn = false,
				this.suspend = false,
				this.voiceplayback = false,
				// #ifdef APP-PLUS
				//提前获取权限  否则录制再获取导致页面取消不了
				// if(uni.getSystemInfoSync().platform === 'android'){ 
				//   requestAndroidPermission('android.permission.RECORD_AUDIO');
				// }
				result = await requestAndroidPermission('android.permission.RECORD_AUDIO');
				console.log(result)
				if(result > 0){
					self.show = true
				}
				// Android权限查询
				function requestAndroidPermission(permissionID) {
					return new Promise((resolve, reject) => {
						plus.android.requestPermissions(
							[permissionID], // 理论上支持多个权限同时查询，但实际上本函数封装只处理了一个权限的情况。有需要的可自行扩展封装
							function(resultObj) {
								var result = 0;
								for (var i = 0; i < resultObj.granted.length; i++) {
									var grantedPermission = resultObj.granted[i];
									console.log('已获取的权限：' + grantedPermission);
									result = 1
								}
								for (var i = 0; i < resultObj.deniedPresent.length; i++) {
									var deniedPresentPermission = resultObj.deniedPresent[i];
									console.log('拒绝本次申请的权限：' + deniedPresentPermission);
									result = 0
								}
								for (var i = 0; i < resultObj.deniedAlways.length; i++) {
									var deniedAlwaysPermission = resultObj.deniedAlways[i];
									console.log('永久拒绝申请的权限：' + deniedAlwaysPermission);
									result = -1
								}
								resolve(result);
								// 若所需权限被拒绝,则打开APP设置界面,可以在APP设置界面打开相应权限
								// if (result != 1) {
								// gotoAppPermissionSetting()
								// }
							},
							function(error) {
								console.log('申请权限错误：' + error.code + " = " + error.message);
								resolve({
									code: error.code,
									message: error.message
								});
							}
						);
					});
				}
				// #endif
				// #ifdef  H5
				self.show = true
				// #endif
			},
			// 开始录制语音
			handleTouchStart(e){
				e.preventDefault
				if(this.soundOff == true){
					this.textValue = '正在录制...'
					recorderManager.start();
					this.soundOn = true
					this.soundOff = false,
					this.suspend = false,
					this.voiceplayback = false
				} 
			},
			handleTouchEnd(){
				this.textValue = '请按住说话'
				this.soundOn = false
				this.soundOff = false
				this.suspend = true
				this.voiceplayback = false
				recorderManager.stop();
				recorderManager.onStop((res) => {
				this.tempFilePath = res.tempFilePath
				});
			},
			handleTouchMove(e){
				console.log('移动事件')
				console.log(e)
			},
			inputSubmit(a,b){
				let self = this
				const uploadTask = uni.uploadFile({
					url: this.$UploadUrl,
					filePath: a.voice,
					name: "file",
					//formData: extra,
					success: function(res) {
						self.show = false
						// uni.showToast({
						//     icon: 'none',
						//     title: '发送成功1!'
						// });
						self.noticeElectronicfence(res.data)
					},
					fail: function(res) {
						uni.showToast({
						    icon: 'none',
						    title: '发送失败!'
						});
					}
				});
			},
			noticeElectronicfence(res){
				let { tenantId } = this.userInfo || {};
				noticeElectronicfence({
					"fileName": res.fileName,
					"diskFileName": res.diskFileName,
					"tenantId": tenantId,
					"projectId": this.projectId,
					"deviceId": this.deviceId
				}).then((res) => {
					console.log('dh456进来了')
					console.log(res)
					if(res.data.code == '200'){
						uni.showToast({
						    icon: 'none',
						    title: '发送成功!'
						});
					} else {
						uni.showToast({
						    icon: 'none',
						    title: res.data.message || '发送失败'
						});
					}
				}).catch(() => {
					uni.showToast({
					    icon: 'none',
					    title: '发送失败!'
					});
				})
			}
		},
		components: {
			Electronicfence,
			navBar
		},
	}
</script>

<style lang="less">
@import url("../less/common.less");
.defaultText {
  margin-top: 20rpx;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
  text-align: center;
}
.tabs_box {
  border-top: 1rpx solid #f6f8fb;
}
.tab-wrapper{
	background: #fff;
}
.line-style{
	margin-left: 20rpx;
	font-weight: normal;
	// font-size: 25rpx;
}
.device-style{
	margin-top: 20rpx;
}
	
.btn-style{
	margin-top: 20rpx;
}
.btn-diszbled-style{
	margin-top: 20rpx;
	.u-button--primary{
		background-color: #999999;
		border-color: #999999;
	}
}
.text-wrapper{
	text-align: center;
	margin-top: 40rpx;
}
.u-button{
	margin: 20rpx;
}
.popup-wrap{
	width:  700rpx;
	height: 200rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.sound-style{
	width: 160rpx;
	height: 160rpx;
	border: 1px solid #ddd;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	uni-image {
		width: 120rpx;
		height: 120rpx;
	}
}
.btn-group{
	display: flex;
	justify-content: center;
	margin-bottom: 30rpx;
}
/deep/.u-tabs__wrapper__nav__line {
  display: none;
}
/deep/.u-tabs__wrapper__nav__item {
  position: relative;
  & + .u-tabs__wrapper__nav__item {
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 1rpx;
      height: 20rpx;
      background: #000000;
      opacity: 0.1;
    }
  }
}
</style>