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;
    }
  • 相关阅读:
    每天一个linux命令(31): /etc/group文件详解
    每天一个linux命令(15):tail 命令
    每天一个linux命令(30): chown命令
    每天一个linux命令(22):find 命令的参数详解
    每天一个linux命令(23):Linux 目录结构
    每天一个linux命令(17):whereis 命令
    每天一个linux命令(18):locate 命令
    每天一个linux命令(34):du 命令
    每天一个linux命令(25):linux文件属性详解
    ThinkPad E420功能键和快捷键 以及 Fn和Ctrl键功能切换的设置,插入鼠标后, 关闭触摸板
  • 原文地址:https://www.cnblogs.com/shuihanxiao/p/15041858.html
Copyright © 2011-2022 走看看