Skip to content

飞
飞鹤小程序
Commit 17d20f25 authored by chenkai1's avatar chenkai1
Browse files
Options

Merge branch 'feature/fh_gaiban' of http://gitlab2.dui88.com/fh/20250528_FHQ1... 

Merge branch 'feature/fh_gaiban' of http://gitlab2.dui88.com/fh/20250528_FHQ1 into feature/fh_gaiban

# Conflicts:
#	mock/home.json
#	views/Home.vue
parents 165d02d5 93242848
Hide whitespace changes
Inline Side-by-side
Showing with 3673 additions and 1813 deletions
.DS_Store
View file @ 17d20f25
No preview for this file type
api/request.js
View file @ 17d20f25
......@@ -25,9 +25,9 @@ const request = (options = {}) => {
// 例如：
// options.header = {
// "Content-Type": "application/x-www-form-urlencoded"
// }
// if(options.url == '/c/ai/chat/query'){
// baseUrl = "https://docs.dui88.com/mock/1956";
// }
// if(options.url == '/c/ai/chat/query'){
// baseUrl = "https://docs.dui88.com/mock/1956";
// }
return new Promise((resolve, reject) => {
uni
......
components/ScrollableTabs.vue 0 → 100644
View file @ 17d20f25
<template>
<view class="scrollable-tabs">
<scroll-view
class="tabs-scroll"
scroll-x="true"
show-scrollbar="false"
:scroll-into-view="'tab-' + currentIndex"
:scroll-with-animation="true"
>
<view class="tabs-container">
<view
v-for="(item, index) in tabs"
:key="index"
:id="'tab-' + index"
class="tab-item"
:class="{ 'tab-active': currentIndex === index }"
@tap="handleTabClick(index)"
>
{{ item }}
</view>
</view>
</scroll-view>
</view>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue'
const props = defineProps({
tabs: {
type: Array,
default: () => []
},
currentIndex: {
type: Number,
default: 0
}
})
const emit = defineEmits(['change'])
const handleTabClick = (index) => {
emit('change', index)
}
</script>
<style lang="less" scoped>
.scrollable-tabs {
width: 100%;
.tabs-scroll {
width: 100%;
white-space: nowrap;
.tabs-container {
display: flex;
align-items: center;
padding: 0 20rpx;
min-width: 100%;
.tab-item {
color: #333;
background-color: #e9edf1;
padding: 15rpx 20rpx;
font-size: 22rpx;
margin-right: 15rpx;
border-radius: 30rpx;
flex-shrink: 0;
white-space: nowrap;
transition: all 0.3s ease;
&:last-child {
margin-right: 0;
}
&.tab-active {
color: white;
background-color: #D3A358;
}
}
}
}
}
/* 响应式设计 */
@media screen and (max-width: 750rpx) {
.scrollable-tabs {
.tabs-scroll {
.tabs-container {
.tab-item {
padding: 12rpx 16rpx;
font-size: 20rpx;
margin-right: 12rpx;
}
}
}
}
}
</style>
\ No newline at end of file
docs/可滚动标签实现指南.md 0 → 100644
View file @ 17d20f25
# 可滚动标签实现指南
## 问题描述
当标签项（tabitem）总宽度超出父容器宽度时，需要实现左右滑动功能，让用户能够查看所有标签。
## 解决方案
### 方案一：修改现有代码（已实现）
#### 1. 修改模板结构
```vue
<scroll-view class="listbox" scroll-x="true" show-scrollbar="false" :scroll-into-view="'tab-' + channelTabIndex">
<view class="tab-container">
<view
v-for="(item, index) in productTabList"
:key="index"
:id="'tab-' + index"
:class="channelTabIndex === index ? 'tabitem tabActive' : 'tabitem'"
@tap="channelTabHandler(index, $event)"
>
{{ item }}
</view>
</view>
</scroll-view>
```
#### 2. 修改样式
```css
.listbox {
margin-top: 15rpx;
width: 686rpx;
white-space: nowrap;
.tab-container {
display: flex;
align-items: center;
padding: 0 20rpx;
min-width: 100%;
.tabitem {
color: @color-black-deep;
background-color: #e9edf1;
padding: 15rpx 20rpx;
font-size: 22rpx;
margin-right: 15rpx;
border-radius: 30rpx;
flex-shrink: 0; /* 防止压缩 */
white-space: nowrap; /* 防止换行 */
&:last-child {
margin-right: 0;
}
}
.tabActive {
color: white;
background-color: @color-gold-main;
}
}
}
```
### 方案二：使用可复用组件（推荐）
#### 1. 使用 ScrollableTabs 组件
```vue
<template>
<view class="productcontai">
<text class="maintitle">{{ erqiPeizhi.title1 }}</text>
<ScrollableTabs
:tabs="productTabList"
:currentIndex="channelTabIndex"
@change="handleTabChange"
/>
</view>
</template>
<script setup>
import ScrollableTabs from '../components/ScrollableTabs.vue'
const handleTabChange = (index) => {
channelTabIndex.value = index
}
</script>
```
## 关键属性说明
### 1. scroll-view 属性
```vue
<scroll-view
scroll-x="true" <!-- 启用横向滚动 -->
show-scrollbar="false" <!-- 隐藏滚动条 -->
:scroll-into-view="'tab-' + currentIndex" <!-- 自动滚动到指定元素 -->
:scroll-with-animation="true" <!-- 启用滚动动画 -->
>
```
### 2. 样式关键属性
```css
/* 容器样式 */
.listbox {
white-space: nowrap; /* 防止换行 */
}
.tab-container {
display: flex; /* 弹性布局 */
min-width: 100%; /* 最小宽度 */
padding: 0 20rpx; /* 左右内边距 */
}
.tabitem {
flex-shrink: 0; /* 防止压缩 */
white-space: nowrap; /* 防止换行 */
margin-right: 15rpx; /* 右边距 */
}
```
## 实现效果
### 功能特性
- ✅ 支持横向滚动
- ✅ 自动滚动到选中项
- ✅ 隐藏滚动条
- ✅ 平滑滚动动画
- ✅ 响应式设计
- ✅ 防止标签压缩
### 用户体验
- 当标签总宽度超出容器时，可以左右滑动查看
- 点击标签时自动滚动到可见区域
- 滚动过程平滑自然
- 适配不同屏幕尺寸
## 最佳实践
### 1. 标签间距设置
```css
.tabitem {
margin-right: 15rpx; /* 标签间距 */
&:last-child {
margin-right: 0; /* 最后一个标签无右边距 */
}
}
```
### 2. 容器内边距
```css
.tab-container {
padding: 0 20rpx; /* 左右留出空间 */
}
```
### 3. 防止压缩
```css
.tabitem {
flex-shrink: 0; /* 防止标签被压缩 */
white-space: nowrap; /* 防止文字换行 */
}
```
### 4. 自动滚动
```vue
:scroll-into-view="'tab-' + currentIndex"
```
## 常见问题解决
### 1. 滚动不生效
- 检查 `scroll-x="true"` 是否设置
- 确认容器宽度小于内容宽度
- 检查 `flex-shrink: 0` 是否设置
### 2. 标签被压缩
- 添加 `flex-shrink: 0`
- 设置 `white-space: nowrap`
### 3. 滚动条显示
- 设置 `show-scrollbar="false"`
### 4. 自动滚动不工作
- 确认 `scroll-into-view` 的 ID 正确
- 检查元素 ID 是否唯一
## 响应式设计
### 移动端优化
```css
@media screen and (max-width: 750rpx) {
.tabitem {
padding: 12rpx 16rpx; /* 减小内边距 */
font-size: 20rpx; /* 减小字体 */
margin-right: 12rpx; /* 减小间距 */
}
}
```
### 平板端优化
```css
@media screen and (min-width: 751rpx) and (max-width: 1024rpx) {
.tab-container {
padding: 0 30rpx; /* 增加内边距 */
}
}
```
## 性能优化
### 1. 使用 transform 动画
```css
.tabitem {
transition: all 0.3s ease;
}
```
### 2. 避免频繁重绘
```css
.tab-container {
will-change: transform; /* 优化滚动性能 */
}
```
### 3. 合理设置滚动阈值
```vue
<scroll-view
:scroll-into-view="shouldScroll ? 'tab-' + currentIndex : ''"
>
```
## 总结
通过以上实现，标签列表现在支持：
1. **横向滚动**：当标签总宽度超出容器时自动启用
2. **自动定位**：点击标签时自动滚动到可见区域
3. **平滑动画**：滚动过程自然流畅
4. **响应式设计**：适配不同屏幕尺寸
5. **性能优化**：避免不必要的重绘和计算
这种实现方式既保持了原有功能，又提供了更好的用户体验，特别适合标签数量较多或标签文字较长的场景。
\ No newline at end of file
pages.json
View file @ 17d20f25
{
"pages": [
"pages": [
{
"path": "pages/index/index",
"style": {
......@@ -22,7 +22,6 @@
}
},
{
"path": "pages/search/search",
"style": {
"navigationStyle": "custom",
......@@ -33,12 +32,11 @@
}
},
{
"path" : "pages/product/product",
"style" :
{
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black"
"path": "pages/product/product",
"style": {
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black"
}
},
{
......@@ -48,42 +46,44 @@
}
},
{
"path" : "pages/goodsDetail/goodsDetail",
"style" :
{
"navigationBarTitleText" : ""
"path": "pages/goodsDetail/goodsDetail",
"style": {
"navigationBarTitleText": ""
}
},
{
"path" : "pages/rightsDetail/rightsDetail",
"style" :
{
"navigationBarTitleText" : ""
"path": "pages/rightsDetail/rightsDetail",
"style": {
"navigationBarTitleText": ""
}
},
},
{
"path" : "pages/naming/naming",
"style" :
{
"navigationBarTitleText" : "宝宝取名",
"enablePullDownRefresh" : false,
"path": "pages/naming/naming",
"style": {
"navigationBarTitleText": "宝宝取名",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},
{
"path" : "pages/naming/namingResult",
"style" :
{
"navigationBarTitleText" : "AI-宝宝取名",
"enablePullDownRefresh" : false,
"path": "pages/naming/namingResult",
"style": {
"navigationBarTitleText": "AI-宝宝取名",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},
{
"path" : "pages/expertTeamPage/expertTeamPage",
"style" :
{
"navigationBarTitleText" : ""
"path": "pages/expertTeamPage/expertTeamPage",
"style": {
"navigationBarTitleText": ""
}
},
{
"path": "pages/syWebview/syWebview",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
}
],
......@@ -93,7 +93,6 @@
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"navigationStyle": "default"
},
"uniIdRouter": {}
}
\ No newline at end of file
pages/syWebview/syWebview.vue 0 → 100644
View file @ 17d20f25
<!--
Webview页面使用说明：
1. 基本使用：
uni.navigateTo({
url: '/pages/syWebview/syWebview?url=' + encodeURIComponent('https://example.com')
});
2. 带标题的使用：
uni.navigateTo({
url: '/pages/syWebview/syWebview?url=' + encodeURIComponent('https://example.com') + '&title=' + encodeURIComponent('页面标题')
});
3. 分享功能：
- 页面会自动接收webview发送的消息
- 消息格式：{ title: '标题', link: '链接', imgUrl: '图片', desc: '描述' }
- 支持数组格式：[{ title: '标题', link: '链接', imgUrl: '图片', desc: '描述' }]
4. 分享数据示例：
{
title: '分享标题',
link: 'https://example.com/share',
imgUrl: 'https://example.com/image.jpg',
desc: '分享描述'
}
-->
<template>
<view class="webview-container">
<!-- Webview内容 -->
<web-view :src="webviewUrl" @message="getMessage" @load="onWebviewLoad" @error="onWebviewError"
class="webview-content"></web-view>
</view>
</template>
<script>
import { useUserStore } from '@/stores/user.js';
import { useGlobalStore } from '../../stores/global';
export default {
data() {
return {
statusBarHeight: 0,
webviewUrl: '',
pageTitle: '加载中...',
share: null, // 分享数据
pageOptions: {} // 页面参数
}
},
async onLoad(options) {
// 获取状态栏高度
const systemInfo = uni.getSystemInfoSync();
this.statusBarHeight = systemInfo.statusBarHeight || 0;
// 确保登录以获取 cuk（异步回调，可能未立即生效）
await this.wxAutoLogin();
// 固定写死的 URL（不从 options 读取 baseUrl）
const baseUrl = 'https://25niansuyuan.feihe.com/projects/Firmus/dev/index';
const store = useGlobalStore();
const cuk = store.cuk || uni.getStorageSync('cuk');
// 可选：设置页面标题（不从 params 移除，仍然透传到 H5）
if (options && options.title) {
try { this.pageTitle = decodeURIComponent(options.title); } catch (_) { this.pageTitle = options.title; }
}
// 将 options 的所有参数原样作为查询参数传给 H5，并补齐 cuk
const params = { ...(options || {}) };
if (cuk && !params.cuk) params.cuk = cuk;
const paramStr = Object.keys(params)
.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
.join('&');
this.webviewUrl = paramStr
? baseUrl + (baseUrl.includes('?') ? '&' : '?') + paramStr
: baseUrl;
console.log('Webview页面加载，URL:', this.webviewUrl);
},
onShareAppMessage(options) {
// 分享功能
const { share } = this;
console.warn(share?.link, "share.link--------", JSON.stringify(options));
if (share) {
const shareurl = share.link;
return {
title: share.title,
path: shareurl,
imageUrl: share.imgUrl || '',
success: function (res) {
console.log(res, '分享成功');
uni.showToast({
title: '分享成功',
icon: 'success'
});
},
fail: function (res) {
console.log(res, '分享失败');
uni.showToast({
title: '分享失败',
icon: 'none'
});
},
complete: function (res) {
console.log(res, '分享完成');
}
};
}
},
methods: {
// 登录获取 cuk
async wxAutoLogin() {
const userStore = useUserStore();
await userStore.wxAutoLogin();
},
// 接收webview消息
getMessage(e) {
const {
data
} = e.detail;
console.log(data, "data")
if (data) {
this.share = data[data.length - 1]
}
},
// Webview加载完成
onWebviewLoad(e) {
console.log('Webview加载完成:', e);
if (this.pageTitle === '加载中...') {
this.pageTitle = '网页';
}
},
// Webview加载错误
onWebviewError(e) {
console.error('Webview加载错误:', e);
uni.showToast({
title: '页面加载失败',
icon: 'none'
});
},
// 返回上一页
goBack() {
uni.navigateBack({
delta: 1
});
}
}
}
</script>
<style lang="less" scoped>
.webview-container {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
background-color: #fff;
}
.webview-content {
flex: 1;
width: 100%;
}
</style>
stores/home.js
View file @ 17d20f25
......@@ -9,6 +9,7 @@ export const useHomeStore = defineStore("homeInfo", {
homeInfo: null,
isLogin: false,
babyExistence: false,
hasShownPopup: false, // 记录是否已经显示过弹窗（全局状态）
};
},
actions: {
......@@ -30,6 +31,20 @@ export const useHomeStore = defineStore("homeInfo", {
this.babyExistence = !babyExistence;
},
/**
* 标记弹窗已显示
*/
markPopupAsShown() {
this.hasShownPopup = true;
},
/**
* 重置弹窗状态（用于测试或特殊需求）
*/
resetPopupState() {
this.hasShownPopup = false;
},
/**
* 获取首页信息
*/
......@@ -38,8 +53,9 @@ export const useHomeStore = defineStore("homeInfo", {
console.log("loadHomeInfo", data);
if (data) {
this.setHomeInfo(data);
// 通过参数传入的方式使用 $sensors
// 通过参数传入的方式使用 $sensors
this.hasShownPopup = false
const userStore = useUserStore();
const mdData = {
......
stores/pageCfg.js
View file @ 17d20f25
......@@ -20,6 +20,439 @@ export const usePageCfgStore = defineStore("pageCfg", {
async fetchCfg() {
const { data } = await fetchUserJSON();
// const data = {
// "wheelOptionsYZ": [
// {
// "label": "孕1周",
// "desc": "这周的准妈妈一般情况下是还没有怀孕的，所以身体基本上不会有变化，跟平时一样。 妈妈心理变化： 平常心！平常心！平常心！重要的事情说三遍！保持良好的心态和愉悦的心情，才有利于受孕。所以，妈妈们可以多听听舒缓的音乐，做些令自己心情愉悦的事情。"
// },
// {
// "label": "孕2周",
// "desc": "身体变化： \n排卵时有的女性会感到疼痛，但准星妈的身体不会有明显的变化，因为此时还没有怀孕。如果出现月经停止、恶心、疲劳以及尿频等症状，也是怀孕以外的原因导致的。如果症状严重，需要咨询一下医生。 \n\n心理变化： \n准星妈的激素变化会导致一些心情低落、脾气暴躁等症状，常常因为小事或者无缘无故哭泣。 准星爸不要生气哦，这是孕早期正常反应，您应该体贴和安抚老婆，双方保持稳定和愉悦的情绪，共同调整好身体健康状态，在最佳时间完成造人使命。"
// },
// {
// "label": "孕3周",
// "desc": "身体变化： \n从现在开始，你的身体里多了一个小家伙，但身体并不会产生明显变化和感觉，外表看上去你仍旧是原来的样子。偶尔星妈可能会慵懒困倦，发寒、发热等症状，这是孕期的正常反应。 \n\n心理变化： \n放轻松，这周要准备受精了！ 从上次\"大姨妈\"来的时候算起，大概14天左右你就会进入排卵期。而心情对于卵子的质量会产生影响噢。日常的生活压力以及情绪波动等不良心态会影响到排卵期，从而影响受孕时机。所以，此时保持好心情，为健康宝宝的到来准备好！"
// },
// {
// "label": "孕4周",
// "desc": "身体变化： \n准星妈体型和体重还没有大的变化，可能会有轻微的不舒服，有时会感到嗜睡、疲劳，或在没有任何原因的情况下出现发烧、发冷等症状。稍安勿躁，先别急着吃药，等过几天，这些症状会自动消失。 \n\n心理变化： \n此时，你可能会对怀孕有着复杂而微妙的情感，既为新生命欣喜，又为养育感到压力，不用担心，这些都是正常现象，怀孕是你人生中最不可思议的过渡期，把它当成一个必经的成长阶段，放松心态，一边怀孕，一边学习，你一定是最独特的妈妈！"
// },
// {
// "label": "孕5周",
// "desc": "身体变化： \n这周的准星妈会发现平日困扰自己的\"大姨妈\"消失啦，胚胎在你的子宫内快速生长，且正在发生着巨大的变化，或许你已经察觉到怀孕的迹象了，你和大多数女性一样，会出现恶心、乳房胀痛、疲劳以及尿频等症状。\n \n心理变化： \n身份的突然转变，让准星妈会感到莫名压力和紧张，准星妈会略显烦躁，情绪波动较大。为了确保宝宝健康出生，准星妈一定要学会舒缓情绪，多听听轻缓的音乐，尝试与家人多沟通，缓解自己的不适感。"
// },
// {
// "label": "孕6周",
// "desc": "身体变化： \n本周你的体型体重仍然没有太大变化，从外观上根本看不出你已经怀孕了。 有些准星妈的妊娠反应开始明显起来，容易恶心呕吐，疲劳嗜睡。最神奇的是准星妈的胸部开始有变化了，有轻微的胀痛并且变软了，以前的内衣有些小了。乳头也有些变化，乳晕会加深。之后的日子里，在雌激素和孕激素的联合刺激下，准星妈的上围将会一点点鼓起来。 \n\n心理变化： \n受到早孕反应的影响，准星妈难免情绪波动大，不知所措。恶心呕吐是正常的孕期反应，而出现严重妊娠呕吐的人，多数是精神过于紧张焦虑的准星妈，通过积极的心理调适和配合治疗，基本都可以痊愈。"
// },
// {
// "label": "孕7周",
// "desc": "身体变化： \n进入第7周，准星妈的身体会异常的疲惫，总是想睡觉。胃部不适，没有胃口，却又特别饿。嘴里会有一种说不清的难闻的味道，此时你的身体里每一个部位都在发生着改变。 \n\n心理变化： \n本周准星妈的情绪反应更大了，如果你还是一个敏感、性格内向的准星妈，你的心情可能会更焦躁不安。在早孕6-10周是胚胎腭部发育的关键时期，如果准星妈的情绪过份不安，会影响胚胎的发育并导致腭裂或唇裂。所以准星妈在心情不好的时候，可以听听舒缓的音乐调节一下情绪，多跟闺蜜们聊聊天，让心情好起来。"
// },
// {
// "label": "孕8周",
// "desc": "妈妈身体变化： 尽管腹部看上去仍然很平坦，但是准星妈的子宫有了明显的变化。怀孕前子宫像一个握紧的拳头，现在它不但增大了，而且变得很软。阴道壁及子宫颈因为充血而变软，呈紫蓝色，子宫峡部特别软。当你的子宫成长时，你的腹部会感到有些痉挛，有时会感到瞬间的剧痛。 妈妈心理变化： 准星妈会产生将要做母亲的喜悦、幸福和自豪，这是正面的心理反应。同时，准星妈会有紧张的心理，比如呕吐、眩晕、恶心、食欲不振等，对于这种不稳定的情绪表现，准星妈应正确认识和调整。积极主动地去多看一些轻松、幽默的书籍，多想一些愉快的事情，多听一些动听的音乐，面对准星妈妊娠反应时产生的烦躁情绪，准星爸要多方面对准星妈体贴和照料，既要在精神上对准星妈多体贴、多劝慰，又要在生活上做足功课。为准星妈准备一些清淡、易于消化的食物。多和准星妈谈心，讲一些幽默的故事和笑话，使准星妈心情开朗。准星爸千万不能和准星妈计较，一定要多理解准星妈，包含准星妈的所做所为。因为准星爸的爱是消除准星妈烦躁心情的一剂良药。"
// },
// {
// "label": "孕9周",
// "desc": "身体变化： \n随着宝宝的生长发育，准星妈的子宫已经增大了2倍，大概有网球那么大，随着子宫逐渐增大，准星妈会感觉到整个身体都在发生变化。虽然你的体重没有增加太多，但是乳房胀大了不少，乳头和乳晕色素加深，腰围也增加了很多。你可能常感到腿部紧绷发疼，腰部酸痛。不要担心，大多数的准星妈也处于这种状态。 \n\n心理变化： \n准星妈的情绪更加敏感了，一点点重话也听不得。孕期反应让准星妈患得患失，变得更娇气，事事更爱依赖别人，有时还动不动就流泪，像极了林妹妹。怎么办呢？把心中的不快发泄出来吧！别憋着，说出来心情会好很多哦！"
// },
// {
// "label": "孕10周",
// "desc": "身体变化： \n从这周开始，准星妈的身体开始慢慢变形了，体重也会增加。腰部变粗、胸部变大，乳头更突出，为未来不远的步入做着准备。以前的内衣无法继续穿了，找个时间去重新买吧，无钢圈、纯棉、透气的最好哦！\n\n心理变化： \n看着变粗的腰部，看着肚子上的妊娠纹，准星妈的脾气变化更剧烈了，可能还很暴躁。一时之间晴空万里，一时之间乌云密布。不要担心哦，都是受孕激素在搞怪，听些开心的音乐，去户外散散步，让自己的心情好起来吧！"
// },
// {
// "label": "孕11周",
// "desc": "身体变化：\n准星妈的子宫，现在已经像个柚子了。虽然体重有所增加，但是从外表来看，并未有明显的孕妇形象。有些准星妈可能会有便秘、烧心、和头痛，这些不适都是正常的哈。\n\n心理变化：\n这周开始，准星妈们的孕期反应逐渐减轻，随之心情变好。之前吐的那么幸苦，终于舒服很好，可以好好感受宝宝在体内发育的乐趣哦，开始孕育幸福吧！"
// },
// {
// "label": "孕12周",
// "desc": "身体变化：\n准星妈的体重本周可能会增长0.9kg，腰身更粗了，变得越来越有孕味儿。臀部正在变大，久坐会使准星妈尾骨不适，有疼痛之感。准星妈的肚皮、腿上的汗毛会增多，脸上可能会出现斑点。\n\n心理变化：\n准星妈在本周已经适应了宝宝的在体内的生长，孕吐、疲劳等不适正在逐渐减轻或者消失，情绪也会变得稳定。虽然本周是第二次产检了，准星妈也会有些小紧张，最好带上准星妈一起，缓解一下准星妈的情绪哦。"
// },
// {
// "label": "孕13周",
// "desc": "身体变化：\n本周准星妈体重突然增加，可能会发现肚子上有妊娠纹，这些妊娠纹会在分娩后淡化。\n准星妈的乳房迅速增大，乳或许有头孔有少许淡黄色液体溢出，下腹部轻微隆起。\n\n心理变化：\n与孕早期相比，本周准星妈心情有了缓解。虽然身材有了明显变化，腰粗了，肚皮撑开了，但是不用为了宝宝患得患失了。加油！准星妈们，你们是最美丽！最勇敢的！"
// },
// {
// "label": "孕14周",
// "desc": "身体变化：\n准星妈们孕早期的疲劳、恶心以及尿频都已经减少，想吃的食物会突然增多，而且饭后还会想吃，所以体重会有所增加。子宫增大，腹部隆起，身体丰满起来，孕妇特征明显。准星妈的阴道分泌的\"白带\"增多，这是阴道和宫颈的分泌物，属于正常现象。\n\n心理变化：\n肚子越来越大了，准星妈的情绪怎么样？这个时候的准星妈应该避免情绪激动、精神紧张，做做深呼吸，多想想开心的事情，还可以适当的做一些运动哦，比如孕妇操、孕妇瑜伽等等，好的情绪成就健康漂亮的宝宝哦！"
// },
// {
// "label": "孕15周",
// "desc": "身体变化：\n准星妈的肚子更大了，原来的衣服都穿不上了。在肚脐下方7.6～10厘米的位置摸到自己的子宫，宝宝正在里面自由自在的四处游动。随着孕周的增加，准星妈的心肺功能负荷增加，心率增速，呼吸加快加深。\n\n心理变化：\n各种身体上的不适感，让准星妈变得更脆弱、敏感和易怒。可是你知道吗？肚中的宝宝已经能感觉到准星妈的不快了，宝宝也会变得焦虑了，多想想可爱的宝宝，心情会不会好很多？诸位准星妈一定要注意自己的情绪！会影响到宝宝的发育哦！"
// },
// {
// "label": "孕16周",
// "desc": "身体变化：\n准妈妈的体重可能已经增加大约4-5斤。子宫、羊水和血量都在增长，胎盘和胎儿的支撑系统还有变大的胸部都会使你的体重又增长了。爱美的准星妈们，不要忧虑自己胖了，不美了，这都是宝宝的肉肉。随着宝宝的迅速发育，准星妈注意避免缺铁性贫血的发生。\n\n心理变化：\n缺乏安全感的准星妈，所有紧张和不安情绪都随着宝宝逐渐长大而渐渐消失的，已经适应了与宝宝的日夜相伴，本周宝宝的第一次的胎动让准星妈兴奋和喜悦。"
// },
// {
// "label": "孕17周",
// "desc": "身体变化：\n准星妈的子宫不断增大，小腹更加突出，乳房变得更加敏感、柔软，甚至还有些疼痛。在肚脐和趾骨之间触摸的时候，能够感觉到有一团硬东西，这就是子宫的上部。准星妈或许会感到腹部一侧有轻微的触痛，这是因为子宫迅速增大导致的。\n\n心理变化：\n肚子越来越沉了，准星妈的心情是不是更加焦虑了？经常还会疑神疑鬼的。这个时候，准星妈一定要调节自己的情绪，因为宝宝可以感受到准星妈的喜怒哀乐，宝宝的事儿无小事，宝宝的情绪最重要了，准星妈要让宝宝开开心心地发育哦！"
// },
// {
// "label": "孕18周",
// "desc": "身体变化：\n准星妈身体重心向前移动，走路的时候要多加小心。虽然这段时间准星妈的口味出奇得好，但也要注意营养均衡搭配哦。准星妈应该注意体重，一个星期称重一次，怀孕中期，每周体重增加最好不要超过500g。准星妈可以进行骨盆底肌肉练习了，这个运动可以帮助分娩哦！\n\n心理变化：\n孕中期是宝宝发育最快的时期，准星妈有可能因此便秘甚至长痔疮，这种感觉让各位准星妈是不是很焦躁呢？可以向有过孕育经验的闺蜜或者医生请教一下缓解的秘方，及时舒缓自己的焦虑，对宝宝的发育来说，很重要！"
// },
// {
// "label": "孕19周",
// "desc": "身体变化：\n随着胎儿、胎盘、子宫和其他器官的继续生长，准星妈的体重也增加了3-7kg左右，可能会有下腹疼痛。脸上的黄褐斑和黑斑也越来越多了，会让准星妈很心塞，不过千万不要随便用药，一般黄褐斑会在宝宝出生后逐渐消退或者变淡。\n\n心理变化：\n现在的你，是不是有些纠结呢？一边是宝宝需要营养，一边的是自己剧增的体重！准星妈们在吃与不吃纠结中。可是又有什么好纠结的呢？宝宝的健康发育是目前最重要的事情，减肥这种事儿，都生完再说吧！"
// },
// {
// "label": "孕20周",
// "desc": "身体变化：\n准星妈的腹部越来越大，从现在开始准妈妈的宫底每周大约升高1厘米，体重急剧增加，会感觉很疲惫，有时还会感觉腰痛。睡觉的时候，可能出现腿部痉挛，腿和脚开始水肿。\n\n心理变化：\n对于准星妈来说，一切基本尘埃落地，只待瓜熟蒂落。心情会越来越好， 可以做一个孕期短途旅行计划，放松放松心情。"
// },
// {
// "label": "孕21周",
// "desc": "身体变化：\n准星妈的体重又涨了，现在的体重比怀孕前增加了4-6公斤。随着身体负重的增加，子宫压迫了准星妈的腹部，使准星妈的呼吸越来越急促，爬楼梯时尤其明显，行动迟缓和笨重。手指、脚趾和全身关节的韧带也变得松弛。\n\n心理变化：\n怀孕对于不少急性子的准星妈，可真是一个考验。准星妈们开始变的容易忘事，行动缓慢，加之越来越敏感的情绪，很多星妈特别急躁和焦虑。这个时候，星妈们一定要注意调节，做事情要沉着，一定记着你不是一个人了！"
// },
// {
// "label": "孕22周",
// "desc": "身体变化：\n准星妈的体重从这个周开始基本是每周长一斤，突出的腹部使重心前移，准星妈必需挺起肚子走路，才能保持平衡。眼睛变的容易干涩。有些准星妈的脸上、脖子和胳膊上还会出现微红凸起的蛛形血管瘤，不过这个一般会在产后自然消失。\n\n心理变化：\n怀孕对于每个准星妈都是很辛苦的一件事儿，身体的各种不适也让很多准星妈睡都睡不好，有些甚至变得情绪抑郁。准星妈要多多出去参加一些户外活动，呼吸一下新鲜的空气，多出去和朋友小聚一下，可以舒缓准星妈的心情哦！"
// },
// {
// "label": "孕23周",
// "desc": "身体变化：\n现在的准星妈变成了真正的\"大肚婆\"，经常会感觉腰酸背疼的。有时候还会发现自己容易牙龈出血，不要担心，这是孕激素的原因。准星妈的双腿肌肉疲劳感增加，双腿浮肿，属于正常现象。如果脚或者脚踝突然肿胀，要及时就医哦！\n\n心理变化：\n准星妈的情绪变化大，心中的一些烦闷总喜欢跟亲密的人争吵，准星爸当之无愧成了首选之人。你可知肚中的宝宝能够清楚的听见，大的争吵声，对胎宝宝无异于噪音，会直接危害到宝宝呢。"
// },
// {
// "label": "孕24周",
// "desc": "身体变化：\n随着准星妈的子宫增大、加重，准星妈的脊椎向后仰，身体重心向前移。乳房继续膨胀，有时候还会发现有物体溢出，这是正常想象，准星妈的身体正在为胎宝宝储存粮食。\n\n心理变化：\n怀孕之后，为了监测宝宝的成长情况，准星妈要面对各种各样的检查，也会担忧各很多情况。宝宝发育的怎么样？宝宝会不会有啥缺陷？有时候还会觉得怀孕真的好辛苦，女人真的不易等等，要坚信怀孕是一个女人最幸福的一件事，当宝宝降生，一切辛苦都是值得的。"
// },
// {
// "label": "孕25周",
// "desc": "身体变化：\n有些准星妈在这个阶段有可能会疲劳、头晕、尿频、胃灼热的反应，双脚还有可能发酸。肚子上、乳房上会出现一些暗红色的妊娠纹，脸上的妊娠斑也越来越明显。\n\n心理变化：\n疲惫、背痛、脚痛各种不适，让准星妈的情绪更加紧绷了。一点点小事儿都会让她心烦不已。准星爸一定要及时开导这些暴躁的准星妈们，用爱去缓解她们的焦虑和紧张吧。"
// },
// {
// "label": "孕26周",
// "desc": "身体变化：\n这个阶段，有的准星妈会感觉手部有刺痛感或是麻木感，这与腕管综合征有关系哦。腰酸腹痛、腿发麻、水肿......这种情况也在准星妈身上时有发生。妊娠纹继续蔓延着。\n\n心理变化：\n看到肚子、大腿上蔓延着的妊娠纹，不少准星妈心情又不美妙了。各种防御措施丝毫没有用处。烦躁也没有用，坦然的接受吧！为了宝宝，这些又算得了什么呢！"
// },
// {
// "label": "孕27周",
// "desc": "身体变化：\n到了孕中期末，准星妈的子宫接近了肋缘，子宫继续增大，身体负荷继续加重，让不少准星妈的乳房更加胀痛，后背和腿部会更加酸痛。浑身都是肿肿的感觉，连系鞋带也成了难题，这个时候的准星妈需要家人更多的呵护和关爱哦。\n\n心理变化：\n诸位准星妈马上要进入新的阶段了，对分娩的恐惧感、不安感、紧张感都会加重。有没有一种既惊喜期待又紧张的心理呢？这个时候，诸位准星妈可以学习一些分娩方面的知识了，会减轻生产前的紧张感，也可以和准星爸好好沟通一下，让心情舒缓起来。"
// },
// {
// "label": "孕28周",
// "desc": "身体变化：\n如果准星妈站立时间过久，腰部容易变硬或肚子收紧，这就是假宫缩了。这个时期，假宫缩会时常光顾准星妈的肚子，这个时候，准星妈一定要注意休息。同时，由于子宫的扩张，准星妈也会感觉胸口憋闷，呼吸困难。准星妈可以采用左侧卧睡的姿势，会好很多。\n\n心理变化：\n诸位准星妈们即将迎来你们的小天使了，紧张吗？这时候的准星妈比较敏感，感觉不到宝宝的胎动，就会特别紧张，担忧宝宝的健康。此时，建议诸位准星妈多听写舒缓的音乐吧，让准星爸陪你去户外走走，做些合适的运动，都会让你的心情好很多哦。"
// },
// {
// "label": "孕29周",
// "desc": "身体变化：\n进入孕晚期，有一部分准星妈会发生鼻塞或者鼻出血的情况，很多准星妈会认为自己感冒了，其实不然，这种症状大多数是由于内分泌系统分泌的多种激素刺激鼻黏膜，是鼻黏膜血管充血肿胀引起的，等生完宝宝，这种症状也会随着消失了。\n\n心理变化：\n身体负担的不断加重，尿频、静脉曲张、烧心等不适让准星妈变得更加烦躁不安。准星妈可以多跟肚子里的宝宝做做互动、聊聊天，这样可以减轻你的焦虑感。多想一些高兴的事情，保持一种积极的心态，让自己更好的度过整个孕期吧！"
// },
// {
// "label": "孕30周",
// "desc": "身体变化：\n准星妈的肚子像个大西瓜了，很难看到脚下，肚子上的肌肉已经被撑的很大且松弛。随着增大的子宫不断上推，准星妈的呼吸变得吃力起来，随便走两步，就气喘吁吁。胃部也感觉不适，等过几周，宝宝的头部开始下降，准星妈的不适将会减轻。\n\n心理变化：\n体内激素状况的改变，让不少准星妈非常焦虑，这是难免的，临近分娩，很多准星妈会看分娩过程的小视频，有时也会加重准星妈的这种焦虑和心理负担。这时，准星妈要学会自己调节，必要时可以请求医生的协助和指导。"
// },
// {
// "label": "孕31周",
// "desc": "准星妈最为显著得变化就是胸部越来越饱满了，甚至让人感觉到了沉重，乳晕颜色更深，开始有了初乳，乳晕周边的小腺体开始变得凸起，乳房更加柔软和敏感。当然了，现在的准星妈仍然没有摆脱失眠、浮肿、疲劳、气短、尿频这些不适症状。\n\n很多准星妈会患孕晚期焦虑症，要指导越放松越平静，分娩也会更容易。睡眠不好也加重了准星妈们的这种焦虑，这个时候，睡前可以按摩一下身体，调节一下情绪，会缓解一些焦虑和失眠。"
// },
// {
// "label": "孕32周",
// "desc": "身体变化：\n准星妈在这个时候更容易疲劳了，还会感到会感到骨盆和耻骨联合处酸疼，尿意频繁，5分钟上一次厕所是常事。连手指和脚趾的关节都会胀痛，腰痛加重，准星妈在这个阶段，可谓辛苦至极。\n\n心理变化：\n很多准星妈会坚持到生产的那一天，才会离开工作岗位。越来越疲惫的身体让很多职场准星妈有些力不从心，情绪也会变得略显失落，十分烦躁。这时，准星妈们一定要注意休息，学会给自己减压，这样对准星妈的身体和心理健康更有利。"
// },
// {
// "label": "孕33周",
// "desc": "身体变化：\n这个阶段，准星妈不规则的宫缩次数增加，这标志着胎儿正在逐渐下降。你也会发现肚子在不断向外扩张，肚脐向外凸起，甚至穿着衣服也能看到凸起的肚脐。沉重的腹部也让准星妈更懒得动了。\n\n心理变化：\n期待吗？还有几个周宝宝就要出生了。想这时，不少准星妈的心理慢慢的平静许多，除了对宝宝健康情况的担忧和焦虑外，多了一丝迎接新生儿的期待感，做好准备，调整好心情，准备迎接来自宝宝的新挑战吧！"
// },
// {
// "label": "孕34周",
// "desc": "身体变化：\n进入34周，初产的准星妈要知道，此时的宝宝头部大多已经降入骨盆，紧压着子宫颈口。不是初产的准星妈，宝宝入盆会晚一些，有些甚至在分娩前才会入盆。有些准星妈的腿脚肿的更厉害了，即使这样，仍然要及时补充水分，现在宝宝和准星妈都需要大量的水分。如果发现自己的手或脸突然肿起来，要及时就医检查。\n\n心理变化：\n随着产检频率的增加，准星妈或在产检时遇到各种问题，比如医生告诉你胎位不正了，脐带绕颈了等等，肯定会影响你的心情。事实上，有些宝宝一直到出生也只是浅入盆状态，有些宝宝在脐带绕颈两圈时同样顺产成功，因此，准星妈们，不要担心，一定要淡定哦！"
// },
// {
// "label": "孕35周",
// "desc": "身体变化：\n本周，准星妈会发现自己的子宫壁和腹壁变得很薄，有时候甚至可以看到宝宝的小脚丫。随着宝宝的增大及逐渐下降，准星妈也会感到腹坠腰酸以及盆骨后部肌肉和韧带得麻木，行动更加不变。\n\n心理变化：\n即将与宝宝见面了，想必准星妈的心情一定是既紧张又兴奋，还带着一些焦虑。宝宝少动一下，多动一下，都会引发准星妈的各种猜测。调皮的宝宝偶尔动动是很正常的，准星妈不必担心。但是如果准星妈感觉到腹痛或者下体出血等情况，千万要去医院检查确诊哦。"
// },
// {
// "label": "孕36周",
// "desc": "身体变化：\n本周，宝宝已经完全下沉到盆骨了，胎动减少。准星妈的肋骨和内脏器官会轻松不少，呼吸顺畅不少，连烧心的感觉也好转了。但是去卫生间的次数比之前更频繁了，腹股沟和腿部疼痛加重。起卧变得困难，有些准星妈腹部坠涨，甚至感觉到宝宝马上要出来了。\n\n心理变化：\n由于身体的不适感略有减轻，内脏开始归位，食欲也变得好起来，让准星妈心情好了不少。不过还即将有一个又一个的小状况正等着准星妈去经历。每每经历一种疼痛，意味着离宝宝出生更近一步，是愉悦的等待。"
// },
// {
// "label": "孕37周",
// "desc": "身体变化：\n大约有5%的准星妈会在预产期分娩，大多数准星妈会在孕产期前后两周生产。诸位准星妈一定要做好生产准备哦。这个周，宝宝在准星妈的腹中位置不断下降，下腹坠胀，不规则的宫缩频率增加，多为假宫缩，产前的宫缩是有规律的，持续时间长，间隔时间越来越短。\n\n心理变化：\n对于不少准星妈来说，这周的心情能稍微平静一些，宝宝足月了，随时有可能出来与你见面了，是不是有一种如释重负的感觉？准星妈要做好充足的分娩准备，听听舒缓的音乐，让复杂的心情归于平静。"
// },
// {
// "label": "孕38周",
// "desc": "身体变化：\n离分娩最后几周了，准星妈的脚有可能非常肿胀，在分娩后会消失。从本周开始，准星妈的子宫非常容易张口，要注意清洁外阴，坚决避免性行为。\n\n心理变化：\n这个周对于不少准星妈而言，又是难挨的一周。陷入极度的焦虑中，一方面盼望着宝宝早日降生，另一方面，又对分娩的痛苦有些恐惧。此时准妈妈可以和一些\"过来人\"交流一下，你会发现分娩过程其实并没有你想象的那么可怕。调整好心态，相信自己可以的！"
// },
// {
// "label": "孕39周",
// "desc": "身体变化：\n进入产前倒数第二周，部分准星妈的浮肿更加厉害了，疲惫感更甚，甚至连手指都变得粗大起来。如果准星妈出现有规律性的子宫收缩，或见红，或羊水早破，这可能是宝宝要出生了，准星妈要在家人的陪同下，及时去医院就诊。\n\n心理变化：\n有的准星妈可能会对即将到来的分娩，心情忐忑不安或者会对这段特殊的时期产生一种莫名的不舍。临产前的紧张和不安也越来越严重，担心宝宝的性别，担心宝宝是否健康，担心自己产后的恢复。一切已成定局，多想无益，在这最后的孕期，做一个开心快乐的孕妇吧！"
// },
// {
// "label": "孕40周",
// "desc": "1、脐带护理\n宝宝脐带脱落一般出生后的4-7天内，保持脐周清洁、干燥，若处理不好，感染而发生脐炎，会有生命危险。\n2、新生儿睡眠\n（1）养成规律睡眠\n出生婴儿每天睡眠时间平均16个小时，每个睡眠周期约45分钟，这样可以让新生宝宝渐渐养成良好睡眠习惯，更快入睡，夜醒更少。\n（2） 控制卧室的光与声\n小宝宝快要入睡时，调暗灯光的亮度，降低周围的声音，慢慢培养孩子对白天和黑夜的区分，这些都有助于高质量的睡眠。\n（3）可以先把新生婴儿放在床上，新手星妈躺在身旁，用手环绕着宝宝的体侧，让他感觉到仍然在星妈的怀抱中，很容易睡着。宝宝睡着以后，星妈们可以放一些毛绒玩具在宝宝身边，宝宝翻身的时候触碰到软软的东西，会感觉还是星妈的身体，就会接着香香地睡去。\n3、选择纯棉衣物\n用于宝宝的衣服和被褥家长要选择优质的纯棉材质，质地舒适、透气性好。\n4、舒适的宝宝房\n宝宝的房间要保证空气新鲜，温度适合，一般保持在22℃-25℃之间，湿度在55%-60%左右。\n5、洗澡护理\n宝宝的新陈代谢比较旺盛，所以每天要洗澡，让皮肤处于清洁状态。尤其耳后、颈部、腋下等褶皱处的清洁，清洁后用柔软的干毛巾擦拭。 洗澡时注意，要选用专为婴儿设计的沐浴露或者清水洗即可。"
// }
// ],
// "wheelOptionsYL": [
// {
// "label": "1月龄",
// "desc": "1、后囟门闭合\n宝宝出生后，由于颅骨尚未发育完全而存在缝隙，一般会在2-4个月的时间闭合。各位星爸星妈本周要重点关注这一点。囟门是反应宝宝头部发育和身体健康的重要窗口。如果发现囟门鼓起、囟门凹陷、囟门早闭、囟门迟闭、囟门过大或过小的情况，一定要及时就医。\n2、注意清洁护理\n（1）防止宝宝出现\"红下巴\"，宝宝流口水时，星爸星妈要用干净的手帕或者婴儿纸巾轻轻的蘸掉。如果流口水太多，可以适当的涂抹婴儿润肤油，避免宝宝下巴肌肤变红。\n（2）屁股也要重点关注，尤其是很多星爸星妈会给宝宝用尿不湿，当宝宝便便后，要及时清理，用温水在合适的室温下进行清理。\n3、提高宝宝嗅觉的灵敏度\n准备一些味道较大的东西，比如大蒜、香水、柠檬等，把各种味道的东西一个个拿到他的鼻子下面，注意观察他的表情，看他喜欢哪种味道。\n4、多抱抱、爱抚宝宝，经常用微笑、歌声逗引宝宝。"
// },
// {
// "label": "2月龄",
// "desc": "1.注意婴儿臀部护理\n宝宝大小便次数较多，尤其是母乳喂养的宝宝，有时候每天大便六七次，如果处理不当，容易出现红屁股和尿布疹，可以采取以下措施避免哦。\n（1）选用的尿布一定是布或者纱布的材质，质地要柔软，弱碱性肥皂洗涤干净并暴晒才可以给宝宝用。选择质量好的纸尿裤。\n（2）及时更换有了大小便的尿布，宝宝的肌肤太娇嫩，一点刺激就会变红。不要在宝宝体下垫橡胶、塑料等材质的垫子。\n（3）大便后，一定要给宝宝清洗小屁屁，并用干爽的纸擦干净，在阳光下晒一晒，等完全干了，再给宝宝重新换上纸尿裤或者尿布。\n2.训练宝宝俯卧抬头\n练习这个动作时，一定要选稍微硬点的地方，比如地板上，星爸星妈可以利用宝宝最喜欢的玩具吸引宝宝的目光，让宝宝抬头和扭动脖子，坚持一段时间，宝宝的脖子和上肢肌肉力量增强不少。"
// },
// {
// "label": "3月龄",
// "desc": "1.注意宝宝便秘的情况\n宝宝容易发生便秘，大便变少、变硬，尤其是喂养奶粉的宝宝，更易上火出现便秘情况。当宝宝出现便秘时，可用一部分新煮的粥米汤代替水来冲调奶粉，可采用三分之一或一半的粥汤代替水来调奶，以增加碳水化合物的量。也可给予适量的白开水、蜂蜜水进行补充。如果宝宝便秘的比较厉害，不能自行排便，及时去医院就诊。\n2.宝宝健身操\n3月龄的宝宝可以进行一些婴儿运动了，星爸星妈们可以让宝宝做一些简单的小动作。比如屈腿运动，双手握住宝宝的两脚脚腕，先同时伸直宝宝的腿，再同时屈腿，3次即可。"
// },
// {
// "label": "4月龄",
// "desc": "1、克服宝宝厌奶的情况\n这个时候的宝宝有可能出现厌奶的情况，主要时由于宝宝吮吸能力加强，前期喝奶过多。为了避免宝宝出现这种情况。在喂奶时，可以适度调低室内亮度，保持安静环境，少量多次，多调整喂奶姿势，仔细观察宝宝是否时因为感到不舒适厌奶。\n2、多与宝宝沟通交流\n这个时候的宝宝特别爱跟星妈们聊天，星妈们一定要有耐心、轻轻的与宝宝进行沟通，回应宝宝咿咿呀呀的声音。还可以给宝宝听一些明快欢乐的音乐，调动他的情绪。\n3、家中常备婴儿药。\n4个月左右的小宝宝容易感冒，感冒多发期不要带宝宝去往人多的公共场所。同时家中要常备药性温和的婴儿药，当宝宝感冒了，在配合医生治疗的同时，也要注意宝宝的休息和饮食。"
// },
// {
// "label": "5月龄",
// "desc": "谨防宝宝感冒\n1.5个多月的宝宝特别容易感冒，免疫力较低，容易被病毒感染。可以采取以下方法预防感冒。\n2.积极锻炼，经常开窗睡眠，参加一些户外活动和体育运动，例如宝宝爬行等。\n3.根据气温及时增添衣物，衣服穿得过多过少，室温过低或者过高、天气骤变都会成为宝宝感冒的诱因，星妈一定要注意，不要去有环境污染和有人吸烟的区域。当感冒频发期，尽量减少群体活动，避免宝宝之间的交叉感染。"
// },
// {
// "label": "6月龄",
// "desc": "培养宝宝喝白开水的习惯\n不管是母乳喂养还是配方奶粉喂养，宝宝都有可能出现上火的情况。为了宝宝的身体，让宝宝喝白开水势在必行。如何让宝宝逐渐适应喝白开水呢？小鹤这里给诸位星爸星妈支招了：\n1.当宝宝喝白开水时，星妈要及时鼓励宝宝，为宝宝鼓掌并夸奖，提高宝宝喝白开水的积极性。让宝宝喝白开水也要选宝宝心情好的时候，喂的过程中，如果宝宝不想喝了，要及时停止。\n2.在喂宝宝白开水时，同宝宝对话，一边逗弄宝宝，一边喂宝宝喝白开水，成功率会更高哦。\n3.如果宝宝还是对白开水有抗性，可以先给宝宝来一些鲜榨的、稀释过的、味道较淡的果汁，逐渐调稀，最后到白开水，降逐渐降低宝宝对白开水的抗拒。"
// },
// {
// "label": "7月龄",
// "desc": "帮助宝宝爬行\n1.爬行可是宝宝运动生涯重要的一环。有研究表明7、8月是训练宝宝爬行的重要时间。一般到7个月大左右，宝宝就能自然地开始爬行了，需要经历三个发展阶段，即匍匐爬行、手膝爬行及手脚爬行。\n2.星爸星妈们应该经常把宝宝放在地上，用玩具吸引宝宝移动身体，给宝宝做婴儿操、肢体训练，让宝宝动起来。"
// },
// {
// "label": "8月龄",
// "desc": "及时发现宝宝的视力问题\n1.宝宝的视力是在不断生长发育的，星爸星妈们要对宝宝的视觉生长提高警惕，多加观察，防止宝宝出现感染性的眼部疾病。\n2.如果发现宝宝总歪着头看人、斜着眼看人或仰头眯眼看电视，见光容易流泪等，就要注意了，需要立即去医院检查。\n3.用手电筒照宝宝的眼睛，宝宝会立即闭眼，继而把宝宝眼皮扒开，如果瞳孔缩小，这就是正常眼睛对光的反应。用一个鲜艳的玩具，距离宝宝20cm晃动，如果宝宝的眼睛和头能够随着物体的移动而移动，说明头眼协调正常。"
// },
// {
// "label": "9月龄",
// "desc": "注意宝宝衣物的挑选\n怎么给宝宝挑选衣物？让宝宝舒适的成长？这是一门学问，星爸星妈跟着小鹤一起看看吧！\n1.这个时期重点要关注的是宝宝的鞋子，宝宝可以站立甚至走步了，一双合适的鞋子是很重要。一般来说，在家中赤脚就可以，外出时，最好穿上鞋子。宝宝的学步鞋一定要买软底子，鞋底是布的。\n2.给宝宝选择衣服的时，应该选择材质透气、吸汗、柔软不易褪色的布料，以纯棉布料最佳。样式越简单越好，最好没有纽扣、拉链，这些硬物容易划伤宝宝皮肤，掉落后容易被宝宝塞进嘴里，尺码可以大些，让宝宝更加舒适。"
// },
// {
// "label": "10月龄",
// "desc": "注意给宝宝防晒\n1.宝宝越来越爱动了，也喜欢跟不同的小朋友交流。仅是家中的空间已经不能满足宝宝了，宝宝开始更加喜欢去室外活动。在户外活动时，因为宝宝皮肤娇嫩敏感，星爸星妈们要特别注意给宝宝防晒。\n2.注意选择合适的外出时间，夏季尽量避免在上午10点到下午2点外出。宝宝细嫩的皮肤不要直接暴露在阳光之下。外出时，要给宝宝穿轻便、透气性好的衣服；遮阳帽是必须的；宝宝专用防晒霜备起。并且，在辅食方面也要特别注意，避开菠菜、莴苣、芹菜这种感光性强的食物。"
// },
// {
// "label": "11月龄",
// "desc": "怎么给宝宝祛痱\n1.使用祛痱粉，是比较常用的方法，还可以用纱布粘煮开的金银花来洗，用棉签沾苦瓜汁涂在痱子上也很有效。\n2.想要预防宝宝生痱子，要多给宝宝洗澡，保持宝宝身体清洁。洗澡的时候加入防痱子的十滴水，可消炎治疗痱子，缓解宝宝长痱子引起的不适症状，止痒效果非常好。\n3.宝宝穿衣服时，让宝宝穿吸汗宽松的衣服，并勤换衣物。家中勤通风，保持环境的清凉。多给宝宝喝水等方式均可哦。"
// },
// {
// "label": "12月龄",
// "desc": "为什么不让宝宝抠肚脐：\n不少星爸星妈小时候都会听自己的爸爸妈妈说：\"不要抠肚脐眼，你要是肚子疼，爸爸妈妈可不管你哦。\"但是那时候很多人可能并不明白为什么不能抠肚脐眼，毕竟感觉里面有脏东西就想抠呢。小鹤鹤在这里郑重提醒星爸星妈，要告诉宝宝：肚脐眼千万不要抠哦。个中原由一起往下看吧！\n1.当宝宝出生后，连接在母婴身上的脐带就会被剪掉，剩下的一截脐带过几天就会自动脱落，从此就在宝宝身上留下了一个肚脐眼。所以肚脐处是人体腹壁最薄的地方，与宝宝的肠胃联系最为紧密，关乎宝宝的肠胃能力。如果宝宝的肚脐被抠或者清洗时用力过大，真的会肚子疼哦，严重时还会引起宝宝腹泻。再有一点，由于肚脐处的皮肤最薄，特别容易抠破，出血后容易被细菌侵袭。所有老话说得相当正确，肚脐眼是不能抠的！\n2.不过星爸星妈也是可以给宝宝清洗肚脐眼的哦，用棉签沾点润肤油轻涂在宝宝肚脐上，等待污垢软化，再用棉签轻擦去脏物。不要过于用力，不要用手抠，动作要轻柔；要迅速地处理完毕，因为宝宝的小肚子如果暴露在外时间过久，容易拉肚子哦。"
// },
// {
// "label": "13月龄",
// "desc": "宝宝开始学走路啦，小心跌伤哦！\n宝宝从蹒跚学步到逐渐走稳，是一个坎坷但充满成就感的过程。但是宝宝懵懂又好奇，并不懂得什么是危险，很容易跌伤。\n如宝宝从高处跌落到地上，撞击到头部，星爸星妈应注意观察宝宝哭声，如哭声大，哭后精神好，无呕吐，应不必担心；如哭后呕吐、昏睡，则证明问题严重，应及时到医院就医。\n但星爸星妈也不能因怕跌伤而限制宝宝活动，要保护宝宝的好奇心和好动的探索精神，使之在不断实践中学习知识及锻炼生活能力，可以把宝宝放在比较安全的地方，或者推着车子走，让宝宝的活动一直在大人的视线之中，预防跌伤。"
// },
// {
// "label": "14月龄",
// "desc": "在低处准备一些小抽屉，满足宝宝的好奇心：\n宝宝更喜欢四处探索，但还没有危险意识。一定要确保宝宝生活环境的安全，把有危险的物品锁起来或放到宝宝不可能拿到的地方。可以在柜子底层特别准备一两个抽屉专门给宝宝，里面放一些宝宝的玩具，并不定期更新，这样也能满足宝宝的好奇心和探索欲。但是要注意这些物品的卫生，经常清洗，保持洁净。"
// },
// {
// "label": "15月龄",
// "desc": "宝宝正在长牙，星爸星妈应该正确引导\n宝宝长牙时，牙龈会发痒，会去啃咬一些东西，如果护理不当，宝宝的牙龈可能会受伤，星妈在这个阶段应该这样帮助宝宝：\n1.选用一些适当的磨牙物品 ，如面包皮、磨牙棒、咬咬乐牙胶等，帮助宝宝锻炼牙龈。不过，当宝宝使用这些物品时，星爸星妈要一直陪着宝宝，避免宝宝因食物断裂噎到。\n2.佩戴专业出牙环：出牙环可以有效保护宝宝的牙龈，不过在使用前，星爸星妈应该认真阅读说明书，了解各类注意事项，保证宝宝的安全。\n3.实用无糖出牙凝胶：可以在药店购买专门为宝宝设计的无糖出牙凝胶，涂抹在宝宝的牙龈上，防止宝宝嘴里破损皮肤的感染，还可以有一定的镇痛作用。购买时一定要确保不含水杨酸盐哦。"
// },
// {
// "label": "16月龄",
// "desc": "如厕训练过程中，这些情况要注意：\n1.夜间如厕别着急，多数宝宝在经过2～3个月的如厕训练后，能够很好掌握日渐的如厕控制，但是夜间的如厕训练需要几个月甚至几年才能控制，因此睡觉时仍然要穿纸尿裤哦～\n2.宝宝抵触要喊停，强迫宝宝如厕，可能会让他们反感排便，形成便秘。而大便干硬会让排便更为困难，形成恶性循环。如果宝宝抵触坐便器，或者一是掌握不好用法，可以先给宝宝换上纸尿裤，过段时间再尝试。\n如厕训练本身就是宝宝成长过程中的一部分，星妈要做的就是遵循宝宝自身的发展规律，陪着宝宝长大。当宝宝突然尿裤子的时候，星妈一定一定不要责罚宝宝哦。"
// },
// {
// "label": "17月龄",
// "desc": "宝宝出现发热抽搐应该怎么办？\n热性惊厥就是我们平时说的\"烧抽搐了\"，一般只有2%～5%的孩子会出现热性惊厥。在3个月～5岁，刚开始发烧的时候可能会发生，再大一些就很少出现了。\n1.宝宝发烧时千万别捂汗，反而该散热。如果宝宝开始抽搐，一定要保持镇静！不要把任何东西伸进宝宝嘴里，也不要掐人中、灌开水，而是应该让宝宝侧卧，防止口水和呕吐物造成窒息。\n2.一般的热性惊厥在5分钟内都会停止，如果超过5分钟且没有停止的迹象时，那就应该及时就医。"
// },
// {
// "label": "18月龄",
// "desc": "宝宝晚上睡觉为什么会磨牙？\n宝宝睡觉磨牙可能是以下几种原因导致的：\n1.牙床疼、痒，换牙，牙齿咬合不正等口腔问题；\n2.睡前吃太饱、进餐时间不固定等消化问题；\n3.宝宝喜欢偏向一侧睡觉，挤压到咬肌；\n4.父母如果有磨牙症状，宝宝也更容易出现磨牙；\n5.睡前过于兴奋、紧张等\n当宝宝出现磨牙症状时，应该找准原因，对症治疗哦～"
// },
// {
// "label": "19月龄",
// "desc": "宝宝便秘了，应该怎么办？\n1.调整饮食结构，便秘的宝宝不宜吃过多蛋白质丰富的食物，如肉、蛋、海鲜等。可以适当多吃一些蔬菜、粗粮等。这有助于肠道发酵菌的发酵作用增强。辅食中适量添加油，也有助于大便通润。\n2.添加膳食纤维丰富的食物，有助于肠道蠕动、缓解便秘。在主食内添加一部分粗粮，也有助于宝宝通便～\n3.多喝水，便秘时补充水分软化肠道内的分辨，可以改善宝宝便秘的情况。\n4.养成按时排便的习惯，让宝宝每天同一时间在马桶上至少10分钟，这样执行半月到一个月的时间，一般能养成按时排便的习惯。"
// },
// {
// "label": "20月龄",
// "desc": "宝宝长水痘，不能抓，应该怎么办？\n水痘是一种常见的传染病，如果病情不严重，水痘一般不需要特殊治疗。长水痘会很痒，宝宝会忍不住抓挠患处，这样不仅容易留下疤痕，还可能会引起感染，星妈可以这样做：\n1、冷敷或者用药。如果实在瘙痒难忍，可以冷敷或者在水痘未破的情况下涂抹炉甘石洗剂来缓解。\n2、保持良好的卫生习惯。定期帮宝宝修剪指甲，可以减少水痘抓破时造成的感染。每天用清水清洁宝宝的身体，然后用毛巾轻轻擦干，保持皮肤的清洁和干燥。\n3、缓解发烧症状。如果宝宝发烧，可以在询问医生后使用对乙酰氨基酚来缓解发热和出疹带来的不适。"
// },
// {
// "label": "21月龄",
// "desc": "宝宝湿疹应该如何预防？\n湿疹不仅让宝宝痒的难受，还会反复找上门，因此星妈需要做到以下两点：保湿+防过敏\n1.保湿。不要用沐浴乳、肥皂、泡泡浴给宝宝洗澡，温度在28～32摄氏度的热水就够了。不然容易洗掉宝宝皮肤的保护膜。洗完澡后，趁着宝宝皮肤还没有干透，马上用润肤霜涂满宝宝的全身。\n2.防过敏。避免羊毛或粗织物接触宝宝皮肤、养宠家庭做好清洁，是防止动物皮屑、毛发等造成宝宝过敏的重要方法。同时全家都应该戒烟，哪怕是三手烟也会让宝宝的湿疹变得严重。"
// },
// {
// "label": "22月龄",
// "desc": "随着宝宝双手灵巧性的增强，星爸星妈要提前做好一些防护性的工作。\n1.可以购买一些婴幼儿安全防护装置，如厨房里电插座上的安全防护罩、冰箱门上的防护装置、燃气灶开关防护罩、马桶盖卡、防止门被风刮上时的防夹手夹、尖角家具的防护角等，可根据家中情况选择适合的防护装置。\n2.选择带有儿童锁的家用电器，如洗衣机、冰箱、电饭锅等设备，应该设置儿童锁，避免工作时伤害到宝宝。"
// },
// {
// "label": "23月龄",
// "desc": "如何帮宝宝挑选防晒霜：\n对于精致的星妈来说，防晒霜是一年必备的护肤品，在选择时也有诸多考量，但那也比不过给宝宝挑选防晒霜。现在的宝宝可以涂防晒了，小家伙这么爱在户外跑着玩，娇嫩的皮肤又特别敏感，所以防晒是必不可少的。如何给宝宝选择防晒霜呢？这里小鹤鹤给诸位星妈支支招吧！\n1.尽量选择 SPF 在 15～30 之间的防晒霜，并选择宝宝专用防晒霜。一般以氧化锌或二氧化钛的成分为主的防晒乳液，相对其他成分为主的防晒产品，不容易刺激宝宝皮肤，过敏的可能性也比较小，相对安全。\n2.尽量不要选用喷雾式的防晒霜，虽然对好动的宝宝来说使用起来很方便，但是万一宝宝不小心吸入防晒霜，会对身体不好哦。\n3.不要选择含有二苯甲酮和维生素A的防晒霜。二苯甲酮会渗透皮肤，进入血液，类似体内的雌激素，甚至引发宝宝过敏反应。而维生素A棕榈酸酯在阳光下会加速皮肤产生肿瘤和病变。\n4.出门涂了防晒霜，星妈应该在回到家的第一时间帮宝宝清洗掉。如果让防晒霜长时间停留在宝宝肌肤上，会对宝宝娇嫩的肌肤不利哦！"
// },
// {
// "label": "24月龄",
// "desc": "如何保护宝宝的视力：\n3岁之前是宝宝视力发育的黄金时期，这阶段宝宝的眼睛正在逐步发育中，尚未成熟，比较脆弱和敏感。而由于电子产品的流行，很多宝宝早早的就玩上了电脑和手机。小鹤鹤想要告诉星爸星妈，要保护好宝宝的视力哦，因为这将影响宝宝未来的成长发育哦。那么怎么保护宝宝的视力呢？小鹤鹤来给大家支支招。\n1.及时补充各类营养元素。\n维生素A、维生素B和C对宝宝的视力发展都是有好处的，维生素A会促进宝宝的视力发育，缺乏维生素B会让宝宝的眼睛感觉疲劳，缺少维生素C会导致宝宝眼睛干涩。同时也要注重钙和锌的补充，尤其是缺锌可能会导致宝宝视力障碍。宝宝眼部组织修补也需要充足的蛋白质，星爸星妈可以为宝宝制定合理的饮食计划。\n2.让宝宝少玩电子产品。\n长时间使用电子产品对宝宝的视力发展有极大的危害，甚至有些宝宝因为长时间看电视，早早就患上了青光眼。星爸星妈要控制宝宝看电视、玩手机或其他电子产品的时间，否则将会对宝宝的视力造成难以挽回的损害。\n3.多陪伴宝宝度过一些家庭时光。\n同时，星爸星妈也要以身作则，在家的时候，多陪陪宝宝玩玩游戏，看看书，享受一下惬意的亲子时光，少玩手机和电脑！"
// },
// {
// "label": "25月龄",
// "desc": "如何矫正宝宝用口呼吸的习惯？\n如果宝宝幼年时期一直用口呼吸，没有做相应的矫正，可能会造成脸型的永久性结构变化。长期用嘴呼吸还会影响睡眠质量，细菌更容易侵入嘴巴，导致口腔疾病的发生。因此当发现宝宝有口呼吸的习惯时，星妈应该这样做：\n1.不要过度使用奶嘴，及时制止宝宝吮吸手指的习惯，否则容易影响牙齿和脸型的发育。\n2.引导宝宝将舌头放置在正确位置。舌头的正确摆放位置在上颚正中间凸出部分的最前端。\n3.训练孩子平时有意识闭嘴。及时参加激烈的运动，也要多多练习用鼻子呼吸。"
// },
// {
// "label": "26月龄",
// "desc": "预防扁桃体发炎，应该怎么办？\n免疫力较低的宝宝，扁桃体动不动就发炎：肿大、疼痛、高烧...面对扁桃体发炎，星妈应该这样预防：\n1、认真洗手，切断病菌传染源，尤其是上厕所后和吃饭前。\n2、专器专用：尽量避免宝宝和其他人共用杯子、碗筷。\n3、增强体质：鼓励宝宝参加体育锻炼，提升免疫力和抵抗力。"
// },
// {
// "label": "27月龄",
// "desc": "感染了诺如病毒，如何做好家庭护理？\n宝宝感染诺如病毒后，星爸星妈可以在家这样护理：\n1.如果宝宝频繁呕吐，可以尝试禁食1～2小时后再重新尝试喂养，如果不吐了，就可以少量多餐，挑选一些清淡、营养丰富的食物。如果呕吐情况严重，要及时就医。\n2.诺如病毒对宝宝最大的影响就是大量的水样腹泻，宝宝除了丢失掉水分，还会造成电解质紊乱。所以星爸星妈一定要防脱水！可以给宝宝喝口服补液盐，帮助宝宝维持体内水分与酸碱电解质平衡。\n3.晨起和傍晚时，要注意测量宝宝体温。通常情况下，即便发热，只要精神状态良好，通过正常护理，一般都会逐渐恢复。"
// },
// {
// "label": "28月龄",
// "desc": "宝宝咳嗽，怎样让宝宝舒服些？\n1.保持呼吸道湿润，适当增加空气湿度，让宝宝感觉舒服一些。\n2.经常开窗通风。污浊的空气可能会对宝宝的呼吸道产生刺激，引发咳嗽。\n3.多喝温开水。温开水能湿润呼吸道，稀释黏在喉部的痰液，减少因空气干燥导致的咳嗽，帮助痰液排出。\n4.适当的户外活动。每天10～15分钟的户外活动，对宝宝的身体恢复有利。"
// },
// {
// "label": "29月龄",
// "desc": "如何预防手足口病？\n手足口病是通过病菌进入口腔传播的，因此星妈们的预防重点就是防止\"病从口入\"\n1.注射疫苗。一般建议，6月龄～5岁的宝宝尽早接种自费的EV71疫苗。会显著减少手足口病重症和死亡的发生。\n2.勤洗手。星妈们要为宝宝做好示范，教会宝宝正确的洗手方法。\n3.咳嗽喷嚏时掩住口鼻。同时还要教会宝宝，在别人打喷嚏、咳嗽的时候尽量扭过头去避开。\n4.日常用品多消毒。肠道病毒最怕紫外线和高温煮沸消毒，可以用这两种方式给宝宝的用品消毒。"
// },
// {
// "label": "30月龄",
// "desc": "给宝宝买玩具，一定要注意玩具的安全性。\n玩具的材料应该是无毒无害的，因为宝宝经常会将玩具含在口中或用牙咬，所以买玩具时，要注意以下几点：\n1.不要买易剥脱漆和带有小零件的、用了含铅染料的或非食用型塑料的玩具\n2.不要给宝宝买尖锐的、坚硬的、沉重的、高度旋转的、向前速度快的、能蒙住宝宝口鼻的、易于缠绕的玩具\n3.选购玩具要记住以下几原则：有趣、有益、无害、不贵"
// },
// {
// "label": "31月龄",
// "desc": "被蚊子叮咬后，应该如何处理？\n大多数情况下，蚊子叮咬的肿块会自行消退，星爸星妈可以用以下方法处理：\n1.教育宝宝不要抓挠伤口，抓伤会导致感染。\n2.用温和无刺激的肥皂或清水清洗患处。\n3.给宝宝涂一些芦荟胶、蜂蜜、炉甘石洗剂等抑制瘙痒。"
// },
// {
// "label": "32月龄",
// "desc": "宝宝流鼻血，这样处理才正确\n1.保持冷静，妈妈慌乱宝宝会更害怕，哭闹不止，会增加流血量。\n2.让宝宝保持坐或站的姿势，头微微前倾。注意不要让宝宝平躺或后仰，也不要用纸巾棉花塞住鼻孔，防止血液进入胃部引起呕吐。\n3.用拇指和食指捏住宝宝的鼻翼，保持至少十分钟。注意中途不要松开手检查是否止血。十分钟后如果没有止血，继续按压十分钟。如果两次按压都没止住鼻血，就要尽快就医。\n4.止血后，接下来的24小时内不要让宝宝做剧烈的运动，也要格外注意，不要让宝宝挖鼻孔或者用力擤鼻子，以免再次出血。"
// },
// {
// "label": "33月龄",
// "desc": "宝宝得了咽炎怎么办？\n咽炎病因复杂，多数是因为病毒或细菌等病原体感染引起的。其他病因包括胃食道返流、过敏、鼻后滴漏综合症、粉尘烟雾环境、用嗓过度等各种因素。\n1.病毒性咽炎具有自限性，通常1周左右就会自愈，对症治疗即可。高热时使用退烧药，注意合理饮食、补液、漱口，以及避免宝宝大喊大叫。\n2.细菌感染的咽炎需要抗生素治疗。\n3.如果长期反复咽炎发作，需要注意是否有胃食管返流、鼻炎、鼻窦炎等疾病情况，需要针对病因处理。"
// },
// {
// "label": "34月龄",
// "desc": "窝沟封闭，几岁做最好？\n窝沟封闭，就是将宝宝大牙上凹凸不平的缝隙和裂痕天平，利用封闭剂阻碍细菌、食物残渣，减少龋齿等问题的发生。窝沟封闭最好在宝宝的大牙完全长好后、未被蛀之前做。\n宝宝的六龄齿一旦萌出就代表已经步入了恒牙的队伍，终身不会替换，因此也是最容易发生龋齿的牙齿，所以一定要保护好，及时做好护理。\n做窝沟封闭并不会痛，也没有副作用，宝宝只要张口配合就好，大概两集动画片的时间（30分钟左右），就结束啦～"
// },
// {
// "label": "35月龄",
// "desc": "让宝宝喝水的正确方法\n1.视觉吸引法：挑选宝宝喜欢的杯子，吸引宝宝的注意力，让宝宝产生喝水的兴趣。\n2.味觉吸引法：在水里加几片新鲜水果，比如柠檬、草莓、苹果、橙子、西瓜等，让宝宝爱上喝水。\n3.游戏引导法：直接让宝宝喝水，宝宝可能会拒绝，但是可以和宝宝一起做游戏，比如\"小猪佩奇喝水，汪汪队喝水，宝宝也跟着喝一口水\"、\"我们比赛，谁先找到爸爸的钥匙，就喝一杯水\"～\n4.榜样激励法：星爸星妈也要养成爱喝水的好习惯，带动宝宝一起喝水哦～"
// },
// {
// "label": "36月龄",
// "desc": "如何鼓励宝宝做家务？\n1.认真夸奖宝宝。细致观察宝宝做家务时的点滴进步，并且积极鼓励宝宝。当宝宝犯错时，也不要给予批评，而是要耐心地帮助宝宝认识到错误。\n2.全家一起做家务。每周选择一个时间，全家人一起配合做家务，通力合作的时候，宝宝的表现会更好哦。\n3.抽出时间耐心教导。宝宝的注意力和记忆力有限，星爸星妈应该多陪宝宝做家务，将复杂的工作分解成宝宝可以理解的简单步骤。"
// },
// {
// "label": "36月龄+",
// "desc": "3岁以上宝宝如何独立探索成长里程碑？\n1.身体能力发展：给宝宝穿魔术贴鞋子、松紧腰裤子，让他自己学穿衣吃饭，别嫌慢别怕脏，星爸星妈忍住别帮忙。\n2.认知与语言引导：宝宝整天问\"为什么\"？星爸星妈耐心回答，别嫌烦。比如宝宝问树叶为啥变黄，就说\"秋天到了树叶要休息啦\"。多问宝宝\"你画的房子有窗户吗？\"，让宝宝多说话。\n3.生活习惯培养：出门带便携小马桶，提醒宝宝\"想尿尿要告诉妈妈哦\"。晚上戒尿布别着急，睡前少喝水，慢慢减少尿布使用。\n4.责任意识启蒙：让宝宝负责收玩具、擦桌子，做完夸他\"宝宝把积木收得好整齐！\"。每天给他小选择，比如\"今天穿红衣服还是蓝衣服？\"\"午饭吃米饭还是面条？\"。\n3岁后宝宝想自己探索世界，星爸星妈在安全范围内放手，多夸少批评。让宝宝觉得自己\"我能行\"，同时教他遵守规则。"
// }
// ],
// "tool": [
// [
// {
// "link": {
// "extra": {},
// "type": 1,
// "url": "/pages/naming/naming"
// },
// "title": "星妈起名",
// "desc": "星妈起名",
// "bgUrl": "my/naming_new.png"
// },
// {
// "link": {
// "extra": {},
// "type": 1,
// "url": "/pages/library/ContentLibrary"
// },
// "title": "育儿百科",
// "desc": "育儿百科",
// "bgUrl": "my/literature.png"
// },
// {
// "link": {
// "extra": {},
// "type": 3,
// "url": "https://wic.feihe.com"
// },
// "title": "产品溯源",
// "desc": "产品溯源",
// "bgUrl": "my/suyuan.png"
// },
// {
// "link": {
// "extra": {},
// "type": 3,
// "url": "https://mom.feihe.com/babyWikipedia"
// },
// "title": "奶娃宝典",
// "desc": "奶娃宝典",
// "bgUrl": "my/book.png"
// },
// {
// "link": {
// "extra": {},
// "type": 2,
// "url": "/pages/partner/redirect"
// },
// "title": "医生问诊",
// "desc": "医生问诊",
// "bgUrl": "my/doctor.png"
// },
// {
// "link": {
// "extra": {},
// "type": 3,
// "url": "https://ali.xudankeji.com/play/rCeXjMai"
// },
// "title": "宝宝体质测试",
// "desc": "宝宝体质测试",
// "bgUrl": "my/babytest.png"
// }
// ]
// ],
// "contentCfg": {
// "activeInfo": [
// {
// "img": "https://course.feihe.com/momclub-picture/my/activeImg0.png",
// "url": "subPackages/shopMainList/topicNew/index?id=1000911",
// "type": 2,
// "extra": {
// "appId": "wx4205ec55b793245e",
// "envVersion": "release"
// }
// },
// {
// "img": "https://course.feihe.com/momclub-picture/my/activeImg1.png",
// "url": "subPackages/shopMainList/topicNew/index?id=1000912",
// "type": 2,
// "extra": {
// "appId": "wx4205ec55b793245e",
// "envVersion": "release"
// }
// }
// ],
// "productLikeOptions": [
// "飞鹤星飞帆",
// "星飞帆卓睿",
// "星飞帆卓耀",
// "星飞帆卓初",
// "星飞帆臻稚卓蓓",
// "星飞帆淳芮有机"
// ],
// "contentLikeOptions": [
// "奶粉选择",
// "奶粉成分",
// "奶粉冲泡",
// "宝宝奶量",
// "生长发育",
// "常见疾病",
// "体检疫苗",
// "饮食营养补充",
// "辅食营养",
// "亲子关系",
// "早教游戏"
// ],
// "specialAttentionOptions": [
// "过敏",
// "长肉",
// "肠道",
// "消化",
// "脑发育"
// ],
// "channelOptions": [
// "电商（京东/天猫）",
// "母婴店"
// ]
// }
// }
if (!data) return;
this.toolList = data?.tool?.[0] || [];
......
views/Brand.vue
View file @ 17d20f25
<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"
<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">
<swiper-item v-for="(item, index) in swiperList" :key="index">
<view class="swiper-item banneritem">
<image :data-log="{
xcxClick: '品牌故事-首屏页面点击',
......@@ -19,87 +19,150 @@
</swiper>
<view class="swiperbox">
<view class="iconbox">
<image :data-log="{
<!-- <image :data-log="{
xcxClick: '品牌故事-首屏页面点击',
pageName: '品牌故事-首屏页面',
buttonName: `按钮-${swiperNameList[index]}`
}" @tap="jumpSwiper(index, $event)" class="icon"
:src="swiperIndex === index ? $baseUrl + icon.activeUrl : $baseUrl + icon.baseUrl"
v-for="(icon, index) in swiperIconList" :key="index"></image>
v-for="(icon, index) in swiperIconList" :key="index"></image> -->
<image :src="$baseUrl + 'brandpage/indicatorDotsBg.png'" class="indicatorDotsBg"></image>
<view class="indicatorDots">
<template class="dotbox" v-for="(item, index) in swiperIconList" :key="index">
<view class="dot" :class="swiperIndex === index ? 'dot-active' : 'dot-normal'">
</view>
</template>
<text class="dotText">{{ swiperIconList[swiperIndex]?.text }}</text>
</view>
</view>
</view>
<view class="videoposterbox">
<image :data-log="{
<video v-if="video1Channel.videoUrl" class="videoposter" :src="$baseUrl + video1Channel.videoUrl"
:autoplay="false" :data-log="{
xcxClick: '品牌故事-次屏页面点击',
pageName: '品牌故事-首屏页面',
buttonName: '腰部品牌Video'
}" :poster="video1Channel.posterUrl ? $baseUrl + video1Channel.posterUrl : ''"
object-fit="cover" @loadedmetadata="onVideoLoadedMeta"></video>
<image v-else :data-log="{
xcxClick: '品牌故事-次屏页面点击',
pageName: '品牌故事-首屏页面',
buttonName: '腰部品牌Video'
}" @tap="openChannel" class="videoposter" :src="$baseUrl + 'brandpage/videoposter.png'">
}" @tap="openChannel(video1Channel, $event)" class="videoposter" :src="$baseUrl + video1Channel.posterUrl">
</image>
</view>
<view id="secondScreen" class="productcontai">
<text class="maintitle">飞鹤产品家族</text>
<view class="listbox">
<view @tap="channelTabHandler(index, $event)" :data-log="{
xcxClick: '品牌故事-次屏页面点击',
pageName: '品牌故事-次屏页面',
buttonName: `${item}`
}" :class="channelTabIndex === index ? 'tabitem tabActive' : 'tabitem'"
v-for="(item, index) in productTabList" :key="index">
{{ item }}
</view>
</view>
<view v-if="productInfoList.length > 0" class="productbox">
<view class="infobox" :key="index" v-for="(infoItem, index) in productInfoList[channelTabIndex]"
:data-log="{
<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">
<view class="tab-container">
<view @tap="channelTabHandler(index, $event)" :data-log="{
xcxClick: '品牌故事-次屏页面点击',
pageName: '品牌故事-次屏页面',
buttonName: `${productTabList[channelTabIndex] + '中的' + infoItem.title}+'商品'`
}"
@tap="jumpProduct(infoItem, $event)">
<view class="flexbox">
<view class="infotitle">
{{ infoItem.title }}
buttonName: `${item}`
}" :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">
<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="{
background: `url(${$baseUrl}brandpage/infoBoxBg.png) no-repeat center/contain`
}" :data-log="{
xcxClick: '品牌故事-次屏页面点击',
pageName: '品牌故事-次屏页面',
buttonName: `${productTabList[channelTabIndex] + '中的' + infoItem.title}+'商品'`
}" @tap="jumpProduct(infoItem, $event)">
<view class="flexbox">
<view class="infotitle">
{{ infoItem.title }}
</view>
<image class="infoimg" :src="$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="{
background: `url(${$baseUrl}brandpage/infoBoxBg.png) no-repeat center/contain`
}" :data-log="{
xcxClick: '品牌故事-次屏页面点击',
pageName: '品牌故事-次屏页面',
buttonName: `${productTabList[channelTabIndex] + '中的' + infoItem.title}+'商品'`
}" @tap="jumpProduct(infoItem, $event)">
<view class="flexbox">
<view class="infotitle">
{{ infoItem.title }}
</view>
<image class="infoimg" :src="$baseUrl + infoItem.bgUrl"></image>
</view>
<view class="infodesc">{{ infoItem.desc }}</view>
</view>
<image class="infoimg" :src="$baseUrl + infoItem.bgUrl"></image>
</view>
<view class="infodesc">{{ infoItem.desc }}</view>
</view>
</view>
</scroll-view>
</view>
<view id="thirdScreen" class="ipbox">
<image :data-log="{
xcxClick: '品牌故事-三屏页面点击',
pageName: '品牌故事-三屏页面',
buttonName: `全家形象`
}" @tap="showPopup(1, $event)" class="iphexiaofei" :src="$baseUrl + 'brandpage/iphexiaofei.png'"></image>
<view class="videoposterbox">
<video v-if="video2Channel.videoUrl" class="videoposter" :src="$baseUrl + video2Channel.videoUrl"
:autoplay="false" :poster="video2Channel.posterUrl ? $baseUrl + video2Channel.posterUrl : ''"
object-fit="cover" @loadedmetadata="onVideoLoadedMeta"></video>
<image v-else class="videoposter" @tap="openChannel(video2Channel, $event)"
:src="$baseUrl + video2Channel.posterUrl">
</image>
</view>
<view id="thirdScreen" class="ipbox"
: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>
</store-product>
<view class="ipcard">
<view class="title">
飞鹤品牌IP<view class="t1">鹤小飞一家</view>
{{ erqiPeizhi.title2 }}
<!-- <view class="t1">鹤小飞一家</view> -->
</view>
<view class="desc">
{{ ipDesc }}
</view>
<view class="ipflex">
<view class="ipbg ip1">
<image :data-log="{
xcxClick: '品牌故事-三屏页面点击',
pageName: '品牌故事-三屏页面',
buttonName: `${hexiaofeiNameList[0]}`
}" @tap="showPopup(1, $event)" :src="$baseUrl + 'brandpage/ip1.png'">
</image>
</view>
<view class="ipright">
<view class="ipbg ip2">
<store-product appid="wx1ad0903b95889ea1" product-id="10000239570622" custom-content="true">
<image :data-log="{
xcxClick: '品牌故事-三屏页面点击',
pageName: '品牌故事-三屏页面',
buttonName: `${hexiaofeiNameList[1]}`
}" @tap="showPopup(1, $event)" :src="$baseUrl + 'brandpage/ip2.png'">
buttonName: `${hexiaofeiNameList[0]}`
}" :src="erqiPeizhi.ipImg1">
</image>
</store-product>
</view>
<view class="ipright">
<view class="ipbg ip2">
<store-product appid="wx1ad0903b95889ea1" product-id="10000239356280"
custom-content="true">
<image :data-log="{
xcxClick: '品牌故事-三屏页面点击',
pageName: '品牌故事-三屏页面',
buttonName: `${hexiaofeiNameList[1]}`
}" :src="erqiPeizhi.ipImg2">
</image>
</store-product>
</view>
<view style="display: flex;justify-content: space-between;margin-top: 20rpx;">
<view class="ipbg ip3">
......@@ -107,15 +170,16 @@
xcxClick: '品牌故事-三屏页面点击',
pageName: '品牌故事-三屏页面',
buttonName: `${hexiaofeiNameList[2]}`
}" @tap="showPopup(0, $event)" :src="$baseUrl + 'brandpage/ip3.png'">
}" @tap="showPopup(0, $event)" :src="erqiPeizhi.ipImg3">
</image>
</view>
<view class="ipbg ip4">
<image :data-log="{
xcxClick: '品牌故事-三屏页面点击',
pageName: '品牌故事-三屏页面',
buttonName: `${hexiaofeiNameList[3]}`
}" @tap="showPopup(2, $event)" :src="$baseUrl + 'brandpage/ip4.png'">
}" @tap="showPopup(2, $event)" :src="erqiPeizhi.ipImg4">
</image>
</view>
</view>
......@@ -126,15 +190,17 @@
</view>
</view>
<view v-if="esgInfoList.length > 0" class="esgbox">
<text class="maintitle">飞鹤ESG</text>
<text class="subtitle">关注祖国下一代的营养、教育和陪伴</text>
<text class="maintitle">{{ erqiPeizhi.title3 }}</text>
<!-- <text class="subtitle">关注祖国下一代的营养、教育和陪伴</text> -->
<view class="channelscroll">
<view class="box">
<view class="infobox" :key="index" v-for="(infoItem, index) in esgInfoList" :data-log="{
<view class="infobox" :key="index" v-for="(infoItem, index) in esgInfoList"
:style="{ background: `url(${$baseUrl}brandpage/esgItemBg.png) no-repeat center/505rpx 638rpx` }"
:data-log="{
xcxClick: `品牌故事-三屏页面点击`,
pageName: `品牌故事-三屏页面ESG点击`,
buttonName: `${index+1}-${infoItem.desc}`
}" @tap="jumpLink(infoItem.link,false,$event)">
buttonName: `${index + 1}-${infoItem.desc}`
}" @tap="jumpLink(infoItem.link, false, $event)">
<image class="infoimg" :src="$baseUrl + infoItem.bgUrl"></image>
<view class="infotitle">{{ infoItem.desc }}</view>
<view class="infodesc">{{ infoItem.desc2 }}</view>
......@@ -235,11 +301,12 @@ export default {
}
},
},
data() {
return {
popType: 'bottom',
swiperList: [],
erqiPeizhi: {},
indicatorDots: false,
autoplay: true,
interval: 4000,
......@@ -264,16 +331,18 @@ export default {
swiperNameList: ["北纬47°入口", "自有牧场入口", "工厂预约入口"],
hexiaofeiNameList: ["主要竖屏商品", "主要横屏商品", "视频号", "小红书"],
exposureTracker: null,
video1Channel: {},
video2Channel: {},
}
},
mounted() {
this.initBrandInfo();
// 初始化曝光检测工具
this.exposureTracker = new ExposureTracker(this);
this.exposureTracker.addExposureElements(EXPOSURE_CONFIGS);
// 初始检查曝光
this.$nextTick(() => {
this.checkExposure(this.scrollTop);
......@@ -282,8 +351,584 @@ export default {
methods: {
async initBrandInfo() {
const { data } = await fetchBrandJSON();
// const data = {
// "erqiPeizhi": {
// "title1": "飞鹤产品家族",
// "title2": "飞鹤品牌IP鹤小飞一家",
// "title3": "飞鹤ESG",
// "iphexiaofeiUrl": "https://course.feihe.com/momclub-picture/brandpage/iphexiaofei.png",
// "ipImg1": "https://course.feihe.com/momclub-picture/brandpage/v1_ip1.png",
// "ipImg2": "https://course.feihe.com/momclub-picture/brandpage/v1_ip2.png",
// "ipImg3": "https://course.feihe.com/momclub-picture/brandpage/ip3.png",
// "ipImg4": "https://course.feihe.com/momclub-picture/brandpage/ip4.png"
// },
// "swiperList": [
// {
// "videoUrl": "https://course.feihe.com/momclub-picture/brandpage/bannerVideo.mp4",
// "link": {},
// "url": "brandpage/Banner41.png"
// },
// {
// "link": {
// "extra": {},
// "type": 3,
// "url": "https://mp.weixin.qq.com/s/0eMxbWB3R_0g06HZPUEj5Q"
// },
// "url": "brandpage/Banner42.png"
// },
// {
// "videoUrl": "https://course.feihe.com/momclub-picture/brandpage/bannerVideoHeitu.mp4",
// "link": {},
// "url": "brandpage/Banner33.png"
// },
// {
// "link": {
// "extra": {},
// "type": 3,
// "url": "https://factory.feihe.com/user/#/web"
// },
// "url": "brandpage/Banner44.png"
// }],
// "product": [
// [
// {
// "productId": "",
// "shareTitle": "星飞帆经典 3段",
// "link": "",
// "contentImgLen": 20,
// "title": "超凡 吸收",
// "skuId": "",
// "shareImg": "brandpage/products/share/0/0_1.jpg",
// "contentImg": "0-1",
// "desc": "星飞帆经典 3段",
// "bgUrl": "brandpage/pic_0_1.png"
// },
// {
// "productId": "",
// "shareTitle": "星飞帆卓睿 3段",
// "link": "",
// "contentImgLen": 25,
// "title": "顶配 脑育",
// "skuId": "",
// "shareImg": "brandpage/products/share/0/0_2.jpg",
// "contentImg": "0-2",
// "desc": "星飞帆卓睿 3段",
// "bgUrl": "brandpage/pic_0_2.png"
// },
// {
// "productId": "",
// "shareTitle": "星飞帆卓耀 3段",
// "link": "",
// "contentImgLen": 28,
// "title": "亲和 自护",
// "skuId": "",
// "shareImg": "brandpage/products/share/0/0_3.jpg",
// "contentImg": "0-3",
// "desc": "星飞帆卓耀 3段",
// "bgUrl": "brandpage/pic_0_3.png"
// },
// {
// "productId": "749098220531287139",
// "shareTitle": "爱本跃动蛋白营养粉",
// "link": "",
// "contentImgLen": 15,
// "title": " 4维 效力",
// "skuId": "749098220531287140",
// "shareImg": "brandpage/products/share/0/0_4.jpg",
// "contentImg": "0-4",
// "desc": "爱本跃动蛋白营养粉",
// "bgUrl": "brandpage/pic_0_4.png"
// },
// {
// "productId": "693279214116405585",
// "shareTitle": "高钙奶酪泡芙脆",
// "link": "",
// "contentImgLen": 15,
// "title": "高钙 爆脆",
// "skuId": "693279214116405586",
// "shareImg": "brandpage/products/share/0/0_5.jpg",
// "contentImg": "0-5",
// "desc": "高钙奶酪泡芙脆",
// "bgUrl": "brandpage/pic_0_5.png"
// },
// {
// "productId": "555503303308649561",
// "shareTitle": "北纬47度黄糯玉米",
// "link": "",
// "contentImgLen": 5,
// "title": "软糯 Q弹",
// "skuId": "555503303308649562",
// "shareImg": "brandpage/products/share/0/0_6.jpg",
// "contentImg": "0-6",
// "desc": "北纬47度黄糯玉米",
// "bgUrl": "brandpage/pic_0_6.png"
// }
// ],
// [
// {
// "productId": "",
// "shareTitle": "星飞帆经典 3段",
// "link": "",
// "contentImgLen": 20,
// "title": "超凡 吸收",
// "skuId": "",
// "shareImg": "brandpage/products/share/1/1_1.jpg",
// "contentImg": "1-1",
// "desc": "星飞帆经典 3段",
// "bgUrl": "brandpage/pic_1_1.png"
// },
// {
// "productId": "",
// "shareTitle": "星飞帆卓睿 3段",
// "link": "",
// "contentImgLen": 25,
// "title": "顶配 脑育",
// "skuId": "",
// "shareImg": "brandpage/products/share/1/1_2.jpg",
// "contentImg": "1-2",
// "desc": "星飞帆卓睿 3段",
// "bgUrl": "brandpage/pic_1_2.png"
// },
// {
// "productId": "",
// "shareTitle": "星飞帆卓耀 3段",
// "link": "",
// "contentImgLen": 28,
// "title": "亲和 自护",
// "skuId": "",
// "shareImg": "brandpage/products/share/1/1_3.jpg",
// "contentImg": "1-3",
// "desc": "星飞帆卓耀 3段",
// "bgUrl": "brandpage/pic_1_3.png"
// },
// {
// "productId": "",
// "shareTitle": "星飞帆卓睿A2奶源",
// "link": "",
// "contentImgLen": 20,
// "title": "顶配 A 2",
// "skuId": "",
// "shareImg": "brandpage/products/share/1/1_4.jpg",
// "contentImg": "1-4",
// "desc": "星飞帆卓睿A2奶源",
// "bgUrl": "brandpage/pic_1_4.png"
// },
// {
// "productId": "",
// "shareTitle": "臻稚卓蓓 3段",
// "link": "",
// "contentImgLen": 28,
// "title": "活性 有机",
// "skuId": "",
// "shareImg": "brandpage/products/share/1/1_5.jpg",
// "contentImg": "1-5",
// "desc": "臻稚卓蓓 3段",
// "bgUrl": "brandpage/pic_1_5.png"
// },
// {
// "productId": "",
// "shareTitle": "臻爱倍护 3段",
// "link": "",
// "contentImgLen": 20,
// "title": "高端 乳铁",
// "skuId": "",
// "shareImg": "brandpage/products/share/1/1_6.jpg",
// "contentImg": "1-6",
// "desc": "臻爱倍护 3段",
// "bgUrl": "brandpage/pic_1_6.png"
// }
// ],
// [
// {
// "productId": "749098220531287139",
// "shareTitle": "爱本跃动蛋白营养粉",
// "link": "",
// "contentImgLen": 20,
// "title": " 4维 效力",
// "skuId": "749098220531287140",
// "shareImg": "brandpage/products/share/2/2_1.jpg",
// "contentImg": "2-1",
// "desc": "爱本跃动蛋白营养粉",
// "bgUrl": "brandpage/pic_2_1.png"
// },
// {
// "productId": "748659115456528889",
// "shareTitle": "爱本牛初乳",
// "link": "",
// "contentImgLen": 15,
// "title": "初乳 精华",
// "skuId": "7748659115456528890",
// "shareImg": "brandpage/products/share/2/2_2.jpg",
// "contentImg": "2-2",
// "desc": "爱本牛初乳",
// "bgUrl": "brandpage/pic_2_2.png"
// },
// {
// "productId": "768991288915277214",
// "shareTitle": "爱本每日蛋白营养糊",
// "link": "",
// "contentImgLen": 15,
// "title": "每日 蛋白",
// "skuId": "768991288915277215",
// "shareImg": "brandpage/products/share/2/2_3.jpg",
// "contentImg": "2-3",
// "desc": "爱本每日蛋白营养糊",
// "bgUrl": "brandpage/pic_2_3.png"
// },
// {
// "productId": "767546274051183809",
// "shareTitle": "爱本纤纤益生菌羽衣甘蓝蛋白粉",
// "link": "",
// "contentImgLen": 10,
// "title": "腰腹 燃脂",
// "skuId": "767546274051183810",
// "shareImg": "brandpage/products/share/2/2_4.jpg",
// "contentImg": "2-4",
// "desc": "爱本纤纤益生菌\n羽衣甘蓝蛋白粉",
// "bgUrl": "brandpage/pic_2_4.png"
// },
// {
// "productId": "749443379821195324",
// "shareTitle": "爱本参芝初乳肽",
// "link": "",
// "contentImgLen": 10,
// "title": "药食 同源",
// "skuId": "749443379821195325",
// "shareImg": "brandpage/products/share/2/2_5.jpg",
// "contentImg": "2-5",
// "desc": "爱本参芝初乳肽",
// "bgUrl": "brandpage/pic_2_5.png"
// },
// {
// "productId": "753354110711035152",
// "shareTitle": "爱本悦眠功能粉",
// "link": "",
// "contentImgLen": 15,
// "title": "一夜 天亮",
// "skuId": "753354110711035153",
// "shareImg": "brandpage/products/share/2/2_6.jpg",
// "contentImg": "2-6",
// "desc": "爱本悦眠功能粉",
// "bgUrl": "brandpage/pic_2_6.png"
// }
// ],
// [
// {
// "productId": "759563658744492290",
// "shareTitle": "爱上吃菜乳酪",
// "link": "",
// "contentImgLen": 10,
// "title": "高钙 高纤",
// "skuId": "759563658744492293",
// "shareImg": "brandpage/products/share/3/3_1.jpg",
// "contentImg": "3-1",
// "desc": "爱上吃菜乳酪",
// "bgUrl": "brandpage/pic_3_1.png"
// },
// {
// "productId": "693279214116405585",
// "shareTitle": "高钙奶酪泡芙脆",
// "link": "",
// "contentImgLen": 15,
// "title": "高钙 爆脆",
// "skuId": "693279214116405586",
// "shareImg": "brandpage/products/share/3/3_2.jpg",
// "contentImg": "3-2",
// "desc": "高钙奶酪泡芙脆",
// "bgUrl": "brandpage/pic_3_2.png"
// },
// {
// "productId": "693279214116405585",
// "shareTitle": "高纤黑巧乳酪",
// "link": "",
// "contentImgLen": 10,
// "title": "醇香 黑巧",
// "skuId": "693279214116405586",
// "shareImg": "brandpage/products/share/3/3_3.jpg",
// "contentImg": "3-3",
// "desc": "高纤黑巧乳酪",
// "bgUrl": "brandpage/pic_3_3.png"
// },
// {
// "productId": "716141706338247497",
// "shareTitle": "超新星水果奶酪",
// "link": "",
// "contentImgLen": 15,
// "title": "10倍 奶钙",
// "skuId": "716141706338247498",
// "shareImg": "brandpage/products/share/3/3_4.jpg",
// "contentImg": "3-4",
// "desc": "超新星水果奶酪",
// "bgUrl": "brandpage/pic_3_4.png"
// },
// {
// "productId": "717871366421930449",
// "shareTitle": "厚切流心芝士片",
// "link": "",
// "contentImgLen": 10,
// "title": "浓郁 爆浆",
// "skuId": "717871366421930450",
// "shareImg": "brandpage/products/share/3/3_5.jpg",
// "contentImg": "3-5",
// "desc": "厚切流心芝士片",
// "bgUrl": "brandpage/pic_3_5.png"
// },
// {
// "productId": "551135905055024574",
// "shareTitle": "嚼奶粉乳酪",
// "link": "",
// "contentImgLen": 10,
// "title": "洁净 配方",
// "skuId": "596810081919086853",
// "shareImg": "brandpage/products/share/3/3_6.jpg",
// "contentImg": "3-6",
// "desc": "嚼奶粉乳酪",
// "bgUrl": "brandpage/pic_3_6.png"
// }
// ],
// [
// {
// "productId": "545768683314537529",
// "shareTitle": "北纬47度白甜糯玉米",
// "link": "",
// "contentImgLen": 5,
// "title": "含有 叶酸",
// "skuId": "545770687080957074",
// "shareImg": "brandpage/products/share/4/4_1.jpg",
// "contentImg": "4-1",
// "desc": "北纬47度白甜糯玉米",
// "bgUrl": "brandpage/pic_4_1.png"
// },
// {
// "productId": "555503303308649561",
// "shareTitle": "北纬47度黄糯玉米",
// "link": "",
// "contentImgLen": 5,
// "title": "软糯 Q弹",
// "skuId": "555503303308649562",
// "shareImg": "brandpage/products/share/4/4_2.jpg",
// "contentImg": "4-2",
// "desc": "北纬47度黄糯玉米",
// "bgUrl": "brandpage/pic_4_2.png"
// },
// {
// "productId": "469675861496440509",
// "shareTitle": "北纬47度低GI水果玉米粒袋装",
// "link": "",
// "contentImgLen": 5,
// "title": "开袋 即食",
// "skuId": "469675861496440510",
// "shareImg": "brandpage/products/share/4/4_3.jpg",
// "contentImg": "4-3",
// "desc": "北纬47度低GI水果玉米粒袋装",
// "bgUrl": "brandpage/pic_4_3.png"
// },
// {
// "productId": "733411972814471679",
// "shareTitle": "北纬47度东北烧烤味玉米段",
// "link": "",
// "contentImgLen": 5,
// "title": "秘制 工艺",
// "skuId": "733468301522154622",
// "shareImg": "brandpage/products/share/4/4_4.jpg",
// "contentImg": "4-4",
// "desc": "北纬47度东北烧烤味玉米段",
// "bgUrl": "brandpage/pic_4_4.png"
// },
// {
// "productId": "733411972814471679",
// "shareTitle": "N47°植物酵素乳",
// "link": "",
// "contentImgLen": 10,
// "title": "0乳糖 低GI",
// "skuId": "733468301522154622",
// "shareImg": "brandpage/products/share/4/4_5.jpg",
// "contentImg": "4-5",
// "desc": "N47°植物酵素乳",
// "bgUrl": "brandpage/pic_4_5.png"
// },
// {
// "productId": "705230699873112222",
// "shareTitle": "N47°水果玉米汁",
// "link": "",
// "contentImgLen": 8,
// "title": "轻卡 低GI",
// "skuId": "705230699873112223",
// "shareImg": "brandpage/products/share/4/4_6.jpg",
// "contentImg": "4-6",
// "desc": "N47°水果玉米汁",
// "bgUrl": "brandpage/pic_4_6.png"
// }
// ],
// [
// {
// "productId": "739634042657637394",
// "shareTitle": "飞鹤臻贵儿童配方奶粉",
// "link": "",
// "contentImgLen": 10,
// "title": "向上 成长",
// "skuId": "739635029460743612",
// "shareImg": "brandpage/products/share/4/4_1.jpg",
// "contentImg": "5-11",
// "desc": "飞鹤臻贵儿童配方奶粉",
// "bgUrl": "brandpage/pic_5_1.png"
// },
// {
// "productId": "770087385697019251",
// "shareTitle": "飞鹤臻贵悦智配方奶粉",
// "link": "",
// "contentImgLen": 10,
// "title": "悦享 活力",
// "skuId": "770087385697019252",
// "shareImg": "brandpage/products/share/4/4_2.jpg",
// "contentImg": "5-21",
// "desc": "飞鹤臻贵悦智配方奶粉",
// "bgUrl": "brandpage/pic_5_2.png"
// },
// {
// "productId": "584206109842248681",
// "shareTitle": "飞鹤牧场浓厚纯牛奶",
// "link": "",
// "contentImgLen": 10,
// "title": "浓厚 醇香",
// "skuId": "743707906122896598",
// "shareImg": "brandpage/products/share/4/4_3.jpg",
// "contentImg": "5-31",
// "desc": "飞鹤牧场浓厚纯牛奶",
// "bgUrl": "brandpage/pic_5_3.png"
// },
// {
// "productId": "411619746805715934",
// "shareTitle": "六水香长粒香大米",
// "link": "",
// "contentImgLen": 8,
// "title": "当季 新米",
// "skuId": "411619746805715935",
// "shareImg": "brandpage/products/share/4/4_4.jpg",
// "contentImg": "5-41",
// "desc": "六水香长粒香大米",
// "bgUrl": "brandpage/pic_5_4.png"
// },
// {
// "productId": "675921531863073227",
// "shareTitle": "红富士晒晒苹果肉",
// "link": "",
// "contentImgLen": 10,
// "title": "三蒸 三晒",
// "skuId": "675921531863073230",
// "shareImg": "brandpage/products/share/4/4_5.jpg",
// "contentImg": "5-51",
// "desc": "红富士晒晒苹果肉",
// "bgUrl": "brandpage/pic_5_5.png"
// },
// {
// "productId": "599340570081015525",
// "shareTitle": "内衣专护洗衣液",
// "link": "",
// "contentImgLen": 11,
// "title": "深层 洁净",
// "skuId": "599340570081015526",
// "shareImg": "brandpage/products/share/4/4_6.jpg",
// "contentImg": "5-61",
// "desc": "内衣专护洗衣液",
// "bgUrl": "brandpage/pic_5_6.png"
// }
// ]
// ],
// "videoUrl": "https://course.feihe.com/momclub-picture/brandpage/banner_1%E6%85%A2%E4%BA%BA%E8%8A%82x%E9%A3%9E%E9%B9%A4%2B-%2B%E5%9C%9FFINAL.mp4",
// "esgInfoList": [
// [
// {
// "desc2": "飞鹤践行低碳节能，打造绿色产业链；承担 龙头责任，引领行业创新发展；履行社会责 任，构建共富共享生态。",
// "link": {
// "extra": {},
// "type": 3,
// "url": "https://mp.weixin.qq.com/s/UebPA-2XenAdw7lTs2NttA"
// },
// "desc": "中国飞鹤发布2024年ESG报告",
// "bgUrl": "brandpage/esg1.png"
// },
// {
// "desc2": "中国飞鹤于2025年4月初在全国范围内启动 总规模为12亿元，为符合条件的孕期家庭提 供不少于1500元生育补贴的飞鹤生育补贴",
// "link": {
// "extra": {},
// "type": 3,
// "url": "https://mp.weixin.qq.com/s/TpjCyjCf2Df3t1RMfi-JKQ"
// },
// "desc": "12亿元生育补贴计划",
// "bgUrl": "brandpage/esg2.png"
// },
// {
// "desc2": "百年大计，教育为本；教育大计，教师为本。 近三年来，飞鹤已投入超过6500万元开展专 项助教活动，惠及在职专任教师超过28万人",
// "link": {
// "extra": {},
// "type": 3,
// "url": "https://mp.weixin.qq.com/s/fvo6LV95tCIPA_lda9L7zw"
// },
// "desc": "教育公益",
// "bgUrl": "brandpage/esg3.png"
// }
// ]
// ],
// "video1Channel": {
// "videoUrl": "brandpage/videoChannel/video1Channel/V1/1.mp4",
// "posterUrl": "",
// "finderUserName": "sphgexisAi0pRGm",
// "feedId": "export/UzFfAgtgekIEAQAAAAAABbEMmxr36QAAAAstQy6ubaLX4KHWvLEZgBPEgaJkYSYbLr6JzNPgMJp7tTZCYcYsIpU6Z0fgSnSE"
// },
// "video2Channel": {
// "videoUrl": "brandpage/videoChannel/video2Channel/V1/1.mp4",
// "posterUrl": "",
// "finderUserName": "",
// "feedId": ""
// },
// "qrInfoList": [
// {
// "qrUrl": "brandpage/qrhxf_sph.png",
// "title": "视频号",
// "desc": "扫码关注<span style='color:#D3A358;'>鹤小飞一家</span>视频号，看超多有爱的趣味故事"
// },
// {
// "qrUrl": "brandpage/qrhxf_wxxd.png",
// "title": "微信小店",
// "desc": "扫码进入<span style='color:#D3A358;'>鹤小飞一家</span>店铺，挑选精美限量周边"
// }
// ],
// "productTabList": [
// "全部",
// "母婴全阶",
// "功能营养",
// "儿童产品",
// "北纬47°",
// "星妈优选"
// ],
// "swiperIconList": [
// {
// "text": "北纬47°生态",
// "baseUrl": "brandpage/corn1.png",
// "activeUrl": "brandpage/corn2.png"
// },
// {
// "text": "13家自有牧场",
// "baseUrl": "brandpage/cattle1.png",
// "activeUrl": "brandpage/cattle2.png"
// },
// {
// "text": "北纬47°有机黑土",
// "baseUrl": "brandpage/factory1.png",
// "activeUrl": "brandpage/factory2.png"
// }, {
// "text": "工厂游预约",
// "baseUrl": "brandpage/factory1.png",
// "activeUrl": "brandpage/factory2.png"
// }
// ],
// "ipDesc": "鹤小飞一家是由鹤爸、鹤妈、鹤小飞（哥哥）、鹤小小（妹妹） 组成的一家。\n四口热爱生活、积极向上，是他们一家对生活的态度。"
// };
if (data) {
this.swiperList = data.swiperList;
this.erqiPeizhi = data.erqiPeizhi;
this.productTabList = data.productTabList;
this.productInfoList = data.product;
this.esgInfoList = data.esgInfoList[0] || [];
......@@ -295,13 +940,14 @@ export default {
data.videoUrl = this.$baseUrl + data.videoUrl;
}
this.currentVideoUrl = data.videoUrl;
this.channel = data.channel;
this.video1Channel = data.video1Channel;
this.video2Channel = data.video2Channel;
}
},
intervalChange(e) {
this.swiperIndex = e.target.current;
},
jumpSwiper(_index, evt) {
jumpSwiper(_index, evt) {//点indicator切换图片
if (evt) {
md.sensorLog(evt);
}
......@@ -342,6 +988,16 @@ export default {
md.sensorLog(evt);
}
this.channelTabIndex = _index;
// 自动滚动到选中的tab
this.$nextTick(() => {
const scrollView = uni.createSelectorQuery().select('.listbox');
if (scrollView) {
scrollView.scrollOffset((res) => {
// 这里可以添加额外的滚动逻辑
}).exec();
}
});
},
showPopup(_index, evt) {
if (evt) {
......@@ -361,6 +1017,7 @@ export default {
pageName: `品牌故事-鹤小飞家族小红书二维码半屏`,
});
}
this.$refs.popup.open(this.popType);
},
closePop() {
......@@ -415,12 +1072,12 @@ export default {
this.showVideo = false;
this.currentVideoUrl = '';
},
openChannel(evt) {
openChannel(videoChannel, evt) {
if (evt) {
md.sensorLog(evt);
}
const finderUserName = this.channel.finderUserName;
const feedId = this.channel.feedId;
const finderUserName = videoChannel.finderUserName;
const feedId = videoChannel.feedId;
uni.openChannelsActivity({
finderUserName,
feedId,
......@@ -454,7 +1111,13 @@ export default {
if (this.exposureTracker) {
this.exposureTracker.resetAllExposure();
}
}
},
//跳转微店
// 商品ID
// 10000239356280
// 商品ID
// 10000239570622
}
}
</script>
......@@ -463,6 +1126,8 @@ export default {
@import '@/common.less';
.brand-container {
background-color: #fff;
.content {
padding-bottom: 200rpx;
......@@ -483,34 +1148,91 @@ export default {
.swiperbox {
position: absolute;
top: 1002rpx;
width: 650rpx;
left: 50rpx;
width: 196rpx;
left: 50%;
transform: translateX(-50%);
.iconbox {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
.icon {
width: 200rpx;
height: 200rpx;
}
.indicatorDotsBg {
position: absolute;
width: 196rpx;
height: 77rpx;
}
.indicatorDots {
// margin-left: 19rpx;
margin-top: 21rpx;
display: flex;
align-items: center;
justify-content: center;
width: 196rpx;
height: 10rpx;
position: relative;
.dot {
// transition: all 0.3s ease;
cursor: pointer;
}
.dot-active {
width: 26rpx;
height: 10rpx;
border-radius: 5rpx;
background-color: #ffffff;
margin-right: 5rpx;
margin-left: 5rpx;
}
.dot-normal {
width: 10rpx;
height: 10rpx;
border-radius: 5rpx;
margin-right: 5rpx;
margin-left: 5rpx;
background-color: rgba(255, 255, 255, 0.6);
}
.dotText {
margin-top: 56rpx;
position: absolute;
font-size: 17rpx;
color: #fff;
text-align: center;
font-weight: bold;
width: 196rpx;
// top: 50%;
// transform: translateY(-50%);
pointer-events: none;
}
}
}
}
.videoposterbox {
width: 686rpx;
height: 384rpx;
margin-left: 32rpx;
width: 640rpx;
height: 360rpx;
margin-left: 55rpx;
margin-top: 32rpx;
overflow: hidden;
border-radius: 24rpx;
.videoposter {
width: 686rpx;
height: 384rpx;
width: 100%;
height: 100%;
border-radius: 24rpx;
object-fit: cover;
}
}
......@@ -535,43 +1257,89 @@ export default {
}
.listbox {
display: flex;
margin-top: 10rpx;
margin-top: 15rpx;
width: 686rpx;
align-content: center;
justify-content: space-between;
white-space: nowrap;
.tabitem {
color: @color-black-deep;
background-color: #e9edf1;
padding: 15rpx 20rpx;
font-size: 22rpx;
// margin-right: 15rpx;
border-radius: 30rpx;
}
.tab-container {
display: flex;
align-items: center;
padding: 0 20rpx;
min-width: 100%;
.tabActive {
color: white;
background-color: @color-gold-main;
.tabitem {
color: @color-black-deep;
background-color: #e9edf1;
padding: 15rpx 20rpx;
font-size: 22rpx;
margin-right: 15rpx;
border-radius: 30rpx;
flex-shrink: 0;
white-space: nowrap;
transition: all 0.3s ease;
cursor: pointer;
&:last-child {
margin-right: 0;
}
&:active {
transform: scale(0.95);
}
}
.tabActive {
color: white;
background-color: @color-gold-main;
box-shadow: 0 2rpx 8rpx rgba(211, 163, 88, 0.3);
}
}
}
.productbox {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 686rpx;
height: 545rpx;
overflow-x: auto;
margin-top: 30rpx;
.product-grid {
display: flex;
flex-direction: column;
height: 100%;
width: max-content;
.product-row {
display: flex;
flex-direction: row;
height: 50%;
align-items: center;
margin-bottom: 20rpx;
&:last-child {
margin-bottom: 0;
}
.infobox {
margin-right: 20rpx;
flex-shrink: 0;
&:last-child {
margin-right: 0;
}
}
}
}
.infobox {
width: 330rpx;
height: 330rpx;
width: 273rpx;
height: 263rpx;
background-color: white;
border-radius: 24rpx;
margin-top: 32rpx;
// margin-top: 32rpx;
.flexbox {
display: flex;
margin-top: 80rpx;
margin-top: 25rpx;
align-items: center;
justify-content: center;
......@@ -580,7 +1348,7 @@ export default {
font-weight: 400;
width: 100rpx;
color: @color-black-deep;
margin-left: 36rpx; //一点偏移量
margin-left: 15rpx; //一点偏移量
text-align: center;
}
......@@ -597,9 +1365,9 @@ export default {
align-items: center;
font-size: 24rpx;
color: @color-black-deep;
width: 100%;
width: 260rpx;
text-align: center;
height: 100rpx;
height: 90rpx;
white-space: pre-wrap;
}
......@@ -613,27 +1381,27 @@ export default {
}
.ipbox {
width: 702rpx;
height: 734rpx;
width: 674rpx;
height: 922rpx;
position: relative;
left: 24rpx;
left: 36rpx;
border-radius: 24rpx;
background-color: white;
top: 200rpx;
top: 50rpx;
.iphexiaofei {
width: 374rpx;
height: 298rpx;
position: absolute;
top: -188rpx;
top: 15rpx;
left: 165rpx;
}
.ipcard {
position: absolute;
padding: 32rpx;
top: 110rpx;
padding: 15rpx;
top: 313rpx;
.title {
display: flex;
......@@ -642,7 +1410,7 @@ export default {
font-weight: bold;
.t1 {
color: @color-gold-cover;
color: @color-black-deep;
}
}
......@@ -656,7 +1424,7 @@ export default {
.ipflex {
display: flex;
justify-content: space-between;
margin-top: 20rpx;
margin-top: 30rpx;
.ipbg {
border-radius: 24rpx;
......@@ -669,6 +1437,7 @@ export default {
.ip1 {
width: 288rpx;
height: 380rpx;
overflow: hidden;
image {
width: 195rpx;
......@@ -716,7 +1485,7 @@ export default {
}
.esgbox {
margin-top: 248rpx;
margin-top: 128rpx;
margin-left: 32rpx;
.maintitle {
......@@ -764,8 +1533,10 @@ export default {
display: flex;
.infobox {
margin-left: 15rpx;
margin-left: 0rpx;
margin-right: 30rpx;
width: 503rpx;
height: 638rpx;
.infoimg {
width: 500rpx;
......@@ -778,6 +1549,7 @@ export default {
text-align: left;
font-weight: bold;
margin-top: 10rpx;
margin-left: 20rpx;
}
.infodesc {
......@@ -785,6 +1557,7 @@ export default {
color: black;
margin-top: 10rpx;
padding-right: 40rpx;
margin-left: 20rpx;
}
}
}
......
views/Home.vue
View file @ 17d20f25
<template>
<view class="home-container" @scroll="onPageScroll">
<view class="content">
<swiper id="firstScreen" class="swiper banner" circular :autoplay="autoplay" :interval="interval"
:duration="duration" :indicator-dots="false" @change="onBannerSwiperChange">
<swiper-item v-for="(item, index) in swiperList" :key="item.url">
<view class="swiper-item banneritem">
<image @tap="jumpBannerHandler(item, index)" class="b-img" :src="$baseUrl + item.url"></image>
</view>
</swiper-item>
</swiper>
<!-- <view class="swiper-mask">
<image class="swiper-mask-img" :src="$baseUrl + 'homepage/home_format_v2.png'"></image>
</view> -->
<!-- 自定义指示点，仿照示意图 -->
<view class="custom-banner-indicator">
<view v-for="(item, idx) in swiperList" :key="item.url + idx"
:class="['banner-dot', { 'active': idx === bannerCurrentIndex }]"></view>
</view>
<view class="barbox" :style="`top:${statusBarHeight}px;`">
<image class="btnlogo" :src="$baseUrl + 'homepage/btnlogo.png'"></image>
<image :data-log="{
xcxClick: '首页-首屏页面点击',
pageName: '首页-首屏',
buttonName: '搜索框'
}" class="btnsearch" @tap="goSearchHandler" :src="$baseUrl + 'homepage/btnsearch.png'">
</image>
<view class="customer-btn-wrap">
<image :data-log="{
xcxClick: '首页-首屏页面点击',
pageName: '首页-首屏',
buttonName: '客服入口'
}" @tap="goCustomerHandler" class="btncustomer" :src="$baseUrl + 'homepage/btncustomer.png'">
</image>
<button v-if="homeStore && !homeStore.isLogin" open-type="getPhoneNumber"
@getphonenumber="onGetPhoneNumber" class="phone-auth-btn-cover"></button>
</view>
</view>
<!-- <view :data-log="{
xcxClick: '首页-首屏页面点击',
pageName: '首页-首屏',
buttonName: '文字资源位入口'
}" @tap="showPopup(1, $event)" class="txtbox">
<text class="txtlink">星妈会医生在线答疑群，为孩子成长保驾护航</text>
<image class="icon_arrow_yellow" :src="$baseUrl + 'homepage/icon_arrow_yellow.png'"></image>
</view> -->
<!--推荐工具-->
<view 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"
:next-margin="'0rpx'" :previous-margin="'0'" @change="onSwiperChange">
<swiper-item v-for="(item, index) in toolList.tools" :key="index"
:class="['swiperItem', { 'active': currentIndex === index }]" @click="handleToolClick(item)">
<view class="tool">
<image class="tool_bg" :src="$baseUrl + item.icon"></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>
</swiper-item>
</swiper>
<!-- 自定义指示点 -->
<view class="custom-indicator">
<view v-for="(item, index) in toolList.tools" :key="index" class="indicator-dot"
:class="{ 'active': currentIndex === index }">
</view>
</view>
</view>
<!--推荐工具-->
<!--专家团-->
<view class="et_box">
<view class="et_maintitle">{{ expertTeam.maintitle }}</view>
<view :data-log="{
xcxClick: '首页-首屏页面点击',
pageName: '首页-首屏',
buttonName: '文字资源位入口'
}" @tap="showPopup(1, $event)" class="et_subtitle">
<view class="txtlink">星妈会医生在线答疑群，为孩子成长保驾护航</view>
<image class="icon_more" :src="$baseUrl + 'homepage/et_more.png'"></image>
</view>
<view class="et_main_box">
<view class="et_con_bg">
<view class="et_tab_box">
<view class="tab_box" @tap="onSelEtTap(0)">
<image class="et_tab" v-show="etTabSelIndex == 0"
:src="$baseUrl + 'homepage/et_sel_tab1.png'">
</image>
<image class="et_tab" v-show="etTabSelIndex != 0"
:src="$baseUrl + 'homepage/et_tab1.png'">
</image>
</view>
<view class="tab_box" @tap="onSelEtTap(1)">
<image class="et_tab" v-show="etTabSelIndex == 1"
:src="$baseUrl + 'homepage/et_sel_tab2.png'">
</image>
<image class="et_tab" v-show="etTabSelIndex != 1"
:src="$baseUrl + 'homepage/et_tab2.png'">
</image>
</view>
<view class="tab_box" @tap="onSelEtTap(2)">
<image class="et_tab" v-show="etTabSelIndex == 2"
:src="$baseUrl + 'homepage/et_sel_tab3.png'">
</image>
<image class="et_tab" v-show="etTabSelIndex != 2"
:src="$baseUrl + 'homepage/et_tab3.png'">
</image>
</view>
</view>
<view class="et_con_box">
<image class="et_con1" v-if="etTabSelIndex == 0" :src="$baseUrl + expertTeam.etConUrl1">
</image>
<image class="et_con2" v-if="etTabSelIndex == 1" :src="$baseUrl + expertTeam.etConUrl2">
</image>
<image class="et_con3" v-if="etTabSelIndex == 2" :src="$baseUrl + expertTeam.etConUrl3">
</image>
</view>
<view class="et_more_txt" @tap="onETMore">
<text class="txtlink">点击查看更多</text>
<image class="icon_arrow_yellow" :src="$baseUrl + 'homepage/icon_arrow_yellow.png'"></image>
</view>
</view>
</view>
</view>
<!--专家团-->
<!-- <view class="cardScroller">
<view class="cardbox">
<view class="cardboxitem" v-for="cardData in vipCardList" :key="cardData.level">
<image :data-log="{
xcxClick: '首页-首屏页面点击',
pageName: '首页-首屏',
buttonName: `腰部banner-${cardData.level}`
}" @tap="jumpLinkCard(cardData, $event)" class="bg" :src="$baseUrl + cardData.bgUrl"></image>
<text class="level">{{ cardData.level }}</text>
<text class="subTitle">{{ cardData.subTitle }}</text>
<view class="showCornerTxt" v-if="cardData.showCornerTxt && cardData.showCornerTxt.length > 0">
{{ cardData.showCornerTxt }}
</view>
<view v-if="cardData.btnTitle && cardData.btnTitle.length > 0" :data-log="{
xcxClick: '首页-首屏页面点击',
pageName: '首页-首屏',
buttonName: `腰部banner-${cardData.level}`
}" class="cardbtn" @tap="jumpLinkWithLogin(cardData.link, $event)">
<image class="cardbtnbg" :src="$baseUrl + 'homepage/btn_receive.png'"></image>
<text class="btnTitle" :style="cardData.btnTitle.length > 7 ? 'font-size:22rpx;' : ''">{{
cardData.btnTitle }}</text>
<text class="btnSubTitle">{{ cardData.btnSubTitle }}</text>
<button v-if="homeStore && !homeStore.isLogin" open-type="getPhoneNumber"
@getphonenumber="onGetPhoneNumber" class="phone-auth-btn-cover"></button>
</view>
</view>
</view>
</view> -->
<!-- <view class="contentbox" id="secondScreen">
<image class="contentbg" :src="$baseUrl + 'homepage/contentbg.png'" alt="" />
<image class="contentitem" :key="index" :style="contentItem._style"
v-for="(contentItem, index) in contentImgList" :src="$baseUrl + contentItem.bgUrl" :data-log="{
xcxClick: '首页-二屏页面点击',
pageName: '首页-二屏',
buttonName: `品牌介绍${index + 1}`
}" @tap="jumpLink(contentItem.link, contentItem.videoUrl, index, $event)"></image>
</view> -->
<view class="channelbox">
<text class="maintitle">{{ childrenInfoListMianTitle }}</text>
<view class="subtitle_box">
<text class="subtitle">从专业到实用，一站式解决你的育儿难题</text>
<image class="icon_more" :src="$baseUrl + 'homepage/home_more_btn_v2.png'" :data-log="{
xcxClick: '首页-三屏页面点击',
pageName: '首页-三屏',
buttonName: `次位内容资源位-查看更多文字`
}" @tap="jumpLink(suggest.link, false, false, $event)"></image>
</view>
<view class="channelscroll">
<view class="box">
<view class="infobox" :key="index" v-for="(infoItem, index) in childrenInfoList" :data-log="{
xcxClick: '首页-三屏页面点击',
pageName: '首页-三屏',
buttonName: `次位内容资源位-轮播-${index + 1}`
}" @tap="jumpLink(infoItem.link, false, false, $event)">
<image class="infoimg" :src="$baseUrl + infoItem.bgUrl"></image>
<view class="infotitlebox">
<view class="infotitlecon">
<view class="infotitle">{{ infoItem.desc }}</view>
<image v-if="infoItem.isNew" class="infotitletag"
:src="$baseUrl + 'homepage/home_new_tag_v3.png'">New</image>
</view>
<view class="infodesc">{{ infoItem.desc2 }}</view>
</view>
</view>
</view>
</view>
<!-- <view :data-log="{
xcxClick: '首页-三屏页面点击',
pageName: '首页-三屏',
buttonName: `次位内容资源位-查看更多文字`
}" @tap="jumpLink(suggest.link, false, false, $event)" class="desc desc2">
更多星妈会权威专家服务团 <view class="desc1"> 点击查看 > </view>
</view> -->
</view>
<view class="channelbox" id="thirdScreen">
<text class="maintitle">{{ channelTabListMianTitle }}</text>
<view class="subtitle_box">
<text class="subtitle">用声音传递爱与智慧，守护宝贝成长的每一步</text>
<image class="icon_more" :src="$baseUrl + 'homepage/home_more_btn_v2.png'" :data-log="{
xcxClick: '首页-三屏页面点击',
pageName: '首页-三屏',
buttonName: `首位内容资源位-查看更多文字`
}" @tap="jumpLink(voiceStory.link, false, false, $event)"></image>
</view>
<view class="listbox">
<view @tap="channelTabHandler(index, $event)" :data-log="{
xcxClick: '首页-三屏页面点击',
pageName: '首页-三屏',
buttonName: `首页内容资源位分类${index + 1}-${item}`
}" :class="channelTabIndex === index ? 'tabitem tabActive' : 'tabitem'" v-for="(item, index) in channelTabList"
:key="index">
{{ item }}
</view>
</view>
<view class="channelscroll2">
<view class="box2">
<view class="infobox2" :key="index"
v-for="(infoItem, index) in changelInfoList[channelTabIndex]" :data-log="{
xcxClick: '首页-三屏页面点击',
pageName: '首页-三屏',
buttonName: `首页内容资源位分类${channelTabIndex + 1}-${channelTabList[channelTabIndex]}-${index + 1}`
}" @tap="jumpLink(infoItem.link, false, false, $event)">
<image class="infoimg2" :src="$baseUrl + infoItem.bgUrl"></image>
<view class="infotitle2box">
<view class="infotitle2">{{ infoItem.desc }}</view>
</view>
</view>
</view>
</view>
<!-- <view :data-log="{
xcxClick: '首页-三屏页面点击',
pageName: '首页-三屏',
buttonName: `首位内容资源位-查看更多文字`
}" @tap="jumpLink(voiceStory.link, false, false, $event)" class="desc">
滑动或者点击查看全部 <view class="desc1"> 有声故事 > </view>
</view> -->
</view>
<view id="fourthScreen" class="bottomlink">
<image class="bottombg" :src="$baseUrl + 'homepage/bottombg.png'"></image>
<view class="box">
<image class="icon" v-for="(icon, index) in bottomLinkList" :key="index" :data-log="{
xcxClick: '首页-四屏页面点击',
pageName: '首页-四屏',
buttonName: `${qrNameList[index]}`
}" :src="$baseUrl + icon.bgUrl" :style="icon._style" @tap="showPopup(index, $event)"></image>
</view>
</view>
</view>
<view>
<!-- 普通弹窗 -->
<uni-popup :is-mask-click="false" :safe-area="false" ref="popup" background-color="#fff"
border-radius="48rpx">
<view v-if="qrObj !== null" class="popup-content">
<image class="btnclose" @tap="closePop" :src="$baseUrl + 'homepage/btnclose.png'"></image>
<view class="title">
{{ qrObj.title || '' }}
</view>
<rich-text class="desc" :nodes="qrObj.desc || ''"></rich-text>
<image :show-menu-by-longpress="true" class="qrcode" :src="$baseUrl + (qrObj.qrUrl || '')"></image>
<image @tap="downloadHandler($baseUrl + (qrObj.qrUrl || ''))" class="btndownload"
:src="$baseUrl + 'homepage/btn_download.png'"></image>
</view>
<view v-else class="popup-content" style="height: 977rpx;">
<image class="xingmahui" :src="$baseUrl + 'homepage/xingmahui.png'"></image>
<image class="btnclose" @tap="closePop" :src="$baseUrl + 'homepage/btnclose.png'"></image>
</view>
</uni-popup>
</view>
<!-- 新增图片弹窗 -->
<uni-popup :is-mask-click="false" :safe-area="false" ref="imagePopup" background-color="transparent">
<view class="image-popup-content">
<image class="popup-image" :src="popupImageUrl" mode="aspectFit" @tap="imagePopupJump"></image>
<image class="popup-close-btn" @tap="closeImagePopup" :src="$baseUrl + 'homepage/btnclose.png'"></image>
</view>
</uni-popup>
<view v-if="showVideo" class="video-popup">
<video :src="currentVideoUrl" controls autoplay :style="{ width: '100vw', height: videoHeight }"></video>
<view class="close-btn-bottom" @tap="closeVideo">×</view>
</view>
<RegisterLayer v-model="showRegisterLayer" />
</view>
</template>
<script>
import { jump, JumpType } from '../utils';
import { useHomeStore } from '../stores/home';
import { fetchHomeJSON } from '../api/home';
import { useUserStore } from '../stores/user';
import RegisterLayer from "../components/RegisterLayer.vue";
import md from '../md';
import ExposureTracker from '../utils/exposure';
// const homeStore = useHomeStore();
const userStore = useUserStore();
// 定义需要曝光检测的元素配置
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 {
beforeDestroy() {
if (this.exposureTracker) {
this.exposureTracker.resetAllExposure();
}
},
deactivated() {
if (this.exposureTracker) {
this.exposureTracker.resetAllExposure();
}
},
data() {
return {
popType: 'bottom',
statusBarHeight: 38,
showRegisterLayer: false,
swiperList: [],
indicatorDots: true,
autoplay: true,
interval: 4000,
duration: 500,
indicatoractiveColor: "#a6a0a1",
indicatorColor: "rgba(255, 255, 255, 1)",
toolList: {},
expertTeam: {},
vipCardList: [],
contentImgList: [],
channelTabList: [],
channelTabIndex: 0,
changelInfoList: [],
childrenInfoList: [],
bottomLinkList: [],
qrInfoObj: undefined,
popupIndex: 0,
qrInfoList: [{ title: '', desc: '', qrUrl: '' }, { title: '', desc: '', qrUrl: '' }, { title: '', desc: '', qrUrl: '' }, { title: '', desc: '', qrUrl: '' }],
qrObj: { title: '', desc: '', qrUrl: '' },
showVideo: false,
currentVideoUrl: '',
isClickPhoneAuth: false,
voiceStory: {},
suggest: {},
videoHeight: '56vw',
qrNameList: ['公众号', '企业微信', '视频号', '小红书'],
windowHeight: 0,
isFirstScreenExposed: false,
scrollTimer: null,
exposureTracker: null,
currentIndex: 0,
etTabSelIndex: 0,
bannerCurrentIndex: 0,
childrenInfoListMianTitle: '',
channelTabListMianTitle: '',
popupImageUrl: '',
popupImageObj: {},
}
},
components: {
RegisterLayer
},
computed: {
homeStore() {
return useHomeStore();
}
},
props: {
scrollTop: {
type: Number,
default: 0
}
},
watch: {
homeStore: {
handler(newVal) {
this.showRegisterLayer = this.isClickPhoneAuth && newVal.isLogin && !newVal.babyExistence;
if (newVal.homeInfo !== null) {
this.initHomeInfo();
this.checkAndShowPopup();
}
},
deep: true,
immediate: true
},
scrollTop: {
handler(newVal) {
this.checkExposure(newVal);
}
}
},
mounted() {
const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
this.statusBarHeight = menuButtonInfo.top;
this.isClickPhoneAuth = false;
// 获取窗口高度
const systemInfo = uni.getSystemInfoSync();
this.windowHeight = systemInfo.windowHeight;
// 初始化曝光检测工具
this.exposureTracker = new ExposureTracker(this);
this.exposureTracker.addExposureElements(EXPOSURE_CONFIGS);
// 初始检查曝光
this.$nextTick(() => {
this.checkExposure(this.scrollTop);
});
},
unmounted() {
// 组件销毁时清理弹窗状态（可选，根据业务需求决定是否保留状态）
// 如果需要重置弹窗状态，可以在这里调用 this.resetPopupState()
},
methods: {
async initHomeInfo() {
const { data } = await fetchHomeJSON();
console.warn("data", data)
if (data) {
this.swiperList = data.swiperList;
this.vipConfigList = data.vipConfigList;
// this.vipCardList = data.vipCardList;
this.contentImgList = data.contentImgList;
this.channelTabList = data.channelTabList;
this.changelInfoList = data.changelInfoList;
this.childrenInfoList = data.childrenInfoList[0] || [];
this.bottomLinkList = data.bottomLinkList;
this.qrInfoList = data.qrInfoList || [];
this.toolList = data.toolList;
this.expertTeam = data.expertTeam;
this.vipCardList = data.vipCardList;
this.voiceStory = data.voiceStory;
this.suggest = data.suggest;
this.childrenInfoListMianTitle = data.childrenInfoListMianTitle;
this.channelTabListMianTitle = data.channelTabListMianTitle;
this.popupImageUrl = this.$baseUrl + data.popupImageObj?.imageUrl || '';
this.popupImageObj = data.popupImageObj || {};
if (this.homeStore.isLogin) {
this.vipCardList[0] = data.vipConfigList.find(item => item.grade === this.homeStore.homeInfo?.grade);
this.vipCardList[0].level = this.homeStore.homeInfo?.gradeName;
} else {
this.vipCardList[0] = data.vipConfigList[0];
}
}
},
changeIndicatorDots(e) {
this.indicatorDots = !this.indicatorDots
},
changeAutoplay(e) {
this.autoplay = !this.autoplay
},
intervalChange(e) {
this.interval = e.target.value
},
durationChange(e) {
this.duration = e.target.value
},
jumpBannerHandler(item, index) {
md.sensorLogTake({
xcxClick: '首页-首屏页面点击',
pageName: '首页-首屏',
buttonName: `第${index + 1}张焦点图-入口`,
});
if (item.videoUrl) {
this.currentVideoUrl = this.$baseUrl + item.videoUrl;
this.showVideo = true;
return;
}
if (item.link) {
// 有 link，执行跳转
jump(item.link);
} else {
// 没有 link，预览图片
uni.previewImage({
urls: [this.$baseUrl + item.url], // 预览当前图片
current: this.$baseUrl + item.url // 当前显示的图片
});
}
},
previewImage(url) {
uni.previewImage({
urls: [url], // 预览当前图片
current: url // 当前显示的图片
});
},
jumpLinkWithLogin(link, evt) {
if (evt) {
md.sensorLog(evt);
}
if (this.homeStore.isLogin) {
jump(link);
}
},
jumpLinkCard(item, evt) {
if (evt) {
md.sensorLog(evt);
}
if (item.btnSubTitle.length > 0 && item.btnTitle.length > 0) {
return;//如果有按钮的话，废弃这个点击事件
}
if (item.link) {
jump(item.link);
}
},
jumpLink(link, videoUrl, index, evt) {
if (evt) {
md.sensorLog(evt);
}
if (videoUrl) {
if (videoUrl.indexOf('http') === -1) {
videoUrl = this.$baseUrl + videoUrl;
}
// 弹出视频
this.currentVideoUrl = videoUrl;
if (index === 1) {
this.videoHeight = "100vw";
} else {
this.videoHeight = "56vw";
}
this.showVideo = true;
return;
// 视频弹窗出现后，video标签的autoplay会自动播放
} else if (link) {
if (!link || link === '') {
return;
}
// 其他跳转逻辑
jump(link);
}
},
channelTabHandler(_index, evt) {
if (evt) {
md.sensorLog(evt);
}
this.channelTabIndex = _index;
},
showPopup(_index, evt) {
if (evt) {
md.sensorLog(evt);
}
md.sensorLogTake({
xcxPage: `${this.qrNameList[_index]}拉起半屏二维码入口页面浏览`,
pageName: `${this.qrNameList[_index]}拉起半屏二维码入口`,
});
if (_index === 3) {
this.qrObj = null;
} else {
_index = Math.max(0, Math.min(_index, this.qrInfoList.length - 1));
this.qrObj = this.qrInfoList[_index];
}
this.popupIndex = _index;
this.$refs.popup.open(this.popType);
},
closePop() {
this.$refs.popup.close();
},
goSearchHandler(e) {
md.sensorLog(e);
uni.navigateTo({
url: "/pages/search/search"
})
},
downloadHandler(imgurl) {
md.sensorLogTake({
xcxClick: `${this.qrNameList[this.popupIndex]}拉起半屏二维码入口页面点击`,
pageName: `${this.qrNameList[this.popupIndex]}拉起半屏二维码入口页面点击`,
buttonName: `下载二维码`
});
uni.downloadFile({
url: imgurl,
success: (downloadRes) => {
if (downloadRes.statusCode === 200) {
uni.saveImageToPhotosAlbum({
filePath: downloadRes.tempFilePath,
success: (res) => {
uni.showToast({
title: '保存成功',
icon: 'success'
});
},
fail: (err) => {
uni.showToast({
title: '保存失败',
icon: 'none'
});
}
});
} else {
uni.showToast({
title: '下载失败',
icon: 'none'
});
}
},
fail: (err) => {
uni.showToast({
title: '下载失败',
icon: 'none'
});
}
});
},
closeVideo() {
this.showVideo = false;
this.currentVideoUrl = '';
},
onGetPhoneNumber(e) {
if (e.detail.errMsg !== 'getPhoneNumber:ok') {
uni.showToast({
title: '请授权使用手机号',
icon: 'none',
});
return;
}
console.log('detail', e.detail);
this.isClickPhoneAuth = true;
userStore.phoneCallback(e.detail);
},
goCustomerHandler(e) {
md.sensorLog(e);
const { memberId, mobile, openId, unionId } = this.homeStore.homeInfo;
const customerUrl = `https://intelcc-user.icsoc.net/?channelKey=45839e0505554f8c8aea3c7b6259b049&init=1&crmld=${memberId}&mobile=${mobile}&openId=${openId}&unionId=${unionId}`;
jump({ type: JumpType.H5, url: customerUrl });
},
checkExposure(scrollTop) {
if (this.exposureTracker) {
this.exposureTracker.checkExposure(scrollTop);
}
},
resetExposure() {
if (this.exposureTracker) {
this.exposureTracker.resetAllExposure();
}
},
onSwiperChange(e) {
this.currentIndex = e.detail.current;
},
onBannerSwiperChange(e) {
this.bannerCurrentIndex = e.detail.current;
},
async handleToolClick(item) {
md.sensorLogTake({
xcxClick: "我的页面点击",
pageName: "我的页面",
buttonName: item.title,
});
if (item.title === "医生问诊") {
// if (!cfgStatus.value.isRegister) return;
const res = await getHealthField();
if (!res.success) {
uni.showToast({
title: "获取健康字段失败",
icon: "none",
});
return;
}
const { sign, timestamp, appId, partnerUserId, env } = res.data;
jump({
type: JumpType.MINI,
url: "/pages/partner/redirect",
extra: {
appId: "wx81ecfb5aa3fb512f",
envVersion: env,
extraData: {
sign, // 参考 4.请求参数
timestamp, // 参考 4.请求参数
appId, // 参考 4.请求参数
partnerUserId, // 参考 4.请求参数
targetApp:
"/h5/partner/shining-like-a-start/landing-free-consult?sysType=CRF",
},
},
});
} else {
jump({ type: item.link.type, url: item.link.url });
}
},
onSelEtTap(index) {
this.etTabSelIndex = index;
},
onETMore() {
jump({ type: 1, url: '/pages/expertTeamPage/expertTeamPage?tab=' + (this.etTabSelIndex + 1) });
},
closeImagePopup() {
this.$refs.imagePopup.close();
},
imagePopupJump() {
jump({ type: this.popupImageObj.jumpType, url: this.popupImageObj.jumpUrl });
},
showImagePopup() {
this.$refs.imagePopup.open('center');
},
closePop1() {
this.$refs.imagePopup.close();
},
// 重置弹窗状态（可在需要时调用）
resetPopupState() {
this.homeStore.resetPopupState(); // 重置 store 中的弹窗状态
},
// 检查并显示弹窗（使用 store 全局状态管理）
checkAndShowPopup() {
// 使用 store 中的 hasShownPopup 来记录是否已经显示过弹窗
if (!this.homeStore.hasShownPopup && this.homeStore.homeInfo?.showPop1) {
this.homeStore.markPopupAsShown(); // 标记已显示过弹窗（全局状态）
this.$nextTick(() => {
setTimeout(() => {
this.showImagePopup();
}, 500);
});
}
}
}
}
</script>
<style lang="less" scoped>
@import '@/common.less';
.home-container {
width: 100vw;
overflow-x: hidden;
background-color: white;
.content {
background-color: white;
padding-bottom: 200rpx;
.banner {
height: 1116rpx;
.banneritem {
width: 750rpx;
height: 1116rpx;
.b-img {
width: 100%;
height: 100%;
}
}
}
.swiper-mask {
position: absolute;
left: 0;
width: 750rpx;
height: 192rpx;
z-index: 1;
top: 1065rpx;
.swiper-mask-img {
width: 100%;
height: 100%;
}
}
// 自定义banner指示器样式
.custom-banner-indicator {
position: absolute;
top: 1075rpx;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
gap: 16rpx;
.banner-dot {
width: 16rpx;
height: 16rpx;
border-radius: 50%;
background-color: #feebc4;
transition: all 0.3s ease;
flex-shrink: 0;
&.active {
width: 40rpx;
height: 16rpx;
border-radius: 8rpx;
background-color: #D3A358;
}
}
}
.barbox {
position: absolute;
top: 97rpx;
left: 32rpx;
display: flex;
align-items: center;
.btnlogo {
width: 184rpx;
height: 66rpx;
}
.btnsearch {
width: 150rpx;
height: 68rpx;
margin-left: 20rpx;
}
.customer-btn-wrap {
position: relative;
display: inline-block;
}
.btncustomer {
width: 70rpx;
height: 68rpx;
margin-left: 110rpx;
}
.phone-auth-btn-cover {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: transparent;
opacity: 0;
border: none;
padding: 0;
margin: 0;
z-index: 10;
pointer-events: auto;
}
}
// .txtbox {
// width: 100%;
// height: 76rpx;
// background-color: @color-white-soft;
// text-align: center;
// .txtlink {
// color: @color-gold-cover;
// font-size: 24rpx;
// text-underline-offset: 10rpx;
// text-decoration: underline;
// }
// .icon_arrow_yellow {
// width: 12rpx;
// height: 20rpx;
// margin-left: 10rpx;
// }
// }
.tools_box {
width: 750rpx;
height: 840rpx;
margin-top: 40rpx;
overflow-x: scroll;
padding-left: 38rpx;
.tools_maintitle {
font-size: 42rpx;
color: #000;
}
.tools_subtitle {
margin-top: 10rpx;
font-size: 24rpx;
color: #999;
}
.tool_swiper {
margin-top: 35rpx;
width: 720rpx;
height: 700rpx;
overflow: visible;
/* 关键：允许内容溢出 */
.swiperItem {
width: 400rpx;
height: 700rpx;
top: 40rpx;
}
/* 当前激活项放大 */
.swiperItem.active {
top: 0rpx !important;
z-index: 10;
transition: top 0.4s ease;
}
.tool {
position: absolute;
width: 400rpx;
height: 700rpx;
.tool_bg {
position: absolute;
left: 0rpx;
top: 0rpx;
width: 400rpx;
height: 650rpx;
border-radius: 40rpx;
}
.tool_icon {
position: absolute;
left: 0rpx;
top: 0rpx;
width: 400rpx;
height: 470rpx;
border-radius: 40rpx;
}
.tool_jt {
position: absolute;
left: 300rpx;
top: 510rpx;
width: 74rpx;
height: 44rpx;
}
.tool_title {
position: absolute;
left: 30rpx;
top: 510rpx;
color: #000;
font-size: 36rpx;
width: 300rpx;
}
.tool_context {
position: absolute;
left: 30rpx;
top: 575rpx;
font-size: 24rpx;
color: #999;
width: 300rpx;
}
}
}
/* 自定义指示点样式 */
.custom-indicator {
width: 200rpx;
height: 10rpx;
margin-top: -15rpx;
margin-left: -20rpx;
display: flex;
justify-content: center;
gap: 10rpx;
}
.indicator-dot {
width: 10rpx;
height: 10rpx;
border-radius: 10rpx;
background-color: #feefcc;
transition: all 0.3s;
}
.indicator-dot.active {
width: 70rpx;
border-radius: 10rpx;
background-color: #d3a358;
}
}
.et_box {
width: 750rpx;
// height: 840rpx;
margin-top: 30rpx;
padding-left: 38rpx;
.et_maintitle {
font-size: 42rpx;
color: #000;
}
.et_subtitle {
width: 700rpx;
margin-top: 10rpx;
display: flex;
.txtlink {
width: 500rpx;
color: @color-gold-cover;
font-size: 24rpx;
text-underline-offset: 5rpx;
text-decoration: underline;
}
.icon_more {
width: 140rpx;
height: 36rpx;
margin-left: 45rpx;
margin-top: 2rpx;
}
}
.et_main_box {
padding-top: 30rpx;
margin-top: 35rpx;
width: 670rpx;
height: 602rpx;
background-color: #fde8bb;
border-radius: 38rpx;
.et_con_bg {
margin-left: 3rpx;
width: 650rpx;
height: 562rpx;
background-color: #ffffff;
border-radius: 38rpx;
padding-left: 15rpx;
padding-top: 25rpx;
.et_tab_box {
height: 70rpx;
display: flex;
gap: 15rpx;
.tab_box {
width: 204rpx;
height: 70rpx;
.et_tab {
width: 204rpx;
height: 70rpx;
}
}
}
.et_con_box {
width: 631rpx;
height: 365rpx;
margin-top: 40rpx;
.et_con1 {
width: 631rpx;
height: 365rpx;
}
.et_con2 {
width: 631rpx;
height: 365rpx;
}
.et_con3 {
width: 598rpx;
height: 303rpx;
margin-top: 20rpx;
margin-left: 16rpx;
}
}
.et_more_txt {
width: 100%;
font-size: 24rpx;
color: @color-gold-cover;
text-align: center;
margin-top: 30rpx;
.icon_arrow_yellow {
width: 12rpx;
height: 20rpx;
margin-left: 5rpx;
}
}
}
}
}
.cardScroller {
width: 750rpx;
overflow-x: scroll;
}
.cardbox {
//
position: relative;
display: inline-flex;
flex-wrap: nowrap;
margin-top: 32rpx;
.cardboxitem {
width: 380rpx;
height: 232rpx;
position: relative;
margin-left: 32rpx;
.bg {
width: 380rpx;
height: 232rpx;
position: absolute;
z-index: 0;
}
.level {
position: absolute;
left: 24rpx;
top: 30rpx;
font-size: 32rpx;
font-weight: bold;
color: @color-gold-cover;
pointer-events: none;
}
.subTitle {
position: absolute;
left: 24rpx;
top: 80rpx;
font-size: 24rpx;
color: @color-black-deep;
pointer-events: none;
}
.showCornerTxt {
position: absolute;
right: 0;
top: 0;
color: white;
font-size: 24rpx;
padding: 10rpx;
border-radius: 0 10rpx 0 10rpx;
background-color: @color-gold-main;
}
.cardbtn {
position: relative;
left: 6rpx;
top: 130rpx;
.phone-auth-btn-cover {
position: absolute;
width: 368rpx;
height: 88rpx;
z-index: 0;
left: 0;
top: 0;
opacity: 0;
pointer-events: auto;
}
.cardbtnbg {
position: absolute;
width: 368rpx;
height: 88rpx;
z-index: 0;
left: 0;
top: 0;
}
.btnTitle {
position: absolute;
// z-index: 1;
width: 180rpx;
text-align: center;
font-size: 24rpx;
color: white;
// border: 1px solid red;
top: 23rpx;
left: 20rpx;
}
.btnSubTitle {
position: absolute;
top: 23rpx;
// z-index: 1;
font-size: 24rpx;
font-weight: bold;
color: @color-gold-light;
left: 210rpx;
}
}
}
}
.contentbox {
width: 750rpx;
height: 1429rpx;
position: relative;
margin-top: 32px;
.contentbg {
width: 100%;
height: 100%;
position: absolute;
}
.contentitem {
position: absolute;
}
}
.channelbox {
margin-top: 32rpx;
margin-left: 32rpx;
.maintitle {
color: @color-black-deep;
font-size: 38rpx;
font-weight: bold;
display: block;
margin-left: 5rpx;
}
.subtitle_box {
display: flex;
margin-top: 10rpx;
margin-left: 5rpx;
width: 700rpx;
.subtitle {
width: 500rpx;
color: @color-black-deep;
font-size: 24rpx;
}
.icon_more {
width: 127rpx;
height: 34rpx;
margin-left: 45rpx;
margin-top: 2rpx;
}
}
.listbox {
display: flex;
margin-top: 20rpx;
width: 686rpx;
align-content: center;
justify-content: space-between;
.tabitem {
color: @color-black-deep;
background-color: #e9edf1;
padding: 15rpx 20rpx;
font-size: 22rpx;
// margin-right: 15rpx;
border-radius: 30rpx;
}
.tabActive {
color: white;
background-color: @color-gold-main;
}
}
.channelscroll {
width: 718rpx;
overflow-y: scroll;
margin-top: 32rpx;
height: 620rpx;
.box {
display: flex;
flex-direction: column;
.infobox {
width: 670rpx;
height: 180rpx;
display: flex;
align-items: center;
background-color: #fff;
border-radius: 16rpx;
border: 2rpx solid #feeecb;
margin-bottom: 20rpx;
.infoimg {
border-radius: 12rpx 0rpx 0rpx 12rpx;
-webkit-flex-shrink: 0;
flex-shrink: 0;
height: 180rpx;
/* margin-top: -1rpx ; */
width: 180rpx;
}
.infotitlebox {
flex: 1;
margin-left: 20rpx;
display: flex;
flex-direction: column;
justify-content: center;
.infotitlecon {
display: flex;
flex-direction: row;
.infotitle {
color: @color-black-deep;
width: 400rpx;
font-size: 24rpx;
font-weight: bold;
margin-bottom: 8rpx;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.3;
}
.infotitletag {
width: 46rpx;
height: 22rpx;
color: #fff;
}
}
.infodesc {
color: #999999;
font-size: 22rpx;
width: 450rpx;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
}
}
}
.channelscroll2 {
width: 718rpx;
margin-top: 32rpx;
margin-left: -16rpx;
.box2 {
width: 718rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.infobox2 {
width: 330rpx;
height: 430rpx;
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
border-radius: 16rpx;
border: 4rpx solid #feeecb;
margin-bottom: 20rpx;
position: relative;
.infoimg2 {
width: 330rpx;
height: 306rpx;
border-radius: 12rpx 12rpx 0rpx 0rpx;
flex-shrink: 0;
}
.infotitle2box {
margin-top: 10rpx;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
padding: 0 10rpx;
.infotitle2 {
color: @color-black-deep;
width: 100%;
font-size: 24rpx;
font-weight: bold;
margin-bottom: 8rpx;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.3;
text-align: center;
}
}
}
}
}
.desc {
color: @color-black-deep;
font-size: 24rpx;
display: flex;
align-items: center;
justify-content: center;
margin-top: 32rpx;
.desc1 {
color: @color-gold-cover;
margin-left: 5rpx;
}
}
.desc2 {
padding-bottom: 32rpx;
}
}
.bottomlink {
width: 750rpx;
height: 247rpx;
.bottombg {
width: 750rpx;
height: 247rpx;
position: absolute;
}
.box {
position: relative;
top: 100rpx;
width: 74%;
left: 13%;
display: flex;
align-items: flex-end;
justify-content: space-between;
.icon {}
}
}
}
.popup-content {
width: 750rpx;
height: 812rpx;
border-top-left-radius: 48rpx;
border-top-right-radius: 48rpx;
position: relative;
.btnclose {
width: 70rpx;
height: 70rpx;
position: absolute;
top: 36rpx;
right: 32rpx;
}
.xingmahui {
width: 750rpx;
height: 100%;
position: absolute;
bottom: 0;
}
.title {
position: absolute;
top: 47rpx;
left: 32rpx;
font-size: 36rpx;
color: @color-black-deep;
font-weight: bold;
}
.desc {
position: absolute;
top: 108rpx;
left: 32rpx;
font-size: 28rpx;
color: @color-black-medium;
font-weight: bold;
}
.qrcode {
width: 340rpx;
height: 340rpx;
position: absolute;
top: 220rpx;
left: 205rpx;
}
.btndownload {
width: 286rpx;
height: 89rpx;
position: absolute;
top: 630rpx;
left: 232rpx;
}
}
.video-popup {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999;
}
.close-btn-bottom {
margin: 32rpx auto 0 auto;
width: 64rpx;
height: 64rpx;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 44rpx;
line-height: 64rpx;
text-align: center;
z-index: 10001;
display: flex;
align-items: center;
justify-content: center;
}
.phone-auth-mask {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
.phone-auth-popup {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #fff;
border-radius: 16rpx;
padding: 40rpx 32rpx;
z-index: 1001;
display: flex;
flex-direction: column;
align-items: center;
}
.phone-auth-btn {
background: #ffd700;
color: #333;
font-size: 32rpx;
border-radius: 8rpx;
padding: 20rpx 60rpx;
margin-bottom: 20rpx;
}
.close-btn {
font-size: 40rpx;
color: #999;
margin-top: 10rpx;
}
.image-popup-content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 16rpx;
position: relative;
.popup-image {
width: 500rpx;
height: 700rpx;
border-radius: 16rpx;
object-fit: cover;
}
.popup-close-btn {
width: 70rpx;
height: 70rpx;
position: absolute;
bottom: -50rpx;
left: 50%;
transform: translateX(-50%);
z-index: 10;
}
}
}
<template>
<view class="home-container" @scroll="onPageScroll">
<view class="content">
<swiper id="firstScreen" class="swiper banner" circular :autoplay="autoplay" :interval="interval"
:duration="duration" :indicator-dots="false" @change="onBannerSwiperChange">
<swiper-item v-for="(item, index) in swiperList" :key="item.url">
<view class="swiper-item banneritem">
<image @tap="jumpBannerHandler(item, index)" class="b-img" :src="$baseUrl + item.url"></image>
</view>
</swiper-item>
</swiper>
<!-- <view class="swiper-mask">
<image class="swiper-mask-img" :src="$baseUrl + 'homepage/home_format_v2.png'"></image>
</view> -->
<!-- 自定义指示点，仿照示意图 -->
<view class="custom-banner-indicator">
<view v-for="(item, idx) in swiperList" :key="item.url + idx"
:class="['banner-dot', { 'active': idx === bannerCurrentIndex }]"></view>
</view>
<view class="barbox" :style="`top:${statusBarHeight}px;`">
<image class="btnlogo" :src="$baseUrl + 'homepage/btnlogo.png'"></image>
<image :data-log="{
xcxClick: '首页-首屏页面点击',
pageName: '首页-首屏',
buttonName: '搜索框'
}" class="btnsearch" @tap="goSearchHandler" :src="$baseUrl + 'homepage/btnsearch.png'">
</image>
<view class="customer-btn-wrap">
<image :data-log="{
xcxClick: '首页-首屏页面点击',
pageName: '首页-首屏',
buttonName: '客服入口'
}" @tap="goCustomerHandler" class="btncustomer" :src="$baseUrl + 'homepage/btncustomer.png'">
</image>
<button v-if="homeStore && !homeStore.isLogin" open-type="getPhoneNumber"
@getphonenumber="onGetPhoneNumber" class="phone-auth-btn-cover"></button>
</view>
</view>
<!-- <view :data-log="{
xcxClick: '首页-首屏页面点击',
pageName: '首页-首屏',
buttonName: '文字资源位入口'
}" @tap="showPopup(1, $event)" class="txtbox">
<text class="txtlink">星妈会医生在线答疑群，为孩子成长保驾护航</text>
<image class="icon_arrow_yellow" :src="$baseUrl + 'homepage/icon_arrow_yellow.png'"></image>
</view> -->
<!--推荐工具-->
<view 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"
:next-margin="'0rpx'" :previous-margin="'0'" @change="onSwiperChange">
<swiper-item v-for="(item, index) in toolList.tools" :key="index"
:class="['swiperItem', { 'active': currentIndex === index }]" @click="handleToolClick(item)">
<view class="tool">
<image class="tool_bg" :src="$baseUrl + item.icon"></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>
</swiper-item>
</swiper>
<!-- 自定义指示点 -->
<view class="custom-indicator">
<view v-for="(item, index) in toolList.tools" :key="index" class="indicator-dot"
:class="{ 'active': currentIndex === index }">
</view>
</view>
</view>
<!--推荐工具-->
<!--专家团-->
<view class="et_box">
<view class="et_maintitle">{{ expertTeam.maintitle }}</view>
<view :data-log="{
xcxClick: '首页-首屏页面点击',
pageName: '首页-首屏',
buttonName: '文字资源位入口'
}" @tap="showPopup(1, $event)" class="et_subtitle">
<view class="txtlink">星妈会医生在线答疑群，为孩子成长保驾护航</view>
<image class="icon_more" :src="$baseUrl + 'homepage/et_more.png'"></image>
</view>
<view class="et_main_box">
<view class="et_con_bg">
<view class="et_tab_box">
<view class="tab_box" @tap="onSelEtTap(0)">
<image class="et_tab" v-show="etTabSelIndex == 0"
:src="$baseUrl + 'homepage/et_sel_tab1.png'">
</image>
<image class="et_tab" v-show="etTabSelIndex != 0"
:src="$baseUrl + 'homepage/et_tab1.png'">
</image>
</view>
<view class="tab_box" @tap="onSelEtTap(1)">
<image class="et_tab" v-show="etTabSelIndex == 1"
:src="$baseUrl + 'homepage/et_sel_tab2.png'">
</image>
<image class="et_tab" v-show="etTabSelIndex != 1"
:src="$baseUrl + 'homepage/et_tab2.png'">
</image>
</view>
<view class="tab_box" @tap="onSelEtTap(2)">
<image class="et_tab" v-show="etTabSelIndex == 2"
:src="$baseUrl + 'homepage/et_sel_tab3.png'">
</image>
<image class="et_tab" v-show="etTabSelIndex != 2"
:src="$baseUrl + 'homepage/et_tab3.png'">
</image>
</view>
</view>
<view class="et_con_box">
<image class="et_con1" v-if="etTabSelIndex == 0" :src="$baseUrl + expertTeam.etConUrl1">
</image>
<image class="et_con2" v-if="etTabSelIndex == 1" :src="$baseUrl + expertTeam.etConUrl2">
</image>
<image class="et_con3" v-if="etTabSelIndex == 2" :src="$baseUrl + expertTeam.etConUrl3">
</image>
</view>
<view class="et_more_txt" @tap="onETMore">
<text class="txtlink">点击查看更多</text>
<image class="icon_arrow_yellow" :src="$baseUrl + 'homepage/icon_arrow_yellow.png'"></image>
</view>
</view>
</view>
</view>
<!--专家团-->
<!-- <view class="cardScroller">
<view class="cardbox">
<view class="cardboxitem" v-for="cardData in vipCardList" :key="cardData.level">
<image :data-log="{
xcxClick: '首页-首屏页面点击',
pageName: '首页-首屏',
buttonName: `腰部banner-${cardData.level}`
}" @tap="jumpLinkCard(cardData, $event)" class="bg" :src="$baseUrl + cardData.bgUrl"></image>
<text class="level">{{ cardData.level }}</text>
<text class="subTitle">{{ cardData.subTitle }}</text>
<view class="showCornerTxt" v-if="cardData.showCornerTxt && cardData.showCornerTxt.length > 0">
{{ cardData.showCornerTxt }}
</view>
<view v-if="cardData.btnTitle && cardData.btnTitle.length > 0" :data-log="{
xcxClick: '首页-首屏页面点击',
pageName: '首页-首屏',
buttonName: `腰部banner-${cardData.level}`
}" class="cardbtn" @tap="jumpLinkWithLogin(cardData.link, $event)">
<image class="cardbtnbg" :src="$baseUrl + 'homepage/btn_receive.png'"></image>
<text class="btnTitle" :style="cardData.btnTitle.length > 7 ? 'font-size:22rpx;' : ''">{{
cardData.btnTitle }}</text>
<text class="btnSubTitle">{{ cardData.btnSubTitle }}</text>
<button v-if="homeStore && !homeStore.isLogin" open-type="getPhoneNumber"
@getphonenumber="onGetPhoneNumber" class="phone-auth-btn-cover"></button>
</view>
</view>
</view>
</view> -->
<!-- <view class="contentbox" id="secondScreen">
<image class="contentbg" :src="$baseUrl + 'homepage/contentbg.png'" alt="" />
<image class="contentitem" :key="index" :style="contentItem._style"
v-for="(contentItem, index) in contentImgList" :src="$baseUrl + contentItem.bgUrl" :data-log="{
xcxClick: '首页-二屏页面点击',
pageName: '首页-二屏',
buttonName: `品牌介绍${index + 1}`
}" @tap="jumpLink(contentItem.link, contentItem.videoUrl, index, $event)"></image>
</view> -->
<view class="channelbox">
<text class="maintitle">{{ childrenInfoListMianTitle }}</text>
<view class="subtitle_box">
<text class="subtitle">从专业到实用，一站式解决你的育儿难题</text>
<image class="icon_more" :src="$baseUrl + 'homepage/home_more_btn_v2.png'" :data-log="{
xcxClick: '首页-三屏页面点击',
pageName: '首页-三屏',
buttonName: `次位内容资源位-查看更多文字`
}" @tap="jumpLink(suggest.link, false, false, $event)"></image>
</view>
<view class="channelscroll">
<view class="box">
<view class="infobox" :key="index" v-for="(infoItem, index) in childrenInfoList" :data-log="{
xcxClick: '首页-三屏页面点击',
pageName: '首页-三屏',
buttonName: `次位内容资源位-轮播-${index + 1}`
}" @tap="jumpLink(infoItem.link, false, false, $event)">
<image class="infoimg" :src="$baseUrl + infoItem.bgUrl"></image>
<view class="infotitlebox">
<view class="infotitlecon">
<view class="infotitle">{{ infoItem.desc }}</view>
<image v-if="infoItem.isNew" class="infotitletag"
:src="$baseUrl + 'homepage/home_new_tag_v3.png'">New</image>
</view>
<view class="infodesc">{{ infoItem.desc2 }}</view>
</view>
</view>
</view>
</view>
<!-- <view :data-log="{
xcxClick: '首页-三屏页面点击',
pageName: '首页-三屏',
buttonName: `次位内容资源位-查看更多文字`
}" @tap="jumpLink(suggest.link, false, false, $event)" class="desc desc2">
更多星妈会权威专家服务团 <view class="desc1"> 点击查看 > </view>
</view> -->
</view>
<view class="channelbox" id="thirdScreen">
<text class="maintitle">{{ channelTabListMianTitle }}</text>
<view class="subtitle_box">
<text class="subtitle">用声音传递爱与智慧，守护宝贝成长的每一步</text>
<image class="icon_more" :src="$baseUrl + 'homepage/home_more_btn_v2.png'" :data-log="{
xcxClick: '首页-三屏页面点击',
pageName: '首页-三屏',
buttonName: `首位内容资源位-查看更多文字`
}" @tap="jumpLink(voiceStory.link, false, false, $event)"></image>
</view>
<view class="listbox">
<view @tap="channelTabHandler(index, $event)" :data-log="{
xcxClick: '首页-三屏页面点击',
pageName: '首页-三屏',
buttonName: `首页内容资源位分类${index + 1}-${item}`
}" :class="channelTabIndex === index ? 'tabitem tabActive' : 'tabitem'" v-for="(item, index) in channelTabList"
:key="index">
{{ item }}
</view>
</view>
<view class="channelscroll2">
<view class="box2">
<view class="infobox2" :key="index"
v-for="(infoItem, index) in changelInfoList[channelTabIndex]" :data-log="{
xcxClick: '首页-三屏页面点击',
pageName: '首页-三屏',
buttonName: `首页内容资源位分类${channelTabIndex + 1}-${channelTabList[channelTabIndex]}-${index + 1}`
}" @tap="jumpLink(infoItem.link, false, false, $event)">
<image class="infoimg2" :src="$baseUrl + infoItem.bgUrl"></image>
<view class="infotitle2box">
<view class="infotitle2">{{ infoItem.desc }}</view>
</view>
</view>
</view>
</view>
<!-- <view :data-log="{
xcxClick: '首页-三屏页面点击',
pageName: '首页-三屏',
buttonName: `首位内容资源位-查看更多文字`
}" @tap="jumpLink(voiceStory.link, false, false, $event)" class="desc">
滑动或者点击查看全部 <view class="desc1"> 有声故事 > </view>
</view> -->
</view>
<view id="fourthScreen" class="bottomlink">
<image class="bottombg" :src="$baseUrl + 'homepage/bottombg.png'"></image>
<view class="box">
<image class="icon" v-for="(icon, index) in bottomLinkList" :key="index" :data-log="{
xcxClick: '首页-四屏页面点击',
pageName: '首页-四屏',
buttonName: `${qrNameList[index]}`
}" :src="$baseUrl + icon.bgUrl" :style="icon._style" @tap="showPopup(index, $event)"></image>
</view>
</view>
</view>
<view>
<!-- 普通弹窗 -->
<uni-popup :is-mask-click="false" :safe-area="false" ref="popup" background-color="#fff"
border-radius="48rpx">
<view v-if="qrObj !== null" class="popup-content">
<image class="btnclose" @tap="closePop" :src="$baseUrl + 'homepage/btnclose.png'"></image>
<view class="title">
{{ qrObj.title || '' }}
</view>
<rich-text class="desc" :nodes="qrObj.desc || ''"></rich-text>
<image :show-menu-by-longpress="true" class="qrcode" :src="$baseUrl + (qrObj.qrUrl || '')"></image>
<image @tap="downloadHandler($baseUrl + (qrObj.qrUrl || ''))" class="btndownload"
:src="$baseUrl + 'homepage/btn_download.png'"></image>
</view>
<view v-else class="popup-content" style="height: 977rpx;">
<image class="xingmahui" :src="$baseUrl + 'homepage/xingmahui.png'"></image>
<image class="btnclose" @tap="closePop" :src="$baseUrl + 'homepage/btnclose.png'"></image>
</view>
</uni-popup>
</view>
<!-- 新增图片弹窗 -->
<uni-popup :is-mask-click="false" :safe-area="false" ref="imagePopup" background-color="transparent">
<view class="image-popup-content">
<image class="popup-image" :src="popupImageUrl" mode="aspectFit" @tap="imagePopupJump"></image>
<image class="popup-close-btn" @tap="closeImagePopup" :src="$baseUrl + 'homepage/btnclose.png'"></image>
</view>
</uni-popup>
<view v-if="showVideo" class="video-popup">
<video :src="currentVideoUrl" controls autoplay :style="{ width: '100vw', height: videoHeight }"></video>
<view class="close-btn-bottom" @tap="closeVideo">×</view>
</view>
<RegisterLayer v-model="showRegisterLayer" />
</view>
</template>
<script>
import { jump, JumpType } from '../utils';
import { useHomeStore } from '../stores/home';
import { fetchHomeJSON } from '../api/home';
import { useUserStore } from '../stores/user';
import RegisterLayer from "../components/RegisterLayer.vue";
import md from '../md';
import ExposureTracker from '../utils/exposure';
// const homeStore = useHomeStore();
const userStore = useUserStore();
// 定义需要曝光检测的元素配置
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 {
beforeDestroy() {
if (this.exposureTracker) {
this.exposureTracker.resetAllExposure();
}
},
deactivated() {
if (this.exposureTracker) {
this.exposureTracker.resetAllExposure();
}
},
data() {
return {
popType: 'bottom',
statusBarHeight: 38,
showRegisterLayer: false,
swiperList: [],
indicatorDots: true,
autoplay: true,
interval: 4000,
duration: 500,
indicatoractiveColor: "#a6a0a1",
indicatorColor: "rgba(255, 255, 255, 1)",
toolList: {},
expertTeam: {},
vipCardList: [],
contentImgList: [],
channelTabList: [],
channelTabIndex: 0,
changelInfoList: [],
childrenInfoList: [],
bottomLinkList: [],
qrInfoObj: undefined,
popupIndex: 0,
qrInfoList: [{ title: '', desc: '', qrUrl: '' }, { title: '', desc: '', qrUrl: '' }, { title: '', desc: '', qrUrl: '' }, { title: '', desc: '', qrUrl: '' }],
qrObj: { title: '', desc: '', qrUrl: '' },
showVideo: false,
currentVideoUrl: '',
isClickPhoneAuth: false,
voiceStory: {},
suggest: {},
videoHeight: '56vw',
qrNameList: ['公众号', '企业微信', '视频号', '小红书'],
windowHeight: 0,
isFirstScreenExposed: false,
scrollTimer: null,
exposureTracker: null,
currentIndex: 0,
etTabSelIndex: 0,
bannerCurrentIndex: 0,
childrenInfoListMianTitle: '',
channelTabListMianTitle: '',
popupImageUrl: '',
popupImageObj: {},
}
},
components: {
RegisterLayer
},
computed: {
homeStore() {
return useHomeStore();
}
},
props: {
scrollTop: {
type: Number,
default: 0
}
},
watch: {
homeStore: {
handler(newVal) {
this.showRegisterLayer = this.isClickPhoneAuth && newVal.isLogin && !newVal.babyExistence;
if (newVal.homeInfo !== null) {
this.initHomeInfo();
this.checkAndShowPopup();
}
},
deep: true,
immediate: true
},
scrollTop: {
handler(newVal) {
this.checkExposure(newVal);
}
}
},
mounted() {
const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
this.statusBarHeight = menuButtonInfo.top;
this.isClickPhoneAuth = false;
// 获取窗口高度
const systemInfo = uni.getSystemInfoSync();
this.windowHeight = systemInfo.windowHeight;
// 初始化曝光检测工具
this.exposureTracker = new ExposureTracker(this);
this.exposureTracker.addExposureElements(EXPOSURE_CONFIGS);
// 初始检查曝光
this.$nextTick(() => {
this.checkExposure(this.scrollTop);
});
},
unmounted() {
// 组件销毁时清理弹窗状态（可选，根据业务需求决定是否保留状态）
// 如果需要重置弹窗状态，可以在这里调用 this.resetPopupState()
},
methods: {
async initHomeInfo() {
const { data } = await fetchHomeJSON();
console.warn("data", data)
if (data) {
this.swiperList = data.swiperList;
this.vipConfigList = data.vipConfigList;
// this.vipCardList = data.vipCardList;
this.contentImgList = data.contentImgList;
this.channelTabList = data.channelTabList;
this.changelInfoList = data.changelInfoList;
this.childrenInfoList = data.childrenInfoList[0] || [];
this.bottomLinkList = data.bottomLinkList;
this.qrInfoList = data.qrInfoList || [];
this.toolList = data.toolList;
this.expertTeam = data.expertTeam;
this.vipCardList = data.vipCardList;
this.voiceStory = data.voiceStory;
this.suggest = data.suggest;
this.childrenInfoListMianTitle = data.childrenInfoListMianTitle;
this.channelTabListMianTitle = data.channelTabListMianTitle;
this.popupImageUrl = this.$baseUrl + data.popupImageObj?.imageUrl || '';
this.popupImageObj = data.popupImageObj || {};
if (this.homeStore.isLogin) {
this.vipCardList[0] = data.vipConfigList.find(item => item.grade === this.homeStore.homeInfo?.grade);
this.vipCardList[0].level = this.homeStore.homeInfo?.gradeName;
} else {
this.vipCardList[0] = data.vipConfigList[0];
}
}
},
changeIndicatorDots(e) {
this.indicatorDots = !this.indicatorDots
},
changeAutoplay(e) {
this.autoplay = !this.autoplay
},
intervalChange(e) {
this.interval = e.target.value
},
durationChange(e) {
this.duration = e.target.value
},
jumpBannerHandler(item, index) {
md.sensorLogTake({
xcxClick: '首页-首屏页面点击',
pageName: '首页-首屏',
buttonName: `第${index + 1}张焦点图-入口`,
});
if (item.videoUrl) {
this.currentVideoUrl = this.$baseUrl + item.videoUrl;
this.showVideo = true;
return;
}
if (item.link) {
// 有 link，执行跳转
jump(item.link);
} else {
// 没有 link，预览图片
uni.previewImage({
urls: [this.$baseUrl + item.url], // 预览当前图片
current: this.$baseUrl + item.url // 当前显示的图片
});
}
},
previewImage(url) {
uni.previewImage({
urls: [url], // 预览当前图片
current: url // 当前显示的图片
});
},
jumpLinkWithLogin(link, evt) {
if (evt) {
md.sensorLog(evt);
}
if (this.homeStore.isLogin) {
jump(link);
}
},
jumpLinkCard(item, evt) {
if (evt) {
md.sensorLog(evt);
}
if (item.btnSubTitle.length > 0 && item.btnTitle.length > 0) {
return;//如果有按钮的话，废弃这个点击事件
}
if (item.link) {
jump(item.link);
}
},
jumpLink(link, videoUrl, index, evt) {
if (evt) {
md.sensorLog(evt);
}
if (videoUrl) {
if (videoUrl.indexOf('http') === -1) {
videoUrl = this.$baseUrl + videoUrl;
}
// 弹出视频
this.currentVideoUrl = videoUrl;
if (index === 1) {
this.videoHeight = "100vw";
} else {
this.videoHeight = "56vw";
}
this.showVideo = true;
return;
// 视频弹窗出现后，video标签的autoplay会自动播放
} else if (link) {
if (!link || link === '') {
return;
}
// 其他跳转逻辑
jump(link);
}
},
channelTabHandler(_index, evt) {
if (evt) {
md.sensorLog(evt);
}
this.channelTabIndex = _index;
},
showPopup(_index, evt) {
if (evt) {
md.sensorLog(evt);
}
md.sensorLogTake({
xcxPage: `${this.qrNameList[_index]}拉起半屏二维码入口页面浏览`,
pageName: `${this.qrNameList[_index]}拉起半屏二维码入口`,
});
if (_index === 3) {
this.qrObj = null;
} else {
_index = Math.max(0, Math.min(_index, this.qrInfoList.length - 1));
this.qrObj = this.qrInfoList[_index];
}
this.popupIndex = _index;
this.$refs.popup.open(this.popType);
},
closePop() {
this.$refs.popup.close();
},
goSearchHandler(e) {
md.sensorLog(e);
uni.navigateTo({
url: "/pages/search/search"
})
},
downloadHandler(imgurl) {
md.sensorLogTake({
xcxClick: `${this.qrNameList[this.popupIndex]}拉起半屏二维码入口页面点击`,
pageName: `${this.qrNameList[this.popupIndex]}拉起半屏二维码入口页面点击`,
buttonName: `下载二维码`
});
uni.downloadFile({
url: imgurl,
success: (downloadRes) => {
if (downloadRes.statusCode === 200) {
uni.saveImageToPhotosAlbum({
filePath: downloadRes.tempFilePath,
success: (res) => {
uni.showToast({
title: '保存成功',
icon: 'success'
});
},
fail: (err) => {
uni.showToast({
title: '保存失败',
icon: 'none'
});
}
});
} else {
uni.showToast({
title: '下载失败',
icon: 'none'
});
}
},
fail: (err) => {
uni.showToast({
title: '下载失败',
icon: 'none'
});
}
});
},
closeVideo() {
this.showVideo = false;
this.currentVideoUrl = '';
},
onGetPhoneNumber(e) {
if (e.detail.errMsg !== 'getPhoneNumber:ok') {
uni.showToast({
title: '请授权使用手机号',
icon: 'none',
});
return;
}
console.log('detail', e.detail);
this.isClickPhoneAuth = true;
userStore.phoneCallback(e.detail);
},
goCustomerHandler(e) {
md.sensorLog(e);
const { memberId, mobile, openId, unionId } = this.homeStore.homeInfo;
const customerUrl = `https://intelcc-user.icsoc.net/?channelKey=45839e0505554f8c8aea3c7b6259b049&init=1&crmld=${memberId}&mobile=${mobile}&openId=${openId}&unionId=${unionId}`;
jump({ type: JumpType.H5, url: customerUrl });
},
checkExposure(scrollTop) {
if (this.exposureTracker) {
this.exposureTracker.checkExposure(scrollTop);
}
},
resetExposure() {
if (this.exposureTracker) {
this.exposureTracker.resetAllExposure();
}
},
onSwiperChange(e) {
this.currentIndex = e.detail.current;
},
onBannerSwiperChange(e) {
this.bannerCurrentIndex = e.detail.current;
},
async handleToolClick(item) {
md.sensorLogTake({
xcxClick: "我的页面点击",
pageName: "我的页面",
buttonName: item.title,
});
if (item.title === "医生问诊") {
// if (!cfgStatus.value.isRegister) return;
const res = await getHealthField();
if (!res.success) {
uni.showToast({
title: "获取健康字段失败",
icon: "none",
});
return;
}
const { sign, timestamp, appId, partnerUserId, env } = res.data;
jump({
type: JumpType.MINI,
url: "/pages/partner/redirect",
extra: {
appId: "wx81ecfb5aa3fb512f",
envVersion: env,
extraData: {
sign, // 参考 4.请求参数
timestamp, // 参考 4.请求参数
appId, // 参考 4.请求参数
partnerUserId, // 参考 4.请求参数
targetApp:
"/h5/partner/shining-like-a-start/landing-free-consult?sysType=CRF",
},
},
});
} else {
jump({ type: item.link.type, url: item.link.url });
}
},
onSelEtTap(index) {
this.etTabSelIndex = index;
},
onETMore() {
jump({ type: 1, url: '/pages/expertTeamPage/expertTeamPage?tab=' + (this.etTabSelIndex + 1) });
},
closeImagePopup() {
this.$refs.imagePopup.close();
},
imagePopupJump() {
jump({ type: this.popupImageObj.jumpType, url: this.popupImageObj.jumpUrl });
},
showImagePopup() {
this.$refs.imagePopup.open('center');
},
closePop1() {
this.$refs.imagePopup.close();
},
// 重置弹窗状态（可在需要时调用）
resetPopupState() {
this.homeStore.resetPopupState(); // 重置 store 中的弹窗状态
},
// 检查并显示弹窗（使用 store 全局状态管理）
checkAndShowPopup() {
// 使用 store 中的 hasShownPopup 来记录是否已经显示过弹窗
if (!this.homeStore.hasShownPopup && this.homeStore.homeInfo?.showPop1) {
this.homeStore.markPopupAsShown(); // 标记已显示过弹窗（全局状态）
this.$nextTick(() => {
setTimeout(() => {
this.showImagePopup();
}, 500);
});
}
}
}
}
</script>
<style lang="less" scoped>
@import '@/common.less';
.home-container {
width: 100vw;
overflow-x: hidden;
background-color: white;
.content {
background-color: white;
padding-bottom: 200rpx;
.banner {
height: 1116rpx;
.banneritem {
width: 750rpx;
height: 1116rpx;
.b-img {
width: 100%;
height: 100%;
}
}
}
.swiper-mask {
position: absolute;
left: 0;
width: 750rpx;
height: 192rpx;
z-index: 1;
top: 1065rpx;
.swiper-mask-img {
width: 100%;
height: 100%;
}
}
// 自定义banner指示器样式
.custom-banner-indicator {
position: absolute;
top: 1075rpx;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
gap: 16rpx;
.banner-dot {
width: 16rpx;
height: 16rpx;
border-radius: 50%;
background-color: #feebc4;
transition: all 0.3s ease;
flex-shrink: 0;
&.active {
width: 40rpx;
height: 16rpx;
border-radius: 8rpx;
background-color: #D3A358;
}
}
}
.barbox {
position: absolute;
top: 97rpx;
left: 32rpx;
display: flex;
align-items: center;
.btnlogo {
width: 184rpx;
height: 66rpx;
}
.btnsearch {
width: 150rpx;
height: 68rpx;
margin-left: 20rpx;
}
.customer-btn-wrap {
position: relative;
display: inline-block;
}
.btncustomer {
width: 70rpx;
height: 68rpx;
margin-left: 110rpx;
}
.phone-auth-btn-cover {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: transparent;
opacity: 0;
border: none;
padding: 0;
margin: 0;
z-index: 10;
pointer-events: auto;
}
}
// .txtbox {
// width: 100%;
// height: 76rpx;
// background-color: @color-white-soft;
// text-align: center;
// .txtlink {
// color: @color-gold-cover;
// font-size: 24rpx;
// text-underline-offset: 10rpx;
// text-decoration: underline;
// }
// .icon_arrow_yellow {
// width: 12rpx;
// height: 20rpx;
// margin-left: 10rpx;
// }
// }
.tools_box {
width: 750rpx;
height: 840rpx;
margin-top: 40rpx;
overflow-x: scroll;
padding-left: 38rpx;
.tools_maintitle {
font-size: 42rpx;
color: #000;
}
.tools_subtitle {
margin-top: 10rpx;
font-size: 24rpx;
color: #999;
}
.tool_swiper {
margin-top: 35rpx;
width: 720rpx;
height: 700rpx;
overflow: visible;
/* 关键：允许内容溢出 */
.swiperItem {
width: 400rpx;
height: 700rpx;
top: 40rpx;
}
/* 当前激活项放大 */
.swiperItem.active {
top: 0rpx !important;
z-index: 10;
transition: top 0.4s ease;
}
.tool {
position: absolute;
width: 400rpx;
height: 700rpx;
.tool_bg {
position: absolute;
left: 0rpx;
top: 0rpx;
width: 400rpx;
height: 650rpx;
border-radius: 40rpx;
}
.tool_icon {
position: absolute;
left: 0rpx;
top: 0rpx;
width: 400rpx;
height: 470rpx;
border-radius: 40rpx;
}
.tool_jt {
position: absolute;
left: 300rpx;
top: 510rpx;
width: 74rpx;
height: 44rpx;
}
.tool_title {
position: absolute;
left: 30rpx;
top: 510rpx;
color: #000;
font-size: 36rpx;
width: 300rpx;
}
.tool_context {
position: absolute;
left: 30rpx;
top: 575rpx;
font-size: 24rpx;
color: #999;
width: 300rpx;
}
}
}
/* 自定义指示点样式 */
.custom-indicator {
width: 200rpx;
height: 10rpx;
margin-top: -15rpx;
margin-left: -20rpx;
display: flex;
justify-content: center;
gap: 10rpx;
}
.indicator-dot {
width: 10rpx;
height: 10rpx;
border-radius: 10rpx;
background-color: #feefcc;
transition: all 0.3s;
}
.indicator-dot.active {
width: 70rpx;
border-radius: 10rpx;
background-color: #d3a358;
}
}
.et_box {
width: 750rpx;
// height: 840rpx;
margin-top: 30rpx;
padding-left: 38rpx;
.et_maintitle {
font-size: 42rpx;
color: #000;
}
.et_subtitle {
width: 700rpx;
margin-top: 10rpx;
display: flex;
.txtlink {
width: 500rpx;
color: @color-gold-cover;
font-size: 24rpx;
text-underline-offset: 5rpx;
text-decoration: underline;
}
.icon_more {
width: 140rpx;
height: 36rpx;
margin-left: 45rpx;
margin-top: 2rpx;
}
}
.et_main_box {
padding-top: 30rpx;
margin-top: 35rpx;
width: 670rpx;
height: 602rpx;
background-color: #fde8bb;
border-radius: 38rpx;
.et_con_bg {
margin-left: 3rpx;
width: 650rpx;
height: 562rpx;
background-color: #ffffff;
border-radius: 38rpx;
padding-left: 15rpx;
padding-top: 25rpx;
.et_tab_box {
height: 70rpx;
display: flex;
gap: 15rpx;
.tab_box {
width: 204rpx;
height: 70rpx;
.et_tab {
width: 204rpx;
height: 70rpx;
}
}
}
.et_con_box {
width: 631rpx;
height: 365rpx;
margin-top: 40rpx;
.et_con1 {
width: 631rpx;
height: 365rpx;
}
.et_con2 {
width: 631rpx;
height: 365rpx;
}
.et_con3 {
width: 598rpx;
height: 303rpx;
margin-top: 20rpx;
margin-left: 16rpx;
}
}
.et_more_txt {
width: 100%;
font-size: 24rpx;
color: @color-gold-cover;
text-align: center;
margin-top: 30rpx;
.icon_arrow_yellow {
width: 12rpx;
height: 20rpx;
margin-left: 5rpx;
}
}
}
}
}
.cardScroller {
width: 750rpx;
overflow-x: scroll;
}
.cardbox {
//
position: relative;
display: inline-flex;
flex-wrap: nowrap;
margin-top: 32rpx;
.cardboxitem {
width: 380rpx;
height: 232rpx;
position: relative;
margin-left: 32rpx;
.bg {
width: 380rpx;
height: 232rpx;
position: absolute;
z-index: 0;
}
.level {
position: absolute;
left: 24rpx;
top: 30rpx;
font-size: 32rpx;
font-weight: bold;
color: @color-gold-cover;
pointer-events: none;
}
.subTitle {
position: absolute;
left: 24rpx;
top: 80rpx;
font-size: 24rpx;
color: @color-black-deep;
pointer-events: none;
}
.showCornerTxt {
position: absolute;
right: 0;
top: 0;
color: white;
font-size: 24rpx;
padding: 10rpx;
border-radius: 0 10rpx 0 10rpx;
background-color: @color-gold-main;
}
.cardbtn {
position: relative;
left: 6rpx;
top: 130rpx;
.phone-auth-btn-cover {
position: absolute;
width: 368rpx;
height: 88rpx;
z-index: 0;
left: 0;
top: 0;
opacity: 0;
pointer-events: auto;
}
.cardbtnbg {
position: absolute;
width: 368rpx;
height: 88rpx;
z-index: 0;
left: 0;
top: 0;
}
.btnTitle {
position: absolute;
// z-index: 1;
width: 180rpx;
text-align: center;
font-size: 24rpx;
color: white;
// border: 1px solid red;
top: 23rpx;
left: 20rpx;
}
.btnSubTitle {
position: absolute;
top: 23rpx;
// z-index: 1;
font-size: 24rpx;
font-weight: bold;
color: @color-gold-light;
left: 210rpx;
}
}
}
}
.contentbox {
width: 750rpx;
height: 1429rpx;
position: relative;
margin-top: 32px;
.contentbg {
width: 100%;
height: 100%;
position: absolute;
}
.contentitem {
position: absolute;
}
}
.channelbox {
margin-top: 32rpx;
margin-left: 32rpx;
.maintitle {
color: @color-black-deep;
font-size: 38rpx;
font-weight: bold;
display: block;
margin-left: 5rpx;
}
.subtitle_box {
display: flex;
margin-top: 10rpx;
margin-left: 5rpx;
width: 700rpx;
.subtitle {
width: 500rpx;
color: @color-black-deep;
font-size: 24rpx;
}
.icon_more {
width: 127rpx;
height: 34rpx;
margin-left: 45rpx;
margin-top: 2rpx;
}
}
.listbox {
display: flex;
margin-top: 20rpx;
width: 686rpx;
align-content: center;
justify-content: space-between;
.tabitem {
color: @color-black-deep;
background-color: #e9edf1;
padding: 15rpx 20rpx;
font-size: 22rpx;
// margin-right: 15rpx;
border-radius: 30rpx;
}
.tabActive {
color: white;
background-color: @color-gold-main;
}
}
.channelscroll {
width: 718rpx;
overflow-y: scroll;
margin-top: 32rpx;
height: 620rpx;
.box {
display: flex;
flex-direction: column;
.infobox {
width: 670rpx;
height: 180rpx;
display: flex;
align-items: center;
background-color: #fff;
border-radius: 16rpx;
border: 2rpx solid #feeecb;
margin-bottom: 20rpx;
.infoimg {
border-radius: 12rpx 0rpx 0rpx 12rpx;
-webkit-flex-shrink: 0;
flex-shrink: 0;
height: 180rpx;
/* margin-top: -1rpx ; */
width: 180rpx;
}
.infotitlebox {
flex: 1;
margin-left: 20rpx;
display: flex;
flex-direction: column;
justify-content: center;
.infotitlecon {
display: flex;
flex-direction: row;
.infotitle {
color: @color-black-deep;
width: 400rpx;
font-size: 24rpx;
font-weight: bold;
margin-bottom: 8rpx;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.3;
}
.infotitletag {
width: 46rpx;
height: 22rpx;
color: #fff;
}
}
.infodesc {
color: #999999;
font-size: 22rpx;
width: 450rpx;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
}
}
}
.channelscroll2 {
width: 718rpx;
margin-top: 32rpx;
margin-left: -16rpx;
.box2 {
width: 718rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.infobox2 {
width: 330rpx;
height: 430rpx;
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
border-radius: 16rpx;
border: 4rpx solid #feeecb;
margin-bottom: 20rpx;
position: relative;
.infoimg2 {
width: 330rpx;
height: 306rpx;
border-radius: 12rpx 12rpx 0rpx 0rpx;
flex-shrink: 0;
}
.infotitle2box {
margin-top: 10rpx;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
padding: 0 10rpx;
.infotitle2 {
color: @color-black-deep;
width: 100%;
font-size: 24rpx;
font-weight: bold;
margin-bottom: 8rpx;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.3;
text-align: center;
}
}
}
}
}
.desc {
color: @color-black-deep;
font-size: 24rpx;
display: flex;
align-items: center;
justify-content: center;
margin-top: 32rpx;
.desc1 {
color: @color-gold-cover;
margin-left: 5rpx;
}
}
.desc2 {
padding-bottom: 32rpx;
}
}
.bottomlink {
width: 750rpx;
height: 247rpx;
.bottombg {
width: 750rpx;
height: 247rpx;
position: absolute;
}
.box {
position: relative;
top: 100rpx;
width: 74%;
left: 13%;
display: flex;
align-items: flex-end;
justify-content: space-between;
.icon {}
}
}
}
.popup-content {
width: 750rpx;
height: 812rpx;
border-top-left-radius: 48rpx;
border-top-right-radius: 48rpx;
position: relative;
.btnclose {
width: 70rpx;
height: 70rpx;
position: absolute;
top: 36rpx;
right: 32rpx;
}
.xingmahui {
width: 750rpx;
height: 100%;
position: absolute;
bottom: 0;
}
.title {
position: absolute;
top: 47rpx;
left: 32rpx;
font-size: 36rpx;
color: @color-black-deep;
font-weight: bold;
}
.desc {
position: absolute;
top: 108rpx;
left: 32rpx;
font-size: 28rpx;
color: @color-black-medium;
font-weight: bold;
}
.qrcode {
width: 340rpx;
height: 340rpx;
position: absolute;
top: 220rpx;
left: 205rpx;
}
.btndownload {
width: 286rpx;
height: 89rpx;
position: absolute;
top: 630rpx;
left: 232rpx;
}
}
.video-popup {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999;
}
.close-btn-bottom {
margin: 32rpx auto 0 auto;
width: 64rpx;
height: 64rpx;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 44rpx;
line-height: 64rpx;
text-align: center;
z-index: 10001;
display: flex;
align-items: center;
justify-content: center;
}
.phone-auth-mask {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
.phone-auth-popup {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #fff;
border-radius: 16rpx;
padding: 40rpx 32rpx;
z-index: 1001;
display: flex;
flex-direction: column;
align-items: center;
}
.phone-auth-btn {
background: #ffd700;
color: #333;
font-size: 32rpx;
border-radius: 8rpx;
padding: 20rpx 60rpx;
margin-bottom: 20rpx;
}
.close-btn {
font-size: 40rpx;
color: #999;
margin-top: 10rpx;
}
.image-popup-content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 16rpx;
position: relative;
.popup-image {
width: 500rpx;
height: 700rpx;
border-radius: 16rpx;
object-fit: cover;
}
.popup-close-btn {
width: 70rpx;
height: 70rpx;
position: absolute;
bottom: -50rpx;
left: 50%;
transform: translateX(-50%);
z-index: 10;
}
}
}
</style>
\ No newline at end of file
views/Integral.vue
View file @ 17d20f25
......@@ -288,7 +288,7 @@
>
<!-- <image
class="goods-img-bg"productIdUrl
:src="$baseUrl + `integral/1013/listItemImgBg.png`"
:src="$baseUrl + `integral/1008/listItemImgBg.png`"
mode="aspectFit"
/> -->
<view class="goods-item-container" @click="handleGoodsItemClick('xingpin',i)">
......@@ -413,11 +413,11 @@
const integralData = ref({
"tupianBanben": "1013",
"tupianBanben": "1008",
"swiper": [
{
"bannerImg": "integralBannerBg0.png",
"url": "subPackages/shopMainList/topicNew/index?id=1001057",
"url": "subPackages/shopMainList/topicNew/index?id=1000916",
"type": 2,
"extra": {
"appId": "wx4205ec55b793245e",
......@@ -594,9 +594,10 @@
}
]
},
"vipActive": [{
"vipActive": [
{
"img": "vipAct0.png",
"url": "subPackages/shopMainList/topicNew/index?id=1001057",
"url": "subPackages/shopMainList/topicNew/index?id=1000911",
"type": 2,
"extra": {
"appId": "wx4205ec55b793245e",
......@@ -624,7 +625,7 @@
],
"goodsListData": {
"listCommon": {
"listItemImgBg": "integral/1013/listItemImgBg.png"
"listItemImgBg": "integral/1008/listItemImgBg.png"
},
"tabInfo": {
"tabBg": "tapSelectBg.png",
......@@ -1471,6 +1472,7 @@
//banner点击事件
const bannerHandler = (item) => {
md.sensorLogTake({
xcxClick: "积分服务页-首屏页面点击",
pageName: "积分服务页-首屏",
......@@ -1875,7 +1877,7 @@
height: 154rpx;
// margin-left: 32rpx;
// margin-right: 32rpx;
// background: url('@{baseUrl}integral/1013/vipDetailBg.png') no-repeat center/cover;
// background: url('@{baseUrl}integral/1008/vipDetailBg.png') no-repeat center/cover;
flex-direction: row;
position: relative;
display: flex;
......@@ -1935,7 +1937,7 @@
height: 37rpx;
margin-left: 10rpx;
margin-top: 5rpx;
// background: url('@{baseUrl}integral/1013/tabNowBg.png') no-repeat center/contain;
// background: url('@{baseUrl}integral/1008/tabNowBg.png') no-repeat center/contain;
display: flex;
align-items: center;
justify-content: center;
......@@ -1971,7 +1973,7 @@
// flex: 1;
height: 144rpx;
width: 492rpx;
// background: url('@{baseUrl}integral/1013/inteBarAreaBg.png') no-repeat center/cover;
// background: url('@{baseUrl}integral/1008/inteBarAreaBg.png') no-repeat center/cover;
margin-left: 16rpx;
// padding: 16rpx 24rpx;
.integralClick {
......@@ -2230,8 +2232,8 @@
justify-content: center;
&.active {
//https://duiba.oss-cn-hangzhou.aliyuncs.com/fh/integral/1013/tapSelectBg.png
// background-image: url('@{baseUrl}integral/1013/tapSelectBg.png');
//https://duiba.oss-cn-hangzhou.aliyuncs.com/fh/integral/1008/tapSelectBg.png
// background-image: url('@{baseUrl}integral/1008/tapSelectBg.png');
background-size: 100% 100%;
.tab-line1 { color: #1d1e25; }
.tab-line2 { color: #b27c1e; }
......
views/My.vue
View file @ 17d20f25
......@@ -100,9 +100,9 @@
</view>
<!-- 积分账户 -->
<view class="integral-account">
<text class="integral-account-text"> 积分账户： </text>
<text class="integral-account-text"> 账号： </text>
<text class="integral-account-value">
{{ babyInfo.points || "0" }}</text
{{ userStore.memberInfo?.mobile || '' }}</text
>
</view>
......@@ -116,6 +116,16 @@
@add="onAddBaby"
/>
</view>
<view class="integralContainer">
<image
class="integralIcon"
src="https://course.feihe.com/momclub-picture/my/integralBg.png"
mode="aspectFit"
/>
<text class="integralText0">{{ babyInfo.points || "0" }}</text>
<text class="integralText1">积分</text>
</view>
</view>
<!-- user desc -->
<view v-if="cfgStatus.showDetail" class="user-desc">
......@@ -171,6 +181,28 @@
</view>
</view>
<view class="vip-active-area" v-if="pageCfgStore?.contentCfg?.activeInfo?.length > 0">
<text class="vip-title">精彩活动</text>
<swiper
class="vip-active-swiper"
:indicator-dots="pageCfgStore?.contentCfg?.activeInfo?.length > 1"
:autoplay="true"
:circular="true"
indicator-color="#dfddd9"
indicator-active-color="#b27c1e"
:indicator-top="32"
>
<swiper-item v-for="(item, index) in pageCfgStore?.contentCfg?.activeInfo" :key="index">
<image
class="vip-active-img"
:src="item?.img"
mode="aspectFit"
@click="handleVipActiveClick(index, item)"
/>
</swiper-item>
</swiper>
</view>
<!-- 协议 -->
<view class="protocol-container">
<image :src="$baseUrl + 'my/protocol.png'" mode="aspectFit" />
......@@ -433,7 +465,11 @@ onMounted(async () => {
pageName: "我的页面",
});
showLoading();
await userStore.loadMemberInfo();
await pageCfgStore.fetchCfg();
console.log("pageCfgStore.contentCfg====", pageCfgStore.contentCfg);
initData();
hideLoading();
});
......@@ -443,6 +479,38 @@ watch([() => userStore.userInfo, () => userStore.babyInfo], () => {
initData();
});
//会员活动点击事件
const handleVipActiveClick = (index, item) => {
// let buttonName = '';
// switch(index){
// case 0:
// buttonName = '第一张焦点图';
// break;
// case 1:
// buttonName = '第二张焦点图';
// break;
// case 2:
// buttonName = '第三张焦点图';
// break;
// }
// md.sensorLogTake({
// xcxClick: "积分服务页-二屏页面点击",
// pageName: "积分服务页-二屏",
// buttonName: buttonName,
// });
const url = item?.url;
const type = item?.type;
const extra = item?.extra;
jump({
type: type,
url: url,
extra:extra
})
}
// 定义页面配置
defineExpose({});
</script>
......@@ -585,8 +653,41 @@ defineExpose({});
color: #1d1e25;
}
}
}
.integralContainer {
position: absolute;
top: 0rpx;
right: 0rpx;
.integralIcon {
position: absolute;
width: 226rpx;
height: 166rpx;
right: 0rpx;
}
.integralText0 {
position: absolute;
font-size: 24rpx;
color: #1d1e25;
top: 45rpx;
right: 0rpx;
width: 167rpx;
text-align: center;
}
.integralText1 {
position: absolute;
font-size: 24rpx;
color: #1d1e25;
width: 167rpx;
text-align: center;
right: 0rpx;
top: 81rpx;
}
}
.edit-btn {
image {
width: 40rpx;
......@@ -625,7 +726,7 @@ defineExpose({});
border-radius: 32rpx;
padding: 32rpx 30rpx;
box-sizing: border-box;
margin-top: 161rpx;
margin-top: 180rpx;
.desc-top {
display: flex;
......@@ -720,6 +821,27 @@ defineExpose({});
}
}
.vip-active-area {
margin-left: 28rpx;
margin-top: 60rpx;
.vip-title {
margin-left: 20rpx;
}
.vip-active-swiper {
width: 692rpx;
height: 204rpx;
flex-shrink: 0;
margin-top: 30rpx;
margin-bottom: 100rpx;
.vip-active-img {
width: 100%;
height: 100%;
// border-radius: 16rpx;
}
}
}
.protocol-container {
width: 360rpx;
height: 25rpx;
......
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