• 周四. 8月 11th, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

小程序checkbox

admin

11月 28, 2021
// 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;
}

发表评论

您的电子邮箱地址不会被公开。