tourism/uni_applet/pageA/food/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" :input_text="input_text"
			@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/mic.png" mode="widthFix" style="width:120rpx;height: auto;"
								@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: 2000, //录音最大值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: "",
				input_text:""
			};
		},
		onLoad(options) {
			if (options.mic == 1) {
				this.isRecorderManager = true
			}
		},
		methods: {
			onClickDelAll() {},
			onSearchName(e) {
				if(e.length>10){
					var text = e.substring(0, 10)
				}else{
					var text = e
				}
				uni.setStorageSync('search_food_val', text);
				uni.switchTab({
					url: "/pages/food/food"
				})
			}
		}
	}
</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>