消息列表展示优化
This commit is contained in:
@@ -1,282 +1,314 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="backCont">
|
||||
<image class="img" :src="topicData.cover" mode="aspectFill"></image>
|
||||
<view class="head">
|
||||
<view class="ios-top"></view>
|
||||
<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'
|
||||
import userAuth from '@/public/userAuth'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
topicData : '',
|
||||
goodsArr : [],
|
||||
topicContent: '',
|
||||
isFavorite : ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getRank()
|
||||
},
|
||||
methods: {
|
||||
// 详情
|
||||
getRank(){
|
||||
topicDet(this.$Route.query.id).then(res => {
|
||||
uni.setNavigationBarTitle({
|
||||
title: res.name
|
||||
})
|
||||
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) {
|
||||
if(this.$store.state.token === ''){
|
||||
const Auth = new userAuth()
|
||||
Auth.Login()
|
||||
return
|
||||
}
|
||||
topicThumb(id).then(res => {
|
||||
this.isFavorite = !this.isFavorite
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background: $window-color;
|
||||
}
|
||||
|
||||
.backCont {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
padding-top: 90%;
|
||||
&::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 * 3 $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;
|
||||
}
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="backCont">
|
||||
<image class="img" :src="topicData.cover" mode="aspectFill"></image>
|
||||
<view class="head">
|
||||
<view class="ios-top"></view>
|
||||
<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'
|
||||
import userAuth from '@/public/userAuth'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
topicData: '',
|
||||
goodsArr: [],
|
||||
topicContent: '',
|
||||
isFavorite: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getRank()
|
||||
},
|
||||
methods: {
|
||||
// 详情
|
||||
getRank() {
|
||||
topicDet(this.$Route.query.id).then(res => {
|
||||
uni.setNavigationBarTitle({
|
||||
title: res.name
|
||||
})
|
||||
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) {
|
||||
if (this.$store.state.token === '') {
|
||||
const Auth = new userAuth()
|
||||
Auth.Login()
|
||||
return
|
||||
}
|
||||
topicThumb(id).then(res => {
|
||||
this.isFavorite = !this.isFavorite
|
||||
|
||||
this.topicData.favorites = res
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background: $window-color;
|
||||
}
|
||||
|
||||
.backCont {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
padding-top: 90%;
|
||||
|
||||
&::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 * 3 $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>
|
||||
|
||||
Reference in New Issue
Block a user