Commit 1f5686d1 by zhengxiao

feat(custom): 课程小程序首页更改

parent 615421ac
......@@ -5,7 +5,12 @@
<text class="title">{{ title }}</text>
<text class="desc">{{ subtitle }}</text>
</view>
<view class="study-count">{{ studyCount }}万人已学习</view>
<view
v-if="formattedStudyCount"
class="study-count"
>
{{ formattedStudyCount }}人已学习
</view>
</view>
<view class="course-list">
......@@ -13,17 +18,18 @@
v-for="(item, index) in showCourseList"
:key="index"
class="course-item"
@tap="handleCourseClick(item)"
>
<image
class="course-img"
:src="item.image || '/static/images/course-placeholder.png'"
:src="item.homeCover"
mode="aspectFill"
/>
<view class="course-info">
<view class="course-title">{{ item.title }}</view>
<view class="course-desc">{{ item.desc }}</view>
<view class="course-desc">{{ item.subTitle }}</view>
<view class="course-meta">
<text class="enroll-count">{{ item.enrollCount }}人已报名</text>
<text class="enroll-count">{{ item.applyNum }}人已报名</text>
<button class="study-btn">去学习</button>
</view>
</view>
......@@ -36,12 +42,16 @@
@tap="toggleShowMore"
>
<text>{{ isExpanded ? '收起' : '展开更多' }}</text>
<text :class="['arrow', isExpanded ? 'up' : '']"></text>
<image
:class="isExpanded ? 'arrow up' : 'arrow'"
src="https://static.ydlcdn.com/miniapp/ydl-group-course/arrow.png"
/>
</view>
</view>
</template>
<script>
import { hostPrefix } from '@/config'
export default {
name: 'CourseBlock',
props: {
......@@ -71,8 +81,26 @@ export default {
showCourseList() {
return this.isExpanded ? this.courseList : this.courseList.slice(0, 2)
},
formattedStudyCount() {
const count = this.studyCount
if (count >= 10000) {
let formatted = (count / 10000).toFixed(1)
formatted = formatted.replace(/\.0$/, '')
return `${formatted}万`
} else {
return count
}
},
},
methods: {
handleCourseClick(item) {
// console.log(item)/h5-course/detail/
uni.navigateTo({
url: `/pages/web/web?title=${encodeURIComponent(item.title)}&loadUrl=${encodeURIComponent(
`${hostPrefix}/h5-course/detail/${item.id}`,
)}`,
})
},
toggleShowMore() {
this.isExpanded = !this.isExpanded
},
......@@ -85,7 +113,7 @@ export default {
margin: 12px;
padding: 12px 10px;
background: #fff;
border-radius: 16px;
border-radius: 12px;
.block-header {
display: flex;
......@@ -138,12 +166,16 @@ export default {
margin-right: 8px;
border-radius: 4px;
background-color: #d8d8d8;
flex-shrink: 0;
}
.course-info {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.course-title {
color: #000000;
......@@ -154,6 +186,7 @@ export default {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex-shrink: 0;
}
.course-desc {
......@@ -201,14 +234,19 @@ export default {
}
.show-more {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding-top: 20rpx;
font-size: 26rpx;
color: #999;
padding-top: 20px;
color: #999999;
font-weight: 400;
font-size: 12px;
.arrow {
margin-left: 8rpx;
font-size: 20rpx;
width: 8px;
height: 8px;
margin-left: 8px;
display: inline-block;
transition: transform 0.3s ease;
......
......@@ -56,7 +56,7 @@
},
"tabBar": {
"color": "#76787C",
"selectedColor": "#55B5F3",
"selectedColor": "#0092FF",
"iconWidth": "24px",
"spacing": "9px",
"list": [
......
src/static/tab_home.png

2.39 KB | W: | H:

src/static/tab_home.png

2.38 KB | W: | H:

src/static/tab_home.png
src/static/tab_home.png
src/static/tab_home.png
src/static/tab_home.png
  • 2-up
  • Swipe
  • Onion skin
src/static/tab_home_selected.png

1.63 KB | W: | H:

src/static/tab_home_selected.png

1.64 KB | W: | H:

src/static/tab_home_selected.png
src/static/tab_home_selected.png
src/static/tab_home_selected.png
src/static/tab_home_selected.png
  • 2-up
  • Swipe
  • Onion skin
src/static/tab_my.png

2.56 KB | W: | H:

src/static/tab_my.png

2.61 KB | W: | H:

src/static/tab_my.png
src/static/tab_my.png
src/static/tab_my.png
src/static/tab_my.png
  • 2-up
  • Swipe
  • Onion skin
src/static/tab_my_selected.png

1.6 KB | W: | H:

src/static/tab_my_selected.png

1.74 KB | W: | H:

src/static/tab_my_selected.png
src/static/tab_my_selected.png
src/static/tab_my_selected.png
src/static/tab_my_selected.png
  • 2-up
  • Swipe
  • Onion skin
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment