addBusi.js

// 商机信息页面 Vue 应用
const utils = new publicMethod()

new Vue({
    el: '#app',

    data: {
        isAlone: true,
        // 联系方式
        contactPhone: '',
        // 商机类型
        businessTypes: [],
        recordingUrlArr: [], // 录音文件URL
        // 选中地址文本
        selectedAddressCode: '',
        selectedAddressText: '',
        detailAddress: '',
        // 文字描述
        textDescription: '',
        // API相关
        isSubmitting: false,

        // 弹窗相关
        modifyPhone:{
            isShow: false,

            phone: '',
        },

        // 语音录制状态
        isRecording: false,
        recordingTimer: null,
        recordingDuration: 0,

        // 用户信息
        userInfo: null,
        mediaStream: '',

        // 地址选择器
        addressSelector: {
            show: false,
            currentStep: 0, // 0: 省, 1: 市, 2: 区, 3: 街道
            selectedProvince: null,
            selectedCity: null,
            selectedDistrict: null,
            selectedStreet: null
        },
        // 使用外部地址数据
        addressData: addressData,

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

        haZjData: {}
    },

    mounted() {
        this.isAlone = utils.getUrlParam('source')!='zhijian'
        if(!this.isAlone){
            this.initData()
            this.queryHaZjLabel()
        }else{
            this.queryLabel()
        }

        // 添加页面可见性变化监听
        document.addEventListener('visibilitychange', this.handleVisibilityChange);
    },

    beforeDestroy() {
        // 页面销毁前的清理工作
        this.cleanup();
    },

    methods: {
        goZj(){
            location.href = 'result.html'
        },
        loginOut(){
            localStorage.removeItem('userInfo')
            localStorage.removeItem('tokenInfo')

            location.replace('login.html?platform='+localStorage.getItem('platform'))
        },
        navigateToList(){
            location.href = 'myBusi.html'
        },
        queryHaZjLabel(){
            let param = {}
            param.middle = 'common'
            param.url = '/opportunity-tags/area-code'
            param.data = {
                areaCode: this.haZjData.areaCode,
                isEnabled: true,
                pageNum: 1,
                pageSize: 10000
            }

            utils.httpRequest(param).then(res=>{
                if(res.code == 200){
                    res.data.records.forEach(item=>{
                        item.selected = false,
                        item.ifCho = true
                    })
                    this.businessTypes = res.data.records
                }
            })
        },
        async addHaZjBusi(){
            // 表单验证
            if (this.isAlone && !this.contactPhone) {
                utils.toast('请输入手机号');
                return;
            }

            if (!/^1[3-9]\d{9}$/.test(this.contactPhone)) {
                utils.toast('请输入正确的手机号');
                return;
            }

            // 检查是否选择了商机类型
            const selectedTypes = this.businessTypes.filter(t => t.selected);
            if (selectedTypes.length === 0) {
                utils.toast('请选择商机类型');
                return false;
            }

            if (this.isSubmitting) {
                utils.toast('正在提交，请稍候...');
                return;
            }
            this.isSubmitting = true

            try {
                const fd = new FormData();

                fd.append('personnelCode',this.haZjData.campaignId)
                fd.append('customerPhone',this.contactPhone)
                fd.append('customerAddress',this.haZjData.address?('--:'+this.haZjData.address):'')

                const tagArr = selectedTypes.map(item=>{return item.id})
                fd.append('opportunityType',(tagArr.includes(1)||tagArr.includes(2)?'2':'1'))
                fd.append('tagIds',tagArr.join(','))

                fd.append('textDescription',this.textDescription)
                fd.append('audioType',this.getSupportedMimeType())
                if(this.recordingUrlArr.length > 0){
                    this.recordingUrlArr.forEach(item=>{
                        fd.append('audioFiles',item.blob)
                    })
                }

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

                if (result.code == 200) {
                    utils.toast('商机提交成功！')

                    setTimeout(() => {
                        history.go(-1)
                    }, 1000);
                } else {
                    utils.toast(result.message || '提交失败，请重试');
                }

            } catch (error) {
                console.error('提交商机失败:', error);
                utils.toast('提交失败，请重试');
            } finally {
                this.isSubmitting = false;
            }
        },
        queryLabel(){
            utils.httpRequest({
                url: '/opportunity/tags',
                data:{
                    isEnabled: true
                }
            }).then(res=>{
                if(res.code == 200){
                    res.data.forEach(item=>{
                        item.selected = false,
                        item.ifCho = true
                    })
                    this.businessTypes = res.data
                }
            })
        },


        /**
         * 初始化质检数据
         */
        initData() {
            this.haZjData = {
                accNbr: utils.getUrlParam('phone'),
                campaignId: utils.getUrlParam('campaignId'),
                areaCode: utils.getUrlParam('areaCode'),
            }

            this.contactPhone = this.haZjData.accNbr
        },

        /**
         * 手机号脱敏处理
         */
        maskPhone(phone) {
            if (!phone || phone.length < 11) {
                return '138****1234'; // 默认显示
            }
            return phone.substring(0, 3) + '****' + phone.substring(7);
        },

        /**
         * 编辑联系方式
         */
        editContact() {
            // 打开弹窗
            this.modifyPhone.phone = '';
            this.modifyPhone.isShow = true;
        },
        /**
         * 关闭编辑弹窗
         */
        closeEditModal() {
            this.modifyPhone.isShow = false
        },

        submitPhone(){
            if(!this.modifyPhone.phone){
                utils.toast('请输入手机号')
                return
            }

            if(!/^1[3-9]\d{9}$/.test(this.modifyPhone.phone)){
                utils.toast('手机号格式不正确')
                return
            }

            this.contactPhone = this.modifyPhone.phone
            this.modifyPhone.isShow = false
        },

        /**
         * 选择商机类型
         */
        selectBusinessType(typeId) {
            const type = this.businessTypes.find(t => t.id === typeId)

            if(!type.ifCho){
                return
            }

            if (type) {
                // 限制最多选择3个商机类型
                const selectedCount = this.businessTypes.filter(t => t.selected).length;
                if (selectedCount > 3) {
                    utils.toast('最多只能选择3个商机类型');
                }else{
                    type.selected = !type.selected

                    let arr = this.businessTypes.filter(t => t.selected)
                    if(arr.length>0){
                        let idarr = arr.map(item=>{return item.id})

                        this.businessTypes.forEach(item=>{
                            if(idarr.includes(1) || idarr.includes(2)){
                                if(item.id!=1 && item.id!=2){
                                    item.ifCho = false
                                }else{
                                    item.ifCho = true
                                }
                            }else{
                                if(item.id==1 || item.id==2){
                                    item.ifCho = false
                                }else{
                                    item.ifCho = true
                                }
                            }
                        })
                    }else{
                        this.businessTypes.forEach(item=>{
                            item.ifCho = true
                        })
                    }
                }

                // 添加触觉反馈
                this.addHapticFeedback();
            }
        },

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

        /**
         * 切换录音状态
         */
        toggleRecording() {
            if (this.isRecording) {
                // 停止录音
                this.stopRecording();
            } else {
                // 开始录音
                this.startRecording();
            }
        },

        async playAudio(index){
            let pa = this.recordingUrlArr[index]
            let obj = this.$refs.audioObj

            let fixedBlob = pa.blob
            if(/iPhone/.test(navigator.userAgent) && !window.MSStream){
                fixedBlob = new Blob([pa.blob], { 
                    type: 'audio/mp4'  // 或者尝试 'audio/aac', 'audio/x-m4a'
                })
            }
            

            if(!pa.url){
                pa.url = URL.createObjectURL(fixedBlob)
            }

            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.recordingUrlArr[this.nIndex].time = obj.duration.toFixed(0)+'s'
                this.recordingUrlArr[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('音频自动播放');
                } 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{
                this.timeWriteStr = setInterval(()=>{
                    pa.time = (obj.duration - obj.currentTime).toFixed(0) + 's'
                },1000)
            }
        },
        removeAudio(index){
            this.$refs.audioObj.pause()
            this.recordingUrlArr.splice(index , 1)
        },

        /**
         * 开始录音
         */
        async startRecording() {
            let __this = this

            try {
                // 检查浏览器是否支持录音API
                if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                    __this.mediaStream = await navigator.mediaDevices.getUserMedia({ 
                        audio: {
                            echoCancellation: true,
                            noiseSuppression: true,
                            channelCount: 1,
                            sampleRate: 44100
                        } 
                     });
                     const mimeType = this.getSupportedMimeType()
                    const mediaRecorder = new MediaRecorder(__this.mediaStream,{
                        mimeType: mimeType
                    });
                    const chunks = [];
                    
                    mediaRecorder.ondataavailable = e => chunks.push(e.data);
                    mediaRecorder.onstop = () => {
                        const blob = new Blob(chunks, { type: mimeType });

                        __this.recordingUrlArr.push({
                            blob: blob,
                            time: __this.recordingDuration+"s"
                        })
                    };
                    
                    mediaRecorder.start();

                    __this.isRecording = true;
                    __this.recordingDuration = 0;
                    utils.toast('开始录音');
                    // 生成音频波形条
                    __this.generateWaveformBars();
                    // 可以在这里添加音频处理逻辑
                    __this.setupAudioProcessing();
                }
            } catch (error) {
                __this.isRecording = false;
                utils.toast('无法访问麦克风，请检查权限设置');
            }
        },

        getSupportedMimeType(){
            const types = [
                'audio/webm;codecs=opus',
                'audio/webm',
                'audio/ogg;codecs=opus',
                'audio/ogg',
                'audio/wav',
                'audio/mp4;' // 某些浏览器支持
            ];
            
            for (let type of types) {
                if (MediaRecorder.isTypeSupported(type)) {
                    console.log('使用格式:', type);
                    return type;
                }
            }
            return 'audio/webm'; // 默认回退
        },

        /**
         * 设置音频处理
         */
        setupAudioProcessing() {
            // 这里可以添加音频分析、可视化等高级功能
            // 暂时使用简单的计时器
            this.recordingTimer = setInterval(() => {
                this.recordingDuration++;
                if (this.recordingDuration >=60) { // 限制最长录音一分钟
                    this.stopRecording();
                    utils.toast('录音时间已到最长限制');
                }
            }, 1000);
        },

        /**
         * 停止录音
         */
        stopRecording() {
            this.isRecording = false;
            utils.toast('录音已停止');

            // 清理定时器
            if (this.recordingTimer) {
                clearInterval(this.recordingTimer);
                this.recordingTimer = null;
            }

            // 停止媒体流
            if (this.mediaStream) {
                this.mediaStream.getTracks().forEach(track => track.stop());
                this.mediaStream = null;
            }

            // 清理波形条
            this.cleanupWaveformBars();
        },

        /**
         * 清理波形条
         */
        cleanupWaveformBars() {
            this.$nextTick(() => {
                const waveformContainer = document.querySelector('.voice-waveform');
                if (waveformContainer) {
                    waveformContainer.innerHTML = '';
                }
            });
        },

        /**
         * 表单验证
         */
        validateForm() {
            // 检查是否选择了商机类型
            const selectedTypes = this.businessTypes.filter(t => t.selected);
            if (selectedTypes.length === 0) {
                utils.toast('请选择商机类型');
                return false;
            }

            // 检查是否填写了文字描述或录制了语音
            if (!this.textDescription.trim() && this.recordingDuration === 0) {
                utils.toast('请填写文字描述或录制语音');
                return false;
            }

            // 检查文字描述长度
            if (this.textDescription.trim().length > 500) {
                utils.toast('文字描述不能超过500字');
                return false;
            }

            return true;
        },

        /**
         * 提交商机
         */
        async submitBusiness() {
            // 表单验证
            if (this.isAlone && !this.contactPhone) {
                utils.toast('请输入手机号');
                return;
            }

            if (!/^1[3-9]\d{9}$/.test(this.contactPhone)) {
                utils.toast('请输入正确的手机号');
                return;
            }

            if (!this.selectedAddressText && this.isAlone) {
                utils.toast('请选择用户地址');
                return;
            }

            if (!this.detailAddress && this.isAlone) {
                utils.toast('请输入详细地址');
                return;
            }

            // 检查是否选择了商机类型
            const selectedTypes = this.businessTypes.filter(t => t.selected);
            if (selectedTypes.length === 0) {
                utils.toast('请选择商机类型');
                return false;
            }

            if (this.isSubmitting) {
                utils.toast('正在提交，请稍候...');
                return;
            }
            this.isSubmitting = true

            try {
                const fd = new FormData();

                fd.append('customerPhone',this.contactPhone)
                fd.append('customerAddress',this.selectedAddressCode?(this.selectedAddressCode+":"+this.selectedAddressText+this.detailAddress):'')

                const tagArr = selectedTypes.map(item=>{return item.id})
                fd.append('opportunityType',(tagArr.includes(1)||tagArr.includes(2)?'2':'1'))
                fd.append('tagIds',tagArr.join(','))

                fd.append('textDescription',this.textDescription)
                fd.append('audioType',this.getSupportedMimeType())
                if(this.recordingUrlArr.length > 0){
                    this.recordingUrlArr.forEach(item=>{
                        fd.append('audioFiles',item.blob)
                    })
                }

                console.log(fd)

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

                if (result.code == 200) {
                    utils.toast('商机提交成功！')

                    setTimeout(() => {
                        location.href = 'myBusi.html'
                    }, 1000);
                } else {
                    utils.toast(result.message || '提交失败，请重试');
                }

            } catch (error) {
                console.error('提交商机失败:', error);
                utils.toast('提交失败，请重试');
            } finally {
                this.isSubmitting = false;
            }
        },

        /**
         * 调用API提交商机数据
         */
        async submitBusinessAPI(data) {
            return new Promise((resolve, reject) => {
                // 使用项目中的工具方法进行HTTP请求
                if (typeof publicMethod !== 'undefined') {
                    utils.httpRequest({
                        url: '/api/business/submit',
                        data: data,
                        time: 15000 // 15秒超时
                    }).then(response => {
                        resolve(response);
                    }).catch(error => {
                        reject(error);
                    });

                } else {
                    // 如果没有工具方法，使用fetch作为备用
                    fetch('/api/business/submit', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(data)
                    })
                    .then(response => response.json())
                    .then(response => {
                        resolve(response);
                    })
                    .catch(error => {
                        reject(error);
                    });
                }
            });
        },

        /**
         * 重置表单
         */
        resetForm() {
            // 重置商机类型选择
            this.businessTypes.forEach(type => {
                type.selected = false;
            });

            // 重置文本描述
            this.textDescription = '';

            // 重置录音状态
            if (this.isRecording) {
                this.stopRecording();
            }
            this.recordingDuration = 0;
        },

        /**
         * 格式化录音时长（用于录音时显示）
         */
        formatRecordingTime(seconds) {
            const minutes = Math.floor(seconds / 60);
            const remainingSeconds = seconds % 60;
            return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
        },

        /**
         * 格式化录音时长（用于显示）
         */
        formatRecordingDuration(seconds) {
            if (seconds < 60) {
                return `${seconds}秒`;
            } else {
                const minutes = Math.floor(seconds / 60);
                const remainingSeconds = seconds % 60;
                return `${minutes}分${remainingSeconds}秒`;
            }
        },

        /**
         * 生成音频波形条
         */
        generateWaveformBars() {
            this.$nextTick(() => {
                const waveformContainer = document.querySelector('.voice-waveform');
                if (waveformContainer) {
                    // 清空现有内容
                    waveformContainer.innerHTML = '';

                    // 生成50个波形条
                    for (let i = 1; i <= 50; i++) {
                        const bar = document.createElement('div');
                        bar.className = 'voice-waveform-bar';
                        waveformContainer.appendChild(bar);
                    }
                }
            });
        },

        /**
         * 处理页面可见性变化
         */
        handleVisibilityChange() {
            if (document.hidden) {
                // 页面隐藏时的处理
                if (this.isRecording) {
                    // 可以选择是否暂停录音
                    console.log('页面隐藏，录音状态:', this.isRecording);
                }
            } else {
                // 页面显示时的处理
                console.log('页面显示，录音状态:', this.isRecording);
            }
        },

        /**
         * 播放录音
         */
        playRecording() {
            if (this.recordingUrl) {
                utils.toast('播放录音');
                // 这里实现实际的播放逻辑
                console.log('播放录音:', this.recordingUrl);
            }
        },

        /**
         * 删除录音
         */
        deleteRecording() {
            if (confirm('确定要删除这条录音吗？')) {
                utils.toast('录音已删除');
                this.recordingDuration = 0;
                this.recordingUrl = '';

                // 清理波形条显示
                this.cleanupWaveformBars();
            }
        },

        /**
         * 获取波形条高度
         */
        getWaveformHeight(n) {
            // 为30个波形条生成不同的高度，模拟静态波形显示
            const heights = [
                0.12, 0.16, 0.08, 0.20, 0.24, 0.28, 0.32, 0.36, 0.40, 0.44, 0.48,
                0.44, 0.40, 0.36, 0.32, 0.28, 0.24, 0.20, 0.16, 0.12, 0.08, 0.04,
                0.08, 0.12, 0.16, 0.20, 0.24, 0.28, 0.32, 0.36, 0.40, 0.32, 0.24, 0.16, 0.08, 0.04
            ];
            return `${heights[n - 1] || 0.12}rem`;
        },

        /**
         * 打开地址选择器
         */
        openAddressSelector() {
            this.addressSelector.show = true;
            this.addressSelector.currentStep = 0;
        },

        /**
         * 关闭地址选择器
         */
        closeAddressSelector() {
            this.addressSelector.show = false;
        },

        /**
         * 切换到指定步骤
         */
        switchToStep(step) {
            // 只有在已经选择了前面步骤的情况下才能切换到后续步骤
            if (step === 0) {
                this.addressSelector.currentStep = 0;
            } else if (step === 1 && this.addressSelector.selectedProvince) {
                this.addressSelector.currentStep = 1;
            } else if (step === 2 && this.addressSelector.selectedCity) {
                this.addressSelector.currentStep = 2;
            } else if (step === 3 && this.addressSelector.selectedDistrict) {
                this.addressSelector.currentStep = 3;
            }
        },

        /**
         * 检查地址是否被选中
         */
        isAddressSelected(item) {
            switch (this.addressSelector.currentStep) {
                case 0: // 省份
                    return this.addressSelector.selectedProvince === item;
                case 1: // 城市
                    return this.addressSelector.selectedCity === item;
                case 2: // 区县
                    return this.addressSelector.selectedDistrict === item;
                case 3: // 街道
                    return this.addressSelector.selectedStreet === item;
                default:
                    return false;
            }
        },

        /**
         * 选择地址
         */
        selectAddress(item) {
            switch (this.addressSelector.currentStep) {
                case 0: // 选择省份
                    this.addressSelector.selectedProvince = item;
                    this.addressSelector.selectedCity = null;
                    this.addressSelector.selectedDistrict = null;
                    this.addressSelector.selectedStreet = null;
                    this.addressSelector.currentStep = 1;
                    break;
                case 1: // 选择城市
                    this.addressSelector.selectedCity = item;
                    this.addressSelector.selectedDistrict = null;
                    this.addressSelector.selectedStreet = null;
                    this.addressSelector.currentStep = 2;
                    break;
                case 2: // 选择区县
                    this.addressSelector.selectedDistrict = item;
                    this.addressSelector.selectedStreet = null;
                    this.addressSelector.currentStep = 3;
                    break;
                case 3: // 选择街道
                    this.addressSelector.selectedStreet = item;
                    // 选择完街道后自动确认
                    this.confirmAddressSelection();
                    break;
            }
        },

        /**
         * 确认地址选择
         */
        confirmAddressSelection() {
            const parts = [];
            const codes = [];

            if (this.addressSelector.selectedProvince) {
                codes.push(this.addressSelector.selectedProvince.code);
                parts.push(this.addressSelector.selectedProvince.name);
            }
            if (this.addressSelector.selectedCity) {
                codes.push(this.addressSelector.selectedCity.code);
                parts.push(this.addressSelector.selectedCity.name);
            }
            if (this.addressSelector.selectedDistrict) {
                codes.push(this.addressSelector.selectedDistrict.code);
                parts.push(this.addressSelector.selectedDistrict.name);
            }
            if (this.addressSelector.selectedStreet) {
                codes.push(this.addressSelector.selectedStreet.code);
                parts.push(this.addressSelector.selectedStreet.name);
            }
            
            this.selectedAddressCode = codes.join('|');
            this.selectedAddressText = parts.join('');
            this.closeAddressSelector();
            this.addHapticFeedback();
        },

        /**
         * 重置地址选择
         */
        resetAddressSelection() {
            this.addressSelector.selectedProvince = null;
            this.addressSelector.selectedCity = null;
            this.addressSelector.selectedDistrict = null;
            this.addressSelector.selectedStreet = null;
            this.addressSelector.currentStep = 0;
        },

        /**
         * 清理资源
         */
        cleanup() {
            // 停止录音
            if (this.isRecording) {
                this.stopRecording();
            }

            // 清理定时器
            if (this.recordingTimer) {
                clearInterval(this.recordingTimer);
            }

            // 移除事件监听器
            document.removeEventListener('visibilitychange', this.handleVisibilityChange);
        }
    },

    // 计算属性
    computed: {
        /**
         * 地址选择标签页
         */
        addressTabs() {
            const tabs = [
                { name: '省份', key: 'province' }
            ];

            if (this.addressSelector.selectedProvince) {
                tabs.push({ name: '城市', key: 'city' });
            }
            if (this.addressSelector.selectedCity) {
                tabs.push({ name: '区县', key: 'district' });
            }
            if (this.addressSelector.selectedDistrict) {
                tabs.push({ name: '街道', key: 'street' });
            }

            return tabs;
        },

        /**
         * 当前地址选项列表
         */
        currentAddressOptions() {
            switch (this.addressSelector.currentStep) {
                case 0: // 省份
                    return this.addressData.provinces;
                case 1: // 城市
                    if (this.addressSelector.selectedProvince) {
                        return this.addressSelector.selectedProvince.cities || [];
                    }
                    return [];
                case 2: // 区县
                    if (this.addressSelector.selectedCity) {
                        return this.addressSelector.selectedCity.districts || [];
                    }
                    return [];
                case 3: // 街道
                    if (this.addressSelector.selectedDistrict) {
                        return this.addressSelector.selectedDistrict.streets || [];
                    }
                    return [];
                default:
                    return [];
            }
        }
    },

    // 监听器
    watch: {
        /**
         * 监听录音状态变化
         */
        isRecording(newVal) {
            if (newVal) {
                // 开始录音时的处理
                document.title = '正在录音...';
            } else {
                // 停止录音时的处理
                document.title = '商机信息';
            }
        }
    }
})