细节完善
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user