✨ feat(捐花组件): 更多捐赠输入样式调整

@@ -2,7 +2,7 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-31 22:09:58
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-06-09 17:19:51
+ * @LastEditTime: 2022-06-09 18:32:49
  * @FilePath: /tswj/src/components/DonateFlower/index.vue
  * @Description: 捐花组件
 -->
@@ -19,7 +19,7 @@
         <van-row gutter="10">
           <van-col v-for="(v, index) in defaultOptions" :key="index" span="8">
             <div :class="['base-item', donate_number === +index ? 'checked-item' : 'uncheck-item']"
-              @click="donate_number = +index">
+              @click="selectDonate(+index)">
               {{ v }}
             </div>
           </van-col>
@@ -27,12 +27,14 @@
       </div>
       <!-- <div style="background: #FFFFFF; border-radius: 3px; border: 1px solid #713610; padding: 0.5rem 1rem; margin: 0.5rem 1rem; text-align: center;">更多花花</div> -->
       <div class="donate-number">
-        <van-row>
-          <van-col span="12">&nbsp;花花数量 </van-col>
-          <van-col span="12" style="text-align: right;">
-            <van-stepper v-model="donate_number" min="1" integer input-width="40px" button-size="32px" />
+        <van-row v-if="more_donate">
+          <van-col span="18" style="text-align: right;">
+            <van-field style="border: 1px solid #11D2B1; padding: 0.4rem 1rem;" v-model="donate_number" type="digit"
+              input-align="center" label="" placeholder="请输入花花数量" />
           </van-col>
+          <van-col span="6" style="line-height: 2.5;">&nbsp;朵花花</van-col>
         </van-row>
+        <div v-else style="border: 1px solid #11D2B1; padding: 0.4rem 1rem;" @click="showMoreDonate">更多花花</div>
       </div>
       <div v-if="userType === USER_TYPE.CHILDREN || userType === USER_TYPE.KINDERGARTEN" class="donate-name">
         <van-row>
@@ -216,7 +218,15 @@ onMounted(async () => {
 //   const { data } = await wxPayAPI(params)
 // }
 
+const more_donate = ref(false);
+const showMoreDonate = () => {
+  more_donate.value = true
+}
 // 选择捐赠数量
+const selectDonate = (index) => {
+  donate_number.value = index
+  more_donate.value = false
+}
 const defaultOptions = ref({
   1: '1朵花花',
   2: '2朵花花',
@@ -307,6 +317,9 @@ const showDA = ref(false);
 
   .donate-number {
     padding: 1rem;
+    padding-top: 0;
+    text-align: center;
+    color: #11D2B1;
   }
 
   .donate-handle {