The renderings are as follows:
Idea: Use radio to have an attribute checked. When we click to select, the attribute becomes true and its transparency becomes 0. Use the attribute selector in css3 to select its next sibling node and set the style to achieve a personalized single-selection defect Just double the label
<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;
}
// This is the key to selecting its neighboring siblings
.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">
<!-- Under the test, the attribute selector in css3 is used to indirectly Control the style of btn-text and make the real radio transparency to 0 but retain its click event -->
<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="Please enter other comments or suggestions here (click to select others)"
@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="Please enter other comments or suggestions here (click to select others first)"
/>
</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="Please enter the content" 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:'',//The questionnaire id is temporarily written dead RADIO:[],//Single choice answer CHECKBOX:[],//Multiple choice answer FILLBLANK:[],// Pure input box answer MULTIFILLBLANK:[], ORDERQU:[],//Sort question }, 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("Score:"+this.remarkScrod) apiPostAnsweer(this.answerData).then(res=>{ if(res.result==='success'){ wx.redirectTo( { url: "/pages/returnVisit/returnVisitResult?scord="+this.remarkScrod, }) } }) } //The purpose of array deduplication is to flash back and then deduplicate the array because push is added from the back of the array and we / /When removing duplicates , you need to keep the newly added 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>