小程序多选自定义组件（附带缓存）

组件js代码

// component/product/product.js
var res = require('../../utils/util.js');
// var car = require('utils/cart.js');
var app = getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    load:{
      type:String,
      value:false,
      observer: function(newVal) {
        var _this = this;
        _this.setData({'newVal':newVal,input:null})
        if(newVal!='add'){
          if(wx.getStorageSync(''+newVal+'')){
            _this.setData({
              dataList:wx.getStorageSync(''+newVal+''),
            });
          }else{
            _this.getProduct('breakfast');
          }
        }else{
          if(wx.getStorageSync(''+newVal+''+_this.data.type+'')){
            _this.setData({
              dataList:wx.getStorageSync(''+newVal+''+_this.data.type+''),
            });
          }else{
            _this.getProduct('add')
          }
        }
      }
    },
    type:{
      type:String,
      value:false,
      observer: function(newVal) {
        var _this = this;
        console.log('newVal',newVal)
        // _this.setData({
        //   newVal:newVal
        // })
        
      }
    },
    show:{
      type:Boolean,
      value:false,
      observer: function(newVal) {
        var _this = this;
        _this.setData({
          show:newVal
        })
        if(_this.data.newVal!='add'){
          if(wx.getStorageSync(''+_this.data.newVal+'')){
            _this.setData({
              dataList:wx.getStorageSync(''+_this.data.newVal+''),
            });
          }else{
            for(var i=0;i<_this.data.dataList.length;i++){
              _this.data.dataList[i]['select'] = 0;//初始化选择状态，默认不选中
              _this.data.dataList[i]['number'] = 0;//初始化选择的菜的数量，默认0
              _this.data.dataList[i]['key'] = 'g';//初始化选择的菜的单位，默认‘g’
            }
            _this.setData({
              dataList:  _this.data.dataList,
            });
          }
        }else{
          if(wx.getStorageSync(''+_this.data.newVal+''+_this.data.type+'')){
            _this.setData({
              dataList:wx.getStorageSync(''+_this.data.newVal+''+_this.data.type+''),
            });
          }else{
            for(var i=0;i<_this.data.dataList.length;i++){
              _this.data.dataList[i]['select'] = 0;//初始化选择状态，默认不选中
              _this.data.dataList[i]['number'] = 0;//初始化选择的菜的数量，默认0
              _this.data.dataList[i]['key'] = 'g';//初始化选择的菜的单位，默认‘g’
            }
            _this.setData({
              dataList:  _this.data.dataList,
            });
          }
        }
          
          
      }
    },
    
  },
  /**
   * 组件的初始数据，

   * 回调到页面的数据如下
   * breakfast:早餐
   * lunch:午餐
   * dinner:晚餐
   * addbreakfast:早餐加餐
   * addlunch:午餐加餐
   * adddinner:晚餐加餐
   */
  data: {

  },
  /**
   * 组件的方法列表
   */
  methods: {
    getProduct:function(productAttrTag){
      var _this = this;
      res.request('POST', '/json/product.php', {
        _3rdSession: app.globalData._3rdSession,
        action: 'list',
        pageSize:200,
        productState:1,
        productAttrTag: productAttrTag,
        productOrderBy:'productOrder.asc',
      }, function(e) {
        var newArr = [];
        for(var i=0;i<e.data.info.rows.length;i++){
          e.data.info.rows[i]['select'] = 0;//初始化选择状态，默认不选中
          e.data.info.rows[i]['number'] = 0;//初始化选择的菜的数量，默认0
          e.data.info.rows[i]['key'] = 'g';//初始化选择的菜的单位，默认‘g’
          if(e.data.info.rows[i].productName=='无'||e.data.info.rows[i].productName=='其他'){
            e.data.info.rows[i]['key'] = ''
            e.data.info.rows[i]['number'] = '';//初始化选择的菜的数量，默认0
          }
          
        }
        newArr = e.data.info.rows;
        _this.setData({
          dataList: newArr,
          dataListAll: newArr,
        });
      })
    },
    search:function(e){
      var _this = this;
      var newListData = [];
      newListData = _this.data.dataList.filter((item) => {
        return item.productName.indexOf(e.detail.value)>=0;
      }); 
      _this.setData({
        dataList:newListData
      })
      if(!e.detail.value||e.detail.value==''){
        _this.setData({
          dataList:_this.data.dataListAll
        })
      }
    },
    arrow:function(e){
      var _this = this;
      if(e.currentTarget.dataset.id==_this.data.arrow){
        _this.setData({arrow:0})
      }else{
        _this.setData({arrow:e.currentTarget.dataset.id})
      }
    },
    //选择食谱
    select:function(e){
      var _this = this;
      if(_this.data.dataList[e.currentTarget.dataset.index]['select']==0){
        if(_this.data.dataList[e.currentTarget.dataset.index].productName=='无'){
          var newArr = [];
          for(var i=0;i<_this.data.dataList.length;i++){
            _this.data.dataList[i]['select'] = 0;//初始化选择状态，默认不选中
            _this.data.dataList[i]['number'] = 0;//初始化选择的菜的数量，默认0
            _this.data.dataList[i]['key'] = 'g';//初始化选择的菜的单位，默认‘g’
            if(_this.data.dataList[i].productName=='无'||_this.data.dataList[i].productName=='其他'){
              e.currentTarget.dataset.key = '';
              _this.data.dataList[i]['key'] = ''
              _this.data.dataList[i]['number'] = '';//初始化选择的菜的数量，默认0
            }
          }
        }
        _this.data.dataList[e.currentTarget.dataset.index]['select'] = 1;
      }else{
        _this.data.dataList[e.currentTarget.dataset.index]['select'] = 0;
         _this.data.dataList[e.currentTarget.dataset.index]['number'] = 0;
      }
      _this.data.dataList[e.currentTarget.dataset.index]['key'] = e.currentTarget.dataset.key;
      _this.setData({
        dataList:_this.data.dataList
      })
    },
    //隐藏组件
    cancel:function(){
      var _this = this;
      var pages = getCurrentPages();
        //获取上一个页面的所有的方法和data中的数据，父页面显示状态
      var lastpage = pages[pages.length - 1];
      lastpage.setData({
        ['show']:false
      })
      // 当前插件显示状态
      _this.setData({
        dataList:_this.data.dataListAll,
        show:false
      })
    },
    //食谱选择确定
    sure:function(){
      var _this = this;
      var string = '';
      for(var i=0;i<_this.data.dataList.length;i++){
        if(_this.data.dataList[i]['select']==1){
          if(_this.data.dataList[i]['number']==0){
            if(_this.data.dataList[i].productName=='无'){
             
            }else{
              wx.showToast({
                title:'请输入'+_this.data.dataList[i].productName+'数量',
                icon:'none'
              })
              return false; 
            }
          }
          if(_this.data.dataList[i].productName=='无'||_this.data.dataList[i].productName=='其他'){
            _this.data.dataList[i]['key'] = '';
          }
          string = string+ _this.data.dataList[i].productName+ _this.data.dataList[i].number +_this.data.dataList[i].key+' , '
        }
      }

      if(_this.data.newVal!='add'){
        wx.setStorageSync(''+_this.data.newVal+'', _this.data.dataList)
      }else{
        wx.setStorageSync(''+_this.data.newVal+''+_this.data.type+'', _this.data.dataList)
      }

      string = string.substring(0, string.lastIndexOf(','));
      string = string.replace('其他','');
      var pages = getCurrentPages();
      //获取上一个页面的所有的方法和data中的数据
      var lastpage = pages[pages.length - 1]
      //改变上一个页面中的data中的数据
      var name = _this.data.newVal;
      if(_this.data.newVal=='add'){ //加餐
        var name1 = name+''+_this.data.type
        lastpage.setData({
          ['show']:false,
          [name1]: string,
        })
      }else{
        lastpage.setData({
          ['show']:false,
          [name]: string,
        })
      }
      _this.setData({
        show:false
      })

      if(_this.data.newVal=='add'){
        
      }else{
        
      } 
    },
    //食谱数量输入
    daka_weight_input:function(e){
      var _this = this;
      _this.data.dataList[e.currentTarget.dataset.index]['number'] = e.detail.value;
      _this.setData({
        input:e.detail.value,
        dataList:_this.data.dataList
      })
    }
  }
})

组件json

{
  "component": true,
  "usingComponents": {}
}

组件wxml

<view wx:if="{{show}}" class="contentBox" style="">
  <view class="contentBox-shadow" bindtap="cancel" style=""></view>
  <view class="contentBox-contant" style="">
    <view wx:if="{{newVal=='breakfast'}}" class="contant-title" style="">早餐食谱</view>
    <view wx:if="{{newVal=='lunch'}}" class="contant-title" style="">午餐食谱</view>
    <view wx:if="{{newVal=='dinner'}}" class="contant-title" style="">晚餐食谱</view>
    <view wx:if="{{newVal=='add'}}" class="contant-title" style="">加餐食谱</view>
    <!-- 搜索 -->
    <view class="contant-input " style="">
      <input style="text-align: center;" class="" placeholder-style="color:#666;text-align:center;font-size:28rpx;" bindinput="search" value="" name="weight" placeholder="搜索"/>
    </view>

    <!-- 项目 -->
    <scroll-view scroll-y class="contant-itemBox" style="">
      <view class="contant-item" wx:for="{{dataList}}" style="">
        <view class="contant-item-one" style="">
          <view class="contant-item-one-icon" bindtap="select" data-index="{{index}}" data-id="{{item.productId}}" data-name="{{item.productName}}" data-key="{{item.productKeyWord?item.productKeyWord:'g'}}" style="">
            <image mode="aspectFill" src="{{item.select==1?'/image/new/select_1.png':'/image/new/select.png'}}" class="" style=""></image>
          </view>
          <view wx:if="{{item.productName!='无'}}" class="contant-item-one-label" style="{{newVal=='add'?'flex:4;':''}} {{item.productName=='其他'?'flex:1;':''}}">{{item.productName}}</view>
          <view wx:else class="contant-item-one-label" style="{{newVal=='add'?'flex:6;':''}}">{{item.productName}}</view>
          <view wx:if="{{item.productName!='无'}}" class="contant-item-one-input " style="{{newVal=='add'?'flex:2;margin-right: 20rpx;':''}} {{item.productName=='其他'?'flex:6;':''}}">
            <block wx:if="{{item.productName=='其他'}}">
              <input style="" data-index="{{index}}" class="" placeholder-style="color:#666;font-size:28rpx;" bindinput="daka_weight_input" value="{{item.number==0?'':item.number}}"placeholder="请输入"/>
            </block>
            <block wx:else>
              <input style="" data-index="{{index}}" class="" placeholder-style="color:#666;font-size:28rpx;" bindinput="daka_weight_input" value="{{item.number==0?'':item.number}}"placeholder="请输入"/>
              <view class="contant-item-one-input-g" style="display: flex;justify-content: center;align-items: center;margin-right: 10rpx;">{{item.productKeyWord?item.productKeyWord:'g'}}</view>
            </block>
          </view>

          <view wx:if="{{newVal!='add'}}" class="right" style="">
            <image bindtap="arrow" data-id="{{item.productId}}" wx:if="{{item.productBrief}}" mode="aspectFill" src="/image/new/rightG.png" class="{{arrow==item.productId?'arrow-select':''}}" style=""></image>
          </view>
        </view>
        <view wx:if="{{item.productCode}}" class="contant-item-two" style="">
          <view class="" style="">{{item.productCode}}</view>
        </view>
        <view wx:if="{{item.productBrief}}"  class="contant-item-three" style="{{arrow==item.productId?'display: block;':''}}">
          <view class="" style="">{{item.productBrief}}</view>
        </view>
      </view>
      <view class="" style="width: 100%;height: 50rpx;"></view>
    </scroll-view>

    <!-- 取消，确认 -->
    <view class="submit" style="">
      <view class="border-right" bindtap="cancel" style="">取消</view>
      <view class="" bindtap="sure" style="">确定</view>
    </view>
  </view>
</view>

wxss

.contentBox{width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 1000;}
.contentBox-shadow{width: 100%;height: 25%;background: rgba(0,0,0,0.5);}
.contentBox-contant{width: 100%;height: 75%;background: #fff;}

.contant-input{width: 88%;border-radius: 60rpx;background: rgb(245,245,245);margin: auto;padding:10rpx 5rpx;font-size: 30rpx;margin-top: 25rpx;}
.contant-input input{width: 90%;height: 100%;background: none;margin:auto;}
.contant-title{width: 100%;text-align: center;padding-top: 40rpx;font-size: 30rpx;}
.contant-itemBox{width: 88%;height: 70%;margin: auto;margin-top: 25rpx;overflow-x: hidden;overflow-y: scroll;}

.contant-item{width: 100%;background: rgb(245,245,245);padding:20rpx 10rpx;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-moz-box-orient: vertical;-moz-box-direction: normal;-ms-flex-direction: column;flex-direction: column;margin-bottom: 25rpx;}
.contant-item-one{-webkit-box-flex:1.5;-moz-box-flex:1.5;-ms-flex:1.5;flex:1.5;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-moz-box-align: center;-ms-flex-align: center;align-items: center;}
.contant-item-one-icon{-webkit-box-flex:1;-moz-box-flex:1;-ms-flex:1;flex:1;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-moz-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-moz-box-align: center;-ms-flex-align: center;align-items: center;}
.contant-item-one-icon image{width: 45rpx;height: 45rpx;}
.contant-item-one-label{-webkit-box-flex:1.5;-moz-box-flex:1.5;-ms-flex:1.5;flex:1.5;font-size: 30rpx;}
.contant-item-one-input-g{font-size: 30rpx;color: #666;}
.contant-item-one-input{-webkit-box-flex:4;-moz-box-flex:4;-ms-flex:4;flex:4;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: flex;background: white;}
.contant-item-one-input input{width: 80%;margin-left: 5%;height: 60rpx;background: white;border-radius: 0;border:none;font-size: 30rpx;color: #333;}
.contant-item-two{-webkit-box-flex:1;-moz-box-flex:1;-ms-flex:1;flex:1;}
.contant-item-two view{font-size: 24rpx;color: #999;margin: 10rpx 0;margin-left: 12%;}
.contant-item-three{-webkit-box-flex:1.5;-moz-box-flex:1.5;-ms-flex:1.5;flex:1.5;display: none;}
.contant-item-three view{font-size: 28rpx;color: #6fd1a0;margin: 10rpx 0;margin-left: 12%;letter-spacing: 2rpx;margin-right:15rpx;}
.right{-webkit-box-flex:2;-moz-box-flex:2;-ms-flex:2;flex:2;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-box-pack: end;-moz-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;-webkit-box-align: center;-moz-box-align: center;-ms-flex-align: center;align-items: center;}
.right image{width: 50rpx;height: 50rpx;opacity:0.6;margin-right:20rpx;-webkit-transform: rotate(90deg);transform: rotate(90deg);}
.arrow-select{-webkit-transform: rotate(180deg)!important;transform: rotate(-90deg)!important;}

.submit{position: fixed;bottom: 0;left: 0;width: 100%;height: 100rpx;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: flex;background: white;}
.submit view{-webkit-box-flex:1;-moz-box-flex:1;-ms-flex:1;flex:1;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-moz-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-moz-box-align: center;-ms-flex-align: center;align-items: center;font-size: 30rpx;}
.border-right{border-right: 1rpx solid #eee}