

<view class="form-item">
<text class="form-label">房型</text>
<view style="display: flex; padding-top: 5rpx; gap: 15rpx; flex-wrap : wrap; ">
<block wx:for="{{fang_list}}" wx:key="id">
<view class="data_item_text {{item.selected ? 'data_item_text_act' : ''}}" bindtap="click_fang"
data-index="{{index}}">
{{item.name}}
<image wx:if="{{item.selected}}" class="select_icon" src="/assets/images/arrow_icon.png"></image>
</view>
</block>
</view>
</view>
/* 房型多选 */
.data_item_text{
font-size: 28rpx;
background-color: #eaeaea;
color: #2d2d2d;
border-radius: 8rpx;
padding: 8rpx 25rpx 8rpx 25rpx;
position: relative;
}
.data_item_text_act{
background-color: #007AFF;
color: #fff;
}
.select_icon {
position: absolute;
right: 0rpx;
bottom: 0rpx;
height: 30rpx;
width: 30rpx;
z-index: 10; /* 保证显示在最上面 */
pointer-events: none; /* 不影响点击 */
}
/* 房型多选 */
data{
fang_list: [],//房型 {id,name}
}
init_fang(){
const fang_list = [
{ id: 1, name: "双床房",selected:false },
{ id: 2, name: "大床房" ,selected:false },
{ id: 3, name: "三人房",selected:false },
{ id: 4, name: "单人房",selected:false }
];
this.setData({
fang_list
})
},
// 点击房
click_fang(e) {
const {
index
} = e.currentTarget.dataset;
const {
fang_list
} = this.data;
const item = fang_list[index];
const isSelected = item.selected;
// 更新选中状态
fang_list[index].selected = !isSelected;
this.setData({
fang_list
});
}, async load_project() {
var obj = {};
obj.page = 1;
obj.limit = 100;
project_list(obj).then(res => {
let projectList = res.data.data || [];
projectList.unshift({
id: 0, // 空字符串
name: "全部", // 显示文字
selected: true
});
this.setData({
project_list: projectList
})
}).catch(err => {
this.setData({
loading: false
});
console.error('网络失败', err);
});
},站长微信:xiaomao0055
站长QQ:14496453