1,index.axml
<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
.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;
}