feat: 抽离出部分喵详情内容 (#339)

* chore: 删除不必要注释 * feat: 抽离出部分喵详情内容 * feat: 抽离出部分喵详情内容
xh-polaris · Jul 30, 2023 · 137afac · 137afac
1 parent b9f0fcd
commit 137afac
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 39 deletions.
diff --git a/src/components/debug-panel/debug-panel.vue b/src/components/debug-panel/debug-panel.vue
@@ -142,12 +142,6 @@ const setLaneInputEditable = (isTrue: boolean) => {
       line-height: 4vw;
       border-radius: 2vw;
       margin-right: 2vw;
-      //&.green {
-      //  border: 1px solid seagreen;
-      //}
-      //&.orange {
-      //  border: 1px solid #f89512;
-      //}
       &.current {
         background-color: #888888;
 

diff --git a/src/pages/cat/cat.vue b/src/pages/cat/cat.vue
@@ -7,41 +7,12 @@
       @click="onClickAvatar(mainImgUrl, cat.avatars)"
     />
     <view>
-      <scroll-view scroll-x="true" class="scroll-view-item_H" scroll-left="120">
-        <li
-          v-for="(item, index) in cat.avatars"
-          :key="index"
-          class="img-li"
-          @click="
-            () => {
-              (mainImgUrl = item), (imgActiveIndex = index);
-            }
-          "
-        >
-          <image
-            :class="index === imgActiveIndex ? 'img_activeBorder' : ''"
-            :src="item"
-            style="width: 50px; height: 50px"
-          />
-        </li>
-      </scroll-view>
+      <text>{{ cat.name }}</text>
     </view>
-    <view class="progress-box">
-      <view class="text-box1 font-weight">
-        <text>{{ cat.name }}</text>
-      </view>
+    <meta-info :cat="cat" />
+    <guide :cat="cat" />
+    <story :cat="cat" />
 
-      <view class="text-box2">
-        <progress
-          :percent="cat.popularity"
-          :stroke-width="10"
-          activeColor="#63A4F9"
-          backgroundColor="#F5F5F5"
-          border-radius="6px"
-        />
-        <text>{{ cat.popularity }}人气值</text>
-      </view>
-    </view>
     <view class="info">
       <view class="combination">
         <view class="attribute"> 年龄</view>
@@ -139,6 +110,10 @@
 
 <script lang="ts" setup>
 import { computed, reactive, ref } from "vue";
+
+import Guide from "@/pages/cat/guide.vue";
+import Story from "@/pages/cat/story.vue";
+import MetaInfo from "@/pages/cat/meta-info.vue";
 import { Cat } from "@/apis/schemas";
 import { onClickImage, onClickAvatar } from "@/pages/cat/utils";
 import { getCatDetail, getCatImage } from "@/apis/collection/collection";

diff --git a/src/pages/cat/guide.vue b/src/pages/cat/guide.vue
@@ -0,0 +1,20 @@
+<template>
+  <view class="main">
+    <text>guide</text>
+    <text>{{ props.cat.name }}</text>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { Cat } from "@/apis/schemas";
+interface Props {
+  cat: Cat;
+}
+const props = defineProps<Props>();
+</script>
+
+<style scoped lang="scss">
+.main {
+  margin: 0 6vw;
+}
+</style>
diff --git a/src/pages/cat/meta-info.vue b/src/pages/cat/meta-info.vue
@@ -0,0 +1,20 @@
+<template>
+  <view class="main">
+    <text>meta-info</text>
+    <text>{{ props.cat.name }}</text>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { Cat } from "@/apis/schemas";
+interface Props {
+  cat: Cat;
+}
+const props = defineProps<Props>();
+</script>
+
+<style scoped lang="scss">
+.main {
+  margin: 0 6vw;
+}
+</style>
diff --git a/src/pages/cat/story.vue b/src/pages/cat/story.vue
@@ -0,0 +1,20 @@
+<template>
+  <view class="main">
+    <text>story</text>
+    <text>{{ props.cat.name }}</text>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { Cat } from "@/apis/schemas";
+interface Props {
+  cat: Cat;
+}
+const props = defineProps<Props>();
+</script>
+
+<style scoped lang="scss">
+.main {
+  margin: 0 6vw;
+}
+</style>