zoukankan      html  css  js  c++  java
  • 小程序checkbox

    // subpackageA/pages/invoiceManage/addInvoice/addInvoice.js
    const Util = require('../../../../utils/util.js');
    const app = getApp()
    const {
      regeneratorRuntime
    } = global
    
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        favorites: [
          {value: 'USA', name: '美国'},
          {value: 'CHN', name: '中国', checked: 'true'},
          {value: 'BRA', name: '巴西'},
          {value: 'JPN', name: '日本'},
          {value: 'ENG', name: '英国'},
          {value: 'FRA', name: '法国'}
        ],
        haseChecked:[],
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        if(options.gender){
          this.setData({
            gender:options.gender
          })
        }
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      alert(title, options = {}) {
        wx.showToast({ icon: 'none', title: title, ...options })
      },
      // 保存
      async saveInfor() {
        if(this.data.gender!='0'&&this.data.gender!='1'){
          return
        }
        let params = {
          gender:this.data.gender
        }
        let res = await Util.request('/customer/invoice/assistant/create', params, true)
        console.log('添加保存发票:::', res)
        if (res) {
          wx.showToast({
            title: '保存成功',
            mask: true
          })
          setTimeout(() => {
            wx.navigateBack({
              delta: 1,
            })
          }, 1500);
        }
      },
      checkboxChange(e) {
        console.log('checkbox发生change事件,携带value值为:', e.detail.value)
        const favorites = this.data.favorites
        const values = e.detail.value
        let haseChecked=[]
        for (let i = 0, lenI = favorites.length; i < lenI; ++i) {
          favorites[i].checked = false
    
          for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
            if (favorites[i].value === values[j]) {
              favorites[i].checked = true
              haseChecked=favorites
              break
            }
          }
        }
    
        console.log(values)
        this.setData({
          favorites,
          haseChecked:values
        })
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      }
    })

    wxml

    <view class="beverage-box">
      <checkbox-group bindchange="checkboxChange">
        <label class="beverage-con beverage-con-border weui-cell weui-check__label" wx:for="{{favorites}}" wx:key="{{item.value}}">
          <view class="weui-cell__bd">{{item.name}}</view>
          <view class="weui-cell__hd">
            <checkbox value="{{item.value}}" checked="{{item.checked}}"/>
          </view>
        </label>
      </checkbox-group>
    
    </view>
    <view class="btns {{haseChecked.length>0?'':'disableBtn'}}">
      <view class="btn" bindtap="saveInfor" >保存</view>
    </view>

    wxss

    /* subpackageA/pages/invoiceManage/addInvoice/addInvoice.wxss */
    .section {
      padding: 20rpx 0 0 0;
      margin-bottom: 102rpx;
    }
    
    .section .title {
      font-size: 30rpx;
      color: #333;
      margin-bottom: 20rpx;
    }
    
    .o-btn-group {
      display: flex;
      align-items: center;
    
    }
    
    .o-btn-group .w-btn {
      margin-right: 15rpx;
    }
    
    .o-btn-group .o-btn {
      background: #ffeceb;
    }
    
    .clear {
       40rpx;
      height: 40rpx;
      padding: 12rpx;
    }
    
    .submit-btn {
      margin: 50rpx 30rpx
    }
    
    .jd-cell-more {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10rpx 0;
      padding-top: 24rpx;
      box-sizing: border-box;
      height: 88rpx;
      box-sizing: border-box;
    }
    
    .btns {
       100%;
      text-align: center;
    }
    
    .btn {
       660rpx;
      height: 90rpx;
      line-height: 90rpx;
      background: linear-gradient(270deg, #F80000 0%, #FF4E18 100%);
      border-radius: 45rpx;
      font-size: 30rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #FFFFFF;
      text-shadow: 0px 4rpx 10rpx rgba(248, 0, 0, 0.2);
      margin: 0 auto;
    }
    .beverage-box{
      background: #ffffff;
      border-radius: 10rpx;
      margin:20rpx 20rpx 100rpx 20rpx;
    }
    .beverage-con{
      margin:0 20rpx;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      height: 100rpx;
      justify-content: space-between;
    }
    .beverage-con-border{
      border-bottom: 2rpx solid #F1F1F1;
    }
    .beverage-con-cell{
      justify-content: space-between;
      display: flex;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 28rpx;
       100%;
    }
    .beverage-con-cell input{
       100%;
    }
    .name-tips{
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 24rpx;
      margin-bottom: 82rpx;
      padding-left: 40rpx;
    }
    .disableBtn{
      opacity: 0.3;
    }
    .beverage-text{
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 28rpx;
    }
  • 相关阅读:
    Leetcode 50.Pow(x,n) By Python
    Leetcode 347.前K个高频元素 By Python
    Leetcode 414.Fizz Buzz By Python
    Leetcode 237.删除链表中的节点 By Python
    Leetcode 20.有效的括号 By Python
    Leetcode 70.爬楼梯 By Python
    Leetcode 190.颠倒二进制位 By Python
    团体程序设计天梯赛 L1-034. 点赞
    Wannafly挑战赛9 C-列一列
    TZOJ Start
  • 原文地址:https://www.cnblogs.com/shuihanxiao/p/15041858.html
Copyright © 2011-2022 走看看