wangfukang 3 weeks ago
parent
commit
f5379b17ef
  1. 218
      pages/index/index.vue

218
pages/index/index.vue

@ -150,56 +150,34 @@
</view>
<view class="seckill-entry-btn"></view>
</view>
<view class="group-flat-row">
<view class="flat-card" v-if="item.position == 'home_center_left_top' "
v-for="(item,index) in mallAds" :key="index" @tap="goAdPage(item)">
<view class="flat-card-img">
<img :src="item.adDisplayImage" alt="">
<view class="flat-card-tag">🔥 <text class="flat-card-origin-price">{{item.productList[0].originalPrice}}</text></view>
</view>
<view class="flat-card-name">{{item.title}}</view>
<view class="flat-card-price">{{item.productList[0].groupPrice}}</view>
<view class="flat-card-foot">
<text>{{item.productList[0].groupMembers}}人团</text>
<view class="flat-card-btn">去拼</view>
</view>
</view>
<view class="flat-card" v-if="item.position == 'home_center_left_bottom' "
v-for="(item,index) in mallAds" :key="index" @tap="goAdPage(item)">
<view class="flat-card-img">
<img :src="item.adDisplayImage" alt="">
<view class="flat-card-tag">🔥 <text class="flat-card-origin-price">{{item.productList[0].originalPrice}}</text></view>
</view>
<view class="flat-card-name">{{item.title}}</view>
<view class="flat-card-price">{{item.productList[0].groupPrice}}</view>
<view class="flat-card-foot">
<text>{{item.productList[0].groupMembers}}人团</text>
<view class="flat-card-btn">去拼</view>
</view>
</view>
<view class="flat-card" v-if="item.position == 'home_center_right_top' "
v-for="(item,index) in mallAds" :key="index" @tap="goAdPage(item)">
<view class="flat-card-img">
<img :src="item.adDisplayImage" alt="">
<view class="flat-card-tag">🔥 <text class="flat-card-origin-price">{{item.productList[0].originalPrice}}</text></view>
</view>
<view class="flat-card-name">{{item.title}}</view>
<view class="flat-card-price">{{item.productList[0].groupPrice}}</view>
<view class="flat-card-foot">
<text>{{item.productList[0].groupMembers}}人团</text>
<view class="flat-card-btn">去拼</view>
<swiper v-if="homeCenterAds.length > 4" class="group-flat-row group-flat-row--swiper"
circular :autoplay="true" :interval="2600" :duration="500" :display-multiple-items="4"
:indicator-dots="false">
<swiper-item class="flat-card-swiper-item" v-for="(item,index) in homeCenterAds" :key="index">
<view class="flat-card" @tap="goAdPage(item)">
<view class="flat-card-img">
<img :src="item.adDisplayImage" alt="">
<view class="flat-card-tag">🔥 <text class="flat-card-origin-price">{{item.productList && item.productList[0] ? item.productList[0].originalPrice : ''}}</text></view>
</view>
<view class="flat-card-name">{{item.title}}</view>
<view class="flat-card-price">{{item.productList && item.productList[0] ? item.productList[0].groupPrice : ''}}</view>
<view class="flat-card-foot">
<text>{{item.productList && item.productList[0] ? item.productList[0].groupMembers : ''}}人团</text>
<view class="flat-card-btn">去拼</view>
</view>
</view>
</view>
<view class="flat-card" v-if="item.position == 'home_center_right_bottom' "
v-for="(item,index) in mallAds" :key="index" @tap="goAdPage(item)">
</swiper-item>
</swiper>
<view v-else class="group-flat-row">
<view class="flat-card" v-for="(item,index) in homeCenterAds" :key="index" @tap="goAdPage(item)">
<view class="flat-card-img">
<img :src="item.adDisplayImage" alt="">
<view class="flat-card-tag">🔥 <text class="flat-card-origin-price">{{item.productList[0].originalPrice}}</text></view>
<view class="flat-card-tag">🔥 <text class="flat-card-origin-price">{{item.productList && item.productList[0] ? item.productList[0].originalPrice : ''}}</text></view>
</view>
<view class="flat-card-name">{{item.title}}</view>
<view class="flat-card-price">{{item.productList[0].groupPrice}}</view>
<view class="flat-card-price">{{item.productList && item.productList[0] ? item.productList[0].groupPrice : ''}}</view>
<view class="flat-card-foot">
<text>{{item.productList[0].groupMembers}}人团</text>
<text>{{item.productList && item.productList[0] ? item.productList[0].groupMembers : ''}}人团</text>
<view class="flat-card-btn">去拼</view>
</view>
</view>
@ -495,6 +473,14 @@
</scroll-view>
</view>
</uni-popup>
<uni-popup ref="homePopupAdPopup" class="home-popup-layer home-ad-popup-layer" type="center" :is-mask-click="true" background-color="transparent">
<view class="home-ad-popup-card">
<view class="home-ad-popup-glow home-ad-popup-glow-a"></view>
<view class="home-ad-popup-glow home-ad-popup-glow-b"></view>
<view class="home-ad-popup-close" @tap.stop="closeHomePopupAd">x</view>
<image class="home-ad-popup-image" :src="homePopupAd.adDisplayImage || homePopupAd.adImage" mode="aspectFit" @tap.stop="noop"></image>
</view>
</uni-popup>
<uni-popup ref="productPopup" class="home-popup-layer" background-color="transparent">
<view class="product-popup-content">
<view class="product-popup-header">
@ -549,6 +535,7 @@
import { resolveHomeShareTarget, normalizeShareTargetPath } from '@/utils/sharePath.js'
const HOME_AD_IMAGE_CACHE_KEY = 'home_ad_image_cache_v1'
const HOME_POPUP_AD_SHOWN_KEY_PREFIX = 'home_popup_ad_shown_v1'
const HOME_AD_IMAGE_CACHE_TTL = 30 * 24 * 60 * 60 * 1000
const HOME_AD_IMAGE_CACHE_LIMIT = 40
const homeAdImageDownloading = {}
@ -678,6 +665,7 @@
indicatorDots: false,
autoplay: true,
mallAds: [],
homePopupAd: {},
deliveryItem: [],
rejectOrderSubmittingMap: {},
interval: 4000,
@ -723,7 +711,7 @@
pageSize:10,
getAreaId: '',
putAreaId: '',
paths: ['home_top', 'home_center_left_top', 'home_center_left_bottom', 'home_center_right_top',
paths: ['home_top', 'home_center', 'home_center_left_top', 'home_center_left_bottom', 'home_center_right_top',
'home_center_right_bottom'
],
order: '',
@ -794,6 +782,16 @@
return title.indexOf(keyword) > -1
})
},
homeCenterAds() {
return (this.mallAds || [])
.filter(item => item && item.position != 'home_top' && item.position != 'home_popup')
.slice()
.sort((a, b) => {
const aSort = a.sortOrder === undefined || a.sortOrder === null ? Number.MAX_SAFE_INTEGER : Number(a.sortOrder)
const bSort = b.sortOrder === undefined || b.sortOrder === null ? Number.MAX_SAFE_INTEGER : Number(b.sortOrder)
return aSort - bSort
})
},
planetHasReminder() {
return !!(this.homeReminders && this.homeReminders.planet)
},
@ -1493,6 +1491,45 @@
}
return normalized
},
getTodayKey() {
const now = new Date()
const month = String(now.getMonth() + 1).padStart(2, '0')
const day = String(now.getDate()).padStart(2, '0')
return now.getFullYear() + '-' + month + '-' + day
},
getHomePopupAdShownKey() {
const userId = uni.getStorageSync('id') || 'guest'
return HOME_POPUP_AD_SHOWN_KEY_PREFIX + '_' + userId + '_' + this.getTodayKey()
},
isHomePopupAdShownToday() {
return !!uni.getStorageSync(this.getHomePopupAdShownKey())
},
markHomePopupAdShownToday() {
uni.setStorageSync(this.getHomePopupAdShownKey(), true)
},
handleHomePopupAd(ad) {
if (!ad || !ad.adImage) return
const imageUrl = this.normalizeAdImageUrl(ad.adImage)
if (!imageUrl || this.isHomePopupAdShownToday()) return
this.homePopupAd = {
...ad,
adImage: imageUrl,
adDisplayImage: imageUrl
}
this.markHomePopupAdShownToday()
this.$nextTick(() => {
setTimeout(() => {
if (this.$refs.homePopupAdPopup && this.$refs.homePopupAdPopup.open) {
this.$refs.homePopupAdPopup.open()
}
}, 180)
})
},
closeHomePopupAd() {
if (this.$refs.homePopupAdPopup && this.$refs.homePopupAdPopup.close) {
this.$refs.homePopupAdPopup.close()
}
},
getHomeAdImageCache() {
const cache = uni.getStorageSync(HOME_AD_IMAGE_CACHE_KEY)
return cache && typeof cache === 'object' ? cache : {}
@ -1724,6 +1761,7 @@
that.loadStatus = 'nomore';
if (res.code == 200) {
that.homeReminders = res.result.homeReminders || {}
that.handleHomePopupAd(res.result.homePopupAd)
that.mallAds = res.result.mallAds || []
that.applyCachedAdImages(that.mallAds)
for(let i=0;i<that.mallAds.length;i++){
@ -2121,6 +2159,78 @@
z-index: 1200 !important;
}
.home-ad-popup-layer {
z-index: 1300 !important;
}
.home-ad-popup-card {
position: relative;
box-sizing: border-box;
width: 660rpx;
max-width: 88vw;
padding: 22rpx;
border: 1rpx solid rgba(255, 255, 255, 0.82);
border-radius: 38rpx;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(238, 255, 248, 0.94)),
radial-gradient(circle at 18% 10%, rgba(255, 231, 163, 0.46), rgba(255, 231, 163, 0) 260rpx);
box-shadow: 0 30rpx 90rpx rgba(0, 34, 29, 0.24);
overflow: visible;
}
.home-ad-popup-glow {
position: absolute;
border-radius: 999rpx;
filter: blur(6rpx);
pointer-events: none;
}
.home-ad-popup-glow-a {
top: -42rpx;
left: 40rpx;
width: 150rpx;
height: 150rpx;
background: rgba(166, 255, 234, 0.46);
}
.home-ad-popup-glow-b {
right: 18rpx;
bottom: -46rpx;
width: 180rpx;
height: 180rpx;
background: rgba(255, 218, 142, 0.42);
}
.home-ad-popup-close {
position: absolute;
top: -24rpx;
right: -18rpx;
z-index: 3;
width: 58rpx;
height: 58rpx;
border: 4rpx solid rgba(255, 255, 255, 0.96);
border-radius: 50%;
background: rgba(17, 46, 41, 0.88);
box-shadow: 0 12rpx 30rpx rgba(0, 0, 0, 0.18);
color: #fff;
font-size: 34rpx;
font-weight: 700;
line-height: 50rpx;
text-align: center;
}
.home-ad-popup-image {
position: relative;
z-index: 2;
display: block;
width: 616rpx;
max-width: calc(88vw - 44rpx);
height: 760rpx;
max-height: 70vh;
border-radius: 28rpx;
background: rgba(245, 250, 247, 0.9);
}
.swiper {
width: 100%;
height: 440rpx;
@ -3292,15 +3402,29 @@
position: absolute;
left: 8rpx;
right: 8rpx;
top: 84rpx;
bottom: 20rpx;
top: 76rpx;
bottom: 6rpx;
display: flex;
z-index: 3;
}
.group-flat-row--swiper {
display: block;
height: 310rpx;
bottom: auto;
}
.flat-card-swiper-item {
display: flex;
height: 318rpx;
margin-top: 10rpx;
box-sizing: border-box;
}
.flat-card {
flex: 1;
min-width: 0;
height: 95%;
margin: 0 6rpx;
padding: 12rpx 12rpx 16rpx;
box-sizing: border-box;

Loading…
Cancel
Save