小程序点击之点击添加删除效果

<!--标签管理页面-->
<view class='label-admin-wrap'>

  <view wx:for="{{list}}" wx:for-item="item" class='dot-wrap' wx:key='key'>
    <view class='dot-main'>
    <!-- 三个小圆点的颜色 用if 来判断颜色 -->
      <view class='dot-color dot-red' wx:if="{{index%3 == 0}}"></view>
      <view class='dot-color dot-yellow' wx:if="{{index%3 == 1}}"></view>
      <view class='dot-color dot-blue' wx:if="{{index%3 == 2}}"></view>
      <view class='dot-text'>{{item.name}}</view>
    </view>
    <view class='dot-content'>
      <!-- 获取按钮的索引值 -->
      <block wx:for="{{item.child}}" wx:for-item="child" wx:for-index="childIndex" wx:key='key'>
        <view class='btn-customer' bindtap='binbtncusto'>{{child.name}}</view>
        <!--获取关闭点击小红色的按钮  -->
        <view class='dot-fork' bindtap='bindotfork' data-index="{{index}}" data-child-index="{{childIndex}}">
          <image src='/images/fork.png' class='fork-img'></image>
        </view>
      </block>
      <!--点击+ 号  出现文本框 按确认  确定文本效果  -->
      <view class='btn-add' bindtap='binaddtype' data-index="{{index}}">+</view>
    </view>
  </view>

</view>
<view class='showmodal' wx:if="{{mask}}" bindtap='binMask'></view>
<view class='frame' wx:if="{{frameshow}}">
  <view class='frame-text'>添加标签</view>
  <view class='frame-wrap'>
    <view class='frame-input'>
      <input type='text' placeholder='输入标签(限5字)' maxlength='5' value='{{value}}' bindinput='bindValue'></input>
    </view>
    <view class='frame-confirm' bindtap='binConfirm'>确认</view>
  </view>
</view>

.label-admin-wrap {
  width: 100%;
  height: 100%;
}
.label-admin-wrap .dot-wrap {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}
.label-admin-wrap .dot-wrap .dot-main {
  width: 100%;
  height: 30px;
  display: flex;
}
.label-admin-wrap .dot-wrap .dot-main .dot-color {
  width: 12px;
  height: 12px;
  border-radius: 6px;
  margin-left: 18px;
  margin-top: 8px;
}
/*对三个小圆点进行写法  样式*/
.label-admin-wrap .dot-wrap .dot-main .dot-red {
  background-color: #d62017;
}
.label-admin-wrap .dot-wrap .dot-main .dot-yellow {
  background-color: #ff980c;
}
.label-admin-wrap .dot-wrap .dot-main .dot-blue {
  background-color: #1798D9;
}
.label-admin-wrap .dot-wrap .dot-main .dot-text {
  width: 28px;
  height: 30px;
  font-size: 14px;
  color: #353535;
  text-align: center;
  line-height: 30px;
  margin-left: 10px;
}
.label-admin-wrap .dot-wrap .dot-content {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}
.label-admin-wrap .dot-wrap .dot-content .btn-customer,
.label-admin-wrap .dot-wrap .dot-content .btn-add {
  width: 72px;
  height: 32px;
  background-color: #F1F1F1;
  font-size: 13px;
  color: #999999;
  text-align: center;
  line-height: 32px;
  border-radius: 6px;
  margin-left: 36px;
  margin-top: 8px;
}
.label-admin-wrap .dot-wrap .dot-content .dot-fork {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  left: 96px;
}
.label-admin-wrap .dot-wrap .dot-content .dot-fork .fork-img {
  position: absolute;
  width: 32rpx;
  height: 32rpx;
  left: -107px;
}
.showmodal {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 2;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
}
.frame {
  width: 100%;
  height: 117px;
  background: #fff;
  position: fixed;
  z-index: 3;
  bottom: 0;
  font-size: 14px;
  color: #353535;
}
.frame .frame-text {
  height: 44px;
  border-bottom: 1px solid #e5e5e5;
  line-height: 44px;
  padding-left: 10px;
  box-sizing: border-box;
}
.frame .frame-wrap {
  display: flex;
  flex-direction: row;
}
.frame .frame-wrap .frame-input {
  height: 44px;
  width: 254px;
  margin-left: 20px;
  border-bottom: 1px solid #e5e5e5;
  padding-top: 20px;
  box-sizing: border-box;
  padding-left: 15px;
}
.frame .frame-wrap .frame-confirm {
  width: 60px;
  height: 30px;
  background-color: #d62017;
  color: #FFF;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  border-radius: 6px;
  margin: 14px 0 0 25px;
}

data:{
   value:null,//当前文本的框的值
    activeIndex:null,//当前准备添加的标签组的角标
    mask:false,//遮罩层
    frameshow:false,
   list:[
      {
        name:'类型',
        child:[
          {
            name:'大客户',
          },
          {
            name: '中客户',
          },
          {
            name: '小客户',
          }
        ]
      },
      {
        name: '级别',
        child: [
          {
            name: '一般',
          },
          {
            name: '重要',
          },
          {
            name: '核心',
          }
        ]
      },
      {
        name: '状态',
        child: [
          {
            name: '潜在',
          },
          {
            name: '重要',
          },
          {
            name: '洽谈',
          },
          {
            name: '成交',
          },
          {
            name: '流失',
          }
        ]
      },
    ],
  }

//点击+添加按钮出现弹框文本
  binaddtype(e){
    //获取到加号的索引值  在类型添加的索引值为0,级别的索引值为1,状态下的索引值2
    let addindex = e.currentTarget.dataset.index
    console.log(addindex)
    this.setData({
      mask: true,
      frameshow: true,
      //把索引值赋值给准备的角标
      activeIndex:addindex

    })
  },
//文本框输入事件
  bindValue(e){
   console.log(e)
   //获取文本框的值,并把文本框的值赋值给 Value
    let inVal = e.detail.value
    if (inVal==''){
      return
    }
    console.log(inVal)
    this.setData({
      value:inVal
    })

  },
  binMask(e){
   this.setData({
     mask: false,
     frameshow: false,
   })
  },
  //点击事件 确认按钮
  binConfirm(e){
    //获取文本框Value 的值
    let Text=this.data.value
    //获取角下标的值
    let activeIndex = this.data.activeIndex
    if (activeIndex==null){
      return
    }
    if (Text==null){
      return
    }
    //获取列表数据
    const list=this.data.list
    let child = list[activeIndex].child
    //每次点击添加一次
    child =child.concat({
      //这里的name的名字指数据列表的值 ,'name:潜在'
      name: Text
    })
    this.setData({
      mask: false,
      frameshow: false,
      ['list['+activeIndex+'].child']:child
    })
  },
//对点击删除事件
  bindotfork(e){
  console.log(e)
    let index =e.currentTarget.dataset.index
    let chidindex=e.currentTarget.dataset.childIndex
    //获取列表的值
    let list =this.data.list
    //获取到列表下的child的值
    let child = list[index].child
   // child.splice(chidindex,1)
   child=child.filter((v,i)=>{
     if(i==chidindex){
       return false
     }else{
       return true
     }
   })
    this.setData({
      ['list['+index+'].child']:child
    })
  },