添加创建积分本页面

src/pages/point-book-create.vue

@@ -0,0 +1,105 @@
+<script setup>
+import { ref, onMounted, onUnmounted } from "vue";
+import Container from "@/components/Container.vue";
+import EditOption from "@/components/EditOption.vue";
+import SButton from "@/components/SButton.vue";
+
+const clickable = ref(false);
+const expandIndex = ref(-1);
+const bowType = ref("");
+const distance = ref(0);
+const bowtargetType = ref("");
+const amountGroup = ref("");
+const onExpandChange = (index, expand) => {
+  expandIndex.value = !expand ? -1 : index;
+};
+
+const onClick = () => {};
+
+const toListPage = () => {
+  uni.navigateTo({
+    url: "/pages/point-book-list",
+  });
+};
+const onSelect = (itemIndex, value) => {
+  if (itemIndex === 0) bowType.value = value;
+  else if (itemIndex === 1) distance.value = value;
+  else if (itemIndex === 2) bowtargetType.value = value;
+  else if (itemIndex === 3) amountGroup.value = value;
+  if (
+    bowType.value &&
+    distance.value &&
+    bowtargetType.value &&
+    amountGroup.value
+  ) {
+    clickable.value = true;
+  }
+};
+</script>
+
+<template>
+  <Container
+    :bgType="2"
+    bgColor="#F5F5F5"
+    :whiteBackArrow="false"
+    title="计分本"
+  >
+    <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>
+    <view :style="{ marginBottom: '20px' }">
+      <SButton
+        :disabled="!clickable"
+        :onClick="onClick"
+        disabledColor="#DDDDDD"
+        :color="clickable ? '#000' : '#fff'"
+      >
+        开始计分
+      </SButton>
+      <view class="see-more" @click="toListPage">
+        <text>历史计分记录</text>
+        <image src="../static/enter-arrow-blue.png" mode="widthFix" />
+      </view>
+    </view>
+  </Container>
+</template>
+
+<style scoped>
+.container {
+  width: calc(100% - 20px);
+  padding: 0 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.container > image {
+  width: 100%;
+  border: 2px solid #fff;
+  box-sizing: border-box;
+  border-radius: 10px;
+}
+</style>