|
|
@@ -18,13 +18,15 @@
|
|
|
</view>
|
|
|
<!-- 主横幅:两图横向 -->
|
|
|
<view class="banner-row-wrap" v-if="showBannerBlock">
|
|
|
- <view class="banner-row banner-skeleton" v-if="showBannerSkeleton">
|
|
|
- <view class="banner-sk-item" v-for="i in 2" :key="'banner-sk-' + i"></view>
|
|
|
- </view>
|
|
|
- <view class="banner-row" v-else-if="showBannerContent">
|
|
|
- <view class="banner-item" v-for="(item, i) in advList" :key="i" @tap="handleAdvClick(item)">
|
|
|
- <image class="banner-img" :src="imageUrl[i]" mode="widthFix"></image>
|
|
|
- </view>
|
|
|
+ <view class="banner-row" :class="{ 'banner-skeleton': showBannerSkeleton }">
|
|
|
+ <template v-if="showBannerContent">
|
|
|
+ <view class="banner-item" v-for="(item, i) in bannerList" :key="item.slotKey" @tap="handleAdvClick(item.course)">
|
|
|
+ <image class="banner-img" :src="item.image" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="showBannerSkeleton">
|
|
|
+ <view class="banner-sk-item" v-for="i in 2" :key="'banner-sk-' + i"></view>
|
|
|
+ </template>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
@@ -80,7 +82,7 @@
|
|
|
import zModal from '@/components/z-modal/z-modal.vue'
|
|
|
import { getMenu, getIndexData, getCartCount } from '@/api/index'
|
|
|
import { getStoreConfig } from '@/api/common'
|
|
|
-import { getHomeInit, getHomeRecommend, getHomeGoods,listPublicCourse } from '@/api/home.js'
|
|
|
+import { getHomeInit, getHomeRecommend, getHomeGoods, listPublicCourse, getHisStoreConfig } from '@/api/home.js'
|
|
|
import HotProduct from './components/HotProduct.vue'
|
|
|
//import TuiProduct from '@/components/tuiProduct.vue'
|
|
|
import SearchBar from './components/SearchBar.vue'
|
|
|
@@ -132,8 +134,8 @@ export default {
|
|
|
goodsPageNum: 1,
|
|
|
goodsRequestId: 0,
|
|
|
cartCount: 0,
|
|
|
- advList: [],
|
|
|
- bannerLoading: true,
|
|
|
+ bannerList: [],
|
|
|
+ bannerLoading: false,
|
|
|
top: 0,
|
|
|
statusBarHeight: (uni.getStorageSync('menuInfo') && uni.getStorageSync('menuInfo').statusBarHeight) || 20,
|
|
|
userinfoa: [],
|
|
|
@@ -154,10 +156,10 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
showBannerSkeleton() {
|
|
|
- return this.bannerLoading && !(this.advList && this.advList.length)
|
|
|
+ return this.bannerLoading && !(this.bannerList && this.bannerList.length)
|
|
|
},
|
|
|
showBannerContent() {
|
|
|
- return !!(this.advList && this.advList.length)
|
|
|
+ return !!(this.bannerList && this.bannerList.length)
|
|
|
},
|
|
|
showBannerBlock() {
|
|
|
return this.showBannerSkeleton || this.showBannerContent
|
|
|
@@ -186,6 +188,7 @@ export default {
|
|
|
uni.setStorageSync('userCode', obj.userCode)
|
|
|
if (this.utils.checkLoginState()) this.getUserInfo()
|
|
|
}
|
|
|
+ this.loadBannerConfig()
|
|
|
},
|
|
|
onUnload() {
|
|
|
uni.$emit('stop')
|
|
|
@@ -200,7 +203,6 @@ export default {
|
|
|
this.getHomeInit()
|
|
|
this.getHomeRecommend()
|
|
|
this.getMenu()
|
|
|
- this.getIndexData()
|
|
|
if (uni.getStorageSync('AppToken')) {
|
|
|
this.getUserInfo()
|
|
|
} else {
|
|
|
@@ -388,22 +390,59 @@ export default {
|
|
|
if (res.code == 200) this.menus = res.data || []
|
|
|
})
|
|
|
},
|
|
|
- getIndexData() {
|
|
|
- if (!this.advList.length) this.bannerLoading = true
|
|
|
- const data = {
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 2,
|
|
|
- yxxTag: 3,
|
|
|
- recommendSlot: 2,
|
|
|
- }
|
|
|
- listPublicCourse(data).then(res => {
|
|
|
- if (res.code == 200) {
|
|
|
- this.advList = res.data.list || []
|
|
|
- } else {
|
|
|
- uni.showToast({ icon: 'none', title: '请求失败' })
|
|
|
+ getBannerImage(item) {
|
|
|
+ const images = this.imageUrl || []
|
|
|
+ if (item && item.dictLabel === '原乡行') return images[1] || ''
|
|
|
+ return images[0] || ''
|
|
|
+ },
|
|
|
+ loadBannerConfig() {
|
|
|
+ if (this.bannerList.length) return
|
|
|
+ getHisStoreConfig({ name: 'moduleShow' }).then(res => {
|
|
|
+ if (res.code != 200) return
|
|
|
+ const selectId = res.courseChannels || []
|
|
|
+ if (!res.moduleOneShow && !res.moduleTwoShow) {
|
|
|
+ this.bannerLoading = false
|
|
|
+ return
|
|
|
}
|
|
|
- }).catch(() => {}).finally(() => {
|
|
|
- this.bannerLoading = false
|
|
|
+ const tasks = []
|
|
|
+ if (res.moduleOneShow && selectId[0]) tasks.push({ channel: selectId[0], slotKey: '0' })
|
|
|
+ if (res.moduleTwoShow && selectId[1]) tasks.push({ channel: selectId[1], slotKey: '1' })
|
|
|
+ tasks.sort((a, b) => {
|
|
|
+ const aBack = a.channel.dictLabel === '原乡行' ? 1 : 0
|
|
|
+ const bBack = b.channel.dictLabel === '原乡行' ? 1 : 0
|
|
|
+ return aBack - bBack
|
|
|
+ })
|
|
|
+ this.bannerLoading = true
|
|
|
+ const newList = []
|
|
|
+ const loadNext = (i) => {
|
|
|
+ if (i >= tasks.length) {
|
|
|
+ this.bannerList = newList
|
|
|
+ this.bannerLoading = false
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const task = tasks[i]
|
|
|
+ listPublicCourse({
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 1,
|
|
|
+ yxxTag: task.channel.dictValue,
|
|
|
+ recommendSlot: 2
|
|
|
+ }).then(r => {
|
|
|
+ newList.push({
|
|
|
+ slotKey: task.slotKey,
|
|
|
+ image: this.getBannerImage(task.channel),
|
|
|
+ course: r.code == 200 && r.data && r.data.list ? r.data.list[0] : null
|
|
|
+ })
|
|
|
+ loadNext(i + 1)
|
|
|
+ }).catch(() => {
|
|
|
+ newList.push({
|
|
|
+ slotKey: task.slotKey,
|
|
|
+ image: this.getBannerImage(task.channel),
|
|
|
+ course: null
|
|
|
+ })
|
|
|
+ loadNext(i + 1)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ loadNext(0)
|
|
|
})
|
|
|
},
|
|
|
getUserInfo() {
|
|
|
@@ -462,6 +501,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
handleAdvClick(item) {
|
|
|
+ // console.log('item',item)
|
|
|
if (item && item.courseId) {
|
|
|
uni.navigateTo({ url: '/pages_index/courseDetail?courseId=' + item.courseId})
|
|
|
return;
|
|
|
@@ -505,16 +545,21 @@ export default {
|
|
|
.banner-row {
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
gap: 20rpx;
|
|
|
- padding:0 20rpx 24rpx;
|
|
|
+ padding: 0 20rpx 24rpx;
|
|
|
}
|
|
|
-.banner-skeleton {
|
|
|
- min-height: 220rpx;
|
|
|
+.banner-skeleton .banner-sk-item::after {
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ padding-bottom: 63.8%;
|
|
|
}
|
|
|
.banner-sk-item {
|
|
|
flex: 1;
|
|
|
- height: 220rpx;
|
|
|
+ min-width: 0;
|
|
|
border-radius: 16rpx;
|
|
|
+ overflow: hidden;
|
|
|
background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
|
|
|
background-size: 200% 100%;
|
|
|
animation: banner-shimmer 1.2s ease-in-out infinite;
|
|
|
@@ -525,10 +570,13 @@ export default {
|
|
|
}
|
|
|
.banner-item {
|
|
|
flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
.banner-img {
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
+ display: block;
|
|
|
}
|
|
|
.bg {
|
|
|
width: 100%;
|