类似于购物车_const mergedata = [] let map = {}-CSDN博客

本文链接：https://blog.csdn.net/qq_43495846/article/details/115324412

该博客详细介绍了在微信小程序中使用`wx:for`和数据绑定处理用户列表的展示，包括用户头像、名称、联系方式、消费数据等信息。同时，展示了如何通过`wx:if`条件渲染来切换选中状态，并提供了接口调用`fetchHttpData`获取用户数据。此外，还解释了如何在数据变更时更新用户列表，如`selectList`函数用于切换用户选中状态并同步到总数据列表。

摘要由CSDN通过智能技术生成

html代码

<view class="option" wx:for="{{userList}}" wx:key="index" hover-class="none" catchtap="click" data-type="list"
      data-id="{{item.kid}}">
      <view class="top">
        <image src="{{item.avatar}}" class="avatar"></image>
        <view class="info">
          <view class="name">{{item.kname}}</view>
          <view>{{item.mobile}}</view>
        </view>
        <view class="checkRadio">
          <image wx:if="{{item.checked}}" src="/packageW/res/icon_select.png"></image>
          <image wx:if="{{!item.checked}}" src="/packageW/res/icon_selects.png"></image>
        </view>
      </view>
      <view class="content">
        <view class="left">
          <image src="/packageW/res/bag_icon.png" class="limg"></image>
          <text class="textColor_gray6">消费次数：</text>
          <text>{{item.order_num}}次</text>
        </view>
        <view class="line"></view>
        <view class="right">
          <image src="/packageW/res/drill_icon.png" class="rimg"></image>
          <text class="textColor_gray6">消费金额：</text>
          <text>¥{{item.order_money}}</text>
        </view>
      </view>
      <view class="bottom">
        <text class="textColor_gray9">最后访问：</text>{{item.logtime}}</view>
    </view>

请求接口

fetchHttpData(p) {
    base.http.httpPost({
      loading: '加载中....',
      url: 'company/user/listuser',
      data: {
        p: p,
        keyword: this.data.keyword,
        num_type: this.data.num_type,
        order_num: this.data.order_num,
        order_money: this.data.order_money,
      },
      success: (res) => {
        this.clearData()
        if (p === 1) {
          this.data.userList = []
        }
        let {
          userAllList,
          nextData: userList
        } = mergeData(res.data.data)
        if (this.data.checkBtn) {
          userList.forEach(item => {
            item.checked = true;
            userAllList.push(item)
          })
        }
        this.setData({
          userList,
          userAllList,
          currentPage: res.data.current_page,
          lastPage: res.data.last_page,
          num: res.data.total,
        })
      }
    })
  }

还原之前的选择数据

//还原之前选择的数据
    const mergeData = (data = []) => {
      let userAllList = this.data.userAllList;
      let userList = this.data.userList
      let values = [...userList, ...data];
      let nextData = values.map(item => {
        let index = userAllList.findIndex(v => v.kid === item.kid);
        if (index > -1) {
          let allItem = userAllList[index];
          item.checked = allItem.checked;
        }
        return item
      });
      return {
        nextData,
        userAllList
      }
    }

操作数据

selectList(id, userList) {
    let index = userList.findIndex(item => item.kid === id);
    if (index > -1) {
      userList[index].checked = !userList[index].checked;
      userList[index].checked ? this.data.total += 1 : this.data.total -= 1;
    }
    const allIndex = this.data.userAllList.findIndex(item => item.kid === id);
    if (allIndex > -1) {
      userList[index].checked ? '' : this.data.userAllList.splice(allIndex, 1);
    } else {
      this.data.userAllList.push(userList[index])
    }
    this.data.total == this.data.num ? this.data.checkBtn = true : this.data.checkBtn = false;
    this.setData({
      userList: userList,
      userAllList: this.data.userAllList,
      total: this.data.total,
      checkBtn: this.data.checkBtn
    })
  }