144 lines
3.2 KiB
Vue
144 lines
3.2 KiB
Vue
|
<template>
|
||
|
|
<view class="list">
|
||
|
|
<view
|
||
|
|
v-for="(item, index) in props.data"
|
||
|
|
:key="index"
|
||
|
|
class="item"
|
||
|
|
|
||
|
|
>
|
||
|
|
<!-- 标题 start -->
|
||
|
|
<!-- <text class="title" v-html="item.title">{{ item.title }}</text> -->
|
||
|
|
<text @click="handleClick(item)" class="title" v-html="item.MarkInRedTitle || item.title"></text>
|
||
|
|
<!-- 标题 end -->
|
||
|
|
<!-- 内容 start -->
|
||
|
|
|
||
|
|
<view class="r_content">
|
||
|
|
<image src="@/static/icon_act_lt.png" class="title_icon"></image>
|
||
|
|
<text @click="handleClick(item)" class="content" v-html="item.MarkInRedContent || item.content"></text>
|
||
|
|
<!-- <text @click="handleClick(item)" class="content">{{ item.content }}</text> -->
|
||
|
|
<!-- 需要付费锁 start -->
|
||
|
|
<view class="need_login" v-if="item.needpay" @click="handleSubListItem(item)">
|
||
|
|
<image src="@/static/icon_lock.png" class="need_icon"></image>
|
||
|
|
<text>订阅后解锁全文</text>
|
||
|
|
<u-icon
|
||
|
|
name="arrow-right"
|
||
|
|
color="#fff"
|
||
|
|
size="10"
|
||
|
|
style="margin-left: 10rpx"
|
||
|
|
bold
|
||
|
|
></u-icon>
|
||
|
|
</view>
|
||
|
|
<!-- 需要付费锁 end -->
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 内容 end -->
|
||
|
|
|
||
|
|
<!-- 时间和阅读量 start -->
|
||
|
|
<view class="time_read">
|
||
|
|
<text>1分钟</text>
|
||
|
|
<view>
|
||
|
|
<text>{{ item.read }}阅读</text>
|
||
|
|
<text>{{ item.like }}点赞</text>
|
||
|
|
<text>{{ item.comment > 1000 ? "999+" : item.comment }}评论</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- 时间和阅读量 end -->
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { computed, onBeforeMount } from "vue";
|
||
|
|
const emit = defineEmits(["handleSubListItem"]);
|
||
|
|
const props = defineProps({
|
||
|
|
// 列表内容
|
||
|
|
data: {
|
||
|
|
type: Object,
|
||
|
|
default: () => {},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
console.log("props.data", props.data)
|
||
|
|
onBeforeMount(() => {});
|
||
|
|
|
||
|
|
// 点击订阅
|
||
|
|
const handleSubListItem = (item) => {
|
||
|
|
// props.data.needpay = true;
|
||
|
|
// return () => {
|
||
|
|
// console.log("item ===>", item)
|
||
|
|
emit("handleSubListItem", item.id);
|
||
|
|
// }
|
||
|
|
};
|
||
|
|
|
||
|
|
// 点击进入详情
|
||
|
|
const handleClick = (item: any) => {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: `/pages/detail/index?id=${item.id}&type=${item.type}`,
|
||
|
|
});
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.item {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
margin-top: 20rpx;
|
||
|
|
border-bottom: 1px solid rgb(204, 204, 204, 0.3);
|
||
|
|
padding-bottom: 20rpx;
|
||
|
|
|
||
|
|
.title {
|
||
|
|
font-size: 32rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.r_content {
|
||
|
|
position: relative;
|
||
|
|
margin-top: 10rpx;
|
||
|
|
min-height: 130rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content {
|
||
|
|
font-size: 26rpx;
|
||
|
|
color: rgba(51, 51, 51, 0.6);
|
||
|
|
text-indent: 30rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title_icon {
|
||
|
|
width: 24rpx;
|
||
|
|
height: 24rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.need_login {
|
||
|
|
background: linear-gradient(to right, #e7303f, #fff);
|
||
|
|
padding: 20rpx 20rpx;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
color: #fff;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
font-size: 24rpx;
|
||
|
|
margin-top: 5rpx;
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
width: 95%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.need_icon {
|
||
|
|
width: 24rpx;
|
||
|
|
height: 24rpx;
|
||
|
|
margin-right: 10rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.time_read {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
font-size: 20rpx;
|
||
|
|
color: #b9b9b9;
|
||
|
|
margin-top: 15rpx;
|
||
|
|
|
||
|
|
text {
|
||
|
|
margin-right: 10rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|