567 lines
14 KiB
Vue
567 lines
14 KiB
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");
|
||
await wxShare("shareImageCanvas");
|
||
loading.value = false;
|
||
};
|
||
|
||
onLoad(async (options) => {
|
||
if (options.id) {
|
||
const result = await getPointBookDetailAPI(options.id || 209);
|
||
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>
|