537 lines
12 KiB
Vue
537 lines
12 KiB
Vue
<template>
|
||
<view class="vipContainer">
|
||
<!-- 头部 -->
|
||
<view class="vipHeader">
|
||
<!-- 搜索 start -->
|
||
<view class="search">
|
||
<image src="@/static/log_caixun.png" class="logo" mode="aspectFit"></image>
|
||
<u-input v-model="keyWord" prefixIcon="search" prefixIconStyle="color: rgba(255,255,255, 0.8)" style="flex: 1"
|
||
placeholder="搜索资讯" class="search_input" color="#fff" :placeholderStyle="{ color: 'rgba(255,255,255,0.6)' }"
|
||
:border="false" @confirm="goSearch" />
|
||
</view>
|
||
|
||
<view class="tabsContainer">
|
||
<view v-for="(item, index) in colList" :class="['tabItem', { active: columnIndex === index }]" :key="item.id"
|
||
@click="handleClickColumn(item.id)">
|
||
<text class="tabName">{{ item.name }}</text>
|
||
<!-- <u-icon v-if="index == 3" name="list" size="16" bold color="#fff"></u-icon> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 中证投顾子菜单 -->
|
||
<view class="sub-tabs-box" v-if="subColumnList.length != 0">
|
||
<u-tabs lineColor="rgba(0,0,0,0)" :current="subColumnIndex" @click="handleSubColumnChange" :list="subColumnList"
|
||
:inactiveStyle="{
|
||
color: '#595959',
|
||
fontSize: '24rpx',
|
||
lineHeight: '44rpx',
|
||
border: '2rpx solid #DBDBDB',
|
||
borderRadius: '36rpx',
|
||
padding: '1px 12px',
|
||
}" :activeStyle="{
|
||
color: '#E7303F',
|
||
fontSize: '24rpx',
|
||
lineHeight: '44rpx',
|
||
border: '2rpx solid rgba(0,0,0,0)',
|
||
borderRadius: '36rpx',
|
||
padding: '1px 12px',
|
||
background: 'rgba(255,208,212,0.4)',
|
||
}">
|
||
</u-tabs>
|
||
</view>
|
||
|
||
<!-- 列表区域 -->
|
||
<Domestic :hotNewsList="hotNewsList" :newsList="newsList" :columnName="getColumnName"
|
||
:columnId="columnState.subColumn" :bannerList="bannerList" @onChange="handleChange" />
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, reactive, computed } from "vue";
|
||
import { onPullDownRefresh, onReachBottom, onShow } from "@dcloudio/uni-app";
|
||
import { getNewsColumn, getNewsList } from "@/api";
|
||
import Domestic from "./domestic.vue";
|
||
import { useShareStore } from "@/stores/shareStore";
|
||
import { scrollToTop } from "@/utils/util";
|
||
|
||
const emit = defineEmits(["onChange"]);
|
||
const props = defineProps({
|
||
// 栏目列表
|
||
colList: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
// 当前选中栏目
|
||
columnState: {
|
||
type: Object,
|
||
default: () => { },
|
||
},
|
||
});
|
||
const curPages = getCurrentPages(); // 当前页面栈
|
||
const stores = useShareStore(); // 微信分享store
|
||
const keyWord = ref(); // 搜索关键字
|
||
const bannerList = ref([]); // banner
|
||
const subColumnList = ref([]); // 二级栏目
|
||
const hotNewsList = ref([]); // 焦点新闻
|
||
const newsList = ref([]); // 全部列表
|
||
const pageSize = ref({
|
||
page: 1,
|
||
size: 10,
|
||
});
|
||
const isBottom = ref(false);
|
||
|
||
// 栏目索引
|
||
const columnIndex = computed(() => {
|
||
const index = props.colList.findIndex((item: any) => item.id == props.columnState.column);
|
||
return index === -1 ? 0 : index;
|
||
});
|
||
// 子栏目索引
|
||
const subColumnIndex = computed(() => {
|
||
const index = subColumnList.value.findIndex((item: any) => item.id == props.columnState.subColumn);
|
||
return index === -1 ? 0 : index;
|
||
});
|
||
|
||
// 获取当前选中的栏目名称
|
||
const getColumnName = computed(() => {
|
||
const column = props.colList[columnIndex.value];
|
||
return column ? column.name : "";
|
||
});
|
||
|
||
function goSearch() {
|
||
uni.navigateTo({
|
||
url: "/pages/sreachReq/index?keyWord=" + keyWord.value,
|
||
});
|
||
}
|
||
|
||
// 栏目切换事件
|
||
const handleClickColumn = async (id: number) => {
|
||
scrollToTop();
|
||
emit("onChange", id, "column");
|
||
// newsList.value = [];
|
||
// hotNewsList.value = [];
|
||
pageSize.value.page = 1;
|
||
|
||
console.log("output >>>>> pageSize.value", pageSize.value.page);
|
||
|
||
await getColumn(id);
|
||
await getHotNewsList();
|
||
await getBanner();
|
||
await getList();
|
||
wxShare();
|
||
};
|
||
|
||
// 获取新闻列表
|
||
const getList = async () => {
|
||
let column = props.columnState.subColumn != 0 ? props.columnState.subColumn : subColumnList.value[0]?.id;
|
||
// const tag =
|
||
// props.columnState.subColumn != 0
|
||
// ? props.columnState.subColumn
|
||
// : subColumnList.value[0]?.id;
|
||
const parsm = {
|
||
columnId: column || null,
|
||
tagId: null,
|
||
...pageSize.value,
|
||
};
|
||
uni.showLoading({
|
||
title: "加载中",
|
||
mask: true,
|
||
});
|
||
const res = await getNewsList(parsm);
|
||
uni.hideLoading();
|
||
|
||
if (res.code === 200) {
|
||
// newsList.value = res.data;
|
||
|
||
if (pageSize.value.page == 1) {
|
||
newsList.value = [];
|
||
}
|
||
|
||
if (res.data.length !== 0) {
|
||
isBottom.value = false;
|
||
res.data.forEach((item) => {
|
||
item.needpay = false; // 特殊需求：vip栏目下的所有文章，都不需要订阅，可以直接观看 12月15号
|
||
newsList.value.push(item);
|
||
});
|
||
} else {
|
||
isBottom.value = true;
|
||
}
|
||
}
|
||
};
|
||
|
||
onReachBottom(() => {
|
||
if (isBottom.value) return;
|
||
pageSize.value.page++;
|
||
getList();
|
||
});
|
||
|
||
onPullDownRefresh(async () => {
|
||
console.log("🚀 ~ onPullDownRefresh ~ onPullDownRefresh:");
|
||
pageSize.value.page = 1;
|
||
await getList();
|
||
uni.stopPullDownRefresh();
|
||
});
|
||
|
||
// 获取焦点新闻
|
||
const getHotNewsList = async () => {
|
||
let column = props.columnState.subColumn != 0 ? props.columnState.subColumn : subColumnList.value[0]?.id;
|
||
|
||
// const tag =
|
||
// props.columnState.subColumn != 0
|
||
// ? props.columnState.subColumn
|
||
// : subColumnList.value[0]?.id;
|
||
const parsm = {
|
||
type: 1,
|
||
columnId: column || null,
|
||
tagId: null,
|
||
page: 1,
|
||
size: 9999,
|
||
};
|
||
|
||
const res = await getNewsList(parsm);
|
||
if (res.code === 200) {
|
||
hotNewsList.value = res.data;
|
||
}
|
||
};
|
||
|
||
// 获取banner
|
||
const getBanner = async () => {
|
||
let column = props.columnState.subColumn != 0 ? props.columnState.subColumn : subColumnList.value[0]?.id;
|
||
const parsm = {
|
||
type: 0,
|
||
columnId: column || null,
|
||
tagId: null,
|
||
page: 1,
|
||
size: 9999,
|
||
};
|
||
const res = await getNewsList(parsm);
|
||
if (res.code === 200) {
|
||
bannerList.value = res.data;
|
||
}
|
||
};
|
||
|
||
// 获取栏目
|
||
const getColumn = async (parentId: number) => {
|
||
const colRes = await getNewsColumn({
|
||
isVip: 1,
|
||
parentId,
|
||
});
|
||
// tabValue.value =
|
||
if (colRes.code === 200) {
|
||
subColumnList.value = colRes.data;
|
||
}
|
||
};
|
||
|
||
// 子栏目切换事件
|
||
const handleSubColumnChange = (item: any) => {
|
||
emit("onChange", item.id, "subColumn");
|
||
pageSize.value.page = 1;
|
||
getHotNewsList();
|
||
getBanner();
|
||
getList();
|
||
wxShare();
|
||
};
|
||
|
||
const handleChange = () => {
|
||
getHotNewsList();
|
||
getBanner();
|
||
getList();
|
||
};
|
||
|
||
// 微信分享
|
||
const wxShare = () => {
|
||
let link = stores.redirectUrl; // 转发重定向基础地址
|
||
let path = curPages[curPages.length - 1].route; // hash路由
|
||
// 格式字符串参数
|
||
let query = encodeURIComponent(
|
||
JSON.stringify({
|
||
tabIndex: 1,
|
||
columnIndex: props.columnState.column,
|
||
})
|
||
);
|
||
link += `?path=${path}&query=${query}`;
|
||
const shareData = {
|
||
title: `中证参考-${props.colList[columnIndex.value]?.name}`,
|
||
desc: "",
|
||
link: link,
|
||
imgUrl: "https://cankao.cs.com.cn/static/share-default.jpg",
|
||
};
|
||
console.log("output >>>>> shareData", shareData);
|
||
|
||
stores.initWxConfig(shareData);
|
||
};
|
||
|
||
// 显示页面时
|
||
onShow(async () => {
|
||
await getColumn(props.columnState.column);
|
||
await getHotNewsList();
|
||
await getBanner();
|
||
await getList();
|
||
await wxShare();
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.vipContainer {
|
||
// min-height: 100vh;
|
||
background-color: #f5f5f5;
|
||
|
||
.vipHeader {
|
||
height: 168rpx;
|
||
background-image: url(https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/images/headerBg.png);
|
||
background-size: cover;
|
||
box-sizing: border-box;
|
||
padding: 24rpx 32rpx 6rpx 40rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-content: space-between;
|
||
position: fixed;
|
||
top: 0;
|
||
z-index: 20;
|
||
width: 100%;
|
||
|
||
.search {
|
||
width: 100vw;
|
||
display: flex;
|
||
height: 72rpx;
|
||
gap: 20rpx;
|
||
align-items: center;
|
||
|
||
.logo {
|
||
width: 104rpx;
|
||
height: 68rpx;
|
||
}
|
||
|
||
.search_icon {
|
||
width: 80rpx;
|
||
height: 60rpx;
|
||
margin-top: 3rpx;
|
||
}
|
||
|
||
.search_input {
|
||
background: rgba(255, 255, 255, 0.15);
|
||
height: 70%;
|
||
border-radius: 20rpx;
|
||
padding: 0 20rpx;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.tabsContainer {
|
||
width: 100vw;
|
||
height: 48rpx;
|
||
// border: 1px solid #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 14px;
|
||
color: #fff;
|
||
|
||
.tabItem {
|
||
box-sizing: border-box;
|
||
padding-bottom: 9rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
&.active {
|
||
position: relative;
|
||
|
||
&::after {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: calc(50% - 22rpx);
|
||
display: block;
|
||
width: 44rpx;
|
||
height: 6rpx;
|
||
background: url("https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/images/icon_dot.png") no-repeat center;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.menuContainer {
|
||
background-color: #fff;
|
||
box-sizing: border-box;
|
||
padding: 42rpx 0;
|
||
|
||
.gridImg {
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
border-radius: 16rpx;
|
||
background-color: #fff0d5;
|
||
margin-bottom: 15rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.img {
|
||
width: 68rpx;
|
||
height: 68rpx;
|
||
}
|
||
}
|
||
|
||
.gridText {
|
||
font-size: 12px;
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
.recommendedContainer {
|
||
background-color: #fff;
|
||
box-sizing: border-box;
|
||
padding: 30rpx 42rpx 0 42rpx;
|
||
|
||
.recommendedTitle {
|
||
// background-color: red;
|
||
display: flex;
|
||
align-items: center;
|
||
color: #333;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
|
||
.recommendedIcon {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
margin-right: 12rpx;
|
||
}
|
||
}
|
||
|
||
.recommendedList {
|
||
box-sizing: border-box;
|
||
|
||
.recommendedList-item {
|
||
padding: 30rpx 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tabsListContainer {
|
||
padding: 12rpx 30rpx;
|
||
background-color: #fff;
|
||
}
|
||
}
|
||
|
||
// 新闻
|
||
.articleListModule {
|
||
box-sizing: border-box;
|
||
// padding: 20rpx 30rpx 0 30rpx;
|
||
background-color: #fff;
|
||
margin-top: 24rpx;
|
||
|
||
.articleListHeader {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 20rpx 30rpx 0 30rpx;
|
||
|
||
// padding-bottom: 21rpx;
|
||
.headerLeft {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.articleListTitle {
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.articleListTabs {
|
||
margin-left: 12rpx;
|
||
|
||
.articleListTabsItem {
|
||
::v-deep {
|
||
.u-tabs__wrapper__nav__item {
|
||
padding: 0 15rpx;
|
||
}
|
||
|
||
.u-tabs__wrapper__nav__item__text {
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
// font-size: 60rpx !important;
|
||
// background-color: red;
|
||
}
|
||
}
|
||
}
|
||
|
||
.select {
|
||
::v-deep {
|
||
.u-checkbox {
|
||
.u-checkbox__icon-wrap {
|
||
width: 24rpx !important;
|
||
height: 24rpx !important;
|
||
}
|
||
|
||
uni-text {
|
||
span {
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.u-grid-item {
|
||
&:nth-child(1) {
|
||
.gridImg {
|
||
background-color: #d5f7ff;
|
||
}
|
||
}
|
||
|
||
&:nth-child(2) {
|
||
.gridImg {
|
||
background-color: #fff0c2;
|
||
}
|
||
}
|
||
|
||
&:nth-child(3) {
|
||
.gridImg {
|
||
background-color: #e2eeff;
|
||
|
||
.img {
|
||
width: 62rpx;
|
||
height: 88rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
&:nth-child(4) {
|
||
.gridImg {
|
||
background-color: #d5f7ff;
|
||
}
|
||
}
|
||
|
||
&:nth-child(5) {
|
||
.gridImg {
|
||
background-color: #fff0c2;
|
||
}
|
||
}
|
||
}
|
||
|
||
.sub-tabs-box {
|
||
position: fixed;
|
||
top: 168rpx;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 88rpx;
|
||
// overflow: hidden;
|
||
z-index: 19;
|
||
background-color: #ffffff;
|
||
border-bottom: 2rpx solid #f5f5f5;
|
||
box-sizing: border-box;
|
||
|
||
::v-deep {
|
||
.u-tabs__wrapper__nav__item {
|
||
padding: 0 12rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|