From e94a376395506d69cd585f009130c62865ef80b1 Mon Sep 17 00:00:00 2001 From: BAKEYi <16298417+bakeyi@user.noreply.gitee.com> Date: Mon, 1 Jun 2026 13:54:01 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8A=80=E8=83=BD=E9=9B=86=E5=B8=82=E8=B7=B3?= =?UTF-8?q?=E8=BD=AC=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/home/components/skill-card.vue | 4 +- pages/jingxuan/selected-skills.vue | 273 ++++++---- pages/jingxuan/skill-detail.vue | 722 +++++++++++++++++++++++++++ 3 files changed, 889 insertions(+), 110 deletions(-) create mode 100644 pages/jingxuan/skill-detail.vue diff --git a/pages/home/components/skill-card.vue b/pages/home/components/skill-card.vue index 825377f..e5c3e01 100644 --- a/pages/home/components/skill-card.vue +++ b/pages/home/components/skill-card.vue @@ -160,8 +160,8 @@ export default { } &.brand-course .type-text { - background: #e6f7ff; - color: #1890ff; + background: #f9d3d760; + color: #E55463; } } diff --git a/pages/jingxuan/selected-skills.vue b/pages/jingxuan/selected-skills.vue index cb9b163..26cfbc3 100644 --- a/pages/jingxuan/selected-skills.vue +++ b/pages/jingxuan/selected-skills.vue @@ -13,51 +13,61 @@ - - - - 美融融官方 - 发布了658视频 + + + + + + + {{ authorInfo.name }} + 发布了{{ authorInfo.videoCount }}条技能 + + + + + 查看更多 + + - - - - - - 发布时间 - - - + + + + + 发布时间 + + + + + + + + 浏览量 + + + + - - - 浏览量 - - - + + + 筛选 + + + + + + + + 课程类型 + + 全部 + 平台课程 + 品牌课程 - - - 筛选 - - - - - - - - 课程类型 - - 全部 - 平台课程 - 品牌课程 - - - + 44px) = 88px 左右 - this.filterTop = this.navHeight + uni.upx2px(106) this.initMockData() this.fetchData(true) }, - // 触底加载更多 onReachBottom() { if (!this.isFinished) { this.fetchData(false) @@ -140,11 +167,22 @@ export default { methods: { goToSearch() { uni.navigateTo({ - url: '/pages/search_common/search?type=skill' // 告诉搜索页，我要搜技能 + url: '/pages/search_common/search?type=skill' + }); + }, + + // 【新增】：跳转到品牌详情页面 + goToBrandDetail() { + if (this.authorInfo.brandId) { + // 注：请核对这里的路径是否与你项目中的品牌详情页路径一致 + uni.navigateTo({ + url: `/pages/brand/detail?id=${this.authorInfo.brandId}` }); + } else { + uni.showToast({ title: '缺少品牌信息', icon: 'none' }); + } }, - // 点击排序 toggleSort(type) { if (type === 'time') { if (this.orderType === 1) this.orderType = 2 @@ -153,11 +191,9 @@ export default { if (this.orderType === 3) this.orderType = 4 else this.orderType = 3 } - this.fetchData(true) }, - // 筛选面板控制 toggleFilterPanel() { this.filterVisible = !this.filterVisible }, @@ -165,14 +201,14 @@ export default { this.filterVisible = false }, - // 💡 匹配设计图交互：选择选项后立刻应用并收起下拉框 selectAndApply(typeVal) { this.linkType = typeVal; + // 当通过本地筛选器切换时，关闭“专属展示区”，确保纯净筛选 + this.authorInfo.show = false; this.closeFilterPanel(); this.fetchData(true); }, - // 获取列表数据 (统一入口) async fetchData(isReset = false) { if (isReset) { this.page = 1 @@ -183,26 +219,21 @@ export default { if (USE_REAL_API) { uni.showLoading({ title: '加载中...' }) try { - // 1. 初始化基础参数 const params = { page: this.page, limit: this.limit } + if (this.orderType !== 0) params.order_type = this.orderType; + if (this.linkType !== '') params.link_type = this.linkType; - // 2. 仅当 orderType 不为 0 时，才将 order_type 传给后端，避免 500 报错 - if (this.orderType !== 0) { - params.order_type = this.orderType - } - - // 3. 课程类型筛选 - if (this.linkType !== '') { - params.link_type = this.linkType + // 【核心接口预留】：如果当前在看某个品牌的专属页，需要传link_id给后端过滤 + if (this.authorInfo.show && !this.authorInfo.isOfficial && this.authorInfo.brandId) { + params.link_id = this.authorInfo.brandId; } const res = await request.post('/sj/skill/list', params) if ((res.code === 200 || res.state === 1) && res.data && res.data.list) { const list = res.data.list.map(item => this.formatApiData(item)) - if (list.length < this.limit) this.isFinished = true this.skillList = isReset ? list : this.skillList.concat(list) this.page++ @@ -215,28 +246,29 @@ export default { uni.hideLoading() } } else { - // ========== 模拟数据请求环境 ========== uni.showLoading({ title: '模拟加载中...' }) setTimeout(() => { let list = [...this.mockDatabase] - // 1. 模拟筛选 if (this.linkType !== '') { list = list.filter(item => item.link_type === this.linkType) } + + // 模拟品牌过滤 + if (this.authorInfo.show && !this.authorInfo.isOfficial && this.authorInfo.brandId) { + list = list.filter(item => item.brand_id == this.authorInfo.brandId) + } - // 2. 模拟排序 (仅当 orderType 不为 0 时才进行排序操作) if (this.orderType !== 0) { list.sort((a, b) => { - if (this.orderType === 1) return b.timestamp - a.timestamp // 时间降序 - if (this.orderType === 2) return a.timestamp - b.timestamp // 时间升序 - if (this.orderType === 3) return b.views - a.views // 浏览量降序 - if (this.orderType === 4) return a.views - b.views // 浏览量升序 + if (this.orderType === 1) return b.timestamp - a.timestamp + if (this.orderType === 2) return a.timestamp - b.timestamp + if (this.orderType === 3) return b.views - a.views + if (this.orderType === 4) return a.views - b.views return 0 }) } - // 3. 模拟分页 const start = (this.page - 1) * this.limit const end = start + this.limit const pageData = list.slice(start, end) @@ -249,7 +281,6 @@ export default { } }, - // 格式化接口数据 formatApiData(item) { return { id: item.id, @@ -281,14 +312,13 @@ export default { } }, - // 初始化模拟数据 initMockData() { this.mockDatabase = [ { id: 1, title: '穿戴甲的操作视频扫码验券操作教程', coverSrc: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e2220528-fdf6-4cad-a25d-ec6cbee1501e.jpg', type: '平台课程', link_type: 1, views: 836000, time: '7小时前', timestamp: Date.now() - 7*3600000 }, - { id: 2, title: '脸部按摩操作步骤详情', coverSrc: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e2220528-fdf6-4cad-a25d-ec6cbee1501e.jpg', type: '品牌课程', link_type: 2, views: 8334, time: '1天前', timestamp: Date.now() - 24*3600000 }, + { id: 2, title: '脸部按摩操作步骤详情', coverSrc: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e2220528-fdf6-4cad-a25d-ec6cbee1501e.jpg', type: '品牌课程', link_type: 2, brand_id: 101, views: 8334, time: '1天前', timestamp: Date.now() - 24*3600000 }, { id: 3, title: '全身SPA的操作视频操作教程', coverSrc: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e2220528-fdf6-4cad-a25d-ec6cbee1501e.jpg', type: '平台课程', link_type: 1, views: 2344, time: '3天前', timestamp: Date.now() - 3*24*3600000 }, { id: 4, title: '高级面部护理手法详解最新版', coverSrc: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e2220528-fdf6-4cad-a25d-ec6cbee1501e.jpg', type: '平台课程', link_type: 1, views: 836, time: '4月26日', timestamp: Date.now() - 30*24*3600000 }, - { id: 5, title: '光疗美甲进阶全方位解析', coverSrc: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e2220528-fdf6-4cad-a25d-ec6cbee1501e.jpg', type: '品牌课程', link_type: 2, views: 12000, time: '2小时前', timestamp: Date.now() - 2*3600000 } + { id: 5, title: '光疗美甲进阶全方位解析', coverSrc: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e2220528-fdf6-4cad-a25d-ec6cbee1501e.jpg', type: '品牌课程', link_type: 2, brand_id: 101, views: 12000, time: '2小时前', timestamp: Date.now() - 2*3600000 } ] } } @@ -301,48 +331,77 @@ export default { background: #fff; } -/* 官方作者展示块 */ +/* 统一吸顶容器 */ +.sticky-header-container { + position: sticky; + background: #fff; + z-index: 101; + /* 确保整体吸顶时下方有稍微一点阴影或边框分割更好看，可根据 UI 需求开启 */ + // border-bottom: 1rpx solid #F5F5F5; +} + +/* 官方/品牌 作者展示块样式 */ .official-author-block { display: flex; align-items: center; + justify-content: space-between; padding: 24rpx 30rpx; background: #fff; border-bottom: 10rpx solid #F5F5F5; - .author-avatar { - width: 70rpx; - height: 70rpx; - border-radius: 50%; - margin-right: 20rpx; - // border: 2rpx solid #F5F5F5; - } - - .author-info { + .author-left { display: flex; - flex-direction: column; - - .author-name { - font-weight: 500; - font-size: 28rpx; - color: #333333; - line-height: 40rpx; - margin-bottom: 4rpx; + align-items: center; + + .author-avatar { + width: 70rpx; + height: 70rpx; + border-radius: 50%; + margin-right: 20rpx; } - .author-desc { - font-weight: 400; - font-size: 20rpx; - color: #999999; - line-height: 28rpx; + .author-info { + display: flex; + flex-direction: column; + + .author-name { + font-weight: 500; + font-size: 28rpx; + color: #333333; + line-height: 40rpx; + margin-bottom: 4rpx; + } + + .author-desc { + font-weight: 400; + font-size: 20rpx; + color: #999999; + line-height: 28rpx; + } + } + } + + .view-more-btn { + display: flex; + align-items: center; + font-size: 24rpx; + color: #666666; + + .arrow-right { + width: 10rpx; + height: 10rpx; + border-top: 2rpx solid #666666; + border-right: 2rpx solid #666666; + transform: rotate(45deg); + margin-left: 6rpx; } } } .sort-bar-wrap { - position: sticky; + /* 移除单独的 sticky，由外层 container 统一控制 */ background: #fff; - z-index: 101; -// border-bottom: 1rpx solid #F5F5F5; + position: relative; } .sort-bar { @@ -412,10 +471,9 @@ export default { padding: 30rpx 24rpx; } -/* 抽屉筛选面板：使用 absolute 脱离计算 */ .filter-panel { position: absolute; - top: 100%; /* 从 sort-bar-wrap 底部开始向下延伸 */ + top: 100%; left: 0; right: 0; height: 100vh; z-index: 100; @@ -444,7 +502,6 @@ export default { padding: 30rpx 30rpx 40rpx; display: flex; flex-direction: column; - // box-shadow: 0 10rpx 20rpx rgba(0,0,0,0.05); transform: translateY(-100%); transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } diff --git a/pages/jingxuan/skill-detail.vue b/pages/jingxuan/skill-detail.vue new file mode 100644 index 0000000..0830755 --- /dev/null +++ b/pages/jingxuan/skill-detail.vue @@ -0,0 +1,722 @@ + + + + + \ No newline at end of file