据房间Id是否存在,判断当前房间是否到期且实时更改颜色

重点代码展示:


 实现原理及说明:

1、通过getExpirationReminder() 方法中对接口返回的数据进行处理;

      首先,根据 res.data.data 获取到接口返回的数据数组。然后使用 map() 方法对数组进行遍历,对每个元素执行回调函数,并将返回值组成一个新的数组。从上述代码可知,回调函数是 (item) => item.houseId,代表对每个元素 item 提取出 houseId 属性的值作为新数组的元素。

 this.expiration = res.data.data.map(item => {
      return item.houseId
 });

       最终,将提取出的 houseId 组成的新数组赋值给 this.expiration,用于存储即将到期的房间的 houseId 值。


据房间Id是否存在,判断当前房间是否到期且实时更改颜色_第1张图片

2、样式的设置:

边框颜色:

      borderColor 属性根据 expiration.includes(item.houseId) 的结果来决定边框颜色。expiration.includes(item.houseId) 表示判断 this.expiration 数组中是否包含当前房间的 houseId 值(据后端返回到期的房间ID,若返回了到期的房间ID,边框将会变成红色),如果包含则返回 true,边框颜色为红色;若不包含则返回 false,边框颜色为白色。

背景颜色:

      backgroundColor 属性根据 item.huoseState == 1 的结果来决定背景颜色。item.huoseState 表示房间的状态,如果状态为 1,则背景颜色为绿色(#6aec6a),否则背景颜色为白色(#fff


 效果图展示:

        绿色的表示空闲的房间,红色边框的表示居住即将到期,白色的表示在租房间

据房间Id是否存在,判断当前房间是否到期且实时更改颜色_第2张图片

你可能感兴趣的:(vue.js,javascript,前端)