Merge pull request #161 from j10ccc/refactor/suit

refactor(suit): rewrite in hooks
zjutjh · Nov 14, 2024 · e55ea69 · e55ea69
2 parents 901b70f + b645fc6
commit e55ea69
Show file tree

Hide file tree

Showing 14 changed files with 342 additions and 427 deletions.
diff --git a/src/components/Button/index.vue b/src/components/Button/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <button
+  <taro-button
     :style="{ backgroundColor: `var(--wjh-color-${props.color})` }"
     :class="[
       `wjh-button`,
@@ -8,14 +8,16 @@
       blockClass,
       shapeClass
     ]"
+    @tap="handleTap"
   >
     <slot />
-  </button>
+  </taro-button>
 </template>
 
 <script setup lang="ts">
 import "./index.scss";
 import { computed } from "vue";
+import { Button as TaroButton } from "@tarojs/components";
 
 type PropsType = {
   size?: "small" | "middle" | "large",
@@ -25,6 +27,10 @@ type PropsType = {
   disable?: boolean
 };
 
+const emit = defineEmits<{
+  tap: []
+}>();
+
 const props = withDefaults(defineProps<PropsType>(), {
   size: "middle",
   shape: "default",
@@ -45,4 +51,8 @@ const shapeClass = computed(() =>
   `wjh-button-shape-${props.shape}`
 );
 
+function handleTap() {
+  if (!props.disable) emit("tap");
+}
+
 </script>
diff --git a/src/pages/suit/apply/index.module.scss b/src/pages/suit/apply/index.module.scss
@@ -35,48 +35,57 @@
   flex: 0 0 auto;
   margin-bottom: 6Px;
   padding: 6Px;
+  padding-bottom: 16Px;
   overflow-x: scroll;
   white-space: nowrap;
 
   .suits {
     @include shadow;
     position: relative;
     height: 178Px;
-    // height: 142Px;
     margin: 0 6Px;
     padding: 0Px 62Px;
     border-radius: 12Px;
     background-color: var(--wjh-color-week);
-    background-size:100% 100%;
+    background-size: 100% 100%;
+    border: solid 4Px var(--wjh-color-background-page);
+    width: 124Px;
 
     .suit-name {
-      height: 36Px;
-      width: 124Px;
-      line-height: 65px;
+      width: 100%;
+      line-height: 200%;
       position: absolute;
-      top: 142Px;
-      left: 0Px;
+      bottom: -4Px;
+      left: -4Px;
       text-align: center;
-      border-radius: 0 0 9Px 9Px;
+      border-radius: 0 0 12Px 12Px;
       background-color: var(--wjh-color-background-container);
+      border: solid 4Px var(--wjh-color-background-container);
+      border-top: none;
     }
   }
 
   .active {
-    border: solid 4Px var(--wjh-color-primary);
+    border-color: var(--wjh-color-primary) !important;
+
+    .suit-name {
+      border-color: var(--wjh-color-primary) !important;
+    }
   }
 }
 
 .suit-panel {
   background-color: var(--wjh-color-background-popup);
   height: 100%;
+  padding: 12Px 24Px;
+  box-sizing: border-box;
   width: 100%;
   margin: 0;
   border-top-right-radius: 20Px;
   border-top-left-radius: 20Px;
 
   .container {
-    padding: 12Px 33Px;
+    margin-bottom: 20Px;
 
     .title {
       margin: 24Px 0;
@@ -90,24 +99,25 @@
     .size-scroll {
       display: flex;
       overflow-x: auto;
+      padding-bottom: 12Px;
 
       .size-card {
         @include shadow;
-        display: flex;
-        flex: 0 0 auto;
-        height: 40Px;
-        padding: 0 25Px;
+        padding: 10Px 25Px;
         margin-right: 16Px;
         border: solid 2Px var(--wjh-color-week);
         border-radius: 10Px;
         color: var(--wjh-color-text-secondary);
         text-align: center;
-        line-height: 40Px;
-      }
 
-      .active {
-        border: solid 2Px var(--wjh-color-primary);
-        color: var(--wjh-color-primary);
+        &.active {
+          border: solid 2Px var(--wjh-color-primary);
+          color: var(--wjh-color-primary);
+        }
+
+        text {
+          white-space: nowrap;
+        }
       }
     }
 
@@ -135,7 +145,7 @@
     .rent-suit-number {
       transition: all 0.1s; //need test
 
-      .number-symbal {
+      .number-symbol {
         @include shadow;
         display: inline-block;
         height: 35Px;
@@ -147,12 +157,12 @@
         font-weight: var(--wjh-font-weight-medium);
         text-align: center;
         line-height: 35Px;
-      }
 
-      .number-symbal:hover {
-        color: var(--wjh-color-text-secondary);
-        background-color: var(--wjh-color-light);
-        border: solid 1Px var(--wjh-color-light);
+        &:active {
+          color: var(--wjh-color-text-secondary);
+          background-color: var(--wjh-color-light);
+          border: solid 1Px var(--wjh-color-light);
+        }
       }
 
       .number-num {