TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

[更新发现]

Browse Source
This commit is contained in:
zhangmanman
2022-01-13 13:56:32 +08:00
parent 9af54bc24a
commit c82f40ee09
27 changed files with 1274 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

243
pages/topic/details.vue
View File

@@ -1,46 +1,61 @@
<template>
<view class="content">
<view class="head">
坚持做瑜伽可以减肥吗?
</view>
<view class="source">
<image class="logo" src="/static/icon/sign-icon.png" mode="aspectFill"></image>
<view class="title">
<view class="name">
ZH大健康
<view class="backCont">
<image class="img" :src="topicData.cover" mode="aspectFill"></image>
<view class="head">
<view class="ellipsis title">
{{ topicData.name }}
</view>
<view class="text">
ZH大健康官方账号
<view class="tips" v-if="topicData.category">
# 话题 -- {{ topicData.category.name }} #
</view>
</view>
</view>
<view class="brief">
提到骨质疏松，大家的第一反应估计就是补钙，骨质疏松是一种悄无声息的疾病，大多数患者在早期没有症状，随着骨质的逐步流失，逐渐会有全身关节疼痛、甚至稍有不慎便摔成骨折。
骨质疏松是一种以低骨量和骨组织微结构破坏为特征，导致骨质脆性增加和易于骨折的全身性骨代谢性疾病。常见于老年人，但各年龄时期都可以发病。
一般的症状包括腰背疼痛、身高下降、驼背以及骨折发生等，但事实上，在这些症状发生之前，骨量已经大量流失，骨质疏松也早已开始了。
一旦发生骨质疏松性骨折危害巨大，特别是股骨颈等部位发生的骨折，会给患者带来严重的疼痛、高额医疗支出、致残失能等。
严重影响生活质量的同时，给家庭也造成巨大的负担，并且会缩短患者寿命，因而骨质疏松性骨折常被称为“人生的最后一次骨折”。提到骨质疏松，大家的第一反应估计就是补钙，骨质疏松是一种悄无声息的疾病，大多数患者在早期没有症状，随着骨质的逐步流失，逐渐会有全身关节疼痛、甚至稍有不慎便摔成骨折。
骨质疏松是一种以低骨量和骨组织微结构破坏为特征，导致骨质脆性增加和易于骨折的全身性骨代谢性疾病。常见于老年人，但各年龄时期都可以发病。
一般的症状包括腰背疼痛、身高下降、驼背以及骨折发生等，但事实上，在这些症状发生之前，骨量已经大量流失，骨质疏松也早已开始了。
一旦发生骨质疏松性骨折危害巨大，特别是股骨颈等部位发生的骨折，会给患者带来严重的疼痛、高额医疗支出、致残失能等。
严重影响生活质量的同时，给家庭也造成巨大的负担，并且会缩短患者寿命，因而骨质疏松性骨折常被称为“人生的最后一次骨折”。
</view>
<view class="goods">
<view class="title">
相关商品
</view>
<view class="item">
<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">
黑果枸杞
<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="item-price">
￥99.00
<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 class="item-btn">
查看商品
</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">
查看商品
</view>
</view>
</view>
</view>
</view>
@@ -48,59 +63,164 @@
</template>
<script>
import { topicDet, topicThumb } from '@/apis/interfaces/topic'
export default {
data() {
return {
topicData : '',
goodsArr : [],
topicContent: '',
isFavorite : ''
}
},
onLoad() {},
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 {
padding: $padding;
box-sizing: border-box;
background: $window-color;
}
.head {
font-size: $title-size + 4;
font-weight: bold;
}
.source {
margin: $margin 0;
.backCont {
position: relative;
.logo {
width: 58rpx;
height: 58rpx;
border-radius: 50%;
margin-top: $margin - 22;
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);
}
.title {
.img {
position: absolute;
left: 0;
top: 0;
width: 100%;
padding-left: 74rpx;
font-size: $title-size-sm;
.name {
margin-bottom: $margin - 25;
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 {
font-size: $title-size-sm - 4;
color: $text-gray-m;
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 {
line-height: 48rpx;
font-size: $title-size-m;
color: $text-color;
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 {
@@ -115,6 +235,7 @@
background: #f5fdfa;
border-radius: $radius;
padding: $padding;
box-sizing: border-box;
.item-cover {
width: 120rpx;
height: 90rpx;

125
pages/topic/index.vue
View File

@@ -1,69 +1,90 @@
<template>
<view class="content">
<view class="tabs">
<u-sticky bgColor="#fff" zIndex="99">
<u-tabs
:list="list1"
@click="click"
:list="listArr"
@click="changeTopic"
lineColor="#34CE98"
:activeStyle="{fontWeight: 'bold', fontSize: '30rpx'}"
/>
</view>
<view class="topic">
</u-sticky>
<view class="topic" v-if="topicArr.length > 0">
<oct-topic
:lists="topicArr"
@onTopic="$Router.push({ name: 'topicDetails', params: {id: $event.id }})"
@onTopic="$Router.push({ name: 'topicDetails', params: {id: $event.topic_id, title: $event.name }})"
/>
<block v-if="page.total_page > 1">
<u-loadmore :status="status" />
</block>
</view>
<view class="noTopic" v-else>
<u-empty
mode="list"
text="暂无食谱"
/>
</view>
</view>
</template>
<script>
import { lists, categories } from '@/apis/interfaces/topic'
export default {
data() {
return {
list1: [{
name: '慢病护理',
}, {
name: '减肥塑性',
}, {
name: '心理健康'
}, {
name: '女性健康'
}, {
name: '健康养生'
}, {
name: '其他'
}],
topicArr: [{
id: 1,
title: '坚持做瑜伽可以减肥吗',
read: '100',
praise: '100',
cover: 'http://up.boohee.cn/house/u/mboohee/img/others/7.2.jpg'
},{
id: 2,
title: '有没有减肥秘诀/减肥偏方/减肥窍门',
read: '100',
praise: '100',
cover: 'http://up.boohee.cn/house/u/mboohee/img/others/yundong1.jpg'
},{
id: 3,
title: '只需2招迅速变出小蛮腰',
read: '100',
praise: '100',
cover: 'http://up.boohee.cn/house/u/mboohee/img/others/yundong2.jpg'
},{
id: 3,
title: '有效方便的减肥方法有哪些',
read: '100',
praise: '100',
cover: 'http://up.boohee.cn/house/u/mboohee/img/others/jian.jpg'
}]
listArr : [],
topicArr : [],
categoryId : '',
status : 'loadmore',
page : ''
}
},
onLoad() {},
methods: {
mounted() {
// 获取分类
this.getCategories()
// 获取列表
this.getTopic()
},
methods: {
// 分类
getCategories(){
categories().then(res => {
this.listArr = res
})
},
// 列表
getTopic(categoryId, pages){
lists({
category_id: categoryId,
page: pages
}).then(res => {
if(res.page.current == 1){
this.topicArr = []
}
this.topicArr = this.topicArr.concat(res.data)
this.status = this.page.has_more ? 'loadmore': 'nomore'
this.page = res.page
})
},
// 切换分类
changeTopic(item) {
// 获取列表
this.getTopic(item.category_id, 1)
}
},
// 下拉加载
onReachBottom() {
if(this.page.has_more){
this.status = 'loading'
let pages = this.page.current + 1
// 获取列表
this.getTopic('', pages)
return
}
this.status = 'nomore'
}
};
</script>
@@ -105,4 +126,16 @@
padding: 0 $padding;
box-sizing: border-box;
}
.noTopic {
background-color: white;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>