Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
aac7a7f3 1 parent 9431eec2

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

Inline Side-by-side
Showing 1 changed file with 19 additions and 6 deletions
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: hookehuyr hookehuyr@gmail.com 2 * @Author: hookehuyr hookehuyr@gmail.com
3 * @Date: 2022-05-31 22:09:58 3 * @Date: 2022-05-31 22:09:58
4 * @LastEditors: hookehuyr hookehuyr@gmail.com 4 * @LastEditors: hookehuyr hookehuyr@gmail.com
5 - * @LastEditTime: 2022-06-09 17:19:51 5 + * @LastEditTime: 2022-06-09 18:32:49
6 * @FilePath: /tswj/src/components/DonateFlower/index.vue 6 * @FilePath: /tswj/src/components/DonateFlower/index.vue
7 * @Description: 捐花组件 7 * @Description: 捐花组件
8 --> 8 -->
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
19 <van-row gutter="10"> 19 <van-row gutter="10">
20 <van-col v-for="(v, index) in defaultOptions" :key="index" span="8"> 20 <van-col v-for="(v, index) in defaultOptions" :key="index" span="8">
21 <div :class="['base-item', donate_number === +index ? 'checked-item' : 'uncheck-item']" 21 <div :class="['base-item', donate_number === +index ? 'checked-item' : 'uncheck-item']"
22 - @click="donate_number = +index"> 22 + @click="selectDonate(+index)">
23 {{ v }} 23 {{ v }}
24 </div> 24 </div>
25 </van-col> 25 </van-col>
...@@ -27,12 +27,14 @@ ...@@ -27,12 +27,14 @@
27 </div> 27 </div>
28 <!-- <div style="background: #FFFFFF; border-radius: 3px; border: 1px solid #713610; padding: 0.5rem 1rem; margin: 0.5rem 1rem; text-align: center;">更多花花</div> --> 28 <!-- <div style="background: #FFFFFF; border-radius: 3px; border: 1px solid #713610; padding: 0.5rem 1rem; margin: 0.5rem 1rem; text-align: center;">更多花花</div> -->
29 <div class="donate-number"> 29 <div class="donate-number">
30 - <van-row> 30 + <van-row v-if="more_donate">
31 - <van-col span="12">&nbsp;花花数量 </van-col> 31 + <van-col span="18" style="text-align: right;">
32 - <van-col span="12" style="text-align: right;"> 32 + <van-field style="border: 1px solid #11D2B1; padding: 0.4rem 1rem;" v-model="donate_number" type="digit"
33 - <van-stepper v-model="donate_number" min="1" integer input-width="40px" button-size="32px" /> 33 + input-align="center" label="" placeholder="请输入花花数量" />
34 </van-col> 34 </van-col>
35 + <van-col span="6" style="line-height: 2.5;">&nbsp;朵花花</van-col>
35 </van-row> 36 </van-row>
37 + <div v-else style="border: 1px solid #11D2B1; padding: 0.4rem 1rem;" @click="showMoreDonate">更多花花</div>
36 </div> 38 </div>
37 <div v-if="userType === USER_TYPE.CHILDREN || userType === USER_TYPE.KINDERGARTEN" class="donate-name"> 39 <div v-if="userType === USER_TYPE.CHILDREN || userType === USER_TYPE.KINDERGARTEN" class="donate-name">
38 <van-row> 40 <van-row>
...@@ -216,7 +218,15 @@ onMounted(async () => { ...@@ -216,7 +218,15 @@ onMounted(async () => {
216 // const { data } = await wxPayAPI(params) 218 // const { data } = await wxPayAPI(params)
217 // } 219 // }
218 220
221 +const more_donate = ref(false);
222 +const showMoreDonate = () => {
223 + more_donate.value = true
224 +}
219 // 选择捐赠数量 225 // 选择捐赠数量
226 +const selectDonate = (index) => {
227 + donate_number.value = index
228 + more_donate.value = false
229 +}
220 const defaultOptions = ref({ 230 const defaultOptions = ref({
221 1: '1朵花花', 231 1: '1朵花花',
222 2: '2朵花花', 232 2: '2朵花花',
...@@ -307,6 +317,9 @@ const showDA = ref(false); ...@@ -307,6 +317,9 @@ const showDA = ref(false);
307 317
308 .donate-number { 318 .donate-number {
309 padding: 1rem; 319 padding: 1rem;
320 + padding-top: 0;
321 + text-align: center;
322 + color: #11D2B1;
310 } 323 }
311 324
312 .donate-handle { 325 .donate-handle {
......