Skip to content

J
jiaxiu-miniapp
Commit bec8a37e authored by 彭佳妮（贵阳日报）'s avatar 彭佳妮（贵阳日报）
Browse files
Options

首页改版

parent 7d535a6e
Hide whitespace changes
Inline Side-by-side
Showing with 733 additions and 16 deletions
components.d.ts
View file @ bec8a37e
......@@ -20,6 +20,7 @@ declare module 'vue' {
VanImagePreview: typeof import('vant/es')['ImagePreview']
VanList: typeof import('vant/es')['List']
VanNavBar: typeof import('vant/es')['NavBar']
VanNoticeBar: typeof import('vant/es')['NoticeBar']
VanPopup: typeof import('vant/es')['Popup']
VanProgress: typeof import('vant/es')['Progress']
VanPullRefresh: typeof import('vant/es')['PullRefresh']
......@@ -28,6 +29,8 @@ declare module 'vue' {
VanStep: typeof import('vant/es')['Step']
VanSteps: typeof import('vant/es')['Steps']
VanSticky: typeof import('vant/es')['Sticky']
VanSwipe: typeof import('vant/es')['Swipe']
VanSwipeItem: typeof import('vant/es')['SwipeItem']
VanTab: typeof import('vant/es')['Tab']
VanTabs: typeof import('vant/es')['Tabs']
VanTextEllipsis: typeof import('vant/es')['TextEllipsis']
......
src/pages.json
View file @ bec8a37e
......@@ -15,13 +15,21 @@
}
},
{
"path": "pages/home/index",
"path": "pages/home/indexNew",
"name": "home",
"style": {
"navigationBarTitleText": "甲秀图库",
"navigationStyle": "custom"
}
},
{
"path": "pages/home/index",
"name": "home-index",
"style": {
"navigationBarTitleText": "甲秀图库",
"navigationStyle": "custom"
}
},
{
"path": "pages/classify/index",
"name": "classify",
......@@ -125,7 +133,14 @@
"style": {
"navigationBarTitleText": "分类详情"
}
}
},
{
"path": "pages/home/list",
"name": "home-list",
"style": {
"navigationBarTitleText": "图组列表"
}
},
],
"globalStyle": {
"navigationBarTextStyle": "black",
......@@ -144,7 +159,7 @@
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/home/index",
"pagePath": "pages/home/indexNew",
"iconPath": "static/image/home.png",
"selectedIconPath": "static/image/home-select.png",
"text": "首页"
......
src/pages/classify/list.vue
View file @ bec8a37e
......@@ -30,8 +30,9 @@
<span>{{ item.author }}</span>
</div>
<div class="collect">
<van-icon name="star-o" color="#9F9F9F" v-if="index < 5" />
<van-icon name="star" color="#F1C13E" v-else />
<van-icon name="star-o" color="#9F9F9F" />
<!-- <van-icon name="star-o" color="#9F9F9F" v-if="index < 5" />
<van-icon name="star" color="#F1C13E" v-else /> -->
<span>收藏</span>
</div>
</div>
......
src/pages/home/indexNew.vue 0 → 100644
View file @ bec8a37e
<template>
<Header backgroundBox="#D2E4FF" :show="false">
<div class="header">
<div class="title">推荐</div>
<div class="search">
<div class="s-box" @click="router.push({ name: 'home-list' })">
<van-icon name="search" color="#303030" />
<input class="placeholder" placeholder="请输入关键词" />
</div>
</div>
</div>
</Header>
<div class="bg">
<div class="content">
<div class="top">
<van-swipe :autoplay="3000" lazy-render>
<van-swipe-item v-for="image in images" :key="image">
<img class="img" :src="image" mode="aspectFill" />
</van-swipe-item>
</van-swipe>
</div>
<van-notice-bar color="#2879FE" background="#EFF4FB" left-icon="volume" text="公告信息" />
<div class="info">
<div class="titlebox" @click="router.push({ name: 'home-list' })" >
<div class="title">推荐图组</div>
<div class="flexend">
<div class="more">查看更多</div>
<van-icon name="arrow" color="#707070" size="12" />
</div>
</div>
<scroll-view scroll-x="true" class="scroll-view_H" style="white-space: nowrap;">
<div class="list">
<img :src="fileDomain + item.coverpicture" v-for="(item, index) in dataList" :key="index"
@click="router.push({ name: 'classify-detail', params: { id: item.materialId } })" />
</div>
</scroll-view>
</div>
<div class="info">
<div class="titlebox">
<div class="title">分类</div>
<div class="flexend" @click="router.pushTab({ name: 'classify' })">
<div class="more">查看更多</div>
<van-icon name="arrow" color="#707070" size="12" />
</div>
</div>
<div class="classifyList">
<div class="item" v-for="(item, index) in classifyList" :key="index"
@click="toClassifyDetail(item.classifyType, index)">
<img src="/static/image/defaultPic.png">
<div class="showMore" v-if="index == classifyList.length - 1">
<div class="more">查看更多</div>
</div>
<div class="blurbox" v-else>
<div class="bg"></div>
<div class="title">{{ item.classifyType }}</div>
</div>
</div>
</div>
</div>
<div style="height: 100rpx;"></div>
</div>
</div>
</template>
<script setup>
import { selectFinePictureList } from '@/api/publish'
import { selectClassifyTypeList } from '@/api/classify';
const router = useRouter()
const fileDomain = import.meta.env.VITE_APP_FILE_URL
const images = ref([
'../static/image/banner4.jpg',
'../static/image/banner2.jpg',
]);
const page = reactive({
pageNum: 1,
pageSize: 6
})
const catalog = reactive({
materialTitle: '',
collect: 1,
materialType: 3,
typeClassify: '',
sourceName: '',
organizeInt: [0],
tagId: '',
beginTime: '',
endTime: ''
})
const dataList = ref([])
const handleSelectFindList = async () => {
const res = await selectFinePictureList(page, catalog)
dataList.value.push(...res.data.list)
}
handleSelectFindList()
const queryParams = reactive({
materialType: 3,
classifyType: '',
})
const classifyList = ref([])
const getList = async () => {
page.pageNum++
const res = await selectClassifyTypeList(page, queryParams)
classifyList.value.push(...res.data.list)
}
getList()
const toClassifyDetail = (classifyType, idx) => {
if (idx == classifyList.value.length - 1) {
router.pushTab({ name: 'classify' })
} else {
router.push({ name: 'classify-list', params: { typeClassify: classifyType } })
}
}
</script>
<style scoped lang="scss">
.header {
display: flex;
align-items: center;
padding: 0 20px;
height: 50px;
gap: 15px;
background-color: #D2E4FF;
.title {
font-size: 18px;
font-weight: bold;
}
.search {
width: 45%;
background-color: #F7F8FA;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: space-between;
height: 32px;
opacity: 0.7;
padding: 0 10px;
.s-box {
display: flex;
align-items: center;
gap: 5px;
.placeholder {
color: #303030;
font-size: 14px;
}
}
}
}
.bg {
height: 100vh;
background: linear-gradient(to bottom, #D2E4FF 5%, #fff 25%);
.content {
padding: 30rpx 30rpx;
display: flex;
flex-direction: column;
gap: 30rpx;
.top {
border-radius: 14rpx;
.img {
width: 100%;
height: 360rpx;
border-radius: 14rpx;
}
}
.info {
display: flex;
flex-direction: column;
gap: 30rpx;
margin-top: 20rpx;
.titlebox {
display: flex;
align-items: center;
justify-content: space-between;
.title {
font-size: 32rpx;
font-weight: bold;
color: #000;
}
.flexend {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 8rpx;
.more {
font-size: 24rpx;
color: #707070;
}
}
}
.scroll-view_H {
width: 100%;
.list {
white-space: nowrap;
img {
object-fit: cover;
display: inline-block;
/* 内部元素横向展示 */
margin-right: 16rpx;
/* 可根据需求设置间距 */
width: 286rpx;
height: 340rpx;
border-radius: 6rpx;
}
}
}
.classifyList {
display: flex;
flex-wrap: wrap;
gap: 12rpx;
.item {
break-inside: avoid;
background-color: #ffffff;
border-radius: 10rpx;
margin-bottom: 20rpx;
width: 32%;
position: relative;
img {
width: 100%;
height: 340rpx;
object-fit: cover;
border-radius: 10rpx;
}
.showMore {
border-radius: 10rpx;
top: 0;
left: 0;
width: 100%;
height: 340rpx;
position: absolute;
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(20rpx);
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
.more {
font-size: 32rpx;
color: #fff;
}
}
.blurbox {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
bottom: 0;
height: 32px;
width: 100%;
border-radius: 0 0 5px 5px;
.bg {
position: absolute;
border-radius: 0 0 5px 5px;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px);
}
.title {
font-size: 28rpx;
color: #fff;
font-weight: bold;
z-index: 1;
}
}
}
}
}
}
}
</style>
\ No newline at end of file
src/pages/home/list.vue 0 → 100644
View file @ bec8a37e
<template>
<Header backgroundBox="white">
<div class="tools">
<van-search v-model="catalog.materialTitle" shape="round" placeholder="请输入搜索关键词" @search="handleRefresh"
@clear="handleRefresh" />
<!-- <div class="right" @click="router.push({ name: 'publish' })">
<van-icon name="add" size="26" color="#0E7CE3" />
<span>新建</span>
</div> -->
</div>
</Header>
<van-sticky :offset-top="contentHeight">
<div class="header">
<!-- <div class="tools">
<van-search v-model="catalog.materialTitle" shape="round" placeholder="请输入搜索关键词" @search="handleRefresh"
@clear="handleRefresh" />
<div class="right" @click="router.push({ name: 'publish' })">
<van-icon name="add" size="26" color="#0E7CE3" />
<span>新建</span>
</div>
</div> -->
<div class="menu">
<van-tabs v-model:active="tabsActive" line-width="20" title-active-color="#0E7CE3"
title-inactive-color="#82868E" @change="handleRefresh">
<van-tab title="推荐"></van-tab>
<van-tab title="最新"></van-tab>
</van-tabs>
<div class="filtrate">
<div class="item" @click="openTypePopup" :class="{ active: typeActive }">
<span>类型</span>
<van-icon :name="typeActive ? 'arrow-up' : 'arrow-down'" size="13" />
</div>
<div class="item" @click="openCatalogPopup" :class="{ active: tagsActive }">
<span>标签</span>
<van-icon :name="tagsActive ? 'arrow-up' : 'arrow-down'" size="13" />
</div>
<div class="item" @click="openSourcePopup" :class="{ active: sourceChannelActive }">
<span>来源</span>
<van-icon :name="sourceChannelActive ? 'arrow-up' : 'arrow-down'" size="13" />
</div>
</div>
</div>
</div>
</van-sticky>
<div class="content">
<van-pull-refresh v-model="refreshing" @refresh="handleRefresh">
<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" :offset="50" @load="getList"
v-if="dataList.length">
<div class="list">
<div class="item" v-for="(item, index) in dataList" :key="index"
@click="router.push({ name: 'home-content', params: { id: item.materialId } })">
<img :src="fileDomain + item.coverpicture">
<div class="desc">
<span class="title">
<van-text-ellipsis :content="item.materialTitle" />
</span>
<div class="tag">
<span v-for="(tagName, index) in item.tagName.split(',')" :key="index">{{ tagName
}}</span>
</div>
<div class="info">
<div class="user">
<img src="../../static/image/avatar.png">
<span>{{ item.author }}</span>
</div>
<div class="collect">
<van-icon name="star-o" color="#9F9F9F" />
<!-- <van-icon name="star-o" color="#9F9F9F" v-if="index < 5" />
<van-icon name="star" color="#F1C13E" v-else /> -->
<span>收藏</span>
</div>
</div>
</div>
</div>
</div>
</van-list>
<van-empty description="暂无数据" v-else />
</van-pull-refresh>
</div>
<type-popup ref="typePopupRef" @confirm="confirmTypePopup" @close="typeActive = false"></type-popup>
<source-channel-popup ref="sourceChannelPopupRef" @confirm="confirmSourceChannelPopup"
@close="sourceChannelActive = false"></source-channel-popup>
<tags-popup ref="tagsPopupRef" @confirm="confirmTagsPopup" @close="tagsActive = false"></tags-popup>
</template>
<script setup>
import TypePopup from '../components/TypePopup/index.vue'
import SourceChannelPopup from '../components/SourceChannelPopup/index.vue'
import TagsPopup from '../components/TagsPopup/index.vue'
import { selectFinePictureList, selectCoarsePictureList } from '@/api/publish'
import dayjs from 'dayjs'
import { useInitScroll } from '@/hooks/useScroll'
useInitScroll()
const contentHeight = ref(50)
onLoad(() => {
xma.xh.getMenuButtonBoundingClientRect({
success(res) {
contentHeight.value = (res.top + res.bottom) / 2 + 25;
},
});
})
const router = useRouter()
const tabsActive = ref(0)
const refreshing = ref(false)
const loading = ref(false)
const finished = ref(true)
const fileDomain = import.meta.env.VITE_APP_FILE_URL
const page = reactive({
pageNum: 0,
pageSize: 10
})
const catalog = reactive({
materialTitle: '',
collect: 1,
materialType: 3,
typeClassify: '',
sourceName: '',
organizeInt: [0],
tagId: '',
beginTime: '',
endTime: ''
})
const dataList = ref([])
const handleSelectFindList = async () => {
const res = await selectFinePictureList(page, catalog)
setDataList(res)
}
const handleSelectCoarseList = async () => {
const currentDate = new Date()
const sevenDaysAgo = new Date(currentDate.getTime() - 7 * 24 * 60 * 60 * 1000)
catalog.beginTime = dayjs(sevenDaysAgo).format('YYYY-MM-DD HH:mm:ss')
catalog.endTime = dayjs(currentDate).format('YYYY-MM-DD HH:mm:ss')
const res = await selectCoarsePictureList(page, catalog)
setDataList(res)
}
const getList = () => {
page.pageNum++
loading.value = true
if (tabsActive.value == 0) {
handleSelectFindList()
} else {
handleSelectCoarseList()
}
}
getList()
const handleRefresh = () => {
window.scroll(0, 0)
refreshing.value = true
page.pageNum = 0
getList()
}
const setDataList = (res) => {
if (refreshing.value) {
dataList.value = res.data.list
} else {
dataList.value.push(...res.data.list)
}
loading.value = false
finished.value = dataList.value.length >= res.data.total
refreshing.value = false
}
const typeActive = ref(false)
const typePopupRef = ref()
const openTypePopup = () => {
typeActive.value = true
typePopupRef.value.open()
}
const confirmTypePopup = (e) => {
page.pageNum = 0
catalog.typeClassify = e?.classifyType ?? ''
refreshing.value = true
getList()
}
const sourceChannelActive = ref(false)
const sourceChannelPopupRef = ref()
const openSourcePopup = () => {
sourceChannelActive.value = true
sourceChannelPopupRef.value.open()
}
const confirmSourceChannelPopup = (e) => {
page.pageNum = 0
catalog.sourceName = e?.sourceName ?? ''
refreshing.value = true
getList()
}
const tagsActive = ref(false)
const tagsPopupRef = ref()
const openCatalogPopup = () => {
tagsActive.value = true
tagsPopupRef.value.open()
}
const confirmTagsPopup = (e) => {
page.pageNum = 0
catalog.tagId = e?.id.toString() ?? ''
refreshing.value = true
getList()
}
</script>
<style lang="scss" scoped>
.tools {
display: flex;
gap: 10px;
margin-left: 40rpx;
:deep(.van-search) {
flex: 1;
padding: 0;
.van-search__content {
height: 100%;
.van-search__field {
height: 100%;
}
}
}
.right {
width: 35px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
span {
font-size: 13px;
color: #0E7CE3;
}
}
}
.header {
padding: 0 10px;
background-color: #ffffff;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
.menu {
display: flex;
justify-content: space-between;
padding-top: 10px;
:deep(.van-tabs__nav) {
gap: 30px;
padding-bottom: 0;
.van-tab {
font-size: 15px;
padding: 0;
flex: initial;
}
.van-tabs__line {
bottom: 5px;
background: #0E7CE3;
}
}
.filtrate {
display: flex;
align-items: center;
height: 44px;
gap: 10px;
.item {
display: flex;
gap: 2px;
align-items: center;
justify-content: center;
font-size: 14px;
background-color: #e7e8e9;
width: 60px;
height: 24px;
border-radius: 4px;
}
}
}
}
.header-placeholder {
height: 117px;
}
.content {
background-color: #f3f3f3;
padding: 10px 10px 0 10px;
min-height: 100vh;
.list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.item {
break-inside: avoid;
background-color: #ffffff;
border-radius: 5px;
margin-bottom: 10px;
width: 49%;
img {
width: 100%;
height: 150px;
object-fit: cover;
}
.desc {
padding: 5px 10px;
display: flex;
flex-direction: column;
gap: 5px;
.title {
font-size: 16px;
}
.tag {
display: flex;
flex-wrap: wrap;
gap: 3px;
span {
font-size: 14px;
padding: 0 5px;
background-color: #F3F8FF;
color: #4C70AC;
font-size: 12PX;
border-radius: 3px;
}
}
.info {
display: flex;
justify-content: space-between;
padding: 5px 0;
.user {
display: flex;
gap: 7px;
align-items: center;
img {
width: 23px;
height: 23px;
border-radius: 50%;
}
span {
color: #9F9F9F;
font-size: 12px;
}
}
}
.collect {
display: flex;
align-items: center;
gap: 3px;
span {
color: #9F9F9F;
font-size: 12px;
}
}
}
}
}
}
.active {
background-color: #0e7ce3 !important;
color: #ffffff !important;
}
</style>@/utils/useScroll@/hooks/useScroll
\ No newline at end of file
src/pages/home/loading.vue
View file @ bec8a37e
......@@ -12,8 +12,8 @@ const router = useRouter()
const userStore = useUserStore()
onLoad(async () => {
await fastLoginBySgy();
// if (userStore.logout) await signIn2();
// await fastLoginBySgy();
if (userStore.logout) await signIn2();
router.pushTab({ name: 'home' })
});
......
src/pages/mine/index.vue
View file @ bec8a37e
......@@ -98,6 +98,7 @@ const total = reactive({
onShow(() => {
toLogin()
// if (userStore.isLogin())
getOrganizeList()
})
......
src/pages/prefecture/index.vue
View file @ bec8a37e
......@@ -51,8 +51,9 @@
<span>{{ item.author }}</span>
</div>
<div class="collect">
<van-icon name="star-o" color="#9F9F9F" v-if="index < 5" />
<van-icon name="star" color="#F1C13E" v-else />
<van-icon name="star-o" color="#9F9F9F" />
<!-- <van-icon name="star-o" color="#9F9F9F" v-if="index < 5" />
<van-icon name="star" color="#F1C13E" v-else /> -->
<span>收藏</span>
</div>
</div>
......
src/pages/publish/components/AtlasInfo/index.vue
View file @ bec8a37e
......@@ -68,12 +68,12 @@ const areaConfirm = (selectedOptions) => {
const shoottimeCalendarConfirm = (data) => {
showShoottimeCalendar.value = false
formData.value.shoottime = dayjs(data).format('YYYY-MM-DD HH:mm:ss')
formData.value.shoottime = dayjs(data).format('YYYY-MM-DD')
}
const materialtimeCalendarConfirm = (data) => {
showMaterialtimeCalendar.value = false
formData.value.materialtime = dayjs(data).format('YYYY-MM-DD HH:mm:ss')
formData.value.materialtime = dayjs(data).format('YYYY-MM-DD')
}
const handleRegionPicker = () => {
......
src/pages/subject/index.vue
View file @ bec8a37e
......@@ -12,7 +12,7 @@
<div class="item"
@click="router.push({ name: 'subject-list', params: { tagId: item.tagId, tagName: item.tagName } })"
v-for="(item, index) in dataList" :key="index">
<img class="cover" src="../../static/image/subject-cover.png">
<img class="cover" src="../../static/image/banner1.jpg">
<div class="title">{{ item.tagName }}</div>
</div>
</div>
......@@ -70,6 +70,7 @@ getList()
width: 77px;
height: 77px;
border-radius: 50%;
object-fit: cover;
}
.title {
......
src/pages/subject/list.vue
View file @ bec8a37e
......@@ -43,10 +43,11 @@
<span>{{ item.author }}</span>
</div>
<div class="collect">
<van-icon name="star-o" color="#9F9F9F" v-if="index < 5" />
<van-icon name="star" color="#F1C13E" v-else />
<span>收藏</span>
</div>
<van-icon name="star-o" color="#9F9F9F" />
<!-- <van-icon name="star-o" color="#9F9F9F" v-if="index < 5" />
<van-icon name="star" color="#F1C13E" v-else /> -->
<span>收藏</span>
</div>
</div>
</div>
</div>
......
src/router/index.js
View file @ bec8a37e
......@@ -13,8 +13,10 @@ const router = createRouter({
router.beforeEach((to, from, next) => {
console.log(router)
const userStore = useUserStore()
if(to.meta) {
console.log(to.meta)
if (to.meta.requireAuth) {
if (userStore.isLogin()) {
next()
......
vite.config.ts
View file @ bec8a37e
......@@ -6,6 +6,7 @@ import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';
import legacy from '@vitejs/plugin-legacy';
// import TransformPages from 'uni-read-pages-vite';
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment