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

merge

Browse Source
This commit is contained in:
唐明明
2022-01-13 15:01:19 +08:00
parent f4229dbe22 82667fa84b
commit ae0179af3c
27 changed files with 1294 additions and 315 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
apis/interfaces/menu.js
View File

@@ -36,9 +36,25 @@ const menuDet = (recipe) =>{
}) })
} }
// 指南引导
const guide = (recipe) =>{
return request({
url: 'articles/health/guide'
})
}
// 搜索页
const search = () =>{
return request({
url: 'health/foods/search'
})
}
export { export {
index, index,
categories, categories,
queue, queue,
menuDet menuDet,
guide,
search
} }

36
apis/interfaces/notice.js Normal file
View File

@@ -0,0 +1,36 @@
/**
* Web唐明明
* 匆匆数载恍如梦，岁月迢迢华发增。
* 碌碌无为枉半生，一朝惊醒万事空。
* moduleName: 话题
*/
import { request } from '../index'
// 分类
const categories = () =>{
return request({
url: 'notifications'
})
}
// 列表
const lists = (type, data) =>{
return request({
url: 'notifications/' + type + '/list',
data:data
})
}
// 详情
const noticeDet = (notification_id) =>{
return request({
url: 'notifications/' + notification_id
})
}
export {
categories,
lists,
noticeDet
}

10
apis/interfaces/ranking.js
View File

@@ -23,7 +23,15 @@ const foods = (data) =>{
}) })
} }
// 食物详情
const foodDet = (food) =>{
return request({
url: 'health/foods/' + food
})
}
export { export {
categories, categories,
foods foods,
foodDet
} }

13
apis/interfaces/sign.js
View File

@@ -14,6 +14,15 @@ const date = () =>{
}) })
} }
export { // 签到
date const sign = () =>{
return request({
url: 'user/sign',
method: 'POST'
})
}
export {
date,
sign
} }

53
apis/interfaces/topic.js Normal file
View File

@@ -0,0 +1,53 @@
/**
* Web唐明明
* 匆匆数载恍如梦，岁月迢迢华发增。
* 碌碌无为枉半生，一朝惊醒万事空。
* moduleName: 话题
*/
import { request } from '../index'
// 首页
const index = () =>{
return request({
url: 'health/discover'
})
}
// 列表
const lists = (data) =>{
return request({
url: 'health/topics',
data: data
})
}
// 分类
const categories = () =>{
return request({
url: 'health/topics/categories'
})
}
// 详情
const topicDet = (topic) =>{
return request({
url: 'health/topics/' + topic
})
}
// 点赞
const topicThumb = (topic) =>{
return request({
url: 'health/topics/' + topic + '/favorite',
method: 'POST'
})
}
export {
index,
lists,
categories,
topicDet,
topicThumb
}

38
pages.json
View File

@@ -6,6 +6,20 @@
"navigationBarTitleText": "发现", "navigationBarTitleText": "发现",
"navigationStyle": "custom" "navigationStyle": "custom"
} }
}, {
"path": "pages/index/guide",
"name": "indexGuide",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
}, {
"path": "pages/index/search",
"name": "indexSearch",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
}, { }, {
"path": "pages/record/index", "path": "pages/record/index",
"name": "Record", "name": "Record",
@@ -199,6 +213,30 @@
"navigationBarBackgroundColor": "#FFFFFF", "navigationBarBackgroundColor": "#FFFFFF",
"enablePullDownRefresh": true "enablePullDownRefresh": true
} }
}, {
"path": "pages/notice/index",
"name": "noticeIndex",
"style": {
"navigationBarTitleText": "消息",
"navigationBarBackgroundColor": "#FFFFFF",
"enablePullDownRefresh": true
}
}, {
"path": "pages/notice/list",
"name": "noticeList",
"style": {
"navigationBarTitleText": "消息",
"navigationBarBackgroundColor": "#FFFFFF",
"enablePullDownRefresh": true
}
}, {
"path": "pages/notice/details",
"name": "noticeDetails",
"style": {
"navigationBarTitleText": "消息",
"navigationBarBackgroundColor": "#FFFFFF",
"enablePullDownRefresh": true
}
},{ },{
"path": "pages/im/index", "path": "pages/im/index",
"name": "IM", "name": "IM",

34
pages/index/guide.vue Normal file
View File

@@ -0,0 +1,34 @@
<template>
<view class="content">
<image class="guideImg" :src="guideCover" mode="widthFix"></image>
</view>
</template>
<script>
import { guide } from '@/apis/interfaces/menu'
export default {
data() {
return {
guideCover: ''
};
},
mounted() {
// 获取首页
this.getGuide()
},
methods: {
// 引导图片
getGuide(){
guide().then(res => {
this.guideCover = res.cover
})
}
}
};
</script>
<style lang="scss" scoped>
.guideImg {
width: 100%;
}
</style>

114
pages/index/index.vue
View File

@@ -4,93 +4,66 @@
<view class="status-main"> <view class="status-main">
<view class="helloe">欢迎使用ZH健康</view> <view class="helloe">欢迎使用ZH健康</view>
<view class="btns"> <view class="btns">
<view class="btns-item" @click="$Router.push({name: 'signIndex'})"><image src="@/static/icon/sign-icon.png" mode="widthFix"></image></view> <view class="btns-item" @click="$Router.push({name: 'signIndex'})"><image src="@/static/icon/sign-icon.gif" mode="widthFix"></image></view>
<view class="btns-item show"><uni-icons custom-prefix="iconfont" type="icon-pinglun" size="25"></uni-icons></view> <view class="btns-item show" @click="$Router.push({name: 'noticeIndex'})"><uni-icons custom-prefix="iconfont" type="icon-pinglun" size="25"></uni-icons></view>
</view> </view>
</view> </view>
</view> </view>
<!-- 搜索 --> <!-- 搜索 -->
<view class="search"> <view class="search">
<navigator class="search-nav" url=""> <view class="search-nav" @click="$Router.push({name: 'indexSearch'})">
<uni-icons class="search-icon" custom-prefix="iconfont" type="icon-sousuo" color="#34CE98" size="20"></uni-icons> <uni-icons class="search-icon" custom-prefix="iconfont" type="icon-sousuo" color="#34CE98" size="20"></uni-icons>
低脂鸡胸肉 低脂鸡胸肉
</navigator> </view>
</view> </view>
<!-- 排行榜 --> <!-- 排行榜 -->
<view class="img-card" @click="$Router.push({name: 'rankingIndex'})"><image src="@/static/dev/img-01.png" mode="widthFix"></image></view> <view class="img-card" @click="$Router.push({name: 'rankingIndex'})"><image src="@/static/dev/img-01.png" mode="widthFix"></image></view>
<!-- 精选推荐 --> <!-- 精选推荐 -->
<view class="new-box"><view class="title">精选推荐</view><view class="more" @click="$Router.push({name: 'menuIndex'})">查看更多</view></view> <view class="new-box"><view class="title">精选推荐</view><view class="more" @click="$Router.push({name: 'menuIndex'})">查看更多</view></view>
<u-scroll-list class="choiceness-box" indicatorColor="#dafff2" indicatorActiveColor="#34CE98"> <u-scroll-list class="choiceness-box" indicatorColor="#dafff2" indicatorActiveColor="#34CE98">
<view v-for="(item, index) in choiceness" class="choiceness-item" :key="index"> <view v-for="(item, index) in choiceness" class="choiceness-item" :key="index" @click="$Router.push({name: 'menuClassify', params: {id: item.category_id, index: index + 1 }})">
<view class="choiceness-item-nav" :style="'backgroundColor:#' + item.color"> <view class="choiceness-item-nav" :style="'backgroundColor:' + item.color">
<image class="choiceness-item-cover" :src="item.thumb"></image> <image class="choiceness-item-cover" :src="item.cover"></image>
<view class="choiceness-item-title">{{item.title}}</view> <view class="nowrap choiceness-item-title">{{item.name}}</view>
<view class="choiceness-item-describe">{{item.describe}}</view> <view class="nowrap choiceness-item-describe">{{item.description}}</view>
</view> </view>
</view> </view>
</u-scroll-list> </u-scroll-list>
<!-- 话题广场 --> <!-- 话题广场 -->
<view class="new-box"> <view class="new-box">
<view class="title">话题广场</view><view class="more" @click="$Router.push({name: 'topicIndex'})">查看更多</view> <view class="title">话题广场</view><view class="more" @click="$Router.push({name: 'topicIndex'})">更多分类</view>
<oct-topic <oct-topic
:lists="topicArr" :lists="topicArr"
@onTopic="$Router.push({ name: 'topicDetails', params: {id: $event.id }})" @onTopic="$Router.push({ name: 'topicDetails', params: {id: $event.topic_id }})"
/> />
</view> </view>
<!-- ZH健康 --> <!-- ZH健康 -->
<view class="img-card"><image src="@/static/dev/img-00.png" mode="widthFix"></image></view> <view class="img-card"><image src="@/static/dev/img-00.png" mode="widthFix" @click="$Router.push({ name: 'indexGuide'})" ></image></view>
</view> </view>
</template> </template>
<script> <script>
import { index } from '@/apis/interfaces/topic'
export default { export default {
data() { data() {
return { return {
choiceness: [{ choiceness: [],
title : "低碳食谱", topicArr: []
describe: "减肥人士的最爱",
color : "c8e6da",
thumb : 'https://cdn.uviewui.com/uview/goods/1.jpg'
},{
title : "低GI食谱",
describe: "家庭衡量膳食平衡",
color : "f0edff",
thumb : 'https://cdn.uviewui.com/uview/goods/1.jpg'
},{
title : "高蛋白食谱",
describe: "健身搭配食用更佳",
color : "fbeed3",
thumb : 'https://cdn.uviewui.com/uview/goods/1.jpg'
}],
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'
}]
}; };
}, },
onLoad() {}, mounted() {
methods: {} // 获取首页
this.getindex()
},
methods: {
// 首页
getindex(){
index().then(res => {
this.choiceness = res.recipeCategories
this.topicArr = res.topics
})
},
}
}; };
</script> </script>
@@ -129,16 +102,16 @@ export default {
width: 46rpx; width: 46rpx;
vertical-align: top; vertical-align: top;
} }
&.show::before { // &.show::before {
content: ''; // content: '';
height: 10rpx; // height: 10rpx;
width: 10rpx; // width: 10rpx;
position: absolute; // position: absolute;
right: 0; // right: 0;
top: 0; // top: 0;
background: $text-price; // background: $text-price;
border-radius: 50%; // border-radius: 50%;
} // }
} }
} }
} }
@@ -180,10 +153,10 @@ export default {
} }
&-cover{ &-cover{
position: absolute; position: absolute;
right: $margin; right: $margin - 10;
top: $margin; top: $margin - 5;
width: 88rpx; width: 100rpx;
height: 88rpx; height: 100rpx;
vertical-align: top; vertical-align: top;
} }
&-title{ &-title{
@@ -200,6 +173,9 @@ export default {
font-size: 20rpx; font-size: 20rpx;
@extend .nowrap; @extend .nowrap;
} }
.choiceness-item-describe {
width: 180rpx;
}
} }
} }

186
pages/index/search.vue Normal file
View File

@@ -0,0 +1,186 @@
<template>
<view class="content">
<!-- 搜索 -->
<view class="search">
<view class="search-nav">
<u-search
v-model="keyword"
placeholder="请输入食物名称"
focus
:clearabled="true"
:showAction="false"
@change="change"
@search="search"
@clear="clear"
color="#000000"
bgColor="#F3F6FB"
searchIconColor="#34CE98"
/>
</view>
<view class="search-cancel" @click="$router.back(-1)">
取消
</view>
</view>
<view class="recommend" v-if="listArr == ''">
<view class="recommend-title">
大家都在搜
</view>
<view class="recommend-list">
<view class="label" v-for="(item, index) in recommendArr" :key="index" @click="$Router.push({ name: 'rankingDetails', params: {id: item.food_id, title: item.name }})" >
{{ item.name }}
</view>
</view>
</view>
<view class="recommend" v-if="listArr != ''">
<view class="recommend-title">
搜索结果
</view>
<block v-if="listArr.length > 0">
<oct-menu
:lists="listArr"
:btnStyle="{'margin-top': '30rpx'}"
isType="rank"
@onMenu="$Router.push({ name: 'rankingDetails', params: {id: $event.food_id, title: $event.name }})"
/>
<block v-if="page.total_page > 1">
<u-loadmore :status="status" />
</block>
</block>
<u-empty
v-else
mode="search"
/>
</view>
</view>
</template>
<script>
import { search } from '@/apis/interfaces/menu'
import { foods } from '@/apis/interfaces/ranking'
export default {
data() {
return {
keyword : '',
listArr : [],
recommendArr: [],
status : 'loadmore',
page : ''
};
},
mounted() {
// 获取首页
this.getSearch()
},
methods: {
// 引导图片
getSearch(){
search().then(res => {
this.recommendArr = res
})
},
// 分类-食物
getRank(val, pages){
foods({
name: val,
page: pages
}).then(res => {
if(res.page.current == 1){
this.listArr = []
}
this.listArr = this.listArr.concat(res.data)
this.status = this.page.has_more ? 'loadmore': 'nomore'
this.page = res.page
})
},
change(val) {
this.keyword = val
this.getRank(val)
},
// 搜索
search() {},
// 清除输入框
clear() {}
},
// 下拉加载
onReachBottom() {
if(this.page.has_more){
this.status = 'loading'
let pages = this.page.current + 1
// 获取列表
this.getRank(this.keyword, pages)
return
}
this.status = 'nomore'
}
};
</script>
<style lang="scss" scoped>
.content {
padding-top: calc(var(--status-bar-height) + 120rpx);
overflow: hidden;
}
// 搜索
.search {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
height: 120rpx;
background-color: white;
@extend .ios-top;
padding: $padding;
box-sizing: border-box;
.search-nav {
width: calc(100% - 100rpx);
background: $window-color;
height: 80rpx;
line-height: 80rpx;
border-radius: 40rpx;
color: $text-gray;
font-size: $title-size-lg;
display: flex;
}
.search-cancel {
color: $main-color;
position: absolute;
right: $padding;
top: $padding;
line-height: 80rpx;
width: 100rpx;
text-align: right;
}
}
.recommend {
padding: $padding;
box-sizing: border-box;
.recommend-title {
font-weight: bold;
margin-bottom: $margin;
}
.recommend-list {
flex-wrap: wrap;
display: flex;
.label {
display: inline-block;
color: $text-color;
background-color: #f3f3f3;
border-radius: $radius * 2;
padding: 0 $padding - 5;
line-height: 54rpx;
margin: $margin - 20;
font-size: $title-size-sm;
}
}
}
</style>

59
pages/menu/classify.vue
View File

@@ -1,14 +1,23 @@
<template> <template>
<view class="content"> <view class="content">
<view class="tabs"> <u-sticky bgColor="#fff" zIndex="99">
<u-tabs :current="tabsIndex" :list="tabArr" @change="tabsClick" lineColor="#34CE98" :activeStyle="{fontWeight: 'bold', fontSize: '30rpx'}"></u-tabs> <u-tabs
</view> :current="tabsIndex"
:list="tabArr"
@change="tabsClick"
lineColor="#34CE98"
:activeStyle="{fontWeight: 'bold', fontSize: '30rpx'}"
/>
</u-sticky>
<view class="box"> <view class="box">
<oct-menu <oct-menu
:lists="menuData" :lists="menuData"
:btnStyle="{'padding': '30rpx'}" :btnStyle="{'padding': '30rpx'}"
@onMenu="$Router.push({ name: 'menuDetails', params: {id: $event.id, title: $event.name, title: $event.index }})" @onMenu="$Router.push({ name: 'menuDetails', params: {id: $event.recipe_id, title: $event.name, title: $event.index }})"
/> />
<block v-if="page.total_page > 1">
<u-loadmore :status="status" />
</block>
</view> </view>
</view> </view>
</template> </template>
@@ -20,31 +29,60 @@
return { return {
tabArr : [], tabArr : [],
menuData : [], menuData : [],
tabsIndex : this.$Route.query.index tabsIndex : this.$Route.query.index,
tabsId : this.$Route.query.id,
status : 'loadmore',
page : ''
}; };
}, },
mounted() { mounted() {
// 获取分类
this.getTab() this.getTab()
this.getMenu(this.$Route.query.id)
// 获取列表
this.getMenu()
}, },
methods: { methods: {
// 分类
getTab(){ getTab(){
categories().then(res => { categories().then(res => {
this.tabArr = res this.tabArr = res
}) })
}, },
getMenu(id){ // 列表
getMenu(pages){
queue({ queue({
category_id: id category_id: this.tabsId,
page: pages
}).then(res => { }).then(res => {
this.menuData = res.data if(res.page.current == 1){
this.menuData = []
}
this.menuData = this.menuData.concat(res.data)
this.status = this.page.has_more ? 'loadmore': 'nomore'
this.page = res.page
}) })
}, },
// 切换分类
tabsClick(item) { tabsClick(item) {
this.getMenu(item.category_id) this.tabsId = item.category_id
this.tabsIndex = item.index this.tabsIndex = item.index
this.getMenu(1)
} }
},
// 下拉加载
onReachBottom() {
if(this.page.has_more){
this.status = 'loading'
let pages = this.page.current + 1
// 获取列表
this.getMenu(pages)
return
}
this.status = 'nomore'
} }
}; };
</script> </script>
@@ -63,6 +101,7 @@
.box { .box {
padding: 0 $padding; padding: 0 $padding;
box-sizing: border-box; box-sizing: border-box;
margin-top: $margin;
} }
// 34CE98 // 34CE98
</style> </style>

16
pages/menu/details.vue
View File

@@ -11,7 +11,7 @@
</view> </view>
<oct-menu <oct-menu
:lists="menuData.foods" :lists="menuData.foods"
:isType='true' isType="det"
:btnStyle="{'margin-top': '30rpx'}" :btnStyle="{'margin-top': '30rpx'}"
@onMenu="$Router.push({ name: 'menuDetails', params: {id: $event.food_id, title: $event.name }})" @onMenu="$Router.push({ name: 'menuDetails', params: {id: $event.food_id, title: $event.name }})"
/> />
@@ -25,31 +25,31 @@
<view class="other-name"> <view class="other-name">
碳水化合物 碳水化合物
</view> </view>
<view class="other-number"> <view class="nowrap other-number">
200.00g {{ menuData.carbohydrate }}g
</view> </view>
</view> </view>
<view class="other-label"> <view class="other-label">
<view class="other-name"> <view class="other-name">
蛋白质 蛋白质
</view> </view>
<view class="other-number"> <view class="nowrap other-number">
200.00g {{ menuData.protein }}g
</view> </view>
</view> </view>
<view class="other-label"> <view class="other-label">
<view class="other-name"> <view class="other-name">
脂肪 脂肪
</view> </view>
<view class="other-number"> <view class="nowrap other-number">
200.00g {{ menuData.cellulose }}g
</view> </view>
</view> </view>
<view class="other-label"> <view class="other-label">
<view class="other-name"> <view class="other-name">
千卡 千卡
</view> </view>
<view class="other-number"> <view class="nowrap other-number">
{{ menuData.calory }} {{ menuData.calory }}
</view> </view>
</view> </view>

3
pages/menu/index.vue
View File

@@ -5,7 +5,7 @@
<view class="name"> <view class="name">
{{ item.name }} {{ item.name }}
</view> </view>
<view class="more" @click="$Router.push({name: 'menuClassify', params: {id: item.category_id, index: index }})"> <view class="more" @click="$Router.push({name: 'menuClassify', params: {id: item.category_id, index: index + 1 }})">
查看更多<image src="/static/find/menu_more.png" mode="aspectFill"></image> 查看更多<image src="/static/find/menu_more.png" mode="aspectFill"></image>
</view> </view>
</view> </view>
@@ -26,7 +26,6 @@
</view> </view>
</template> </template>
<script> <script>
import { index } from '@/apis/interfaces/menu' import { index } from '@/apis/interfaces/menu'
export default { export default {

100
pages/notice/details.vue Normal file
View File

@@ -0,0 +1,100 @@
<template>
<view class="content">
<view class="tips">
<view class="noticeImg" :class="{active : noticeData.type == 'SystemNotification'}">
<block v-if="noticeData.type == 'SystemNotification'">
<u-icon name="bell-fill" color="#77e79f" size="20" bold style="padding: 14rpx"></u-icon>
</block>
<block v-else>
<u-icon name="calendar-fill" color="#f1a166" size="20" bold style="padding: 14rpx"></u-icon>
</block>
</view>
<view class="noticeBox">
<view class="noticeTitle">
{{ noticeData.type == 'SystemNotification' ? '系统通知' : '订单通知'}}
</view>
<view class="contant">
<view class="title">
{{ noticeData.title }}
</view>
<view class="text">
时间:{{ noticeData.created_at }}
</view>
<view class="text">
{{ noticeData.content }}
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import { noticeDet } from '@/apis/interfaces/notice'
export default {
data() {
return {
noticeData : ''
};
},
mounted() {
// 获取列表
this.getDet()
},
methods: {
// 列表
getDet(){
noticeDet(this.$Route.query.id).then(res => {
this.noticeData = res
})
}
}
};
</script>
<style lang="scss" scoped>
page {
background-color: $window-color;
}
.tips {
padding: $padding;
box-sizing: border-box;
position: relative;
.noticeImg {
width: 64rpx;
height: 64rpx;
text-align: center;
border-radius: 50%;
background-color: #ffefe2;
&.active {
background-color: #e7f8f0;
}
}
.noticeBox {
position: absolute;
left: 0;
top: 0;
width: 100%;
padding: $padding + 10 $padding $padding $padding + 90rpx;
box-sizing: border-box;
.noticeTitle {
margin-bottom: $margin;
}
.contant {
background-color: white;
padding: $padding $padding - 10;
box-sizing: border-box;
border-radius: $radius;
.title {
font-weight: bold;
margin-bottom: $margin;
}
.text {
line-height: 48rpx;
font-size: $title-size-m;
color: $text-gray;
}
}
}
}
</style>

102
pages/notice/index.vue Normal file
View File

@@ -0,0 +1,102 @@
<template>
<view class="content">
<view class="noticeList" v-for="(item, index) in tabArr" :key="index" @click="$Router.push({ name: 'noticeList', params: {type: item.type }})" >
<view class="noticeImg" :class="{active : item.count != 0}">
<block v-if="item.type == 'SystemNotification'">
<u-icon name="bell-fill" color="#77e79f" size="22" bold style="padding: 14rpx"></u-icon>
</block>
<block v-else>
<u-icon name="calendar-fill" color="#f1a166" size="22" bold style="padding: 14rpx"></u-icon>
</block>
</view>
<view class="noticeCont">
<view class="name">
{{ item.name }}
</view>
<view class="nowrap text">
{{ item.type == 'SystemNotification' ? 'APP特色功能介绍、官方推进、活动通知' : '商品订单购买成功、发货成功、退货' }}
</view>
</view>
</view>
</view>
</template>
<script>
import { categories } from '@/apis/interfaces/notice'
export default {
data() {
return {
tabArr : []
};
},
mounted() {
// 获取分类
this.getNotice()
},
methods: {
// 分类
getNotice(){
categories().then(res => {
this.tabArr = res
})
}
}
};
</script>
<style lang="scss" scoped>
page {
padding: $padding;
box-sizing: border-box;
background-color: $window-color;
}
.noticeList {
padding: $padding;
box-sizing: border-box;
position: relative;
background-color: white;
margin-bottom: $margin;
border-radius: $radius;
height: 146rpx;
&:first-child {
.noticeImg {
background-color: #e7f8f0;
}
}
.noticeImg {
width: 68rpx;
height: 68rpx;
text-align: center;
border-radius: 50%;
margin-top: $margin - 20;
background-color: #ffefe2;
position: relative;
&.active::after {
position: absolute;
content: '';
top: $margin - 25;
right: 0;
width: 12rpx;
height: 12rpx;
border-radius: 50%;
background-color: $text-price;
}
}
.noticeCont {
position: absolute;
left: 0;
top: 0;
width: 100%;
padding: $padding $padding 0 $padding + 100rpx;
.name {
font-weight: bold;
font-size: $title-size-lg;
}
.text {
margin-top: $margin - 20;
font-size: $title-size-sm;
}
}
}
</style>

108
pages/notice/list.vue Normal file
View File

@@ -0,0 +1,108 @@
<template>
<view class="content">
<view class="box" v-if="listArr.length > 0">
<view class="list" v-for="(item, index) in listArr" @click="$Router.push({ name: 'noticeDetails', params: {id: item.notification_id }})">
<view class="title">
{{ item.title }}
</view>
<view class="text">
{{ item.content }}<view class="more">点我查看<u-icon name="arrow-right-double" color="#34CE98" bold size="14" style="display: inline-block;"></u-icon></view>
</view>
</view>
<block v-if="page.total_page > 1">
<u-loadmore :status="status" />
</block>
</view>
<view class="noMessage" v-else>
<u-empty
mode="message"
/>
</view>
</view>
</template>
<script>
import { lists } from '@/apis/interfaces/notice'
export default {
data() {
return {
listArr : [],
status : 'loadmore',
page : ''
};
},
mounted() {
// 获取列表
this.getList()
},
methods: {
// 列表
getList(pages){
lists(this.$Route.query.type, {
page: pages
}).then(res => {
if(res.page.current == 1){
this.listArr = []
}
this.listArr = this.listArr.concat(res.data)
this.status = this.page.has_more ? 'loadmore': 'nomore'
this.page = res.page
})
}
},
// 下拉加载
onReachBottom() {
if(this.page.has_more){
this.status = 'loading'
let pages = this.page.current + 1
// 获取列表
this.getList(pages)
return
}
this.status = 'nomore'
}
};
</script>
<style lang="scss" scoped>
page {
background-color: $window-color;
}
.box {
padding: $padding;
box-sizing: border-box;
.list {
padding: $padding;
box-sizing: border-box;
border-radius: $radius;
background-color: white;
margin-bottom: $margin;
.title {
font-size: $title-size-lg;
margin-bottom: $margin - 10;
font-weight: bold;
}
.text {
font-size: $title-size-m;
color: $text-gray-m;
.more {
color: $main-color;
padding-left: $padding - 10;
}
}
}
}
.noMessage {
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>

68
pages/ranking/details.vue
View File

@@ -1,13 +1,13 @@
<template> <template>
<view class="content"> <view class="content">
<view class="modular goods"> <view class="modular goods">
<image class="img" src="/static/find/menu_0.jpg" mode="aspectFill"></image> <image class="img" :src="foodDate.cover" mode="aspectFill"></image>
<view class="title"> <view class="title">
<view class="name"> <view class="name">
白粉桃 {{ foodDate.name }}
</view> </view>
<view class="text"> <view class="text">
295千卡/100克 {{ foodDate.heat }}
</view> </view>
</view> </view>
</view> </view>
@@ -15,11 +15,11 @@
<view class="modular foods"> <view class="modular foods">
<view class="title"> <view class="title">
<view class="name"> <view class="name">
推荐搭配 食物价值
</view> </view>
</view> </view>
<view class="text"> <view class="text">
白粉桃富含蛋白质、脂肪、维生素、挥发油、有机酸、矿物质、粗纤维和水化合物等多种成份。有解饥消渴，补养身体；且有增进人体胆汁分泌，促进消化和治疗便秘等功效 {{ foodDate.recom_text }}
</view> </view>
</view> </view>
@@ -39,7 +39,7 @@
</view> </view>
<view class="energy"> <view class="energy">
<view class="number"> <view class="number">
<text>113</text>千卡 <text>{{ calory }}</text>{{ current == 0 ? '千卡' : '千焦'}}
</view> </view>
<view class="tips"> <view class="tips">
每100克（可食用部分） 每100克（可食用部分）
@@ -65,41 +65,41 @@
含量 含量
</view> </view>
<view class="tabs-title"> <view class="tabs-title">
NPV% NRV%
</view> </view>
</view> </view>
<view class="list"> <view class="list">
<view class="label"> <view class="label" v-if="nutrition.protein">
<view class="label-name"> <view class="label-name">
蛋白质 蛋白质
</view> </view>
<view class="label-name"> <view class="label-name">
0.1克 {{ nutrition.protein.value }}克
</view> </view>
<view class="label-name"> <view class="label-name">
0.1% {{ nutrition.protein.nrv }}%
</view> </view>
</view> </view>
<view class="label"> <view class="label" v-if="nutrition.cellulose">
<view class="label-name"> <view class="label-name">
脂肪 脂肪
</view> </view>
<view class="label-name"> <view class="label-name">
0.4克 {{ nutrition.cellulose.value }}克
</view> </view>
<view class="label-name"> <view class="label-name">
0.7% {{ nutrition.cellulose.nrv }}%
</view> </view>
</view> </view>
<view class="label"> <view class="label" v-if="nutrition.carbohydrate">
<view class="label-name"> <view class="label-name">
碳水化合物 碳水化合物
</view> </view>
<view class="label-name"> <view class="label-name">
0.2克 {{ nutrition.carbohydrate.nrv }}克
</view> </view>
<view class="label-name"> <view class="label-name">
0.1% {{ nutrition.carbohydrate.nrv }}%
</view> </view>
</view> </view>
</view> </view>
@@ -109,20 +109,20 @@
</view> </view>
</view> </view>
<view class="modular foods"> <view class="modular foods" v-if="goodsArr.length > 0">
<view class="title"> <view class="title">
<view class="name"> <view class="name">
相关商品 相关商品
</view> </view>
</view> </view>
<view class="item"> <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> <image class="item-cover" :src="item.cover ? item.cover : '/static/find/default_img.png'" mode="aspectFill"></image>
<view class="item-title"> <view class="item-title">
<view class="nowrap item-name"> <view class="nowrap item-name">
黑果枸杞 {{ item.name }}
</view> </view>
<view class="item-price"> <view class="item-price">
￥99.00 ￥{{ item.price }}
</view> </view>
</view> </view>
<view class="item-btn"> <view class="item-btn">
@@ -134,16 +134,40 @@
</template> </template>
<script> <script>
import { foodDet } from '@/apis/interfaces/ranking'
export default { export default {
data() { data() {
return { return {
foodDate : '',
goodsArr : [],
calory : '',
nutrition : '',
current : 0 current : 0
} }
}, },
onLoad() {}, mounted() {
this.foodRank()
},
methods: { methods: {
// 分类-食物
foodRank(){
foodDet(this.$Route.query.id).then(res => {
this.foodDate = res
this.goodsArr = res.goods
this.nutrition = res.data
this.calory = res.calory
})
},
// 热量切换
switchTab(val) { switchTab(val) {
this.current = val this.current = val
if(val == 0) {
this.calory = this.foodDate.calory
return
}else {
this.calory = this.foodDate.joule
}
} }
} }
}; };

2
pages/ranking/index.vue
View File

@@ -8,7 +8,7 @@
<view class="right"> <view class="right">
<view class="goods"> <view class="goods">
<view class="list" @click="$Router.push({name: 'rankingList', params: {id: item.category_id, name: item.name}})" v-for="(item, index) in listArr" :key="index"> <view class="list" @click="$Router.push({name: 'rankingList', params: {id: item.category_id, name: item.name}})" v-for="(item, index) in listArr" :key="index">
<image class="logo" :src="item.cover" mode="aspectFill"></image> <image class="logo" :src="item.cover ? item.cover : '/static/find/default_img.png'" mode="aspectFill"></image>
<view class="name"> <view class="name">
{{ item.name }} {{ item.name }}
</view> </view>

35
pages/ranking/list.vue
View File

@@ -11,8 +11,12 @@
:lists="menuArr" :lists="menuArr"
:btnStyle="{'margin-top': '30rpx'}" :btnStyle="{'margin-top': '30rpx'}"
:isNumber="true" :isNumber="true"
@onMenu="$Router.push({ name: 'rankingDetails', params: {id: $event.id, title: $event.name }})" isType="rank"
@onMenu="$Router.push({ name: 'rankingDetails', params: {id: $event.food_id, title: $event.name }})"
/> />
<block v-if="page.total_page > 1">
<u-loadmore :status="status" />
</block>
</view> </view>
</view> </view>
</template> </template>
@@ -23,7 +27,9 @@
data() { data() {
return { return {
name : this.$Route.query.name, name : this.$Route.query.name,
menuArr : [] menuArr : [],
status : 'loadmore',
page : ''
} }
}, },
mounted() { mounted() {
@@ -31,11 +37,30 @@
}, },
methods: { methods: {
// 分类-食物 // 分类-食物
getRank(){ getRank(pages){
foods({category_id: this.$Route.query.id}).then(res => { foods({
this.menuArr = res.data category_id: this.$Route.query.id,
page: pages
}).then(res => {
if(res.page.current == 1){
this.menuArr = []
}
this.menuArr = this.menuArr.concat(res.data)
this.status = this.page.has_more ? 'loadmore': 'nomore'
this.page = res.page
}) })
} }
},
// 下拉加载
onReachBottom() {
if(this.page.has_more){
this.status = 'loading'
let pages = this.page.current + 1
// 获取列表
this.getRank(pages)
return
}
this.status = 'nomore'
} }
}; };
</script> </script>

140
pages/sign/index.vue
View File

@@ -2,74 +2,80 @@
<view class="content"> <view class="content">
<image class="setting" src="/static/find/sign_img.png" mode="widthFix"></image> <image class="setting" src="/static/find/sign_img.png" mode="widthFix"></image>
<view class="sign"> <view class="sign">
<!-- <view class="signTitle">
记得每日要签到哦
</view> -->
<view class="signAdd"> <view class="signAdd">
<view class="label"> <view class="label">
<image class="picture" src="/static/find/sign.png" mode="aspectFill"></image> <image class="picture" src="/static/find/sign.png" mode="aspectFill"></image>
<view class="day"> <view class="label-day">
<view class="number"> <view class="number">
<text>10</text>天 <text>{{ dateData.total }}</text>天
</view> </view>
本月签到 本月签到
</view> </view>
</view> </view>
<view class="label"> <view class="label">
<image class="picture" src="/static/find/sign_active.png" mode="aspectFill"></image> <image class="picture" src="/static/find/sign_active.png" mode="aspectFill"></image>
<view class="day"> <view class="label-day">
<view class="number"> <view class="number">
<text>1</text>天 <text>{{ dateData.continue }}</text>天
</view> </view>
本月漏签 累计签到
</view> </view>
</view> </view>
</view> </view>
<view class="signDate"> <view class="signDate">
<view class="date"> <view class="date">
2020-01-07 {{ dateData.month }}
</view> </view>
<view class="list"> <view class="list">
<view class="day"> <view class="week">
1 <view class="week-label">
日
</view> </view>
<view class="day"> <view class="week-label">
2 一
</view> </view>
<view class="day"> <view class="week-label">
3 二
</view> </view>
<view class="day"> <view class="week-label">
4 三
</view> </view>
<view class="day"> <view class="week-label">
5 四
</view> </view>
<view class="day"> <view class="week-label">
6 五
</view> </view>
<view class="day"> <view class="week-label">
7 六
</view>
</view>
<view class="day" v-for="(item, index) in dateArr">
<view class="day-label" v-for="(items, index) in item">
<view class="label-block" :class="{active : items.isSign}" v-if="!items.isHidden">{{ items.isSign ? '签' : items.date }}</view>
</view> </view>
<view class="day">
8
</view> </view>
</view> </view>
<view class="signBtn"> <view class="signBtn">
<view class="btn"> <view class="btn" @click="signClick" :class="{active : dateData.isSign}">
立即签到 {{ dateData.isSign ? '当日已签' : '立即签到'}}
</view> </view>
</view> </view>
</view> </view>
<view class="tipsText">
ZH大健康用户签到
</view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import { date } from '@/apis/interfaces/sign' import { date, sign } from '@/apis/interfaces/sign'
export default { export default {
data() { data() {
return { return {
dateData: '',
dateArr : ''
} }
}, },
mounted() { mounted() {
@@ -79,7 +85,8 @@
// 用户登录 // 用户登录
dateList() { dateList() {
date().then(res => { date().then(res => {
console.log(res) this.dateData = res.base
this.dateArr = res.calendar
}).catch(err => { }).catch(err => {
uni.showToast({ uni.showToast({
title: err.message, title: err.message,
@@ -87,6 +94,23 @@
}) })
}) })
}, },
// 签到
signClick() {
sign().then(res => {
console.log(res)
uni.showToast({
title: '签到成功',
icon: "none"
})
this.dateList();
}).catch(err => {
uni.showToast({
title: err.message,
icon: "none"
})
})
}
} }
} }
</script> </script>
@@ -125,20 +149,12 @@
.label { .label {
display: flex; display: flex;
font-size: $title-size-sm; font-size: $title-size-sm;
&:first-child {
flex: 1;
.day {
text {
color: $main-color;
}
}
}
.picture { .picture {
width: 74rpx; width: 74rpx;
height: 74rpx; height: 74rpx;
margin-right: $margin - 10; margin-right: $margin - 10;
} }
.day { .label-day {
color: $text-gray; color: $text-gray;
text { text {
font-size: $title-size-lg; font-size: $title-size-lg;
@@ -147,6 +163,14 @@
padding-right: $padding - 20; padding-right: $padding - 20;
} }
} }
&:first-child {
flex: 1;
.label-day {
text {
color: $main-color;
}
}
}
} }
} }
.signDate { .signDate {
@@ -158,13 +182,40 @@
font-size: $title-size + 6; font-size: $title-size + 6;
margin-bottom: $margin; margin-bottom: $margin;
font-weight: 600; font-weight: 600;
}
.list {
.week {
display: flex;
.week-label {
text-align: center;
font-size: $title-size-m;
width: 14.28%;
margin: $margin - 10 0;
}
} }
.day { .day {
flex-wrap: wrap; flex-wrap: wrap;
display: flex; display: flex;
.day-label { .day-label {
width: 14.28%; width: 14.28%;
text-align: center; text-align: center;
line-height: 80rpx;
color: $text-color;
font-size: $title-size-m;
.label-block {
display: inline-block;
background-color: transparent;
color: $text-gray-m;
border-radius: 50%;
width: 56rpx;
height: 56rpx;
line-height: 56rpx;
text-align: center;
&.active {
background-color: $main-color;
color: white;
border-radius: 50%;
}
} }
} }
} }
@@ -176,7 +227,18 @@
color: white; color: white;
background-color: $text-price; background-color: $text-price;
text-align: center; text-align: center;
border-radius: $radius-m;
line-height: 90rpx;
&.active {
background-color: #ededed;
color: $text-gray; color: $text-gray;
} }
}
}
}
.tipsText {
text-align: center;
line-height: 120rpx;
font-size: $title-size-sm; font-size: $title-size-sm;
color: $text-gray-m; color: $text-gray-m;

209
pages/topic/details.vue
View File

@@ -1,42 +1,55 @@
<template> <template>
<view class="content"> <view class="content">
<view class="backCont">
<image class="img" :src="topicData.cover" mode="aspectFill"></image>
<view class="head"> <view class="head">
坚持做瑜伽可以减肥吗? <view class="ellipsis title">
{{ topicData.name }}
</view> </view>
<view class="source"> <view class="tips" v-if="topicData.category">
<image class="logo" src="/static/icon/sign-icon.png" mode="aspectFill"></image> # 话题 -- {{ topicData.category.name }} #
<view class="title">
<view class="name">
ZH大健康
</view> </view>
<view class="text"> <view class="ellipsis text">
ZH大健康官方账号 {{ 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>
</view> </view>
<view class="brief"> <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>
<view class="goods"> <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 class="title">
相关商品 相关商品
</view> </view>
<view class="item"> <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> <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="item-title">
<view class="nowrap item-name"> <view class="nowrap item-name">
黑果枸杞 {{ item.name }}
</view> </view>
<view class="item-price"> <view class="item-price">
￥99.00 ￥{{ item.price }}
</view> </view>
</view> </view>
<view class="item-btn"> <view class="item-btn">
@@ -45,62 +58,169 @@
</view> </view>
</view> </view>
</view> </view>
</view>
</view>
</template> </template>
<script> <script>
import { topicDet, topicThumb } from '@/apis/interfaces/topic'
export default { export default {
data() { data() {
return { return {
topicData : '',
goodsArr : [],
topicContent: '',
isFavorite : ''
} }
}, },
onLoad() {}, mounted() {
this.getRank()
},
methods: { 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
page { page {
padding: $padding; background: $window-color;
box-sizing: border-box;
} }
.head { .backCont {
font-size: $title-size + 4;
font-weight: bold;
}
.source {
margin: $margin 0;
position: relative; position: relative;
.logo { width: 100vw;
width: 58rpx; padding-top: 75%;
height: 58rpx; &::after {
border-radius: 50%; position: absolute;
margin-top: $margin - 22; content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
background-color: rgba($color: #000000, $alpha: .35);
} }
.title { .img {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
padding-left: 74rpx; height: 100%;
font-size: $title-size-sm; z-index: 1;
.name { filter: blur(10rpx);
margin-bottom: $margin - 25; 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 { .text {
font-size: $title-size-sm - 4; margin: $margin 0 $margin + 10;
color: $text-gray-m; 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 { .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; line-height: 48rpx;
font-size: $title-size-m; font-size: $title-size-m;
color: $text-color; color: $text-gray-m;
}
}
}
} }
.goods { .goods {
@@ -115,6 +235,7 @@
background: #f5fdfa; background: #f5fdfa;
border-radius: $radius; border-radius: $radius;
padding: $padding; padding: $padding;
box-sizing: border-box;
.item-cover { .item-cover {
width: 120rpx; width: 120rpx;
height: 90rpx; height: 90rpx;

125
pages/topic/index.vue
View File

@@ -1,69 +1,90 @@
<template> <template>
<view class="content"> <view class="content">
<view class="tabs"> <u-sticky bgColor="#fff" zIndex="99">
<u-tabs <u-tabs
:list="list1" :list="listArr"
@click="click" @click="changeTopic"
lineColor="#34CE98" lineColor="#34CE98"
:activeStyle="{fontWeight: 'bold', fontSize: '30rpx'}" :activeStyle="{fontWeight: 'bold', fontSize: '30rpx'}"
/> />
</view> </u-sticky>
<view class="topic"> <view class="topic" v-if="topicArr.length > 0">
<oct-topic <oct-topic
:lists="topicArr" :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>
</view> </view>
</template> </template>
<script> <script>
import { lists, categories } from '@/apis/interfaces/topic'
export default { export default {
data() { data() {
return { return {
list1: [{ listArr : [],
name: '慢病护理', topicArr : [],
}, { categoryId : '',
name: '减肥塑性', status : 'loadmore',
}, { page : ''
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'
}]
} }
}, },
onLoad() {}, mounted() {
methods: { // 获取分类
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> </script>
@@ -105,4 +126,16 @@
padding: 0 $padding; padding: 0 $padding;
box-sizing: border-box; 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> </style>

BIN
static/dev/img-00.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 350 KiB

After

Width:  |  Height:  |  Size: 365 KiB

BIN
static/find/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
static/icon/sign-icon.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
static/icon/sign-icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.7 KiB

20
uni_modules/oct-menu/components/oct-menu/oct-menu.vue
View File

@@ -12,7 +12,15 @@
{{ item.name }} {{ item.name }}
</view> </view>
<view class="nowrap menu--text"> <view class="nowrap menu--text">
{{ isType ? item.weight + '克' : item.sub_title }} <block v-if="isType == 'rank'">
{{ item.heat }}
</block>
<block v-else-if="isType == 'det'">
{{ item.weight }} 克
</block>
<block v-else>
{{ item.sub_title }}
</block>
</view> </view>
</view> </view>
</view> </view>
@@ -41,14 +49,16 @@
default: false default: false
}, },
// 是否是详情 // det是详情 rank为排行
isType: { isType: {
type: Boolean, type:'',
default: false default : () => {
return {}
}
} }
}, },
mounted() { mounted() {
// console.log(this.$props)
} }
} }
</script> </script>

8
uni_modules/oct-topic/components/oct-topic/oct-topic.vue
View File

@@ -1,11 +1,11 @@
<template> <template>
<view> <view>
<view class="new-item" v-for="(item, index) in lists" :key="index" @click="$emit('onTopic', item)"> <view class="new-item" v-for="(item, index) in lists" :key="index" @click="$emit('onTopic', item)">
<image class="new-cover" :src="item.cover" mode="aspectFill"></image> <image class="new-cover" :src="item.cover ? item.cover : '/static/find/default_img.png'" mode="aspectFill"></image>
<view class="new-title">{{ item.title }}</view> <view class="new-title">{{ item.name }}</view>
<view class="new-tool"> <view class="new-tool">
<text>阅读{{ item.read }}</text> <text>阅读 {{ item.clicks }}</text>
<text>赞{{ item.praise }}</text> <text>赞 {{ item.favorites }}</text>
</view> </view>
</view> </view>
</view> </view>