anonymous
130 lines
3.8 KiB
Vue
130 lines
3.8 KiB
Vue
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
|
||
<route lang="json5" type="home">
|
||
{
|
||
style: {
|
||
navigationStyle: 'custom',
|
||
navigationBarTitleText: '首页',
|
||
},
|
||
}
|
||
</route>
|
||
<template>
|
||
<view class="home-page">
|
||
<NavBar />
|
||
<image
|
||
class="mx-auto block w-345 h-170 mt-15 rounded-10 overflow-hidden"
|
||
src="@/static/images/home/main-bg.png"
|
||
mode="aspectFill"
|
||
/>
|
||
<view class="flex bg-#F5F9FF py-15 rounded-10 m-15 border-2 border-white border-solid">
|
||
<view class="flex-1 flex flex-col items-center" @click="handleIntroduction">
|
||
<image class="w-30 h-30" src="@/static/images/home/nav-1.png" mode="aspectFill" />
|
||
<text class="mt-8 text-14 text-#333">简介</text>
|
||
</view>
|
||
<!-- <view class="flex-1 flex flex-col items-center" @click="handleInvite">
|
||
<image class="w-30 h-30" src="@/static/images/home/nav-2.png" mode="aspectFill" />
|
||
<text class="mt-8 text-14 text-#333">抽奖转盘</text>
|
||
</view> -->
|
||
<view class="flex-1 flex flex-col items-center" @click="handleReward">
|
||
<image class="w-30 h-30" src="@/static/images/home/nav-2.png" mode="aspectFill" />
|
||
<text class="mt-8 text-14 text-#333">奖励制度</text>
|
||
</view>
|
||
<view class="flex-1 flex flex-col items-center" @click="handleOfficialCommunity">
|
||
<image class="w-30 h-30" src="@/static/images/home/nav-3.png" mode="aspectFill" />
|
||
<text class="mt-8 text-14 text-#333">官方社群</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="flex bg-white py-8 px-15 rounded-10 m-15 items-center">
|
||
<view class="text-14 text-#333">系统公告</view>
|
||
<view class="flex-1">
|
||
<wd-notice-bar
|
||
color="#999999"
|
||
background-color="transparent"
|
||
:text="announcementList.map((item) => item.name)"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="bg-white py-15 px-15 rounded-10 m-15">
|
||
<view class="text-14 text-#333">热点新闻</view>
|
||
<view
|
||
class="flex mt-15"
|
||
v-for="item in newsList"
|
||
:key="item.id"
|
||
@click="handleNewsDetail(item.id)"
|
||
>
|
||
<image class="w-85 h-85 rounded-10" :src="item.image" mode="aspectFill" />
|
||
<view class="ml-15 flex-1 flex flex-col justify-between">
|
||
<view text-14>{{ item.name }}</view>
|
||
<view class="text-12 text-#999">{{ item.source }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import NavBar from '@/components/NavBar.vue'
|
||
import { getIntroductionAPI } from '@/service'
|
||
import { showModal } from '@/utils'
|
||
|
||
defineOptions({
|
||
name: 'Home',
|
||
})
|
||
|
||
const { list: newsList } = useListPageRequest((params) =>
|
||
getIntroductionAPI({ type: 1, ...params }),
|
||
)
|
||
|
||
// 系统公告
|
||
const { list: announcementList } = useListPageRequest((params) =>
|
||
getIntroductionAPI({ type: 2, ...params }),
|
||
)
|
||
|
||
const handleIntroduction = () => {
|
||
uni.navigateTo({
|
||
url: '/pages-sub/introduction/index',
|
||
})
|
||
}
|
||
|
||
const handleNewsDetail = (id: number) => {
|
||
uni.navigateTo({
|
||
url: `/pages-sub/news-detail/index?id=${id}`,
|
||
})
|
||
}
|
||
|
||
const handleInvite = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/invite/index',
|
||
})
|
||
}
|
||
|
||
const handleOfficialCommunity = () => {
|
||
uni.navigateTo({
|
||
url: '/pages-sub/official-community/index',
|
||
})
|
||
}
|
||
|
||
const handleReward = () => {
|
||
showModal(
|
||
`1.注册立即送5000股马尔代夫股权；\n
|
||
2.每股马尔代夫股权价值500元；\n
|
||
3.每邀请一人可以获得20股马尔代夫股权`,
|
||
{
|
||
title: '奖励制度',
|
||
confirmText: '我知道了',
|
||
},
|
||
)
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.home-page {
|
||
min-height: 100vh;
|
||
padding-bottom: 100rpx;
|
||
background-image: url('@/static/images/bg.png');
|
||
background-position: top;
|
||
background-size: cover;
|
||
}
|
||
</style>
|