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> <style scoped>
.footer { .footer {
height: 90px; height: 90px;
width: 100%; width: 100vw;
position: relative; position: relative;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
overflow-x: hidden;
} }
.footer-bg { .footer-bg {

20
src/components/Container.vue
View File

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

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

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

235
src/pages/index.vue
View File

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

77
src/pages/practise.vue
View File

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

77
src/pages/user.vue
View File

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