小程序:单选、多选、文本(使用radio等,提交整理参数)三

1,index.axml
// An highlighted block
 <form class="form-section" onSubmit="onSubmit" onReset="onReset">
    <view class="margin-top" a:for="{{list}}" a:key="index">
       <!-- 输入框 -->
      <view class="flex-row" a:if="{{item.type==2}}">
        <view class="bold">{{item.title}}</view>
        <input class="input" placeholder="请输入内容" onBlur="getInputVal" data-index='{{index}}'/>
      </view>
      <!--其他-->
      <view class="bold" a:if="{{item.type==0 || item.type==1}}">{{item.title}}</view>
      <view a:if="{{item.type == 0}}">
        <radio-group onChange="radioChange" class="radio-view" >
          <label a:for="{{item.chooseList}}" a:for-item="v" a:for-index="i" a:key="i">
            <radio value="{{index+','+i}}" checked="{{v.checked}}" style="transform:scale(0.8)"/>
            {{v.name}}
          </label>
        </radio-group>
      </view>
      <view a:if="{{item.type == 1}}">
        <view class="checkbox-view">
        <!-- 复选用点击事件,处理数据方便无坑 -->
          <view a:for="{{item.chooseList}}" a:for-item="val" a:for-index="ind" a:key="ind" data-pIndex='{{index}}' data-sIndex='{{ind}}' onTap="checkboxClick">
            <label  >
              <checkbox value="{{index+','+ind}}" checked="{{v.checked}}" style="transform:scale(0.8)"/>
              {{val.name}}
          </label>
          </view>
        </view>
      </view>
    </view>
    <view class="btn-section">
      <button type="primary" size="mini" data-id="121" formType="submit">提交</button>
      <button type="ghost" size="mini" formType="reset">重置</button>
    </view>
  </form>
2,index.axjs
//
Page({
  data:{
    list:[
      {
        type:2,
        title:'评价语',
        chooseList:'',
        id:2,
        selected:true
      },
      {
        type:2,
        title:'随便说说',
        chooseList:'',
        id:1
      },
      {
        type:0,
        title:'是否喜欢',
        chooseList:[
          {name:'是',id:3,checked:false},
          {name:'否',id:4,checked:false},
        ]
      },
      {
        type:0,
        title:'制作如何',
        chooseList:[
          {name:'一般',id:5,checked:false},
          {name:'普通',id:6,checked:false},
          {name:'优秀',id:7,checked:false},
          {name:'精品',id:8,checked:false}
        ]
      },
      {
        type:1,
        title:'剧情走向',
        chooseList:[
          {name:'悬疑烧脑',id:9,checked:false},
          {name:'有点甜',id:10,checked:false},
          {name:'摸不着头脑',id:10,checked:false},
        ]
      },
      {
        type:1,
        title:'推荐',
        chooseList:[
          {name:'国内朋友',id:11,checked:false},
          {name:'家人',id:12,checked:false},
          {name:'国外朋友',id:13,checked:false},
          {name:'自己留着看',id:14,checked:false}
        ]
      },
    ],
  },
  getInputVal(e){
    let index = e.currentTarget.dataset.index;
    let list = this.data.list;
    list[index].chooseList = e.detail.value;
    this.setData({
      list
    })
  },
  radioChange(e) {
    let res = e.detail.value.split(',');
    let pIndex = Number(res[0]);
    let sIndex = Number(res[1]);
    let list = this.data.list;
    list[pIndex].chooseList.forEach((v,i)=>{
      if(i == sIndex) v.checked = true;
      else v.checked = false;
    })
    this.setData({
     list
    })
  },
  //复选用点击事件,处理数据方便无坑
  checkboxClick(e){
    let pIndex = e.currentTarget.dataset.pIndex;
    let sIndex = e.currentTarget.dataset.sIndex;
    let list = this.data.list;
    list[pIndex].chooseList.forEach((v,i)=>{
      if(i == sIndex) v.checked = !v.checked;
    })
    this.setData({
     list
    })
  },
  onSubmit() {
    let paramsList = [];
    let list = this.data.list;
    list.forEach(v=>{
      if(v.type == 2){
        if(v.chooseList!=''){
          let obj = {
            type:2,
            id:v.id,
            title:v.title,
            titleRes:v.chooseList
          }
          paramsList.push(obj);
        }
      }else{
        v.chooseList.forEach(item=>{
          if(item.checked){
            let obj = {
              type:v.type,
              id:item.id,
              title:v.title,
              titleRes:item.name
            }
            paramsList.push(obj);
          }
        })
      }
    })
    if(paramsList.length == 0){
      my.showToast({
        type: 'none',
        content: '内容不能为空!'
      });
      return false;
    }
    console.log(paramsList)
},
  onReset() {
    
  },
 
 
 
});

3,index.axss
// An highlighted block
.form-section{
  background-color: #fff;
  margin: 20rpx;
  padding: 20rpx;
}
.form-section input{
  font-size: 28rpx;
}
.bold{
  font-weight: 700;
  font-size: 32rpx;
}
.bold text{
  margin-right: 10rpx;
  color: red;
  font-weight: normal;
}
.margin-top{
  margin-top: 50rpx;
}
.flex-row{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}
.flex-row input{
  flex: 1;
  margin-left: 20rpx;
  border-bottom: 1rpx solid #808080;
}
.radio-view,
.checkbox-view{
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  font-size: 28rpx;
  margin-top: 10rpx;
}
.radio-view label,
.checkbox-view label{
  display: block;
  display: flex;
  align-items: center;
}
.radio-view label,
.checkbox-view label{
  margin-right: 50rpx;
}
.btn-section{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  margin: 20rpx 0;
}
.btn-section button:first-child{
  margin-right: 30rpx;
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值