扫码

common/style/layout.css

@@ -55,18 +55,35 @@ uni-button:after {
 	color: #fff;
 }
 .icon_scan {
-	font-size: 48rpx;
-	line-height: 70rpx;
+	width: 42rpx;
+	height: 48rpx;
+	font-size: 40rpx;
+	line-height: 48rpx;
 	color: #323232;
+	text-align: center;
+}
+.icon_phone {
+	width: 48rpx;
+	height: 48rpx;
+	font-size: 36rpx;
+	line-height: 48rpx;
+	color: #323232;
+	text-align: center;
 }
 .icon_del {
-	font-size: 48rpx;
-	line-height: 70rpx;
+	width: 46rpx;
+	height: 48rpx;
+	font-size: 46rpx;
+	line-height: 48rpx;
 	color: #323232;
+	text-align: center;
 }
 .icon_search {
+	width: 48rpx;
+	height: 48rpx;
+	font-size: 40rpx;
 	color: #323232;
-	line-height: 70rpx;
+	line-height: 48rpx;
 }
 .cancel_icon::before {
 	content: "\e6dc";

components/SearchBox.vue

@@ -8,9 +8,10 @@
 		@blur="handleBlur($event)"
 		@input="handleChange($event)">
 		<view class="buttons_wraper">
-			<span class="iconfont icon-del" @tap="toDel">&#xe6dc;</span>
-			<span class="iconfont icon_scan" :class="{'icon_scan_active': focusState === true}" @tap="toScan">&#xe6e2;</span>
-			<span v-show="seaShow" class="iconfont icon_search" @tap="toSearch">&#xe6e1;</span>
+			<view class="iconfont icon_del" @tap="toDel">&#xe6dc;</view>
+			<view class="iconfont icon_scan" :class="{'icon_scan_active': focusState === true}" @tap="toScan">&#xe6e2;</view>
+			<view class="iconfont icon_phone" @tap="toPhone">&#xe663;</view>
+			<view v-show="seaShow" class="iconfont icon_search" @tap="toSearch">&#xe6e1;</view>
 		</view>
 	</view>
 </template>
@@ -72,49 +73,49 @@
 				}, 300)
 				this.cur = ''
 				this.$emit('input', '')
+			},
+			async toPhone() {
+				// #ifdef APP-PLUS
+				let status = await this.checkPermission();
+				if (status !== 1) {
+				    return;
+				}
+				// #endif
+				uni.scanCode({
+					success: (res) => {
+						this.$emit('input', res.result)
+						this.$emit('handleChange', res.result)
+					},
+					fail: (err) => {
+						// uni.showToast({
+						// 	title: '出错',
+						// 	icon: 'none'
+						// })
+					}
+				});
 			}
-			// async toScan() {
-			// 	// #ifdef APP-PLUS
-			// 	let status = await this.checkPermission();
-			// 	if (status !== 1) {
-			// 	    return;
-			// 	}
-			// 	// #endif
-			// 	uni.scanCode({
-			// 		success: (res) => {
-			// 			this.$emit('input', res.result)
-			// 			this.$emit('handleChange', res.result)
-			// 		},
-			// 		fail: (err) => {
-			// 			// uni.showToast({
-			// 			// 	title: '出错',
-			// 			// 	icon: 'none'
-			// 			// })
-			// 		}
-			// 	});
-			// }
-			// // #ifdef APP-PLUS
-			// ,
-			// async checkPermission(code) {
-			// 	let status = permision.isIOS ? await permision.requestIOS('camera') :
-			// 		await permision.requestAndroid('android.permission.CAMERA');
+			// #ifdef APP-PLUS
+			,
+			async checkPermission(code) {
+				let status = permision.isIOS ? await permision.requestIOS('camera') :
+					await permision.requestAndroid('android.permission.CAMERA');
 			
-			// 	if (status === null || status === 1) {
-			// 		status = 1;
-			// 	} else {
-			// 		uni.showModal({
-			// 			content: "需要相机权限",
-			// 			confirmText: "设置",
-			// 			success: function(res) {
-			// 				if (res.confirm) {
-			// 					permision.gotoAppSetting();
-			// 				}
-			// 			}
-			// 		})
-			// 	}
-			// 	return status;
-			// }
-			// // #endif
+				if (status === null || status === 1) {
+					status = 1;
+				} else {
+					uni.showModal({
+						content: "需要相机权限",
+						confirmText: "设置",
+						success: function(res) {
+							if (res.confirm) {
+								permision.gotoAppSetting();
+							}
+						}
+					})
+				}
+				return status;
+			}
+			// #endif
 		}
 	}
 </script>
@@ -129,8 +130,9 @@
 .buttons_wraper
 	position absolute
 	top 0
-	right 0
+	right 10rpx
 	_wh(auto, 70rpx)
+	_fj(flex-end)
 .icon_scan_active
 	color $red
 </style>