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

<script setup>
import { ref, onMounted } from "vue";
import { onShow, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import EditOption from "@/components/EditOption.vue";
import SButton from "@/components/SButton.vue";
import { getPointBookDataAPI } from "@/apis";

const expandIndex = ref(0);
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;
    setTimeout(() => {
      expandIndex.value = !expand ? -1 : index;
    }, 100);
  } else {
    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;
};
const toEditPage = () => {
  if (
    bowType.value &&
    distance.value &&
    bowtargetType.value &&
    amountGroup.value
  ) {
    uni.setStorageSync("point-book", {
      bowType: bowType.value,
      distance: distance.value,
      bowtargetType: bowtargetType.value,
      amountGroup: amountGroup.value,
    });
    uni.navigateTo({
      url: "/pages/point-book-edit",
    });
  } else {
    uni.showToast({
      title: "请完善信息",
      icon: "none",
    });
  }
};
onShow(async () => {
  const result = await getPointBookDataAPI();
  if (result) {
    days.value = result.total_day || 0;
    arrows.value = result.total_arrow || 0;
  }
});
onMounted(async () => {
  const pointBook = uni.getStorageSync("point-book");
  if (pointBook) {
    bowType.value = pointBook.bowType;
    distance.value = pointBook.distance;
    bowtargetType.value = pointBook.bowtargetType;
    expandIndex.value = 3;
  }
});

onShareAppMessage(() => {
  return {
    title: "高效记录每一次射箭，深度分析助你提升！",
    path: "pages/point-book-create",
    imageUrl:
      "https://static.shelingxingqiu.com/attachment/2025-09-22/dcz4m4nbgycqqwknrv.png",
  };
});
onShareTimeline(() => {
  return {
    title: "高效记录每一次射箭，深度分析助你提升！",
    query: "from=timeline",
    imageUrl:
      "https://static.shelingxingqiu.com/attachment/2025-09-22/dcz4m4nbgycqqwknrv.png",
  };
});
</script>

<template>
  <Container
    :bgType="2"
    bgColor="#F5F5F5"
    :whiteBackArrow="false"
    title="计分与技术分析"
  >
    <view class="container">
      <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"
          :expand="expandIndex === 0"
          :onExpand="onExpandChange"
          :onSelect="onSelect"
          :value="bowType.name"
        />
        <EditOption
          :itemIndex="1"
          :expand="expandIndex === 1"
          :onExpand="onExpandChange"
          :onSelect="onSelect"
          :value="distance + ''"
        />
        <EditOption
          :itemIndex="2"
          :expand="expandIndex === 2"
          :onExpand="onExpandChange"
          :onSelect="onSelect"
          :value="bowtargetType.name"
        />
        <EditOption
          :itemIndex="3"
          :expand="expandIndex === 3"
          :onExpand="onExpandChange"
          :onSelect="onSelect"
        />
      </view>
    </view>
    <view :style="{ marginBottom: '20px' }">
      <SButton :rounded="50" :onClick="toEditPage">开始计分</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 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.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;
  margin-top: 10px;
}
.header > image {
  position: absolute;
  width: 100%;
  border: 2px solid #fff;
  box-sizing: border-box;
  border-radius: 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: #fff4c9;
}
</style>