<template>
  <view class="home-container" @scroll="onPageScroll">
    <!-- 可拖拽悬浮图片 -->
    <view
      class="floating-image-container"
      v-if="floatIcon.imageUrl && !isAnyPopupVisible"
      :style="{ left: floatIconPosition.left + 'px', top: floatIconPosition.top + 'px' }"
      @touchstart="onTouchStart"
      @touchmove="onTouchMove"
      @touchend="onTouchEnd"
      @tap="onfloatIconClick"
    >
      <image
        class="floating-image"
        :src="floatIcon.imageUrl.indexOf('http') === 0 ? floatIcon.imageUrl : $baseUrl + floatIcon.imageUrl"
      >
      </image>
    </view>
    <view class="content">
      <swiper
        id="firstScreen"
        class="swiper banner"
        circular
        :autoplay="autoplay"
        :interval="interval"
        :duration="duration"
        :indicator-dots="false"
        @change="onBannerSwiperChange"
      >
        <swiper-item v-for="(item, index) in swiperList" :key="item.url">
          <view class="swiper-item banneritem">
            <image
              @tap="jumpBannerHandler(item, index)"
              class="b-img"
              :src="item.url.indexOf('http') === 0 ? item.url : $baseUrl + item.url"
            ></image>
          </view>
        </swiper-item>
      </swiper>

      <!-- 溯源测试按钮 -->
      <!-- <button style="width: 100%;height: 100rpx;background-color: #fff;color: #000;" @tap="testSource">溯源测试</button> -->

      <view class="swiper-mask">
        <image class="swiper-mask-img" :src="$baseUrl + 'homepage/home_format_v2.png'"></image>
      </view>
      <!-- 自定义指示点，仿照示意图 -->
      <view class="custom-banner-indicator">
        <view
          v-for="(item, idx) in swiperList"
          :key="item.url + idx"
          :class="['banner-dot', { active: idx === bannerCurrentIndex }]"
        ></view>
      </view>
      <view class="barbox" :style="`top:${statusBarHeight}px;`">
        <image class="btnlogo" :src="$baseUrl + 'homepage/btnlogo.png'"></image>
        <image
          :data-log="{
            xcxClick: '首页-首屏页面点击',
            pageName: '首页-首屏',
            buttonName: '搜索框',
          }"
          class="btnsearch"
          @tap="goSearchHandler"
          :src="$baseUrl + 'homepage/btnsearch.png'"
        >
        </image>
        <view class="customer-btn-wrap">
          <image
            :data-log="{
              xcxClick: '首页-首屏页面点击',
              pageName: '首页-首屏',
              buttonName: '客服入口',
            }"
            @tap="goCustomerHandler"
            class="btncustomer"
            :src="$baseUrl + 'homepage/btncustomer.png'"
          >
          </image>
          <button
            v-if="homeStore && !homeStore.isLogin"
            open-type="getPhoneNumber"
            @getphonenumber="onGetPhoneNumber"
            class="phone-auth-btn-cover"
          ></button>
        </view>
      </view>
      <!-- <view :data-log="{
				xcxClick: '首页-首屏页面点击',
				pageName: '首页-首屏',
				buttonName: '文字资源位入口'
			}" @tap="showPopup(1, $event)" class="txtbox">
				<text class="txtlink">星妈会医生在线答疑群，为孩子成长保驾护航</text>
				<image class="icon_arrow_yellow" :src="$baseUrl + 'homepage/icon_arrow_yellow.png'"></image>
			</view> -->

      <!--推荐工具-->
      <view v-if="toolList?.tools?.length > 0" class="tools_box">
        <view class="tools_maintitle">{{ toolList.maintitle }}</view>
        <view class="tools_subtitle">{{ toolList.subtitle }}</view>
        <swiper
          :vertical="false"
          :circular="true"
          class="tool_swiper"
          :display-multiple-items="1.65"
          :next-margin="'0rpx'"
          :previous-margin="'0'"
          @change="onSwiperChange"
        >
          <swiper-item
            v-for="(item, index) in toolList.tools"
            :key="index"
            :class="['swiperItem', { active: currentIndex === index }]"
          >
            <view class="tool">
              <!-- <button
								v-if="homeStore && !homeStore.isLogin && item.title!='星妈会Lab' && item.title!='星妈起名' && item.title!='喂养工具' && item.title!='产检提醒' && item.title!='宝宝生长测评' && item.title!='体质测试'"
								open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" class="sq_btn"></button> -->
              <image
                class="tool_bg"
                :src="$baseUrl + 'homepage/Q3Res/toolBg.png'"
                @tap="handleToolClick(item)"
              >
              </image>
              <image
                class="tool_icon"
                :src="item.icon?.indexOf('http') === 0 ? item.icon : $baseUrl + item.icon"
              ></image>
              <!-- <image class="tool_jt" :src="$baseUrl + toolList.jtIcon"></image> -->
              <view class="tool_title">{{ item.title }}</view>
              <view class="tool_context">{{ item.context }}</view>
            </view>
          </swiper-item>
        </swiper>

        <!-- 自定义指示点 -->
        <view class="custom-indicator">
          <view
            v-for="(item, index) in toolList.tools"
            :key="index"
            class="indicator-dot"
            :class="{ active: currentIndex === index }"
          >
          </view>
        </view>
      </view>
      <!-- 能不能吃模块 -->
      <view v-if="canEatData && canEatData.id" class="can-eat-module">
        <view class="can-eat-title">{{ '能不能吃' }}</view>
        <view class="can-eat-question">{{ canEatData.title || '' }}</view>

        <!-- 答题区域 -->
        <view v-if="!canEatData.isAnswered && !canEatData.myAnswer" class="can-eat-buttons">
          <view class="can-eat-btn" @tap="handleCanEatAnswer(0)">能吃</view>
          <view class="can-eat-btn" @tap="handleCanEatAnswer(1)">少吃</view>
          <view class="can-eat-btn" @tap="handleCanEatAnswer(2)">慎吃</view>
          <view class="can-eat-btn" @tap="handleCanEatAnswer(3)">禁吃</view>
        </view>

        <!-- 已答题状态显示区域 -->
        <view v-else-if="canEatData.isAnswered || canEatData.myAnswer" class="can-eat-answer-section">
          <view class="answer-status">
            <view class="correct-answer"
              >正确答案：{{ ['能吃', '少吃', '慎吃', '禁吃'][canEatData.correct] }}</view
            >
          </view>
          <view class="analysis-link" @tap="viewAnalysis">{{ '查看问题解析 >' }}</view>
        </view>
      </view>
      <!--专家团-->
      <view class="et_box" id="expertTeam">
        <view class="et_maintitle">{{ expertTeam.maintitle }}</view>
        <view
          :data-log="{
            xcxClick: '首页-二屏页面点击',
            pageName: '首页-二屏',
            buttonName: '专家团副标题点击',
          }"
          class="et_subtitle"
        >
          <view class="txtlink" @tap="showPopup1(1, 1)">星妈会医生在线答疑群，为孩子成长保驾护航</view>
          <image
            id="et_joingroup"
            class="icon_more"
            @tap="showPopup1(1, 2)"
            :src="$baseUrl + 'homepage/et_more.png'"
          ></image>
        </view>
        <view class="et_main_box">
          <view class="et_con_bg">
            <view class="et_tab_box">
              <view class="tab_box" @tap="onSelEtTap(0)">
                <image
                  class="et_tab"
                  v-show="etTabSelIndex == 0"
                  :src="$baseUrl + 'homepage/et_sel_tab11.png'"
                >
                </image>
                <image class="et_tab" v-show="etTabSelIndex != 0" :src="$baseUrl + 'homepage/et_tab11.png'">
                </image>
              </view>
              <view class="tab_box" @tap="onSelEtTap(1)">
                <image
                  class="et_tab"
                  v-show="etTabSelIndex == 1"
                  :src="$baseUrl + 'homepage/et_sel_tab2.png'"
                >
                </image>
                <image class="et_tab" v-show="etTabSelIndex != 1" :src="$baseUrl + 'homepage/et_tab2.png'">
                </image>
              </view>
              <view class="tab_box" @tap="onSelEtTap(2)">
                <image
                  class="et_tab"
                  v-show="etTabSelIndex == 2"
                  :src="$baseUrl + 'homepage/et_sel_tab3.png'"
                >
                </image>
                <image class="et_tab" v-show="etTabSelIndex != 2" :src="$baseUrl + 'homepage/et_tab3.png'">
                </image>
              </view>
            </view>
            <view class="et_con_box" @tap="onETMore(1, etTabSelIndex)">
              <image class="et_con1" v-if="etTabSelIndex == 0" :src="$baseUrl + expertTeam.etConUrl1">
              </image>
              <image class="et_con2" v-if="etTabSelIndex == 1" :src="$baseUrl + expertTeam.etConUrl2">
              </image>
              <image class="et_con3" v-if="etTabSelIndex == 2" :src="$baseUrl + expertTeam.etConUrl3">
              </image>
            </view>
            <view id="et_more" class="et_more_txt" @tap="onETMore(2, etTabSelIndex)">
              <text class="txtlink">点击查看更多</text>
              <image class="icon_arrow_yellow" :src="$baseUrl + 'homepage/icon_arrow_yellow.png'"></image>
            </view>
          </view>
        </view>
      </view>
      <!--专家团-->

      <!-- <view class="cardScroller">
				<view class="cardbox">
					<view class="cardboxitem" v-for="cardData in vipCardList" :key="cardData.level">
						<image :data-log="{
							xcxClick: '首页-首屏页面点击',
							pageName: '首页-首屏',
							buttonName: `腰部banner-${cardData.level}`
						}" @tap="jumpLinkCard(cardData, $event)" class="bg" :src="$baseUrl + cardData.bgUrl"></image>
						<text class="level">{{ cardData.level }}</text>
						<text class="subTitle">{{ cardData.subTitle }}</text>
						<view class="showCornerTxt" v-if="cardData.showCornerTxt && cardData.showCornerTxt.length > 0">
							{{ cardData.showCornerTxt }}
						</view>
						<view v-if="cardData.btnTitle && cardData.btnTitle.length > 0" :data-log="{
							xcxClick: '首页-首屏页面点击',
							pageName: '首页-首屏',
							buttonName: `腰部banner-${cardData.level}`
						}" class="cardbtn" @tap="jumpLinkWithLogin(cardData.link, $event)">
							<image class="cardbtnbg" :src="$baseUrl + 'homepage/btn_receive.png'"></image>
							<text class="btnTitle" :style="cardData.btnTitle.length > 7 ? 'font-size:22rpx;' : ''">{{
								cardData.btnTitle }}</text>
							<text class="btnSubTitle">{{ cardData.btnSubTitle }}</text>
							<button v-if="homeStore && !homeStore.isLogin" open-type="getPhoneNumber"
								@getphonenumber="onGetPhoneNumber" class="phone-auth-btn-cover"></button>

						</view>
					</view>
				</view>
			</view> -->
      <!-- <view class="contentbox" id="secondScreen">
				<image class="contentbg" :src="$baseUrl + 'homepage/contentbg.png'" alt="" />
				<image class="contentitem" :key="index" :style="contentItem._style"
					v-for="(contentItem, index) in contentImgList" :src="$baseUrl + contentItem.bgUrl" :data-log="{
						xcxClick: '首页-二屏页面点击',
						pageName: '首页-二屏',
						buttonName: `品牌介绍${index + 1}`
					}" @tap="jumpLink(contentItem.link, contentItem.videoUrl, index, $event)"></image>
			</view> -->

      <view v-if="childrenInfoList.length > 0" id="childrenInfoList" class="channelbox">
        <text class="maintitle">{{ childrenInfoListMianTitle }}</text>
        <view class="subtitle_box">
          <text class="subtitle">从专业到实用，一站式解决你的育儿难题</text>
          <image
            id="childrenInfoListMore"
            class="icon_more"
            :src="$baseUrl + 'homepage/home_more_btn_v2.png'"
            :data-log="{
              xcxClick: '首页-三屏页面点击',
              pageName: '首页-三屏',
              buttonName: `次位内容资源位-查看更多文字`,
            }"
            :data-comlog="{
              xcxComponentClick: 'true',
              pageName: '首页',
              componentName: '育儿智库',
              componentContent: '育儿智库-more',
            }"
            @tap="jumpLink(suggest.link, false, false, $event)"
          ></image>
        </view>
        <view class="channelscroll">
          <view class="box">
            <view
              class="infobox"
              :key="index"
              :id="'childrenInfoList' + index"
              v-for="(infoItem, index) in childrenInfoList"
              :data-log="{
                xcxClick: '首页-三屏页面点击',
                pageName: '首页-三屏',
                buttonName: `次位内容资源位-轮播-${index + 1}`,
              }"
              :data-comlog="{
                xcxComponentClick: 'true',
                pageName: '首页',
                componentName: '育儿智库',
                componentContent: infoItem.desc,
              }"
              @tap="jumpLink(infoItem.link, false, false, $event)"
            >
              <image
                class="infoimg"
                :src="infoItem.bgUrl?.indexOf('http') === 0 ? infoItem.bgUrl : $baseUrl + infoItem.bgUrl"
              >
              </image>
              <view class="infotitlebox">
                <view class="infotitlecon">
                  <view class="infotitle">{{ infoItem.desc }}</view>
                  <image
                    v-if="infoItem.isNew"
                    class="infotitletag"
                    :src="$baseUrl + 'homepage/home_new_tag_v3.png'"
                    >New</image
                  >
                </view>
                <view class="infodesc">{{ infoItem.desc2 }}</view>
              </view>
            </view>
          </view>
        </view>
        <!-- <view :data-log="{
					xcxClick: '首页-三屏页面点击',
					pageName: '首页-三屏',
					buttonName: `次位内容资源位-查看更多文字`
				}" @tap="jumpLink(suggest.link, false, false, $event)" class="desc desc2">
					更多星妈会权威专家服务团 <view class="desc1"> 点击查看 > </view>
				</view> -->
      </view>
      <view class="channelbox" id="thirdScreen" v-if="false">
        <text class="maintitle">{{ channelTabListMianTitle }}</text>
        <view class="subtitle_box">
          <text class="subtitle">用声音传递爱与智慧，守护宝贝成长的每一步</text>
          <image
            class="icon_more"
            :src="$baseUrl + 'homepage/home_more_btn_v2.png'"
            :data-log="{
              xcxClick: '首页-三屏页面点击',
              pageName: '首页-三屏',
              buttonName: `首位内容资源位-查看更多文字`,
            }"
            @tap="jumpLink(voiceStory.link, false, false, $event)"
          ></image>
        </view>
        <view class="listbox">
          <view
            @tap="channelTabHandler(index, $event)"
            :data-log="{
              xcxClick: '首页-三屏页面点击',
              pageName: '首页-三屏',
              buttonName: `首页内容资源位分类${index + 1}-${item}`,
            }"
            :class="channelTabIndex === index ? 'tabitem tabActive' : 'tabitem'"
            v-for="(item, index) in channelTabList"
            :key="index"
          >
            {{ item }}
          </view>
        </view>
        <view class="channelscroll2">
          <view class="box2">
            <view
              class="infobox2"
              :key="index"
              v-for="(infoItem, index) in changelInfoList[channelTabIndex]"
              :data-log="{
                xcxClick: '首页-三屏页面点击',
                pageName: '首页-三屏',
                buttonName: `首页内容资源位分类${channelTabIndex + 1}-${channelTabList[channelTabIndex]}-${
                  index + 1
                }`,
              }"
              @tap="jumpLink(infoItem.link, false, false, $event)"
            >
              <image class="infoimg2" :src="$baseUrl + infoItem.bgUrl"></image>
              <view class="infotitle2box">
                <view class="infotitle2">
                  {{ infoItem.desc }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- <view :data-log="{
					xcxClick: '首页-三屏页面点击',
					pageName: '首页-三屏',
					buttonName: `首位内容资源位-查看更多文字`
				}" @tap="jumpLink(voiceStory.link, false, false, $event)" class="desc">
					滑动或者点击查看全部 <view class="desc1"> 有声故事 > </view>
				</view> -->
      </view>

      <view id="fourthScreen" class="bottomlink">
        <image class="bottombg" :src="$baseUrl + 'homepage/bottombg.png'"></image>
        <view class="box">
          <image
            class="icon"
            :id="'bottomLink' + index"
            v-for="(icon, index) in bottomLinkList"
            :key="index"
            :data-log="{
              xcxClick: '首页-四屏页面点击',
              pageName: '首页-四屏',
              buttonName: `${qrNameList[index]}`,
            }"
            :data-comlog="{
              xcxComponentClick: 'true',
              xcxComponentExposure: 'true',
              pageName: '首页',
              componentName: '跳转工具',
              componentContent: `${qrNameList[index]}`,
            }"
            :src="$baseUrl + icon.bgUrl"
            :style="icon._style"
            @tap="showPopup(index, $event)"
          ></image>
        </view>
      </view>
    </view>
    <!-- 测试按钮 -->
    <!-- <view class="test-buttons" style="position: fixed; bottom: 200rpx; left: 0; right: 0; display: flex; justify-content: space-around; z-index: 999;">
			<button @tap="showTestPopup(true)" style="background-color: #B27C1E; color: white; padding: 20rpx 40rpx; border-radius: 30rpx;">显示正确答案弹窗</button>
			<button @tap="showTestPopup(false)" style="background-color: #D3A358; color: white; padding: 20rpx 40rpx; border-radius: 30rpx;">显示错误答案弹窗</button>
		</view> -->
    <view>
      <!-- 普通弹窗 企微等二维码-->
      <uni-popup
        :is-mask-click="false"
        :safe-area="false"
        ref="popup"
        background-color="#fff"
        border-radius="48rpx"
      >
        <view v-if="qrObj !== null" class="popup-content">
          <image class="btnclose" @tap="closePop" :src="$baseUrl + 'homepage/btnclose.png'"></image>
          <view class="title">
            {{ qrObj.title || '' }}
          </view>
          <rich-text class="desc" :nodes="qrObj.desc || ''"></rich-text>
          <image :show-menu-by-longpress="true" class="qrcode" :src="$baseUrl + (qrObj.qrUrl || '')"></image>
          <image
            @tap="downloadHandler($baseUrl + (qrObj.qrUrl || ''))"
            class="btndownload"
            :src="$baseUrl + 'homepage/btn_download.png'"
          ></image>
        </view>
        <view v-else class="popup-content" style="height: 977rpx">
          <image class="xingmahui" :src="$baseUrl + 'homepage/xingmahui.png'"></image>
          <image class="btnclose" @tap="closePop" :src="$baseUrl + 'homepage/btnclose.png'"></image>
        </view>
      </uni-popup>
    </view>

    <!-- 新增图片弹窗 -->
    <uni-popup :is-mask-click="false" :safe-area="false" ref="imagePopup" background-color="transparent">
      <view class="image-popup-content">
        <image class="popup-image" :src="popupImageUrl" mode="aspectFit" @tap="imagePopupJump"></image>
        <image
          class="popup-close-btn"
          @tap="closeImagePopup"
          :src="$baseUrl + 'homepage/btnclose.png'"
        ></image>
      </view>
    </uni-popup>

    <view v-if="showVideo" class="video-popup">
      <video
        :src="currentVideoUrl"
        controls
        autoplay
        :style="{ width: '100vw', height: videoHeight }"
      ></video>
      <view class="close-btn-bottom" @tap="closeVideo">×</view>
    </view>
    <RegisterLayer v-model="showRegisterLayer" />
    <!-- 答案解析弹窗 -->
    <CanEatAnswerPopup
      :visible="showAnswerPopup"
      :isCorrect="isAnswerCorrect"
      :rewardInfo="rewardInfo"
      :question="currentQuestion"
      :correctAnswer="correctAnswer"
      :analysis="answerAnalysis"
      :allResult="canEatData?.analysis?.allResult"
      @close="showAnswerPopup = false"
    />

    <!-- 金币动画模块 -->
    <view class="gold-coin-animation" v-if="showGoldCoinAnimation" @tap="hideGoldCoinAnimation">
      <!-- 背景底 -->
      <view class="gold-coin-background"></view>
      <view class="gold-coin-content" @tap.stop>
        <view class="gold-coin-title">{{ goldCoinConfig.title }}</view>
        <view class="gold-coin-description">{{ goldCoinConfig.description }}</view>
        <view class="gold-coin-container">
          <image
            class="gold-coin gold-coin-1"
            :src="goldCoinConfig.imageUrl || $baseUrl + 'homepage/Q3Res/goldCoin.png'"
          ></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { jump, JumpType } from '../utils';
import { useHomeStore } from '../stores/home';
import { fetchHomeJSON, fetchCanEatIndex, fetchCanEatJoin } from '../api/home';
import { useUserStore } from '../stores/user';
import RegisterLayer from '../components/RegisterLayer.vue';
import CanEatAnswerPopup from '../components/CanEatAnswerPopup.vue';
import md from '../md';
import ExposureTracker from '../utils/exposure';
import { getHealthField } from '@/api/common';
import { useGlobalStore } from '@/stores/global.js';

const globalStore = useGlobalStore();
// const homeStore = useHomeStore();
const userStore = useUserStore();

// 定义需要曝光检测的元素配置
const EXPOSURE_CONFIGS = [
  {
    id: 'firstScreen',
    logParams: {
      xcxPage: '首页-首屏页面浏览',
      pageName: '首页-首屏',
    },
  },
  // 可以添加更多需要曝光检测的元素配置
  {
    id: 'secondScreen',
    logParams: {
      xcxPage: '首页-二屏页面浏览',
      pageName: '首页-二屏',
    },
  },
  {
    id: 'thirdScreen',
    logParams: {
      xcxPage: '首页-三屏页面浏览',
      pageName: '首页-三屏',
    },
  },
  {
    id: 'fourthScreen',
    logParams: {
      xcxPage: '首页-四屏页面浏览',
      pageName: '首页-四屏',
    },
  },
];

export default {
  beforeDestroy() {
    if (this.exposureTracker) {
      this.exposureTracker.resetAllExposure();
    }
  },
  deactivated() {
    if (this.exposureTracker) {
      this.exposureTracker.resetAllExposure();
    }
  },
  data() {
    return {
      popType: 'bottom',
      // 悬浮图片位置配置
      floatIconPosition: {
        left: 300, // 初始左位置
        top: 500, // 初始上位置
      },
      // 答案弹窗相关数据
      showAnswerPopup: false,
      isAnswerCorrect: false,
      rewardInfo: '10',
      currentQuestion: '',
      correctAnswer: '',
      answerAnalysis: '',

      // 悬浮图片相关配置
      floatIcon: {
        // imageUrl: 'homepage/btnclose.png',
        // link: {
        // 	extra: {
        // 		envVersion: 'release',
        // 		appId: 'wx4205ec55b793245e'
        // 	},
        // 	type: 2,
        // 	url: 'subPackages/xmhMainProcess/member/index?entrySource=xmh_wechatmp_points_recgoodsbot'
        // },
        // videoUrl: 'homepage/video3.mp4'
      },
      isDragging: false, // 是否正在拖拽
      touchStartX: 0, // 触摸开始X坐标
      touchStartY: 0, // 触摸开始Y坐标
      statusBarHeight: 38,
      showRegisterLayer: false,
      swiperList: [],
      indicatorDots: true,
      autoplay: true,
      interval: 4000,
      duration: 500,
      indicatoractiveColor: '#a6a0a1',
      indicatorColor: 'rgba(255, 255, 255, 1)',
      toolList: {},
      expertTeam: {},
      vipCardList: [],
      contentImgList: [],
      channelTabList: [],
      channelTabIndex: 0,
      changelInfoList: [],
      childrenInfoList: [],
      bottomLinkList: [],
      qrInfoObj: undefined,
      popupIndex: 0,
      qrInfoList: [
        {
          title: '',
          desc: '',
          qrUrl: '',
        },
        {
          title: '',
          desc: '',
          qrUrl: '',
        },
        {
          title: '',
          desc: '',
          qrUrl: '',
        },
        {
          title: '',
          desc: '',
          qrUrl: '',
        },
      ],
      qrObj: {
        title: '',
        desc: '',
        qrUrl: '',
      },
      showVideo: false,
      currentVideoUrl: '',
      isClickPhoneAuth: false,
      voiceStory: {},
      suggest: {},
      videoHeight: '56vw',
      qrNameList: ['公众号', '企业微信', '视频号', '小红书'],
      windowHeight: 0,
      isFirstScreenExposed: false,
      scrollTimer: null,
      exposureTracker: null,
      currentIndex: 0,
      etTabSelIndex: 0,
      bannerCurrentIndex: 0,
      childrenInfoListMianTitle: '',
      channelTabListMianTitle: '',
      popupImageUrl: '',
      popupImageObj: {},
      // 新增变量用于跟踪弹窗状态
      isNormalPopupVisible: false,
      isImagePopupVisible: false,
      // 能不能吃模块数据
      canEatData: null,
      // 金币动画相关数据
      showGoldCoinAnimation: false,
      goldCoinConfig: {
        title: '',
        description: '',
        imageUrl: '', // 奖品图片URL
      },
    };
  },
  components: {
    RegisterLayer,
    CanEatAnswerPopup,
  },
  computed: {
    homeStore() {
      return useHomeStore();
    },
    // 检查是否有任何弹窗可见
    isAnyPopupVisible() {
      // 视频弹窗是否显示
      if (this.showVideo) return true;
      // 注册弹窗是否显示
      if (this.showRegisterLayer) return true;
      // 普通弹窗是否显示
      if (this.isNormalPopupVisible) return true;
      // 图片弹窗是否显示
      if (this.isImagePopupVisible) return true;
      // 答案弹窗是否显示
      if (this.showAnswerPopup) return true;
      // 金币动画是否显示
      if (this.showGoldCoinAnimation) return true;
      return false;
    },
  },
  props: {
    scrollTop: {
      type: Number,
      default: 0,
    },
  },
  watch: {
    homeStore: {
      handler(newVal) {
        this.showRegisterLayer = this.isClickPhoneAuth && newVal.isLogin && !newVal.babyExistence;
        if (newVal.homeInfo !== null) {
          this.initHomeInfo();
          this.checkAndShowPopup();
        }
      },
      deep: true,
      immediate: true,
    },
    scrollTop: {
      handler(newVal) {
        this.checkExposure(newVal);
      },
    },
  },
  mounted() {
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
    this.statusBarHeight = menuButtonInfo.top;
    this.isClickPhoneAuth = false;

    // 获取窗口高度
    const systemInfo = uni.getSystemInfoSync();
    this.windowHeight = systemInfo.windowHeight;

    // 初始化曝光检测工具
    this.exposureTracker = new ExposureTracker(this);
    this.exposureTracker.addExposureElements(EXPOSURE_CONFIGS);

    // 初始检查曝光
    this.$nextTick(() => {
      this.checkExposure(this.scrollTop);
    });
  },
  unmounted() {
    // 组件销毁时清理弹窗状态（可选，根据业务需求决定是否保留状态）
    // 如果需要重置弹窗状态，可以在这里调用 this.resetPopupState()
  },
  methods: {
    // 显示测试弹窗方法
    showTestPopup(isCorrect) {
      this.isAnswerCorrect = isCorrect;
      this.showAnswerPopup = true;
    },

    testSource() {
      uni.navigateTo({
        url: '/pages/syWebview/syWebview?p=xmh',
      });
    },
    async initHomeInfo() {
      const { data } = await fetchHomeJSON(globalStore.getPreviewScene('home'));
      console.warn('data', data);
      if (data) {
        this.swiperList = data.swiperList || [
          {
            link: {},
            title: '默认图',
            url: this.$baseUrl + 'homepage/homeSwiperDefaultBg.png',
          },
        ];
        this.vipConfigList = data.vipConfigList;
        // this.vipCardList = data.vipCardList;
        this.contentImgList = data.contentImgList;
        this.channelTabList = data.channelTabList;
        this.changelInfoList = data.changelInfoList;
        this.childrenInfoList = data.childrenInfoList || [];
        this.bottomLinkList = data.bottomLinkList;
        this.qrInfoList = data.qrInfoList || [];
        this.toolList = data.toolList || [];
        this.expertTeam = data.expertTeam;
        this.vipCardList = data.vipCardList;
        this.voiceStory = data.voiceStory;
        this.suggest = data.suggest;
        this.childrenInfoListMianTitle = data.childrenInfoListMianTitle;
        this.channelTabListMianTitle = data.channelTabListMianTitle;
        this.popupImageUrl = data.popupImageObj?.imageUrl?.startsWith('http')
          ? data.popupImageObj?.imageUrl
          : this.$baseUrl + data.popupImageObj?.imageUrl || '';
        this.popupImageObj = data.popupImageObj || {};
        this.floatIcon = data.floatIcon || {};

        if (this.homeStore.isLogin) {
          this.vipCardList[0] = data.vipConfigList.find(
            (item) => item.grade === this.homeStore.homeInfo?.grade
          );
          this.vipCardList[0].level = this.homeStore.homeInfo?.gradeName;
        } else {
          this.vipCardList[0] = data.vipConfigList[0];
        }

        // 获取能不能吃数据
        await this.fetchCanEatData();

        //拿到数据之后，初始化曝光一些节点
        this.initExposure();
      }
    },
    initExposure() {
      if (this.canEatData && this.canEatData.id) {
        if (this.canEatData.isAnswered || this.canEatData.myAnswer) {
          md.sensorComponentLogTake({
            xcxComponentExposure: 'true',
            pageName: '首页',
            componentName: '能不能吃',
            componentContent: '查看问题解析',
          });
        }
        if (!this.canEatData.isAnswered && !this.canEatData.myAnswer) {
          md.sensorComponentLogTake({
            xcxComponentExposure: 'true',
            pageName: '首页',
            componentName: '能不能吃',
            componentContent: '能吃',
          });
          md.sensorComponentLogTake({
            xcxComponentExposure: 'true',
            pageName: '首页',
            componentName: '能不能吃',
            componentContent: '少吃',
          });
          md.sensorComponentLogTake({
            xcxComponentExposure: 'true',
            pageName: '首页',
            componentName: '能不能吃',
            componentContent: '慎吃',
          });
          md.sensorComponentLogTake({
            xcxComponentExposure: 'true',
            pageName: '首页',
            componentName: '能不能吃',
            componentContent: '禁吃',
          });
        }
      }

      if (this.floatIcon?.imageUrl) {
        md.sensorComponentLogTake({
          xcxComponentExposure: 'true',
          pageName: '首页',
          componentName: '悬浮窗',
          componentContent: '悬浮窗',
        });
      }

      const componentContent = this.toolList.tools?.[this.currentIndex]?.title || '';
      md.sensorComponentLogTake({
        xcxComponentExposure: 'true',
        pageName: '首页',
        componentName: '工具推荐',
        componentContent: componentContent,
      });
      md.sensorComponentLogTake({
        xcxComponentExposure: 'true',
        pageName: '首页',
        componentName: '首页banner',
        componentContent: this.swiperList[0]?.title || '',
      });

      const childrenInfoList = this.childrenInfoList;
      childrenInfoList.forEach((item, index) => {
        this.exposureTracker.addExposureElement({
          id: 'childrenInfoList' + index,
          logParams: {
            xcxComponentExposure: 'true',
            pageName: '首页',
            componentName: '育儿智库',
            componentContent: item.desc,
          },
        });
      });
      this.qrNameList.forEach((item, index) => {
        this.exposureTracker.addExposureElement({
          id: 'bottomLink' + index,
          logParams: {
            xcxComponentExposure: 'true',
            pageName: '首页',
            componentName: '跳转工具',
            componentContent: `${item}`,
          },
        });
      });

      //动态添加专家团的首屏数据
      this.exposureTracker.addExposureElements([
        {
          id: 'expertTeam',
          logParams: {
            xcxComponentExposure: 'true',
            pageName: '首页',
            componentName: '专家团',
            componentContent: '专家团tab切换-名医专家',
          },
        },
        {
          id: 'et_joingroup',
          logParams: {
            xcxComponentExposure: 'true',
            pageName: '首页',
            componentName: '专家团',
            componentContent: '专家团-进群咨询',
          },
        },
        {
          id: 'et_more',
          logParams: {
            xcxComponentExposure: 'true',
            pageName: '首页',
            componentName: '专家团',
            componentContent: '专家团-查看更多',
          },
        },
        {
          id: 'childrenInfoList',
          logParams: {
            xcxComponentExposure: 'true',
            pageName: '首页',
            componentName: '育儿智库',
            componentContent: '育儿智库',
          },
        },
        {
          id: 'childrenInfoListMore',
          logParams: {
            xcxComponentExposure: 'true',
            pageName: '首页',
            componentName: '育儿智库',
            componentContent: '育儿智库-more',
          },
        },
      ]);
    },
    changeIndicatorDots(e) {
      this.indicatorDots = !this.indicatorDots;
    },
    changeAutoplay(e) {
      this.autoplay = !this.autoplay;
    },
    intervalChange(e) {
      this.interval = e.target.value;
    },
    durationChange(e) {
      this.duration = e.target.value;
    },
    jumpBannerHandler(item, index) {
      console.log('item====', item);
      md.sensorLogTake({
        xcxClick: '首页-首屏页面点击',
        pageName: '首页-首屏',
        buttonName: `第${index + 1}张焦点图-入口`,
      });
      md.sensorComponentLogTake({
        xcxComponentClick: 'true',
        pageName: '首页',
        componentName: '首页banner',
        componentContent: item.title,
      });
      if (item.videoUrl) {
        this.currentVideoUrl =
          item.videoUrl.indexOf('http') === -1 ? this.$baseUrl + item.videoUrl : item.videoUrl;
        this.showVideo = true;
        return;
      }
      if (item.link) {
        // 有 link，执行跳转
        jump(item.link);
      } else {
        // 没有 link，预览图片
        uni.previewImage({
          urls: [item.url.indexOf('http') === -1 ? this.$baseUrl + item.url : item.url], // 预览当前图片
          current: item.url.indexOf('http') === -1 ? this.$baseUrl + item.url : item.url, // 当前显示的图片
        });
      }
    },
    previewImage(url) {
      uni.previewImage({
        urls: [url], // 预览当前图片
        current: url, // 当前显示的图片
      });
    },
    jumpLinkWithLogin(link, evt) {
      if (evt) {
        md.sensorLog(evt);
      }
      if (this.homeStore.isLogin) {
        jump(link);
      }
    },
    jumpLinkCard(item, evt) {
      if (evt) {
        md.sensorLog(evt);
      }
      if (item.btnSubTitle.length > 0 && item.btnTitle.length > 0) {
        return; //如果有按钮的话，废弃这个点击事件
      }
      if (item.link) {
        jump(item.link);
      }
    },
    jumpLink(link, videoUrl, index, evt) {
      if (evt) {
        md.sensorLog(evt);
        if (evt.currentTarget.dataset.comlog) {
          md.sensorComponentLog(evt);
        }
      }
      if (videoUrl) {
        if (videoUrl.indexOf('http') === -1) {
          videoUrl = this.$baseUrl + videoUrl;
        }
        // 弹出视频
        this.currentVideoUrl = videoUrl;
        if (index === 1) {
          this.videoHeight = '100vw';
        } else {
          this.videoHeight = '56vw';
        }
        this.showVideo = true;
        return;
        // 视频弹窗出现后，video标签的autoplay会自动播放
      } else if (link) {
        if (!link || link === '') {
          return;
        }
        // 其他跳转逻辑
        jump(link);
      }
    },
    channelTabHandler(_index, evt) {
      if (evt) {
        md.sensorLog(evt);
      }
      this.channelTabIndex = _index;
    },
    showPopup(_index, evt) {
      if (evt) {
        md.sensorLog(evt);
        if (evt.currentTarget.dataset.comlog) {
          md.sensorComponentLog(evt);
        }
      }
      md.sensorLogTake({
        xcxPage: `${this.qrNameList[_index]}拉起半屏二维码入口页面浏览`,
        pageName: `${this.qrNameList[_index]}拉起半屏二维码入口`,
      });

      if (_index === 3) {
        this.qrObj = null;
      } else {
        _index = Math.max(0, Math.min(_index, this.qrInfoList.length - 1));
        this.qrObj = this.qrInfoList[_index];
      }
      this.popupIndex = _index;
      this.$refs.popup.open(this.popType);
      // 设置普通弹窗为可见状态
      this.isNormalPopupVisible = true;
    },
    showPopup1(_index, type) {
      md.sensorLogTake({
        xcxClick: `首页-二屏页面点击`,
        pageName: `首页-二屏`,
        buttonName: type == 1 ? '专家团副标题点击' : '专家团进群咨询按钮点击',
      });
      if (type == 2) {
        md.sensorComponentLogTake({
          xcxComponentClick: 'true',
          pageName: '首页',
          componentName: '专家团',
          componentContent: '专家团-进群咨询',
        });
      }
      if (_index === 3) {
        this.qrObj = null;
      } else {
        _index = Math.max(0, Math.min(_index, this.qrInfoList.length - 1));
        this.qrObj = this.qrInfoList[_index];
      }
      this.popupIndex = _index;
      this.$refs.popup.open(this.popType);
      // 设置普通弹窗为可见状态
      this.isNormalPopupVisible = true;
    },
    closePop() {
      this.$refs.popup.close();
      // 设置普通弹窗为不可见状态
      this.isNormalPopupVisible = false;
    },
    goSearchHandler(e) {
      md.sensorLog(e);
      uni.navigateTo({
        url: '/pages/search/search',
      });
    },
    downloadHandler(imgurl) {
      md.sensorLogTake({
        xcxClick: `${this.qrNameList[this.popupIndex]}拉起半屏二维码入口页面点击`,
        pageName: `${this.qrNameList[this.popupIndex]}拉起半屏二维码入口页面点击`,
        buttonName: `下载二维码`,
      });

      uni.downloadFile({
        url: imgurl,
        success: (downloadRes) => {
          if (downloadRes.statusCode === 200) {
            uni.saveImageToPhotosAlbum({
              filePath: downloadRes.tempFilePath,
              success: (res) => {
                uni.showToast({
                  title: '保存成功',
                  icon: 'success',
                });
              },
              fail: (err) => {
                uni.showToast({
                  title: '保存失败',
                  icon: 'none',
                });
              },
            });
          } else {
            uni.showToast({
              title: '下载失败',
              icon: 'none',
            });
          }
        },
        fail: (err) => {
          uni.showToast({
            title: '下载失败',
            icon: 'none',
          });
        },
      });
    },
    closeVideo() {
      this.showVideo = false;
      this.currentVideoUrl = '';
    },
    onGetPhoneNumber(e) {
      if (e.detail.errMsg !== 'getPhoneNumber:ok') {
        uni.showToast({
          title: '请授权使用手机号',
          icon: 'none',
        });
        return;
      }
      console.log('detail', e.detail);
      this.isClickPhoneAuth = true;
      userStore.phoneCallback(e.detail);
    },
    goCustomerHandler(e) {
      md.sensorLog(e);
      const { memberId, mobile, openId, unionId } = this.homeStore.homeInfo;
      const customerUrl = `https://intelcc-user.icsoc.net/?channelKey=45839e0505554f8c8aea3c7b6259b049&init=1&crmld=${memberId}&mobile=${mobile}&openId=${openId}&unionId=${unionId}`;
      jump({
        type: JumpType.H5,
        url: customerUrl,
      });
    },
    checkExposure(scrollTop) {
      if (this.exposureTracker) {
        this.exposureTracker.checkExposure(scrollTop);
      }
    },
    resetExposure() {
      if (this.exposureTracker) {
        this.exposureTracker.resetAllExposure();
      }
    },

    // 获取能不能吃数据
    async fetchCanEatData() {
      try {
        const response = await fetchCanEatIndex();
        if (response.success && response.data) {
          this.canEatData = response.data;
        } else {
          console.warn('获取能不能吃数据失败:', response.message);
          this.canEatData = null;
        }
      } catch (error) {
        console.error('获取能不能吃数据异常:', error);
        this.canEatData = null;
      }
    },

    // 处理能不能吃答题
    async handleCanEatAnswer(answerIndex) {
      // 添加埋点
      const answerTexts = ['能吃', '少吃', '慎吃', '禁吃'];
      md.sensorComponentLogTake({
        xcxComponentClick: 'true',
        pageName: '首页',
        componentName: '能不能吃',
        componentContent: answerTexts[answerIndex] || '能吃',
      });

      // 添加登录检查
      if (!this.homeStore.isLogin) {
        jump({
          type: JumpType.INNER,
          url: '/pages/activity/register',
        });
        return;
      }

      if (!this.canEatData || !this.canEatData.id) {
        uni.showToast({
          title: '数据异常，请稍后重试',
          icon: 'none',
        });
        return;
      }

      try {
        const response = await fetchCanEatJoin({
          id: this.canEatData.id,
          answer: answerIndex,
        });

        if (response.success && response.data) {
          // 保存用户答案和正确答案
          const userAnswer = { 0: '能吃', 1: '少吃', 2: '慎吃', 3: '禁吃' }[answerIndex];
          // 从原始数据中获取正确答案（correct字段是字符串格式：'0', '1', '2', '3'）
          const correctAnswerIndex = parseInt(this.canEatData.correct);
          const correctAnswer = { 0: '能吃', 1: '少吃', 2: '慎吃', 3: '禁吃' }[correctAnswerIndex];
          const isCorrect = answerIndex === correctAnswerIndex;

          // 更新数据
          this.canEatData = {
            ...this.canEatData,
            isAnswered: true,
            myAnswer: userAnswer,
            correctAnswer: correctAnswer,
            correct: correctAnswerIndex, // 保存数字格式的正确答案
            isCorrect: isCorrect,
          };

          // 如果答对了并且有奖励，显示奖励弹窗
          if (
            isCorrect &&
            response.data.reward &&
            (response.data.reward.credits > 0 || response.data.reward.prizeName)
          ) {
            this.showRewardPopup(response.data.reward);
          } else {
            // 其他情况显示解析弹窗
            this.showAnswerResult(
              {
                analysis: this.canEatData.analysis?.content || '暂无解析内容',
                allResult: this.canEatData.analysis?.allResult || '25|25|25|25',
                reward: response.data.reward || null,
              },
              isCorrect,
              userAnswer,
              correctAnswer
            );
          }

          // 答题后刷新数据
          await this.fetchCanEatData();
        } else {
          uni.showToast({
            title: response.message || '答题失败，请稍后重试',
            icon: 'none',
          });
        }
      } catch (error) {
        console.error('提交能不能吃答案异常:', error);
        uni.showToast({
          title: '网络异常，请稍后重试',
          icon: 'none',
        });
      }
    },

    // 显示奖励弹窗
    showRewardPopup(rewardData) {
      // 设置奖励信息
      let rewardText = rewardData.prizeName;

      // 根据奖品类型设置图片
      let imageUrl = '';
      if (rewardData.prizeImage) {
        // 如果有奖品图片，使用奖品图片
        imageUrl =
          rewardData.prizeImage.indexOf('http') === 0
            ? rewardData.prizeImage
            : this.$baseUrl + rewardData.prizeImage;
      } else if (rewardData.credits && !rewardData.prizeName) {
        // 如果只有积分奖励，使用金币图片
        imageUrl = this.$baseUrl + 'homepage/Q3Res/goldCoin.png';
      } else if (rewardData.prizeName) {
        // 如果有奖品名称，根据奖品类型选择图片
        imageUrl = this.getPrizeImageByType(rewardData.prizeName, rewardData.prizeType);
      } else {
        // 默认使用金币图片
        imageUrl = this.$baseUrl + 'homepage/Q3Res/goldCoin.png';
      }

      // 更新金币动画配置
      this.goldCoinConfig = {
        title: '恭喜你回答正确',
        description: `获得${rewardText}`,
        imageUrl: imageUrl,
      };

      // 显示金币动画
      this.showGoldCoinAnimation = true;

      // 添加金币动画模块曝光埋点
      this.$nextTick(() => {
        md.sensorPopLogTake({
          xcxPopExposure: 'true',
          toolName: '能不能吃',
          popName: '答题结果弹窗',
        });
      });

      // 保存当前的canEatData状态，防止被fetchCanEatData覆盖
      const currentCanEatData = { ...this.canEatData };

      // 3秒后自动隐藏
      setTimeout(() => {
        this.showGoldCoinAnimation = false;
        // 动效结束展示解析弹窗
        this.showAnswerResult(
          {
            analysis: currentCanEatData.analysis?.content || '暂无解析内容',
            allResult: currentCanEatData.analysis?.allResult || '25|25|25|25',
            reward: rewardData || null,
          },
          true,
          currentCanEatData.myAnswer,
          currentCanEatData.correctAnswer
        );
      }, 3000);
    },

    // 根据奖品类型获取对应图片
    getPrizeImageByType(prizeName, prizeType) {
      // 根据奖品名称或类型返回对应的图片
      const prizeImages = {
        // 积分类奖品
        积分: this.$baseUrl + 'homepage/Q3Res/goldCoin.png',
        碳能量: this.$baseUrl + 'homepage/Q3Res/goldCoin.png',

        // 优惠券类奖品
        优惠券: this.$baseUrl + 'homepage/Q3Res/coupon.png',
        代金券: this.$baseUrl + 'homepage/Q3Res/coupon.png',
        折扣券: this.$baseUrl + 'homepage/Q3Res/coupon.png',

        // 实物奖品
        奶粉: this.$baseUrl + 'homepage/Q3Res/milkPowder.png',
        辅食: this.$baseUrl + 'homepage/Q3Res/babyFood.png',
        玩具: this.$baseUrl + 'homepage/Q3Res/toy.png',
        用品: this.$baseUrl + 'homepage/Q3Res/babyProduct.png',

        // 虚拟奖品
        会员: this.$baseUrl + 'homepage/Q3Res/vip.png',
        体验: this.$baseUrl + 'homepage/Q3Res/experience.png',

        // 默认奖品图片
        default: this.$baseUrl + 'homepage/Q3Res/gift.png',
      };

      // 根据奖品类型匹配
      if (prizeType) {
        const typeImages = {
          CREDITS: this.$baseUrl + 'homepage/Q3Res/goldCoin.png',
          COUPON: this.$baseUrl + 'homepage/Q3Res/coupon.png',
          PHYSICAL: this.$baseUrl + 'homepage/Q3Res/gift.png',
          VIRTUAL: this.$baseUrl + 'homepage/Q3Res/vip.png',
        };
        if (typeImages[prizeType]) {
          return typeImages[prizeType];
        }
      }

      // 根据奖品名称匹配
      for (const [key, imageUrl] of Object.entries(prizeImages)) {
        if (prizeName.includes(key)) {
          return imageUrl;
        }
      }

      // 返回默认图片
      return prizeImages['default'];
    },

    // 隐藏金币动画
    hideGoldCoinAnimation() {
      this.showGoldCoinAnimation = false;
    },

    // 显示答题结果弹窗
    showAnswerResult(responseData, isCorrect, userAnswer, correctAnswer) {
      // 设置弹窗数据
      this.isAnswerCorrect = isCorrect;
      this.currentQuestion = this.canEatData.title || '';
      // 确保正确答案是文案而不是索引
      this.correctAnswer =
        typeof correctAnswer === 'number' ? ['能吃', '少吃', '慎吃', '禁吃'][correctAnswer] : correctAnswer;

      // 设置奖励信息
      if (responseData.reward) {
        let rewardText = '';
        // if (responseData.reward.credits) {
        // 	// 处理字符串格式的积分
        // 	const credits = parseInt(responseData.reward.credits) || 0;
        // 	if (credits > 0) {
        // 		rewardText += `${credits}`;
        // 	}
        // }
        if (responseData.reward.prizeName) {
          if (rewardText) {
            rewardText += `${responseData.reward.prizeName}`;
          } else {
            rewardText = responseData.reward.prizeName;
          }
        }
        this.rewardInfo = rewardText || '';
      } else {
        this.rewardInfo = '';
      }

      // 设置解析内容
      this.answerAnalysis = responseData.analysis || '暂无解析内容';

      // 显示弹窗
      this.showAnswerPopup = true;
    },

    // 查看问题解析
    viewAnalysis() {
      // 添加埋点
      md.sensorComponentLogTake({
        xcxComponentClick: 'true',
        pageName: '首页',
        componentName: '能不能吃',
        componentContent: '查看问题解析',
      });

      console.warn('查看解析数据:', this.canEatData);
      if (this.canEatData && this.canEatData.myAnswer && this.canEatData.correct !== undefined) {
        // 将正确答案从数字格式转换为文案格式
        const correctAnswerText =
          { 0: '能吃', 1: '少吃', 2: '慎吃', 3: '禁吃' }[this.canEatData.correct] || '能吃';

        // 通过比较用户答案和正确答案判断答题正确性
        const isCorrect = this.canEatData.correct == this.canEatData.myAnswer;

        // 显示解析弹窗
        this.showAnswerResult(
          {
            analysis: this.canEatData.analysis?.content || '暂无解析内容',
            allResult: this.canEatData.analysis?.allResult || '',
            reward: this.canEatData.reward || null,
          },
          isCorrect,
          this.canEatData.myAnswer,
          correctAnswerText
        );
      } else {
        uni.showToast({
          title: '暂无解析内容',
          icon: 'none',
        });
      }
    },

    onSwiperChange(e) {
      this.currentIndex = e.detail.current;
      const componentContent = this.toolList.tools?.[this.currentIndex]?.title || '';
      md.sensorComponentLogTake({
        xcxComponentExposure: 'true',
        pageName: '首页',
        componentName: '工具推荐',
        componentContent: componentContent,
      });
    },

    onBannerSwiperChange(e) {
      this.bannerCurrentIndex = e.detail.current;
      md.sensorComponentLogTake({
        xcxComponentExposure: 'true',
        pageName: '首页',
        componentName: '首页banner',
        componentContent: this.swiperList[e.detail.current].title,
      });
    },

    async handleToolClick(item) {
      md.sensorLogTake({
        xcxClick: '首页-二屏页面点击',
        pageName: '首页-二屏',
        buttonName: item.title + '工具点击',
      });
      md.sensorComponentLogTake({
        xcxComponentClick: 'true',
        pageName: '首页',
        componentName: '工具推荐',
        componentContent: item.title,
      });

      if (item.title === '医生问诊') {
        // if (!cfgStatus.value.isRegister) return;
        const res = await getHealthField();

        if (!res.success) {
          uni.showToast({
            title: '获取健康字段失败',
            icon: 'none',
          });
          return;
        }

        const { sign, timestamp, appId, partnerUserId, env } = res.data;

        jump({
          type: JumpType.MINI,
          url: '/pages/partner/redirect',
          extra: {
            appId: 'wx81ecfb5aa3fb512f',
            envVersion: env,
            extraData: {
              sign, // 参考 4.请求参数
              timestamp, // 参考 4.请求参数
              appId, // 参考 4.请求参数
              partnerUserId, // 参考 4.请求参数
              targetApp: '/h5/partner/shining-like-a-start/landing-free-consult?sysType=CRF',
            },
          },
        });
      } else {
        jump({
          type: item.link.type,
          url: item.link.url,
          extra: item.link.extra,
        });
      }
    },

    onSelEtTap(index) {
      let str = index === 0 ? '名医专家' : index === 1 ? '科研专家' : '权威机构';
      md.sensorLogTake({
        xcxClick: '首页-二屏页面点击',
        pageName: '首页-二屏',
        buttonName: str + 'tab按钮点击',
      });
      md.sensorComponentLogTake({
        xcxComponentClick: 'true',
        xcxComponentExposure: 'true',
        pageName: '首页',
        componentName: '专家团',
        componentContent: '专家团tab切换-' + str,
      });

      this.etTabSelIndex = index;
    },
    onETMore(index, type) {
      let str = '';
      if (type === 0) {
        str = '名医专家';
      } else if (type === 1) {
        str = '科研专家';
      } else {
        str = '权威机构';
      }
      if (index === 1) {
        str += '内容';
      } else {
        str += '点击查看更多';
      }
      md.sensorLogTake({
        xcxClick: '首页-二屏页面点击',
        pageName: '首页-二屏',
        buttonName: str + '-点击',
      });
      md.sensorComponentLogTake({
        xcxComponentClick: 'true',
        pageName: '首页',
        componentName: '专家团',
        componentContent: str,
      });
      jump({
        type: 1,
        url: '/pages/expertTeamPage/expertTeamPage?tab=' + (this.etTabSelIndex + 1),
      });
    },
    closeImagePopup() {
      this.$refs.imagePopup.close();
      // 设置图片弹窗为不可见状态
      this.isImagePopupVisible = false;
    },

    imagePopupJump() {
      md.sensorPopLogTake({
        xcxPopClick: 'true',
        toolName: '首页',
        popName: this.popupImageObj.title || '北纬47°鲜活溯源之旅',
        buttonName: this.popupImageObj.btnName || '立即寻宝',
      });
      jump({
        type: this.popupImageObj.jumpType || this.popupImageObj.jumpExtra?.type,
        url: this.popupImageObj.jumpUrl,
        extra: this.popupImageObj.jumpExtra,
      });
    },
    showImagePopup() {
      md.sensorPopLogTake({
        xcxPopExposure: 'true',
        toolName: '首页',
        popName: this.popupImageObj.title || '北纬47°鲜活溯源之旅',
      });
      this.$refs.imagePopup.open('center');
      // 设置图片弹窗为可见状态
      this.isImagePopupVisible = true;
    },
    closePop1() {
      this.$refs.imagePopup.close();
      // 设置图片弹窗为不可见状态
      this.isImagePopupVisible = false;
    },

    // 重置弹窗状态（可在需要时调用）
    resetPopupState() {
      this.homeStore.resetPopupState(); // 重置 store 中的弹窗状态
    },

    // 检查并显示弹窗（使用 store 全局状态管理）
    checkAndShowPopup() {
      // 使用 store 中的 hasShownPopup 来记录是否已经显示过弹窗
      if (!this.homeStore.hasShownPopup && this.homeStore.homeInfo?.showPop1) {
        this.homeStore.markPopupAsShown(); // 标记已显示过弹窗（全局状态）
        this.$nextTick(() => {
          setTimeout(() => {
            this.showImagePopup();
          }, 500);
        });
      }
    },

    // 悬浮图片拖拽相关方法
    onTouchStart(e) {
      this.isDragging = false;
      this.touchStartX = e.touches[0].clientX;
      this.touchStartY = e.touches[0].clientY;
    },

    onTouchMove(e) {
      // 防止触发页面滚动
      e.stopPropagation();

      // 判断是否为拖拽操作
      const deltaX = Math.abs(e.touches[0].clientX - this.touchStartX);
      const deltaY = Math.abs(e.touches[0].clientY - this.touchStartY);

      // 如果移动距离超过10px，则认为是拖拽
      if (deltaX > 10 || deltaY > 10) {
        this.isDragging = true;

        // 获取窗口尺寸
        const windowWidth = wx.getSystemInfoSync().windowWidth;
        const windowHeight = wx.getSystemInfoSync().windowHeight;

        // 计算新位置（限制在窗口范围内）
        let newLeft = e.touches[0].clientX - 37.5; // 37.5是75的一半
        let newTop = e.touches[0].clientY - 37.5;

        // 限制在窗口范围内
        newLeft = Math.max(0, Math.min(newLeft, windowWidth - 75));
        newTop = Math.max(0, Math.min(newTop, windowHeight - 75));

        // 更新位置
        this.floatIconPosition.left = newLeft;
        this.floatIconPosition.top = newTop;
      }
    },

    onTouchEnd() {
      // 拖拽结束后的处理
    },

    // 悬浮图片点击事件
    onfloatIconClick() {
      md.sensorComponentLogTake({
        xcxComponentClick: 'true',
        pageName: '首页',
        componentName: '悬浮窗',
        componentContent: '悬浮窗',
      });
      // 如果正在拖拽，则不触发点击事件
      if (!this.isDragging) {
        // 记录点击日志
        md.sensorComponentLogTake({
          xcxComponentClick: 'true',
          pageName: '首页',
          componentName: '悬浮图片',
          componentContent: '点击悬浮图片',
        });

        if (this.floatIcon.videoUrl) {
          // 播放视频
          this.currentVideoUrl =
            this.floatIcon.videoUrl.indexOf('http') === -1
              ? this.$baseUrl + this.floatIcon.videoUrl
              : this.floatIcon.videoUrl;
          this.showVideo = true;
          return;
        } else if (this.floatIcon.link) {
          // 执行跳转
          jump(this.floatIcon.link);
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import '@/common.less';

.home-container {
  width: 100vw;
  overflow-x: hidden;
  background-color: white;
  position: relative;

  // 可拖拽悬浮图片样式
  .floating-image-container {
    position: fixed;
    width: 75px;
    height: 75px;
    z-index: -1;
    z-index: 999;
    touch-action: none; // 禁止默认触摸行为
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    // box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    // padding: 5px;
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.95);
    }
  }

  .floating-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .content {
    background-color: white;
    padding-bottom: 200rpx;

    .banner {
      height: 1116rpx;

      .banneritem {
        width: 750rpx;
        height: 1116rpx;

        .b-img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .swiper-mask {
      position: absolute;
      left: 0;
      width: 750rpx;
      height: 192rpx;
      z-index: 1;
      top: 927rpx;
      pointer-events: none;

      .swiper-mask-img {
        width: 100%;
        height: 100%;
      }
    }

    // 自定义banner指示器样式
    .custom-banner-indicator {
      position: absolute;
      top: 1083rpx;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16rpx;
      z-index: 1;

      .banner-dot {
        width: 16rpx;
        height: 16rpx;
        border-radius: 50%;
        background-color: #feebc4;
        transition: all 0.3s ease;
        flex-shrink: 0;

        &.active {
          width: 40rpx;
          height: 16rpx;
          border-radius: 8rpx;
          background-color: #d3a358;
        }
      }
    }

    .barbox {
      position: absolute;
      top: 97rpx;
      left: 32rpx;
      display: flex;
      align-items: center;

      .btnlogo {
        width: 184rpx;
        height: 66rpx;
      }

      .btnsearch {
        width: 150rpx;
        height: 68rpx;
        margin-left: 20rpx;
      }

      .customer-btn-wrap {
        position: relative;
        display: inline-block;
      }

      .btncustomer {
        width: 70rpx;
        height: 68rpx;
        margin-left: 110rpx;
      }

      .phone-auth-btn-cover {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: transparent;
        opacity: 0;
        border: none;
        padding: 0;
        margin: 0;
        z-index: 10;
        pointer-events: auto;
      }
    }

    // .txtbox {
    // 	width: 100%;
    // 	height: 76rpx;
    // 	background-color: @color-white-soft;
    // 	text-align: center;

    // 	.txtlink {
    // 		color: @color-gold-cover;
    // 		font-size: 24rpx;
    // 		text-underline-offset: 10rpx;
    // 		text-decoration: underline;
    // 	}

    // 	.icon_arrow_yellow {
    // 		width: 12rpx;
    // 		height: 20rpx;
    // 		margin-left: 10rpx;
    // 	}
    // }

    .tools_box {
      width: 750rpx;
      height: 840rpx;
      margin-top: 40rpx;
      overflow-x: scroll;
      padding-left: 38rpx;

      .tools_maintitle {
        // font-size: 42rpx;
        // color: #000;
        color: @color-black-deep;
        font-size: 38rpx;
        font-weight: bold;
      }

      .tools_subtitle {
        margin-top: 10rpx;
        font-size: 24rpx;
        color: #999;
      }

      .tool_swiper {
        margin-top: 35rpx;
        width: 720rpx;
        height: 700rpx;
        overflow: visible;
        /* 关键：允许内容溢出 */

        .swiperItem {
          width: 400rpx;
          height: 700rpx;
          top: 40rpx;
        }

        /* 当前激活项放大 */
        .swiperItem.active {
          top: 0rpx !important;
          z-index: 10;
          transition: top 0.4s ease;
        }

        .tool {
          position: absolute;
          width: 400rpx;
          height: 700rpx;

          .sq_btn {
            position: absolute;
            left: 0rpx;
            top: 0rpx;
            width: 400rpx;
            height: 650rpx;
            // background-color: red;
            opacity: 0;
            z-index: 2;
          }

          .tool_bg {
            position: absolute;
            left: 0rpx;
            top: 0rpx;
            width: 400rpx;
            height: 650rpx;
            border-radius: 40rpx;
            z-index: 1;
          }

          .tool_icon {
            position: absolute;
            left: 0rpx;
            top: 0rpx;
            width: 400rpx;
            pointer-events: none;
            height: 470rpx;
            z-index: 1;
            border-radius: 40rpx;
          }

          .tool_jt {
            position: absolute;
            left: 300rpx;
            top: 510rpx;
            width: 74rpx;
            pointer-events: none;
            height: 44rpx;
          }

          .tool_title {
            position: absolute;
            left: 30rpx;
            top: 510rpx;
            pointer-events: none;
            color: #000;
            font-size: 36rpx;
            width: 300rpx;
            font-weight: bolder;
            z-index: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: break-all;
            max-width: 7em;
          }

          .tool_context {
            position: absolute;
            left: 30rpx;
            top: 575rpx;
            font-size: 24rpx;
            color: #999;
            width: 300rpx;
            pointer-events: none;
            z-index: 2;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            line-height: 1.5;
            max-height: 3em;
          }
        }
      }

      /* 自定义指示点样式 */
      .custom-indicator {
        width: 200rpx;
        height: 10rpx;
        margin-top: -15rpx;
        margin-left: -20rpx;
        display: flex;
        justify-content: center;
        gap: 10rpx;
      }

      .indicator-dot {
        width: 10rpx;
        height: 10rpx;
        border-radius: 10rpx;
        background-color: #feefcc;
        transition: all 0.3s;
      }

      .indicator-dot.active {
        width: 70rpx;
        border-radius: 10rpx;
        background-color: #d3a358;
      }
    }

    .et_box {
      width: 750rpx;
      // height: 840rpx;
      margin-top: 30rpx;
      padding-left: 38rpx;

      .et_maintitle {
        // font-size: 42rpx;
        // color: #000;
        color: @color-black-deep;
        font-size: 38rpx;
        font-weight: bold;
      }

      .et_subtitle {
        width: 700rpx;
        margin-top: 10rpx;
        display: flex;

        .txtlink {
          width: 500rpx;
          color: @color-gold-cover;
          font-size: 24rpx;
          text-underline-offset: 5rpx;
          text-decoration: underline;
        }

        .icon_more {
          width: 140rpx;
          height: 36rpx;
          margin-left: 45rpx;
          margin-top: 2rpx;
        }
      }

      .et_main_box {
        padding-top: 30rpx;
        margin-top: 35rpx;
        width: 670rpx;
        height: 602rpx;
        background-color: #fde8bb;
        border-radius: 38rpx;

        .et_con_bg {
          margin-left: 3rpx;
          width: 651rpx;
          height: 562rpx;
          background-color: #ffffff;
          border-radius: 38rpx;
          padding-left: 15rpx;
          padding-top: 25rpx;

          .et_tab_box {
            height: 70rpx;
            display: flex;
            gap: 15rpx;

            .tab_box {
              width: 204rpx;
              height: 70rpx;

              .et_tab {
                width: 204rpx;
                height: 70rpx;
              }
            }
          }

          .et_con_box {
            width: 631rpx;
            height: 365rpx;
            margin-top: 40rpx;

            .et_con1 {
              width: 631rpx;
              height: 365rpx;
            }

            .et_con2 {
              width: 631rpx;
              height: 365rpx;
            }

            .et_con3 {
              width: 598rpx;
              height: 303rpx;
              margin-top: 20rpx;
              margin-left: 16rpx;
            }
          }

          .et_more_txt {
            width: 100%;
            font-size: 24rpx;
            color: @color-gold-cover;
            text-align: center;
            margin-top: 30rpx;

            .icon_arrow_yellow {
              width: 12rpx;
              height: 20rpx;
              margin-left: 5rpx;
            }
          }
        }
      }
    }

    .cardScroller {
      width: 750rpx;
      overflow-x: scroll;
    }

    .cardbox {
      //
      position: relative;
      display: inline-flex;
      flex-wrap: nowrap;
      margin-top: 32rpx;

      .cardboxitem {
        width: 380rpx;
        height: 232rpx;
        position: relative;
        margin-left: 32rpx;

        .bg {
          width: 380rpx;
          height: 232rpx;
          position: absolute;
          z-index: 0;
        }

        .level {
          position: absolute;
          left: 24rpx;
          top: 30rpx;
          font-size: 32rpx;
          font-weight: bold;
          color: @color-gold-cover;
          pointer-events: none;
        }

        .subTitle {
          position: absolute;
          left: 24rpx;
          top: 80rpx;
          font-size: 24rpx;
          color: @color-black-deep;
          pointer-events: none;
        }

        .showCornerTxt {
          position: absolute;
          right: 0;
          top: 0;
          color: white;
          font-size: 24rpx;
          padding: 10rpx;
          border-radius: 0 10rpx 0 10rpx;
          background-color: @color-gold-main;
        }

        .cardbtn {
          position: relative;
          left: 6rpx;
          top: 130rpx;

          .phone-auth-btn-cover {
            position: absolute;
            width: 368rpx;
            height: 88rpx;
            z-index: 0;
            left: 0;
            top: 0;
            opacity: 0;
            pointer-events: auto;
          }

          .cardbtnbg {
            position: absolute;
            width: 368rpx;
            height: 88rpx;
            z-index: 0;
            left: 0;
            top: 0;
          }

          .btnTitle {
            position: absolute;
            // z-index: 1;
            width: 180rpx;
            text-align: center;
            font-size: 24rpx;
            color: white;
            // border: 1px solid red;
            top: 23rpx;
            left: 20rpx;
          }

          .btnSubTitle {
            position: absolute;
            top: 23rpx;
            // z-index: 1;
            font-size: 24rpx;
            font-weight: bold;
            color: @color-gold-light;
            left: 210rpx;
          }
        }
      }
    }

    .contentbox {
      width: 750rpx;
      height: 1429rpx;
      position: relative;
      margin-top: 32px;

      .contentbg {
        width: 100%;
        height: 100%;
        position: absolute;
      }

      .contentitem {
        position: absolute;
      }
    }

    .channelbox {
      margin-top: 32rpx;
      margin-left: 32rpx;

      .maintitle {
        color: @color-black-deep;
        font-size: 38rpx;
        font-weight: bold;
        display: block;
        margin-left: 5rpx;
      }

      .subtitle_box {
        display: flex;
        margin-top: 10rpx;
        margin-left: 5rpx;
        width: 700rpx;

        .subtitle {
          width: 500rpx;
          color: @color-black-deep;
          font-size: 24rpx;
        }

        .icon_more {
          width: 127rpx;
          height: 34rpx;
          margin-left: 45rpx;
          margin-top: 2rpx;
        }
      }

      .listbox {
        display: flex;
        margin-top: 20rpx;
        width: 686rpx;
        align-content: center;
        justify-content: space-between;

        .tabitem {
          color: @color-black-deep;
          background-color: #e9edf1;
          padding: 15rpx 20rpx;
          font-size: 22rpx;
          // margin-right: 15rpx;
          border-radius: 30rpx;
        }

        .tabActive {
          color: white;
          background-color: @color-gold-main;
        }
      }

      .channelscroll {
        width: 718rpx;
        // overflow-y: scroll;
        margin-top: 32rpx;
        // height: 620rpx;

        .box {
          display: flex;
          flex-direction: column;

          .infobox {
            width: 670rpx;
            height: 180rpx;
            display: flex;
            align-items: center;
            background-color: #fff;
            border-radius: 16rpx;
            border: 2rpx solid #feeecb;
            margin-bottom: 20rpx;

            .infoimg {
              border-radius: 12rpx 0rpx 0rpx 12rpx;
              -webkit-flex-shrink: 0;
              flex-shrink: 0;
              height: 180rpx;
              /* margin-top: -1rpx ; */
              width: 180rpx;
            }

            .infotitlebox {
              flex: 1;
              margin-left: 20rpx;
              display: flex;
              flex-direction: column;
              justify-content: center;

              .infotitlecon {
                display: flex;
                flex-direction: row;

                .infotitle {
                  color: @color-black-deep;
                  width: 400rpx;
                  font-size: 24rpx;
                  font-weight: bold;
                  margin-bottom: 8rpx;
                  display: -webkit-box;
                  -webkit-line-clamp: 1;
                  -webkit-box-orient: vertical;
                  overflow: hidden;
                  line-height: 1.3;
                }

                .infotitletag {
                  width: 46rpx;
                  height: 22rpx;
                  color: #fff;
                }
              }

              .infodesc {
                color: #999999;
                font-size: 22rpx;
                width: 450rpx;
                line-height: 1.3;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
              }
            }
          }
        }
      }

      .channelscroll2 {
        width: 718rpx;
        margin-top: 32rpx;
        margin-left: -16rpx;

        .box2 {
          width: 718rpx;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;

          .infobox2 {
            width: 330rpx;
            height: 430rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #fff;
            border-radius: 16rpx;
            border: 4rpx solid #feeecb;
            margin-bottom: 20rpx;
            position: relative;

            .infoimg2 {
              width: 330rpx;
              height: 306rpx;
              border-radius: 12rpx 12rpx 0rpx 0rpx;
              flex-shrink: 0;
            }

            .infotitle2box {
              margin-top: 10rpx;
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: center;
              width: 100%;
              padding: 0 10rpx;

              .infotitle2 {
                color: @color-black-deep;
                width: 90%;
                font-size: 24rpx;
                font-weight: bold;
                margin-bottom: 8rpx;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                line-height: 1.3;
                text-align: left;
                margin-left: 5%;
              }
            }
          }
        }
      }

      .desc {
        color: @color-black-deep;
        font-size: 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 32rpx;

        .desc1 {
          color: @color-gold-cover;
          margin-left: 5rpx;
        }
      }

      .desc2 {
        padding-bottom: 32rpx;
      }
    }

    .bottomlink {
      width: 750rpx;
      height: 247rpx;

      .bottombg {
        width: 750rpx;
        height: 247rpx;
        position: absolute;
      }

      .box {
        position: relative;
        top: 100rpx;
        width: 74%;
        left: 13%;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;

        .icon {
        }
      }
    }
  }

  .popup-content {
    width: 750rpx;
    height: 812rpx;
    border-top-left-radius: 48rpx;
    border-top-right-radius: 48rpx;
    position: relative;

    .btnclose {
      width: 70rpx;
      height: 70rpx;
      position: absolute;
      top: 36rpx;
      right: 32rpx;
    }

    .xingmahui {
      width: 750rpx;
      height: 100%;
      position: absolute;
      bottom: 0;
    }

    .title {
      position: absolute;
      top: 47rpx;
      left: 32rpx;
      font-size: 36rpx;
      color: @color-black-deep;
      font-weight: bold;
    }

    .desc {
      position: absolute;
      top: 108rpx;
      left: 32rpx;
      font-size: 28rpx;
      color: @color-black-medium;
      font-weight: bold;
    }

    .qrcode {
      width: 340rpx;
      height: 340rpx;
      position: absolute;
      top: 220rpx;
      left: 205rpx;
    }

    .btndownload {
      width: 286rpx;
      height: 89rpx;
      position: absolute;
      top: 630rpx;
      left: 232rpx;
    }
  }

  .video-popup {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }

  .close-btn-bottom {
    margin: 32rpx auto 0 auto;
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 44rpx;
    line-height: 64rpx;
    text-align: center;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .phone-auth-mask {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
  }

  .phone-auth-popup {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 16rpx;
    padding: 40rpx 32rpx;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .phone-auth-btn {
    background: #ffd700;
    color: #333;
    font-size: 32rpx;
    border-radius: 8rpx;
    padding: 20rpx 60rpx;
    margin-bottom: 20rpx;
  }

  .close-btn {
    font-size: 40rpx;
    color: #999;
    margin-top: 10rpx;
  }

  .image-popup-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 16rpx;
    position: relative;

    .popup-image {
      width: 680rpx;
      height: 940rpx;
      border-radius: 16rpx;
      object-fit: cover;
    }

    .popup-close-btn {
      width: 70rpx;
      height: 70rpx;
      position: absolute;
      bottom: -120rpx;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
    }
  }
}

/* 能不能吃模块样式 */
.can-eat-module {
  background-color: #fff7e6;
  margin: 30rpx;
  padding: 40rpx;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.can-eat-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #000000;
  margin-bottom: 20rpx;
}

.can-eat-question {
  font-size: 28rpx;
  color: #999999;
  margin-bottom: 30rpx;
  line-height: 44rpx;
}

.can-eat-buttons {
  display: flex;
  justify-content: space-between;
}

.can-eat-btn {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  margin: 0 10rpx;
  background-color: #fff;
  border: 1px solid #b27c1e;
  border-radius: 30rpx;
  color: #b27c1e;
  font-size: 28rpx;
}

.can-eat-btn:active {
  background-color: #ffe6cc;
}

/* 已答题状态显示区域样式 */
.can-eat-answer-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20rpx;
}

.answer-status {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}

.user-answer {
  width: 100%;
  text-align: center;
  padding: 20rpx 0;
  font-size: 28rpx;
  border-radius: 30rpx;
  border: 2rpx solid;
}

.user-answer.correct {
  background-color: #e8f5e8;
  color: #4caf50;
  border-color: #4caf50;
}

.user-answer.incorrect {
  background-color: #ffebee;
  color: #f44336;
  border-color: #f44336;
}

.correct-answer {
  width: 100%;
  text-align: center;
  padding: 20rpx 0;
  background-color: #b27c1e;
  color: #ffffff;
  font-size: 28rpx;
  border-radius: 30rpx;
}

.analysis-link {
  font-size: 28rpx;
  color: #b27c1e;
  margin-top: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: underline;
}

/* 金币动画样式 */
.gold-coin-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 0.3s ease-out;
}

/* 背景底 */
.gold-coin-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
}

.gold-coin-background::after {
  content: '';
  position: absolute;
  bottom: 42rpx;
  right: 26rpx;
  width: 136rpx;
  height: 136rpx;
  background: transparent;
  border-radius: 20rpx;
  box-shadow: 0 0 0 9999rpx rgba(0, 0, 0, 0.8);
  mix-blend-mode: multiply;
}

.gold-coin-content {
  text-align: center;
  padding: 60rpx 40rpx;
  z-index: 1;
}

.gold-coin-title {
  font-size: 44rpx;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 20rpx;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
  animation: slideUp 0.5s ease-out;
}

.gold-coin-description {
  font-size: 32rpx;
  color: #ffd700;
  margin-bottom: 40rpx;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
  animation: slideUp 0.7s ease-out;
}

.gold-coin-container {
  position: relative;
  width: 300rpx;
  height: 300rpx;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gold-coin {
  position: absolute;
  width: 333rpx;
  height: 333rpx;
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.gold-coin-1 {
  animation: goldCoinFly 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1s 1 forwards;
  z-index: 5;
}

/* 缓动动画关键帧 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(50rpx);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 单个金币从上方中间飞向底部导航"我的"图标的动画 - 简化为贝塞尔曲线直线运动 */
@keyframes goldCoinFly {
  0% {
    transform: translate(-50%, -50%) scale(1.3) rotate(0deg);
    opacity: 1;
    left: 50%;
    top: 50%;
  }

  100% {
    transform: translate(145rpx, 480rpx) scale(0) rotate(45deg);
    opacity: 0;
    left: 50%;
    top: 50%;
  }
}
</style>
