You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
138 lines
2.9 KiB
138 lines
2.9 KiB
<template>
|
|
<view class="bg">
|
|
|
|
<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" circular indicator-dots indicator-color="rgba(255,255,255,.5)"
|
|
indicator-active-color="#fff" v-if="detail.images">
|
|
<swiper-item v-for="(item, index) in detail.images.split(',')" :key="item.id">
|
|
<view class="swiper-item">
|
|
<image class="item-img" :src="showImg(item)" mode="aspectFill"></image>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
<view class="topBox">
|
|
<view class="title text-overflowRows">{{detail.title}}</view>
|
|
<view class="flex-between">
|
|
<view class="name">
|
|
<image src="https://static.ticket.sz-trip.com/tongli/images/index/user.png" mode=""></image>
|
|
{{detail.author}}
|
|
</view>
|
|
<view class="other-info">
|
|
<image @click="likeAricle(detail)" v-if="detail.is_like" :src="showImg('/uploads/20250513/00b5680ca4b62479a59b40786979e3e2.png')" mode=""></image>
|
|
<image @click="likeAricle(detail)" v-else :src="showImg('/uploads/20250513/99e8d59b9692ae73b3204a6cec79611b.png')" mode=""></image>
|
|
<text style="padding-right: 36rpx;">{{handleNum(detail.star)}}</text>
|
|
<image :src="showImg('/uploads/20250513/71acef9a784095e9ba17c88580506705.png')" mode=""></image>
|
|
{{handleNum(detail.view)}}
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="content" v-html="formateRichText(detail.content)"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
detail: {}
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.Post({id: option.id},'/api/article/getArticleById').then(res => {
|
|
if (res.data.flag == 0) {
|
|
uni.showToast({title: '文章不存在或已下架',icon: 'none'})
|
|
setTimeout(() => {this.goBack()}, 2000)
|
|
}
|
|
this.detail = res.data;
|
|
});
|
|
},
|
|
methods: {
|
|
likeAricle (item) {
|
|
|
|
},
|
|
handleNum (num) {
|
|
if (num<=0) { return 0 }
|
|
if (num>=1000) {
|
|
return (num/1000).toFixed(1)+'k'
|
|
}
|
|
return num
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.bg {
|
|
width: 750rpx;
|
|
min-height: 100vh;
|
|
background: #FFFFFF;
|
|
padding-bottom: 100rpx;
|
|
}
|
|
|
|
.swiper {
|
|
height: 408rpx;
|
|
|
|
.swiper-item {
|
|
width: 100%;
|
|
height: 408rpx;
|
|
|
|
.item-img {
|
|
width: 750rpx;
|
|
height: 408rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.topBox {
|
|
width: 100%;
|
|
padding: 28rpx 32rpx;
|
|
|
|
.title {
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #000000;
|
|
}
|
|
.flex-between{
|
|
padding: 28rpx 0;
|
|
border-bottom: 2rpx solid #F7F7F7;
|
|
}
|
|
|
|
.name {
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #000000;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
|
|
image {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
// border-radius: 50%;
|
|
margin-right: 12rpx;
|
|
}
|
|
}
|
|
|
|
.other-info{
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #848484;
|
|
|
|
image{
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
background: #FFFFFF;
|
|
padding:0 28rpx;
|
|
}
|
|
</style>
|