[更新邀请码]

uni_modules/oct-mechanism-picker/components/oct-mechanism-picker/oct-mechanism-picker.vue

@@ -0,0 +1,178 @@
+<template>
+	<view>
+		<uni-popup ref="octMechanismPicker">
+			<view class="mechanism--content">
+				<view class="mechanism--title" v-if="title != null">{{title}}</view>
+				<view class="mechanism--input">
+					<input type="text" placeholder="输入关键字筛选" v-model="searchValue" @input="onSearch($event)">
+					<view class="mechanism--clear" @click="onClear" v-if="searchValue.length > 0">
+						<uni-icons type="clear" size="20" color="#c3c3c3"></uni-icons>
+					</view>
+				</view>
+				<scroll-view class="mechanism--scroll" scroll-y show-scrollbar>
+					<block v-if="searchValue.length > 0">
+						<view class="mechanism--item" v-for="(item, index) in searchArr" :key="index" v-if="searchArr.length > 0" @click="onChoose(item, index)">
+							<view class="mechanism--text">{{item.title}}</view>
+							<uni-icons type="right" size="20" color="#c3c3c3"></uni-icons>
+						</view>
+						<view class="mechanism--null" v-if="searchArr.length <= 0">
+							<view>暂无与<text>[{{searchValue}}]</text>相关的搜索结果</view>
+						</view>
+					</block>
+					<block v-else>
+						<view class="mechanism--item" v-for="(item, index) in columns" :key="index" @click="onChoose(item, index)">
+							<view class="mechanism--text">{{item.title}}</view>
+							<uni-icons type="right" size="20" color="#c3c3c3"></uni-icons>
+						</view>
+					</block>
+				</scroll-view>
+				<button class="mechanism--button" @click="clear">取消</button>
+			</view>
+		</uni-popup>
+	</view>
+</template>
+<script>
+	export default{
+		data(){
+			return{
+				searchValue: '',
+				searchArr  : []
+			}
+		},
+		props	: {
+			// 弹出层标题
+			title	: {
+				type	: String,
+				default	: null
+			},
+			// 默认值
+			value	: {
+				type	: Number,
+				default	: 0
+			},
+			// 选项
+			columns	: {
+				type	: Array,
+				default	: () => {
+					return []
+				}
+			}
+		},
+		methods	: {
+			// 弹出层
+			open(type){
+				this.$refs.octMechanismPicker.open(type || 'bottom')
+			},
+			// 关闭弹出层
+			clear(){
+				this.$refs.octMechanismPicker.close()
+				this.onClear()
+			},
+			// 选择选项
+			onChoose(val, index){
+				this.$emit('choose', {val, index})
+				this.clear()
+			},
+			// 筛选输入框
+			onSearch(e){
+				let { value }	= e.target
+				let columns		= this.columns
+				let searchArr	= []
+				for(let obj of columns){
+					if(obj.title.includes(value)){
+						searchArr.push(obj)
+					}
+				}
+				this.searchArr = searchArr
+			},
+			// 清理搜索内容
+			onClear(){
+				this.searchValue = ''
+				this.searchArr	 = []
+			}
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	.mechanism--content{
+		background: white;
+		border-radius: 20rpx 20rpx 0 0;
+		overflow: hidden;
+		position: relative;
+		.mechanism--title{
+			text-align: center;
+			position: relative;
+			padding: 30rpx 50rpx;
+			font-size: 34rpx;
+			font-weight: bold;
+			&::after {
+				content: "";
+				position: absolute;
+				left: 0;
+				bottom: 0;
+				width: 100%;
+				height: 1rpx;
+				background-image: linear-gradient(0deg, $border-color 50%, transparent 50%);
+			}
+		}
+		.mechanism--input{
+			padding: 30rpx 50rpx;
+			position: relative;
+			& > input{
+				background: #f8f8f8;
+				padding: 0 30rpx;
+				height: 80rpx;
+				border-radius: 10rpx;
+				font-size: 30rpx;
+			}
+			.mechanism--clear{
+				position: absolute;
+				top: 30rpx;
+				right: 50rpx;
+				height: 80rpx;
+				width: 80rpx;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+		}
+		.mechanism--scroll{
+			padding: 0 50rpx;
+			box-sizing: border-box;
+			height: 50vh;
+			.mechanism--item{
+				line-height: 90rpx;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				.mechanism--text{
+					width: 80%;
+					overflow: hidden;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+				}
+			}
+			.mechanism--null{
+				height: 40vh;
+				line-height: 40vh;
+				font-size: 30rpx;
+				color: gray;
+				text-align: center;
+				text{
+					color: #446EFE;
+				}
+			}
+		}
+		.mechanism--button{
+			margin: 30rpx 50rpx;
+			background: #446EFE;
+			color: white;
+			font-size: 34rpx;
+			height: 90rpx;
+			line-height: 90rpx;
+			padding: 0;
+			border-radius: 10rpx;
+			&::after{ display: none; }
+		}
+	}
+</style>