多选按钮修改

pages/index/detail.vue

@@ -61,7 +61,7 @@
     >
       <view
         :class="['bar', item.answerId == '0' ? 'currAnswer' : '']"
-        v-for="item in msgList"
+        v-for="(item, i) in msgList"
         :key="item.id"
       >
         <!-- <image
@@ -79,7 +79,9 @@
           class="img"
         />
         <view class="content">
-          <zeroMarkdownView :markdown="item.data" />
+          <view style="width: 100%; overflow: hidden;">
+            <zeroMarkdownView :markdown="item.data" />
+          </view>
           <!-- <ua-markdown :source="mdvalue" /> -->
           <view class="btnBox">
             <view
@@ -91,15 +93,14 @@
             >
           </view>
           <view
-            v-if="item.answerOptions && item.answerOptions.length > 0"
+            v-if="item.answerOptions && item.answerOptions.length > 0 && item.optionType == 0"
-            style="display: flex"
+            style="display: flex; flex-wrap: wrap;"
           >
             <u-checkbox-group
               v-model="item.checkboxValue1"
               placement="column"
-              iconPlacement=".right"
+              iconPlacement="right"
               style="width: 100%; padding: 0 15px; box-sizing: border-box"
-              v-if="item.optionType == 1"
             >
               <u-checkbox
                 :customStyle="{ marginBottom: '8px' }"
@@ -107,11 +108,21 @@
                 :key="index"
                 :label="item"
                 :name="item"
+                style="background-color: #ededed;padding: 8px;"
               >
               </u-checkbox>
             </u-checkbox-group>
-
+          </view>
-            <u-radio-group
+          <view
+            v-if="item.answerOptions && item.answerOptions.length > 0 && item.optionType == 1"
+            style="display: flex; flex-wrap: wrap;"
+          >
+            <view v-for="(item, index) in item.answerOptions" :key="index" 
+            style="padding: 8px 8px;margin:0 0 8px 8px;background-color: #ededed;" 
+            @click="handleGroup(item)">
+            {{ item }}
+            </view>
+            <!-- <u-radio-group
               v-model="item.radiovalue1"
               placement="column"
               iconPlacement="right"
@@ -126,14 +137,14 @@
                 :name="item"
               >
               </u-radio>
-            </u-radio-group>
+            </u-radio-group> -->
           </view>
-
           <view
             class="btnBox"
-            v-if="item.answerOptions && item.answerOptions.length > 0"
+            v-if="item.answerOptions && item.answerOptions.length > 0 && item.optionType == 0"
           >
             <view class="btn" @click="handleGroup(item)">确认</view>
+            <view class="btn" @click="handleGroup2(i)">清空</view>
           </view>
         </view>
       </view>
@@ -630,14 +641,20 @@ console.log({
       });
     },
     handleGroup(item) {
+      console.log(item)
       let text = "";
       if (this.optionType) {
-        text = item.checkboxValue1.join(",");
       } else {
-        text = item.radiovalue1;
+        text = item.checkboxValue1.join(",");
+        // text = item;
       }
       this.handleSend(text);
     },
+    handleGroup2(i) {
+      this.msgList[i].checkboxValue1 = []
+      this.$set(this.msgList,i,this.msgList[i])
+     
+    },
   },
 };
 </script>
@@ -733,13 +750,15 @@ console.log({
     .bar {
       width: 100%;
       display: flex;
-      margin-bottom: 40rpx;
+      margin-bottom: 80rpx;
-      overflow: hidden;
+      // overflow: hidden;
 
       .btnBox {
         display: flex;
         justify-content: flex-end;
-
+        position: absolute;
+        right: -4px;
+        bottom: -36px;
         .btn {
           color: #497cca;
           background-color: #d8e3f8;
@@ -764,7 +783,8 @@ console.log({
         padding: 0;
         margin: 15rpx 20rpx 0 20rpx;
         // flex: 1;
-        overflow: hidden;
+        // overflow: hidden;
+        position: relative;
         background-color: #ffffff;
 
         ._img {