倒计时组件

2025-03-25 17:23:40 +08:00
parent f88048b876
commit a5d5ce4e7c
2 changed files with 229 additions and 0 deletions
@@ -0,0 +1,125 @@
+<template>
+	<view>
+		<view class="text">
+			<view class="qx" @click="close('showarea') ">{{$t('cancel')}}</view>
+			<view class="qd" @click="arerfn">{{$t('confirm')}}</view>
+		</view>
+		  <view class="popup-content">
+			<!-- 搜索框 -->
+			<u-input
+			  v-model="searchKeyword"
+			  :placeholder="$t('keyword')"
+			  @input="handleSearch"
+			></u-input>
+	
+			<!-- 选项列表 -->
+			<scroll-view scroll-y class="option-list">
+			  <view
+				v-for="(item, index) in areaList"
+				:key="index"
+				class="option-item"
+				@click="handleSelect(item)"
+				:class="actives==item.id?'actives':''"
+			  >
+				{{ item.name }}
+			  </view>
+			  <view v-if="filteredOptions.length === 0" class="no-data">
+				{{$t('noresults')}}
+			  </view>
+			</scroll-view>
+		  </view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name:"select",
+		props: {
+			showarea: {
+				type: Boolean,
+				default: true
+			},
+			areaList:[],
+		},
+		data() {
+			return {
+				searchKeyword:'',
+				filteredOptions:'',
+				
+			};
+		},
+		methods:{
+			// 搜索处理函数
+			handleSearch(){
+			  if (this.searchKeyword) {
+				console.log(this.searchKeyword)
+				this.filteredOptions = this.areaList.filter((item) =>
+				  item.name.includes(this.searchKeyword)
+				);
+				console.log(this.filteredOptions)
+			  } else {
+				// 如果搜索框为空，显示全部数据
+				this.filteredOptions = this.areaList;
+			  }
+			},
+			// 选择选项
+			handleSelect(item) {
+			  this.selectedLabel = item.name; // 回显选中的值
+			  // this.searchKeyword = item.name
+			  this.actives = item.id
+			  // this.showPicker = false; // 关闭弹窗
+			  console.log("选中的值:", item.id);
+			  console.log("选中的值:", item.name);
+			},
+			arerfn(){
+				 this.showPicker = false; // 关闭弹窗
+				 this.country_name = this.selectedLabel
+				 this.userinfo.country_id = this.actives
+				 
+			},
+			close(val){
+				this[val] = false
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+.actives{
+		background-color: #dfdfdf;
+	}
+	.text{
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		line-height: 30px;
+		padding: 10px 15px 0px;
+		.qd{
+			color: #3471FF;
+		}
+	}
+	.popup-content {
+	  padding: 20px;
+	  background-color: #fff;
+	}
+	
+	.option-list {
+	  max-height: 400rpx;
+	  margin-top: 20rpx;
+	}
+	
+	.option-item {
+	  padding: 20rpx;
+	  border-bottom: 1rpx solid #eee;
+	}
+	
+	.option-item:last-child {
+	  border-bottom: none;
+	}
+	
+	.no-data {
+	  text-align: center;
+	  padding: 20rpx;
+	  color: #999;
+	}
+</style>