2d2a8abfd4
- 新增分包组件 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 只读医生详情， 隐藏预约挂号区
278 lines
6.6 KiB
Vue
278 lines
6.6 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">
|
||
</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.getList()
|
||
},
|
||
/*切换需要*/
|
||
changeStyle(id) {
|
||
this.num = id
|
||
},
|
||
// 详情
|
||
toDetail(e) {
|
||
uni.navigateTo({
|
||
url: '/pages/cate/info-detail?id=' + e
|
||
})
|
||
},
|
||
//点击药品一级分类e：不清空 infoList，有旧数据则保留到新结果返回
|
||
handleCategory1(e, index) {
|
||
this.num = e
|
||
this.cid = e
|
||
this.getArticleList()
|
||
},
|
||
|
||
//获取药品分类：成功后再覆盖，失败保留旧分类
|
||
getList() {
|
||
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
|
||
this.getArticleList()
|
||
}
|
||
}).finally(() => {
|
||
this.categoryInitialLoading = false
|
||
})
|
||
},
|
||
// 文章列表：请求前不清空；仅当当前无文章可展示时打骨架标记
|
||
getArticleList() {
|
||
if (!this.infoList || this.infoList.length === 0) {
|
||
this.articleFetchingEmpty = true
|
||
}
|
||
articleList({
|
||
method: "get",
|
||
data: {
|
||
store_id: uni.getStorageSync('store_id') || '11001',
|
||
cid: this.cid
|
||
}
|
||
}).then((res) => {
|
||
if (res.data.code == 0) {
|
||
this.infoList = (res.data.result && res.data.result.list) || []
|
||
}
|
||
}).finally(() => {
|
||
this.articleInitialLoading = false
|
||
this.articleFetchingEmpty = false
|
||
})
|
||
}
|
||
},
|
||
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>
|