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

页面布局优化

Browse Source
This commit is contained in:
kron
2026-01-09 18:12:27 +08:00
parent 937fce1a35
commit 155f2986c7
16 changed files with 140 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/AppFooter.vue
View File

@@ -43,13 +43,13 @@ function handleTabClick(index) {
<style scoped>
.footer {
height: 117px;
height: 120px;
width: 100vw;
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
overflow-x: hidden;
overflow: hidden;
}
.footer-bg {
width: 100%;

35
src/components/Container.vue
View File

@@ -21,9 +21,9 @@ const props = defineProps({
type: Function,
default: null,
},
overflow: {
type: String,
default: "auto",
scroll: {
type: Boolean,
default: true,
},
isHome: {
type: Boolean,
@@ -42,6 +42,7 @@ const props = defineProps({
default: true,
},
});
const isIOS = uni.getDeviceInfo().osName === "ios";
const showHint = ref(false);
const hintType = ref(0);
const capsuleHeight = ref(0);
@@ -150,14 +151,25 @@ const goCalibration = async () => {
:whiteBackArrow="whiteBackArrow"
/>
<BackToGame v-if="showBackToGame" />
<view
class="content"
<scroll-view
:scroll-y="scroll"
:enhanced="true"
:bounces="false"
:show-scrollbar="false"
:style="{
height: `calc(100vh - ${capsuleHeight + (isHome ? 0 : 50)}px)`,
overflow,
height: `calc(100vh - ${capsuleHeight + (isHome ? 0 : 50)}px - ${
$slots.bottom ? (isIOS ? '85px' : '65px') : '0px'
})`,
}"
>
<slot></slot>
</scroll-view>
<view
class="bottom-part"
v-if="$slots.bottom"
:style="{ height: isIOS ? '75px' : '55px', paddingTop: '10px' }"
>
<slot name="bottom"></slot>
</view>
<ScreenHint :show="showHint">
<view v-if="hintType === 1" class="tip-content">
@@ -223,15 +235,6 @@ const goCalibration = async () => {
</template>
<style scoped>
.content {
width: 100vw;
overflow-x: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
overflow-x: hidden;
}
.tip-content {
flex-direction: column;
display: flex;

24
src/pages/about-us.vue
View File

@@ -1,24 +1,7 @@
<script setup>
import { ref, onMounted } from "vue";
import Container from "@/components/Container.vue";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const isIos = ref(false);
const openLink = () => {
// uni.navigateTo({
// url:
// "/pages/webview?url=" +
// encodeURIComponent("https://beian.miit.gov.cn/"),
// });
};
onMounted(() => {
const deviceInfo = uni.getDeviceInfo();
isIos.value = deviceInfo.osName === "ios";
});
const isIOS = uni.getDeviceInfo().osName === "ios";
</script>
<template>
@@ -34,8 +17,7 @@ onMounted(() => {
<view
class="copyright"
:style="{ paddingBottom: isIos ? '30rpx' : '20rpx' }"
@click="openLink"
:style="{ paddingBottom: isIOS ? '40rpx' : '20rpx' }"
>
<text>粤ICP备2025421150号-2X</text>
</view>
@@ -46,7 +28,7 @@ onMounted(() => {
<style scoped>
.container {
width: calc(100% - 50rpx);
height: 100%;
height: calc(100% - 50rpx);
padding: 25rpx;
background-color: #ffffff;
position: relative;

138
src/pages/be-vip.vue
View File

@@ -79,85 +79,73 @@ onBeforeUnmount(() => {
<template>
<Container title="会员说明">
<view :style="{ width: '100%', height: '100%' }">
<view v-if="user.id" class="header">
<view>
<Avatar :src="user.avatar" :size="35" />
<text class="truncate">{{ user.nickName }}</text>
<image
class="user-name-image"
src="../static/vip1.png"
mode="widthFix"
/>
</view>
<block v-if="refreshing">
<image
src="../static/btn-loading.png"
mode="widthFix"
class="loading"
/>
</block>
<block v-else>
<text v-if="user.expiredAt">
{{ formatTimestamp(user.expiredAt) }} 到期
</text>
</block>
<view v-if="user.id" class="header">
<view>
<Avatar :src="user.avatar" :size="35" />
<text class="truncate">{{ user.nickName }}</text>
<image
class="user-name-image"
src="../static/vip1.png"
mode="widthFix"
/>
</view>
<view
class="container"
:style="{ height: !user.id ? '100%' : 'calc(100% - 62px)' }"
>
<view class="content vip-content">
<view class="title-bar">
<view />
<text>VIP 介绍</text>
</view>
<view :style="{ marginTop: '10rpx' }">
<rich-text :nodes="richContent" />
<!-- <text
>射灵星球VIP服务，为全球弓箭手提供约战、段位评级、实时排位赛、智能教练点评等专属特权。会员可在酷帅的真实射箭运动中，同步享受在线竞技的乐趣，还能找到志同道合的伙伴，并获得新鲜的功能体验和持续升级的系统。
</text>
<text
>所有新注册用户，我们都会默认赠送6个月超长会员。到期之后可续费，单月10元，年度VIP100元。我们鼓励每一位弓箭手长期坚持练习这项运动，在对战的世界中尽情驰骋，不断挑战自我，创造属于自己的辉煌战绩。
</text>
<text
>VIP会员还将获得专属客服支持。当您在游戏中遇到任何问题，无论是技术故障、规则疑问还是其他需要帮助的情况，都可联系我们的VIP专属客服团队。他们将提供全年不间断的优质服务，确保您的对战体验不受影响。
</text>
<text>期待您的加入！</text> -->
</view>
<block v-if="refreshing">
<image
src="../static/btn-loading.png"
mode="widthFix"
class="loading"
/>
</block>
<block v-else>
<text v-if="user.expiredAt">
{{ formatTimestamp(user.expiredAt) }} 到期
</text>
</block>
</view>
<view
class="container"
:style="{ height: !user.id ? 'calc(100% - 10px)' : 'calc(100% - 62px)' }"
>
<view class="content vip-content">
<view class="title-bar">
<view />
<text>VIP 介绍</text>
</view>
<view class="content">
<view class="title-bar">
<view />
<text>会员续费</text>
</view>
<view class="vip-items">
<view
v-for="(item, index) in config.vipMenus || []"
:key="index"
:style="{
color: selectedVIP === index ? '#fff' : '#333333',
borderColor: selectedVIP === index ? '#FF7D57' : '#eee',
background:
selectedVIP === index
? '#FF7D57'
: 'linear-gradient(180deg, #fbfbfb 0%, #f5f5f5 100%)',
}"
@click="() => (selectedVIP = index)"
>
{{ item.name }}
</view>
</view>
<view :style="{ marginTop: '10rpx' }">
<rich-text :nodes="richContent" />
</view>
<SButton :onClick="onPay">支付</SButton>
<view class="my-orders" v-if="user.id">
<view @click="toOrderPage">
<text>我的订单</text>
<image src="../static/enter-arrow-blue.png" mode="widthFix" />
</view>
</view>
<Signin :show="showModal" :onClose="() => (showModal = false)" />
</view>
<view class="content">
<view class="title-bar">
<view />
<text>会员续费</text>
</view>
<view class="vip-items">
<view
v-for="(item, index) in config.vipMenus || []"
:key="index"
:style="{
color: selectedVIP === index ? '#fff' : '#333333',
borderColor: selectedVIP === index ? '#FF7D57' : '#eee',
background:
selectedVIP === index
? '#FF7D57'
: 'linear-gradient(180deg, #fbfbfb 0%, #f5f5f5 100%)',
}"
@click="() => (selectedVIP = index)"
>
{{ item.name }}
</view>
</view>
</view>
<SButton :onClick="onPay">支付</SButton>
<view class="my-orders" v-if="user.id">
<view @click="toOrderPage">
<text>我的订单</text>
<image src="../static/enter-arrow-blue.png" mode="widthFix" />
</view>
</view>
<Signin :show="showModal" :onClose="() => (showModal = false)" />
</view>
</Container>
</template>

4
src/pages/first-try.vue
View File

@@ -260,7 +260,7 @@ const onClose = () => {
/>
<canvas class="share-canvas" id="shareCanvas" type="2d"></canvas>
</view>
<view :style="{ marginBottom: '20px' }">
<template #bottom>
<SButton v-if="step !== 4" :onClick="nextStep" :disabled="btnDisabled">
<BubbleTip v-if="showGuide" :type="step === 1 ? 'long' : 'short'">
<text :style="{ transform: 'translateY(-18rpx)' }">{{
@@ -269,7 +269,7 @@ const onClose = () => {
</BubbleTip>
{{ stepButtonTexts[step] }}
</SButton>
</view>
</template>
</Container>
</template>

2
src/pages/friend-battle.vue
View File

@@ -82,7 +82,7 @@ onLoad(async (options) => {
<template>
<Container title="好友约战" :showBackToGame="true">
<view :style="{ width: '100%' }">
<view :style="{ width: '100%', height: '100%' }">
<Guide>
<view class="guide-tips">
<text>约上朋友开几局，欢乐多，不寂寞</text>

10
src/pages/grade-intro.vue
View File

@@ -28,7 +28,7 @@ const { user } = storeToRefs(store);
</view>
<!-- 说明文本 -->
<view class="content">
<view class="body">
<view class="intro-text">
在射灵世界中，等级是衡量您射箭技能的重要指标，而经验则是您提升等级的关键。具体的要求如下：
</view>
@@ -68,8 +68,8 @@ const { user } = storeToRefs(store);
height: 32rpx;
display: flex;
justify-content: center;
margin-top: 10px;
margin-bottom: 20px;
padding-top: 20rpx;
padding-bottom: 40rpx;
}
.progress-dot {
@@ -89,8 +89,8 @@ const { user } = storeToRefs(store);
background-color: #fff9;
}
.content {
height: calc(100% - 148rpx);
.body {
height: calc(100% - 146rpx);
background-color: #ffffff;
padding: 30rpx;
}

1
src/pages/index.vue
View File

@@ -252,6 +252,7 @@ onShareTimeline(() => {
<style scoped>
.container {
width: 100%;
height: calc(100% - 120px);
}
.feature-grid {

2
src/pages/my-growth.vue
View File

@@ -55,7 +55,7 @@ const onPractiseLoading = async (page) => {
</script>
<template>
<Container title="我的成长脚印" overflow="hidden">
<Container title="我的成长脚印" :scroll="false">
<view class="tabs">
<view
v-for="(rankType, index) in ['排位赛', '好友约战', '个人练习']"

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

@@ -85,59 +85,37 @@ onMounted(async () => {
title="选择参数"
>
<view class="container">
<!-- <view class="header">
<image
src="https://static.shelingxingqiu.com/attachment/2025-08-06/dbv8w5ak76hozbfpy2.png"
mode="widthFix"
/>
<view>
<view>
<text>{{ days }}</text>
<text>天</text>
</view>
<text>训练天数</text>
</view>
<view>
<view>
<text>{{ arrows }}</text>
<text>箭</text>
</view>
<text>训练箭数</text>
</view>
</view> -->
<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>
<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 :style="{ marginBottom: '20px' }">
<template #bottom>
<SButton :rounded="50" :onClick="toEditPage">下一步</SButton>
</view>
</template>
</Container>
</template>

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

@@ -197,11 +197,11 @@ onLoad((options) => {
</view>
</ScreenHint2>
</view>
<view :style="{ marginBottom: '20px' }">
<template #bottom>
<SButton :rounded="50" :onClick="onSubmit">
{{ currentGroup === groups ? "保存并查看分析" : "下一组" }}
</SButton>
</view>
</template>
</Container>
</template>

2
src/pages/point-book-rank.vue
View File

@@ -78,7 +78,7 @@ const shareImage = async () => {
<text>本周箭数</text>
<text>消耗</text>
</view>
<view class="data-list" :style="{ marginBottom: '20rpx' }" v-if="user.id">
<view class="data-list" :style="{ marginBottom: '20rpx' }" v-if="user.id && mine">
<PointRankItem :data="mine" :borderWidth="0" />
</view>
<view

15
src/pages/point-book.vue
View File

@@ -26,10 +26,7 @@ const store = useStore();
const { updateUser } = store;
const { user } = storeToRefs(store);
const isIOS = computed(() => {
const systemInfo = uni.getDeviceInfo();
return systemInfo.osName === "ios";
});
const isIOS = uni.getDeviceInfo().osName === "ios";
const loadImage = ref(false);
const showModal = ref(false);
@@ -97,11 +94,6 @@ const closeHint = () => {
};
const loadData = async () => {
const result = await getPointBookRankListAPI(1);
list.value = result.list.slice(0, 3);
if (list.value.every((item) => item.id !== user.value.id)) {
list.value = [result.my, ...result.list.slice(0, 3)];
}
const result2 = await getPointBookStatisticsAPI();
data.value = result2;
strength.value = Math.min(10, (5 / 60) * result2.todayTotalArrow);
@@ -173,6 +165,11 @@ watch(
onShow(async () => {
uni.removeStorageSync("point-book");
if (user.value.id) loadData();
const result = await getPointBookRankListAPI(1);
list.value = result.list.slice(0, 3);
if (user.value.id && list.value.every((item) => item.id !== user.value.id)) {
list.value = [result.my, ...result.list.slice(0, 3)];
}
});
onMounted(async () => {

8
src/pages/practise-one.vue
View File

@@ -105,10 +105,6 @@ onBeforeUnmount(() => {
uni.$off("socket-inbox", onReceiveMessage);
uni.$off("share-image", onClickShare);
audioManager.stopAll();
if (timer.value) {
clearTimeout(timer.value);
timer.value = null;
}
});
</script>
@@ -159,9 +155,9 @@ onBeforeUnmount(() => {
<canvas class="share-canvas" id="shareCanvas" type="2d"></canvas>
</block>
</view>
<view :style="{ marginBottom: '20px' }">
<template #bottom>
<SButton v-if="!start" :onClick="onReady">准备好了，直接开始</SButton>
</view>
</template>
</Container>
</template>

4
src/pages/practise-two.vue
View File

@@ -150,9 +150,9 @@ onBeforeUnmount(() => {
<canvas class="share-canvas" id="shareCanvas" type="2d"></canvas>
</block>
</view>
<view :style="{ marginBottom: '20px' }">
<template #bottom>
<SButton v-if="!start" :onClick="onReady">准备好了，直接开始</SButton>
</view>
</template>
</Container>
</template>

2
src/pages/practise.vue
View File

@@ -29,7 +29,7 @@ onShow(async () => {
<template>
<Container title="个人练习">
<view :style="{ width: '100%' }">
<view :style="{ width: '100%', height: '100%' }">
<Guide>
<view class="guide-tips">
<text>师傅领进门，修行靠自身，赶紧练起来吧。</text>