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.
105 lines
2.1 KiB
105 lines
2.1 KiB
12 months ago
|
<template>
|
||
|
|
<view class="bg">
|
||
|
|
<view class="topLeft flex-center">
|
||
|
|
<span class="iconfont" @click="goBack"></span>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<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="name">
|
||
|
|
<image src="https://static.ticket.sz-trip.com/tongli/images/index/noveltyUser.png" mode=""></image>
|
||
|
|
{{detail.author}}
|
||
|
|
</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;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.bg {
|
||
|
|
width: 750rpx;
|
||
|
|
min-height: 100vh;
|
||
|
|
background: #F7F7F7;
|
||
|
|
padding-bottom: 100rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.swiper {
|
||
|
|
height: 500rpx;
|
||
|
|
|
||
|
|
.swiper-item {
|
||
|
|
width: 100%;
|
||
|
|
height: 500rpx;
|
||
|
|
|
||
|
|
.item-img {
|
||
|
|
width: 750rpx;
|
||
|
|
height: 500rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.topBox {
|
||
|
|
width: 697rpx;
|
||
|
|
background: #FFFFFF;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
padding: 22rpx 48rpx 34rpx 26rpx;
|
||
|
|
margin: 26rpx auto 0;
|
||
|
|
|
||
|
|
.title {
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 35rpx;
|
||
|
|
color: #000000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.name {
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 25rpx;
|
||
|
|
color: #666666;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-top: 35rpx;
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 23.33rpx;
|
||
|
|
height: 23.33rpx;
|
||
|
|
margin-right: 12rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.content {
|
||
|
|
width: 697rpx;
|
||
|
|
background: #FFFFFF;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
margin: 42rpx auto 0;
|
||
|
|
padding: 36rpx 28rpx;
|
||
|
|
}
|
||
|
|
</style>
|