8b455b1920
- 新增分包组件 ListSkeleton（doctor/message/product/article/category/zone） - 首页/消息/资讯首次加载改用骨架屏，刷新不再清空旧数据避免闪空 · 去掉 home getList、消息 onShow 中的数组清空 · 三页 pages.json 增加 easycom 与 componentPlaceholder 主包异步引用 - 聊天室己方头像改为读取本地 userinfo.avatarurl（登录后微信头像）， mycollection 上传头像成功后同步写回 storage - 修复协议抽屉点不开：page-container 改为 v-if + :show； 协议名单独可点节点，匹配放宽 name/desc 双向 includes - 医生气泡头像可点击进入 doctor-detail?readonly=1 只读医生详情， 隐藏预约挂号区
307 lines
7.3 KiB
Vue
307 lines
7.3 KiB
Vue
<template>
|
||
<view class="container safe-area-inset-bottom">
|
||
<MessageNotification />
|
||
<!-- 搜索 -->
|
||
<view class="search">
|
||
<u-search placeholder="输入文章标题" bg-color="#F5f5f5" color="#DDDDDD" border-color="#F5f5f5"
|
||
:show-action="false" maxlength="21" height="66" :clearabled="true" shape="round" v-model="keyword"
|
||
@search="toSearch"
|
||
@clear="clearSearch">
|
||
</u-search>
|
||
</view>
|
||
|
||
<!-- 商品 -->
|
||
<!-- //药品分类左 -->
|
||
<view class="goods">
|
||
<view class="goods_left" @touchmove.stop>
|
||
<!-- 首次加载分类骨架 -->
|
||
<ListSkeleton v-if="categoryInitialLoading" type="category" :rows="8" />
|
||
<scroll-view v-else scroll-y scroll-with-animation class="u-menu-scroll-view" :scroll-top="scrollTop"
|
||
:scroll-into-view="itemId">
|
||
<view v-for="(item,index) in categoryLists" :key="item.id" class="u-tab-item"
|
||
:class="[num == item.id ? 'u-item-active' : '']" @tap.stop="changeStyle(item.id)"
|
||
@click="handleCategory1(item.id,index)">
|
||
<text class="u-line-1">{{item.name}}</text>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<!-- //药品分类右 -->
|
||
<view class="goods_right">
|
||
<!-- 药品 -->
|
||
<view class="second">
|
||
<!-- 首次或切分类且当前无文章时展示骨架，有旧文章则保留至新结果 -->
|
||
<ListSkeleton v-if="showArticleSkeleton" type="article" :rows="4" />
|
||
<template v-else>
|
||
<view class="list" v-for="(item,index) in infoList" @click="toDetail(item.id)" :key="item.id">
|
||
<view class="list_">
|
||
<image :src="item.cover||'https://xiaokang88.oss-cn-hangzhou.aliyuncs.com/xk-client-wx/static/xx/cp.png'" mode=""></image>
|
||
<view class="list_title">
|
||
{{item.title}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
categoriesList,
|
||
articleList,
|
||
addCart
|
||
|
||
} from '../../request/api/api'
|
||
export default {
|
||
data() {
|
||
return {
|
||
keyword: "",
|
||
scrollTop: 0, //tab标题的滚动条位置
|
||
oldScrollTop: 0, // tab标题的滚动条旧位置
|
||
current: 1, // 预设当前项的值
|
||
num: 1,
|
||
itemId: '', // 栏目右边scroll-view用于滚动的id
|
||
categoryLists: [], //分类
|
||
cid: 1, //分类一级id
|
||
infoList: [],
|
||
selectIndex: 0,
|
||
arr: [], // 储存距离顶部高度的数组
|
||
scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
|
||
show: false,
|
||
// 首次加载骨架
|
||
categoryInitialLoading: true,
|
||
articleInitialLoading: true,
|
||
// 切分类且当前列表为空时拉文章期间展示骨架
|
||
articleFetchingEmpty: false
|
||
}
|
||
},
|
||
computed: {
|
||
// 是否展示右侧文章骨架：首次加载，或请求中且当前无文章可保留
|
||
showArticleSkeleton() {
|
||
return this.articleInitialLoading || this.articleFetchingEmpty
|
||
}
|
||
},
|
||
onLoad(op) {
|
||
|
||
},
|
||
methods: {
|
||
// 搜索：按当前分类 + 标题关键词拉文章（不再误调分类接口）
|
||
toSearch() {
|
||
this.infoList = []
|
||
this.articleFetchingEmpty = true
|
||
this.getArticleList()
|
||
},
|
||
// 清空搜索词后重新拉当前分类文章
|
||
clearSearch() {
|
||
this.keyword = ''
|
||
this.infoList = []
|
||
this.articleFetchingEmpty = true
|
||
this.getArticleList()
|
||
},
|
||
/*切换需要*/
|
||
changeStyle(id) {
|
||
this.num = id
|
||
},
|
||
// 详情
|
||
toDetail(e) {
|
||
uni.navigateTo({
|
||
url: '/pages/cate/info-detail?id=' + e
|
||
})
|
||
},
|
||
// 切分类：立即清空文章出骨架
|
||
handleCategory1(e, index) {
|
||
this.num = e
|
||
this.cid = e
|
||
this.infoList = []
|
||
this.articleFetchingEmpty = true
|
||
this.getArticleList()
|
||
},
|
||
// 获取分类：返回 Promise 供下拉刷新等待
|
||
getList() {
|
||
return categoriesList({
|
||
method: "post",
|
||
data: {
|
||
store_id: uni.getStorageSync('store_id') || '11001',
|
||
}
|
||
}).then((res) => {
|
||
if (res.data.code == 0) {
|
||
const list = (res.data.result && res.data.result.list) || []
|
||
this.categoryLists = list
|
||
if (!list.length) {
|
||
this.infoList = []
|
||
this.articleInitialLoading = false
|
||
this.articleFetchingEmpty = false
|
||
return
|
||
}
|
||
const firstId = list[0].id
|
||
this.num = firstId
|
||
this.cid = firstId
|
||
return this.getArticleList()
|
||
}
|
||
}).finally(() => {
|
||
this.categoryInitialLoading = false
|
||
})
|
||
},
|
||
// 文章列表：可选 keyword 标题搜索
|
||
getArticleList() {
|
||
if (!this.infoList || this.infoList.length === 0) {
|
||
this.articleFetchingEmpty = true
|
||
}
|
||
const data = {
|
||
store_id: uni.getStorageSync('store_id') || '11001',
|
||
cid: this.cid
|
||
}
|
||
const kw = (this.keyword || '').trim()
|
||
if (kw) {
|
||
data.keyword = kw
|
||
}
|
||
return articleList({
|
||
method: "get",
|
||
data
|
||
}).then((res) => {
|
||
if (res.data.code == 0) {
|
||
this.infoList = (res.data.result && res.data.result.list) || []
|
||
}
|
||
}).finally(() => {
|
||
this.articleInitialLoading = false
|
||
this.articleFetchingEmpty = false
|
||
})
|
||
},
|
||
/**
|
||
* 下拉刷新：清空分类/文章并重走开骨架
|
||
*/
|
||
onPullDownRefresh() {
|
||
this.categoryLists = []
|
||
this.infoList = []
|
||
this.categoryInitialLoading = true
|
||
this.articleInitialLoading = true
|
||
this.articleFetchingEmpty = false
|
||
Promise.resolve(this.getList()).finally(() => {
|
||
uni.stopPullDownRefresh()
|
||
})
|
||
}
|
||
},
|
||
mounted() {
|
||
// this.getList();
|
||
},
|
||
onShow() {
|
||
// 不清空 categoryLists / infoList，成功后再替换
|
||
this.getList();
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
background: #F6F9FB;
|
||
width: 750rpx;
|
||
max-height: 100%;
|
||
min-height: 100vh;
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
|
||
.search {
|
||
width: 750rpx;
|
||
background-color: #fff;
|
||
height: 98rpx;
|
||
margin: 0 auto;
|
||
padding: 16rpx 30rpx;
|
||
|
||
.u-search {
|
||
width: 686rpx;
|
||
height: 66rpx;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.goods {
|
||
width: 750rpx;
|
||
min-height: calc(100vh - 98rpx);
|
||
display: flex;
|
||
|
||
.goods_left {
|
||
width: 184rpx;
|
||
background: #fff;
|
||
margin-right: 16rpx;
|
||
|
||
.u-tab-item {
|
||
width: 184rpx;
|
||
height: 100rpx;
|
||
text-align: center;
|
||
line-height: 100rpx;
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: bold;
|
||
color: #9EA7B1;
|
||
}
|
||
|
||
.u-item-active {
|
||
width: 184rpx;
|
||
height: 100rpx;
|
||
text-align: center;
|
||
line-height: 100rpx;
|
||
background: #F6F9FB;
|
||
border-left: 4rpx solid #4175EE;
|
||
font-size: 32rpx;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
font-weight: bold;
|
||
color: #232323;
|
||
}
|
||
}
|
||
|
||
.goods_right {
|
||
width: 530rpx;
|
||
background: #F6F9FB;
|
||
|
||
.second {
|
||
width: 530rpx;
|
||
text-align: center;
|
||
margin-top: 20rpx;
|
||
|
||
.list {
|
||
|
||
.list_ {
|
||
width: 500rpx;
|
||
height: 246rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 12rpx 12rpx 0rpx 0rpx;
|
||
position: relative;
|
||
margin: 10rpx auto;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.list_title {
|
||
width: 100%;
|
||
position: absolute;
|
||
left: 0%;
|
||
bottom: 0;
|
||
height: 92rpx;
|
||
font-size: 22rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
background: rgba(0, 0, 0, 0.4);
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 34rpx;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|