435 lines
9.5 KiB
Vue
435 lines
9.5 KiB
Vue
|
<!-- 海外 -->
|
|||
|
|
<template>
|
|||
|
|
<view class="vipContainer">
|
|||
|
|
<!-- 精选推荐 -->
|
|||
|
|
<view class="recommendedContainer">
|
|||
|
|
<!-- <view class="need-pay" v-if="isPay">
|
|||
|
|
<view class="need-pay-text"
|
|||
|
|
>订阅「{{ columnName }}」，解锁全部资讯</view
|
|||
|
|
>
|
|||
|
|
<view class="need-pay-btn">
|
|||
|
|
<button class="btn" @click="handleShowPay">立即订阅</button>
|
|||
|
|
</view>
|
|||
|
|
</view> -->
|
|||
|
|
|
|||
|
|
<view v-if="bannerList.length != 0">
|
|||
|
|
<Swiper :data="props.bannerList" @handleSwiperJump="handleSwiperJump" />
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="recommendedTitle" v-if="hotNewsList.length != 0">
|
|||
|
|
<view>编辑精选</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="recommendedList" v-if="hotNewsList.length != 0">
|
|||
|
|
<u-scroll-list :indicator="false">
|
|||
|
|
<view class="recommendedList-item" v-for="(item, index) in hotNewsList" :key="item.id">
|
|||
|
|
<RecommendedItem :data="{ item }" @handleClick="doDetail" :noPayShow="true" />
|
|||
|
|
</view>
|
|||
|
|
</u-scroll-list>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 文章列表 -->
|
|||
|
|
<view class="articleListModule">
|
|||
|
|
<view class="articleListHeader">
|
|||
|
|
<view class="headerLeft">
|
|||
|
|
<view class="articleListTitle">全部</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 文章列表区域 -->
|
|||
|
|
<view class="listModule">
|
|||
|
|
<List :data="newsList" @onClick="doDetail" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 订阅 支付 -->
|
|||
|
|
<Pay :show="payShow" @onClick="handleClose" @handleSub="handleClickPay" />
|
|||
|
|
<!-- 登录弹框 -->
|
|||
|
|
<LoginPopup :show="LoginShow" @handlePopupClose="handlePopupClose" @handlePopupSuccessCallback="handlePopupSuccessCallback" />
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { computed, ref, toRefs, watch } from "vue";
|
|||
|
|
import { onLoad, onShow } from "@dcloudio/uni-app";
|
|||
|
|
import Swiper from "@/components/swiperCom/index.vue";
|
|||
|
|
import RecommendedItem from "./recommendedItem.vue";
|
|||
|
|
import List from "@/components/articleList/index.vue";
|
|||
|
|
import Pay from "@/components/pay/index.vue";
|
|||
|
|
import LoginPopup from "@/components/loginPopup/index.vue";
|
|||
|
|
import { Session } from "@/utils/storage";
|
|||
|
|
import { unlockColumn } from "@/api";
|
|||
|
|
|
|||
|
|
const emit = defineEmits(["onChange"]);
|
|||
|
|
const props = defineProps({
|
|||
|
|
hotNewsList: {
|
|||
|
|
type: Array,
|
|||
|
|
default: () => [],
|
|||
|
|
},
|
|||
|
|
newsList: {
|
|||
|
|
type: Array,
|
|||
|
|
default: () => [],
|
|||
|
|
},
|
|||
|
|
columnName: {
|
|||
|
|
type: String,
|
|||
|
|
default: () => "",
|
|||
|
|
},
|
|||
|
|
columnId: {
|
|||
|
|
type: Number,
|
|||
|
|
default: () => 0,
|
|||
|
|
},
|
|||
|
|
bannerList: {
|
|||
|
|
type: Array,
|
|||
|
|
default: () => [],
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const { newsList } = toRefs(props);
|
|||
|
|
const payShow = ref(false);
|
|||
|
|
|
|||
|
|
// login 弹框是否显示
|
|||
|
|
const LoginShow = ref(false);
|
|||
|
|
const isPay = ref(true);
|
|||
|
|
|
|||
|
|
watch(
|
|||
|
|
() => props.newsList,
|
|||
|
|
(newValue, oldValue) => {
|
|||
|
|
const token = Session.get("token");
|
|||
|
|
isPay.value = !token ? true : newValue[0]?.needpay ? newValue[0]?.needpay : false;
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// 点击关闭订阅弹框
|
|||
|
|
const handleClose = () => {
|
|||
|
|
payShow.value = false;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 点击显示订阅弹框
|
|||
|
|
const handleShowPay = () => {
|
|||
|
|
if (!Session.get("token")) {
|
|||
|
|
LoginShow.value = true;
|
|||
|
|
} else {
|
|||
|
|
payShow.value = true;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 点击订阅
|
|||
|
|
const handleClickPay = async () => {
|
|||
|
|
if (!Session.get("token")) {
|
|||
|
|
LoginShow.value = true;
|
|||
|
|
} else {
|
|||
|
|
const res = await unlockColumn({
|
|||
|
|
columnId: props.columnId,
|
|||
|
|
});
|
|||
|
|
payShow.value = false;
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
emit("onChange");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 跳转到新闻详情
|
|||
|
|
const doDetail = (item: any) => {
|
|||
|
|
// console.log("🚀 ~ handleClickNews ~ item:", item);
|
|||
|
|
// if (!Session.get("token")) {
|
|||
|
|
// LoginShow.value = true;
|
|||
|
|
// } else if (item.needpay) {
|
|||
|
|
// payShow.value = true;
|
|||
|
|
// } else {
|
|||
|
|
// uni.navigateTo({
|
|||
|
|
// url: `/pages/detail/index?id=${item.id}&type=${props.columnId}`,
|
|||
|
|
// });
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
if (!Session.get("token")) {
|
|||
|
|
LoginShow.value = true;
|
|||
|
|
} else {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `/pages/detail/index?id=${item.id}`,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 点击轮播图进入详情
|
|||
|
|
const handleSwiperJump = (item: any) => {
|
|||
|
|
// if (item.needpay) {
|
|||
|
|
// // 需要先弹出订阅的弹框
|
|||
|
|
// handleShowPay(item);
|
|||
|
|
// } else {
|
|||
|
|
// uni.navigateTo({
|
|||
|
|
// url: `/pages/detail/index?id=${item.id}&type=${item.type}`,
|
|||
|
|
// });
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
if (!Session.get("token")) {
|
|||
|
|
LoginShow.value = true;
|
|||
|
|
} else {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `/pages/detail/index?id=${item.id}`,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 关闭弹框
|
|||
|
|
const handlePopupClose = () => {
|
|||
|
|
LoginShow.value = false;
|
|||
|
|
};
|
|||
|
|
// 登录成功回调
|
|||
|
|
const handlePopupSuccessCallback = () => {
|
|||
|
|
LoginShow.value = false;
|
|||
|
|
emit("onChange");
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.vipContainer {
|
|||
|
|
padding-top: 256rpx;
|
|||
|
|
// min-height: 100vh;
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
|
|||
|
|
.vipHeader {
|
|||
|
|
height: 168rpx;
|
|||
|
|
background-image: url(@/assets/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: sticky;
|
|||
|
|
top: 0;
|
|||
|
|
z-index: 9999;
|
|||
|
|
.search {
|
|||
|
|
width: 100vw;
|
|||
|
|
display: flex;
|
|||
|
|
height: 60rpx;
|
|||
|
|
gap: 20rpx;
|
|||
|
|
.logo {
|
|||
|
|
width: 124rpx;
|
|||
|
|
height: 72rpx;
|
|||
|
|
}
|
|||
|
|
.search_icon {
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
margin-top: 3rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search_input {
|
|||
|
|
background: rgba(118, 118, 128, 0.12);
|
|||
|
|
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("@/assets/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;
|
|||
|
|
|
|||
|
|
.recommendedTitle {
|
|||
|
|
// background-color: red;
|
|||
|
|
margin-top: 24rpx;
|
|||
|
|
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 16rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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 {
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
border-bottom: 2rpx solid #f5f5f5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.need-pay {
|
|||
|
|
// margin-bottom: 24rpx;
|
|||
|
|
padding: 40rpx 0;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
background: linear-gradient(90deg, rgba(255, 250, 240, 1) 0%, rgba(254, 238, 210, 1) 100%);
|
|||
|
|
|
|||
|
|
.need-pay-text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #8f212a;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.need-pay-btn {
|
|||
|
|
margin-top: 24rpx;
|
|||
|
|
.btn {
|
|||
|
|
width: 448rpx;
|
|||
|
|
height: 76rpx;
|
|||
|
|
line-height: 76rpx;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
background: linear-gradient(90deg, rgba(252, 92, 105, 1) 0%, rgba(231, 48, 63, 1) 100%);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|