细节完善

src/components/RewardUs.vue

@@ -15,6 +15,7 @@ const props = defineProps({
 });
 const amounts = [5, 20, 50, 80, 100, 200];
 const selected = ref(null);
+const checked = ref(false);
 
 const formData = reactive({
   name: "",
@@ -63,6 +64,10 @@ watch(
   () => props.show,
   () => {
     selected.value = null;
+    formData.name = "";
+    formData.account = "";
+    formData.organization = "";
+    formData.suggestion = "";
   }
 );
 </script>
@@ -84,11 +89,15 @@ watch(
         <text>{{ item }}</text>
       </button>
     </view>
-    <view>
-      <image src="../static/checked.png" mode="widthFix" />
+    <view
+      @click="checked = !checked"
+      :style="{ marginBottom: !checked ? '20rpx' : '0' }"
+    >
+      <image v-if="checked" src="../static/checked.png" mode="widthFix" />
+      <view v-else></view>
       <text>我想给建议(选填）</text>
     </view>
-    <view>
+    <view v-if="checked">
       <view>
         <text>您的姓名</text>
         <input v-model="formData.name" />
@@ -114,6 +123,7 @@ watch(
   display: flex;
   flex-direction: column;
   align-items: center;
+  transition: all 0.3s ease-in-out;
 }
 .container > text:first-child {
   font-weight: 500;
@@ -153,6 +163,13 @@ watch(
   justify-content: flex-start;
   margin-top: 20rpx;
 }
+.container > view:nth-child(3) > view {
+  width: 32rpx;
+  height: 32rpx;
+  margin: 0 10rpx;
+  border: 1rpx solid #e3e3e3;
+  border-radius: 50%;
+}
 .container > view:nth-child(3) > image {
   width: 32rpx;
   height: 32rpx;