businessCard/xiaochengxu/pages/cardHolder/cardHolder.vue

<template>
	<view class="content">
		<u-navbar title="电子名片" placeholder>
			<view class="u-nav-slot relative" slot="left">
				<u-icon name="bell" size="26" @click="toNotice"></u-icon>
				<u-badge :isDot="true" type="error" class="point"></u-badge>
			</view>
		</u-navbar>
		<view class="content1 flex-row-center">
			<view class="col flex">
				<uni-icons type="scan" size="30" @click="scan"></uni-icons>
			</view>
			<view class="search flex flex-between" @click="search">
				<view class="left flex">
					<uni-icons type="search" size="24"></uni-icons>
					<text class="search-val"> {{searchVal?searchVal:'搜索名片'}}</text>
				</view>
				<view class="right">
					<uni-icons type="mic" size="24" @click.stop="micOpen"></uni-icons>
				</view>
			</view>
		</view>

		<view class="content2">
			<view class="all-type flex" @click="selectType">
				<text>{{typeName?typeName:'全部分类'}}</text>
				<uni-icons type="bottom" size="20"></uni-icons>
			</view>
		</view>
		<view class="content3 flex">
			<view class="left">
				<view class="top flex-row-center">
					<image src="../../static/uni.png" mode="widthFix" class="img"></image>
				</view>
				<view class="bottom flex flex-evenly">
					<uni-icons type="home" size="20"></uni-icons>
					<text>默</text>
					<uni-icons type="redo" size="20"></uni-icons>
				</view>
			</view>
			<view class="right">
				<view class="row1 flex">
					<text>张三</text>
					<text class="line"></text>
					<text>总经理</text>
				</view>
				<view class="row2">
					北京xxx有限公司
				</view>
				<view class="row3" @click="toMap">
					<uni-icons type="redo" size="20"></uni-icons>
					<text>北京市朝阳区幸福大街8号</text>
				</view>
				<view class="row3">
					<uni-icons type="redo" size="20"></uni-icons>
					<text>13333333333</text>
				</view>
				<view class="row3">
					<uni-icons type="redo" size="20"></uni-icons>
					<text>我是备注</text>
				</view>
			</view>
		</view>
		<u-picker :show="isShowType" :columns="typeColumns" keyName="label" title="选择分类" @close="isShowType=false"
			@cancel="isShowType=false" closeOnClickOverlay @confirm="typeConfirm"></u-picker>
		<lyuan-tx-asr ref="asr" :uploadMethod="uploadFile" @change="asrChange" @fileChange="fileChange" appId=""
			secretId="" secretKey=""></lyuan-tx-asr>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchVal: '',
				isShowType: false,
				typeName: '',
				typeColumns: [
					[{
							label: '重要客户',
							id: 2021
						}, {
							label: '常用客户',
							id: 804
						},
						{
							label: '次要客户',
							id: 804
						}
					]
				]
			};
		},
		onShow() {
			this.searchVal = uni.getStorageSync("search_val") ? uni.getStorageSync("search_val") : ''
		},
		methods: {
			toNotice(){
				uni.navigateTo({
					url:"/pages/cardHolder/notice"
				})
			},
			micOpen: function() {
				this.$refs.asr.show();
			},
			asrChange: function(res) {
				console.log('语音识别确认结果：' + res);
			},
			fileChange: function({
				file,
				content
			}) {
				console.log('录音文件', file);
			},
			uploadFile: function(tempFilePath) {
				return new Promise((resolve, reject) => {
					//调用你的接口把音频文件转为文字
					this.$minApi.upload('txasr/SentenceRecognition', null, tempFilePath)
						.then(res => {
							if (res.code == 1) {
								resolve(res.data.Result);
							} else {
								reject(e);
							}
						})
						.catch(e => {
							reject(e);
						});
				});
			},
			search() {
				uni.navigateTo({
					url: "/pages/cardHolder/search"
				})
			},
			input(res) {
				console.log('----input:', res)
			},
			clear(res) {
				uni.showToast({
					title: 'clear事件，清除值为：' + res.value,
					icon: 'none'
				})
			},
			blur(res) {
				uni.showToast({
					title: 'blur事件，输入值为：' + res.value,
					icon: 'none'
				})
			},
			focus(e) {
				uni.showToast({
					title: 'focus事件，输出值为：' + e.value,
					icon: 'none'
				})
			},
			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			},
			selectType() {
				this.isShowType = true
			},
			typeConfirm(val) {
				console.log(val.value)
				this.typeName = val.value[0].label
				this.isShowType = false
			},
			scan() {
				// console.log(1)
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			toMap() {
				uni.navigateTo({
					url: "/pages/cardHolder/map"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 20rpx;
	}

	.u-nav-slot {
		/deep/.u-badge {
			position: absolute;
			top: 0;
			right: 6rpx;
		}
	}

	.content1 {
		margin-top: 20rpx;
		.search {
			margin-left: 20rpx;
			border: 1px solid #ccc;
			border-radius: 50rpx;
			width: 100%;
			padding: 10rpx 30rpx;
			box-sizing: border-box;

			.left {
				.search-val {
					margin-left: 30rpx;
				}
			}
		}
	}

	.content2 {
		.all-type {
		}
	}

	.content3 {
		border: 1px solid #ccc;
		border-radius: 30rpx;
		padding: 40rpx;
		box-sizing: border-box;

		.left {
			width: 30%;

			.top {
				
				margin-bottom: 20rpx;
			}
			.img {
				width: 80%;
			}

			.bottom {
			}
		}

		.right {
			.row1 {
				.line {
					width: 1px;
					height: 20px;
					margin: 0 20rpx;
					background: black;
				}
			}
		}
	}
</style>