生箔工序

components/SearchPopup.vue

@@ -0,0 +1,132 @@
+<template>
+  <view class="msg_l_wrapper" :class="{ active: visible }">
+	<view class="zd-row header">
+		<span class="page_name">搜索</span>
+		<uni-icons type="closeempty" size="20" @tap="handleClose"></uni-icons>
+	</view>
+	<view class="search-container">
+		<view class="mgb40" v-for="e in conditions" :key="e.label">
+			<view class="fil_name">{{e.label}}<span v-show="e.required" style="color: #D7592F;font-weight: 700;">*</span></view>
+			<view v-if="e.key === 'scan'">
+				<search-box v-model="e.value"
+				/>
+			</view>
+		</view>
+		<slot></slot>
+	</view>
+	<view class="zd-row submitbar">
+		<view class="zd-col-4">
+			<button class="btn-submit btn-cancle" @tap="handleClear">全部清除</button>
+		</view>
+		<view class="zd-col-4">
+			<button class="btn-submit btn-success" @tap="handleSearch">查询</button>
+		</view>
+	</view>
+  </view>
+</template>
+
+<script>
+import SearchBox from '@/components/SearchBox.vue'
+export default {
+	components: {
+		SearchBox
+	},
+	props: {
+		conditions: {
+		  type: Array,
+		  default: () => [],
+		},
+	},
+	data() {
+		return {
+			visible: false
+		};
+	},
+	methods: {
+		init () {
+			this.visible = true
+		},
+		handleClose () {
+			uni.setNavigationBarColor({
+			  frontColor: '#000000', // 导航栏文字颜色，只能是 '#ffffff' 或 '#000000'
+			  backgroundColor: '#d7592f', // 导航栏背景颜色
+			  animation: {
+			    duration: 300, // 动画持续时间（毫秒）
+			    timingFunc: 'ease-in-out' // 动画效果
+			  }
+			});
+			this.visible = false
+		},
+		handleClear () {
+			this.$emit('clear')
+		},
+		handleSearch () {
+			this.$emit('search')
+			this.handleClose()
+		},
+		filterResults(key) {
+		  // 根据条件过滤结果
+		  const query = this.conditions.find((c) => c.key === key).value;
+		  this.searchResults = this.filterData(query, key);
+		},
+		filterData(query, key) {
+		  // 模拟数据过滤逻辑
+		  const allItems = ['苹果', '香蕉', '橙子', '葡萄', '西瓜']; // 示例数据
+		  return allItems.filter((item) => item.includes(query));
+		},
+		search() {
+		  this.$emit('search', this.conditions);
+		  this.$emit('update:visible', false); // 隐藏弹窗
+		},
+		selectItem(item) {
+		  this.$emit('select', item);
+		  this.searchQuery = item;
+		  this.searchResults = [];
+		}
+	}
+};
+</script>
+
+<style lang="stylus" scoped>
+@import '@/common/style/mixin.styl';
+.msg_l_wrapper
+	position: fixed;
+	top: 0;
+	right: -100%;
+	width: 100%;
+	padding: 14rpx;
+	z-index: 301;
+	transition: all .3s;
+	height: calc(100% - var(--status-bar-height));
+	background-color: #ffffff;
+	overflow: auto;
+	transition: right 0.3s ease;
+.msg_l_wrapper.active {
+  right: 0;
+}
+.header
+	position absolute
+	top 0
+	left 0
+	z-index: 301;
+	_wh(100%, calc(var(--status-bar-height) + 88rpx))
+	padding var(--status-bar-height) 20rpx 0 20rpx
+	background-color #fff
+	border-bottom 1px solid #f6f6f6
+.page_name
+	_font(32rpx, 32rpx, #000,700,center)
+.fil_name
+	line-height: 80rpx;
+	font-size: 28rpx;
+	color: #323232;
+.submitbar
+	position absolute
+	z-index: 301;
+	background-color: #fff;
+	padding: 20rpx 28rpx;
+	box-shadow: none;
+	border-top 1px solid #f6f6f6
+.search-container
+	width 100%
+	padding calc(var(--status-bar-height) + 108rpx) 28rpx 120rpx 28rpx;
+</style>