1

xiaochengxu/pages/cardHolder/cardHolder.vue

@@ -18,7 +18,7 @@
 						v-if="searchVal"></uni-icons>
 				</view>
 				<view class="right">
-					<uni-icons type="mic" size="24" @click.stop="micOpen"></uni-icons>
+					<uni-icons type="mic" size="24" @click.native.stop="micOpen"></uni-icons>
 				</view>
 			</view>
 		</view>

xiaochengxu/pages/cardHolder/search.vue

@@ -1,38 +1,367 @@
 <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>
-
+		<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: {
-			onClickDelAll() {
+
+			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"
-					
+					url: "/pages/cardHolder/cardHolder"
+
 				})
 			}
 		}
 	}
 </script>
 
-<style lang="scss">
+<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>