Xurh
/
ss_dc_wechat_mini_program_h5


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501
							<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />
    <title>变动情况</title>
    <script src="/js/mp_base/base.js"></script>
    <style>
      [v-cloak] {
        display: none !important;
      }

      #app {
        background: #f5f5f5;
        min-height: 100vh;
      }

      .loading {
        min-height: 40vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 32px 16px;
      }

      .loading-spinner {
        width: 30px;
        height: 30px;
        border: 3px solid #e8f3ed;
        border-top-color: #40ac6d;
        border-radius: 50%;
        animation: page-spin 0.9s linear infinite;
      }

      @keyframes page-spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

      .status-wrap {
        padding: 16px;
      }

      .status-card {
        background: #fff;
        border-radius: 8px;
        padding: 16px;
        box-sizing: border-box;
      }

      .status-title {
        font-size: 15px;
        font-weight: 600;
        color: #2d3748;
      }

      .status-text {
        margin-top: 8px;
        line-height: 1.6;
        color: #4a5568;
        font-size: 13px;
        word-break: break-all;
      }

      .status-retry {
        margin-top: 12px;
        height: 34px;
        padding: 0 14px;
        border: none;
        border-radius: 4px;
        background: #4a5568;
        color: #fff;
        font-size: 13px;
      }

      .ss-sub-tab {
        min-height: 100vh;
      }

      .ss-sub-tab__content {
        background: #fff;
      }

      .ss-sub-tab__content iframe {
        width: 100%;
        min-height: calc(100vh - 56px);
      }

      /* 变动页签页补充 URL 调试浮层，便于直接查看初始化请求与返回 by xu 2026-03-08 */
      .url-log-fab {
        position: fixed;
        top: 12px;
        right: 12px;
        z-index: 999999;
        min-width: 56px;
        height: 32px;
        border: none;
        border-radius: 16px;
        background: #ff7a00;
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        line-height: 32px;
        padding: 0 12px;
         display: none;
        box-shadow: 0 4px 12px rgba(255, 122, 0, 0.35);
      }

      .url-log-panel {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 116px;
        z-index: 1200;
        background: rgba(36, 40, 53, 0.96);
        color: #fff;
        border-radius: 8px;
        padding: 10px;
        max-height: 42vh;
        overflow: auto;
        box-sizing: border-box;
      }

      .url-log-panel__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
        font-size: 12px;
      }

      .url-log-panel__close {
        border: none;
        background: transparent;
        color: #fff;
        font-size: 14px;
        line-height: 1;
      }

      .url-log-panel__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 8px;
      }

      .url-log-action {
        border: none;
        border-radius: 4px;
        padding: 5px 10px;
        font-size: 12px;
        color: #fff;
        background: rgba(255, 255, 255, 0.16);
      }

      .url-log-panel__body {
        margin: 0;
        white-space: pre-wrap;
        word-break: break-all;
        font-size: 12px;
        line-height: 1.5;
      }
    </style>
  </head>
  <body>
    <div id="app" v-cloak>
      <div v-if="loading" class="loading">
        <div class="loading-spinner"></div>
      </div>

      <div v-else-if="error" class="status-wrap">
        <div class="status-card">
          <div class="status-title">页面加载失败</div>
          <div class="status-text">{{ error }}</div>
          <button class="status-retry" type="button" @click="loadTabList">
            重新加载
          </button>
        </div>
      </div>

      <div v-else-if="!tabList.length" class="status-wrap">
        <div class="status-card">
          <div class="status-title">暂无变动页签</div>
          <div class="status-text">当前接口未返回可展示的页签数据。</div>
        </div>
      </div>

      <!-- 功能说明：临时改为直接走 chkChg，方便对比 child 与非 child 返回差异 by xu 2026-03-08 -->
      <ss-sub-tab
        v-if="!loading && !error && tabList.length > 0"
        :tab-list="tabList"
        :base-params="baseParams"
        @tab-change="handleTabChange"
      >
      </ss-sub-tab>

      <!-- 功能说明：URL 浮层固定独立渲染，避免打断 v-else 链 by xu 2026-03-08 -->
      <button class="url-log-fab" type="button" @click="handleUrlFabClick">
        URL
      </button>
      <div class="url-log-panel" v-if="urlLogVisible">
        <div class="url-log-panel__head">
          <span>初始化信息</span>
          <div>
            <button class="url-log-action" type="button" @click="showCurrentUrls">
              刷新信息
            </button>
            <button class="url-log-panel__close" type="button" @click="urlLogVisible = false">
              ×
            </button>
          </div>
        </div>
        <div class="url-log-panel__actions">
          <button class="url-log-action" type="button" @click="openCurrentUrl('page')">打开页面</button>
          <button class="url-log-action" type="button" @click="copyCurrentUrl('page')">复制页面</button>
          <button class="url-log-action" type="button" @click="openCurrentUrl('tab')">打开Tab</button>
          <button class="url-log-action" type="button" @click="copyCurrentUrl('tab')">复制Tab</button>
        </div>
        <pre class="url-log-panel__body">{{ urlLogText }}</pre>
      </div>
    </div>

    <script>
      window.SS.ready(function () {
        window.SS.dom.initializeFormApp({
          el: '#app',
          data() {
            return {
              pageParams: {},
              loading: false,
              error: '',
              tabList: [],
              baseParams: {},
              urlLogVisible: false,
              urlLogText: '',
              currentPageUrl: '',
              currentTabUrl: '',
              initRequestUrl: '',
              initRequestDataText: '',
              initResponseDataText: '',
              initTabListText: '',
              initBaseParamsText: '',
              initErrorText: '',
            };
          },
          mounted() {
            this.pageParams = this.getUrlParams();
            // 功能说明：补充 chgChkTab 初始化日志，方便直接核对和 PC 的差异 by xu 2026-03-08
            console.log('[mp_chgChkTab] mounted pageParams =', this.pageParams);
            this.loadTabList();
          },
          methods: {
            getUrlParams() {
              const params = {};
              const aliasMap = {
                ssobjname: 'ssObjName',
                ssobjid: 'ssObjId',
                datatype: 'dataType',
              };
              const urlSearchParams = new URLSearchParams(window.location.search);
              for (const [rawKey, rawValue] of urlSearchParams) {
                const decodedValue = this.safeDecode(rawValue);
                params[rawKey] = decodedValue;
                const normalizedKey = aliasMap[String(rawKey).toLowerCase()];
                if (normalizedKey) {
                  params[normalizedKey] = decodedValue;
                }
              }
              console.log('[mp_chgChkTab] getUrlParams result =', params);
              return params;
            },

            safeDecode(text) {
              if (text === undefined || text === null || text === '') return '';
              try {
                return decodeURIComponent(String(text));
              } catch (_) {
                return String(text);
              }
            },

            formatDebugValue(value) {
              if (value === undefined) return '(undefined)';
              if (value === null) return '(null)';
              if (typeof value === 'string') return value || '(empty)';
              try {
                return JSON.stringify(value, null, 2);
              } catch (_) {
                return String(value);
              }
            },

            buildBaseParams() {
              return {
                sqid: this.pageParams.sqid || '',
                shid: this.pageParams.shid || '',
                shyjm: this.pageParams.shyjm || '',
                bdlbm: this.pageParams.bdlbm || '',
                dataType: 'bdplay',
                encode_shid: this.pageParams.encode_shid || '',
                ssObjName: this.pageParams.ssObjName || this.pageParams.ssobjname || '',
                ssObjId: this.pageParams.ssObjId || this.pageParams.ssobjid || '',
                jdmc: this.pageParams.jdmc || '',
                ssToken: this.pageParams.ssToken || '',
              };
            },

            pickTabList(data) {
              if (!data) return [];
              if (Array.isArray(data.tabList)) return data.tabList;
              if (data.data && Array.isArray(data.data.tabList)) return data.data.tabList;
              if (data.ssData && Array.isArray(data.ssData.tabList)) return data.ssData.tabList;
              return [];
            },

            async loadTabList() {
              this.loading = true;
              this.error = '';
              this.tabList = [];
              this.baseParams = this.buildBaseParams();
              this.initErrorText = '';

              try {
                const tagQuery = new URLSearchParams({
                  ssServ: 'tabTag',
                  ssDest: 'data',
                  // 功能说明：临时去掉 child，直接看 chkChg 返回结果 by xu 2026-03-08
                  name: 'chkChg',
                  ssObjName: this.baseParams.ssObjName || '',
                  ssObjId: this.baseParams.ssObjId || '',
                  sqid: this.baseParams.sqid || '',
                  shid: this.baseParams.shid || '',
                  shyjm: this.baseParams.shyjm || '',
                  bdlbm: this.baseParams.bdlbm || '',
                  dataType: 'bdplay',
                  encode_shid: this.baseParams.encode_shid || '',
                  jdmc: this.baseParams.jdmc || '',
                  ssToken: this.baseParams.ssToken || '',
                  service: this.pageParams.service || this.pageParams.ssServ || '',
                  dest: this.pageParams.dest || this.pageParams.ssDest || '',
                  param: this.pageParams.param || '',
                });

                const requestUrl = `/service?${tagQuery.toString()}`;
                this.initRequestUrl = requestUrl;
                this.initRequestDataText = this.formatDebugValue({});
                this.initBaseParamsText = this.formatDebugValue(this.baseParams);
                console.log('[mp_chgChkTab] requestUrl =', requestUrl);
                console.log('[mp_chgChkTab] baseParams =', this.baseParams);

                const response = await request.post(
                  requestUrl,
                  {},
                  { loading: false, formData: true }
                );
                console.log('[mp_chgChkTab] raw response =', response);

                const responseData = response && response.data ? response.data : response;
                this.initResponseDataText = this.formatDebugValue(responseData);
                this.tabList = this.pickTabList(responseData);
                this.initTabListText = this.formatDebugValue(this.tabList);
                console.log('[mp_chgChkTab] responseData =', responseData);
                console.log('[mp_chgChkTab] picked tabList =', this.tabList);

                if (!this.tabList.length) {
                  console.warn('[mp_chgChkTab] tabTag 未返回 tabList =', responseData);
                }
              } catch (error) {
                console.error('[mp_chgChkTab] loadTabList failed =', error);
                this.error = (error && error.message) || '加载失败，请稍后重试';
                this.initErrorText = this.formatDebugValue({
                  message: this.error,
                  stack: error && error.stack,
                  raw: error,
                });
              } finally {
                this.loading = false;
                console.log('[mp_chgChkTab] loading finished, error =', this.error || '(none)');
              }
            },

            getCurrentTabIframeSrc() {
              const frame = document.querySelector('.ss-sub-tab__content iframe');
              return (frame && frame.src) || '';
            },

            getCurrentUrlMap() {
              return {
                page: window.location.href,
                tab: this.getCurrentTabIframeSrc(),
              };
            },

            // 功能说明：右上角 URL 按钮点击后直接展开面板，并复制当前页面地址 by xu 2026-03-08
            async handleUrlFabClick() {
              this.showCurrentUrls();
              try {
                await this.copyText(this.getUrlByType('page'));
                if (typeof showToastEffect === 'function') showToastEffect('当前页面 URL 已复制', 1600, 'success');
              } catch (_) {
                if (typeof showToastEffect === 'function') showToastEffect('当前页面 URL 获取失败', 1800, 'error');
              }
            },

            // 功能说明：点 URL 时同时展示页面 URL 和初始化请求/返回，便于直接截图排查 by xu 2026-03-08
            showCurrentUrls() {
              const currentUrls = this.getCurrentUrlMap();
              this.currentPageUrl = currentUrls.page || '';
              this.currentTabUrl = currentUrls.tab || '';
              this.urlLogText = [
                `page: ${this.currentPageUrl || '(empty)'}`,
                `tab: ${this.currentTabUrl || '(empty)'}`,
                '',
                '[init requestUrl]',
                this.initRequestUrl || '(empty)',
                '',
                '[init requestData]',
                this.initRequestDataText || '(empty)',
                '',
                '[init responseData]',
                this.initResponseDataText || '(empty)',
                '',
                '[init tabList]',
                this.initTabListText || '(empty)',
                '',
                '[init baseParams]',
                this.initBaseParamsText || '(empty)',
                '',
                '[init error]',
                this.initErrorText || '(none)',
              ].join('\n');
              this.urlLogVisible = true;
            },

            getUrlByType(type) {
              const currentUrls = this.getCurrentUrlMap();
              return String(currentUrls[type] || '').trim();
            },

            async copyText(text) {
              const value = String(text || '').trim();
              if (!value) throw new Error('empty');
              if (navigator.clipboard && navigator.clipboard.writeText) {
                await navigator.clipboard.writeText(value);
                return;
              }
              const textarea = document.createElement('textarea');
              textarea.value = value;
              textarea.style.position = 'fixed';
              textarea.style.opacity = '0';
              document.body.appendChild(textarea);
              textarea.focus();
              textarea.select();
              document.execCommand('copy');
              document.body.removeChild(textarea);
            },

            async copyCurrentUrl(type) {
              try {
                await this.copyText(this.getUrlByType(type));
                if (typeof showToastEffect === 'function') showToastEffect('URL 已复制', 1400, 'success');
              } catch (_) {
                if (typeof showToastEffect === 'function') showToastEffect('复制失败', 1800, 'error');
              }
            },

            openCurrentUrl(type) {
              const url = this.getUrlByType(type);
              if (!url) {
                if (typeof showToastEffect === 'function') showToastEffect('当前没有可打开的 URL', 1800, 'warning');
                return;
              }
              const newWindow = window.open(url, '_blank');
              if (!newWindow) {
                window.location.href = url;
              }
            },

            handleTabChange({ index, tab }) {
              console.log('[mp_chgChkTab] 切换页签 =', {
                index,
                tab,
                baseParams: this.baseParams,
              });
              if (this.urlLogVisible) {
                setTimeout(() => this.showCurrentUrls(), 80);
              }
            },
          },
        });
      });
    </script>
  </body>
</html>