支付宝小程序自定义下拉选择框统计总和模块

效果图-组件下载

 源码

<view class="pay">
  <view class="head">
    <view class="item">
      <view class="lt">
        <image mode="scaleToFill" src="/images/pay_fw_02.png"/>
        <text>房屋信息</text>
      </view>
      <view class="rt">
        <text>选择房屋 ></text>
      </view>
    </view>
    <view class="item02">
      <image mode="scaleToFill" style="width:100%;height:246rpx" src="/images/pay_banner_01.png"/>
      <view class="txt">
        <text>一期8栋 1120室</text>
        <text>北虹桥科技园8号楼-301</text>
      </view>
    </view>
  </view>
  <view class="ment">
    <view class="title">
      <image mode="scaleToFill" src="/images/pay_jf_03.png"/>
      <text>缴费项</text>
    </view>
    <view class="cont">
      <!-- 循环缴费项内容 -->
      <view class="box" a:for="{{payList}}" a:for-item="i" a:for-index="index1">
        <view class="ckt" onTap="choice" data-id="{{index1}}">
          <view class="lt" catchTap="select" data-ids="{{index1}}">
            <label>
              <!--<am-checkbox value="{{i.title}}" disabled="" checked="{{i.isCheck}}" onChange="onChange1" /> -->
              <am-checkbox value="{{i.title}}" disabled="" ctrlChecked="{{i.isCheck}}"/>
              <text>{{i.title}}</text>
            </label>
          </view>
          <view class="rt">
            <text>¥1200</text>
            <image mode="scaleToFill" src="{{i.isOpen ? '/images/back_icon_02.png' : '/images/back_icon_01.png'}}"/>
          </view>
        </view>
        <view class="checkList" a:for="{{i.children}}" a:for-item="j" a:for-index="index2" hidden="{{!i.isOpen}}">
          <label>
            <view class="lt" catchTap="checkList" data-idx1="{{index1}}" data-idx2="{{index2}}">
              <am-checkbox value="{{j.title}}" disabled="" ctrlChecked="{{j.check}}"/>
              <text>{{j.data}}</text>
            </view>
          </label>
          <view class="rt">
            <text>¥ {{j.money}}</text>
          </view>
        </view>
      </view>
      <!-- 循环缴费项内容-end -->
    </view>
  </view>
  <!-- 结算按钮 -->
  <view class="footer">
    <view class="lts" onTap="isAllChecked">
      <label>
        <am-checkbox value="1" disabled="" ctrlChecked="{{isAllChecked}}" />
        <text>全选</text>
      </label>
    </view>
    <view class="lt">
      <text>合计:</text>
      <text>￥{{sumChecked}}</text>
    </view>
    <view class="rt">
      去付款
    </view>
  </view>
</view>

Page({
  data: {
    isAllChecked: false,
    sumChecked: 0,//合计
    payList: [
      {
        isCheck: false,//标题按钮是否选择
        isOpen: true,//子项是否展开
        title: "物业费",
        sum: 1200,
        children: [
          {
            check: false,//按钮是否选择
            data: '2021.1-2021.3',
            money: 600,
          },
          {
            check: false,
            data: '2021.4-2021.6',
            money: 600,
          }
        ]
      },
      {
        isCheck: false,
        isOpen: false,
        title: "水费",
        sum: 1200,
        children: [
          {
            check: false,
            data: '2021.1-2021.3',
            money: 600,
          },
          {
            check: false,
            data: '2021.4-2021.6',
            money: 600,
          }
        ]
      }

    ]
  },
  onLoad() {
    this.sumChecked();
  },

  /**缴费项事件 */

  // 页面全选按钮事件
  isAllChecked(e) {
    let isAllChecked = !this.data.isAllChecked;
    console.log(isAllChecked);

    this.data.payList.forEach((item, index) => {
      item.isCheck = isAllChecked;
      item.children.forEach((items) => {
        items.check = isAllChecked;
      })
    })
    // 刷新数据
    this.setData({
      isAllChecked,
      payList: this.data.payList
    })
    this.sumChecked();//刷新合计

  },
  // 标题按钮全选事件
  select(e) {
    console.log(e, e.currentTarget.dataset.ids, '--获取全选项');
    // 更新数据
    this.data.payList.forEach((item, index) => {
      // console.log(item, index);
      if (index === e.currentTarget.dataset.ids) {
        item.isCheck = !item.isCheck;
        item.children.forEach(items => {
          items.check = item.isCheck;
        });
      }
    })

    // 刷新数据
    this.setData({
      payList: this.data.payList
    })

    this.sumChecked();//刷新合计
  },
  // 子项点击
  checkList(e) {
    console.log(e.currentTarget.dataset.idx1, e.currentTarget.dataset.idx2);
    let payList = this.data.payList;
    payList[e.currentTarget.dataset.idx1].children[e.currentTarget.dataset.idx2].check = !payList[e.currentTarget.dataset.idx1].children[e.currentTarget.dataset.idx2].check;
    this.setData({
      payList
    })
    this.sumChecked();//刷新合计
  },
  // 点击标题 改变 payList 是否展开
  choice(e) {
    console.log(e.currentTarget.dataset.id, '--获取点击序号');
    // 更新数据
    this.data.payList.forEach((item, index) => {
      // console.log(item, index);
      if (index === e.currentTarget.dataset.id) {
        item.isOpen = !item.isOpen;
      }
    })
    // 刷新数据
    this.setData({
      payList: this.data.payList
    })
  },

  // 计算合计函数方法
  sumChecked() {
    let sumRes = 0;
    this.data.payList.map((item) => {
      let res = item.children.reduce((s, items) => {
        // console.log(s, items);
        if (items.check == true) {
          return s + items.money;
        }
        return s;
      }, 0)
      sumRes += res;
    })
    // 刷新数据
    this.setData({
      sumChecked: sumRes
    })
  },

  /**缴费项事件-end */
});

json

  "usingComponents": {
    "am-checkbox": "mini-ali-ui/es/am-checkbox/index"
  }

page {
  background: #F6F6F7;
}

image {
  vertical-align: middle;
}

.pay {
  margin-bottom: 96rpx;
}

/* 头 */

.head {
  background: #FFFFFF;
}

.head .item {
  display: flex;
  justify-content: space-between;
  padding: 0 30rpx;
}

.head .item text, .ment .title text {
  font-size: 32rpx;
  font-weight: 500;
  color: #434650;
}

.head .item image, .ment .title image {
  width: 56rpx;
  height: 56rpx;
}

.head .item02 {
  position: relative;
}

.head .item02 .txt {
  position: absolute;
  top: 70rpx;
  left: 50rpx;
  display: flex;
  flex-direction: column;
  font-size: 40rpx;
  font-weight: 500;
  color: #4A4A4A;
}

.head .item02 .txt text:nth-child(2) {
  font-size: 26rpx;
  font-weight: 400;
  color: #9B9B9B;
  padding: 20rpx 0;
}

/* 缴费项 */

.ment {
  background: #fff;
  min-height: 600rpx;
}

.ment .title {
  padding: 10rpx 0 0 30rpx;
  height: 66rpx;
}

/* .ment .box{
  padding: 0 20rpx;
} */

.ment .box .ckt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 88rpx;
  background: #F6F6F9;
  border-bottom: 2rpx solid #E4E4E4;
}

.ment .box .ckt label {
  display: flex;
  align-items: center;
  padding-left: 30rpx;
}

.ment .box .ckt label text {
  padding-left: 20rpx;
  font-size: 28rpx;
  font-weight: 500;
  color: #333333;
}

.ment .box .ckt .rt {
  font-size: 28rpx;
  font-weight: 500;
  color: #ED3D3D;
  padding-right: 20rpx;
}

.ment .box .ckt .rt text {
  padding-right: 20rpx;
}

.ment .box .ckt .rt image {
  width: 40rpx;
  height: 40rpx;
}
.ment .box .checkList{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  margin: 0 30rpx;
  border-bottom: 2rpx solid #E4E4E4;
}

.ment .box .checkList label {
  display: flex;
  justify-content: space-between;
}

.ment .box .checkList label .lt {
  display: flex;
  align-items: center;
}

.ment .box .checkList label .lt text {
  font-size: 28rpx;
  color: #4A4A4A;
  padding-left: 20rpx;
}

.ment .box .checkList .rt {
  font-size: 28rpx;
  color: #4A4A4A;
}

/* 付款按钮 */

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  font-size: 28rpx;
  width: 100%;
  height: 96rpx;
  background: #FFFFFF;
}

.footer .lts {
  padding-left: 20rpx;
  font-size: 28rpx;
  color: #733EB9;
}

.footer .lts text {
  padding-left: 10rpx;
}

.footer .lts label {
  display: flex;
  align-items: center;
}

.footer .lt {
  padding-left: 30rpx
}

.footer .lt text:nth-child(1) {
  color: #333333;
}

.footer .lt text:nth-child(2) {
  font-size: 36rpx;
  font-weight: 500;
  color: #ED3D3D;
}

.footer .rt {
  width: 240rpx;
  height: 96rpx;
  background: #733EB9;
  line-height: 96rpx;
  font-size: 28rpx;
  font-weight: 500;
  color: #FFFFFF;
  text-align: center
}