businessCard/xiaochengxu/pages/cardHolder/search.vue

<template>
	<view>
		<d-search-log :placeholder="'搜索名片'" :color_border="color_border" :color_text="color_border"
			:search_list_old_man_num='15' :search_list_hot="search_list_hot" :store_key="store_key"
			@onClickDelAllApi="onClickDelAll" @onSearchNameApi="onSearchName"></d-search-log>
		<u-popup :show="isRecorderManager" mode="bottom">
			<view class="shqx" v-if="longPress == '2'">
				上划取消
			</view>
			<view class="record-layer">
				<view class="record-box">
					<view class="record-btn-layer" v-if="tempFilePath == ''">
						<view class="record-btn">
							<image src="../../static/mic1.png" mode="widthFix" style="width:120rpx;"
								@longpress="longpressBtn" @touchend="touchendBtn" @touchmove="handleTouchMove"></image>
							<text class="text">{{longPress == '1' ? '按住说出姓名' : '松开自动识别'}}</text>
						</view>
					</view>
					<!-- 语音音阶动画 -->
					<view class="prompt-layer prompt-layer-1" v-if="longPress == '2'">
						<view class="prompt-loader">
							<view class="em" v-for="(item,index) in 15" :key="index"></view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import dSearchLog from '@/uni_modules/d-search-log/components/d-search-log/d-search-log.vue'
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	var init // 录制时长计时器
	var timer // 播放 录制倒计时
	export default {
		components: {
			"dSearchLog": dSearchLog
		},
		data() {
			return {
				duration: 60000, //录音最大值ms 60000/1分钟
				tempFilePath: '', //音频路径
				playStatus: 0, //录音播放状态 0:未播放 1:正在播放
				longPress: '1',
				tempFilePath: '',
				color_border: "#00aaff",
				search_list_hot: [],
				store_key: 'search_list',
				isRecorderManager: false,
				is_clock: true,
				startPoint: ""
			};
		},
		onLoad(options) {
			if (options.mic == 1) {
				this.isRecorderManager = true
			}
		},
		methods: {

			handleTouchMove: function(e) {
				console.log("滑动")
				if (Math.abs(e.touches[e.touches.length - 1].clientY - this.startPoint.clientY) > 35) {

					this.is_clock = false
				} else {

					this.is_clock = true
				}
			},
			longpressBtn(e) {
				this.longPress = '2';
				this.is_clock = true,
					console.log(e);
				this.startPoint = e.touches[0],
					recorderManager.onStop((res) => {
						console.log("录音结束")
						this.tempFilePath = res.tempFilePath;
					})
				const options = {
					duration: this.duration, // 指定录音的时长，单位 ms
					sampleRate: 16000, // 采样率
					numberOfChannels: 1, // 录音通道数
					encodeBitRate: 96000, // 编码码率
					// format: 'mp3', // 音频格式，有效值 aac/mp3
					frameSize: 10, // 指定帧大小，单位 KB
				}
				recorderManager.start(options);
				// 监听音频开始事件
				recorderManager.onStart((res) => {
					console.log(res)
				})
			},
			touchendBtn() {
				console.log("录音结束")
				let that = this
				this.longPress = '1';
				recorderManager.onStop((res) => {
					this.tempFilePath = res.tempFilePath
					let _file = ''
					if (that.is_clock) {
						_file = uni.getFileSystemManager().readFileSync(res.tempFilePath, "base64")
						console.log(_file)
						that.$request.baseRequest('admin.unimall.certificateManagementInfo', 'speechRecognition', {
							voiceMessage: _file,
						}, failres => {
							console.log('res+++++', failres.errmsg)
							this.$refs.uToast.show({
								type: 'error',
								message: failres.errmsg,
							})
						}).then(res => {
							uni.hideLoading()
							console.log(res)
							uni.setStorageSync('search_val', res.data);
							uni.switchTab({
								url: "/pages/cardHolder/cardHolder"

							})

						})
					}
					recorderManager.stop()
				})
			},
			onClickDelAll() {},
			onSearchName(e) {
				uni.setStorageSync('search_val', e);
				uni.switchTab({
					url: "/pages/cardHolder/cardHolder"

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shqx {
		position: absolute;
		top: -100rpx;
		left: 0;
		right: 0;
		margin: auto;
		text-align: center;
		color: rgba(221, 221, 221, 1);
	}

	.record-box {
		width: 100%;
		position: relative;
		top: 80rpx;
	}

	.record-btn-layer {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.record-btn-layer button::after {
		border: none;
	}

	.record-btn-layer button {
		font-size: 14px;
		line-height: 38px;
		width: 100%;
		height: 38px;
		border-radius: 8px;
		text-align: center;
		background: rgba(56, 86, 156, 1);
	}

	.record-btn-layer button image {
		width: 16px;
		height: 16px;
		margin-right: 4px;
		vertical-align: middle;
	}

	.record-btn-layer .record-btn-2 {
		background: rgba(56, 86, 156, 1);
	}

	.prompt-layer {
		border-radius: 8px;
		background: rgba(56, 86, 156, 1);
		padding: 8px 16px;
		box-sizing: border-box;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.prompt-layer::after {
		content: '';
		display: block;
		border: 6px solid rgba(0, 0, 0, 0);
		border-top-color: rgba(56, 86, 156, 1);
		position: absolute;
		bottom: -10px;
		left: 50%;
		transform: translateX(-50%);
	}

	.prompt-layer-1 {
		font-size: 12px;
		width: 128px;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		top: -240px;
	}

	.del {
		position: absolute;
		top: -200rpx;

		.img {
			width: 100rpx;
		}
	}

	.prompt-layer-1 .p {
		color: #000000;
	}

	.prompt-layer-1 .span {
		color: #fff;
	}

	.prompt-loader .em {}

	.prompt-loader {
		width: 96px;
		height: 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 6px;
	}

	.prompt-loader .em {
		display: block;
		background: #fff;
		width: 1px;
		height: 10%;
		margin-right: 2.5px;
		float: left;
	}

	.prompt-loader .em:last-child {
		margin-right: 0px;
	}

	.prompt-loader .em:nth-child(1) {
		animation: load 2.5s 1.4s infinite linear;
	}

	.prompt-loader .em:nth-child(2) {
		animation: load 2.5s 1.2s infinite linear;
	}

	.prompt-loader .em:nth-child(3) {
		animation: load 2.5s 1s infinite linear;
	}

	.prompt-loader .em:nth-child(4) {
		animation: load 2.5s 0.8s infinite linear;
	}

	.prompt-loader .em:nth-child(5) {
		animation: load 2.5s 0.6s infinite linear;
	}

	.prompt-loader .em:nth-child(6) {
		animation: load 2.5s 0.4s infinite linear;
	}

	.prompt-loader .em:nth-child(7) {
		animation: load 2.5s 0.2s infinite linear;
	}

	.prompt-loader .em:nth-child(8) {
		animation: load 2.5s 0s infinite linear;
	}

	.prompt-loader .em:nth-child(9) {
		animation: load 2.5s 0.2s infinite linear;
	}

	.prompt-loader .em:nth-child(10) {
		animation: load 2.5s 0.4s infinite linear;
	}

	.prompt-loader .em:nth-child(11) {
		animation: load 2.5s 0.6s infinite linear;
	}

	.prompt-loader .em:nth-child(12) {
		animation: load 2.5s 0.8s infinite linear;
	}

	.prompt-loader .em:nth-child(13) {
		animation: load 2.5s 1s infinite linear;
	}

	.prompt-loader .em:nth-child(14) {
		animation: load 2.5s 1.2s infinite linear;
	}

	.prompt-loader .em:nth-child(15) {
		animation: load 2.5s 1.4s infinite linear;
	}

	@keyframes load {
		0% {
			height: 10%;
		}

		50% {
			height: 100%;
		}

		100% {
			height: 10%;
		}
	}

	.prompt-layer-2 {
		// top: -540px;
	}

	.prompt-layer-2 .text {
		color: rgba(0, 0, 0, 1);
		font-size: 12px;
	}

	.record-btn {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.text {
			margin-top: 20rpx;
		}

	}

	/deep/.u-popup__content {
		padding-bottom: 100rpx;
		background: linear-gradient(180deg, rgba(204, 204, 204, 0.95) 0%, rgba(203, 203, 203, 0.01) 100%) !important;
		border-radius: 50% 50% 0 0;
	}

	.record-layerP {
		position: relative;
		top: 50px;
	}
</style>