Skip to content

飞
飞鹤小程序
Commit 51549197 authored by spc's avatar spc
Browse files
Options

fixed home and brand

parent c57e08d0
Show whitespace changes
Inline Side-by-side
Showing with 2180 additions and 2003 deletions
mock/home.json
View file @ 51549197
......@@ -668,5 +668,17 @@
"etConUrl2": "homepage/et_con2.png",
"etConUrl3": "homepage/et_con3.png",
"etConUrl1": "homepage/et_con11.png"
},
"floatIcon": {
"imageUrl": "homepage/btnclose.png",
"videoUrl": "homepage/video3.mp4",
"link": {
"extra": {
"envVersion": "release",
"appId": "wx4205ec55b793245e"
},
"type": 2,
"url": "subPackages/xmhMainProcess/member/index?entrySource=xmh_wechatmp_points_recgoodsbot"
}
}
}
\ No newline at end of file
views/Brand.vue
View file @ 51549197
......@@ -41,7 +41,7 @@
</view>
</view>
</view>
<view class="videoposterbox">
<view class="videoposterbox" v-if="video1Channel.videoUrl">
<video v-if="video1Channel.videoUrl" ref="brandVideo1Ref" id="brandVideo1" class="videoposter"
:src="$baseUrl + video1Channel.videoUrl" :autoplay="false" :data-log="{
xcxClick: '品牌故事-次屏页面点击',
......@@ -61,8 +61,11 @@
}" @tap="openChannel(video1Channel, $event)" class="videoposter" :src="$baseUrl + video1Channel.posterUrl">
</image>
<view class="videoposterboxtitle">{{ video1Channel.title || "" }}</view>
</view>
<view id="secondScreen" class="productcontai">
<view id="secondScreen" class="productcontai"
v-if="productTabList.length > 0 && productInfoList.length > 0">
<text class="maintitle">{{ erqiPeizhi.title1 }}</text>
<scroll-view class="listbox" scroll-x="true" show-scrollbar="false"
:scroll-into-view="'tab-' + channelTabIndex" :scroll-with-animation="true">
......@@ -140,7 +143,7 @@
</view>
<view class="videoposterbox">
<view class="videoposterbox" v-if="video2Channel.videoUrl">
<video v-if="video2Channel.videoUrl" ref="brandVideo2Ref" id="brandVideo2" class="videoposter"
:src="$baseUrl + video2Channel.videoUrl" :autoplay="false"
:poster="video2Channel.posterUrl ? $baseUrl + video2Channel.posterUrl : ''" object-fit="cover"
......@@ -152,15 +155,18 @@
componentContent: video2Channel.title || ''
}" @tap="openChannel(video2Channel, $event)" :src="$baseUrl + video2Channel.posterUrl">
</image>
<view class="videoposterboxtitle">{{ video2Channel.title || "" }}</view>
</view>
<view id="thirdScreen" class="ipbox"
<view id="thirdScreen" class="ipbox" v-if="erqiPeizhi.appId1 && erqiPeizhi.appId2"
:style="{ background: `url(${$baseUrl}brandpage/hexiaofeiBg.png) no-repeat center/contain` }">
<!-- <store-product appid="wx1ad0903b95889ea1" product-id="10000239570622" custom-content="true"> -->
<image :data-log="{
xcxClick: '品牌故事-三屏页面点击',
pageName: '品牌故事-三屏页面',
buttonName: `全家形象`
}" class="iphexiaofei" :src="erqiPeizhi.iphexiaofeiUrl"></image>
}" class="iphexiaofei" @tap="jumpLink(erqiPeizhi.link, erqiPeizhi.videoUrl, $event)"
:src="erqiPeizhi.iphexiaofeiUrl">
</image>
<!-- </store-product> -->
<view class="ipcard">
<view class="title">
......@@ -172,7 +178,8 @@
</view>
<view class="ipflex">
<view class="ipbg ip1" id="ip1" @tap="ipTapEvent(1, $event)">
<store-product appid="wx1ad0903b95889ea1" product-id="10000239570622" custom-content="true">
<store-product appid={erqiPeizhi.appId1} product-id={erqiPeizhi.productId1}
custom-content="true">
<image :data-log="{
xcxClick: '品牌故事-三屏页面点击',
pageName: '品牌故事-三屏页面',
......@@ -184,7 +191,7 @@
<view class="ipright">
<view class="ipbg ip2" id="ip2" @tap="ipTapEvent(2, $event)">
<store-product appid="wx1ad0903b95889ea1" product-id="10000239356280"
<store-product appid={erqiPeizhi.appId2} product-id={erqiPeizhi.productId2}
custom-content="true">
<image :data-log="{
xcxClick: '品牌故事-三屏页面点击',
......@@ -224,7 +231,8 @@
<!-- <text class="subtitle">关注祖国下一代的营养、教育和陪伴</text> -->
<view class="channelscroll">
<view class="box">
<view class="infobox" :key="index" v-for="(infoItem, index) in esgInfoList" :id="'esg' + (index + 1)"
<view class="infobox" :key="index" v-for="(infoItem, index) in esgInfoList"
:id="'esg' + (index + 1)"
:style="{ background: `url(${$baseUrl}brandpage/esgItemBg.png) no-repeat center/505rpx 638rpx` }"
:data-log="{
xcxClick: `品牌故事-三屏页面点击`,
......@@ -372,7 +380,7 @@ export default {
video2Channel: {},
currentPlayingVideo: null, // 当前正在播放的视频标识
videoContexts: {}, // 存储视频上下文，使用id作为key
ipExStr:['鹤小飞商品', '鹤小飞商品', '鹤小飞', '鹤小飞'],
ipExStr: ['鹤小飞商品', '鹤小飞商品', '鹤小飞', '鹤小飞'],
}
},
mounted() {
......@@ -534,10 +542,10 @@ export default {
md.sensorComponentLogTake(evt.currentTarget.dataset.comlog);
}
}
const { productId, skuId, contentImg, contentImgLen, shareTitle, shareImg, title } = item;
const { productId, skuId, contentImg, contentImgLen, shareTitle, shareImg, title, link } = item;
const tabName = this.productTabList[this.channelTabIndex];
if(productId && skuId){
if (productId && skuId) {
const url = `subPackages/shopMainProcess/product/index?productId=${productId}&skuId=${skuId}`;
const type = JumpType.MINI;
const extra = {
......@@ -550,12 +558,14 @@ export default {
jump({
type: type,
url: url,
extra:extra
})
}else{
uni.navigateTo({
url: "/pages/product/product?productId=" + productId + "&skuId=" + skuId + "&contentImg=" + contentImg + "&contentImgLen=" + contentImgLen + "&shareTitle=" + shareTitle + "&shareImg=" + shareImg + "&tabName=" + tabName + "&title=" + title
extra: extra
})
} else {
jump(link)
// console.warn("/pages/product/product?productId=" + productId + "&skuId=" + skuId + "&contentImg=" + contentImg + "&contentImgLen=" + contentImgLen + "&shareTitle=" + shareTitle + "&shareImg=" + shareImg + "&tabName=" + tabName + "&title=" + title)
// uni.navigateTo({
// url: "/pages/product/product?productId=" + productId + "&skuId=" + skuId + "&contentImg=" + contentImg + "&contentImgLen=" + contentImgLen + "&shareTitle=" + shareTitle + "&shareImg=" + shareImg + "&tabName=" + tabName + "&title=" + title
// })
}
},
channelTabHandler(_index, evt) {
......@@ -947,8 +957,28 @@ export default {
object-fit: cover;
}
.videoposterboxtitle {
font-size: 28rpx;
color: #ffffff;
font-weight: 500;
margin-left: 20rpx;
line-height: 1.4;
margin-top: -56rpx;
z-index: 2;
position: relative;
// padding: 8rpx 16rpx;
// background-color: rgba(0, 0, 0, 0.5);
border-radius: 8rpx;
width: 476rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.productcontai {
margin-top: 32rpx;
margin-left: 32rpx;
......
views/Home.vue
View file @ 51549197
<template>
<view class="home-container" @scroll="onPageScroll">
<!-- 可拖拽悬浮图片 -->
<view class="floating-image-container" v-if="floatIcon.imageUrl"
:style="{ left: floatIconPosition.left + 'px', top: floatIconPosition.top + 'px' }"
@touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" @tap="onfloatIconClick">
<image class="floating-image" :src="$baseUrl + floatIcon.imageUrl"></image>
</view>
<view class="content">
<swiper id="firstScreen" class="swiper banner" circular :autoplay="autoplay" :interval="interval"
:duration="duration" :indicator-dots="false" @change="onBannerSwiperChange">
......@@ -50,7 +56,7 @@
</view> -->
<!--推荐工具-->
<view class="tools_box">
<view v-if="toolList?.tools?.length > 0" class="tools_box">
<view class="tools_maintitle">{{ toolList.maintitle }}</view>
<view class="tools_subtitle">{{ toolList.subtitle }}</view>
<swiper :vertical="false" :circular="true" class="tool_swiper" :display-multiple-items="1.65"
......@@ -63,10 +69,10 @@
open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" class="sq_btn"></button> -->
<image class="tool_bg" :src="$baseUrl + item.icon" @tap="handleToolClick(item)">
</image>
<!-- <image class="tool_icon" :src="$baseUrl + item.icon"></image>
<image class="tool_jt" :src="$baseUrl + toolList.jtIcon"></image>
<!-- <image class="tool_icon" :src="$baseUrl + item.icon"></image> -->
<!-- <image class="tool_jt" :src="$baseUrl + toolList.jtIcon"></image> -->
<view class="tool_title">{{ item.title }}</view>
<view class="tool_context">{{ item.context }}</view> -->
<view class="tool_context">{{ item.context }}</view>
</view>
</swiper-item>
</swiper>
......@@ -177,7 +183,7 @@
</view> -->
<view id="childrenInfoList" class="channelbox">
<view v-if="childrenInfoList.length > 0" id="childrenInfoList" class="channelbox">
<text class="maintitle">{{ childrenInfoListMianTitle }}</text>
<view class="subtitle_box">
<text class="subtitle">从专业到实用，一站式解决你的育儿难题</text>
......@@ -329,62 +335,62 @@
<script>
import {
import {
jump,
JumpType
} from '../utils';
import {
} from '../utils';
import {
useHomeStore
} from '../stores/home';
import {
} from '../stores/home';
import {
fetchHomeJSON
} from '../api/home';
import {
} from '../api/home';
import {
useUserStore
} from '../stores/user';
import RegisterLayer from "../components/RegisterLayer.vue";
import md from '../md';
import ExposureTracker from '../utils/exposure';
import {
} from '../stores/user';
import RegisterLayer from "../components/RegisterLayer.vue";
import md from '../md';
import ExposureTracker from '../utils/exposure';
import {
getHealthField
} from "@/api/common";
} from "@/api/common";
// const homeStore = useHomeStore();
const userStore = useUserStore();
// const homeStore = useHomeStore();
const userStore = useUserStore();
// 定义需要曝光检测的元素配置
const EXPOSURE_CONFIGS = [{
// 定义需要曝光检测的元素配置
const EXPOSURE_CONFIGS = [{
id: 'firstScreen',
logParams: {
xcxPage: '首页-首屏页面浏览',
pageName: '首页-首屏'
}
},
// 可以添加更多需要曝光检测的元素配置
{
},
// 可以添加更多需要曝光检测的元素配置
{
id: 'secondScreen',
logParams: {
xcxPage: '首页-二屏页面浏览',
pageName: '首页-二屏'
}
},
{
},
{
id: 'thirdScreen',
logParams: {
xcxPage: '首页-三屏页面浏览',
pageName: '首页-三屏'
}
},
{
},
{
id: 'fourthScreen',
logParams: {
xcxPage: '首页-四屏页面浏览',
pageName: '首页-四屏'
}
}
];
}
];
export default {
export default {
beforeDestroy() {
if (this.exposureTracker) {
this.exposureTracker.resetAllExposure();
......@@ -398,6 +404,27 @@
data() {
return {
popType: 'bottom',
// 悬浮图片位置配置
floatIconPosition: {
left: 300, // 初始左位置
top: 500 // 初始上位置
},
// 悬浮图片相关配置
floatIcon: {
// imageUrl: 'homepage/btnclose.png',
// link: {
// extra: {
// envVersion: 'release',
// appId: 'wx4205ec55b793245e'
// },
// type: 2,
// url: 'subPackages/xmhMainProcess/member/index?entrySource=xmh_wechatmp_points_recgoodsbot'
// },
// videoUrl: 'homepage/video3.mp4'
},
isDragging: false, // 是否正在拖拽
touchStartX: 0, // 触摸开始X坐标
touchStartY: 0, // 触摸开始Y坐标
statusBarHeight: 38,
showRegisterLayer: false,
swiperList: [],
......@@ -545,6 +572,7 @@
this.channelTabListMianTitle = data.channelTabListMianTitle;
this.popupImageUrl = this.$baseUrl + data.popupImageObj?.imageUrl || '';
this.popupImageObj = data.popupImageObj || {};
this.floatIcon = data.floatIcon || {};
if (this.homeStore.isLogin) {
this.vipCardList[0] = data.vipConfigList.find(item => item.grade === this.homeStore.homeInfo
......@@ -953,7 +981,8 @@
} else {
jump({
type: item.link.type,
url: item.link.url
url: item.link.url,
extra: item.link.extra,
});
}
},
......@@ -1050,18 +1079,110 @@
}, 500);
});
}
},
// 悬浮图片拖拽相关方法
onTouchStart(e) {
this.isDragging = false;
this.touchStartX = e.touches[0].clientX;
this.touchStartY = e.touches[0].clientY;
},
onTouchMove(e) {
// 防止触发页面滚动
e.stopPropagation();
// 判断是否为拖拽操作
const deltaX = Math.abs(e.touches[0].clientX - this.touchStartX);
const deltaY = Math.abs(e.touches[0].clientY - this.touchStartY);
// 如果移动距离超过10px，则认为是拖拽
if (deltaX > 10 || deltaY > 10) {
this.isDragging = true;
// 获取窗口尺寸
const windowWidth = wx.getSystemInfoSync().windowWidth;
const windowHeight = wx.getSystemInfoSync().windowHeight;
// 计算新位置（限制在窗口范围内）
let newLeft = e.touches[0].clientX - 37.5; // 37.5是75的一半
let newTop = e.touches[0].clientY - 37.5;
// 限制在窗口范围内
newLeft = Math.max(0, Math.min(newLeft, windowWidth - 75));
newTop = Math.max(0, Math.min(newTop, windowHeight - 75));
// 更新位置
this.floatIconPosition.left = newLeft;
this.floatIconPosition.top = newTop;
}
},
onTouchEnd() {
// 拖拽结束后的处理
},
// 悬浮图片点击事件
onfloatIconClick() {
// 如果正在拖拽，则不触发点击事件
if (!this.isDragging) {
// 记录点击日志
md.sensorComponentLogTake({
xcxComponentClick: "true",
pageName: "首页",
componentName: "悬浮图片",
componentContent: "点击悬浮图片"
});
if (this.floatIcon.videoUrl) {
// 播放视频
this.currentVideoUrl = this.$baseUrl + this.floatIcon.videoUrl;
this.showVideo = true;
return;
} else if (this.floatIcon.link) {
// 执行跳转
jump(this.floatIcon.link);
}
}
}
}
}
</script>
<style lang="less" scoped>
@import '@/common.less';
@import '@/common.less';
.home-container {
.home-container {
width: 100vw;
overflow-x: hidden;
background-color: white;
position: relative;
// 可拖拽悬浮图片样式
.floating-image-container {
position: fixed;
width: 75px;
height: 75px;
z-index: 999;
touch-action: none; // 禁止默认触摸行为
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
transition: all 0.3s ease;
&:active {
transform: scale(0.95);
}
}
.floating-image {
width: 100%;
height: 100%;
}
.content {
background-color: white;
......@@ -1281,6 +1402,12 @@
color: #000;
font-size: 36rpx;
width: 300rpx;
z-index: 2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
max-width: 7em;
}
......@@ -1291,6 +1418,14 @@
font-size: 24rpx;
color: #999;
width: 300rpx;
z-index: 2;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.5;
max-height: 3em;
}
}
}
......@@ -1953,5 +2088,5 @@
z-index: 10;
}
}
}
}
</style>
\ No newline at end of file
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