4个页面

2024-03-29 16:08:33 +08:00
parent f15cc674f3
commit 77a24ae774
42 changed files with 1280 additions and 2359 deletions
--- a/components/NavBar.vue
+++ b/components/NavBar.vue
@@ -1,8 +1,12 @@
 <template>
-	<view class="header">
-		<span @tap="goBack" class="iconfont icon_back">&#xe6db;</span>
-		<span class="page_name">{{title}}</span>
-		<span @tap="backHome" class="iconfont icon_home" :class="{'vhide': show1 === false}">&#xe69b;</span>
+	<view class="zd-row jcflexstart header">
+		<view class="zd-col-4">
+			<uni-icons @tap="goBack" type="back" size="26" color="#fff"></uni-icons>
+		</view>
+		<view class="zd-col-16 page_name">{{title}}</view>
+		<view v-if="searchActive" class="zd-col-4" style="text-align: right">
+			<uni-icons @tap="toSearch" type="search" size="26" color="#fff"></uni-icons>
+		</view>
 	</view>
 </template>

@@ -22,9 +26,9 @@
 				type: Boolean,
 				default: false
 			},
-			show1: {
+			searchActive: {
 				type: Boolean,
-				default: true
+				default: false
 			}
 		},
 		methods: {
@@ -39,10 +43,8 @@
 					})
 				}
 			},
-			backHome () {
-				uni.redirectTo({
-					url: '/pages/home/home'
-				})
+			toSearch () {
+				this.$emit('toSearch')
 			}
 		}
 	}
@@ -51,12 +53,12 @@
 <style lang="stylus">
@import '@/common/style/mixin.styl';
 .header
-	_fj()
 	position fixed
-	_wh(100%, 72rpx)
+	_wh(100%, calc(var(--status-bar-height) + 72rpx))
+	// background: linear-gradient(to bottom, #ff6800 0%, #ff6400 100%)
 	background-color $red
 	z-index 200
-	padding 0 20rpx
+	padding var(--status-bar-height) 20rpx 0 
 .page_name
 	_font(32rpx, 32rpx, #fff,700,center)
 </style>
--- a/components/SearchBox.vue
+++ b/components/SearchBox.vue
@@ -2,16 +2,16 @@
 	<view class="search_wraper">
 		<input 
 		type="text" 
-		class="filter_input search_input" 
+		class="filter_input pdr120" 
 		:value="value"
 		:focus="focusState"
 		@blur="handleBlur($event)"
 		@input="handleChange($event)">
-		<view class="buttons_wraper">
-			<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 class="zd-row buttons_wraper">
+			<!-- <uni-icons @tap="toDel" type="closeempty" size="20" color="#4e6ef2"></uni-icons> -->
+			<uni-icons class="pdr10" @tap="toScan" type="scan" size="20" :color="focusState ? '#ff6a00' : '#4e6ef2'"></uni-icons>
+			<uni-icons @tap="toPhone" type="camera" size="26" color="#4e6ef2"></uni-icons>
+			<uni-icons v-show="seaShow" @tap="toSearch" type="search" size="20" color="#4e6ef2"></uni-icons>
 		</view>
 	</view>
 </template>
@@ -40,6 +40,11 @@
 				default: false
 			}
 		},
+		watch: {
+			focused() {
+				this.focusState = this.focused
+			},
+		},
 		mounted () {
 		    if (this.focused) {
 				this.focusState = true
@@ -124,15 +129,14 @@
@import '../common/style/mixin.styl';
 .search_wraper
 	position relative
-	_wh(100%, 70rpx)
-.search_input
-	padding-right: 160rpx;
+	_wh(100%, 80rpx)
+.pdr120
+	padding-right: 120rpx;
 .buttons_wraper
 	position absolute
 	top 0
 	right 10rpx
-	_wh(auto, 70rpx)
-	_fj(flex-end)
-.icon_scan_active
-	color $red
+	_wh(auto, 80rpx)
+.pdr10
+	padding-right 10rpx
 </style>
--- a/components/SearchBox1.vue
+++ b/components/SearchBox1.vue
@@ -1,110 +0,0 @@
-<template>
-	<view class="search_wraper">
-		<input 
-		type="text" 
-		class="filter_input search_input" 
-		:value="value"
-		:focus="focused"
-		@input="handleChange($event)">
-		<view class="buttons_wraper">
-			<span class="iconfont icon-del" @tap="toDel">&#xe6dc;</span>
-			<span class="iconfont icon_scan" @tap="toScan">&#xe6e2;</span>
-			<span v-show="seaShow" class="iconfont icon_search" @tap="toSearch">&#xe6e1;</span>
-		</view>
-	</view>
-</template>
-
-<script>
-	import permision from "@/utils/permission.js"
-	export default {
-		data() {
-			return {
-				cur: ''
-			};
-		},
-		model: {
-			prop: 'value',
-			event: 'input'
-		},
-		props: {
-			value: String,
-			seaShow: {
-			  type: Boolean,
-			  default: false
-			},
-			focused: {
-				type: Boolean,
-				default: false
-			}
-		},
-		methods: {
-			handleChange ($event) {
-				this.cur = $event.target.value
-				this.$emit('input', this.cur)
-				this.$emit('handleChange', this.cur)
-			},
-			toSearch () {
-				this.$emit('toSearch', this.cur)
-			},
-			toDel () {
-				this.$emit('input', '')
-			},
-			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');
-			
-				if (status === null || status === 1) {
-					status = 1;
-				} else {
-					uni.showModal({
-						content: "需要相机权限",
-						confirmText: "设置",
-						success: function(res) {
-							if (res.confirm) {
-								permision.gotoAppSetting();
-							}
-						}
-					})
-				}
-				return status;
-			}
-			// #endif
-		}
-	}
-</script>
-
-<style lang="stylus">
-@import '../common/style/mixin.styl';
-.search_wraper
-	position relative
-	_wh(100%, 70rpx)
-.search_input
-	padding-right: 160rpx;
-.buttons_wraper
-	position absolute
-	top 0
-	right 0
-	_wh(auto, 70rpx)
-</style>