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
2025-07-02 17:21:44 +08:00
parent 5c5b72d556
commit 7fb72c9b1e
6 changed files with 261 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/AppFooter.vue
View File

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

20
src/components/Container.vue
View File

@@ -2,6 +2,7 @@
import { ref, onMounted } from "vue";
import AppBackground from "@/components/AppBackground.vue";
import Header from "@/components/Header.vue";
import ScreenHint from "@/components/ScreenHint.vue";
defineProps({
title: {
type: String,
@@ -19,30 +20,45 @@ defineProps({
type: String,
default: "auto",
},
isHome: {
type: Boolean,
default: false,
},
});
const isIos = ref(true);
const showHint = ref(false);
const hintMessage = ref("");
onMounted(() => {
const deviceInfo = uni.getDeviceInfo();
isIos.value = deviceInfo.osName === "ios";
});
const showGlobalHint = (message) => {
hintMessage.value = message;
showHint.value = true;
};
uni.$showHint = showGlobalHint;
</script>
<template>
<view>
<AppBackground :type="bgType" />
<Header :title="title" :onBack="onBack" />
<Header v-if="!isHome" :title="title" :onBack="onBack" />
<view
class="content"
:style="{ height: `calc(100vh - ${isIos ? 98 : 95}px)`, overflow }"
:style="{ height: isHome ? '100vh' : `calc(100vh - ${isIos ? 98 : 95}px)`, overflow }"
>
<slot></slot>
</view>
<ScreenHint :show="showHint" :onClose="() => (showHint = false)">
{{ hintMessage }}
</ScreenHint>
</view>
</template>
<style scoped>
.content {
width: 100vw;
height: 100vh;
overflow-x: hidden;
display: flex;
flex-direction: column;

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

@@ -1,7 +1,6 @@
<script setup>
import { ref } from "vue";
import AppBackground from "@/components/AppBackground.vue";
import Header from "@/components/Header.vue";
import Container from "@/components/Container.vue";
import Guide from "@/components/Guide.vue";
import SButton from "@/components/SButton.vue";
import SModal from "@/components/SModal.vue";
@@ -51,48 +50,48 @@ const onCreateRoom = () => {
</script>
<template>
<view>
<AppBackground />
<Header title="好友约战" />
<Guide>
<view class="guide-tips">
<text>约上朋友开几局，欢乐多，不寂寞</text>
<text>一起练升级更快，早日加入全国排位赛！</text>
</view>
</Guide>
<view class="founded-room">
<image src="../static/founded-room.png" mode="widthFix" />
<view>
<input
placeholder="输入房间号"
v-model="roomNumber"
placeholder-style="color: #ccc"
/>
<view @click="enterRoom">进入房间</view>
</view>
</view>
<view class="create-room">
<image src="../static/battle-bg.png" mode="widthFix" />
<view>
<image src="../static/avatar.png" mode="widthFix" />
<image src="../static/versus.png" mode="widthFix" />
<Container title="好友约战">
<view :style="{ width: '100%' }">
<Guide>
<view class="guide-tips">
<text>约上朋友开几局，欢乐多，不寂寞</text>
<text>一起练升级更快，早日加入全国排位赛！</text>
</view>
</Guide>
<view class="founded-room">
<image src="../static/founded-room.png" mode="widthFix" />
<view>
<image src="../static/question-mark.png" mode="widthFix" />
<input
placeholder="输入房间号"
v-model="roomNumber"
placeholder-style="color: #ccc"
/>
<view @click="enterRoom">进入房间</view>
</view>
</view>
<view>
<SButton width="70%" :rounded="30" :onClick="onCreateRoom">
创建约战房
</SButton>
<view class="create-room">
<image src="../static/battle-bg.png" mode="widthFix" />
<view>
<image src="../static/avatar.png" mode="widthFix" />
<image src="../static/versus.png" mode="widthFix" />
<view>
<image src="../static/question-mark.png" mode="widthFix" />
</view>
</view>
<view>
<SButton width="70%" :rounded="30" :onClick="onCreateRoom">
创建约战房
</SButton>
</view>
</view>
<SModal :show="showModal" :onClose="() => (showModal = false)">
<view v-if="warnning" class="warnning">
{{ warnning }}
</view>
<CreateRoom v-if="!warnning" :onConfirm="() => (showModal = false)" />
</SModal>
</view>
<SModal :show="showModal" :onClose="() => (showModal = false)">
<view v-if="warnning" class="warnning">
{{ warnning }}
</view>
<CreateRoom v-if="!warnning" :onConfirm="() => (showModal = false)" />
</SModal>
</view>
</Container>
</template>
<style scoped>

235
src/pages/index.vue
View File

@@ -1,5 +1,6 @@
<script setup>
import { ref, onMounted } from "vue";
import Container from "@/components/Container.vue";
import AppFooter from "@/components/AppFooter.vue";
import AppBackground from "@/components/AppBackground.vue";
import UserHeader from "@/components/UserHeader.vue";
@@ -86,134 +87,141 @@ const comingSoon = () => {
</script>
<template>
<view
class="root-container"
:style="{ paddingTop: isIos ? '100rpx' : '70rpx' }"
>
<AppBackground />
<UserHeader showRank :onSignin="() => (showModal = true)" />
<view class="container">
<view class="feature-grid">
<view class="bow-card">
<image
src="../static/bow-bg.png"
mode="widthFix"
@click="() => toPage('/pages/my-device')"
/>
<text v-if="!user.id">我的弓箭</text>
<text v-if="user.id && !device.deviceId">请绑定设备</text>
<text v-if="user.id && device.deviceId">{{ device.deviceName }}</text>
<image
src="../static/a2@2x.png"
mode="widthFix"
@click="() => toPage('/pages/first-try')"
/>
</view>
<Container :isHome="true">
<view class="container" :style="{ paddingTop: isIos ? '100rpx' : '70rpx' }">
<UserHeader showRank :onSignin="() => (showModal = true)" />
<view :style="{ padding: '12px 10px' }">
<view class="feature-grid">
<view class="bow-card">
<image
src="../static/bow-bg.png"
mode="widthFix"
@click="() => toPage('/pages/my-device')"
/>
<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>
</view>
<view class="ranking-section">
<image src="../static/a4@2x.png" mode="widthFix" />
<button
class="into-btn"
@click="() => toPage('/pages/ranking')"
hover-class="none"
></button>
<view class="ranking-players" @click="toRankListPage">
<img src="../static/juezhanbang.png" mode="widthFix" />
<view class="divide-line"></view>
<view class="player-avatars">
<block v-for="i in 6" :key="i">
<block v-if="rankData.rank && rankData.rank[i - 1]">
<view
class="player-avatar"
:style="{
zIndex: 8 - i,
borderColor: topThreeColors[i - 1] || '#000',
}"
>
<image v-if="i === 1" src="../static/champ1.png" />
<image v-if="i === 2" src="../static/champ2.png" />
<image v-if="i === 3" src="../static/champ3.png" />
<view v-if="i > 3">{{ i }}</view>
<image :src="rankData.rank[i - 1].avatar" mode="aspectFill" />
</view>
</block>
</block>
<view class="more-players">
<text>{{ rankData.rank.length }}</text>
</view>
<text v-if="!user.id">我的弓箭</text>
<text v-if="user.id && !device.deviceId">请绑定设备</text>
<text v-if="user.id && device.deviceId">{{
device.deviceName
}}</text>
<image
src="../static/a2@2x.png"
mode="widthFix"
@click="() => toPage('/pages/first-try')"
/>
</view>
</view>
<view class="region-stats">
<view class="practice-card" @click="() => toPage('/pages/practise')">
<image src="../static/a2@2x(1).png" mode="widthFix" />
</view>
<view
v-for="(region, index) in ['广东', '湖南', '内蒙', '海南', '四川']"
:key="index"
class="region-item"
@click="comingSoon"
class="friend-card"
@click="() => toPage('/pages/friend-battle')"
>
<image src="../static/region-bg.png" mode="widthFix" />
<image
v-if="index === 0"
src="../static/region-1.png"
mode="widthFix"
/>
<image
v-if="index === 1"
src="../static/region-2.png"
mode="widthFix"
/>
<image
v-if="index === 2"
src="../static/region-3.png"
mode="widthFix"
/>
<image
v-if="index === 3"
src="../static/region-4.png"
mode="widthFix"
/>
<image
v-if="index === 4"
src="../static/region-5.png"
mode="widthFix"
/>
<text>{{ region }}</text>
<view>
<text :style="{ color: '#fff', marginRight: '2px' }">2323</text>
<text>分</text>
<image src="../static/a3@2x.png" mode="widthFix" />
</view>
</view>
<view class="ranking-section">
<image src="../static/a4@2x.png" mode="widthFix" />
<button
class="into-btn"
@click="() => toPage('/pages/ranking')"
hover-class="none"
></button>
<view class="ranking-players" @click="toRankListPage">
<img src="../static/juezhanbang.png" mode="widthFix" />
<view class="divide-line"></view>
<view class="player-avatars">
<block v-for="i in 6" :key="i">
<block v-if="rankData.rank && rankData.rank[i - 1]">
<view
class="player-avatar"
:style="{
zIndex: 8 - i,
borderColor: topThreeColors[i - 1] || '#000',
}"
>
<image v-if="i === 1" src="../static/champ1.png" />
<image v-if="i === 2" src="../static/champ2.png" />
<image v-if="i === 3" src="../static/champ3.png" />
<view v-if="i > 3">{{ i }}</view>
<image
:src="rankData.rank[i - 1].avatar"
mode="aspectFill"
/>
</view>
</block>
</block>
<view class="more-players">
<text>{{ rankData.rank.length }}</text>
</view>
</view>
</view>
<view class="region-more" @click="comingSoon">
<image src="../static/region-more.png" mode="widthFix" />
<text>...</text>
<text>更多</text>
<view class="region-stats">
<view
v-for="(region, index) in [
'广东',
'湖南',
'内蒙',
'海南',
'四川',
]"
:key="index"
class="region-item"
@click="comingSoon"
>
<image src="../static/region-bg.png" mode="widthFix" />
<image
v-if="index === 0"
src="../static/region-1.png"
mode="widthFix"
/>
<image
v-if="index === 1"
src="../static/region-2.png"
mode="widthFix"
/>
<image
v-if="index === 2"
src="../static/region-3.png"
mode="widthFix"
/>
<image
v-if="index === 3"
src="../static/region-4.png"
mode="widthFix"
/>
<image
v-if="index === 4"
src="../static/region-5.png"
mode="widthFix"
/>
<text>{{ region }}</text>
<view>
<text :style="{ color: '#fff', marginRight: '2px' }">2323</text>
<text>分</text>
</view>
</view>
<view class="region-more" @click="comingSoon">
<image src="../static/region-more.png" mode="widthFix" />
<text>...</text>
<text>更多</text>
</view>
</view>
</view>
</view>
<SModal :show="showModal" :onClose="() => (showModal = false)">
<Signin :onClose="() => (showModal = false)" />
</SModal>
</view>
<AppFooter :signin="() => (showModal = true)" />
<SModal :show="showModal" :onClose="() => (showModal = false)">
<Signin :onClose="() => (showModal = false)" />
</SModal>
</view>
</Container>
</template>
<style scoped>
.root-container {
color: white;
position: relative;
}
.container {
height: calc(100vh - 210px);
padding: 15px 10px;
width: 100%;
}
.feature-grid {
@@ -352,6 +360,7 @@ const comingSoon = () => {
.more-players > text {
margin-left: 2px;
color: #fff;
}
.region-stats {

77
src/pages/practise.vue
View File

@@ -1,6 +1,5 @@
<script setup>
import AppBackground from "@/components/AppBackground.vue";
import Header from "@/components/Header.vue";
import Container from "@/components/Container.vue";
import Guide from "@/components/Guide.vue";
const toPractiseOne = () => {
@@ -17,40 +16,48 @@ const toPractiseTwo = () => {
</script>
<template>
<view>
<AppBackground />
<Header title="个人练习" />
<Guide>
<text :style="{ color: '#fed847' }"
>师傅领进门，修行靠自身，赶紧练起来吧。</text
>
<text :style="{ fontSize: '12px' }"
>坚持练习就能你快速升级，早日加入全国排位赛！</text
>
</Guide>
<image
src="../static/practise-bg.png"
class="practise-bg"
mode="widthFix"
:style="{ marginTop: 0 }"
/>
<view class="practise-btn" @click="toPractiseOne">
<image src="../static/practise1.png" class="practise1" mode="widthFix" />
<Container title="个人练习">
<view :style="{ width: '100%' }">
<Guide>
<text :style="{ color: '#fed847' }"
>师傅领进门，修行靠自身，赶紧练起来吧。</text
>
<text :style="{ fontSize: '12px' }"
>坚持练习就能你快速升级，早日加入全国排位赛！</text
>
</Guide>
<image
src="../static/practise-bg.png"
class="practise-bg"
mode="widthFix"
:style="{ marginTop: 0 }"
/>
<view class="practise-btn" @click="toPractiseOne">
<image
src="../static/practise1.png"
class="practise1"
mode="widthFix"
/>
</view>
<image
src="../static/practise-bg.png"
class="practise-bg"
mode="widthFix"
/>
<view class="practise-btn" @click="toPractiseTwo">
<image
src="../static/practise2.png"
class="practise2"
mode="widthFix"
/>
</view>
<image
src="../static/practise-bg.png"
class="practise-bg"
mode="widthFix"
/>
</view>
<image
src="../static/practise-bg.png"
class="practise-bg"
mode="widthFix"
/>
<view class="practise-btn" @click="toPractiseTwo">
<image src="../static/practise2.png" class="practise2" mode="widthFix" />
</view>
<image
src="../static/practise-bg.png"
class="practise-bg"
mode="widthFix"
/>
</view>
</Container>
</template>
<style scoped>

77
src/pages/user.vue
View File

@@ -1,6 +1,5 @@
<script setup>
import AppBackground from "@/components/AppBackground.vue";
import Header from "@/components/Header.vue";
import Container from "@/components/Container.vue";
import UserHeader from "@/components/UserHeader.vue";
import UserItem from "@/components/UserItem.vue";
import Avatar from "@/components/Avatar.vue";
@@ -55,44 +54,46 @@ const logout = () => {
</script>
<template>
<view>
<AppBackground />
<Header title="用户信息" />
<UserHeader :user="user" />
<view class="container">
<UserItem title="用户名">{{ user.nickName }}</UserItem>
<UserItem title="头像">
<Avatar :src="user.avatar" :size="35" />
</UserItem>
<UserItem
title="订单"
:customStyle="{
marginTop: '10px',
}"
:onClick="toOrderPage"
/>
<UserItem
title="新手试炼场"
:onClick="user.trio > 0 ? null : toFristTryPage"
>
<text v-if="user.trio > 0" :style="{ color: '#259249' }">已完成</text>
<text v-else :style="{ color: '#CC311F' }">未完成</text>
</UserItem>
<UserItem title="会员" :onClick="toBeVipPage"> 已赠送6个月会员 </UserItem>
<UserItem title="等级介绍" :onClick="toGradeIntroPage" />
<UserItem
title="段位介绍"
:customStyle="{
marginBottom: '10px',
}"
:onClick="toRankIntroPage"
/>
<view class="my-grow" @click="toMyGrowthPage">
<image src="../static/my-grow.png" mode="widthFix" />
<Container title="用户信息">
<view :style="{ width: '100%' }">
<UserHeader :user="user" />
<view class="container">
<UserItem title="用户名">{{ user.nickName }}</UserItem>
<UserItem title="头像">
<Avatar :src="user.avatar" :size="35" />
</UserItem>
<UserItem
title="订单"
:customStyle="{
marginTop: '10px',
}"
:onClick="toOrderPage"
/>
<UserItem
title="新手试炼场"
:onClick="user.trio > 0 ? null : toFristTryPage"
>
<text v-if="user.trio > 0" :style="{ color: '#259249' }">已完成</text>
<text v-else :style="{ color: '#CC311F' }">未完成</text>
</UserItem>
<UserItem title="会员" :onClick="toBeVipPage">
已赠送6个月会员
</UserItem>
<UserItem title="等级介绍" :onClick="toGradeIntroPage" />
<UserItem
title="段位介绍"
:customStyle="{
marginBottom: '10px',
}"
:onClick="toRankIntroPage"
/>
<view class="my-grow" @click="toMyGrowthPage">
<image src="../static/my-grow.png" mode="widthFix" />
</view>
<UserItem title="退出登录(仅用于测试)" :onClick="logout" />
</view>
<UserItem title="退出登录(仅用于测试)" :onClick="logout" />
</view>
</view>
</Container>
</template>
<style scoped>