Skip to content

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

fixed

parent 1ec1d109
Hide whitespace changes
Inline Side-by-side
Showing with 121 additions and 276 deletions
views/Brand.vue
View file @ 5b1d1b1c
<template>
<view class="brand-container">
<view class="content">
<swiper
id="firstScreen"
class="swiper banner"
:current="swiperIndex"
@animationfinish="intervalChange"
circular
:indicator-dots="indicatorDots"
:autoplay="autoplay"
:interval="interval"
:duration="duration"
:indicator-color="indicatorColor"
:indicator-active-color="indicatoractiveColor"
>
<swiper id="firstScreen" class="swiper banner" :current="swiperIndex" @animationfinish="intervalChange" circular
:indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"
:indicator-color="indicatorColor" :indicator-active-color="indicatoractiveColor">
<swiper-item v-for="(item, index) in swiperList" :key="index">
<view class="swiper-item banneritem">
<image
:data-log="{
xcxClick: '品牌故事-首屏页面点击',
pageName: '品牌故事-首屏页面',
buttonName: `背景图-${swiperNameList[index]}`,
}"
:data-comlog="{
<image :data-log="{
xcxClick: '品牌故事-首屏页面点击',
pageName: '品牌故事-首屏页面',
buttonName: `背景图-${swiperNameList[index]}`,
}" :data-comlog="{
xcxComponentClick: 'true',
pageName: '品牌故事页',
componentName: '品牌故事页banner',
componentContent: item.title || '',
}"
:data-link="item.link"
@tap="jumpLink(item.link, item.videoUrl, $event)"
class="b-img"
:src="item?.url?.indexOf('http') === 0 ? item.url : $baseUrl + item.url"
>
}" :data-link="item.link" @tap="jumpLink(item.link, item.videoUrl, $event)" class="b-img"
:src="item?.url?.indexOf('http') === 0 ? item.url : $baseUrl + item.url">
</image>
</view>
</swiper-item>
......@@ -62,170 +46,106 @@
<view class="swiper-mask">
<image class="swiper-mask-img" :src="$baseUrl + 'homepage/home_format_v2.png'"></image>
</view>
<view
class="videoposterbox"
v-if="video1Channel.videoUrl || (video1Channel.finderUserName && video1Channel.feedId)"
>
<video
v-if="video1Channel.videoUrl"
ref="brandVideo1Ref"
id="brandVideo1"
class="videoposter"
:src="
video1Channel.videoUrl?.indexOf('http') === 0
? video1Channel.videoUrl
: $baseUrl + video1Channel.videoUrl
"
:autoplay="false"
:data-log="{
<view class="videoposterbox"
v-if="video1Channel.videoUrl || (video1Channel.finderUserName && video1Channel.feedId)">
<video v-if="video1Channel.videoUrl" ref="brandVideo1Ref" id="brandVideo1" class="videoposter" :src="video1Channel.videoUrl?.indexOf('http') === 0
? video1Channel.videoUrl
: $baseUrl + video1Channel.videoUrl
" :autoplay="false" :data-log="{
xcxClick: '品牌故事-次屏页面点击',
pageName: '品牌故事-首屏页面',
buttonName: '腰部品牌Video',
}"
:poster="
video1Channel.posterUrl?.indexOf('http') === 0
}" :poster="video1Channel.posterUrl?.indexOf('http') === 0
? video1Channel.posterUrl
: $baseUrl + video1Channel.posterUrl
"
object-fit="cover"
@loadedmetadata="onVideoLoadedMeta"
@play="onVideo1Play"
@ended="onVideo1Ended"
></video>
<image
v-else
:data-log="{
xcxClick: '品牌故事-次屏页面点击',
pageName: '品牌故事-首屏页面',
buttonName: '腰部品牌Video',
}"
:data-comlog="{
" object-fit="cover" @loadedmetadata="onVideoLoadedMeta" @play="onVideo1Play" @ended="onVideo1Ended"></video>
<image v-else :data-log="{
xcxClick: '品牌故事-次屏页面点击',
pageName: '品牌故事-首屏页面',
buttonName: '腰部品牌Video',
}" :data-comlog="{
xcxComponentClick: 'true',
pageName: '品牌故事页',
componentName: '品牌故事视频',
componentContent: video1Channel.title || '',
}"
@tap="openChannel(video1Channel, $event)"
class="videoposter"
:src="
video1Channel.posterUrl?.indexOf('http') === 0
}" @tap="openChannel(video1Channel, $event)" class="videoposter" :src="video1Channel.posterUrl?.indexOf('http') === 0
? video1Channel.posterUrl
: $baseUrl + video1Channel.posterUrl
"
>
">
</image>
<view class="videoposterboxtitle" v-if="showVideo1Title">{{ video1Channel.title || '' }}</view>
</view>
<!-- 产品家族 -->
<view
id="secondScreen"
class="productcontai"
v-if="productTabList.length > 0 && productInfoList.length > 0"
>
<view id="secondScreen" class="productcontai" v-if="productTabList.length > 0 && productInfoList.length > 0">
<text class="maintitle">{{ erqiPeizhi.title1 }}</text>
<!-- tab容器 -->
<scroll-view
class="listbox"
scroll-x="true"
show-scrollbar="false"
:scroll-into-view="'tab-' + channelTabIndex"
:scroll-with-animation="true"
>
<scroll-view class="listbox" scroll-x="true" show-scrollbar="false" :scroll-into-view="'tab-' + channelTabIndex"
:scroll-with-animation="true">
<view class="tab-container">
<view
@tap="channelTabHandler(index, $event)"
:data-log="{
xcxClick: '品牌故事-次屏页面点击',
pageName: '品牌故事-次屏页面',
buttonName: `${item}`,
}"
:data-comlog="{
<view @tap="channelTabHandler(index, $event)" :data-log="{
xcxClick: '品牌故事-次屏页面点击',
pageName: '品牌故事-次屏页面',
buttonName: `${item}`,
}" :data-comlog="{
xcxComponentClick: 'true',
pageName: '品牌故事页',
componentName: '飞鹤产品家族',
componentContent: '产品家族切换分类-' + item,
}"
:class="channelTabIndex === index ? 'tabitem tabActive' : 'tabitem'"
v-for="(item, index) in productTabList"
:key="index"
:id="'tab-' + index"
>
}" :class="channelTabIndex === index ? 'tabitem tabActive' : 'tabitem'"
v-for="(item, index) in productTabList" :key="index" :id="'tab-' + index">
{{ item }}
</view>
</view>
</scroll-view>
<!-- 内容 -->
<scroll-view
v-if="productInfoList.length > 0"
class="productbox"
scroll-x="true"
show-scrollbar="false"
>
<scroll-view v-if="productInfoList.length > 0" class="productbox" scroll-x="true" show-scrollbar="false">
<view class="product-grid">
<view class="product-row">
<view
class="infobox"
:key="'top-' + index"
v-for="(infoItem, index) in productInfoList[channelTabIndex].filter((item, i) => i % 2 === 0)"
:style="{
<view class="infobox" :key="'top-' + index"
v-for="(infoItem, index) in productInfoList[channelTabIndex].filter((item, i) => i % 2 === 0)" :style="{
background: `url(${$baseUrl}brandpage/infoBoxBg.png) no-repeat center/contain`,
}"
:data-log="{
}" :data-log="{
xcxClick: '品牌故事-次屏页面点击',
pageName: '品牌故事-次屏页面',
buttonName: `${productTabList[channelTabIndex] + '中的' + infoItem.title}+'商品'`,
}"
:data-comlog="{
}" :data-comlog="{
xcxComponentClick: 'true',
pageName: '品牌故事页',
componentName: '飞鹤产品家族',
componentContent: '产品家族商品-' + infoItem.desc,
}"
@tap="jumpProduct(infoItem, $event)"
>
}" @tap="jumpProduct(infoItem, $event)">
<view class="flexbox">
<view class="infotitle">
{{ infoItem.title }}
</view>
<image
class="infoimg"
:src="infoItem.bgUrl?.indexOf('http') === 0 ? infoItem.bgUrl : $baseUrl + infoItem.bgUrl"
>
<image class="infoimg"
:src="infoItem.bgUrl?.indexOf('http') === 0 ? infoItem.bgUrl : $baseUrl + infoItem.bgUrl">
</image>
</view>
<view class="infodesc">{{ infoItem.desc }}</view>
</view>
</view>
<view class="product-row">
<view
class="infobox"
:key="'bottom-' + index"
v-for="(infoItem, index) in productInfoList[channelTabIndex].filter((item, i) => i % 2 === 1)"
:style="{
<view class="infobox" :key="'bottom-' + index"
v-for="(infoItem, index) in productInfoList[channelTabIndex].filter((item, i) => i % 2 === 1)" :style="{
background: `url(${$baseUrl}brandpage/infoBoxBg.png) no-repeat center/contain`,
}"
:data-log="{
}" :data-log="{
xcxClick: '品牌故事-次屏页面点击',
pageName: '品牌故事-次屏页面',
buttonName: `${productTabList[channelTabIndex] + '中的' + infoItem.title}+'商品'`,
}"
:data-comlog="{
}" :data-comlog="{
xcxComponentClick: 'true',
pageName: '品牌故事页',
componentName: '飞鹤产品家族',
componentContent: '产品家族商品-' + infoItem.desc,
}"
@tap="jumpProduct(infoItem, $event)"
>
}" @tap="jumpProduct(infoItem, $event)">
<view class="flexbox">
<view class="infotitle">
{{ infoItem.title }}
</view>
<image
class="infoimg"
:src="infoItem.bgUrl?.indexOf('http') === 0 ? infoItem.bgUrl : $baseUrl + infoItem.bgUrl"
>
<image class="infoimg"
:src="infoItem.bgUrl?.indexOf('http') === 0 ? infoItem.bgUrl : $baseUrl + infoItem.bgUrl">
</image>
</view>
<view class="infodesc">{{ infoItem.desc }}</view>
......@@ -235,68 +155,37 @@
</scroll-view>
</view>
<!-- 视频 -->
<view
class="videoposterbox"
v-if="video2Channel.videoUrl || (video2Channel.finderUserName && video2Channel.feedId)"
>
<video
v-if="video2Channel.videoUrl"
ref="brandVideo2Ref"
id="brandVideo2"
class="videoposter"
:src="
video2Channel.videoUrl?.indexOf('http') === 0
? video2Channel.videoUrl
: $baseUrl + video2Channel.videoUrl
"
:autoplay="false"
object-fit="cover"
@loadedmetadata="onVideoLoadedMeta"
@play="onVideo2Play"
:poster="
video2Channel.posterUrl?.indexOf('http') === 0
<view class="videoposterbox"
v-if="video2Channel.videoUrl || (video2Channel.finderUserName && video2Channel.feedId)">
<video v-if="video2Channel.videoUrl" ref="brandVideo2Ref" id="brandVideo2" class="videoposter" :src="video2Channel.videoUrl?.indexOf('http') === 0
? video2Channel.videoUrl
: $baseUrl + video2Channel.videoUrl
" :autoplay="false" object-fit="cover" @loadedmetadata="onVideoLoadedMeta" @play="onVideo2Play" :poster="video2Channel.posterUrl?.indexOf('http') === 0
? video2Channel.posterUrl
: $baseUrl + video2Channel.posterUrl
"
@ended="onVideo2Ended"
></video>
<image
v-else
class="videoposter"
:data-comlog="{
xcxComponentClick: 'true',
pageName: '品牌故事页',
componentName: '品牌故事视频',
componentContent: video2Channel.title || '',
}"
@tap="openChannel(video2Channel, $event)"
:src="
video2Channel.posterUrl?.indexOf('http') === 0
" @ended="onVideo2Ended"></video>
<image v-else class="videoposter" :data-comlog="{
xcxComponentClick: 'true',
pageName: '品牌故事页',
componentName: '品牌故事视频',
componentContent: video2Channel.title || '',
}" @tap="openChannel(video2Channel, $event)" :src="video2Channel.posterUrl?.indexOf('http') === 0
? video2Channel.posterUrl
: $baseUrl + video2Channel.posterUrl
"
>
">
</image>
<view class="videoposterboxtitle" v-if="showVideo2Title">{{ video2Channel.title || '' }}</view>
</view>
<!-- 鹤小飞一家 -->
<view
id="thirdScreen"
class="ipbox"
v-if="erqiPeizhi.appId1 && erqiPeizhi.appId2"
:style="{ background: `url(${$baseUrl}brandpage/hexiaofeiBg.png) no-repeat center/contain` }"
>
<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"
@tap="jumpLink(erqiPeizhi.link, erqiPeizhi.videoUrl, $event)"
:src="erqiPeizhi.iphexiaofeiUrl"
>
<image :data-log="{
xcxClick: '品牌故事-三屏页面点击',
pageName: '品牌故事-三屏页面',
buttonName: `全家形象`,
}" class="iphexiaofei" @tap="jumpLink(erqiPeizhi.link, erqiPeizhi.videoUrl, $event)"
:src="erqiPeizhi.iphexiaofeiUrl">
</image>
<!-- </store-product> -->
<view class="ipcard">
......@@ -308,26 +197,17 @@
<view class="ipflex">
<!-- 竖版商品 -->
<view class="ipbg ip1" id="ip1" @tap="ipTapEvent(1, $event)">
<store-product
:appid="erqiPeizhi.appId1"
:product-id="erqiPeizhi.productId1"
custom-content="true"
class="store-product-container"
>
<store-product :appid="erqiPeizhi.appId1" :product-id="erqiPeizhi.productId1" custom-content="true"
class="store-product-container">
<view class="ipcontainer">
<image
:data-log="{
xcxClick: '品牌故事-三屏页面点击',
pageName: '品牌故事-三屏页面',
buttonName: `${hexiaofeiNameList[0]}`,
}"
:src="
erqiPeizhi.ipImg1?.indexOf('http') === 0
<image :data-log="{
xcxClick: '品牌故事-三屏页面点击',
pageName: '品牌故事-三屏页面',
buttonName: `${hexiaofeiNameList[0]}`,
}" :src="erqiPeizhi.ipImg1?.indexOf('http') === 0
? erqiPeizhi.ipImg1
: $baseUrl + erqiPeizhi.ipImg1
"
class="ip1"
>
" class="ip1">
</image>
<view class="ipcontext">
<view class="ipcontext-desc">{{ erqiPeizhi.ipDesc1 || '' }}</view>
......@@ -340,29 +220,21 @@
<view class="ipright">
<!-- 横版商品 -->
<view class="ipbg ip2" id="ip2" @tap="ipTapEvent(2, $event)">
<store-product
:appid="erqiPeizhi.appId2"
:product-id="erqiPeizhi.productId2"
custom-content="true"
class="store-product-container"
>
<store-product :appid="erqiPeizhi.appId2" :product-id="erqiPeizhi.productId2" custom-content="true"
class="store-product-container">
<view class="ipcontainer">
<view class="ipcontext">
<view class="ipcontext-title">{{ erqiPeizhi.ipTitle2 || '' }}</view>
<view class="ipcontext-desc">{{ erqiPeizhi.ipDesc2 || '' }}</view>
</view>
<image
:data-log="{
xcxClick: '品牌故事-三屏页面点击',
pageName: '品牌故事-三屏页面',
buttonName: `${hexiaofeiNameList[1]}`,
}"
:src="
erqiPeizhi.ipImg2?.indexOf('http') === 0
<image :data-log="{
xcxClick: '品牌故事-三屏页面点击',
pageName: '品牌故事-三屏页面',
buttonName: `${hexiaofeiNameList[1]}`,
}" :src="erqiPeizhi.ipImg2?.indexOf('http') === 0
? erqiPeizhi.ipImg2
: $baseUrl + erqiPeizhi.ipImg2
"
>
">
</image>
</view>
</store-product>
......@@ -370,36 +242,26 @@
<view style="display: flex; justify-content: space-between; margin-top: 20rpx">
<!-- 视频号 -->
<view class="ipbg ip3" id="ip3" @tap="ipTapEvent(3, $event)">
<image
:data-log="{
xcxClick: '品牌故事-三屏页面点击',
pageName: '品牌故事-三屏页面',
buttonName: `${hexiaofeiNameList[2]}`,
}"
@tap="showPopup(0, $event)"
:src="
erqiPeizhi.ipImg3?.indexOf('http') === 0
<image :data-log="{
xcxClick: '品牌故事-三屏页面点击',
pageName: '品牌故事-三屏页面',
buttonName: `${hexiaofeiNameList[2]}`,
}" @tap="showPopup(0, $event)" :src="erqiPeizhi.ipImg3?.indexOf('http') === 0
? erqiPeizhi.ipImg3
: $baseUrl + erqiPeizhi.ipImg3
"
>
">
</image>
</view>
<!-- 小红书 -->
<view class="ipbg ip4" id="ip4" @tap="ipTapEvent(4, $event)">
<image
:data-log="{
xcxClick: '品牌故事-三屏页面点击',
pageName: '品牌故事-三屏页面',
buttonName: `${hexiaofeiNameList[3]}`,
}"
@tap="showPopup(2, $event)"
:src="
erqiPeizhi.ipImg4?.indexOf('http') === 0
<image :data-log="{
xcxClick: '品牌故事-三屏页面点击',
pageName: '品牌故事-三屏页面',
buttonName: `${hexiaofeiNameList[3]}`,
}" @tap="showPopup(2, $event)" :src="erqiPeizhi.ipImg4?.indexOf('http') === 0
? erqiPeizhi.ipImg4
: $baseUrl + erqiPeizhi.ipImg4
"
>
">
</image>
</view>
</view>
......@@ -412,31 +274,21 @@
<!-- <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="{
}" :data-log="{
xcxClick: `品牌故事-三屏页面点击`,
pageName: `品牌故事-三屏页面ESG点击`,
buttonName: `${index + 1}-${infoItem.desc}`,
}"
:data-comlog="{
}" :data-comlog="{
xcxComponentClick: 'true',
pageName: '品牌故事页',
componentName: '飞鹤ESG',
componentContent: infoItem.desc,
}"
@tap="jumpLink(infoItem.link, infoItem.videoUrl, $event)"
>
<image
class="infoimg imgRaduis"
:src="infoItem.bgUrl?.indexOf('http') === 0 ? infoItem.bgUrl : $baseUrl + infoItem.bgUrl"
>
}" @tap="jumpLink(infoItem.link, infoItem.videoUrl, $event)">
<image class="infoimg imgRaduis"
:src="infoItem.bgUrl?.indexOf('http') === 0 ? infoItem.bgUrl : $baseUrl + infoItem.bgUrl">
</image>
<view class="infotitle">{{ infoItem.desc }}</view>
<view class="infodesc">{{ infoItem.desc2 }}</view>
......@@ -448,13 +300,7 @@
<view>
<!-- 普通弹窗 -->
<uni-popup
:is-mask-click="false"
:safe-area="false"
ref="popup"
background-color="#fff"
border-radius="48rpx"
>
<uni-popup :is-mask-click="false" :safe-area="false" ref="popup" background-color="#fff" border-radius="48rpx">
<view v-if="qrInfoObj !== null" class="popup-content">
<image class="btnclose" @tap="closePop" :src="$baseUrl + 'homepage/btnclose.png'"></image>
<view class="title">
......@@ -462,11 +308,8 @@
</view>
<rich-text class="desc" :nodes="qrInfoObj.desc"> </rich-text>
<image :show-menu-by-longpress="true" class="qrcode" :src="$baseUrl + qrInfoObj.qrUrl"></image>
<image
@tap="downloadHandler($baseUrl + qrInfoObj.qrUrl)"
class="btndownload"
:src="$baseUrl + 'homepage/btn_download.png'"
></image>
<image @tap="downloadHandler($baseUrl + qrInfoObj.qrUrl)" class="btndownload"
:src="$baseUrl + 'homepage/btn_download.png'"></image>
</view>
<view v-else class="popup-content" style="height: 899rpx">
<image class="xingmahui" :src="$baseUrl + 'brandpage/hexiaofei.png'"></image>
......@@ -475,14 +318,8 @@
</uni-popup>
</view>
<view v-if="showVideo" class="video-popup">
<video
:src="currentVideoUrl"
controls
autoplay
:style="{ width: videoWidth + 'px', height: videoHeight + 'px' }"
@loadedmetadata="onVideoLoadedMeta"
@play="onVideoPlay"
></video>
<video :src="currentVideoUrl" controls autoplay :style="{ width: videoWidth + 'px', height: videoHeight + 'px' }"
@loadedmetadata="onVideoLoadedMeta" @play="onVideoPlay"></video>
<view class="close-btn-bottom" @tap="closeVideo">×</view>
</view>
</view>
......@@ -630,8 +467,8 @@ export default {
data.videoUrl = this.$baseUrl + data.videoUrl;
}
this.currentVideoUrl = data.videoUrl;
this.video1Channel = data.video1Channel;
this.video2Channel = data.video2Channel;
this.video1Channel = data.video1Channel || {};
this.video2Channel = data.video2Channel || {};
this.initExposure();
}
},
......@@ -1444,6 +1281,7 @@ export default {
.ipcontainer {
position: relative;
.ipcontext {
display: flex;
flex-direction: column;
......@@ -1451,6 +1289,7 @@ export default {
justify-content: flex-start;
font-size: 20rpx;
text-align: center;
.ipcontext-desc,
.ipcontext-title {
width: 100%;
......@@ -1458,6 +1297,7 @@ export default {
text-overflow: ellipsis;
white-space: nowrap;
}
.ipcontext-title {
color: @color-gold-main;
}
......@@ -1475,6 +1315,7 @@ export default {
display: flex;
justify-content: center;
align-items: center;
.store-product-container {
display: flex;
justify-content: center;
......@@ -1486,6 +1327,7 @@ export default {
width: 288rpx;
height: 380rpx;
overflow: hidden;
.ipcontainer {
display: flex;
flex-direction: column;
......@@ -1493,6 +1335,7 @@ export default {
justify-content: center;
width: 268rpx;
height: 330rpx;
.ipcontext {
width: 100%;
margin-top: 6rpx;
......@@ -1508,6 +1351,7 @@ export default {
.ip2 {
width: 342rpx;
height: 201rpx;
.ipcontainer {
height: 152rpx;
width: 322rpx;
......@@ -1515,6 +1359,7 @@ export default {
flex-direction: row;
align-items: center;
justify-content: space-between;
.ipcontext {
// width: 210rpx;
flex: 1;
......
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