merge
This commit is contained in:
唐明明
@@ -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 {
|
||||
index,
|
||||
categories,
|
||||
queue,
|
||||
menuDet
|
||||
menuDet,
|
||||
guide,
|
||||
search
|
||||
}
|
||||
|
||||
36
apis/interfaces/notice.js
Normal file
36
apis/interfaces/notice.js
Normal 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
|
||||
}
|
||||
@@ -23,7 +23,15 @@ const foods = (data) =>{
|
||||
})
|
||||
}
|
||||
|
||||
// 食物详情
|
||||
const foodDet = (food) =>{
|
||||
return request({
|
||||
url: 'health/foods/' + food
|
||||
})
|
||||
}
|
||||
|
||||
export {
|
||||
categories,
|
||||
foods
|
||||
foods,
|
||||
foodDet
|
||||
}
|
||||
|
||||
@@ -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
53
apis/interfaces/topic.js
Normal 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
|
||||
}
|
||||
40
pages.json
40
pages.json
@@ -6,6 +6,20 @@
|
||||
"navigationBarTitleText": "发现",
|
||||
"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",
|
||||
"name": "Record",
|
||||
@@ -200,6 +214,30 @@
|
||||
"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",
|
||||
"name": "IM",
|
||||
"style": {
|
||||
@@ -223,7 +261,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}, {
|
||||
},{
|
||||
"path": "pages/im/chum",
|
||||
"name": "ImChum",
|
||||
"style": {
|
||||
|
||||
34
pages/index/guide.vue
Normal file
34
pages/index/guide.vue
Normal 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>
|
||||
@@ -4,94 +4,67 @@
|
||||
<view class="status-main">
|
||||
<view class="helloe">欢迎使用ZH健康</view>
|
||||
<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 show"><uni-icons custom-prefix="iconfont" type="icon-pinglun" size="25"></uni-icons></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" @click="$Router.push({name: 'noticeIndex'})"><uni-icons custom-prefix="iconfont" type="icon-pinglun" size="25"></uni-icons></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 搜索 -->
|
||||
<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>
|
||||
低脂鸡胸肉
|
||||
</navigator>
|
||||
</view>
|
||||
</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>
|
||||
<u-scroll-list class="choiceness-box" indicatorColor="#dafff2" indicatorActiveColor="#34CE98">
|
||||
<view v-for="(item, index) in choiceness" class="choiceness-item" :key="index">
|
||||
<view class="choiceness-item-nav" :style="'backgroundColor:#' + item.color">
|
||||
<image class="choiceness-item-cover" :src="item.thumb"></image>
|
||||
<view class="choiceness-item-title">{{item.title}}</view>
|
||||
<view class="choiceness-item-describe">{{item.describe}}</view>
|
||||
<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">
|
||||
<image class="choiceness-item-cover" :src="item.cover"></image>
|
||||
<view class="nowrap choiceness-item-title">{{item.name}}</view>
|
||||
<view class="nowrap choiceness-item-describe">{{item.description}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-scroll-list>
|
||||
<!-- 话题广场 -->
|
||||
<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
|
||||
:lists="topicArr"
|
||||
@onTopic="$Router.push({ name: 'topicDetails', params: {id: $event.id }})"
|
||||
@onTopic="$Router.push({ name: 'topicDetails', params: {id: $event.topic_id }})"
|
||||
/>
|
||||
</view>
|
||||
<!-- 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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
import { index } from '@/apis/interfaces/topic'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
choiceness: [{
|
||||
title : "低碳食谱",
|
||||
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'
|
||||
}]
|
||||
choiceness: [],
|
||||
topicArr: []
|
||||
};
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {}
|
||||
};
|
||||
mounted() {
|
||||
// 获取首页
|
||||
this.getindex()
|
||||
},
|
||||
methods: {
|
||||
// 首页
|
||||
getindex(){
|
||||
index().then(res => {
|
||||
this.choiceness = res.recipeCategories
|
||||
this.topicArr = res.topics
|
||||
})
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -129,16 +102,16 @@ export default {
|
||||
width: 46rpx;
|
||||
vertical-align: top;
|
||||
}
|
||||
&.show::before {
|
||||
content: '';
|
||||
height: 10rpx;
|
||||
width: 10rpx;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background: $text-price;
|
||||
border-radius: 50%;
|
||||
}
|
||||
// &.show::before {
|
||||
// content: '';
|
||||
// height: 10rpx;
|
||||
// width: 10rpx;
|
||||
// position: absolute;
|
||||
// right: 0;
|
||||
// top: 0;
|
||||
// background: $text-price;
|
||||
// border-radius: 50%;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -180,10 +153,10 @@ export default {
|
||||
}
|
||||
&-cover{
|
||||
position: absolute;
|
||||
right: $margin;
|
||||
top: $margin;
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
right: $margin - 10;
|
||||
top: $margin - 5;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
vertical-align: top;
|
||||
}
|
||||
&-title{
|
||||
@@ -200,6 +173,9 @@ export default {
|
||||
font-size: 20rpx;
|
||||
@extend .nowrap;
|
||||
}
|
||||
.choiceness-item-describe {
|
||||
width: 180rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
186
pages/index/search.vue
Normal file
186
pages/index/search.vue
Normal 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>
|
||||
@@ -1,14 +1,23 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="tabs">
|
||||
<u-tabs :current="tabsIndex" :list="tabArr" @change="tabsClick" lineColor="#34CE98" :activeStyle="{fontWeight: 'bold', fontSize: '30rpx'}"></u-tabs>
|
||||
</view>
|
||||
<u-sticky bgColor="#fff" zIndex="99">
|
||||
<u-tabs
|
||||
:current="tabsIndex"
|
||||
:list="tabArr"
|
||||
@change="tabsClick"
|
||||
lineColor="#34CE98"
|
||||
:activeStyle="{fontWeight: 'bold', fontSize: '30rpx'}"
|
||||
/>
|
||||
</u-sticky>
|
||||
<view class="box">
|
||||
<oct-menu
|
||||
:lists="menuData"
|
||||
: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>
|
||||
</template>
|
||||
@@ -20,31 +29,60 @@
|
||||
return {
|
||||
tabArr : [],
|
||||
menuData : [],
|
||||
tabsIndex : this.$Route.query.index
|
||||
tabsIndex : this.$Route.query.index,
|
||||
tabsId : this.$Route.query.id,
|
||||
status : 'loadmore',
|
||||
page : ''
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// 获取分类
|
||||
this.getTab()
|
||||
this.getMenu(this.$Route.query.id)
|
||||
|
||||
// 获取列表
|
||||
this.getMenu()
|
||||
},
|
||||
methods: {
|
||||
// 分类
|
||||
getTab(){
|
||||
categories().then(res => {
|
||||
this.tabArr = res
|
||||
})
|
||||
},
|
||||
|
||||
getMenu(id){
|
||||
// 列表
|
||||
getMenu(pages){
|
||||
queue({
|
||||
category_id: id
|
||||
category_id: this.tabsId,
|
||||
page: pages
|
||||
}).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) {
|
||||
this.getMenu(item.category_id)
|
||||
this.tabsId = item.category_id
|
||||
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>
|
||||
@@ -63,6 +101,7 @@
|
||||
.box {
|
||||
padding: 0 $padding;
|
||||
box-sizing: border-box;
|
||||
margin-top: $margin;
|
||||
}
|
||||
// 34CE98
|
||||
</style>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
</view>
|
||||
<oct-menu
|
||||
:lists="menuData.foods"
|
||||
:isType='true'
|
||||
isType="det"
|
||||
:btnStyle="{'margin-top': '30rpx'}"
|
||||
@onMenu="$Router.push({ name: 'menuDetails', params: {id: $event.food_id, title: $event.name }})"
|
||||
/>
|
||||
@@ -25,31 +25,31 @@
|
||||
<view class="other-name">
|
||||
碳水化合物
|
||||
</view>
|
||||
<view class="other-number">
|
||||
200.00g
|
||||
<view class="nowrap other-number">
|
||||
{{ menuData.carbohydrate }}g
|
||||
</view>
|
||||
</view>
|
||||
<view class="other-label">
|
||||
<view class="other-name">
|
||||
蛋白质
|
||||
</view>
|
||||
<view class="other-number">
|
||||
200.00g
|
||||
<view class="nowrap other-number">
|
||||
{{ menuData.protein }}g
|
||||
</view>
|
||||
</view>
|
||||
<view class="other-label">
|
||||
<view class="other-name">
|
||||
脂肪
|
||||
</view>
|
||||
<view class="other-number">
|
||||
200.00g
|
||||
<view class="nowrap other-number">
|
||||
{{ menuData.cellulose }}g
|
||||
</view>
|
||||
</view>
|
||||
<view class="other-label">
|
||||
<view class="other-name">
|
||||
千卡
|
||||
</view>
|
||||
<view class="other-number">
|
||||
<view class="nowrap other-number">
|
||||
{{ menuData.calory }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<view class="name">
|
||||
{{ item.name }}
|
||||
</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>
|
||||
</view>
|
||||
</view>
|
||||
@@ -26,7 +26,6 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import { index } from '@/apis/interfaces/menu'
|
||||
export default {
|
||||
|
||||
100
pages/notice/details.vue
Normal file
100
pages/notice/details.vue
Normal 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
102
pages/notice/index.vue
Normal 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
108
pages/notice/list.vue
Normal 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>
|
||||
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<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="name">
|
||||
白粉桃
|
||||
{{ foodDate.name }}
|
||||
</view>
|
||||
<view class="text">
|
||||
295千卡/100克
|
||||
{{ foodDate.heat }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -15,11 +15,11 @@
|
||||
<view class="modular foods">
|
||||
<view class="title">
|
||||
<view class="name">
|
||||
推荐搭配
|
||||
食物价值
|
||||
</view>
|
||||
</view>
|
||||
<view class="text">
|
||||
白粉桃富含蛋白质、脂肪、维生素、挥发油、有机酸、矿物质、粗纤维和水化合物等多种成份。有解饥消渴，补养身体；且有增进人体胆汁分泌，促进消化和治疗便秘等功效
|
||||
{{ foodDate.recom_text }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
</view>
|
||||
<view class="energy">
|
||||
<view class="number">
|
||||
<text>113</text>千卡
|
||||
<text>{{ calory }}</text>{{ current == 0 ? '千卡' : '千焦'}}
|
||||
</view>
|
||||
<view class="tips">
|
||||
每100克（可食用部分）
|
||||
@@ -65,41 +65,41 @@
|
||||
含量
|
||||
</view>
|
||||
<view class="tabs-title">
|
||||
NPV%
|
||||
NRV%
|
||||
</view>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="label">
|
||||
<view class="label" v-if="nutrition.protein">
|
||||
<view class="label-name">
|
||||
蛋白质
|
||||
</view>
|
||||
<view class="label-name">
|
||||
0.1克
|
||||
{{ nutrition.protein.value }}克
|
||||
</view>
|
||||
<view class="label-name">
|
||||
0.1%
|
||||
{{ nutrition.protein.nrv }}%
|
||||
</view>
|
||||
</view>
|
||||
<view class="label">
|
||||
<view class="label" v-if="nutrition.cellulose">
|
||||
<view class="label-name">
|
||||
脂肪
|
||||
</view>
|
||||
<view class="label-name">
|
||||
0.4克
|
||||
{{ nutrition.cellulose.value }}克
|
||||
</view>
|
||||
<view class="label-name">
|
||||
0.7%
|
||||
{{ nutrition.cellulose.nrv }}%
|
||||
</view>
|
||||
</view>
|
||||
<view class="label">
|
||||
<view class="label" v-if="nutrition.carbohydrate">
|
||||
<view class="label-name">
|
||||
碳水化合物
|
||||
</view>
|
||||
<view class="label-name">
|
||||
0.2克
|
||||
{{ nutrition.carbohydrate.nrv }}克
|
||||
</view>
|
||||
<view class="label-name">
|
||||
0.1%
|
||||
{{ nutrition.carbohydrate.nrv }}%
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -109,20 +109,20 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="modular foods">
|
||||
<view class="modular foods" v-if="goodsArr.length > 0">
|
||||
<view class="title">
|
||||
<view class="name">
|
||||
相关商品
|
||||
</view>
|
||||
</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" v-for="(item, index) in goodsArr" :key="index">
|
||||
<image class="item-cover" :src="item.cover ? item.cover : '/static/find/default_img.png'" mode="aspectFill"></image>
|
||||
<view class="item-title">
|
||||
<view class="nowrap item-name">
|
||||
黑果枸杞
|
||||
{{ item.name }}
|
||||
</view>
|
||||
<view class="item-price">
|
||||
￥99.00
|
||||
￥{{ item.price }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-btn">
|
||||
@@ -134,16 +134,40 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
import { foodDet } from '@/apis/interfaces/ranking'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current: 0
|
||||
foodDate : '',
|
||||
goodsArr : [],
|
||||
calory : '',
|
||||
nutrition : '',
|
||||
current : 0
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
mounted() {
|
||||
this.foodRank()
|
||||
},
|
||||
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) {
|
||||
this.current = val
|
||||
if(val == 0) {
|
||||
this.calory = this.foodDate.calory
|
||||
return
|
||||
}else {
|
||||
this.calory = this.foodDate.joule
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<view class="right">
|
||||
<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">
|
||||
<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">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
|
||||
@@ -11,8 +11,12 @@
|
||||
:lists="menuArr"
|
||||
:btnStyle="{'margin-top': '30rpx'}"
|
||||
: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>
|
||||
</template>
|
||||
@@ -23,7 +27,9 @@
|
||||
data() {
|
||||
return {
|
||||
name : this.$Route.query.name,
|
||||
menuArr : []
|
||||
menuArr : [],
|
||||
status : 'loadmore',
|
||||
page : ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@@ -31,11 +37,30 @@
|
||||
},
|
||||
methods: {
|
||||
// 分类-食物
|
||||
getRank(){
|
||||
foods({category_id: this.$Route.query.id}).then(res => {
|
||||
this.menuArr = res.data
|
||||
getRank(pages){
|
||||
foods({
|
||||
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>
|
||||
|
||||
@@ -2,74 +2,80 @@
|
||||
<view class="content">
|
||||
<image class="setting" src="/static/find/sign_img.png" mode="widthFix"></image>
|
||||
<view class="sign">
|
||||
<!-- <view class="signTitle">
|
||||
记得每日要签到哦
|
||||
</view> -->
|
||||
<view class="signAdd">
|
||||
<view class="label">
|
||||
<image class="picture" src="/static/find/sign.png" mode="aspectFill"></image>
|
||||
<view class="day">
|
||||
<view class="label-day">
|
||||
<view class="number">
|
||||
<text>10</text>天
|
||||
<text>{{ dateData.total }}</text>天
|
||||
</view>
|
||||
本月签到
|
||||
</view>
|
||||
</view>
|
||||
<view class="label">
|
||||
<image class="picture" src="/static/find/sign_active.png" mode="aspectFill"></image>
|
||||
<view class="day">
|
||||
<view class="label-day">
|
||||
<view class="number">
|
||||
<text>1</text>天
|
||||
<text>{{ dateData.continue }}</text>天
|
||||
</view>
|
||||
本月漏签
|
||||
累计签到
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="signDate">
|
||||
<view class="date">
|
||||
2020-01-07
|
||||
{{ dateData.month }}
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="day">
|
||||
1
|
||||
<view class="week">
|
||||
<view class="week-label">
|
||||
日
|
||||
</view>
|
||||
<view class="day">
|
||||
2
|
||||
<view class="week-label">
|
||||
一
|
||||
</view>
|
||||
<view class="day">
|
||||
3
|
||||
<view class="week-label">
|
||||
二
|
||||
</view>
|
||||
<view class="day">
|
||||
4
|
||||
<view class="week-label">
|
||||
三
|
||||
</view>
|
||||
<view class="day">
|
||||
5
|
||||
<view class="week-label">
|
||||
四
|
||||
</view>
|
||||
<view class="day">
|
||||
6
|
||||
<view class="week-label">
|
||||
五
|
||||
</view>
|
||||
<view class="day">
|
||||
7
|
||||
<view class="week-label">
|
||||
六
|
||||
</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 class="day">
|
||||
8
|
||||
</view>
|
||||
</view>
|
||||
<view class="signBtn">
|
||||
<view class="btn">
|
||||
立即签到
|
||||
<view class="btn" @click="signClick" :class="{active : dateData.isSign}">
|
||||
{{ dateData.isSign ? '当日已签' : '立即签到'}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tipsText">
|
||||
ZH大健康用户签到
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { date } from '@/apis/interfaces/sign'
|
||||
import { date, sign } from '@/apis/interfaces/sign'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dateData: '',
|
||||
dateArr : ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@@ -79,7 +85,8 @@
|
||||
// 用户登录
|
||||
dateList() {
|
||||
date().then(res => {
|
||||
console.log(res)
|
||||
this.dateData = res.base
|
||||
this.dateArr = res.calendar
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
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>
|
||||
@@ -125,20 +149,12 @@
|
||||
.label {
|
||||
display: flex;
|
||||
font-size: $title-size-sm;
|
||||
&:first-child {
|
||||
flex: 1;
|
||||
.day {
|
||||
text {
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.picture {
|
||||
width: 74rpx;
|
||||
height: 74rpx;
|
||||
margin-right: $margin - 10;
|
||||
}
|
||||
.day {
|
||||
.label-day {
|
||||
color: $text-gray;
|
||||
text {
|
||||
font-size: $title-size-lg;
|
||||
@@ -147,6 +163,14 @@
|
||||
padding-right: $padding - 20;
|
||||
}
|
||||
}
|
||||
&:first-child {
|
||||
flex: 1;
|
||||
.label-day {
|
||||
text {
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.signDate {
|
||||
@@ -158,13 +182,40 @@
|
||||
font-size: $title-size + 6;
|
||||
margin-bottom: $margin;
|
||||
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 {
|
||||
flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
.day-label {
|
||||
width: 14.28%;
|
||||
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;
|
||||
background-color: $text-price;
|
||||
text-align: center;
|
||||
border-radius: $radius-m;
|
||||
line-height: 90rpx;
|
||||
&.active {
|
||||
background-color: #ededed;
|
||||
color: $text-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tipsText {
|
||||
text-align: center;
|
||||
line-height: 120rpx;
|
||||
font-size: $title-size-sm;
|
||||
color: $text-gray-m;
|
||||
|
||||
@@ -1,42 +1,55 @@
|
||||
<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="source">
|
||||
<image class="logo" src="/static/icon/sign-icon.png" mode="aspectFill"></image>
|
||||
<view class="title">
|
||||
<view class="name">
|
||||
ZH大健康
|
||||
<view class="tips" v-if="topicData.category">
|
||||
# 话题 -- {{ topicData.category.name }} #
|
||||
</view>
|
||||
<view class="text">
|
||||
ZH大健康官方账号
|
||||
<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="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>
|
||||
<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>
|
||||
<view class="item-title">
|
||||
<view class="nowrap item-name">
|
||||
黑果枸杞
|
||||
{{ item.name }}
|
||||
</view>
|
||||
<view class="item-price">
|
||||
￥99.00
|
||||
￥{{ item.price }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-btn">
|
||||
@@ -45,62 +58,169 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</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 {
|
||||
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-color;
|
||||
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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 350 KiB After Width: | Height: | Size: 365 KiB |
BIN
static/find/logo.png
Normal file
BIN
static/find/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
BIN
static/icon/sign-icon.gif
Normal file
BIN
static/icon/sign-icon.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 KiB |
@@ -12,7 +12,15 @@
|
||||
{{ item.name }}
|
||||
</view>
|
||||
<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>
|
||||
@@ -41,14 +49,16 @@
|
||||
default: false
|
||||
},
|
||||
|
||||
// 是否是详情
|
||||
// det是详情 rank为排行
|
||||
isType: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
type:'',
|
||||
default : () => {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
// console.log(this.$props)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<view>
|
||||
<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>
|
||||
<view class="new-title">{{ item.title }}</view>
|
||||
<image class="new-cover" :src="item.cover ? item.cover : '/static/find/default_img.png'" mode="aspectFill"></image>
|
||||
<view class="new-title">{{ item.name }}</view>
|
||||
<view class="new-tool">
|
||||
<text>阅读{{ item.read }}</text>
|
||||
<text>赞{{ item.praise }}</text>
|
||||
<text>阅读 {{ item.clicks }}</text>
|
||||
<text>赞 {{ item.favorites }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
Reference in New Issue
Block a user