shoot-miniprograms/src/pages/point-book-create.vue

<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(true);
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 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;
  }
};
const toEditPage = () => {
  uni.navigateTo({
    url: "/pages/point-book-edit",
  });
};
</script>

<template>
  <Container
    :bgType="2"
    bgColor="#F5F5F5"
    :whiteBackArrow="false"
    title="计分本"
  >
    <view class="container">
      <image src="../static/point-book-banner.png" mode="widthFix" />
      <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="toEditPage"
        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;
}
.container > view:nth-child(2) {
  margin: 0 10px;
}
</style>