Skip to content

飞
飞鹤小程序
Commit 065e8ae1 authored by zhangchenchen's avatar zhangchenchen
Browse files
Options

Merge branch 'feature/20251104-feature' into dev

parents c44f6126 09ff4637
Hide whitespace changes
Inline Side-by-side
Showing with 8841 additions and 8281 deletions
api/brand.js
View file @ 065e8ae1
import requestModule from './request.js';
const {
api
} = requestModule;
const { api } = requestModule;
export const fetchBrandJSON = () => api.get('/c/front/content',{type:'brand_V1'});
\ No newline at end of file
export const fetchBrandJSON = (type = 'brand_V1') => api.get('/c/front/content', { type });
api/home.js
View file @ 065e8ae1
import requestModule from './request.js';
const {
api
} = requestModule;
const { api } = requestModule;
/**
* 获取首页信息
......@@ -9,11 +7,9 @@ const {
*/
export const fetchHomeInfo = () => api.get('/c/user/index');
export const fetchCanEatIndex = () => api.get('/c/eat/index');
export const fetchCanEatJoin = (data) => api.post('/c/eat/join', data);
export const fetchHomeJSON = () => api.get('/c/front/content', { type: 'home_V1' });
export const fetchHomeJSON = (type = 'home_V1') => api.get('/c/front/content', { type });
export const fetchGameActConfigJSON = () => api.get('/c/front/content', { type: 'gameActConfig' });
api/integral.js
View file @ 065e8ae1
import requestModule from './request.js';
const {
api
} = requestModule;
const { api } = requestModule;
/**
* 获取积分信息
* @returns
*/
export const fetchIntegralJSON = () => api.get('/c/front/content',{type:'integral_V1'});
export const fetchIntegralJSON = (type = 'integral_V1') => api.get('/c/front/content', { type });
/**
* 获取生日礼接口
......@@ -35,7 +33,7 @@ export const getResourceList = () => api.get('/c/resource/list');
export const getSigninAndTaskInfoJSON = () => api.get('/c/activity/todo/list');
//签到接口
export const checkInJSON = (activityId) => api.post('/c/activity/todo/checkIn', {activityId});
export const checkInJSON = (activityId) => api.post('/c/activity/todo/checkIn', { activityId });
//获取秒杀列表
export const getSeckillList = () => api.get('/c/seckill/list');
......@@ -43,7 +41,7 @@ export const getSeckillList = () => api.get('/c/seckill/list');
export const taskCompleteJSON = (activityId) => api.post('/c/activity/todo/complete', { activityId });
//获取异业券接口
export const getPointsBenefitCouponJSON = () => api.get('/c/resource/pointsBenefit/coupon');
export const getPointsBenefitCouponJSON = (type) => api.get('/c/resource/pointsBenefit/coupon', { type });
//查询任务结果接口
export const queryTodoResultJSON = (activityId) => api.get('/c/activity/todo/queryTodoResult');
......@@ -52,16 +50,18 @@ export const queryTodoResultJSON = (activityId) => api.get('/c/activity/todo/que
export const getOriginInviteHomeJSON = () => api.get('/c/activity/origin_invite/home');
//邀请助力接口
export const assistInviteJSON = (invitationCode, wxUnionId) => api.post('/c/activity/origin_invite/assist', {
invitationCode,
wxUnionId
});
export const assistInviteJSON = (invitationCode, wxUnionId) =>
api.post('/c/activity/origin_invite/assist', {
invitationCode,
wxUnionId,
});
//获取邀请记录列表接口
export const getInvitationListJSON = () => api.get('/c/activity/origin_invite/invitationList');
//邀请绑定接口
export const originInviteBindJSON = (unionId, shareCode) => api.post('/c/api/activity/originInviteBind', {
unionId,
shareCode
});
export const originInviteBindJSON = (unionId, shareCode) =>
api.post('/c/api/activity/originInviteBind', {
unionId,
shareCode,
});
api/user.js
View file @ 065e8ae1
import requestModule from './request.js';
const {
api
} = requestModule;
const { api } = requestModule;
/**
* 获取用户信息
......@@ -22,9 +20,10 @@ export const getGestationalWeeks = (dueDate) => api.get('/c/user/calGestationalW
* @param {*} code
* @returns
*/
export const autoLoginByCode = (code) => api.get('/c/login/autologin', {
code,
});
export const autoLoginByCode = (code) =>
api.get('/c/login/autologin', {
code,
});
/**
* 手机号授权，调用微信手机号快速验证组件，获取encryptedData、iv、code
......@@ -46,18 +45,13 @@ export const fetchMemberInfo = () => api.get('/c/user/memberInfo');
*/
export const updateBabyInfo = (data) => api.post('/c/user/saveBaby', data);
export const fetchUserJSON = () => api.get('/c/front/content', { type: 'my_V1' });
export const fetchUserJSON = (type = 'my_V1') => api.get('/c/front/content', { type });
/** 查询用户是否参与生育补贴和鹤礼2.0*/
export const checkParticipation = (data) => api.get('/c/fertility/index', data);
export const doTerminate = () => api.post('/c/user/terminate');
/**
* 获取积分兑换记录列表（分页）
* @param {Object} params - 请求参数
......@@ -66,12 +60,10 @@ export const doTerminate = () => api.post('/c/user/terminate');
*/
export const getExchangeList = (params = {}) => api.get('/c/user/exchange/list', { params });
/**
*
* @param {orderNo} data
* @returns
*
* @param {orderNo} data
* @returns
*/
export const getOrderDetail = (data) => api.get('/c/order/detail', data);
......@@ -80,4 +72,4 @@ export const getOrderDetail = (data) => api.get('/c/order/detail', data);
* @param {Object} data - 宝宝额外信息
* @returns {Promise} 接口响应
*/
export const saveBabyExtra = (data) => api.post('/c/user/saveBabyExtra', data);
\ No newline at end of file
export const saveBabyExtra = (data) => api.post('/c/user/saveBabyExtra', data);
pages/index/index.vue
View file @ 065e8ae1
......@@ -4,14 +4,25 @@
<Brand v-if="globalStore.curTabIndex == 1 && !globalStore.isWxFriendCircle" :scroll-top="scrollTop" />
<Integral v-if="globalStore.curTabIndex == 2 && !globalStore.isWxFriendCircle" :scrollTop="scrollTop" />
<My v-if="globalStore.curTabIndex == 3 && !globalStore.isWxFriendCircle" />
<TabBar v-if="!globalStore.isWxFriendCircle" :curTabIndex="globalStore.curTabIndex" @tabClick="handleTabClick" />
<TabBar
v-if="!globalStore.isWxFriendCircle"
:curTabIndex="globalStore.curTabIndex"
@tabClick="handleTabClick"
/>
<WxFriendCircleSimplePage v-if="globalStore.isWxFriendCircle" />
<!-- 邀请奖品弹窗 -->
<InvitePrizePanel :visible="globalStore.isShowInvitePrizePanel" :inviteCount="globalStore.inviteCount"
:prizeName="globalStore.prizeName" :prizeImage="globalStore.prizeImage" :prizeType="globalStore.prizeType"
:memberId="globalStore.memberId" @close="handleCloseInvitePrizePanel" @record="handleInvitePrizePanelRecord"
@prize="handleInvitePrizePanelPrize" />
<InvitePrizePanel
:visible="globalStore.isShowInvitePrizePanel"
:inviteCount="globalStore.inviteCount"
:prizeName="globalStore.prizeName"
:prizeImage="globalStore.prizeImage"
:prizeType="globalStore.prizeType"
:memberId="globalStore.memberId"
@close="handleCloseInvitePrizePanel"
@record="handleInvitePrizePanelRecord"
@prize="handleInvitePrizePanelPrize"
/>
<!-- 任务完成弹窗 -->
<!-- <TaskComplete
......@@ -23,43 +34,73 @@
/> -->
<!-- 任务弹窗 -->
<TaskPop :visible="globalStore.isShowTaskPop" :taskTodo="globalStore.taskTodo" @close="handleCloseTaskPop"
@taskClick="handleTaskClick" />
<TaskPop
:visible="globalStore.isShowTaskPop"
:taskTodo="globalStore.taskTodo"
@close="handleCloseTaskPop"
@taskClick="handleTaskClick"
/>
<!-- 任务完成提示弹窗 -->
<TaskCompleteTips :visible="globalStore.isShowTaskComplete" :points="globalStore.taskCompletePoints"
:taskTitle="globalStore.taskCompleteTitle" @close="handleCloseTaskCompleteTips" />
<TaskCompleteTips
:visible="globalStore.isShowTaskComplete"
:points="globalStore.taskCompletePoints"
:taskTitle="globalStore.taskCompleteTitle"
@close="handleCloseTaskCompleteTips"
/>
<!-- 任务信息弹窗 -->
<TaskPerson :visible="globalStore.isShowTaskPerson" @close="handleCloseTaskPerson"
@submit="handleTaskPersonSubmit" />
<TaskPerson
:visible="globalStore.isShowTaskPerson"
@close="handleCloseTaskPerson"
@submit="handleTaskPersonSubmit"
/>
<!-- 公众号弹窗 -->
<GongzhonghaoPop :visible="showGongzhonghaoPop" :title="gongzhonghaoTitle" :description="gongzhonghaoDescription"
:qrCodeUrl="gongzhonghaoQrCodeUrl" @close="handleCloseGongzhonghaoPop" @download="handleDownloadQrCode" />
<GongzhonghaoPop
:visible="showGongzhonghaoPop"
:title="gongzhonghaoTitle"
:description="gongzhonghaoDescription"
:qrCodeUrl="gongzhonghaoQrCodeUrl"
@close="handleCloseGongzhonghaoPop"
@download="handleDownloadQrCode"
/>
<!-- 视频弹窗 -->
<view v-if="showVideo" class="video-popup1">
<video :src="currentVideoUrl" controls autoplay :style="{ width: videoWidth + 'px', height: videoHeight + 'px' }"
@loadedmetadata="onVideoLoadedMeta" @play="onVideoPlay"></video>
<video
:src="currentVideoUrl"
controls
autoplay
:style="{ width: videoWidth + 'px', height: videoHeight + 'px' }"
@loadedmetadata="onVideoLoadedMeta"
@play="onVideoPlay"
></video>
<view class="close-btn-bottom" @tap="closeVideo">×</view>
</view>
<button v-if="isBackApp" class="back-app" open-type="launchApp" app-parameter="wechat"
@binderror="handleLaunchAppError" :style="{
<button
v-if="isBackApp"
class="back-app"
open-type="launchApp"
app-parameter="wechat"
@binderror="handleLaunchAppError"
:style="{
backgroundImage: `url(${$baseUrl}homepage/backAppBtn.png)`,
}">
}"
>
<!-- <text class="back-text">返回app</text> -->
</button>
<!-- 悬浮授权手机号模块 -->
<view class="auth-phone-module" v-if="!userStore.memberInfo?.mobile">
<image class="auth-phone-bg" :src="$baseUrl + 'homepage/Q3Res/accessBg3.png'"></image>
<view class="auth-phone-btn-container">
<image class="auth-phone-btn" :src="$baseUrl + 'homepage/Q3Res/accessBtn3.png'" @tap="handleAuthPhoneClick">
<image
class="auth-phone-btn"
:src="$baseUrl + 'homepage/Q3Res/accessBtn3.png'"
@tap="handleAuthPhoneClick"
>
</image>
</view>
</view>
......@@ -67,26 +108,26 @@
</template>
<script setup>
import { ref, getCurrentInstance, onMounted, nextTick } from "vue";
import { onLoad, onShareAppMessage, onShareTimeline, onPageScroll, onShow } from "@dcloudio/uni-app";
import TabBar from "@/components/TabBar.vue";
import Home from "@/views/Home.vue";
import Brand from "@/views/Brand.vue";
import Integral from "@/views/Integral.vue";
import My from "@/views/My.vue";
import { ref, getCurrentInstance, onMounted, nextTick } from 'vue';
import { onLoad, onShareAppMessage, onShareTimeline, onPageScroll, onShow } from '@dcloudio/uni-app';
import TabBar from '@/components/TabBar.vue';
import Home from '@/views/Home.vue';
import Brand from '@/views/Brand.vue';
import Integral from '@/views/Integral.vue';
import My from '@/views/My.vue';
import md from '@/md';
import WxFriendCircleSimplePage from "@/components/WxFriendCircleSimplePage.vue";
import InvitePrizePanel from "@/components/integralArea/InvitePrizePanel.vue";
import WxFriendCircleSimplePage from '@/components/WxFriendCircleSimplePage.vue';
import InvitePrizePanel from '@/components/integralArea/InvitePrizePanel.vue';
// import TaskComplete from "@/components/qiandao/TaskComplete.vue";
import TaskPop from "@/components/renwu/TaskPop.vue";
import TaskPerson from "@/components/renwu/TaskPerson.vue";
import TaskPop from '@/components/renwu/TaskPop.vue';
import TaskPerson from '@/components/renwu/TaskPerson.vue';
import TaskCompleteTips from '@/components/renwu/TaskCompleteTips.vue';
import { useGlobalStore } from "@/stores/global.js";
import { useUserStore } from "@/stores/user.js";
import { jump, JumpType } from "../../utils";
import { taskCompleteJSON } from "../../api/integral";
import { useIntegralStore } from "@/stores/integral";
import GongzhonghaoPop from "@/components/renwu/GongzhonghaoPop.vue";
import { useGlobalStore } from '@/stores/global.js';
import { useUserStore } from '@/stores/user.js';
import { jump, JumpType } from '../../utils';
import { taskCompleteJSON } from '../../api/integral';
import { useIntegralStore } from '@/stores/integral';
import GongzhonghaoPop from '@/components/renwu/GongzhonghaoPop.vue';
const globalStore = useGlobalStore();
const userStore = useUserStore();
......@@ -98,23 +139,22 @@ const isBackApp = ref(false);
const taskId = ref(0);
const shareOptions = {
0: {
title: "8000万中国妈妈信赖的育儿品牌",
path: "/pages/index/index?pageType=home",
imageUrl: $baseUrl + "share/share_home0901.jpg",
title: '8000万中国妈妈信赖的育儿品牌',
path: '/pages/index/index?pageType=home',
imageUrl: $baseUrl + 'share/share_home0901.jpg',
},
1: {
title: "飞鹤提供家庭营养一站式解决方案",
path: "/pages/index/index?pageType=brand",
imageUrl: $baseUrl + "share/share_brand.png",
title: '飞鹤提供家庭营养一站式解决方案',
path: '/pages/index/index?pageType=brand',
imageUrl: $baseUrl + 'share/share_brand.png',
},
2: {
title: "超凡吸收！更多妈妈推荐的奶粉",
path: "/pages/index/index?pageType=integral",
imageUrl: $baseUrl + "share/share_integral.png",
title: '超凡吸收！更多妈妈推荐的奶粉',
path: '/pages/index/index?pageType=integral',
imageUrl: $baseUrl + 'share/share_integral.png',
},
};
// 公众号弹窗参数
const showGongzhonghaoPop = ref(false);
......@@ -128,7 +168,6 @@ const currentVideoUrl = ref('');
const videoWidth = ref(375);
const videoHeight = ref(210);
// 处理返回APP失败的情况
const handleLaunchAppError = (e) => {
console.error('返回APP失败:', e.detail.errMsg);
......@@ -142,7 +181,7 @@ const handleLaunchAppError = (e) => {
uni.showToast({
title: errorMessage,
icon: 'none',
duration: 2000
duration: 2000,
});
};
......@@ -152,10 +191,10 @@ function handleTabClick({ index }) {
if (!userStore.memberInfo?.mobile) {
nextTick(() => {
md.sensorComponentLogTake({
xcxComponentExposure: "true",
xcxComponentExposure: 'true',
pageName: `${['首页', '品牌', '积分', '我的'][index]}`,
componentName: "去授权手机号引导",
componentContent: "去授权手机号引导"
componentName: '去授权手机号引导',
componentContent: '去授权手机号引导',
});
});
}
......@@ -164,17 +203,16 @@ function handleTabClick({ index }) {
// 处理授权手机号按钮点击
const handleAuthPhoneClick = () => {
md.sensorComponentLogTake({
xcxComponentClick: "true",
xcxComponentClick: 'true',
pageName: `${['首页', '品牌', '积分', '我的'][globalStore.curTabIndex]}`,
componentName: "去授权手机号引导",
componentContent: "去授权手机号引导"
componentName: '去授权手机号引导',
componentContent: '去授权手机号引导',
});
jump({
type: JumpType.INNER,
url: "/pages/activity/register",
})
}
url: '/pages/activity/register',
});
};
// 检查任务结果并更新全局状态
const checkAndUpdateTaskResult = async () => {
......@@ -212,7 +250,6 @@ onMounted(async () => {
globalStore.prizeType = unclaimedPrize?.prizeType;
globalStore.memberId = res.data?.memberId;
}
}
console.log('邀请活动首页数据:', res);
});
......@@ -223,7 +260,6 @@ const handleCloseTaskCompleteTips = async () => {
await checkAndUpdateTaskResult();
};
// 完成任务并显示完成提示
const handleTaskComplete = async (taskIdParam) => {
taskId.value = 0;
......@@ -243,15 +279,13 @@ onShow(async () => {
if (!userStore.memberInfo?.mobile) {
md.sensorComponentLogTake({
xcxComponentExposure: "true",
xcxComponentExposure: 'true',
pageName: `${['首页', '品牌', '积分', '我的'][globalStore.curTabIndex]}`,
componentName: "去授权手机号引导",
componentContent: "去授权手机号引导"
componentName: '去授权手机号引导',
componentContent: '去授权手机号引导',
});
}
//完成了浏览任务
if (taskId.value > 0) {
await handleTaskComplete(taskId.value);
......@@ -259,9 +293,9 @@ onShow(async () => {
});
onLoad((options) => {
const optionsSync = wx.getEnterOptionsSync()
const optionsSync = wx.getEnterOptionsSync();
if (optionsSync.scene == '1154') {
globalStore.setIsWxFriendCircle(true)
globalStore.setIsWxFriendCircle(true);
}
// 加载会员信息，确保能正确判断手机号授权状态
......@@ -274,19 +308,32 @@ onLoad((options) => {
isBackApp.value = false;
}
console.warn('options231', options, globalStore.isWxFriendCircle)
if (
options.scene &&
typeof options.scene === 'string' &&
(options.scene.startsWith('home_') ||
options.scene.startsWith('brand_') ||
options.scene.startsWith('integral_') ||
options.scene.startsWith('my_'))
) {
const [page] = options.scene.split('_');
globalStore.setPreviewScene(page, options.scene);
options.pageType = page;
}
console.warn('options231', options, globalStore.isWxFriendCircle);
if (options.pageType) {
switch (options.pageType) {
case "home":
case 'home':
globalStore.setCurTabIndex(0);
break;
case "brand":
case 'brand':
globalStore.setCurTabIndex(1);
break;
case "integral":
case 'integral':
globalStore.setCurTabIndex(2);
break;
case "my":
case 'my':
globalStore.setCurTabIndex(3);
break;
}
......@@ -314,9 +361,6 @@ onPageScroll((e) => {
// }
// });
// 邀请奖品弹窗相关方法
// const handleInviteClick = () => {
// console.log('邀请按钮点击，显示奖品弹窗');
......@@ -344,7 +388,8 @@ const handleCloseTaskComplete = () => {
globalStore.isShowTaskComplete = false;
};
const handleAcceptTaskComplete = () => {//当前未用到
const handleAcceptTaskComplete = () => {
//当前未用到
// console.log('接受任务完成奖励');
// globalStore.isShowTaskComplete = false;
// 这里可以添加接受奖励后的逻辑
......@@ -355,7 +400,6 @@ const handleCloseTaskPop = () => {
globalStore.closeTaskPop();
};
//去完成按钮，完成任务
const handleTaskClick = async (data) => {
console.log('任务点击:', data);
......@@ -364,7 +408,7 @@ const handleTaskClick = async (data) => {
if (!data.task) {
uni.showToast({
title: '任务不存在',
icon: 'none'
icon: 'none',
});
return;
}
......@@ -377,7 +421,7 @@ const handleTaskClick = async (data) => {
globalStore.showTaskPerson(); // 延迟显示TaskPerson
}, 100);
break;
case 'BROWSE_PAGE'://浏览商城
case 'BROWSE_PAGE': //浏览商城
globalStore.closeTaskPop();
taskId.value = data?.task?.id;
// 这里可以设置任务ID用于后续完成检测
......@@ -391,58 +435,57 @@ const handleTaskClick = async (data) => {
jump({
type: JumpType.MINI,
url: url,
extra: { envVersion: "release", appId: "wx4205ec55b793245e", embedded: true }
extra: { envVersion: 'release', appId: 'wx4205ec55b793245e', embedded: true },
});
} else if (extra1.type == 'PAGE' || extra1.type == 'MINI_APP') {
jump({
type: JumpType.INNER,
url: extra1.url
url: extra1.url,
});
} else if (extra1.type == 'MINI_APP_THIRD') {
jump({
type: JumpType.MINI,
url: extra1.url,
extra: { envVersion: "release", appId: extra1.value, embedded: true }
extra: { envVersion: 'release', appId: extra1.value, embedded: true },
});
} else if (extra1.type == 'SELF_GOODS') {
jump({
type: JumpType.INNER,
url: `/v3/goodDetail/goodDetail?gid=${extra1.value}`
url: `/v3/goodDetail/goodDetail?gid=${extra1.value}`,
});
} else {
jump({
type: JumpType.H5,
url: extra1.url
url: extra1.url,
});
}
// console.log('extra66666:', extra1);
break;
case 'FirstOrder'://完成首单优选消费
case 'FirstOrder': //完成首单优选消费
const extra2 = JSON.parse(data?.task?.taskTodoExtra?.extra);
console.log('extra666661111:', extra2);
jump({
type: JumpType.MINI,
url: 'subPackages/xmhMainProcess/member/index?entrySource=xmh_wechatmp_points_recgoodsbot',
extra: { envVersion: "release", appId: "wx4205ec55b793245e", embedded: true }
extra: { envVersion: 'release', appId: 'wx4205ec55b793245e', embedded: true },
});
break;
case 'EXCHANGE_GOODS'://消费商品
case 'EXCHANGE_GOODS': //消费商品
const extra3 = JSON.parse(data?.task?.taskTodoExtra?.extra);
if (extra3.length > 0) {
let url = 'subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_north';
let url =
'subPackages/shopMainProcess/product/index?productId={productId}&skuId={skuId}&entrySource=xmh_wechatmp_points_north';
url = url.replace('{productId}', extra3[0].itemId).replace('{skuId}', extra3[0].skuId);
jump({
type: JumpType.MINI,
url: url,
extra: { envVersion: "release", appId: "wx4205ec55b793245e", embedded: true }
})
extra: { envVersion: 'release', appId: 'wx4205ec55b793245e', embedded: true },
});
}
break;
case 'FollowWx'://关注公众号
case 'FollowWx': //关注公众号
globalStore.closeTaskPop(); // 先关闭TaskPop
setTimeout(() => {
// 设置公众号弹窗参数
......@@ -452,7 +495,7 @@ const handleTaskClick = async (data) => {
showGongzhonghaoPop.value = true; // 延迟显示公众号弹窗
}, 100);
break;
case 'AddQw'://添加企业微信
case 'AddQw': //添加企业微信
globalStore.closeTaskPop(); // 先关闭TaskPop
setTimeout(() => {
// 设置公众号弹窗参数
......@@ -462,17 +505,17 @@ const handleTaskClick = async (data) => {
showGongzhonghaoPop.value = true; // 延迟显示企业微信弹窗
}, 100);
break;
case 'Register'://注册会员
case 'Register': //注册会员
// 这里可以处理注册逻辑
uni.showToast({
title: '请先注册会员',
icon: 'none'
icon: 'none',
});
break;
default:
uni.showToast({
title: '任务类型不支持',
icon: 'none'
icon: 'none',
});
break;
}
......@@ -486,7 +529,7 @@ const handleCloseTaskPerson = () => {
// 关闭公众号弹窗
const handleCloseGongzhonghaoPop = () => {
showGongzhonghaoPop.value = false;
}
};
// 处理下载二维码
const handleDownloadQrCode = (title) => {
......@@ -496,7 +539,7 @@ const handleDownloadQrCode = (title) => {
md.sensorLogTake({
xcxClick: `${title}拉起半屏二维码入口页面点击`,
pageName: `${title}拉起半屏二维码入口页面点击`,
buttonName: `下载二维码`
buttonName: `下载二维码`,
});
if (title === '公众号') {
......@@ -506,9 +549,10 @@ const handleDownloadQrCode = (title) => {
const courseUrl = 'https://course.feihe.com/momclub-picture/homepage/qrcode_qw.png';
downloadQrCode(courseUrl);
}
}
};
const downloadQrCode = (imgurl) => {//现在二维码图片
const downloadQrCode = (imgurl) => {
//现在二维码图片
uni.downloadFile({
url: imgurl,
success: (downloadRes) => {
......@@ -518,31 +562,31 @@ const downloadQrCode = (imgurl) => {//现在二维码图片
success: (res) => {
uni.showToast({
title: '保存成功',
icon: 'success'
icon: 'success',
});
},
fail: (err) => {
uni.showToast({
title: '保存失败',
icon: 'none'
icon: 'none',
});
}
},
});
} else {
uni.showToast({
title: '下载失败',
icon: 'none'
icon: 'none',
});
}
},
fail: (err) => {
uni.showToast({
title: '下载失败',
icon: 'none'
icon: 'none',
});
}
},
});
}
};
const handleTaskPersonSubmit = (formData) => {
console.log('任务信息提交:', formData);
......@@ -550,13 +594,12 @@ const handleTaskPersonSubmit = (formData) => {
// 可以显示成功提示
uni.showToast({
title: '信息提交成功',
icon: 'success'
icon: 'success',
});
};
// 视频弹窗相关方法
const closeVideo = async () => {
//完成了浏览任务
if (taskId.value > 0) {
await handleTaskComplete(taskId.value);
......@@ -571,7 +614,7 @@ const onVideoLoadedMeta = (e) => {
const pageWidth = uni.upx2px(750);
const ratio = height / width;
videoWidth.value = pageWidth;
videoHeight.value = pageWidth;// pageWidth * ratio;
videoHeight.value = pageWidth; // pageWidth * ratio;
};
const onVideoPlay = () => {
......@@ -589,13 +632,11 @@ const onVideoPlay = () => {
}
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
// .back-app{
......@@ -716,4 +757,4 @@ const onVideoPlay = () => {
text-align: center;
z-index: 10001;
}
</style>
\ No newline at end of file
</style>
stores/global.js
View file @ 065e8ae1
import {
defineStore
} from 'pinia';
import { defineStore } from 'pinia';
const cuk = uni.getStorageSync('cuk')
const openId = uni.getStorageSync('openId')
const unionId = uni.getStorageSync('unionId')
const cuk = uni.getStorageSync('cuk');
const openId = uni.getStorageSync('openId');
const unionId = uni.getStorageSync('unionId');
export const useGlobalStore = defineStore('global', {
state: () => {
return {
cuk: cuk, // 用户登录后获取的凭证，调用接口时headers中携带
curTabIndex: 0, // 当前Tab索引
isWxFriendCircle:false,
isShowLoading: false,
openId: openId,
unionId: unionId,
baseUrl: '',
isShowInvitePrizePanel: false, // 是否显示邀请奖品弹窗
isShowTaskComplete: false, // 是否显示任务完成弹窗
taskCompletePoints: 100, // 任务完成获得的积分
taskCompleteTitle: 'xxx', // 任务完成的任务名称
isShowTaskPop: false, // 是否显示任务弹窗
isShowTaskPerson: false, // 是否显示任务信息弹窗
taskTodo: [], // 任务数据
invateUseType: '', // 邀请用户类型
};
},
actions: {
setBaseUrl(url){
this.baseUrl = url
},
/**
* 设置用户cuk
* @param {Object} cuk
*/
setCuk(cuk,openId,unionId) {
this.cuk = cuk;
this.openId = openId;
this.unionId = unionId;
uni.setStorageSync('openId', openId);
uni.setStorageSync('unionId', unionId);
uni.setStorageSync('cuk', cuk);
},
/**
* 设置当前Tab索引
* @param {number} index
*/
setCurTabIndex(index) {
this.curTabIndex = index;
},
/**
* 设置当前是否是小程序朋友圈单页环境
* @param {boolean} v
*/
setIsWxFriendCircle(v){
this.isWxFriendCircle = v
},
setIsShowLoading(v){
this.isShowLoading = v
},
/**
* 显示任务完成弹窗
* @param {number} points 获得的积分
* @param {string} taskTitle 任务名称
*/
showTaskComplete(points = 100, taskTitle = 'xxx') {
this.taskCompletePoints = points;
this.taskCompleteTitle = taskTitle;
this.isShowTaskComplete = true;
},
/**
* 显示任务弹窗
* @param {Array} taskTodo 任务数据
*/
showTaskPop(taskTodo = []) {
this.taskTodo = taskTodo;
this.isShowTaskPop = true;
},
/**
* 关闭任务弹窗
*/
closeTaskPop() {
this.isShowTaskPop = false;
},
/**
* 显示任务信息弹窗
*/
showTaskPerson() {
this.isShowTaskPerson = true;
},
/**
* 关闭任务信息弹窗
*/
closeTaskPerson() {
this.isShowTaskPerson = false;
},
state: () => {
return {
cuk: cuk, // 用户登录后获取的凭证，调用接口时headers中携带
curTabIndex: 0, // 当前Tab索引
isWxFriendCircle: false,
isShowLoading: false,
openId: openId,
unionId: unionId,
baseUrl: '',
isShowInvitePrizePanel: false, // 是否显示邀请奖品弹窗
isShowTaskComplete: false, // 是否显示任务完成弹窗
taskCompletePoints: 100, // 任务完成获得的积分
taskCompleteTitle: 'xxx', // 任务完成的任务名称
isShowTaskPop: false, // 是否显示任务弹窗
isShowTaskPerson: false, // 是否显示任务信息弹窗
taskTodo: [], // 任务数据
invateUseType: '', // 邀请用户类型
previewScene: {}, // 预览场景
};
},
actions: {
setBaseUrl(url) {
this.baseUrl = url;
},
/**
* 设置用户cuk
* @param {Object} cuk
*/
setCuk(cuk, openId, unionId) {
this.cuk = cuk;
this.openId = openId;
this.unionId = unionId;
uni.setStorageSync('openId', openId);
uni.setStorageSync('unionId', unionId);
uni.setStorageSync('cuk', cuk);
},
/**
* 设置当前Tab索引
* @param {number} index
*/
setCurTabIndex(index) {
this.curTabIndex = index;
},
/**
* 清除认证信息（注销时使用）
*/
// clearAuthData() {
// this.cuk = null;
// this.openId = null;
// this.unionId = null;
// // 清除本地存储
// uni.removeStorageSync('cuk');
// uni.removeStorageSync('openId');
// uni.removeStorageSync('unionId');
// },
},
});
\ No newline at end of file
/**
* 设置当前是否是小程序朋友圈单页环境
* @param {boolean} v
*/
setIsWxFriendCircle(v) {
this.isWxFriendCircle = v;
},
setIsShowLoading(v) {
this.isShowLoading = v;
},
/**
* 显示任务完成弹窗
* @param {number} points 获得的积分
* @param {string} taskTitle 任务名称
*/
showTaskComplete(points = 100, taskTitle = 'xxx') {
this.taskCompletePoints = points;
this.taskCompleteTitle = taskTitle;
this.isShowTaskComplete = true;
},
/**
* 显示任务弹窗
* @param {Array} taskTodo 任务数据
*/
showTaskPop(taskTodo = []) {
this.taskTodo = taskTodo;
this.isShowTaskPop = true;
},
/**
* 关闭任务弹窗
*/
closeTaskPop() {
this.isShowTaskPop = false;
},
/**
* 显示任务信息弹窗
*/
showTaskPerson() {
this.isShowTaskPerson = true;
},
/**
* 关闭任务信息弹窗
*/
closeTaskPerson() {
this.isShowTaskPerson = false;
},
/**
* 设置预览场景
* @param {*} page 页面名称，例如'home'、'brand'、'integral'、'my'
* @param {*} sceneValue 场景值，以页面名称开头，例如'home_1069'、'brand_1154'
*/
setPreviewScene(page, sceneValue) {
this.previewScene = {
[page]: sceneValue,
};
},
/**
* 获取预览场景
* @param {*} page 页面名称，例如'home'、'brand'、'integral'、'my'
* @returns 场景值，以页面名称开头，例如'home_1069'、'brand_1154'
*/
getPreviewScene(page) {
return this.previewScene[page];
},
/**
* 清除认证信息（注销时使用）
*/
// clearAuthData() {
// this.cuk = null;
// this.openId = null;
// this.unionId = null;
// // 清除本地存储
// uni.removeStorageSync('cuk');
// uni.removeStorageSync('openId');
// uni.removeStorageSync('unionId');
// },
},
});
stores/integral.js
View file @ 065e8ae1
import { defineStore } from "pinia";
import { getSigninAndTaskInfoJSON, checkInJSON, getSeckillList, getPointsBenefitCouponJSON, queryTodoResultJSON, getOriginInviteHomeJSON, assistInviteJSON, getInvitationListJSON, originInviteBindJSON } from "../api/integral";
import { defineStore } from 'pinia';
import {
getSigninAndTaskInfoJSON,
checkInJSON,
getSeckillList,
getPointsBenefitCouponJSON,
queryTodoResultJSON,
getOriginInviteHomeJSON,
assistInviteJSON,
getInvitationListJSON,
originInviteBindJSON,
} from '../api/integral';
import signinAndTaskInfoMock from '../mock/getSigninAndTaskInMock.json';
import checkInMock from '../mock/checkIndata.json';
import pointsBenefitCouponMock from '../mock/pointsBenefitCoupon.json';
......@@ -7,7 +17,7 @@ import queryTodoResultMock from '../mock/queryTodoResult.json';
import originInviteHomeMock from '../mock/originInviteHome.json';
import assistInviteMock from '../mock/assistInvite.json';
import invitationListMock from '../mock/invitationList.json';
export const useIntegralStore = defineStore("integral", {
export const useIntegralStore = defineStore('integral', {
state: () => {
return {
_signinAndTaskInfo: null,
......@@ -23,122 +33,139 @@ export const useIntegralStore = defineStore("integral", {
},
actions: {
async getSigninAndTaskInfo(isdebug = false) {
if(isdebug) {
this._signinAndTaskInfo = signinAndTaskInfoMock;
return signinAndTaskInfoMock;
}else{
const res = await getSigninAndTaskInfoJSON();
this._signinAndTaskInfo = res;
return res;
}
},
async checkIn(activityId,isdebug = false) {
// if(isdebug) {
// this._checkInData = checkInMock; // 存储到state中
// return checkInMock;
// }else{
const res = await checkInJSON(activityId);
if (isdebug) {
this._signinAndTaskInfo = signinAndTaskInfoMock;
return signinAndTaskInfoMock;
} else {
const res = await getSigninAndTaskInfoJSON();
this._signinAndTaskInfo = res;
return res;
}
},
async checkIn(activityId, isdebug = false) {
// if(isdebug) {
// this._checkInData = checkInMock; // 存储到state中
// return checkInMock;
// }else{
const res = await checkInJSON(activityId);
this._checkInData = res; // 存储到state中
return res;
// }
this._checkInData = res; // 存储到state中
return res;
// }
},
async getSeckillData(isdebug = false) {
// if(isdebug) {
// // 使用模拟数据结构
// const mockSeckillData = {
// sessions: [
// {
// id: 1,
// status: 'ongoing',
// countdown: '01:58:59',
// timeTags: ['正在秒杀', '18:00开始', '20:00结束'],
// goods: [
// {
// id: 'good1',
// name: '商品名称商品名称商称商品名称商称商品名称商称商品名称商品...',
// points: 100,
// originalPoints: 500,
// image: ''
// }
// ]
// }
// ]
// };
// this._seckillData = mockSeckillData;
// return mockSeckillData;
// } else {
const res = await getSeckillList();
this._seckillData = res;
return res;
// }
},
async getPointsBenefitCoupon(isdebug = false) {
// if(isdebug) {
// this._pointsBenefitCoupon = pointsBenefitCouponMock;
// return pointsBenefitCouponMock;
// }else{
const res = await getPointsBenefitCouponJSON();
this._pointsBenefitCoupon = res;
return res;
// }
// if(isdebug) {
// // 使用模拟数据结构
// const mockSeckillData = {
// sessions: [
// {
// id: 1,
// status: 'ongoing',
// countdown: '01:58:59',
// timeTags: ['正在秒杀', '18:00开始', '20:00结束'],
// goods: [
// {
// id: 'good1',
// name: '商品名称商品名称商称商品名称商称商品名称商称商品名称商品...',
// points: 100,
// originalPoints: 500,
// image: ''
// }
// ]
// }
// ]
// };
// this._seckillData = mockSeckillData;
// return mockSeckillData;
// } else {
const res = await getSeckillList();
this._seckillData = res;
return res;
// }
},
async getPointsBenefitCoupon(type) {
// if(isdebug) {
// this._pointsBenefitCoupon = pointsBenefitCouponMock;
// return pointsBenefitCouponMock;
// }else{
const res = await getPointsBenefitCouponJSON(type);
this._pointsBenefitCoupon = res;
return res;
// }
},
async queryTodoResultServer(isdebug = false) {
if(isdebug) {
this._queryTodoResult = queryTodoResultMock;
return queryTodoResultMock;
}else{
const res = await queryTodoResultJSON();
this._queryTodoResult = res;
return res;
}
if (isdebug) {
this._queryTodoResult = queryTodoResultMock;
return queryTodoResultMock;
} else {
const res = await queryTodoResultJSON();
this._queryTodoResult = res;
return res;
}
},
async getOriginInviteHome(isdebug = false) {
if(isdebug) {
this._originInviteHome = originInviteHomeMock;
return originInviteHomeMock;
}else{
const res = await getOriginInviteHomeJSON();
this._originInviteHome = res;
return res;
}
if (isdebug) {
this._originInviteHome = originInviteHomeMock;
return originInviteHomeMock;
} else {
const res = await getOriginInviteHomeJSON();
this._originInviteHome = res;
return res;
}
},
async assistInvite(invitationCode, wxUnionId, isdebug = false) {
if(isdebug) {
this._assistInviteData = assistInviteMock;
return assistInviteMock;
}else{
const res = await assistInviteJSON(invitationCode, wxUnionId);
this._assistInviteData = res;
return res;
}
if (isdebug) {
this._assistInviteData = assistInviteMock;
return assistInviteMock;
} else {
const res = await assistInviteJSON(invitationCode, wxUnionId);
this._assistInviteData = res;
return res;
}
},
async getInvitationList(isdebug = false) {
if(isdebug) {
this._invitationList = invitationListMock;
return invitationListMock;
}else{
const res = await getInvitationListJSON();
this._invitationList = res;
return res;
}
if (isdebug) {
this._invitationList = invitationListMock;
return invitationListMock;
} else {
const res = await getInvitationListJSON();
this._invitationList = res;
return res;
}
},
async originInviteBind(unionId, shareCode, isdebug = false) {
const res = await originInviteBindJSON(unionId, shareCode);
this._originInviteBindData = res;
return res;
const res = await originInviteBindJSON(unionId, shareCode);
this._originInviteBindData = res;
return res;
},
},
getters: {
signinAndTaskInfo : (state) => {return state._signinAndTaskInfo; },
checkInData : (state) => {return state._checkInData; },
seckillData : (state) => {return state._seckillData; },
pointsBenefitCoupon : (state) => {return state._pointsBenefitCoupon; },
queryTodoResult : (state) => {return state._queryTodoResult; },
originInviteHome : (state) => {return state._originInviteHome; },
assistInviteData : (state) => {return state._assistInviteData; },
invitationList : (state) => {return state._invitationList; },
originInviteBindData : (state) => {return state._originInviteBindData; },
signinAndTaskInfo: (state) => {
return state._signinAndTaskInfo;
},
checkInData: (state) => {
return state._checkInData;
},
seckillData: (state) => {
return state._seckillData;
},
pointsBenefitCoupon: (state) => {
return state._pointsBenefitCoupon;
},
queryTodoResult: (state) => {
return state._queryTodoResult;
},
originInviteHome: (state) => {
return state._originInviteHome;
},
assistInviteData: (state) => {
return state._assistInviteData;
},
invitationList: (state) => {
return state._invitationList;
},
originInviteBindData: (state) => {
return state._originInviteBindData;
},
},
});
\ No newline at end of file
});
stores/pageCfg.js
View file @ 065e8ae1
This source diff could not be displayed because it is too large. You can view the blob instead.
views/Brand.vue
View file @ 065e8ae1
<template>
<view class="brand-container">
<view class="content">
<swiper id="firstScreen" class="swiper banner" :current="swiperIndex" @animationfinish="intervalChange"
circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"
:indicator-color="indicatorColor" :indicator-active-color="indicatoractiveColor">
<swiper-item v-for="(item, index) in swiperList" :key="index">
<view class="swiper-item banneritem">
<image :data-log="{
xcxClick: '品牌故事-首屏页面点击',
pageName: '品牌故事-首屏页面',
buttonName: `背景图-${swiperNameList[index]}`
}" :data-comlog="{
xcxComponentClick: 'true',
pageName: '品牌故事页',
componentName: '品牌故事页banner',
componentContent: item.title || ''
}" :data-link="item.link" @tap="jumpLink(item.link, item.videoUrl, $event)" class="b-img"
:src="item?.url?.indexOf('http') === 0 ? item.url : $baseUrl + item.url">
</image>
</view>
</swiper-item>
</swiper>
<view class="swiperbox">
<view class="iconbox">
<!-- <image :data-log="{
<view class="brand-container">
<view class="content">
<swiper
id="firstScreen"
class="swiper banner"
:current="swiperIndex"
@animationfinish="intervalChange"
circular
:indicator-dots="indicatorDots"
:autoplay="autoplay"
:interval="interval"
:duration="duration"
:indicator-color="indicatorColor"
:indicator-active-color="indicatoractiveColor"
>
<swiper-item v-for="(item, index) in swiperList" :key="index">
<view class="swiper-item banneritem">
<image
:data-log="{
xcxClick: '品牌故事-首屏页面点击',
pageName: '品牌故事-首屏页面',
buttonName: `背景图-${swiperNameList[index]}`,
}"
:data-comlog="{
xcxComponentClick: 'true',
pageName: '品牌故事页',
componentName: '品牌故事页banner',
componentContent: item.title || '',
}"
:data-link="item.link"
@tap="jumpLink(item.link, item.videoUrl, $event)"
class="b-img"
:src="item?.url?.indexOf('http') === 0 ? item.url : $baseUrl + item.url"
>
</image>
</view>
</swiper-item>
</swiper>
<view class="swiperbox">
<view class="iconbox">
<!-- <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> -->
<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.length > 7 ?
swiperIconList[swiperIndex]?.text.substring(0, 7) + '...' :
swiperIconList[swiperIndex]?.text }}</text>
</view>
</view>
</view>
<view class="swiper-mask">
<image class="swiper-mask-img" :src="$baseUrl + 'homepage/home_format_v2.png'"></image>
</view>
<view class="videoposterbox"
v-if="video1Channel.videoUrl || (video1Channel.finderUserName && video1Channel.feedId)">
<video v-if="video1Channel.videoUrl" ref="brandVideo1Ref" id="brandVideo1" class="videoposter"
:src="video1Channel.videoUrl?.indexOf('http') === 0 ? video1Channel.videoUrl : $baseUrl + video1Channel.videoUrl"
:autoplay="false" :data-log="{
xcxClick: '品牌故事-次屏页面点击',
pageName: '品牌故事-首屏页面',
buttonName: '腰部品牌Video'
}" :poster="video1Channel.posterUrl?.indexOf('http') === 0 ? video1Channel.posterUrl : $baseUrl + video1Channel.posterUrl"
object-fit="cover" @loadedmetadata="onVideoLoadedMeta" @play="onVideo1Play"
@ended="onVideo1Ended"></video>
<image v-else :data-log="{
xcxClick: '品牌故事-次屏页面点击',
pageName: '品牌故事-首屏页面',
buttonName: '腰部品牌Video'
}" :data-comlog="{
xcxComponentClick: 'true',
pageName: '品牌故事页',
componentName: '品牌故事视频',
componentContent: video1Channel.title || ''
}" @tap="openChannel(video1Channel, $event)" class="videoposter"
:src="video1Channel.posterUrl?.indexOf('http') === 0 ? video1Channel.posterUrl : $baseUrl + video1Channel.posterUrl">
</image>
<view class="videoposterboxtitle" v-if="showVideo1Title">{{ video1Channel.title || "" }}</view>
</view>
<view id="secondScreen" class="productcontai"
v-if="productTabList.length > 0 && productInfoList.length > 0">
<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: `${item}`
}" :data-comlog="{
xcxComponentClick: 'true',
pageName: '品牌故事页',
componentName: '飞鹤产品家族',
componentContent: '产品家族切换分类-' + item
}" :class="channelTabIndex === index ? 'tabitem tabActive' : 'tabitem'" v-for="(item, index) in productTabList"
:key="index" :id="'tab-' + index">
{{ 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}+'商品'`
}" :data-comlog="{
xcxComponentClick: 'true',
pageName: '品牌故事页',
componentName: '飞鹤产品家族',
componentContent: '产品家族商品-' + infoItem.desc
}" @tap="jumpProduct(infoItem, $event)">
<view class="flexbox">
<view class="infotitle">
{{ infoItem.title }}
</view>
<image class="infoimg"
:src="infoItem.bgUrl?.indexOf('http') === 0 ? infoItem.bgUrl : $baseUrl + infoItem.bgUrl">
</image>
</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}+'商品'`
}" :data-comlog="{
xcxComponentClick: 'true',
pageName: '品牌故事页',
componentName: '飞鹤产品家族',
componentContent: '产品家族商品-' + infoItem.desc
}" @tap="jumpProduct(infoItem, $event)">
<view class="flexbox">
<view class="infotitle">
{{ infoItem.title }}
</view>
<image class="infoimg"
:src="infoItem.bgUrl?.indexOf('http') === 0 ? infoItem.bgUrl : $baseUrl + infoItem.bgUrl">
</image>
</view>
<view class="infodesc">{{ infoItem.desc }}</view>
</view>
</view>
</view>
</scroll-view>
</view>
<view class="videoposterbox"
v-if="video2Channel.videoUrl || (video2Channel.finderUserName && video2Channel.feedId)">
<video v-if="video2Channel.videoUrl" ref="brandVideo2Ref" id="brandVideo2" class="videoposter"
:src="video2Channel.videoUrl?.indexOf('http') === 0 ? video2Channel.videoUrl : $baseUrl + video2Channel.videoUrl"
:autoplay="false" object-fit="cover" @loadedmetadata="onVideoLoadedMeta" @play="onVideo2Play"
:poster="video2Channel.posterUrl?.indexOf('http') === 0 ? video2Channel.posterUrl : $baseUrl + video2Channel.posterUrl"
@ended="onVideo2Ended"></video>
<image v-else class="videoposter" :data-comlog="{
xcxComponentClick: 'true',
pageName: '品牌故事页',
componentName: '品牌故事视频',
componentContent: video2Channel.title || ''
}" @tap="openChannel(video2Channel, $event)"
:src="video2Channel.posterUrl?.indexOf('http') === 0 ? video2Channel.posterUrl : $baseUrl + video2Channel.posterUrl">
</image>
<view class="videoposterboxtitle" v-if="showVideo2Title">{{ video2Channel.title || "" }}</view>
</view>
<view id="thirdScreen" class="ipbox" v-if="erqiPeizhi.appId1 && erqiPeizhi.appId2"
:style="{ background: `url(${$baseUrl}brandpage/hexiaofeiBg.png) no-repeat center/contain` }">
<!-- <store-product appid="wx1ad0903b95889ea1" product-id="10000239570622" custom-content="true"> -->
<image :data-log="{
xcxClick: '品牌故事-三屏页面点击',
pageName: '品牌故事-三屏页面',
buttonName: `全家形象`
}" class="iphexiaofei" @tap="jumpLink(erqiPeizhi.link, erqiPeizhi.videoUrl, $event)"
:src="erqiPeizhi.iphexiaofeiUrl">
</image>
<!-- </store-product> -->
<view class="ipcard">
<view class="title">
{{ erqiPeizhi.title2 }}
<!-- <view class="t1">鹤小飞一家</view> -->
</view>
<view class="desc">
{{ ipDesc }}
</view>
<view class="ipflex">
<view class="ipbg ip1" id="ip1" @tap="ipTapEvent(1, $event)">
<store-product :appid="erqiPeizhi.appId1" :product-id="erqiPeizhi.productId1"
custom-content="true">
<image :data-log="{
xcxClick: '品牌故事-三屏页面点击',
pageName: '品牌故事-三屏页面',
buttonName: `${hexiaofeiNameList[0]}`
}" :src="erqiPeizhi.ipImg1?.indexOf('http') === 0 ? erqiPeizhi.ipImg1 : $baseUrl + erqiPeizhi.ipImg1"
class="ip1">
</image>
</store-product>
</view>
<view class="ipright">
<view class="ipbg ip2" id="ip2" @tap="ipTapEvent(2, $event)">
<store-product :appid="erqiPeizhi.appId2" :product-id="erqiPeizhi.productId2"
custom-content="true">
<image :data-log="{
xcxClick: '品牌故事-三屏页面点击',
pageName: '品牌故事-三屏页面',
buttonName: `${hexiaofeiNameList[1]}`
}" :src="erqiPeizhi.ipImg2?.indexOf('http') === 0 ? erqiPeizhi.ipImg2 : $baseUrl + erqiPeizhi.ipImg2">
</image>
</store-product>
</view>
<view style="display: flex;justify-content: space-between;margin-top: 20rpx;">
<view class="ipbg ip3" id="ip3" @tap="ipTapEvent(3, $event)">
<image :data-log="{
xcxClick: '品牌故事-三屏页面点击',
pageName: '品牌故事-三屏页面',
buttonName: `${hexiaofeiNameList[2]}`
}" @tap="showPopup(0, $event)"
:src="erqiPeizhi.ipImg3?.indexOf('http') === 0 ? erqiPeizhi.ipImg3 : $baseUrl + erqiPeizhi.ipImg3">
</image>
</view>
<view class="ipbg ip4" id="ip4" @tap="ipTapEvent(4, $event)">
<image :data-log="{
xcxClick: '品牌故事-三屏页面点击',
pageName: '品牌故事-三屏页面',
buttonName: `${hexiaofeiNameList[3]}`
}" @tap="showPopup(2, $event)"
:src="erqiPeizhi.ipImg4?.indexOf('http') === 0 ? erqiPeizhi.ipImg4 : $baseUrl + erqiPeizhi.ipImg4">
</image>
</view>
</view>
</view>
</view>
</view>
</view>
<view v-if="esgInfoList.length > 0" class="esgbox">
<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"
:id="'esg' + (index + 1)"
:style="{ background: `url(${$baseUrl}brandpage/esgItemBg.png) no-repeat center/505rpx 638rpx` }"
:data-log="{
xcxClick: `品牌故事-三屏页面点击`,
pageName: `品牌故事-三屏页面ESG点击`,
buttonName: `${index + 1}-${infoItem.desc}`
}" :data-comlog="{
xcxComponentClick: 'true',
pageName: '品牌故事页',
componentName: '飞鹤ESG',
componentContent: infoItem.desc
}" @tap="jumpLink(infoItem.link, infoItem.videoUrl, $event)">
<image class="infoimg imgRaduis"
:src="infoItem.bgUrl?.indexOf('http') === 0 ? infoItem.bgUrl : $baseUrl + infoItem.bgUrl">
</image>
<view class="infotitle">{{ infoItem.desc }}</view>
<view class="infodesc">{{ infoItem.desc2 }}</view>
</view>
</view>
</view>
</view>
</view>
<view>
<!-- 普通弹窗 -->
<uni-popup :is-mask-click="false" :safe-area="false" ref="popup" background-color="#fff"
border-radius="48rpx">
<view v-if="qrInfoObj !== null" class="popup-content">
<image class="btnclose" @tap="closePop" :src="$baseUrl + 'homepage/btnclose.png'"></image>
<view class="title">
{{ qrInfoObj.title }}
</view>
<rich-text class="desc" :nodes="qrInfoObj.desc">
</rich-text>
<image :show-menu-by-longpress="true" class="qrcode" :src="$baseUrl + qrInfoObj.qrUrl"></image>
<image @tap="downloadHandler($baseUrl + qrInfoObj.qrUrl)" class="btndownload"
:src="$baseUrl + 'homepage/btn_download.png'"></image>
</view>
<view v-else class="popup-content" style="height: 899rpx;">
<image class="xingmahui" :src="$baseUrl + 'brandpage/hexiaofei.png'"></image>
<image class="btnclose" @tap="closePop" :src="$baseUrl + 'homepage/btnclose.png'"></image>
</view>
</uni-popup>
</view>
<view v-if="showVideo" class="video-popup">
<video :src="currentVideoUrl" controls autoplay
:style="{ width: videoWidth + 'px', height: videoHeight + 'px' }" @loadedmetadata="onVideoLoadedMeta"
@play="onVideoPlay"></video>
<view class="close-btn-bottom" @tap="closeVideo">×</view>
</view>
</view>
<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.length > 7
? swiperIconList[swiperIndex]?.text.substring(0, 7) + '...'
: swiperIconList[swiperIndex]?.text
}}</text>
</view>
</view>
</view>
<view class="swiper-mask">
<image class="swiper-mask-img" :src="$baseUrl + 'homepage/home_format_v2.png'"></image>
</view>
<view
class="videoposterbox"
v-if="video1Channel.videoUrl || (video1Channel.finderUserName && video1Channel.feedId)"
>
<video
v-if="video1Channel.videoUrl"
ref="brandVideo1Ref"
id="brandVideo1"
class="videoposter"
:src="
video1Channel.videoUrl?.indexOf('http') === 0
? video1Channel.videoUrl
: $baseUrl + video1Channel.videoUrl
"
:autoplay="false"
:data-log="{
xcxClick: '品牌故事-次屏页面点击',
pageName: '品牌故事-首屏页面',
buttonName: '腰部品牌Video',
}"
:poster="
video1Channel.posterUrl?.indexOf('http') === 0
? video1Channel.posterUrl
: $baseUrl + video1Channel.posterUrl
"
object-fit="cover"
@loadedmetadata="onVideoLoadedMeta"
@play="onVideo1Play"
@ended="onVideo1Ended"
></video>
<image
v-else
:data-log="{
xcxClick: '品牌故事-次屏页面点击',
pageName: '品牌故事-首屏页面',
buttonName: '腰部品牌Video',
}"
:data-comlog="{
xcxComponentClick: 'true',
pageName: '品牌故事页',
componentName: '品牌故事视频',
componentContent: video1Channel.title || '',
}"
@tap="openChannel(video1Channel, $event)"
class="videoposter"
:src="
video1Channel.posterUrl?.indexOf('http') === 0
? video1Channel.posterUrl
: $baseUrl + video1Channel.posterUrl
"
>
</image>
<view class="videoposterboxtitle" v-if="showVideo1Title">{{ video1Channel.title || '' }}</view>
</view>
<!-- 产品家族 -->
<view
id="secondScreen"
class="productcontai"
v-if="productTabList.length > 0 && productInfoList.length > 0"
>
<text class="maintitle">{{ erqiPeizhi.title1 }}</text>
<!-- tab容器 -->
<scroll-view
class="listbox"
scroll-x="true"
show-scrollbar="false"
:scroll-into-view="'tab-' + channelTabIndex"
:scroll-with-animation="true"
>
<view class="tab-container">
<view
@tap="channelTabHandler(index, $event)"
:data-log="{
xcxClick: '品牌故事-次屏页面点击',
pageName: '品牌故事-次屏页面',
buttonName: `${item}`,
}"
:data-comlog="{
xcxComponentClick: 'true',
pageName: '品牌故事页',
componentName: '飞鹤产品家族',
componentContent: '产品家族切换分类-' + item,
}"
:class="channelTabIndex === index ? 'tabitem tabActive' : 'tabitem'"
v-for="(item, index) in productTabList"
:key="index"
:id="'tab-' + index"
>
{{ 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}+'商品'`,
}"
:data-comlog="{
xcxComponentClick: 'true',
pageName: '品牌故事页',
componentName: '飞鹤产品家族',
componentContent: '产品家族商品-' + infoItem.desc,
}"
@tap="jumpProduct(infoItem, $event)"
>
<view class="flexbox">
<view class="infotitle">
{{ infoItem.title }}
</view>
<image
class="infoimg"
:src="infoItem.bgUrl?.indexOf('http') === 0 ? infoItem.bgUrl : $baseUrl + infoItem.bgUrl"
>
</image>
</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}+'商品'`,
}"
:data-comlog="{
xcxComponentClick: 'true',
pageName: '品牌故事页',
componentName: '飞鹤产品家族',
componentContent: '产品家族商品-' + infoItem.desc,
}"
@tap="jumpProduct(infoItem, $event)"
>
<view class="flexbox">
<view class="infotitle">
{{ infoItem.title }}
</view>
<image
class="infoimg"
:src="infoItem.bgUrl?.indexOf('http') === 0 ? infoItem.bgUrl : $baseUrl + infoItem.bgUrl"
>
</image>
</view>
<view class="infodesc">{{ infoItem.desc }}</view>
</view>
</view>
</view>
</scroll-view>
</view>
<!-- 视频 -->
<view
class="videoposterbox"
v-if="video2Channel.videoUrl || (video2Channel.finderUserName && video2Channel.feedId)"
>
<video
v-if="video2Channel.videoUrl"
ref="brandVideo2Ref"
id="brandVideo2"
class="videoposter"
:src="
video2Channel.videoUrl?.indexOf('http') === 0
? video2Channel.videoUrl
: $baseUrl + video2Channel.videoUrl
"
:autoplay="false"
object-fit="cover"
@loadedmetadata="onVideoLoadedMeta"
@play="onVideo2Play"
:poster="
video2Channel.posterUrl?.indexOf('http') === 0
? video2Channel.posterUrl
: $baseUrl + video2Channel.posterUrl
"
@ended="onVideo2Ended"
></video>
<image
v-else
class="videoposter"
:data-comlog="{
xcxComponentClick: 'true',
pageName: '品牌故事页',
componentName: '品牌故事视频',
componentContent: video2Channel.title || '',
}"
@tap="openChannel(video2Channel, $event)"
:src="
video2Channel.posterUrl?.indexOf('http') === 0
? video2Channel.posterUrl
: $baseUrl + video2Channel.posterUrl
"
>
</image>
<view class="videoposterboxtitle" v-if="showVideo2Title">{{ video2Channel.title || '' }}</view>
</view>
<!-- 鹤小飞一家 -->
<view
id="thirdScreen"
class="ipbox"
v-if="erqiPeizhi.appId1 && erqiPeizhi.appId2"
:style="{ background: `url(${$baseUrl}brandpage/hexiaofeiBg.png) no-repeat center/contain` }"
>
<!-- <store-product appid="wx1ad0903b95889ea1" product-id="10000239570622" custom-content="true"> -->
<image
:data-log="{
xcxClick: '品牌故事-三屏页面点击',
pageName: '品牌故事-三屏页面',
buttonName: `全家形象`,
}"
class="iphexiaofei"
@tap="jumpLink(erqiPeizhi.link, erqiPeizhi.videoUrl, $event)"
:src="erqiPeizhi.iphexiaofeiUrl"
>
</image>
<!-- </store-product> -->
<view class="ipcard">
<!-- 标题 -->
<view class="title">{{ erqiPeizhi.title2 }}</view>
<!-- 描述 -->
<view class="desc">{{ ipDesc }}</view>
<!-- 商品 -->
<view class="ipflex">
<!-- 竖版商品 -->
<view class="ipbg ip1" id="ip1" @tap="ipTapEvent(1, $event)">
<store-product
:appid="erqiPeizhi.appId1"
:product-id="erqiPeizhi.productId1"
custom-content="true"
class="store-product-container"
>
<view class="ipcontainer">
<image
:data-log="{
xcxClick: '品牌故事-三屏页面点击',
pageName: '品牌故事-三屏页面',
buttonName: `${hexiaofeiNameList[0]}`,
}"
:src="
erqiPeizhi.ipImg1?.indexOf('http') === 0
? erqiPeizhi.ipImg1
: $baseUrl + erqiPeizhi.ipImg1
"
class="ip1"
>
</image>
<view class="ipcontext">
<view class="ipcontext-desc">{{ erqiPeizhi.ipTitle1 || '' }}</view>
<view class="ipcontext-title">{{ erqiPeizhi.ipDesc1 || '' }}</view>
</view>
</view>
</store-product>
</view>
<view class="ipright">
<!-- 横版商品 -->
<view class="ipbg ip2" id="ip2" @tap="ipTapEvent(2, $event)">
<store-product
:appid="erqiPeizhi.appId2"
:product-id="erqiPeizhi.productId2"
custom-content="true"
class="store-product-container"
>
<view class="ipcontainer">
<view class="ipcontext">
<view class="ipcontext-title">{{ erqiPeizhi.ipTitle2 || '' }}</view>
<view class="ipcontext-desc">{{ erqiPeizhi.ipDesc2 || '' }}</view>
</view>
<image
:data-log="{
xcxClick: '品牌故事-三屏页面点击',
pageName: '品牌故事-三屏页面',
buttonName: `${hexiaofeiNameList[1]}`,
}"
:src="
erqiPeizhi.ipImg2?.indexOf('http') === 0
? erqiPeizhi.ipImg2
: $baseUrl + erqiPeizhi.ipImg2
"
>
</image>
</view>
</store-product>
</view>
<view style="display: flex; justify-content: space-between; margin-top: 20rpx">
<!-- 视频号 -->
<view class="ipbg ip3" id="ip3" @tap="ipTapEvent(3, $event)">
<image
:data-log="{
xcxClick: '品牌故事-三屏页面点击',
pageName: '品牌故事-三屏页面',
buttonName: `${hexiaofeiNameList[2]}`,
}"
@tap="showPopup(0, $event)"
:src="
erqiPeizhi.ipImg3?.indexOf('http') === 0
? erqiPeizhi.ipImg3
: $baseUrl + erqiPeizhi.ipImg3
"
>
</image>
</view>
<!-- 小红书 -->
<view class="ipbg ip4" id="ip4" @tap="ipTapEvent(4, $event)">
<image
:data-log="{
xcxClick: '品牌故事-三屏页面点击',
pageName: '品牌故事-三屏页面',
buttonName: `${hexiaofeiNameList[3]}`,
}"
@tap="showPopup(2, $event)"
:src="
erqiPeizhi.ipImg4?.indexOf('http') === 0
? erqiPeizhi.ipImg4
: $baseUrl + erqiPeizhi.ipImg4
"
>
</image>
</view>
</view>
</view>
</view>
</view>
</view>
<view v-if="esgInfoList.length > 0" class="esgbox">
<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"
:id="'esg' + (index + 1)"
:style="{
background: `url(${$baseUrl}brandpage/esgItemBg.png) no-repeat center/505rpx 638rpx`,
}"
:data-log="{
xcxClick: `品牌故事-三屏页面点击`,
pageName: `品牌故事-三屏页面ESG点击`,
buttonName: `${index + 1}-${infoItem.desc}`,
}"
:data-comlog="{
xcxComponentClick: 'true',
pageName: '品牌故事页',
componentName: '飞鹤ESG',
componentContent: infoItem.desc,
}"
@tap="jumpLink(infoItem.link, infoItem.videoUrl, $event)"
>
<image
class="infoimg imgRaduis"
:src="infoItem.bgUrl?.indexOf('http') === 0 ? infoItem.bgUrl : $baseUrl + infoItem.bgUrl"
>
</image>
<view class="infotitle">{{ infoItem.desc }}</view>
<view class="infodesc">{{ infoItem.desc2 }}</view>
</view>
</view>
</view>
</view>
</view>
<view>
<!-- 普通弹窗 -->
<uni-popup
:is-mask-click="false"
:safe-area="false"
ref="popup"
background-color="#fff"
border-radius="48rpx"
>
<view v-if="qrInfoObj !== null" class="popup-content">
<image class="btnclose" @tap="closePop" :src="$baseUrl + 'homepage/btnclose.png'"></image>
<view class="title">
{{ qrInfoObj.title }}
</view>
<rich-text class="desc" :nodes="qrInfoObj.desc"> </rich-text>
<image :show-menu-by-longpress="true" class="qrcode" :src="$baseUrl + qrInfoObj.qrUrl"></image>
<image
@tap="downloadHandler($baseUrl + qrInfoObj.qrUrl)"
class="btndownload"
:src="$baseUrl + 'homepage/btn_download.png'"
></image>
</view>
<view v-else class="popup-content" style="height: 899rpx">
<image class="xingmahui" :src="$baseUrl + 'brandpage/hexiaofei.png'"></image>
<image class="btnclose" @tap="closePop" :src="$baseUrl + 'homepage/btnclose.png'"></image>
</view>
</uni-popup>
</view>
<view v-if="showVideo" class="video-popup">
<video
:src="currentVideoUrl"
controls
autoplay
:style="{ width: videoWidth + 'px', height: videoHeight + 'px' }"
@loadedmetadata="onVideoLoadedMeta"
@play="onVideoPlay"
></video>
<view class="close-btn-bottom" @tap="closeVideo">×</view>
</view>
</view>
</template>
<script>
import { fetchBrandJSON } from '../api/brand';
import { jump, JumpType } from '../utils';
import md from '../md';
import ExposureTracker from '../utils/exposure';
import { useGlobalStore } from '@/stores/global.js';
const globalStore = useGlobalStore();
// 定义需要曝光检测的元素配置
const EXPOSURE_CONFIGS = [
{
id: 'firstScreen',
logParams: {
xcxPage: '品牌故事-首屏页面浏览',
pageName: '品牌故事-首屏页面'
}
},
// 可以添加更多需要曝光检测的元素配置
{
id: 'secondScreen',
logParams: {
xcxPage: '品牌故事-首屏页面浏览',
pageName: '品牌故事-次屏页面'
}
},
{
id: 'thirdScreen',
logParams: {
xcxPage: '品牌故事-首屏页面浏览',
pageName: '品牌故事-三屏页面'
}
}
{
id: 'firstScreen',
logParams: {
xcxPage: '品牌故事-首屏页面浏览',
pageName: '品牌故事-首屏页面',
},
},
// 可以添加更多需要曝光检测的元素配置
{
id: 'secondScreen',
logParams: {
xcxPage: '品牌故事-首屏页面浏览',
pageName: '品牌故事-次屏页面',
},
},
{
id: 'thirdScreen',
logParams: {
xcxPage: '品牌故事-首屏页面浏览',
pageName: '品牌故事-三屏页面',
},
},
];
export default {
beforeDestroy() {
if (this.exposureTracker) {
this.exposureTracker.resetAllExposure();
}
this.stopAllVideos();
},
deactivated() {
if (this.exposureTracker) {
this.exposureTracker.resetAllExposure();
}
this.stopAllVideos();
},
props: {
scrollTop: {
type: Number,
default: 0
}
},
watch: {
scrollTop: {
handler(newVal) {
this.checkExposure(newVal);
}
}
},
data() {
return {
popType: 'bottom',
swiperList: [],
erqiPeizhi: {},
indicatorDots: false,
autoplay: true,
interval: 4000,
duration: 500,
indicatoractiveColor: "#a6a0a1",
indicatorColor: "rgba(255, 255, 255, 1)",
channelTabIndex: 0,
productTabList: [],
productInfoList: [],
swiperIconList: [],
swiperIndex: 0,
ipDesc: '',
esgInfoList: [],
qrInfoList: [],
qrInfoObj: null,
popupIndex: 0,
showVideo: false,
testVideoUrl: '',
channel: {},
videoWidth: 375,
videoHeight: 210,
swiperNameList: ["北纬47°入口", "自有牧场入口", "工厂预约入口"],
hexiaofeiNameList: ["主要竖屏商品", "主要横屏商品", "视频号", "小红书"],
exposureTracker: null,
video1Channel: {},
video2Channel: {},
currentPlayingVideo: null, // 当前正在播放的视频标识
videoContexts: {}, // 存储视频上下文，使用id作为key
ipExStr: ['鹤小飞商品', '鹤小飞商品', '鹤小飞', '鹤小飞'],
showVideo1Title: true, // 控制视频1标题显示
showVideo2Title: true, // 控制视频2标题显示
}
},
mounted() {
this.initBrandInfo();
// 初始化视频上下文
this.initVideoContexts();
// 初始化曝光检测工具
this.exposureTracker = new ExposureTracker(this);
this.exposureTracker.addExposureElements(EXPOSURE_CONFIGS);
// 初始检查曝光
this.$nextTick(() => {
this.checkExposure(this.scrollTop);
});
},
methods: {
async initBrandInfo() {
const { data } = await fetchBrandJSON();
if (data) {
this.swiperList = data.swiperList || [{
"title": "默认图",
"url": this.$baseUrl + "homepage/brandSwiperDefaultBg.png"
}];
this.erqiPeizhi = data.erqiPeizhi;
this.productTabList = data.productTabList || [];
this.productInfoList = data.product || [];
this.esgInfoList = data.esgInfoList[0] || [];
this.qrInfoList = data.qrInfoList;
this.ipDesc = data.ipDesc;
this.swiperIconList = data.swiperIconList || [{
activeUrl: this.$baseUrl + "homepage/brandSwiperDefaultBg.png",
baseUrl: this.$baseUrl + "homepage/brandSwiperDefaultBg.png",
text: "默认图"
}];
this.testVideoUrl = data.videoUrl;
if (data.videoUrl.indexOf('http') === -1) {
data.videoUrl = this.$baseUrl + data.videoUrl;
}
this.currentVideoUrl = data.videoUrl;
this.video1Channel = data.video1Channel;
this.video2Channel = data.video2Channel;
this.initExposure();
}
},
initExposure() {
md.sensorComponentLogTake({
xcxComponentExposure: "true",
pageName: "品牌故事页",
componentName: "品牌故事页banner",
componentContent: this.swiperList[0]?.title || ''
});
this.productTabList.forEach((item, index) => {
md.sensorComponentLogTake({
xcxComponentExposure: "true",
pageName: "品牌故事页",
componentName: "飞鹤产品家族",
componentContent: "产品家族切换分类-" + item
});
})
if (this.productInfoList.length > 0 && this.productInfoList[0]?.length > 0) {
this.productInfoList[0]?.forEach((item, index) => {
md.sensorComponentLogTake({
xcxComponentExposure: "true",
pageName: "品牌故事页",
componentName: "飞鹤产品家族",
componentContent: "产品家族商品-" + item.shareTitle
});
})
}
this.ipExStr.forEach((item, index) => {
this.exposureTracker.addExposureElement({
id: 'ip' + (index + 1),
logParams: {
xcxComponentExposure: "true",
pageName: "品牌故事页",
componentName: "鹤小飞",
componentContent: item + '-' + this.erqiPeizhi['ipTitle' + (index + 1)]
}
})
})
this.esgInfoList.forEach((item, index) => {
this.exposureTracker.addExposureElement({
id: 'esg' + (index + 1),
logParams: {
xcxComponentExposure: "true",
pageName: "品牌故事页",
componentName: "飞鹤ESG",
componentContent: item.desc
}
})
})
this.exposureTracker.addExposureElements([
{
id: 'brandVideo1',
logParams: {
xcxComponentExposure: 'true',
pageName: '品牌故事页',
componentName: '品牌故事视频',
componentContent: this.video1Channel.title || ''
}
},
{
id: 'brandVideo2',
logParams: {
xcxComponentExposure: 'true',
pageName: '品牌故事页',
componentName: '品牌故事视频',
componentContent: this.video2Channel.title || ''
}
}
])
},
ipTapEvent(index, evt) {
md.sensorComponentLogTake({
xcxComponentClick: "true",
pageName: "品牌故事页",
componentName: "鹤小飞",
componentContent: this.ipExStr[index] + '-' + this.erqiPeizhi['ipTitle' + index]
});
},
intervalChange(e) {
this.swiperIndex = e.target.current;
md.sensorComponentLogTake({
xcxComponentExposure: "true",
pageName: "品牌故事页",
componentName: "品牌故事页banner",
componentContent: this.swiperList[e.target.current]?.title || ''
});
},
jumpSwiper(_index, evt) {//点indicator切换图片
if (evt) {
md.sensorLog(evt);
}
this.swiperIndex = _index;
},
jumpLink(_link, videoUrl, evt) {
console.log('jumpLink1111111:', _link, videoUrl);
if (evt) {
md.sensorLog(evt);
if (evt.currentTarget.dataset.comlog) {
md.sensorComponentLogTake(evt.currentTarget.dataset.comlog);
}
}
// console.log(_link)
// uni.navigateTo({
// url: "/pages/product/product?id=1-1"
// })
if (videoUrl) {
// 弹出视频
this.currentVideoUrl = videoUrl;
this.showVideo = true;
return;
// 视频弹窗出现后，video标签的autoplay会自动播放
} else if (_link) {
// 其他跳转逻辑
jump(_link);
}
},
jumpProduct(item, evt) {
if (evt) {
md.sensorLog(evt);
if (evt.currentTarget.dataset.comlog) {
md.sensorComponentLogTake(evt.currentTarget.dataset.comlog);
}
}
const { productId, skuId, contentImg, contentImgLen, shareTitle, shareImg, title, link, entrySource } = item;
const tabName = this.productTabList[this.channelTabIndex];
if (productId && skuId && entrySource) {
const url = `subPackages/shopMainProcess/product/index?productId=${productId}&skuId=${skuId}&entrySource=${entrySource}`;
const type = JumpType.MINI;
const extra = {
appId: 'wx4205ec55b793245e', //星妈优选小程序
extraData: {},
envVersion: 'release',
embedded: true,
};
jump({
type: type,
url: url,
extra: extra
})
} else {
jump(link)
// console.warn("/pages/product/product?productId=" + productId + "&skuId=" + skuId + "&contentImg=" + contentImg + "&contentImgLen=" + contentImgLen + "&shareTitle=" + shareTitle + "&shareImg=" + shareImg + "&tabName=" + tabName + "&title=" + title)
// uni.navigateTo({
// url: "/pages/product/product?productId=" + productId + "&skuId=" + skuId + "&contentImg=" + contentImg + "&contentImgLen=" + contentImgLen + "&shareTitle=" + shareTitle + "&shareImg=" + shareImg + "&tabName=" + tabName + "&title=" + title
// })
}
},
channelTabHandler(_index, evt) {
if (evt) {
md.sensorLog(evt);
if (evt.currentTarget.dataset.comlog) {
md.sensorComponentLogTake(evt.currentTarget.dataset.comlog);
this.productInfoList[_index]?.forEach((item, index) => {
md.sensorComponentLogTake({
xcxComponentExposure: "true",
pageName: "品牌故事页",
componentName: "飞鹤产品家族",
componentContent: "产品家族商品-" + item.shareTitle
});
})
}
}
this.channelTabIndex = _index;
// 自动滚动到选中的tab
this.$nextTick(() => {
const scrollView = uni.createSelectorQuery().select('.listbox');
if (scrollView) {
scrollView.scrollOffset((res) => {
// 这里可以添加额外的滚动逻辑
}).exec();
}
});
},
showPopup(_index, evt) {
if (evt) {
md.sensorLog(evt);
}
this.popupIndex = _index;
if (_index < 2) {
this.qrInfoObj = this.qrInfoList[_index];
md.sensorLogTake({
xcxPage: `品牌故事-鹤小飞家族${this.qrInfoObj.title}二维码半屏`,
pageName: `品牌故事-鹤小飞家族${this.qrInfoObj.title}二维码半屏`,
});
} else {
this.qrInfoObj = null;
md.sensorLogTake({
xcxPage: `品牌故事-鹤小飞家族小红书二维码半屏`,
pageName: `品牌故事-鹤小飞家族小红书二维码半屏`,
});
}
this.$refs.popup.open(this.popType);
},
closePop() {
this.$refs.popup.close();
},
downloadHandler(imgurl) {
md.sensorLogTake({
xcxClick: `品牌故事-鹤小飞家族${this.qrInfoObj.title}二维码半屏`,
pageName: `品牌故事-鹤小飞家族${this.qrInfoObj.title}二维码半屏`,
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'
});
}
});
},
showVideoHandler() {
this.currentVideoUrl = this.testVideoUrl;
this.showVideo = true;
},
closeVideo() {
this.showVideo = false;
this.currentVideoUrl = '';
// 如果弹窗视频是当前播放的视频，清除播放状态
if (this.currentPlayingVideo === 'popupVideo') {
this.currentPlayingVideo = null;
}
},
openChannel(videoChannel, evt) {
if (evt) {
md.sensorLog(evt);
if (evt.currentTarget.dataset.comlog) {
md.sensorComponentLogTake(evt.currentTarget.dataset.comlog);
}
}
const finderUserName = videoChannel.finderUserName;
const feedId = videoChannel.feedId;
uni.openChannelsActivity({
finderUserName,
feedId,
success: res => {
console.log('跳转成功', res);
},
fail: err => {
console.log('跳转失败', err);
}
});
},
previewImage(url) {
uni.previewImage({
urls: [url], // 预览当前图片
current: url // 当前显示的图片
});
},
onVideoLoadedMeta(e) {
const { width, height } = e.detail;
const pageWidth = uni.upx2px(750);
const ratio = height / width;
this.videoWidth = pageWidth;
this.videoHeight = pageWidth;// pageWidth * ratio;
},
checkExposure(scrollTop) {
if (this.exposureTracker) {
this.exposureTracker.checkExposure(scrollTop);
}
},
resetExposure() {
if (this.exposureTracker) {
this.exposureTracker.resetAllExposure();
}
},
// 初始化视频上下文
initVideoContexts() {
this.$nextTick(() => {
const videoIds = ['brandVideo1', 'brandVideo2'];
videoIds.forEach(id => {
try {
// 使用id创建视频上下文
this.videoContexts[id] = uni.createVideoContext(id, this);
console.log('视频上下文已创建:', id);
} catch (error) {
console.error('创建视频上下文失败:', id, error);
}
});
});
},
onVideoPlay() {
console.log('视频播放');
this.handleVideoPlay('brandVideo1');
this.handleVideoPlay('brandVideo2');
},
// 视频1播放事件
onVideo1Play() {
const evt = {
currentTarget: {
dataset: {
log: {
xcxClick: '品牌故事-次屏页面点击',
pageName: '品牌故事-首屏页面',
buttonName: '腰部品牌Video'
}
}
}
}
md.sensorLog(evt);
md.sensorComponentLogTake({
xcxComponentClick: 'true',
pageName: '品牌故事页',
componentName: '品牌故事视频',
componentContent: this.video1Channel.title || ''
});
console.log('视频1开始播放');
this.showVideo1Title = false; // 隐藏标题
this.handleVideoPlay('brandVideo1');
},
// 视频2播放事件
onVideo2Play() {
const evt = {
currentTarget: {
dataset: {
log: {
xcxClick: '小程序页面点击事件',
pageName: '品牌故事-次屏页面',
buttonName: '视频'
}
}
}
}
md.sensorLog(evt);
md.sensorComponentLogTake({
xcxComponentClick: 'true',
pageName: '品牌故事页',
componentName: '品牌故事视频',
componentContent: this.video2Channel.title || ''
});
console.log('视频2开始播放');
this.showVideo2Title = false; // 隐藏标题
this.handleVideoPlay('brandVideo2');
},
// 视频1播放结束事件
onVideo1Ended() {
console.log('视频1播放结束');
this.showVideo1Title = true; // 显示标题
// 恢复展示海报（自动生效，因为video组件播放结束后会显示poster）
if (this.currentPlayingVideo === 'brandVideo1') {
this.currentPlayingVideo = null;
}
// 重置视频src来进行初始化
const videoId = 'brandVideo1';
if (this.videoContexts[videoId]) {
try {
// 保存原始URL
const originalUrl = this.video1Channel.videoUrl;
// 先设置为空字符串来重置
this.videoContexts[videoId].src = '';
// 延迟一小段时间后恢复原始URL，以确保重置生效
setTimeout(() => {
if (this.videoContexts[videoId]) {
this.videoContexts[videoId].src = originalUrl.indexOf('http') === 0 ? originalUrl : this.$baseUrl + originalUrl;
}
}, 100);
console.log('视频1已重置初始化');
} catch (error) {
console.error('重置视频1失败:', error);
}
}
},
// 视频2播放结束事件
onVideo2Ended() {
console.log('视频2播放结束');
this.showVideo2Title = true; // 显示标题
// 恢复展示海报（自动生效，因为video组件播放结束后会显示poster）
if (this.currentPlayingVideo === 'brandVideo2') {
this.currentPlayingVideo = null;
}
// 重置视频src来进行初始化
const videoId = 'brandVideo2';
if (this.videoContexts[videoId]) {
console.warn('视频上下文已存在:', videoId);
try {
// 保存原始URL
const originalUrl = this.video2Channel.videoUrl;
// 先设置为空字符串来重置
this.videoContexts[videoId].src = '';
// 延迟一小段时间后恢复原始URL，以确保重置生效
// setTimeout(() => {
// if (this.videoContexts[videoId]) {
// this.videoContexts[videoId].src = originalUrl.indexOf('http') === 0 ? originalUrl : this.$baseUrl + originalUrl;
// }
// }, 100);
console.log('视频2已重置初始化');
} catch (error) {
console.error('重置视频2失败:', error);
}
}
},
// 处理视频播放（互斥逻辑）
handleVideoPlay(videoId) {
console.log('处理视频播放:', videoId, '当前播放视频:', this.currentPlayingVideo);
// 如果有其他视频正在播放，先暂停它
if (this.currentPlayingVideo && this.currentPlayingVideo !== videoId) {
console.log('暂停其他视频:', this.currentPlayingVideo);
this.stopVideo(this.currentPlayingVideo);
}
// 设置当前播放的视频
this.currentPlayingVideo = videoId;
},
// 处理视频暂停
handleVideoPause(videoId) {
console.log('处理视频暂停:', videoId, '当前播放视频:', this.currentPlayingVideo);
// 如果暂停的视频是当前播放的视频，清除播放状态
if (this.currentPlayingVideo === videoId) {
this.currentPlayingVideo = null;
}
},
// 暂停指定的视频
stopVideo(videoId) {
console.log('尝试暂停视频:', videoId);
// 如果上下文不存在，尝试创建
if (!this.videoContexts[videoId]) {
try {
this.videoContexts[videoId] = uni.createVideoContext(videoId, this);
console.log('延迟创建视频上下文:', videoId);
} catch (error) {
console.error('延迟创建视频上下文失败:', videoId, error);
return;
}
}
if (this.videoContexts[videoId]) {
try {
this.videoContexts[videoId].pause();
console.log('视频已暂停 (通过上下文):', videoId);
} catch (error) {
console.error('暂停视频失败 (通过上下文):', videoId, error);
}
}
},
// 暂停所有视频
stopAllVideos() {
console.log('暂停所有视频');
const videoIds = ['brandVideo1', 'brandVideo2'];
videoIds.forEach(id => {
this.stopVideo(id);
});
this.currentPlayingVideo = null;
},
//跳转微店
// 商品ID
// 10000239356280
// 商品ID
// 10000239570622
}
}
beforeDestroy() {
if (this.exposureTracker) {
this.exposureTracker.resetAllExposure();
}
this.stopAllVideos();
},
deactivated() {
if (this.exposureTracker) {
this.exposureTracker.resetAllExposure();
}
this.stopAllVideos();
},
props: {
scrollTop: {
type: Number,
default: 0,
},
},
watch: {
scrollTop: {
handler(newVal) {
this.checkExposure(newVal);
},
},
},
data() {
return {
popType: 'bottom',
swiperList: [],
erqiPeizhi: {},
indicatorDots: false,
autoplay: true,
interval: 4000,
duration: 500,
indicatoractiveColor: '#a6a0a1',
indicatorColor: 'rgba(255, 255, 255, 1)',
channelTabIndex: 0,
productTabList: [],
productInfoList: [],
swiperIconList: [],
swiperIndex: 0,
ipDesc: '',
esgInfoList: [],
qrInfoList: [],
qrInfoObj: null,
popupIndex: 0,
showVideo: false,
testVideoUrl: '',
channel: {},
videoWidth: 375,
videoHeight: 210,
swiperNameList: ['北纬47°入口', '自有牧场入口', '工厂预约入口'],
hexiaofeiNameList: ['主要竖屏商品', '主要横屏商品', '视频号', '小红书'],
exposureTracker: null,
video1Channel: {},
video2Channel: {},
currentPlayingVideo: null, // 当前正在播放的视频标识
videoContexts: {}, // 存储视频上下文，使用id作为key
ipExStr: ['鹤小飞商品', '鹤小飞商品', '鹤小飞', '鹤小飞'],
showVideo1Title: true, // 控制视频1标题显示
showVideo2Title: true, // 控制视频2标题显示
};
},
mounted() {
this.initBrandInfo();
// 初始化视频上下文
this.initVideoContexts();
// 初始化曝光检测工具
this.exposureTracker = new ExposureTracker(this);
this.exposureTracker.addExposureElements(EXPOSURE_CONFIGS);
// 初始检查曝光
this.$nextTick(() => {
this.checkExposure(this.scrollTop);
});
},
methods: {
async initBrandInfo() {
const { data } = await fetchBrandJSON(globalStore.getPreviewScene('brand'));
if (data) {
this.swiperList = data.swiperList || [
{
title: '默认图',
url: this.$baseUrl + 'homepage/brandSwiperDefaultBg.png',
},
];
this.erqiPeizhi = data.erqiPeizhi;
this.productTabList = data.productTabList || [];
this.productInfoList = data.product || [];
this.esgInfoList = data.esgInfoList[0] || [];
this.qrInfoList = data.qrInfoList;
this.ipDesc = data.ipDesc;
this.swiperIconList = data.swiperIconList || [
{
activeUrl: this.$baseUrl + 'homepage/brandSwiperDefaultBg.png',
baseUrl: this.$baseUrl + 'homepage/brandSwiperDefaultBg.png',
text: '默认图',
},
];
this.testVideoUrl = data.videoUrl;
if (data.videoUrl.indexOf('http') === -1) {
data.videoUrl = this.$baseUrl + data.videoUrl;
}
this.currentVideoUrl = data.videoUrl;
this.video1Channel = data.video1Channel;
this.video2Channel = data.video2Channel;
this.initExposure();
}
},
initExposure() {
md.sensorComponentLogTake({
xcxComponentExposure: 'true',
pageName: '品牌故事页',
componentName: '品牌故事页banner',
componentContent: this.swiperList[0]?.title || '',
});
this.productTabList.forEach((item, index) => {
md.sensorComponentLogTake({
xcxComponentExposure: 'true',
pageName: '品牌故事页',
componentName: '飞鹤产品家族',
componentContent: '产品家族切换分类-' + item,
});
});
if (this.productInfoList.length > 0 && this.productInfoList[0]?.length > 0) {
this.productInfoList[0]?.forEach((item, index) => {
md.sensorComponentLogTake({
xcxComponentExposure: 'true',
pageName: '品牌故事页',
componentName: '飞鹤产品家族',
componentContent: '产品家族商品-' + item.shareTitle,
});
});
}
this.ipExStr.forEach((item, index) => {
this.exposureTracker.addExposureElement({
id: 'ip' + (index + 1),
logParams: {
xcxComponentExposure: 'true',
pageName: '品牌故事页',
componentName: '鹤小飞',
componentContent: item + '-' + this.erqiPeizhi['ipTitle' + (index + 1)],
},
});
});
this.esgInfoList.forEach((item, index) => {
this.exposureTracker.addExposureElement({
id: 'esg' + (index + 1),
logParams: {
xcxComponentExposure: 'true',
pageName: '品牌故事页',
componentName: '飞鹤ESG',
componentContent: item.desc,
},
});
});
this.exposureTracker.addExposureElements([
{
id: 'brandVideo1',
logParams: {
xcxComponentExposure: 'true',
pageName: '品牌故事页',
componentName: '品牌故事视频',
componentContent: this.video1Channel.title || '',
},
},
{
id: 'brandVideo2',
logParams: {
xcxComponentExposure: 'true',
pageName: '品牌故事页',
componentName: '品牌故事视频',
componentContent: this.video2Channel.title || '',
},
},
]);
},
ipTapEvent(index, evt) {
md.sensorComponentLogTake({
xcxComponentClick: 'true',
pageName: '品牌故事页',
componentName: '鹤小飞',
componentContent: this.ipExStr[index] + '-' + this.erqiPeizhi['ipTitle' + index],
});
},
intervalChange(e) {
this.swiperIndex = e.target.current;
md.sensorComponentLogTake({
xcxComponentExposure: 'true',
pageName: '品牌故事页',
componentName: '品牌故事页banner',
componentContent: this.swiperList[e.target.current]?.title || '',
});
},
jumpSwiper(_index, evt) {
//点indicator切换图片
if (evt) {
md.sensorLog(evt);
}
this.swiperIndex = _index;
},
jumpLink(_link, videoUrl, evt) {
console.log('jumpLink1111111:', _link, videoUrl);
if (evt) {
md.sensorLog(evt);
if (evt.currentTarget.dataset.comlog) {
md.sensorComponentLogTake(evt.currentTarget.dataset.comlog);
}
}
// console.log(_link)
// uni.navigateTo({
// url: "/pages/product/product?id=1-1"
// })
if (videoUrl) {
// 弹出视频
this.currentVideoUrl = videoUrl;
this.showVideo = true;
return;
// 视频弹窗出现后，video标签的autoplay会自动播放
} else if (_link) {
// 其他跳转逻辑
jump(_link);
}
},
jumpProduct(item, evt) {
if (evt) {
md.sensorLog(evt);
if (evt.currentTarget.dataset.comlog) {
md.sensorComponentLogTake(evt.currentTarget.dataset.comlog);
}
}
const { productId, skuId, contentImg, contentImgLen, shareTitle, shareImg, title, link, entrySource } =
item;
const tabName = this.productTabList[this.channelTabIndex];
if (productId && skuId && entrySource) {
const url = `subPackages/shopMainProcess/product/index?productId=${productId}&skuId=${skuId}&entrySource=${entrySource}`;
const type = JumpType.MINI;
const extra = {
appId: 'wx4205ec55b793245e', //星妈优选小程序
extraData: {},
envVersion: 'release',
embedded: true,
};
jump({
type: type,
url: url,
extra: extra,
});
} else {
jump(link);
// console.warn("/pages/product/product?productId=" + productId + "&skuId=" + skuId + "&contentImg=" + contentImg + "&contentImgLen=" + contentImgLen + "&shareTitle=" + shareTitle + "&shareImg=" + shareImg + "&tabName=" + tabName + "&title=" + title)
// uni.navigateTo({
// url: "/pages/product/product?productId=" + productId + "&skuId=" + skuId + "&contentImg=" + contentImg + "&contentImgLen=" + contentImgLen + "&shareTitle=" + shareTitle + "&shareImg=" + shareImg + "&tabName=" + tabName + "&title=" + title
// })
}
},
channelTabHandler(_index, evt) {
if (evt) {
md.sensorLog(evt);
if (evt.currentTarget.dataset.comlog) {
md.sensorComponentLogTake(evt.currentTarget.dataset.comlog);
this.productInfoList[_index]?.forEach((item, index) => {
md.sensorComponentLogTake({
xcxComponentExposure: 'true',
pageName: '品牌故事页',
componentName: '飞鹤产品家族',
componentContent: '产品家族商品-' + item.shareTitle,
});
});
}
}
this.channelTabIndex = _index;
// 自动滚动到选中的tab
this.$nextTick(() => {
const scrollView = uni.createSelectorQuery().select('.listbox');
if (scrollView) {
scrollView
.scrollOffset((res) => {
// 这里可以添加额外的滚动逻辑
})
.exec();
}
});
},
showPopup(_index, evt) {
if (evt) {
md.sensorLog(evt);
}
this.popupIndex = _index;
if (_index < 2) {
this.qrInfoObj = this.qrInfoList[_index];
md.sensorLogTake({
xcxPage: `品牌故事-鹤小飞家族${this.qrInfoObj.title}二维码半屏`,
pageName: `品牌故事-鹤小飞家族${this.qrInfoObj.title}二维码半屏`,
});
} else {
this.qrInfoObj = null;
md.sensorLogTake({
xcxPage: `品牌故事-鹤小飞家族小红书二维码半屏`,
pageName: `品牌故事-鹤小飞家族小红书二维码半屏`,
});
}
this.$refs.popup.open(this.popType);
},
closePop() {
this.$refs.popup.close();
},
downloadHandler(imgurl) {
md.sensorLogTake({
xcxClick: `品牌故事-鹤小飞家族${this.qrInfoObj.title}二维码半屏`,
pageName: `品牌故事-鹤小飞家族${this.qrInfoObj.title}二维码半屏`,
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',
});
},
});
},
showVideoHandler() {
this.currentVideoUrl = this.testVideoUrl;
this.showVideo = true;
},
closeVideo() {
this.showVideo = false;
this.currentVideoUrl = '';
// 如果弹窗视频是当前播放的视频，清除播放状态
if (this.currentPlayingVideo === 'popupVideo') {
this.currentPlayingVideo = null;
}
},
openChannel(videoChannel, evt) {
if (evt) {
md.sensorLog(evt);
if (evt.currentTarget.dataset.comlog) {
md.sensorComponentLogTake(evt.currentTarget.dataset.comlog);
}
}
const finderUserName = videoChannel.finderUserName;
const feedId = videoChannel.feedId;
uni.openChannelsActivity({
finderUserName,
feedId,
success: (res) => {
console.log('跳转成功', res);
},
fail: (err) => {
console.log('跳转失败', err);
},
});
},
previewImage(url) {
uni.previewImage({
urls: [url], // 预览当前图片
current: url, // 当前显示的图片
});
},
onVideoLoadedMeta(e) {
const { width, height } = e.detail;
const pageWidth = uni.upx2px(750);
const ratio = height / width;
this.videoWidth = pageWidth;
this.videoHeight = pageWidth; // pageWidth * ratio;
},
checkExposure(scrollTop) {
if (this.exposureTracker) {
this.exposureTracker.checkExposure(scrollTop);
}
},
resetExposure() {
if (this.exposureTracker) {
this.exposureTracker.resetAllExposure();
}
},
// 初始化视频上下文
initVideoContexts() {
this.$nextTick(() => {
const videoIds = ['brandVideo1', 'brandVideo2'];
videoIds.forEach((id) => {
try {
// 使用id创建视频上下文
this.videoContexts[id] = uni.createVideoContext(id, this);
console.log('视频上下文已创建:', id);
} catch (error) {
console.error('创建视频上下文失败:', id, error);
}
});
});
},
onVideoPlay() {
console.log('视频播放');
this.handleVideoPlay('brandVideo1');
this.handleVideoPlay('brandVideo2');
},
// 视频1播放事件
onVideo1Play() {
const evt = {
currentTarget: {
dataset: {
log: {
xcxClick: '品牌故事-次屏页面点击',
pageName: '品牌故事-首屏页面',
buttonName: '腰部品牌Video',
},
},
},
};
md.sensorLog(evt);
md.sensorComponentLogTake({
xcxComponentClick: 'true',
pageName: '品牌故事页',
componentName: '品牌故事视频',
componentContent: this.video1Channel.title || '',
});
console.log('视频1开始播放');
this.showVideo1Title = false; // 隐藏标题
this.handleVideoPlay('brandVideo1');
},
// 视频2播放事件
onVideo2Play() {
const evt = {
currentTarget: {
dataset: {
log: {
xcxClick: '小程序页面点击事件',
pageName: '品牌故事-次屏页面',
buttonName: '视频',
},
},
},
};
md.sensorLog(evt);
md.sensorComponentLogTake({
xcxComponentClick: 'true',
pageName: '品牌故事页',
componentName: '品牌故事视频',
componentContent: this.video2Channel.title || '',
});
console.log('视频2开始播放');
this.showVideo2Title = false; // 隐藏标题
this.handleVideoPlay('brandVideo2');
},
// 视频1播放结束事件
onVideo1Ended() {
console.log('视频1播放结束');
this.showVideo1Title = true; // 显示标题
// 恢复展示海报（自动生效，因为video组件播放结束后会显示poster）
if (this.currentPlayingVideo === 'brandVideo1') {
this.currentPlayingVideo = null;
}
// 重置视频src来进行初始化
const videoId = 'brandVideo1';
if (this.videoContexts[videoId]) {
try {
// 保存原始URL
const originalUrl = this.video1Channel.videoUrl;
// 先设置为空字符串来重置
this.videoContexts[videoId].src = '';
// 延迟一小段时间后恢复原始URL，以确保重置生效
setTimeout(() => {
if (this.videoContexts[videoId]) {
this.videoContexts[videoId].src =
originalUrl.indexOf('http') === 0 ? originalUrl : this.$baseUrl + originalUrl;
}
}, 100);
console.log('视频1已重置初始化');
} catch (error) {
console.error('重置视频1失败:', error);
}
}
},
// 视频2播放结束事件
onVideo2Ended() {
console.log('视频2播放结束');
this.showVideo2Title = true; // 显示标题
// 恢复展示海报（自动生效，因为video组件播放结束后会显示poster）
if (this.currentPlayingVideo === 'brandVideo2') {
this.currentPlayingVideo = null;
}
// 重置视频src来进行初始化
const videoId = 'brandVideo2';
if (this.videoContexts[videoId]) {
console.warn('视频上下文已存在:', videoId);
try {
// 保存原始URL
const originalUrl = this.video2Channel.videoUrl;
// 先设置为空字符串来重置
this.videoContexts[videoId].src = '';
// 延迟一小段时间后恢复原始URL，以确保重置生效
// setTimeout(() => {
// if (this.videoContexts[videoId]) {
// this.videoContexts[videoId].src = originalUrl.indexOf('http') === 0 ? originalUrl : this.$baseUrl + originalUrl;
// }
// }, 100);
console.log('视频2已重置初始化');
} catch (error) {
console.error('重置视频2失败:', error);
}
}
},
// 处理视频播放（互斥逻辑）
handleVideoPlay(videoId) {
console.log('处理视频播放:', videoId, '当前播放视频:', this.currentPlayingVideo);
// 如果有其他视频正在播放，先暂停它
if (this.currentPlayingVideo && this.currentPlayingVideo !== videoId) {
console.log('暂停其他视频:', this.currentPlayingVideo);
this.stopVideo(this.currentPlayingVideo);
}
// 设置当前播放的视频
this.currentPlayingVideo = videoId;
},
// 处理视频暂停
handleVideoPause(videoId) {
console.log('处理视频暂停:', videoId, '当前播放视频:', this.currentPlayingVideo);
// 如果暂停的视频是当前播放的视频，清除播放状态
if (this.currentPlayingVideo === videoId) {
this.currentPlayingVideo = null;
}
},
// 暂停指定的视频
stopVideo(videoId) {
console.log('尝试暂停视频:', videoId);
// 如果上下文不存在，尝试创建
if (!this.videoContexts[videoId]) {
try {
this.videoContexts[videoId] = uni.createVideoContext(videoId, this);
console.log('延迟创建视频上下文:', videoId);
} catch (error) {
console.error('延迟创建视频上下文失败:', videoId, error);
return;
}
}
if (this.videoContexts[videoId]) {
try {
this.videoContexts[videoId].pause();
console.log('视频已暂停 (通过上下文):', videoId);
} catch (error) {
console.error('暂停视频失败 (通过上下文):', videoId, error);
}
}
},
// 暂停所有视频
stopAllVideos() {
console.log('暂停所有视频');
const videoIds = ['brandVideo1', 'brandVideo2'];
videoIds.forEach((id) => {
this.stopVideo(id);
});
this.currentPlayingVideo = null;
},
//跳转微店
// 商品ID
// 10000239356280
// 商品ID
// 10000239570622
},
};
</script>
<style lang="less" scoped>
@import '@/common.less';
.brand-container {
background-color: #fff;
.content {
padding-bottom: 200rpx;
.banner {
height: 1250rpx;
.banneritem {
width: 750rpx;
height: 1250rpx;
.b-img {
width: 100%;
height: 100%;
}
}
}
.swiperbox {
position: absolute;
top: 1002rpx;
width: 196rpx;
left: 50%;
transform: translateX(-50%);
.iconbox {
width: 100%;
display: flex;
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;
}
}
}
}
.swiper-mask {
position: absolute;
left: 0;
width: 750rpx;
height: 192rpx;
z-index: 1;
top: 1061rpx;
pointer-events: none;
.swiper-mask-img {
width: 100%;
height: 100%;
}
}
.videoposterbox {
width: 640rpx;
height: 360rpx;
margin-left: 55rpx;
margin-top: 32rpx;
overflow: hidden;
border-radius: 24rpx;
.videoposter {
width: 100%;
height: 100%;
border-radius: 24rpx;
object-fit: cover;
}
.videoposterboxtitle {
font-size: 28rpx;
color: #ffffff;
font-weight: 500;
margin-left: 20rpx;
line-height: 1.4;
margin-top: -56rpx;
z-index: 0;
position: relative;
// padding: 8rpx 16rpx;
// background-color: rgba(0, 0, 0, 0.5);
border-radius: 8rpx;
width: 476rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.productcontai {
margin-top: 32rpx;
margin-left: 32rpx;
.maintitle {
color: @color-black-deep;
font-size: 38rpx;
font-weight: bold;
display: block;
margin-left: 5rpx;
}
.subtitle {
color: @color-black-deep;
font-size: 24rpx;
margin-top: 10rpx;
margin-left: 5rpx;
}
.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;
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 {
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: 273rpx;
height: 263rpx;
background-color: white;
border-radius: 24rpx;
// margin-top: 32rpx;
.flexbox {
display: flex;
margin-top: 25rpx;
align-items: center;
justify-content: center;
.infotitle {
font-size: 36rpx;
font-weight: 400;
width: 100rpx;
color: @color-black-deep;
margin-left: 15rpx; //一点偏移量
text-align: center;
}
.infoimg {
width: 150rpx;
height: 150rpx;
}
}
.infodesc {
display: flex;
justify-content: center;
align-items: center;
font-size: 24rpx;
color: @color-black-deep;
width: 273rpx;
text-align: center;
height: 90rpx;
white-space: pre-wrap;
}
}
}
}
.ipbox {
width: 674rpx;
height: 922rpx;
position: relative;
left: 36rpx;
border-radius: 24rpx;
background-color: white;
top: 50rpx;
.iphexiaofei {
width: 374rpx;
height: 298rpx;
position: absolute;
top: 15rpx;
left: 165rpx;
}
.ipcard {
position: absolute;
padding: 15rpx;
top: 313rpx;
.title {
display: flex;
font-size: 36rpx;
color: @color-black-deep;
font-weight: bold;
.t1 {
color: @color-black-deep;
}
}
.desc {
margin-top: 20rpx;
white-space: pre-wrap;
font-size: 24rpx;
color: @color-black-deep;
}
.ipflex {
display: flex;
justify-content: space-between;
margin-top: 30rpx;
.ipbg {
border-radius: 24rpx;
background-color: @color-gray-light;
display: flex;
justify-content: center;
align-items: center;
}
.ip1 {
width: 288rpx;
height: 380rpx;
overflow: hidden;
image {
width: 288*0.8rpx;
height: 380*0.8rpx;
}
}
.ip2 {
width: 342rpx;
height: 201rpx;
image {
width: 342*0.75rpx;
height: 201*0.75rpx;
}
}
.ip3 {
width: 160rpx;
height: 160rpx;
image {
width: 70rpx;
height: 97rpx;
}
}
.ip4 {
width: 160rpx;
height: 160rpx;
image {
width: 88rpx;
height: 92rpx;
}
}
}
}
}
.esgbox {
margin-top: 128rpx;
margin-left: 32rpx;
.maintitle {
color: @color-black-deep;
font-size: 38rpx;
font-weight: bold;
display: block;
margin-left: 5rpx;
}
.subtitle {
color: @color-black-deep;
font-size: 24rpx;
margin-top: 10rpx;
margin-left: 5rpx;
}
.listbox {
display: flex;
margin-top: 10rpx;
.tabitem {
color: @color-black-deep;
background-color: #e9edf1;
padding: 15rpx;
font-size: 22rpx;
margin-right: 15rpx;
border-radius: 30rpx;
}
.tabActive {
color: white;
background-color: @color-gold-main;
}
}
.channelscroll {
width: 718rpx;
overflow-x: scroll;
margin-top: 32rpx;
// margin-left: -32rpx;
.box {
display: flex;
.infobox {
margin-left: 0rpx;
margin-right: 30rpx;
width: 503rpx;
height: 638rpx;
.infoimg {
width: 500rpx;
height: 400rpx;
}
.imgRaduis {
border-radius: 24rpx 24rpx 0 0;
}
.infotitle {
color: @color-gold-main;
font-size: 32rpx;
text-align: left;
font-weight: bold;
margin-top: 10rpx;
margin-left: 20rpx;
}
.infodesc {
font-size: 24rpx;
color: black;
margin-top: 10rpx;
padding-right: 40rpx;
margin-left: 20rpx;
}
}
}
}
}
}
.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;
}
background-color: #fff;
.content {
padding-bottom: 200rpx;
.banner {
height: 1250rpx;
.banneritem {
width: 750rpx;
height: 1250rpx;
.b-img {
width: 100%;
height: 100%;
}
}
}
.swiperbox {
position: absolute;
top: 1002rpx;
width: 196rpx;
left: 50%;
transform: translateX(-50%);
.iconbox {
width: 100%;
display: flex;
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;
}
}
}
}
.swiper-mask {
position: absolute;
left: 0;
width: 750rpx;
height: 192rpx;
z-index: 1;
top: 1061rpx;
pointer-events: none;
.swiper-mask-img {
width: 100%;
height: 100%;
}
}
.videoposterbox {
width: 640rpx;
height: 360rpx;
margin-left: 55rpx;
margin-top: 32rpx;
overflow: hidden;
border-radius: 24rpx;
.videoposter {
width: 100%;
height: 100%;
border-radius: 24rpx;
object-fit: cover;
}
.videoposterboxtitle {
font-size: 28rpx;
color: #ffffff;
font-weight: 500;
margin-left: 20rpx;
line-height: 1.4;
margin-top: -56rpx;
z-index: 0;
position: relative;
// padding: 8rpx 16rpx;
// background-color: rgba(0, 0, 0, 0.5);
border-radius: 8rpx;
width: 476rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.productcontai {
margin-top: 32rpx;
margin-left: 32rpx;
.maintitle {
color: @color-black-deep;
font-size: 38rpx;
font-weight: bold;
display: block;
margin-left: 5rpx;
}
.subtitle {
color: @color-black-deep;
font-size: 24rpx;
margin-top: 10rpx;
margin-left: 5rpx;
}
.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;
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 {
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: 273rpx;
height: 263rpx;
background-color: white;
border-radius: 24rpx;
// margin-top: 32rpx;
.flexbox {
display: flex;
margin-top: 25rpx;
align-items: center;
justify-content: center;
.infotitle {
font-size: 36rpx;
font-weight: 400;
width: 100rpx;
color: @color-black-deep;
margin-left: 15rpx; //一点偏移量
text-align: center;
}
.infoimg {
width: 150rpx;
height: 150rpx;
}
}
.infodesc {
display: flex;
justify-content: center;
align-items: center;
font-size: 24rpx;
color: @color-black-deep;
width: 273rpx;
text-align: center;
height: 90rpx;
white-space: pre-wrap;
}
}
}
}
.ipbox {
width: 674rpx;
height: 922rpx;
position: relative;
left: 36rpx;
border-radius: 24rpx;
background-color: white;
top: 50rpx;
.iphexiaofei {
width: 374rpx;
height: 298rpx;
position: absolute;
top: 15rpx;
left: 165rpx;
}
.ipcard {
position: absolute;
padding: 15rpx;
top: 313rpx;
.title {
display: flex;
font-size: 36rpx;
color: @color-black-deep;
font-weight: bold;
.t1 {
color: @color-black-deep;
}
}
.desc {
margin-top: 20rpx;
white-space: pre-wrap;
font-size: 24rpx;
color: @color-black-deep;
}
.ipcontainer {
position: relative;
.ipcontext {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
font-size: 24rpx;
text-align: center;
.ipcontext-desc,
.ipcontext-title {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ipcontext-title {
color: @color-gold-main;
}
}
}
.ipflex {
display: flex;
justify-content: space-between;
margin-top: 30rpx;
.ipbg {
border-radius: 24rpx;
background-color: @color-gray-light;
display: flex;
justify-content: center;
align-items: center;
.store-product-container {
display: flex;
justify-content: center;
align-items: center;
}
}
.ip1 {
width: 288rpx;
height: 380rpx;
overflow: hidden;
.ipcontainer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
width: 268rpx;
.ipcontext {
width: 100%;
margin-top: 6rpx;
}
}
image {
width: 213rpx;
height: 172rpx;
}
}
.ip2 {
width: 342rpx;
height: 201rpx;
.ipcontainer {
height: 172rpx;
width: 322rpx;
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: space-between;
.ipcontext {
width: 160rpx;
}
}
image {
width: 162rpx;
height: 172rpx;
}
}
.ip3 {
width: 160rpx;
height: 160rpx;
image {
width: 70rpx;
height: 97rpx;
}
}
.ip4 {
width: 160rpx;
height: 160rpx;
image {
width: 88rpx;
height: 92rpx;
}
}
}
}
}
.esgbox {
margin-top: 128rpx;
margin-left: 32rpx;
.maintitle {
color: @color-black-deep;
font-size: 38rpx;
font-weight: bold;
display: block;
margin-left: 5rpx;
}
.subtitle {
color: @color-black-deep;
font-size: 24rpx;
margin-top: 10rpx;
margin-left: 5rpx;
}
.listbox {
display: flex;
margin-top: 10rpx;
.tabitem {
color: @color-black-deep;
background-color: #e9edf1;
padding: 15rpx;
font-size: 22rpx;
margin-right: 15rpx;
border-radius: 30rpx;
}
.tabActive {
color: white;
background-color: @color-gold-main;
}
}
.channelscroll {
width: 718rpx;
overflow-x: scroll;
margin-top: 32rpx;
// margin-left: -32rpx;
.box {
display: flex;
.infobox {
margin-left: 0rpx;
margin-right: 30rpx;
width: 503rpx;
height: 638rpx;
.infoimg {
width: 500rpx;
height: 400rpx;
}
.imgRaduis {
border-radius: 24rpx 24rpx 0 0;
}
.infotitle {
color: @color-gold-main;
font-size: 32rpx;
text-align: left;
font-weight: bold;
margin-top: 10rpx;
margin-left: 20rpx;
}
.infodesc {
font-size: 24rpx;
color: black;
margin-top: 10rpx;
padding-right: 40rpx;
margin-left: 20rpx;
}
}
}
}
}
}
.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;
}
}
</style>
\ No newline at end of file
</style>
views/Home.vue
View file @ 065e8ae1
This source diff could not be displayed because it is too large. You can view the blob instead.
views/Integral.vue
View file @ 065e8ae1
This source diff could not be displayed because it is too large. You can view the blob instead.
views/My.vue
View file @ 065e8ae1
<template>
<view class="my-container">
<view v-if="cfgStatus.showDetail" class="wheel-selector-fixed">
<WheelSelector :options="wheelOptions" :selectedIndex="wheelSelectedIndex"
:bgImg="$baseUrl + 'my/track/track.png'" :iconNormal="$baseUrl + 'my/track/icon_stage_nor.png'"
<WheelSelector
:options="wheelOptions"
:selectedIndex="wheelSelectedIndex"
:bgImg="$baseUrl + 'my/track/track.png'"
:iconNormal="$baseUrl + 'my/track/icon_stage_nor.png'"
:iconSelected="$baseUrl + 'my/track/icon_stage_sel.png'"
@update:selectedIndex="(val) => (wheelSelectedIndex = val)" @change="handleWheelChange" />
@update:selectedIndex="(val) => (wheelSelectedIndex = val)"
@change="handleWheelChange"
/>
</view>
<view class="bg-container"
v-if="cfgStatus.isRegister"
<view
class="bg-container"
v-if="cfgStatus.isRegister"
:data-log="{
xcxClick: '我的页面点击',
pageName: '我的页面',
buttonName: '个人信息修改',
}" @click="handleUploadBackground">
<image class="bg-img" :src="localBackgroundImg || babyInfo?.content?.backgroundImg || $baseUrl + 'my/default_bg.png'
" mode="widthFix" lazy-load="false" binderror="" bindload="" />
xcxClick: '我的页面点击',
pageName: '我的页面',
buttonName: '个人信息修改',
}"
@click="handleUploadBackground"
>
<image
class="bg-img"
:src="localBackgroundImg || babyInfo?.content?.backgroundImg || $baseUrl + 'my/default_bg.png'"
mode="widthFix"
lazy-load="false"
binderror=""
bindload=""
/>
<image class="banner_cover" :src="$baseUrl + 'my/cover_white.png'" mode="aspectFill" />
</view>
......@@ -24,71 +38,101 @@
<view class="user-info" :style="{ 'min-height': cfgStatus.showDetail ? '343rpx' : '168rpx' }">
<view class="user-header">
<view class="avatar-container">
<button
<button
v-if="canChooseAvatar"
class="avatar-wrapper"
class="avatar-wrapper"
:data-log="{
xcxClick: '我的页面点击',
pageName: '我的页面',
buttonName: '个人信息修改',
}"
open-type="chooseAvatar"
@chooseavatar="onChooseAvatar">
<image class="avatar" :src="localAvatarUrl || babyInfo?.content?.babyAvatar ||
$baseUrl + 'common/default_avatar.png'
" mode="widthFix" />
}"
open-type="chooseAvatar"
@chooseavatar="onChooseAvatar"
>
<image
class="avatar"
:src="localAvatarUrl || babyInfo?.content?.babyAvatar || $baseUrl + 'common/default_avatar.png'"
mode="widthFix"
/>
</button>
<view
<view
v-else
class="avatar-wrapper"
class="avatar-wrapper"
:data-log="{
xcxClick: '我的页面点击',
pageName: '我的页面',
buttonName: '个人信息修改',
}"
@click="handleAvatarClick">
<image class="avatar" :src="localAvatarUrl || babyInfo?.content?.babyAvatar ||
$baseUrl + 'common/default_avatar.png'
" mode="widthFix" />
}"
@click="handleAvatarClick"
>
<image
class="avatar"
:src="localAvatarUrl || babyInfo?.content?.babyAvatar || $baseUrl + 'common/default_avatar.png'"
mode="widthFix"
/>
</view>
</view>
<button v-if="!cfgStatus.isRegister" type="primary" class="avatar-container" @click="clickRegisterShield" />
<image class="avatar-modify" :src="$baseUrl + 'my/icon_modify.png'" mode="aspectFit" lazy-load="false" />
<button
v-if="!cfgStatus.isRegister"
type="primary"
class="avatar-container"
@click="clickRegisterShield"
/>
<image
class="avatar-modify"
:src="$baseUrl + 'my/icon_modify.png'"
mode="aspectFit"
lazy-load="false"
/>
<view class="user-detail">
<view class="user-detail-nickname" :data-log="{
xcxClick: '我的页面点击',
pageName: '我的页面',
buttonName: '宝宝信息切换',
}">
<view
class="user-detail-nickname"
:data-log="{
xcxClick: '我的页面点击',
pageName: '我的页面',
buttonName: '宝宝信息切换',
}"
>
<text class="nickname" @click="handleEditProfile">{{
babyInfo?.babyStage === 0
? "备孕"
? '备孕'
: babyInfo?.babyStage === 1
? "孕中"
: babyInfo.babyName || "暂无昵称"
? '孕中'
: babyInfo.babyName || '暂无昵称'
}}</text>
<view class="user-detail-nickname-icon-wrapper" @click="handleChangeBaby">
<image class="user-detail-nickname-icon" :src="$baseUrl + 'registerLayer/icon_arrow_yellow.png'"
mode="aspectFit" />
<image
class="user-detail-nickname-icon"
:src="$baseUrl + 'registerLayer/icon_arrow_yellow.png'"
mode="aspectFit"
/>
</view>
</view>
<!-- 积分账户 -->
<view class="integral-account" @click="handleEditProfile">
<text class="integral-account-text"> 账号： </text>
<text class="integral-account-value">
{{ userStore.memberInfo?.mobile || '' }}</text>
<text class="integral-account-value"> {{ userStore.memberInfo?.mobile || '' }}</text>
</view>
<BabySwitcher v-if="showBabySwitcher" :show="showBabySwitcher" :babyList="babyInfo.allBabyBaseInfo || []"
:addIcon="$baseUrl + 'my/baby_add_btn.png'" @close="showBabySwitcher = false" @select="onSelectBaby"
@add="onAddBaby" />
<BabySwitcher
v-if="showBabySwitcher"
:show="showBabySwitcher"
:babyList="babyInfo.allBabyBaseInfo || []"
:addIcon="$baseUrl + 'my/baby_add_btn.png'"
@close="showBabySwitcher = false"
@select="onSelectBaby"
@add="onAddBaby"
/>
</view>
<view class="integralContainer" @click="handleIntegralClick">
<image class="integralIcon" src="https://course.feihe.com/momclub-picture/my/integralBg.png"
mode="aspectFit" />
<text class="integralText0">{{ points || "0" }}</text>
<image
class="integralIcon"
src="https://course.feihe.com/momclub-picture/my/integralBg.png"
mode="aspectFit"
/>
<text class="integralText0">{{ points || '0' }}</text>
<text class="integralText1">积分</text>
</view>
</view>
......@@ -102,35 +146,51 @@
</view>
<view class="desc-content">
<text class="desc-text">{{
wheelOptions[wheelSelectedIndex]?.desc.length > 46
? cfgStatus.openBabyCardDesc
? wheelOptions[wheelSelectedIndex]?.desc
: wheelOptions[wheelSelectedIndex]?.desc.slice(0, 46) + "..."
: wheelOptions[wheelSelectedIndex]?.desc
}}
<text class="desc-text"
>{{
wheelOptions[wheelSelectedIndex]?.desc.length > 46
? cfgStatus.openBabyCardDesc
? wheelOptions[wheelSelectedIndex]?.desc
: wheelOptions[wheelSelectedIndex]?.desc.slice(0, 46) + '...'
: wheelOptions[wheelSelectedIndex]?.desc
}}
</text>
<text v-if="wheelOptions[wheelSelectedIndex]?.desc.length > 46" class="desc-more" @click="handleOpenClick">{{
cfgStatus.openBabyCardDesc ? "点击收起" : "点击展开" }}</text>
<text
v-if="wheelOptions[wheelSelectedIndex]?.desc.length > 46"
class="desc-more"
@click="handleOpenClick"
>{{ cfgStatus.openBabyCardDesc ? '点击收起' : '点击展开' }}</text
>
</view>
</view>
</view>
<!-- 添加宝宝信息模块 -->
<view class="add-baby-info-module"
v-if="cfgStatus.isRegister && (!babyInfo?.allBabyBaseInfo || babyInfo.allBabyBaseInfo.length === 0)">
<view
class="add-baby-info-module"
v-if="cfgStatus.isRegister && (!babyInfo?.allBabyBaseInfo || babyInfo.allBabyBaseInfo.length === 0)"
>
<image class="add-baby-info-bg" :src="$baseUrl + 'homepage/Q3Res/addBabyInfoBg2.png'"></image>
<view class="add-baby-info-btn-container">
<image class="add-baby-info-btn" :src="$baseUrl + 'homepage/Q3Res/addBabyInfoBtn2.png'"
@tap="handleAddBabyInfoClick"></image>
<image
class="add-baby-info-btn"
:src="$baseUrl + 'homepage/Q3Res/addBabyInfoBtn2.png'"
@tap="handleAddBabyInfoClick"
></image>
</view>
</view>
<!-- 完成任务模块 -->
<view class="task-module"
v-if="cfgStatus.isRegister && (babyInfo?.allBabyBaseInfo && babyInfo.allBabyBaseInfo.length > 0)">
<view
class="task-module"
v-if="cfgStatus.isRegister && babyInfo?.allBabyBaseInfo && babyInfo.allBabyBaseInfo.length > 0"
>
<image class="task-guide-bg" :src="$baseUrl + 'homepage/Q3Res/my_taskGuideBg.png'"></image>
<image class="task-do-btn" :src="$baseUrl + 'homepage/Q3Res/my_taskDoBtn.png'" @tap="handleTaskClick"></image>
<image
class="task-do-btn"
:src="$baseUrl + 'homepage/Q3Res/my_taskDoBtn.png'"
@tap="handleTaskClick"
></image>
</view>
<!-- 工具 -->
......@@ -139,11 +199,19 @@
<view class="tool-list">
<template v-for="item in toolList" :key="item.title">
<view v-if="!item.hidden" class="tool-item" @click="handleToolClick(item)">
<image class="tool-icon" :src="item.bgUrl?.includes('http') ? item.bgUrl : $baseUrl + item.bgUrl"
mode="aspectFit" />
<image
class="tool-icon"
:src="item.bgUrl?.includes('http') ? item.bgUrl : $baseUrl + item.bgUrl"
mode="aspectFit"
/>
<!-- || item.title == '产检提醒' || item.title == '喂养记录' || item.title == '生长测评' -->
<button v-if="(item.title == '医生问诊') && !cfgStatus.isRegister" class="tool-btn-register" type="primary"
open-type="getPhoneNumber" @getphonenumber="getRealtimePhoneNumber" />
<button
v-if="item.title == '医生问诊' && !cfgStatus.isRegister"
class="tool-btn-register"
type="primary"
open-type="getPhoneNumber"
@getphonenumber="getRealtimePhoneNumber"
/>
</view>
</template>
</view>
......@@ -151,50 +219,76 @@
<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
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?.bgUrl?.includes('http') ? item?.bgUrl : $baseUrl + `${item?.bgUrl}`"
mode="aspectFit" @click="handleVipActiveClick(index, item)" />
<image
class="vip-active-img"
:src="item?.bgUrl?.includes('http') ? item?.bgUrl : $baseUrl + `${item?.bgUrl}`"
mode="aspectFit"
@click="handleVipActiveClick(index, item)"
/>
</swiper-item>
</swiper>
</view>
<!-- 功能菜单 -->
<view class="menu-container">
<view class="menu-item" @click="navigateToWithLogin('/v3/orderList/orderList')" :data-log="{
xcxClick: '我的页面点击',
pageName: '我的页面',
buttonName: '我的订单'
}">
<view
class="menu-item"
@click="navigateToWithLogin('/v3/orderList/orderList')"
:data-log="{
xcxClick: '我的页面点击',
pageName: '我的页面',
buttonName: '我的订单',
}"
>
<image class="menu-icon" :src="$baseUrl + 'homepage/Q3Res/myIcon_myOrder.png'" mode="aspectFit" />
<text class="menu-title">我的订单</text>
<image class="menu-arrow" :src="$baseUrl + 'homepage/Q3Res/rightArrowBtn.png'" mode="aspectFit" />
</view>
<view class="menu-item" @click="navigateToWithLogin('/v3/addressList/addressList')" :data-log="{
xcxClick: '我的页面点击',
pageName: '我的页面',
buttonName: '收货地址管理'
}">
<view
class="menu-item"
@click="navigateToWithLogin('/v3/addressList/addressList')"
:data-log="{
xcxClick: '我的页面点击',
pageName: '我的页面',
buttonName: '收货地址管理',
}"
>
<image class="menu-icon" :src="$baseUrl + 'homepage/Q3Res/myIcon_address.png'" mode="aspectFit" />
<text class="menu-title">收货地址管理</text>
<image class="menu-arrow" :src="$baseUrl + 'homepage/Q3Res/rightArrowBtn.png'" mode="aspectFit" />
</view>
<view class="menu-item" @click="navigateToCouponWithLogin()" :data-log="{
xcxClick: '我的页面点击',
pageName: '我的页面',
buttonName: '我的优惠券'
}">
<view
class="menu-item"
@click="navigateToCouponWithLogin()"
:data-log="{
xcxClick: '我的页面点击',
pageName: '我的页面',
buttonName: '我的优惠券',
}"
>
<image class="menu-icon" :src="$baseUrl + 'homepage/Q3Res/myIcon_myCupon.png'" mode="aspectFit" />
<text class="menu-title">我的优惠券</text>
<image class="menu-arrow" :src="$baseUrl + 'homepage/Q3Res/rightArrowBtn.png'" mode="aspectFit" />
</view>
<view class="menu-item" @click="navigateToWithLogin('/v3/more/index')" :data-log="{
xcxClick: '我的页面点击',
pageName: '我的页面',
buttonName: '更多'
}">
<view
class="menu-item"
@click="navigateToWithLogin('/v3/more/index')"
:data-log="{
xcxClick: '我的页面点击',
pageName: '我的页面',
buttonName: '更多',
}"
>
<image class="menu-icon" :src="$baseUrl + 'homepage/Q3Res/myIcon_more.png'" mode="aspectFit" />
<text class="menu-title">更多</text>
<image class="menu-arrow" :src="$baseUrl + 'homepage/Q3Res/rightArrowBtn.png'" mode="aspectFit" />
......@@ -221,13 +315,11 @@
<!-- 生日弹窗 type 3 钻石、4 星光、5 星耀 -->
<!-- <popup-shengri v-if="isTip" type="3" @close="isTip = false"></popup-shengri> -->
<!-- 精选好卷弹窗 isUnlock // 是否解锁 商品兑换券 type 1 黄金、2 铂金、3 钻石、4 星光、5 星耀 -->
<!-- <popup-jingxuan v-if="isTip" type="1" isUnlock="true" @close="isTip = false"></popup-jingxuan> -->
<!-- 新人礼券弹窗 type 1 黄金、2 铂金、3 钻石、4 星光、5 星耀-->
<!-- <popup-xinren v-if="isTip" type="1" @close="isTip = false"></popup-xinren> -->
</template>
<style scoped>
......@@ -292,21 +384,21 @@
</style>
<script setup>
import { ref, onMounted, getCurrentInstance, computed, watch } from "vue";
import RegisterLayer from "../components/RegisterLayer.vue";
import BabySwitcher from "../components/BabySwitcher.vue";
import WheelSelector from "../components/WheelSelector.vue";
import { useUserStore } from "@/stores/user";
import { usePageCfgStore } from "@/stores/pageCfg";
import { jump, JumpType } from "@/utils";
import { getHealthField } from "@/api/common";
import { hideLoading, showLoading } from "../utils";
import md from "../md.js";
import { ref, onMounted, getCurrentInstance, computed, watch } from 'vue';
import RegisterLayer from '../components/RegisterLayer.vue';
import BabySwitcher from '../components/BabySwitcher.vue';
import WheelSelector from '../components/WheelSelector.vue';
import { useUserStore } from '@/stores/user';
import { usePageCfgStore } from '@/stores/pageCfg';
import { jump, JumpType } from '@/utils';
import { getHealthField } from '@/api/common';
import { hideLoading, showLoading } from '../utils';
import md from '../md.js';
import { onShow } from '@dcloudio/uni-app';
import { useIntegralStore } from "../stores/integral.js";
import { useGlobalStore } from "../stores/global.js";
import { uploadImage } from "../api/common.js";
import { saveBabyExtra } from "../api/user.js";
import { useIntegralStore } from '../stores/integral.js';
import { useGlobalStore } from '../stores/global.js';
import { uploadImage } from '../api/common.js';
import { saveBabyExtra } from '../api/user.js';
const { proxy } = getCurrentInstance();
const $baseUrl = proxy.$baseUrl;
......@@ -329,9 +421,11 @@ const babyInfo = computed(() => userStore?.babyInfo || {});
// 判断是否可以使用选择头像功能
const canChooseAvatar = computed(() => {
return cfgStatus.value.isRegister &&
userStore.babyInfo?.allBabyBaseInfo &&
userStore.babyInfo?.allBabyBaseInfo?.length > 0;
return (
cfgStatus.value.isRegister &&
userStore.babyInfo?.allBabyBaseInfo &&
userStore.babyInfo?.allBabyBaseInfo?.length > 0
);
});
const showRegisterLayer = ref(false);
......@@ -350,10 +444,10 @@ const localBackgroundImg = ref('');
const handleTaskClick = async () => {
// 添加点击埋点
md.sensorComponentLogTake({
xcxComponentClick: "true",
pageName: "我的页面",
componentName: "做任务赚更多积分",
componentContent: "去做任务"
xcxComponentClick: 'true',
pageName: '我的页面',
componentName: '做任务赚更多积分',
componentContent: '去做任务',
});
// 检查登录状态
......@@ -361,7 +455,7 @@ const handleTaskClick = async () => {
// 未登录，跳转到登录注册页面
jump({
type: JumpType.INNER,
url: "/pages/activity/register",
url: '/pages/activity/register',
});
return;
}
......@@ -369,32 +463,31 @@ const handleTaskClick = async () => {
// 已登录，正常执行任务逻辑
await integralStore.getSigninAndTaskInfo(false);
globalStore.showTaskPop(integralStore?.signinAndTaskInfo?.data?.taskTodo);
}
};
const handleHot = (e) => {
const type = e.currentTarget.dataset.type;
md.sensorLog(e);
console.log("handleHot", type);
console.log('handleHot', type);
md.sensorComponentLogTake({
xcxComponentClick: "true",
pageName: "我的页面",
componentName: "查看协议",
componentContent: type === "member" ? "会员规则" : "隐私协议"
})
if (type === "member") {
navigateTo("/pages/webview/webview?type=MEMBER_URL");
} else if (type === "privacy") {
navigateTo("/pages/webview/webview?type=PRIVACY_URL");
xcxComponentClick: 'true',
pageName: '我的页面',
componentName: '查看协议',
componentContent: type === 'member' ? '会员规则' : '隐私协议',
});
if (type === 'member') {
navigateTo('/pages/webview/webview?type=MEMBER_URL');
} else if (type === 'privacy') {
navigateTo('/pages/webview/webview?type=PRIVACY_URL');
}
};
function clickRegisterShield() {
jump({
type: JumpType.INNER,
url: "/pages/activity/register",
})
url: '/pages/activity/register',
});
}
// 页面跳转
......@@ -402,7 +495,7 @@ const navigateToCoupon = () => {
const url = 'subPackages/shopMainProcess/coupons/couponList';
const type = JumpType.MINI;
const extra = {
appId: 'wx4205ec55b793245e', //星妈优选小程序
appId: 'wx4205ec55b793245e', //星妈优选小程序
extraData: {},
envVersion: 'release',
embedded: true,
......@@ -411,7 +504,7 @@ const navigateToCoupon = () => {
jump({
type: type,
url: url,
extra: extra
extra: extra,
});
};
......@@ -419,10 +512,10 @@ const navigateToCoupon = () => {
const navigateToCouponWithLogin = () => {
// 添加点击埋点
md.sensorComponentLogTake({
xcxComponentClick: "true",
pageName: "我的页面",
componentName: "拓展工具",
componentContent: "我的优惠券"
xcxComponentClick: 'true',
pageName: '我的页面',
componentName: '拓展工具',
componentContent: '我的优惠券',
});
// 检查登录状态
......@@ -430,7 +523,7 @@ const navigateToCouponWithLogin = () => {
// 未登录，跳转到登录注册页面
jump({
type: JumpType.INNER,
url: "/pages/activity/register",
url: '/pages/activity/register',
});
return;
}
......@@ -444,10 +537,10 @@ const navigateTo = (url) => {
url,
animationDuration: 0,
fail: (err) => {
console.error("页面跳转失败:", err);
console.error('页面跳转失败:', err);
uni.showToast({
title: "页面跳转失败",
icon: "none",
title: '页面跳转失败',
icon: 'none',
});
},
});
......@@ -470,10 +563,10 @@ const navigateToWithLogin = (url) => {
if (componentContent) {
md.sensorComponentLogTake({
xcxComponentClick: "true",
pageName: "我的页面",
componentName: "拓展工具",
componentContent: componentContent
xcxComponentClick: 'true',
pageName: '我的页面',
componentName: '拓展工具',
componentContent: componentContent,
});
}
......@@ -482,7 +575,7 @@ const navigateToWithLogin = (url) => {
// 未登录，跳转到登录注册页面
jump({
type: JumpType.INNER,
url: "/pages/activity/register",
url: '/pages/activity/register',
});
return;
}
......@@ -493,29 +586,29 @@ const navigateToWithLogin = (url) => {
const handleToolClick = async (item) => {
md.sensorLogTake({
xcxClick: "我的页面点击",
pageName: "我的页面",
xcxClick: '我的页面点击',
pageName: '我的页面',
buttonName: item.title,
});
md.sensorComponentLogTake({
xcxComponentClick: "true",
pageName: "我的页面",
componentName: "工具",
componentContent: item.title
})
xcxComponentClick: 'true',
pageName: '我的页面',
componentName: '工具',
componentContent: item.title,
});
// 跳转产检提醒页面判断
// let listData = userStore.babyInfo ? userStore.babyInfo.allBabyBaseInfo : []
if (item.title === "医生问诊") {
if (item.title === '医生问诊') {
if (!cfgStatus.value.isRegister) return;
const res = await getHealthField();
if (!res.success) {
uni.showToast({
title: "获取健康字段失败",
icon: "none",
title: '获取健康字段失败',
icon: 'none',
});
return;
}
......@@ -524,27 +617,25 @@ const handleToolClick = async (item) => {
jump({
type: JumpType.MINI,
url: "/pages/partner/redirect",
url: '/pages/partner/redirect',
extra: {
appId: "wx81ecfb5aa3fb512f",
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",
targetApp: '/h5/partner/shining-like-a-start/landing-free-consult?sysType=CRF',
},
},
});
}
// 三个工具校验是否授权
else if (item.title === "生长测评" || item.title === "喂养记录" || item.title === "产检提醒") {
else if (item.title === '生长测评' || item.title === '喂养记录' || item.title === '产检提醒') {
// if (!cfgStatus.value.isRegister) return;
jump({ type: item.link.type, url: item.link.url });
}
else {
} else {
jump({ type: item.link.type, url: item.link.url });
// const extra = item.link.extra;
// if(extra && extra.babyId){
......@@ -557,159 +648,142 @@ const handleToolClick = async (item) => {
// 编辑个人资料
const handleEditProfile = (e) => {
if (!userStore.userInfo ||
JSON.stringify(userStore.userInfo) === "{}"
) {
if (!userStore.userInfo || JSON.stringify(userStore.userInfo) === '{}') {
return;
}
md.sensorLog(e);
md.sensorComponentLogTake({
xcxComponentClick: "true",
pageName: "我的页面",
componentName: "资料编辑",
componentContent: "资料编辑"
})
xcxComponentClick: 'true',
pageName: '我的页面',
componentName: '资料编辑',
componentContent: '资料编辑',
});
// 检查登录状态
if (!cfgStatus.value.isRegister) {
// 未登录，跳转到登录注册页面
jump({
type: JumpType.INNER,
url: "/pages/activity/register",
url: '/pages/activity/register',
});
return;
}
if(!userStore.babyInfo?.allBabyBaseInfo || userStore.babyInfo?.allBabyBaseInfo?.length === 0) {
navigateTo("/pages/person/person?type=add");
if (!userStore.babyInfo?.allBabyBaseInfo || userStore.babyInfo?.allBabyBaseInfo?.length === 0) {
navigateTo('/pages/person/person?type=add');
return;
}
const type = userStore.babyInfo?.allBabyBaseInfo?.length == 0 ? "add" : "edit";
babyId.value = userStore.babyInfo?.allBabyBaseInfo?.find(
(item) => item.selected
)?.id;
const type = userStore.babyInfo?.allBabyBaseInfo?.length == 0 ? 'add' : 'edit';
babyId.value = userStore.babyInfo?.allBabyBaseInfo?.find((item) => item.selected)?.id;
if (type === "edit") {
babyId.value = userStore.babyInfo?.allBabyBaseInfo.find(
(item) => item.selected
)?.id;
if (type === 'edit') {
babyId.value = userStore.babyInfo?.allBabyBaseInfo.find((item) => item.selected)?.id;
navigateTo(`/pages/person/person?type=${type}&id=${babyId.value}`);
} else {
navigateTo(`/pages/person/person?type=${type}`);
}
};
// 头像点击事件（当不满足选择头像条件时）
const handleAvatarClick = (e) => {
md.sensorLog(e);
md.sensorComponentLogTake({
xcxComponentClick: "true",
pageName: "我的页面",
componentName: "资料编辑",
componentContent: "资料编辑"
})
xcxComponentClick: 'true',
pageName: '我的页面',
componentName: '资料编辑',
componentContent: '资料编辑',
});
// 检查登录状态
if (!cfgStatus.value.isRegister) {
// 未登录，跳转到登录注册页面
jump({
type: JumpType.INNER,
url: "/pages/activity/register",
url: '/pages/activity/register',
});
return;
}
if(!userStore.babyInfo?.allBabyBaseInfo || userStore.babyInfo?.allBabyBaseInfo?.length === 0) {
navigateTo("/pages/person/person?type=add");
if (!userStore.babyInfo?.allBabyBaseInfo || userStore.babyInfo?.allBabyBaseInfo?.length === 0) {
navigateTo('/pages/person/person?type=add');
return;
}
};
// 选择头像
const onChooseAvatar = async (e) => {
showLoading('上传中...');
md.sensorLog(e);
md.sensorComponentLogTake({
xcxComponentClick: "true",
pageName: "我的页面",
componentName: "资料编辑",
componentContent: "资料编辑"
})
xcxComponentClick: 'true',
pageName: '我的页面',
componentName: '资料编辑',
componentContent: '资料编辑',
});
try {
const fs = uni.getFileSystemManager();
const base64 =
"data:image/jpeg;base64," + fs.readFileSync(e.detail.avatarUrl, "base64");
const base64 = 'data:image/jpeg;base64,' + fs.readFileSync(e.detail.avatarUrl, 'base64');
const res = await uploadImage(base64);
if (res.success) {
// 立即更新本地显示的头像
localAvatarUrl.value = res.data.url;
// 获取当前选中的宝宝信息并更新到服务器
const selectedBaby = userStore.babyInfo?.allBabyBaseInfo?.find(
(item) => item.selected
);
console.log("selectedBaby-===", selectedBaby);
if (selectedBaby) {
const selectedBaby = userStore.babyInfo?.allBabyBaseInfo?.find((item) => item.selected);
console.log('selectedBaby-===', selectedBaby);
if (selectedBaby) {
// const updateData = {
// id: selectedBaby.id,
// babyAvatar: res.data.url,
// };
// const updateRes = await updateBabyInfo(updateData);
console.log("userStore.babyInfo?.content?.id====", userStore.babyInfo?.content);
console.log('userStore.babyInfo?.content?.id====', userStore.babyInfo?.content);
const updateData = {
id: userStore.babyInfo?.content?.id,
babyAvatar: res.data.url
}
babyAvatar: res.data.url,
};
const updateRes = await saveBabyExtra(updateData);
if (updateRes.success) {
// 刷新用户信息
await userStore.loadBabyInfo();
// 清空本地临时头像，使用更新后的 babyInfo
localAvatarUrl.value = '';
uni.showToast({
title: "头像更新成功",
icon: "success",
title: '头像更新成功',
icon: 'success',
});
} else {
uni.showToast({
title: updateRes.message || "更新失败",
icon: "none",
title: updateRes.message || '更新失败',
icon: 'none',
});
}
} else {
uni.showToast({
title: "未找到宝宝信息",
icon: "none",
title: '未找到宝宝信息',
icon: 'none',
});
}
} else {
uni.showToast({
title: res.message,
icon: "none",
icon: 'none',
});
}
} catch (error) {
console.error("头像选择失败:", error);
console.error('头像选择失败:', error);
uni.showToast({
title: "头像选择失败",
icon: "none",
title: '头像选择失败',
icon: 'none',
});
} finally {
hideLoading();
......@@ -717,7 +791,7 @@ const onChooseAvatar = async (e) => {
};
const onRegisterConfirm = async () => {
await pageCfgStore.fetchCfg();
await pageCfgStore.fetchCfg(globalStore.getPreviewScene('my'));
// 只调用一次initData，loadMemberInfo已在initData内部处理
initData();
showRegisterLayer.value = false;
......@@ -728,149 +802,146 @@ const onRegisterCancel = () => {
const handleWheelChange = (val) => {
md.sensorComponentLogTake({
xcxComponentClick: "true",
pageName: "我的页面",
componentName: "月龄定位器",
componentContent: babyInfo.value.babyStage == 2
? "月龄滑动切换-" + val
: "孕周滑动切换-" + val
xcxComponentClick: 'true',
pageName: '我的页面',
componentName: '月龄定位器',
componentContent: babyInfo.value.babyStage == 2 ? '月龄滑动切换-' + val : '孕周滑动切换-' + val,
});
}
};
const initExposure = () => {
// 添加宝宝信息引导模块曝光埋点
if (cfgStatus.value.isRegister && (!babyInfo.value?.allBabyBaseInfo || babyInfo.value?.allBabyBaseInfo?.length === 0)) {
if (
cfgStatus.value.isRegister &&
(!babyInfo.value?.allBabyBaseInfo || babyInfo.value?.allBabyBaseInfo?.length === 0)
) {
md.sensorComponentLogTake({
xcxComponentExposure: "true",
pageName: "我的页面",
componentName: "添加宝宝信息引导",
componentContent: "添加宝宝信息引导"
xcxComponentExposure: 'true',
pageName: '我的页面',
componentName: '添加宝宝信息引导',
componentContent: '添加宝宝信息引导',
});
}
// 添加做任务赚更多积分模块曝光埋点
if (!cfgStatus.value.isRegister || (babyInfo.value?.allBabyBaseInfo && babyInfo.value?.allBabyBaseInfo?.length > 0)) {
if (
!cfgStatus.value.isRegister ||
(babyInfo.value?.allBabyBaseInfo && babyInfo.value?.allBabyBaseInfo?.length > 0)
) {
md.sensorComponentLogTake({
xcxComponentExposure: "true",
pageName: "我的页面",
componentName: "做任务赚更多积分",
componentContent: "去做任务"
xcxComponentExposure: 'true',
pageName: '我的页面',
componentName: '做任务赚更多积分',
componentContent: '去做任务',
});
}
md.sensorComponentLogTake({
xcxComponentExposure: "true",
pageName: "我的页面",
componentName: "资料编辑",
componentContent: "资料编辑"
xcxComponentExposure: 'true',
pageName: '我的页面',
componentName: '资料编辑',
componentContent: '资料编辑',
});
toolList.value.forEach((item, index) => {
md.sensorComponentLogTake({
xcxComponentExposure: "true",
pageName: "我的页面",
componentName: "工具",
componentContent: item.title
xcxComponentExposure: 'true',
pageName: '我的页面',
componentName: '工具',
componentContent: item.title,
});
});
if (pageCfgStore?.contentCfg?.activeInfo?.length > 0) {
pageCfgStore.contentCfg.activeInfo.forEach((item, index) => {
md.sensorComponentLogTake({
xcxComponentExposure: "true",
pageName: "我的页面",
componentName: "精彩活动",
componentContent: "精彩活动-" + item.title
xcxComponentExposure: 'true',
pageName: '我的页面',
componentName: '精彩活动',
componentContent: '精彩活动-' + item.title,
});
});
}
md.sensorComponentLogTake({
xcxComponentExposure: "true",
pageName: "我的页面",
componentName: "查看协议",
componentContent: "会员规则"
xcxComponentExposure: 'true',
pageName: '我的页面',
componentName: '查看协议',
componentContent: '会员规则',
});
md.sensorComponentLogTake({
xcxComponentExposure: "true",
pageName: "我的页面",
componentName: "查看协议",
componentContent: "隐私协议"
xcxComponentExposure: 'true',
pageName: '我的页面',
componentName: '查看协议',
componentContent: '隐私协议',
});
md.sensorComponentLogTake({
xcxComponentExposure: "true",
pageName: "我的页面",
componentName: "月龄定位器",
componentContent: babyInfo.value.babyStage == 2 ? "月龄滑动切换" : "孕周滑动切换"
xcxComponentExposure: 'true',
pageName: '我的页面',
componentName: '月龄定位器',
componentContent: babyInfo.value.babyStage == 2 ? '月龄滑动切换' : '孕周滑动切换',
});
// 添加拓展工具菜单曝光埋点
md.sensorComponentLogTake({
xcxComponentExposure: "true",
pageName: "我的页面",
componentName: "拓展工具",
componentContent: "我的订单"
xcxComponentExposure: 'true',
pageName: '我的页面',
componentName: '拓展工具',
componentContent: '我的订单',
});
md.sensorComponentLogTake({
xcxComponentExposure: "true",
pageName: "我的页面",
componentName: "拓展工具",
componentContent: "收货地址管理"
xcxComponentExposure: 'true',
pageName: '我的页面',
componentName: '拓展工具',
componentContent: '收货地址管理',
});
md.sensorComponentLogTake({
xcxComponentExposure: "true",
pageName: "我的页面",
componentName: "拓展工具",
componentContent: "我的优惠券"
xcxComponentExposure: 'true',
pageName: '我的页面',
componentName: '拓展工具',
componentContent: '我的优惠券',
});
md.sensorComponentLogTake({
xcxComponentExposure: "true",
pageName: "我的页面",
componentName: "拓展工具",
componentContent: "更多"
xcxComponentExposure: 'true',
pageName: '我的页面',
componentName: '拓展工具',
componentContent: '更多',
});
}
};
onShow(async () => {
console.log('onShow')
console.log('onShow');
await userStore.loadMemberInfo();
points.value = userStore.memberInfo?.points;
console.log('userStore.memberInfo=', userStore.memberInfo)
console.log('userStore.memberInfo=', userStore.memberInfo);
// 添加拓展工具菜单曝光埋点
md.sensorComponentLogTake({
xcxComponentExposure: "true",
pageName: "我的页面",
componentName: "拓展工具",
componentContent: "我的订单"
xcxComponentExposure: 'true',
pageName: '我的页面',
componentName: '拓展工具',
componentContent: '我的订单',
});
md.sensorComponentLogTake({
xcxComponentExposure: "true",
pageName: "我的页面",
componentName: "拓展工具",
componentContent: "收货地址管理"
xcxComponentExposure: 'true',
pageName: '我的页面',
componentName: '拓展工具',
componentContent: '收货地址管理',
});
md.sensorComponentLogTake({
xcxComponentExposure: "true",
pageName: "我的页面",
componentName: "拓展工具",
componentContent: "我的优惠券"
xcxComponentExposure: 'true',
pageName: '我的页面',
componentName: '拓展工具',
componentContent: '我的优惠券',
});
md.sensorComponentLogTake({
xcxComponentExposure: "true",
pageName: "我的页面",
componentName: "拓展工具",
componentContent: "更多"
xcxComponentExposure: 'true',
pageName: '我的页面',
componentName: '拓展工具',
componentContent: '更多',
});
console.warn("AAAAAAAA")
})
console.warn('AAAAAAAA');
});
// 获取用户信息
const initData = async () => {
......@@ -878,10 +949,7 @@ const initData = async () => {
await userStore.loadMemberInfo();
points.value = userStore.memberInfo?.points;
if (
userStore?.userInfo?.memberId &&
userStore?.userInfo?.memberId == "not_login"
) {
if (userStore?.userInfo?.memberId && userStore?.userInfo?.memberId == 'not_login') {
cfgStatus.value.isRegister = false;
cfgStatus.value.showDetail = false;
return;
......@@ -892,50 +960,44 @@ const initData = async () => {
// 已出生或孕中显示
cfgStatus.value.showDetail = __showDetail;
if (__showDetail) {
wheelOptions.value =
babyInfo.value.babyStage == 2
? pageCfgStore.wheelOptionsYL
: pageCfgStore.wheelOptionsYZ;
const index = wheelOptions.value.findIndex(
(item) => item.label == babyInfo.value.babyAge
);
babyInfo.value.babyStage == 2 ? pageCfgStore.wheelOptionsYL : pageCfgStore.wheelOptionsYZ;
const index = wheelOptions.value.findIndex((item) => item.label == babyInfo.value.babyAge);
wheelSelectedIndex.value = index > 0 ? index : 0;
}
};
const handleIntegralClick = () => {
md.sensorLogTake({
xcxClick: "我的页面-首屏页面点击",
pageName: "我的页面-首屏",
buttonName: "积分明细",
xcxClick: '我的页面-首屏页面点击',
pageName: '我的页面-首屏',
buttonName: '积分明细',
});
const urlStr = 'https://mom.feihe.com/member/mine/newPointDetail?crmId={crmid}&appCode=XMH';
const url = urlStr.replace("{crmid}", userStore.babyInfo?.memberId);
console.log('积分明细链接：==', url)
const url = urlStr.replace('{crmid}', userStore.babyInfo?.memberId);
console.log('积分明细链接：==', url);
jump({
type: 3,
url: url
})
}
url: url,
});
};
const getRealtimePhoneNumber = async (e) => {
console.log("获取手机号码", e);
console.log('获取手机号码', e);
if (e.detail.errMsg !== "getPhoneNumber:ok") {
if (e.detail.errMsg !== 'getPhoneNumber:ok') {
uni.showToast({
title: "请授权使用手机号",
icon: "none",
title: '请授权使用手机号',
icon: 'none',
});
return;
}
await userStore.phoneCallback(e.detail, async () => {
// 简化回调，避免重复调用接口
showLoading();
await pageCfgStore.fetchCfg();
await pageCfgStore.fetchCfg(globalStore.getPreviewScene('my'));
// 只调用一次initData，loadMemberInfo已在initData内部处理
initData();
hideLoading();
......@@ -949,31 +1011,28 @@ const handleChangeBaby = (e) => {
md.sensorLog(e);
md.sensorComponentLogTake({
xcxComponentClick: "true",
xcxComponentExposure: "true",
pageName: "我的页面",
componentName: "资料编辑",
componentContent: "展开"
})
xcxComponentClick: 'true',
xcxComponentExposure: 'true',
pageName: '我的页面',
componentName: '资料编辑',
componentContent: '展开',
});
md.sensorComponentLogTake({
xcxComponentExposure: "true",
pageName: "我的页面",
componentName: "资料编辑",
componentContent: "新增"
})
xcxComponentExposure: 'true',
pageName: '我的页面',
componentName: '资料编辑',
componentContent: '新增',
});
md.sensorComponentLogTake({
xcxComponentExposure: "true",
pageName: "我的页面",
componentName: "资料编辑",
componentContent: "状态切换"
})
xcxComponentExposure: 'true',
pageName: '我的页面',
componentName: '资料编辑',
componentContent: '状态切换',
});
showBabySwitcher.value = true;
};
async function onSelectBaby(baby) {
// 处理宝宝切换逻辑
showBabySwitcher.value = false;
......@@ -982,22 +1041,22 @@ async function onSelectBaby(baby) {
await userStore.changeBabySelected(baby.id);
hideLoading();
console.log("onSelectBaby", baby);
console.log('onSelectBaby', baby);
md.sensorComponentLogTake({
xcxComponentClick: "true",
pageName: "我的页面",
componentName: "资料编辑",
componentContent: "状态切换"
})
xcxComponentClick: 'true',
pageName: '我的页面',
componentName: '资料编辑',
componentContent: '状态切换',
});
}
function handleAddBabyInfoClick() {
// 添加点击埋点
md.sensorComponentLogTake({
xcxComponentClick: "true",
pageName: "我的页面",
componentName: "添加宝宝信息引导",
componentContent: "添加宝宝信息引导"
xcxComponentClick: 'true',
pageName: '我的页面',
componentName: '添加宝宝信息引导',
componentContent: '添加宝宝信息引导',
});
// 显示RegisterLayer弹窗
showRegisterLayer.value = true;
......@@ -1005,27 +1064,27 @@ function handleAddBabyInfoClick() {
function onAddBaby() {
md.sensorLogTake({
xcxClick: "我的页面点击",
pageName: "我的页面",
buttonName: "新增入口",
xcxClick: '我的页面点击',
pageName: '我的页面',
buttonName: '新增入口',
});
md.sensorComponentLogTake({
xcxComponentClick: "true",
pageName: "我的页面",
componentName: "资料编辑",
componentContent: "新增"
})
xcxComponentClick: 'true',
pageName: '我的页面',
componentName: '资料编辑',
componentContent: '新增',
});
// 跳转到新增宝宝页面
showBabySwitcher.value = false;
navigateTo("/pages/person/person?type=add");
navigateTo('/pages/person/person?type=add');
}
const handleOpenClick = () => {
md.sensorLogTake({
xcxClick: "我的页面点击",
pageName: "我的页面",
buttonName: cfgStatus.value.openBabyCardDesc ? "收起" : "展开",
xcxClick: '我的页面点击',
pageName: '我的页面',
buttonName: cfgStatus.value.openBabyCardDesc ? '收起' : '展开',
});
cfgStatus.value.openBabyCardDesc = !cfgStatus.value.openBabyCardDesc;
};
......@@ -1034,141 +1093,131 @@ const handleOpenClick = () => {
const handleUploadBackground = async (e) => {
md.sensorLog(e);
md.sensorComponentLogTake({
xcxComponentClick: "true",
pageName: "我的页面",
componentName: "资料编辑",
componentContent: "资料编辑"
})
xcxComponentClick: 'true',
pageName: '我的页面',
componentName: '资料编辑',
componentContent: '资料编辑',
});
// 检查登录状态
if (!cfgStatus.value.isRegister) {
// 未登录，跳转到登录注册页面
jump({
type: JumpType.INNER,
url: "/pages/activity/register",
url: '/pages/activity/register',
});
return;
}
if(!userStore.babyInfo?.allBabyBaseInfo || userStore.babyInfo?.allBabyBaseInfo?.length === 0) {
navigateTo("/pages/person/person?type=add");
if (!userStore.babyInfo?.allBabyBaseInfo || userStore.babyInfo?.allBabyBaseInfo?.length === 0) {
navigateTo('/pages/person/person?type=add');
return;
}
// 唤起图片选择器
uni.chooseImage({
count: 1,
sizeType: ["original", "compressed"],
sourceType: ["album", "camera"],
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: async (res) => {
showLoading('上传中...');
try {
const tempFilePath = res.tempFilePaths[0];
const fs = uni.getFileSystemManager();
const base64 =
"data:image/jpeg;base64," + fs.readFileSync(tempFilePath, "base64");
const base64 = 'data:image/jpeg;base64,' + fs.readFileSync(tempFilePath, 'base64');
const uploadRes = await uploadImage(base64);
if (uploadRes.success) {
// 立即更新本地显示的背景图
localBackgroundImg.value = uploadRes.data.url;
// 获取当前选中的宝宝信息并更新到服务器
const selectedBaby = userStore.babyInfo?.allBabyBaseInfo?.find(
(item) => item.selected
);
const selectedBaby = userStore.babyInfo?.allBabyBaseInfo?.find((item) => item.selected);
if (selectedBaby) {
// const updateData = {
// id: selectedBaby.id,
// backgroundImg: uploadRes.data.url,
// };
// const updateRes = await updateBabyInfo(updateData);
console.log("userStore.babyInfo?.content?.id====", userStore.babyInfo);
console.log('userStore.babyInfo?.content?.id====', userStore.babyInfo);
const updateData = {
id:userStore.babyInfo?.content?.id,
backgroundImg: uploadRes.data.url
}
id: userStore.babyInfo?.content?.id,
backgroundImg: uploadRes.data.url,
};
const updateRes = await saveBabyExtra(updateData);
if (updateRes.success) {
// 刷新用户信息
await userStore.loadBabyInfo();
// 清空本地临时背景图，使用更新后的 babyInfo
localBackgroundImg.value = '';
uni.showToast({
title: "背景更新成功",
icon: "success",
title: '背景更新成功',
icon: 'success',
});
} else {
uni.showToast({
title: updateRes.message || "更新失败",
icon: "none",
title: updateRes.message || '更新失败',
icon: 'none',
});
}
} else {
uni.showToast({
title: "未找到宝宝信息",
icon: "none",
title: '未找到宝宝信息',
icon: 'none',
});
}
} else {
uni.showToast({
title: uploadRes.message || "上传失败",
icon: "none",
title: uploadRes.message || '上传失败',
icon: 'none',
});
}
} catch (error) {
console.error("背景图片上传失败:", error);
console.error('背景图片上传失败:', error);
uni.showToast({
title: "背景图片上传失败",
icon: "none",
title: '背景图片上传失败',
icon: 'none',
});
} finally {
hideLoading();
}
},
fail: (err) => {
console.error("选择图片失败:", err);
console.error('选择图片失败:', err);
uni.showToast({
title: "选择图片失败",
icon: "none",
title: '选择图片失败',
icon: 'none',
});
}
},
});
};
// 页面加载
onMounted(async () => {
md.sensorLogTake({
xcxPage: "我的页面浏览",
pageName: "我的页面",
xcxPage: '我的页面浏览',
pageName: '我的页面',
});
showLoading();
await userStore.loadMemberInfo();
points.value = userStore.memberInfo?.points;
await pageCfgStore.fetchCfg();
await pageCfgStore.fetchCfg(globalStore.getPreviewScene('my'));
console.log("pageCfgStore.contentCfg====", pageCfgStore.contentCfg);
console.log('pageCfgStore.contentCfg====', pageCfgStore.contentCfg);
initData();
initExposure();
hideLoading();
babyId.value = userStore.babyInfo?.allBabyBaseInfo?.find(
(item) => item.selected
)?.id;
babyId.value = userStore.babyInfo?.allBabyBaseInfo?.find((item) => item.selected)?.id;
// const a = {
// "bgUrl": "my/shengzhangTools.png",
......@@ -1206,17 +1255,18 @@ onMounted(async () => {
});
watch([() => userStore.userInfo, () => userStore.babyInfo], () => {
console.log("userInfo/babyInfo变化", userStore.userInfo, userStore.babyInfo);
console.log('userInfo/babyInfo变化', userStore.userInfo, userStore.babyInfo);
initData();
babyId.value = userStore.babyInfo?.allBabyBaseInfo?.find(
(item) => item.selected
)?.id;
babyId.value = userStore.babyInfo?.allBabyBaseInfo?.find((item) => item.selected)?.id;
});
watch(() => userStore.memberInfo, () => {
console.log('userStore.memberInfo变化', userStore.memberInfo)
points.value = userStore.memberInfo?.points;
})
watch(
() => userStore.memberInfo,
() => {
console.log('userStore.memberInfo变化', userStore.memberInfo);
points.value = userStore.memberInfo?.points;
}
);
//会员活动点击事件
const handleVipActiveClick = (index, item) => {
......@@ -1231,16 +1281,16 @@ const handleVipActiveClick = (index, item) => {
}
md.sensorLogTake({
xcxClick: "我的页面点击",
pageName: "我的页面",
xcxClick: '我的页面点击',
pageName: '我的页面',
buttonName: buttonName,
});
md.sensorComponentLogTake({
xcxComponentClick: "true",
pageName: "我的页面",
componentName: "精彩活动",
componentContent: "精彩活动-" + item.title
})
xcxComponentClick: 'true',
pageName: '我的页面',
componentName: '精彩活动',
componentContent: '精彩活动-' + item.title,
});
const url = item?.link.url;
const type = item?.link.type;
const extra = item?.link.extra;
......@@ -1248,15 +1298,15 @@ const handleVipActiveClick = (index, item) => {
jump({
type: type,
url: url,
extra: extra
})
}
extra: extra,
});
};
// 定义页面配置
defineExpose({});
</script>
<style lang="less" scoped>
@import "@/common.less";
@import '@/common.less';
.my-container {
min-height: 100vh;
......@@ -1422,10 +1472,8 @@ defineExpose({});
color: #1d1e25;
}
}
}
.integralContainer {
position: absolute;
top: 0rpx;
......@@ -1458,7 +1506,6 @@ defineExpose({});
text-align: center;
right: 0rpx;
top: 81rpx;
}
}
......@@ -1687,4 +1734,4 @@ defineExpose({});
}
}
}
</style>
\ No newline at end of file
</style>
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