jili2-ph/components/cpicker/cpicker.vue

<template>
	<view>
		<view v-if="show" class="cpicker-mask">
		  <view class="cpicker-box">
		    <view class="cpicker-box-header">
				<view class="search-wrapper">
					<view class="search-icon">
						<svg t="1679886082795" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7388" width="200" height="200"><path d="M465.334857 146.285714c176.201143 0 319.024762 145.091048 319.024762 324.096a325.973333 325.973333 0 0 1-65.560381 196.827429L877.714286 828.611048 829.366857 877.714286l-157.647238-160.182857a314.855619 314.855619 0 0 1-206.384762 76.921904C289.133714 794.453333 146.285714 649.386667 146.285714 470.381714S289.133714 146.285714 465.334857 146.285714z m0 69.436953c-138.459429 0-250.684952 114.029714-250.684952 254.659047 0 140.629333 112.225524 254.634667 250.684952 254.634667 138.435048 0 250.660571-114.005333 250.660572-254.634667 0-140.629333-112.225524-254.659048-250.660572-254.659047z" p-id="7389" fill="#8a8a8a"></path></svg>
					</view>
					<input class="search-input" placeholder="请输入搜索内容" v-model="keywords" @input="clearInput" />
					<view class="search-del" v-if="keywords" @click="clear">
						<svg t="1679886219343" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7573" width="200" height="200"><path d="M402.261333 377.880381l0.365715 364.007619h73.142857l-0.341334-364.007619h60.586667L536.380952 741.888h73.142858l-0.365715-364.007619h154.770286L731.91619 832.731429a73.142857 73.142857 0 0 1-72.947809 67.998476H348.306286a73.142857 73.142857 0 0 1-72.94781-68.022857L243.297524 377.904762l158.963809-0.024381zM134.095238 256h731.428572v73.142857h-731.428572v-73.142857z m518.265905-121.904762v73.142857h-292.571429v-73.142857h292.571429z" p-id="7574" fill="#8a8a8a"></path></svg>
					</view>	
				</view>
			</view>
		    <scroll-view scroll-y class='main-content'>
		      <view v-for="(item,index) in list" :key="index" class="cpicker-option" :data-id="item.id" @click="clickOption">
		        {{item.title}}
		        <image v-if="item.id == defaultId" class="cpicker-option-checked" src="../../images/duihao-red.png"></image>
		      </view>
		    </scroll-view>
		    <view class='modal-footer'>
		      <view class='cancel-btn' @click='cancel'>取消</view>
		      <view class='confirm-btn' @click='confirm'>确定 </view>
		    </view>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "cpicker",
		components: {
		
		},
		props: {
			title: {
				type: String,
				default: "请选择"
			},
			show: {
				type: Boolean,
				default: false
			},
			list: {
				type: Array,
				value: [] //[{id:1,title:'五星花园'},{id:2,title:'陪护单类型选错了陪护单类型选错了'}]
			},
			did: { //默认值
				type: Number,
				value: 0,
			}
		},
		data() {
			return {
				defaultId: 0,
				keywords:'',
				oldList:[],
			}
		},
		watch: {
		    keywords (newVal, oldVal) {
		        this.list = this.oldList;
		        let resultList = [];
		        this.list.forEach((item) => {
		            if (item.title.indexOf(newVal) > -1) {
		            resultList.push(item);
		        }
		       });
		        this.list = resultList;
		    }
		},
        mounted() {
			this.defaultId = this.did;
			this.oldList = this.list;
          // console.log(this.list,this.show);
        },
		methods: {
			search(e){
			    console.log(e,'1111');
			},
			
			clear(e){
			    this.keywords='';
			    this.list = this.oldList;
			
			},
			// 点击modal的回调函数
			clickOption(e) {
				this.defaultId = e.currentTarget.dataset.id;
			},
			// 点击取消按钮的回调函数
			cancel() {
				// this.show = false;
				this.$emit('update:show', false);
				// this.triggerEvent('cancel')  //triggerEvent触发事件
				this.$emit('cancel');
			},
			// 点击确定按钮的回调函数
			confirm() {
				this.$emit('update:show', false);
				let sinfo = null;
				this.list.forEach((item) => {
					if(item.id == this.defaultId){
						sinfo = item;
					}
				});
				// this.triggerEvent('confirm',sinfo);
				this.$emit('confirm',sinfo);
			}
		}
	};
</script>

<style lang="scss" scoped>
	/*遮罩层*/
	.cpicker-mask{
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  position: fixed;
	  left: 0;
	  right: 0;
	  top: 0;
	  bottom: 0;
	  background-color: rgba(0,0,0,0.6);
	  z-index: 999999999999;
	}
	  /*遮罩内容*/
	.cpicker-box{
	  display: flex;
	  flex-direction: column;
	  width: 600rpx;
	  background-color: #fff;
	  border-radius: 10rpx;
	  /* padding: 20rpx; */
	  text-align: center;
	  font-size: 30rpx;
	  color: #333333;
	  /* font-weight: bold; */
	}
	.cpicker-box-header{
	  height: 120rpx;
	  line-height: 90rpx;
	  border-bottom: 1rpx solid #e6e4e4;
	}
  /*中间内容*/
  .main-content{
	flex: 1;
	/* height: 100%; */
	min-height: 200rpx;
	overflow-y: hidden; 
	max-height:40vh;
	padding-top: 20rpx;
  }

  .cpicker-option{
	position: relative;
	width: 460rpx;
	height: 70rpx;
	line-height: 70rpx;
	/* text-align: left; */
	padding: 0 70rpx;
	padding-right: 70rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space:nowrap; 
  }
  .cpicker-option-checked{
	position: absolute;
	z-index: 10;
	right: 20rpx;
	top: 20rpx;
	width: 30rpx;
	height: 30rpx;
  }

  /*底部按钮*/
  .modal-footer{
	display: flex;
	flex-direction: row;
	height: 90rpx;
	line-height: 90rpx;
	border-top: 1rpx solid #e6e4e4;
	margin-top: 30rpx;
  }
  .cancel-btn, .confirm-btn{
	flex: 1;
	height: 90rpx;
	line-height: 90rpx;
	text-align: center;
	font-size: 32rpx;
  }
  .cancel-btn{
	color: #333333;
	border-right: 1rpx solid #e6e4e4;
  }
  .confirm-btn {
	color: var(--themeColor)
  }
	.search-wrapper{
		  width: 540rpx;
		  height: 80rpx;
		  border: 1rpx solid var(--themeColor);
		  overflow: hidden;
		  margin: 20rpx auto;
		  border-radius: 10rpx;
	}
	.search-wrapper .search-icon{
		  display: inline-block;
		  float: left;
		  width: 80rpx;
		  // height: 60rpx;
		  text-align: center;
		  margin-top: 10rpx;
		  // line-height: 80rpx;
		  // vertical-align: middle;
	}
	.search-wrapper .search-icon svg{
		  width: 50rpx;
		  height: 50rpx;
	}
	
	.search-wrapper .search-input{
		  display: inline-block;
		  float: left;
		  width: 380rpx;
		  height: 60rpx;
		  text-align: left;
		  // font-size: 20rpx;
		  // line-height: 90rpx;
		  margin-top: 12rpx;
		  // line-height: 120rpx;
		  vertical-align: middle;
	}
	
	.search-wrapper .search-del{
		  float: left;
		  display: inline-block;
		  width: 80rpx;
		  text-align: center;
		  margin-top: 10rpx;
	}
	.search-wrapper .search-del svg{
		  width: 50rpx;
		  height: 50rpx;
	}  
	 
</style>