效果图如下：
思路：利用radio有个属性checked 当我们点击选中时该属性变为true 同时让它的透明度变为0，利用css3中属性选择器选中其下一个兄弟节点并设置样式 从而实现个性化的单选 缺陷就是多出一倍的标签
<style lang="less" scoped="scoped">
.question-box{
padding: 48rpx 30rpx 18rpx 30rpx;
border-radius: 15px;
background: white;
margin-bottom: 20rpx;
}
.question-title{
font-size: 30rpx;
font-weight: bold;
}
.radio-box,
.check-box{
display: flex;
margin-top: 40rpx;
flex-wrap: wrap;
}
.radio-item{
height: 56rpx;
padding: 0 18rpx;
border: 1px solid #ccc;
border-radius: 8px;
line-height: 56rpx;
font-size: 24rpx;
margin: 0 20rpx 30rpx 0;
}
.active{
border: 1px solid #3b8cff;
background: #3b8cff;
color: #fff;
}
.textarea-item{
min-height: 110rpx;
padding-top: 10rpx;
}
.textarea-box{
width: 100%;
position: relative;
}
.like-placehoder{
position: absolute;
font-size: 24rpx;
left: 18rpx;
top: 10rpx;
}
.placeholder-css{
margin-top: 20rpx;
}
.radios{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: 0;
}
// 这是关键所在 选中其相邻兄弟节点
.radios[aria-checked="true"]+.btn-text{
border: 1px solid #3b8cff;
background: #3b8cff;
color: #fff;
}
.radioGroup{
display: flex;
flex-wrap: wrap;
}
.btn-content{
position: relative;
text-align: center;
font-size: 24rpx;
margin-right: 20rpx;
display: flex;
align-items: center;
margin-bottom: 30rpx;
}
.btn-text{
height: 56rpx;
padding: 0 18rpx;
border: 1px solid #ccc;
line-height: 56rpx;
border-radius: 8px;
min-width: 22rpx;
text-align: center;
}
</style>
<template>
<view class="pageSet" style="padding: 20rpx;">
<view wx:if="{
{questionList.length>0}}">
<block wx:for="{
{questionList}}" wx:key="item">
<view class="question-box">
<rich-text class="question-title" nodes="{
{item.quTitle}}"></rich-text>
<view class="question-content">
<!--单选内容 -->
<view class="radio-box" wx:if="{
{item.quType=='RADIO'}}">
<radio-group bindchange="radioChange" class="radioGroup" data-questionItem="{
{item}}">
<block wx:for="{
{item.quRadios}}" wx:for-item="quRadiosItem" wx:for-index="quRadiosArrindex" wx:key="quRadiosItem">
<!-- 测试下 这里利用了css3中的属性选择器 来间接的控制btn-text的样式 同时让真正的radio透明度为0 但是保留了它的点击事件-->
<view class="btn-content ">
<radio value="{
{quRadiosItem.id+'-'+quRadiosItem.optionName}}" class="radios"/>
<view class="btn-text">{
{quRadiosItem.optionName}}</view>
</view>
<view wx:if="{
{quRadiosItem.isNote==1}}" class="textarea-box">
<textarea
class="radio-item textarea-item"
auto-height
data-textAreaItem="{
{quRadiosItem}}"
data-questionItem="{
{item}}"
placeholder="请在此输入其他意见或建议(先点击选择其他)"
@blur="radioTextarea"
cursor-spacing="150"
/>
</view>
</block>
</radio-group>
</view>
<!--多选内容 -->
<view class="check-box" wx:if="{
{item.quType=='CHECKBOX'}}">
<checkbox-group bindchange="checkChange" class="radioGroup">
<block wx:for="{
{item.quCheckboxs}}" wx:for-item="quCheckItem" wx:for-index="quCheckArrindex" wx:key="quCheckItem">
<view class="btn-content ">
<checkbox value="{
{quRadiosItem.id}}" class="radios"/>
<view class="btn-text">{
{quRadiosItem.optionName}}</view>
</view>
<view class="textarea-box" wx:if="{
{quCheckItem.isNote==1}}">
<textarea
class="radio-item textarea-item"
auto-height
data-textAreaItem="{
{quRadiosItem}}"
cursor-spacing="150"
placeholder="请在此输入其他意见或建议(先点击选择其他)"
/>
</view>
</block>
</checkbox-group>
</view>
<!--纯内容输入 -->
<view class="textarea-box" wx:if="{
{item.quType=='FILLBLANK'}}">
<textarea class="textarea-item" placeholder="请您输入内容" cursor-spacing="150"/>
</view>
<!--MULTIFILLBLANK输入 -->
<view class="multi-textarea-box" wx:if="{
{item.quType=='MULTIFILLBLANK'}}">
<textarea class="textarea-item" placeholder="请您输入内容" cursor-spacing="150"/>
</view>
</view>
</view>
</block>
<view class="big-btn" @tap="_fSubmit">提交</view>
</view>
<!-- 无数据时 -->
<view class="list-no-data" wx:else>
<image src="../../images/no-data.png"/>
</view>
</view>
</template>
<script>
import wepy from 'wepy'
import {apiGetQuestion,apiPostAnsweer,apiGetSurveyId}from "@api/returnVisit"
export default class ReturnVisitResult extends wepy.page {
config = {
navigationBarTitleText: '回访问卷',
navigationBarBackgroundColor:'#fff',
navigationBarTextStyle: 'black',
}
components = {}
data = {
questionList:[],
answerData:{
surveyId:'',//问卷id 暂时写死
RADIO:[],//单选答案
CHECKBOX:[],//多选答案
FILLBLANK:[],//纯输入框答案
MULTIFILLBLANK:[],
ORDERQU:[],//排序题
},
reportId:'',
remarkScrod:'',
}
computed = {}
methods = {
radioTextarea(e){
let questionType = e.currentTarget.dataset.questionitem.quType;
let quItemId = e.currentTarget.dataset.questionitem.id;
let textareaId = e.currentTarget.dataset.textareaitem.id;
let value = e.detail.value;
this.answerData[questionType].map(item=>{
if(item.quItemId==quItemId&&item.enId == textareaId){
item.otherText = value;
}
})
},
// 单选选择
radioChange(e){
let questionitem = e.currentTarget.dataset.questionitem;
let itemVal = (e.detail.value).split("-");
let quTitle = questionitem.quTitle;
//针对服务评价
if(quTitle.indexOf("最高5分")>-1){
this.remarkScrod = itemVal[1];
}
let resultArr = this.getArrResult(this.answerData[questionitem.quType],{
quItemId: questionitem.id,
enId:itemVal[0]
})
this.answerData[questionitem.quType] = [...resultArr];
},
_fSubmit(){
this._fGetSurveyId()
}
}
_fGetSurveyId(){
const _this = this;
apiGetSurveyId({
reportId:this.reportId
}).then(res=>{
if(res.data){
_this.answerData.surveyId = res.data.subjectId;
_this.$apply();
_this._fPostData()
}
})
}
_fPostData(){
console.log("评分:"+this.remarkScrod)
apiPostAnsweer(this.answerData).then(res=>{
if(res.result==='success'){
wx.redirectTo({
url: "/pages/returnVisit/returnVisitResult?scord="+this.remarkScrod,
})
}
})
}
//数组去重 这里先倒叙然后再去重的目的是因为push是从数组后面加而我们
//去重的时候需要保留后面新增加的
getArrResult(arr,obj){
arr.push(obj);
arr.reverse()
let newObj = {};
let newArr = [];
for(var i = 0;i<arr.length;i++){
if(!newObj[arr[i].quItemId]){
newObj[arr[i].quItemId] = true;
newArr.push(arr[i])
}
}
return newArr
}
onLoad (options) {
const _this = this;
this.reportId = options.reportId;
apiGetQuestion({
reportId:options.reportId
}).then(res=>{
_this.questionList = res.questionList;
_this.$apply()
})
}
}
</script>