From 87fae84240cf878855f3f3b9ac9076c26b0a579f Mon Sep 17 00:00:00 2001
From: BAKEYi <16298417+bakeyi@user.noreply.gitee.com>
Date: Fri, 29 May 2026 13:50:58 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8D=A2=E5=9F=9F=E5=90=8D+=E5=93=81=E7=89=8C?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E3=80=81=E6=8A=80=E8=83=BD=E9=9B=86=E5=B8=82?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E8=B7=B3=E8=BD=AC=E8=AF=A6=E6=83=85=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91+=E5=93=81=E7=89=8C=E8=AF=A6=E6=83=85=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                           |   12 +
 pages/home/components/brand-card.vue |   11 +-
 pages/home/components/skill-card.vue |   14 +-
 pages/jingxuan/brand-detail.vue      | 1104 ++++++++++++++++++++++++++
 utils/request.js                     |    4 +-
 5 files changed, 1136 insertions(+), 9 deletions(-)
 create mode 100644 pages/jingxuan/brand-detail.vue

diff --git a/pages.json b/pages.json
index 26b1390..08037e4 100644
--- a/pages.json
+++ b/pages.json
@@ -1007,6 +1007,18 @@
 				"navigationStyle": "custom"
 			}
 		},
+		{
+			"path": "pages/jingxuan/brand-detail",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/jingxuan/skill-detail",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
 		{
 			"path": "pages/ruzhu/successruzhu",
 			"style": {
diff --git a/pages/home/components/brand-card.vue b/pages/home/components/brand-card.vue
index 308ad03..894311d 100644
--- a/pages/home/components/brand-card.vue
+++ b/pages/home/components/brand-card.vue
@@ -79,8 +79,17 @@ export default {
     }
   },
   methods: {
+    // 点击品牌卡片跳转详情页
     onClick() {
-      this.$emit('click', this.item)
+      // 1. 保留 emit，方便外层如果有特殊需求可以监听到
+      this.$emit('click', this.item);
+      
+      // 2. 直接在此处处理跳转逻辑
+      if (this.item && this.item.id) {
+        uni.navigateTo({
+          url: `/pages/jingxuan/brand-detail?id=${this.item.id}`
+        });
+      }
     },
     getTagStyle(tag) {
       const len = this.tagsLength
diff --git a/pages/home/components/skill-card.vue b/pages/home/components/skill-card.vue
index 0b0ee2c..825377f 100644
--- a/pages/home/components/skill-card.vue
+++ b/pages/home/components/skill-card.vue
@@ -66,14 +66,16 @@ export default {
       return views.toString()
     },
     handleClick() {
-      // 跳转到技能/课程详情页
-      if (this.item.id) {
+      // 1. 保留 emit，方便外层如果有特殊需求可以监听到
+      this.$emit('click', this.item);
+      
+      // 2. 直接在此处处理跳转逻辑
+      if (this.item && this.item.id) {
         uni.navigateTo({
-          url: `/pages/skill/detail?id=${this.item.id}`
-        })
-      } else {
-        uni.showToast({ title: '详情页开发中', icon: 'none' })
+          url: `/pages/jingxuan/skill-detail?id=${this.item.id}`
+        });
       }
+      // 跳转到技能/课程详情页
     }
   }
 }
diff --git a/pages/jingxuan/brand-detail.vue b/pages/jingxuan/brand-detail.vue
new file mode 100644
index 0000000..e972eac
--- /dev/null
+++ b/pages/jingxuan/brand-detail.vue
@@ -0,0 +1,1104 @@
+<template>
+  <view class="brand-detail-page">
+    
+    <custom-navbar 
+      :title="info.name || '品牌详情'" 
+      :leftImg="'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/60ae3383-6ff6-4f42-818b-d9b09a9bd0e0.png'" 
+      :showUser="true"
+      backgroundColor="#ffffff" 
+      titleColor="#333" 
+      borderBottom="none"
+      :show-headle="true"
+      :headleSrc="isCollected ? iconCollectOn : iconCollectOff" 
+      @onHeadleClick="toggleCollectStatus"
+      >
+    </custom-navbar>
+
+    <!-- 顶部导航栏扩展：动态计算位置的拨号图标 -->
+    <view class="nav-phone-wrap" :style="{ top: phoneIconTop + 'px', right: phoneIconRight + 'px' }" @click="makeCall">
+      <image src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/c164280f-1ab9-41b4-9d60-846368364e9c.png" class="nav-phone-icon"></image>
+    </view>
+                  
+    <view class="mock-switch" @click="toggleMockData">
+      <text>{{ useMockData ? '关闭模拟数据' : '开启模拟数据' }}</text>
+    </view>
+                  
+    <view class="banner-section" v-if="bannerList && bannerList.length || info.video">
+      
+      <!-- 原生视频组件 (就地播放) -->
+      <video 
+        v-if="info.video && isVideoPlaying" 
+        id="myVideo"
+        class="banner-video" 
+        :src="info.video" 
+        autoplay 
+        controls 
+        object-fit="cover"
+      ></video>
+
+      <!-- 轮播图区域 (当视频播放时隐藏) -->
+      <swiper v-else class="banner-swiper" circular @change="onSwiperChange" :autoplay="!info.video">
+        <swiper-item v-for="(item, index) in bannerList" :key="index">
+          <image class="banner-img" :src="item" mode="aspectFill"></image>
+        </swiper-item>
+      </swiper>
+      
+      <!-- 居中的视频播放大图标 (当视频播放时隐藏) -->
+      <image 
+        v-if="info.video && !isVideoPlaying" 
+        class="center-play-icon" 
+        src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/bb720bb0-4ada-49f6-9ce5-38abfd613d5d.png" 
+        @click="playVideoInPlace"
+      ></image>
+      
+      <!-- 视频/图片 相册切换组件 (当视频播放时隐藏) -->
+      <view class="album" v-if="(info.video || bannerList.length > 0) && !isVideoPlaying">
+        <view class="album-left" @click="info.video ? playVideoInPlace() : goAlbum()">
+          {{ info.video ? "视频" : "图片" }}
+        </view>
+        <view class="album-line"></view>
+        <view class="album-right" @click="goAlbum">
+          <view class="album-right-text">相册</view>
+          <image src="/static/images/icons/right7_13.png" class="album-right-img"></image>
+        </view>
+      </view>
+      
+      <!-- 指示器 (当视频播放时隐藏) -->
+      <view class="indicator" v-if="!isVideoPlaying && bannerList.length > 0">
+        <text>{{ currentBannerIndex + 1 }} / {{ bannerList.length }}</text>
+      </view>
+    </view>
+
+    <view class="intro-section" v-if="info.name">
+      <view class="section-title">品牌介绍</view>
+      <view class="intro-content" :class="{ 'is-expanded': isExpanded }">
+        <text class="intro-text">{{ info.detail || '暂无品牌介绍' }}</text>
+      </view>
+      <view class="expand-btn" @click="toggleExpand" v-if="info.detail && info.detail.length > 100">
+        <text class="expand-text">{{ isExpanded ? '收起查看' : '展开查看' }}</text>
+        <view class="arrow" :class="{ 'up': isExpanded }"></view>
+      </view>
+    </view>
+
+    <block v-if="showTabSection">
+      <view class="divider-bg"></view>
+      <view class="tab-section">
+        <view class="tab-header">
+          <view 
+            class="tab-item" 
+            v-for="(tab, index) in availableTabs" 
+            :key="tab.key"
+            :class="{ active: activeTab === index }"
+            @click="switchTab(index)"
+          >
+            <!-- 加上 class="tab-text" 以便控制层级 -->
+            <text class="tab-text">{{ tab.name }}</text>
+            <view v-if="activeTab === index" class="active-line"></view>
+          </view>
+        </view>
+        
+        <view class="tab-content" v-if="availableTabs[activeTab]">
+          <rich-text :nodes="availableTabs[activeTab].content"></rich-text>
+        </view>
+      </view>
+    </block>
+
+    <view class="divider-bg"></view>
+
+    <view class="form-section">
+      <!-- 动态标题：当选中学员招募时显示"立即咨询"，否则显示"在线留言" -->
+      <view class="section-title">{{ activeTabKey === 'student' ? '立即咨询' : '在线留言' }}</view>
+      
+      <view class="form-list">
+        <view class="form-item">
+          <view class="label"><text class="required">*</text>姓名</view>
+          <input class="input-el" v-model="formData.contact_name" placeholder="请输入您的姓名" placeholder-class="ph-style" />
+        </view>
+        
+        <view class="form-item">
+          <view class="label"><text class="required">*</text>手机号码</view>
+          <input class="input-el" type="number" maxlength="11" v-model="formData.contact_phone" placeholder="请输入您的手机号码" placeholder-class="ph-style" />
+        </view>
+        
+        <view class="form-item">
+          <view class="label"><text class="required">*</text>所在城市</view>
+          <!-- 替换为复用的弹窗选择器 -->
+          <view class="picker-el" @click="chooseLocation">
+            <view class="picker-value" :class="{ 'has-val': cityNameText }">
+              {{ cityNameText || '请选择省、市/区' }}
+              <view class="arrow-right"></view>
+            </view>
+          </view>
+        </view>
+        
+        <view class="form-item">
+          <view class="label"><text class="required">*</text>意向</view>
+          <picker class="picker-el" :range="intentionOptions" range-key="label" @change="onIntentionChange">
+            <view class="picker-value" :class="{ 'has-val': intentionText }">
+              {{ intentionText || '请选择您的意向' }}
+              <view class="arrow-right"></view>
+            </view>
+          </picker>
+        </view>
+        
+        <view class="form-item border-none" v-if="formData.intention === 1">
+          <view class="label"><text class="required">*</text>其他意向</view>
+          <input class="input-el" v-model="formData.intention_other" placeholder="请填写您的其他意向" placeholder-class="ph-style" />
+        </view>
+      </view>
+
+      <button class="submit-btn" :class="{ 'is-active': canSubmit }" @click="submitForm">提交</button>
+    </view>
+
+    <!-- 所在地省市区选择复用弹窗 -->
+    <view class="popup" :class="{ show: showLocationPopupFlag }">
+      <view class="popup-mask" @click="hideLocationPopup"></view>
+      <view class="popup-content">
+        <view class="popup-header">
+          <text class="popup-title">选择所在地</text>
+          <text class="popup-close" @click="hideLocationPopup">×</text>
+        </view>
+        <view class="region-body">
+          <picker-view @change="bindChangeLocation"
+            class="picker-scroll"
+            :indicator-style="indicatorStyle"
+            :value="locationValue">
+            <picker-view-column>
+              <view class="picker-item" v-for="(item,index) in ChinaCitys" :key="index">{{item.province}}</view>
+            </picker-view-column>
+            <picker-view-column>
+              <view class="picker-item" v-for="(item,index) in locatinCitys" :key="index">{{item.city}}</view>
+            </picker-view-column>
+            <picker-view-column>
+              <view class="picker-item" v-for="(item,index) in locationAreas" :key="index">{{item.area}}</view>
+            </picker-view-column>
+          </picker-view>
+        </view>
+        <view class="popup-footer">
+          <view class="popup-btn cancel" @click="hideLocationPopup">
+            <text class="btn-text">取消</text>
+          </view>
+          <view class="popup-btn confirm" @click="confirmLocationSelect">
+            <text class="btn-text">确定</text>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <tipsPopup2 :show="tipShow" @closePopup="closePopup" sureText="确认" @okBtn="okBtn">
+      {{ tipsText }}
+    </tipsPopup2>
+
+  </view>
+</template>
+
+<script>
+import request from "@/utils/request";
+import CustomNavbar from "@/components/custom-navbar/custom-navbar.vue";
+import tipsPopup2 from "@/components/tips-popup/tips-popup2";
+import ChinaCitys from "@/static/data/ChinaCitys.json"; 
+
+export default {
+  components: {
+    CustomNavbar,
+    tipsPopup2 // 注册弹窗组件
+  },
+  data() {
+    return {
+      // 模拟数据开关
+      useMockData: false, 
+      
+      brandId: null, 
+      info: {},      
+      bannerList: [], 
+
+      // ====== 收藏和登录相关的状态 ======
+      isLogin: false, // 登录状态
+      tipShow: false, // 弹窗控制
+      tipsText: "",   // 弹窗提示文本
+      tipType: "",    // 弹窗类型判断
+
+      isCollected: false, // 是否已收藏
+      // 未收藏时的灰色星星
+      iconCollectOff: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/561715a5-3de0-49f3-80e4-2662febec500.png', 
+      // 已收藏时的粉色星星
+      iconCollectOn: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/fe2011b0-a34d-46ee-911a-0ea6f099ad77.png',
+      // ==================================
+      
+      isVideoPlaying: false, // 是否正在就地播放视频
+      phoneIconTop: 20,      // 顶部电话图标初始Top
+      phoneIconRight: 50,    // 顶部电话图标初始Right
+      
+      currentBannerIndex: 0,
+      isExpanded: false,
+      activeTab: 0,
+      
+      // 省市区选择器相关数据
+      showLocationPopupFlag: false,
+      indicatorStyle: 'height: 68rpx;',
+      ChinaCitys: [],
+      locatinCitys: [],
+      locationAreas: [],
+      locationValue: [0, 0, 0],
+
+      formData: {
+        id: null,
+        intention: '',        
+        intention_other: '',  
+        contact_name: '',     
+        contact_phone: '',    
+        province_code: '',    
+        city_code: '',        
+        area_code: ''         
+      },
+      
+      cityNameText: '',  
+      intentionText: '', 
+      
+      intentionOptions: [
+        { value: 2, label: '品牌加盟' },
+        { value: 3, label: '购买产品' },
+        { value: 4, label: '技能学习' },
+        { value: 1, label: '其它意向' }
+      ]
+    };
+  },
+  computed: {
+    // 获取当前选中的 tab 的 key，用于判断标题
+    activeTabKey() {
+      return this.availableTabs[this.activeTab]?.key || '';
+    },
+    availableTabs() {
+      const tabs = [];
+      
+      // 处理富文本图片和小程序样式丢失的绝佳方法
+      const formatRichText = (html) => {
+        if (!html) return '<div style="color:#999;font-size:13px;text-align:center;">暂无详细说明</div>';
+        
+        let newHtml = html.replace(/<img[^>]*>/gi, function(match) {
+          match = match.replace(/style\s*=\s*["'][^"']*["']/gi, ''); 
+          return match.replace(/<img/gi, '<img style="max-width:100%; height:auto; display:block; border-radius:20rpx; margin:8px 0;"');
+        });
+        
+        newHtml = newHtml.replace(/<p[^>]*>/gi, '<p style="margin-bottom: 0px; line-height: 1.6; word-break: break-all;">');
+        return newHtml;
+      };
+
+      if (this.info.franchise_state === 1) {
+        tabs.push({
+          key: 'franchise',
+          name: '加盟商招募',
+          content: formatRichText(this.info.franchise_recruit)
+        });
+      }
+      if (this.info.student_state === 1) {
+        tabs.push({
+          key: 'student',
+          name: '学员招募',
+          content: formatRichText(this.info.student_recruit)
+        });
+      }
+      return tabs;
+    },
+    showTabSection() {
+      return this.availableTabs.length > 0;
+    },
+    canSubmit() {
+      const d = this.formData;
+      const baseValid = d.contact_name && d.contact_phone && d.province_code && d.city_code && d.area_code && d.intention;
+      if (d.intention === 1) {
+        return baseValid && d.intention_other;
+      }
+      return baseValid;
+    }
+  },
+  onLoad(options) {
+    if (options && options.id) {
+      this.brandId = parseInt(options.id, 10);
+      this.formData.id = this.brandId;
+    }
+
+    // 初始化省市区数据
+    this.ChinaCitys = ChinaCitys;
+    if (this.ChinaCitys && this.ChinaCitys.length > 0) {
+      this.locatinCitys = this.ChinaCitys[0].citys;
+      this.locationAreas = this.locatinCitys[0].areas;
+    }
+
+    this.initNavLayout();
+    this.getBrandDetails();
+  },
+  onShow() {
+    // 每次进入页面时，根据 accessToken 刷新登录状态，就像 my-page 里面写的一样
+    this.isLogin = uni.getStorageSync("accessToken") ? true : false;
+  },
+  methods: {
+    //  弹窗组件相关方法 
+    closePopup() {
+      this.tipShow = false;
+    },
+    okBtn() {
+      if (this.tipType == "login") {
+        uni.navigateTo({
+          url: "/pages/blogPopup/blogPopup", // 你们项目真实的登录页
+        });
+      }
+      this.tipShow = false; // 点击确认后关闭弹窗
+    },
+
+    // 点击右上角星星触发收藏/取消收藏
+    toggleCollectStatus() {
+      // 1. 调用你们自己的未登录弹窗逻辑
+      if (!this.isLogin) {
+        this.tipsText = "您现在还未登录，是否确定登录？";
+        this.tipShow = true;
+        this.tipType = "login";
+        return; // 拦截请求，不再往下执行
+      }
+
+      // 2. 逻辑判断
+      if (!this.brandId) return;
+      const targetState = this.isCollected ? 2 : 1; 
+      
+      // 3. 模拟环境 (Mock)
+      if (this.useMockData) {
+        this.isCollected = !this.isCollected;
+        uni.showToast({ title: this.isCollected ? '收藏成功(Mock)' : '已取消收藏(Mock)', icon: 'none' });
+        return;
+      }
+
+      // 4. 发送真实请求
+      uni.showLoading({ title: '处理中...', mask: true });
+      request.post("/sj/brand/collect", {
+        id: this.brandId,
+        state: targetState
+      }).then((res) => {
+        if (res.code == 200) {
+          this.isCollected = !this.isCollected;
+          uni.showToast({ 
+            title: this.isCollected ? '收藏成功' : '已取消收藏', 
+            icon: 'none' 
+          });
+        } else {
+          uni.showToast({ title: res.msg || '操作失败', icon: 'none' });
+        }
+      }).catch((err) => {
+        console.error('收藏接口异常', err);
+        // 既然拦截成功了，如果这里还是报错，那才是真正的网络不顺畅
+        uni.showToast({ title: '网络不太顺畅，请稍后再试', icon: 'none' });
+      }).finally(() => {
+        uni.hideLoading();
+      });
+    },
+
+    // 地区选择器相关方法
+    chooseLocation() {
+      this.showLocationPopupFlag = true;
+    },
+    hideLocationPopup() {
+      this.showLocationPopupFlag = false;
+    },
+    bindChangeLocation(e) {
+      this.locationValue = e.detail.value;
+      let index1 = e.detail.value[0] || 0;
+      let index2 = e.detail.value[1] || 0;
+      this.locatinCitys = this.ChinaCitys[index1].citys;
+      this.locationAreas = this.locatinCitys[index2].areas;
+    },
+    confirmLocationSelect() {
+      let valueArr = this.locationValue;
+      let index1 = valueArr[0] || 0;
+      let index2 = valueArr[1] || 0;
+      let index3 = valueArr[2] || 0;
+      
+      let province = this.ChinaCitys[index1].province;
+      let city = this.locatinCitys[index2].city;
+      let area = this.locationAreas[index3].area;
+      
+      // 更新展示文本及表单数据
+      this.cityNameText = `${province} / ${city} / ${area}`;
+      this.formData.province_code = province;
+      this.formData.city_code = city;
+      this.formData.area_code = area;
+      
+      this.showLocationPopupFlag = false;
+    },
+
+    initNavLayout() {
+      let sysInfo = uni.getSystemInfoSync();
+      // NavBar 通常高度是 44px，悬浮容器设置为 40px 高，居中 Y 为 +2px
+      let top = (sysInfo.statusBarHeight || 0) + 2; 
+      // 默认距离右侧边距
+      let right = 50; 
+      
+      // #ifdef MP-WEIXIN
+      let menuBtn = uni.getMenuButtonBoundingClientRect();
+      if (menuBtn) {
+        top = menuBtn.top + (menuBtn.height / 2) - 20; 
+        // 算出胶囊左侧的可用空间，再留出右侧搜索图标的距离(通常再向左偏移 45px 左右)
+        right = sysInfo.windowWidth - menuBtn.left + 45; 
+      }
+      // #endif
+      
+      this.phoneIconTop = top;
+      this.phoneIconRight = right;
+    },
+
+    // 拨打电话面板
+    makeCall() {
+      // 兼容可能存在的多种手机号字段
+      const phone = this.info.contact_phone || ''; 
+      if (phone) {
+        uni.makePhoneCall({
+          phoneNumber: String(phone),
+          fail: (err) => {
+            console.log('取消拨打或拨打失败', err);
+          }
+        });
+      } else {
+        uni.showToast({ title: '暂无联系电话', icon: 'none' });
+      }
+    },
+
+    goAlbum() {
+      uni.navigateTo({
+        url: `/pages/album/index?id=${this.brandId}&user_type=2`
+      });
+    },
+
+    // 就地播放视频
+    playVideoInPlace() {
+      this.isVideoPlaying = true;
+    },
+
+    // 悬浮按钮切换 Mock 数据
+    toggleMockData() {
+      this.useMockData = !this.useMockData;
+      uni.showToast({ title: this.useMockData ? 'Mock已开启' : 'Mock已关闭', icon: 'none' });
+      this.getBrandDetails();
+    },
+
+    getBrandDetails() {
+      this.isVideoPlaying = false; // 每次刷新数据重置播放状态
+      if (this.useMockData) {
+        this.injectMockData();
+        return;
+      }
+
+      uni.showLoading({ title: '加载中...' });
+      request.post("/sj/brand/details", { 
+        id: this.brandId 
+      }).then((res) => {
+        if (res.code == 200 && res.data) {
+          this.info = res.data;
+          // 初始化收藏状态 (假设后端返回 1 为已收藏)
+          this.isCollected = res.data.collect_state === 1;
+          this.parseBanners();
+        } else {
+          uni.showToast({ title: res.msg || '获取详情失败', icon: 'none' });
+        }
+      }).catch((err) => {
+        console.error('获取品牌详情异常', err);
+      }).finally(() => {
+        uni.hideLoading();
+      });
+    },
+
+    injectMockData() {
+      this.info = {
+        name: '蜜丝卡伦美甲美睫',
+        contact_phone: '400-888-8888', 
+        video: 'https://vjs.zencdn.net/v/oceans.mp4', 
+        banner_imgs: [
+          'https://images.unsplash.com/photo-1610992015732-2449b76344bc?ixlib=rb-4.0.3&auto=format&fit=crop&w=750&q=80',
+          'https://images.unsplash.com/photo-1522337660859-02fbefca4702?ixlib=rb-4.0.3&auto=format&fit=crop&w=750&q=80'
+        ],
+        detail: '内容支持文本/图片上传(后台动态配置)——右侧支持图文/上传图片后转轮播。品牌优势、产品详情、常见问题、发展历程、品牌案例展示区等位。\n\n本品牌深耕行业多年，秉持匠心初心，不断为行业核心发展赋能，专注打造高品质、高性价比、契合大众需求的优质产品。\n品牌经验和可复制性开店闭环模型，从培训、选址、开店扶持到后期运营，展现老牌一站式辅导，并提供职业赋能，成就门店长效盈利、持久发展的秘诀。\n强大的自有生产供应链与专业团队，研发高端前沿技术，保证出新频率与前沿审美，满足各年龄段、覆盖不同场景下的多元使用诉求。\n自创立以来，品牌以真诚口碑立足市场，坚守诚信经营初心。积极致力于打造消费者、加盟商和社会大众三方信任的美业服务管家，获得广大用户信赖与认可。\n未来我们将持续坚守初心，优质服务升级，以更高标准打造全线产品，致力成为行业内极具竞争力与用户信赖的国民品牌，为广大用户传递更自信、更优质的变美体验。\n自创立以来，品牌以真诚口碑立足市场，坚守诚信经营初心，用心服务每一位消费者，凭借稳定出众的产品实力与贴心完善的售后保障，收获万千用户信赖与认可。自创立以来，品牌以真诚口碑立足市场，坚守诚信经营初心，用心服务每一位消费者，凭借稳定出众的产品实力与贴心完善的销售后保障，收获万千用户信赖与认可。',
+        franchise_state: 1,
+        franchise_recruit: `
+          <p>内容支持文本/图片上传(由后台动态化配置)——支持右侧上传视频/上传图片转轮播。品牌优势、产品详情、常见问题、发展历程、品牌案例/展示区等位。</p>
+          <img src="https://images.unsplash.com/photo-1604654894610-df63bc536371?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" />
+        `,
+        student_state: 1,
+        student_recruit: `<p>学员招募介绍区域...</p>`
+      };
+      this.parseBanners();
+    },
+
+    parseBanners() {
+      if (!this.info.banner_imgs) {
+        this.bannerList = this.info.cover_img ? [this.info.cover_img] : ['https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/6744da30-1cef-40ec-8274-f6395b530fe8.png'];
+        return;
+      }
+      try {
+        if (typeof this.info.banner_imgs === 'string') {
+          if (this.info.banner_imgs.includes(',')) {
+            this.bannerList = this.info.banner_imgs.split(',');
+          } else {
+            this.bannerList = JSON.parse(this.info.banner_imgs);
+          }
+        } else if (Array.isArray(this.info.banner_imgs)) {
+          this.bannerList = this.info.banner_imgs;
+        }
+      } catch (e) {
+        this.bannerList = [this.info.cover_img];
+      }
+    },
+
+    onSwiperChange(e) {
+      this.currentBannerIndex = e.detail.current;
+    },
+    toggleExpand() {
+      this.isExpanded = !this.isExpanded;
+    },
+    switchTab(index) {
+      this.activeTab = index;
+    },
+    
+    onIntentionChange(e) {
+      const selectItem = this.intentionOptions[e.detail.value];
+      this.intentionText = selectItem.label;
+      this.formData.intention = selectItem.value;
+    },
+
+    submitForm() {
+      if (!this.canSubmit) {
+        uni.showToast({ title: '请填写完整必填信息', icon: 'none' });
+        return;
+      }
+      
+      if (!/^1[3-9]\d{9}$/.test(this.formData.contact_phone)) {
+        uni.showToast({ title: '请输入合法的手机号码', icon: 'none' });
+        return;
+      }
+
+      if (this.useMockData) {
+        uni.showToast({ title: '模拟环境下留言提交成功！', icon: 'success' });
+        this.resetForm();
+        return;
+      }
+
+      uni.showLoading({ title: '正在提交...', mask: true });
+      request.post("/sj/brand/consult", this.formData).then((res) => {
+        if (res.code == 200) {
+          uni.showToast({ title: '留言提交成功！', icon: 'success', duration: 2000 });
+          this.resetForm();
+        } else {
+          uni.showToast({ title: res.msg || '提交失败', icon: 'none' });
+        }
+      }).catch((err) => {
+        uni.showToast({ title: '网络不太顺畅，请稍后再试', icon: 'none' });
+      }).finally(() => {
+        uni.hideLoading();
+      });
+    },
+    
+    resetForm() {
+      this.formData = {
+        id: this.brandId,
+        intention: '',
+        intention_other: '',
+        contact_name: '',
+        contact_phone: '',
+        province_code: '',
+        city_code: '',
+        area_code: ''
+      };
+      this.cityNameText = '';
+      this.intentionText = '';
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.brand-detail-page {
+  background-color: #ffffff;
+  min-height: 100vh;
+  padding-bottom: 80rpx;
+  box-sizing: border-box;
+  position: relative;
+}
+
+/* 导航栏左侧新增动态拨号图标 */
+.nav-phone-wrap {
+  position: fixed;
+  z-index: 9999;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 0.2s;
+  
+  &:active {
+    opacity: 0.7;
+  }
+  
+  .nav-phone-icon {
+    width: 44rpx;
+    height: 44rpx;
+  }
+}
+
+/* 模拟数据悬浮按钮 */
+.mock-switch {
+  position: fixed;
+  right: 20rpx;
+  top: 200rpx;
+  background: #E5505F;
+  color: #fff;
+  font-size: 24rpx;
+  padding: 10rpx 20rpx;
+  border-radius: 30rpx;
+  z-index: 999;
+  box-shadow: 0 4rpx 10rpx rgba(229, 80, 95, 0.4);
+}
+
+/* 1. 轮播图 / 视频 */
+.banner-section {
+  position: relative;
+  width: 100%;
+  height: 421rpx;
+  background-color: #f5f5f5;
+  
+  .banner-video {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+  
+  .banner-swiper {
+    width: 100%;
+    height: 100%;
+  }
+  
+  .banner-img {
+    width: 100%;
+    height: 100%;
+  }
+  
+  .center-play-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 120rpx;
+    height: 120rpx;
+    z-index: 20;
+    transition: opacity 0.3s;
+    
+    &:active {
+      opacity: 0.8;
+    }
+  }
+  
+  .album {
+    position: absolute;
+    bottom: 10rpx;
+    left: 20rpx;
+    height: 44rpx;
+    width: 184rpx;
+    background: rgba(0, 0, 0, 0.4);
+    border-radius: 23rpx;
+    display: flex;
+    align-items: center;
+    z-index: 10;
+    
+    .album-left {
+      width: 73rpx;
+      height: 44rpx;
+      background: #FFFFFF;
+      border-radius: 23rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 400;
+      font-size: 22rpx;
+      color: #333333;
+    }
+
+    .album-line {
+      width: 2rpx;
+      height: 20rpx;
+      background: #A09C9E;
+      border-radius: 1rpx;
+      margin: 0 18rpx;
+    }
+
+    .album-right {
+      display: flex;
+      align-items: center;
+      height: 44rpx;
+
+      .album-right-text {
+        font-weight: 400;
+        font-size: 22rpx;
+        color: #FFFFFF;
+      }
+
+      .album-right-img {
+        width: 8rpx;
+        height: 16rpx;
+        margin-left: 8rpx;
+      }
+    }
+  }
+  
+  .indicator {
+    position: absolute;
+    right: 20rpx;
+    bottom: 10rpx;
+    background: #0000003b;
+    color: #ffffff;
+    font-size: 22rpx;
+    font-weight: 500;
+    padding: 8rpx 24rpx;
+    border-radius: 26rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+/* 2. 品牌介绍 */
+.intro-section {
+  padding: 40rpx 30rpx;
+  
+  .section-title {
+    font-weight: 500;
+    font-size: 30rpx;
+    color: #333333;
+    line-height: 42rpx;
+    margin-bottom: 24rpx;
+  }
+  
+  .intro-content {
+    font-weight: 400;
+    font-size: 26rpx;
+    color: #333333;
+    line-height: 37rpx;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 19;
+    overflow: hidden;
+    white-space: pre-line; 
+    
+    &.is-expanded {
+      -webkit-line-clamp: 9999;
+    }
+  }
+  
+  .expand-btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 30rpx;
+    padding: 10rpx 40rpx;
+    border-radius: 27rpx;
+    border: 1rpx solid #C4C4C4;
+    width: fit-content;
+    margin-left: auto;
+    margin-right: auto;
+    
+    .expand-text {
+      font-weight: 400;
+      font-size: 24rpx;
+      color: #333333;
+      line-height: 33rpx;
+      margin-right: 8rpx;
+    }
+    
+    .arrow {
+      margin-bottom: -2rpx;
+      width: 10rpx;
+      height: 10rpx;
+      border-right: 2rpx solid #999999;
+      border-bottom: 2rpx solid #999999;
+      transform: rotate(45deg) translateY(-2rpx);
+      transition: transform 0.2s ease;
+      
+      &.up {
+        transform: rotate(-135deg) translateY(2rpx);
+      }
+    }
+  }
+}
+
+.divider-bg {
+  width: 100%;
+  height: 16rpx;
+  background-color: #F8F8F8;
+}
+
+/* 3. 招募详情 Tab */
+.tab-section {
+  padding: 0 30rpx 40rpx;
+  
+  .tab-header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 30rpx 0 0 0;
+    gap: 120rpx;
+    margin-bottom: 10rpx;
+    
+    .tab-item {
+      font-weight: 400;
+      font-size: 28rpx;
+      color: #666666;
+      line-height: 40rpx;
+      position: relative;
+      padding-bottom: 16rpx;
+      transition: all 0.2s;
+      
+      &.active {
+        font-weight: 500;
+        font-size: 30rpx;
+        color: #000000;
+      }
+
+      .tab-text {
+        position: relative;
+        z-index: 2;
+      }
+      
+      .active-line {
+        position: absolute;
+        bottom: 20rpx;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 100%;
+        height: 14rpx;
+        background: url('https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/6ea51769-911f-44e7-ae22-55f62e8bfdb9.png') no-repeat center center;
+        background-size: 100% 100%;
+        border-radius: 4rpx;
+        z-index: 1;
+      }
+    }
+  }
+  
+  .tab-content {
+    font-weight: 400;
+    font-size: 26rpx;
+    color: #333333;
+    line-height: 37rpx;
+    
+    ::v-deep img {
+      max-width: 100% !important;
+      height: auto !important;
+      display: block;
+      border-radius: 12rpx;
+      margin: 20rpx 0;
+    }
+    
+    ::v-deep p, ::v-deep div {
+      margin-bottom: 24rpx;
+      line-height: 1.6;
+    }
+  }
+}
+
+/* 4. 在线留言表单 */
+.form-section {
+  padding: 40rpx 30rpx;
+  
+  .section-title {
+    font-weight: 500;
+    font-size: 30rpx;
+    color: #333333;
+    line-height: 42rpx;
+    margin-bottom: 20rpx;
+  }
+  
+  .form-list {
+    .form-item {
+      display: flex;
+      align-items: center;
+      min-height: 104rpx;
+      border-bottom: 1rpx solid #F5F5F5;
+      
+      &.border-none {
+        border-bottom: none;
+      }
+      
+      .label {
+        width: 190rpx;
+        font-size: 28rpx;
+        color: #333333;
+        line-height: 40rpx;
+        
+        .required {
+          color: #E5505F;
+          margin-right: 3rpx;
+        }
+      }
+      
+      .input-el, .picker-el {
+        flex: 1;
+        font-size: 28rpx;
+        color: #333333;
+      }
+      
+      .ph-style {
+        color: #C4C4C4;
+      }
+      
+      .picker-value {
+        color: #CCCCCC;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        
+        &.has-val {
+          color: #333333;
+        }
+        
+        .arrow-right {
+          width: 12rpx;
+          height: 12rpx;
+          border-top: 2rpx solid #CCCCCC;
+          border-right: 2rpx solid #CCCCCC;
+          transform: rotate(45deg);
+        }
+      }
+    }
+  }
+  
+  .submit-btn {
+    margin-top: 60rpx;
+    width: 100%;
+    height: 88rpx;
+    line-height: 88rpx;
+    background-color: #DBDBDB;
+    color: #fff;
+    font-size: 30rpx;
+    border-radius: 44rpx;
+    text-align: center;
+    border: none;
+    transition: all 0.2s ease;
+    
+    &::after {
+      border: none;
+    }
+    
+    &.is-active {
+      background-color: #FF4767; 
+      color: #FFFFFF;
+      box-shadow: 0 8rpx 16rpx rgba(229, 80, 95, 0.15);
+    }
+  }
+}
+
+/* ================= 地区选择弹窗复用样式 ================= */
+.popup {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999; /* 层级调高，防止被挡住 */
+  visibility: hidden;
+  opacity: 0;
+  transition: all 0.3s ease;
+}
+
+.popup.show {
+  visibility: visible;
+  opacity: 1;
+}
+
+.popup-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.popup-content {
+  position: relative;
+  background-color: #FFFFFF;
+  border-radius: 24rpx 24rpx 0 0;
+  padding: 32rpx;
+  transform: translateY(100%);
+  transition: transform 0.3s ease;
+}
+
+.popup.show .popup-content {
+  transform: translateY(0);
+}
+
+.popup-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20rpx;
+}
+
+.popup-title {
+  font-size: 32rpx;
+  color: #333333;
+  font-weight: 500;
+}
+
+.popup-close {
+  font-size: 40rpx;
+  color: #999999;
+  padding: 16rpx;
+}
+
+.region-body {
+  flex: 1;
+  overflow: hidden;
+}
+
+.picker-scroll {
+  height: 400rpx;
+}
+
+.picker-item {
+  height: 68rpx;
+  line-height: 68rpx;
+  text-align: center;
+  font-size: 28rpx;
+  color: #333;
+}
+
+.popup-footer {
+  display: flex;
+  margin-top: 32rpx;
+}
+
+.popup-btn {
+  flex: 1;
+  height: 88rpx;
+  border-radius: 44rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 16rpx;
+}
+
+.popup-btn.cancel {
+  background-color: #F5F5F5;
+}
+
+.popup-btn.confirm {
+  background: linear-gradient(90deg, #ff6d77 0%, #FF618F 100%);
+}
+
+.popup-btn .btn-text {
+  font-size: 32rpx;
+  font-weight: 500;
+}
+
+.popup-btn.cancel .btn-text {
+  color: #666666;
+}
+
+.popup-btn.confirm .btn-text {
+  color: #FFFFFF;
+}
+</style>
\ No newline at end of file
diff --git a/utils/request.js b/utils/request.js
index ff89727..5f05fbc 100644
--- a/utils/request.js
+++ b/utils/request.js
@@ -135,8 +135,8 @@ const request = async (options, isUpdate) => {
 
 	if (process.env.NODE_ENV === 'development') {
 		baseURL = url; // 发布到生产环境时，此处代码会被摇树移除掉。	
-		baseURL = 'http://60.247.146.5:93'; // 发布到生产环境时，此处代码会被摇树移除掉。
-		//baseURL = 'http://60.247.146.5:96'; // 发布到生产环境时，此处代码会被摇树移除掉。
+		baseURL = 'http://116.63.163.121:93'; // 发布到生产环境时，此处代码会被摇树移除掉。
+		//baseURL = 'http://116.63.163.121:96'; // 发布到生产环境时，此处代码会被摇树移除掉。
 		//baseURL = 'https://app.mrrweb.com.cn';
 	} else {
 		baseURL = url; // 发布到生产环境时，此处代码会被摇树移除掉。