zzak/x-forend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 前端重构

Browse Source
This commit is contained in:
anonymous
2025-01-07 18:04:40 +08:00
parent dbb57f07c3
commit 21d8f75f6a
43 changed files with 705 additions and 359 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/index/index.vue
+90 -68
View File
@@ -10,47 +10,45 @@
<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="handleDownload">
<image class="w-30 h-30" src="@/static/images/home/nav-2.png" mode="aspectFill" />
<text class="mt-8 text-14 text-#333">下载APP</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 class="main-container w-345 h-185 mx-auto rounded-14 px-20 pt-70 text-12">
<view>姓名：***</view>
<view class="mt-15">社会xx号码：***</view>
<view class="mt-15">中国工商银行卡号：**************</view>
</view>
<view
class="mt-15 btn-gradient w-345 h-45 leading-45 mx-auto text-white rounded-full text-center"
@click="handleOpenAccount"
>
开通个人养老账号
</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 class="bg-white pt-15 px-15 rounded-10 m-15">
<view class="flex justify-between items-center">
<view class="text-14 text-#333">最新时讯</view>
<!-- <view class="text-12 text-#999" @click="handleNews">查看全部</view> -->
</view>
<swiper
indicator-active-color="#3B81F3"
indicator-color="rgba(0,0,0,0.1)"
indicator-dots
autoplay
circular
class="h-240 mt-10"
>
<swiper-item v-for="item in newsList" :key="item.id" @click="handleNewsDetail(item.id)">
<image class="w-full h-160" :src="item.image" mode="aspectFill" />
<view class="mt-10 flex-1 flex flex-col justify-between">
<view text-14>{{ item.name }}</view>
</view>
</swiper-item>
</swiper>
</view>
<view class="bg-white py-15 px-15 rounded-10 m-15">
<view class="text-14 text-#333">热点新闻</view>
<view class="flex justify-between items-center">
<view class="text-14 text-#333">热点新闻</view>
<view class="text-12 text-#999" @click="handleHotNews">查看全部</view>
</view>
<view
class="flex mt-15"
v-for="item in newsList"
@@ -64,14 +62,28 @@
</view>
</view>
</view>
<wd-popup v-model="showRealName" custom-style="border-radius:32rpx;">
<view class="p-15 w-345">
<text class="custom-txt">实名立即送5000股马尔代夫股权</text>
<wd-popup :lockScroll="false" v-model="showNotice" custom-style="border-radius:40rpx;">
<view class="px-30 py-30 w-330 h-457 notice-container rounded-20 flex flex-col">
<view class="text-18 font-bold py-15 text-center">系统公告</view>
<view class="py-15 flex-1">
<view
v-for="(item, index) in announcementList"
:key="item.id"
class="flex border-b-1 border-b-gray-300 border-b-solid py-15"
>
<text class="whitespace-nowrap text-14 font-bold text-gradient">
公告{{ ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'][index] }}：
</text>
<text class="text-14 text-#333 flex-1">
{{ item.content }}
</text>
</view>
</view>
<view
@click="handleRealName"
class="mt-15 btn-gradient rounded-full text-center text-14 text-white py-15 mt-15"
@click="showNotice = false"
class="btn-gradient rounded-full text-center text-14 text-white py-8 mt-15"
>
去认证
确定
</view>
</view>
</wd-popup>
@@ -91,11 +103,6 @@ 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',
@@ -124,38 +131,53 @@ const handleDownload = () => {
downloadAppAPI()
}
const handleReward = () => {
showModal(
`1.注册立即送5000股马尔代夫股权；\n
2.每股马尔代夫股权价值500元；\n
3.每邀请一人可以获得20股马尔代夫股权`,
{
title: '奖励制度',
confirmText: '我知道了',
},
)
}
const showNotice = ref(false)
const showRealName = ref(false)
const handleRealName = () => {
const handleNews = () => {
uni.navigateTo({
url: '/pages-sub/realname/index',
url: '/pages-sub/news/index',
})
}
onLoad(async () => {
const res = await getRealNameAuthAPI()
if (!res.data) {
showRealName.value = true
}
})
const handleHotNews = () => {
uni.navigateTo({
url: '/pages-sub/hot-news/index',
})
}
// 系统公告
const { list: announcementList } = useListPageRequest((params) =>
getIntroductionAPI({ type: 2, ...params }),
)
watch(
() => announcementList.value.length,
(newVal) => {
if (newVal > 0) {
showNotice.value = true
}
},
)
const handleOpenAccount = () => {
showModal('开通个人养老账户时，需邀请一名用户')
}
</script>
<style>
<style scoped>
.home-page {
min-height: 100vh;
padding-bottom: 100rpx;
background-image: url('@/static/images/bg.png');
background-image: url('@/static/images/home/bg.jpg');
background-position: top;
background-size: cover;
}
.main-container {
background-image: url('@/static/images/home/main-bg.jpg');
background-position: top;
background-size: cover;
}
.notice-container {
background-image: url('@/static/images/home/notice-bg.jpg');
background-position: top;
background-size: cover;
}