laoma/shoot-miniprograms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI更新

Browse Source
This commit is contained in:
kron
2025-07-30 17:38:48 +08:00
parent f414b34f44
commit 0ebe34cc1e
30 changed files with 211 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
src/pages/index.vue
View File

@@ -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://api.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>

17
src/pages/point-book-create.vue
View File

@@ -24,6 +24,7 @@ const onSelect = (itemIndex, 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 &&
@@ -44,6 +45,14 @@ const toEditPage = () => {
url: "/pages/point-book-edit",
});
};
onMounted(() => {
const pointBook = uni.getStorageSync("point-book");
if (pointBook) {
bowType.value = pointBook.bowType;
distance.value = pointBook.distance;
bowtargetType.value = pointBook.bowtargetType;
}
});
</script>
<template>
@@ -54,25 +63,31 @@ const toEditPage = () => {
title="计分本"
>
<view class="container">
<image src="../static/point-book-banner.png" mode="widthFix" />
<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"
/>
<EditOption
:itemIndex="1"
:expand="expandIndex === 1"
:onExpand="onExpandChange"
:onSelect="onSelect"
:value="distance + ''"
/>
<EditOption
:itemIndex="2"
:expand="expandIndex === 2"
:onExpand="onExpandChange"
:onSelect="onSelect"
:value="bowtargetType"
/>
<EditOption
:itemIndex="3"

56
src/pages/point-book-edit.vue
View File

@@ -3,6 +3,7 @@ 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";
const clickable = ref(false);
const showTip = ref(false);
@@ -39,13 +40,16 @@ const onClickRing = (ring) => {
if (arrowGroups.value[currentGroup.value]) {
arrowGroups.value[currentGroup.value][currentArrow.value] = ring;
clickable.value = arrowGroups.value[currentGroup.value].every(
(item) => item !== null
(item) => !!item
);
if (currentArrow.value < amount.value - 1) {
currentArrow.value++;
}
}
};
const deleteArrow = () => {
arrowGroups.value[currentGroup.value][currentArrow.value] = "";
};
onMounted(() => {
const pointBook = uni.getStorageSync("point-book");
@@ -53,7 +57,7 @@ onMounted(() => {
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(null);
arrowGroups.value[i] = new Array(amount.value).fill("");
}
}
});
@@ -67,12 +71,16 @@ onMounted(() => {
:onBack="() => (showTip = true)"
>
<view class="container">
<view class="bow-target">
<image src="../static/bow-target.png" mode="widthFix" />
</view>
<BowTargetEdit />
<view class="title-bar">
<view />
<text>第 {{ currentGroup }} 组</text>
<view>
<view />
<text>第 {{ currentGroup }} 组</text>
</view>
<view @click="deleteArrow">
<image src="../static/delete.png" />
<text>删除</text>
</view>
</view>
<view class="bow-arrows">
<view
@@ -84,12 +92,12 @@ onMounted(() => {
borderColor: currentArrow === index ? '#FED847' : '#eeeeee',
borderWidth: currentArrow === index ? '2px' : '1px',
}"
>{{ arrow === null ? "" : arrow + " 环" }}</view
>{{ isNaN(arrow) ? arrow : arrow ? arrow + " 环" : "" }}</view
>
</view>
<text>输入分值的情况下，系统不提供落点稳定性分</text>
<view class="bow-rings">
<view @click="() => onClickRing(11)">X</view>
<view @click="() => onClickRing('X')">X</view>
<view
v-for="i in 10"
:key="i"
@@ -97,7 +105,7 @@ onMounted(() => {
:style="{ backgroundColor: ringColors[i] || '#d8d8d8' }"
>{{ 11 - i }}</view
>
<view @click="() => onClickRing(0)">M</view>
<view @click="() => onClickRing('M')">M</view>
</view>
<ScreenHint2 :show="showTip">
<view class="tip-content">
@@ -194,27 +202,35 @@ onMounted(() => {
.tip-content > view > button:last-child {
background: #fed847;
}
.bow-target {
width: 90%;
margin: 10px auto;
}
.bow-target > image {
width: 100%;
}
.title-bar {
width: 100%;
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 {
.title-bar > view:first-child > view:first-child {
width: 5px;
height: 15px;
border-radius: 10px;
background-color: #fed847;
margin-right: 7px;
margin-left: 15px;
}
.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>