小程序模仿订单多选删除

最新推荐文章于 2023-10-08 12:02:15 发布
最新推荐文章于 2023-10-08 12:02:15 发布
阅读量882 收藏 4
点赞数
分类专栏： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44234882/article/details/88171505
版权

小程序模仿订单多选删除

在这里插入图片描述
二话不说上代码
wxml

<block wx:if="{{boolean==true}}">
<view class='header1'>
  <view class='header'>
    <view class='header_con flex_between'>
      <view class='left'>
        共计{{list.length}}个设备
      </view>
      <view class='right flex_end'>
        <view wx:if="{{!management_good}}" class='flex_center' bindtap='management'>
          编辑
        </view>
        <view wx:if="{{management_good}}" class='flex_center' bindtap='finish_management'>
          完成
        </view>
      </view>
    </view>
  </view>
</view>
<view class='onlinechoose'>

  <view class='hotel_list flex_center' wx:for="{{list}}" wx:key="{{index}}" wx:for-item="i" data-id="{{index}}" bindtap='select'>
    <view class='zrf'>
      <view id='banner'>
        <view id='a'>
          <view wx:if="{{management_good}}" class='lefts'>
            <block wx-if="{{!i.checked}}">
              <view class='icon_none'></view>
            </block>
            <block wx-if="{{i.checked}}">
              <icon type="success" size="22" color="red" />
            </block>
           </view>
        </view>
        <view id='b'>
          <text>设备编号：{{list[index].deviceid}}\n</text>
          <text decode="true">信 &nbsp;号&nbsp;源：中国电信NB-IOT\n</text>
          <text decode="true">区&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;域： {{list[index].deployment}}\n</text>
          <text>详细地址：{{list[index].location}}\n</text>
        </view>
        <view id='c'>
          <text style="color:{{list[index].colors}}">{{list[index].fireAlarmdeviceStatus}}</text>
        </view>
      </view>
      <view id='flot'>
        <view id='d'>
          <text>安装位置：{{list[index].dLocation}}</text>
        </view>
        <view id='e'>
          <image mode='scaleToFill' style=" height: 40rpx; width: 40rpx;" src='../../../images/zy4-sb-001.png'></image>
        </view>
      </view>
    </view>
  </view>
</view>
<view class='bottom flex_between' wx:if="{{management_good}}">
  <view class='left flex_start'>
    <block wx:if="{{select_all}}">
      <view bindtap='select_none' class='flex_start'>
        <icon type="success" size="22" color="red" />
        <view>
          取消全选
        </view>
      </view>
    </block>
    <block wx:if="{{!select_all}}">
      <view bindtap='select_all' class='flex_start'>
        <view class='select_none'>
        </view>
        <view>
          全选
        </view>
      </view>
    </block>
  </view>
  <view class='right flex_end'>
    <view style='text-align:right'>
      <view class='all'>
        共选中{{middlearr.length}}件设备
      </view>
    </view>
    <view bindtap='deleteitem' class='sure'>
      删除
    </view>
  </view>
</view>
</block>
  <block wx:elif="{{boolean==false}}">
    <view class="bg_red">
        <view id='null'>
    <image src='../../../images/zhu-2.png' style=' width: 200rpx;height: 200rpx;'></image>
    <text style='color:#000'>\n</text>
    <text style='color:#000'>对不起\n</text>
    <text style='color:#ccc'>当前暂无场所设备</text>
  </view>
  </view>
  </block>

js页面

var app = getApp()
var website = app.globalData.website;
Page({
  data: {
    
    title_disabled: true,//控制修改表头名字
    management_good: false,
    select_all: false,
    middlearr: [],
    list: [],
    page: 1,
    aa: [],
  },
  onShow: function () {
    this.data.page = 1;
    this.data.aa = [];
    this.selectgetdevice();
  },

  selectgetdevice:function(){
      var thit = this;
      var userid = app.globalData.id;
      var token = app.globalData.token;
      var getsite = app.globalData.getsite;
      var page=String(this.data.page)
      wx.request({
        url: website + 'getdevice',
        method: 'POST',
        data: {

          userid: userid,
          page: page,
        },
        header: {
          'token': token,
          'content-type': 'application/json' // 默认值
        },
        success: (res) => {
          console.log(res.data)
          let list = res.data.object
          if (res.data.message == "ok") {
            var boolean = true

            for (var i = 0; i, i < list.length; i++) {
              list[i].checked = false

              var fireAlarm = res.data.object[i].fireAlarm;
              var deviceStatus = res.data.object[i].deviceStatus;

              if (fireAlarm == 1 && deviceStatus == 8) {
                //console.log("火警+故障" + res.service.data.deviceId)
                list[i].fireAlarmdeviceStatus = '火警'
                list[i].colors = '#F51A05'
                thit.setData({
                  list: list,
                })

              } else if (deviceStatus != 8 && fireAlarm != 1) {
                //console.log("正常+正常" + res.service.data.deviceId)
                list[i].fireAlarmdeviceStatus = '正常'
                list[i].colors = '#477BFC'
                thit.setData({
                  list: list,
                })

              } else if (deviceStatus != 8 && fireAlarm == 1) {
                //console.log("火警+正常" + res.service.data.deviceId)
                list[i].fireAlarmdeviceStatus = '火警'
                list[i].colors = '#F51A05'
                thit.setData({
                  list: list,
                })

              } else if (deviceStatus == 8 && fireAlarm != 1) {
                //console.log("故障+正常" + res.service.data.deviceId)
                list[i].fireAlarmdeviceStatus = '故障'
                list[i].colors = '#E88400'
                thit.setData({
                  list: list,
                })
              }
              this.data.aa.push(list[i]);
            }
          } else {
            if (this.data.page > 1) {
              var boolean = true
            } else {
              var boolean = false
            }
          }

          thit.setData({
            list: this.data.aa,
            boolean: boolean,
          })
        }
      })
  
  },



  // 改变类目的名字
  change_classname: function () {
    let that = this;
    that.setData({
      title_disabled: !that.data.title_disabled,
    });
    //  这里自动获取焦点
  },
  finish_classname: function () {
    let that = this;
    that.setData({
      title_disabled: !that.data.title_disabled,
    })
  },
  // 管理商品
  management: function () {
    let that = this;
    that.setData({
      management_good: true,
    })
  },
  finish_management: function () {
    let that = this;
    that.setData({
      management_good: false,
    })
  },
  // 选择
  select: function (e) {
    var that = this;
    let arr2 = [];
    if (that.data.management_good == false) {
      return;
    } else {
      var arr = that.data.list;
      var index = e.currentTarget.dataset.id;
      arr[index].checked = !arr[index].checked;
      console.log(arr);

      for (let i = 0; i < arr.length; i++) {
        if (arr[i].checked) {
          arr2.push(arr[i])
        }
      };
      that.setData({
        list: arr,
        middlearr: arr2
      })
    }
  },
  // 删除
  deleteitem: function () {
    var that = this;
    let arr = that.data.list;
    let arr2 = [];
    console.log(arr);
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].checked == true) {
        var id=arr[i].id
        console.log("11111111+++"+id)
        var thit = this;
        var token = app.globalData.token;
        wx.request({
          url: website + 'deletedevice',
          method: 'POST',
          data: {
            id: id,
            page: "1",
          },
          header: {
            'token': token,
            'content-type': 'application/json' // 默认值
          },
          success: (res) => {
            console.log(res.data)

          }
        })

      } else if (arr[i].checked == false){
        arr2.push(arr[i]);
      }
    }
    that.setData({
      list: arr2,
      middlearr: []
    })
  },
  // 全选
  select_all: function () {
    let that = this;
    that.setData({
      select_all: !that.data.select_all
    })
    if (that.data.select_all) {
      let arr = that.data.list;
      let arr2 = [];
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].checked == true) {
          arr2.push(arr[i]);
        } else {
          arr[i].checked = true;
          arr2.push(arr[i]);
        }
      }
      that.setData({
        list: arr2,
        middlearr: arr2
      })
    }
  },
  // 取消全选
  select_none: function () {
    let that = this;
    that.setData({
      select_all: !that.data.select_all
    })
    let arr = that.data.list;
    let arr2 = [];
    for (let i = 0; i < arr.length; i++) {
      arr[i].checked = false;
      arr2.push(arr[i]);
    }
    that.setData({
      list: arr2,
      middlearr: []
    })
  },
    /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    var that = this
    console.log(that.data.item.length)
    if (that.data.aa.length == that.data.page * 10) {
      that.data.page = that.data.page + 1
      this.selectgetdevice();
    }

  },
})

wxss页面

.zrf {
  position: relative;
  width: 100%;
  height: 310rpx;
  display: inline-block;
  box-shadow: 0px 2px 5px 5px #ccc;
  border-radius: 20rpx;
}

#banner {
  border-bottom: 1px #ccc solid;
  width: 100%;
  height: 240rpx;
}

#flot {
  width: 100%;
  height: 60rpx;
}

#a {
  width: 40rpx;
  height: 40rpx;
  margin-top: 5px;
  margin-left: 30rpx;
}

#b {
  width: 530rpx;
  height: 160rpx;
  margin-top: 10rpx;
  margin-left: 30rpx;
  float: left;
  font-size: 26rpx;
}

#b text {
  margin-top: 5rpx;
  word-break: break-all;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

#c {
  width: 60rpx;
  height: 40rpx;
  margin-top: 10rpx;
  margin-left: 30rpx;
  float: right;
  margin-right: 30rpx;
  font-size: 26rpx;
  text-align: center;
}

#d {
  width: 530rpx;
  height: 40rpx;
  margin-top: 10rpx;
  margin-left: 30rpx;
  float: left;
  font-size: 26rpx;
}

#d text {
  word-break: break-all;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

#e {
  width: 40rpx;
  height: 40rpx;
  margin-top: 10rpx;
  margin-left: 30rpx;
  float: right;
  margin-right: 30rpx;
}

.header1 {
  background-color: #f5f5f5;
}

.header2 {
  background-color: #fff;
}

.header {
  width: 100%;
  height: 80rpx;
  border-bottom: 1rpx solid #d6d6d6;
}

.header .header_con {
  width: 700rpx;
  height: 80rpx;
  margin: 0 auto;
  color: #333;
  font-size: 30rpx;
}

.header .header_con image {
  width: 44rpx;
  height: 44rpx;
}

.header .header_con .right {
  color: #ff4965;
}

.bottom {
  width: 100%;
  height: 100rpx;
  border-top: 1rpx solid #d6d6d6;
  background-color: #fff;
  position: fixed;
  left: 0rpx;
  bottom: 0rpx;
}

.bottom .left {
  margin-left: 25rpx;
}

.bottom .left .select_none {
  width: 40rpx;
  height: 40rpx;
  border: 1rpx solid #d6d6d6;
  border-radius: 50%;
}

.bottom .right .all {
  color: #ff830f;
  font-size: 26rpx;
}

.bottom .right .gray {
  color: #666;
  font-size: 22rpx;
}

.bottom .right .sure {
  margin-left: 22rpx;
  width: 220rpx;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  background-color: #ff4965;
  color: #fff;
}

/*列表*/

.onlinechoose {
  width: 750rpx;
  margin-top: 0rpx;
  background-color: #fff;
  font-size: 32rpx;
}

.onlinechoose .hotel_list {
  width: 750rpx;
  height: 360rpx;
  background-color: #fff;
}

.onlinechoose .hotel_list .icon_none {
  width: 40rpx;
  height: 40rpx;
  border: 1rpx solid #d6d6d6;
  border-radius: 50%;
}

.onlinechoose .hotel_list .list_cons {
  width: 700rpx;
  height: 200rpx;
}

.onlinechoose .list_cons .lefts {
  width: 80rpx;
}

.onlinechoose .list_cons image {
  width: 200rpx;
  height: 200rpx;
  margin-right: 25rpx;
}

.list_cons .right {
  width: 395rpx;
  height: 200rpx;
}

.list_cons .right .name {
  font-size: 32rpx;
  color: #333;
  font-weight: 700;
  letter-spacing: 3rpx;
  margin-bottom: 20rpx;
}

.list_cons .right .list1 {
  margin-bottom: 17rpx;
}

.list_cons .right .list1 .condition1 {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 15rpx;
}

.list_cons .right .list1 .condition2 {
  font-size: 24rpx;
  color: #999;
}

.list_cons .right .list1 .act {
  color: #2d8622;
}

.list_cons .right .list1 .r {
  font-size: 24rpx;
  color: #ff4965;
}

.list_cons .right .list1 .big {
  font-size: 32rpx;
}

.list_cons .right .lists2 {
  height: 36rpx;
  line-height: 36rpx;
  font-size: 22rpx;
}

.list_cons .right .lists2 .left {
  width: 162rpx;
  text-align: center;
  color: #ff4965;
  border: 1rpx solid #ff4965;
  box-sizing: border-box;
  border-radius: 5rpx;
}

.list_cons .right .lists2 .right2 {
  color: #999;
}

.flex_center {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
}

.flex_between {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
}

.flex_start {
  display: flex;
  display: -webkit-flex;
  justify-content: flex-start;
  align-items: center;
}

.flex_end {
  display: flex;
  display: -webkit-flex;
  justify-content: flex-end;
  align-items: center;
}

#null {
  font-size: 30rpx;
  padding-top: 300rpx;
  text-align: center;
}
表白你
关注
专栏目录
小程序 购物车 复选框 删除商品
qq_41183241的博客
11-30 732
goods_delete:function(){ let goods = this.data.goods; //商品数组 let index = -1; //确定商品下标 let delnum = 0; // 删除商品的数量 for(let i = 0;i<goods.length;i++){ // 先循环商品数组取得数值 if(goods[...
模仿JD商城微信小程序源码
07-26
这个购物商城小程序源码是一个基于微信小程序的纯前端项目，旨在提供一个学习和参考的资源。它包含了购物商城的基本功能，如商品展示、购物车管理、订单处理等。 此源码适用于对微信小程序开发感兴趣的初学者和...
微信小程序实现多选删除列表数据功能示例
10-17
主要介绍了微信小程序实现多选删除列表数据功能,涉及微信小程序列表数据读取、显示、删除等相关操作技巧,需要的朋友可以参考下
微信小程序多项选择与删除功能
weixin_43818835的博客
04-17 3367
废话不多数直接上代码！这是你们希望看到的吧，其实我也是懒，懒得想去说什么了。 wxml代码： <view class="report-reason-list" > <text wx:for = "{{items}}" wx:key="{{index}}" data-selected="{{index}}" class="{{isSelecte[index].selec...
小程序的全选，多选
weixin_43791884的博客
10-26 854
小程序的单选多选全选
小程序--删除订单列表
Acitylion的博客
05-28 6721
去付款跟删除按钮一样 <view class="go_pay" bindtap='bindDeleteOrder' data-id='{{item.order_id}}' wx:if='{{item.order_state == 0 || item.order_state == 50}}'> 删除订单 </vie...
微信小程序模仿朋友圈实现（点赞、评论等）.zip
05-05
微信小程序模仿朋友圈实现： 朋友圈发布 朋友圈点赞 朋友圈评论 朋友圈回复评论 点赞撤销 评论删除 已发布朋友圈删除 评论内容安全审核校验 微信小程序模仿朋友圈实现： 朋友圈发布 朋友圈点赞 朋友圈...
微信小程序-模仿QQ小程序
05-13
本项目“微信小程序-模仿QQ小程序”旨在通过模仿QQ小程序的界面和功能，帮助开发者学习和掌握微信小程序的开发技巧。 首先，我们需要了解微信小程序的基本结构。微信小程序由JSON、WXML、WXSS和JavaScript四部分...
模仿淘票票APP(微信小程序源代码)
05-06
模仿淘票票APP(微信小程序源代码)模仿淘票票APP(微信小程序源代码)模仿淘票票APP(微信小程序源代码)模仿淘票票APP(微信小程序源代码)模仿淘票票APP(微信小程序源代码)模仿淘票票APP(微信小程序源代码)模仿淘票票APP...
微信小程序_模仿拉钩招聘APP源代码(源代码+截图)
06-19
微信小程序_模仿拉钩招聘APP源代码(源代码+截图)微信小程序_模仿拉钩招聘APP源代码(源代码+截图)微信小程序_模仿拉钩招聘APP源代码(源代码+截图)微信小程序_模仿拉钩招聘APP源代码(源代码+截图)微信小程序_模仿拉钩...
微信小程序实现多选功能
12-02
本文为大家分享了微信小程序实现多选功能的具体代码，供大家参考，具体内容如下 代码： <!--hotblood_gongkao/pages/answer/answer.wxml--> <!-- content --> {{num + 1}}/{{quesyion.length}}{{question[num][0]}}
小程序多个选择框保存值demo
07-22
本demo是微信小程序不定个数的选择框的值的保存，修改，和展示。支持任意个数选择框的操作。可以运行，适合初学者学习。
微信小程序 多选功能
王光
09-13 5805
&lt;!--hotblood_gongkao/pages/answer/answer.wxml--&gt; &lt;!-- content --&gt; &lt;view class='answer-list'&gt; &lt;view class='answer-child'&gt; &lt;text class='answer-title'&gt;&lt;tex...
微信小程序多选，全选
最新发布
LiXiao_Lan的博客
10-08 519
微信小程序多选，全选。
微信小程序 多选————四选二
Faaaaaaq的博客
08-03 454
微信小程序 多选————四选二。
微信小程序：多选的实现
weixin_46001736的博客
04-19 962
微信小程序：多选的实现
小程序多选效果
Bright2017的博客
03-05 132
我的需求是多选，不管年级如何切换，只要是选择过的班级，最终拿到所有id <view class="sold_cents"> <view class="grade_data flex"> <view class="flex bot_grade"> <view>年级</view> <view>班级</view> </view> <view class=..
小程序删除列表&
qq_36437172的博客
07-24 2420
1.通过wx:for循环渲染列表页面，给列表或者某个按钮绑定catchtap='binddelete'事件 &lt;block wx:for="{{release}}" wx:key="{{index}}"&gt; &lt;view class="item" data-index='{{item.id}}' catchtap='binddelete'&gt; &lt;view cl...
Angular模仿微信小程序Swiper组件实践
本文主要介绍了如何在Angular项目中实现一个类似微信小程序中的swiper组件，以便在编写界面时提升效率。微信小程序的swiper组件提供了便捷的轮播和滑动列表功能，作者受到启发，决定利用Angular的组件能力和服务机制...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值