🦄 refactor(捐花组件): 代码优化

hookehuyr
Commit a93af27bebbd12ff361bbbbe303d0bce24d0afdc a93af27b 1 parent 63ce343c
Showing 1 changed file with 56 additions and 35 deletions
src/components/DonateFlower/index.vue
--- a/src/components/DonateFlower/index.vue
View file @a93af27
+++ b/src/components/DonateFlower/index.vue
View file @a93af27
@@ -2,12 +2,13 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-31 22:09:58
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-06-07 16:41:09
+ * @LastEditTime: 2022-06-09 00:43:28
  * @FilePath: /tswj/src/components/DonateFlower/index.vue
  * @Description: 捐花组件
 -->
 <template>
-  <van-popup v-model:show="show" :close-on-click-overlay="false" round position="bottom" :style="{ height: popupHeight, zIndex: 3000 }">
+  <van-popup v-model:show="show" :close-on-click-overlay="false" round position="bottom"
+    :style="{ height: popupHeight, zIndex: 3000 }">
     <div class="donate-wrapper">
       <div class="donate-title">
         您所有捐助的爱心
@@ -16,8 +17,9 @@
       </div>
       <div class="shortcut-choose-wrapper">
         <van-row gutter="10">
-          <van-col v-for="(v, index) in checkList" :key="index" span="8">
+          <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">
+            <div :class="['base-item', donate_number === +index ? 'checked-item' : 'uncheck-item']"
+              @click="donate_number = +index">
               {{ v }}
             </div>
           </van-col>
@@ -32,7 +34,7 @@
           </van-col>
         </van-row>
       </div>
-      <div v-if="userType === 'C' || userType === 'K'" class="donate-name">
+      <div v-if="userType === USER_TYPE.CHILDREN || userType === USER_TYPE.KINDERGARTEN" class="donate-name">
         <van-row>
           <van-col span="4" style="line-height: 2;">幼儿园</van-col>
           <van-col span="18">
@@ -40,7 +42,7 @@
           </van-col>
         </van-row>
       </div>
-      <div v-if="userType === 'C'" class="donate-name">
+      <div v-if="userType === USER_TYPE.CHILDREN" class="donate-name">
         <van-row>
           <van-col span="4" style="line-height: 2;">助力人</van-col>
           <van-col span="18">
@@ -63,7 +65,7 @@
               <van-checkbox v-model="agreed" checked-color="#ee0a24">同意&nbsp;</van-checkbox>
             </div>
             <div class="text">
-              <span @click="handleDA">捐赠协议</span>
+              <span @click="showDA=true">捐赠协议</span>
             </div>
           </div>
         </van-col>
@@ -81,8 +83,8 @@
   </van-popup>
   <div class="popup-wrapper">
     <van-popup v-model:show="showDA" position="bottom" :style="{ height: '100%', zIndex: 4000 }">
-      <div class="agreementHtml" v-html="agreementHtml"></div>
+      <div class="agreementHtml" v-html="agreementHtml" />
-      <div class="bottom-btn" @click="closeDA">
+      <div class="bottom-btn" @click="showDA=false">
         <div class="text">关闭</div>
       </div>
     </van-popup>
@@ -97,6 +99,7 @@ import { useRouter } from 'vue-router'
 import { $, Toast } from '@/utils/generatePackage'
 import { addDonateAPI } from '@/api/C/donate.js'
 import agreementHtml from './agreement'
+import { USER_TYPE } from '@/constant'
 const $router = useRouter();
 const props = defineProps({
@@ -107,26 +110,35 @@ const props = defineProps({
 const emit = defineEmits(['on-close']);
 let donate_number = ref(1);
-const donateFlower = async () => {
+const donateFlower = () => {
   if (!agreed.value) {
     Toast.fail('请选勾选同意按钮！');
     return false;
   }
   // 捐钱接口
   // 根据类型过滤提交数据
-  // C 儿童: 提交 perf_id,kg_id
+  // 儿童: 提交 perf_id,kg_id
-  // K 幼儿园: 提交 kg_id
+  // 幼儿园: 提交 kg_id
-  // V 访客: 不提交 perf_id,kg_id
+  // 访客
   let params = {
-    qty: donate_number.value, 
+    qty: donate_number.value,
     donate_name: props.item.donate_name,
   };
-  if (props.userType === 'C') { // 助力TA
+  switch (props.userType) {
-    params.perf_id = props.item.perf_id;
+    case USER_TYPE.CHILDREN:
-    params.kg_id = props.item.kg_id;
+      params.perf_id = props.item.perf_id;
-  } else if (props.userType === 'K') {
+      params.kg_id = props.item.kg_id;
-    params.kg_id = props.item.kg_id;
+      break;
+    case USER_TYPE.KINDERGARTEN:
+      params.kg_id = props.item.kg_id;
+      break;
+    case USER_TYPE.VISIT:
+      break;
   }
+  addDonate(params);
+}
+
+const addDonate = async (params) => {
   const { data } = await addDonateAPI(params);
   if (data.id) {
     closeBtn();
@@ -190,7 +202,7 @@ onMounted(() => {
 })
 // 选择捐赠数量
-const checkList = ref({
+const defaultOptions = ref({
   1: '1朵金花',
   2: '2朵金花',
   3: '3朵金花',
@@ -199,21 +211,16 @@ const checkList = ref({
 const agreed = ref(false);
 // 显示捐赠协议弹框
 const showDA = ref(false);
-const handleDA = () => {
-  showDA.value = true
-}
-const closeDA = () => {
-  showDA.value = false
-}
 </script>
 <style lang="less" scoped>
 .donate-wrapper {
   .donate-title {
-    padding: 1rem 1rem 0 1rem; 
+    padding: 1rem 1rem 0 1rem;
-    color: #999999; 
+    color: #999999;
     text-align: center;
   }
+
   .shortcut-choose-wrapper {
     padding: 1rem;
@@ -241,12 +248,13 @@ const closeDA = () => {
     padding: 1rem;
     .donate-text {
-      background: #F4F4F4; 
+      background: #F4F4F4;
       border-radius: 3px;
-      padding: 0.5rem; 
+      padding: 0.5rem;
-      margin-left: 5%; 
+      margin-left: 5%;
       width: 95%;
     }
+
     .donate-input {
       border: 1px solid #B9B9B9;
       border-radius: 5px;
@@ -254,17 +262,29 @@ const closeDA = () => {
       margin-left: 1rem;
     }
   }
+
   .agree-wrapper {
     margin: 1rem 0;
+
     .agree-content {
-      display: flex;align-items: center; box-sizing: content-box;
+      display: flex;
+      align-items: center;
+      box-sizing: content-box;
+
       .btn {
-        display: flex; flex-direction: column; justify-content: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
       }
+
       .text {
-        display: flex; flex-direction: column; justify-content: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
         span {
-          text-decoration: underline; color: #11D2B1;
+          text-decoration: underline;
+          color: #11D2B1;
         }
       }
     }
@@ -304,6 +324,7 @@ const closeDA = () => {
   right: 0;
   background-color: white;
   box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.07);
+
   .text {
     text-align: center;
     padding: 0.7rem;