UI更新

src/pages/point-book-create.vue

@@ -3,6 +3,7 @@ import { ref, onMounted, onUnmounted } from "vue";
 import Container from "@/components/Container.vue";
 import EditOption from "@/components/EditOption.vue";
 import SButton from "@/components/SButton.vue";
+import { getPractiseDataAPI } from "@/apis";
 
 const clickable = ref(false);
 const expandIndex = ref(-1);
@@ -10,6 +11,9 @@ const bowType = ref({});
 const distance = ref(0);
 const bowtargetType = ref("");
 const amountGroup = ref("");
+const days = ref(0);
+const arrows = ref(0);
+
 const onExpandChange = (index, expand) => {
   if (expandIndex.value !== -1) {
     expandIndex.value = -1;
@@ -59,6 +63,11 @@ onMounted(async () => {
     distance.value = pointBook.distance;
     bowtargetType.value = pointBook.bowtargetType;
   }
+  const result = await getPractiseDataAPI();
+  if (result) {
+    days.value = result.total_day || 0;
+    arrows.value = result.total_arrow || 0;
+  }
 });
 </script>
 
@@ -70,10 +79,26 @@ onMounted(async () => {
     title="计分本"
   >
     <view class="container">
-      <image
-        src="https://api.shelingxingqiu.com/attachment/2025-07-30/dbp9r4762kiaqykbpn.png"
-        mode="widthFix"
-      />
+      <view class="header">
+        <image
+          src="https://static.shelingxingqiu.com/attachment/2025-08-06/dbv8w5ak76hozbfpy2.png"
+          mode="widthFix"
+        />
+        <view>
+          <view>
+            <text>{{ days }}</text>
+            <text>天</text>
+          </view>
+          <text>训练天数</text>
+        </view>
+        <view>
+          <view>
+            <text>{{ arrows }}</text>
+            <text>箭</text>
+          </view>
+          <text>训练箭数</text>
+        </view>
+      </view>
       <view>
         <EditOption
           :itemIndex="0"
@@ -130,13 +155,36 @@ onMounted(async () => {
   flex-direction: column;
   align-items: center;
 }
-.container > image {
+.container > view:nth-child(2) {
+  margin: 0 10px;
+}
+.header {
+  width: 100%;
+  height: 27vw;
+  position: relative;
+  display: flex;
+  align-items: center;
+  color: #ffffffc7;
+  font-size: 14px;
+}
+.header > image {
+  position: absolute;
   width: 100%;
   border: 2px solid #fff;
   box-sizing: border-box;
   border-radius: 10px;
 }
-.container > view:nth-child(2) {
-  margin: 0 10px;
+.header > view {
+  position: relative;
+}
+.header > view:nth-child(2) {
+  margin-left: 7vw;
+  margin-right: 7vw;
+}
+.header > view > view > text:first-child {
+  font-size: 27px;
+  font-weight: 500;
+  margin-right: 5px;
+  color: #fff;
 }
 </style>