busiDetail.js

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

new Vue({
    el: '#app',

    data: {
        isWorker: true,
        platform: '',
        detailId: '',
        businessDetail: {},
        followList: [],
        followNewInfo:{},

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

        // 用户信息
        userInfo: null,

        gjStore: {
            isShow: false,

            des: '',
            imgArr: [],
            isLoading: false
        },
        cdStore: {
            des: '',

            isShow: false
        },
        gbStore: {
            isShow: false,

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

        timeWriteStr: '',
        nIndex: '--'
    },

    created() {
        this.platform = localStorage.getItem('platform')
        this.isWorker = localStorage.getItem('platform')=='gw'
        this.detailId = utils.getUrlParam('id')

        this.queryDetail()
        this.queryFollow()
    },

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

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

    methods: {
        getAddressShow(value){
            if(!value){
                return '--'
            }
            return value.split(":")[1]
        },
        addBusiProcess(){
            if(!this.ifCanGj){
                return
            }

            this.gjStore.des = ''
            this.gjStore.imgArr = []

            this.gjStore.isShow = true
        },
        async gjSubmit(){
            let d = this.gjStore

            if(!d.des){
                utils.toast('请输入跟进内容')
                return
            }
            // if(d.imgArr.length <= 0){
            //     utils.toast('请上传图片')
            //     return
            // }

            const fd = new FormData();
            fd.append('followContent',d.des)
            fd.append('opportunityId',this.detailId)
            d.imgArr.forEach(item=>{
                fd.append('images',item.file)
            })

            // 调用API提交
            const result = await utils.httpRequest({
                url: '/opportunity/follow',
                data: fd
            })

            if (result.code == 200) {
                utils.toast('跟进提交成功！');
                this.gjStore.isShow = false
                this.queryFollow()
            } else {
                utils.toast(result.message || '提交失败，请重试');
            }
        },
        completeBusi(){
            if(!this.ifCanCd){
                return
            }

            this.cdStore.des = ''

            this.cdStore.isShow = true
        },
        async cdSubmit(){
            let d = this.cdStore

            if(!d.des){
                utils.toast('请输入成单理由')
                return
            }

            // 调用API提交
            const result = await utils.httpRequest({
                url: '/opportunity/deal',
                data: {
                    opportunityId: this.detailId,
                    reason: d.des
                }
            })

            if (result.code == 200) {
                utils.toast('成单成功！');
                this.cdStore.isShow = false
                this.queryFollow()
            } else {
                utils.toast(result.message || '提交失败，请重试');
            }
        },
        closeBusi(){
            if(!this.ifCanGb){
                return
            }

            this.gbStore.choArr.forEach(item=>{
                item.isCho = false
            })

            this.gbStore.isShow = true
        },
        gbReasonCho(index){
            this.gbStore.choArr.forEach(item=>{
                item.isCho = false
            })
            this.gbStore.choArr[index].isCho = true
        },
        async gbSubmit(){
            let d = this.gbStore

            let arr = d.choArr.filter(item=>{return item.isCho})
            if(arr.length <= 0){
                utils.toast('请选择原因')
                return
            }

            // 调用API提交
            const result = await utils.httpRequest({
                url: '/opportunity/close',
                data: {
                    opportunityId: this.detailId,
                    reason: arr[0].value
                }
            })

            if (result.code == 200) {
                utils.toast('关闭成功！');
                this.gbStore.isShow = false
                this.queryDetail()
            } else {
                utils.toast(result.message || '提交失败，请重试');
            }
        },
        getStatusName(value){
            if(value == '1'){
                return '待跟进'
            }else if(value == '2'){
                return '跟进中'
            }else if(value == '3'){
                return '成单待审核'
            }else if(value == '4'){
                return '已成单'
            }else if(value == '5'){
                return '已关闭'
            }

            return '--'
        },
        queryFollow(){
            utils.httpRequest({
                url: '/opportunity/follow/list',
                data: {
                    opportunityId: this.detailId,
                    pageNum: 1,
                    pageSize: 1000
                }
            }).then(res=>{
                if(res.code == 200){
                    this.followList = res.data.records

                    let pa = res.data.records[0]
                    this.followNewInfo = {
                        statusName: this.getStatusName(pa.status),
                        des: pa.followPersonName+'：'+pa.followContent
                    }
                }
            })
        },
        queryDetail(){
            utils.httpRequest({
                url: '/opportunity/detail',
                data: {
                    opportunityId: this.detailId
                }
            }).then(res=>{
                if(res.code == 200){
                    if(res.data.voiceDescriptionUrl){
                        let arr = []
                        res.data.voiceDescriptionUrl.split(',').forEach(item=>{
                            arr.push({
                                url: item,
                                text: '',
                                isPlay: false,
                                time: ''
                            })
                        })
                        res.data.voiceRecords = arr
                    }

                    this.businessDetail = res.data
                }
            })
        },
        async playAudio(index){
            let pa = this.businessDetail.voiceRecords[index]
            let obj = this.$refs.audioObj

            if(obj.src == pa.url){
                const isPlaying = !obj.paused && !obj.ended && obj.readyState > 2;

                if(isPlaying){
                    obj.pause()
                    pa.isPlay = false
                    this.writeTime(1)
                }else{
                    obj.play()
                    pa.isPlay = true
                    this.writeTime(2,pa,obj)
                }
                return
            }
            
            if(this.nIndex != '--'){
                clearInterval(this.timeWriteStr)
                this.businessDetail.voiceRecords[this.nIndex].time = obj.duration.toFixed(0)+'s'
                this.businessDetail.voiceRecords[this.nIndex].isPlay = false
            }

            obj.src = pa.url
            this.nIndex = index
            obj.onloadeddata = async () => {
                try {
                    await obj.play()
                    this.writeTime(2,pa,obj)
                    pa.isPlay = true
                    console.log('音频自动播放');

                    console.log(this.businessDetail.voiceRecords)
                } catch (error) {
                    console.log('自动播放被阻止，需要用户交互');
                }
            }
            let __this = this
            obj.addEventListener('ended', () => {
                clearInterval(__this.timeWriteStr)
                pa.time = obj.duration.toFixed(0)+'s'
                pa.isPlay = false
                __this.nIndex = '--'
            });
        },
        writeTime(type,pa,obj){
            if(type == 1){
                clearInterval(this.timeWriteStr)
            }else{
                clearInterval(this.timeWriteStr)
                this.timeWriteStr = setInterval(()=>{
                    pa.time = (obj.duration - obj.currentTime).toFixed(0) + 's'
                },1000)
            }
        },
        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.gjStore.imgArr.push({
                file: file,
                url: URL.createObjectURL(file)
            })
        },

        /**
         * 复制客户电话
         */
        copyPhone() {
            const fullPhone = this.businessDetail.customerPhone;

            if (navigator.clipboard) {
                navigator.clipboard.writeText(fullPhone).then(() => {
                    utils.toast('客户电话');
                    this.addHapticFeedback();
                }).catch(() => {
                    this.fallbackCopyToClipboard(fullPhone);
                });
            } else {
                this.fallbackCopyToClipboard(fullPhone);
            }
        },

        /**
         * 复制营销人员电话
         */
        copyMarketerPhone() {
            const fullPhone = this.businessDetail.marketingStaffPhone;

            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
            }
        },

        switchTime(value){
            return utils.detailTime(new Date(value).getTime())
        },

        /**
         * 打电话
         */
        takeCall(type){
            //客户电话
            let fullPhone = this.businessDetail.customerPhone
            if(type == 'yx'){
                //营销人员电话
                fullPhone = this.businessDetail.marketingStaffPhone
            }else if(type == 'zw'){
                //装维师傅电话
                fullPhone = this.businessDetail.maintenanceStaffPhone
            }

            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('网络错误，请重试');
            }
        },

        audioToText(index){
            let pa = this.businessDetail.voiceRecords[index]

            utils.httpRequest({
                url: '/audio-to-text',
                middle: 'common',
                data: {
                    audioUrl: pa.url
                }
            }).then(res=>{
                if(res.code == 200){
                    pa.text = res.data.textContent
                }else{
                    utils.toast(res.message)
                }
            })
        },

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

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

    // 计算属性
    computed: {
        ifCanGj(){
            return this.businessDetail.status==1||this.businessDetail.status==2
        },
        ifCanCd(){
            return this.businessDetail.status==1||this.businessDetail.status==2
        },
        ifCanGb(){
            return this.businessDetail.status==1||this.businessDetail.status==2||this.businessDetail.status==3
        },
        /**
         * 是否有跟进状态
         */
        hasFollowUpStatus() {
            return !!this.businessDetail.followUpStatus;
        },

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

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

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

    // 监听器
    watch: {
       
    }
});