细节完善

This commit is contained in:
kron
2025-11-04 14:18:44 +08:00
parent 3498bc5027
commit aa4fe1babd
2 changed files with 70 additions and 33 deletions

View File

@@ -32,8 +32,12 @@ onMounted(() => {
</script> </script>
<template> <template>
<view class="container" @click="toDetailPage" @longpress="longPress(props.data)"> <view
<view> class="container"
@click="toDetailPage"
@longpress="longPress(props.data)"
>
<view class="left-part">
<view class="labels"> <view class="labels">
<view></view> <view></view>
<text>{{ <text>{{
@@ -55,7 +59,7 @@ onMounted(() => {
<text>平均{{ data.averageRing }}</text> <text>平均{{ data.averageRing }}</text>
</view> </view>
</view> </view>
<view> <view class="right-part">
<image src="../static/bow-target.png" mode="widthFix" /> <image src="../static/bow-target.png" mode="widthFix" />
<view class="arrow-amount"> <view class="arrow-amount">
<text>{{ data.actualTotalRing }}</text> <text>{{ data.actualTotalRing }}</text>
@@ -75,12 +79,13 @@ onMounted(() => {
margin-bottom: 25rpx; margin-bottom: 25rpx;
height: 200rpx; height: 200rpx;
border: 2rpx solid #fed848; border: 2rpx solid #fed848;
padding-left: 30rpx;
padding-right: 10rpx;
} }
.container > view { .container > view {
position: relative; position: relative;
margin-left: 15px;
} }
.container > view:first-child { .left-part {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -88,20 +93,23 @@ onMounted(() => {
height: calc(100% - 50rpx); height: calc(100% - 50rpx);
color: #333333; color: #333333;
} }
.container > view:first-child > view { .left-part > view {
width: 100%; width: 100%;
display: flex; display: flex;
position: relative; position: relative;
} }
.container > view:first-child > view:nth-child(3) { .left-part > view:nth-child(3) {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 20rpx; font-size: 20rpx;
color: #666; color: #666;
} }
.container > view:first-child > view:nth-child(3) > text { .left-part > view:nth-child(3) > text {
margin-right: 10rpx; margin-right: 10rpx;
} }
.right-part > image {
width: 180rpx;
}
.labels { .labels {
align-items: flex-end !important; align-items: flex-end !important;
} }
@@ -119,12 +127,6 @@ onMounted(() => {
position: relative; position: relative;
color: #333; color: #333;
} }
.container > view:last-child {
margin-right: 1vw;
}
.container > view:last-child > image {
width: 24vw;
}
.arrow-amount { .arrow-amount {
position: absolute; position: absolute;
background-color: #0009; background-color: #0009;

View File

@@ -1,10 +1,9 @@
<script setup> <script setup>
import { ref, onMounted, computed } from "vue"; import { ref, onMounted, computed } from "vue";
import { onLoad } from "@dcloudio/uni-app"; import { onLoad, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue"; import Container from "@/components/Container.vue";
import BowTargetEdit from "@/components/BowTargetEdit.vue"; import BowTargetEdit from "@/components/BowTargetEdit.vue";
import ScreenHint2 from "@/components/ScreenHint2.vue"; import ScreenHint2 from "@/components/ScreenHint2.vue";
import SButton from "@/components/SButton.vue";
import RingBarChart from "@/components/RingBarChart.vue"; import RingBarChart from "@/components/RingBarChart.vue";
import { getPointBookDetailAPI, addNoteAPI } from "@/apis"; import { getPointBookDetailAPI, addNoteAPI } from "@/apis";
@@ -68,7 +67,7 @@ const ringRates = computed(() => {
onLoad(async (options) => { onLoad(async (options) => {
if (options.id) { if (options.id) {
const result = await getPointBookDetailAPI(options.id || 164); const result = await getPointBookDetailAPI(options.id || 194);
recordId.value = result.id; recordId.value = result.id;
notes.value = result.remark || ""; notes.value = result.remark || "";
const config = uni.getStorageSync("point-book-config"); const config = uni.getStorageSync("point-book-config");
@@ -85,6 +84,23 @@ onLoad(async (options) => {
} }
} }
}); });
onShareAppMessage(() => {
return {
title: "射箭打卡,今日又精进了一些~",
path: "/pages/point-book-detail?id=" + recordId.value,
imageUrl:
"https://static.shelingxingqiu.com/attachment/2025-09-12/dcqoz26q0268wxmzjg.png",
};
});
onShareTimeline(() => {
return {
title: "射箭打卡,今日又精进了一些~",
query: "from=timeline",
imageUrl:
"https://static.shelingxingqiu.com/attachment/2025-09-12/dcqoz26q0268wxmzjg.png",
};
});
</script> </script>
<template> <template>
@@ -96,7 +112,7 @@ onLoad(async (options) => {
:onBack="goBack" :onBack="goBack"
> >
<view class="container"> <view class="container">
<view class="tab-bar"> <!-- <view class="tab-bar">
<view <view
v-for="(_, index) in groups" v-for="(_, index) in groups"
:key="index" :key="index"
@@ -111,13 +127,8 @@ onLoad(async (options) => {
}" }"
>{{ index === 0 ? "全部" : `${index}` }}</text >{{ index === 0 ? "全部" : `${index}` }}</text
> >
<!-- <image
src="../static/s-triangle.png"
mode="widthFix"
:style="{ bottom: selectedIndex !== index ? '0' : '-5px' }"
/> -->
</view> </view>
</view> </view> -->
<view class="detail-data"> <view class="detail-data">
<view> <view>
<view <view
@@ -157,13 +168,13 @@ onLoad(async (options) => {
<view class="title-bar"> <view class="title-bar">
<view /> <view />
<text>落点分布</text> <text>落点分布</text>
<button hover-class="none" @click="() => openTip(2)"> <!-- <button hover-class="none" @click="() => openTip(2)">
<image <image
src="../static/s-question-mark.png" src="../static/s-question-mark.png"
mode="widthFix" mode="widthFix"
class="question-mark" class="question-mark"
/> />
</button> </button> -->
</view> </view>
<view :style="{ transform: 'translateY(-45rpx)' }"> <view :style="{ transform: 'translateY(-45rpx)' }">
<BowTargetEdit <BowTargetEdit
@@ -173,20 +184,20 @@ onLoad(async (options) => {
:editMode="false" :editMode="false"
/> />
</view> </view>
<view :style="{ transform: 'translateY(-90rpx)' }"> <view :style="{ transform: 'translateY(-60rpx)' }">
<view class="title-bar"> <!-- <view class="title-bar">
<view /> <view />
<text>环值分布</text> <text>环值分布</text>
</view> </view> -->
<view :style="{ padding: '0 30rpx' }"> <view :style="{ padding: '0 30rpx' }">
<RingBarChart :data="ringRates" /> <RingBarChart :data="ringRates" />
</view> </view>
<view class="title-bar" :style="{ marginTop: '30rpx' }"> <!-- <view class="title-bar" :style="{ marginTop: '30rpx' }">
<view /> <view />
<text>{{ <text>{{
selectedIndex === 0 ? "每组环数" : `${selectedIndex}组环数` selectedIndex === 0 ? "每组环数" : `${selectedIndex}组环数`
}}</text> }}</text>
</view> </view> -->
<view class="ring-text-groups"> <view class="ring-text-groups">
<view v-for="(item, index) in groups" :key="index"> <view v-for="(item, index) in groups" :key="index">
<view v-if="selectedIndex === 0 && index !== 0"> <view v-if="selectedIndex === 0 && index !== 0">
@@ -220,8 +231,9 @@ onLoad(async (options) => {
</view> </view>
</view> </view>
</view> </view>
<view :style="{ marginBottom: '40rpx' }"> <view class="btns">
<SButton :onClick="goBack" :rounded="50">关闭</SButton> <button hover-class="none" @click="goBack">关闭</button>
<button hover-class="none" @click="share">分享</button>
</view> </view>
</view> </view>
<ScreenHint2 <ScreenHint2
@@ -307,6 +319,7 @@ onLoad(async (options) => {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
column-gap: 3vw; column-gap: 3vw;
margin: 10rpx 30rpx; margin: 10rpx 30rpx;
margin-top: 20rpx;
} }
.detail-data > view, .detail-data > view,
.detail-data > button { .detail-data > button {
@@ -438,6 +451,7 @@ onLoad(async (options) => {
font-size: 40rpx; font-size: 40rpx;
color: #666; color: #666;
margin-right: 6rpx; margin-right: 6rpx;
margin-top: -5rpx;
} }
.ring-text-groups > view > view:last-child { .ring-text-groups > view > view:last-child {
flex: 1; flex: 1;
@@ -460,4 +474,25 @@ onLoad(async (options) => {
color: #000; color: #000;
padding: 20rpx; padding: 20rpx;
} }
.btns {
margin-bottom: 40rpx;
display: flex;
align-items: center;
justify-content: center;
}
.btns > button {
width: 336rpx;
height: 84rpx;
line-height: 84rpx;
background: linear-gradient(180deg, #fbfbfb 0%, #f5f5f5 100%), #ffffff;
border-radius: 44rpx;
border: 2rpx solid #eeeeee;
font-weight: 500;
font-size: 30rpx;
color: #000000;
margin: 0 10rpx;
}
.btns > button:last-child {
background: #fed847;
}
</style> </style>