小程序云开发在首页有一个城市筛选器,点击输入城市即可筛选出输入城市的接单员的完整代码示例
时间: 2024-05-04 12:20:33 浏览: 102
以下是一个简单的小程序云开发示例,包含城市筛选器和接单员列表的完整代码:
1. 在小程序云开发控制台中创建一个名为 `orders` 的集合,用于存储所有订单数据。集合中的每个文档包含 `city` 和 `employee` 字段,分别表示订单所在城市和接单员姓名。
2. 在小程序中创建一个 `pages/index/index` 页面,在页面的 `wxml` 文件中添加城市筛选器和接单员列表的代码:
```html
<view class="container">
<picker mode="selector" range="{{cities}}" bindchange="onCityChange">
<view class="picker">
{{currentCity}}
<image src="/images/arrow-down.png" mode="aspectFit"></image>
</view>
</picker>
<view class="list">
<block wx:for="{{employees}}" wx:key="index">
<view class="item">
<text>{{item}}</text>
</view>
</block>
</view>
</view>
```
3. 在页面的 `js` 文件中添加以下代码:
```javascript
const db = wx.cloud.database()
Page({
data: {
cities: ['北京', '上海', '广州', '深圳'],
currentCity: '北京',
employees: []
},
onLoad: function () {
this.getEmployees(this.data.currentCity)
},
onCityChange: function (event) {
const index = event.detail.value
const city = this.data.cities[index]
this.setData({
currentCity: city
})
this.getEmployees(city)
},
getEmployees: function (city) {
wx.showLoading({
title: '正在加载',
mask: true
})
db.collection('orders').where({
city: city
}).field({
employee: true
}).get().then(res => {
wx.hideLoading()
const employees = res.data.map(item => item.employee)
this.setData({
employees: employees
})
}).catch(err => {
console.error(err)
wx.hideLoading()
})
}
})
```
4. 在页面的 `wxss` 文件中添加以下样式:
```css
.container {
padding: 20rpx;
}
.picker {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1rpx solid #ccc;
padding-bottom: 10rpx;
margin-bottom: 10rpx;
}
.picker image {
width: 30rpx;
height: 30rpx;
}
.list {
background-color: #f5f5f5;
}
.item {
display: flex;
justify-content: center;
align-items: center;
height: 80rpx;
margin: 10rpx;
background-color: #fff;
border-radius: 10rpx;
box-shadow: 0 0 5rpx #ccc;
}
.item text {
font-size: 32rpx;
}
```
这样,当用户选择城市后,页面会自动更新显示该城市的接单员列表。
阅读全文