Merge branch 'feature-points-book' into development
This commit is contained in:
kron
@@ -18,7 +18,8 @@ import { topThreeColors } from "@/constants";
|
||||
import useStore from "@/store";
|
||||
import { storeToRefs } from "pinia";
|
||||
const store = useStore();
|
||||
const { updateConfig, updateUser, updateDevice, updateRank } = store;
|
||||
const { updateConfig, updateUser, updateDevice, updateRank, getLvlName } =
|
||||
store;
|
||||
// 使用storeToRefs，用于UI里显示，保持响应性
|
||||
const { user, device, rankData } = storeToRefs(store);
|
||||
const showModal = ref(false);
|
||||
@@ -109,11 +110,10 @@ const comingSoon = () => {
|
||||
<view class="feature-grid">
|
||||
<view class="bow-card">
|
||||
<image
|
||||
src="https://static.shelingxingqiu.com/attachment/2025-07-15/dbciq9qhkpd3pqxawo.webp"
|
||||
src="../static/my-bow.png"
|
||||
mode="widthFix"
|
||||
@click="() => toPage('/pages/my-device')"
|
||||
/>
|
||||
|
||||
<text v-if="!user.id">我的弓箭</text>
|
||||
<text v-if="user.id && !device.deviceId">请绑定设备</text>
|
||||
<text
|
||||
@@ -123,7 +123,7 @@ const comingSoon = () => {
|
||||
>{{ device.deviceName }}</text
|
||||
>
|
||||
<image
|
||||
src="../static/a2@2x.png"
|
||||
src="../static/first-try.png"
|
||||
mode="widthFix"
|
||||
@click="() => toPage('/pages/first-try')"
|
||||
/>
|
||||
@@ -135,20 +135,17 @@ const comingSoon = () => {
|
||||
<text>快来报到吧~</text>
|
||||
</BubbleTip>
|
||||
</view>
|
||||
|
||||
<view class="practice-card" @click="() => toPage('/pages/practise')">
|
||||
<image src="../static/a2@2x(1).png" mode="widthFix" />
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="friend-card"
|
||||
@click="() => toPage('/pages/friend-battle')"
|
||||
>
|
||||
<image src="../static/a3@2x.png" mode="widthFix" />
|
||||
<view class="play-card">
|
||||
<view @click="() => toPage('/pages/practise')">
|
||||
<image src="../static/my-practise.png" mode="widthFix" />
|
||||
</view>
|
||||
<view @click="() => toPage('/pages/friend-battle')">
|
||||
<image src="../static/friend-battle.png" mode="widthFix" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ranking-section">
|
||||
<image src="../static/a4@2x.png" mode="widthFix" />
|
||||
<image src="../static/rank-bg.png" mode="widthFix" />
|
||||
<button
|
||||
class="into-btn"
|
||||
@click="() => toPage('/pages/ranking')"
|
||||
@@ -185,7 +182,30 @@ const comingSoon = () => {
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="region-stats">
|
||||
<view class="my-data">
|
||||
<view @click="() => toPage('/pages/my-growth')">
|
||||
<image src="../static/my-growth.png" mode="widthFix" />
|
||||
</view>
|
||||
<view>
|
||||
<view>
|
||||
<text>段位</text>
|
||||
<text>{{ user.scores ? getLvlName(user.scores) : "-" }}</text>
|
||||
</view>
|
||||
<view>
|
||||
<text>赛季平均环数</text>
|
||||
<text>{{ user.avg_ring ? user.avg_ring + "环" : "-" }}</text>
|
||||
</view>
|
||||
<view>
|
||||
<text>赛季胜率</text>
|
||||
<text>{{
|
||||
user.avg_win
|
||||
? Number((user.avg_win * 100).toFixed(2)) + "%"
|
||||
: "-"
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="region-stats">
|
||||
<view
|
||||
v-for="(region, index) in [
|
||||
{ name: '广东', score: 4291 },
|
||||
@@ -237,7 +257,7 @@ const comingSoon = () => {
|
||||
<text>...</text>
|
||||
<text>更多</text>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<SModal :show="showModal" :onClose="() => (showModal = false)">
|
||||
@@ -254,17 +274,19 @@ const comingSoon = () => {
|
||||
}
|
||||
|
||||
.feature-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-areas: "bow practice" "bow friend";
|
||||
row-gap: 5px;
|
||||
column-gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.feature-grid > view {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bow-card {
|
||||
grid-area: bow;
|
||||
position: relative;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.feature-grid > view > image {
|
||||
@@ -281,21 +303,16 @@ const comingSoon = () => {
|
||||
color: #b3b3b3;
|
||||
}
|
||||
|
||||
.bow-card > image:first-child {
|
||||
transform: scaleY(1.08) translateY(9px);
|
||||
}
|
||||
|
||||
.bow-card > image:nth-child(3) {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.practice-card {
|
||||
grid-area: practice;
|
||||
width: 100%;
|
||||
.play-card {
|
||||
width: 48%;
|
||||
margin-left: 2%;
|
||||
}
|
||||
|
||||
.friend-card {
|
||||
grid-area: friend;
|
||||
.play-card > view > image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -382,7 +399,7 @@ const comingSoon = () => {
|
||||
}
|
||||
|
||||
.more-players {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: #3c445a;
|
||||
font-size: 9px;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
@@ -447,4 +464,39 @@ const comingSoon = () => {
|
||||
line-height: 20px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.my-data {
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.my-data > view:first-child {
|
||||
width: 28%;
|
||||
}
|
||||
.my-data > view:first-child > image {
|
||||
width: 100%;
|
||||
transform: translateX(-8px);
|
||||
}
|
||||
.my-data > view:nth-child(2) {
|
||||
width: 68%;
|
||||
font-size: 12px;
|
||||
color: #fff6;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.my-data > view:nth-child(2) > view:nth-child(2) {
|
||||
width: 38%;
|
||||
}
|
||||
.my-data > view:nth-child(2) > view {
|
||||
width: 28%;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(180deg, #303b4c 30%, #2c384a 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.my-data > view:nth-child(2) > view > text:last-child {
|
||||
color: #fff;
|
||||
line-height: 25px;
|
||||
}
|
||||
</style>
|
||||
|
||||
147
src/pages/point-book-create.vue
Normal file
147
src/pages/point-book-create.vue
Normal file
@@ -0,0 +1,147 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import Container from "@/components/Container.vue";
|
||||
import EditOption from "@/components/EditOption.vue";
|
||||
import SButton from "@/components/SButton.vue";
|
||||
import { getPointBookConfigAPI } from "@/apis";
|
||||
|
||||
const clickable = ref(false);
|
||||
const expandIndex = ref(-1);
|
||||
const bowType = ref({});
|
||||
const distance = ref(0);
|
||||
const bowtargetType = ref("");
|
||||
const amountGroup = ref("");
|
||||
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;
|
||||
if (itemIndex < 3) expandIndex.value += 1;
|
||||
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,
|
||||
});
|
||||
clickable.value = true;
|
||||
}
|
||||
};
|
||||
const toEditPage = () => {
|
||||
expandIndex.value = -1;
|
||||
uni.navigateTo({
|
||||
url: "/pages/point-book-edit",
|
||||
});
|
||||
};
|
||||
onMounted(async () => {
|
||||
const config = await getPointBookConfigAPI();
|
||||
if (config) {
|
||||
uni.setStorageSync("point-book-config", config);
|
||||
}
|
||||
const pointBook = uni.getStorageSync("point-book");
|
||||
if (pointBook) {
|
||||
bowType.value = pointBook.bowType;
|
||||
distance.value = pointBook.distance;
|
||||
bowtargetType.value = pointBook.bowtargetType;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Container
|
||||
:bgType="2"
|
||||
bgColor="#F5F5F5"
|
||||
:whiteBackArrow="false"
|
||||
title="计分本"
|
||||
>
|
||||
<view class="container">
|
||||
<image
|
||||
src="https://api.shelingxingqiu.com/attachment/2025-07-30/dbp9r4762kiaqykbpn.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<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
|
||||
:disabled="!clickable"
|
||||
:onClick="toEditPage"
|
||||
disabledColor="#DDDDDD"
|
||||
:color="clickable ? '#000' : '#fff'"
|
||||
>
|
||||
开始计分
|
||||
</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 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.container > image {
|
||||
width: 100%;
|
||||
border: 2px solid #fff;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.container > view:nth-child(2) {
|
||||
margin: 0 10px;
|
||||
}
|
||||
</style>
|
||||
233
src/pages/point-book-detail.vue
Normal file
233
src/pages/point-book-detail.vue
Normal file
@@ -0,0 +1,233 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import Container from "@/components/Container.vue";
|
||||
import BowTargetEdit from "@/components/BowTargetEdit.vue";
|
||||
import ScreenHint2 from "@/components/ScreenHint2.vue";
|
||||
|
||||
import { getPointBookDetailAPI } from "@/apis";
|
||||
|
||||
const selectedIndex = ref(0);
|
||||
const showTip = ref(false);
|
||||
const showTip2 = ref(false);
|
||||
const groups = ref([]);
|
||||
const data = ref({});
|
||||
const targetSrc = ref("");
|
||||
const arrows = ref([]);
|
||||
|
||||
const openTip = (index) => {
|
||||
if (index === 1) showTip.value = true;
|
||||
else if (index === 2) showTip2.value = true;
|
||||
};
|
||||
|
||||
const closeTip = () => {
|
||||
showTip.value = false;
|
||||
showTip2.value = false;
|
||||
};
|
||||
|
||||
const onSelect = (index) => {
|
||||
selectedIndex.value = index;
|
||||
data.value = groups.value[index];
|
||||
arrows.value = groups.value[index].list.filter((item) => item.x && item.y);
|
||||
};
|
||||
|
||||
onLoad(async (options) => {
|
||||
if (options.id) {
|
||||
const result = await getPointBookDetailAPI(options.id);
|
||||
const config = uni.getStorageSync("point-book-config");
|
||||
config.targetOption.some((item) => {
|
||||
if (item.id === result.targetType) {
|
||||
targetSrc.value = item.icon;
|
||||
}
|
||||
});
|
||||
if (result.groups) {
|
||||
groups.value = result.groups;
|
||||
data.value = result.groups[0];
|
||||
arrows.value = result.groups[0].list.filter((item) => item.x && item.y);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Container :bgType="2" bgColor="#F5F5F5" :whiteBackArrow="false" title="分析">
|
||||
<view class="container">
|
||||
<view class="tab-bar">
|
||||
<view
|
||||
v-for="(_, index) in groups"
|
||||
:key="index"
|
||||
@click="onSelect(index)"
|
||||
>
|
||||
<text
|
||||
:style="{
|
||||
color: selectedIndex === index ? '#FF8709' : '#333',
|
||||
fontSize: selectedIndex === index ? '15px' : '13px',
|
||||
letterSpacing: index !== 0 ? '2px' : '0',
|
||||
}"
|
||||
>{{ index === 0 ? "全部" : `第${index}组` }}</text
|
||||
>
|
||||
<image
|
||||
src="../static/s-triangle.png"
|
||||
mode="widthFix"
|
||||
:style="{ bottom: selectedIndex !== index ? '0' : '-6px' }"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<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>
|
||||
</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>
|
||||
<BowTargetEdit :src="targetSrc" :arrows="arrows" />
|
||||
<ScreenHint2 :show="showTip || showTip2" :onClose="closeTip">
|
||||
<view class="tip-content">
|
||||
<block v-if="showTip">
|
||||
<text>落点稳定性说明</text>
|
||||
<text
|
||||
>通过计算每支箭与其他箭的平均距离衡一量射击的稳定性，数字越小则说明射击越稳定。该数据只能在用户标记落点的情况下生成。</text
|
||||
>
|
||||
</block>
|
||||
<block v-if="showTip2">
|
||||
<text>落点分布说明</text>
|
||||
<text>展示用户某次练习中射击的点位</text>
|
||||
</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;
|
||||
}
|
||||
.tab-bar::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
}
|
||||
.tab-bar > view {
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
width: 24vw;
|
||||
height: 13vw;
|
||||
line-height: 13vw;
|
||||
text-align: center;
|
||||
margin: 5px;
|
||||
margin-top: 0;
|
||||
font-size: 14px;
|
||||
flex: 0 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
.tab-bar > view > text {
|
||||
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: 10px 15px;
|
||||
}
|
||||
.detail-data > view {
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
margin-bottom: 10px;
|
||||
padding: 12px;
|
||||
}
|
||||
.detail-data > view > view {
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.question-mark {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
.title-bar {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
}
|
||||
.title-bar > view:first-child {
|
||||
width: 5px;
|
||||
height: 15px;
|
||||
border-radius: 10px;
|
||||
background-color: #fed847;
|
||||
margin-right: 7px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
.title-bar > text {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.tip-content {
|
||||
width: 100%;
|
||||
padding: 25px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
278
src/pages/point-book-edit.vue
Normal file
278
src/pages/point-book-edit.vue
Normal file
@@ -0,0 +1,278 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import Container from "@/components/Container.vue";
|
||||
import ScreenHint2 from "@/components/ScreenHint2.vue";
|
||||
import SButton from "@/components/SButton.vue";
|
||||
import BowTargetEdit from "@/components/BowTargetEdit.vue";
|
||||
import { savePointBookAPI } from "@/apis";
|
||||
|
||||
const clickable = ref(false);
|
||||
const showTip = ref(false);
|
||||
const groups = ref(0);
|
||||
const amount = ref(0);
|
||||
const currentGroup = ref(1);
|
||||
const currentArrow = ref(0);
|
||||
const arrowGroups = ref({});
|
||||
const bowtarget = ref({});
|
||||
const ringTypes = ref([
|
||||
{ ring: "X", color: "#FADB80" },
|
||||
{ ring: "10", color: "#FADB80" },
|
||||
{ ring: "9", color: "#FADB80" },
|
||||
{ ring: "8", color: "#F97E81" },
|
||||
{ ring: "7", color: "#F97E81" },
|
||||
{ ring: "6", color: "#7AC7FF" },
|
||||
{ ring: "5", color: "#7AC7FF" },
|
||||
{ ring: "4", color: "#9B9B9B" },
|
||||
{ ring: "3", color: "#9B9B9B" },
|
||||
{ ring: "2", color: "#d8d8d8" },
|
||||
{ ring: "1", color: "#d8d8d8" },
|
||||
]);
|
||||
|
||||
const onBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
const onSubmit = async () => {
|
||||
if (currentGroup.value < groups.value) {
|
||||
currentGroup.value++;
|
||||
currentArrow.value = 0;
|
||||
clickable.value = false;
|
||||
} else {
|
||||
const pointBook = uni.getStorageSync("point-book");
|
||||
const res = await savePointBookAPI(
|
||||
pointBook.bowType.id,
|
||||
pointBook.distance,
|
||||
pointBook.bowtargetType.id,
|
||||
groups.value,
|
||||
amount.value,
|
||||
Object.values(arrowGroups.value)
|
||||
);
|
||||
if (res.record_id) {
|
||||
uni.redirectTo({
|
||||
url: `/pages/point-book-detail?id=${res.record_id}`,
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
const onClickRing = (ring) => {
|
||||
if (arrowGroups.value[currentGroup.value]) {
|
||||
arrowGroups.value[currentGroup.value][currentArrow.value] = { ring };
|
||||
clickable.value = arrowGroups.value[currentGroup.value].every(
|
||||
(item) => !!item.ring
|
||||
);
|
||||
if (currentArrow.value < amount.value - 1) currentArrow.value++;
|
||||
}
|
||||
};
|
||||
const deleteArrow = () => {
|
||||
arrowGroups.value[currentGroup.value][currentArrow.value] = {};
|
||||
};
|
||||
const onEditDone = (arrow) => {
|
||||
arrowGroups.value[currentGroup.value][currentArrow.value] = arrow;
|
||||
clickable.value = arrowGroups.value[currentGroup.value].every(
|
||||
(item) => !!item.ring
|
||||
);
|
||||
if (currentArrow.value < amount.value - 1) currentArrow.value++;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
const pointBook = uni.getStorageSync("point-book");
|
||||
if (pointBook.bowtargetType) {
|
||||
bowtarget.value = pointBook.bowtargetType;
|
||||
if (bowtarget.value.id > 3) {
|
||||
ringTypes.value = ringTypes.value.slice(0, 6);
|
||||
if (bowtarget.value.id > 8) {
|
||||
ringTypes.value = ringTypes.value.slice(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (pointBook.amountGroup) {
|
||||
groups.value = Number(pointBook.amountGroup.split("/")[0]);
|
||||
amount.value = Number(pointBook.amountGroup.split("/")[1]);
|
||||
for (let i = 1; i <= groups.value; i++) {
|
||||
arrowGroups.value[i] = new Array(amount.value).fill({});
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Container
|
||||
:bgType="2"
|
||||
bgColor="#F5F5F5"
|
||||
:whiteBackArrow="false"
|
||||
:onBack="() => (showTip = true)"
|
||||
>
|
||||
<view class="container">
|
||||
<BowTargetEdit
|
||||
:onChange="onEditDone"
|
||||
:arrows="arrowGroups[currentGroup]"
|
||||
:id="bowtarget.id"
|
||||
:src="bowtarget.icon"
|
||||
/>
|
||||
<view class="title-bar">
|
||||
<view>
|
||||
<view />
|
||||
<text>第 {{ currentGroup }} 组</text>
|
||||
</view>
|
||||
<view @click="deleteArrow">
|
||||
<image src="../static/delete.png" />
|
||||
<text>删除</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bow-arrows">
|
||||
<view
|
||||
v-if="arrowGroups[currentGroup]"
|
||||
v-for="(arrow, index) in arrowGroups[currentGroup]"
|
||||
:key="index"
|
||||
@click="currentArrow = index"
|
||||
:style="{
|
||||
borderColor: currentArrow === index ? '#FED847' : '#eeeeee',
|
||||
borderWidth: currentArrow === index ? '2px' : '1px',
|
||||
}"
|
||||
>{{
|
||||
isNaN(arrow.ring)
|
||||
? arrow.ring
|
||||
: arrow.ring
|
||||
? arrow.ring + " 环"
|
||||
: ""
|
||||
}}</view
|
||||
>
|
||||
</view>
|
||||
<text>输入分值的情况下，系统不提供落点稳定性分</text>
|
||||
<view class="bow-rings">
|
||||
<view
|
||||
v-for="(item, index) in ringTypes"
|
||||
:key="index"
|
||||
@click="() => onClickRing(item.ring)"
|
||||
:style="{ backgroundColor: item.color }"
|
||||
>{{ item.ring }}</view
|
||||
>
|
||||
<view
|
||||
:style="{ backgroundColor: '#d8d8d8' }"
|
||||
@click="() => onClickRing('M')"
|
||||
>M</view
|
||||
>
|
||||
</view>
|
||||
<ScreenHint2 :show="showTip">
|
||||
<view class="tip-content">
|
||||
<text>现在离开会导致</text>
|
||||
<text>未提交的数据丢失，是否继续？</text>
|
||||
<view>
|
||||
<button hover-class="none" @click="onBack">退出</button>
|
||||
<button hover-class="none" @click="showTip = false">
|
||||
继续记录
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</ScreenHint2>
|
||||
</view>
|
||||
<view :style="{ marginBottom: '20px' }">
|
||||
<SButton
|
||||
:disabled="!clickable"
|
||||
:onClick="onSubmit"
|
||||
disabledColor="#DDDDDD"
|
||||
:color="clickable ? '#000' : '#fff'"
|
||||
>
|
||||
{{ currentGroup === groups ? "记完了，提交看分析" : "下一组" }}
|
||||
</SButton>
|
||||
</view>
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
.container > text {
|
||||
margin: 15px;
|
||||
color: #999;
|
||||
font-size: 13px;
|
||||
font-weight: 200;
|
||||
}
|
||||
.bow-arrows,
|
||||
.bow-rings {
|
||||
margin: 15px;
|
||||
display: grid;
|
||||
column-gap: 1vw;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
}
|
||||
.bow-arrows > view,
|
||||
.bow-rings > view {
|
||||
background: #ffffff;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #eeeeee;
|
||||
box-sizing: border-box;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
height: 32px;
|
||||
line-height: 20px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.bow-rings > view {
|
||||
font-size: 13px;
|
||||
height: 36px;
|
||||
line-height: 24px;
|
||||
color: #fff;
|
||||
background-color: #d8d8d8;
|
||||
}
|
||||
.tip-content {
|
||||
width: 100%;
|
||||
padding: 25px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.tip-content > text {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.tip-content > view {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.tip-content > view > button {
|
||||
width: 48%;
|
||||
background: linear-gradient(180deg, #fbfbfb 0%, #f5f5f5 100%);
|
||||
border-radius: 22px;
|
||||
border: 1px solid #eeeeee;
|
||||
padding: 12px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
.tip-content > view > button:last-child {
|
||||
background: #fed847;
|
||||
}
|
||||
.title-bar {
|
||||
width: calc(100% - 30px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
margin: 0 15px;
|
||||
}
|
||||
.title-bar > view:first-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
.title-bar > view:first-child > view:first-child {
|
||||
width: 5px;
|
||||
height: 15px;
|
||||
border-radius: 10px;
|
||||
background-color: #fed847;
|
||||
margin-right: 7px;
|
||||
}
|
||||
.title-bar > view:nth-child(2) {
|
||||
color: #287fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.title-bar > view:nth-child(2) image {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
185
src/pages/point-book-list.vue
Normal file
185
src/pages/point-book-list.vue
Normal file
@@ -0,0 +1,185 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import Container from "@/components/Container.vue";
|
||||
import SModal from "@/components/SModal.vue";
|
||||
import EditOption from "@/components/EditOption.vue";
|
||||
import PointRecord from "@/components/PointRecord.vue";
|
||||
import ScrollList from "@/components/ScrollList.vue";
|
||||
import { getPointBookListAPI } from "@/apis";
|
||||
|
||||
const bowType = ref({});
|
||||
const distance = ref(0);
|
||||
const bowtargetType = ref({});
|
||||
const showModal = ref(false);
|
||||
const selectorIndex = ref(0);
|
||||
const list = ref([]);
|
||||
|
||||
const onListLoading = async (page) => {
|
||||
const result = await getPointBookListAPI(
|
||||
page,
|
||||
bowType.value.id,
|
||||
distance.value,
|
||||
bowtargetType.value.id
|
||||
);
|
||||
if (page === 1) {
|
||||
list.value = result;
|
||||
} else {
|
||||
list.value = list.value.concat(result);
|
||||
}
|
||||
return result.length;
|
||||
};
|
||||
|
||||
const openSelector = (index) => {
|
||||
selectorIndex.value = index;
|
||||
showModal.value = true;
|
||||
};
|
||||
|
||||
const onSelectOption = (itemIndex, value) => {
|
||||
if (itemIndex === 0) {
|
||||
bowType.value = value.name === bowType.value.name ? {} : value;
|
||||
} else if (itemIndex === 1) {
|
||||
distance.value = value === distance.value ? 0 : value;
|
||||
} else if (itemIndex === 2) {
|
||||
bowtargetType.value = value.name === bowtargetType.value.name ? {} : value;
|
||||
}
|
||||
showModal.value = false;
|
||||
onListLoading(1);
|
||||
};
|
||||
const toDetailPage = (id) => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/point-book-detail?id=${id}`,
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Container
|
||||
:bgType="2"
|
||||
bgColor="#F5F5F5"
|
||||
:whiteBackArrow="false"
|
||||
title="计分记录"
|
||||
>
|
||||
<view class="container">
|
||||
<view class="selectors">
|
||||
<view @click="() => openSelector(0)">
|
||||
<text :style="{ color: bowType.name ? '#000' : '#999' }">{{
|
||||
bowType.name || "请选择"
|
||||
}}</text>
|
||||
<image src="../static/arrow-grey.png" mode="widthFix" />
|
||||
</view>
|
||||
<view @click="() => openSelector(1)">
|
||||
<text :style="{ color: distance ? '#000' : '#999' }">{{
|
||||
distance ? distance + " 米" : "请选择"
|
||||
}}</text>
|
||||
<image src="../static/arrow-grey.png" mode="widthFix" />
|
||||
</view>
|
||||
<view @click="() => openSelector(2)">
|
||||
<text :style="{ color: bowtargetType.name ? '#000' : '#999' }">{{
|
||||
bowtargetType.name || "请选择"
|
||||
}}</text>
|
||||
<image src="../static/arrow-grey.png" mode="widthFix" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="point-records">
|
||||
<ScrollList :onLoading="onListLoading">
|
||||
<view
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
@click="() => toDetailPage(item.id)"
|
||||
>
|
||||
<PointRecord :data="item" />
|
||||
</view>
|
||||
</ScrollList>
|
||||
</view>
|
||||
<SModal
|
||||
:show="showModal"
|
||||
:noBg="true"
|
||||
:onClose="() => (showModal = false)"
|
||||
>
|
||||
<view class="selector">
|
||||
<button hover-class="none" @click="() => (showModal = false)">
|
||||
<image src="../static/close-grey.png" mode="widthFix" />
|
||||
</button>
|
||||
<EditOption
|
||||
v-show="selectorIndex === 0"
|
||||
:itemIndex="0"
|
||||
:expand="true"
|
||||
:noArrow="true"
|
||||
:onSelect="onSelectOption"
|
||||
:value="bowType.name"
|
||||
/>
|
||||
<EditOption
|
||||
v-show="selectorIndex === 1"
|
||||
:itemIndex="1"
|
||||
:expand="true"
|
||||
:noArrow="true"
|
||||
:onSelect="onSelectOption"
|
||||
:value="distance + ''"
|
||||
/>
|
||||
<EditOption
|
||||
v-show="selectorIndex === 2"
|
||||
:itemIndex="2"
|
||||
:expand="true"
|
||||
:noArrow="true"
|
||||
:onSelect="onSelectOption"
|
||||
:value="bowtargetType.name"
|
||||
/>
|
||||
</view>
|
||||
</SModal>
|
||||
</view>
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.selectors {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 15px;
|
||||
}
|
||||
.selectors > view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #fff;
|
||||
height: 55px;
|
||||
border-radius: 12px;
|
||||
color: #333;
|
||||
font-size: 13px;
|
||||
width: 26vw;
|
||||
}
|
||||
.selectors > view:last-child {
|
||||
width: 34vw;
|
||||
}
|
||||
.selectors > view > text {
|
||||
width: calc(100% - 11vw);
|
||||
text-align: center;
|
||||
margin-left: 3vw;
|
||||
}
|
||||
.selectors > view > image {
|
||||
width: 5vw;
|
||||
margin-right: 3vw;
|
||||
}
|
||||
.selector {
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
}
|
||||
.selector > button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.selector > button > image {
|
||||
width: 40px;
|
||||
}
|
||||
.point-records {
|
||||
padding: 15px;
|
||||
height: calc(100% - 30px);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user