UI更新

src/components/AppFooter.vue

@@ -13,7 +13,7 @@ const props = defineProps({
 
 const tabs = [
   { image: "../static/tab-vip.png" },
-  { image: "../static/tab-grow.png" },
+  { image: "../static/tab-point-book.png" },
   { image: "../static/tab-mall.png" },
 ];
 
@@ -26,7 +26,7 @@ function handleTabClick(index) {
   }
   if (index === 1) {
     uni.navigateTo({
-      url: "/pages/my-growth",
+      url: "/pages/point-book-create",
     });
   }
   if (index === 2) {
@@ -45,14 +45,11 @@ function handleTabClick(index) {
       :key="index"
       class="tab-item"
       @click="handleTabClick(index)"
+      :style="{
+        width: index === 1 ? '32%' : '10%',
+      }"
     >
-      <image
-        :src="tab.image"
-        :style="{
-          width: index === 1 ? '100px' : '40px',
-        }"
-        mode="widthFix"
-      />
+      <image :src="tab.image" mode="widthFix" />
     </view>
   </view>
 </template>
@@ -76,10 +73,16 @@ function handleTabClick(index) {
 .tab-item {
   z-index: 1;
 }
+.tab-item > image {
+  width: 88%;
+}
 .tab-item:nth-child(2) {
-  transform: translateY(10px);
+  transform: translateY(20%) translateX(25%);
+}
+.tab-item:nth-child(3) {
+  transform: translateY(-10%) translateX(5%);
 }
 .tab-item:nth-child(4) {
-  transform: translateY(10px) translateX(-10px);
+  transform: translateY(20%) translateX(-25%);
 }
 </style>

src/components/BowTargetEdit.vue

@@ -0,0 +1,17 @@
+<script setup></script>
+
+<template>
+  <view class="container">
+    <image src="../static/bow-target.png" mode="widthFix" />
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 90%;
+  margin: 10px auto;
+}
+.container > image {
+  width: 100%;
+}
+</style>

src/components/EditOption.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, onUnmounted } from "vue";
+import { ref, watch, onMounted, onUnmounted } from "vue";
 const props = defineProps({
   itemIndex: {
     type: Number,
@@ -21,6 +21,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  value: {
+    type: String,
+    default: "",
+  },
 });
 const bowTypes = [
   {
@@ -96,6 +100,36 @@ const onMeterChange = (e) => {
   meter.value = e.detail.value;
   props.onSelect(props.itemIndex, e.detail.value);
 };
+watch(
+  () => props.value,
+  (newValue) => {
+    if (!newValue) return;
+    if (props.itemIndex === 0) {
+      bowTypes.forEach((item, index) => {
+        if (item.name === newValue) {
+          selectedIndex.value = index;
+        }
+      });
+    }
+    if (props.itemIndex === 1) {
+      distances.forEach((item, index) => {
+        if (item == newValue) {
+          selectedIndex.value = index;
+        }
+        if (selectedIndex.value === -1) {
+          meter.value = newValue;
+        }
+      });
+    }
+    if (props.itemIndex === 2) {
+      bowtargetTypes.forEach((item, index) => {
+        if (item === newValue) {
+          selectedIndex.value = index;
+        }
+      });
+    }
+  }
+);
 </script>
 
 <template>
@@ -112,21 +146,13 @@ const onMeterChange = (e) => {
       }}</text>
       <block>
         <text :style="{ opacity: expand ? 0 : 1 }" v-if="itemIndex === 0">{{
-          bowTypes[selectedIndex]
-            ? bowTypes[selectedIndex].name
-            : itemTexts[itemIndex]
+          value || itemTexts[itemIndex]
         }}</text>
         <text :style="{ opacity: expand ? 0 : 1 }" v-if="itemIndex === 1">{{
-          distances[selectedIndex]
-            ? distances[selectedIndex] + " 米"
-            : selectedIndex === 9
-            ? meter + " 米"
-            : itemTexts[itemIndex]
+          value ? value + "米" : itemTexts[itemIndex]
         }}</text>
         <text :style="{ opacity: expand ? 0 : 1 }" v-if="itemIndex === 2">{{
-          bowtargetTypes[selectedIndex]
-            ? bowtargetTypes[selectedIndex]
-            : itemTexts[itemIndex]
+          value || itemTexts[itemIndex]
         }}</text>
         <text :style="{ opacity: expand ? 0 : 1 }" v-if="itemIndex === 3">{{
           selectedIndex !== -1 && secondSelectIndex !== -1
@@ -174,6 +200,7 @@ const onMeterChange = (e) => {
         }"
       >
         <input
+          v-model="meter"
           placeholder="自定义"
           placeholder-style="color: #DDDDDD"
           @focus="() => (selectedIndex = 9)"