课程列表页；

assets/css/learn/list.scss

@@ -176,11 +176,29 @@
                 &:nth-of-type(3n) {
                     margin-right: 0;
                 }
-                .cover {
+                .cover-wrapper {
+                    position: relative;
                     width: 100%;
                     height: 175px;
                     overflow: hidden;
-                    object-fit: scale-down;
+                    .cover {
+                        width: 100%;
+                        height: 100%;
+                        object-fit: scale-down;
+                    }
+                    .play-icon {
+                        position: absolute;
+                        width: 46px;
+                        height: 46px;
+                        top: calc(50% - 23px);
+                        left: calc(50% - 23px);
+                        &:hover {
+                            width: 50px;
+                            height: 50px;
+                            top: calc(50% - 25px);
+                            left: calc(50% - 25px);
+                        }
+                    }
                 }
                 .owner-wrapper {
                     width: 100%;
@@ -190,18 +208,23 @@
                     display: flex;
                     align-items: center;
                     .avatar {
+                        flex-shrink: 0;
                         width: 22px;
                         height: 22px;
                         overflow: hidden;
                         border-radius: 50%;
                     }
                     .nickname {
+                        flex: 1;
                         line-height: 22px;
                         margin-left: 6px;
                         font-size: 14px;
                         font-family: PingFangSC, PingFangSC-Regular;
                         font-weight: 400;
                         color: #666666;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
                     }
                 }
                 .title {
@@ -220,6 +243,7 @@
                     white-space: normal;
                     -webkit-box-orient: vertical;
                     -webkit-line-clamp: 2;
+                    word-break: break-all;
                     &:hover {
                         color: #308eff;
                     }

assets/css/skill/list.scss

@@ -190,18 +190,23 @@
                     display: flex;
                     align-items: center;
                     .avatar {
+                        flex-shrink: 0;
                         width: 22px;
                         height: 22px;
                         overflow: hidden;
                         border-radius: 50%;
                     }
                     .nickname {
+                        flex: 1;
                         line-height: 22px;
                         margin-left: 6px;
                         font-size: 14px;
                         font-family: PingFangSC, PingFangSC-Regular;
                         font-weight: 400;
                         color: #666666;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
                     }
                 }
                 .title {
@@ -220,6 +225,7 @@
                     white-space: normal;
                     -webkit-box-orient: vertical;
                     -webkit-line-clamp: 2;
+                    word-break: break-all;
                     &:hover {
                         color: #308eff;
                     }
@@ -423,18 +429,23 @@
                     display: flex;
                     align-items: center;
                     .avatar {
+                        flex-shrink: 0;
                         width: 22px;
                         height: 22px;
                         overflow: hidden;
                         border-radius: 50%;
                     }
                     .nickname {
+                        flex: 1;
                         line-height: 22px;
                         margin-left: 6px;
                         font-size: 14px;
                         font-family: PingFangSC, PingFangSC-Regular;
                         font-weight: 400;
                         color: #666666;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
                     }
                 }
                 .title {

components/consult/dealSeoList.js

@@ -37,7 +37,7 @@ export default class DealSeoData {
         let match = params.pathMatch || ''
         let matchList = match.split('/')
         matchList.pop();
-        let lastMatch = matchList.pop();
+        let lastMatch = matchList.pop() || '';
         // console.log(`match: ${match}, matchList: ${matchList}, lastMatch: ${lastMatch}`)
 
         // 重定向

components/learn/dealSeoList.js

@@ -36,7 +36,7 @@ export default class DealSeoData {
         let match = params.pathMatch || ''
         let matchList = match.split('/')
         matchList.pop()
-        let lastMatch = matchList.pop()
+        let lastMatch = matchList.pop() || ''
         // console.log(`match: ${match}, matchList: ${matchList}, lastMatch: ${lastMatch}`)
 
         // 重定向
@@ -44,45 +44,46 @@ export default class DealSeoData {
             this.redirect(301, '/learn/' + lastMatch)
         }
 
-        let learnCate = await this._getSkillCate()
-        let learnCateAll = []
-        learnCate.forEach(item => {
-            if (item.children && item.children.length) {
-                item.children.forEach(child => {
-                    learnCateAll.push(child)
-                })
-            }
-        })
-
-        if (lastMatch) {
-            // 遍历分类数组，因为每个 children 都添加了“全部”，此处逻辑无需修改
-            let selectedCateIdOne = ''
-            learnCate.forEach(cateOne => {
-                cateOne.children.forEach(cateTwo => {
-                    if (cateTwo.value === lastMatch) {
-                        selectedCateIdOne = cateOne.value
-                        self.cateNameOne = cateOne.label
-                        if (cateTwo.label === '全部') {
-                            self.cateNameTwo = cateOne.label
-                        } else {
-                            self.cateNameTwo = cateTwo.label
-                        }
-                    }
-                })
-            })
-            if (selectedCateIdOne) {
-                this.pagination.selectedCateIdOne = selectedCateIdOne
-                this.pagination.selectedCateIdTwo = lastMatch
-            }
-        }
+        // 无需分类信息
+        // let learnCate = await this._getSkillCate()
+        // let learnCateAll = []
+        // learnCate.forEach(item => {
+        //     if (item.children && item.children.length) {
+        //         item.children.forEach(child => {
+        //             learnCateAll.push(child)
+        //         })
+        //     }
+        // })
+
+        // if (lastMatch) {
+        //     // 遍历分类数组，因为每个 children 都添加了“全部”，此处逻辑无需修改
+        //     let selectedCateIdOne = ''
+        //     learnCate.forEach(cateOne => {
+        //         cateOne.children.forEach(cateTwo => {
+        //             if (cateTwo.value === lastMatch) {
+        //                 selectedCateIdOne = cateOne.value
+        //                 self.cateNameOne = cateOne.label
+        //                 if (cateTwo.label === '全部') {
+        //                     self.cateNameTwo = cateOne.label
+        //                 } else {
+        //                     self.cateNameTwo = cateTwo.label
+        //                 }
+        //             }
+        //         })
+        //     })
+        //     if (selectedCateIdOne) {
+        //         this.pagination.selectedCateIdOne = selectedCateIdOne
+        //         this.pagination.selectedCateIdTwo = lastMatch
+        //     }
+        // }
 
         // 处理完分类信息，再获取数据
         let learnList = await this._getLearnList()
 
         return {
             root_type,
-            learnCate,
-            learnCateAll,
+            // learnCate,
+            // learnCateAll,
             learnList, //首次获取的数据
             mobile: this.mobile,
             pagination: this.pagination,
@@ -90,41 +91,6 @@ export default class DealSeoData {
         }
     }
 
-    /** 获取技能分类 */
-    async _getSkillCate () {
-        let res = await this.$axios.$post('/api/sale/cateListYes', { type: 2, root_type: this.root_type })
-        let learnCate = []
-
-        if (Number(res.status) === 1) {
-            learnCate = res.data || []
-            learnCate = learnCate.map(item => {
-                let children = item.child_list.map(child => {
-                    return {
-                        value: child.f_name,
-                        label: child.name
-                    }
-                })
-                return {
-                    value: item.f_name,
-                    label: item.name,
-                    children: children
-                }
-            })
-
-            // web 端，为所有二级分类添加 “全部”
-            if (!this.mobile) {
-                learnCate.forEach(item => {
-                    if (item.children) {
-                        let allItem = { value: item.value, label: '全部' }
-                        item.children.splice(0, 0, allItem)
-                    }
-                })
-            }
-        }
-
-        return learnCate
-    }
-
     /** 获取技能服务列表 */
     async _getLearnList () {
         // 接口参数释义：https://www.yesdev.cn/apidocs-detail-20.html
@@ -164,9 +130,9 @@ export default class DealSeoData {
 
     dealThisMeta() {
         let head = {
-            title: "",
-            keyword: "",
-            description: "",
+            title: "客栈学院",
+            keyword: "客栈学院",
+            description: "客栈学院",
             h1: "",
             canonical: "",
             metaLocation: ""
@@ -183,17 +149,17 @@ export default class DealSeoData {
             }
         }
 
-        if (this.cateNameTwo) {
-            // 分类页
-            head.title = `${this.cateNameTwo}技能服务-程序员客栈技术服务`;
-            head.keyword = `${this.cateNameTwo}开发,${this.cateNameTwo}编程,自学${this.cateNameTwo},${this.cateNameTwo}教学`;
-            head.description = "技能服务是程序员客栈远程工作平台为企业和自由职业者提供的标准化数字服务，通过标准定价的模块化技能，帮助企业和自由职业者快速达成合作。";
-        } else {
-            // 列表页，无筛选参数
-            head.title = "程序员客栈技能商城-【程序员客栈技能服务】";
-            head.keyword = "程序员客栈技能商城,远程工作,Logo设计,网页设计,微信公众号运营,PPT设计,社群运营,文案编辑,视频剪辑,音频录制,翻译";
-            head.description = "技能服务是程序员客栈远程工作平台为企业和自由职业者提供的标准化数字服务，通过标准定价的模块化技能，帮助企业和自由职业者快速达成合作。";
-        }
+        // if (this.cateNameTwo) {
+        //     // 分类页
+        //     head.title = `${this.cateNameTwo}技能服务-程序员客栈技术服务`;
+        //     head.keyword = `${this.cateNameTwo}开发,${this.cateNameTwo}编程,自学${this.cateNameTwo},${this.cateNameTwo}教学`;
+        //     head.description = "技能服务是程序员客栈远程工作平台为企业和自由职业者提供的标准化数字服务，通过标准定价的模块化技能，帮助企业和自由职业者快速达成合作。";
+        // } else {
+        //     // 列表页，无筛选参数
+        //     head.title = "程序员客栈技能商城-【程序员客栈技能服务】";
+        //     head.keyword = "程序员客栈技能商城,远程工作,Logo设计,网页设计,微信公众号运营,PPT设计,社群运营,文案编辑,视频剪辑,音频录制,翻译";
+        //     head.description = "技能服务是程序员客栈远程工作平台为企业和自由职业者提供的标准化数字服务，通过标准定价的模块化技能，帮助企业和自由职业者快速达成合作。";
+        // }
 
         return head
     }

components/skill/dealSeoList.js

@@ -36,7 +36,7 @@ export default class DealSeoData {
         let match = params.pathMatch || ''
         let matchList = match.split('/')
         matchList.pop()
-        let lastMatch = matchList.pop()
+        let lastMatch = matchList.pop() || ''
         // console.log(`match: ${match}, matchList: ${matchList}, lastMatch: ${lastMatch}`)
 
         // 重定向

components/work_down/dealSeoList.js

@@ -38,7 +38,7 @@ export default class DealSeoData {
         let match = params.pathMatch || ''
         let matchList = match.split('/')
         matchList.pop()
-        let lastMatch = matchList.pop()
+        let lastMatch = matchList.pop() || ''
         console.log(`match: ${match}, matchList: ${matchList}, lastMatch: ${lastMatch}`)
 
         // 重定向

pages/frontend/learn/list.vue

@@ -10,45 +10,6 @@
                     <div class="tabs-item active">客栈学院</div>
                     <!-- <el-button class="add-btn" @click="handleClickAdd">发布课程</el-button> -->
                 </div>
-                <div class="learn-category-wrapper">
-                    <!-- <div class="category-title">技术分类</div> -->
-                    <!-- 一级分类内容 -->
-                    <div
-                        class="category-one-wrapper"
-                        :class="categoryExpanded ? 'expand' : ''">
-                        <!-- 更多 -->
-                        <!-- <div
-                            class="category-more"
-                            @click="handleClickExpandCategory">{{ categoryExpanded ? '收起' : '更多' }}</div> -->
-                        <!-- 全部 -->
-                        <a
-                            href="/learn/"
-                            class="category-one-item"
-                            :class="pagination.selectedCateIdOne == '' ? 'active' : ''">全部</a>
-                        <!-- 一级分类 -->
-                        <a
-                            v-for="categoryOne in learnCate"
-                            :key="categoryOne.value"
-                            class="category-one-item"
-                            :class="pagination.selectedCateIdOne == categoryOne.value ? 'active' : ''"
-                            :href="`/learn/${categoryOne.value}/`">{{ categoryOne.label }}</a>
-                    </div>
-                    <!-- 二级分类内容 -->
-                    <div class="category-two-wrapper">
-                        <div
-                            class="category-two-content"
-                            v-for="categoryOne in learnCate"
-                            :key="`cate-two-parnet${categoryOne.value}`"
-                            v-show="pagination.selectedCateIdOne == categoryOne.value">
-                            <a
-                                class="category-two-item"
-                                :class="pagination.selectedCateIdTwo == categoryTwo.value ? 'active' : ''"
-                                :href="`/learn/${categoryTwo.value}/`"
-                                v-for="categoryTwo in categoryOne.children"
-                                :key="`cate-two-${categoryTwo.value}`">{{ categoryTwo.label }}</a>
-                        </div>
-                    </div>
-                </div>
             </div>
             <div class="learn-content">
                 <div class="learn-list-wrapper" v-if="learnList.length">
@@ -56,14 +17,15 @@
                         class="learn-item"
                         v-for="item in learnList"
                         :key="item.sale_id">
-                        <a :href="`/s/${item.sale_id}`">
+                        <a class="cover-wrapper" :href="`/l/${item.sale_id}`">
                             <img class="cover" :src="item.coverImage" alt="learnCover,cover">
+                            <img class="play-icon" src="@/assets/img/learn/play.png" alt="play">
                         </a>
-                        <a class="owner-wrapper" :href="`/wo/${item.user.uid}/learn`">
+                        <a class="owner-wrapper" :href="`/wo/${item.user.uid}`">
                             <img class="avatar" :src="item.user.icon_url" alt="avatar">
                             <div class="nickname">{{ item.user.nickname }}</div>
                         </a>
-                        <a class="title" :href="`/s/${item.sale_id}`">{{ item.title }}</a>
+                        <a class="title" :href="`/l/${item.sale_id}`">{{ item.title }}</a>
                         <div class="price-wrapper">
                             <div class="price-text">￥{{ item.price }}</div>
                             <div  v-if="item.buy_num>0" class="buy-num">{{ item.buy_num }}人已学习</div>
@@ -305,11 +267,11 @@ export default {
         handleClickSkillItem (saleId) {
             if (this.deviceType.android || this.deviceType.ios) {
                 // 端跳转
-                let jumpUrl = `${this.baseUrl}/s/${saleId}`
+                let jumpUrl = `${this.baseUrl}/l/${saleId}`
                 location.href = `proginn://webview?url=${jumpUrl}`
             } else {
                 // web 跳转
-                location.href = `/s/${saleId}`
+                location.href = `/l/${saleId}`
             }
         },
         /**