xk-client-wx/pages/home/home.vue

<template>
  <view class="content safe-area-inset-bottom">
    <!-- 头部区域：保留原有的蓝色渐变风格 -->
    <view class="head">
      <!-- 门店信息：点击可切换门店 -->
      <view class="store" @click="toStore">
        {{infoList.store['name'] || storeinfo[0].store['name'] || info.name || ''}}
        <text class="iconfont icon-qiehuan"></text>
      </view>

      <!-- 定位信息 -->
      <view class="area">
        <view class="place">
          <text class="iconfont icon-dizhi"></text>
          {{infoList.store['position'] || storeinfo[0].store.position || info.position || ''}}
        </view>
      </view>
    </view>

    <!-- 轮播图区域 -->
    <view class="section">
      <!-- 使用 u-swiper 组件，设置圆角增加柔和感 -->
      <u-swiper :list="list" :img-mode="aspectFill" :height="300" :interval="4000" @click="toBanner" border-radius="12"></u-swiper>
    </view>

    <!-- 首页专区入口 -->
    <view v-if="storeType === '1' && homeZones.length" class="zone-entry-section">
      <scroll-view class="zone-scroll" scroll-x="true" show-scrollbar="false">
        <view class="zone-list">
          <view
            v-for="(zone, index) in homeZones"
            :key="zone.type"
            class="zone-item"
            @click="goZoneList(zone)"
          >
            <view class="zone-image-wrapper">
              <image
                v-if="zone.icon"
                :src="zone.icon"
                mode="aspectFit"
                class="zone-image"
              />
              <view v-else class="zone-image-placeholder">
                <text class="iconfont icon-shangpin"></text>
              </view>
            </view>
            <view class="zone-label">{{ zone.title }}</view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 导航栏区域：诊所模式 (显示挂号和购药) -->
    <!-- 优化点：使用第一版的"左文右图+副标题"布局，但背景保留原有的bg图片 -->
    <view class="nav" v-if="storeType === '0'">
      <view class="nav_service bg-clinic" @click="goYard(1)">
        <view class="nav_content">
          <view class="nav_title">到店挂号</view>
          <view class="nav_desc">预约专家 不排队</view>
        </view>
        <view class="nav_img_wrapper">
          <image src="../../static/home/bg1.png" mode="aspectFit" class="nav_img"></image>
        </view>
      </view>

      <view class="nav_service bg-pharmacy" @click="golist(3)">
        <view class="nav_content">
          <view class="nav_title">预约购药</view>
          <view class="nav_desc">在线选药 极速达</view>
        </view>
        <view class="nav_img_wrapper">
          <image src="../../static/home/bg2.png" mode="aspectFit" class="nav_img"></image>
        </view>
      </view>
    </view>

    <!-- 导航栏区域：药店模式 (仅显示预约购药，且宽度铺满) -->
    <!-- 优化点：单个卡片铺满，内容更丰富，避免显得单薄 -->
    <view class="nav" v-if="storeType === '1'">
      <view class="nav_service bg-pharmacy" @click="golist(3)" style="width: 100%;">
        <view class="nav_content">
          <view class="nav_title">预约购药</view>
          <view class="nav_desc">正品保障 · 种类齐全 · 快速配送</view>
        </view>
        <view class="nav_img_wrapper">
          <image src="../../static/home/bg2.png" mode="aspectFit" class="nav_img"></image>
        </view>
      </view>
    </view>

    <!-- 诊所模式：医生列表标题 -->
    <view v-if="storeType === '0'" class="doctor_list" @click="goYard(1)">
      医生列表
      <view class="info">
        更多 <text class="iconfont icon-jiantou1"></text>
      </view>
    </view>

    <!-- 诊所模式：医生列表卡片 (保持原有逻辑) -->
    <view v-if="storeType === '0'" class="doctor-card" @click="goLookDoctor(item.id)" v-for="(item,index) in doctorList" :key="item.id">
      <view class="card-content">
        <image :src="item.avatar || '/static/mine/avatar_1.png'" mode="aspectFill" class="doctor-avatar"></image>
        <view class="doctor-info">
          <view class="name-section">
            <text class="doctor-name">{{item.name}}</text>
            <view class="title-badge">{{item.title}}</view>
          </view>
          <view class="department-section">
            <text class="iconfont icon-location"></text>
            <text class="department">{{item.depart}} | {{item.store}}</text>
          </view>
          <view class="expertise">
            <text class="expertise-label">擅长：</text>
            <text class="expertise-content">{{item.good_at}}</text>
          </view>
          <view class="stats">
            <view class="stat-item">
              <text class="stat-value">{{item.inquiry_num}}</text>
              <text class="stat-label">问诊量</text>
            </view>
            <view class="stat-item">
              <text class="stat-value">{{item.accept_percent}}</text>
              <text class="stat-label">接诊率</text>
            </view>
            <view class="consult-btn">
              <text class="iconfont icon-consult"></text>
              咨询
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 药店模式：热销药品标题 -->
    <view v-if="storeType === '1'" class="doctor_list" @click="golist(3)">
      {{ topProductsTitle }}
      <view class="info">
        更多 <text class="iconfont icon-jiantou1"></text>
      </view>
    </view>

    <!-- 药店模式：热销商品展示（仅OTC） -->
    <view v-if="storeType === '1' && topProductsList.length > 0" class="top-products-container">
      <view class="product-list-container">
        <view
          class="product-card-simple"
          @click="goProductDetail(item)"
          v-for="(item, index) in topProductsList"
          :key="item.drug.id"
        >
          <image
            :src="item.drug.image || '/static/mine/avatar_1.png'"
            mode="aspectFill"
            class="product-img"
          ></image>
          <view class="product-info-simple">
            <view class="product-main">
              <view class="product-name-row">
                <text class="product-name">{{ item.drug.drug_name }}</text>
                <text class="otc-tag otc-green">OTC</text>
              </view>
              <text class="product-spec">{{ item.drug.specification }}</text>
            </view>
            <view class="product-bottom">
              <view class="price-box">
                <text class="currency">¥</text>
                <text class="price">
                  {{ item.price || (item.drug.drugStoreDrug ? item.drug.drugStoreDrug.price : '0.00') }}
                </text>
              </view>
              <view class="buy-btn" @click.stop="goProductDetail(item)">购买</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 药店模式：药品列表容器（保留原有逻辑作为备用） -->
    <view v-if="storeType === '1' && topProductsList.length === 0" class="product-list-container">
      <!-- 药品卡片：优化后的单卡片UI布局 -->
      <view class="product-card-simple" @click="goProductDetail(item)" v-for="(item,index) in productList" :key="item.drug.id">
        <!-- 左侧：药品封面图 -->
        <image :src="item.drug.image || '/static/mine/avatar_1.png'" mode="aspectFill" class="product-img" :class="{ 'prescription-blur': item.drug.is_otc === 0 || item.drug.is_otc === '0' }"></image>

        <!-- 右侧：药品详情信息 -->
        <view class="product-info-simple">
          <!-- 上部分：名称与规格 -->
          <view class="product-main">
            <view class="product-name-row">
              <!-- 药名：加粗显示，超出部分省略 -->
              <text class="product-name">{{item.drug.drug_name}}</text>
              <!-- OTC标签：根据属性动态显示颜色 -->
              <text class="otc-tag" :class="item.drug.is_otc ? 'otc-green' : 'otc-red'">{{item.drug.is_otc ? 'OTC' : 'Rx'}}</text>
            </view>
            <!-- 规格：灰色小字 -->
            <text class="product-spec">{{item.drug.specification}}</text>
            <!-- 分类标签：如果有分类则显示 -->
            <view class="product-tags" v-if="item.drug.category">
              <text class="tag">{{item.drug.category}}</text>
            </view>
          </view>

          <!-- 下部分：价格与购买按钮 -->
          <view class="product-bottom">
            <view class="price-box">
              <text class="currency">¥</text>
              <text class="price">{{item.price}}</text>
            </view>
            <!-- 购买按钮：阻止冒泡，避免误触详情页跳转 -->
            <view class="buy-btn" @click.stop="buyProduct(item)">
              购买
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 首页资质公示区域 -->
    <view v-if="storeType === '1'" class="qualifications-section">
      <view class="qualifications-title">
        平台资质
        <text class="more-link" @click.stop="goPlatformInfo">更多 ></text>
      </view>
      <view class="qualifications-grid">
        <view class="qualification-item" v-for="(item, index) in qualifications" :key="index" @click="previewQualification(item)">
          <image :src="item.image" mode="aspectFit" class="qualification-img"></image>
          <text class="qualification-name">{{ item.name }}</text>
        </view>
      </view>
    </view>

    <!-- 全局遮罩层 -->
    <view class="bg-" v-if="bgShow" @click="bgShow=false">
      <image src="/static/home/bg.png" mode=""></image>
    </view>
    <!-- 全局消息提示 -->
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import {
  doctorList,
  getBanner,
  getToken,
  storeChange,
  storeInfo,
  storeList
} from '../../request/api/api'
import { getPlatformQualificationsApi } from '../../request/api/platform'
import { getStoreDrugListBySalespersonApi, getHomeTopProductsApi, getHomeZonesApi } from "@/request/api/product";
import request from "@/request/api/request";

export default {
  data() {
    return {
      storeId: 0,
      storeType: 0,
      storeinfo: [],
      doctorList: [],
      productList: [], // 存储药品列表数据
      homeZones: [], // 首页专区入口
      topProductsTitle: '热销商品',
      topProductsList: [], // 首页热销商品（OTC）
      qualifications: [], // 资质证明列表
      show: true,
      showed: false,
      shopList: {},
      flag: false,
      headerTitle: "",
      infoList: "",
      list: [],
      info: [],
      bgShow: false,
      isShow_envVersion: true,
      defaultDoctorId: '39' // 默认医生ID，从API获取
    }
  },
  onLoad() {
    const token = uni.getStorageSync('token')
    const userInfo = uni.getStorageSync('userinfo')
    if (!token || !userInfo) {
      uni.navigateTo({
        url: '/pages/home/index'
      })
    }
    this.isShow_envVersion = uni.getStorageSync('isShow_envVersion')
    if (this.isShow_envVersion === false) {
      this.getList();
    }
  },
  created() {
    const token = uni.getStorageSync('token')
    const userInfo = uni.getStorageSync('userinfo')
    if (!token || !userInfo) {
      uni.navigateTo({
        url: '/pages/home/index'
      })
    }
  },
  onReady() {
    if (uni.getStorageSync('store_id')) {
      this.getStore();
    } else {
      this.goNewlist()
    }
    uni.setNavigationBarTitle({
      title: this.headerTitle,
      success() {}
    });
    uni.setNavigationBarColor({
      frontColor: '#000000',
    })
  },
  methods: {
    goYard(type) {
      uni.navigateTo({
        url: '/pages/Inquiries/Inquiries?type=' + type
      })
    },
    golist(type) {
      if (type === 3) {
        // 检查是否配置了在线复诊负责人
        if (!this.defaultDoctorId) {
          uni.showToast({
            title: '该门店暂不支持在线复诊',
            icon: 'none',
            duration: 2000
          });
          return;
        }
        return uni.navigateTo({
          url: '/subPackages/product/product?doctor_id=' + this.defaultDoctorId + '&register_type=3'
        })
      }
      uni.navigateTo({
        url: '/pages/Inquiries/Inquiries?type=' + type
      })
    },
    getH5() {
      getToken({
        method: "post",
        data: {
          user_id: uni.getStorageSync('user_id'),
          avatarurl: uni.getStorageSync('userinfo')['avatarurl'],
          mobile: uni.getStorageSync('userinfo')['mobile'],
          nickname: uni.getStorageSync('userinfo')['nickname'],
          openid: uni.getStorageSync('userinfo')['openid'],
          session_key: uni.getStorageSync('userinfo')['session_key'],
          store_id: uni.getStorageSync('store_id') || '11001',
        },
      }).then((res) => {
        if (res.data.errcode == 0) {
          uni.setStorageSync('token_platform_id', res.data.data.token)
        } else {
          this.$refs.uToast.show({
            title: res.data.msg,
            type: 'default',
            icon: false
          })
        }
      })
    },
    tosearch() {
      uni.navigateTo({
        url: '/subPackages/shop/search-home'
      })
    },
    toStore() {
      uni.navigateTo({
        url: '/subPackages/my/mystore'
      })
    },
    goLookDoctor(id, sts_id) {
      if (!sts_id) {
        let sts_id = uni.getStorageSync('store_id')
      }
      setTimeout(() => {
        uni.requestSubscribeMessage({
          tmplIds: ['JdSs08cMSiL17xwwHZ8fZ5UBUqeY0eKAuvyW7n4Fl20',
            'OERMugiahk-aKRVH9GHmdJCRBE3yldzEKTzbMCJhY6U',
            'p-Ix0uIuwPKxm-_yKDlI8mkI-niUgPtaMUZyAaa5vvA'
          ],
          complete: (res) => {
            uni.navigateTo({
              url: '/subPackages/doctor/doctor-detail?store_id=' + sts_id + '&id=' + id
            })
          }
        })
      }, 200)
    },
    toSee() {
      uni.scanCode({
        success: function(res) {
          uni.showToast({
            title: '扫码成功',
            duration: 2000,
            icon: "success"
          });
        },
      });
    },
    getStore() {
      if (uni.getStorageSync('store_id')) {
        this.show = false
        storeInfo({
          method: "post",
          data: {
            store_id: uni.getStorageSync('store_id') || '11001',
          }
        }).then((res) => {
          if (res.data.errcode == 0) {
            this.storeType = res.data.data.store['type']
            this.infoList = res.data.data
            this.headerTitle = res.data.data.store['name']
            uni.setNavigationBarTitle({
              title: this.headerTitle,
              success() {},
              fail() { this.getStore() }
            });
            uni.setNavigationBarColor({
              frontColor: '#000000',
            })
            this.getBannered();
          }
        })
      } else {
        this.goNewlist()
      }
    },
    goNewlist() {
      storeList({
        method: "post",
        data: {
          store_id: uni.getStorageSync('store_id') || '11001',
        }
      }).then((res) => {
        if (res.data.errcode == 0) {
          this.show = res.data.data.open_issue
          this.showed = this.show
          if (this.isShow_envVersion) {
            this.shopList = res.data.data.list
            this.getBannered();
          } else {
            this.storeinfo = res.data.data.list.filter((item) => item.is_online == 1)
            uni.setStorageSync('store_id', this.storeinfo[0].store.id)
            this.headerTitle = this.storeinfo[0].store['name']
            uni.setNavigationBarTitle({
              title: this.headerTitle,
              success() {}
            });
            uni.setNavigationBarColor({
              frontColor: '#000000',
            })
            this.getBannered();
          }
        } else {
          if (this.isShow_envVersion) {
            uni.navigateTo({ url: '/pages/home/index' })
          } else {
            uni.navigateTo({ url: '/pages/home/index' })
          }
        }
      })
    },
    goList(id) {
      uni.navigateTo({
        url: '/pages/home/index-list?type=' + 1 + '&id?=' + id
      })
    },
    getList() {
      this.doctorList = [];
      doctorList({
        method: "post",
        data: {
          store_id: uni.getStorageSync('store_id') || '11001',
        }
      }).then((res) => {
        if (res.data.errcode === 0) {
          this.doctorList = (res.data.data.list).slice(0, 5)
        }
      })
    },
    toChang(e) {
      storeChange({
        method: "post",
        data: { store_id: e }
      }).then((res) => {
        if (res.data.errcode == 0) {
          this.getStore()
          this.getList();
        }
      })
    },
    getBannered() {
      getBanner({
        method: "post",
        data: {
          store_id: uni.getStorageSync('store_id') || '11001',
        }
      }).then((res) => {
        if (res.data.errcode == 0) {
          this.info = res.data.data
          this.urlInfo = res.data.data.nav
          this.storeType = res.data.data.type
          this.list = (res.data.data.nav).map((item) => {
            return item.pic
          })
        }
      })
    },
    toBanner(e) {
      if (!this.urlInfo[e].external_link) return
      if (this.urlInfo[e].link_type == 1 && this.isShow_envVersion == false) {
        uni.navigateTo({
          url: this.urlInfo[e].external_link,
          success() {}
        })
      } else {
        uni.navigateTo({
          url: '/pages/home/home-banner?id=' + this.urlInfo[e].external_link,
          success() {}
        })
      }
    },
    // 获取药品列表
    getProductList() {
      getStoreDrugListBySalespersonApi({
        store_id: uni.getStorageSync('store_id') || '11001',
        page: 1,
        limit: 3 // 【优化点】首页只展示3个热门商品，保持版面简洁
      }).then((res) => {
        if (res.data.code == 0) {
          this.productList = res.data.result.records;
        }
      })
    },
    // 获取首页热销商品
    getHomeTopProducts() {
      getHomeTopProductsApi({
        store_id: uni.getStorageSync('store_id') || '11001',
      }).then((res) => {
        if (res.data.code == 0 && res.data.result) {
          const result = res.data.result;
          this.topProductsTitle = result.title || '热销商品';
          this.topProductsList = result.list || [];
        }
      })
    },
    // 获取首页专区入口
    getHomeZones() {
      getHomeZonesApi({
        store_id: uni.getStorageSync('store_id') || '11001',
      }).then((res) => {
        if (res.data.code == 0) {
          this.homeZones = res.data.result || res.data.data || [];
        }
      }).catch(() => {
        this.homeZones = [];
      })
    },
    // 获取平台资质证明
    getPlatformQualifications() {
      getPlatformQualificationsApi({
        store_id: uni.getStorageSync('store_id') || '11001',
      }).then((res) => {
        if (res.data.code == 0 || res.data.errcode == 0) {
          this.qualifications = res.data.data || res.data.result || [];
        }
      }).catch(() => {
        // 如果接口不存在，使用默认数据
        this.qualifications = [
          { name: '互联网药品经营许可证', image: '', type: 1 },
          { name: '营业执照', image: '', type: 2 },
          { name: '医疗器械经营许可证', image: '', type: 3 },
          { name: '食品经营许可证', image: '', type: 4 },
          { name: '药师资格证', image: '', type: 5 }
        ];
      })
    },
    // 跳转药品详情
    goProductDetail(item) {
      uni.navigateTo({
        url: `/subPackages/product/symptoms?id=${item.drug.id}&drug_name=${item.drug.drug_name}&is_otc=${item.drug.is_otc}&image=${item.drug.image}&price=${item.price}`
      });
    },
    // 跳转专区商品列表
    goZoneList(zone) {
      if (!zone || !zone.type) return;
      uni.navigateTo({
        url: `/subPackages/product/product?zone_type=${zone.type}`,
      });
    },
    // 直接购买
    buyProduct(item) {
      // 检查是否配置了在线复诊负责人
      if (!this.defaultDoctorId) {
        uni.showToast({
          title: '该门店暂不支持在线复诊',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      uni.navigateTo({
        url: `/subPackages/product/product?doctor_id=${this.defaultDoctorId}&register_type=3`
      });
    },
    // 预览资质证明
    previewQualification(item) {
      if (item.image) {
        uni.previewImage({
          urls: [item.image],
          current: item.image
        });
      }
    },
    // 跳转平台信息页面
    goPlatformInfo() {
      uni.navigateTo({
        url: '/pages/index/platform-info'
      });
    },
    // 获取默认医生ID（根据门店配置）
    async getDefaultDoctorId() {
      try {
        const storeId = uni.getStorageSync('store_id');
        if (!storeId) {
          console.warn('未找到store_id，无法获取默认医生');
          this.defaultDoctorId = null;
          return;
        }
        const res = await request('/xkApi/online-consultation/get-default-doctor-id', {
          method: 'GET',
          data: { store_id: storeId }
        }, 0);
        if (res.data && res.data.result && res.data.result.doctor_id) {
          this.defaultDoctorId = res.data.result.doctor_id;
        } else {
          // 门店未配置在线复诊负责人
          this.defaultDoctorId = null;
          console.warn('该门店未配置在线复诊负责人:', res.data?.result?.message);
        }
      } catch (error) {
        console.error('获取默认医生ID失败:', error);
        this.defaultDoctorId = null;
      }
    }
  },
  mounted() {
    const token = uni.getStorageSync('token')
    const id = uni.getStorageSync('store_id')
    const d_id = uni.getStorageSync('doctors_id')
    const d_store = uni.getStorageSync('st_id')
    if (token && id) {
      this.toChang(id)
    }
    if (d_id && token && d_store) {
      this.goLookDoctor(d_id, d_store)
    }
  },
  onShow() {
    this.storeId = uni.getStorageSync('store_id');
    this.infoList = ""
    this.getStore();
    this.getList();
    this.getProductList(); // 每次显示页面刷新商品列表
    this.getHomeTopProducts(); // 获取首页热销商品
    this.getPlatformQualifications(); // 获取平台资质证明
    this.getHomeZones(); // 获取首页专区入口
    this.getDefaultDoctorId(); // 获取默认医生ID
  },
}
</script>

<style lang="scss" scoped>
.content {
  background-color: #fff;
  width: 750rpx;
  max-height: 100%;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
  position: relative;

  .bg- {
    min-width: 100vw;
    min-height: 100vh;
    background: rgba(0, 0, 0, 0.46);
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    image { width: 510rpx; height: 621rpx; vertical-align: middle; margin: 200rpx auto 0; }
  }

  // 1. 头部样式：品牌蓝色渐变背景
  .head {
    width: 750rpx;
    height: 390rpx;
    padding: 20rpx;
    background: linear-gradient(180deg, #298DFF 0%, #9ECBFF 70%, #FFFFFF 100%);

    .store {
      width: 700rpx;
      height: 78rpx;
      line-height: 78rpx;
      font-size: 28rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #FFFFFF;
      margin: 0rpx auto 0rpx;
      .iconfont { font-size: 27rpx; color: #fff; margin-left: 16rpx; }
    }

    .area {
      width: 700rpx;
      height: 64rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0rpx auto;

      .place {
        font-size: 26rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        .iconfont { font-size: 25rpx; color: #FFFFFF; margin-right: 10rpx; }
      }
    }
  }

  // 2. 轮播图区域
  .section {
    width: 710rpx;
    margin: -180rpx auto 30rpx;
    height: 300rpx;
  }

  // 2.5 首页专区入口区域 - 水平滚动样式
  .zone-entry-section {
    width: 100%;
    margin: 30rpx 0;
    padding: 30rpx 0;
    background: linear-gradient(180deg, #EEF4FF 0%, #F3F7FF 100%);
    position: relative;
    overflow: hidden;

    .zone-scroll {
      width: 100%;
      white-space: nowrap;

      .zone-list {
        display: inline-flex;
        padding: 0 30rpx;
        gap: 30rpx;
      }

      .zone-item {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        flex-shrink: 0;
        padding-bottom: 10rpx;
        transition: transform 0.2s ease;

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

        .zone-image-wrapper {
          width: 140rpx;
          height: 140rpx;
          position: relative;
          margin-bottom: 16rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 8rpx;

          // 不规则形状背景 - 使用border-radius创建云朵/气泡效果
          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.95);
            // 使用不规则border-radius创建云朵形状
            border-radius: 65% 35% 55% 45% / 45% 65% 35% 55%;
            z-index: 0;
            box-shadow: 0 4rpx 16rpx rgba(65, 117, 238, 0.12);
            transition: box-shadow 0.3s ease;
          }

          // 添加第二个不规则层增加层次感
          &::after {
            content: '';
            position: absolute;
            top: -4rpx;
            left: -4rpx;
            right: -4rpx;
            bottom: -4rpx;
            background: rgba(227, 242, 253, 0.4);
            border-radius: 60% 40% 65% 35% / 40% 60% 40% 60%;
            z-index: -1;
            filter: blur(8rpx);
          }

          .zone-image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
            position: relative;
            z-index: 1;
            background: #f5f5f5;
          }

          .zone-image-placeholder {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: #E3F2FD;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 1;

            .iconfont {
              font-size: 60rpx;
              color: #4175EE;
            }
          }
        }

        .zone-label {
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
          text-align: center;
          white-space: nowrap;
          line-height: 1.4;
        }
      }
    }
  }

  // 3. 导航栏样式优化：结合V1布局结构和原版背景图
  .nav {
    width: 710rpx;
    background: #FFFFFF;
    border-radius: 15rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 30rpx auto;

    // 通用导航卡片样式
    .nav_service {
      width: 348rpx;
      height: 178rpx;
      display: flex;
      align-items: center;
      justify-content: space-between; // 左右分布：左文字 右图片
      padding: 20rpx 30rpx; // 增加内边距
      box-sizing: border-box;
      border-radius: 24rpx;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      position: relative;

      // 左侧文字区域
      .nav_content {
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .nav_title {
          font-size: 38rpx; // 加大标题
          font-family: PingFang SC-Heavy, PingFang SC;
          font-weight: 800;
          color: #FFFFFF;
          margin-bottom: 8rpx;
          text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
        }

        .nav_desc {
          font-size: 22rpx;
          color: rgba(255,255,255,0.9);
          font-weight: 500;
        }
      }

      // 右侧图片区域
      .nav_img_wrapper {
        width: 100rpx;
        height: 100rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .nav_img {
          width: 80rpx;
          height: 80rpx;
          opacity: 0.9;
        }
      }
    }

    // 诊所背景 (bg01)
    .bg-clinic {
      background-image: url('/static/home/bg01.png');
    }

    // 药店背景 (bg02)
    .bg-pharmacy {
      background-image: url('/static/home/bg02.png');
    }
  }

  // 列表标题样式 (医生列表/热销药品)
  .doctor_list {
    width: 710rpx;
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #232323;
    margin: 44rpx auto 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .info {
      font-size: 28rpx;
      font-weight: 500;
      color: #666666;
    }
  }

  /* 医生卡片样式 (诊所模式) */
  .doctor-card {
    background: #FFFFFF;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 12rpx rgba(65, 117, 238, 0.08);
    margin: 0 auto 24rpx;
    width: 710rpx;
    overflow: hidden;

    &:active { transform: translateY(2rpx); }

    .card-content { display: flex; padding: 24rpx; }
    .doctor-avatar { width: 100rpx; height: 100rpx; border-radius: 50%; border: 2rpx solid #f0f5ff; flex-shrink: 0; margin-right: 20rpx; }
    .doctor-info { flex: 1; min-width: 0; }

    .name-section { display: flex; align-items: center; margin-bottom: 12rpx; }
    .doctor-name { font-size: 32rpx; font-weight: bold; color: #232323; margin-right: 16rpx; }
    .title-badge { font-size: 22rpx; color: #4175EE; background: #eef4ff; border-radius: 8rpx; padding: 4rpx 12rpx; flex-shrink: 0; }

    .department-section { display: flex; align-items: center; margin-bottom: 16rpx; .iconfont { font-size: 24rpx; color: #888; margin-right: 6rpx; } .department { font-size: 24rpx; color: #666; } }
    .expertise { display: flex; font-size: 26rpx; color: #444; line-height: 1.4; margin-bottom: 16rpx; .expertise-label { color: #666; flex-shrink: 0; } .expertise-content { flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } }

    .stats { display: flex; align-items: center; justify-content: space-between; padding-top: 12rpx; border-top: 1rpx dashed #e0e7ff; }
    .stat-item { flex: 1; text-align: center; }
    .stat-value { font-size: 32rpx; font-weight: bold; color: #4175EE; display: block; line-height: 1.2; }
    .stat-label { font-size: 24rpx; color: #888; display: block; }
    .consult-btn { background: #4175EE; color: white; border-radius: 40rpx; padding: 10rpx 24rpx; font-size: 26rpx; display: flex; align-items: center; .iconfont { font-size: 24rpx; margin-right: 6rpx; } }
  }

  // 4. 药店模式 - 分类热销商品容器
  .top-products-container {
    padding: 0 20rpx;

    .category-section {
      margin-bottom: 40rpx;

      .category-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #232323;
        margin-bottom: 20rpx;
        padding-left: 20rpx;
        //border-left: 6rpx solid #4175EE;
      }
    }
  }

  // 4. 药店模式 - 药品列表容器
  .product-list-container {
    padding: 0 20rpx;
  }

  // 【优化点】首页专用药品卡片：极简风格
  .product-card-simple {
    background: #fff;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    padding: 24rpx;
    display: flex;
    align-items: center;
    // 使用微弱的蓝色阴影，呼应主题
    box-shadow: 0 4rpx 12rpx rgba(65, 117, 238, 0.08);

    // 药品缩略图
    .product-img {
      width: 160rpx;
      height: 160rpx;
      border-radius: 12rpx;
      margin-right: 24rpx;
      background: #f8f8f8;
      
      // 处方药图片模糊处理
      &.prescription-blur {
        filter: blur(10px);
        -webkit-filter: blur(10px);
      }
    }

    // 右侧信息区域布局
    .product-info-simple {
      flex: 1;
      height: 160rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .product-main {
        // 第一行：药名 + 标签
        .product-name-row {
          display: flex;
          align-items: center;
          margin-bottom: 8rpx;
          .product-name {
            font-size: 30rpx;
            font-weight: bold;
            color: #333;
            margin-right: 12rpx;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          // OTC标签通用样式
          .otc-tag {
            font-size: 20rpx;
            padding: 2rpx 8rpx;
            border-radius: 4rpx;
            font-weight: bold;
            border: 1px solid;
          }
          // 绿底白字 / 红底白字
          .otc-green { color: #00B578; border-color: #00B578; }
          .otc-red { color: #FF4D4F; border-color: #FF4D4F; }
        }

        // 规格显示
        .product-spec {
          font-size: 24rpx;
          color: #999;
          display: block;
          margin-bottom: 8rpx;
        }

        // 底部标签容器
        .product-tags {
          display: flex;
          .tag {
            font-size: 20rpx;
            color: #666;
            background: #f5f5f5;
            padding: 2rpx 10rpx;
            border-radius: 4rpx;
          }
        }
      }

      // 底部价格与按钮行
      .product-bottom {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;

        .price-box {
          color: #FF4D4F;
          font-weight: bold;
          .currency { font-size: 24rpx; margin-right: 2rpx; }
          .price { font-size: 36rpx; }
        }

        // 购买按钮：保持品牌色
        .buy-btn {
          background: #4175EE;
          color: #fff;
          font-size: 26rpx;
          padding: 10rpx 30rpx;
          border-radius: 30rpx;
          font-weight: 500;
        }
      }
    }
  }

  // 资质公示区域
  .qualifications-section {
    padding: 40rpx 20rpx;
    margin-top: 40rpx;
    background: #fff;

    .qualifications-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #232323;
      margin-bottom: 24rpx;
      padding: 0 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .more-link {
        font-size: 24rpx;
        color: #4175EE;
        font-weight: normal;
      }
    }

    .qualifications-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20rpx;
      padding: 0 20rpx;

      .qualification-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20rpx;
        background: #F7F8FA;
        border-radius: 12rpx;

        .qualification-img {
          width: 120rpx;
          height: 120rpx;
          margin-bottom: 12rpx;
          border-radius: 8rpx;
        }

        .qualification-name {
          font-size: 24rpx;
          color: #666;
          text-align: center;
          line-height: 1.4;
        }
      }
    }
  }
}
</style>