273 lines
8.7 KiB
Vue
273 lines
8.7 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="backCont">
|
|
<image class="img" :src="topicData.cover" mode="aspectFill"></image>
|
|
<view class="head">
|
|
<view class="ellipsis title">
|
|
{{ topicData.name }}
|
|
</view>
|
|
<view class="tips" v-if="topicData.category">
|
|
# 话题 -- {{ topicData.category.name }} #
|
|
</view>
|
|
<view class="ellipsis text">
|
|
{{ topicData.description }}
|
|
</view>
|
|
<view class="tool">
|
|
<view class="tool-see">
|
|
<text>{{ topicData.clicks }} 人游览</text>
|
|
<text>{{ topicData.favorites }} 人点赞</text>
|
|
</view>
|
|
<view class="tool-btn" :class="{active : isFavorite}" @click="thumbClick(topicData.topic_id)">
|
|
<u-icon name="thumb-up-fill" :color="isFavorite ? '#333': '#fff'" size="17" style="margin-right: 5rpx;"></u-icon>
|
|
{{ isFavorite ? '已赞' : '点赞' }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="brief">
|
|
<view class="source">
|
|
<image class="source-logo" src="/static/find/logo.png" mode="aspectFill"></image>
|
|
<view class="source-title">
|
|
<view class="source-name">
|
|
{{ topicData.author }}
|
|
</view>
|
|
<view class="source-text">
|
|
ZH大健康官方账号
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="brief-text">
|
|
<rich-text :nodes="topicContent"></rich-text>
|
|
</view>
|
|
<view class="goods" v-if="goodsArr.length > 0">
|
|
<view class="title">
|
|
相关商品
|
|
</view>
|
|
<view class="item" v-for="(item, index) in goodsArr" :key="index">
|
|
<image class="item-cover" src="http://api.zh.shangkelian.cn/storage/images/2022/01/06/fc143605e2a1557989e96652d990579f.png" mode="aspectFill"></image>
|
|
<view class="item-title">
|
|
<view class="nowrap item-name">
|
|
{{ item.name }}
|
|
</view>
|
|
<view class="item-price">
|
|
￥{{ item.price }}
|
|
</view>
|
|
</view>
|
|
<view class="item-btn" @click="$Router.push({ name: 'StoreGoods', params: {id: item.goods_id}})">
|
|
查看商品
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { topicDet, topicThumb } from '@/apis/interfaces/topic'
|
|
export default {
|
|
data() {
|
|
return {
|
|
topicData : '',
|
|
goodsArr : [],
|
|
topicContent: '',
|
|
isFavorite : ''
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getRank()
|
|
},
|
|
methods: {
|
|
// 详情
|
|
getRank(){
|
|
topicDet(this.$Route.query.id).then(res => {
|
|
this.topicData = res
|
|
this.goodsArr = res.goods
|
|
this.isFavorite = res.is_favorite
|
|
this.topicContent = res.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
|
|
})
|
|
},
|
|
|
|
// 点赞
|
|
thumbClick(id) {
|
|
topicThumb(id).then(res => {
|
|
this.isFavorite = !this.isFavorite
|
|
})
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background: $window-color;
|
|
}
|
|
|
|
.backCont {
|
|
position: relative;
|
|
width: 100vw;
|
|
padding-top: 75%;
|
|
&::after {
|
|
position: absolute;
|
|
content: '';
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 2;
|
|
background-color: rgba($color: #000000, $alpha: .35);
|
|
}
|
|
.img {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
filter: blur(10rpx);
|
|
overflow: hidden;
|
|
}
|
|
.head {
|
|
padding: $padding * 2 $padding + 30 0;
|
|
color: white;
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 9;
|
|
.title {
|
|
font-size: $title-size + 8;
|
|
margin-bottom: $margin - 10;
|
|
height: 100rpx;
|
|
font-weight: 600;
|
|
}
|
|
.tips {
|
|
margin-bottom: $margin + 20;
|
|
}
|
|
.text {
|
|
margin: $margin 0 $margin + 10;
|
|
line-height: 48rpx;
|
|
height: 100rpx;
|
|
font-size: $title-size-lg;
|
|
}
|
|
.tool {
|
|
width: 100%;
|
|
font-size: $title-size-m;
|
|
display: flex;
|
|
line-height: 48rpx;
|
|
.tool-see {
|
|
flex: 1;
|
|
text {
|
|
padding-right: $padding;
|
|
}
|
|
}
|
|
.tool-btn {
|
|
border: 2rpx solid white;
|
|
border-radius: $radius * 2;
|
|
font-size: $title-size-sm;
|
|
padding: 0 $padding - 5;
|
|
line-height: 48rpx;
|
|
display: flex;
|
|
&.active {
|
|
background-color: white;
|
|
color: $text-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.brief {
|
|
position: absolute;
|
|
top: 90%;
|
|
width: 100%;
|
|
z-index: 10;
|
|
background-color: white;
|
|
border-radius: $radius * 3 $radius * 3 0 0;
|
|
padding: $padding;
|
|
box-sizing: border-box;
|
|
.brief-text {
|
|
margin: $margin 0;
|
|
line-height: 48rpx;
|
|
font-size: $title-size-lg;
|
|
color: $text-color;
|
|
padding: 0 $padding - 20;
|
|
box-sizing: border-box;
|
|
}
|
|
.source {
|
|
position: relative;
|
|
.source-logo {
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
border-radius: 50%;
|
|
margin-top: $margin - 24;
|
|
}
|
|
.source-title {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
padding-left: 90rpx;
|
|
box-sizing: border-box;
|
|
font-size: $title-size-lg;
|
|
.source-name {
|
|
font-weight: 600;
|
|
margin-bottom: $margin - 25;
|
|
}
|
|
.source-text {
|
|
line-height: 48rpx;
|
|
font-size: $title-size-m;
|
|
color: $text-gray-m;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.goods {
|
|
margin-top: $margin;
|
|
.title {
|
|
font-weight: bold;
|
|
font-size: $title-size;
|
|
}
|
|
.item {
|
|
position: relative;
|
|
margin-top: $margin - 10;
|
|
background: #f5fdfa;
|
|
border-radius: $radius;
|
|
padding: $padding;
|
|
box-sizing: border-box;
|
|
.item-cover {
|
|
width: 120rpx;
|
|
height: 90rpx;
|
|
border-radius: $radius-m;
|
|
}
|
|
.item-title {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: calc(100% - 180rpx);
|
|
box-sizing: border-box;
|
|
padding: $padding $padding 0 180rpx;
|
|
font-size: $title-size-lg;
|
|
margin-bottom: 10px;
|
|
color: $text-color;
|
|
.item-price {
|
|
color: $text-price;
|
|
margin-top: $margin - 20;
|
|
}
|
|
}
|
|
.item-btn {
|
|
position: absolute;
|
|
right: $padding;
|
|
top: $padding + 20;
|
|
background-color: $main-color;
|
|
color: white;
|
|
line-height: 62rpx;
|
|
font-size: $title-size-m;
|
|
padding: 0 $padding - 10;
|
|
border-radius: $radius-m;
|
|
}
|
|
}
|
|
}
|
|
</style>
|