|
|
@@ -2,28 +2,34 @@
|
|
|
<view>
|
|
|
<view class="top-content">
|
|
|
<!-- 这里是状态栏 -->
|
|
|
- <!-- <view class="status_bar" :style="{height: statusBarHeight}"></view>
|
|
|
+ <!-- <view class="status_bar" :style="{height: statusBarHeight}"></view>
|
|
|
<view class="top-title">健康百科</view> -->
|
|
|
<!-- 搜索框 -->
|
|
|
<view class="search-cont">
|
|
|
<view class="inner">
|
|
|
- <image class="icon-search" src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/icon_search.png" mode=""></image>
|
|
|
- <input type="text" v-model="searchValue" placeholder="输入关键字搜索" confirm-type="search" @confirm="doSearch" placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" />
|
|
|
+ <image class="icon-search"
|
|
|
+ src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/icon_search.png" mode="">
|
|
|
+ </image>
|
|
|
+ <input type="text" v-model="searchValue" placeholder="输入关键字搜索" confirm-type="search"
|
|
|
+ @confirm="doSearch"
|
|
|
+ placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" />
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="keyword-list">
|
|
|
- <!-- 关键字列表 -->
|
|
|
- <scroll-view scroll-x="true" >
|
|
|
- <view class="inner">
|
|
|
- <view v-for="(item,index) in cates" :key="index" :class="choseCateId == item.cateId?'item active':'item'" @click="choseCate(item)">
|
|
|
- {{ item.cateName }}
|
|
|
+ <!-- 关键字列表 -->
|
|
|
+ <scroll-view scroll-x="true">
|
|
|
+ <view class="inner">
|
|
|
+ <view v-for="(item,index) in cates" :key="index"
|
|
|
+ :class="choseCateId == item.cateId?'item active':'item'" @click="choseCate(item)">
|
|
|
+ {{ item.cateName }}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
+ </scroll-view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 知识列表 -->
|
|
|
- <mescroll-body :top="top" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
|
|
|
+ <mescroll-body :top="top" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
|
|
|
+ :down="downOption" :up="upOption">
|
|
|
<view class="know-list">
|
|
|
<view class="item" v-for="(item,index) in dataList" :key="index" @click="showDetail(item)">
|
|
|
<view class="left">
|
|
|
@@ -36,7 +42,9 @@
|
|
|
</view>
|
|
|
</view> -->
|
|
|
<view class="readings">
|
|
|
- <image class="eye" src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/eye.png" ></image>
|
|
|
+ <image class="eye"
|
|
|
+ src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/eye.png">
|
|
|
+ </image>
|
|
|
<text class="num">{{item.views}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -49,30 +57,36 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</mescroll-body>
|
|
|
-
|
|
|
+
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {getArticleCate,getArticleList} from '@/api/article'
|
|
|
+ import {
|
|
|
+ getArticleCate,
|
|
|
+ getArticleList
|
|
|
+ } from '@/api/article'
|
|
|
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
|
|
|
export default {
|
|
|
- mixins: [MescrollMixin],
|
|
|
+ mixins: [MescrollMixin],
|
|
|
data() {
|
|
|
return {
|
|
|
- top:'0px',
|
|
|
- cates:[],
|
|
|
- choseCateId:0,
|
|
|
+ top: '0px',
|
|
|
+ cates: [],
|
|
|
+ choseCateId: 0,
|
|
|
+ cateName: '',
|
|
|
// 状态栏的高度
|
|
|
statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
|
|
|
searchValue: '',
|
|
|
- mescroll:null,
|
|
|
+ mescroll: null,
|
|
|
// 上拉加载的配置
|
|
|
- downOption:{
|
|
|
-
|
|
|
+ downOption: {
|
|
|
+ use: true,
|
|
|
+ auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
|
|
|
},
|
|
|
upOption: {
|
|
|
- onScroll:true,
|
|
|
+ auto: false,
|
|
|
+ onScroll: true,
|
|
|
use: true, // 是否启用上拉加载; 默认true
|
|
|
page: {
|
|
|
num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
|
|
|
@@ -80,10 +94,10 @@
|
|
|
},
|
|
|
noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
|
|
|
empty: {
|
|
|
- icon:'https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/empty_icon.png',
|
|
|
+ icon: 'https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/empty_icon.png',
|
|
|
tip: '暂无数据'
|
|
|
},
|
|
|
- textNoMore:'已经到底了'
|
|
|
+ textNoMore: '已经到底了'
|
|
|
},
|
|
|
// 列表数据
|
|
|
dataList: [],
|
|
|
@@ -91,36 +105,43 @@
|
|
|
},
|
|
|
onLoad(option) {
|
|
|
this.choseCateId = option.cateId || 0
|
|
|
+ this.cateName = option.cateName || ''
|
|
|
},
|
|
|
onShow() {
|
|
|
this.getArticleCate();
|
|
|
- var that=this;
|
|
|
- setTimeout(function(){
|
|
|
+ var that = this;
|
|
|
+ setTimeout(function() {
|
|
|
let query = uni.createSelectorQuery().select(".top-content");
|
|
|
- query.boundingClientRect(function(data) { //data - 各种参数
|
|
|
- console.log(data.height) // 获取元素宽度
|
|
|
- that.top=data.height+"px";
|
|
|
- }).exec()
|
|
|
- },500);
|
|
|
-
|
|
|
+ query.boundingClientRect(function(data) { //data - 各种参数
|
|
|
+ console.log(data.height) // 获取元素宽度
|
|
|
+ that.top = data.height + "px";
|
|
|
+ }).exec()
|
|
|
+ }, 500);
|
|
|
+
|
|
|
},
|
|
|
- methods:{
|
|
|
- doSearch(){
|
|
|
- console.log(this.searchValue)
|
|
|
+ methods: {
|
|
|
+ doSearch() {
|
|
|
this.mescroll.resetUpScroll()
|
|
|
},
|
|
|
- getArticleCate(){
|
|
|
- var that=this;
|
|
|
+ getArticleCate() {
|
|
|
+ var that = this;
|
|
|
let data = {};
|
|
|
getArticleCate(data).then(
|
|
|
res => {
|
|
|
- if(res.code==200){
|
|
|
- this.cates=res.data;
|
|
|
-
|
|
|
-
|
|
|
- }else{
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.cates = res.data;
|
|
|
+ if (that.cateName && that.cates.length > 0) {
|
|
|
+ const matchedCate = that.cates.find(item => item.cateName == that.cateName);
|
|
|
+ if (matchedCate) {
|
|
|
+ that.choseCateId = matchedCate.cateId;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ that.$nextTick(()=>{
|
|
|
+ that.mescroll&&that.mescroll.resetUpScroll();
|
|
|
+ })
|
|
|
+ } else {
|
|
|
uni.showToast({
|
|
|
- icon:'none',
|
|
|
+ icon: 'none',
|
|
|
title: "请求失败",
|
|
|
});
|
|
|
}
|
|
|
@@ -139,26 +160,26 @@
|
|
|
//联网加载数据
|
|
|
var that = this;
|
|
|
var data = {
|
|
|
- keyword:this.searchValue,
|
|
|
- cateId:this.choseCateId,
|
|
|
+ keyword: this.searchValue,
|
|
|
+ cateId: this.choseCateId,
|
|
|
page: page.num,
|
|
|
pageSize: page.size
|
|
|
};
|
|
|
getArticleList(data).then(res => {
|
|
|
- if(res.code==200){
|
|
|
+ if (res.code == 200) {
|
|
|
//设置列表数据
|
|
|
if (page.num == 1) {
|
|
|
- that.dataList = res.data.list;
|
|
|
-
|
|
|
+ that.dataList = res.data.list;
|
|
|
+
|
|
|
} else {
|
|
|
that.dataList = that.dataList.concat(res.data.list);
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
that.mescroll.endBySize(res.data.list.length, res.data.total);
|
|
|
-
|
|
|
- }else{
|
|
|
+
|
|
|
+ } else {
|
|
|
uni.showToast({
|
|
|
- icon:'none',
|
|
|
+ icon: 'none',
|
|
|
title: "请求失败",
|
|
|
});
|
|
|
that.dataList = null;
|
|
|
@@ -186,14 +207,16 @@
|
|
|
width: 100%;
|
|
|
background-color: #FFFFFF;
|
|
|
}
|
|
|
- .top-content{
|
|
|
+
|
|
|
+ .top-content {
|
|
|
width: 100%;
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
z-index: 10;
|
|
|
}
|
|
|
- .top-title{
|
|
|
+
|
|
|
+ .top-title {
|
|
|
height: 88upx;
|
|
|
line-height: 88upx;
|
|
|
font-size: 42upx;
|
|
|
@@ -203,10 +226,12 @@
|
|
|
padding-left: 41upx;
|
|
|
background-color: #FFFFFF;
|
|
|
}
|
|
|
- .search-cont{
|
|
|
+
|
|
|
+ .search-cont {
|
|
|
padding: 16upx 30upx;
|
|
|
background-color: #FFFFFF;
|
|
|
- .inner{
|
|
|
+
|
|
|
+ .inner {
|
|
|
box-sizing: border-box;
|
|
|
width: 100%;
|
|
|
height: 72upx;
|
|
|
@@ -215,27 +240,32 @@
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
padding: 0 30upx;
|
|
|
- .icon-search{
|
|
|
+
|
|
|
+ .icon-search {
|
|
|
width: 28upx;
|
|
|
height: 28upx;
|
|
|
margin-right: 20upx;
|
|
|
}
|
|
|
- input{
|
|
|
+
|
|
|
+ input {
|
|
|
height: 60upx;
|
|
|
line-height: 60upx;
|
|
|
flex: 1;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .keyword-list{
|
|
|
+
|
|
|
+ .keyword-list {
|
|
|
box-sizing: border-box;
|
|
|
background: #fff;
|
|
|
padding: 10upx 27upx;
|
|
|
height: 100upx;
|
|
|
- .inner{
|
|
|
+
|
|
|
+ .inner {
|
|
|
display: flex;
|
|
|
}
|
|
|
- .item{
|
|
|
+
|
|
|
+ .item {
|
|
|
flex-shrink: 0;
|
|
|
padding: 0 24upx;
|
|
|
height: 64upx;
|
|
|
@@ -248,17 +278,20 @@
|
|
|
border: 1px solid #2583EB;
|
|
|
border-radius: 32upx;
|
|
|
margin: 0 20upx 20upx 0;
|
|
|
- &.active{
|
|
|
+
|
|
|
+ &.active {
|
|
|
color: #FFFFFF;
|
|
|
background: #2583EB;
|
|
|
border: 1px solid #2583EB;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .know-list{
|
|
|
+
|
|
|
+ .know-list {
|
|
|
margin-top: 20upx;
|
|
|
padding: 0 10upx;
|
|
|
- .item{
|
|
|
+
|
|
|
+ .item {
|
|
|
box-sizing: border-box;
|
|
|
height: 271upx;
|
|
|
background: #FFFFFF;
|
|
|
@@ -268,54 +301,64 @@
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
margin-bottom: 20upx;
|
|
|
- .left{
|
|
|
+
|
|
|
+ .left {
|
|
|
flex: 1;
|
|
|
padding-right: 40upx;
|
|
|
height: 190upx;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
- .title{
|
|
|
+
|
|
|
+ .title {
|
|
|
font-size: 32upx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 500;
|
|
|
color: #111111;
|
|
|
line-height: 48upx;
|
|
|
}
|
|
|
- .info-box{
|
|
|
+
|
|
|
+ .info-box {
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
- .readers{
|
|
|
+
|
|
|
+ .readers {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- .head-box{
|
|
|
+
|
|
|
+ .head-box {
|
|
|
margin-right: 27upx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- .head{
|
|
|
+
|
|
|
+ .head {
|
|
|
width: 48upx;
|
|
|
height: 48upx;
|
|
|
border-radius: 50%;
|
|
|
overflow: hidden;
|
|
|
box-shadow: 0 0 0 1px #fff;
|
|
|
margin-right: -10upx;
|
|
|
- image{
|
|
|
+
|
|
|
+ image {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .readings{
|
|
|
+
|
|
|
+ .readings {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- .eye{
|
|
|
+
|
|
|
+ .eye {
|
|
|
width: 26upx;
|
|
|
height: 20upx;
|
|
|
margin-right: 9upx;
|
|
|
}
|
|
|
- .num{
|
|
|
+
|
|
|
+ .num {
|
|
|
font-size: 24upx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 500;
|
|
|
@@ -324,7 +367,8 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .time{
|
|
|
+
|
|
|
+ .time {
|
|
|
font-size: 24upx;
|
|
|
line-height: 1;
|
|
|
font-family: PingFang SC;
|
|
|
@@ -333,16 +377,18 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .right{
|
|
|
+
|
|
|
+ .right {
|
|
|
width: 250upx;
|
|
|
height: 190upx;
|
|
|
border-radius: 8upx;
|
|
|
overflow: hidden;
|
|
|
- image{
|
|
|
+
|
|
|
+ image {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
