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

<script setup>
import { ref, onMounted, computed } from "vue";
import { onLoad, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import BowTargetEdit from "@/components/BowTargetEdit.vue";
import ScreenHint2 from "@/components/ScreenHint2.vue";
import RingBarChart from "@/components/RingBarChart.vue";

import { getPointBookDetailAPI, addNoteAPI } from "@/apis";
import { wxShare, generateShareCard, generateShareImage } from "@/util";

import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user, device } = storeToRefs(store);

const selectedIndex = ref(0);
const showTip = ref(false);
const showTip2 = ref(false);
const showTip3 = ref(false);
const data = ref({});
const targetId = ref(0);
const targetSrc = ref("");
const arrows = ref([]);
const notes = ref("");
const record = ref({
  groups: [],
  user: {},
});
const shareType = ref(1);

const openTip = (index) => {
  if (index === 1) showTip.value = true;
  else if (index === 2) showTip2.value = true;
  else if (index === 3) showTip3.value = true;
};

const closeTip = () => {
  showTip.value = false;
  showTip2.value = false;
  showTip3.value = false;
};

const saveNote = async () => {
  if (record.value.id && notes.value) {
    if (record.value.remark !== notes.value) {
      await addNoteAPI(record.value.id, notes.value);
    }
    showTip3.value = false;
  }
};

const onSelect = (index) => {
  selectedIndex.value = index;
  data.value = record.value.groups[index];
  arrows.value = record.value.groups[index].list.filter(
    (item) => item.x && item.y
  );
};

const goBack = () => {
  const pages = getCurrentPages();
  if (pages.length > 1) {
    const currentPage = pages[pages.length - 2];
    uni.navigateBack({
      delta: currentPage.route === "pages/point-book" ? 1 : 2,
    });
  } else {
    uni.redirectTo({
      url: "/pages/index",
    });
  }
};

const ringRates = computed(() => {
  const rates = new Array(12).fill(0);
  arrows.value.forEach((item) => {
    if (item.ring === -1) rates[11] += 1;
    else rates[item.ring] += 1;
  });
  return rates.map((r) => r / arrows.value.length);
});

const loading = ref(false);
const shareImage = async () => {
  if (loading.value) return;
  loading.value = true;
  await generateShareImage("shareImageCanvas", record.value);
  await wxShare("shareImageCanvas");
  loading.value = false;
};

onLoad(async (options) => {
  if (options.id) {
    const result = await getPointBookDetailAPI(options.id || 222);
    record.value = result;
    notes.value = result.remark || "";
    const config = uni.getStorageSync("point-book-config");
    config.targetOption.some((item) => {
      if (item.id === result.targetType) {
        targetId.value = item.id;
        targetSrc.value = item.icon;
      }
    });
    if (result.groups) {
      data.value = result.groups[0];
      arrows.value = result.groups[0].list;
    }
  }
});

onShareAppMessage(async () => {
  const imageUrl = await generateShareCard(
    "shareCardCanvas",
    record.value.recordDate,
    data.value.userTotalRing,
    data.value.totalRing
  );
  return {
    title: "射箭打卡，今日又精进了一些～",
    path: "/pages/point-book-detail-share?id=" + record.value.id,
    imageUrl,
  };
});
onShareTimeline(async () => {
  const imageUrl = await generateShareCard(
    "shareCardCanvas",
    record.value.recordDate,
    data.value.userTotalRing,
    data.value.totalRing
  );
  return {
    title: "射箭打卡，今日又精进了一些～",
    query: "id=" + record.value.id,
    imageUrl,
  };
});
</script>

<template>
  <Container
    :bgType="2"
    bgColor="#F5F5F5"
    :whiteBackArrow="false"
    title=""
    :onBack="goBack"
  >
    <view class="container">
      <!-- <view class="tab-bar">
        <view
          v-for="(_, index) in groups"
          :key="index"
          @click="onSelect(index)"
          :style="{ borderColor: selectedIndex === index ? '#FED847' : '#fff' }"
        >
          <text
            :style="{
              color: selectedIndex === index ? '#000' : '#333',
              fontSize: selectedIndex === index ? '15px' : '13px',
              letterSpacing: index !== 0 ? '2px' : '0',
            }"
            >{{ index === 0 ? "全部" : `第${index}组` }}</text
          >
        </view>
      </view> -->
      <canvas
        class="share-canvas"
        canvas-id="shareCardCanvas"
        style="width: 375px; height: 300px"
      ></canvas>
      <canvas
        class="share-canvas"
        canvas-id="shareImageCanvas"
        style="width: 375px; height: 860px"
      ></canvas>
      <view class="detail-data">
        <view>
          <view
            :style="{ display: 'flex', alignItems: 'center' }"
            @click="() => openTip(1)"
          >
            <text>落点稳定性</text>
            <image
              src="../static/s-question-mark.png"
              mode="widthFix"
              class="question-mark"
            />
          </view>
          <text>{{ Number((data.stability || 0).toFixed(2)) }}</text>
        </view>
        <view>
          <view>黄心率</view>
          <text>{{ Number((data.yellowRate * 100).toFixed(2)) }}%</text>
        </view>
        <view>
          <view>10环数</view>
          <text>{{ data.tenRings }}</text>
        </view>
        <view>
          <view>平均环数</view>
          <text>{{ Number((data.averageRing || 0).toFixed(2)) }}</text>
        </view>
        <view>
          <view>总环数</view>
          <text>{{ data.userTotalRing }}/{{ data.totalRing }}</text>
        </view>
        <button
          hover-class="none"
          @click="() => openTip(3)"
          v-if="user.id === record.user.id"
        >
          <image
            :src="`../static/${notes ? 'has' : 'add'}-note.png`"
            mode="widthFix"
          />
          <text>{{ notes ? "我的备注" : "添加备注" }}</text>
        </button>
      </view>
      <view class="title-bar">
        <view />
        <text>落点分布</text>
        <!-- <button hover-class="none" @click="() => openTip(2)">
          <image
            src="../static/s-question-mark.png"
            mode="widthFix"
            class="question-mark"
          />
        </button> -->
      </view>
      <view :style="{ transform: 'translateY(-64rpx) scale(0.9)' }">
        <BowTargetEdit
          :id="targetId"
          :src="targetSrc"
          :arrows="arrows.filter((item) => item.x && item.y)"
          :scroll="false"
        />
      </view>
      <view :style="{ transform: 'translateY(-100rpx)' }">
        <!-- <view class="title-bar">
          <view />
          <text>环值分布</text>
        </view> -->
        <view :style="{ padding: '0 30rpx' }">
          <RingBarChart :data="ringRates" />
        </view>
        <!-- <view class="title-bar" :style="{ marginTop: '30rpx' }">
          <view />
          <text>{{
            selectedIndex === 0 ? "每组环数" : `第${selectedIndex}组环数`
          }}</text>
        </view> -->
        <view class="ring-text-groups">
          <view v-for="(item, index) in record.groups" :key="index">
            <view v-if="selectedIndex === 0 && index !== 0">
              <text>{{ index }}：</text>
              <text>{{ item.userTotalRing }}</text>
              <text>环</text>
            </view>
            <view
              v-if="
                (selectedIndex === 0 && index !== 0) ||
                (selectedIndex !== 0 && index === selectedIndex)
              "
            >
              <text
                v-for="(arrow, index2) in item.list"
                :key="index2"
                :style="{
                  color:
                    arrow.ring === 0 || arrow.ring === 10 ? '#FFA118' : '#666',
                }"
              >
                {{
                  arrow.ring === 0 ? "X" : arrow.ring === -1 ? "M" : arrow.ring
                }}
              </text>
            </view>
          </view>
        </view>
        <view
          class="btns"
          :style="{
            gridTemplateColumns: `repeat(${
              user.id === record.user.id ? 1 : 1
            }, 1fr)`,
          }"
        >
          <button hover-class="none" @click="goBack">关闭</button>
          <!-- <button
            hover-class="none"
            @click="shareImage"
            v-if="user.id === record.user.id"
          >
            分享
          </button> -->
        </view>
      </view>
      <ScreenHint2 :show="showTip || showTip2 || showTip3" :onClose="closeTip">
        <view class="tip-content">
          <block v-if="showTip">
            <text>落点稳定性说明</text>
            <text
              >通过计算每支箭与其他箭的平均距离衡量射箭的稳定性，数字越小则说明射箭越稳定。该数据只能在用户标记落点的情况下生成。</text
            >
          </block>
          <block v-if="showTip2">
            <text>落点分布说明</text>
            <text>展示用户某次练习中射箭的点位</text>
          </block>
          <block v-if="showTip3">
            <text>备注</text>
            <textarea
              v-model="notes"
              maxlength="300"
              rows="3"
              class="notes-input"
              placeholder="写下本次射箭的补充信息与心得"
              placeholder-style="color: #ccc;"
            />
            <view>
              <button
                hover-class="none"
                @click="saveNote"
                :class="notes ? '' : 'button-disabled'"
              >
                保存备注
              </button>
            </view>
          </block>
        </view>
      </ScreenHint2>
    </view>
  </Container>
</template>

<style scoped>
.container {
  width: 100%;
}
.tab-bar {
  display: flex;
  width: clac(100% - 20px);
  overflow-x: auto;
  padding: 0 10px;
  margin-top: 10px;
}
.tab-bar::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
.tab-bar > view {
  box-sizing: border-box;
  border: 2px solid #fff;
  border-radius: 10px;
  background-color: #fff;
  width: 24vw;
  height: 80rpx;
  text-align: center;
  margin: 5px;
  margin-top: 0;
  font-size: 14px;
  flex: 0 0 auto;
  position: relative;
}
.tab-bar > view > text {
  line-height: 80rpx;
  transition: all 0.2s ease;
}
.tab-bar > view > image {
  position: absolute;
  width: 14px;
  height: 4px;
  left: calc(50% - 7px);
  transition: all 0.3s ease;
}
.detail-data {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 3vw;
  margin: 10rpx 30rpx;
  margin-top: 20rpx;
}
.detail-data > view,
.detail-data > button {
  border-radius: 10px;
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 15rpx 24rpx;
}
.detail-data > view > view {
  font-size: 13px;
  color: #999;
  margin-bottom: 6rpx;
}
.detail-data > view > view > text {
  word-break: keep-all;
}
.detail-data > view > text {
  font-weight: 500;
  color: #000;
}
.detail-data > button {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  font-size: 24rpx;
  color: #333333;
}
.detail-data > button > image {
  width: 44rpx;
  height: 44rpx;
}
.question-mark {
  width: 28rpx;
  height: 28rpx;
  margin-left: 3px;
}
.title-bar {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #999;
  position: relative;
  z-index: 10;
}
.title-bar > view:first-child {
  width: 8rpx;
  height: 28rpx;
  border-radius: 10px;
  background-color: #fed847;
  margin-right: 7px;
  margin-left: 15px;
}
.title-bar > button {
  height: 34rpx;
}
.tip-content {
  width: 100%;
  padding: 50rpx 44rpx;
  display: flex;
  flex-direction: column;
  color: #000;
  overflow: hidden;
}
.tip-content > text {
  width: 100%;
}
.tip-content > text:first-child {
  text-align: center;
}
.tip-content > text:last-child {
  font-size: 13px;
  margin-top: 20px;
  opacity: 0.8;
}
.tip-content > view {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tip-content > view > input {
  width: 80%;
  height: 44px;
  border-radius: 22px;
  border: 1px solid #eeeeee;
  padding: 0 12px;
  font-size: 14px;
  color: #000;
}
.tip-content > view > button {
  width: 48%;
  border-radius: 44rpx;
  padding: 12px 0;
  font-size: 14px;
  color: #000;
  background: #fed847;
}
.button-disabled {
  background: linear-gradient(180deg, #fbfbfb 0%, #f5f5f5 100%) !important;
  color: #ccc !important;
}
.ring-text-groups {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  padding-top: 50rpx;
  font-size: 24rpx;
  color: #999999;
}
.ring-text-groups > view {
  display: flex;
  justify-content: center;
}
.ring-text-groups > view > view:first-child:nth-last-child(2) {
  margin-top: 10rpx;
  width: 115rpx;
  text-align: center;
  justify-content: flex-start;
  font-size: 20rpx;
  display: flex;
  color: #999;
}
.ring-text-groups > view > view:first-child:nth-last-child(2) > text {
  line-height: 30rpx;
}
.ring-text-groups
  > view
  > view:first-child:nth-last-child(2)
  > text:nth-child(2) {
  font-size: 28rpx;
  color: #666;
  margin-right: 6rpx;
  margin-top: -5rpx;
  font-weight: 500;
}
.ring-text-groups > view > view:last-child {
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30rpx;
}
.ring-text-groups > view > view:last-child > text {
  width: 16.6%;
  text-align: center;
  margin-bottom: 10rpx;
  font-weight: 500;
  font-size: 26rpx;
}
.notes-input {
  width: calc(100% - 40rpx);
  min-width: calc(100% - 40rpx);
  margin: 25rpx 0;
  border: 1px solid #eee;
  border-radius: 5px;
  padding: 5px;
  color: #000;
  padding: 20rpx;
}
.btns {
  margin-bottom: 40rpx;
  display: grid;
  align-items: center;
  justify-content: center;
  column-gap: 20rpx;
  padding: 0 20rpx;
}
.btns > button {
  height: 84rpx;
  line-height: 84rpx;
  background: linear-gradient(180deg, #fbfbfb 0%, #f5f5f5 100%), #ffffff;
  border-radius: 44rpx;
  border: 2rpx solid #eeeeee;
  box-sizing: border-box;
  font-weight: 500;
  font-size: 30rpx;
  color: #000000;
}
.btns > button:nth-child(2) {
  background: #fed847;
  border: none;
}
</style>