UI更新

src/pages/point-book-create.vue

@@ -4,7 +4,7 @@ import Container from "@/components/Container.vue";
 import EditOption from "@/components/EditOption.vue";
 import SButton from "@/components/SButton.vue";
 
-const clickable = ref(false);
+const clickable = ref(true);
 const expandIndex = ref(-1);
 const bowType = ref("");
 const distance = ref(0);
@@ -14,8 +14,6 @@ const onExpandChange = (index, expand) => {
   expandIndex.value = !expand ? -1 : index;
 };
 
-const onClick = () => {};
-
 const toListPage = () => {
   uni.navigateTo({
     url: "/pages/point-book-list",
@@ -35,6 +33,11 @@ const onSelect = (itemIndex, value) => {
     clickable.value = true;
   }
 };
+const toEditPage = () => {
+  uni.navigateTo({
+    url: "/pages/point-book-edit",
+  });
+};
 </script>
 
 <template>
@@ -46,35 +49,37 @@ const onSelect = (itemIndex, value) => {
   >
     <view class="container">
       <image src="../static/point-book-banner.png" mode="widthFix" />
-      <EditOption
-        :itemIndex="0"
-        :expand="expandIndex === 0"
-        :onExpand="onExpandChange"
-        :onSelect="onSelect"
-      />
-      <EditOption
-        :itemIndex="1"
-        :expand="expandIndex === 1"
-        :onExpand="onExpandChange"
-        :onSelect="onSelect"
-      />
-      <EditOption
-        :itemIndex="2"
-        :expand="expandIndex === 2"
-        :onExpand="onExpandChange"
-        :onSelect="onSelect"
-      />
-      <EditOption
-        :itemIndex="3"
-        :expand="expandIndex === 3"
-        :onExpand="onExpandChange"
-        :onSelect="onSelect"
-      />
+      <view>
+        <EditOption
+          :itemIndex="0"
+          :expand="expandIndex === 0"
+          :onExpand="onExpandChange"
+          :onSelect="onSelect"
+        />
+        <EditOption
+          :itemIndex="1"
+          :expand="expandIndex === 1"
+          :onExpand="onExpandChange"
+          :onSelect="onSelect"
+        />
+        <EditOption
+          :itemIndex="2"
+          :expand="expandIndex === 2"
+          :onExpand="onExpandChange"
+          :onSelect="onSelect"
+        />
+        <EditOption
+          :itemIndex="3"
+          :expand="expandIndex === 3"
+          :onExpand="onExpandChange"
+          :onSelect="onSelect"
+        />
+      </view>
     </view>
     <view :style="{ marginBottom: '20px' }">
       <SButton
         :disabled="!clickable"
-        :onClick="onClick"
+        :onClick="toEditPage"
         disabledColor="#DDDDDD"
         :color="clickable ? '#000' : '#fff'"
       >
@@ -102,4 +107,7 @@ const onSelect = (itemIndex, value) => {
   box-sizing: border-box;
   border-radius: 10px;
 }
+.container > view:nth-child(2) {
+  margin: 0 10px;
+}
 </style>