Browse Source

修复广告图片预览功能,删除商品图片点击放大,实现广告图片单击预览

pull/2/head
徐飞洋 2 months ago
parent
commit
76f6f66b6c
  1. BIN
      images/1.jpg
  2. BIN
      images/2.jpg
  3. BIN
      images/3.jpg
  4. BIN
      images/4.jpg
  5. 40
      pages/index/index.js
  6. 29
      pages/index/index.wxml
  7. 6
      pages/index/index.wxss
  8. 5
      pages/profile/index.wxml

BIN
images/1.jpg

Binary file not shown.

Before

Width:  |  Height:  |  Size: 125 KiB

After

Width:  |  Height:  |  Size: 118 KiB

BIN
images/2.jpg

Binary file not shown.

Before

Width:  |  Height:  |  Size: 108 KiB

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
images/3.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
images/4.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

40
pages/index/index.js

@ -632,22 +632,34 @@ Page({
// 广告点击事件处理 // 广告点击事件处理
onAdClick: function(e) { onAdClick: function(e) {
const adData = e.currentTarget.dataset.ad const adSlot = e.currentTarget.dataset.ad;
console.log('广告被点击, 广告ID:', adData ? adData.id : 'unknown') let imageSrc = e.currentTarget.dataset.src;
if (adData && adData.adType) { // 如果没有从data-src获取到,尝试从图片元素直接获取src
if (!imageSrc) {
imageSrc = e.currentTarget.src;
}
console.log('广告被点击, 广告位:', adSlot);
console.log('广告图片路径:', imageSrc);
// 直接预览广告图片(单击触发)
const validImageUrls = [imageSrc];
if (validImageUrls.length > 0 && validImageUrls[0]) {
this.setData({
previewImageUrls: validImageUrls,
previewImageIndex: 0,
showImagePreview: true
});
console.log('广告图片预览已打开,图片URL:', validImageUrls[0]);
} else {
console.error('无法获取广告图片路径');
wx.showToast({ wx.showToast({
title: '广告位: ' + adData.adType, title: '图片加载失败',
icon: 'none', icon: 'none'
duration: 2000 });
}) }
if (adData.adType === 'full_card') {
console.log('完整卡片广告被点击')
} else if (adData.adType === 'half_image') {
console.log('半高图片广告被点击')
}
}
}, },
// 加载商品分类列表 // 加载商品分类列表

29
pages/index/index.wxml

@ -157,16 +157,20 @@
<!-- 顶部空白间距 --> <!-- 顶部空白间距 -->
<view style="height: 20rpx;"></view> <view style="height: 20rpx;"></view>
<!-- 广告位1:完整卡片广告 (始终显示) --> <!-- 广告位1:轮播图1 -->
<view class="waterfall-item"> <view class="waterfall-item">
<view class="ad-card ad-full-card"> <view class="ad-card ad-full-card">
<image <swiper class="ad-swiper" autoplay="true" interval="3000" duration="500" circular="true">
class="ad-image" <swiper-item>
src="/images/1.jpg" <image class="ad-image" src="/images/1.jpg" mode="aspectFill" bindtap="onAdClick" data-ad="ad_slot_1_1" data-src="/images/1.jpg"></image>
mode="aspectFill" </swiper-item>
bindtap="onAdClick" <swiper-item>
data-ad="ad_slot_1" <image class="ad-image" src="/images/2.jpg" mode="aspectFill" bindtap="onAdClick" data-ad="ad_slot_1_2" data-src="/images/2.jpg"></image>
></image> </swiper-item>
<swiper-item>
<image class="ad-image" src="/images/3.jpg" mode="aspectFill" bindtap="onAdClick" data-ad="ad_slot_1_3" data-src="/images/3.jpg"></image>
</swiper-item>
</swiper>
</view> </view>
</view> </view>
@ -190,9 +194,6 @@
bindload="onImageLoad" bindload="onImageLoad"
data-index="{{index}}" data-index="{{index}}"
data-column="left" data-column="left"
bindtap="previewImage"
data-item="{{item}}"
data-index="0"
></image> ></image>
<view wx:if="{{item.supplyStatus === '预售'}}" class="promo-tag presale">预售</view> <view wx:if="{{item.supplyStatus === '预售'}}" class="promo-tag presale">预售</view>
<view wx:if="{{item.supplyStatus === '现货'}}" class="promo-tag in-stock">现货</view> <view wx:if="{{item.supplyStatus === '现货'}}" class="promo-tag in-stock">现货</view>
@ -224,10 +225,11 @@
<view class="ad-card ad-half-image"> <view class="ad-card ad-half-image">
<image <image
class="ad-image-half" class="ad-image-half"
src="/images/2.jpg" src="/images/4.jpg"
mode="aspectFill" mode="aspectFill"
bindtap="onAdClick" bindtap="onAdClick"
data-ad="ad_slot_2" data-ad="ad_slot_2"
data-src="/images/4.jpg"
></image> ></image>
</view> </view>
</view> </view>
@ -251,9 +253,6 @@
bindload="onImageLoad" bindload="onImageLoad"
data-index="{{index}}" data-index="{{index}}"
data-column="right" data-column="right"
bindtap="previewImage"
data-item="{{item}}"
data-index="0"
></image> ></image>
<view wx:if="{{item.supplyStatus === '预售'}}" class="promo-tag presale">预售</view> <view wx:if="{{item.supplyStatus === '预售'}}" class="promo-tag presale">预售</view>
<view wx:if="{{item.supplyStatus === '现货'}}" class="promo-tag in-stock">现货</view> <view wx:if="{{item.supplyStatus === '现货'}}" class="promo-tag in-stock">现货</view>

6
pages/index/index.wxss

@ -1492,6 +1492,12 @@ wx-button:not([size=mini]) {
z-index: 1001; z-index: 1001;
} }
/* 轮播广告样式 */
.ad-swiper {
width: 100%;
height: 100%;
}
.ad-image { .ad-image {
width: 100%; width: 100%;
height: 350rpx; height: 350rpx;

5
pages/profile/index.wxml

@ -7,7 +7,6 @@
></image> ></image>
<view> <view>
<view style="font-size: 32rpx; font-weight: bold;">{{userInfo.phoneNumber|| '未登录'}}</view> <view style="font-size: 32rpx; font-weight: bold;">{{userInfo.phoneNumber|| '未登录'}}</view>
<view style="font-size: 26rpx; color: #666;">当前身份: {{userType || '未设置'}}</view>
<view style="font-size: 26rpx; color: #666;"> <view style="font-size: 26rpx; color: #666;">
</view> </view>
@ -24,7 +23,7 @@
type="primary" type="primary"
style="margin: 20rpx 0;" style="margin: 20rpx 0;"
> >
授权手机号 授权登录
</button> </button>
</view> </view>
@ -37,7 +36,7 @@
<!-- 淘宝样式的收藏按钮 --> <!-- 淘宝样式的收藏按钮 -->
<view style="background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%); color: white; padding: 12rpx 24rpx; border-radius: 24rpx; margin: 10rpx; font-size: 26rpx; font-weight: bold; box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3); display: flex; align-items: center; cursor: pointer;" bindtap="goToFavorites"> <view style="background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%); color: white; padding: 12rpx 24rpx; border-radius: 24rpx; margin: 10rpx; font-size: 26rpx; font-weight: bold; box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3); display: flex; align-items: center; cursor: pointer;" bindtap="goToFavorites">
<text style="margin-right: 8rpx;">⭐</text> <text style="margin-right: 8rpx;">⭐</text>
<text>收藏</text> <text>收藏</text>
</view> </view>
</view> </view>
</view> </view>

Loading…
Cancel
Save