Commit bbe85712 by 郑晓

Merge branch 'feat_course_fix_250724' into 'master'

feat(custom): 新增banner

See merge request !12
parents a7894054 bd68331f
......@@ -46,15 +46,44 @@
</view>
</view>
<view
v-if="bannerList.length > 0"
class="banner"
>
<u-swiper
:list="bannerList"
key-name="url"
:height="swiperHeight"
:radius="12"
bg-color="#ffffff"
:autoplay="true"
:img-mode="'aspectFill'"
@click="handleBannerClick"
@change="handleBannerChange"
>
<view
slot="indicator"
class="indicator"
>
<view
v-for="(item, index) in bannerList"
:key="index"
class="indicator__dot"
:class="[index == current && 'indicator__dot--active']"
></view>
</view>
</u-swiper>
</view>
<!-- 会员提示区 -->
<view class="vip-tips">
<!-- <view class="vip-tips">
<img
class="vip-tips-img"
:src="clueData.imageUrl"
mode="widthFix"
@tap="jumpTo(clueData.linkUrl)"
/>
</view>
</view> -->
</view>
<!-- 执业入驻区域 -->
......@@ -170,8 +199,21 @@ export default {
},
imgHeights: {},
timer: null, // 新增定时器实例
current: 0,
screenWidth: 0, // 屏幕宽度
}
},
computed: {
// 计算swiper高度,按照17:6的比例
swiperHeight() {
if (!this.screenWidth) return 120 // 默认高度
// banner的实际宽度 = 屏幕宽度 - 左右边距(12px * 2)
const bannerWidth = this.screenWidth - 24
// 按照17:6的比例计算高度
const height = (bannerWidth * 6) / 17
return Math.round(height)
},
},
// 分享给朋友
onShareAppMessage() {
return {
......@@ -215,8 +257,29 @@ export default {
// 总高度 = 状态栏高度 + 胶囊高度
this.totalNavHeight = this.statusBarHeight + this.navBarHeight
// 获取屏幕宽度用于计算swiper高度
this.screenWidth = systemInfo.screenWidth
},
methods: {
handleBannerClick(index) {
const item = this.bannerList[index]
console.log('🚀 ~ handleBannerClick ~ item:', item)
if (item.linkUrl) {
if (item.linkUrl.startsWith('http')) {
uni.navigateTo({
url: `/pages/web/web?loadUrl=${encodeURIComponent(item.linkUrl)}`,
})
} else {
uni.navigateTo({
url: item.linkUrl,
})
}
}
},
handleBannerChange(item) {
this.current = item.current
},
async initChannels() {
try {
const certificateChannelsList = await this.getRelatedChannels(29)
......@@ -287,7 +350,12 @@ export default {
// /course/v1/courses/nav_menu
this.$request.get('/course/v1/courses/home/config?clientType=6').then(res => {
console.log('🚀 ~ getNavData ~ res:', res)
const { homeGuideList, homeClue } = res
const { homeGuideList, homeClue, banner } = res
this.bannerList = banner.map(item => ({
url: item.imageUrl,
type: 'image',
linkUrl: item.linkUrl,
}))
this.navData = homeGuideList
this.clueData = homeClue[0] || {}
})
......@@ -441,19 +509,11 @@ export default {
}
}
.vip-tips {
.banner {
margin: 23px 12px 4px 12px;
border-radius: 12px;
background-color: #fff6ef;
// border: 1px solid #ffffff;
display: flex;
align-items: center;
height: auto;
.vip-tips-img {
width: 100%;
height: 100%;
border-radius: 12px;
}
min-height: 70px; /* 默认最小高度,实际高度由swiperHeight计算属性控制 */
}
.career-section {
......
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