Xurh
/
ss_dc_wechat_mini_program_h5


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682
							<!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>
        /* 防止Vue模板闪烁 */
        [v-cloak] {
            display: none !important;
        }

        #app {
            background: #f5f5f5;
            height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: hidden; /* 防止页面级别滚动 */
            box-sizing: border-box; /* 确保padding计算在高度内 */
        }

        /* iframe样式 */
        .top-iframe {
            background: #fff;
            overflow: hidden;
            border: none;
            display: block;
            box-sizing: border-box;
        }

        .bottom-iframe {
            background: #fff;
            overflow: hidden;
            border: none;
            display: block;
            box-sizing: border-box;
        }

        .title{
            flex-shrink: 0;
            box-sizing: border-box;
            font-size: 16px;
            text-align: center;
            /* margin: 16px auto; */
            height: 48px;
            line-height: 48px;
        }

        /* 录入div样式 */
        .review-input-popup {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 50px;
            background: #e6e6e6;
            display: flex;
            align-items: center;
            padding: 0 0 0 10px;
            z-index: 1000;
            transform: translateY(100%);
            transition: transform 0.3s ease;
            box-sizing: border-box;
        }

        .review-input-popup.show {
            transform: translateY(0);
        }

        .review-input-wrapper {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .review-input {
            flex: 1;
            height: 32px;
            border: none;
            padding: 0 10px;
            font-size: 16px;
            background: #fff;
            outline: none;
            box-sizing: border-box;
        }

        .common-phrases-btn {
            padding: 6px 12px;
            background: #fff;
            border: none;
            font-size: 16px;
            color: #333;
            cursor: pointer;
            white-space: nowrap;
            margin-right: 4px;
        }

        .common-phrases-btn:hover {
            background: #e0e0e0;
        }

        .submit-btn {
            box-sizing: border-box;
            height: 50px;
            padding: 6px 16px;
            border: none;
            font-size: 16px;
            color: #fff;
            cursor: pointer;
            white-space: nowrap;
            transition: background-color 0.2s;
        }

        .submit-btn.agree {
            background: #585e6e;
        }

        .submit-btn.agree:active {
            background: #242835;
        }

        .submit-btn.reject {
            background: #e58846;
        }

        .submit-btn.reject:active {
            background: #eb6100;
        }

        /* 常用语popup */
        .common-phrases-popup {
            position: fixed;
            bottom: 50px;
            left: 10px;
            right: 10px;
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
            max-height: 200px;
            overflow-y: auto;
            z-index: 1001;
            display: none;
        }

        .common-phrases-popup.show {
            display: block;
        }

        .phrase-item {
            padding: 12px 16px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            font-size: 14px;
        }

        .phrase-item:hover {
            background: #f8f8f8;
        }

        .phrase-item:last-child {
            border-bottom: none;
        }

        /* 原ss-bottom隐藏 */
        .ss-bottom.hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <div class="title" @click="callApi">
            {{jdmc}}
        </div>
        <!-- 上方iframe - 基本信息区域 -->
        <iframe
            ref="topIframe"
            class="top-iframe"
            :src="`/page/mp_objInfo.html?sqid=${sqid}&shid=${shid}&bdlbm=${bdlbm}&dataType=${dataType}&encode_shid=${encode_shid}&ssObjName=${ssObjName}&ssObjId=${ssObjId}`"
            width="100%"
            frameborder="0">
        </iframe>

        <!-- 下方iframe - 审核列表区域 -->
        <iframe
            ref="bottomIframe"
            class="bottom-iframe"
            :src="`/page/mp_shList.html?sqid=${sqid}&shid=${shid}&bdlbm=${bdlbm}&dataType=${dataType}&encode_shid=${encode_shid}&ssObjName=${ssObjName}&ssObjId=${ssObjId}`"
            width="100%"
            frameborder="0">
        </iframe>

        <!-- 底部按钮 -->
        <ss-bottom
            :show-shyj="false"
            :buttons="bottomButtons"
            @button-click="handleBottomAction"
            :divider="false"
            :disabled="submitting"
            v-if="bottomButtons.length > 0"
        ></ss-bottom>
    </div>

    <script>
        // 等待SS框架加载完成
        window.SS.ready(function () {
            // 使用SS框架的方式创建Vue实例
            window.SS.dom.initializeFormApp({
                el: '#app',
                data() {
                    return {
                        pageParams: {},
                        loading: false,
                        jdmc:'',
                        sqid: '',
                        shid: '',
                        bdlbm: '',
                        dataType:'bdplay',
                        encode_shid:'',
                        ssObjName:'',
                        ssObjId:'',
                        agrCcData: null, // 存储agrCc返回的数据


                        // 底部按钮相关
                        submitting: false,
                        bottomButtons: [],

                        // iframe布局相关
                        layoutCalculated: false,
                        headerSectionHeight: 0,
                        availableHeight: 0,
                        topIframeHeight: 0,
                        bottomIframeHeight: 0,
                        bottomIframeMinHeight: 0,
                        isExpanded: false,

                        // 拖拽相关
                        isDragging: false,
                        dragStartY: 0,
                        dragStartBottomHeight: 0,
                    }
                },
                mounted() {
                    // 获取URL参数
                    this.pageParams = this.getUrlParams()
                    console.log('🔗 mp_ccChk页面接收到参数:', this.pageParams)

                    // 打印所有参数到控制台
                    Object.keys(this.pageParams).forEach(key => {
                        console.log(`参数 ${key}:`, this.pageParams[key])
                    })
                    
                    this.callApi()

                    // 添加iframe消息监听器
                    window.addEventListener('message', this.handleIframeMessage)

                    // 初始化布局计算
                    this.$nextTick(() => {
                        setTimeout(() => {
                            this.initializeLayout()
                        }, 500) // 等待iframe加载完成
                    })
                },
                beforeDestroy() {
                    // 清理事件监听器
                    window.removeEventListener('message', this.handleIframeMessage)
                },
                methods: {
                    // 获取URL参数
                    getUrlParams() {
                        const params = {}
                        const urlSearchParams = new URLSearchParams(window.location.search)
                        for (const [key, value] of urlSearchParams) {
                            params[key] = decodeURIComponent(value)
                        }
                        return params
                    },

                    // 调用API
                    async callApi() {
                        if (!this.pageParams.ssToken) {
                            alert('未找到ssToken参数')
                            return
                        }

                        this.loading = true
                        this.apiResult = null

                        try {
                            console.log('🚀 开始调用API，ssToken:', this.pageParams.ssToken)
                            const apiResponse = await request.post(
                                `/service?ssToken=${this.pageParams.ssToken}`,
                                {},
                                { loading: false }
                            )
                            console.log('✅ 原有API响应:', apiResponse)
                            this.sqid = apiResponse.data.sqid
                            this.shid = apiResponse.data.shid
                            this.ssObjName = apiResponse.data.ssObjName
                            this.ssObjId = apiResponse.data.ssObjId
                            this.bdlbm = apiResponse.data.bdlbm
                            this.jdmc = decodeURIComponent(apiResponse.data.jdmc)


                            console.log('📋 调用dataTag服务获取agrCc数据...')
                            const agrCcResponse = await request.post(
                                `/service?ssServ=dataTag&ssDest=data&name=agrCc&ssObjName=${this.ssObjName}&ssObjId=${this.ssObjId}&sqid=${this.sqid}&shid=${this.shid}&bdlbm=${this.bdlbm}&dataType=${this.dataType}&encode_shid=${this.encode_shid}`,
                                
                                { loading: false,formData:true }
                            )

                            // 保存agrCc数据并设置底部按钮
                            if (agrCcResponse && agrCcResponse.data && agrCcResponse.data.agrCc) {
                                this.agrCcData = agrCcResponse.data.agrCc
                                console.log('📦 agrCc数据:', this.agrCcData)

                                // 根据agrCc数据设置底部按钮
                                this.bottomButtons = [{
                                    text: '确认',
                                    action: 'submit',
                                    backgroundColor: '#585e6e',
                                    color: '#fff',
                                    clickBgColor: '#242835'
                                }]
                            }


                        } catch (error) {
                            console.error('❌ API调用失败:', error)
                        } finally {
                            this.loading = false
                        }
                    },

                    // 处理底部按钮点击
                    handleBottomAction(data) {
                        if (data.action === 'submit') {
                            this.handleConfirm()
                        }
                    },

                    // 处理确认提交
                    async handleConfirm() {
                        if (!this.agrCcData) {
                            alert('缺少必要的配置信息')
                            return
                        }

                        if (this.submitting) return

                        try {
                            this.submitting = true
                            console.log('📝 开始提交...')
                            console.log('📦 提交参数:', {
                                service: this.agrCcData.service,
                                dest: this.agrCcData.dest,
                                shid: this.shid
                            })

                            const response = await request.post(
                                `/service?ssServ=${this.agrCcData.service}&ssDest=${this.agrCcData.dest}`,
                                { shid: this.shid },
                                { loading: true, formData: true }
                            )
                            console.log('✅ 提交成功:', response)

                            
                            NavigationManager.goBack({ refreshParent: true })
                            

                        } catch (error) {
                            console.error('❌ 提交失败:', error)
                            alert('提交失败: ' + (error.message || '未知错误'))
                        } finally {
                            this.submitting = false
                        }
                    },

                    // ===== 布局相关方法 =====
                    // 初始化布局计算
                    initializeLayout() {
                        console.log('🔄 开始初始化布局计算')

                        try {
                            // 获取bottom iframe
                            const bottomIframe = document.querySelector('.bottom-iframe')
                            const bottomWindow = bottomIframe?.contentWindow

                            if (!bottomWindow) {
                                console.error('无法获取bottom iframe的contentWindow')
                                return
                            }

                            // 等待iframe加载完成，然后检查header-section
                            const waitForIframeLoad = () => {
                                if (!bottomIframe.contentWindow) {
                                    console.log('⏳ 等待iframe contentWindow...')
                                    setTimeout(waitForIframeLoad, 100)
                                    return
                                }

                                const bottomWindow = bottomIframe.contentWindow
                                console.log('✅ 获取到iframe contentWindow')

                                // 等待iframe中的DOM加载完成
                                const checkHeaderSection = () => {
                                    try {
                                        const headerSection = bottomWindow.document.querySelector('.header-section')
                                        if (headerSection) {
                                            const headerHeight = headerSection.offsetHeight
                                            console.log('✅ 计算到header-section高度:', headerHeight)

                                            // 计算布局参数
                                            const viewportHeight = window.innerHeight

                                            // 动态获取title的实际高度
                                            const titleElement = document.querySelector('.title')
                                            const actualTitleHeight = titleElement ? titleElement.offsetHeight : 0

                                            // 等待bottom按钮渲染完成并获取实际高度
                                            const checkBottomButton = () => {
                                                try {
                                                    const bottomElement = document.querySelector('ss-bottom')
                                                    const actualBottomHeight = bottomElement ? bottomElement.offsetHeight : 50

                                                    this.headerSectionHeight = headerHeight
                                                    this.bottomIframeMinHeight = headerHeight
                                                    this.availableHeight = viewportHeight - actualTitleHeight - actualBottomHeight

                                                    // 初始状态：底部iframe刚好显示header-section高度
                                                    this.bottomIframeHeight = this.bottomIframeMinHeight
                                                    this.topIframeHeight = this.availableHeight - this.bottomIframeMinHeight
                                                    this.isExpanded = false // 初始为收起状态
                                                    this.layoutCalculated = true

                                                    // 应用计算后的高度
                                                    this.applyIframeHeights()

                                                    console.log('📊 初始布局计算完成（仅显示header-section）:', {
                                                        '视口高度': viewportHeight,
                                                        '标题实际高度': actualTitleHeight,
                                                        '底部按钮实际高度': actualBottomHeight,
                                                        '可用总高度': this.availableHeight,
                                                        'header-section高度': headerHeight,
                                                        '上iframe高度': this.topIframeHeight,
                                                        '下iframe高度': this.bottomIframeHeight,
                                                        'iframe总高度': this.topIframeHeight + this.bottomIframeHeight,
                                                        '是否超限': (this.topIframeHeight + this.bottomIframeHeight) > this.availableHeight,
                                                        '差额': (this.topIframeHeight + this.bottomIframeHeight) - this.availableHeight,
                                                        isExpanded: this.isExpanded
                                                    })
                                                } catch (bottomError) {
                                                    console.error('❌ 获取底部按钮高度时出错:', bottomError)
                                                    // 使用默认高度50px重试
                                                    const defaultBottomHeight = 50
                                                    this.headerSectionHeight = headerHeight
                                                    this.bottomIframeMinHeight = headerHeight
                                                    this.availableHeight = viewportHeight - actualTitleHeight - defaultBottomHeight
                                                    this.bottomIframeHeight = this.bottomIframeMinHeight
                                                    this.topIframeHeight = this.availableHeight - this.bottomIframeMinHeight
                                                    this.isExpanded = false
                                                    this.layoutCalculated = true
                                                    this.applyIframeHeights()
                                                }
                                            }

                                            // 如果bottom按钮还没加载，稍后重试
                                            if (!document.querySelector('ss-bottom')) {
                                                setTimeout(checkBottomButton, 100)
                                            } else {
                                                checkBottomButton()
                                            }
                                        } else {
                                            // 如果还没有加载完成，继续等待
                                            console.log('⏳ 等待header-section加载...')
                                            setTimeout(checkHeaderSection, 100)
                                        }
                                    } catch (error) {
                                        console.error('❌ 访问iframe DOM时出错:', error)
                                        console.log('⏳ 重试中...')
                                        setTimeout(checkHeaderSection, 200)
                                    }
                                }

                                checkHeaderSection()
                            }

                            waitForIframeLoad()

                        } catch (error) {
                            console.error('❌ 布局初始化失败:', error)
                        }
                    },

                    // 应用iframe高度
                    applyIframeHeights() {
                        const topIframe = document.querySelector('.top-iframe')
                        const bottomIframe = document.querySelector('.bottom-iframe')

                        if (topIframe && bottomIframe) {
                            console.log('📏 设置iframe高度前:', {
                                topIframe: {
                                    currentHeight: topIframe.style.height,
                                    offsetHeight: topIframe.offsetHeight
                                },
                                bottomIframe: {
                                    currentHeight: bottomIframe.style.height,
                                    offsetHeight: bottomIframe.offsetHeight
                                },
                                newTopHeight: this.topIframeHeight,
                                newBottomHeight: this.bottomIframeHeight
                            })

                            // 直接应用新高度到iframe
                            topIframe.style.height = `${this.topIframeHeight}px`
                            bottomIframe.style.height = `${this.bottomIframeHeight}px`

                            console.log('🎯 应用iframe高度:', {
                                top: this.topIframeHeight,
                                bottom: this.bottomIframeHeight
                            })

                            // 强制重新计算iframe内容
                            this.$nextTick(() => {
                                try {
                                    topIframe.contentWindow.dispatchEvent(new Event('resize'))
                                } catch (e) {
                                    // 忽略跨域错误
                                }

                                try {
                                    bottomIframe.contentWindow.dispatchEvent(new Event('resize'))
                                } catch (e) {
                                    // 忽略跨域错误
                                }

                                console.log('✅ iframe高度更新完成')
                            })
                        }
                    },

                    // 快速版本的高度应用，用于拖拽时减少延迟
                    applyIframeHeightsFast() {
                        const topIframe = document.querySelector('.top-iframe')
                        const bottomIframe = document.querySelector('.bottom-iframe')

                        if (topIframe && bottomIframe) {
                            // 直接设置高度，不进行日志和额外的处理
                            topIframe.style.height = `${this.topIframeHeight}px`
                            bottomIframe.style.height = `${this.bottomIframeHeight}px`
                        }
                    },

                    // 计算iframe高度分配
                    calculateHeights(bottomHeight) {
                        // 计算实际可用的bottom iframe高度
                        // 当bottom iframe展开时，可以覆盖top iframe，所以最大高度就是availableHeight
                        // 最小高度不能小于header-section高度
                        const bottomActualHeight = Math.max(
                            this.bottomIframeMinHeight,
                            Math.min(bottomHeight, this.availableHeight)
                        )

                        this.bottomIframeHeight = bottomActualHeight
                        this.topIframeHeight = this.availableHeight - bottomActualHeight

                        console.log('📐 高度分配计算:', {
                            requestedBottom: bottomHeight,
                            availableHeight: this.availableHeight,
                            minBottomHeight: this.bottomIframeMinHeight,
                            actualBottom: this.bottomIframeHeight,
                            actualTop: this.topIframeHeight,
                            isExpanded: this.isExpanded
                        })

                        this.applyIframeHeights()

                        return {
                            top: this.topIframeHeight,
                            bottom: this.bottomIframeHeight
                        }
                    },

                    // 切换展开/收起状态
                    toggleExpand() {
                        if (!this.layoutCalculated) {
                            console.warn('布局尚未计算完成')
                            return
                        }

                        this.isExpanded = !this.isExpanded

                        if (this.isExpanded) {
                            // 展开：bottom iframe占用所有可用高度，覆盖top iframe到title底部
                            // 也就是bottom iframe高度 = availableHeight (title + button之间的所有空间)
                            this.calculateHeights(this.availableHeight)
                            console.log('📈 展开状态 - 覆盖到title底部，高度:', this.availableHeight)
                        } else {
                            // 收起：bottom iframe占用最小高度（header-section高度）
                            this.calculateHeights(this.bottomIframeMinHeight)
                            console.log('📉 收起状态 - 最小高度:', this.bottomIframeMinHeight)
                        }
                    },

                    // 处理来自iframe的消息
                    handleIframeMessage(event) {
                        // 安全检查：只接受同源的消息
                        if (event.origin !== window.location.origin) {
                            return
                        }

                        const { type, data } = event.data

                        switch (type) {
                            case 'header-section-click':
                                console.log('📱 收到header-section点击事件')
                                this.toggleExpand()
                                break
                            case 'header-section-drag-start':
                                console.log('🔄 开始拖拽header-section')
                                this.handleDragStart(data)
                                break
                            case 'header-section-drag-move':
                                console.log('🔄 拖拽中:', data.deltaY)
                                this.handleDragMove(data.deltaY)
                                break
                            case 'header-section-drag-end':
                                console.log('🔚 结束拖拽')
                                this.handleDragEnd()
                                break
                        }
                    },

                    // 处理拖拽开始
                    handleDragStart(data) {
                        if (!this.layoutCalculated) return

                        this.isDragging = true
                        this.dragStartY = data.startY
                        this.dragStartBottomHeight = this.bottomIframeHeight
                    },

                    // 处理拖拽移动
                    handleDragMove(deltaY) {
                        if (!this.isDragging || !this.layoutCalculated) return

                        // 计算新的底部高度
                        const newBottomHeight = this.dragStartBottomHeight - deltaY

                        // 直接设置高度，避免复杂的计算导致的延迟
                        const bottomActualHeight = Math.max(
                            this.bottomIframeMinHeight,
                            Math.min(newBottomHeight, this.availableHeight)
                        )

                        this.bottomIframeHeight = bottomActualHeight
                        this.topIframeHeight = this.availableHeight - bottomActualHeight

                        // 直接应用高度，减少延迟
                        this.applyIframeHeightsFast()
                    },

                    // 处理拖拽结束
                    handleDragEnd() {
                        this.isDragging = false
                        this.dragStartY = 0
                        this.dragStartBottomHeight = 0

                        // 拖拽结束后用完整的方法确保状态正确
                        this.applyIframeHeights()
                    },
                }
            })
        })
    </script>
</body>