feat(rankDetail): 重构排行详情页并添加搜索功能
- 重构排行详情页UI，添加顶部背景图和搜索框 - 实现搜索功能并添加搜索确认事件 - 添加下拉刷新功能 - 优化标题显示逻辑，修复切片显示问题 - 调整列表项样式，添加阅读数等统计信息 - 添加登录状态检查跳转逻辑
This commit is contained in:
parent
21f418ff6f
commit
aada0e1c2c
|
|
@ -38,7 +38,7 @@
|
|||
<text style="">
|
||||
<text class="news-title">{{ item.title.slice(0, 3) }}</text>
|
||||
<text :class="['news-title', isLogin ? '' : 'mohu']">{{
|
||||
item.title.slice(3, item.title.length - 1)
|
||||
item.title.slice(3, item.title.length)
|
||||
}}</text>
|
||||
</text>
|
||||
<text :class="['news-desc', isLogin ? '' : 'mohu']">{{
|
||||
|
|
@ -340,7 +340,7 @@ const handlePopupErrorCallback = () => {
|
|||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-top: 10rpx;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.source,
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
<view v-if="!isLogin">
|
||||
<text :class="['listItemTitle']">{{ item.title.slice(0, 3) }}</text>
|
||||
<text :class="['listItemTitle', isLogin ? '' : 'mohu']">
|
||||
{{ item.title.slice(3, item.title.length - 1) }}
|
||||
{{ item.title.slice(3, item.title.length) }}
|
||||
</text></view
|
||||
>
|
||||
<view v-else>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// const baseURL = "http://192.168.31.25:8060/api";
|
||||
// const baseUrl = "http://192.168.31.25:8060/api";
|
||||
// export const baseUrl = "http://127.0.0.1:8040/apih5";
|
||||
// export const baseUrl = "http://192.168.3.38:8040/apih5";
|
||||
export const baseUrl = "https://cankao.cs.com.cn/mini";
|
||||
// export const baseUrl = "https://cankao.cs.com.cn/apih5";
|
||||
|
||||
export const baseUrlDataV = "https://cankao.cs.com.cn/zzck_datav";
|
||||
// export const baseUrlDataV = "http://123.60.153.169:9995/zzck_datav";
|
||||
|
|
|
|||
|
|
@ -26,7 +26,9 @@
|
|||
"path": "pages/login/indexMini"
|
||||
},
|
||||
{
|
||||
"path": "pages/realtimeInfo/rankDetail"
|
||||
"path": "pages/realtimeInfo/rankDetail",
|
||||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh": true
|
||||
},
|
||||
{
|
||||
"path": "pages/home/index",
|
||||
|
|
|
|||
|
|
@ -121,9 +121,15 @@ function tabChange(index) {
|
|||
}
|
||||
|
||||
function goSreach() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/sreachReq/index",
|
||||
});
|
||||
if (uni.getStorageSync("token")) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/sreachReq/index",
|
||||
});
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: "/pages/login/indexMini",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const isScroll = ref(false);
|
||||
|
|
|
|||
|
|
@ -1,58 +1,132 @@
|
|||
<template>
|
||||
<view class="all">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view :style="{ height: getNavHeight() + 'px' }"></view>
|
||||
<!-- <view :style="{ height: getNavHeight() + 'px' }"></view> -->
|
||||
<!-- #endif -->
|
||||
|
||||
<PageHeaderView
|
||||
<!-- <PageHeaderView
|
||||
:title="type == 0 ? '热门行业池Top10' : '风口概念池Top10'"
|
||||
></PageHeaderView>
|
||||
></PageHeaderView> -->
|
||||
|
||||
<!-- 类目标签 start -->
|
||||
<view class="page_content">
|
||||
<view class="tag_list">
|
||||
<view
|
||||
:class="['tag_item', clickTagIndex == index ? tagClickedClass : '']"
|
||||
class="tag_item"
|
||||
v-for="(item, index) in tagList"
|
||||
:key="index"
|
||||
@click="clickTag(index)"
|
||||
>
|
||||
{{ item.content }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 类目标签 end -->
|
||||
<image
|
||||
class="top_bk"
|
||||
src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/top_bg.png"
|
||||
></image>
|
||||
|
||||
<!-- 列表 start -->
|
||||
<view class="list">
|
||||
<view class="content">
|
||||
<view
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
class="news-item"
|
||||
@click="goDetail(item)"
|
||||
>
|
||||
<view class="news-content">
|
||||
<text style="">
|
||||
<text class="news-title">{{ item.title.slice(0, 3) }}</text>
|
||||
<text :class="['news-title', isLogin ? '' : 'mohu']">{{
|
||||
item.title.slice(3, item.title.length - 1)
|
||||
}}</text>
|
||||
</text>
|
||||
:style="{
|
||||
height: getNavHeight() + 'px',
|
||||
backgroundColor: isScroll ? '#fff' : 'transparent',
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
zIndex: '999999',
|
||||
}"
|
||||
></view>
|
||||
|
||||
<!-- <text class="news-title">{{ item.title }}</text> -->
|
||||
<!-- <text class="news-desc">{{ item.summary }}</text> -->
|
||||
<text :class="['news-desc', isLogin ? '' : 'mohu']">{{
|
||||
item.summary
|
||||
}}</text>
|
||||
<view :class="['news-meta', isLogin ? '' : 'mohu']">
|
||||
<text class="source">{{ item.tag }}</text>
|
||||
<text class="time">{{ item.time }}</text>
|
||||
<view
|
||||
:style="{
|
||||
position: 'sticky',
|
||||
top: getNavHeight() + 'px',
|
||||
backgroundColor: isScroll ? '#fff' : 'transparent',
|
||||
zIndex: '9999',
|
||||
}"
|
||||
>
|
||||
<view class="r_sreach">
|
||||
<!-- <image
|
||||
class="logo_text"
|
||||
src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/logo_text_icon.png"
|
||||
>
|
||||
</image> -->
|
||||
|
||||
<u-icon
|
||||
name="arrow-left"
|
||||
color="#333"
|
||||
size="22"
|
||||
@click="goBack"
|
||||
></u-icon>
|
||||
|
||||
<view class="sreach" @click="goSreach">
|
||||
<view class="sreach_icon">
|
||||
<image
|
||||
src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/icon_search_line.png"
|
||||
></image>
|
||||
</view>
|
||||
<view class="sreach_text">
|
||||
<text>搜索资讯</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 类目标签 start -->
|
||||
<view class="page_content">
|
||||
<view class="tag_list">
|
||||
<view
|
||||
:class="['tag_item', clickTagIndex == index ? tagClickedClass : '']"
|
||||
class="tag_item"
|
||||
v-for="(item, index) in tagList"
|
||||
:key="index"
|
||||
@click="clickTag(index)"
|
||||
>
|
||||
{{ item.content }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 类目标签 end -->
|
||||
|
||||
<!-- 列表 start -->
|
||||
<view class="list">
|
||||
<view
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
class="news-item"
|
||||
@click="goDetail(item)"
|
||||
>
|
||||
<view class="news-content">
|
||||
<text style="">
|
||||
<text class="news-title">{{ item.title.slice(0, 3) }}</text>
|
||||
<text :class="['news-title', isLogin ? '' : 'mohu']">{{
|
||||
item.title.slice(3, item.title.length)
|
||||
}}</text>
|
||||
</text>
|
||||
|
||||
<!-- <text class="news-title">{{ item.title }}</text> -->
|
||||
<!-- <text class="news-desc">{{ item.summary }}</text> -->
|
||||
<text :class="['news-desc', isLogin ? '' : 'mohu']">{{
|
||||
item.summary
|
||||
}}</text>
|
||||
<view :class="['news-meta', isLogin ? '' : 'mohu']">
|
||||
<view>
|
||||
<text class="source">{{ item.tag }}</text>
|
||||
<text class="time">{{ item.time }}</text>
|
||||
</view>
|
||||
|
||||
<view class="r_option">
|
||||
<image
|
||||
class="option_icon"
|
||||
src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/eye_icon%402x.png"
|
||||
></image>
|
||||
<text class="option_text">{{ item.readNums }}</text>
|
||||
|
||||
<image
|
||||
class="option_icon"
|
||||
src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/like_icon%402x.png"
|
||||
></image>
|
||||
<text class="option_text">{{ item.likeNums }}</text>
|
||||
|
||||
<image
|
||||
class="option_icon"
|
||||
src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/share_icon%402x.png"
|
||||
></image>
|
||||
<text class="option_text">{{ item.shareNums }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 列表 end -->
|
||||
</view>
|
||||
<!-- 列表 end -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -169,8 +243,19 @@ function goDetail(item) {
|
|||
}
|
||||
}
|
||||
|
||||
const tagClickedClass = ref("");
|
||||
function goSreach() {
|
||||
if (uni.getStorageSync("token")) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/sreachReq/index",
|
||||
});
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: "/pages/login/indexMini",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const tagClickedClass = ref("");
|
||||
const props = reactive({});
|
||||
|
||||
onLoad(async (e) => {
|
||||
|
|
@ -202,6 +287,9 @@ onMounted(async () => {});
|
|||
<style scoped lang="scss">
|
||||
.page_content {
|
||||
padding: 0 30rpx;
|
||||
background-color: white;
|
||||
padding-top: 10rpx;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.tag_list {
|
||||
|
|
@ -325,4 +413,84 @@ onMounted(async () => {});
|
|||
.mohu {
|
||||
filter: blur(7rpx);
|
||||
}
|
||||
|
||||
.r_option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10rpx;
|
||||
|
||||
.option_icon {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
.option_text {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #192236;
|
||||
line-height: 33rpx;
|
||||
text-align: justify;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.top_bk {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
z-index: 99999;
|
||||
padding-bottom: 300rpx;
|
||||
.r_sreach {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.logo_text {
|
||||
width: 88rpx;
|
||||
height: 45rpx;
|
||||
}
|
||||
|
||||
.sreach {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0rpx 30rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 100rpx;
|
||||
width: 47vw;
|
||||
height: 68rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.sreach_icon {
|
||||
margin-right: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 35rpx;
|
||||
height: 35rpx;
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.sreach_text {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
line-height: 33rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -43,9 +43,11 @@
|
|||
<u-input
|
||||
v-model="keyWord"
|
||||
@change="handleChange"
|
||||
confirm-type="search"
|
||||
@confirm="getData()"
|
||||
prefixIcon="search"
|
||||
style="flex: 1"
|
||||
placeholder="搜索快讯"
|
||||
placeholder="搜索资讯"
|
||||
class="sreach_input"
|
||||
:border="false"
|
||||
/>
|
||||
|
|
|
|||
Loading…
Reference in New Issue