fgm
/
cankao-h5
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
cankao-h5/src/components/RankListMini.vue

442 lines
9.7 KiB
Vue
Raw Blame History

<template>
<view class="news-rank-list">
<u-skeleton
rows="5"
title
loading
style="margin-bottom: 30rpx"
v-if="loading"
></u-skeleton>
<view class="list" v-else>
<view
v-for="(item, index) in rankListLocal"
:key="index"
class="news-item"
@click="goDetail(item, 0)"
>
<view class="rank-tag">
<view v-if="index == 0" class="rank-text-top3">
<image
src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/icon_top_1.png"
/>
</view>
<view v-else-if="index == 1" class="rank-text-top3">
<image
src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/icon_top_2.png"
/>
</view>
<view v-else-if="index == 2" class="rank-text-top3">
<image
src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/icon_top_3.png"
/>
</view>
<text class="rank-text" v-else>{{ index + 1 }}</text>
</view>
<!-- :style="{ filter: Session.get('token') ? '' : 'blur(5px)' }" -->
<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>
<text :class="['news-desc', isLogin ? '' : 'mohu']">{{
item.summary
}}</text>
<view :class="['news-meta', isLogin ? '' : 'mohu']">
<view
style="display: flex; justify-content: space-between; width: 100%"
>
<view style="display: flex">
<text class="source">{{ item.source }}</text>
<text class="time">{{
dayjs(item.publish_time).format("YYYY-MM-DD HH:MM:ss")
}}</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.viewCount }}</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.likeCount }}</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.shareCount }}</text>
</view>
</view>
</view>
<view class="lock_view" v-if="!isLogin">
<image
class="lock_icon"
src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/lock_icon%402x.png"
>
</image>
<text class="lock_text"
>海外独家资讯内容，<text style="color: #d13e3c">登录</text
>后可查阅全文</text
>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
import dayjs from "dayjs/esm/index";
import LoginPopup from "@/components/loginPopup/index.vue";
import { Session } from "@/utils/storage";
const isExp = ref(true);
const rankListLocal = ref([]);
const loading = ref(true);
const isLogin = ref(uni.getStorageSync("token"));
watch(
() => isExp.value,
(newValue, oldValue) => {
rankListLocal.value = [];
props.newsList.forEach((item, index) => {
if (!isExp.value && index > 9) {
return;
}
rankListLocal.value.push(item);
});
loading.value = false;
}
);
watch(
() => props.newsList,
(newValue, oldValue) => {
rankListLocal.value = [];
props.newsList.forEach((item, index) => {
if (!isExp.value && index > 9) {
return;
}
// item.likeCount = item.likeCount || 3840;
// item.shareCount = item.shareCount || 20;
// item.viewCount = item.viewCount || 290000;
let likeCount = 0;
let shareCount = 0;
let viewCount = 0;
let favCount = 0;
if (item.likeCount) {
likeCount =
item.likeCount > 10000
? Number(item.likeCount / 10000).toFixed(1) + "万"
: item.likeCount;
}
if (item.shareCount) {
shareCount =
item.shareCount > 10000
? Number(item.shareCount / 10000).toFixed(1) + "万"
: item.shareCount;
}
if (item.viewCount) {
viewCount =
item.viewCount > 10000
? Number(item.viewCount / 10000).toFixed(1) + "万"
: item.viewCount;
}
if (item.favCount) {
favCount =
item.favCount > 10000
? Number(item.favCount / 10000).toFixed(1) + "万"
: item.viewCount;
}
rankListLocal.value.push({
...item,
favCount: favCount,
likeCount: likeCount,
shareCount: shareCount,
viewCount: viewCount,
});
});
loading.value = false;
}
);
// 接收父组件传入的新闻列表
const props = defineProps({
newsList: {
type: Array,
required: true,
default: () => [],
},
});
const clickItem = ref({});
function goDetail(item) {
clickItem.value = item;
if (uni.getStorageSync("token")) {
uni.navigateTo({
url: `/pages/detail/indexNewsInfo?id=${item.news_id}`,
});
} else {
uni.navigateTo({
url: "/pages/login/indexMini",
});
}
// if (uni.getStorageSync("token")) {
// clickItem.value = item;
// uni.navigateTo({
// url: `/pages/detail/indexNewsInfo?id=${item.news_id}`,
// });
// } else {
// }
}
const LoginShow = ref(false);
const isLoginStatus = ref();
// 关闭弹框
const handlePopupClose = () => {
LoginShow.value = false;
};
// 登录成功之后的回调
const handlePopupSuccessCallback = () => {
isLoginStatus.value = true;
// uni.navigateTo({
// url: `/pages/detail/indexNewsInfo?id=${clickItem.value.news_id}`,
// });
};
// 登录失败之后的回调
const handlePopupErrorCallback = () => {
console.log("登录失败");
};
</script>
<style scoped lang="scss">
.news-rank-list {
padding: 10px;
}
.list {
min-height: 700rpx;
}
.news-item {
display: flex;
align-items: flex-start;
margin-bottom: 15px;
border-bottom: 1px solid #f2f2f2;
padding-bottom: 30px;
position: relative;
}
.rank-tag {
width: 30px;
height: 30px;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
}
.rank-text-top3 {
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 24rpx;
color: #ffffff;
line-height: 33rpx;
text-shadow: 0px 0px 2px #deb72b;
text-align: left;
font-style: normal;
image {
width: 33rpx;
height: 41rpx;
margin-top: -10rpx;
}
}
.rank-text {
// font-family: PingFangSC, PingFang SC;
// font-weight: bold;
// font-size: 28rpx;
// color: #e98254;
width: 32rpx;
height: 30rpx;
margin-top: -20rpx;
background: #f5f5f5;
border-radius: 8rpx;
font-family: AvantiBold;
font-size: 24rpx;
color: #5a5a5a;
line-height: 26rpx;
text-align: left;
font-style: normal;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
.news-content {
flex: 1;
display: flex;
flex-direction: column;
}
.news-title {
font-size: 16px;
font-weight: bold;
color: #333;
margin-bottom: 5px;
line-height: 1.2;
}
.news-desc {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #333333;
text-align: left;
font-style: normal;
display: -webkit-box;
/* 设置为WebKit内核的弹性盒子模型 */
-webkit-box-orient: vertical;
/* 垂直排列 */
-webkit-line-clamp: 2;
/* 限制显示三行 */
overflow: hidden;
/* 隐藏超出范围的内容 */
text-overflow: ellipsis;
/* 使用省略号 */
}
.news-meta {
display: flex;
justify-content: space-between;
font-size: 12px;
color: #999;
margin-top: 10rpx;
}
.source,
.time,
.score {
// opacity: 0.8;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 22rpx;
color: #999999;
line-height: 30rpx;
text-align: left;
font-style: normal;
}
.time {
margin-left: 10rpx;
}
.score {
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 22rpx;
color: #ffa800;
line-height: 30rpx;
text-align: center;
font-style: normal;
}
.exp_up {
width: 21rpx;
height: 20rpx;
}
.r_exp {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
gap: 10rpx;
}
.mohu {
filter: blur(7rpx);
}
.lock_view {
background: linear-gradient(180deg, rgba(248, 244, 238, 0) 0%, #f8f4ee 100%);
border-radius: 20rpx;
padding: 10rpx 20rpx;
display: flex;
align-items: center;
margin-top: -10rpx;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 74rpx;
.lock_icon {
width: 27rpx;
height: 34rpx;
margin-right: 10rpx;
}
.lock_text {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #7f6242;
line-height: 33rpx;
text-align: left;
font-style: normal;
}
}
.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;
}
}
</style>
Reference in New Issue View Git Blame Copy Permalink