busiDetail.js

// 商机详情页面 Vue 应用 - 严格按照Figma设计
const utils = new publicMethod();

new Vue({
    el: '#app',

    data: {
        // 商机详情数据 - 按照设计图中的真实数据
        businessDetail: {
            businessId: 'OP20250928002', // 商机ID
            status: '跟进中', // 状态
            statusDescription: '营销人员 [张三] 将状态变更为跟进中', // 状态描述
            customerAddress: '江苏省淮安市淮安区淮海南路456号', // 客户地址
            customerAccount: '13477895643', // 客户账号
            customerPhone: '155****3344', // 客户电话
            marketerPhone: '131****3564', // 营销人员电话
            marketingTypes: ['宽带升级', '家庭安防'], // 营销类型
            submitTime: '2025-09-26 11:20:00', // 提交时间
            voiceRecords: [
                {
                    duration: '00:04',
                    converted: false,
                    isPlaying: false
                },
                {
                    duration: '00:04',
                    converted: false,
                    isPlaying: false
                }
            ],
            textDescription: '客户家里目前使用的是50兆的宽带，感觉网速有点慢，想要升级到100兆或者200兆。客户还问了一下家庭套餐的情况，想了解一下手机和宽带一起办理有没有优惠。', // 文字描述
            adminNotes: '客户比较倾向于性价比高的方案，建议重点推荐融合套餐', // 管理员备注
            followUpStatus: '跟进中', // 跟进状态
            followUpTime: '2025-09-29 11:10', // 跟进时间
            followUpDescription: '营销人员 [张三] 添加跟进："已上门与客户沟通，客户确认办理融合套餐，待签单。', // 跟进描述
            createTime: '2025-09-29 09:30', // 创建时间
            createDescription: '张师傅 提交了此商机' // 创建描述
        },

        // 页面状态
        isLoading: false,
        isSubmitting: false,

        // 用户信息
        userInfo: null,

        gjStore: {
            isShow: true,

            isLoading: false
        },
        cdStore: {
            isShow: false
        },
        gbStore: {
            isShow: false,

            choArr: [{
                isCho: false,
                value: '客户不感兴趣'
            },{
                isCho: false,
                value: '客户已有类似服务'
            },{
                isCho: false,
                value: '价格原因'
            },{
                isCho: false,
                value: '联系不上客户'
            },{
                isCho: false,
                value: '地址信息错误'
            },{
                isCho: false,
                value: '其他原因'
            }]
        }
    },

    created() {
        // 初始化页面
        this.initializeApp();
    },

    mounted() {
        // 页面加载完成
        console.log('商机详情页面已加载');
    },

    beforeDestroy() {
        // 清理资源
        this.cleanup();
    },

    methods: {
        fileChange(e){
            if(this.gjStore.isLoading){
                return
            }

            let file = e.target.files[0]
            console.log(file)
            if(file.type.includes('image/') <= 0){
                util.toast('请上传图片')
                return
            }

            this.uploadImg(file)
        },
        uploadImg(file){
            let fileFormData = new FormData()
            fileFormData.append('file', file)
            
            this.gjStore.isLoading = true
            return
            util.httpRequest({
                url: '/api/comfyui/uploadImage',
                data: fileFormData
            }).then(res=>{
                this.loading = false
                if(res.code =='200'){
                    this['img'+type] = res.data.name
                }else{
                    util.toast(res.msg)
                }
            })
        },

        /**
         * 初始化应用
         */
        initializeApp() {
            // 获取URL参数
            this.getUrlParams();

            // 获取用户信息
            this.getUserInfo();

            // 加载商机详情
            this.loadBusinessDetail();
        },

        /**
         * 获取URL参数
         */
        getUrlParams() {
            const urlParams = new URLSearchParams(window.location.search);
            this.businessDetail.businessId = urlParams.get('id') || this.businessDetail.businessId;
        },

        /**
         * 获取用户信息
         */
        getUserInfo() {
            try {
                const loginInfo = localStorage.getItem('appLoginInfo');
                if (loginInfo) {
                    this.userInfo = JSON.parse(loginInfo);
                }
            } catch (error) {
                console.error('获取用户信息失败:', error);
            }
        },

        /**
         * 加载商机详情
         */
        async loadBusinessDetail() {
            this.isLoading = true;

            try {
                // 模拟API调用 - 实际项目中替换为真实API
                await this.simulateAPICall();

                // 实际项目中的API调用
                // const result = await this.getBusinessDetailAPI(this.businessDetail.businessId);

            } catch (error) {
                console.error('加载商机详情失败:', error);
                utils.toast('加载失败，请重试');
            } finally {
                this.isLoading = false;
            }
        },

        /**
         * 模拟API调用
         */
        simulateAPICall() {
            return new Promise((resolve) => {
                setTimeout(() => {
                    // 模拟加载效果，实际使用上面定义的静态数据
                    resolve();
                }, 800);
            });
        },

        /**
         * 获取语音记录节点ID
         */
        getVoiceNodeId(index) {
            const baseId = 2942377;
            return `294:${baseId + index}`;
        },

        /**
         * 获取波形条高度
         */
        getWaveformHeight(n) {
            // 为31个波形条生成不同的高度，模拟真实波形显示
            const heights = [
                0.02, 0.06, 0.10, 0.14, 0.18, 0.22, 0.26, 0.30, 0.34, 0.38,
                0.42, 0.38, 0.34, 0.30, 0.26, 0.22, 0.18, 0.14, 0.10, 0.06,
                0.02, 0.06, 0.10, 0.14, 0.18, 0.22, 0.26, 0.30, 0.34, 0.38
            ];
            return `${heights[n - 1] || 0.06}rem`;
        },

        /**
         * 返回上一页
         */
        goBack() {
            if (window.history.length > 1) {
                window.history.back();
            } else {
                // 如果没有历史记录，返回到商机列表
                window.location.href = 'busiList.html';
            }
        },

        /**
         * 复制客户电话
         */
        copyPhone() {
            const phone = this.businessDetail.customerPhone;
            // 从脱敏号码还原（实际项目中应该从API获取完整号码）
            const fullPhone = '15555553344';

            if (navigator.clipboard) {
                navigator.clipboard.writeText(fullPhone).then(() => {
                    utils.toast('手机号已复制');
                    this.addHapticFeedback();
                }).catch(() => {
                    this.fallbackCopyToClipboard(fullPhone);
                });
            } else {
                this.fallbackCopyToClipboard(fullPhone);
            }
        },

        /**
         * 复制营销人员电话
         */
        copyMarketerPhone() {
            const phone = this.businessDetail.marketerPhone;
            // 从脱敏号码还原
            const fullPhone = '13111113564';

            if (navigator.clipboard) {
                navigator.clipboard.writeText(fullPhone).then(() => {
                    utils.toast('营销人员电话已复制');
                    this.addHapticFeedback();
                }).catch(() => {
                    this.fallbackCopyToClipboard(fullPhone);
                });
            } else {
                this.fallbackCopyToClipboard(fullPhone);
            }
        },

        /**
         * 备用复制到剪贴板方法
         */
        fallbackCopyToClipboard(text) {
            const textArea = document.createElement('textarea');
            textArea.value = text;
            textArea.style.position = 'fixed';
            textArea.style.opacity = '0';
            document.body.appendChild(textArea);
            textArea.focus();
            textArea.select();
            try {
                const successful = document.execCommand('copy');
                if (successful) {
                    utils.toast('复制成功');
                    this.addHapticFeedback();
                }
            } catch (err) {
                console.error('复制失败:', err);
                utils.toast('复制失败');
            }
            document.body.removeChild(textArea);
        },

        /**
         * 添加触觉反馈
         */
        addHapticFeedback() {
            if (navigator.vibrate) {
                navigator.vibrate(10); // 短震动10ms
            }
        },

        /**
         * 致电营销人员
         */
        callMarketer() {
            const phone = this.businessDetail.marketerPhone;
            const fullPhone = '13111113564'; // 实际号码

            if (typeof device !== 'undefined' && device.platform === 'iOS') {
                window.location.href = `tel:${fullPhone}`;
            } else {
                window.open(`tel:${fullPhone}`, '_self');
            }
        },

        /**
         * 联系客户
         */
        callCustomer() {
            const phone = this.businessDetail.customerPhone;
            const fullPhone = '15555553344'; // 实际号码

            if (typeof device !== 'undefined' && device.platform === 'iOS') {
                window.location.href = `tel:${fullPhone}`;
            } else {
                window.open(`tel:${fullPhone}`, '_self');
            }
        },

        /**
         * 播放语音
         */
        playVoice(index) {
            const record = this.businessDetail.voiceRecords[index];
            if (!record) return;

            // 停止其他语音播放
            this.businessDetail.voiceRecords.forEach((r, i) => {
                if (i !== index) {
                    r.isPlaying = false;
                }
            });

            // 切换当前语音播放状态
            record.isPlaying = !record.isPlaying;

            if (record.isPlaying) {
                utils.toast('开始播放语音');
                this.addHapticFeedback();
                // 模拟播放时长
                setTimeout(() => {
                    record.isPlaying = false;
                }, 4000); // 4秒后自动停止
            } else {
                utils.toast('停止播放语音');
            }
        },

        /**
         * 转为文字
         */
        convertToText(index) {
            const record = this.businessDetail.voiceRecords[index];
            if (!record) return;

            record.converted = !record.converted;

            if (record.converted) {
                utils.toast('语音转文字成功');
                this.addHapticFeedback();
                // 这里可以调用实际的语音转文字API
                this.callSpeechToTextAPI(index);
            } else {
                utils.toast('取消转为文字');
            }
        },

        /**
         * 调用语音转文字API
         */
        async callSpeechToTextAPI(index) {
            try {
                // 实际项目中的API调用
                /*
                utils.httpRequest({
                    url: '/api/speech-to-text',
                    method: 'POST',
                    data: { voiceIndex: index },
                    time: 30000 // 30秒超时
                }).then(response => {
                    if (response.success) {
                        // 处理转文字结果
                        console.log('转文字结果:', response.data);
                    }
                }).catch(error => {
                    console.error('语音转文字失败:', error);
                });
                */

                // 模拟API调用
                await new Promise(resolve => setTimeout(resolve, 2000));

            } catch (error) {
                console.error('语音转文字API调用失败:', error);
                utils.toast('转文字失败，请重试');
            }
        },

        /**
         * 写跟进
         */
        writeFollowUp() {
            utils.toast('写跟进功能开发中...');
            // 实际项目中可以跳转到跟进页面或打开弹窗
            // window.location.href = `followUp.html?id=${this.businessDetail.businessId}`;
        },

        /**
         * 转为成单
         */
        convertToOrder() {
            utils.toast('转为成单功能开发中...');
            // 实际项目中可以跳转到成单页面或打开弹窗
            // window.location.href = `createOrder.html?id=${this.businessDetail.businessId}`;
        },

        /**
         * 关闭商机
         */
        closeBusiness() {
            if (confirm('确定要关闭这个商机吗？')) {
                utils.toast('关闭商机功能开发中...');
                // 实际项目中调用关闭商机API
                this.callCloseBusinessAPI();
            }
        },

        /**
         * 调用关闭商机API
         */
        async callCloseBusinessAPI() {
            try {
                utils.httpRequest({
                    url: '/api/business/close',
                    method: 'POST',
                    data: {
                        businessId: this.businessDetail.businessId,
                        reason: 'manual_close'
                    },
                    time: 15000
                }).then(response => {
                    if (response.success) {
                        utils.toast('商机已关闭');
                        this.addHapticFeedback();
                        // 延迟后返回列表
                        setTimeout(() => {
                            window.location.href = 'busiList.html';
                        }, 2000);
                    } else {
                        utils.toast(response.message || '关闭失败');
                    }
                }).catch(error => {
                    console.error('关闭商机失败:', error);
                    utils.toast('关闭失败，请重试');
                });

            } catch (error) {
                console.error('关闭商机API调用失败:', error);
                utils.toast('网络错误，请重试');
            }
        },

        /**
         * 清理资源
         */
        cleanup() {
            // 停止所有语音播放
            this.businessDetail.voiceRecords.forEach(record => {
                record.isPlaying = false;
            });

            // 清理定时器
            if (this.cleanupTimer) {
                clearTimeout(this.cleanupTimer);
                this.cleanupTimer = null;
            }
        }
    },

    // 计算属性
    computed: {
        /**
         * 是否有跟进状态
         */
        hasFollowUpStatus() {
            return !!this.businessDetail.followUpStatus;
        },

        /**
         * 语音记录数量
         */
        voiceRecordsCount() {
            return this.businessDetail.voiceRecords.length;
        },

        /**
         * 是否有管理员备注
         */
        hasAdminNotes() {
            return !!this.businessDetail.adminNotes;
        },

        /**
         * 是否有文字描述
         */
        hasTextDescription() {
            return !!this.businessDetail.textDescription;
        }
    },

    // 监听器
    watch: {
        /**
         * 监听语音播放状态变化
         */
        'businessDetail.voiceRecords': {
            handler(newRecords) {
                const isAnyPlaying = newRecords.some(record => record.isPlaying);
                if (isAnyPlaying) {
                    document.title = '播放语音中...';
                } else {
                    document.title = '商机详情';
                }
            },
            deep: true
        },

        /**
         * 监听页面可见性变化
         */
        isAnyPlaying(newVal) {
            if (document.hidden && newVal) {
                // 页面隐藏时暂停所有播放
                this.businessDetail.voiceRecords.forEach(record => {
                    record.isPlaying = false;
                });
            }
        }
    }
});