微信小程序选择学校

ネф̶-イω

于 2024-07-22 18:52:11 发布

阅读量319

点赞数 12

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_45019897/article/details/140617162

版权

在这里插入图片描述

<view class="container">  
  <view class="search-bar">  
    <input class="search-input" type="text" placeholder="请输入学校名称" bindinput="handleInput" value="{{searchValue}}" />  
  </view>  
  <view class="school-list" wx:if="{{schools.length > 0}}">  
    <block wx:for="{{schools}}" wx:key="index">  
      <view class="school-card" bindtap="navigateToSchoolDetail" data-schoolid="{{item.schoolid}}" data-schoolcode="{{item.schoolcode}}">
      
        <text class="card-title">{{item.name}}</text>  
        <text class="card-info">{{item.address}}</text>  
      </view>  
    </block>  
  </view>  
  <view class="no-results" wx:else>没有找到相关学校</view>  
</view>

.container {
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.search-input {
  width: 100%;
  height: 40px;
  border: 1px solid #1296db;
  border-radius: 40rpx;
  padding: 0 10rpx;
  font-size: 28rpx;
  line-height: 40rpx;
  color: #333;
  background-color: #fff;
  box-sizing: border-box;
}

.school-card {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid #1296db;
  background-color: #EDF4FF;
  color: #1296db;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  padding: 15px;
}

.card-title,
.card-info {
  text-align: left;
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.card-info {
  font-size: 14px;
  color: #666;
}

.no-results {
  margin-top: 20px;
  text-align: center;
  font-size: 30rpx;
  color: #080808;
}

Page({    
  data: {    
    searchValue: '',     
    allSchools: [], 
    schools: []   
  },    
    
  onLoad: function() {  
    const mockAllSchools = [  
      { name: '北京大学', address: '北京市海淀区颐和园路5号',schoolid:'100001',schoolcode:'B' },  
      { name: '清华大学', address: '北京市海淀区双清路30号',schoolid:'100002',schoolcode:'B' },  
      { name: '上海交通大学', address: '上海市闵行区东川路800号',schoolid:'100003',schoolcode:'S' },  
    ];  
    this.setData({  
      allSchools: mockAllSchools,  
      schools: mockAllSchools   
    });  
  },  
    
  handleInput: function(e) {    
    const searchValue = e.detail.value.trim();    
    this.setData({    
      searchValue: searchValue    
    });    
    this.filterSchools(searchValue);  
  },    
    
  filterSchools: function(searchValue) {    
    const regex = new RegExp(searchValue, 'i');
    const filteredSchools = this.data.allSchools.filter(school => {    
      return regex.test(school.name);    
    });    
    this.setData({    
      schools: filteredSchools    
    });    
  },
  navigateToSchoolDetail: function(event) {
    const { schoolid, schoolcode } = event.currentTarget.dataset;
    wx.showToast({
      title: '/pages/schoolinfo/schoolinfo?schoolid=' + schoolid + '&schoolcode=' + schoolcode,
      icon:'none'
    })
  }
});