Merge branch 'master' of http://120.76.84.145:10101/gitblit/r/H5/threeSide

13404089107

2025-05-23 e3a78db2a9b791284dfbc087f393ecca08de1ca1

Merge branch 'master' of http://120.76.84.145:10101/gitblit/r/H5/threeSide

 H5/components/voiceInputPopup.vue

@@ -146,7 +146,11 @@
      // 清空录音片段
      this.recordSegments = []
      this.currentSegment = null
      // 重置计时器
      // 停止计时器
      this.stopTimer()
      // 重置录音状态
      this.isRecording = false
      this.isPaused = false
      this.seconds = 0
      this.minutes = 0
      this.hours = 0

 H5/manifest.json

@@ -1,6 +1,6 @@
{
    "name": "“三个身边”群众工作机制",
    "appid": "__UNI__DB035F5",
    "appid": "__UNI__5DC32B0",
    "description": "",
    "versionName": "1.0.0",
    "versionCode": "100",

 H5/pages/Appeal/Appeal.vue

@@ -69,7 +69,7 @@
                <view v-for="item, index in videoContent" :key="index">
                    <view class="pl-19 pr-19 pb-17 pt-17 flex j-between a-center br-8 pink">
                        <view class="flex1">
                            <text class="fs-27 font-bold">语音文件{{ index + 1 }}</text>
                            <text class="fs-27 font-bold">语音文件{{ (index + 1) | numToWords }}</text>
                        </view>
                        <view class="flex j-between a-center">
                            <image src="/static/Appeal/delete.png" class="w-27 h-27 mr-38" mode=""
@@ -147,495 +147,513 @@
</template>

<script>
    import dayjs from '@/uni_modules/uview-ui/libs/util/dayjs.js';
    import {
        save,
        getproblem
    } from './service.js'
    import config from '@/config/index.js'
    import voiceInputPopup from '@/components/voiceInputPopup.vue'
    import {
        mapActions,
        mapState
    } from "vuex";
import dayjs from '@/uni_modules/uview-ui/libs/util/dayjs.js';
import {
    save,
    getproblem
} from './service.js'
import config from '@/config/index.js'
import voiceInputPopup from '@/components/voiceInputPopup.vue'
import {
    mapActions,
    mapState
} from "vuex";

    export default {
        components: {
            voiceInputPopup
export default {
    components: {
        voiceInputPopup
    },
    data() {
        return {
            showList: false,
            showDate: false,
            value1: Number(new Date()),
            columns: [
                ['医疗', '教育', '就业', '住房', '养老']
            ],
            time: '',
            problemType: '',
            name: '',
            contactNumber: '',
            detailedAddress: '',
            descriptionTitle: '',
            descriptionContent: '',
            videoContent: [],
            latitude: '',
            longitude: '',
            location: '',
            images: [],
            videos: [],
            voiceFile: '', //语音文件多个逗号拼接
            userInfo: uni.getStorageSync('userInfo'), //个人信息
            voiceInputShow: false,
        };
    },
    computed: {
        ...mapState(["playFlag"]),
    },
    filters: {
        formatTime(val) {
            if (!val) return ''
            return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
        },
        data() {
            return {
                showList: false,
                showDate: false,
                value1: Number(new Date()),
                columns: [
                    ['医疗', '教育', '就业', '住房', '养老']
                ],
                time: '',
                problemType: '',
                name: '',
                contactNumber: '',
                detailedAddress: '',
                descriptionTitle: '',
                descriptionContent: '',
                videoContent: [],
                latitude: '30.5061493',
                longitude: '105.574542',
                location: '测试地址',
                images: [],
                videos: [],
                voiceFile: '', //语音文件多个逗号拼接
                userInfo: uni.getStorageSync('userInfo'), //个人信息
                voiceInputShow: false,
            };
        numToWords(val) {
            const words = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
            // 处理 0-10
            if (val >= 0 && val <= 10) return words[val];
            // 处理 11-99
            if (val > 10 && val < 100) {
                const ten = Math.floor(val / 10);
                const unit = val % 10;
                return `${ten > 1 ? words[ten] : ''}十${unit > 0 ? words[unit] : ''}`;
            }
            return val; // 超过99返回原数字
        }
    },
    onReady() {
        uni.setNavigationBarTitle({
            title: '诉求录入'
        })
    },
    onLoad() {
        this.getproblem()
        this.time = dayjs().format('YYYY-MM-DD')
    },

    methods: {
        ...mapActions(["playRecording", "pausePlaying"]),
        onPlayRecording(index) {
            // 先处理本地播放状态
            this.videoContent.forEach((item, i) => {
                item.playing = i === index;
            });
            // 调用store的播放方法，传url
            this.playRecording(this.videoContent[index].url);
        },
        computed: {
            ...mapState(["playFlag"]),
        onPausePlaying(index) {
            this.videoContent[index].playing = false;
            this.pausePlaying(this.videoContent[index].url);
        },
        onReady() {
            uni.setNavigationBarTitle({
                title: '诉求录入'
        deleteVoice(ind) {
            this.videoContent = this.videoContent.filter((item, index) => index != ind)
        },
        voiceInput() {
            this.voiceInputShow = true;
        },
        closeVoiceInput() {
            this.voiceInputShow = false;
        },
        submitVoiceInput(e) {
            console.log('eeeeeeeeeeeeeeeeeee', e)
            this.videoContent.push({
                url: e.url,
                data: e.data,
                playing: false
            });
            this.voiceInputShow = false;
        },
        previewImage(index) {
            uni.previewImage({
                urls: this.images,
                current: this.images[index],
                longPressActions: {
                    itemList: ['发送给朋友', '保存图片', '收藏'],
                    success: function (data) {

                    },
                    fail: function (err) {

                    }
                }
            });
        },
        deletimg(e) {
            this.images = this.images.filter(item => item != e)

        },
        deletvideo(e) {
            this.videos = this.videos.filter(item => item != e)
        },
        gotoPage(e) {
            uni.navigateTo({
                url: `/pages/work-detail/maxVideo?url=${e}`
            })
        },
        onLoad() {
            this.getproblem()
            this.time = dayjs().format('YYYY-MM-DD')
        getproblem() {
            getproblem().then((resp => {

                this.columns = [resp.data.map(item => {
                    return item.name
                })]
            }))
        },

        methods: {
            ...mapActions(["playRecording", "pausePlaying"]),
            onPlayRecording(index) {
                // 先处理本地播放状态
                this.videoContent.forEach((item, i) => {
                    item.playing = i === index;
        async submit(type) {
            if (this.videoContent.length > 0) {
                uni.showLoading({
                    title: '正在上传语音文件...'
                });
                // 调用store的播放方法，传url
                this.playRecording(this.videoContent[index].url);
            },
            onPausePlaying(index) {
                this.videoContent[index].playing = false;
                this.pausePlaying(this.videoContent[index].url);
            },
            deleteVoice(ind) {
                this.videoContent = this.videoContent.filter((item, index) => index != ind)
            },
            voiceInput() {
                this.voiceInputShow = true;
            },
            closeVoiceInput() {
                this.voiceInputShow = false;
            },
            submitVoiceInput(e) {
                console.log('eeeeeeeeeeeeeeeeeee', e)
                this.videoContent.push({
                    url: e.url,
                    data: e.data,
                    playing: false
                });
                this.voiceInputShow = false;
            },
            previewImage(index) {
                uni.previewImage({
                    urls: this.images,
                    current: this.images[index],
                    longPressActions: {
                        itemList: ['发送给朋友', '保存图片', '收藏'],
                        success: function(data) {

                        },
                        fail: function(err) {

                        }
                    }
                });
            },
            deletimg(e) {
                this.images = this.images.filter(item => item != e)

            },
            deletvideo(e) {
                this.videos = this.videos.filter(item => item != e)
            },
            gotoPage(e) {
                uni.navigateTo({
                    url: `/pages/work-detail/maxVideo?url=${e}`
                })
            },
            getproblem() {
                getproblem().then((resp => {

                    this.columns = [resp.data.map(item => {
                        return item.name
                    })]
                }))
            },
            async submit(type) {
                if (this.videoContent.length > 0) {
                    uni.showLoading({
                        title: '正在上传语音文件...'
                    });

                    const uploadPromises = this.videoContent.map(item => {
                        return new Promise((resolve, reject) => {
                            console.log('item.data', item.data)
                            // uni.chooseAudio({
                            //     success:  (res)=> {
                            //         console.log(res.tempFilePaths[0]);
                            //         uni.uploadFile({
                            //             url: config.imageUrl,
                            //             filePath: res.tempFilePaths[0],  // 使用 Blob 数据
                            //             name: 'file',
                            //             header: {
                            //                 // 'Content-Type': 'multipart/form-data',
                            //                 'Authorization': uni.getStorageSync('token')
                            //             },
                            //             success: (uploadFileRes) => {
                            //                 const response = JSON.parse(uploadFileRes.data);
                            //                 if (response.code === 200) {
                            //                     resolve(response.data);
                            //                 } else {
                            //                     reject(new Error('上传失败'));
                            //                 }
                            //             },
                            //             fail: (error) => {
                            //                 reject(error);
                            //             }
                            //         });
                            //     }
                            // });
                            uni.uploadFile({
                                url: config.imageUrl,
                                file: item.data, // 使用 Blob 数据
                                name: 'file',
                                header: {
                                    // 'Content-Type': 'multipart/form-data',
                                    'Authorization': uni.getStorageSync('token')
                                },
                                success: (uploadFileRes) => {
                                    const response = JSON.parse(uploadFileRes.data);
                                    if (response.code === 200) {
                                        resolve(response.data);
                                    } else {
                                        reject(new Error('上传失败'));
                                    }
                                },
                                fail: (error) => {
                                    reject(error);
                const uploadPromises = this.videoContent.map(item => {
                    return new Promise((resolve, reject) => {
                        console.log('item.data', item.data)
                        // uni.chooseAudio({
                        //     success:  (res)=> {
                        //         console.log(res.tempFilePaths[0]);
                        //         uni.uploadFile({
                        //             url: config.imageUrl,
                        //             filePath: res.tempFilePaths[0],  // 使用 Blob 数据
                        //             name: 'file',
                        //             header: {
                        //                 // 'Content-Type': 'multipart/form-data',
                        //                 'Authorization': uni.getStorageSync('token')
                        //             },
                        //             success: (uploadFileRes) => {
                        //                 const response = JSON.parse(uploadFileRes.data);
                        //                 if (response.code === 200) {
                        //                     resolve(response.data);
                        //                 } else {
                        //                     reject(new Error('上传失败'));
                        //                 }
                        //             },
                        //             fail: (error) => {
                        //                 reject(error);
                        //             }
                        //         });
                        //     }
                        // });
                        uni.uploadFile({
                            url: config.imageUrl,
                            file: item.data, // 使用 Blob 数据
                            name: 'file',
                            header: {
                                // 'Content-Type': 'multipart/form-data',
                                'Authorization': uni.getStorageSync('token')
                            },
                            success: (uploadFileRes) => {
                                const response = JSON.parse(uploadFileRes.data);
                                if (response.code === 200) {
                                    resolve(response.data);
                                } else {
                                    reject(new Error('上传失败'));
                                }
                            });
                            },
                            fail: (error) => {
                                reject(error);
                            }
                        });
                    });
                });

                    try {
                        const uploadedUrls = await Promise.all(uploadPromises);
                        this.voiceFile = uploadedUrls.join(',');
                        console.log('this.voiceFile', this.voiceFile)
                        uni.hideLoading();
                    } catch (error) {
                        uni.hideLoading();
                        uni.showToast({
                            title: '语音文件上传失败',
                            icon: 'error'
                        });
                        return;
                    }
                try {
                    const uploadedUrls = await Promise.all(uploadPromises);
                    this.voiceFile = uploadedUrls.join(',');
                    console.log('this.voiceFile', this.voiceFile)
                    uni.hideLoading();
                } catch (error) {
                    uni.hideLoading();
                    uni.showToast({
                        title: '语音文件上传失败',
                        icon: 'error'
                    });
                    return;
                }
                const preciseRegex = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
                if (!this.time) {
                    uni.showToast({
                        title: '请选择时间',
                        icon: 'none'
                    })
                    return

                } else if (!this.problemType) {
                    uni.showToast({
                        title: '请选择问题类型',
                        icon: 'none'
                    })
                    return
                } else if (!this.name) {
                    uni.showToast({
                        title: '请输入群众姓名',
                        icon: 'none'
                    })
                    return
                } else if (!this.contactNumber) {
                    uni.showToast({
                        title: '请输入联系电话',
                        icon: 'none'
                    })
                    return
                } else if (!preciseRegex.test(this.contactNumber)) {
                    uni.showToast({
                        title: '请输入正确的手机号',
                        icon: 'none'
                    })
                    return
                } else if (!this.location) {
                    uni.showToast({
                        title: '请选择地点',
                        icon: 'none'
                    })
                    return
                } else if (!this.detailedAddress) {
                    uni.showToast({
                        title: '请输入详细地址',
                        icon: 'none'
                    })
                    return
                } else if (!this.descriptionContent) {
                    uni.showToast({
                        title: '请输入问题描述',
                        icon: 'none'
                    })
                    return
                }

                const data = {
                    time: this.time,
                    problemType: this.problemType,
                    name: this.name,
                    contactNumber: this.contactNumber,
                    location: this.location,
                    latitude: this.latitude,
                    longitude: this.longitude,
                    detailedAddress: this.detailedAddress,
                    descriptionContent: this.descriptionContent,
                    images: this.images.join(','),
                    videos: this.videos.join(','),
                    voiceFile: this.voiceFile,
                }
                // 问题上报
                if (type == 1) {
                    uni.navigateTo({
                        url: `/pages/problemReporting/problemReporting?data=${JSON.stringify(data)}`
                    })
                    return
                }
                // 办理结果录入
                if (type == 2) {
                    uni.navigateTo({
                        url: `/pages/result-entry/index?data=${JSON.stringify(data)}`
                    })
                    return
                }
                // 添加
                if (type == 3) {
                    save(data).then(resp => {
                        if (resp.code == 200) {
                            uni.showToast({
                                title: '保存成功',
                                icon: 'none'
                            })
                            setTimeout(() => {
                                uni.navigateBack()
                            }, 1500)
                        }
                    })
                }
            },
            confirmone(e) {

                this.time = dayjs(e.value).format('YYYY-MM-DD')
                this.showDate = false
            },
            confirmtwo(e) {

                this.problemType = e.value[0]
                this.showList = false
            },
            cancel() {
                this.showDate = false
                this.showList = false
            },
            close(e) {
                this.showDate = false
                this.showList = false
            },
            goTopagelocation() {

                uni.navigateTo({
                    url: '/pages/location/location'
            }
            const preciseRegex = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
            if (!this.time) {
                uni.showToast({
                    title: '请选择时间',
                    icon: 'none'
                })
            },
            uploadImg() {
                uni.chooseImage({
                    count: 1, //默认9
                    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album'], //从相册选择
                    success: (res) => {
                return

                        uni.showLoading()
                        console.log('res.tempFilePaths[0]', res.tempFilePaths[0])
                        uni.uploadFile({
                            url: config.imageUrl,
                            filePath: res.tempFilePaths[0],
                            name: 'file',
                            header: {
                                'Authorization': uni.getStorageSync('token')
                            },
                            success: (uploadFileRes) => {
            } else if (!this.problemType) {
                uni.showToast({
                    title: '请选择问题类型',
                    icon: 'none'
                })
                return
            } else if (!this.name) {
                uni.showToast({
                    title: '请输入群众姓名',
                    icon: 'none'
                })
                return
            } else if (!this.contactNumber) {
                uni.showToast({
                    title: '请输入联系电话',
                    icon: 'none'
                })
                return
            } else if (!preciseRegex.test(this.contactNumber)) {
                uni.showToast({
                    title: '请输入正确的手机号',
                    icon: 'none'
                })
                return
            } else if (!this.location) {
                uni.showToast({
                    title: '请选择地点',
                    icon: 'none'
                })
                return
            } else if (!this.detailedAddress) {
                uni.showToast({
                    title: '请输入详细地址',
                    icon: 'none'
                })
                return
            } else if (!this.descriptionContent) {
                uni.showToast({
                    title: '请输入问题描述',
                    icon: 'none'
                })
                return
            }

                                this.images = [...this.images, JSON.parse(uploadFileRes.data).data]
                                uni.hideLoading()
                            },
                            fail: () => {
                                uni.hideLoading()
                                uni.showToast({
                                    title: '上传失败',
                                    icon: 'error'
                                })
                            }
            const data = {
                time: this.time,
                problemType: this.problemType,
                name: this.name,
                contactNumber: this.contactNumber,
                location: this.location,
                latitude: this.latitude,
                longitude: this.longitude,
                detailedAddress: this.detailedAddress,
                descriptionContent: this.descriptionContent,
                images: this.images.join(','),
                videos: this.videos.join(','),
                voiceFile: this.voiceFile,
            }
            // 问题上报
            if (type == 1) {
                uni.navigateTo({
                    url: `/pages/problemReporting/problemReporting?data=${JSON.stringify(data)}`
                })
                return
            }
            // 办理结果录入
            if (type == 2) {
                uni.navigateTo({
                    url: `/pages/result-entry/index?data=${JSON.stringify(data)}`
                })
                return
            }
            // 添加
            if (type == 3) {
                save(data).then(resp => {
                    if (resp.code == 200) {
                        uni.showToast({
                            title: '保存成功',
                            icon: 'none'
                        })
                        setTimeout(() => {
                            uni.navigateBack()
                        }, 1500)
                    }
                });
            },
            uploadVideo() {
                uni.chooseVideo({
                    count: 1, //默认9
                    sourceType: ['camera', 'album'],
                    success: (res) => {
                        const videoExtensions = /\.(mp4|avi|rmvb)$/i;
                        if (!videoExtensions.test(res.name)) {
                })
            }
        },
        confirmone(e) {

            this.time = dayjs(e.value).format('YYYY-MM-DD')
            this.showDate = false
        },
        confirmtwo(e) {

            this.problemType = e.value[0]
            this.showList = false
        },
        cancel() {
            this.showDate = false
            this.showList = false
        },
        close(e) {
            this.showDate = false
            this.showList = false
        },
        goTopagelocation() {

            uni.navigateTo({
                url: '/pages/location/location'
            })
        },
        uploadImg() {
            uni.chooseImage({
                count: 1, //默认9
                sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album'], //从相册选择
                success: (res) => {

                    uni.showLoading()
                    console.log('res.tempFilePaths[0]', res.tempFilePaths[0])
                    uni.uploadFile({
                        url: config.imageUrl,
                        filePath: res.tempFilePaths[0],
                        name: 'file',
                        header: {
                            'Authorization': uni.getStorageSync('token')
                        },
                        success: (uploadFileRes) => {

                            this.images = [...this.images, JSON.parse(uploadFileRes.data).data]
                            uni.hideLoading()
                        },
                        fail: () => {
                            uni.hideLoading()
                            uni.showToast({
                                title: '请上传mp4, avi, rmvb格式的视频',
                                icon: 'none',
                                duration: 3000
                                title: '上传失败',
                                icon: 'error'
                            })
                            return
                        }
                        uni.showLoading()
                        uni.uploadFile({
                            url: config.imageUrl,
                            filePath: res.tempFilePath,
                            name: 'file',
                            header: {
                                'Authorization': uni.getStorageSync('token')
                            },
                            success: (uploadFileRes) => {

                                this.videos = [...this.videos, JSON.parse(uploadFileRes.data).data]
                                uni.hideLoading()
                            },
                            fail: () => {
                                uni.hideLoading()
                                uni.showToast({
                                    title: '上传失败',
                                    icon: 'error'
                                })
                            }
                    })
                }
            });
        },
        uploadVideo() {
            uni.chooseVideo({
                count: 1, //默认9
                sourceType: ['camera', 'album'],
                success: (res) => {
                    const videoExtensions = /\.(mp4|avi|rmvb)$/i;
                    if (!videoExtensions.test(res.name)) {
                        uni.showToast({
                            title: '请上传mp4, avi, rmvb格式的视频',
                            icon: 'none',
                            duration: 3000
                        })
                        return
                    }
                });
            },
        }
                    uni.showLoading()
                    uni.uploadFile({
                        url: config.imageUrl,
                        filePath: res.tempFilePath,
                        name: 'file',
                        header: {
                            'Authorization': uni.getStorageSync('token')
                        },
                        success: (uploadFileRes) => {

                            this.videos = [...this.videos, JSON.parse(uploadFileRes.data).data]
                            uni.hideLoading()
                        },
                        fail: () => {
                            uni.hideLoading()
                            uni.showToast({
                                title: '上传失败',
                                icon: 'error'
                            })
                        }
                    })
                }
            });
        },
    }
}
</script>

<style lang="scss" scoped>
    .min-108 {
        min-height: 108rpx;
.min-108 {
    min-height: 108rpx;
}

.red {
    color: rgba(255, 73, 72, 1);
}

.pink {
    background: #FFF1F4;
    border-radius: 8rpx;
    margin-top: 19rpx;
}

.card {
    border-bottom: 2rpx solid rgba(0, 10, 26, 0.07);
}

.bg {
    background: #F8F8F8;
}

.content {
    padding: 38rpx 31rpx 162rpx 31rpx;

    .main {
        padding: 0 27rpx 48rpx 27rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
        border-radius: 19rpx;
    }
}

    .red {
        color: rgba(255, 73, 72, 1);
textarea {
    padding: 27rpx 31rpx 27rpx 31rpx;
    font-weight: 500;
}

.img {
    position: relative;

    .img-icon {
        height: 140rpx;
        line-height: 140rpx;
        position: absolute;
        top: 0rpx;
        left: 35rpx;
    }
}

    .pink {
        background: #FFF1F4;
        border-radius: 8rpx;
        margin-top: 19rpx;
    }
/deep/.u-popup__content {
    border-radius: 16rpx 16rpx 0rpx 0rpx;
}

    .card {
        border-bottom: 2rpx solid rgba(0, 10, 26, 0.07);
    }
/deep/ .u-toolbar {
    border-bottom: 2rpx solid RGBA(243, 243, 243, 1);
}

    .bg {
        background: #F8F8F8;
    }
/deep/ .u-toolbar__wrapper__cancel {
    font-weight: 400;
    font-size: 30rpx;
    color: #FF4948 !important;
}

    .content {
        padding: 38rpx 31rpx 162rpx 31rpx;
/deep/ .u-toolbar__wrapper__confirm {
    font-weight: 400;
    font-size: 30rpx;
    color: #FF4948 !important;
}

        .main {
            padding: 0 27rpx 48rpx 27rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
            border-radius: 19rpx;
        }
    }
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    box-shadow: 0rpx -4rpx 27rpx 0rpx rgba(0, 0, 0, 0.08);
    width: calc(100% - 20rpx);
    background-color: #fff;
    display: flex;
    gap: 27rpx;
    padding: 33rpx 10rpx;
    justify-content: space-between;

    textarea {
        padding: 27rpx 31rpx 27rpx 31rpx;
        font-weight: 500;
    }

    .img {
        position: relative;

        .img-icon {
            height: 140rpx;
            line-height: 140rpx;
            position: absolute;
            top: 0rpx;
            left: 35rpx;
        }
    }

    /deep/.u-popup__content {
        border-radius: 16rpx 16rpx 0rpx 0rpx;
    }

    /deep/ .u-toolbar {
        border-bottom: 2rpx solid RGBA(243, 243, 243, 1);
    }

    /deep/ .u-toolbar__wrapper__cancel {
        font-weight: 400;
        font-size: 30rpx;
        color: #FF4948 !important;
    }

    /deep/ .u-toolbar__wrapper__confirm {
        font-weight: 400;
        font-size: 30rpx;
        color: #FF4948 !important;
    }

    .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        box-shadow: 0rpx -4rpx 27rpx 0rpx rgba(0, 0, 0, 0.08);
        width: calc(100% - 20rpx);
        background-color: #fff;
    .cancel {
        width: 331rpx;
        height: 77rpx;
        border: 2rpx solid rgba(252, 141, 85, 1);
        border-radius: 38rpx;
        display: flex;
        gap: 27rpx;
        padding: 33rpx 10rpx;
        justify-content: space-between;

        .cancel {
            width: 331rpx;
            height: 77rpx;
            border: 2rpx solid rgba(252, 141, 85, 1);
            border-radius: 38rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #FF4948;
        }

        .ok {
            width: 331rpx;
            height: 77rpx;
            background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
            border-radius: 48rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #FFFFFF;
        }
        align-items: center;
        justify-content: center;
        color: #FF4948;
    }

    .ok {
        width: 331rpx;
        height: 77rpx;
        background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
        border-radius: 48rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
    }
}
</style>

 H5/pages/dispatchWorkOrder/dispatchWorkOrder.vue

@@ -25,7 +25,12 @@
                        </view>
                    </view>
                    <view class="person-item flex1">{{detail.name}}</view>
                    <view class="phone-item flex1">{{detail.contactNumber}}</view>
                    <view class="flex a-center">
                        <view class="phone-item flex1">{{detail.contactNumber}}</view>
                        <image @click.stop="callPhone(detail.contactNumber)" src="../../static/tell.png"
                            class="w-58 h-58 shrink0 " />
                    </view>

                </view>
            </view>
        </view>
@@ -93,6 +98,12 @@
            }
        },
        methods: {

            callPhone(phoneNumber) {
                uni.makePhoneCall({
                    phoneNumber
                });
            },
            close() {
                this.showPop = false
            },

 H5/pages/work-detail/work-detail.vue

@@ -5,12 +5,13 @@
        <view class="allContent">
            <view class="topStatus">
                <view class="status">
                    {{ ['正在办理', '延期办理', '超时办理', '已办结 ', '群众撤销', '上报待审核', '上级驳回', '延期待审核', '已办结'][orderInfo.status] || '' }}
                    {{ ['正在办理', '延期办理', '超时办理', '已办结 ', '群众撤销', '上报待审核', '上级驳回', '延期待审核', '已办结'][orderInfo.status] || ''
                    }}
                </view>
                <view class="flex a-center j-between mb-17">
                    <view class="tit">当前状态</view>
                    <!-- 延期状态 -->
                    <view v-if="orderInfo.status == 1 " class="flex a-center" @click.stop="toDelayDetail()">
                    <view v-if="orderInfo.status == 1" class="flex a-center" @click.stop="toDelayDetail()">
                        <image src="../../static/detailImg/explain.png" class="plainIcon shrink0"></image>
                        <view class="explain">延期情况说明</view>
                    </view>
@@ -109,7 +110,7 @@
                <view class="flex j-between a-center">
                    <view class="title">诉求号：{{ orderInfo.serialNumber || '' }}</view>
                    <view class="flex a-center"
                        v-if="(orderInfo.status == 0||orderInfo.status == 6)&&orderInfo.listControlsButtonStatus == 0"
                        v-if="(orderInfo.status == 0 || orderInfo.status == 6) && orderInfo.listControlsButtonStatus == 0"
                        @click.stop="applyOverTime">
                        <view class="apply">延期申请</view>
                        <image src="../../static/detailImg/right.png" class="rightIcon shrink0"></image>
@@ -165,12 +166,12 @@
            <!-- 问题描述 -->
            <view class="problem">
                <view class="title">问题描述</view>
                <view v-for="(item,index) in getVoiceFile(orderInfo.voiceFile)" :key="index"
                <view v-for="(item, index) in videoContent" :key="index"
                    class="flex a-center j-between py-17 px-19 br-8 bgcolor1 mb-19">
                    <view class="fs-27 lh-38">语音文件{{(index + 1) | numToWords}}</view>
                    <image v-if="!playFlag" @click.stop="playRecording(item)" src="../../static/24gf-playCircle@2x.png"
                        class="w-27 h-27 shrink0" />
                    <image v-else @click.stop="pausePlaying" src="../../static/pausePlaying.png"
                    <view class="fs-27 lh-38">语音文件{{ (index + 1) | numToWords }}</view>
                    <image v-if="!playFlag" @click.stop="onPlayRecording(index)"
                        src="../../static/24gf-playCircle@2x.png" class="w-27 h-27 shrink0" />
                    <image v-else @click.stop="onPausePlaying(index)" src="../../static/pausePlaying.png"
                        class="w-27 h-27 shrink0" />
                </view>
                <view class="desc">
@@ -330,7 +331,7 @@
        </view>

        <!-- 上级显示 -->
        <view class="btnButtom" v-if="(!isParty)&&orderInfo.listControlsButtonStatus == 0">
        <view class="btnButtom" v-if="(!isParty) && orderInfo.listControlsButtonStatus == 0">
            <view class="btnDown" @click.stop="toUp" v-if="userInfo.levelId > 1"
                :class="[2, 3].includes(userInfo.levelId) ? '' : 'partyUp'">问题上报</view>
            <view class="btnDown" @click.stop="toDown" v-if="userInfo.levelId < 4"
@@ -345,7 +346,7 @@
        <!-- 上级显示 -->

        <!-- 党员显示 -->
        <view class="btnButtom" v-if=" isParty && orderInfo.listControlsButtonStatus == 0">
        <view class="btnButtom" v-if="isParty && orderInfo.listControlsButtonStatus == 0">
            <view class="btnDown partyUp" @click.stop="toUp">问题上报</view>
            <view class="btnAdd partyDown" @click="addProgress">添加办理进度</view>
            <view class="btnAdd partyDown" @click="resultEntery">办理结果录入</view>
@@ -388,508 +389,458 @@
</template>

<script>
    import dayjs from '@/uni_modules/uview-ui/libs/util/dayjs.js'
    import {
        workOrderDetail,
        getUserInfo,
        reportAudit,
        delayAudit,
        revoke
    } from './service.js'
    import {
        mapActions,
        mapState
    } from "vuex";
    export default {
        data() {
            return {
                id: "1", //工单详情ID
                orderInfo: {}, //工单详情
                problemVideos: [], //描述视频
                problemImg: [], //描述图片
                resultVideos: [], //结果描述视频
                resultImg: [], //结果描述图片
                progressesList: [], //诉求流转记录
                flowsList: [], //办理进度
import dayjs from '@/uni_modules/uview-ui/libs/util/dayjs.js'
import {
    workOrderDetail,
    getUserInfo,
    reportAudit,
    delayAudit,
    revoke
} from './service.js'
import {
    mapActions,
    mapState
} from "vuex";
export default {
    data() {
        return {
            id: "1", //工单详情ID
            orderInfo: {}, //工单详情
            problemVideos: [], //描述视频
            problemImg: [], //描述图片
            resultVideos: [], //结果描述视频
            resultImg: [], //结果描述图片
            progressesList: [], //诉求流转记录
            flowsList: [], //办理进度

                showPop: false, //弹窗驳回
                rejectText: "", //驳回原因
            showPop: false, //弹窗驳回
            rejectText: "", //驳回原因

                scoreTopHeight: 0, //距离顶部多高
            scoreTopHeight: 0, //距离顶部多高

                userInfo: uni.getStorageSync('userInfo'), //个人信息
                isParty: false, //true 党员 false 管理员
            };
            userInfo: uni.getStorageSync('userInfo'), //个人信息
            isParty: false, //true 党员 false 管理员

            videoContent:[],
        };
    },
    computed: {
        ...mapState(["playFlag"]),
    },
    onPageScroll(e) {
        this.scoreTopHeight = e.scrollTop

    },
    filters: {
        formatTime(val) {
            if (!val) return ''
            return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
        },
        computed: {
            ...mapState(["playFlag"]),
        },
        onPageScroll(e) {
            this.scoreTopHeight = e.scrollTop

        },
        filters: {
            formatTime(val) {
                if (!val) return ''
                return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
            },
            numToWords(val) {
                const words = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
                // 处理 0-10
                if (val >= 0 && val <= 10) return words[val];
                // 处理 11-99
                if (val > 10 && val < 100) {
                    const ten = Math.floor(val / 10);
                    const unit = val % 10;
                    return `${ten > 1 ? words[ten] : ''}十${unit > 0 ? words[unit] : ''}`;
                }
                return val; // 超过99返回原数字
        numToWords(val) {
            const words = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
            // 处理 0-10
            if (val >= 0 && val <= 10) return words[val];
            // 处理 11-99
            if (val > 10 && val < 100) {
                const ten = Math.floor(val / 10);
                const unit = val % 10;
                return `${ten > 1 ? words[ten] : ''}十${unit > 0 ? words[unit] : ''}`;
            }
        },
        onShow() {
            // alert(uni.getStorageSync('token'))
            this.getDetailInfo()
        },
        onLoad(params) {
            if (params.id) {
                this.id = params.id
            }
            this.isParty = uni.getStorageSync('userInfo').identity == 1 ? true : false
            // getUserInfo().then(res => {
            //     if (res.data == null || res.data.accountLevel == 5) {
            //         this.isParty = true
            //     }
            //     this.userInfo = {
            //         ...res.data
            //     }
            // })
        },
        methods: {
            ...mapActions(["playRecording", "pausePlaying"]),
            getVoiceFile(voiceFile) {
                if (!voiceFile || voiceFile.length == 0) return []
                return voiceFile.split(',')
            },
            callPhone(phoneNumber) {
                uni.makePhoneCall({
                    phoneNumber
                });
            },
            // 确认撤回
            comfirm() {
                revoke({
                    complaintId: this.id
                }).then(res => {
                    this.$refs.customPopup.closePopup()
                    uni.showToast({
                        title: '撤回成功',
                        icon: 'none',
                        mask: true,
                    })
                    this.getDetailInfo()
                })
            },
            // 撤回
            revocation() {
                this.$refs.customPopup.showPopup()
            },
            open() {},
            close() {},
            viewImage(item) {
                uni.previewImage({
                    urls: [item]
                })
            },
            // 去大屏播放视频
            openVideo(url) {
                uni.navigateTo({
                    url: `/pages/work-detail/maxVideo?url=${url}`
                })
            },
            // 获取订单详情信息
            getDetailInfo() {
                workOrderDetail({
                    id: this.id
                }).then(res => {
                    if (res.data.images) {
                        this.problemImg = res.data.images.split(',')
                    }
                    if (res.data.videos) {
                        this.problemVideos = res.data.videos.split(',')
                    }
                    if (res.data.completionImages) {
                        this.resultImg = res.data.completionImages.split(',')
                    }
                    if (res.data.completionVideos) {
                        this.resultVideos = res.data.completionVideos.split(',')
                    }
                    // 办理进度
                    if (res.data.complaintProgresses && res.data.complaintProgresses.length > 0) {
                        this.progressesList = res.data.complaintProgresses.map((item) => {
                            return {
                                ...item,
                                imgList: item.imgUrl ? item.imgUrl.split(',') : [],
                                videoList: item.video ? item.video.split(',') : [],
                            }
                        })
                    }
                    // 诉求流转记录
                    if (res.data.complaintFlows && res.data.complaintFlows.length > 0) {
                        this.flowsList = res.data.complaintFlows
                    }

                    this.orderInfo = {
                        ...res.data
                    }

                })
            },
            // 确认驳回
            submitReject() {
                if (!this.rejectText) {
                    return uni.showToast({
                        duration: 1500,
                        title: '请输入驳回原因',
                        mask: true,
                        icon: 'none'
                    })
                }
                if (this.orderInfo.status == 5) { //上报
                    reportAudit({
                        id: this.id,
                        auditResult: 2,
                        rejectReason: this.rejectText
                    }).then(res => {
                        this.showPop = false
                        // this.getDetailInfo()
                        uni.showToast({
                            title: '操作成功',
                            icon: 'success',
                            mask: true
                        })
                        setTimeout(() => {
                            uni.navigateBack()
                        }, 1500)

                    })
                } else { //延期
                    delayAudit({
                        complaintId: this.id,
                        auditResult: 2,
                        rejectReason: this.rejectText
                    }).then(res => {
                        this.showPop = false
                        uni.showToast({
                            title: '操作成功',
                            icon: 'success',
                            mask: true
                        })
                        // this.getDetailInfo()
                        setTimeout(() => {
                            uni.navigateBack()
                        }, 1500)
                    })
                }

            },
            // 确认通过审批
            submitReSolve() {
                if (this.orderInfo.status == 5) { //上报
                    reportAudit({
                        id: this.id,
                        auditResult: 1,
                    }).then(res => {
                        // this.getDetailInfo()
                        uni.showToast({
                            title: '操作成功',
                            icon: 'success',
                            mask: true
                        })
                        setTimeout(() => {
                            uni.navigateBack()
                        }, 1500)
                    })
                } else { //延期
                    delayAudit({
                        complaintId: this.id,
                        auditResult: 1,
                    }).then(res => {
                        uni.showToast({
                            title: '操作成功',
                            icon: 'success',
                            mask: true
                        })
                        // this.getDetailInfo()
                        setTimeout(() => {
                            uni.navigateBack()
                        }, 1500)
                    })
                }
            },
            //延期申请
            applyOverTime() {
                uni.navigateTo({
                    url: `/pages/work-detail/postpone-apply?id=${this.id}`
                })
            },
            // 问题上报
            toUp() {
                uni.navigateTo({
                    url: `/pages/problemReporting/problemReporting?id=${this.id}`
                })
            },
            // 问题下派
            toDown() {
                uni.navigateTo({
                    url: `/pages/dispatchWorkOrder/dispatchWorkOrder?id=${this.id}`
                })
            },
            // 去评价
            toEvaluate() {
                uni.navigateTo({
                    url: `/pages/evaluate/evaluate?id=${this.id}`
                })
            },
            toDetailEvaluate() {
                uni.navigateTo({
                    url: `/pages/evaluate/evaluate-detail?id=${this.id}`
                })
            },
            addProgress() {
                uni.navigateTo({
                    url: `/pages/progress/progress?id=${this.id}`
                })
            },
            resultEntery() {
                uni.navigateTo({
                    url: `/pages/result-entry/index?id=${this.id}`
                })
            },
            toProgressDetail() {
                uni.navigateTo({
                    url: '/pages/progress/progress?type=1&id=' + this.id
                })
            },
            toDelayDetail() {
                uni.navigateTo({
                    url: '/pages/delay/delay?type=1&id=' + this.id
                })
            },
            return val; // 超过99返回原数字
        }
    },
    onShow() {
        // alert(uni.getStorageSync('token'))
        this.getDetailInfo()
    },
    onLoad(params) {
        if (params.id) {
            this.id = params.id
        }
        this.isParty = uni.getStorageSync('userInfo').identity == 1 ? true : false
        // getUserInfo().then(res => {
        //     if (res.data == null || res.data.accountLevel == 5) {
        //         this.isParty = true
        //     }
        //     this.userInfo = {
        //         ...res.data
        //     }
        // })
    },
    methods: {
        ...mapActions(["playRecording", "pausePlaying"]),
        getVoiceFile(voiceFile) {
            if (!voiceFile || voiceFile.length == 0) return []
            this.videoContent = voiceFile.split(',').map(item => {
                return {
                    url: item,
                    playing: false
                }
            })
        },
        onPlayRecording(index) {
            // 先处理本地播放状态
            this.videoContent.forEach((item, i) => {
                item.playing = i === index;
            });
            // 调用store的播放方法，传url
            this.playRecording(this.videoContent[index].url);
        },
        onPausePlaying(index) {
            this.videoContent[index].playing = false;
            this.pausePlaying(this.videoContent[index].url);
        },
        callPhone(phoneNumber) {
            uni.makePhoneCall({
                phoneNumber
            });
        },
        // 确认撤回
        comfirm() {
            revoke({
                complaintId: this.id
            }).then(res => {
                this.$refs.customPopup.closePopup()
                uni.showToast({
                    title: '撤回成功',
                    icon: 'none',
                    mask: true,
                })
                this.getDetailInfo()
            })
        },
        // 撤回
        revocation() {
            this.$refs.customPopup.showPopup()
        },
        open() { },
        close() { },
        viewImage(item) {
            uni.previewImage({
                urls: [item]
            })
        },
        // 去大屏播放视频
        openVideo(url) {
            uni.navigateTo({
                url: `/pages/work-detail/maxVideo?url=${url}`
            })
        },
        // 获取订单详情信息
        getDetailInfo() {
            workOrderDetail({
                id: this.id
            }).then(res => {
                if (res.data.images) {
                    this.problemImg = res.data.images.split(',')
                }
                if (res.data.videos) {
                    this.problemVideos = res.data.videos.split(',')
                }
                if (res.data.completionImages) {
                    this.resultImg = res.data.completionImages.split(',')
                }
                if (res.data.completionVideos) {
                    this.resultVideos = res.data.completionVideos.split(',')
                }
                // 办理进度
                if (res.data.complaintProgresses && res.data.complaintProgresses.length > 0) {
                    this.progressesList = res.data.complaintProgresses.map((item) => {
                        return {
                            ...item,
                            imgList: item.imgUrl ? item.imgUrl.split(',') : [],
                            videoList: item.video ? item.video.split(',') : [],
                        }
                    })
                }
                // 诉求流转记录
                if (res.data.complaintFlows && res.data.complaintFlows.length > 0) {
                    this.flowsList = res.data.complaintFlows
                }

                this.orderInfo = {
                    ...res.data
                }
                this.getVoiceFile(this.orderInfo.voiceFile)

            })
        },
        // 确认驳回
        submitReject() {
            if (!this.rejectText) {
                return uni.showToast({
                    duration: 1500,
                    title: '请输入驳回原因',
                    mask: true,
                    icon: 'none'
                })
            }
            if (this.orderInfo.status == 5) { //上报
                reportAudit({
                    id: this.id,
                    auditResult: 2,
                    rejectReason: this.rejectText
                }).then(res => {
                    this.showPop = false
                    // this.getDetailInfo()
                    uni.showToast({
                        title: '操作成功',
                        icon: 'success',
                        mask: true
                    })
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 1500)

                })
            } else { //延期
                delayAudit({
                    complaintId: this.id,
                    auditResult: 2,
                    rejectReason: this.rejectText
                }).then(res => {
                    this.showPop = false
                    uni.showToast({
                        title: '操作成功',
                        icon: 'success',
                        mask: true
                    })
                    // this.getDetailInfo()
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 1500)
                })
            }

        },
        // 确认通过审批
        submitReSolve() {
            if (this.orderInfo.status == 5) { //上报
                reportAudit({
                    id: this.id,
                    auditResult: 1,
                }).then(res => {
                    // this.getDetailInfo()
                    uni.showToast({
                        title: '操作成功',
                        icon: 'success',
                        mask: true
                    })
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 1500)
                })
            } else { //延期
                delayAudit({
                    complaintId: this.id,
                    auditResult: 1,
                }).then(res => {
                    uni.showToast({
                        title: '操作成功',
                        icon: 'success',
                        mask: true
                    })
                    // this.getDetailInfo()
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 1500)
                })
            }
        },
        //延期申请
        applyOverTime() {
            uni.navigateTo({
                url: `/pages/work-detail/postpone-apply?id=${this.id}`
            })
        },
        // 问题上报
        toUp() {
            uni.navigateTo({
                url: `/pages/problemReporting/problemReporting?id=${this.id}`
            })
        },
        // 问题下派
        toDown() {
            uni.navigateTo({
                url: `/pages/dispatchWorkOrder/dispatchWorkOrder?id=${this.id}`
            })
        },
        // 去评价
        toEvaluate() {
            uni.navigateTo({
                url: `/pages/evaluate/evaluate?id=${this.id}`
            })
        },
        toDetailEvaluate() {
            uni.navigateTo({
                url: `/pages/evaluate/evaluate-detail?id=${this.id}`
            })
        },
        addProgress() {
            uni.navigateTo({
                url: `/pages/progress/progress?id=${this.id}`
            })
        },
        resultEntery() {
            uni.navigateTo({
                url: `/pages/result-entry/index?id=${this.id}`
            })
        },
        toProgressDetail() {
            uni.navigateTo({
                url: '/pages/progress/progress?type=1&id=' + this.id
            })
        },
        toDelayDetail() {
            uni.navigateTo({
                url: '/pages/delay/delay?type=1&id=' + this.id
            })
        },
    }
}
</script>
<style>
    page {
        background: linear-gradient(180deg, #FFFFFF 0%, #F9F9F9 6%, #F8F8F8 100%);
    }
page {
    background: linear-gradient(180deg, #FFFFFF 0%, #F9F9F9 6%, #F8F8F8 100%);
}
</style>

<style lang="scss" scoped>
    .bgcolor1 {
        background: #FFF1F4;
        box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
    }
.bgcolor1 {
    background: #FFF1F4;
    box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
}

    .color5 {
        color: #666160;
    }
.color5 {
    color: #666160;
}

    // 处理 u-popup 组件层级过高,将 uni.showToast 覆盖问题
    /deep/ .u-transition.u-fade-enter-to.u-fade-enter-active {
        z-index: 997 !important;
    }
// 处理 u-popup 组件层级过高,将 uni.showToast 覆盖问题
/deep/ .u-transition.u-fade-enter-to.u-fade-enter-active {
    z-index: 997 !important;
}

    .topColor {
        height: 346rpx;
        background: linear-gradient(180deg, #FFDCDB 0%, rgba(255, 255, 255, 0) 100%);
        // padding: 176rpx 27rpx 17rpx 27rpx;
    }
.topColor {
    height: 346rpx;
    background: linear-gradient(180deg, #FFDCDB 0%, rgba(255, 255, 255, 0) 100%);
    // padding: 176rpx 27rpx 17rpx 27rpx;
}

    .allContent {
        margin-top: -243rpx;
        padding: 0 31rpx 178rpx 31rpx;
.allContent {
    margin-top: -243rpx;
    padding: 0 31rpx 178rpx 31rpx;


        .topStatus {
            .status {
                font-weight: 600;
                font-size: 44rpx;
                color: #000000;
                line-height: 62rpx;
                margin-bottom: 15rpx;
            }

            .tit {
                font-size: 27rpx;
                color: rgba(0, 0, 0, 0.8);
                line-height: 38rpx;
                // margin-bottom: 17rpx;
            }

            .plainIcon {
                width: 36rpx;
                height: 36rpx;
            }

            .explain {
                font-weight: 600;
                font-size: 23rpx;
                color: rgba(0, 0, 0, 0.6);
                line-height: 33rpx;
                margin-left: 8rpx;
            }

            .overTimeIcon {
                width: 30.77rpx;
                height: 30.77rpx;
                margin-right: 15rpx;
            }

            .overTime {
                font-weight: 400;
                font-size: 23rpx;
                color: #FF4948;
                line-height: 33rpx;
            }

            .day {
                margin: -11rpx 12rpx 0 9rpx;
                background: #FFEAEA;
                border-radius: 19rpx;
                border: 2rpx solid #FF4948;
                padding: 4rpx 24rpx;
                font-weight: 600;
                font-size: 42rpx;
                color: #FF4948;
                line-height: 42rpx;
            }
    .topStatus {
        .status {
            font-weight: 600;
            font-size: 44rpx;
            color: #000000;
            line-height: 62rpx;
            margin-bottom: 15rpx;
        }

        .topMore {
            padding: 8rpx 31rpx;
            margin: 19rpx -31rpx 0 -31rpx;
            background: linear-gradient(270deg, rgba(102, 102, 102, 0) 0%, rgba(102, 102, 102, 0.14) 100%);

            .name {
                font-weight: 600;
                font-size: 23rpx;
                color: rgba(0, 0, 0, 0.8);
                line-height: 33rpx;
            }

            .more {
                font-weight: 600;
                font-size: 23rpx;
                color: rgba(0, 0, 0, 0.6);
                line-height: 33rpx;
            }

            .moreIcon {
                width: 19.23rpx;
                height: 19.23rpx;
                margin-left: 15rpx;
            }
        .tit {
            font-size: 27rpx;
            color: rgba(0, 0, 0, 0.8);
            line-height: 38rpx;
            // margin-bottom: 17rpx;
        }

        .topMore1 {
            margin-top: 38rpx !important;
        .plainIcon {
            width: 36rpx;
            height: 36rpx;
        }

        .card1 {
            margin-top: 21rpx;
        .explain {
            font-weight: 600;
            font-size: 23rpx;
            color: rgba(0, 0, 0, 0.6);
            line-height: 33rpx;
            margin-left: 8rpx;
        }

        .overTimeIcon {
            width: 30.77rpx;
            height: 30.77rpx;
            margin-right: 15rpx;
        }

        .overTime {
            font-weight: 400;
            font-size: 23rpx;
            color: #FF4948;
            line-height: 33rpx;
        }

        .day {
            margin: -11rpx 12rpx 0 9rpx;
            background: #FFEAEA;
            border-radius: 19rpx;
            border: 2rpx solid #FF4948;
            padding: 4rpx 24rpx;
            font-weight: 600;
            font-size: 42rpx;
            color: #FF4948;
            line-height: 42rpx;
        }
    }

    .topMore {
        padding: 8rpx 31rpx;
        margin: 19rpx -31rpx 0 -31rpx;
        background: linear-gradient(270deg, rgba(102, 102, 102, 0) 0%, rgba(102, 102, 102, 0.14) 100%);

        .name {
            font-weight: 600;
            font-size: 23rpx;
            color: rgba(0, 0, 0, 0.8);
            line-height: 33rpx;
        }

        .more {
            font-weight: 600;
            font-size: 23rpx;
            color: rgba(0, 0, 0, 0.6);
            line-height: 33rpx;
        }

        .moreIcon {
            width: 19.23rpx;
            height: 19.23rpx;
            margin-left: 15rpx;
        }
    }

    .topMore1 {
        margin-top: 38rpx !important;
    }

    .card1 {
        margin-top: 21rpx;


            .topIcon {
                margin-top: 17rpx;
                width: 26.23rpx;
                height: 26.23rpx;

            }

            .proLine {
                flex: 1;
                width: 4rpx;
                min-height: 50rpx;
                background: rgba(0, 0, 0, 0.06);
                border-radius: 3rpx;
            }

            .infoCard {
                flex: 1;
                background: #FFFFFF;
                box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.06);
                padding: 13rpx 30.77rpx 19rpx 31rpx;
                border-radius: 27rpx;

                .label {
                    font-weight: 400;
                    font-size: 27rpx;
                    color: rgba(0, 0, 0, 0.88);
                    line-height: 77rpx;
                }

                .value {
                    max-width: 403rpx;
                    font-weight: 500;
                    font-size: 27rpx;
                    color: rgba(0, 0, 0, 0.88);
                    line-height: 77rpx;
                }
            }
        .topIcon {
            margin-top: 17rpx;
            width: 26.23rpx;
            height: 26.23rpx;

        }

        .cardInfo {
            margin-top: 38.46rpx;
        .proLine {
            flex: 1;
            width: 4rpx;
            min-height: 50rpx;
            background: rgba(0, 0, 0, 0.06);
            border-radius: 3rpx;
        }

        .infoCard {
            flex: 1;
            background: #FFFFFF;
            box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
            border-radius: 8rpx;
            padding: 21rpx 31rpx 38rpx 31rpx;
            box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.06);
            padding: 13rpx 30.77rpx 19rpx 31rpx;
            border-radius: 27rpx;
            background: linear-gradient(180deg, #FFDCDB 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 100%);

            .title {
                font-weight: 600;
                font-size: 23rpx;
                color: rgba(0, 0, 0, 0.88);
                line-height: 33rpx;
                text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
            }

            .apply {
                font-weight: 600;
                font-size: 23rpx;
                color: #FF4948;
                line-height: 33rpx;
                margin-right: 15rpx;
            }

            .rightIcon {
                width: 19.23rpx;
                height: 19.23rpx;
            }

            .addressCard {
                margin: 33rpx 10rpx;
                padding: 33rpx 27rpx;
                background: linear-gradient(270deg, rgba(255, 241, 0, 0.5) 0%, rgba(255, 249, 172, 0.25) 48%, rgba(255, 255, 255, 0.2) 100%, #FFFFFF 100%);
                border-radius: 19rpx;
                display: flex;
                justify-content: space-between;

                .address {
                    font-weight: 500;
                    font-size: 27rpx;
                    color: #000000;
                    line-height: 38rpx;
                    text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
                }

                .addressIcon {
                    width: 23.08rpx;
                    height: 25.64rpx;
                }
            }

            .label {
                font-weight: 400;
@@ -905,104 +856,290 @@
                color: rgba(0, 0, 0, 0.88);
                line-height: 77rpx;
            }

        }

        .problem {
            border-radius: 27rpx;
            margin-top: 38.46rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
            padding: 0 31rpx 34rpx 31rpx;
    }

            .title {
                padding-top: 34rpx;
                font-weight: 600;
    .cardInfo {
        margin-top: 38.46rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
        border-radius: 8rpx;
        padding: 21rpx 31rpx 38rpx 31rpx;
        border-radius: 27rpx;
        background: linear-gradient(180deg, #FFDCDB 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 100%);

        .title {
            font-weight: 600;
            font-size: 23rpx;
            color: rgba(0, 0, 0, 0.88);
            line-height: 33rpx;
            text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
        }

        .apply {
            font-weight: 600;
            font-size: 23rpx;
            color: #FF4948;
            line-height: 33rpx;
            margin-right: 15rpx;
        }

        .rightIcon {
            width: 19.23rpx;
            height: 19.23rpx;
        }

        .addressCard {
            margin: 33rpx 10rpx;
            padding: 33rpx 27rpx;
            background: linear-gradient(270deg, rgba(255, 241, 0, 0.5) 0%, rgba(255, 249, 172, 0.25) 48%, rgba(255, 255, 255, 0.2) 100%, #FFFFFF 100%);
            border-radius: 19rpx;
            display: flex;
            justify-content: space-between;

            .address {
                font-weight: 500;
                font-size: 27rpx;
                color: rgba(0, 0, 0, 0.88);
                color: #000000;
                line-height: 38rpx;
                text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
                margin-bottom: 27rpx;
            }

            .desc {
                background: #F8F8F8;
                // box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
                border-radius: 8rpx;
                padding: 29rpx 0 121rpx 0;
            .addressIcon {
                width: 23.08rpx;
                height: 25.64rpx;
            }
        }

                .top {
                    padding: 0 31rpx;
        .label {
            font-weight: 400;
            font-size: 27rpx;
            color: rgba(0, 0, 0, 0.88);
            line-height: 77rpx;
        }

        .value {
            max-width: 403rpx;
            font-weight: 500;
            font-size: 27rpx;
            color: rgba(0, 0, 0, 0.88);
            line-height: 77rpx;
        }

    }

    .problem {
        border-radius: 27rpx;
        margin-top: 38.46rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
        padding: 0 31rpx 34rpx 31rpx;

        .title {
            padding-top: 34rpx;
            font-weight: 600;
            font-size: 27rpx;
            color: rgba(0, 0, 0, 0.88);
            line-height: 38rpx;
            text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
            margin-bottom: 27rpx;
        }

        .desc {
            background: #F8F8F8;
            // box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
            border-radius: 8rpx;
            padding: 29rpx 0 121rpx 0;

            .top {
                padding: 0 31rpx;
                font-size: 27rpx;
                color: rgba(0, 0, 0, 0.8);
                line-height: 38rpx;
            }

            .line1 {
                margin: 27rpx 0;
                height: 2rpx;
                background: rgba(0, 10, 26, 0.07);
            }

            .context {
                padding: 0 31rpx;
                font-size: 27rpx;
                color: rgba(0, 0, 0, 0.8);
                line-height: 38rpx;
            }
        }

        .descPic {
            display: flex;
            flex-wrap: wrap;

            .picItem {
                margin-right: 15rpx;

                .img {
                    width: 140.38rpx;
                    height: 140.38rpx;
                    border-radius: 7.69rpx;
                }
            }
        }
    }

    .progress {
        border-radius: 27rpx;
        margin-top: 38.46rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
        padding: 34rpx 31rpx;

        .title {
            font-weight: 600;
            font-size: 27rpx;
            color: rgba(0, 0, 0, 0.88);
            line-height: 38rpx;
            text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
            margin-bottom: 48rpx;
        }

        .proCard {
            .proItem {
                display: flex;
                padding-bottom: 46rpx;

                .proIcon {
                    width: 26.23rpx;
                    height: 26.23rpx;
                    margin: 10rpx 0;
                }

                .proLine {
                    flex: 1;
                    width: 4rpx;
                    min-height: 50rpx;
                    background: rgba(0, 0, 0, 0.06);
                    border-radius: 3rpx;
                }


                .name {
                    font-weight: 400;
                    font-size: 27rpx;
                    color: rgba(0, 0, 0, 0.8);
                    line-height: 38rpx;
                }

                .line1 {
                    margin: 27rpx 0;
                    height: 2rpx;
                    background: rgba(0, 10, 26, 0.07);
                .time {
                    font-weight: 400;
                    font-size: 23rpx;
                    color: rgba(0, 0, 0, 0.4);
                    line-height: 33rpx;
                }

                .context {
                    padding: 0 31rpx;
                    font-size: 27rpx;
                    color: rgba(0, 0, 0, 0.8);
                    line-height: 38rpx;
                }
            }

            .descPic {
                display: flex;
                flex-wrap: wrap;
                .proImg {
                    display: flex;
                    flex-wrap: wrap;

                .picItem {
                    margin-right: 15rpx;
                    .imgOrVedio {
                        margin-right: 17rpx;
                        position: relative;

                    .img {
                        width: 140.38rpx;
                        height: 140.38rpx;
                        border-radius: 7.69rpx;
                        .videoImg {
                            width: 140.38rpx;
                            height: 140.38rpx;
                            border-radius: 7.69rpx;
                            margin-top: 19rpx;
                            position: relative;
                        }

                        .img {
                            width: 140rpx;
                            height: 140rpx;
                            border-radius: 8rpx;
                            margin-top: 19rpx;
                        }

                        .videoOpen {
                            position: absolute;
                            top: 10rpx;
                            left: 0;
                            z-index: 99;
                            width: 140rpx;
                            height: 140rpx;
                            border-radius: 8rpx;
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            .video {
                                z-index: 999;
                                width: 140rpx;
                                height: 140rpx;
                            }
                        }
                    }
                }
            }

            .proItem:last-child {
                .proLine {
                    display: none;
                }
            }
        }
    }

    .careRequire {
        border-radius: 27rpx;
        margin-top: 38.46rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
        padding: 34rpx 31rpx;

        .title {
            font-weight: 600;
            font-size: 27rpx;
            color: rgba(0, 0, 0, 0.88);
            line-height: 38rpx;
            text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
            margin-bottom: 38rpx;
        }

        .progress {
            border-radius: 27rpx;
            margin-top: 38.46rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
            padding: 34rpx 31rpx;
        .proCard {
            .proItem {
                display: flex;

            .title {
                font-weight: 600;
                font-size: 27rpx;
                color: rgba(0, 0, 0, 0.88);
                line-height: 38rpx;
                text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
                margin-bottom: 48rpx;
            }

            .proCard {
                .proItem {
                    display: flex;
                    padding-bottom: 46rpx;
                .proIcon {
                    width: 26.23rpx;
                    height: 26.23rpx;
                    margin: 23rpx 0 19rpx 0;
                }

                    .proIcon {
                        width: 26.23rpx;
                        height: 26.23rpx;
                        margin: 10rpx 0;
                    }
                .proLine {
                    flex: 1;
                    width: 4rpx;
                    min-height: 50rpx;
                    background: rgba(0, 0, 0, 0.06);
                    border-radius: 3rpx;
                }

                    .proLine {
                        flex: 1;
                        width: 4rpx;
                        min-height: 50rpx;
                        background: rgba(0, 0, 0, 0.06);
                        border-radius: 3rpx;
                    }

                .requireItem {
                    flex: 1;
                    background: #F9F9F9;
                    box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
                    border-radius: 8rpx;
                    padding: 31rpx;
                    margin-bottom: 46rpx;

                    .name {
                        font-weight: 400;
@@ -1018,406 +1155,290 @@
                        line-height: 33rpx;
                    }

                    .context {
                        font-size: 27rpx;
                        color: rgba(0, 0, 0, 0.8);
                        line-height: 38rpx;
                    }

                    .proImg {
                        display: flex;
                        flex-wrap: wrap;

                        .imgOrVedio {
                            margin-right: 17rpx;
                            position: relative;

                            .videoImg {
                                width: 140.38rpx;
                                height: 140.38rpx;
                                border-radius: 7.69rpx;
                                margin-top: 19rpx;
                                position: relative;
                            }

                            .img {
                                width: 140rpx;
                                height: 140rpx;
                                border-radius: 8rpx;
                                margin-top: 19rpx;
                            }

                            .videoOpen {
                                position: absolute;
                                top: 10rpx;
                                left: 0;
                                z-index: 99;
                                width: 140rpx;
                                height: 140rpx;
                                border-radius: 8rpx;
                                display: flex;
                                align-items: center;
                                justify-content: center;

                                .video {
                                    z-index: 999;
                                    width: 140rpx;
                                    height: 140rpx;
                                }
                            }
                        }
                    .opt1 {
                        color: rgba(0, 0, 0, 0.10) !important;
                    }
                }

                .proItem:last-child {
                    .proLine {
                        display: none;
                    }


            }

            .proItem:last-child {
                .proLine {
                    display: none;
                }
            }
        }

        .careRequire {
            border-radius: 27rpx;
            margin-top: 38.46rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
            padding: 34rpx 31rpx;

            .title {
                font-weight: 600;
                font-size: 27rpx;
                color: rgba(0, 0, 0, 0.88);
                line-height: 38rpx;
                text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
                margin-bottom: 38rpx;
            }

            .proCard {
                .proItem {
                    display: flex;


                    .proIcon {
                        width: 26.23rpx;
                        height: 26.23rpx;
                        margin: 23rpx 0 19rpx 0;
                    }

                    .proLine {
                        flex: 1;
                        width: 4rpx;
                        min-height: 50rpx;
                        background: rgba(0, 0, 0, 0.06);
                        border-radius: 3rpx;
                    }

                    .requireItem {
                        flex: 1;
                        background: #F9F9F9;
                        box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
                        border-radius: 8rpx;
                        padding: 31rpx;
                        margin-bottom: 46rpx;

                        .name {
                            font-weight: 400;
                            font-size: 27rpx;
                            color: rgba(0, 0, 0, 0.8);
                            line-height: 38rpx;
                        }

                        .time {
                            font-weight: 400;
                            font-size: 23rpx;
                            color: rgba(0, 0, 0, 0.4);
                            line-height: 33rpx;
                        }

                        .opt1 {
                            color: rgba(0, 0, 0, 0.10) !important;
                        }
                    }



                }

                .proItem:last-child {
                    .proLine {
                        display: none;
                    }
                }
            }
        }

        .resultDesc {
            background: #FFFFFF;
            box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
            margin-top: 27rpx;
            padding: 31rpx 31rpx 31rpx 27rpx;
            border-radius: 27rpx;

            .topInfo {
                background: rgba(252, 141, 85, 0.1);
                border-radius: 8rpx;
                padding: 19rpx 27rpx;

                .name {
                    font-size: 23rpx;
                    color: #000000;
                    line-height: 33rpx;
                    margin-right: 8rpx;
                }

                .value {
                    font-size: 23rpx;
                    color: #000000;
                    line-height: 33rpx;
                }
            }

            .title {
                font-weight: 600;
                font-size: 27rpx;
                color: rgba(0, 0, 0, 0.88);
                line-height: 38rpx;
                margin-top: 38rpx;
                margin-bottom: 27rpx;
            }

            .context {
                padding: 25rpx 30rpx 29rpx 31rpx;

                font-size: 27rpx;
                color: rgba(0, 0, 0, 0.8);
                line-height: 38rpx;
            }


        }
    }

    .descPic {
        display: flex;
        flex-wrap: wrap;
    .resultDesc {
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
        margin-top: 27rpx;
        padding: 31rpx 31rpx 31rpx 27rpx;
        border-radius: 27rpx;

        .picItem {
            margin-right: 15rpx;
        .topInfo {
            background: rgba(252, 141, 85, 0.1);
            border-radius: 8rpx;
            padding: 19rpx 27rpx;

            .name {
                font-size: 23rpx;
                color: #000000;
                line-height: 33rpx;
                margin-right: 8rpx;
            }

            .img {
                width: 140.38rpx;
                height: 140.38rpx;
                border-radius: 7.69rpx;
            .value {
                font-size: 23rpx;
                color: #000000;
                line-height: 33rpx;
            }
        }

        .videoImg {
        .title {
            font-weight: 600;
            font-size: 27rpx;
            color: rgba(0, 0, 0, 0.88);
            line-height: 38rpx;
            margin-top: 38rpx;
            margin-bottom: 27rpx;
        }

        .context {
            padding: 25rpx 30rpx 29rpx 31rpx;

            font-size: 27rpx;
            color: rgba(0, 0, 0, 0.8);
            line-height: 38rpx;
        }


    }
}

.descPic {
    display: flex;
    flex-wrap: wrap;

    .picItem {
        margin-right: 15rpx;


        .img {
            width: 140.38rpx;
            height: 140.38rpx;
            border-radius: 7.69rpx;
            position: relative;
        }

        .videoOpen {
            position: absolute;
            top: 10rpx;
            left: 0;
            z-index: 99;
            width: 140rpx;
            height: 140rpx;
            border-radius: 8rpx;
            display: flex;
            align-items: center;
            justify-content: center;

            .video {
                z-index: 999;
                width: 140rpx;
                height: 140rpx;
            }
        }
    }

    .noData {
        font-size: 27rpx;
        color: rgba(0, 0, 0, 0.40);
        line-height: 38rpx;
    .videoImg {
        width: 140.38rpx;
        height: 140.38rpx;
        border-radius: 7.69rpx;
        position: relative;
    }

    #myVideo {
        z-index: 1;
    }

    .btnButtom {
    .videoOpen {
        position: absolute;
        top: 10rpx;
        left: 0;
        z-index: 99;
        position: fixed;
        bottom: 0;
        width: 100vw;
        box-sizing: border-box;
        padding: 33rpx 31rpx;
        width: 140rpx;
        height: 140rpx;
        border-radius: 8rpx;
        display: flex;
        background-color: #ffffff;
        justify-content: space-between;

        .cancel {
            background: #FFFFFF;
            border: 2rpx solid;
            box-shadow: 0 0 0 5px linear-gradient(270deg, rgba(252, 141, 85, 1), rgba(255, 73, 72, 1));
            border-image-slice: 1;
            border-radius: 38rpx;
            font-size: 27rpx;
            color: #FF4948;
            line-height: 38rpx;
            padding: 19rpx 138rpx;
        }

        .sure {
            background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
            border-radius: 38rpx;
            font-size: 27rpx;
            color: #FFFFFF;
            line-height: 38rpx;
            padding: 19rpx 119rpx 19rpx 119rpx;
        }

        .btnDown {
            background: #FFFFFF;
            border: 2rpx solid;
            box-shadow: 0 0 0 5px linear-gradient(270deg, rgba(252, 141, 85, 1), rgba(255, 73, 72, 1));
            border-image-slice: 1;
            border-radius: 38rpx;
            font-size: 27rpx;
            color: #FF4948;
            line-height: 38rpx;
            padding: 19rpx 13rpx;
        }

        .btnAdd {
            background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
            border-radius: 38rpx;
            font-size: 27rpx;
            color: #FFFFFF;
            line-height: 38rpx;
            padding: 19rpx 15rpx 19rpx 15rpx;
        }

        .partyUp {
            padding: 19rpx 52rpx !important;
        }

        .partyDown {
            padding: 19rpx 25rpx 19rpx 25rpx !important;
        }

        .evaluate {
            padding: 19rpx 310rpx;
        }


    }

    .popup-content {
        background: url('/static/pop@2x.png') no-repeat center center;
        width: 576.92rpx;
        // height: 425rpx;
        border-radius: 19rpx;

        .title-pop {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 35rpx;
            color: rgba(0, 0, 0, 0.8);
            line-height: 35rpx;
            text-align: center;
            margin-top: 46.15rpx;
        }

        .pop-textArea {
            padding: 34rpx 44rpx 0 44rpx;

            ::v-deep .u-textarea {}

        }

        .pop-label {
            font-family: PingFang-SC, PingFang-SC;
            font-weight: 500;
            font-size: 31rpx;
            color: rgba(0, 0, 0, 0.6);
            margin-top: 46.15rpx;
            margin-left: 64.54rpx;
        }

        .pop-select {
            height: 77rpx;
            background: #FFFFFF;
            border-radius: 15rpx;
            border: 2rpx solid rgba(0, 0, 0, 0.15);
            margin-left: 61.54rpx;
            margin-top: 19.23rpx;
            margin-right: 61.54rpx;
            display: flex;
            align-items: center;
            padding-left: 30.77rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 31rpx;
            color: rgba(0, 0, 0, 0.24);
            cursor: pointer;
        }

        .botton-btn {
            display: flex;
            margin-top: 44.23rpx;
            justify-content: center;
            padding-bottom: 55rpx;
        }

        .cancle {
            width: 212rpx;
            height: 77rpx;
            border-radius: 48rpx;
            border: 2rpx solid rgba(0, 0, 0, 0.8);
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 27rpx;
            color: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 32.69rpx;
            cursor: pointer;
        }

        .sure {
            width: 212rpx;
            height: 77rpx;
            background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
            border-radius: 48rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 27rpx;
            color: #FFFFFF;
            cursor: pointer;
        }
    }

    .preview-full {
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #000000;

        .maxVideo {
            width: 100%;
        .video {
            z-index: 999;
            width: 140rpx;
            height: 140rpx;
        }
    }
}

.noData {
    font-size: 27rpx;
    color: rgba(0, 0, 0, 0.40);
    line-height: 38rpx;
}

#myVideo {
    z-index: 1;
}

.btnButtom {
    z-index: 99;
    position: fixed;
    bottom: 0;
    width: 100vw;
    box-sizing: border-box;
    padding: 33rpx 31rpx;
    display: flex;
    background-color: #ffffff;
    justify-content: space-between;

    .cancel {
        background: #FFFFFF;
        border: 2rpx solid;
        box-shadow: 0 0 0 5px linear-gradient(270deg, rgba(252, 141, 85, 1), rgba(255, 73, 72, 1));
        border-image-slice: 1;
        border-radius: 38rpx;
        font-size: 27rpx;
        color: #FF4948;
        line-height: 38rpx;
        padding: 19rpx 138rpx;
    }

    .sure {
        background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
        border-radius: 38rpx;
        font-size: 27rpx;
        color: #FFFFFF;
        line-height: 38rpx;
        padding: 19rpx 119rpx 19rpx 119rpx;
    }

    .btnDown {
        background: #FFFFFF;
        border: 2rpx solid;
        box-shadow: 0 0 0 5px linear-gradient(270deg, rgba(252, 141, 85, 1), rgba(255, 73, 72, 1));
        border-image-slice: 1;
        border-radius: 38rpx;
        font-size: 27rpx;
        color: #FF4948;
        line-height: 38rpx;
        padding: 19rpx 13rpx;
    }

    .btnAdd {
        background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
        border-radius: 38rpx;
        font-size: 27rpx;
        color: #FFFFFF;
        line-height: 38rpx;
        padding: 19rpx 15rpx 19rpx 15rpx;
    }

    .partyUp {
        padding: 19rpx 52rpx !important;
    }

    .partyDown {
        padding: 19rpx 25rpx 19rpx 25rpx !important;
    }

    .evaluate {
        padding: 19rpx 310rpx;
    }


}

.popup-content {
    background: url('/static/pop@2x.png') no-repeat center center;
    width: 576.92rpx;
    // height: 425rpx;
    border-radius: 19rpx;

    .title-pop {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 35rpx;
        color: rgba(0, 0, 0, 0.8);
        line-height: 35rpx;
        text-align: center;
        margin-top: 46.15rpx;
    }

    .pop-textArea {
        padding: 34rpx 44rpx 0 44rpx;

        ::v-deep .u-textarea {}

    }

    .pop-label {
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 500;
        font-size: 31rpx;
        color: rgba(0, 0, 0, 0.6);
        margin-top: 46.15rpx;
        margin-left: 64.54rpx;
    }

    .pop-select {
        height: 77rpx;
        background: #FFFFFF;
        border-radius: 15rpx;
        border: 2rpx solid rgba(0, 0, 0, 0.15);
        margin-left: 61.54rpx;
        margin-top: 19.23rpx;
        margin-right: 61.54rpx;
        display: flex;
        align-items: center;
        padding-left: 30.77rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 31rpx;
        color: rgba(0, 0, 0, 0.24);
        cursor: pointer;
    }

    .botton-btn {
        display: flex;
        margin-top: 44.23rpx;
        justify-content: center;
        padding-bottom: 55rpx;
    }

    .cancle {
        width: 212rpx;
        height: 77rpx;
        border-radius: 48rpx;
        border: 2rpx solid rgba(0, 0, 0, 0.8);
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 27rpx;
        color: rgba(0, 0, 0, 0.8);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 32.69rpx;
        cursor: pointer;
    }

    .sure {
        width: 212rpx;
        height: 77rpx;
        background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
        border-radius: 48rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 27rpx;
        color: #FFFFFF;
        cursor: pointer;
    }
}

.preview-full {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #000000;

    .maxVideo {
        width: 100%;
    }
}
</style>

 H5/store/index.js

@@ -25,18 +25,63 @@
            }
            state.innerAudioContext = uni.createInnerAudioContext();
            state.innerAudioContext.autoplay = true;
            // state.innerAudioContext.src =
            //     'https://haitunyingyu.obs.cn-southwest-2.myhuaweicloud.com/admin/6660c5497ff34ee5b2bddaed01dd3880.wav';	
            state.innerAudioContext.src = url
            // 设置音频格式为MPEG
            state.innerAudioContext.format = 'mpeg';
            state.innerAudioContext.src = url;
			
            // 显示音频信息
            // uni.showToast({
            //     title: '音频链接：' + url,
            //     icon: 'none',
            //     duration: 3000
            // });
			
            // 添加加载事件处理
            state.innerAudioContext.onCanplay(() => {
                console.log('音频可以播放了');
                uni.showToast({
                    title: '音频已准备就绪',
                    icon: 'none',
                    duration: 2000
                });
            });
			
            state.innerAudioContext.onPlay(() => {
                state.playFlag = true;
                uni.showToast({
                    title: '开始播放',
                    icon: 'none',
                    duration: 2000
                });
            });
			
            state.innerAudioContext.onError((res) => {
                // console.log('播放错误', res);
                console.log('播放错误', res);
                uni.showToast({
                    title: '播放错误'+`${res}`,
                    icon: 'none',
                    duration: 3000
                });
                // 显示具体的错误信息
                // let errorMsg = '音频播放失败';
                // if (res.errMsg) {
                //     errorMsg += '：' + res.errMsg;
                // }
                // uni.showToast({
                //     title: errorMsg,
                //     icon: 'none',
                //     duration: 3000
                // });
                dispatch('stopPlaying')
            });
			
            state.innerAudioContext.onEnded((res) => {
                // console.log('播放自然结束', res);
                console.log('播放自然结束', res);
                uni.showToast({
                    title: '播放结束',
                    icon: 'none',
                    duration: 2000
                });
                dispatch('stopPlaying')
            });
        },

 H5/uni_modules/mumu-recorder/components/mumu-recorder/mumu-recorder.vue

@@ -70,7 +70,7 @@
                this.chunks.push(e.data)
            },
            saveRecordingData() {
                const blob = new Blob(this.chunks, { 'type': 'audio/mpeg' }),
                const blob = new Blob(this.chunks, { 'type': 'audio/mp3' }),
                    localUrl = URL.createObjectURL(blob)

                const endTime = new Date().getTime()