页面开发

components/NavBar.vue

@@ -0,0 +1,64 @@
+<template>
+	<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>
+
+<script>
+	export default {
+		data() {
+			return {
+			};
+		},
+		props: {
+			title: String,
+			inner: {
+				type: Boolean,
+				default: false
+			},
+			inner2: {
+				type: Boolean,
+				default: false
+			},
+			searchActive: {
+				type: Boolean,
+				default: false
+			}
+		},
+		methods: {
+			goBack () {
+				if (this.inner) {
+					uni.navigateBack()
+				} else if (this.inner2) {
+					this.$emit('goIn')
+				} else {
+					uni.redirectTo({
+						url: '/pages/home/home'
+					})
+				}
+			},
+			toSearch () {
+				this.$emit('toSearch')
+			}
+		}
+	}
+</script>
+
+<style lang="stylus">
+@import '@/common/style/mixin.styl';
+.header
+	position fixed
+	_wh(100%, calc(var(--status-bar-height) + 72rpx))
+	// background: linear-gradient(to bottom, #ff6800 0%, #ff6400 100%)
+	background-color $red
+	z-index 200
+	padding var(--status-bar-height) 20rpx 0 
+.page_name
+	_font(32rpx, 32rpx, #fff,700,center)
+</style>

components/SearchBox.vue

@@ -0,0 +1,147 @@
+<template>
+	<view class="search_wraper">
+		<input 
+		type="text" 
+		class="filter_input pdr120"
+		:placeholder="placeholder"
+		:value="value"
+		:focus="focusState"
+		@blur="handleBlur($event)"
+		@input="handleChange($event)">
+		<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="24" color="#4e6ef2" style="margin-top: 2px"></uni-icons>
+			<uni-icons v-show="seaShow" @tap="toSearch" type="search" size="20" color="#4e6ef2"></uni-icons>
+		</view>
+	</view>
+</template>
+
+<script>
+	import permision from "@/utils/permission.js"
+	export default {
+		data() {
+			return {
+				cur: '',
+				focusState: false
+			};
+		},
+		model: {
+			prop: 'value',
+			event: 'input'
+		},
+		props: {
+			value: String,
+			seaShow: {
+			  type: Boolean,
+			  default: false
+			},
+			focused: {
+				type: Boolean,
+				default: false
+			},
+			placeholder: {
+				type: String,
+				default: ''
+			}
+		},
+		watch: {
+			focused() {
+				this.focusState = this.focused
+			},
+		},
+		mounted () {
+		    if (this.focused) {
+				this.focusState = true
+			}
+	    },
+		methods: {
+			handleChange ($event) {
+				this.cur = $event.target.value
+				this.$emit('input', this.cur)
+				this.$emit('handleChange', this.cur)
+				if (this.focusState) {
+					this.focusState = false
+				}
+			},
+			handleBlur () {
+				this.focusState = false	
+			},
+			toSearch () {
+				this.$emit('toSearch', this.cur)
+			},
+			toDel () {
+				this.cur = ''
+				this.$emit('input', '')
+			},
+			toScan () {
+				setTimeout(() => {
+					this.focusState = true
+				},0)
+				setTimeout(() => {
+					uni.hideKeyboard()
+				}, 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'
+						// })
+					}
+				});
+			}
+			// #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%, 80rpx)
+.pdr120
+	padding-right: 120rpx;
+.buttons_wraper
+	position absolute
+	top 0
+	right 10rpx
+	_wh(auto, 80rpx)
+.pdr10
+	padding-right 10rpx
+</style>