同步代码

components/JeepaySearchSelect/JeepaySearchSelect.vue

@@ -0,0 +1,74 @@
+<!--
+  组件作用：  状态筛选器， 一般用作搜索栏右侧。 
+  
+  使用方法：
+  
+  
+  @author terrfly
+  @site https://www.jeequan.com
+  @date 2022/11/26 16:24
+-->
+
+<template>
+	
+	<view>
+		<view class="code-state" @tap="statePopup.open(props.bizType)">
+			{{ props.list.find(i => {
+				return i.value == props.bizType
+			}).label }}
+			<image src="/pageDevice/static/devIconImg/icon-arrow-down.svg" mode="scaleToFill" />
+		</view>
+	</view>
+	
+	<view>
+		  <JSinglePopup :list="props.list" :title="props.title" ref="statePopup" @confirm="confirmState" />
+	</view>
+	
+	
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+
+
+const emits = defineEmits(['update:bizType', 'change'])
+
+// 定义组件参数 
+const props = defineProps({
+	
+	// 双向绑定
+	bizType: { type: [Number, String] },
+	// 搜索数据
+	list: { type: Array },
+	title: { type: String }
+})
+
+const vdata = reactive({
+	selected: {} // 当前选择对象
+})
+
+const statePopup = ref(null)
+
+//按状态筛选
+function confirmState(r){
+	vdata.selected = r || { }
+	emits('update:bizType', vdata.selected.value)
+	emits('change', vdata.selected)
+}
+	
+</script>
+
+<style lang="scss" scoped>
+  .code-state {
+    display: flex;
+    align-items: center;
+    margin-left: 40rpx;
+    font-size: 30rpx;
+    color: #222425;
+    image {
+      margin-left: 10rpx;
+      width: 40rpx;
+      height: 40rpx;
+    }
+  }
+ </style>